/* =========================================================================
   미진이의 연병장 // APM BOOTCAMP
   프로토스 사이오닉 / 칼라 에너지 콘솔 테마
   ========================================================================= */

:root {
  /* 보이드 */
  --void-0: #070611;
  --void-1: #0c0a1a;
  --void-2: #15122a;

  /* 프로토스 골드 */
  --gold: #f4cd78;
  --gold-bright: #ffe6a8;
  --gold-deep: #c79443;

  /* 사이오닉 에너지 (청록) */
  --teal: #34ead0;
  --teal-bright: #7af6e6;
  --teal-deep: #1b8f87;

  /* 보이드 바이올렛 */
  --violet: #9a7bff;
  --violet-bright: #c4b0ff;

  /* 기능색 */
  --green: #58f0b4;
  --red: #ff5a7a;

  /* 텍스트 */
  --text: #ece6f5;
  --text-dim: #9a93b5;
  --text-faint: #5b5478;

  /* 라인 */
  --line-gold: rgba(244, 205, 120, 0.18);
  --line-teal: rgba(52, 234, 208, 0.16);

  /* 폰트 */
  --font-title: 'Gugi', 'Gothic A1', sans-serif;
  --font-ko: 'Gothic A1', sans-serif;
  --font-cinzel: 'Cinzel', serif;
  --font-mono: 'Share Tech Mono', ui-monospace, monospace;

  --metal-gold: linear-gradient(
    135deg,
    #6e4f1f 0%, #f4cd78 16%, #ffe6a8 31%,
    #b9852f 50%, #f4cd78 68%, #ffe6a8 84%, #7a5722 100%
  );
}

/* ---- 리셋 / 기본 ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  font-family: var(--font-ko);
  color: var(--text);
  background:
    radial-gradient(130% 90% at 50% -10%, rgba(244, 205, 120, 0.10), transparent 55%),
    radial-gradient(120% 110% at 50% 115%, rgba(52, 234, 208, 0.10), transparent 55%),
    radial-gradient(90% 80% at 80% 30%, rgba(154, 123, 255, 0.07), transparent 60%),
    radial-gradient(circle at 50% 45%, #0f0c20 0%, #080714 55%, #050409 100%);
  overflow-x: hidden;
}

/* 챔퍼(크리스탈 절단) 공용 */
.cut {
  --c: 12px;
  clip-path: polygon(
    var(--c) 0, calc(100% - var(--c)) 0,
    100% var(--c), 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, var(--c) 100%,
    0 calc(100% - var(--c)), 0 var(--c)
  );
}

/* =========================================================================
   배경 레이어
   ========================================================================= */
.bg-sweep, .bg-grid, .bg-motes, .bg-scanlines, .bg-grain, .bg-vignette {
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
}

/* 칼라 에너지 후광 (회전) */
.bg-sweep {
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(244, 205, 120, 0.10) 40deg,
      transparent 90deg,
      rgba(52, 234, 208, 0.10) 160deg,
      transparent 220deg,
      rgba(154, 123, 255, 0.07) 300deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, #000 10%, transparent 72%);
          mask: radial-gradient(closest-side, #000 10%, transparent 72%);
  animation: sweepSpin 64s linear infinite;
}

/* 크리스탈 육각 격자 */
.bg-grid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 0L56 16.3V49L28 65.3L0 49V16.3z M28 65.3L56 81.7M28 65.3L0 81.7M28 65.3V98' fill='none' stroke='%23f4cd78' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 98px;
  opacity: 0.05;
  -webkit-mask: radial-gradient(ellipse 80% 80% at 50% 45%, #000 20%, transparent 78%);
          mask: radial-gradient(ellipse 80% 80% at 50% 45%, #000 20%, transparent 78%);
  animation: gridDrift 70s linear infinite;
}

/* 사이오닉 입자 (골드 + 청록 motes) */
.bg-motes::before, .bg-motes::after {
  content: "";
  position: absolute;
  top: 12%; left: 50%;
  width: 2px; height: 2px;
  border-radius: 50%;
}
.bg-motes::before {
  background: var(--gold);
  box-shadow:
    -480px 40px 0 0 var(--gold), -360px 280px 0 0 var(--gold-bright),
    -300px -120px 0 0 var(--gold), -150px 420px 0 0 var(--gold),
    -60px 120px 0 0 var(--gold-bright), 40px 320px 0 0 var(--gold),
    120px -40px 0 0 var(--gold), 250px 200px 0 0 var(--gold-bright),
    360px 480px 0 0 var(--gold), 440px 60px 0 0 var(--gold),
    520px 360px 0 0 var(--gold-bright), -220px 540px 0 0 var(--gold),
    180px 560px 0 0 var(--gold), -420px 360px 0 0 var(--gold-bright);
  animation: moteFloat 24s ease-in-out infinite alternate;
  opacity: 0.55;
}
.bg-motes::after {
  background: var(--teal);
  box-shadow:
    -520px 220px 0 0 var(--teal), -340px 80px 0 0 var(--teal-bright),
    -200px 300px 0 0 var(--teal), -90px 520px 0 0 var(--teal),
    30px 180px 0 0 var(--teal-bright), 150px 380px 0 0 var(--teal),
    280px 60px 0 0 var(--teal), 400px 280px 0 0 var(--teal-bright),
    500px 160px 0 0 var(--teal), -300px 460px 0 0 var(--teal),
    220px 500px 0 0 var(--teal-bright), 470px 440px 0 0 var(--teal);
  animation: moteFloat 30s ease-in-out infinite alternate-reverse;
  opacity: 0.45;
}

/* 미세 스캔라인 */
.bg-scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  opacity: 0.35;
  animation: scanMove 8s linear infinite;
}

/* 노이즈 그레인 */
.bg-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
}

/* 비네트 */
.bg-vignette {
  background: radial-gradient(ellipse 70% 70% at 50% 45%, transparent 50%, rgba(4, 3, 9, 0.7) 100%);
}

/* =========================================================================
   콘솔 (골드 프레임 + 보이드 패널)
   ========================================================================= */
#app.console {
  position: relative;
  z-index: 2;
  width: min(94vw, 760px);
  padding: 2px;
  background: var(--metal-gold);
  clip-path: polygon(
    32px 0, calc(100% - 32px) 0,
    100% 32px, 100% calc(100% - 16px),
    calc(100% - 16px) 100%, 16px 100%,
    0 calc(100% - 16px), 0 32px
  );
  filter:
    drop-shadow(0 24px 70px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 24px rgba(244, 205, 120, 0.22))
    drop-shadow(0 0 50px rgba(52, 234, 208, 0.10));
  animation: revealUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.console__inner {
  position: relative;
  padding: clamp(20px, 3.4vw, 34px) clamp(18px, 3.6vw, 38px) clamp(18px, 3vw, 28px);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(244, 205, 120, 0.10), transparent 52%),
    radial-gradient(120% 120% at 50% 118%, rgba(52, 234, 208, 0.09), transparent 55%),
    linear-gradient(180deg, rgba(18, 15, 38, 0.94), rgba(9, 7, 20, 0.96));
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  clip-path: polygon(
    31px 0, calc(100% - 31px) 0,
    100% 31px, 100% calc(100% - 15px),
    calc(100% - 15px) 100%, 15px 100%,
    0 calc(100% - 15px), 0 31px
  );
  overflow: hidden;
}

/* 크리스탈 코너 장식 (다이아몬드) */
.corners i {
  position: absolute;
  width: 9px; height: 9px;
  transform: rotate(45deg);
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 10px rgba(244, 205, 120, 0.6);
  opacity: 0.8;
}
.corners i:nth-child(1) { top: 15px; left: 15px; }
.corners i:nth-child(2) { top: 15px; right: 15px; }
.corners i:nth-child(3) { bottom: 13px; right: 13px; border-color: var(--teal); box-shadow: 0 0 10px rgba(52, 234, 208, 0.6); }
.corners i:nth-child(4) { bottom: 13px; left: 13px; border-color: var(--teal); box-shadow: 0 0 10px rgba(52, 234, 208, 0.6); }

/* =========================================================================
   상단 상태 바
   ========================================================================= */
.masthead__status {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.masthead__status .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px var(--teal);
  animation: dotPulse 2s ease-in-out infinite;
}
.status-spacer { flex: 1; }
.mute {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--line-gold);
  border-radius: 4px;
  width: 26px; height: 24px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-shadow: 0 0 8px rgba(244, 205, 120, 0.5);
}
.mute:hover { background: rgba(244, 205, 120, 0.12); color: var(--gold-bright); }
.mute[aria-pressed="true"] { color: var(--text-faint); border-color: rgba(91, 84, 120, 0.4); text-shadow: none; position: relative; }
.mute[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: 6px 3px; border-top: 1.5px solid var(--red);
  transform: rotate(-45deg); transform-origin: center;
}

/* =========================================================================
   타이틀
   ========================================================================= */
.masthead { text-align: center; margin: 14px 0 18px; }
.title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(30px, 6.4vw, 50px);
  letter-spacing: 1px;
  line-height: 1.05;
  background: linear-gradient(180deg, #fff0cf 0%, var(--gold) 48%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(244, 205, 120, 0.35));
  animation: titleGlow 4.5s ease-in-out infinite;
}
.title .star {
  -webkit-text-fill-color: var(--teal);
  color: var(--teal);
  filter: drop-shadow(0 0 12px rgba(52, 234, 208, 0.7));
  font-size: 0.78em;
  vertical-align: 0.06em;
}
.subtitle {
  margin: 9px 0 0;
  font-family: var(--font-cinzel);
  font-weight: 600;
  font-size: clamp(10px, 2vw, 13px);
  letter-spacing: 4px;
  color: var(--teal);
  opacity: 0.82;
  text-shadow: 0 0 14px rgba(52, 234, 208, 0.3);
}

/* =========================================================================
   진행 막대
   ========================================================================= */
.progress {
  position: relative;
  height: 5px;
  margin: 4px 0 18px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-gold);
}
.progress__fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal) 40%, var(--gold) 100%);
  box-shadow: 0 0 14px rgba(52, 234, 208, 0.6);
  transition: width 0.2s linear;
}
#app.low-time .progress__fill {
  background: linear-gradient(90deg, #8a1f3a, var(--red));
  box-shadow: 0 0 16px rgba(255, 90, 122, 0.7);
}

/* =========================================================================
   실시간 지표
   ========================================================================= */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 11px 6px 9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line-gold);
  border-radius: 9px;
  position: relative;
}
.stat::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}
.stat__label {
  font-family: var(--font-ko);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-dim);
}
.stat__value {
  font-family: var(--font-mono);
  font-size: clamp(20px, 4.4vw, 28px);
  line-height: 1;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.stat__value small {
  font-size: 0.42em;
  letter-spacing: 1px;
  color: var(--text-faint);
}
.stat--time .stat__value { color: var(--teal); text-shadow: 0 0 14px rgba(52, 234, 208, 0.4); }
.stat--ok   .stat__value { color: var(--green); text-shadow: 0 0 14px rgba(88, 240, 180, 0.4); }
.stat--no   .stat__value { color: var(--red); text-shadow: 0 0 14px rgba(255, 90, 122, 0.4); }
.stat--cpm  .stat__value { color: var(--gold); text-shadow: 0 0 14px rgba(244, 205, 120, 0.45); }

#app.low-time .stat--time .stat__value {
  color: var(--red);
  text-shadow: 0 0 16px rgba(255, 90, 122, 0.6);
  animation: lowPulse 0.85s ease-in-out infinite;
}

.stat__value.bump { animation: bump 0.28s cubic-bezier(0.18, 1.4, 0.4, 1); }

/* =========================================================================
   콤보
   ========================================================================= */
.combo {
  display: none;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: -4px 0 14px;
}
.combo__label {
  font-family: var(--font-cinzel);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--teal);
}
.combo__n {
  font-family: var(--font-mono);
  font-size: 26px;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(244, 205, 120, 0.6);
}
.combo.pop .combo__n { animation: comboPop 0.34s cubic-bezier(0.18, 1.5, 0.4, 1); }
.combo.combo--hot .combo__n { color: var(--teal-bright); text-shadow: 0 0 20px rgba(122, 246, 230, 0.8); }
.combo.combo--fire .combo__n { color: var(--violet-bright); text-shadow: 0 0 26px rgba(154, 123, 255, 0.9); }
.combo.combo--fire .combo__label { color: var(--violet); }

/* =========================================================================
   목표 시퀀스 디스플레이
   ========================================================================= */
.readout-wrap { position: relative; margin-bottom: 14px; }
.readout-tag {
  position: absolute;
  top: -7px; left: 18px;
  z-index: 3;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--teal);
  background: var(--void-1);
}
.readout {
  --c: 16px;
  position: relative;
  padding: clamp(26px, 5vw, 44px) 18px;
  text-align: center;
  background:
    repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,0.25) 3px 4px),
    radial-gradient(120% 140% at 50% 0%, rgba(52, 234, 208, 0.06), transparent 60%),
    linear-gradient(180deg, #0a0816, #060410);
  box-shadow:
    inset 0 0 0 1px var(--line-teal),
    inset 0 0 40px rgba(0, 0, 0, 0.7),
    inset 0 0 26px rgba(52, 234, 208, 0.05);
  font-family: var(--font-mono);
  font-size: clamp(30px, 8vw, 58px);
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  user-select: none;
  overflow: hidden;
}
.readout .ch { transition: color 0.06s linear, text-shadow 0.06s linear; }
.readout .ch--ok {
  color: var(--green);
  text-shadow: 0 0 14px rgba(88, 240, 180, 0.7);
}
.readout .ch--cur {
  color: var(--gold-bright);
  text-shadow: 0 0 16px rgba(255, 230, 168, 0.8);
  border-bottom: 3px solid var(--gold);
  animation: caretBlink 1s steps(1) infinite;
}
.readout .ch--bad {
  color: var(--red);
  text-shadow: 0 0 16px rgba(255, 90, 122, 0.8);
}
.readout .ch--clickwait {
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(255, 230, 168, 0.9);
  animation: clickWait 0.6s ease-in-out infinite;
}
@keyframes clickWait { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* 성공 / 실패 이펙트 */
.readout.fx-ok {
  box-shadow:
    inset 0 0 0 1.5px var(--green),
    inset 0 0 50px rgba(88, 240, 180, 0.22);
}
.readout.fx-ok::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--green);
  opacity: 0;
  animation: fxRing 0.42s ease-out;
}
.readout.fx-bad {
  animation: shake 0.32s ease;
  box-shadow:
    inset 0 0 0 1.5px var(--red),
    inset 0 0 50px rgba(255, 90, 122, 0.2);
}

/* 일시중지 오버레이 */
#app[data-mode="paused"] .readout { color: var(--text-faint); }
#app[data-mode="paused"] .readout::before {
  content: attr(data-paused);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ko);
  font-weight: 900;
  font-size: clamp(24px, 6vw, 40px);
  letter-spacing: 6px;
  color: var(--gold);
  background: rgba(6, 4, 16, 0.78);
  text-shadow: 0 0 20px rgba(244, 205, 120, 0.6);
  z-index: 2;
}

/* =========================================================================
   입력창
   ========================================================================= */
.type-input {
  --c: 10px;
  display: block;
  width: 100%;
  margin-bottom: 16px;
  padding: clamp(13px, 2.6vw, 18px);
  font-family: var(--font-mono);
  font-size: clamp(18px, 4vw, 26px);
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--gold-bright);
  background: linear-gradient(180deg, #0c0a1c, #08061400);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line-gold), inset 0 0 18px rgba(0, 0, 0, 0.5);
  outline: none;
  caret-color: var(--teal);
  transition: box-shadow 0.18s ease;
}
.type-input::placeholder { color: var(--text-faint); letter-spacing: 2px; font-size: 0.7em; }
.type-input:focus {
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    inset 0 0 22px rgba(52, 234, 208, 0.08),
    0 0 22px rgba(244, 205, 120, 0.25);
}
.type-input:disabled { opacity: 0.6; }

/* ===== 클릭 훈련 아레나 ===== */
.arena {
  --c: 14px;
  display: none;
  position: relative;
  height: clamp(170px, 34vw, 230px);
  margin-bottom: 16px;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(52, 234, 208, 0.045) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(52, 234, 208, 0.045) 23px 24px),
    radial-gradient(120% 120% at 50% 45%, rgba(52, 234, 208, 0.06), transparent 70%),
    linear-gradient(180deg, #0a0816, #060410);
  box-shadow: inset 0 0 0 1px var(--line-teal), inset 0 0 36px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  cursor: crosshair;
}
#app.is-clickmode[data-mode="running"] .arena,
#app.is-clickmode[data-mode="paused"] .arena { display: block; }
#app.is-clickmode[data-mode="running"] .type-input,
#app.is-clickmode[data-mode="paused"] .type-input { display: none; }

.arena.awaiting {
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 44px rgba(244, 205, 120, 0.1);
}
.arena__hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  text-align: center;
  font-family: var(--font-ko);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text-faint);
  pointer-events: none;
}
.arena.awaiting .arena__hint { display: none; }

.arena__square {
  position: absolute;
  display: none;
  width: clamp(40px, 9vw, 50px);
  height: clamp(40px, 9vw, 50px);
  padding: 0;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  box-shadow: 0 0 0 2px rgba(255, 230, 168, 0.55), 0 0 22px rgba(244, 205, 120, 0.7);
}
.arena__square::before {
  content: "";
  position: absolute;
  inset: 28%;
  border: 2px solid rgba(20, 14, 4, 0.5);
}
.arena__square.show { display: block; animation: squarePulse 0.7s ease-in-out infinite; }
.arena__square:hover { background: linear-gradient(135deg, #fff7e6, var(--gold)); }
.arena__square:active { transform: scale(0.9); }

@keyframes squarePulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 230, 168, 0.5), 0 0 16px rgba(244, 205, 120, 0.55); }
  50% { box-shadow: 0 0 0 3px rgba(255, 230, 168, 0.85), 0 0 30px rgba(244, 205, 120, 0.95); }
}

/* =========================================================================
   설정 영역
   ========================================================================= */
.setup { display: none; flex-direction: column; gap: 18px; margin-bottom: 18px; animation: revealUp 0.4s ease both; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field__label {
  font-family: var(--font-ko);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.field__tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--teal);
  border: 1px solid var(--line-teal);
  padding: 1px 6px;
  border-radius: 3px;
}
.field__note {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

.cmd-input {
  --c: 10px;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: clamp(18px, 4vw, 24px);
  letter-spacing: 0.12em;
  color: var(--teal-bright);
  background: linear-gradient(180deg, #0c0a1c, #07051200);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line-teal), inset 0 0 16px rgba(0, 0, 0, 0.5);
  outline: none;
  caret-color: var(--gold);
  transition: box-shadow 0.18s ease;
}
.cmd-input:focus {
  box-shadow: inset 0 0 0 1.5px var(--teal), 0 0 20px rgba(52, 234, 208, 0.22);
}

/* 칩 */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  --c: 7px;
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line-gold);
  cursor: pointer;
  transition: all 0.16s ease;
}
.chip:hover {
  color: var(--gold-bright);
  background: rgba(244, 205, 120, 0.12);
  box-shadow: inset 0 0 0 1px var(--gold), 0 0 14px rgba(244, 205, 120, 0.2);
}
.chips--time .chip { font-family: var(--font-ko); font-weight: 500; }

/* 프리셋 추가 버튼 */
.chip--add {
  color: var(--teal);
  background: rgba(52, 234, 208, 0.06);
  box-shadow: inset 0 0 0 1px var(--line-teal);
  font-family: var(--font-ko);
  font-weight: 500;
}
.chip--add:hover {
  color: var(--teal-bright);
  background: rgba(52, 234, 208, 0.16);
  box-shadow: inset 0 0 0 1px var(--teal), 0 0 14px rgba(52, 234, 208, 0.22);
}
.chip--add.chip--add-flash {
  color: var(--gold-bright);
  background: rgba(244, 205, 120, 0.16);
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* 사용자 커스텀 프리셋 칩 (라벨 + 삭제 ×) */
.chip--custom {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  background: rgba(154, 123, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(154, 123, 255, 0.32);
}
.chip--custom:hover { background: rgba(154, 123, 255, 0.15); box-shadow: inset 0 0 0 1px var(--violet); }
.chip--custom .chip__use {
  max-width: 170px;
  padding: 7px 4px 7px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--violet-bright);
  background: transparent;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip--custom .chip__del {
  padding: 0 9px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  color: var(--text-faint);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.chip--custom .chip__del:hover { color: var(--red); background: rgba(255, 90, 122, 0.16); }

/* 시간 설정 */
.setup__row { display: flex; flex-wrap: wrap; gap: 24px; }
.field--time { flex: 1 1 260px; }
.field--mode { flex: 1 1 200px; }

.time-set { display: flex; align-items: center; gap: 6px; }
.time-unit { position: relative; display: flex; flex-direction: column; align-items: center; }
.time-input {
  width: 76px;
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 34px;
  text-align: center;
  color: var(--gold);
  background: #0b0918;
  border: 1px solid var(--line-gold);
  border-radius: 8px;
  outline: none;
  text-shadow: 0 0 14px rgba(244, 205, 120, 0.4);
}
.time-input:focus { border-color: var(--gold); box-shadow: 0 0 16px rgba(244, 205, 120, 0.25); }
.step {
  width: 56px; height: 18px;
  font-size: 9px;
  color: var(--text-dim);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.step:hover { color: var(--teal); }
.time-unit__tag {
  margin-top: 3px;
  font-family: var(--font-ko);
  font-size: 11px;
  color: var(--text-dim);
}
.time-colon { font-family: var(--font-mono); font-size: 32px; color: var(--text-faint); margin-bottom: 18px; }

/* 토글 */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  align-self: flex-start;
}
.toggle__track {
  position: relative;
  width: 52px; height: 26px;
  border-radius: 14px;
  background: #0b0918;
  box-shadow: inset 0 0 0 1px var(--line-gold);
  transition: all 0.22s ease;
}
.toggle__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: all 0.22s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.toggle__text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.toggle[aria-checked="true"] .toggle__track {
  background: rgba(52, 234, 208, 0.18);
  box-shadow: inset 0 0 0 1px var(--teal), 0 0 14px rgba(52, 234, 208, 0.25);
}
.toggle[aria-checked="true"] .toggle__thumb {
  left: 29px;
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal);
}
.toggle[aria-checked="true"] .toggle__text { color: var(--teal); }

/* 최고 기록 */
.best-record {
  margin: 0;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--gold);
  text-align: center;
  background: rgba(244, 205, 120, 0.06);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--line-gold);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.best-record.show { opacity: 1; }

/* =========================================================================
   결과 화면
   ========================================================================= */
.results { display: none; text-align: center; margin-bottom: 16px; animation: revealUp 0.5s ease both; }
.results__head { margin-bottom: 16px; }
.results__eyebrow {
  font-family: var(--font-cinzel);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 6px;
  color: var(--teal);
}
.results__title {
  margin: 6px 0 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(26px, 6vw, 40px);
  color: var(--text);
}

/* 랭크 배지 */
.rank {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(150px, 40vw, 188px);
  height: clamp(150px, 40vw, 188px);
  margin: 8px auto 18px;
  animation: badgeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.rank__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--gold);
  box-shadow: 0 0 30px rgba(244, 205, 120, 0.4), inset 0 0 30px rgba(244, 205, 120, 0.15);
}
.rank__ring::before, .rank__ring::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px dashed rgba(244, 205, 120, 0.35);
  animation: ringSpin 18s linear infinite;
}
.rank__ring::after { inset: 10px; border-style: solid; border-color: var(--line-teal); animation-direction: reverse; animation-duration: 26s; }
.rank__tier {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(24px, 6vw, 34px);
  line-height: 1.05;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(244, 205, 120, 0.55);
  z-index: 1;
  padding: 0 8px;
}
.rank__sub {
  margin-top: 6px;
  font-family: var(--font-cinzel);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--text-dim);
  z-index: 1;
}

/* 랭크별 색상 */
.rank--probe   .rank__tier { color: #b8a07a; text-shadow: 0 0 18px rgba(184,160,122,0.45); }
.rank--probe   .rank__ring { border-color: #b8a07a; box-shadow: 0 0 24px rgba(184,160,122,0.35), inset 0 0 24px rgba(184,160,122,0.12); }
.rank--zealot  .rank__tier { color: var(--gold); }
.rank--dragoon .rank__tier { color: var(--gold-bright); text-shadow: 0 0 24px rgba(255,230,168,0.6); }
.rank--dark    .rank__tier { color: var(--violet-bright); text-shadow: 0 0 24px rgba(154,123,255,0.7); }
.rank--dark    .rank__ring { border-color: var(--violet); box-shadow: 0 0 30px rgba(154,123,255,0.5), inset 0 0 30px rgba(154,123,255,0.18); }
.rank--high    .rank__tier { color: var(--teal-bright); text-shadow: 0 0 26px rgba(122,246,230,0.7); }
.rank--high    .rank__ring { border-color: var(--teal); box-shadow: 0 0 32px rgba(52,234,208,0.5), inset 0 0 32px rgba(52,234,208,0.18); }
.rank--archon  .rank__tier { color: #eafffb; text-shadow: 0 0 30px rgba(122,246,230,0.9), 0 0 50px rgba(52,234,208,0.6); }
.rank--archon  .rank__ring { border-color: var(--teal-bright); box-shadow: 0 0 40px rgba(122,246,230,0.7), inset 0 0 36px rgba(122,246,230,0.25); animation: ringSpin 10s linear infinite; }
.rank--xelnaga .rank__tier {
  background: linear-gradient(135deg, var(--gold-bright), var(--teal-bright), var(--violet-bright));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(244,205,120,0.7));
}
.rank--xelnaga .rank__ring { border-color: var(--gold-bright); box-shadow: 0 0 46px rgba(244,205,120,0.7), 0 0 70px rgba(52,234,208,0.4), inset 0 0 40px rgba(244,205,120,0.25); }

/* 신기록 */
.new-record {
  display: none;
  margin: -8px auto 16px;
  font-family: var(--font-ko);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(255, 230, 168, 0.7);
  animation: newRecordPulse 1.1s ease-in-out infinite;
}
.new-record.show { display: block; }
.new-record .star { color: var(--teal); }

/* 결과 지표 그리드 */
.results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.rcell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--line-gold);
}
.rcell__label { font-family: var(--font-ko); font-weight: 500; font-size: 12px; color: var(--text-dim); }
.rcell__val { font-family: var(--font-mono); font-size: clamp(22px, 5vw, 30px); color: var(--text); }
.rcell__val--no { color: var(--red); }
.rcell__val--cpm { color: var(--gold); text-shadow: 0 0 14px rgba(244, 205, 120, 0.4); }

/* =========================================================================
   컨트롤 버튼
   ========================================================================= */
.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.btn {
  --c: 10px;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  font-family: var(--font-ko);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line-gold);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn .ico { font-family: var(--font-mono); font-size: 12px; line-height: 1; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  color: #1a1206;
  background: var(--metal-gold);
  box-shadow: 0 0 22px rgba(244, 205, 120, 0.35);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.4);
}
.btn--primary:hover { box-shadow: 0 0 32px rgba(244, 205, 120, 0.6); }

.btn--cyan {
  color: var(--teal-bright);
  background: rgba(52, 234, 208, 0.1);
  box-shadow: inset 0 0 0 1px var(--teal);
}
.btn--cyan:hover { background: rgba(52, 234, 208, 0.2); box-shadow: inset 0 0 0 1px var(--teal), 0 0 22px rgba(52, 234, 208, 0.4); }

.btn--ghost { color: var(--text-dim); }
.btn--ghost:hover { color: var(--gold-bright); background: rgba(244, 205, 120, 0.1); box-shadow: inset 0 0 0 1px var(--gold); }

/* 단축키 안내 */
.shortcuts {
  margin: 14px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-faint);
}

/* =========================================================================
   모드별 표시 전환
   ========================================================================= */
.stats, .progress { display: none; }
.combo { display: none; }

#app[data-mode="idle"] .setup { display: flex; }
#app[data-mode="idle"] .stats,
#app[data-mode="idle"] .progress { display: grid; }
#app[data-mode="idle"] .progress { display: block; }

#app[data-mode="running"] .stats,
#app[data-mode="paused"] .stats { display: grid; }
#app[data-mode="running"] .progress,
#app[data-mode="paused"] .progress { display: block; }

#app[data-mode="running"] .combo.show,
#app[data-mode="paused"] .combo.show { display: flex; }

#app[data-mode="finished"] .results { display: block; }
#app[data-mode="finished"] .readout-wrap,
#app[data-mode="finished"] .type-input { display: none; }

/* 버튼 가시성 */
#app[data-mode="idle"] #start-btn { display: inline-flex; }
#app[data-mode="running"] #pause-btn,
#app[data-mode="paused"] #pause-btn,
#app[data-mode="running"] #reset-btn,
#app[data-mode="paused"] #reset-btn { display: inline-flex; }
#app[data-mode="finished"] #restart-btn,
#app[data-mode="finished"] #reconfig-btn { display: inline-flex; }

#app[data-mode="finished"] .shortcuts,
#app[data-mode="running"] .shortcuts,
#app[data-mode="paused"] .shortcuts { display: none; }

/* 상태 dot 색상 */
#app[data-mode="running"] .dot { background: var(--green); box-shadow: 0 0 10px var(--green); }
#app[data-mode="paused"] .dot { background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: none; }
#app[data-mode="finished"] .dot { background: var(--violet); box-shadow: 0 0 10px var(--violet); animation: none; }

/* =========================================================================
   키프레임
   ========================================================================= */
@keyframes revealUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes titleGlow {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(244, 205, 120, 0.3)); }
  50% { filter: drop-shadow(0 0 30px rgba(244, 205, 120, 0.5)) drop-shadow(0 0 40px rgba(52, 234, 208, 0.2)); }
}
@keyframes sweepSpin { to { transform: rotate(360deg); } }
@keyframes gridDrift { to { background-position: 56px 98px; } }
@keyframes scanMove { to { background-position: 0 4px; } }
@keyframes moteFloat {
  from { transform: translateY(0) translateX(0); }
  to { transform: translateY(-60px) translateX(18px); }
}
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes caretBlink { 0%, 60% { border-color: var(--gold); } 61%, 100% { border-color: transparent; } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes comboPop { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(4px); }
}
@keyframes fxRing { 0% { opacity: 0.8; transform: scale(0.92); } 100% { opacity: 0; transform: scale(1.06); } }
@keyframes lowPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes badgeIn { from { opacity: 0; transform: scale(0.7) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes newRecordPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.06); opacity: 1; } }

/* =========================================================================
   반응형
   ========================================================================= */
@media (max-width: 520px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .results__grid { grid-template-columns: repeat(2, 1fr); }
  .setup__row { gap: 16px; }
}

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .bg-sweep, .bg-scanlines, .bg-motes { display: none; }
}