:root{
  --bg-1:#0a1024;
  --bg-2:#13203f;
  --paper:#0e1730;
  --paper-2:#152245;
  --rule:#33456e;
  --rule-soft:#22304f;
  --ink:#eef3ff;
  --ink-soft:#9fb0d0;
  --ink-faint:#5b6d94;
  --tile:#2C3A34;
  --tile-edge:#6E8B7A;
  --tile-ink:#F2D98B;
  --snake:#7fe6b0;
  --snake-2:#2fae7e;
  --good:#7ee081;
  --bad:#ff6b6b;
  --fever:#ffd24a;
  --gold:#ffd24a;
  --gold-deep:#d99e1a;
  --blue:#88ccff;
  --shadow:rgba(0,0,0,.5);
  --board-bg:#0c1730;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--ink);
  font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  min-height:100vh;min-height:100dvh;-webkit-text-size-adjust:100%;
  background:
    radial-gradient(900px 520px at 84% -8%, rgba(255,210,74,.10), transparent 55%),
    radial-gradient(820px 540px at 8% 112%, rgba(78,140,255,.18), transparent 55%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2));
  background-attachment:fixed;
}
/* 노트북/데스크톱을 기준으로 하는 2단 레이아웃 */
.wrap{
  max-width:1320px;margin:0 auto;padding:18px 20px;
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
}
.layout{
  display:grid;grid-template-columns:auto 340px;gap:28px;align-items:start;
  width:100%;justify-content:center;
}
/* 게임판: 화면 높이를 거의 다 쓰도록 (점수 줄·여백만 빼고) */
.board-col{width:clamp(300px, min(calc(100vh - 150px), calc(100vw - 420px)), 860px);display:flex;flex-direction:column}
.side-col{width:340px;display:flex;flex-direction:column;gap:14px;padding-top:2px}
.side-col > *{margin:0}

@media (max-width:860px){
  .wrap{display:block;min-height:0;padding:18px 16px 40px}
  .layout{display:block;width:auto}
  .board-col{width:100%;max-width:640px;margin:0 auto}
  .side-col{width:100%;max-width:640px;margin:14px auto 0;gap:0}
  .side-col > *{margin:0 0 10px}
  .side-col .bar{margin-bottom:14px}
}

/* ---------- 점수 줄 ---------- */
.topbar{
  display:flex;align-items:flex-end;gap:14px;margin-bottom:12px;
  background:linear-gradient(180deg, var(--paper-2), rgba(21,34,69,.55));
  border:1.5px solid var(--rule);border-radius:14px;padding:10px 16px;
  box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.home-btn{
  width:34px;height:34px;flex:0 0 auto;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1.5px solid var(--rule);color:var(--ink-soft);
  transition:background .15s,color .15s,border-color .15s;
}
.home-btn svg{width:18px;height:18px}
.home-btn:hover{background:rgba(255,255,255,.14);color:var(--ink);border-color:var(--blue)}
.score-block{line-height:1}
.label{font-size:11px;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.score{
  font-family:"Fredoka",sans-serif;font-weight:700;font-size:38px;line-height:.95;display:block;margin-top:3px;
  color:var(--gold);text-shadow:0 2px 10px rgba(255,210,74,.35);
}
.best-block{text-align:right}
.best-block .score{font-size:19px;color:var(--blue);text-shadow:none}
.topbar .gap{flex:1}
.lives{font-size:19px;letter-spacing:3px;color:var(--bad);line-height:1;text-shadow:0 0 8px rgba(255,107,107,.5)}
.lives .gone{opacity:.2;text-shadow:none}

/* ---------- 진행 줄 ---------- */
.stage-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px;color:var(--ink-soft)}
.stage-name{font-weight:700;color:var(--ink)}
.pips{display:flex;gap:6px;align-items:center;margin-left:auto}
.pip{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink-faint)}
.pip.done{background:var(--ink-faint)}
.pip.now{border-color:var(--fever);background:var(--fever);box-shadow:0 0 8px var(--fever)}
.pip.boss{width:12px;height:12px;border-radius:2px;transform:rotate(45deg)}

/* ---------- 배수 게이지 ---------- */
.mult-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mult{font-family:"Fredoka",sans-serif;font-weight:700;font-size:24px;line-height:1;min-width:50px;color:var(--ink-soft);transition:color .15s,transform .15s}
.mult.hot{color:var(--fever);transform:scale(1.15);text-shadow:0 0 10px rgba(255,210,74,.6)}
.gauge{flex:1;height:8px;border:1.5px solid var(--rule);border-radius:5px;overflow:hidden;background:var(--paper-2)}
.gauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--snake));transition:width .18s ease-out}
.gauge i.hot{background:linear-gradient(90deg,var(--fever),#ff9d4a);box-shadow:0 0 10px rgba(255,210,74,.6)}

/* ---------- 문제 카드 ---------- */
.card{
  background:linear-gradient(180deg, var(--paper-2), rgba(21,34,69,.5));
  border:1.5px solid var(--rule);
  border-radius:16px;padding:14px 16px 16px;
  box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;
}
.card.boss{border-color:var(--fever);box-shadow:0 0 22px rgba(255,210,74,.25), inset 0 1px 0 rgba(255,255,255,.04)}
.card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--blue),var(--snake));opacity:.7}
.card-inner{padding-left:14px}
.meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft)}
.meta .tag{color:var(--fever);font-weight:700}
.meaning{font-size:25px;font-weight:800;line-height:1.25;margin:4px 0 12px;word-break:keep-all;color:var(--ink)}
.slots{display:flex;flex-wrap:wrap;gap:6px}
.slot{
  width:29px;height:37px;display:flex;align-items:flex-end;justify-content:center;
  border-bottom:3px solid var(--ink-faint);border-radius:4px 4px 0 0;
  background:rgba(255,255,255,.03);
  font-family:"Fredoka",sans-serif;font-weight:700;font-size:26px;line-height:1.15;color:var(--ink);
}
.slot.done{border-bottom-color:var(--good);color:var(--good);text-shadow:0 0 8px rgba(126,224,129,.4)}
.slot.next{border-bottom-color:var(--fever);animation:blink 1s ease-in-out infinite}
.slot.hinted{color:var(--tile-ink);opacity:.85}
@keyframes blink{50%{border-bottom-color:var(--ink-faint)}}
@media (prefers-reduced-motion: reduce){.slot.next{animation:none}}

/* ---------- 보드 ---------- */
.board{
  position:relative;margin-top:14px;
  border:2px solid var(--rule);border-radius:16px;
  background:var(--board-bg);
  box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 0 26px rgba(0,0,0,.5);
  overflow:hidden;
}
.board.hurry{animation:hurry .9s ease-in-out infinite}
@keyframes hurry{0%,100%{border-color:var(--bad);box-shadow:0 0 0 rgba(255,107,107,0), inset 0 0 26px rgba(0,0,0,.5)}50%{border-color:var(--bad);box-shadow:0 0 30px rgba(255,107,107,.55), inset 0 0 40px rgba(255,107,107,.18)}}
@media (prefers-reduced-motion:reduce){.board.hurry{animation:none;border-color:var(--bad)}}
.board.fever{border-color:var(--fever);box-shadow:0 0 26px rgba(255,210,74,.35), inset 0 0 26px rgba(0,0,0,.5)}
canvas{display:block;width:100%;aspect-ratio:1/1;touch-action:none}

.veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,16,36,.88), rgba(19,32,63,.94));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:26px;
}
.veil[hidden]{display:none}
.veil h2{font-family:"Fredoka",sans-serif;font-size:32px;margin:0;line-height:1.15;color:var(--gold);text-shadow:0 2px 12px rgba(255,210,74,.35)}
.veil p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.8;max-width:34ch;word-break:keep-all}
.veil b{color:var(--ink)}
.veil .answer{font-family:"Fredoka",sans-serif;font-size:23px;color:var(--tile-ink)}
.rank{font-family:"Fredoka",sans-serif;font-size:58px;line-height:.9;color:var(--fever);margin:-4px 0 -8px;text-shadow:0 3px 14px rgba(255,210,74,.4)}
.btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}

/* 타임 어택: 시작/결과 화면 */
.veil .src{color:var(--blue);font-weight:700}
.veil .newbest{font-family:"Fredoka","Noto Sans KR",sans-serif;font-size:18px;font-weight:700;color:var(--fever);text-shadow:0 0 12px rgba(255,210,74,.45)}
.time-pick{display:flex;gap:8px;margin-top:4px}
.time-pick button{min-width:70px;padding:8px 14px}
.time-pick button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:rgba(255,210,74,.12)}
.lives{font-family:"Fredoka","Noto Sans KR",sans-serif;font-size:16px;font-weight:700;letter-spacing:0;color:var(--good);text-shadow:0 0 8px rgba(126,224,129,.4)}

/* ---------- 버튼 ---------- */
button{
  font-family:"Fredoka","Noto Sans KR",sans-serif;font-size:14px;font-weight:600;color:var(--ink);
  background:var(--paper-2);border:1.5px solid var(--rule);
  border-radius:11px;padding:10px 18px;cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.35);transition:transform .06s,box-shadow .12s,border-color .15s,background .15s;
}
button:hover{border-color:var(--blue);background:#1c2c52}
button:active{transform:translateY(2px);box-shadow:none}
button:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px}
button.primary{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#241a05;border-color:var(--gold-deep);
  font-weight:700;box-shadow:0 4px 14px rgba(255,210,74,.35);
}
button.primary:hover{filter:brightness(1.06)}
.bar{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.bar .spacer{flex:1}

/* ---------- 방향 패드 ---------- */
.pad{display:none;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,52px);gap:8px;justify-content:center;margin-top:18px}
.pad button{padding:0;font-size:20px;font-family:"Fredoka",sans-serif;border-radius:14px}
.pad .up{grid-column:2;grid-row:1}
.pad .left{grid-column:1;grid-row:2}
.pad .down{grid-column:2;grid-row:2}
.pad .right{grid-column:3;grid-row:2}
@media (hover:none) and (pointer:coarse){ .pad{display:grid} }

.help{margin-top:20px;font-size:12.5px;color:var(--ink-soft);line-height:1.9}
.help b{color:var(--blue);font-weight:700}
kbd{font-family:"Fredoka",sans-serif;font-size:14px;border:1.5px solid var(--rule);border-radius:5px;padding:1px 7px;background:var(--paper-2);color:var(--ink);box-shadow:0 2px 0 rgba(0,0,0,.35)}