/* ============================================================
   쓱쓱 머지 (puzzlo) — styles.css
   PLAN [5] 5.4 토큰을 실제값 그대로. 외부 폰트/CDN 금지(오프라인 세이프).
   ============================================================ */

/* ---------- 토큰 ---------- */
:root{
  /* 서피스 / 배경 (포근한 크림 디저트 트레이) */
  --bg:        #FBF3E4;
  --bg-warm:   #F6E7CC;
  --surface:   #FFFBF2;
  --board:     #EFE0C6;
  --slot:      #E4D2B3;
  --slot-in:   #DEC9A6;

  /* 잉크 / 라인 (웜 슬레이트) */
  --ink:       #3A3140;
  --muted:     #8A7E72;
  --faint:     #B6A892;
  --line:      rgba(58,49,64,.12);

  /* 포인트 — 캐러멜/골드 */
  --gold:      #E9A23B;
  --gold-soft: #F7C66B;
  --gold-deep: #C77F22;
  --berry:     #E2698E;

  /* 상태 */
  --win:       #58B368;
  --shadow:    rgba(120,86,38,.16);

  /* 사이징 */
  --board-max: 28rem;
  --gap:       3.2vw;
  --radius-tile: 18px;
  --radius-card: 24px;

  /* 모션 */
  --ease-slide: cubic-bezier(.22,.68,.32,1);
  --t-slide: 150ms;
  --ease-pop: cubic-bezier(.34,1.56,.64,1);
  --t-merge: 220ms;
  --t-spawn: 200ms;
  --t-view: 320ms;

  /* 폰트 (오프라인 세이프 시스템 스택) */
  --font-ko: 'Pretendard','Apple SD Gothic Neo','Noto Sans KR',
             system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-round: 'Quicksand','Pretendard',system-ui,-apple-system,sans-serif;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* 다크 — "초콜릿 크림" (서피스/잉크만 교체, 타일 단계색은 유지) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#241A14; --bg-warm:#1B130E; --surface:#2E2118; --board:#34261A;
    --slot:#3D2C1E; --slot-in:#321F12; --ink:#F3E9DC; --muted:#C7B5A0;
    --faint:#8C7A66; --line:rgba(243,233,220,.12); --shadow:rgba(0,0,0,.45);
  }
}

/* 셀프호스트 폰트 슬롯(옵션) — 파일 없으면 시스템 스택으로 자연 degrade.
   현재 빌드는 self-host woff2를 동봉하지 않음(시스템 스택만). 향후 ./fonts/ 추가 시 활성.
@font-face{ font-family:'Quicksand'; font-style:normal; font-weight:500 700;
  font-display:swap; src:url('./fonts/quicksand-var.woff2') format('woff2'); }
*/

/* ---------- 리셋 / 베이스 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:var(--font-ko);
  color:var(--ink);
  background:linear-gradient(170deg,var(--bg),var(--bg-warm));
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
  touch-action:manipulation;
}
button{ font-family:inherit; color:inherit; cursor:pointer; }
.numic{ font-family:var(--font-round); font-feature-settings:"tnum" 1; }
b{ font-weight:800; }

.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
  max-width:32rem;
  margin:0 auto;
  position:relative;
}

/* ---------- 뷰 상태머신 ---------- */
.view{ display:none; }
.view.active{ display:flex; flex-direction:column; flex:1; min-height:100vh; min-height:100dvh; }
#view-result.active{ display:block; }

@keyframes rise{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.view.active{ animation:rise var(--t-view) var(--ease-slide); }

/* ---------- 버튼 ---------- */
.btn{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  border-radius:var(--radius-card);
  padding:.85rem 1.3rem;
  font-size:1rem; font-weight:700;
  transition:transform .12s var(--ease-pop), box-shadow .2s, background .2s;
  box-shadow:0 2px 0 var(--slot-in);
}
.btn:active{ transform:translateY(2px); box-shadow:0 0 0 var(--slot-in); }
.btn.primary{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  color:#3A2A12; border-color:transparent;
  box-shadow:0 6px 20px rgba(233,162,59,.4), 0 2px 0 var(--gold-deep);
}
.btn.primary:active{ box-shadow:0 2px 8px rgba(233,162,59,.4), 0 0 0 var(--gold-deep); }
.btn.big{ padding:1.05rem 1.4rem; font-size:1.1rem; width:100%; }
.btn.ghost{ background:transparent; box-shadow:none; color:var(--muted); border-color:transparent; }
.btn.outline{ background:transparent; border:1.5px solid var(--gold); color:var(--gold-deep); box-shadow:none; }
.btn:focus-visible, .icon-btn:focus-visible, .act:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px;
}

/* ============================================================
   HOME
   ============================================================ */
#view-home{ justify-content:center; }
.home-inner{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  padding:calc(2rem + var(--safe-t)) max(1.2rem,var(--safe-l)) calc(2rem + var(--safe-b)) max(1.2rem,var(--safe-r));
  text-align:center;
}
.home-top{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.logo-mark{
  width:64px; height:64px; position:relative; margin-bottom:.3rem;
  filter:drop-shadow(0 6px 14px var(--shadow));
}
.logo-mark .lm-a,.logo-mark .lm-b{
  position:absolute; width:38px; height:38px; border-radius:13px;
}
.logo-mark .lm-a{ left:0; top:6px; background:linear-gradient(180deg,#FFE3EA,#FFC2CE); transform:rotate(-6deg); }
.logo-mark .lm-b{ right:0; top:14px; background:linear-gradient(180deg,#FCE9C2,#FFCE96); transform:rotate(7deg); }
.logo{
  margin:0; font-size:clamp(1.8rem,7vw,2.6rem); font-weight:800;
  letter-spacing:-.01em;
}
.hero{ margin:.1rem 0 0; font-size:clamp(1.05rem,4.4vw,1.4rem); font-weight:700; }
.subhero{ margin:.2rem 0 0; font-size:.9rem; font-weight:500; color:var(--muted); line-height:1.6; }

.home-chips{ display:flex; gap:.7rem; }
.chip{
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:.5rem 1rem;
  display:flex; flex-direction:column; align-items:center; min-width:6.5rem;
  box-shadow:0 2px 8px var(--shadow);
}
.chip-k{ font-size:.7rem; font-weight:600; color:var(--muted); letter-spacing:.02em; }
.chip-v{ font-size:1.3rem; font-weight:800; color:var(--gold-deep); }

.home-cta{ width:100%; max-width:22rem; display:flex; flex-direction:column; gap:.6rem; }

.ladder-block{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.ladder-cap{ font-size:.78rem; color:var(--muted); font-weight:600; }
.ladder{ display:flex; gap:5px; flex-wrap:wrap; justify-content:center; max-width:20rem; }
.ladder-item{
  width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  box-shadow:0 2px 5px var(--shadow), inset 0 1px 1px rgba(255,255,255,.4);
}
.ladder-item.goal{ box-shadow:0 0 0 2px var(--gold), 0 3px 8px rgba(233,162,59,.5); }

.home-foot{
  display:flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:600; color:var(--muted);
  background:rgba(255,255,255,.4); border-radius:999px; padding:.45rem .9rem;
}
@media (prefers-color-scheme: dark){ .home-foot{ background:rgba(255,255,255,.06); } }
.home-foot .dot{ color:var(--gold-deep); }
.install{ margin-top:-.2rem; }
.home-date{ font-size:.72rem; color:var(--faint); margin:0; }

/* ============================================================
   GAME — 세로 고정 한 손
   ============================================================ */
#view-game{ justify-content:space-between; }

.scorebar{
  display:flex; align-items:center; gap:.6rem;
  padding:calc(.8rem + var(--safe-t)) max(1rem,var(--safe-l)) .6rem max(1rem,var(--safe-r));
}
.sb-cell{ display:flex; flex-direction:column; }
.sb-cell.sb-top{ align-items:center; }
.sb-cell.sb-meta{ margin-left:auto; flex-direction:row; align-items:center; gap:.5rem; }
.sb-k{ font-size:.66rem; font-weight:600; color:var(--muted); letter-spacing:.02em; }
.sb-v{ font-size:1.25rem; font-weight:700; line-height:1.1; }
.sb-v.bump{ animation:bump .3s var(--ease-pop); }
@keyframes bump{ 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }
.sb-emoji{ font-size:1.4rem; line-height:1; }
.chip-off{
  font-size:.7rem; font-weight:700; color:#7a5a1e;
  background:var(--gold-soft); border-radius:999px; padding:.25rem .6rem;
}
.icon-btn{
  border:1px solid var(--line); background:var(--surface);
  width:2.3rem; height:2.3rem; border-radius:50%;
  font-size:1.1rem; display:grid; place-items:center;
  box-shadow:0 2px 6px var(--shadow);
}

/* 보드 */
.board-wrap{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:.4rem max(1rem,var(--safe-l)) .4rem max(1rem,var(--safe-r));
}
.board{
  position:relative;
  width:min(92vw, var(--board-max));
  aspect-ratio:1/1;
  background:var(--board);
  border-radius:var(--radius-card);
  padding:3.5%;
  box-shadow:inset 0 2px 6px var(--slot-in), 0 10px 30px var(--shadow);
  touch-action:none;
  transition:transform .11s var(--ease-slide);
}
.slots{
  position:absolute; inset:3.5%;
  display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr);
  gap:4%;
}
.slot{
  background:var(--slot);
  border-radius:14px;
  box-shadow:inset 0 2px 4px var(--slot-in);
}
.tiles{ position:absolute; inset:3.5%; }
/* gap=4% of board content. JS reads computed gap of .slots for px math —
   keep .slots gap and .tiles spacing identical. */
.slots{ gap:4%; }

/* 타일 */
.tile{
  position:absolute;
  border-radius:var(--radius-tile);
  background:linear-gradient(180deg,var(--c1),var(--c2));
  color:var(--tink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 3px 0 var(--slot-in), 0 6px 14px var(--shadow), inset 0 1px 2px rgba(255,255,255,.45);
  transition:left var(--t-slide) var(--ease-slide), top var(--t-slide) var(--ease-slide);
  will-change:left,top,transform;
  overflow:hidden;
}
.t-emoji{ font-size:clamp(1.5rem,8vw,2.2rem); line-height:1; }
.t-label{ font-size:clamp(.62rem,2.6vw,.8rem); font-weight:700; margin-top:1px; opacity:.85; }
.tile.goal{ box-shadow:0 3px 0 var(--gold-deep), 0 0 0 2px var(--gold-soft), 0 6px 20px rgba(233,162,59,.55); }

.tile.merged{ animation:pop var(--t-merge) var(--ease-pop); z-index:3; }
@keyframes pop{ 0%{transform:scale(1)} 45%{transform:scale(1.18)} 100%{transform:scale(1)} }
.tile.spawned{ animation:spawn var(--t-spawn) var(--ease-pop); z-index:2; }
@keyframes spawn{ from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }

.spark{
  position:absolute; inset:0; border-radius:var(--radius-tile);
  background:radial-gradient(circle at 50% 45%, rgba(255,247,210,.9), rgba(233,162,59,0) 60%);
  animation:sparkle .65s ease-out forwards; pointer-events:none;
}
@keyframes sparkle{ 0%{opacity:0;transform:scale(.6)} 30%{opacity:1} 100%{opacity:0;transform:scale(1.4)} }

/* 코치마크 */
.coach{
  position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
  background:rgba(58,49,64,.9); color:#FFF7EC;
  font-size:.8rem; font-weight:600; padding:.5rem .9rem; border-radius:999px;
  white-space:nowrap; z-index:5; animation:rise .4s var(--ease-slide);
}
.coach b{ color:var(--gold-soft); }

/* 하단 보조 액션 — 엄지 도달 1/3 */
.actions-bar{
  display:flex; gap:.6rem; justify-content:center;
  padding:.6rem max(1rem,var(--safe-l)) calc(1rem + var(--safe-b)) max(1rem,var(--safe-r));
}
.act{
  flex:1; max-width:7rem;
  border:1px solid var(--line); background:var(--surface);
  border-radius:18px; padding:.7rem .4rem;
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  font-size:.74rem; font-weight:600; color:var(--muted);
  box-shadow:0 2px 8px var(--shadow); transition:transform .12s var(--ease-pop);
}
.act:active{ transform:translateY(2px); }
.act-i{ font-size:1.2rem; color:var(--ink); }

/* ============================================================
   RESULT — 하단 시트
   ============================================================ */
#view-result{ position:fixed; inset:0; z-index:40; }
#view-result.active{ display:block; }
.result-scrim{
  position:absolute; inset:0; background:rgba(40,28,18,.45);
  animation:fade var(--t-view) ease;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.result{
  position:absolute; left:0; right:0; bottom:0;
  background:var(--surface);
  border-radius:var(--radius-card) var(--radius-card) 0 0;
  padding:1.2rem 1.4rem calc(1.6rem + var(--safe-b));
  box-shadow:0 -12px 40px var(--shadow);
  max-width:32rem; margin:0 auto;
  text-align:center;
  animation:sheetUp var(--t-view) var(--ease-slide);
}
@keyframes sheetUp{ from{transform:translateY(100%)} to{transform:translateY(0)} }
.result-grip{ width:42px; height:5px; border-radius:99px; background:var(--line); margin:0 auto 1rem; }
.result-head{ margin:.2rem 0 .1rem; font-size:1.6rem; font-weight:800; }
.result.win .result-head{ color:var(--gold-deep); }
.result.over .result-head{ color:var(--ink); }
.result-sub{ margin:0 0 .5rem; font-size:.9rem; color:var(--muted); }
.result-tray{ margin:0 0 .4rem; font-size:.8rem; font-weight:600; color:var(--gold-deep); }
.result-score{ font-size:clamp(2.4rem,12vw,3.4rem); font-weight:800; color:var(--gold-deep); line-height:1; }
.result.win .result-score{ text-shadow:0 2px 16px rgba(233,162,59,.4); }
.result-metrics{
  display:flex; justify-content:center; gap:1rem; margin:1rem 0;
  background:var(--bg); border-radius:18px; padding:.9rem .6rem;
}
.rm{ display:flex; flex-direction:column; gap:.2rem; flex:1; }
.rm-k{ font-size:.68rem; font-weight:600; color:var(--muted); }
.rm-v{ font-size:1rem; font-weight:700; }
.r-emoji{ font-size:1.15rem; }
.result-actions{ display:flex; flex-direction:column; gap:.6rem; }

/* ============================================================
   MENU / SETTINGS SHEET
   ============================================================ */
.menu{ position:fixed; inset:0; z-index:60; display:none; }
.menu.open{ display:block; }
.menu-backdrop{ position:absolute; inset:0; background:rgba(40,28,18,.45); animation:fade .25s ease; }
.menu-sheet{
  position:absolute; left:0; right:0; bottom:0; max-width:32rem; margin:0 auto;
  background:var(--surface);
  border-radius:var(--radius-card) var(--radius-card) 0 0;
  padding:1rem 1.4rem calc(1.4rem + var(--safe-b));
  box-shadow:0 -12px 40px var(--shadow);
  animation:sheetUp .28s var(--ease-slide);
}
.menu-grip{ width:42px; height:5px; border-radius:99px; background:var(--line); margin:0 auto .8rem; }
.menu-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.menu-head h3{ margin:0; font-size:1.15rem; font-weight:800; }
.menu-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0; border-bottom:1px solid var(--line);
  font-size:.95rem; font-weight:600;
}
.menu-row small{ color:var(--muted); font-weight:500; }
.menu-row input[type=checkbox]{ width:1.4rem; height:1.4rem; accent-color:var(--gold); }
.menu-actions{ display:flex; flex-direction:column; gap:.6rem; margin-top:1rem; }
.menu-note{ font-size:.72rem; color:var(--faint); text-align:center; margin:.9rem 0 0; }

/* ---------- 토스트 ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(1.5rem + var(--safe-b)); transform:translate(-50%,1rem);
  background:var(--ink); color:var(--surface);
  padding:.7rem 1.1rem; border-radius:999px; font-size:.85rem; font-weight:600;
  opacity:0; pointer-events:none; z-index:80; transition:opacity .25s, transform .25s;
  box-shadow:0 8px 24px var(--shadow);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ============================================================
   접근성: 모션 최소화
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  :root{ --t-slide:1ms; --t-merge:1ms; --t-spawn:1ms; --t-view:1ms; }
  .tile.merged,.tile.spawned,.sb-v.bump{ animation:none !important; }
  .spark,.board{ animation:none !important; transition:none !important; }
  .view.active{ animation:none !important; }
}
.reduce-motion .tile{ transition:none !important; }
.reduce-motion .tile.merged,
.reduce-motion .tile.spawned,
.reduce-motion .sb-v.bump,
.reduce-motion .view.active,
.reduce-motion .result,
.reduce-motion .menu-sheet{ animation:none !important; }
.reduce-motion .spark{ display:none; }

/* 가로 모드 — 세로 기준 중앙 정렬 폴백 */
@media (orientation:landscape) and (min-width:500px){
  .board{ width:min(70vh, var(--board-max)); }
}

/* ============================================================
   v2 — 메타 진행 UI (레벨·스트릭·챌린지·도감·업적·테마)
   ============================================================ */

/* 홈: 콘텐츠 늘어남 대비 — 상단 정렬 + 스크롤(CTA가 잘리지 않게) */
.home-inner{ justify-content:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* 홈 레벨 배지 (Lv · XP바 · 도감) */
.lvbadge{
  width:100%; max-width:22rem;
  display:flex; align-items:center; gap:.6rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:.5rem .9rem;
  box-shadow:0 2px 8px var(--shadow); color:var(--ink);
  font-size:.82rem; font-weight:700;
}
.lvbadge:active{ transform:translateY(1px); }
.lvbadge .lv-lv{ color:var(--gold-deep); white-space:nowrap; }
.lvbadge .lv-xp{ flex:1; height:7px; background:var(--slot); border-radius:99px; overflow:hidden; }
.lvbadge .lv-xp-bar{ display:block; height:100%; width:6%;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold)); border-radius:99px; transition:width .4s var(--ease-slide); }
.lvbadge .lv-dex{ color:var(--muted); font-size:.74rem; white-space:nowrap; }

/* 오늘의 챌린지 카드 (홈) */
.chal-card{
  width:100%; max-width:22rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:.8rem .9rem;
  box-shadow:0 2px 8px var(--shadow);
}
.chal-head{ display:flex; align-items:center; justify-content:space-between;
  font-size:.8rem; font-weight:800; color:var(--ink); margin-bottom:.55rem; }
.chal-date{ font-size:.68rem; color:var(--faint); font-weight:600; }
.chal-list{ display:flex; flex-direction:column; gap:.5rem; }
.chal-item{ display:flex; align-items:center; gap:.5rem; font-size:.78rem; }
.chal-item .ci-mark{ width:1.1rem; height:1.1rem; border-radius:50%;
  display:grid; place-items:center; font-size:.7rem; font-weight:800;
  background:var(--slot); color:var(--muted); flex:none; }
.chal-item.done .ci-mark{ background:var(--win); color:#fff; }
.chal-item .ci-label{ flex:none; color:var(--ink); font-weight:600; }
.chal-item .ci-bar{ flex:1; height:6px; background:var(--slot); border-radius:99px; overflow:hidden; }
.chal-item .ci-bar span{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold)); border-radius:99px; transition:width .4s var(--ease-slide); }
.chal-item.done .ci-label{ color:var(--muted); text-decoration:line-through; }
.chal-item .ci-xp{ font-size:.68rem; font-weight:700; color:var(--gold-deep); flex:none; }

/* HUD: 스트릭/레벨 필 */
.pill{
  display:inline-flex; align-items:center; gap:.18rem;
  font-size:.74rem; font-weight:800; color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:.22rem .55rem;
}
.pill b{ color:var(--gold-deep); }

/* 게임 내 챌린지 스트립 (보드 위) */
.chal-strip{
  display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap;
  padding:0 max(1rem,var(--safe-r)) .2rem max(1rem,var(--safe-l));
  min-height:1.6rem;
}
.cs-item{
  font-size:.66rem; font-weight:700; color:var(--muted);
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:.18rem .5rem;
}
.cs-item.done{ background:var(--win); color:#fff; border-color:transparent; }

/* 액션바 4개 대비 축소 + 무르기 잔량 */
.actions-bar .act{ max-width:5.6rem; }
.act small{ font-size:.62rem; color:var(--gold-deep); margin-left:1px; }
.act.disabled{ opacity:.4; }

/* 결과 메타 블록 */
.result-meta{ display:flex; justify-content:center; gap:.8rem; margin:.4rem 0 0; }
.rmeta{ display:flex; flex-direction:column; align-items:center; gap:.1rem;
  background:var(--bg); border-radius:14px; padding:.5rem .8rem; min-width:5rem; }
.rmeta-k{ font-size:.62rem; font-weight:600; color:var(--muted); }
.rmeta-v{ font-size:.95rem; font-weight:800; color:var(--gold-deep); }
.res-chal{ margin:.7rem 0 .2rem; font-size:.82rem; font-weight:700; color:var(--muted); }
.res-chal.all{ color:var(--win); }

/* 시트 스크롤(콘텐츠 많을 때) */
.menu-sheet{ max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.result{ max-height:92vh; overflow-y:auto; }

/* 메뉴: 테마 블록 */
.menu-block{ padding:.6rem 0; border-bottom:1px solid var(--line); }
.menu-block-h{ font-size:.78rem; font-weight:800; color:var(--muted); margin-bottom:.5rem; }
.theme-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.theme-swatch{
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  border:1.5px solid var(--line); background:var(--bg);
  border-radius:14px; padding:.5rem .55rem; min-width:4.6rem;
  font-size:.68rem; font-weight:700; color:var(--ink);
  position:relative;
}
.theme-swatch .sw{ width:26px; height:26px; border-radius:50%;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.5), 0 2px 4px var(--shadow); }
.theme-swatch .sw.cream{ background:linear-gradient(180deg,#FBF3E4,#EFE0C6); }
.theme-swatch .sw.berry{ background:linear-gradient(180deg,#F6D9E4,#E6BFD0); }
.theme-swatch .sw.mint{  background:linear-gradient(180deg,#D3EBDF,#B6D6C5); }
.theme-swatch .sw.night{ background:linear-gradient(180deg,#34261A,#241A14); }
.theme-swatch .sw-name{ line-height:1.1; text-align:center; }
.theme-swatch .sw-lock{ position:absolute; top:.25rem; right:.35rem; font-size:.6rem; }
.theme-swatch.active{ border-color:var(--gold); box-shadow:0 0 0 2px rgba(233,162,59,.3); }
.theme-swatch.paid{ opacity:.65; }

/* 통계 시트 */
.stats-level{ background:var(--bg); border-radius:16px; padding:.7rem .8rem; margin:.4rem 0 .8rem; }
.sl-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.45rem; }
.sl-lv{ font-size:1.05rem; font-weight:800; color:var(--gold-deep); }
.sl-lv b{ font-size:1.2rem; }
.sl-xp{ font-size:.72rem; color:var(--muted); font-weight:600; }
.sl-bar{ height:9px; background:var(--slot); border-radius:99px; overflow:hidden; }
.sl-bar span{ display:block; height:100%; width:6%;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold)); border-radius:99px; transition:width .4s var(--ease-slide); }

.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-bottom:.8rem; }
.sg{ background:var(--bg); border-radius:12px; padding:.5rem .3rem;
  display:flex; flex-direction:column; align-items:center; gap:.15rem; text-align:center; }
.sg-k{ font-size:.6rem; font-weight:600; color:var(--muted); }
.sg-v{ font-size:.92rem; font-weight:800; color:var(--ink); }

.dex-block{ margin-bottom:.9rem; }

/* 최근 14일 스트릭 그리드 */
.cal-block{ margin-bottom:.9rem; }
.cal-grid{ display:grid; grid-template-columns:repeat(14,1fr); gap:5px; }
.cal-dot{ aspect-ratio:1/1; border-radius:6px; background:var(--slot); min-height:14px; }
.cal-dot.empty{ background:var(--slot); opacity:.5; }
.cal-dot.played{ background:var(--gold-soft); }
.cal-dot.win{ background:linear-gradient(180deg,var(--gold-soft),var(--gold)); box-shadow:0 0 0 1px var(--gold-deep); }
.dex-h{ font-size:.82rem; font-weight:800; color:var(--ink); margin-bottom:.5rem;
  display:flex; justify-content:space-between; }
.dex-h span{ color:var(--gold-deep); }
.dex-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.45rem; }
.dex-cell{ display:flex; flex-direction:column; align-items:center; gap:.15rem;
  background:var(--bg); border:1px dashed var(--line); border-radius:12px; padding:.5rem .2rem;
  opacity:.6; }
.dex-cell.got{ opacity:1; border-style:solid; }
.dex-cell.goal{ box-shadow:0 0 0 1.5px var(--gold); }
.dc-emoji{ font-size:1.2rem; line-height:1; }
.dc-label{ font-size:.56rem; font-weight:700; color:var(--muted); }

.ach-list{ display:flex; flex-direction:column; gap:.4rem; }
.ach-item{ display:flex; align-items:center; gap:.5rem;
  background:var(--bg); border-radius:12px; padding:.5rem .7rem;
  font-size:.8rem; font-weight:600; color:var(--muted); }
.ach-item.got{ color:var(--ink); }
.ai-i{ font-size:1rem; }
.ai-t{ flex:1; }
.ach-item:not(.got) .ai-t{ text-decoration:line-through; }
.ai-s{ font-weight:800; color:var(--win); width:1.2rem; text-align:right; }
.ach-item:not(.got) .ai-s{ color:var(--faint); }

/* ── 코스메틱 테마(앰비언트 서피스만 — 타일 단계색은 유지) ── */
:root[data-theme="berry"]{ --bg:#FBEDF1; --bg-warm:#F6D9E4; --board:#F0D2DE; --slot:#E6BFD0; --slot-in:#D9A8BE; }
:root[data-theme="mint"]{  --bg:#EAF6F0; --bg-warm:#D3EBDF; --board:#C7E3D4; --slot:#B6D6C5; --slot-in:#A4C7B4; }
@media (prefers-color-scheme: dark){
  :root[data-theme="berry"]{ --bg:#2A1A20; --bg-warm:#1E1218; --board:#3E2430; --slot:#4A2C3A; --slot-in:#3A2230; }
  :root[data-theme="mint"]{  --bg:#14201A; --bg-warm:#0F1814; --board:#243629; --slot:#2C4234; --slot-in:#213328; }
}

/* ── i18n 언어 스위처 — 자동 주입되는 floating pill을 앱 테마에 맞춘다.
   게임 scorebar의 우측 메뉴 버튼과 충돌하지 않도록 좌측 상단으로 옮긴다. ── */
.i18n-switch--floating{
  --i18n-switch-top: calc(env(safe-area-inset-top, 0px) + 0.55rem);
  --i18n-switch-right: auto;
  --i18n-switch-left: max(0.6rem, env(safe-area-inset-left, 0px));
  right: auto; left: var(--i18n-switch-left);
  --i18n-switch-bg: rgba(255, 251, 242, 0.85);
  --i18n-switch-border: var(--line);
  --i18n-switch-fg: var(--ink);
  --i18n-switch-active-bg: rgba(233, 162, 59, 0.18);
  --i18n-switch-active-fg: var(--gold-deep);
  --i18n-switch-menu-bg: var(--surface);
  --i18n-switch-menu-border: var(--line);
  --i18n-switch-shadow: 0 4px 14px var(--shadow);
}
@media (prefers-color-scheme: dark){
  .i18n-switch--floating{
    --i18n-switch-bg: rgba(46, 33, 24, 0.85);
    --i18n-switch-border: rgba(243, 233, 220, 0.16);
    --i18n-switch-fg: var(--ink);
  }
}