/* =====================================================================
   숫자 폰트 — 자동 생성 파일입니다. 손으로 고치지 마세요.
   도구_폰트/tool/앱에넣기.py 가 만듭니다.
   폰트를 바꾸려면 그 파일의 '고른것' 목록을 고치고 다시 돌리세요.

   ★ 숫자 열 글자만 남긴 파일이라 한 종에 1~11KB 입니다.
     14종을 다 넣어도 48KB 입니다.
   ★ 인터넷 없이도 나와야 하므로 CDN 을 쓰지 않고 앱 안에 넣습니다.
   ===================================================================== */

@font-face{
  font-family:'FOrbitron';
  src:url('../fonts/Orbitron.woff2') format('woff2');
  font-display:swap;
}

@font-face{
  font-family:'FJetBrainsMono';
  src:url('../fonts/JetBrainsMono.woff2') format('woff2');
  font-display:swap;
}

@font-face{
  font-family:'FLexend';
  src:url('../fonts/Lexend.woff2') format('woff2');
  font-display:swap;
}

@font-face{
  font-family:'FAtkinsonHyperlegible';
  src:url('../fonts/AtkinsonHyperlegible.woff2') format('woff2');
  font-display:swap;
}

@font-face{
  font-family:'FShareTechMono';
  src:url('../fonts/ShareTechMono.woff2') format('woff2');
  font-display:swap;
}

@font-face{
  font-family:'FQuicksand';
  src:url('../fonts/Quicksand.woff2') format('woff2');
  font-display:swap;
}

@font-face{
  font-family:'FExo2';
  src:url('../fonts/Exo2.woff2') format('woff2');
  font-display:swap;
}

@font-face{
  font-family:'FFiraMono';
  src:url('../fonts/FiraMono.woff2') format('woff2');
  font-display:swap;
}

@font-face{
  font-family:'FBaloo2';
  src:url('../fonts/Baloo2.woff2') format('woff2');
  font-display:swap;
}

@font-face{
  font-family:'FFigtree';
  src:url('../fonts/Figtree.woff2') format('woff2');
  font-display:swap;
}

@font-face{
  font-family:'FOutfit';
  src:url('../fonts/Outfit.woff2') format('woff2');
  font-display:swap;
}

@font-face{
  font-family:'FInconsolata';
  src:url('../fonts/Inconsolata.woff2') format('woff2');
  font-display:swap;
}

@font-face{
  font-family:'FDoHyeon';
  src:url('../fonts/DoHyeon.woff2') format('woff2');
  font-display:swap;
}

@font-face{
  font-family:'FSpoqaHanSansNeoBold';
  src:url('../fonts/SpoqaHanSansNeoBold.woff2') format('woff2');
  font-display:swap;
}

/*  ★ 숫자에만 적용합니다.
    --disp 를 바꾸면 제목·상단바까지 같이 바뀌어 화면이 흔들립니다.
    타일과 시계처럼 **숫자를 보여주는 곳**만 이 변수를 씁니다.
    폰트를 안 샀거나 못 불러오면 자동으로 원래 글꼴로 떨어집니다. */
/*  ★ 사람마다 맞추는 값 — 기본은 '지금까지와 똑같음' 입니다.
    --tilez     숫자 크기 배율 (0.80 ~ 1.30)
    --tiletrack 글자 사이 (-0.04em ~ 0.14em)
    상점 → FONT 아래 '세밀 조절' 에서 바꿉니다. 공짜입니다 — 글씨가 읽히는 문제라
    돈을 받으면 안 된다고 봤습니다. */
:root { --tilef: var(--disp); --tilez: 1; --tiletrack: 0em; }
.tile, .tile .tnum { font-family: var(--tilef); }
#hud-timer, #hud-next, #hud-left, #over-time { font-family: var(--tilef); }
/*  다음 숫자·남은 개수는 게임 내내 곁눈으로 봅니다 — 여기도 같이 맞춰 줍니다.
    시계(hud-timer)는 자리가 흔들리면 눈에 거슬려서 자간만 두고 크기는 그대로 둡니다. */
#hud-next, #hud-left { letter-spacing: var(--tiletrack, 0em); }

/* ── 숫자 크기·자간 세밀 조절 ── */
.tune {
  margin-top: 18px; padding: 14px 13px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255,255,255,.03);
}
.tune-head { display: flex; align-items: center; justify-content: space-between; }
.tune-head b { font-family: var(--disp); font-size: 13px; letter-spacing: 2px; color: var(--neon); }
.tune-reset {
  font: inherit; font-size: 11.5px; cursor: pointer; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 7px;
  background: transparent; color: var(--dim);
}
.tune-reset:hover { border-color: var(--neon); color: var(--neon); }
.tune .hint { margin: 4px 0 12px; }
.tune-row { display: grid; grid-template-columns: 44px 1fr 58px; align-items: center; gap: 10px; margin-bottom: 8px; }
.tune-row label { font-size: 12px; color: var(--dim); }
.tune-val { font-family: var(--mono, monospace); font-size: 12px; color: var(--neon); text-align: right; }
/*  ★ 손가락으로 끄는 것이라 기본 높이(2px)로는 잡기가 어렵습니다.
    28px 짜리 손잡이에 넉넉한 눌림 범위를 줍니다. */
.tune-rng { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; }
.tune-rng::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line); }
.tune-rng::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
.tune-rng::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px;
  border-radius: 50%; background: var(--neon); border: none; cursor: pointer;
  box-shadow: 0 0 10px -2px var(--neon);
}
.tune-rng::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--neon);
  border: none; cursor: pointer;
}
.tune-hint { font-size: 11.5px; color: var(--dim2); margin: 12px 0 7px; text-align: center; }
/*  미리보기 격자 — 실제 게임 타일 그대로입니다 (.grid.n4 를 그냥 씁니다).
    다만 상점 안이라 화면을 다 차지하면 안 되므로 폭만 줄입니다. */
/*  ★ --n 은 격자 칸 수입니다. 게임에서는 JS 가 인라인으로 넣어주는데
    여기서는 늘 4x4 이므로 CSS 에 박아 둡니다. 빠뜨리면 5칸으로 그려집니다. */
.tune-grid { --n: 4; width: min(100%, 260px); margin: 0 auto; aspect-ratio: 1; }
.tune-grid .tile.gone { opacity: .18; box-shadow: none; }
.tune-grid .tile.miss { animation: tune-miss .22s; }
@keyframes tune-miss { 50% { transform: translateX(-4px) } }

/* ── 상점 FONT 갈래 ── */
.font-list { display: flex; flex-direction: column; gap: 8px; }
.font-row {
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  background: rgba(255,255,255,.03); cursor: pointer;
}
.font-row:hover { border-color: var(--neon); }
.font-row.on { border-color: var(--neon); background: rgba(0,229,255,.07); }
.fr-top { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.fr-name { flex: 1; font-size: 14px; }
.fr-digits {
  font-size: 26px; letter-spacing: .06em; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}

/* ── 미리보기 창 ── */
.fp-pop .pop-box { width: min(400px, 92vw); }
.fp-big {
  font-size: clamp(30px, 8vw, 44px); letter-spacing: .12em; line-height: 1.25;
  text-align: center; margin: 10px 0 12px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fp-weak {
  text-align: center; font-size: 12.5px; color: var(--dim); margin-bottom: 12px;
}
.fp-weak b {
  display: block; font-size: 34px; letter-spacing: .5em; color: var(--hot);
  margin-top: 3px;
}
.fp-hint { text-align: center; font-size: 12.5px; color: var(--dim); margin-bottom: 8px; }
.fp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-bottom: 14px;
}
.fp-tile {
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 7px;
  background: rgba(255,255,255,.04); color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: clamp(15px, 4.6vw, 22px); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fp-tile.hit { background: var(--neon); color: #04222B; border-color: var(--neon); }
.fp-tile.miss { border-color: var(--bad); color: var(--bad); }

/* ── 사기 전 미리보기 (격자색 · 명중 효과 · 배경) ── */
.try-btn {
  display: block; width: 100%; margin-top: 6px;
  border: 1px solid var(--line); border-radius: 7px; background: transparent;
  color: var(--dim); font: inherit; font-size: 11.5px; padding: 4px 0; cursor: pointer;
}
.try-btn:hover, .try-btn:active { border-color: var(--neon); color: var(--neon); }

.pv-pop .pop-box { width: min(400px, 92vw); }
.pv-hint { text-align: center; font-size: 12.5px; color: var(--dim); margin: 8px 0 10px; }
.pv-grid {
  position: relative;                    /* 명중 효과 좌표의 기준점 */
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-bottom: 12px;
}
.pv-tile {
  aspect-ratio: 1; border: 1px solid; border-radius: 6px;
  font-family: var(--tilef); font-weight: 700;
  font-size: clamp(15px, 4.6vw, 22px); cursor: pointer;
  box-shadow: inset 0 0 12px rgba(0,0,0,.5);
  transition: transform .06s, opacity .18s;
  font-variant-numeric: tabular-nums;
}
.pv-tile:active { transform: scale(.94); }
.pv-tile.gone { opacity: .22; }
.pv-tile.miss { outline: 2px solid var(--bad); outline-offset: -2px; }
/*  ★ 다음에 누를 칸 — 어디를 눌러야 하는지 안 보이면 아무 데나 누르고
    "안 된다" 고 느낍니다 (실제 제보). */
.pv-tile.next { outline: 2px solid var(--neon); outline-offset: -2px; }
.pv-pop .pv-replay { width: 100%; margin-bottom: 10px; }

/*  ── 이름 미리보기 창 ──────────────────────────────────────────
    ★ 사기 전에 **내 이름**으로 어떻게 보이는지 봅니다.
      큰 글씨 한 번(효과가 잘 보이게) + 순위표 줄(남에게 보이는 모양) 두 가지로.
      순위표 모양이 중요합니다 — 이름 꾸미기는 결국 남이 보는 것이니까요. */
.npv-pop .pop-box { width: min(360px, 92vw); }
.npv-big {
  font-size: 26px; font-weight: 700; padding: 16px 8px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,.03);
  word-break: break-all; line-height: 1.35;
}
.npv-list { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 10px; margin-bottom: 10px; }
.npv-cap { font-size: 10.5px; letter-spacing: 1.5px; color: var(--dim2, var(--dim)); margin-bottom: 6px; text-align: left; }
.npv-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 0; border-top: 1px solid rgba(255,255,255,.05);
  font-size: 13px; text-align: left;
}
.npv-row:first-of-type { border-top: 0; }
.npv-rank { width: 14px; color: var(--dim2, var(--dim)); font-family: var(--disp); font-size: 11px; }
.npv-name { flex: 1; min-width: 0; overflow: hidden; }
.npv-time { font-family: var(--disp); font-size: 12px; color: var(--dim); }
.npv-mix { font-size: 11px; color: var(--dim2, var(--dim)); margin-bottom: 12px; letter-spacing: .5px; }
/*  명중 효과가 그려지는 층 — 격자 위에 겹칩니다 */
.pv-fx { position: absolute; inset: 0; pointer-events: none; }
.pv-grid { isolation: isolate; }