/* cosmo : wave — 화면 공통 모양.
 *
 * 왜 (대표님 2026-09-09 "나중에 디자인만 바꾸면 될 수 있게끔")
 *   전에는 여덟 화면이 같은 색·배경·상단바를 **각자** 들고 있었다.
 *   카드 배경색 19번, 분홍 11번, 청록 9번이 흩어져 있어 색 하나 바꾸려면
 *   여덟 파일을 다 열어야 했고, 한 군데만 놓쳐도 그 화면만 옛 색으로 남았다.
 *   → 색과 공통 부품을 **여기 한 곳**에 둔다. 이제 여기만 고치면 다 바뀐다.
 *
 * 화면별로 다른 것(그 화면만의 배치)은 각 파일에 그대로 둔다.
 * 첫 화면(intro)과 선곡(select)은 생김새가 특수해서 색 토큰만 함께 쓴다.
 */

:root{
  /* 색 — 바꾸려면 여기만 */
  --void:#03050C;          /* 가장 어두운 바탕 */
  --panel:rgba(6,14,34,.55);   /* 카드·상자 바탕 */
  --panel-2:rgba(6,14,34,.7);  /* 더 진한 상자 */
  --line:rgba(90,170,255,.42); /* 테두리 */
  --line-soft:rgba(90,170,255,.22);
  --cyan:#7DF0FF;          /* 밝은 강조 */
  --blue:#4DB6FF;
  /* 투명도를 달리 쓰는 색은 숫자만 따로 둔다 — rgba(var(--cyan-rgb),.45) 처럼 쓴다.
     이렇게 해야 청록을 바꿀 때 여덟 가지 투명도를 일일이 찾아다니지 않는다. */
  --cyan-rgb:125,240,255;
  --blue-rgb:77,182,255;
  --pink-rgb:255,46,138;
  --gold-rgb:255,217,143;
  /* 바탕 그라데이션 세 단계 (여러 화면이 똑같이 쓰던 값) */
  --ink-1:#040711;
  --ink-2:#070C1E;
  /* 글자 */
  --txt:#E4EEFF;           /* 밝은 글자 */
  --txt-dim:#A6D2FF;       /* 옅은 글자 */
  --blue-l:#9FD8FF;        /* 연한 파랑 (판정 GREAT 등) */
  --violet-l:#E9B8FF;      /* 연한 보라 */
  --pink:#FF2E8A;          /* 고른 것·경고 */
  --gold:#FFD98F;
  --ui:"Avenir Next","Helvetica Neue",Roboto,system-ui,sans-serif;
  /* 모서리 깎기 — 이 게임의 액자 모양 */
  --cut:10px;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--void); color:#fff; overflow:hidden; font-family:var(--ui);
     -webkit-tap-highlight-color:transparent}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
img{display:block}
button:focus-visible,input:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}

/* ── 무대 ─────────────────────────────────────────────────────────── */
.scr{position:relative; width:100vw; height:100dvh; overflow:hidden;
  background:
    radial-gradient(120% 52% at 50% 16%, rgba(34,72,150,.48), transparent 62%),
    radial-gradient(90% 40% at 50% 86%, rgba(60,30,110,.26), transparent 74%),
    linear-gradient(180deg,#040711 0%,#070C1E 44%,#03050C 100%);
}
/* 배경 행성 — 안에 **3D 판**이 들어간다(planet3d.js). 전에는 그림 한 장이었다.
   ★ 그림이 없으면 높이를 잡아 줄 것이 없어 칸이 납작해진다 — 가로세로를 1:1 로 못박는다. */
.scr .planet{position:absolute; left:50%; top:14%; width:170%; aspect-ratio:1;
  transform:translate(-50%,-50%); opacity:.18; pointer-events:none}
.scr .planet img{width:100%}
.scr .planet canvas{display:block; width:100%; height:100%}

.board{position:absolute; inset:0; display:flex; flex-direction:column; height:100dvh;
  padding:0 6%; max-width:520px; margin:0 auto; z-index:2; overflow:hidden}

/* ── 맨 위 줄 (뒤로 + 제목) ────────────────────────────────────────── */
.bar{display:flex; align-items:center; gap:4%; padding:5% 0 0;
  flex:0 0 auto; position:relative; z-index:3}
.bar .back{width:29%; max-width:120px}
.bar .back img{width:100%}
.bar h1{flex:1; margin:0; text-align:center; font-size:clamp(11px,3vw,14px);
  font-weight:800; letter-spacing:.36em; opacity:.85; padding-right:29%}

/* ── 부품 ─────────────────────────────────────────────────────────── */
.box{border:1.3px solid var(--line); background:var(--panel);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.box-sm{--cut:8px}
.card{flex:1; padding:11px 5px 10px; text-align:center;
  border:1.3px solid var(--line); background:var(--panel);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.card .lb{font-size:7.5px; font-weight:800; letter-spacing:.16em; opacity:.5}
.card b{display:block; margin-top:3px; font-size:clamp(14px,4.2vw,20px); font-weight:900;
  font-variant-numeric:tabular-nums; color:var(--cyan)}
/* 묶음 제목 — 위 여백은 화면마다 조금씩 달랐다. 기본값을 두고 필요하면 각 화면에서 덮는다 */
.grp{margin-top:6%; font-size:8.5px; font-weight:900; letter-spacing:.3em;
     opacity:.45; flex:0 0 auto}
/* 육각 버튼 (시작·다시하기 같은 큰 것) */
.hex{padding:12px 0 11px; font-size:12px; font-weight:900; letter-spacing:.16em;
  border:1.6px solid var(--line); background:var(--panel-2);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%)}
.hex:active{transform:scale(.98)}
.hex.on{border-color:rgba(125,240,255,.9);
  box-shadow:0 0 16px rgba(125,240,255,.45), inset 0 0 16px rgba(77,182,255,.28)}
/* 아래 안내 글 */
.note{flex:0 0 auto; font-size:8px; font-weight:600; letter-spacing:.06em;
  opacity:.4; line-height:1.8; white-space:pre-line}
/* 스크롤 되는 목록 — 막대는 감춘다 */
.scroll{flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:none;
  display:flex; flex-direction:column}
.scroll::-webkit-scrollbar{display:none}
/* 숫자를 줄 맞춰 보여 준다 */
.num{font-variant-numeric:tabular-nums}

/* ── 들어오기 ─────────────────────────────────────────────────────── */
.in{opacity:0; animation:fade .5s cubic-bezier(.16,1,.3,1) forwards}
@keyframes fade{to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .in{animation:none; opacity:1} }