/* =====================================================================
    NUMBER RANGE — 사이버펑크 스타일

    화면 규칙 (안 지키면 폰에서 깨집니다)
      body{overflow:hidden} + #app{height:100dvh} + .screen{height:100%;overflow-y:auto}
      → 페이지 전체가 아니라 '화면 안에서' 스크롤합니다.

    색은 --neon / --accent 를 테마가 바꿔 끼웁니다 (공통.js applyTheme).
   ===================================================================== */

:root {
  --bg:        #05060B;
  --bg-2:      #0A0C16;
  --panel:     rgba(14,18,32,.78);
  --panel-2:   rgba(20,26,44,.9);
  --line:      rgba(120,150,200,.16);
  --ink:       #E6EDFA;
  --dim:       #7C86A0;
  --neon:      #00E5FF;
  --neon-soft: #7FF3FF;
  --accent:    #00E5FF;
  --tile-bg:   #0C1B26;
  --tile-edge: #1E5A6B;
  --hot:       #FFD84D;
  --bad:       #FF4D6D;
  /* ★ Orbitron·Share Tech Mono 에는 한글/일본어 글리프가 없습니다.
        그대로 두면 시스템 기본 글꼴로 떨어져서 폰마다 제각각이고 잘 안 읽힙니다.
        그래서 뒤에 CJK 글꼴을 붙여 둡니다 — 숫자·영문은 사이버 글꼴,
        한글·일본어는 Noto 로 자동으로 갈립니다. */
  --cjk: 'Noto Sans KR', 'Noto Sans JP', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  --mono: 'Share Tech Mono', var(--cjk), ui-monospace, monospace;
  --disp: 'Orbitron', var(--cjk), ui-monospace, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ★ 버튼·입력칸은 글꼴을 물려받지 않습니다(브라우저 기본이 Arial).
      이걸 안 넣으면 버튼 안 한글만 다른 글꼴로 튀어 보입니다. */
button, input, textarea, select { font-family: inherit; }

html, body {
  margin: 0; padding: 0; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  letter-spacing: .3px;
}

#app { height: 100dvh; position: relative; }

.screen {
  display: none;
  position: relative;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(0,229,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.screen.active { display: block; }

/* 스캔라인 — 사이버펑크 화면 느낌의 뼈대 */
.scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,.028) 0px, rgba(255,255,255,.028) 1px, transparent 1px, transparent 3px);
}

/* 살아있는 배경 격자 */
.alive {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background-image:
    linear-gradient(rgba(120,180,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,180,255,.055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%);
}
.alive-cell {
  position: absolute; font-family: var(--mono); font-size: 13px;
  color: var(--neon); opacity: 0;
}
.alive-cell.flash { animation: aliveFlash 1.5s ease-out forwards; }
@keyframes aliveFlash {
  0%   { opacity: 0; transform: translateY(6px); }
  18%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* ===================== 상단바 ===================== */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: linear-gradient(180deg, rgba(6,8,15,.94), rgba(6,8,15,.62));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.topbar-right { display: flex; align-items: center; gap: 6px; }
.topbar-title { font-family: var(--disp); font-size: 14px; font-weight: 700; letter-spacing: 2px; }
.topbar-pad { width: 34px; }

.chip {
  border: 1px solid var(--line); background: rgba(255,255,255,.04);
  color: var(--ink); border-radius: 6px; padding: 6px 11px;
  font-family: var(--mono); font-size: 12px; cursor: pointer;
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip.credits { color: var(--hot); border-color: rgba(255,216,77,.28); }
.chip.icon { padding: 6px 9px; font-size: 14px; }

.back-btn {
  border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink);
  width: 34px; height: 34px; border-radius: 6px;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding-bottom: 3px;
}
.zone-tag {
  font-family: var(--disp); font-size: 12px; font-weight: 700; letter-spacing: 3px;
  color: var(--neon); text-shadow: 0 0 12px var(--neon);
}
.season-tag { font-size: 11px; color: var(--dim); margin-left: auto; }

/* ===================== 홈 ===================== */
.home-body { position: relative; z-index: 2; padding: 12px 14px 28px; }

.challenge {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid rgba(255,216,77,.35); border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,216,77,.10), rgba(255,216,77,.03));
  padding: 10px 12px; margin-bottom: 14px;
}
.ch-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-who { font-size: 13px; color: var(--hot); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-rec { font-family: var(--disp); font-size: 14px; font-weight: 700; }

/* ---- 히어로 ---- */
.hero { text-align: center; padding: 14px 0 6px; }

.tier-badge {
  display: inline-block;
  font-family: var(--disp); font-size: 13px; font-weight: 900; letter-spacing: 4px;
  border: 1.5px solid var(--dim); border-radius: 4px;
  padding: 6px 18px; color: var(--dim);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.tier-badge.empty { opacity: .55; }

.hero-time-wrap {
  display: flex; align-items: flex-end; justify-content: center; gap: 8px;
  margin-top: 10px;
}
.hero-time {
  font-family: var(--disp); font-weight: 900;
  /* 폭만 보면 낮은 창에서 홈이 통째로 넘칩니다 — 높이(dvh)도 같이 봅니다 */
  font-size: clamp(44px, min(20vw, 13dvh), 104px); line-height: .95;
  color: var(--neon-soft);
  text-shadow: 0 0 8px var(--neon), 0 0 34px var(--neon), 0 0 70px rgba(0,229,255,.35);
  font-variant-numeric: tabular-nums;
  animation: heroPulse 3.6s ease-in-out infinite;
}
@keyframes heroPulse { 0%,100% { opacity: 1; } 50% { opacity: .88; } }
.hero-unit {
  font-family: var(--disp); font-size: 13px; font-weight: 700; letter-spacing: 3px;
  color: var(--dim); padding-bottom: 12px;
}
.hero-zone {
  font-family: var(--disp); font-size: 12px; letter-spacing: 3px; color: var(--dim);
  margin-top: 2px;
}
.hero-next { font-size: 12px; color: var(--neon); margin-top: 7px; min-height: 16px; }
.hero-next .max { color: var(--hot); letter-spacing: 2px; }

/* ---- 존 카드 ---- */
.zones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 16px; }
.zone {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink);
  padding: 10px 3px; cursor: pointer; font-family: var(--mono);
  transition: border-color .15s, transform .1s;
}
.zone:active { transform: scale(.97); }
.zone.sel { border-color: var(--neon); box-shadow: 0 0 16px rgba(0,229,255,.22), inset 0 0 14px rgba(0,229,255,.07); }
.zone.locked { opacity: .5; }
.z-name { font-family: var(--disp); font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.z-size { font-size: 10px; color: var(--dim); }
.z-best { font-family: var(--disp); font-size: 13px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.z-tier { font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.z-tier.dim, .dim { color: var(--dim); }
.z-lock { font-size: 15px; margin-top: 3px; }
.z-gate { font-size: 9.5px; color: var(--dim); line-height: 1.25; padding: 0 2px; }

/* ---- ENGAGE ---- */
.engage {
  position: relative; display: block; width: 100%; margin-top: 16px;
  border: 1.5px solid var(--neon); border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,229,255,.16), rgba(0,229,255,.05));
  color: var(--ink); padding: 16px 12px 13px; cursor: pointer;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  animation: engagePulse 2.4s ease-in-out infinite;
}
.engage:active { transform: translateY(2px); }
@keyframes engagePulse {
  0%,100% { box-shadow: 0 0 18px rgba(0,229,255,.30), inset 0 0 20px rgba(0,229,255,.10); }
  50%     { box-shadow: 0 0 40px rgba(0,229,255,.60), inset 0 0 30px rgba(0,229,255,.20); }
}
.engage-txt {
  display: block; font-family: var(--disp); font-size: 26px; font-weight: 900; letter-spacing: 7px;
  color: var(--neon-soft); text-shadow: 0 0 14px var(--neon);
}
.engage-sub { display: block; font-size: 12px; color: var(--dim); margin-top: 4px; letter-spacing: .5px; }

/* ---- 지표 ---- */
/*  ── 오늘 내 상태 (연속·누적·일일) ──────────────────────────────
    ★ 2026-08-26 — 버튼으로 오해받던 것
      전에는 아래 .menu-btn 과 똑같이 **테두리 + 패널 배경 + 둥근 모서리**였습니다.
      바로 밑에 진짜 버튼(DUEL·SHOP·RANKS)이 같은 모양으로 놓여 있으니,
      눌리는 것으로 보고 눌러 보게 됩니다. 눌러도 아무 일이 없으니 고장 같습니다.

      이제 **카드가 아니라 한 줄짜리 띠**입니다.
        · 테두리·배경 없음 → 누를 것으로 안 보입니다
        · 가운데 얇은 세로선으로만 칸을 나눕니다
        · 위아래 실선으로 '읽는 정보' 라는 것을 표시합니다  */
/*  ★ 2026-08-27 — 높이를 절반으로 줄였습니다.
    세 칸이 위아래로 벌어져 화면을 크게 잡아먹었습니다. 여기는 '읽는 값' 이라
    START RUN 버튼 하나만큼도 필요 없습니다. 이름과 값을 **한 줄에** 붙였습니다. */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 10px; padding: 6px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat {
  padding: 0 4px; text-align: center;
  border-left: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: center; gap: 5px;
}
.stat:first-child { border-left: 0; }
.slabel { font-size: 10px; color: var(--dim2, var(--dim)); letter-spacing: 1.2px; }
.sval { font-family: var(--disp); font-size: 14px; font-weight: 700; margin-top: 0; }
/*  일일 미션 안내는 값 옆에 붙입니다 (줄을 더 만들지 않게) */
.stat .shint { font-size: 9.5px; margin: 0; }
#stat-daily.done { color: var(--hot); }

.menu { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 12px; }
.menu-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--ink); padding: 10px 3px; cursor: pointer; font-family: var(--mono);
}
.menu-btn:active { transform: scale(.96); }
.menu-btn span { font-size: 15px; line-height: 1; }
.menu-btn em { font-style: normal; font-size: 9.5px; color: var(--dim); letter-spacing: .5px; }

/* ===================== 게임 ===================== */
.game-body { position: relative; z-index: 2; padding: 8px 12px 12px; }

.pbar { height: 3px; background: rgba(255,255,255,.06); }
.pbar-fill { height: 100%; width: 0; background: var(--neon); box-shadow: 0 0 10px var(--neon); transition: width .12s linear; }

.hud-timer {
  font-family: var(--disp); font-size: 24px; font-weight: 700;
  color: var(--neon-soft); text-shadow: 0 0 12px var(--neon);
  font-variant-numeric: tabular-nums; min-width: 84px; text-align: right;
}

.hud { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 10px 2px 12px; }
.hud-cell { display: flex; align-items: baseline; gap: 7px; }
.hud-cell.right { flex-direction: row-reverse; }
.hlabel { font-size: 10.5px; color: var(--dim); letter-spacing: 2px; }
.hnext {
  font-family: var(--disp); font-size: 34px; font-weight: 900; line-height: 1;
  color: var(--neon-soft); text-shadow: 0 0 16px var(--neon);
  font-variant-numeric: tabular-nums;
}
.hleft { font-family: var(--disp); font-size: 20px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.penalty {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--disp); font-size: 17px; font-weight: 900; color: var(--bad);
  text-shadow: 0 0 14px var(--bad); opacity: 0; pointer-events: none;
}
.penalty.show { animation: penPop .85s ease-out; }
@keyframes penPop {
  0%   { opacity: 0; transform: translate(-50%, -40%) scale(.7); }
  20%  { opacity: 1; transform: translate(-50%, -80%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}

/* 마지막 몇 개 — 화면이 붉게 물듭니다 */
#screen-game.tense { animation: tenseBg 1s ease-in-out infinite; }
@keyframes tenseBg {
  0%,100% { box-shadow: inset 0 0 0 rgba(255,45,80,0); }
  50%     { box-shadow: inset 0 0 90px rgba(255,45,80,.28); }
}
#screen-game.tense .hud-timer { color: #FFB3C0; text-shadow: 0 0 16px var(--bad); }

/* ---- 격자 ---- */
.grid-wrap { position: relative; }
.grid {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), 1fr);
  /* ★ 행(row)도 반드시 고정해야 합니다.
        안 넣으면 행 높이가 '내용에 따라' 정해져서, 숫자가 빠지고 빈 칸이 생기는
        판 막바지에 표가 조금씩 쪼그라듭니다. 기록 게임에서 판이 진행되는 도중
        과녁 위치가 움직이면 안 됩니다. */
  grid-template-rows: repeat(var(--n, 5), 1fr);
  gap: 6px;
  /* ★ 격자 크기
        예전엔 calc(100dvh - 290px) 하나로 잡았는데, **창이 짧으면 이 값이 바닥나서**
        격자가 130px 까지 쪼그라들고 숫자가 칸을 넘쳤습니다
        (클로드 옆 미리보기 창처럼 낮은 화면에서 실제로 그랬습니다).
        그래서 max() 로 **최소 240px 를 보장**합니다. 세로가 정 모자라면
        차라리 화면이 스크롤되는 게 낫지, 과녁이 작아지면 게임이 안 됩니다. */
  width: min(100%, 460px, max(240px, calc(100dvh - 290px)));
  aspect-ratio: 1;
  margin: 0 auto;
}
.tile {
  position: relative; overflow: hidden;
  border: 1px solid; border-radius: 6px;
  font-family: var(--disp); font-weight: 700;
  /*  ★ --tilez / --tiletrack 은 사람마다 다르게 맞추는 값입니다 (상점 → FONT).
      폰트마다 실제로 보이는 크기가 꽤 다릅니다 — 같은 30px 이라도
      기하학 폰트는 작아 보이고 굵은 폰트는 넘칠 듯 커 보입니다.
      눈이 편한 크기는 사람마다 달라서, 하나로 정해줄 수가 없습니다.
      기본값 1 / 0em 이면 지금까지와 **똑같습니다.** */
  font-size: calc(clamp(15px, 5vw, 30px) * var(--tilez, 1));
  letter-spacing: var(--tiletrack, 0em);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; padding: 0;
  box-shadow: inset 0 0 12px rgba(0,0,0,.5);
  transition: transform .06s;
  /* 칸이 내용 크기 아래로 못 줄어드는 기본값을 풀어 줍니다 (위 grid-template-rows 와 한 짝) */
  min-width: 0; min-height: 0;
}
.tile .tnum { position: relative; z-index: 2; line-height: 1; }

/* ── 자릿수 자동맞춤 ────────────────────────────────────────────────
   INFINITY 모드는 숫자에 상한이 없어서 100, 1000 이 나옵니다.
   글씨 크기를 그대로 두면 칸을 넘쳐 잘립니다.

   ★ JS 로 폭을 재서 맞추지 않습니다.
     탭 한 번마다 리플로우가 걸리는데, 이건 기록 게임이라 치명적입니다.
     자릿수는 어차피 1~4 뿐이라 **미리 정해둔 배율**이면 충분합니다. */
.tile.d3 .tnum { font-size: .74em; letter-spacing: -.02em; }
.tile.d4 .tnum { font-size: .54em; letter-spacing: -.03em; }
.tile.d5 .tnum { font-size: .42em; letter-spacing: -.04em; }
.grid.n4 .tile { font-size: calc(clamp(19px, 6.2vw, 34px) * var(--tilez, 1)); }
.grid.n6 .tile { font-size: calc(clamp(12px, 4vw, 24px) * var(--tilez, 1)); gap: 5px; }
.grid.n7 .tile { font-size: calc(clamp(10px, 3.4vw, 20px) * var(--tilez, 1)); border-radius: 5px; }
.grid.n6, .grid.n7 { gap: 4px; }
.tile:active { transform: scale(.92); }
.tile.empty { opacity: .16; box-shadow: none; cursor: default; }

.tile.hit::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--tglow, #00E5FF);
  animation: hitFade .3s ease-out forwards;
}
@keyframes hitFade { from { opacity: .8; } to { opacity: 0; } }

.tile.shake { animation: tileShake .28s; }
@keyframes tileShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); }
}

/* 카운트다운 중엔 숫자를 가립니다 (미리 1을 못 찾게) */
.grid.masked .tnum { visibility: hidden; }

/* ---- 사격 연출 ---- */
.fx-layer { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 5; }

.burst {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--g) 0%, transparent 68%);
  animation: burstPop .34s ease-out forwards;
}
@keyframes burstPop {
  0%   { opacity: .95; transform: scale(.3); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* 3px 이면 폰에서 거의 안 보입니다 (실측). 6px + 발광으로 키웠습니다. */
.spark {
  position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 6px currentColor;
  /*  ★ SHATTER(.62s) 보다 **빠릅니다.** 확 퍼지고 사라지는 느낌을 냅니다. */
  animation: sparkFly .38s ease-out forwards;
}
@keyframes sparkFly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); }
}

/* ---- 카운트다운 / 일시정지 ---- */
.countdown {
  position: absolute; inset: 0; z-index: 8;
  display: none; align-items: center; justify-content: center;
  font-family: var(--disp); font-size: 88px; font-weight: 900;
  color: var(--neon-soft); text-shadow: 0 0 30px var(--neon);
  pointer-events: none;
}
.countdown.show { display: flex; animation: cdPop .45s ease-out; }
.countdown.go { font-size: 60px; letter-spacing: 8px; color: var(--hot); text-shadow: 0 0 30px var(--hot); }
@keyframes cdPop { from { transform: scale(1.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/*  ★ 2026-08-24 — 완전히 가립니다.
    전에는 86% 만 덮어서 14% 로 숫자가 비쳤고, 흐리게 만드는 blur 는
    오래된 안드로이드 웹뷰에서 아무 일도 안 해 그대로 보였습니다.
    (게임.js 의 setPause 에서 숫자 자체도 한 겹 더 가립니다) */
/*  ★ 2026-08-24 — 공지 종
    한 번 본 공지를 다시 볼 자리가 없다는 제보로 넣었습니다.
    안 본 공지가 있으면 빨간 점이 붙습니다. */
.chip.icon #bell-dot, .chip.icon .dot {
  position: absolute; top: 3px; right: 3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hot, #FF5D7A);
  box-shadow: 0 0 0 2px var(--bg, #05060B);
}
#home-bell { position: relative; font-size: 14px; line-height: 1; }
#home-bell[hidden] { display: none; }

.nt-list { display: flex; flex-direction: column; gap: 8px; max-height: 54vh; overflow-y: auto; margin: 4px 0 14px; }
.nt-item {
  text-align: left; width: 100%; cursor: pointer;
  border: 1px solid var(--line, #242C46); border-radius: 11px; padding: 11px 13px;
  background: transparent; color: inherit; font: inherit;
  display: flex; gap: 9px; align-items: flex-start;
}
.nt-item:hover { border-color: var(--neon, #00E5FF); }
.nt-item.unread { border-color: var(--neon, #00E5FF); }
.nt-item .ico { flex: none; }
.nt-item .tx { flex: 1; min-width: 0; }
.nt-item .tt { font-weight: 700; display: block; }
.nt-item .dd { font-size: 12px; color: var(--dim, #8B95AF); }
.nt-item .new { flex: none; font-size: 10.5px; color: var(--hot, #FF5D7A); letter-spacing: .05em; }
.notice-body { white-space: normal; line-height: 1.75; text-align: left; }

.paused {
  position: absolute; inset: -10px; z-index: 9;
  display: none; align-items: center; justify-content: center;
  background: #05060B; border-radius: 10px;
}
.paused.show { display: flex; }
.paused-box { text-align: center; padding: 22px 18px; width: 84%; }
.paused-title { font-family: var(--disp); font-size: 20px; font-weight: 900; letter-spacing: 5px; color: var(--neon); }
.paused-sub { font-size: 12.5px; color: var(--dim); margin: 8px 0 16px; line-height: 1.5; }

/* ===================== 결과 ===================== */
.over-body {
  position: relative; z-index: 2;
  min-height: 100%; padding: 26px 16px 28px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.over-head { font-family: var(--disp); font-size: 12px; letter-spacing: 6px; color: var(--dim); }
.over-time-wrap { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; }
.over-time {
  font-family: var(--disp); font-weight: 900;
  font-size: clamp(40px, min(17vw, 12dvh), 88px); line-height: .95;
  color: var(--neon-soft); text-shadow: 0 0 10px var(--neon), 0 0 40px var(--neon);
  font-variant-numeric: tabular-nums;
}
.over-tier { font-family: var(--disp); font-size: 18px; font-weight: 900; letter-spacing: 5px; margin-top: 8px; }
.over-status { font-size: 13.5px; margin-top: 8px; }
.over-status .hot { color: var(--hot); font-family: var(--disp); font-weight: 700; letter-spacing: 2px; }
.over-miss { font-size: 12.5px; color: var(--bad); margin-top: 5px; letter-spacing: 1px; }
.over-miss.perfect { color: var(--neon); }
.over-credit { font-family: var(--disp); font-size: 17px; color: var(--hot); margin: 14px 0 4px; }

.over-banner {
  width: 100%; max-width: 400px; margin-top: 12px; padding: 10px;
  border: 1px solid var(--hot); border-radius: 8px;
  background: rgba(255,216,77,.08);
  display: flex; flex-direction: column; gap: 3px;
}
.over-banner b { font-family: var(--disp); font-size: 10.5px; letter-spacing: 3px; color: var(--hot); }
.over-banner span { font-family: var(--disp); font-size: 17px; font-weight: 900; letter-spacing: 3px; }
.over-banner.open { border-color: var(--neon); background: rgba(0,229,255,.08); }
.over-banner.open b { color: var(--neon); }

.over-vs {
  width: 100%; max-width: 400px; margin-top: 10px; padding: 10px 12px;
  border-radius: 8px; font-size: 12.5px; line-height: 1.5;
}
.over-vs.win  { border: 1px solid #3BD98A; background: rgba(59,217,138,.10); color: #A8F0CB; }
.over-vs.lose { border: 1px solid var(--bad); background: rgba(255,77,109,.10); color: #FFB3C0; }

.over-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; width: 100%; max-width: 400px; margin-top: 14px; }

/* ===================== 버튼 ===================== */
.btn-neon, .btn-ghost {
  border-radius: 8px; cursor: pointer; font-family: var(--disp);
  font-size: 13px; font-weight: 700; letter-spacing: 3px; padding: 13px 18px;
}
.btn-neon {
  border: 1.5px solid var(--neon); color: var(--neon-soft);
  background: linear-gradient(180deg, rgba(0,229,255,.18), rgba(0,229,255,.05));
  box-shadow: 0 0 16px rgba(0,229,255,.25);
}
.btn-ghost { border: 1px solid var(--line); color: var(--dim); background: rgba(255,255,255,.03); }
.btn-neon:active, .btn-ghost:active { transform: translateY(2px); }
.big { display: block; width: 100%; max-width: 400px; margin-top: 12px; }
.btn-ghost.danger { color: var(--bad); border-color: rgba(255,77,109,.3); margin-top: 24px; width: 100%; }

/*  ── 자리가 바뀐 칸 ────────────────────────────────────────────────
    ★ 둘째 바퀴 숫자는 누른 자리가 아니라 아무 칸에 나타납니다 (매크로 대비).
      아무 표시가 없으면 "화면이 멋대로 바뀌었다" 로 보입니다.
      그래서 아주 짧게(0.22초) 테두리만 한 번 밝혔다 돌아옵니다.
      크기나 자리는 건드리지 않습니다 — 속도를 다투는 놀이라
      움직이는 연출은 그 자체로 방해가 됩니다. */
.tile.swapped { animation: tileSwapMark .22s ease-out; }
@keyframes tileSwapMark {
  0%   { box-shadow: inset 0 0 0 2px currentColor; }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .tile.swapped { animation: none; }
}

/* ===================== 공통 패널 ===================== */
.pad { position: relative; z-index: 2; padding: 14px 14px 30px; }
.sec-h { font-family: var(--disp); font-size: 11px; letter-spacing: 3px; color: var(--dim); margin: 20px 0 9px; }
.sec-h:first-child { margin-top: 4px; }
.hint { font-size: 12.5px; color: var(--dim); line-height: 1.55; margin: 6px 0 12px; }
.ver { font-size: 11.5px; color: var(--dim); text-align: center; margin-top: 26px; }
.ver a { color: var(--neon); }

.seg { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
/*  ★ 2026-09-01 — 좁은 폰에서 'TRAINING' 이 칸 밖으로 나가던 것.
    10px 글자에 자간 1.5px 이면 TRAINING 은 **75.4px** 이 필요합니다.
    그런데 min-width 가 68px 이라, 화면이 412px 이하일 때
    다섯 칸이 억지로 한 줄에 들어가면서 글자가 삐져나왔습니다.
    (칸 폭이 360px 화면에서 61.6px 까지 줄어듭니다)

    min-width 를 글자에 맞춰 올렸습니다. 좁으면 저절로 두 줄로 접히고,
    접히면 칸이 넓어져 안 넘칩니다. 한 줄에 욱여넣는 것보다 읽기 좋습니다.
    ★ 여기 글자를 늘릴 일이 생기면 이 값도 같이 봐야 합니다.  */
.seg-btn {
  flex: 1; min-width: 78px;
  border: 1px solid var(--line); border-radius: 6px;
  background: rgba(255,255,255,.03); color: var(--dim);
  padding: 9px 4px; font-family: var(--disp); font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  cursor: pointer;
}
.seg-btn.active { border-color: var(--neon); color: var(--neon-soft); background: rgba(0,229,255,.10); }
.seg-btn.dim { opacity: .45; }

/* ===================== 상점 ===================== */
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.shop-item {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  padding: 12px 8px; text-align: center; cursor: pointer;
}
.shop-item.sel { border-color: var(--neon); box-shadow: 0 0 18px rgba(0,229,255,.2); }
.shop-item.locked { opacity: .68; }
.theme-prev { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 74px; margin: 0 auto; }
.tile.mini { aspect-ratio: 1; font-size: 13px; pointer-events: none; }
.shop-name { font-family: var(--disp); font-size: 12px; font-weight: 700; letter-spacing: 2px; margin-top: 8px; }
.tag { display: inline-block; font-size: 10.5px; border-radius: 4px; padding: 3px 8px; margin-top: 6px; letter-spacing: 1px; }
.tag.on  { background: rgba(0,229,255,.18); color: var(--neon-soft); }
.tag.own { background: rgba(255,255,255,.07); color: var(--dim); }
.tag.buy { background: rgba(255,216,77,.13); color: var(--hot); }

/* ===================== 랭킹 ===================== */
.me-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rflag { font-size: 17px; }
.rank-list { margin-top: 4px; }
.rank-row {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  padding: 9px 11px; margin-bottom: 5px;
}
.rank-row.me { border-color: var(--neon); background: rgba(0,229,255,.07); }
.rbadge { width: 24px; text-align: center; font-size: 14px; }
.rnum { font-size: 12px; color: var(--dim); font-family: var(--disp); }
.rname { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rscore { font-family: var(--disp); font-size: 14px; font-weight: 700; color: var(--neon-soft); font-variant-numeric: tabular-nums; }
.rank-msg { text-align: center; padding: 28px 12px; font-size: 13.5px; color: var(--dim); line-height: 1.7; }
.hall-block { margin-bottom: 16px; }
.hall-h { font-family: var(--disp); font-size: 11px; letter-spacing: 2px; color: var(--hot); margin-bottom: 6px; }

/* ===================== 기록 ===================== */
.dcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dcard { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 9px 3px; text-align: center; }
.dlabel { font-family: var(--disp); font-size: 10px; letter-spacing: 1px; color: var(--dim); }
.dval { font-family: var(--disp); font-size: 14px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dtier { font-size: 9.5px; font-weight: 700; margin-top: 2px; letter-spacing: .5px; }
.dsmall { display: flex; gap: 16px; justify-content: center; margin: 12px 0 14px; font-size: 12px; color: var(--dim); }
.dsmall b { font-family: var(--disp); color: var(--ink); margin-left: 5px; }
.dsmall em { font-style: normal; letter-spacing: 1px; }

.chart { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 10px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .empty { text-align: center; padding: 34px 10px; font-size: 13px; color: var(--dim); }
.chart-hint { text-align: center; font-size: 12px; color: var(--dim); margin-top: 8px; }
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 8px; }
.scard { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 9px 4px; text-align: center; }
.scard .slabel { font-size: 10px; }
.scard .sval { font-size: 14px; font-variant-numeric: tabular-nums; }

/* ===================== 도움말 ===================== */
.help-demo { width: min(190px, 58%); margin: 4px auto 18px; --n: 3; gap: 5px; display: grid; grid-template-columns: repeat(3,1fr); }
.tile.demo { aspect-ratio: 1; pointer-events: none; font-size: 19px; }
.tile.demo.aim { outline: 2px solid var(--neon); outline-offset: 1px; box-shadow: 0 0 18px var(--neon); }
.help-list {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  margin: 0; padding: 15px 15px 15px 32px; font-size: 13px; line-height: 1.85; color: var(--ink);
}
.help-list b { color: var(--neon-soft); }
.help-tip {
  border: 1px solid rgba(255,216,77,.32); border-radius: 10px;
  background: rgba(255,216,77,.06); padding: 13px; margin-top: 12px;
}
.help-tip b { font-family: var(--disp); font-size: 10.5px; letter-spacing: 3px; color: var(--hot); }
.help-tip p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.7; }
.help-tip b + p b { color: var(--neon-soft); }

/* ===================== 설정 ===================== */
.lang-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.lang-item {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  color: var(--ink); padding: 10px 11px; cursor: pointer; font-family: var(--mono); font-size: 13px;
}
.lang-item.sel { border-color: var(--neon); background: rgba(0,229,255,.09); }
.lang-flag { font-size: 17px; }

.toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  color: var(--ink); padding: 12px 13px; margin-bottom: 7px; cursor: pointer;
  font-family: var(--disp); font-size: 11px; letter-spacing: 2px;
}
.toggle em { font-style: normal; }
.sw { width: 40px; height: 21px; border-radius: 999px; background: rgba(255,255,255,.09); position: relative; transition: background .18s; }
.sw::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--dim); transition: transform .18s, background .18s;
}
.toggle.on .sw { background: rgba(0,229,255,.28); }
.toggle.on .sw::after { transform: translateX(19px); background: var(--neon); box-shadow: 0 0 10px var(--neon); }

/* ===================== 팝업 / 토스트 ===================== */
/*  ★ 2026-08-27 — 창이 화면보다 길면 **닫기 단추에 닿을 수 없었습니다.**
    한마디 고르기(12줄)가 작은 폰에서 771px 이 되어, 640px 화면에서는
    닫기가 642px 자리에 있었습니다. 스크롤도 안 되니 뒤로가기밖에 길이 없었고요.

    · .pop 에 overflow-y:auto 를 주고
    · 가운데 정렬을 align-items 대신 **margin:auto** 로 바꿉니다
      (align-items:center + overflow 는 넘칠 때 **위쪽이 잘려** 못 올라갑니다.
       margin:auto 는 짧으면 가운데, 길면 위에서부터 — 둘 다 됩니다)
    · 손가락으로 굴릴 때 뒤 화면이 같이 밀리지 않게 overscroll 도 막습니다 */
.pop {
  position: fixed; inset: 0; z-index: 100;
  display: flex; justify-content: center; padding: 20px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: rgba(3,4,9,.74); backdrop-filter: blur(4px);
}
.pop-box {
  width: 100%; max-width: 340px; text-align: center;
  margin: auto;                    /* 짧으면 가운데, 길면 위에서부터 */
  border: 1px solid var(--neon); border-radius: 12px;
  background: var(--panel-2); padding: 20px;
  box-shadow: 0 0 40px rgba(0,229,255,.18);
  animation: popIn .2s ease-out;
}
@keyframes popIn { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pop-title { font-family: var(--disp); font-size: 14px; letter-spacing: 3px; color: var(--neon-soft); margin-bottom: 8px; }
.pop-sub { font-size: 12.5px; color: var(--dim); line-height: 1.6; margin-bottom: 12px; }
.pop-msg { font-size: 13.5px; line-height: 1.65; margin-bottom: 16px; }
.pop-btns { display: flex; gap: 8px; }
.pop-btns button { flex: 1; padding: 12px 6px; font-size: 12px; }
.nick-input {
  width: 100%; border: 1px solid var(--line); border-radius: 7px;
  background: rgba(0,0,0,.35); color: var(--ink);
  padding: 12px; font-family: var(--disp); font-size: 15px; letter-spacing: 2px;
  text-align: center; margin-bottom: 12px;
}
.nick-input:focus { outline: 0; border-color: var(--neon); box-shadow: 0 0 14px rgba(0,229,255,.25); }
.nick-input.shake { animation: tileShake .32s; }

.toast {
  position: fixed; left: 50%; bottom: 44px; transform: translate(-50%, 14px);
  border: 1px solid var(--neon); border-radius: 6px;
  background: rgba(6,10,20,.95); color: var(--neon-soft);
  padding: 10px 16px; font-size: 13px; letter-spacing: 1px;
  opacity: 0; transition: opacity .26s, transform .26s; z-index: 200;
  max-width: 88vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===================== 큰 화면 ===================== */
@media (min-width: 560px) {
  .home-body, .pad, .game-body, .over-body { max-width: 520px; margin: 0 auto; }
}

/* 움직임을 줄여달라는 설정이면 애니메이션을 죽입니다 */
@media (prefers-reduced-motion: reduce) {
  .hero-time, .engage, .alive-cell, #screen-game.tense { animation: none !important; }
}

/* =====================================================================
    낮은 화면 (클로드 옆 미리보기 창, 가로로 눕힌 폰 등)
    세로가 700px 아래로 내려가면 여백과 글자를 줄여 한 화면에 담습니다.
   ===================================================================== */
@media (max-height: 700px) {
  .home-body { padding: 8px 12px 16px; }
  .hero { padding: 6px 0 2px; }
  .hero-time-wrap { margin-top: 4px; }
  .hero-unit { font-size: 11px; padding-bottom: 8px; }
  .hero-next { margin-top: 4px; min-height: 14px; }
  .tier-badge { font-size: 11px; padding: 5px 14px; }
  .zones { margin-top: 10px; gap: 5px; }
  .zone { padding: 7px 3px; }
  .engage { margin-top: 10px; padding: 11px 10px 9px; }
  .engage-txt { font-size: 20px; letter-spacing: 5px; }
  .engage-sub { font-size: 11px; margin-top: 2px; }
  .stats { margin-top: 9px; }
  .stat { padding: 6px 4px; }
  .menu { margin-top: 8px; }
  .menu-btn { padding: 7px 3px; }
  .loadout { margin-top: 8px; padding: 6px 8px; }

  .game-body { padding: 6px 10px 10px; }
  .hud { margin: 6px 2px 8px; }
  .hnext { font-size: 26px; }
  .hud-timer { font-size: 20px; }

  .over-body { padding: 14px 14px 18px; }
  .over-time-wrap { margin-top: 6px; }
  .over-tier { font-size: 15px; margin-top: 5px; }
  .big { margin-top: 8px; padding: 11px 16px; }
}

/* 아주 낮은 창 — 히어로를 더 줄입니다 */
@media (max-height: 520px) {
  .hero-time { font-size: clamp(36px, 11dvh, 60px); }
  .engage-txt { font-size: 18px; }
}

/* 아주 낮은 창에서는 지표 줄(연속·누적·일일)을 숨깁니다.
   같은 내용이 DATA 화면에 있고, 낮은 화면에서는 START 버튼이 보이는 게 우선입니다. */
@media (max-height: 490px) {
  .stats { display: none; }
  .hero-zone, .hero-next { font-size: 11px; }
}

/* 랭킹 — 잠긴 구역 안내 (막지 않고 보여주기만) */
.rank-locked {
  border: 1px solid rgba(255,216,77,.32); border-radius: 7px;
  background: rgba(255,216,77,.07); color: var(--hot);
  padding: 9px 12px; font-size: 12px; text-align: center; margin-bottom: 10px;
}
.seg-btn.locked { opacity: .72; }

/* ===================== 도움말 — 추가 섹션 ===================== */
.help-card {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); padding: 13px; margin-top: 4px;
}
.help-card.warn { border-color: rgba(255,216,77,.30); background: rgba(255,216,77,.05); }
.help-card > p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.7; }
.help-card .hint { margin: 8px 0 0; }
.help-card .hint.hot { color: var(--hot); }

.help-ul, .help-ol { margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.75; }
.help-ul li, .help-ol li { margin: 4px 0; }
.help-ul b { color: var(--neon-soft); }

.help-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.help-tbl th {
  font-family: var(--disp); font-size: 10px; letter-spacing: 2px;
  color: var(--dim); text-align: left; padding: 4px 0 8px;
}
.help-tbl td {
  padding: 4px 0; font-family: var(--disp); font-size: 12px;
  border-top: 1px solid var(--line);
}
.help-tbl td:last-child { text-align: right; color: var(--neon-soft); font-variant-numeric: tabular-nums; }

/* ===================== 홈 메뉴 3칸 =====================
   하단은 '하고 싶은 것'(대결·상점·랭킹) 셋만 둡니다.
   기록·방법은 상단 아이콘으로 옮겼습니다 — 자주 안 보는 것들이라. */
.menu.menu-3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.menu-3 .menu-btn { padding: 13px 4px; gap: 5px; }
.menu-3 .menu-btn span { font-size: 20px; }
.menu-3 .menu-btn em { font-size: 11px; letter-spacing: 1.5px; }

/*  대결을 눈에 띄게 하되 **'눌린 것처럼' 보이면 안 됩니다.**
    전에는 채운 배경 + 네온 테두리를 줬는데, 그건 이 앱에서 '선택됨'을 뜻하는
    모양(.zone.sel, .seg-btn.active)과 똑같아서 이미 눌러둔 버튼처럼 보였습니다.
    그래서 배경·테두리는 다른 버튼과 같게 두고, **아이콘 색과 은은한 발광**으로만
    강조합니다. */
.menu-3 .duel-open .mi { color: var(--neon); filter: drop-shadow(0 0 6px var(--neon)); }
.menu-3 .duel-open em { color: var(--neon-soft); }

/* 상단 아이콘이 넷이라 이름칸을 조금 양보합니다 */
.topbar .chip.icon { padding: 6px 8px; font-size: 13px; }
#home-name { max-width: 34vw; }
@media (max-width: 360px) {
  .topbar .chip.icon { padding: 5px 6px; font-size: 12px; }
  #home-name { max-width: 26vw; }
}

/* ===================== 랭킹 — 시즌 정보 · 내 순위 · 왕좌 ===================== */
.rank-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  font-size: 11px; color: var(--dim); margin: 0 0 10px;
}
.rank-meta i { font-style: normal; opacity: .5; }
.rank-meta .rm-soon { color: var(--hot); font-weight: 700; }

/* 1위가 며칠째 지키고 있는지 */
.rhold {
  display: inline-block; margin-left: 7px;
  font-size: 9.5px; color: var(--hot);
  border: 1px solid rgba(255,216,77,.34); border-radius: 999px;
  padding: 1px 7px; vertical-align: middle;
}

/* 50위 밖이어도 내 순위는 맨 아래 고정 */
.rank-mine { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.rm-label {
  font-family: var(--disp); font-size: 9.5px; letter-spacing: 2px;
  color: var(--dim); margin-bottom: 6px; text-align: center;
}
.rank-mine .rank-row { border-color: var(--neon); background: rgba(var(--neon-rgb), .08); }
.rhold.new { padding: 1px 6px; }

/* ===================== 이름표 (랭킹에서 남에게 보이는 것) ===================== */
.ntitle {
  display: inline-block; margin-right: 6px;
  font-family: var(--disp); font-size: 8.5px; font-weight: 700; letter-spacing: 1px;
  color: var(--hot); border: 1px solid rgba(255,216,77,.42); border-radius: 3px;
  padding: 1px 5px; vertical-align: middle;
}
.ntag { vertical-align: middle; }
.ntag.holo {
  background: linear-gradient(90deg, #00E5FF, #8CFF00, #FFD84D, #FF2F4F, #8B5CFF, #00E5FF);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: holoShift 4s linear infinite;
}
/*  ★ 밝은 팩에서는 무지개의 노랑·연두가 흰 바탕에 묻힙니다 (2026-09-01).
    같은 무지개를 **한 단계 진하게** 쓴 것으로 바꿉니다.
    색 순서는 그대로라 '무지개' 라는 느낌은 유지됩니다.  */
html[data-pack="pop"] .ntag.holo {
  /*  ★ background 단축을 쓰면 background-clip 까지 초기화돼서
      글자 모양으로 안 잘리고 **색 덩어리**가 됩니다 (시험에서 그랬습니다).
      background-image 만 바꿉니다.  */
  background-image: linear-gradient(90deg, #008BA3, #4A8F00, #B38A00, #C4142F, #5B2FBF, #008BA3);
}
@keyframes holoShift { to { background-position: 300% 0; } }

/* 상점 — 이름표 탭 */
.name-preview {
  border: 1px solid var(--neon); border-radius: 10px;
  background: linear-gradient(180deg, rgba(var(--neon-rgb), .12), rgba(var(--neon-rgb), .03));
  padding: 14px; text-align: center; margin-bottom: 6px;
}
.np-label { font-family: var(--disp); font-size: 9.5px; letter-spacing: 2px; color: var(--dim); margin-bottom: 8px; }
.np-row { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; }
.np-h { grid-column: 1 / -1; margin: 14px 0 2px; }
.theme-grid.inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.theme-grid.inner.titles { grid-template-columns: repeat(2, 1fr); }
.nt-prev { font-size: 16px; padding: 8px 0; }
.ti-prev { padding: 10px 0 6px; min-height: 34px; }
.tag.season { background: rgba(255,216,77,.16); color: var(--hot); }

/* 랜덤 상자 카드 */
/*  ★ 2026-08-27 — 상자 카드가 너무 컸습니다.
    한 줄을 통째로 쓰면서 큰 아이콘·설명 두 줄까지 얹혀, 정작 살 물건들이
    화면 밖으로 밀렸습니다. 아이콘을 왼쪽에 두고 **한 줄짜리 띠**로 낮췄습니다. */
.box-card {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 10px; text-align: left; padding: 10px 12px;
  border-color: rgba(255,216,77,.4);
  background: linear-gradient(180deg, rgba(255,216,77,.10), rgba(255,216,77,.02));
}
.box-card .box-ico { font-size: 22px; grid-row: 1 / span 2; }
.box-card .shop-name { margin-top: 0; }
.box-card .box-only-note { grid-column: 2; margin-top: 2px; }
/*  값과 "확률 보기" 는 오른쪽 끝에 세로로 */
.box-card .tag { grid-column: 3; grid-row: 1; margin: 0; }
.box-card .try-btn { grid-column: 3; grid-row: 2; width: auto; padding: 3px 10px; margin-top: 3px; }
.box-ico { font-size: 30px; }
.box-pop-ico { font-size: 44px; margin-bottom: 6px; }
.box-pop-name {
  font-family: var(--disp); font-size: 17px; font-weight: 700; letter-spacing: 2px;
  color: var(--neon-soft); margin: 8px 0 14px; line-height: 1.7;
}

/* 시즌 한정 표시 */
.shop-item.seasonal { border-color: rgba(255,122,24,.45); }
.season-flag {
  position: absolute; top: 6px; right: 6px;
  font-family: var(--disp); font-size: 8px; letter-spacing: 1px;
  color: #FFC489; background: rgba(255,122,24,.18);
  border-radius: 3px; padding: 2px 5px;
}
.shop-item { position: relative; }
/*  INFINITY — 내 기록을 넘어선 순간 (기록을 깬 게 보여야 신이 납니다) */
.hleft.over { color: var(--hot); text-shadow: 0 0 14px var(--hot); }

/*  신고 창 — 고르기 아래에 직접 쓰는 칸
    ★ 고르기를 먼저 둡니다. 자유 입력만 두면 빈 채로 보내거나
      아무 글자나 넣는 신고가 늘어납니다. */
.rep-free { margin: 14px 0 4px; }
.rep-or {
  font-size: 11.5px; color: var(--dim2, var(--dim)); margin-bottom: 7px;
  display: flex; align-items: center; gap: 8px;
}
.rep-or::before, .rep-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.rep-free input {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: 9px; padding: 11px 12px; color: var(--ink);
  font: inherit; font-size: 14px;
}
.rep-free input:focus { outline: none; border-color: var(--neon); }
.rep-free .rep-send { width: 100%; padding: 11px 6px; font-size: 12px; }

/*  크레딧이 나가는 게 보이게 — 누른 자리에서 떠오릅니다
    ★ position:fixed 라 어느 화면에서 눌러도 그 자리에 뜹니다.
      pointer-events:none 이 꼭 있어야 합니다 — 없으면 뜬 숫자가
      다음 누름을 가로챕니다. */
.spend-fx {
  position: fixed; z-index: 200; pointer-events: none;
  transform: translate(-50%, -50%);
  font-family: var(--disp); font-size: 17px; font-weight: 700;
  color: var(--hot); text-shadow: 0 0 12px var(--hot), 0 2px 6px rgba(0,0,0,.6);
  animation: spendUp .9s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes spendUp {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  18%  { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .spend-fx { animation: spendFade .9s linear forwards; }
  @keyframes spendFade { 0%,70% { opacity: 1 } 100% { opacity: 0 } }
}

/*  순위표 — 내 줄에서 한마디 걸기 ─────────────────────────────
    ★ 홈 띠에서만 열 수 있어 "어디서 고르는지 못 찾겠다" 는 제보가 있었습니다.
      띠는 계속 흐르는 데다 내 줄이 지나갈 때를 노려야 해서 사실상 못 찾습니다.
      순위표 내 줄이 훨씬 자연스러운 자리입니다. */
.rank-taunt {
  flex: none; margin-left: 4px; padding: 3px 9px; cursor: pointer;
  font: inherit; font-family: var(--disp); font-size: 9px; letter-spacing: .8px;
  color: var(--neon); background: transparent;
  border: 1px solid rgba(0,229,255,.45); border-radius: 999px;
  white-space: nowrap;
}
.rank-taunt:active { transform: scale(.94); }
/*  ★ 2026-08-27 — 문구가 잘리던 것
    이름 칸(.rname) 안에 넣었더니 폭이 모자라 말줄임이 됐습니다.
    3위까지만 쓸 수 있는 특권인데 잘려 보이면 뜻이 없습니다.
    줄 **전체 폭을 쓰는 아랫줄**로 내리고, 두 줄까지 접히게 했습니다. */
.rank-row.has-taunt {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto;
  grid-template-areas:
    'badge flag name rep taunt score'
    '.     .    line line line  line';
  row-gap: 3px;
}
.rank-row.has-taunt > .rbadge { grid-area: badge }
.rank-row.has-taunt > .rflag  { grid-area: flag }
.rank-row.has-taunt > .rname  { grid-area: name; min-width: 0 }
.rank-row.has-taunt > .rank-report { grid-area: rep }
.rank-row.has-taunt > .rank-taunt  { grid-area: taunt }
.rank-row.has-taunt > .rscore { grid-area: score }
.rtaunt {
  grid-area: line;
  font-size: 11.5px; font-style: italic; line-height: 1.4;
  color: var(--accent, #FFC24D);
  white-space: normal; word-break: break-word;
}

/*  돈으로 못 사는 것 — 얻는 방법 */
.how-note {
  font-size: 10px; line-height: 1.45; color: var(--hot, #FFD84D);
  margin-top: 5px; opacity: .9;
}
/*  ★ 2026-09-01 — 밝은 팩에서 이 줄이 통째로 안 보였습니다.
    굵은 글자를 흰색으로 칠해 뒀는데, POP 은 바탕이 하얗습니다.
    CHAMPION·RUNNER-UP 은 설명이 거의 다 <b> 안에 있어서
    (네 구역 모두 <b>DIAMOND</b> · <b>ABYSS</b>까지) 아무것도 안 보였습니다. */
.how-note b { color: #FFF; }
html[data-pack="pop"] .how-note { opacity: 1; }
html[data-pack="pop"] .how-note b { color: #12161F; }

/*  기록 화면 — 아이템전 안내 한 줄 */
.dnote { font-size: 11px; color: var(--dim); line-height: 1.5; margin: 8px 0 2px; }
.dnote b { color: var(--hot, #FFD84D); }
#data-mode { margin-bottom: 10px; }

/*  한정 설명 — 작게, 카드 맨 아래에 */
.season-note {
  font-size: 10px; line-height: 1.45; color: #FFC489;
  margin-top: 6px; opacity: .85;
}

/* 이름표 탭은 위에서 아래로 흐릅니다 (2단 격자 아님) */
.theme-grid.as-block { display: block; }
.theme-grid.as-block .np-h { margin: 16px 0 8px; }

/* =====================================================================
    정체성 색 (--me) — 고른 이름표가 '나를 나타내는' 곳에 전부 적용됩니다
      · 홈의 거대한 기록 숫자
      · 티어 배지 (등급색이 없을 때)
      · 랭킹의 내 이름
    게임 화면(타일·이펙트)은 --neon 이 따로 맡습니다. 둘은 안 싸웁니다.
   ===================================================================== */
:root { --me: var(--neon-soft); --me-glow: var(--neon); --me-rgb: var(--neon-rgb); }

.hero-time {
  color: var(--me);
  text-shadow: 0 0 8px var(--me-glow), 0 0 34px var(--me-glow),
               0 0 70px rgba(var(--me-rgb), .35);
}
.hero-unit, .hero-zone { color: var(--dim); }
.hero-next { color: var(--me); }

/* 티어 배지 — 아직 티어가 없을 때도 내 색으로 */
.tier-badge.empty {
  color: var(--me); border-color: rgba(var(--me-rgb), .5);
  text-shadow: 0 0 10px var(--me-glow); opacity: .75;
}

/* ENGAGE 버튼 테두리도 살짝 내 색을 머금게 */
.engage { border-color: rgba(var(--me-rgb), .8); }
.engage-txt { color: var(--me); text-shadow: 0 0 14px var(--me-glow); }

/* 무지개(HOLO) 는 큰 숫자도 흐르게 */
body[data-me="holo"] .hero-time,
body[data-me="holo"] .engage-txt {
  background: linear-gradient(90deg, #00E5FF, #8CFF00, #FFD84D, #FF2F4F, #8B5CFF, #00E5FF);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
  animation: holoShift 5s linear infinite;
}
body[data-me="holo"] .hero-time { filter: drop-shadow(0 0 18px rgba(139,92,255,.55)); }

/* 상자 전용 — 보이되 못 삽니다 (안 보이면 갖고 싶지도 않으니까요) */
.tag.box { background: rgba(255,216,77,.15); color: var(--hot); }
.shop-item.boxonly { border-color: rgba(255,216,77,.34); border-style: dashed; }
.box-only-note { font-size: 10.5px; color: var(--hot); margin-top: 4px; }

/* 상자 전용 이름색 */
.ntag[style*="E8EEF7"] { /* CHROME */
  background: linear-gradient(180deg, #FFFFFF, #A9BACE 55%, #E8EEF7);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-me="toxic"] .hero-time, .ntag[style*="C6FF3D"] { animation: toxicFlicker 2.2s steps(6) infinite; }
@keyframes toxicFlicker { 0%,100% { opacity: 1; } 45% { opacity: .78; } 55% { opacity: 1; } }
.ntag[style*="FFFFFF"][style*="FF2FD0"] { /* GLITCH */
  animation: glitchName 2.4s steps(8) infinite;
}
@keyframes glitchName {
  0%, 88%, 100% { text-shadow: 0 0 10px #FF2FD0; }
  90% { text-shadow: -2px 0 #00E5FF, 2px 0 #FF2F4F; }
  94% { text-shadow: 2px 0 #00E5FF, -2px 0 #FF2F4F; }
}
/*  상자에서 뽑은 것의 등급 — 물건 이름 위에 크게 */
.bp-rar {
  display: block; font-family: var(--disp); font-size: 12px;
  letter-spacing: 3px; margin-bottom: 2px;
}
.bp-cat {
  display: block; font-family: var(--disp); font-size: 10px; letter-spacing: 2px;
  color: var(--dim); margin-bottom: 4px;
}

/* ===================== 선 아이콘 =====================
   이모지는 폰마다 그림이 다르고 알록달록해서 네온 톤과 안 맞습니다.
   전부 SVG 선 아이콘으로 통일했고, currentColor 라 글자색을 그대로 따라갑니다. */
.mi { width: 1em; height: 1em; display: block; color: inherit; }
.menu-btn span { display: flex; align-items: center; justify-content: center; }
.menu-3 .menu-btn span .mi { width: 22px; height: 22px; }
.over-foot .menu-btn span .mi { width: 19px; height: 19px; }
.topbar .chip.icon { display: inline-flex; align-items: center; justify-content: center; }
.topbar .chip.icon .mi { width: 16px; height: 16px; }

/* HUD 를 격자보다 앞에 둡니다 — 콤보·페널티가 격자에 가려지지 않게 */
.hud { position: relative; z-index: 6; }

/* ===================== 앱 설치 권유 카드 =====================
   웹으로 들어온 사람에게만 나옵니다. 앱 안에서는 안 나옵니다.
   스토어 주소(App.STORE_URL)가 비어 있으면 아예 안 그려집니다. */
.install-card {
  display: flex; align-items: center; gap: 11px;
  width: 100%; max-width: 400px; margin: 14px auto 2px;
  border: 1px solid var(--neon); border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--neon-rgb), .16), rgba(var(--neon-rgb), .04));
  box-shadow: 0 0 18px rgba(var(--neon-rgb), .22);
  padding: 12px 14px; text-decoration: none; color: var(--ink);
}
.install-card:active { transform: translateY(2px); }
.ic-ico {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--neon); color: #05060B; font-size: 14px;
}
.ic-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.ic-txt b {
  font-family: var(--disp); font-size: 12px; letter-spacing: 1.5px; color: var(--neon-soft);
}
.ic-txt em { font-style: normal; font-size: 11px; color: var(--dim); line-height: 1.4; }
.ic-go { margin-left: auto; font-size: 20px; color: var(--neon); }

/* ── 상자에서 방금 얻은 칸을 깜빡여 알려줍니다 ────────────────────
   이름이 겹치던 시절에 엉뚱한 탭을 뒤지다 "안 샀네?" 로 오해했습니다.
   결과 팝업의 '보러가기' 가 그 탭으로 데려오고, 여기서 눈에 띄게 합니다. */
.shop-item.just-won {
  animation: justWon 2.4s ease-out;
  position: relative; z-index: 2;
}
@keyframes justWon {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  8%, 24%, 40% { box-shadow: 0 0 0 3px var(--neon), 0 0 22px var(--neon); }
  16%, 32%, 48% { box-shadow: 0 0 0 1px var(--neon), 0 0 8px var(--neon); }
  70% { box-shadow: 0 0 0 2px var(--neon), 0 0 16px var(--neon); }
}

/* ── 스타일 팩 고르기 (상점 GRID 탭 맨 위) ──────────────────────
   격자색보다 위층이라 목록과 확실히 구분되게 띄워 둡니다. */
.pack-row {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding: 12px 12px 13px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel);
}
.pack-label {
  font-family: var(--disp); font-size: 10.5px; font-weight: 700;
  letter-spacing: 3px; color: var(--dim); margin-bottom: 9px;
}
.pack-btns { display: flex; gap: 8px; }
.pack-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--dim);
  font-family: var(--disp); font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
}
.pack-btn.on { border-color: var(--neon); color: var(--neon); }
/* 미리보기 칩 — 그 팩이 어떤 느낌인지 한눈에 (그림 파일 0개) */
.pack-chip { width: 15px; height: 15px; border-radius: 5px; flex: none; }
.pack-chip.pk-cyber { background: #0C1B26; border: 1.5px solid #00E5FF; box-shadow: 0 0 7px #00E5FF; }
.pack-chip.pk-pop { background: #FFFFFF; border: 2.5px solid #16181F; box-shadow: 0 2px 0 rgba(20,20,30,.3); }

/* ── INFINITY 버튼 (홈) ────────────────────────────────────────────
   존 카드와 규칙이 달라서(시간 고정·개수 경쟁) 줄을 나눠 둡니다. */
.inf-btn {
  display: flex; align-items: center; gap: 11px; width: 100%;
  margin-top: 9px; padding: 12px 13px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--ink);
  font-family: var(--mono); text-align: left;
}
.inf-btn:active { transform: scale(.985); }
.inf-ico {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  font-family: var(--disp); font-size: 20px; font-weight: 900;
  color: var(--neon); border: 1px solid var(--neon);
  box-shadow: 0 0 14px rgba(var(--neon-rgb), .35), inset 0 0 12px rgba(var(--neon-rgb), .18);
}
.inf-txt { flex: 1; min-width: 0; display: block; }
.inf-name {
  display: block; font-family: var(--disp); font-size: 12px; font-weight: 700;
  letter-spacing: 2px; font-style: normal;
}
.inf-sub {
  display: block; font-size: 11px; color: var(--dim); font-style: normal; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inf-best {
  flex: none; font-family: var(--disp); font-size: 17px; font-weight: 900;
  color: var(--neon); font-variant-numeric: tabular-nums;
}
.inf-best.none { color: var(--dim); font-size: 14px; }
/* POP 팩에서는 발광 대신 또렷한 테두리 */
html[data-pack="pop"] .inf-ico { box-shadow: 0 2px 0 rgba(20,20,30,.22); border-width: 2px; }

/* ── 일일 미션 안내 ────────────────────────────────────────────────
   '0/5' 만 있으면 무슨 뜻인지 알 수 없어서 보상을 바로 밑에 적습니다. */
.shint {
  font-family: var(--disp); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1px; color: var(--hot); margin-top: 3px;
}
.shint.done { color: var(--neon); }

/* ── 홈 INFINITY 최고기록 ─────────────────────────────────────────
   숫자만 있으면 그게 최고기록인지 이번 판인지 헷갈립니다. */
.inf-score { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.inf-blabel {
  font-family: var(--disp); font-size: 8.5px; font-weight: 700;
  letter-spacing: 2px; color: var(--dim); font-style: normal;
}

/* ── 결과 화면 머리 ────────────────────────────────────────────────
   'RESULT' 와 모드 이름이 같은 크기라 **두 개의 딴 것**처럼 보였습니다.
   RESULT 를 작은 머리글로 낮추고 모드 이름을 제목으로 키워 하나로 읽히게 합니다. */
.over-head { font-size: 10px; letter-spacing: 7px; opacity: .7; }
#over-zone { font-size: 15px; letter-spacing: 4px; margin-top: 4px; display: block; }

/* ── 웹 '혼자 하기' 제한 안내 ─────────────────────────────────────
   막고 끝내면 그냥 나갑니다. 그래서 '친구와 대결' 을 같이 놓아
   할 수 있는 일을 남겨 둡니다. */
.gate-ico {
  width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 13px;
  display: grid; place-items: center;
  font-family: var(--disp); font-size: 20px; font-weight: 900;
  color: var(--neon); border: 1.5px solid var(--neon);
  box-shadow: 0 0 18px rgba(var(--neon-rgb), .35);
}
.gate-msg {
  font-size: 13px; line-height: 1.7; color: var(--dim);
  margin: 10px 0 0; text-align: center;
}
.gate-btns { flex-direction: column; gap: 8px; margin-top: 16px; }
.gate-btns > * { width: 100%; }
.gate-go {
  display: block; text-align: center; text-decoration: none;
  padding: 13px; border-radius: 12px; box-sizing: border-box;
}
html[data-pack="pop"] .gate-ico { box-shadow: 0 2px 0 rgba(20,20,30,.22); border-width: 2px; }

/* ── 보상형 광고 버튼 ──────────────────────────────────────────────
   ★ 플레이스토어 빌드에서만 나타납니다.
     웹·앱인토스에는 App.rewardProvider 가 없어 아예 안 그려집니다.
   자발적으로 누르는 버튼이라, 눈에 띄되 주된 버튼을 가리지 않게 둡니다. */
.btn-ad {
  display: block; width: 100%; margin: 10px 0 2px; cursor: pointer;
  border: 1px solid var(--hot); border-radius: 12px; padding: 12px;
  background: rgba(255, 216, 77, .10); color: var(--hot);
  font-family: var(--disp); font-size: 13px; font-weight: 700; letter-spacing: 1px;
}
.btn-ad:active { transform: scale(.98); }
.btn-ad:disabled { opacity: .5; cursor: default; }
html[data-pack="pop"] .btn-ad {
  background: #FFFFFF; border: 2px solid var(--hot); color: var(--hot);
  box-shadow: 0 2px 0 rgba(20,20,30,.16);
}

/* ── 화면 아래 안전 여백 ──────────────────────────────────────────
   ★ 이 앱은 meta viewport 에 viewport-fit=cover 가 있습니다.
     그래서 웹뷰가 화면 **끝까지** 펼쳐지고, 폰 아래쪽 제스처 바(또는 3버튼 바)가
     화면 위에 겹칩니다. 아래 여백을 안 주면 홈·결과 화면의 메뉴 버튼이
     그 바에 가려 눌리지 않습니다.

     위쪽은 이미 .topbar 가 env(safe-area-inset-top) 으로 처리하고 있는데
     아래쪽만 빠져 있었습니다.

   ※ 광고 배너가 붙으면 여기에 --ad-h 가 더해집니다 (apply-ads.mjs 가 넣어 줍니다). */
.home-body,
.over-body,
.duel-body,
#screen-help .pad,
#screen-shop .pad,
#screen-rank .pad,
#screen-data .pad,
#screen-config .pad {
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* ── 배너 공지 (메인에 한 번만) ──────────────────────────────────
   ★ 위의 흐르는 띠와 다른 것입니다.
     띠 : 늘 있는 것 (시즌·1위) — 읽기만 하는 정보
     배너 : 운영자가 **한 번 알리고 싶은 것** — 닫으면 그만  */
/*  ★ 2026-08-27 — **흐르는 띠**로 바꿨습니다.
    처음엔 네모난 알림 상자로 만들었는데, 아래 왕좌 띠처럼 흐르는 것을
    기대하셨습니다. 실제로 그 편이 낫습니다 —
      · 긴 글도 잘리지 않고 끝까지 읽힙니다 (상자는 접히거나 잘립니다)
      · 화면을 한 줄만 차지합니다
      · 바로 아래 왕좌 띠와 생김새가 이어져 화면이 정돈돼 보입니다
    ★ 왕좌 띠와 다른 점: **닫기 단추가 있습니다.** 한 번 알리고 마는 것이니까요. */
.banner {
  position: relative; display: flex; align-items: center;
  margin-bottom: 8px; border-radius: 10px; border: 1px solid;
  font-size: 12.5px; overflow: hidden;
}
.banner .bn-view {
  flex: 1; min-width: 0; overflow: hidden; padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.banner .bn-track {
  display: inline-flex; white-space: nowrap; will-change: transform;
  animation: tickRoll var(--bn-dur, 24s) linear infinite;
}
.banner .bn-one { padding: 0 22px; display: inline-flex; align-items: center; gap: 7px; }
.banner .bn-x {
  flex: none; width: 30px; align-self: stretch; padding: 0; cursor: pointer;
  background: transparent; border: 0; border-left: 1px solid currentColor;
  color: inherit; opacity: .55; font-size: 14px; line-height: 1;
}
.banner .bn-x:active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .banner .bn-track { animation: none; }
  .banner .bn-view { overflow-x: auto; }
}
.banner.info { border-color: rgba(0,229,255,.4);  background: rgba(0,229,255,.08);  color: var(--neon-soft, #7FF3FF); }
.banner.warn { border-color: rgba(255,194,77,.45); background: rgba(255,194,77,.10); color: #FFD98A; }
.banner.good { border-color: rgba(124,255,107,.4); background: rgba(124,255,107,.09); color: #B6FF9E; }

/* ── 새 판 알림 ──────────────────────────────────────────────────
   ★ 배너 공지와 달리 **흐르지 않습니다.**
     이건 '읽고 지나가는 소식' 이 아니라 **눌러서 할 일**이라,
     움직이면 오히려 누르기 어렵습니다. */
.update-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid rgba(124,255,107,.4); border-radius: 10px;
  background: rgba(124,255,107,.08); color: #B6FF9E;
  font-size: 12.5px; line-height: 1.45;
}
.update-bar.must { border-color: rgba(255,194,77,.5); background: rgba(255,194,77,.10); color: #FFD98A; }
.update-bar .ub-txt { flex: 1; min-width: 0; }
.update-bar .ub-txt em { font-style: normal; font-family: var(--disp); opacity: .9; }
.update-bar .ub-note { display: block; font-size: 11px; opacity: .8; margin-top: 2px; }
.update-bar .ub-go {
  flex: none; text-decoration: none; cursor: pointer;
  font-family: var(--disp); font-size: 11px; letter-spacing: 1px;
  color: #06280A; background: var(--lime, #7CFF6B);
  border-radius: 999px; padding: 7px 13px;
}
.update-bar.must .ub-go { background: var(--hot, #FFD84D); }
.update-bar .ub-x {
  flex: none; width: 22px; height: 22px; padding: 0; cursor: pointer;
  background: transparent; border: 0; color: inherit; opacity: .6; font-size: 14px;
}
.update-bar .ub-x:active { opacity: 1; }

/* ── 흐르는 띠 (시즌 · 왕좌 · 도발) ──────────────────────────────
   ★ 왜 흐르게 하나
     1위가 되어도 남는 게 없다는 게 문제였습니다. 순위 화면에 들어가야만
     보이니까요. 이 띠는 **모두의 홈 맨 위**에서 계속 돕니다.
     "저 사람 이름이 계속 떠 있다" 가 1위의 진짜 보상입니다.

   ★ 왜 CSS 애니메이션인가
     JS 로 위치를 옮기면 매 프레임 리플로우가 걸립니다. 여기는 홈이고
     사람이 오래 머무는 자리라, transform 만 움직여 GPU 에 맡깁니다.

   ★ 글자 수가 달라도 속도가 일정해야 합니다 — JS 가 실제 폭을 재서
     --tick-dur 을 넣어 줍니다 (홈.js 의 띠그리기 참고). */
.ticker {
  position: relative; overflow: hidden;
  margin: 0 0 10px; padding: 7px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(0,229,255,.05), transparent 40%, rgba(0,229,255,.05));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tick-track {
  display: inline-flex; white-space: nowrap; will-change: transform;
  animation: tickRoll var(--tick-dur, 30s) linear infinite;
}
/*  ★ 눌러도 멈추지 않습니다 (2026-08-27).
    멈춤을 넣었던 이유는 '읽을 시간을 주려고' 였는데, 정작 띠 안의 내 줄을
    누르려다 멈춰버려 어색했습니다. 한마디 고르기는 이제 순위표에 있으니
    띠는 **읽기만 하는 것**으로 두고 계속 흐르게 합니다. */
@keyframes tickRoll { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) {
  .tick-track { animation: none; }
  .ticker { overflow-x: auto; }
}
.tick-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--dim); padding: 0 16px;
}
.tick-item .tk-ico { font-size: 12px; }
.tick-item .tk-zone { font-family: var(--disp); font-size: 10.5px; letter-spacing: 1.5px; color: var(--dim2, var(--dim)); }
.tick-item .tk-nick { color: var(--ink); font-weight: 700; }
.tick-item .tk-time { font-family: var(--disp); color: var(--neon); font-variant-numeric: tabular-nums; }
/*  도발은 눈에 띄어야 합니다 — 이게 1위가 얻는 것이니까요 */
.tick-item .tk-taunt { color: var(--accent, #FFC24D); font-style: italic; }
.tick-item.tk-season .tk-left { color: var(--neon); font-weight: 700; }
/*  내가 1위인 줄은 도드라지게 */
.tick-item.mine .tk-nick { color: var(--neon); text-shadow: 0 0 8px var(--neon); }

/*  '도발 문구 고르기' 창의 목록 */
.taunt-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; text-align: left; }
.taunt-opt {
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  background: rgba(255,255,255,.03); cursor: pointer; font-size: 13px; line-height: 1.45;
}
.taunt-opt:hover { border-color: var(--neon); }
.taunt-opt.on { border-color: var(--neon); background: rgba(0,229,255,.08); color: var(--ink); }
/*  ★ 아직 못 쓰는 문구도 **보여줍니다.** 안 보이면 올라갈 이유가 안 생깁니다. */
.taunt-opt.locked {
  opacity: .42; cursor: default; border-style: dashed;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.taunt-opt.locked:hover { border-color: var(--line); }
.tn-lock {
  flex: none; font-family: var(--disp); font-size: 9.5px; letter-spacing: 1px;
  color: var(--hot, #FFD84D); border: 1px solid currentColor; border-radius: 4px; padding: 2px 6px;
}
/*  띠 — 등수에 따라 눈에 띄는 정도를 다르게 (1위가 제일 도드라지게) */
.tick-item.r2 { opacity: .8 }
.tick-item.r3 { opacity: .66 }
/*  ★ 버튼처럼 보이면 안 됩니다 — 띠는 계속 흐르는 데다,
    한마디를 거는 곳은 **순위표**입니다. 그리로 가라는 안내일 뿐입니다. */
.tick-item .tk-hint { color: var(--neon); opacity: .85; }

/* ── 아래에 더 있다는 표시 ────────────────────────────────────────
   ★ 2026-08-26 — S22 울트라에서 겪은 일
     화면 아래에 **광고 배너 + 폰 제스처 바**가 겹칩니다. 여백은 이미 주고 있어
     가려지지는 않는데, 마지막 줄이 딱 잘린 것처럼 보여서
     "상점·대결이 있는지조차 모르는" 상황이 생겼습니다.

     내용이 길어서 더 있는 것뿐인데, **더 있다는 신호가 없던 게** 문제입니다.
     · 아래쪽에 옅은 그늘을 깔아 '여기서 끝이 아니다' 를 보이게 합니다
     · 작은 화살표를 얹어 내려보라고 알려 줍니다
     · 맨 아래까지 내려가면 둘 다 사라집니다 (js/공통.js 의 스크롤안내)

   ※ 그늘은 눌러지면 안 됩니다 — pointer-events:none 이 꼭 있어야 합니다. */
/*  ★ 처음엔 아래쪽에 **넓은 그늘**을 깔았는데, 정작 그 자리에 있는
    연속·누적·일일 글씨를 덮어 버렸습니다. 안 보이게 만들려던 게 아니라
    더 있다고 알려주려던 것이니, **작은 알약 하나**로 바꿨습니다.
    화면 내용은 하나도 안 가립니다. */
.more-below {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  pointer-events: none; opacity: 0; transition: opacity .22s;
  display: flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(0,229,255,.42);
  background: rgba(8,11,20,.88);
  box-shadow: 0 2px 14px rgba(0,0,0,.5);
  font-size: 11px; letter-spacing: 1px; color: var(--neon);
  z-index: 40;
}
.more-below::after {
  content: '⌄';
  font-size: 15px; line-height: 1;
  animation: moreBob 1.5s ease-in-out infinite;
}
/*  ★ 광고 배너가 붙으면 그만큼 위로 올립니다 (--ad-h 는 apply-ads.mjs 가 채웁니다) */
body.ad-on .more-below { bottom: calc(var(--ad-h, 60px) + 10px + env(safe-area-inset-bottom, 0px)); }
.screen.can-scroll .more-below { opacity: 1; }
/*  ★ 알약 자체가 translateX(-50%) 로 가운데 정렬돼 있으므로,
    화살표는 **안쪽 ::after** 만 위아래로 움직입니다 (겹치면 가운데가 틀어집니다). */
@keyframes moreBob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(3px) } }
@media (prefers-reduced-motion: reduce) { .more-below::after { animation: none } }

/* ── 순위표 이름 신고 ──────────────────────────────────────────────
   ★ 구글플레이는 남의 닉네임이 보이는 앱에 '신고 수단' 을 요구합니다.
     없으면 반려되거나, 통과해도 신고 한 번에 앱이 내려갑니다.
   눈에 띄되 순위 읽기를 방해하지 않게 흐리게 두고, 누를 때만 또렷해집니다. */
.rank-report {
  flex: none; width: 24px; height: 24px; margin-left: 4px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--dim); opacity: .35; font-size: 12px; line-height: 1;
}
.rank-report:hover, .rank-report:active { opacity: 1; color: var(--bad); }
.rank-row.me .rank-report { display: none; }

/* ── 이름이 가려졌을 때 홈에 뜨는 띠 ──────────────────────────────
   ★ 팝업이 아니라 '띠' 인 이유: 진입 직후 팝업은 앱인토스 반려 사유입니다.
     알리되 강제로 막지 않고, 누를 때만 창이 열립니다. */
.home-notice {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 10px; padding: 10px 12px;
  border: 1px solid var(--bad); border-radius: 11px;
  background: rgba(255,77,109,.10);
}
.hn-ico { flex: none; font-size: 15px; color: var(--bad); }
.hn-txt { flex: 1; min-width: 0; font-size: 12px; line-height: 1.5; color: var(--ink); }
.hn-go {
  flex: none; cursor: pointer; padding: 7px 12px; border-radius: 9px;
  border: 1px solid var(--bad); background: transparent; color: var(--bad);
  font-family: var(--disp); font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
}
html[data-pack="pop"] .home-notice { background: #FFFFFF; border-width: 2px; }

/* 이의제기 입력칸 */
.appeal-box {
  width: 100%; min-height: 84px; margin-top: 12px; padding: 11px;
  box-sizing: border-box; resize: none;
  border: 1px solid var(--line); border-radius: 11px;
  background: rgba(255,255,255,.05); color: var(--ink);
  font-family: inherit; font-size: 13px; line-height: 1.6;
}
html[data-pack="pop"] .appeal-box { background: #FFFFFF; border-color: rgba(20,20,30,.28); }

/* 신고 사유 버튼 — 세로로 쌓아 누르기 쉽게 */
.reason-btn { width: 100%; }

/* ── 내 데이터 (설정) ─────────────────────────────────────────────
   기록이 어떤 번호로 저장되는지 보여줍니다.
   이름·이메일을 안 받는 대신 이 번호가 유일한 식별자라,
   이메일로 문의하실 때 이걸 알려주셔야 기록을 찾을 수 있습니다. */
.myid {
  font-family: var(--mono); font-size: 11px; letter-spacing: .5px;
  color: var(--dim); word-break: break-all;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255,255,255,.04);
}
html[data-pack="pop"] .myid { background: #FFFFFF; border-color: rgba(20,20,30,.2); color: #4A5060; }
.btn-ghost.danger { border-color: var(--bad); color: var(--bad); }

/* ── 격자 터치 처리 ────────────────────────────────────────────────
   ★ touch-action 을 안 주면 브라우저가 손가락이 닿을 때마다
     "스크롤인가 탭인가" 를 잠깐 망설입니다. 그 망설임이 입력을 씹습니다.

     none 으로 두면 격자 위에서는 스크롤·확대 제스처를 아예 안 봅니다.
     격자는 원래 스크롤할 일이 없으므로 잃는 게 없고,
     닿는 즉시 pointerdown 이 확실하게 들어옵니다.

   ※ 격자 '안' 에만 겁니다. 화면 전체에 걸면 상점·랭킹이 스크롤이 안 됩니다. */
#grid, .tile { touch-action: none; }

/* 상자를 다 연 탭 — 살 수 없으니 값을 안 보여주고 흐리게 */
.box-only-note.done { color: var(--dim); }
.box-card.locked { opacity: .6; }

/*  그만두기 창 안의 일시정지 안내 (2026-09-01)
    ★ 한 판에 시간을 멈출 수 있는 건 한 번뿐입니다.
      두 번째부터는 창은 뜨되 시간이 계속 갑니다 — 나가려는 사람은 막지 않되,
      멈춰 두고 매크로를 맞추는 데는 못 쓰게 하려는 것입니다. */
.quit-note {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.5; color: var(--dim);
}


/*  ── 시계가 계속 가는 덮개 (2026-09-03) ────────────────────────────────
    ★ 일시정지 예산(한 판에 한 번)을 다 쓰면, 덮개는 씌우되 **시계는 갑니다**
      (게임.js 의 pause() 주석). 같은 덮개인데 뜻이 정반대라
      색으로 갈라 줍니다 — 안 그러면 "멈춘 줄 알았는데 시간이 갔다" 가 됩니다. */
.paused.running .paused-title { color: var(--hot, #FFD84D); }
.paused.running .paused-sub   { color: var(--hot, #FFD84D); opacity: .95; }

/*  광고로 두 배를 받고 난 자리 (2026-09-04)
    ★ 단추를 없애고 빈자리만 남기면 "눌렀는데 아무 일도 안 났나?" 싶습니다.
      받은 것을 그 자리에 남겨 줍니다. */
.ad-done {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(124,255,107,.4); background: rgba(124,255,107,.10);
  color: #B6FF9E; font-size: 13px; font-family: var(--disp); letter-spacing: .3px;
}
html[data-pack="pop"] .ad-done {
  border-width: 2px; border-color: #2C7D2C; background: #E9FAE5; color: #123A12;
}