*,*::before,*::after{box-sizing:border-box}
:root{
  --ground:#080B10; --ground-2:#0E141C;
  --panel:rgba(16,24,33,.66);
  --line:rgba(150,178,200,.16); --line-2:rgba(150,178,200,.30);
  --frost:#F0F7FA; --frost-dim:#CFDDE7;
  --muted:#93A7B6; --muted-2:#6E8393;
  --amber:#FFB35C; --amber-deep:#C97C24;
  --ice:#7FD8FF; --ice-deep:#2E7FA8;
  --fever:#FF6B3D;
  --r-m:14px;
  --fs-1:12px; --fs-2:14px; --fs-3:16.5px; --fs-4:21px;
  --ui:"IBM Plex Sans KR",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",
       Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* 제목 글꼴에 일본어 · 중국어 글자가 없어 가는 기본 글꼴로 떨어졌다 — 굵은 시스템 글꼴을 뒤에 둔다 */
  --disp:"Black Han Sans","IBM Plex Sans KR","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","PingFang SC","Microsoft YaHei","Noto Sans CJK JP",sans-serif;
}
html,body{margin:0;padding:0;height:100%}
body{background:var(--ground);color:var(--frost);font-family:var(--ui);
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-synthesis:none}
/* 한국어·중국어·일본어는 단어 중간에서 끊기면 읽기가 나빠진다 */
h1,h2,p,.lede,.how .k,.how .d,.mode .nm,.mode .tg,#toast .big,#toast .sub,
.dailycard .nm,.dailycard .tg,.glabel,.btn,.camnote,#biz{
  word-break:keep-all;overflow-wrap:anywhere}
:lang(ja),:lang(zh-Hans),:lang(zh-Hant){line-height:1.85}

#stage{position:fixed;inset:0;overflow:hidden;background:var(--ground);
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}
/* 캔버스에도 따로 적어야 한다 — touch-action 은 물려받지 않는다.

   #stage 에만 적어 두었더니 캔버스의 계산값이 auto 로 남아 있었다.
   브라우저는 손이 **닿은 그 요소**의 touch-action 을 보므로, 실제로
   손이 닿는 캔버스는 아무 제약이 없는 셈이었다. 그래서 폰에서 두
   손가락으로 문지르면(말랑이 문지르기 · 모래 펴기) 브라우저가 그것을
   확대로 가로채 pointercancel 을 던졌고, 손짓이 중간에 끊겼다.
   한 손가락으로 길게 그어도 화면이 딸려 움직였다.

   단추와 서랍(#ui)에는 안 건다 — 거기서는 훑어 넘기기가 맞는 몸짓이다. */
#cv{position:absolute;inset:0;display:block;width:100%;height:100%;
  touch-action:none;-ms-touch-action:none}

.glass{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);
  backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15)}

#ui{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;
  justify-content:space-between;gap:12px;
  /* 노치 · 홈 막대 — viewport-fit=cover 라 그 밑까지 그린다. 점수 칸이 상태 줄 밑에, 단추 칸이 홈 막대 위에 앉았다 */
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
#ui button,#ui .btn{pointer-events:auto}

#top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}

#scorebox{display:flex;flex-direction:column;padding:10px 16px 12px}
#score{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;
  font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--frost)}
/* 최고점이 여덟 자리가 되면 좁은 폭에서 낱말 사이가 끊긴다 —
   'BEST' 와 숫자가, 'ROUND' 와 회차가 따로 논다. 각각은 끊지 않고,
   줄이 모자라면 통째로 아래로 내린다. */
#bestrow{display:flex;gap:4px 11px;align-items:baseline;margin-top:5px;flex-wrap:wrap}
#best{font-family:var(--mono);font-size:var(--fs-2);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
#roundtag{font-size:var(--fs-1);letter-spacing:.1em;color:var(--amber);font-weight:600;white-space:nowrap}

/* 콤보 — 왼쪽 위 구석에 작게 떠 있었다. 점수판 바로 밑이라 숫자 틈에
   섞였고, 손은 화면 한가운데 공을 보고 있으니 콤보가 붙는 줄도 몰랐다.
   보는 자리로 옮기고, 붙을수록 커지고 뜨거워지게 한다.

   --cs 는 콤보의 세기 0~1(2에서 20까지). 크기·색·번짐·테두리가 다
   이 값 하나를 탄다 — 자리마다 따로 조절하면 어긋난다. */
#combo{position:absolute;left:50%;top:19%;display:flex;flex-direction:column;
  align-items:center;gap:3px;padding:9px 22px;border-radius:18px;
  background:rgba(255,179,92,calc(.10 + var(--cs,0) * .17));
  border:1px solid rgba(255,179,92,calc(.26 + var(--cs,0) * .52));
  box-shadow:0 0 calc(12px + var(--cs,0) * 42px) rgba(255,179,92,calc(.08 + var(--cs,0) * .34));
  opacity:0;transform:translate(-50%,-8px) scale(.9);
  transition:opacity .16s ease,transform .16s cubic-bezier(.2,1.4,.4,1)}
#combo.on{opacity:1;transform:translate(-50%,0) scale(1)}
/* 알림(#toast · 팁·전부 부쉈다·처음 만났다)과 콤보가 같은 자리에 겹쳐 글자가 뭉개졌다 —
   폰에서 알림 106~183px · 콤보 130~195px. 알림은 점수판 바로 밑이라 더 못 올린다.
   알림이 떠 있는 동안만 콤보를 그 아래로 내리고 조금 줄인다. 사라지면 제자리로. */
body:has(#toast.on) #combo{top:calc(50% - 33vmin + 92px)}
body:has(#toast.on) #combo.on{transform:translate(-50%,0) scale(.8)}
@media (max-width:640px){ body:has(#toast.on) #combo{top:196px} }
/* 저가 기기(.lowend, detectLowEnd · 느림 감지) — 흐림은 폰에서 가장 비싼 CSS 다. 끄고,
   비치던 만큼 판을 짙게 해 글이 그대로 읽히게 한다. 좋은 기기에는 이 줄이 안 걸린다. */
.lowend{--panel:rgba(16,24,33,.92)}
/* 처음 온 사람(#start.first) — 큰 단추 하나만. 나머지는 [다른 놀이 모두 보기] 뒤로 */
#start.first #gonew,html.bbfirst #start #gonew,#start.first #gorow2,html.bbfirst #start #gorow2,#start.first #pickrow,html.bbfirst #start #pickrow,#start.first #daybox,html.bbfirst #start #daybox,
#start.first #branches,html.bbfirst #start #branches,#start.first #missions,html.bbfirst #start #missions,#start.first #broke,html.bbfirst #start #broke,#start.first #howto,html.bbfirst #start #howto,
#start.first #carry,html.bbfirst #start #carry,#start.first #adland,html.bbfirst #start #adland,
/* 설명 두 줄(lede)도 던다. 좁은 화면에서는 이미 숨기고 있었다 — 처음 온 사람에게는
   폭과 상관없이 숨긴다. 남길 한 마디는 hook 쪽이고, lede 는 검색엔진이 읽는 몫이라
   DOM 에는 그대로 있다. 단추까지 가는 길에서 읽을 것이 두 줄 줄어든다. */
#start.first .lede,html.bbfirst #start .lede,
#start.first #brhead,html.bbfirst #start #brhead{display:none!important}
#start.first #startbtns,html.bbfirst #start #startbtns{display:flex;justify-content:center}
#start.first #go,html.bbfirst #start #go{font-size:clamp(20px,5.2vw,26px);padding:18px 40px;min-width:min(320px,82vw)}
.firstall{display:none}
/* flex:0 0 100% — 제 줄을 통째로 차지해 큰 단추 아래로 내려간다.
   전에는 #gorow 의 같은 줄에 큰 단추와 나란히 섰고, 여기 margin:auto 가 flex 줄의
   남는 공간을 다 먹어 둘을 양끝으로 밀어냈다 — 넓은 화면에서 [바로 부숴 보기] 가
   왼쪽 끝에 처박혔다(1147px 에서 가운데가 178). 처음 온 사람이 맨 먼저 보는 단추다. */
#start.first .firstall,html.bbfirst #start .firstall{display:block;flex:0 0 100%;margin:14px auto 0;padding:6px 12px;min-height:32px;background:none;border:0;
  color:var(--frost-dim);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}
/* 방금 장면 영상 — 판이 끝나면 잠깐 뜬다(CLIP). 단추 칸과 FEVER 줄 위 */
#clipbtn{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--docktop,150px) + 40px);z-index:12;
  padding:10px 18px;border:0;border-radius:999px;font-weight:800;color:#221300;
  background:linear-gradient(#FFC97A,#F39A3C);box-shadow:0 6px 20px rgba(0,0,0,.35);white-space:nowrap}
#clipbtn[hidden]{display:none}
/* 클립이 뜨면 코치줄을 접는다 — 판이 끝났으니 '섞으세요' 안내는 지났고, 둘이 겹쳐 읽히지 않았다 */
/* opacity 로 접었더니 p8 이 알약에 inline opacity(.92)를 넣어 덮어써 둘이 그대로 겹쳤다(2026-10-16 사람 지적) — visibility 로 */
#ui:has(#clipbtn:not([hidden])) #howline{visibility:hidden}
/* ── 한 화면(cam)의 첫 화면 — 네 탭(2026-09-22).
   🏠 로 돌아오면 보이는 옛 랜딩이 390×844 에서 2,094px 이었다. 처음엔 둘째 층을 [더보기]
   뒤로 접었는데, 접는 것은 정리가 아니다 — 놀기 · 오늘 · 기록 · 도움 네 탭으로 나눠
   탭마다 한 화면에 들어오게 한다. 지우는 것은 없다. 모두 html.cam 아래라 옛 랜딩 CSS 는
   손대지 않았다. 처음 온 사람(.first)은 cam 이 #go 를 눌러 곧장 판으로 간다. */
html.cam #start{gap:12px;justify-content:flex-start;padding-top:max(14px,env(safe-area-inset-top))}
/* > .hook — 바로 아래 한 마디만. 오늘 상자(#daybox) 안의 두 줄도 .hook 이라 자손 선택자로
   두었더니 오늘 탭이 빈 통으로 떴다. */
html.cam #start .kicker,html.cam #start .lede,html.cam #start > .hook,html.cam #start #soundask{display:none}
/* 머리 한 줄 — 워드마크 · 띠. 오른쪽은 언어 고르개(#langpick, 고정) 자리를 비워 둔다 */
#sthead{display:contents}
html.cam #sthead{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;width:100%;max-width:640px;min-height:44px;
  padding-right:150px;box-sizing:border-box}
/* 폰에서는 워드마크 옆이 204px 뿐이라 띠가 다음 줄로 내려간다 — 글자는 절대 안 접는다 */
html.cam #start h1{font-size:30px;line-height:1;padding:0 .06em 0 0;white-space:nowrap}
html.cam #start .nonet{white-space:nowrap}
html.cam #start h1[data-wm="latin"]{font-size:22px;letter-spacing:.08em}
html.cam #start .nonet{margin:0;font-size:11px;padding:3px 9px}
/* 탭 줄 */
html.cam #stabs{display:flex;gap:4px;width:100%;max-width:640px;padding:4px;box-sizing:border-box;border-radius:999px;
  background:var(--panel);border:1px solid var(--line)}
html.cam #stabs button{flex:1 1 0;min-height:38px;border:0;border-radius:999px;background:none;color:var(--muted);
  font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;transition:background .14s,color .14s}
html.cam #stabs button[aria-selected="true"]{background:var(--frost);color:#0b0f14}
html.cam #stabs button:focus-visible{outline:2px solid var(--frost);outline-offset:2px}
/* 첫 화면 누적 숫자 — 늘 보이는 한 줄. 숫자는 고정폭 · 호박색, 이름은 흐리게 */
#sitestats{margin:6px 0 8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 16px;
  font-family:var(--ui);font-size:12px;letter-spacing:.01em;color:var(--muted-2);text-align:center}
#sitestats[hidden]{display:none}
#sitestats b{font-family:var(--mono);font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums;margin-left:2px}
/* 구글 플레이 출시 한 줄 — 알약 하나. 탭마다 한 화면을 지키려고 높이 28px · 아래 6px 로 묶는다
   (390×844 놀기 · 오늘 · 기록 탭은 넘침 0 · 도움 탭과 360×780 은 원래 넘치던 것이 한 줄만큼 는다) */
#gplay{display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:100%;margin:0 auto 6px;
  min-height:28px;padding:2px 3px 2px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  background:rgba(255,255,255,.05);color:var(--muted-2);font-family:var(--ui);font-size:12px;text-decoration:none;box-sizing:border-box}
#gplay[hidden]{display:none}
#gplay .gpi{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--amber);flex:none}
#gplay .gpt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gplay .gpg{flex:none;padding:3px 9px;border-radius:999px;background:var(--frost);color:#0b0f14;font-weight:700}
#gplay:hover{border-color:rgba(255,255,255,.3)}
#gplay:focus-visible{outline:2px solid var(--frost);outline-offset:2px}
/* 어느 덩이가 어느 탭인지 — 그 탭이 아니면 접는다 */
html.cam #start:not([data-tab="play"]) :is(#gorow,#brhead,#picktog,#pickrow,#branches,#brmore){display:none!important}
html.cam #start:not([data-tab="today"]) :is(#tdare,#tday,#missions){display:none!important}
html.cam #start:not([data-tab="rec"]) :is(#broke,#mine,#carry){display:none!important}
html.cam #start:not([data-tab="help"]) :is(#howto,#pctip,#hshare,#sister,#seonav,#biz){display:none!important}
html.cam #start:not([data-tab="play"]):not([data-tab="help"]) #ptfy{display:none!important}
/* 프로젝트팀포유 띠 (2026-10-19) — 광고처럼 번쩍이지 않게, 그러나 줌플 카드보다는 한 단 위로.
   테마 변수(--acc · --accrgb)를 따르고, 변수가 없는 밤 · 옛 랜딩에서는 호박색으로 떨어진다. */
.ptfy{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;width:100%;max-width:640px;margin:14px auto 0;
  box-sizing:border-box;padding:12px 12px 12px 13px;border-radius:18px;text-decoration:none;color:var(--ink,var(--frost));text-align:left;
  background:linear-gradient(118deg,rgba(var(--accrgb,255,179,92),.16) 0%,rgba(140,110,230,.13) 55%,rgba(80,170,255,.13) 100%),var(--panel);
  border:1.5px solid rgba(var(--accrgb,255,179,92),.38);box-shadow:0 4px 0 rgba(var(--accrgb,255,179,92),.12),0 10px 22px rgba(var(--accrgb,255,179,92),.10);
  transition:transform .14s cubic-bezier(.2,1.4,.4,1),box-shadow .14s}
.ptfy:hover{transform:translateY(-2px)} .ptfy:active{transform:scale(.985)}
.ptfy:focus-visible{outline:2px solid var(--acc,var(--amber));outline-offset:3px}
.ptfy::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:ptfysh 5.5s ease-in-out 1.2s infinite}
@keyframes ptfysh{0%,72%{left:-40%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.ptfy::after{animation:none;display:none}}
.ptfy .pm{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--acc2,#FFC27A) 0%,var(--acc,#FFB35C) 45%,#8C6EE6 100%);box-shadow:inset 0 -3px 0 rgba(0,0,0,.10),0 3px 8px rgba(var(--accrgb,255,179,92),.35)}
.ptfy .tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.ptfy .tx b{font-size:13px;font-weight:800;line-height:1.38;word-break:keep-all;overflow-wrap:anywhere;color:var(--ink,var(--frost))}
.ptfy .tx .u{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.01em;color:var(--accd,var(--amber));overflow-wrap:anywhere}
.ptfy .go{flex:none;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:800;white-space:nowrap;color:#fff;
  background:linear-gradient(180deg,var(--acc2,#FFC27A),var(--acc,#E9962F));box-shadow:0 2px 0 var(--accd,#B86F12)}
html.cam #start #ptfy{margin:0}
html.cam #start[data-tab="play"] #ptfy{margin-top:4px}
/* 판 메뉴 안 — 단추 줄 맨 아래 한 줄을 다 쓴다 */
#more .ptfy{order:60;flex:0 0 100%;max-width:100%;margin:4px 0 0;padding:9px 10px;gap:10px;border-radius:16px}
#more .ptfy .pm{width:32px;height:32px;border-radius:11px}
#more .ptfy .pm svg{width:18px;height:18px}
#more .ptfy .tx b{font-size:12px}
@media (max-width:360px){.ptfy .go{padding:6px 9px;font-size:11.5px}.ptfy{gap:9px}}
/* ── 놀기 */
html.cam #gorow{margin-top:0;gap:8px;width:100%;max-width:640px}
html.cam #startbtns{gap:8px;width:100%}
html.cam #startbtns:has(#gonew:not([hidden])) #go,html.cam #startbtns:has(#gonew:not([hidden])) #gonew{
  flex:1 1 140px;max-width:none;min-height:50px;padding-top:12px;padding-bottom:12px;font-size:clamp(15px,4vmin,19px)}
html.cam #startbtns:has(#gonew:not([hidden])) #go{flex:2 1 200px}
html.cam #gorow2{gap:6px;margin-top:0}
html.cam #goany,html.cam #goasmr{min-height:44px;padding:8px 14px;font-size:clamp(13px,3.2vmin,14.5px)}
/* 큰 숫자 한 줄 — 왼쪽 숫자, 오른쪽 갈래 고르기 */
html.cam #brhead{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px;width:100%;max-width:640px;margin:4px 0 0}
html.cam #brtotal{font-size:clamp(30px,8vw,40px);line-height:1}
html.cam #brwhat{font-size:12px}
html.cam #picktog{display:block;width:100%;max-width:640px;margin:-8px 0 0;padding:4px 0;min-height:28px;text-align:right;
  background:none;border:0;color:var(--muted);font:inherit;font-size:11.5px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(234,243,247,.28)}
html.cam #picktog:hover,html.cam #picktog[aria-expanded="true"]{color:var(--frost)}
html.cam #picktog:not([aria-expanded="true"]) ~ #pickrow{display:none}
html.cam #pickrow{margin:-4px 0 0;max-width:640px}
/* 카드 12장 — 큰 셋 · 작은 여섯 · 특별 셋, 모두 세 칸씩. 이름 · 개수만(.be · .bd 접음) */
html.cam #branches{gap:6px;max-width:640px;grid-template-columns:repeat(3,minmax(0,1fr))}
html.cam #branches > .branch,html.cam #branches > .branch.fresh,html.cam #branches > .branch.newbr,html.cam #branches > .branch.any{grid-column:span 1}
html.cam .branch .be,html.cam .branch .bd{display:none}
html.cam .branch{flex-direction:column;align-items:center;gap:4px;padding:13px 8px}
html.cam .branch .bn{font-size:15.5px}
html.cam .branch .bc{font-size:10px}
html.cam .branch .bc b{font-size:18px}
html.cam .branch.fresh,html.cam .branch.newbr{padding:9px 6px}
html.cam .branch.fresh .bn,html.cam .branch.newbr .bn{font-size:13px}
html.cam .branch.fresh .bc b,html.cam .branch.newbr .bc b{font-size:14px}
html.cam .branch.any{padding:11px 6px;gap:0}
html.cam .branch.any .bn{font-size:13px}
html.cam .branch.any .bc{display:none}
html.cam .branch .nu{top:-7px}
/* 긴 이름이 칸을 넘었다(2026-09-28) — 독일어 Überraschungsball · Wachskugel · Mischwerkstatt,
   러시아어 Кинетический песок, 인도네시아어 '1,036 untuk dimainkan'. 세 칸 격자라 칸이 좁다.
   이름은 음절에서 하이픈으로 끊고(html lang 을 따라간다), 사전이 없는 브라우저에서도
   넘치지 않게 마지막 문으로 anywhere. 개수 줄은 숫자 밑으로 단위가 내려가게 접는다. */
html.cam #branches > *,html.cam #brmore > *{min-width:0}
html.cam #branches .bn,html.cam #brmore .bn{max-width:100%;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere;line-height:1.2}
html.cam .branch .bc{flex-wrap:wrap;row-gap:1px;max-width:100%;text-align:center}
/* 다른 놀이 — 갈래 카드와 같은 옷, 세 칸씩 */
html.cam #brmore{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;max-width:640px}
html.cam #brmore button{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 6px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--rc) 50%,transparent);
  background:linear-gradient(158deg,color-mix(in srgb,var(--rc) 18%,transparent) 0%,var(--panel) 60%);
  color:var(--rc);font:inherit;font-size:13px;font-weight:800;line-height:1.25;text-align:center;cursor:pointer;word-break:keep-all;
  transition:transform .14s cubic-bezier(.2,1.4,.4,1)}
html.cam #brmore button:hover{transform:translateY(-2px)} html.cam #brmore button:active{transform:scale(.98)}
html.cam #brmore button:focus-visible{outline:2px solid var(--frost);outline-offset:3px}
html.cam #brmore [data-go="custom"],html.cam #brmore [data-go="season"]{--rc:var(--r-dare)}
html.cam #brmore [data-go="mystery"]{--rc:#D9BBF5}
html.cam #brmore [data-go="blend"]{--rc:var(--r-mix)}
html.cam #brmore [data-go="modes"]{--rc:var(--r-cut)}
html.cam #brmore button.wide{grid-column:1/-1;color:var(--frost)}
html.cam #brmore button[hidden]{display:none}
/* ── 오늘 */
html.cam #tdare{display:flex;align-items:center;gap:12px;width:100%;max-width:640px;padding:14px 16px;box-sizing:border-box;
  border-radius:16px;border:1px solid rgba(255,179,92,.45);
  background:linear-gradient(158deg,rgba(255,179,92,.20),var(--panel) 70%);color:var(--frost);
  font:inherit;text-align:left;cursor:pointer;transition:transform .14s cubic-bezier(.2,1.4,.4,1)}
html.cam #tdare:hover{transform:translateY(-1px)} html.cam #tdare:active{transform:scale(.98)}
html.cam #tdare .ic{display:flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;border-radius:999px;background:var(--amber);color:#1A1005}
html.cam #tdare .tx{flex:1 1 auto;display:flex;flex-direction:column;gap:3px;min-width:0}
html.cam #tdare .tx b{font-size:17px;font-weight:800}
html.cam #tdare .tx span{font-size:12.5px;color:var(--frost-dim);line-height:1.4}
html.cam #tdare .ch{font-size:22px;color:var(--muted);line-height:1}
html.cam #tday{display:flex;flex-direction:column;gap:8px;width:100%;max-width:640px;padding:12px 14px;box-sizing:border-box;
  border-radius:16px;background:var(--panel);border:1px solid var(--line)}
html.cam #tday:empty{display:none}
html.cam #tday #daybox{order:0;flex-direction:column;align-items:flex-start;gap:6px;padding:0;min-height:0;background:none;border:0;border-radius:0}
html.cam #tday #daybox #tmrw::before{content:none;margin:0}
html.cam #tday #daybox #todaych,html.cam #tday #daybox #tmrw{font-size:13px;white-space:normal;text-align:left}
/* 오늘의 도전 한 줄은 누르면 그 갈래로 간다(아직 안 했을 때) */
html.cam #tday #daybox #todaych.go{cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(207,243,214,.4)}
html.cam #tday #daybox #todaych.go::after{content:" ›";color:var(--muted)}
html.cam #missions{width:100%;max-width:640px;padding:12px 14px;box-sizing:border-box;margin:0;gap:6px;align-items:stretch;
  border-radius:16px;background:var(--panel);border:1px solid var(--line);font-size:13px}
html.cam #missions .mrow{justify-content:space-between}
/* ── 기록 */
html.cam #broke{width:100%;max-width:640px;margin:0;padding:12px 14px;box-sizing:border-box;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
html.cam #broke .n{font-size:26px;color:var(--amber)}
html.cam #mine{display:flex;flex-direction:column;width:100%;max-width:640px;padding:10px 14px 4px;box-sizing:border-box;
  border-radius:16px;background:var(--panel);border:1px solid var(--line)}
html.cam #mine .mt{font-size:11px;letter-spacing:.14em;color:var(--muted);font-weight:700;margin-bottom:2px}
html.cam #mine button{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 2px;
  background:none;border:0;border-top:1px solid var(--line);color:var(--frost);font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-align:left}
html.cam #mine button:first-of-type{border-top:0}
html.cam #mine button .ch{color:var(--muted);font-size:20px;line-height:1}
html.cam #mine button:hover{color:#fff}
html.cam #carry{width:100%;max-width:640px;margin:0;padding:12px 14px;box-sizing:border-box;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
/* ── 도움 */
html.cam #howto{max-width:640px;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
html.cam .how{align-items:flex-start;text-align:left;padding:12px;gap:3px}
html.cam .how .k{font-size:14px} html.cam .how .d{font-size:11.5px;line-height:1.4}
html.cam #hshare{display:flex;align-items:center;justify-content:center;width:100%;max-width:640px;min-height:44px;padding:10px 14px;box-sizing:border-box;
  border-radius:16px;background:var(--panel);border:1px solid var(--line);color:var(--frost);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
html.cam #hshare:hover{color:#fff}
html.cam #sister{margin:0;max-width:640px;width:100%}
html.cam #seonav{margin:0;max-width:640px}
html.cam #biz{margin-top:auto;padding-top:10px}
.lowend *,.lowend *::before,.lowend *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#combo .n{font-family:var(--mono);font-weight:700;line-height:1;
  font-size:calc(26px + var(--cs,0) * 30px);
  color:var(--amber);
  color:color-mix(in srgb, var(--amber), #FFF6E4 calc(var(--cs,0) * 72%));
  text-shadow:0 0 calc(var(--cs,0) * 26px) rgba(255,190,110,.9)}
#combo .t{font-size:var(--fs-1);letter-spacing:.24em;color:var(--amber-deep);font-weight:700}
/* 한 칸 오를 때마다 튄다. 세기가 붙을수록 더 크게 튀도록 --cs 를 태운다.
   translate(-50%) 를 매 칸마다 다시 적어야 한다 — 애니메이션이 도는
   동안 .on 의 transform 은 통째로 덮이기 때문이다. */
#combo.pop{animation:combopop .34s cubic-bezier(.2,1.5,.35,1)}
@keyframes combopop{
  0%{transform:translate(-50%,0) scale(1) rotate(0)}
  22%{transform:translate(-50%,calc(-4px - var(--cs,0) * 7px))
      scale(calc(1.18 + var(--cs,0) * .22)) rotate(-2.5deg)}
  56%{transform:translate(-50%,1px) scale(.965) rotate(1.4deg)}
  100%{transform:translate(-50%,0) scale(1) rotate(0)}}
@media (prefers-reduced-motion:reduce){#combo.pop{animation:none}}

#thermo{display:flex;gap:12px;padding:12px 14px;align-items:stretch;position:relative;overflow:hidden}
#thermo::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 26px 6px rgba(127,216,255,0);transition:box-shadow .45s ease}
#thermo.cold::after{box-shadow:inset 0 0 26px 6px rgba(127,216,255,.30)}
#tube{width:9px;border-radius:999px;background:rgba(120,150,170,.16);position:relative;
  overflow:hidden;border:1px solid var(--line)}
#mercury{position:absolute;left:0;right:0;bottom:0;border-radius:999px;height:50%;
  background:linear-gradient(180deg,#FF9A5C,#FFD3A0)}
#tmeta{display:flex;flex-direction:column;min-width:118px}
#tval{font-family:var(--mono);font-size:var(--fs-4);font-weight:600;line-height:1.15;
  font-variant-numeric:tabular-nums}
#tstate{font-size:13px;font-weight:700;letter-spacing:.02em;margin-top:2px}
#thint{font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:auto;padding-top:7px}

#feverwrap{position:absolute;left:50%;top:18px;transform:translateX(-50%);
  width:min(280px,42vw);display:flex;flex-direction:column;gap:5px;align-items:center}
#feverbar{width:100%;height:5px;border-radius:999px;background:rgba(150,178,200,.14);
  overflow:hidden;border:1px solid var(--line)}
#feverfill{height:100%;width:0%;background:linear-gradient(90deg,var(--amber),var(--fever));
  transition:width .18s linear}
#feverlbl{font-size:10px;letter-spacing:.22em;color:var(--muted);font-weight:700;text-transform:uppercase}
#feverwrap.hot #feverlbl{color:var(--fever);animation:pulse .7s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

#sheet,#ranksheet{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;justify-content:center;
  padding:14px 14px max(14px,env(safe-area-inset-bottom));background:rgba(4,7,11,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  pointer-events:auto}
#sheet[hidden],#ranksheet[hidden]{display:none}
/* 넓은 화면에서는 아래에 붙이지 않는다.

   서랍은 폰에서 올라오는 것이라 아래 정렬이 맞다. 그런데 PC 에서는
   1280×860 화면에 780×671 짜리 카드가 바닥에 붙어, 위로 175px 이 텅
   빈 채 남는다 — 잘린 것처럼 보인다. 가운데로 세우고 키를 조금 키운다. */
.sheetbox{width:min(780px,100%);max-height:78vh;max-height:78dvh;display:flex;flex-direction:column;padding:18px 18px 14px}
@media (min-width:900px){
  #sheet,#ranksheet{align-items:center}
  .sheetbox,.ranksheetbox{max-height:min(84vh,780px);max-height:min(84dvh,780px)}
}
.sheethd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.sheethd h2{font-family:var(--ui);font-size:20px;font-weight:800;margin:0;line-height:1.2;
  letter-spacing:-.02em}
.sheethd .cnt{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);margin-left:auto;margin-right:10px}
/* 탭 4개는 언어에 따라 길어진다 — 접지 말고 가로로 흘린다 */
/* 탭이 넷에서 여덟이 됐다. 옆으로 밀게 두면 뒤에 무엇이 있는지 모르고,
   민 사람도 어디까지 있었는지 잊는다 — 여덟을 한 화면에 두 줄로 편다.
   윗줄은 랜딩의 큰 카드 셋과 내꺼, 아랫줄은 랜딩에서 새로 생긴 넷.
   랜딩에서 익힌 자리를 여기서 다시 찾게 된다. */
/* 갈래가 아홉이 되어 내꺼까지 열 칸이다. 석 칸씩이면 마지막 줄에 하나만
   남는다 — 다섯 칸씩 두 줄이면 딱 떨어진다. 글자가 가장 긴 '내가 만든 것'도
   좁은 화면(390px)에서 한 칸 71px 안에 두 줄로 들어간다. */
#sheettabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;
  margin-bottom:12px;flex:0 0 auto;align-items:stretch}
/* 열 칸을 다섯씩 두 줄로 놓으니 한 칸이 62px 이다. 한 줄로 못 박아 두면
   가장 긴 '내가 만든 것' 이 말줄임표로 잘린다 — 두 줄로 접히게 둔다.
   줄 높이를 좁혀 한 줄짜리 탭과 키가 크게 안 어긋나게 한다. */
/* 긴 한 낱말(Überraschungsball · ワックスボール)은 칸 안에서 접는다 — 잘려 보였다 */
.stab{min-width:0;overflow:hidden;line-height:1.25;word-break:keep-all;overflow-wrap:anywhere;hyphens:auto;
  padding:7px 3px;border-radius:11px;border:1px solid transparent;background:transparent;
  color:var(--muted);font-family:var(--ui);font-size:13px;font-weight:700;cursor:pointer;
  transition:color .14s ease,background .14s ease}
@media (max-width:400px){ .stab{font-size:11px;padding:8px 2px;letter-spacing:-.02em} }   /* 긴 갈래 이름이 세 줄로 접혔다 */
/* 갈래 이름이 긴 말(일 · 러 · 독 · 불)은 좁은 폰에서 한 줄에 넷 — 다섯이면 'Кинетический песок' · 'キネティックサンド' 가
   세 줄로 접혔다. 다른 말은 다섯 그대로(두 줄로 끝난다) */
@media (max-width:400px){ html:lang(ja) #sheettabs,html:lang(ru) #sheettabs,html:lang(de) #sheettabs,html:lang(fr) #sheettabs{grid-template-columns:repeat(4,minmax(0,1fr))} }
.stab:hover{color:var(--frost-dim)}
.stab[aria-pressed="true"]{background:rgba(234,243,247,.10);border-color:var(--line-2);
  color:var(--frost)}
.stab:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* 바닥 UI 가 다섯 줄이라 화면의 3분의 1을 먹고 볼을 가렸다.
   놀면서 쓰는 것(모드·스타일·냉동·도감·미스터리)만 남기고,
   한 번 정하는 것(소리·진동·언어·공유·랭킹)은 ··· 뒤로 접는다. */
#more{display:none;flex-wrap:wrap;gap:6px;justify-content:center;width:100%}
#more:not([hidden]){display:flex}
#moretog::after{content:'';display:inline-block;margin-left:5px;vertical-align:1px;
  border:4px solid transparent;border-top-color:currentColor;
  transition:transform .16s ease}
#moretog[aria-expanded="true"]::after{transform:rotate(180deg);vertical-align:3px}
#moretog[aria-expanded="true"]{background:rgba(234,243,247,.12);color:var(--frost)}
/* 어느 나라 사람이 와도 알아보게 — 라틴 문자 한 단어 */
.langwrap{display:inline-flex;align-items:center;gap:6px}
.langlab{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  color:var(--muted-2)}
/* 명예의 전당 — 점수판과 같은 상자를 쓰되 무엇으로 줄 섰는지 다르다 */
#ranktabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:10px}
.hallhead{text-align:center;font-size:14px;color:var(--frost-dim);margin:2px 0 10px}
.hallhead b{font-family:var(--mono);font-size:24px;color:#fff}
.hallhead span{display:block;font-size:12px;color:var(--amber);margin-top:2px}
.hallas{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.4}
.hallgate{display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-radius:10px;margin-bottom:4px;font-size:12.5px;
  background:rgba(255,255,255,.03);color:var(--muted)}
.hallgate.on{background:rgba(255,179,92,.12);color:var(--frost)}
.hallgate .no{font-family:var(--mono);opacity:.8}
/* 위 가장자리를 흐린다(2026-09-15, 사람 제보) — 목록이 조금만 밀려도 구역 이름표가
   가로로 반 잘려 '보일듯 말듯' 했다. 칼로 자른 자리가 남는 대신 스르르 사라지게 한다.
   이름표를 달라붙게(sticky) 해 봤으나 이름표가 전부 top:0 에 몰려 서로 겹쳤다 —
   제대로 하려면 구역마다 감싸는 틀이 있어야 해서 목록 UI 를 통째로 고쳐야 한다.
   아래는 안 흐린다: 마지막 볼이 흐려지면 다 본 것인지 더 있는지 헷갈린다. */
#modelist{overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding-right:4px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 14px);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 14px)}
/* 구역 이름표는 목록 위에 달라붙는다(2026-09-15, 사람 제보).
   스크롤되는 목록 안에 그냥 두었더니 조금만 밀려도 글자가 가로로 반 잘려
   '보일듯 말듯' 했다 — 첫 줄(갈래 설명)뿐 아니라 어느 이름표든 그렇다.
   달라붙으면 늘 온전히 읽히고, 지금 어느 구역을 보고 있는지도 같이 알려 준다.
   margin 대신 padding 으로 자리를 만든다 — 배경이 그 자리까지 덮어야 뒤가 안 비친다. */
.glabel{font-size:12.5px;letter-spacing:.12em;color:var(--frost-dim);font-weight:700;
  text-transform:uppercase;margin-bottom:8px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px}
.mode{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);cursor:pointer;text-align:left;
  color:var(--frost);font-family:var(--ui)}
.mode:hover{border-color:var(--line-2)}
.mode[aria-pressed="true"]{border-color:var(--amber);background:rgba(255,179,92,.11)}
.mode:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.mode .sw{width:26px;height:26px;border-radius:999px;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}
.mode.egg{cursor:default;opacity:.55}
.mode.egg .sw{display:grid;place-items:center;font-size:13px;font-weight:700;
  color:var(--muted-2);background:rgba(255,255,255,.05);box-shadow:none}
.mode.egg.got{opacity:1;border-color:rgba(255,179,92,.34);background:rgba(255,179,92,.07)}
.mode.egg.got .sw{color:#1A1005;background:var(--amber)}
.mode.egg .tg{white-space:normal;line-height:1.35}
.mode .tx{display:flex;flex-direction:column;min-width:0}
.mode .nm{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mode .tg{font-size:11.5px;color:var(--frost-dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;opacity:.85}
#modebtn{position:relative}
#modebtn.hasnew::after{content:"";position:absolute;top:5px;right:5px;width:8px;height:8px;
  border-radius:999px;background:var(--fever);box-shadow:0 0 0 2px var(--panel-solid,#0E141C)}
.dailycard{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:14px;
  border:1px solid rgba(255,179,92,.34);background:rgba(255,179,92,.09);cursor:pointer;
  text-align:left;color:var(--frost);font-family:var(--ui);width:100%}
.dailycard:hover{border-color:rgba(255,179,92,.6)}
.dailycard[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--amber)}
.dailycard:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.dailycard .sw{width:42px;height:42px;border-radius:999px;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}
.dailycard .tx{display:flex;flex-direction:column;min-width:0;gap:2px}
.dailycard .nm{font-size:var(--fs-3);font-weight:700}
.dailycard .tg{font-size:var(--fs-1);color:var(--frost-dim)}
.dailycard .badge{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}
.dailycard .new{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#1A1005;
  background:var(--amber);border-radius:4px;padding:2px 6px;font-weight:700}
.dailycard .st{font-size:10px;color:var(--muted)}
#newslist{display:flex;flex-direction:column;gap:6px}
/* 줌플 한 줄 — 광고처럼 보이면 아무도 안 누른다. 카드 하나 두께로만 */
#sister{margin:18px auto 0;max-width:520px}
#sister a{display:block;padding:12px 14px;border-radius:12px;text-decoration:none;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
#sister a:hover,#sister a:focus-visible{background:rgba(255,179,92,.10);border-color:rgba(255,179,92,.35)}
#sister b{display:block;color:var(--amber);font-size:14px;font-weight:800;margin-bottom:3px}
#sister span{display:block;color:var(--muted);font-size:13px;line-height:1.5}
.nitem{display:grid;grid-template-columns:74px 1fr;gap:12px;padding:9px 11px;border-radius:10px;
  background:rgba(255,255,255,.028);align-items:baseline}
.nitem .nd{font-family:var(--mono);font-size:10px;color:var(--muted-2)}
.nitem .nt{font-size:var(--fs-2);font-weight:600}
.nitem .nb{font-size:10px;color:var(--muted);display:block;margin-top:1px}
/* 지금 어느 갈래인지 늘 보인다 — 랜덤으로 들어오면 무엇을 하는 중인지 모른다 */
#modebtn .br{display:inline-block;margin-right:6px;padding:2px 7px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:-.01em;line-height:1.5;
  background:rgba(255,255,255,.10);color:var(--frost);white-space:nowrap}
#modebtn.r-reveal .br{background:rgba(127,216,255,.18);color:#9FE4FF}
#modebtn.r-crush  .br{background:rgba(255,178,92,.18);color:#FFC27A}
#modebtn.r-shape  .br{background:rgba(190,255,190,.16);color:#B7F0BE}
/* 대메뉴로 새로 선 넷 — 얼음은 파랗게, 자르기는 은빛, 깜짝은 보라, 슬라임은 연두 */
#modebtn.r-ice    .br{background:rgba(150,220,255,.20);color:#B6E8FF}
#modebtn.r-cut    .br{background:rgba(226,232,240,.16);color:#E2E8F0}
#modebtn.r-open   .br{background:rgba(183,123,234,.20);color:#D6B4F5}
#modebtn.r-mix    .br{background:rgba(121,222,166,.18);color:#8FF0BC}
/* 여덟 번째 — 키캡은 장미빛. 일곱이 쓰는 색과 안 겹치는 자리다 */
#modebtn.r-key    .br{background:rgba(255,175,197,.20);color:#FFAFC5}
#modebtn.r-sand   .br{background:rgba(226,178,110,.20);color:#E2B26E}
#modebtn .sw{width:17px;height:17px;border-radius:999px;display:inline-block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}
/* 아래 줄의 단추는 글자가 절대 안 꺾여야 한다.

   .btn 에 overflow-wrap:anywhere 가 걸려 있다(한국어·중국어가 칸을 넘칠
   때를 위해서다). 그런데 아래 줄은 칸이 빽빽해서, 두 글자짜리 '파기' 가
   '파/기' 로 꺾여 단추 하나가 두 줄이 되고 그 줄 전체가 들썩였다.
   여기서는 넘치면 꺾지 말고 그냥 좁혀야 한다. */
#dock .btn{white-space:nowrap;overflow-wrap:normal;word-break:keep-all}
#dock{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
/* 좁은 폰에서는 단추 사이와 옆 여백을 조금 줄여 한 줄에 하나씩 더 들어가게 한다 —
   모래놀이는 단추가 둘 많아 다섯 줄(206~259px)이었다 */
@media (max-width:420px){ #dock{gap:7px} #dock .btn{padding-left:13px;padding-right:13px} }
.wax{width:30px;height:30px;border-radius:999px;border:2px solid transparent;padding:0;
  cursor:pointer;transition:transform .14s ease,border-color .14s ease}
.wax:hover{transform:translateY(-2px)}
.wax[aria-pressed="true"]{border-color:var(--frost)}
.wax:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--panel);color:var(--frost);font-family:var(--ui);
  font-size:var(--fs-2);font-weight:600;cursor:pointer;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .12s ease,border-color .15s ease}
.btn:hover{border-color:var(--line-2)}
.btn:active{transform:scale(.96)}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
#freeze{border-color:rgba(127,216,255,.38);color:var(--ice);background:rgba(46,127,168,.18)}
#freeze:disabled{opacity:.42;cursor:not-allowed;color:var(--muted)}
/* 말랑이는 깨지지 않아 판이 스스로 끝나지 않는다 — 나가는 문을 눈에 보이게 둔다 */
#nextball{border-color:rgba(190,232,216,.40);color:#BFE8D8;background:rgba(64,140,116,.16)}
#nextball:hover{background:rgba(64,140,116,.26)}
#nextball[hidden]{display:none}
/* 미스터리 — 깨기 전에는 무엇인지 모른다. 도감과 짝이라 눈에 띄게 둔다 */
#moldbtn{border-color:rgba(226,178,110,.42);color:#E2B26E}
#moldbtn[hidden]{display:none}
#moldbtn .gl{font-size:15px;line-height:1;margin-left:5px;vertical-align:-1px}
#moldbtn[aria-pressed="true"]{background:rgba(226,178,110,.18)}
/* 파기·붙이기 — 손에 든 모래를 함께 보여 준다. 안 보여 주면 붙이기로
   바꿔 놓고 아무 일도 안 일어나는 이유를 알 길이 없다. */
#sandbtn{border-color:rgba(226,178,110,.42);color:#E2B26E}
#sandbtn[hidden]{display:none}
#sandbtn[aria-pressed="true"]{background:rgba(226,178,110,.18)}
/* 손에 든 양 — 단추 밑에 깔리는 띠 하나. 숫자는 안 쓴다:
   모래를 그램으로 세는 사람은 없다. */
#sandbtn .hd{display:block;height:2px;margin:3px -4px -1px;border-radius:2px;
  background:rgba(226,178,110,.85);transition:width .12s linear}
#sandbtn.empty{opacity:.55}
#mystbtn{border-color:rgba(183,123,234,.42);color:#D9BBF5;
  background:rgba(120,70,180,.20)}
#mystbtn:hover{background:rgba(120,70,180,.32)}
/* 도감 — 2,500종을 모으는 게임인데 모은 것을 볼 자리가 없었다 */
#dexsheet{position:absolute;inset:0;z-index:5;display:flex;align-items:center;
  justify-content:center;padding:16px;background:rgba(6,9,13,.72);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#dexsheet[hidden]{display:none}
#dexsheet .sheetbox{overflow-y:auto}
#dexsum{font-size:15px;color:var(--frost);margin:2px 0 10px;text-align:center}
#dexsum b{font-family:var(--mono);font-size:22px;color:#fff}
#dexsum .st{display:block;font-size:12px;color:var(--ice);margin-top:2px}
/* 거르기 — 2,520칸 중 240칸만 그린다. 나머지를 볼 길이 없었다 */
#dexfilter{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-bottom:9px}
/* 재 보니 27px 이었다. 이 줄에 칸이 열아홉이라(전체·만난 것·아직 +
   갈래 아홉 + 등급 여섯) 하나가 작으면 그 옆을 누르게 된다 — 도감은
   구경하는 자리인데 거르개가 손을 튕겨 낸다. 32px 로 올린다.
   글자는 그대로 두고 위아래 여백만 늘린다 — 열아홉 칸이 커지면
   좁은 화면에서 줄이 늘어 도감 자체가 아래로 밀린다. */
#dexfilter button{font:inherit;font-size:11px;padding:7px 11px;border-radius:999px;
  min-height:32px;line-height:1.1;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  color:var(--frost-dim);cursor:pointer}
#dexfilter button.on{background:rgba(255,255,255,.16);color:#fff;
  border-color:rgba(255,255,255,.42)}
#dexbars{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.dexbar{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--frost-dim)}
.dexbar .nm{flex:0 0 84px}
.dexbar .tr{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.09);
  overflow:hidden}
/* span 은 inline 이라 width 가 안 먹는다 — 여태 눈금이 0 이었다 */
.dexbar .fi{display:block;height:100%;border-radius:999px}
.dexbar .no{flex:0 0 74px;text-align:right;font-family:var(--mono)}
/* align-content 를 안 주면 칸이 남는 높이를 나눠 가져 세로로 늘어난다 */
#dexgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));
  grid-auto-rows:min-content;align-content:start;
  gap:6px;min-height:34vh;max-height:46vh;overflow-y:auto;padding-right:4px}
.dexcell{aspect-ratio:1;border-radius:10px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);display:flex;align-items:center;
  justify-content:center;overflow:hidden;position:relative}
.dexcell img{width:82%;height:82%;object-fit:contain}
.dexcell.miss img{filter:brightness(0) opacity(.30)}
/* 누를 수 있다는 것이 보여야 눌러 본다 */
.dexcell{cursor:pointer;transition:transform .12s}
.dexcell:active{transform:scale(.93)}
.dexcell.on{border-color:rgba(255,255,255,.55)}
/* 낱개 — 재질과 물성. 열한 갈래를 숫자로만 두면 아무도 모른다 */
#dexsum .pct{opacity:.7}
#dexinfo{margin-top:10px;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
#dexinfo[hidden]{display:none}
#dexinfo .hd{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
#dexinfo .nm{font-size:15px;color:#fff;font-weight:600}
#dexinfo .rk{font-size:11px;font-family:var(--mono)}
#dexinfo .mt{font-size:12px;color:var(--frost-dim);margin-bottom:8px}
#dexinfo .st{display:flex;align-items:center;gap:8px;font-size:11px;
  color:var(--frost-dim);margin-top:4px}
#dexinfo .st .k{flex:0 0 62px}
#dexinfo .st .t{flex:1;height:6px;border-radius:999px;
  background:rgba(255,255,255,.09);overflow:hidden}
#dexinfo .st .f{display:block;height:100%;border-radius:999px;background:var(--frost)}
#dexinfo .go{margin-top:9px;width:100%}
.dexcell .rr{position:absolute;left:3px;bottom:3px;width:6px;height:6px;
  border-radius:999px}
#freeze .cd{font-family:var(--mono);font-size:var(--fs-1);opacity:.85;min-width:20px;text-align:right}
#styles{display:flex;gap:4px;padding:5px 6px;align-items:center}
.sty{padding:6px 13px;border-radius:9px;border:1px solid transparent;background:transparent;
  color:var(--muted);font-family:var(--ui);font-size:var(--fs-2);font-weight:600;cursor:pointer;
  transition:color .14s ease,background .14s ease}
.sty:hover{color:var(--frost-dim)}
.sty[aria-pressed="true"]{background:rgba(234,243,247,.10);border-color:var(--line-2);color:var(--frost)}
.sty:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
#collect{font-family:var(--mono);font-size:var(--fs-2);color:var(--muted)}
#collect b{color:var(--amber);font-weight:600}

/* 몇 개가 깨졌는지 — 랜딩은 전체 합계, 게임 안은 내가 깬 것 */
#broke{margin:4px auto 0;max-width:520px;text-align:center;font-size:13px;color:var(--muted)}
#broke .n{font-family:var(--mono);font-weight:700;color:var(--frost);font-size:15px}
#broke .row{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin-top:6px;
  font-size:12px;color:var(--muted-2)}
#broke .row b{font-family:var(--mono);font-weight:600;color:var(--muted)}
#broke .row i{display:inline-block;width:6px;height:6px;border-radius:999px;
  margin-right:5px;vertical-align:middle}
/* 갈래마다 제 색. 여태 #broke 의 6px 점에만 쓰였는데, 이제 갈래 카드도
   같은 색을 쓴다 — 두 군데에 따로 적어 두면 열 번째 갈래에서 어긋난다.
   한 곳에 세우고 점과 카드가 함께 본다. */
:root{
  --r-reveal:#7FD8FF; --r-crush:#FFC27A; --r-shape:#B7F0BE;
  --r-ice:#B6E8FF;    --r-cut:#E2E8F0;   --r-open:#D6B4F5;
  --r-mix:#8FF0BC;    --r-key:#FFAFC5;   --r-sand:#E2B26E;
  /* 갈래가 아닌 카드 셋도 제 색이 이미 있었다(아래 .bn 들) — 같은 자리에 모은다 */
  --r-any:#7FD8FF;    --r-dare:#FFB35C;  --r-ugc:#B7F0BE;
}
.d-reveal{background:var(--r-reveal)}
.d-crush{background:var(--r-crush)}
.d-shape{background:var(--r-shape)}
.d-ice{background:var(--r-ice)}
.d-cut{background:var(--r-cut)}
.d-open{background:var(--r-open)}
.d-mix{background:var(--r-mix)}
.d-key{background:var(--r-key)}
.d-sand{background:var(--r-sand)}
#broke .mine{margin-top:5px;font-size:12px;color:var(--muted-2)}
/* 점수판 맨 아랫줄 — 내가 깬 것과, 지금 함께 노는 사람.

   전에는 화면 한가운데에 띄워 두었다(left:50%, top:54px). PC 에서는
   점수판과 온도계 사이 빈 자리였는데 폰에서는 점수판이 가운데까지
   뻗어 그 위에 겹쳐 앉았다. 넓이에 따라 겹치기도 하고 아니기도 하니
   '어느 폭에서 괜찮더라' 는 말이 소용없다. 띄우기를 그만두고 점수판
   안에 들인다 — 겹칠 수가 없는 자리다. */
#subrow{display:flex;align-items:center;gap:11px;margin-top:5px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:var(--muted-2)}
#tally{display:flex;gap:11px;pointer-events:none;opacity:0;transition:opacity .4s}
#tally.on{opacity:.72}
#tally span{display:flex;align-items:center;gap:4px}
#subrow i{width:5px;height:5px;border-radius:999px;display:block;flex:none}
/* 함께 노는 사람은 숨 쉬듯 옅게 뛴다 — 멈춘 숫자가 아니라 지금이라는 표시 */
#online{display:flex;align-items:center;gap:4px;opacity:.78}
#online i{background:#8FF0BC;box-shadow:0 0 5px rgba(143,240,188,.75);
  animation:livep 2.6s ease-in-out infinite}
#online em{font-style:normal;letter-spacing:.04em}
@keyframes livep{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ #online i{animation:none} }
@media (max-width:640px){ #broke .row{gap:3px 10px} #subrow{font-size:10px;gap:8px} #tally{gap:8px} }
/* 지금 갈래의 조작을 늘 한 줄로 보여준다. 익숙해지면 스스로 옅어져 방해하지 않는다. */
#howline{position:absolute;left:50%;top:calc(50% + 27vmin);transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  background:rgba(10,14,20,.42);backdrop-filter:blur(6px);
  font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--frost);
  white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .5s}
#howline .dot{width:7px;height:7px;border-radius:999px;background:var(--ice);flex:none}
/* 조형 갈래에는 껍질이 없어 '줄어드는 것' 이 안 보인다 — 얼마나 왔는지
   여기서 보여 준다. 끝이 안 보이면 '언제 벗어나나' 가 된다. */
/* 조형 갈래의 '다음 볼' — 나가는 문이 이것뿐이라 눈에 띄어야 한다 */
#nextball.lead{box-shadow:inset 0 0 0 1px rgba(183,240,190,.55);
  background:rgba(183,240,190,.10);color:#D6F7DC}
#howline .pg{display:none;width:46px;height:4px;border-radius:999px;flex:none;
  background:rgba(255,255,255,.14);overflow:hidden}
#howline.hasPg .pg{display:block}
#howline .pg i{display:block;height:100%;width:0;border-radius:999px;
  background:var(--frost);transition:width .18s ease-out}
#howline.r-crush .dot{background:#FFC27A}
#howline.r-shape .dot{background:#B7F0BE}
#howline.r-ice   .dot{background:#B6E8FF}
#howline.r-cut   .dot{background:#E2E8F0}
#howline.r-open  .dot{background:#D6B4F5}
#howline.r-mix   .dot{background:#8FF0BC}
#howline.r-key   .dot{background:#FFAFC5}
#howline.r-sand  .dot{background:#E2B26E}
/* 커스텀 안내가 떠 있으면 두 말풍선이 위아래로 겹쳐 둘 다 안 읽힌다.
   툴팁은 제 단추를 가리켜야 하니 그대로 두고, 안내 줄만 한 칸 올린다. */
#ui:has(#customtip:not([hidden])) #howline{top:calc(50% + 22vmin)}
@media (max-width:640px){ #howline{font-size:12px;padding:5px 11px;top:calc(50% + 25vmin)}
  #ui:has(#customtip:not([hidden])) #howline{top:calc(50% + 20vmin)} }
/* 서랍(5 · 6 · 모두의 볼 60)이 열린 채 뜨는 알림(링크 복사 · 저장했습니다)이 서랍 밑에 깔려 안 보였다 */
#toast{position:absolute;left:50%;top:calc(50% - 33vmin);transform:translate(-50%,-14px);z-index:70;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:3px;opacity:0;text-align:center;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,1.3,.4,1)}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast .big{font-family:var(--disp);font-size:clamp(30px,7vmin,52px);line-height:1;
  color:var(--frost);text-shadow:0 2px 30px rgba(255,179,92,.5)}
#toast .sub{font-size:15px;color:var(--amber);font-weight:600;letter-spacing:.02em}
/* 판 결과 한 줄 — 별 · 걸린 시간 · 신기록 · 레벨. 알림 안에 붙어 자리를 따로 안 먹는다 */
#toast .res{display:flex;gap:10px;align-items:center;margin-top:5px;padding:5px 13px;border-radius:999px;
  background:rgba(8,12,18,.5);font-size:14px;font-weight:700;color:var(--frost);white-space:nowrap}
#toast .res[hidden]{display:none}
#toast .res .st{color:var(--amber);font-size:18px;letter-spacing:2px}
#toast .res .st i{font-style:normal;opacity:.25}
#toast .res .nb{color:#FFB35C}
#toast .res .lv{opacity:.72}
#toast .res .lv.up{opacity:1;color:#B7F0BE}
/* 도전 60초 — 시계는 FEVER 줄 밑, 폰에서는 FEVER 줄 위(그 줄이 아래로 내려간다) */
#dare{position:absolute;left:50%;top:46px;transform:translateX(-50%);display:flex;gap:10px;align-items:baseline;
  padding:4px 14px;border-radius:999px;background:rgba(8,12,18,.55);color:var(--frost);font-weight:800;z-index:3}
#dare[hidden]{display:none}
#dare .t{font-family:var(--disp);font-size:24px;min-width:2ch;text-align:center}
#dare .s{font-size:14px;color:var(--amber)}
#dare.low .t{color:#FF7A6B;animation:pulse .7s ease-in-out infinite}
@media (max-width:640px){ #dare{top:auto;bottom:calc(var(--docktop,150px) + 40px)} }
#dareend{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;min-width:240px;max-width:88vw;
  padding:22px 26px;border-radius:18px;background:rgba(10,14,20,.88);border:1px solid rgba(255,255,255,.12);
  text-align:center;color:var(--frost);box-shadow:0 20px 60px rgba(0,0,0,.5);pointer-events:auto}
#dareend[hidden]{display:none}
#dareend .h{display:block;font-family:var(--disp);font-size:30px;margin-bottom:8px}
#dareend .l{font-size:20px;font-weight:800;color:var(--amber);margin:0 0 4px}
#dareend .b{font-size:13px;opacity:.75;margin:0 0 14px}
#dareend .b.nb{color:#B7F0BE;opacity:1}
#dareend .bt{display:flex;gap:8px;justify-content:center}
/* 공유 서랍의 영상 칸 — 격자 한 줄을 통째로 쓴다 */
.vidsec{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;
  background:rgba(255,179,92,.06);border:1px solid rgba(255,179,92,.22);margin-bottom:4px}
.vidsec h3{margin:0;font-size:14px;color:var(--amber);font-weight:800}
.vidsec .vidhint{margin:0;font-size:12.5px;opacity:.7}
.vidrow{display:flex;flex-wrap:wrap;gap:8px}
.vidrow .btn.primary{background:linear-gradient(180deg,#FFC97E,#E08B2C);color:#1A1005;border-color:transparent}
.vidrow .btn.yt{border-color:rgba(255,90,90,.6)}
.vidrow .btn.tt{border-color:rgba(120,240,230,.55)}
.vidrow .btn.ig{border-color:rgba(255,130,190,.6)}
/* 폰 가로 — 세로로 돌려 달라는 반투명 안내(pWnav.js ROTATE). 무엇보다 위에 선다 */
#rotnote{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:20px;background:rgba(6,9,14,.84);backdrop-filter:blur(8px);color:var(--frost);text-align:center}
#rotnote[hidden]{display:none}
#rotnote p{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
#rotnote .ph{transform-origin:32px 26px;animation:rotph 2.2s ease-in-out infinite}
@keyframes rotph{0%,20%{transform:rotate(90deg)}55%,100%{transform:rotate(0deg)}}
@media (prefers-reduced-motion:reduce){ #rotnote .ph{animation:none} }
/* 보스 볼 막대(pZplay.js) — 도전 시계(#dare)와 같은 자리. 둘은 함께 서지 않는다(도전 중엔 보스가 안 선다).
   더 내리면 가운데 위 알림(#toast — '처음 만났다' 등)과 겹친다 */
#bossbar{position:absolute;left:50%;top:46px;transform:translateX(-50%);z-index:4;min-width:220px;max-width:80vw;
  padding:6px 12px 8px;border-radius:12px;background:rgba(40,8,12,.62);border:1px solid rgba(255,90,90,.45);
  color:#FFE2E2;text-align:center;pointer-events:none}
#bossbar[hidden]{display:none}
#bossbar .nm{display:block;font-size:13px;font-weight:800;letter-spacing:.02em;margin-bottom:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bossbar .hp{height:7px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
#bossbar .hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#FF5A5A,#FFB35C);transition:width .2s}
#bossbar .t{display:block;margin-top:4px;font-size:12px;opacity:.85}
#bossbar.low .t{color:#FF7A6B;font-weight:800}
@media (max-width:640px){ #bossbar{top:auto;bottom:calc(var(--docktop,150px) + 84px)} }
/* 첫 30초 — 볼 둘레 숨 쉬는 테 + 큰 한마디(pZplay.js) */
#coach{position:absolute;inset:0;pointer-events:none;z-index:5}
#coach[hidden]{display:none}
#coach .ring{position:absolute;border-radius:50%;border:3px solid rgba(255,179,92,.8);
  box-shadow:0 0 30px rgba(255,179,92,.45);animation:coachpulse 1.4s ease-in-out infinite}
#coach .ring[hidden]{display:none}
@keyframes coachpulse{0%,100%{transform:scale(.92);opacity:.55}50%{transform:scale(1.04);opacity:1}}
#coach .pill{position:absolute;left:50%;transform:translateX(-50%);padding:9px 16px;border-radius:999px;
  background:rgba(10,14,20,.8);color:#fff;font-weight:800;font-size:16px;max-width:88vw;text-align:center;
  text-wrap:balance;word-break:keep-all}
#coach .skip{position:absolute;right:12px;top:128px;pointer-events:auto}
@media (max-width:640px){ #coach .skip{top:auto;bottom:calc(var(--docktop,150px) + 118px)} #coach .pill{font-size:14px} }
@media (prefers-reduced-motion:reduce){ #coach .ring{animation:none} }
/* 볼 양옆 ‹ › (pWnav.js) — 볼을 가리지 않게 반투명, 손이 닿아 있으면 더 흐리게.
   높이는 스크립트가 볼 한가운데로 맞춘다 */
.ballnav{position:absolute;top:calc(45% - 22px);z-index:4;width:44px;height:44px;border-radius:999px;
  display:grid;place-items:center;padding:0 0 3px;border:1px solid rgba(255,255,255,.16);
  background:rgba(10,14,20,.28);color:rgba(234,243,247,.85);font-size:28px;line-height:1;font-weight:300;
  opacity:.42;transition:opacity .25s;cursor:pointer;backdrop-filter:blur(4px);-webkit-tap-highlight-color:transparent}
.ballnav:hover,.ballnav:focus-visible{opacity:.9}
.ballnav.l{left:8px}
.ballnav.r{right:8px}
.ballnav[hidden]{display:none}
.ballnav:disabled{opacity:.13;cursor:default}
#ui.touching .ballnav:not(:disabled){opacity:.14}
#ui.pure .ballnav{display:none}
@media (max-width:640px){ .ballnav{width:40px;height:40px;font-size:24px} .ballnav.l{left:4px} .ballnav.r{right:4px} }
/* 모두의 볼 — 만들기 · 둘러보기 서랍(pVugc.js 가 만들어 붙인다) */
.ugcsheet{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:14px;background:rgba(4,6,10,.62)}
.ugcsheet[hidden]{display:none}
.ugcsheet .sheetbox{max-height:88vh;max-height:88dvh}   /* iOS 의 vh 는 주소 막대가 접힌 높이 — 아래 단추가 잘렸다 */
.ugcsheet .ubody{overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-top:6px}
.ugcrow{display:flex;flex-direction:column;gap:6px}
.ugcrow > b{font-size:12.5px;color:var(--muted);font-weight:700;letter-spacing:.02em}
.ugcchips{display:flex;flex-wrap:wrap;gap:6px}
.ugcchips button{padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);color:var(--frost);font:inherit;font-size:13px;cursor:pointer}
.ugcchips button[aria-pressed="true"]{border-color:var(--amber);background:rgba(255,179,92,.16);color:#FFE2B8}
.ugcshapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px}
.ugcshapes button{padding:4px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);cursor:pointer}
.ugcshapes button[aria-pressed="true"]{border-color:var(--amber);background:rgba(255,179,92,.14)}
.ugcshapes canvas{width:100%;height:auto;display:block}
.ugcin{padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.25);color:var(--frost);font:inherit;font-size:15px}
.ugccolors{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ugccolors label{display:flex;align-items:center;gap:8px;font-size:13px}
.ugccolors input{width:44px;height:32px;border:0;padding:0;background:none;cursor:pointer}
.ugcprev{display:flex;justify-content:center}
.ugcprev canvas{width:120px;height:120px}
.ugcact{display:flex;gap:8px;flex-wrap:wrap}
.ugcact .btn.primary{background:linear-gradient(180deg,#FFC97E,#E08B2C);color:#1A1005;border-color:transparent}
.ugcmsg{font-size:13px;color:#FFB35C;min-height:1.2em;margin:0}
.ugclist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ugccard{position:relative;display:flex;align-items:center;gap:10px;padding:9px 26px 9px 10px;border-radius:12px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);color:var(--frost);cursor:pointer}
.ugccard:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ugccard canvas{width:44px;height:44px;flex:none}
.ugccard .tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.ugccard .nm{font-weight:800;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ugccard .mt{font-size:11.5px;opacity:.65}
.ugccard .fl{position:absolute;right:4px;top:4px;border:0;background:none;color:rgba(255,255,255,.4);
  cursor:pointer;font-size:13px;padding:4px 6px}
.ugctabs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ugctabs .btn[aria-pressed="true"]{border-color:var(--amber);color:#FFE2B8}
.branch.ugc .bn,.branch.ugc .be{color:#B7F0BE}
/* 오늘의 도전 결과 공유 · 결과 판 단추가 셋이 되어 줄을 넘길 수 있다 */
#dareend .bt{flex-wrap:wrap}
#dareend .btn.primary{background:linear-gradient(180deg,#FFC97E,#E08B2C);color:#1A1005;border-color:transparent}
/* ?d=1 로 온 사람에게 도전 카드를 가리킨다 */
.branch.hl{box-shadow:inset 0 0 0 2px #FFB35C,0 0 24px rgba(255,179,92,.35)}
/* ♥ 즐겨찾기 — 볼 이름 단추 옆 */
#favbtn{min-width:42px;padding-left:11px;padding-right:11px;font-size:18px;line-height:1;color:#FF9DB4}
#favbtn[aria-pressed="true"]{background:rgba(255,120,150,.16);border-color:rgba(255,120,150,.55)}
#favbtn:disabled{opacity:.35}
.pk.pkfav{color:#FF9DB4}
.pk.pkfav:disabled{opacity:.4}
.branch.dare .bn{color:#FFB35C}
.branch.dare .be{color:#FFB35C}

#start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  /* 내용이 화면보다 길면 가운데 정렬이 위쪽을 화면 밖으로 밀어낸다 —
     스크롤로도 못 올라가서 제목이 잘린 채 사라진다. safe 는 그때만 위 정렬로 바꾼다. */
  justify-content:center;justify-content:safe center;gap:clamp(11px,2.4vh,19px);
  padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));
  text-align:center;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain;
  background:radial-gradient(120% 90% at 50% 45%,rgba(8,11,16,.88),rgba(8,11,16,.97));
  /* 뒤 흐림(backdrop-filter)은 뺐다 — 창 전체가 반투명 합성층이 되어 윈도우 크롬이 글씨를 ClearType 없이
     흐리게 그렸다(사람이 '글씨가 안 선명하다'고 함, 2026-10-15). 대신 가운데를 .56 → .88 로 덮는다 —
     .66 에서는 뒤의 볼이 또렷한 원으로 · 판 가장자리가 세로 줄로 비쳤다 */
  transition:opacity .5s ease}
#start > *{flex:0 0 auto}
/* 폰에서는 뒤의 흐림을 뺀다 — 판이 매 틀 바뀌어 흐림도 매 틀 다시 셈했다(바탕은 이미 .56~.96 불투명) */

/* opacity:0 만으로는 사라지지 않는다 — 자리도 배경도 그대로 남는다.
   #start 의 배경은 화면을 덮는 커다란 타원 그라디언트라, 합성이 어긋나는
   브라우저에서 그 가장자리가 검은 띠로 비쳤다. 안의 단추도 글자 조각으로
   삐져나왔다. 페이드가 끝난 뒤에 visibility 로 완전히 지운다. */
#start.gone{opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .38s ease,visibility 0s linear .38s}
/* 막이 떠 있는 동안 점수·훈장·온도 HUD 가 제목 뒤로 비칩니다 — 글자끼리 겹쳐 무엇도 안 읽혀서
   볼은 그대로 두고 HUD 만 내린다. 랜딩에는 제 몫의 카운터가 따로 있다. */
#ui{transition:opacity .38s ease}
#stage:has(#start:not(.gone)) #ui{opacity:0}
/* 카드를 위로 올렸으니 제목이 그만큼 자리를 내준다 — 로고는 여전히
   제일 크지만, 첫 화면에 카드 여덟이 다 들어와야 한다. */
#start h1{font-family:var(--disp);margin:0;line-height:1.04;padding:0 .12em;
  font-size:clamp(40px,10.5vmin,92px);letter-spacing:-.012em;
  background:linear-gradient(176deg,#FFFFFF 4%,#EAF6FF 24%,#BCD5E6 56%,#67809A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 1px rgba(8,14,22,.5)) drop-shadow(0 10px 44px rgba(127,216,255,.26))}
/* 라틴 워드마크(BBASASAK)는 글자 수가 배 이상이라 그대로 두면 화면을 넘는다 —
   크기를 낮추고 자간을 벌려 로고처럼 세운다 */
#start h1[data-wm="latin"]{font-size:clamp(30px,8.6vmin,74px);letter-spacing:.11em;
  padding-left:.13em;line-height:1.12}
#start .kicker{font-size:12.5px;letter-spacing:.4em;color:var(--ice);font-weight:700;
  text-transform:uppercase;margin-bottom:-14px}
/* 제목에 붙은 띠 한 줄. #start 는 아이 사이를 gap 으로 벌리는데, 이 줄은
   제목의 일부처럼 읽혀야 해서 음수 여백으로 그 틈을 도로 좁힌다. */
#start .nonet{display:inline-block;margin:-5px 0 0;padding:4px 11px;border-radius:999px;
  background:rgba(183,240,190,.10);border:1px solid rgba(183,240,190,.28);
  color:#B7F0BE;font-size:12px;font-weight:700;letter-spacing:.02em}
/* 홈 화면에 얹은 뒤에는 '설치도 없이' 가 거짓말이 된다 — 그때만 접는다 */
@media (display-mode:standalone),(display-mode:fullscreen),(display-mode:minimal-ui){
  #start .nonet{display:none}
}
#start .lede{max-width:32ch;font-size:15.5px;line-height:1.55;color:var(--frost-dim);
  margin:0;font-weight:500;text-wrap:balance}
/* 무엇을 얻어 가는지 한 줄로 — 손끝으로 스트레스를 푸는 곳이라는 약속 */
/* 한 줄로 읽혀야 한 마디로 남는다 — 두 줄로 접히면 그냥 설명문이 된다 */
#start .hook{max-width:none;margin:-4px 0 0;font-size:14.5px;line-height:1.7;
  font-weight:600;color:var(--ice);letter-spacing:-.01em;white-space:nowrap}
@media (max-width:760px){ #start .hook{white-space:normal;max-width:34ch;text-wrap:balance} }
/* 갈래를 셋 + 다섯 두 줄로.

   열두 칸일 때는 셋(4칸씩)과 넷(3칸씩)이 나란히 섰다. 그런데 모래가
   들어와 둘째 줄이 다섯이 되면서 넷만 서고 키캡 하나가 다음 줄에 혼자
   남았다 — PC 에서 줄이 어그러져 보였다.
   열다섯 칸이면 셋(5칸씩)과 다섯(3칸씩)이 같은 격자에 딱 떨어진다. */
/* 열여덟 칸이면 큰 셋(6칸씩)과 작은 여섯(3칸씩)이 각각 한 줄에 딱
   떨어진다. 모래놀이가 아래 혼자 있던 줄에서 올라와 작은 카드 여섯이
   되었기 때문이다 — 열다섯 칸에서는 여섯째가 다음 줄로 떨어졌다. */
/* 카드 위의 큰 숫자. 개수는 카드마다 이미 적혀 있었지만, 다 더하면 얼마인지는
   아무 데도 없었다 — 이 게임이 가진 가장 큰 것이 어디에도 안 적혀 있던 셈이다.
   손으로 적지 않는다. p8ui 가 카드를 채우며 센 값(bn.any)을 그대로 쓴다. */
#brhead{display:flex;flex-direction:column;align-items:center;gap:1px;margin:6px 0 0}
/* 카드 위에 작게 얹어 두었더니 '설명 한 줄' 로 읽혔다. 이 숫자가 이 게임이
   가진 가장 큰 것이므로 제목만 한 크기로 세운다 — 아래 카드 아홉이 그
   숫자의 내역이 된다. */
#brtotal{font-family:var(--disp);font-size:clamp(46px,12.5vw,80px);line-height:.96;
  letter-spacing:-.022em;color:var(--amber);
  text-shadow:0 6px 30px rgba(255,179,92,.20)}
#brwhat{font-size:13px;color:var(--frost-dim);letter-spacing:.01em}
@media (max-width:640px){
  #brhead{margin:2px 0 0}
  #brtotal{font-size:clamp(40px,11.5vw,58px)}
  #brwhat{font-size:12px}
}
#branches{display:grid;gap:9px;justify-content:center;width:100%;max-width:760px;
  grid-template-columns:repeat(18,minmax(0,1fr))}
#branches > .branch{grid-column:span 6}
#branches > .branch.fresh{grid-column:span 3}
/* 새로 생긴 넷은 한 눈에 새것으로 보여야 한다 — 다만 기존 셋을 덮지 않게 */
.branch.fresh{padding:11px 9px}
.branch.fresh .bn{font-size:16px}
.branch.fresh .bd{font-size:11px}
/* 랜덤은 갈래들 아래 한 줄을 다 쓴다 — 고르기 싫은 사람의 자리.
   #branches > .branch 가 ID 명시도로 이겨서 span 4 로 눌려 있었다.
   한 칸짜리로 쭈그러들어 '전체를 아우르는 자리' 로 안 보였다. */
/* NEW 갈래는 이제 자리를 달리 쓰지 않는다 — 다른 새 갈래와 나란히
   서고, 분홍 테두리와 딱지로만 구별한다.

   한동안 한 줄을 통째로 차지하게 두었다. 그때는 갈래가 여덟이라
   마지막 하나가 혼자 남아 옆이 비었기 때문인데, 그 자리가 카드
   여덟 아래로 떨어져 "고르는 카드" 가 아니라 "광고 띠" 처럼 보였다.
   모래놀이는 골라서 하는 놀이지 알림이 아니다. */
#branches > .branch.newbr{grid-column:span 3}
.branch.newbr{box-shadow:inset 0 0 0 1px rgba(255,175,197,.34)}
.branch.newbr .bn{font-size:16px;color:#E2B26E}
.branch.newbr .be{font-size:9.5px;color:#E2B26E;opacity:.75}
.branch.newbr .bd{font-size:11px}
/* NEW 딱지 — 낱말 하나라 나라 말을 안 탄다(RANDOM JOURNEY 와 같은 결) */
.branch .nu{font-family:var(--ui);font-size:8.5px;font-weight:800;
  letter-spacing:.12em;padding:1px 6px;border-radius:999px;
  background:#FFAFC5;color:#2A1A20;line-height:1.7}
#branches > .branch.any{grid-column:1/-1}
.branch.any{flex-direction:row;flex-wrap:wrap;justify-content:center;
  align-items:baseline;gap:2px 8px;padding:10px 12px}
.branch.any .bn{color:var(--ice)}
.branch{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;
  padding:18px 13px 16px;min-width:0;cursor:pointer;color:inherit;
  transition:transform .14s cubic-bezier(.2,1.4,.4,1)}
.branch:hover{transform:translateY(-2px)}
.branch:active{transform:scale(.98)}
.branch:focus-visible{outline:2px solid var(--frost);outline-offset:3px}

/* 카드마다 제 갈래의 색. 칠하지는 않는다 — 꽉 채우면 유리판이 색종이가 되고,
   열두 장이 서로 소리를 지른다. 테두리 한 줄과 위쪽에 옅게 깔리는 기운만.

   색을 못 섞는 브라우저(color-mix 이전)는 앞줄의 평범한 값으로 떨어진다 —
   #combo 가 쓰는 그 방식 그대로다. 그 브라우저에서는 지금과 똑같이 보인다. */
[data-branch="reveal"]{--rc:var(--r-reveal)}
[data-branch="crush"]{--rc:var(--r-crush)}
[data-branch="shape"]{--rc:var(--r-shape)}
[data-branch="ice"]{--rc:var(--r-ice)}
[data-branch="cut"]{--rc:var(--r-cut)}
[data-branch="open"]{--rc:var(--r-open)}
[data-branch="mix"]{--rc:var(--r-mix)}
[data-branch="key"]{--rc:var(--r-key)}
[data-branch="sand"]{--rc:var(--r-sand)}
[data-branch="any"]{--rc:var(--r-any)}
[data-branch="dare"]{--rc:var(--r-dare)}
[data-branch="ugc"]{--rc:var(--r-ugc)}
.branch[data-branch]{border-color:var(--line-2)}
.branch[data-branch]{
  border-color:color-mix(in srgb, var(--rc) 50%, transparent);
  background:linear-gradient(158deg,
    color-mix(in srgb, var(--rc) 18%, transparent) 0%, var(--panel) 60%)}
/* 개수도 제 갈래 색으로 — 여태 열두 장이 모두 같은 하늘색이라 어느 칸의
   숫자인지 눈이 한 번 더 짚어야 했다 */
.branch[data-branch] .bc b{color:var(--rc)}
.branch[data-branch]:hover{border-color:color-mix(in srgb, var(--rc) 72%, transparent)}
/* Black Han Sans 는 큰 제목용 초굵은 서체다. 17px 에서는 한글 속공간이
   메워져 글자가 검은 덩어리로 읽힌다 — 작은 자리에는 UI 서체를 쓴다. */
.branch .bn{font-family:var(--ui);font-size:20px;font-weight:800;color:var(--frost);
  letter-spacing:-.02em}
/* 개수가 11px 대문자 띠라 '몇 가지' 가 아니라 꼬리표로 읽혔다. 갈래마다
   백 가지와 천 가지가 다른데 그 차이가 안 보였다 — 숫자를 키우고 단위를
   작게 내린다. 숫자만 제 갈래 색을 입는다(아래 [data-branch]). */
.branch .bc{font-size:10.5px;letter-spacing:.02em;color:var(--muted);font-weight:600;
  display:flex;align-items:baseline;justify-content:center;gap:3px}
.branch .bc b{font-family:var(--mono);font-size:20px;font-weight:600;
  letter-spacing:-.015em;line-height:1}
/* 한국어가 주인이고 영문은 거들 뿐이다 — 무엇을 하는 놀이인지 한 눈에 */
.branch .be{font-family:var(--ui);font-size:9.5px;letter-spacing:.16em;
  font-weight:700;color:var(--muted-2);text-transform:uppercase;margin-top:-2px}
.branch.any .be{font-size:10.5px;color:var(--ice);opacity:.75}
.branch.any .bn{font-size:20px}
.branch.any{padding:14px 12px}
.branch .bd{font-size:12px;color:var(--frost-dim);line-height:1.5}
/* 넓은 화면에서는 한 줄로 편다 — 두 줄이 되면 시작 버튼이 화면 밖으로 밀린다 */
#howto{display:grid;gap:8px;justify-content:center;width:100%;max-width:860px;
  grid-template-columns:repeat(auto-fit,minmax(126px,1fr))}
.how{display:flex;flex-direction:column;gap:4px;align-items:center;padding:10px 11px;
  min-width:0;text-align:center}
.how .k{font-size:15px;font-weight:700;color:var(--frost);letter-spacing:-.01em}
.how .d{font-size:12.5px;color:var(--frost-dim);line-height:1.5}
#go{font-family:var(--ui);font-weight:800;font-size:clamp(18px,4.4vmin,22px);letter-spacing:.01em;
  padding:16px clamp(38px,11vw,52px);border-radius:999px;min-height:56px;
  background:linear-gradient(180deg,#FFC97E,#E08B2C);color:#1A1005;cursor:pointer;
  border:1px solid transparent;   /* 새로 시작의 테두리와 높이를 맞춘다 */
  box-shadow:0 10px 40px rgba(255,179,92,.32);transition:transform .14s cubic-bezier(.2,1.4,.4,1)}
/* 랜딩에도 언어를 고를 자리를 둔다. 브라우저 말로 알아서 열리지만,
   그것이 틀렸을 때 되돌릴 길이 화면에 없으면 막힌다.
   지구본을 앞에 세워 글을 못 읽어도 무엇인지 알아보게 한다. */
/* 이 게임의 상품은 그림이 아니라 소리다 — 첫 화면에 그 말이 없었다 */
#soundask{margin:6px 0 2px;font-size:14px;color:var(--ice);font-weight:700;
  letter-spacing:.01em;display:flex;align-items:center;gap:7px}
#soundask .ic{font-size:16px}
/* 언어 고르개는 첫 화면 오른쪽 위 모서리에 붙인다.

   나라는 브라우저가 보낸 말(accept-language)로 저절로 정해지고, 재 보니
   열두 나라가 다 제대로 간다(ko·ja·de·pt·zt 확인, 목록에 없는 말은 en).
   그래서 이 고르개는 '틀렸을 때 고치는 자리' 다 — 한국어 브라우저를 쓰는
   영어 사용자, 남의 폰, 여행 중인 사람.

   그런데 글 흐름 안에 두었더니 1.5 화면 아래(모바일 y=1244 · PC y=1219)에
   있어서, 정작 그것이 필요한 사람은 읽을 수 없는 글자들을 지나 한참
   내려가야 찾았다. 모서리에 고정하면 첫 화면에서 바로 보이면서 '시작하기'
   와 다투지 않는다. #start 가 걷히면 함께 사라진다(fixed 라도 부모가
   display:none 이면 안 그려진다) — 놀 때는 서랍 안의 것을 쓴다. */
#langpick{position:fixed;z-index:5;
  top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));
  display:flex;align-items:center;gap:7px;margin:0;
  padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(10,14,20,.55);backdrop-filter:blur(6px);
  font-size:14px;color:var(--frost-dim)}
/* 좁은 화면에서는 머리글(INFINITE WAX BALL)이 화면 폭을 거의 다 써서
   모서리 고르개와 글자가 겹쳤다. 글씨를 줄이는 것만으로는 안 된다 —
   나라 이름은 남아야 하니까. 첫 화면 전체를 고르개 높이만큼 내린다. */
@media (max-width:560px){
  #langpick .langlab{display:none}
  #langpick{padding:6px 9px;font-size:13px}
  #langsel2{max-width:96px}
  #start{padding-top:max(56px,calc(env(safe-area-inset-top) + 46px))}
}
#langpick span{font-size:15px;line-height:1;opacity:.85}
/* '한국어' 만 있으면 한국어를 못 읽는 사람은 그것이 언어 고르는 자리인 줄 모른다.
   라틴 문자 한 단어는 어느 나라 사람이든 알아본다. */
#langpick .langlab{font-size:9.5px;font-weight:700;letter-spacing:.16em;
  color:var(--muted-2);font-family:var(--ui)}
/* 재 보니 84×21 이었다. 첫 화면 오른쪽 위, 제 나라 말이 아니면 가장
   먼저 누르는 자리인데 손끝보다 작았다. 글자 크기는 그대로 두고
   높이만 세운다 — 이 칸이 커지면 로고 옆이 답답해진다. */
#langsel2{background:transparent;border:0;color:var(--frost);font:inherit;
  cursor:pointer;padding:0 2px;min-height:32px}
#langsel2 option{background:#12161C;color:#E8F1F8}
/* 오늘의 미션 — 줄마다 한 가지. 다 채운 것은 옅어지고 줄이 그어진다 */
#missions{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:6px;
  font-size:var(--fs-5);color:var(--frost-dim)}
#missions .mrow{display:flex;align-items:center;gap:7px}
#missions .mrow.done{opacity:.45;text-decoration:line-through}
#missions .mn{font-family:var(--mono,monospace);color:var(--amber);font-weight:700}
/* 진열장 — 끝까지 깬 것만, 크게 */
#shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:7px;margin-top:8px}
#shelf .sc{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
#shelf .sc img{width:100%;height:100%;object-fit:cover}
#shelf .sc .rr{position:absolute;right:4px;bottom:4px;width:7px;height:7px;border-radius:999px}
#shelf .none{grid-column:1/-1;text-align:center;color:var(--muted-2);padding:14px 0}
/* 이어하기 코드 — 있는 .btn 차림새를 쓰고 줄만 잡아 준다 */
#carry{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px;margin-top:10px;font-size:var(--fs-5)}
#carry .ct{color:var(--frost-dim);font-weight:600;flex-basis:100%;text-align:center}
/* 제목은 한 줄, 단추 둘은 그 아래 나란히 — 폰에서 "코드 넣기" 만 혼자 아랫줄로 떨어졌다 */
#carry .btn{padding:6px 12px;font-size:var(--fs-5)}
#carrycode{font-family:var(--mono,monospace);font-size:var(--fs-3);font-weight:800;
  letter-spacing:.18em;color:var(--amber);user-select:all;cursor:text}
/* 카드 위 한 줄 — 왼쪽에 이어하기 · 새로 시작, 오른쪽에 오늘 · 내일.
   나란히 두면 두 줄이 한 줄이 되어 카드를 그만큼 덜 밀어 내린다. */
#gorow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px;margin-top:12px}
/* order 11 — 같은 줄의 #goany(9) · #goasmr(10) 뒤에 선다. 기본값 0 이면 맨 앞으로 가
   [오늘의 도전][랜덤 여정][ASMR 자동] 이 됐다. 순서는 마크업이 아니라 이 값이 정한다. */
/* 같은 줄의 두 단추와 같은 알약으로 — 전에는 두 줄 세로(radius 14)라 혼자 두껍고
   모서리도 달라 겉돌았다. 두 글을 가로로 눕히고 단추와 같은 높이 · 같은 둥글기를 준다.
   flex:0 1 auto 라 제 글만큼만 차지하고, 좁아서 안 들어가면 제 줄로 내려간다
   (두 단추처럼 1 1 0 을 주면 폰에서 셋이 같이 쪼그라들어 글이 뭉갠다). */
#daybox{order:11;display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:8px;flex:0 1 auto;box-sizing:border-box;
  padding:12px 20px;border-radius:999px;min-height:44px;
  background:rgba(183,240,190,.06);border:1px solid rgba(183,240,190,.18)}
/* 가로로 눕히면 두 글이 붙어 보인다 — 가운뎃점으로 끊는다 */
#daybox #tmrw::before{content:'·';margin-right:8px;color:rgba(234,243,247,.35)}
#daybox:empty,#daybox:has(> :only-child[hidden]){display:none}
/* 줄간격 1.2 · 단추와 같은 글자 크기 — 알약 높이를 단추(44~47)에 맞춘다.
   전에는 --fs-4 에 기본 줄간격이라 글 한 줄이 36px 이었고, 여백 24 를 더해
   62px 이 나와 혼자 두꺼웠다. 가로로 눕혀도 글이 크면 소용없다. */
#daybox .hook{margin:0;white-space:nowrap;line-height:1.2}
#daybox #todaych{color:#CFF3D6;font-size:clamp(13px,3.2vmin,15px);font-weight:700}
#daybox #tmrw{color:var(--amber);font-size:clamp(12px,3vmin,14px);opacity:.9}
#startbtns{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
/* 나란히 설 때는 글자가 접히지 않게 — 한쪽만 두 줄이 되면 크기가 달라 보인다 */
#startbtns:has(#gonew:not([hidden])) #go,
#startbtns:has(#gonew:not([hidden])) #gonew{
  flex:1 1 150px;max-width:280px;white-space:nowrap;
  padding-left:clamp(16px,5vw,34px);padding-right:clamp(16px,5vw,34px);
  font-size:clamp(16px,4.2vmin,21px)}
/* 단추 셋을 한 줄에 넣어 보려다 375px 에서 이어하기와 새로 시작이 70px 로
   뭉개지고 줄이 455px 로 넘쳤다 — 알약 셋은 폰 한 줄에 안 들어간다.
   접히게 두되 넘치지만 않게 한다. 이제 카드 위에 서므로 두 줄이어도
   셋 다 첫 화면 안이다. */
#startbtns{max-width:100%}
#startbtns>button{max-width:100%;
  padding-left:clamp(20px,6vw,52px);padding-right:clamp(20px,6vw,52px)}
/* 이어하기와 새로 시작은 같은 크기다 — 한쪽만 작으면 고를 수 있는 것으로 안 보인다.
   무게만 다르게 둔다: 이어하기는 채운 버튼, 새로 시작은 테두리 버튼. */
#gonew{font-family:var(--ui);font-weight:800;font-size:clamp(18px,4.4vmin,22px);letter-spacing:.01em;
  padding:16px clamp(38px,11vw,52px);border-radius:999px;min-height:56px;
  background:rgba(255,255,255,.07);
  color:var(--frost);border:1px solid rgba(255,255,255,.22);cursor:pointer;
  transition:transform .14s cubic-bezier(.2,1.4,.4,1),color .14s,background .14s}
#gonew:hover{background:rgba(255,255,255,.12)}
#gonew:hover{transform:translateY(-1px);color:#fff}
#gonew:active{transform:scale(.97)}
#gonew:focus-visible{outline:2px solid var(--frost);outline-offset:3px}
#gonew[hidden]{display:none}
/* 랜덤 여정 — 갈래를 안 고르고 싶은 사람의 길. 두 버튼과 다투지 않게
   제 줄로 내려 눕히고 무게를 한 단계 낮춘다. */
#goany{flex:1 1 100%;order:9;margin:2px auto 0;max-width:340px;
  font-family:var(--ui);font-weight:700;font-size:clamp(14px,3.4vmin,16px);
  letter-spacing:.01em;padding:12px 24px;border-radius:999px;min-height:44px;
  background:rgba(255,255,255,.04);color:var(--frost-dim);
  border:1px solid rgba(255,255,255,.16);cursor:pointer;
  transition:transform .14s cubic-bezier(.2,1.4,.4,1),color .14s,background .14s,border-color .14s}
#goany:hover{background:rgba(255,255,255,.09);color:var(--frost);
  border-color:rgba(255,255,255,.34);transform:translateY(-1px)}
#goany:active{transform:scale(.97)}
#goany:focus-visible{outline:2px solid var(--frost);outline-offset:3px}
/* ASMR 자동 — 랜덤 여정과 같은 줄에 나란히. 이쪽이 '안 만지는 길' 이라
   먼저 눈에 띄면 안 되고, 없는 것처럼 숨어도 안 된다. 같은 무게로 둔다. */
/* 랜덤 여정 · ASMR 자동 · 오늘 상자가 한 줄에 선다. 좁으면 오늘 상자가 아래로 내려간다
   — 셋을 억지로 한 줄에 두면 폰에서 글자가 뭉갠다. */
/* align-items:stretch — 한 줄에 선 것들이 그 줄에서 가장 큰 것 높이로 늘어난다.
   center 로 두었더니 오늘 상자(44)만 단추(47)보다 낮아 혼자 떠 보였다. 숫자를 손으로
   맞추면 화면 크기가 바뀔 때마다 또 어긋난다 — 줄이 알아서 맞추게 둔다. */
#gorow2{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;
  gap:5px;width:100%;order:9;margin:2px 0 0}
/* 갈래 고르는 줄 — 랜덤과 자동이 함께 쓴다. 켜진 것만 굴러 나온다.
   기본은 전부 켬이라, 아무것도 안 건드린 사람에게는 없던 것과 같다. */
/* flex 안에서 width:100% 만으로는 제 줄을 못 얻는다 — 줄일 수 있으면
   줄여서 옆에 끼어 앉는다. PC 에서 '오늘의 도전' 옆으로 밀려 붙었다.
   flex-basis 를 100% 로 못 박고 줄지 말라고 해야 한 줄을 차지한다. */
/* flex 안에서 width:100% 만으로는 제 줄을 못 얻는다 — 줄일 수 있으면
   줄여서 옆에 끼어 앉는다. flex-basis 를 100% 로 못 박아도 max-width 가
   있으면 그 값이 줄바꿈 판단에 쓰여 또 옆에 붙는다(460px 라 자리가 남았다).
   폭을 제한하지 않고, 칸들만 가운데로 모은다. */
#pickrow{display:flex;flex:1 0 100%;flex-wrap:wrap;justify-content:center;gap:4px;
  width:100%;order:10;margin:3px 0 0}
#pickrow[hidden]{display:none}
#pickrow .pk{font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.01em;
  padding:5px 9px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);
  color:var(--muted-2);transition:background .14s,color .14s,border-color .14s}
#pickrow .pk[aria-pressed="true"]{background:rgba(234,243,247,.12);color:var(--frost);
  border-color:rgba(255,255,255,.30)}
#pickrow .pk:focus-visible{outline:2px solid var(--frost);outline-offset:2px}
#pickrow .pkall{border-style:dashed}
#goany,#goasmr{flex:1 1 0;min-width:0;max-width:none;margin:0}
/* margin 0 - 위 여백 2px 가 남아 있으면 stretch 로 늘어나도 이 단추만 2px 낮았다 */
#goasmr{order:10;margin:0;
  font-family:var(--ui);font-weight:700;font-size:clamp(14px,3.4vmin,16px);
  letter-spacing:.01em;padding:12px 18px;border-radius:999px;min-height:44px;
  background:rgba(255,255,255,.04);color:var(--frost-dim);
  border:1px solid rgba(255,255,255,.16);cursor:pointer;
  transition:transform .14s cubic-bezier(.2,1.4,.4,1),color .14s,background .14s,border-color .14s}
#goasmr:hover{background:rgba(255,255,255,.09);color:var(--frost);
  border-color:rgba(255,255,255,.34);transform:translateY(-1px)}
#goasmr:active{transform:scale(.97)}
#goasmr:focus-visible{outline:2px solid var(--frost);outline-offset:3px}
/* 자동 재생 속도줄 — 화면 맨 위 가운데. 무대 위에 떠 있되 눈에 안 거슬리게
   반투명하다. 잠들려고 켠 사람 앞이라 밝기를 낮게 잡았다. */
#autobar{position:fixed;top:max(8px,env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);z-index:60;display:flex;gap:4px;padding:4px;
  border-radius:999px;background:rgba(12,16,22,.72);backdrop-filter:blur(8px);
  border:1px solid rgba(160,200,230,.22)}
#autobar[hidden]{display:none}
#autobar .spb{font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:.01em;
  white-space:nowrap;line-height:1;
  padding:9px 12px;min-height:34px;border-radius:999px;border:0;cursor:pointer;
  background:transparent;color:var(--muted-2);transition:background .14s,color .14s}
#autobar .spb:hover{color:var(--frost)}
#autobar .spb[aria-pressed="true"]{background:rgba(160,200,230,.18);color:var(--frost)}
#autobar .spb.stop{color:var(--muted-2);border-left:1px solid rgba(160,200,230,.18);
  border-radius:0 999px 999px 0;margin-left:2px}
#autobar .spb.stop:hover{color:#FFB35C}
#autobar .spb.tmr{border-left:1px solid rgba(160,200,230,.18)}
/* 어둡게 — 40초 동안 아무것도 안 만지면. 막은 손을 안 받는다(pointer-events:none).
   속도 줄은 막 위에 둔다 — 어두운 데서 멈춤·타이머를 찾을 수 있어야 한다. */
body.autoplay::after{content:'';position:fixed;inset:0;background:#000;opacity:0;
  pointer-events:none;z-index:30;transition:opacity 1.6s ease}
body.autodim::after{opacity:.62}
body.autoplay #autobar{z-index:40}
@media (prefers-reduced-motion:reduce){body.autoplay::after{transition:none}}
#autobar .spb:focus-visible{outline:2px solid var(--frost);outline-offset:2px}
/* 자동일 때는 점수·온도를 걷는다.

   속도줄을 맨 위에 띄웠더니 점수판·온도계와 겹쳐 글자 위에 글자가 얹혔다.
   비켜 놓을 자리를 찾다가, 애초에 저 둘이 이 모드에서 할 일이 없다는 것을
   알았다 — 자동으로 번 점수는 멈추면 되돌리고 기록에도 안 남으니 보여 줄
   까닭이 없고, 온도는 손으로 얼릴 때 보는 것이다. 손을 안 대고 듣는
   동안에는 볼 하나와 속도줄만 남는 것이 맞다. 만지면 곧 돌아온다. */
body.autoplay #top{opacity:0;pointer-events:none}
/* 자동으로 듣는 동안에는 광고를 안 띄운다 — "광고 없는 ASMR 듣기" 가 이 모드의
   약속이다. 지금은 관리 화면에서 광고가 꺼져 있어 안 보이지만, 켜는 날 이
   줄이 없으면 잠들기 전 듣던 화면 아래에 광고가 뜬다. */
body.autoplay #adbar{display:none!important}
#top{transition:opacity .5s ease}
/* 자동으로 노는 동안은 화면 테두리가 아주 천천히 숨을 쉰다 — 켜져 있다는
   것을 알리되, 잠들려고 켠 사람의 눈을 찌르지 않을 만큼만. */
body.autoplay #stage::after{content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(160,200,230,.16);
  animation:autobreath 5.5s ease-in-out infinite}
@keyframes autobreath{0%,100%{opacity:.30}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){body.autoplay #stage::after{animation:none;opacity:.5}}
body.autoplay #asmrbtn{background:rgba(160,200,230,.16);color:var(--frost);
  border-color:rgba(160,200,230,.42)}
#go:hover{transform:translateY(-2px) scale(1.03)}
#go:active{transform:scale(.97)}
#go:focus-visible{outline:2px solid var(--frost);outline-offset:4px}
#credit{position:static;font-size:11px;letter-spacing:.13em;color:var(--muted-2);
  text-transform:uppercase;margin-bottom:8px}

@media (max-width:640px){
  #ui{padding:max(11px,env(safe-area-inset-top)) max(11px,env(safe-area-inset-right)) max(11px,env(safe-area-inset-bottom)) max(11px,env(safe-area-inset-left))}
  #score{font-size:26px}
  #combo{top:16%;padding:7px 17px;border-radius:15px}
  #thermo{padding:9px 11px}
  #tmeta{min-width:76px}
  /* 76px 칸에 13px 로 "부드럽게 눌린다" 를 넣으니 끝 글자 하나만 다음 줄로 떨어졌다.
     칸을 넓히는 대신 두 줄로 고르게 끊는다 — 온도 숫자와 높이를 맞춰야 한다. */
  #tstate{font-size:12px;line-height:1.24;text-wrap:balance;word-break:keep-all}
  /* 토스트 자리를 vmin 으로 잡았더니 세로로 긴 화면에서는 볼 위에 그대로 얹혔다.
     글씨 위에 글씨가 겹쳐 둘 다 안 읽힌다. HUD 아래 빈 자리로 내린다. */
  #toast{top:114px;transform:translate(-50%,-8px)}
  #toast.on{transform:translate(-50%,0)}
  #thint{display:none}
  /* 힌트 알약은 FEVER 줄 바로 위에 붙인다. vmin 으로 잡은 자리(50% + 27vmin)가 키 640 폰에서
     FEVER 줄과 단추 칸 윗줄을 덮었다(410~438px, FEVER 401~426, 단추 432~). */
  #howline{top:auto;bottom:calc(var(--docktop,150px) + 38px)}
  #feverwrap{top:auto;bottom:calc(var(--docktop,150px) + 6px);width:min(230px,64vw)}   /* 단추 칸 바로 위 — p5 가 --docktop 을 잰다 */
  /* 좁은 화면에서 세로가 너무 길어 제목이 화면 밖으로 밀렸다 —
     설명은 줄이고 칸은 촘촘히. 시작 버튼까지 한 화면에 들어와야 한다. */
  #howto{grid-template-columns:repeat(3,minmax(0,1fr));max-width:360px;gap:6px}
  .how{padding:8px 6px;gap:2px}
  .how .k{font-size:12.5px}
  .how .d{font-size:10px;line-height:1.35}
  /* 좁은 화면에서는 기존 셋은 한 줄씩, 새 넷은 두 칸씩 붙여 둔다 */
  #branches{grid-template-columns:repeat(2,minmax(0,1fr));max-width:380px;gap:6px}
  #branches > .branch{grid-column:span 2}
  #branches > .branch.fresh{grid-column:span 1}
  #branches > .branch.any{grid-column:1/-1}
  /* 좁은 화면에서도 다른 새 갈래와 나란히 — 두 칸씩 세 줄이 된다 */
  #branches > .branch.newbr{grid-column:span 1}
  .branch.newbr{padding:9px 7px}
  .branch.newbr .bn{font-size:15px}
  .branch.newbr .bd{display:none}
  .branch.fresh{flex-direction:column;align-items:center;padding:9px 7px}
  .branch.fresh .bd{display:none}
  .branch .be{font-size:9px;letter-spacing:.13em}
  .branch{flex-direction:row;flex-wrap:wrap;justify-content:center;
    align-items:baseline;gap:2px 7px;padding:9px 11px}
  .branch .bn{font-size:15px}
  .branch .bd{font-size:11px;width:100%;line-height:1.35}
  #start{gap:10px}
  #start h1{font-size:clamp(38px,13vw,58px)}
  #credit{display:none}
  #biz{font-size:9.5px;line-height:1.5}
  #start{gap:12px}
  /* 좁은 화면에서는 설명 두 줄이 제목을 밀어낸다. 남길 한 마디는 후킹 쪽이다 */
  #start .lede{display:none}
  #start .nonet{font-size:11px;padding:3px 9px;margin-top:-6px}
  #start .hook{font-size:13.5px;line-height:1.65;max-width:30ch;margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.06s !important}
}


/* ═══ 한 화면 — 랜딩과 게임판을 하나로 (2026-09-22) ═══
   위에 열둘 · 아래 아홉 · 그 위에 랜딩 스물이 있었다. 카메라 앱처럼 만든다:
   콘텐츠(볼)가 화면 전체, 위는 점수 한 줄과 온도 알약, 아래는 셔터 줄
   (냉동 · 다음 볼 · 더보기)과 갈래 칩 한 줄. 나머지는 더보기 서랍으로.
   전부 html.cam 아래에만 걸어 두어, 그 클래스 하나를 빼면 예전으로 돌아간다. */
/* cam 윗줄: 점수는 왼쪽, 온도 알약과 '처음 화면' 은 오른쪽에 나란히 */
html.cam #top{align-items:center;gap:8px}
html.cam #scorebox{margin-right:auto;flex-direction:row;align-items:baseline;gap:9px;padding:4px 6px;
  background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html.cam #score{font-size:22px}
html.cam #medals,html.cam #best,html.cam #tally{display:none}
/* 동접과 누적 플레이는 남긴다 — 사람이 있다는 것과 얼마나 놀았는지가
   이 화면에서 가장 먼저 눈에 들어와야 할 둘이다 */
html.cam #subrow{margin-top:2px;gap:9px;font-size:11.5px}
html.cam #scorebox{flex-wrap:wrap}
#plays{display:flex;align-items:center;gap:4px;opacity:.78}
#plays[hidden]{display:none}
#plays i{width:6px;height:6px;border-radius:99px;background:var(--amber);
  box-shadow:0 0 5px rgba(255,179,92,.7)}
#plays b{font-family:var(--mono);font-weight:600;color:var(--frost)}
#plays em{font-style:normal;letter-spacing:.04em;color:var(--muted)}
/* 누적 접속 — 판째 옆에 같은 모양으로. 점은 하늘색(동접 초록 · 판째 호박색과 가른다) */
#visits{display:flex;align-items:center;gap:4px;opacity:.78}
#visits[hidden]{display:none}
#visits i{width:6px;height:6px;border-radius:99px;background:var(--ice);
  box-shadow:0 0 5px rgba(127,216,255,.6)}
#visits b{font-family:var(--mono);font-weight:600;color:var(--frost)}
#visits em{font-style:normal;letter-spacing:.04em;color:var(--muted)}
html.cam #bestrow{margin:0;font-size:11.5px}
html.cam #thermo{padding:6px 12px;gap:7px;align-items:center;border-radius:999px}
html.cam #tube,html.cam #tstate,html.cam #thint{display:none}
html.cam #tmeta{display:flex;align-items:center;gap:7px}
html.cam #tmeta::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--amber)}
html.cam #thermo.cold #tmeta::before{background:var(--ice)}
html.cam #tval{font-family:var(--mono);font-size:12.5px}
html.cam #tophome{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:999px;padding:0;cursor:pointer;
  color:var(--frost-dim);background:var(--panel);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html.cam #tophome:hover{color:var(--frost);border-color:var(--line-2)}
html.cam #tophome:active{transform:scale(.94)}
html.cam #tophome:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
#tophome[hidden]{display:none}

/* 셔터 줄 — 다음 볼이 셔터, 냉동과 더보기가 양옆 작은 원.
   갈래가 주는 단추(도장 · 파기)는 그때만 옆에 선다. */
/* #ui 는 space-between 이라 칩 줄이 아이로 하나 더 서면 독이 가운데로 뜬다.
   auto 여백이 남는 공간을 먼저 먹으므로 독과 칩이 함께 바닥에 앉는다. */
/* #more 가 #dock 안이라 서랍을 열면 같은 줄에 옆으로 퍼져 셔터를 끝으로 밀었다.
   wrap 을 허락하고 서랍에 한 줄을 통째로 주어 셔터 줄 '위' 에 판으로 뜨게 한다. */
/* #coach(코치 · z-index 5)가 서랍 위를 덮어 첫 줄이 '건너뛰기' 뒤로 잘렸다.
   독을 그 위로 올린다 — position 을 주어야 z-index 가 선다. */
html.cam #dock{gap:22px;flex-wrap:wrap;padding:0 0 4px;margin-top:auto;row-gap:10px;position:relative;z-index:8}
html.cam #more:not([hidden]){flex:0 0 100%;width:100%;order:-10;justify-content:center;gap:6px;
  box-sizing:border-box;border-radius:16px;
  /* max-width 로 좁히면 남는 자리에 셔터가 끼어 올라온다(PC 에서 823px 밀렸다).
     칸은 꽉 채우고 안쪽 여백으로만 가운데를 좁힌다. */
  padding:10px max(12px,calc((100% - 920px) / 2));
  background:var(--panel);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  max-height:min(46vh,380px);overflow-y:auto;overscroll-behavior:contain}
/* 볼 이름 알약과 ♡ 는 서랍 첫 줄로 — 셔터 줄에는 안 선다 */
html.cam #more #modebtn,html.cam #more #favbtn{order:-2}
html.cam #nextball{order:2;flex:0 0 76px;width:76px;min-width:76px;height:76px;box-sizing:border-box;
  padding:0;border-radius:999px;position:relative;
  font-size:0;color:transparent;border:4px solid var(--amber);background:rgba(8,11,16,.5);
  box-shadow:0 8px 30px rgba(255,179,92,.28)}
html.cam #nextball::after{content:"";position:absolute;inset:6px;border-radius:999px;background:var(--amber)}
html.cam #nextball.lead::after{animation:shutterPulse 1.4s ease-in-out infinite}
/* 넓은 화면: 힌트 알약이 vmin 자리(50% + 27vmin)라 셔터 윗머리를 덮었다 — 단추 칸 위에 붙인다(폰은 아래 미디어 규칙) */
@media (min-width:641px){ html.cam #howline{top:auto;bottom:calc(var(--docktop,150px) + 16px)} }
/* 하얀 ▶ — 원만 있으면 무슨 단추인지 몰랐다 */
html.cam #nextball::before{content:"";position:absolute;z-index:1;left:50%;top:50%;width:0;height:0;pointer-events:none;
  border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent #fff;
  transform:translate(-36%,-50%);filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
@keyframes shutterPulse{50%{transform:scale(.88)}}
html.cam #moldbtn{order:0}
html.cam #freeze{order:1}
html.cam #moretog{order:3}
html.cam #sandbtn{order:4}
html.cam #freeze,html.cam #moretog,html.cam #moldbtn,html.cam #sandbtn{flex:0 0 52px;width:52px;min-width:52px;height:52px;box-sizing:border-box;padding:0;
  border-radius:999px;justify-content:center;font-size:11px;letter-spacing:-.01em}
/* 냉동: '냉동' 과 쿨다운 칸(.cd, min-width 20px)이 한 줄에 서서 52px 원을 넘쳐 글자가 겹쳤다.
   세로로 쌓고 쿨다운은 비어 있으면 안 그린다. */
html.cam #freeze{flex-direction:column;gap:1px;line-height:1}
html.cam #freeze .cd{min-width:0;font-size:9px;line-height:1;text-align:center;opacity:.9}
html.cam #freeze .cd:empty{display:none}
/* ⋯ 아이콘은 '무엇이 열리나' 를 안 알려준다 — '메뉴' 글자로(setMore 가 T(menu)/T(menuClose) 를 넣는다).
   그래서 이 단추만 원이 아니라 알약이다. */
html.cam #moretog{flex:0 0 auto;width:auto;min-width:52px;height:52px;padding:0 16px;border-radius:999px;
  font-size:13.5px;font-weight:700}
html.cam #moretog::before{display:none}
html.cam #moretog::before{content:"\22EF";font-size:22px;line-height:1;color:var(--frost-dim)}
html.cam #moretog::after{display:none}
/* 옮겨 간 단추들은 서랍 안에서 보통 크기로 */
html.cam #more #styles,html.cam #more #dexbtn,html.cam #more #mystbtn{order:-1}

/* 갈래 칩 줄 — 지금 갈래만 밝고, 나머지는 옅게. 좌우로 넘긴다. */
html.cam #chips{display:flex;gap:4px;align-items:flex-end;overflow-x:auto;scrollbar-width:none;
  margin:0 -16px;padding:2px 16px 2px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  pointer-events:auto;justify-content:safe center}   /* 넓으면 가운데(PC 에서 왼쪽에 몰려 오른쪽이 비었다), 넘치면 왼쪽부터 */
/* 갈래 뒤의 다른 놀이 칩 — 개수가 없어 한 줄이고, 앞에 가는 금 하나 */
.chip.sep{min-width:0;width:1px;padding:0;margin:0 4px;align-self:stretch;background:rgba(234,243,247,.14);opacity:1;cursor:default;border-radius:0}
.chip.x{justify-content:center;min-height:44px;opacity:.6}
.chip.x .cn{font-size:12.5px}
html.cam #chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:56px;
  padding:7px 12px;border-radius:999px;border:1px solid transparent;background:none;
  color:var(--frost);font-family:var(--ui);cursor:pointer;opacity:.5;scroll-snap-align:center;
  transition:opacity .15s ease,background .15s ease,border-color .15s ease}
.chip .cn{font-size:13px;font-weight:700;white-space:nowrap}
.chip .cc{font-family:var(--mono);font-size:10px;color:var(--rc,var(--muted))}
.chip:hover{opacity:.8}
.chip[aria-current="true"]{opacity:1;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.chip[aria-current="true"]{background:color-mix(in srgb,var(--rc) 14%,transparent);
  border-color:color-mix(in srgb,var(--rc) 45%,transparent)}
.chip[aria-current="true"] .cn{font-size:15px;font-weight:800}
.chip:focus-visible{outline:2px solid var(--frost);outline-offset:2px}

@media (prefers-reduced-motion:reduce){ html.cam #nextball.lead::after{animation:none} }

/* pVugc.js — 전에는 실행 중에 <style> 로 붙였다(CSP 가 막았다) */
.ugccard .lk{position:absolute;right:4px;bottom:4px;border:0;background:none;color:rgba(255,255,255,.45);cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}
.ugccard .lk[aria-pressed="true"]{color:#FF7A9A;cursor:default}
.ugccard .by{align-self:flex-start;max-width:100%;border:0;background:none;margin:0;padding:3px 0;font:inherit;font-size:11.5px;font-weight:700;color:var(--amber);text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ugccard button.by:hover,.ugccard button.by:focus-visible{text-decoration:underline}
.ugccard span.by{cursor:inherit;color:inherit;font-weight:400;opacity:.6}

/* pYsocial.js — 전에는 실행 중에 <style> 로 붙였다(CSP 가 막았다) */
#dareend .rk{font-size:14px;font-weight:800;color:#B7F0BE;margin:-6px 0 12px}
#dareend .rk:empty{display:none}
.socrank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.socrank li{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto 3.6em;gap:8px;align-items:center;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);font-size:14px}
.socrank li.me{border-color:var(--amber);background:rgba(255,179,92,.12)}
.socrank .r{font-family:var(--mono);opacity:.7;text-align:right}
.socrank .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.socrank .s{color:var(--amber);font-weight:800}
.socrank .b{font-size:12px;opacity:.6;text-align:right}
.socmsg{font-size:13px;opacity:.75;margin:0}

/* pZinner.js — 전에는 실행 중에 <style> 로 붙였다(CSP 가 막았다) */
.inxbar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.inxbar > i{display:block;height:100%;border-radius:inherit;background:var(--amber)}
.ugccard.inxcard{padding-right:10px;cursor:default}
.inxsw{width:40px;height:40px;border-radius:50%;flex:none;box-shadow:inset 0 -3px 7px rgba(0,0,0,.28)}
.inxsw.plain{background:radial-gradient(circle at 35% 30%,#eef2f6,#8e9aa6)}
.inxsw.none{box-shadow:none;border:1.5px dashed rgba(255,255,255,.22)}
.ugccard.inxoff .nm{color:var(--muted-2);font-weight:700}


#rankform{display:flex;gap:8px;margin-bottom:12px}
#nickin{flex:1;min-width:0;padding:10px 13px;border-radius:var(--r-m);border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--frost);font-family:var(--ui);font-size:var(--fs-2)}
#nickin::placeholder{color:var(--muted-2)}
#nickin:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:transparent}
#ranklist{overflow-y:auto;display:flex;flex-direction:column;gap:3px;min-height:120px}
.row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;
  padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.028)}
.row.me{background:rgba(255,179,92,.12);box-shadow:inset 0 0 0 1px rgba(255,179,92,.3)}
.row .rk{font-family:var(--mono);font-size:var(--fs-2);color:var(--muted);text-align:right}
.row.top .rk{color:var(--amber)}
.row .who{font-size:var(--fs-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .who i{font-style:normal;font-size:10px;color:var(--amber);margin-left:6px}
.row .sc{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-3);font-weight:600}
.empty{color:var(--muted);font-size:var(--fs-2);text-align:center;padding:28px 0}
#langsel{padding:9px 10px;border-radius:var(--r-m);border:1px solid var(--line);
  background:var(--panel);color:var(--frost);font-family:var(--ui);font-size:var(--fs-2);
  font-weight:600;cursor:pointer;pointer-events:auto}
#langsel:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (max-width:640px){ #collect{display:none} }
/* 계속 쓰기 — 켜면 볼이 바뀌어도 내 사진이 따라온다 */
.keeptog{display:block;margin:0 2px 10px;width:100%}
.keeptog.on{border-color:var(--ice);color:var(--ice);background:rgba(127,216,255,.10)}
/* 아직 만든 게 없을 때 — 빈 칸만 있으면 여기서 뭘 하는지 알 수 없다 */
.emptytip{margin:10px 2px;padding:12px 14px;border-radius:12px;text-align:center;
  border:1px dashed var(--line);background:rgba(150,178,200,.05);
  font-size:13px;line-height:1.6;color:var(--muted)}
/* 내 사진으로 만들 수 있다는 걸 모르는 사람이 많다 — 버튼 옆에 한 번 알려 준다 */
#customwrap{position:relative;display:inline-flex}
/* 단추 왼쪽에 붙인다 — 가운데에 맞추면 단추가 화면 왼쪽 끝 12~30px 에 있어 118px 말풍선이 밖으로 나갔다 */
#customtip{position:absolute;left:0;bottom:calc(100% + 8px);transform:none;
  white-space:nowrap;font-size:11.5px;font-weight:600;letter-spacing:-.01em;
  color:#0A0E14;background:var(--ice);padding:5px 10px;border-radius:8px;
  pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.4);animation:tipbob 2.4s ease-in-out infinite}
#customtip[hidden]{display:none}
#customtip::after{content:'';position:absolute;left:24px;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ice)}
@keyframes tipbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* 폭 360 에서 독일어 한 줄(약 180px)이 단추(가운데 x=65) 기준으로 가운데 놓여 왼쪽 화면 밖으로 나갔다 — 폰에선 두 줄로 */
#customtip{white-space:normal;width:max-content;max-width:118px;text-align:center;line-height:1.25;word-break:keep-all}
@media (max-width:640px){ #customtip{font-size:10.5px;padding:4px 8px} }
/* 점수 화면의 공유 줄 — 기록을 본 그 자리에서 바로 자랑한다 */
#rankshare{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
#rankshare .rsh{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;
  border-radius:10px;border:1px solid var(--line-2);background:rgba(234,243,247,.05);
  color:var(--frost-dim);font-family:var(--ui);font-size:12.5px;font-weight:700;
  cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .14s ease}
#rankshare .rsh:hover{background:rgba(234,243,247,.11)}
#rankshare .rsh i{width:7px;height:7px;border-radius:999px;display:block}
@media (max-width:640px){ #rankshare .rsh{font-size:11.5px;padding:6px 9px} }
/* 훈장 — 500만점마다 하나. 점수를 자르는 대신 자리를 바꿔 담는다 */
.scorerow{display:flex;align-items:baseline;gap:8px}
#medals{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);
  font-size:14px;font-weight:700;color:#FFD98A;
  background:rgba(255,190,90,.13);border:1px solid rgba(255,190,90,.3);
  padding:1px 7px;border-radius:999px;line-height:1.5}
#medals[hidden]{display:none}
#medals .ic{font-size:12px}
@media (max-width:640px){ #medals{font-size:12px;padding:0 5px} }
#adland{width:min(468px,92vw);margin:2px auto 0;position:relative;min-height:0}
#adland[hidden]{display:none}
#adland img{max-width:100%;height:auto;max-height:90px;border-radius:10px;display:block;margin:0 auto}
#adland .adtag{position:absolute;right:5px;top:5px;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;color:var(--muted-2);background:rgba(8,11,16,.6);
  padding:1px 4px;border-radius:4px}
#adbar{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:6px;pointer-events:auto;max-width:min(728px,96vw)}
#adbar[hidden]{display:none}
#adbar img{max-width:100%;height:auto;max-height:60px;border-radius:8px;display:block}
#adbar .adtag{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--muted-2);
  border:1px solid var(--line);border-radius:4px;padding:1px 4px;flex:0 0 auto}
body.hasad #dock{margin-bottom:64px}

#sharesheet{position:absolute;inset:0;z-index:6;display:flex;align-items:flex-end;
  justify-content:center;padding:14px 14px max(14px,env(safe-area-inset-bottom));background:rgba(4,7,11,.66);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto}
#sharesheet[hidden]{display:none}
#sharegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.shitem{display:flex;align-items:center;gap:9px;padding:12px 13px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--frost);
  font-family:var(--ui);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none}
.shitem:hover{border-color:var(--line-2)}
.shitem:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.shitem .dot{width:22px;height:22px;border-radius:7px;flex:0 0 auto;display:grid;
  place-items:center;font-size:11px;font-weight:700;color:#0B0F14}
#camsheet{position:absolute;inset:0;z-index:6;display:flex;align-items:flex-end;
  justify-content:center;padding:14px 14px max(14px,env(safe-area-inset-bottom));background:rgba(4,7,11,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto}
#camsheet[hidden]{display:none}
/* 서랍은 늘 조작 위에 선다. 한 화면(cam)에서 독이 z 8, 영상 버튼이 z 12 라
   z 5·6 이던 서랍들 위로 찍기·냉동·셔터·메뉴·깎기 동그라미가 떠서 공유 칸을
   가리고 눌러도 뒤의 게임이 받았다. 서랍 다섯과 도전 결과 판을 한 층(20)에 모은다 —
   독(8)·영상 버튼(12) 위, 자동 재생 어둠막(30)·속도줄(40)·ugc(60)·토스트(70) 아래.
   도전 결과 판(#dareend, z 6)도 메뉴를 연 채 60초가 끝나면 메뉴 단추 밑에 깔렸다. */
#sheet,#ranksheet,#dexsheet,#sharesheet,#camsheet,#dareend{z-index:20}
#camsheet .sheetbox{gap:12px}
.camnote{font-size:13px;color:var(--frost-dim);margin:0 0 12px;line-height:1.7}
.camrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
/* 공유 서랍 격자(칸 104px) 안의 한 줄은 칸 하나에 들어가 '📊 Meine Rekordkarte' 가 세 줄로 접혔다 — 한 줄을 다 쓴다 */
#sharegrid .camrow{grid-column:1/-1}
.camrow .btn.primary{background:linear-gradient(180deg,#FFC97E,#E08B2C);color:#1A1005;
  border-color:transparent}
label.btn{cursor:pointer}
.camstage{width:min(300px,68vw);aspect-ratio:1;margin:0 auto 12px;border-radius:999px;
  overflow:hidden;background:#0B1016;box-shadow:inset 0 0 0 1px var(--line-2)}
#camvid{width:100%;height:100%;object-fit:cover;display:block}
#campre{width:100%;height:100%;background-size:cover;background-position:center}
.camgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.camcell{position:relative}
.camthumb{width:100%;aspect-ratio:1;border-radius:14px;border:1px solid var(--line);
  background-size:cover;background-position:center;cursor:pointer;padding:0;
  position:relative;overflow:hidden}
.camthumb:hover{border-color:var(--amber)}
.camthumb.on{border-color:var(--amber);box-shadow:0 0 0 2px rgba(255,179,92,.35)}
/* 어느 갈래로 만든 사진인지 썸네일에 남긴다 */
.camtag{position:absolute;left:0;right:0;bottom:0;padding:3px 4px;
  font-size:10px;line-height:1.25;font-weight:600;text-align:center;color:#0B0F14;
  background:rgba(178,226,255,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camtag.r-crush{background:rgba(255,179,92,.92)}
.camtag.r-shape{background:rgba(168,238,206,.92)}
.camdel{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--panel-solid,#0E141C);color:var(--muted);
  font-size:11px;line-height:1;cursor:pointer;padding:0}
/* 내가 만든 것을 친구에게 — 이미지 파일로만 나간다. 서버에 올리지 않는다. */
.camsend{position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(10,14,20,.72);color:var(--ice);
  font-size:13px;line-height:1;cursor:pointer;padding:0;display:flex;
  align-items:center;justify-content:center}
.camsend:hover{background:rgba(127,216,255,.18)}
.camdel:hover{color:var(--fever);border-color:var(--fever)}
/* 손끝 자리는 40px — 22px 동그라미라 사진을 누르려다 지우기를 눌렀다 */
.camdel::after,.camsend::after{content:'';position:absolute;inset:-7px}
/* 도감 · 선반 사진을 길게 누르면 iOS 가 '이미지 저장' 창을 띄웠다 */
.dexcell img,.sc img,.ugccard img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* 순수 모드 — 점수·콤보·피버를 감추고 소리와 촉감만 남긴다 */
#ui.pure #scorebox, #ui.pure #combo, #ui.pure #feverwrap{display:none}
/* 냉동을 처음 배우는 순간에만 버튼이 숨 쉰다 */
@keyframes teachpulse{0%,100%{box-shadow:0 0 0 0 rgba(127,216,255,0)}
  50%{box-shadow:0 0 0 6px rgba(127,216,255,.26)}}
.btn.teach{border-color:#7FD8FF;color:#CFF0FF;animation:teachpulse 1.25s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .btn.teach{animation:none} }
#camsheet .err{color:var(--fever);font-size:var(--fs-1);min-height:18px;margin-bottom:8px}
#biz{position:static;max-width:46ch;margin:0 auto;text-align:center;
  font-size:11.5px;line-height:1.8;color:var(--muted);letter-spacing:.005em}
#biz a{color:var(--muted-2);text-decoration:none;padding:10px 4px}
#biz a:hover{color:var(--muted)}
/* 키가 작은 폰(640 이하) — 공 아래 자리가 42px 뿐이라 FEVER 글자와 힌트가 함께 못 들어간다.
   글자는 빼고 막대만 두고, 힌트를 막대 바로 위로 내린다. */
@media (max-width:640px) and (max-height:700px){
  #feverlbl{display:none}
  #howline{bottom:calc(var(--docktop,150px) + 16px)}
}
/* 좁은 폰(400 이하) — 점수 칸이 233px 를 먹어 온도 칸이 93px 로 밀렸고 "22.0°C" 가 잘렸다
   (320 에서는 "22 · Pres softl"). 온도 칸은 제 폭을 지키고 점수 칸이 줄어든다. */
@media (max-width:400px){
  #top{gap:8px}
  #scorebox{flex:1 1 auto;min-width:0;padding:9px 12px 10px}
  #thermo{flex:0 0 auto;gap:8px;padding:8px 9px}
  #tmeta{min-width:0}
  #tval{font-size:17px}
  #tstate{font-size:11px;overflow-wrap:anywhere}
  #tally{gap:6px;flex-wrap:wrap}
}

@media (max-width:640px){ #biz{font-size:10.5px;line-height:1.75} }
/* 갈래 허브 링크 — 검색으로 오브젝트 쪽에 닿는 문. 눈에 거슬리지 않게 작게 */
#seonav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin:14px auto 6px;
  max-width:640px;font-size:12px;opacity:.7}
#seonav b{font-weight:600;opacity:.8}
#seonav a{color:inherit;text-decoration:none}
#seonav a:hover{text-decoration:underline}
/* 손가락으로 누르는 기기에서는 손끝 크기를 32px 로 — 갈래 칩 29px · 아래 갈래 링크 18px 이었다.
   마우스 쪽 배치는 건드리지 않는다. */
@media (pointer:coarse){
  #pickrow .pk{min-height:44px;min-width:44px}   /* 손끝 44px — 돌아온 사람 랜딩을 재기 시작하고서야 32px 인 것을 알았다(짧은 이름은 폭 43) */
  #seonav{gap:0 4px}
  #seonav a{display:inline-flex;align-items:center;min-height:32px;padding:0 6px}
  #seonav b{display:inline-flex;align-items:center;min-height:32px}   /* 제목도 같은 줄 높이 — 혼자 위로 떴다 */
}
/* ── 기종별 보강 (2026-09-13 · 22기종 화면 검사 + 코드 검수) ──────────────── */
@media (pointer:coarse){
  /* 손끝 44px — 화질 2D·3D·실사 35 · ♡ 40 · 아래 줄 43 이었다. 화질 칸은 바깥 여백을 줄여 줄 높이를 거의 그대로 */
  #dock .btn, #favbtn, .sty{min-height:44px}
  #styles{padding-top:2px;padding-bottom:2px}
  /* iOS 는 16px 보다 작은 입력칸을 누르면 화면을 키운 채 둔다(닉네임 14 · 볼 이름 15 · 말 고르기 13~14) */
  input, select, textarea, #nickin, .ugcin, #langsel, #langsel2{font-size:16px}
}
/* 빨리 두 번 누르는 단추 — iOS 두 번 탭 확대를 막는다 */
.btn, .ballnav, #autobar button, .sty{touch-action:manipulation}
html{overscroll-behavior:none}
/* 11px 아래 글씨 — Fever 10 · 갈래 표 10.5 · LANGUAGE 9.5 · 깬 수 10 */
#feverlbl{font-size:11px}
.langlab, #langpick .langlab{font-size:11px}
#modebtn .br{font-size:11px}
#tally b{font-size:11px}
@media (max-width:640px){
  #subrow{font-size:11px}
  /* 폴드 접힘(280) · 320 폰에서 '건너뛰기' 가 볼 옆 › 를 덮었다 — 화살표 칸만큼 안으로 */
  #coach .skip{right:56px}
}
/* 도감 서랍도 홈 막대 위로(공유 · 카메라 서랍과 같게) */
#dexsheet{padding-bottom:max(16px, env(safe-area-inset-bottom))}
/* iPad 홈 화면 앱 — 위 칸이 상태 줄 밑에 깔렸다(폰은 아래로 옮겨 가 괜찮다) */
@media (min-width:641px){
  #feverwrap{top:calc(18px + env(safe-area-inset-top, 0px))}
  #dare, #bossbar{top:calc(46px + env(safe-area-inset-top, 0px))}
  #coach .skip{top:calc(128px + env(safe-area-inset-top, 0px))}
}
/* 서랍이 열려 있으면 가운데 알림을 감춘다 — 볼 만들기 서랍의 이름 칸 위에 '팁 …' 글자가 그려졌다 */
body:has([role=dialog][aria-modal="true"]:not([hidden])) #toast,
body:has(.ugcsheet:not([hidden])) #toast{visibility:hidden}
/* 더보기를 펼치면 단추 칸이 볼 위로 올라온다 — 그 자리의 안내 줄 · 말풍선이 단추 글자와 포개졌다 */
#ui:has(#more:not([hidden])) #howline, #ui:has(#more:not([hidden])) #customtip{visibility:hidden}
/* 첫 30초 한마디와 같은 말이 아래 줄에 또 — ASMR 자동 중에는 '두드려' 가 '만지면 멈춥니다' 와 반대로 말했다 */
body:has(#coach:not([hidden])) #howline, body.autoplay #howline{visibility:hidden}
/* 손끝 44px — 나머지(볼 옆 ‹ › 40 · 모두 보기 33 · 말 고르기 32 · 목록 탭 32 · 도감 칩 32 · 순위 공유 31 · 자동 속도 34) */
@media (pointer:coarse){
  .ballnav{width:44px;height:44px}
  #firstall, #langsel2, .stab, #dexfilter button, #rankshare .rsh, #autobar button, #coach .skip{min-height:44px}
  #start.first #firstall, html.bbfirst #start #firstall{min-height:44px}   /* '#start.first .firstall' 이 32 로 눌러 두어 #firstall 만으로는 안 먹었다 */
  #favbtn{min-width:44px}
  #seonav a, #seonav b{min-height:44px}
  #seonav a{min-width:44px;justify-content:center}   /* '키캡' 처럼 짧은 이름은 폭이 33 이었다 */
  #biz a{display:inline-block;min-height:44px;line-height:24px}   /* 아래 전자우편 37 */
}
/* 마우스 — 아래 갈래 링크가 18px 높이였다. 24px 은 된다 */
@media (pointer:fine){ #seonav a{display:inline-flex;align-items:center;min-height:24px;padding:3px 4px} }   /* 대체 글꼴(display=optional)에서 22px 로 줄었다 */
#biz{font-size:11px}
/* 볼 목록 천여 칸 — 화면 밖 칸은 그리지 않는다(열기 1.8초 · 스크롤 16fps 였다) */
#modelist .mode{content-visibility:auto;contain-intrinsic-size:auto 56px}
/* 볼 목록 묶음 통째로 — 화면 밖 묶음은 스타일 · 레이아웃까지 건너뛴다(천여 칸의 첫 스타일 계산이 목록 열기 0.5초였다) */
#modelist .mgrid{content-visibility:auto;contain-intrinsic-size:auto 480px}
/* 첫 화면 밀림(CLS) — 앱이 뒤에 채우는 칸의 자리를 처음부터 잡는다 */
.branch .bc:empty::before{content:"\00a0"}
.branch .be:empty:not([hidden])::before{content:"\00a0"}
/* 갈래 카드의 영문 보조 줄 9 ~ 9.5px → 11px(11px 아래 글씨를 없앤 기준과 같게). 폰은 자간을 줄여 한 줄에 들게 */
.branch .be, .branch.newbr .be, .branch.any .be{font-size:11px}
.branch .nu{font-size:11px;letter-spacing:.08em}   /* NEW 딱지 8.5px */
@media (max-width:640px){ .branch .be, .branch.newbr .be{letter-spacing:.06em} }
#pickrow:empty{min-height:30px}
@media (pointer:coarse){ #pickrow:empty{min-height:44px} }
/* 폰에서는 칩을 한 줄로(옆으로 민다) — 말마다 두세 줄로 접혀 높이가 달라 미리 잡을 수가 없었다 */
/* 돌아온 사람 폰 — [이어하기][새로 시작](글자 안 꺾음 · 넓은 안쪽 여백)과 한 줄 칩 줄이 #gorow 를 화면보다 넓게 벌려
   단추가 양옆으로 잘렸다(390 에서 en 532px · ru 636px, 360 에서는 한국어도). 랜딩이 가운데 맞춤이라 줄 폭이 내용 폭을 따라갔다.
   줄 폭을 랜딩 폭에 묶고, 좁은 화면에서는 두 단추가 줄어들고 필요하면 두 줄로 */
#gorow{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
#startbtns, #gorow2, #pickrow{min-width:0;max-width:100%}
@media (max-width:640px){
  #startbtns:has(#gonew:not([hidden])) #go, #startbtns:has(#gonew:not([hidden])) #gonew{
    min-width:0;flex:1 1 0;padding-left:10px;padding-right:10px;white-space:normal;line-height:1.15}
  #gorow2 > button{min-width:0;padding-left:10px;padding-right:10px}
  /* 한쪽만 두 줄이 되면 크기가 달라 보였다(fr 320: 새로 시작 71 · 이어하기 56) — 한 줄의 단추는 같은 높이로 */
  #startbtns:has(#gonew:not([hidden])){align-items:stretch}
  #gorow2{align-items:stretch}
}
@media (max-width:640px){
  #pickrow{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:0 4px}
  #pickrow::-webkit-scrollbar{display:none}
  #pickrow .pk{flex:0 0 auto}
}
/* 아래 사업자 줄의 링크 — 글자 줄(inline)에 위아래 여백 10px 이 붙어 옆 줄 링크의 누르는 자리와 포갰다(전자우편 × 개인정보처리방침) */
#biz a{display:inline-block}
/* 아이폰 무음 안내 — '소리를 켜고' 밑 작은 한 줄 */
/* #soundask 가 가로 줄(flex)이라 옆에 붙어 본문이 두 줄로 눌렸다 — 제 줄로 내린다 */
#soundask{flex-wrap:wrap;justify-content:center}   /* 줄을 나누면 첫 줄이 왼쪽으로 쏠렸다 */
#mutehint{display:none;flex-basis:100%;width:100%;text-align:center;margin-top:5px;font-size:12px;font-weight:600;opacity:.72;line-height:1.45}
@supports (-webkit-touch-callout:none){ #mutehint{display:block} }
html.ios #mutehint{display:block}

/* ── 그림 아이콘 (2026-10-15) ───────────────────────────────────────────
   첫 화면 갈래 카드 · 보조 카드 · 기록 탭 줄 · 아래 칩이 글자뿐이라 밋밋했다.
   그림은 OpenAI 로 지어 assets/ui/ 에 두고(tools/ui-art.mjs), 빌드가 /ui/ 로 복사한다.
   게임 코드는 건드리지 않는다 — 이미 붙어 있는 data-branch · data-go 를 집어 CSS 로만 얹는다.
   그림이 안 오면(오프라인 첫 방문 등) 빈 칸만 남고 글자는 그대로다. */
.branch[data-branch="reveal"],.chip[data-branch="reveal"]{--ic:url(/ui/b-reveal.webp)}
.branch[data-branch="crush"],.chip[data-branch="crush"]{--ic:url(/ui/b-crush.webp)}
.branch[data-branch="shape"],.chip[data-branch="shape"]{--ic:url(/ui/b-shape.webp)}
.branch[data-branch="ice"],.chip[data-branch="ice"]{--ic:url(/ui/b-ice.webp)}
.branch[data-branch="cut"],.chip[data-branch="cut"]{--ic:url(/ui/b-cut.webp)}
.branch[data-branch="open"],.chip[data-branch="open"]{--ic:url(/ui/b-open.webp)}
.branch[data-branch="mix"],.chip[data-branch="mix"]{--ic:url(/ui/b-mix.webp)}
.branch[data-branch="key"],.chip[data-branch="key"]{--ic:url(/ui/b-key.webp)}
.branch[data-branch="sand"],.chip[data-branch="sand"]{--ic:url(/ui/b-sand.webp)}
.branch[data-branch="any"],.chip[data-branch="any"]{--ic:url(/ui/b-any.webp)}
.branch[data-branch="ugc"],.chip[data-go="ugc"]{--ic:url(/ui/b-ugc.webp)}
.branch[data-branch="dare"],.chip[data-go="dare"]{--ic:url(/ui/b-dare.webp)}
[data-go="custom"]{--ic:url(/ui/g-custom.webp)}
[data-go="mystery"]{--ic:url(/ui/g-mystery.webp)}
[data-go="blend"]{--ic:url(/ui/g-blend.webp)}
[data-go="season"]{--ic:url(/ui/g-season.webp)}
#mine [data-go="dex"]{--ic:url(/ui/m-dex.webp)}
#mine [data-go="shelf"]{--ic:url(/ui/m-shelf.webp)}
#mine [data-go="inner"]{--ic:url(/ui/m-inner.webp)}
#mine [data-go="hall"]{--ic:url(/ui/m-hall.webp)}
#mine [data-go="rank"]{--ic:url(/ui/m-rank.webp)}
#mine [data-go="perk"]{--ic:url(/ui/m-perk.webp)}
#mine [data-go="card"]{--ic:url(/ui/m-card.webp)}
/* 갈래 카드 — 이름 위에 그림. 누르면 살짝 튄다 */
html.cam .branch[data-branch]::before{content:"";flex:none;width:46px;height:46px;margin:-2px 0 1px;
  background:var(--ic) center/contain no-repeat;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));
  transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
html.cam .branch.fresh[data-branch]::before{width:38px;height:38px}
html.cam .branch.any[data-branch]::before{width:30px;height:30px;margin:0}
html.cam .branch[data-branch]:hover::before{transform:translateY(-2px) rotate(-6deg) scale(1.08)}
html.cam .branch[data-branch]:active::before{transform:scale(.9)}
/* 보조 카드(내 사진 · 미스터리 · 섞기 공방 · 시즌) — 글자 앞에 */
html.cam #brmore [data-go]::before{content:"";flex:none;width:28px;height:28px;
  background:var(--ic,none) center/contain no-repeat}
/* 좁은 칸은 그림을 글자 위에 — 옆에 두면 '내 사진으로 만들기' 가 세 줄로 눌렸다 */
html.cam #brmore [data-go]:not(.wide){flex-direction:column;gap:4px}
/* 넓은 줄: 모든 볼 고르기는 그림 없음, 시즌은 글자에 이미 이모지가 있어 겹친다 */
html.cam #brmore [data-go="modes"]::before,html.cam #brmore [data-go="season"]::before{display:none}
/* 기록 탭 줄 — 이름 앞에 */
html.cam #mine [data-go] > span:first-child::before{content:"";display:inline-block;vertical-align:-7px;
  width:26px;height:26px;margin-right:10px;background:var(--ic,none) center/contain no-repeat}
/* 도움 탭 '어떻게 노나' 카드 — 이름 앞에 */
.how .k[data-i18n="hTap"]{--ic:url(/ui/h-tap.webp)}
.how .k[data-i18n="hCut"]{--ic:url(/ui/h-cut.webp)}
.how .k[data-i18n="hRub"]{--ic:url(/ui/h-rub.webp)}
.how .k[data-i18n="hFreeze"]{--ic:url(/ui/h-freeze.webp)}
.how .k[data-i18n="hStyle"]{--ic:url(/ui/h-style.webp)}
.how .k[data-i18n="hMode"]{--ic:url(/ui/h-mode.webp)}
html.cam .how .k::before{content:"";display:inline-block;vertical-align:-8px;width:30px;height:30px;margin-right:8px;
  background:var(--ic,none) center/contain no-repeat}
/* 루트 언어 고르기(/) — 사람은 대개 곧장 넘어가지만 크롤러 · 스크립트 없는 사람 · 넘어가기 전 한순간은 이것을 본다.
   글자만 있던 쪽을 첫 화면과 같은 옷으로 */
#pickroot{min-height:100vh;box-sizing:border-box;max-width:880px;margin:0 auto;padding:56px 24px 48px;color:#3A2B57;
  font-family:"Jua","Fredoka",var(--ui,system-ui,sans-serif);position:relative;isolation:isolate}
body:has(#pickroot){background:linear-gradient(168deg,#FFF3EA 0%,#FFE6F2 38%,#EEE7FF 72%,#E2F3FF 100%) fixed}
#pickroot::before{content:"";position:fixed;right:0;top:0;width:min(100%,1100px);aspect-ratio:3/2;z-index:-1;pointer-events:none;
  background:url(/ui/hero.webp) center/100% 100% no-repeat}
#pickroot h1{font-weight:400;font-size:clamp(48px,9vw,80px);line-height:1;margin:0 0 18px;letter-spacing:.03em;
  background:linear-gradient(180deg,#FF8FB1 0%,#FF6F91 45%,#FF9A3D 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 4px 10px rgba(255,111,145,.35))}
#pickroot p{max-width:540px;font-family:var(--ui,system-ui,sans-serif);font-size:16px;line-height:1.65;color:#5B4B7A;margin:0 0 28px;
  background:rgba(255,255,255,.7);border-radius:18px;padding:14px 18px}
#pickroot ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-width:640px}
#pickroot a{display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 14px;border-radius:18px;
  background:#fff;border:2px solid #F3E8FF;color:#3A2B57;font-size:18px;text-decoration:none;
  box-shadow:0 4px 0 rgba(124,92,190,.14);transition:transform .15s cubic-bezier(.3,1.6,.5,1),border-color .15s}
#pickroot a:hover,#pickroot a:focus-visible{transform:translateY(-3px);border-color:#FF8FB1;outline:none}
/* 판 아래 칩 — 이름 앞에 작게(높이는 그대로) */
.chip[data-branch] .cn::before,.chip[data-go] .cn::before{content:"";display:inline-block;vertical-align:-3px;
  width:16px;height:16px;margin-right:4px;background:var(--ic,none) center/contain no-repeat}
/* 워드마크 — 호박빛 그라데이션과 은은한 빛 */
html.cam #start h1{background:linear-gradient(180deg,#FFFFFF 10%,#FFD9A8 55%,#FFAA4D);-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 2px 14px rgba(255,170,77,.35))}
/* 카드가 차례로 떠오른다(놀기 탭을 열 때마다) — 움직임 줄이기를 고른 사람에게는 없다 */
@keyframes uiRise{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes uiBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px) rotate(-4deg)}}
@media (prefers-reduced-motion:no-preference){
  html.cam #start[data-tab="play"] #branches > *,html.cam #start[data-tab="play"] #brmore > *{animation:uiRise .5s cubic-bezier(.2,.8,.2,1) backwards}   /* 끝난 뒤 아무 값도 남기지 않는다(both 는 합성층을 남겼다) */
  html.cam #start[data-tab="play"] #branches > :nth-child(2){animation-delay:.04s}
  html.cam #start[data-tab="play"] #branches > :nth-child(3){animation-delay:.08s}
  html.cam #start[data-tab="play"] #branches > :nth-child(4){animation-delay:.12s}
  html.cam #start[data-tab="play"] #branches > :nth-child(5){animation-delay:.16s}
  html.cam #start[data-tab="play"] #branches > :nth-child(6){animation-delay:.2s}
  html.cam #start[data-tab="play"] #branches > :nth-child(7){animation-delay:.24s}
  html.cam #start[data-tab="play"] #branches > :nth-child(8){animation-delay:.28s}
  html.cam #start[data-tab="play"] #branches > :nth-child(9){animation-delay:.32s}
  html.cam #start[data-tab="play"] #branches > :nth-child(n+10),html.cam #start[data-tab="play"] #brmore > *{animation-delay:.36s}
  html.cam .branch.newbr[data-branch]::before{animation:uiBob 2.4s ease-in-out infinite}
}
/* 첫 화면 머리 그림 — 위쪽에 깔고 아래로 서서히 사라진다. 글자보다 뒤 */
/* 첫 화면 안의 유리 카드(.glass 등)도 뒤 흐림을 끈다 — 바탕이 이미 .66~.96 로 어두워 흐림은 거의 안 보이는데,
   카드마다 합성층이 생겨 그 안 글씨가 윈도우에서 뿌옇게 나왔다. 판 위(점수판 등)의 유리는 그대로 둔다 */
html.cam #start *,html.cam #start *::before,html.cam #start *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* mask · opacity 를 쓰지 않는다 — 합성층이 생겨 글씨가 흐려졌다 */
html.cam #start{isolation:isolate}
html.cam #start::before{content:"";position:absolute;right:0;top:0;width:min(100%,1100px);aspect-ratio:3/2;z-index:-1;pointer-events:none;
  background:url(/ui/hero.webp) center/100% 100% no-repeat}   /* 그림 비율 그대로 — 넓은 화면에서 잘리면 아래 끝이 줄로 보였다 */   /* 그림 자체에 아래로 사라지는 투명도와 .62 진하기를 구워 두었다(tools/ui-art.mjs) */

/* ══ 테마 색 (2026-10-16) ══════════════════════════════════════════════════
   밝은 테마 다섯(파스텔 · 민트 소다 · 복숭아 · 하늘 구름 · 레몬 젤리)은 아래 규칙을 모두 함께 쓰고
   이 변수만 갈아 끼운다. <html> 에 th-<id> 가 붙는다(pZtheme.js · 머리 스크립트). 파스텔은 표 없이 기본. */
html.cam:not(.night){
  --acc:#FF6F91; --acc2:#FF9DBA; --accd:#E2456F; --accl:#FFD3E0; --accrgb:255,111,145;
  --shrgb:124,92,190; --lavl:#EADFFF; --lavs:#F7F2FD;
  --ink:#3A2B57; --ink2:#5B4B7A; --mut:#7D6E9C; --mut2:#9586B3; --link:#7A5BD0;
  --gnd:#EADFF3; --gnd2:#F5EEF9; --groundrgb:234,223,243;
  --g1:#FFF3EA; --g2:#FFE6F2; --g3:#EEE7FF; --g4:#E2F3FF;
  --r-reveal:#2E8FE0; --r-crush:#F07A12; --r-shape:#22A85A; --r-ice:#1E9BD6; --r-cut:#6B7890;
  --r-open:#9150E0; --r-mix:#12A877; --r-key:#E8457A; --r-sand:#C07F22; --r-any:#2E8FE0; --r-dare:#F07A12; --r-ugc:#22A85A}
html.cam.th-mint{
  --wm3:var(--accd);
  --acc:#17B394; --acc2:#5FD8BE; --accd:#0E8C73; --accl:#BDEFE2; --accrgb:23,179,148;
  --shrgb:40,130,120; --lavl:#CDEFE6; --lavs:#EEFAF6;
  --ink:#1D4743; --ink2:#36665F; --mut:#5E8C85; --mut2:#7FA8A1; --link:#0E8C73;
  --gnd:#D6F2EA; --gnd2:#ECFAF6; --groundrgb:214,242,234;
  --g1:#F2FFFA; --g2:#DCF7EE; --g3:#E2F2FF; --g4:#F3FFE6}
html.cam.th-peach{
  --wm3:var(--accd);
  --acc:#FF7A59; --acc2:#FFA58C; --accd:#DE5634; --accl:#FFD5C6; --accrgb:255,122,89;
  --shrgb:180,100,80; --lavl:#FFDCCF; --lavs:#FFF3ED;
  --ink:#4B2C27; --ink2:#6E4A42; --mut:#9A766C; --mut2:#B4958B; --link:#D9542F;
  --gnd:#FFE5D9; --gnd2:#FFF3EC; --groundrgb:255,229,217;
  --g1:#FFF7E9; --g2:#FFE3D4; --g3:#FFDCE6; --g4:#FFF0D2}
html.cam.th-sky{
  --wm3:var(--accd);
  --acc:#4C8DFF; --acc2:#86B3FF; --accd:#2D69D8; --accl:#CCDFFF; --accrgb:76,141,255;
  --shrgb:70,105,180; --lavl:#D6E4FF; --lavs:#F0F5FF;
  --ink:#213459; --ink2:#405683; --mut:#6A7DA6; --mut2:#8A9AC0; --link:#2D69D8;
  --gnd:#DCE8FF; --gnd2:#EFF5FF; --groundrgb:220,232,255;
  --g1:#F3F9FF; --g2:#DCEAFF; --g3:#E9E2FF; --g4:#E0FAFF}
html.cam.th-lemon{
  --wm3:var(--accd);
  --acc:#E99700; --acc2:#FFC23D; --accd:#BF7A00; --accl:#FFE6A0; --accrgb:233,151,0;
  --shrgb:160,125,40; --lavl:#FBEBB8; --lavs:#FFF9E6;
  --ink:#463812; --ink2:#685727; --mut:#93825A; --mut2:#AE9E77; --link:#B87400;
  --gnd:#FFF2C8; --gnd2:#FFFAE8; --groundrgb:255,242,200;
  --g1:#FFFCEA; --g2:#FFF1C0; --g3:#FFE6D2; --g4:#EEFCD6}

/* ══ 파스텔 테마 (2026-10-15) ═══════════════════════════════════════════════
   사람: "아예 뒤엎어도 된다, 예쁘게 아기자기하게 — 왁뿌볼은 18세 미만이 많이 한다".
   어둡고 영화 같던 첫 화면(#start)을 밝은 파스텔 · 둥근 글꼴 · 말랑한 카드로 바꾼다. 판(게임 화면)은 그대로.
   색은 대부분 변수라 #start 안에서만 변수를 바꿔 끼우고, 변수로 안 되는 곳만 따로 고친다. */
html.cam:not(.night) #start{
  --frost:var(--ink); --frost-dim:var(--ink2); --muted:var(--mut); --muted-2:var(--mut2);
  --panel:rgba(255,255,255,.84); --line:rgba(var(--shrgb),.16); --line-2:rgba(var(--shrgb),.32);
  --amber:var(--acc); --amber-deep:var(--accd); --ice:#3D9BF0; --ice-deep:#2B78C9;
  --r-reveal:#2E8FE0; --r-crush:#F07A12; --r-shape:#22A85A; --r-ice:#1E9BD6; --r-cut:#6B7890;
  --r-open:#9150E0; --r-mix:#12A877; --r-key:#E8457A; --r-sand:#C07F22; --r-any:#2E8FE0; --r-dare:#F07A12; --r-ugc:#22A85A;
  --cute:"Jua","Fredoka",var(--ui);
  color:var(--frost);
  background:linear-gradient(168deg,var(--g1) 0%,var(--g2) 38%,var(--g3) 72%,var(--g4) 100%)}
html.cam:not(.night) #start::before{opacity:1}
/* 제목 — 둥근 글꼴, 분홍 → 주황, 흰 테두리 느낌의 그림자 */
html.cam:not(.night) #start h1{font-family:var(--cute);font-weight:400;font-size:40px;letter-spacing:.02em;
  background:linear-gradient(180deg,var(--acc2) 0%,var(--acc) 45%,var(--wm3,#FF9A3D) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 4px 10px rgba(var(--accrgb),.35))}
html.cam:not(.night) #start .nonet{background:#fff;color:#22A85A;border:2px solid #C9F0D6;font-weight:700}
html.cam:not(.night) #start #sitestats{color:var(--muted)}
html.cam:not(.night) #start #sitestats b,html.cam:not(.night) #start #sitestats strong{color:var(--acc)}
/* 구글 플레이 띠 */
html.cam:not(.night) #start #gplay{background:#fff;border:2px solid var(--accl);color:var(--frost-dim);box-shadow:0 3px 0 rgba(var(--accrgb),.18)}
html.cam:not(.night) #start #gplay .gpg{background:linear-gradient(180deg,var(--acc2),var(--acc));color:#fff}
html.cam:not(.night) #start #gplay .gpi{border-color:transparent transparent transparent var(--acc)}
/* 탭 줄 — 하얀 알약, 고른 탭은 분홍 젤리 */
html.cam:not(.night) #start #stabs{background:rgba(255,255,255,.7);border:2px solid #fff;box-shadow:0 6px 18px rgba(var(--shrgb),.12)}
html.cam:not(.night) #start #stabs button{color:var(--muted);font-family:var(--cute);font-size:17px}
html.cam:not(.night) #start #stabs button[aria-selected="true"],html.cam:not(.night) #start #stabs button.on{
  background:linear-gradient(180deg,var(--acc2),var(--acc))!important;color:#fff!important;box-shadow:0 4px 0 var(--accd),0 8px 16px rgba(var(--accrgb),.35)}
/* 시작하기 — 말랑한 젤리 단추 */
html.cam:not(.night) #start #gorow #go,html.cam:not(.night) #start #go{font-family:var(--cute);font-size:22px;color:#fff;
  background:linear-gradient(180deg,#FFB86B 0%,#FF8A3D 100%);border:0;box-shadow:0 6px 0 #E0661C,0 12px 24px rgba(255,138,61,.35);
  text-shadow:0 1px 0 rgba(160,60,0,.35)}
html.cam:not(.night) #start #go:active{transform:translateY(4px);box-shadow:0 2px 0 #E0661C,0 6px 12px rgba(255,138,61,.3)}
/* 유리(어두운 반투명) 카드는 모두 하얀 말랑 카드로 */
html.cam:not(.night) #start .glass,html.cam:not(.night) #start #goany,html.cam:not(.night) #start #goasmr,html.cam:not(.night) #start #gonew,html.cam:not(.night) #start #mine,html.cam:not(.night) #start #carry,html.cam:not(.night) #start #tday,html.cam:not(.night) #start #missions,
html.cam:not(.night) #start #broke,html.cam:not(.night) #start #sister,html.cam:not(.night) #start .how{
  background:rgba(255,255,255,.86)!important;border:2px solid #fff!important;color:var(--frost);
  box-shadow:0 4px 0 rgba(var(--shrgb),.10),0 10px 22px rgba(var(--shrgb),.10)!important}
html.cam:not(.night) #start .btn{color:var(--frost)}
/* 갈래 카드 — 하얀 바탕에 갈래 색 테두리, 눌리는 젤리 */
html.cam:not(.night) #start .branch{border-radius:22px!important;border:2.5px solid color-mix(in srgb,var(--rc,#C9B8EE) 45%,#fff)!important;
  box-shadow:0 5px 0 color-mix(in srgb,var(--rc,#C9B8EE) 30%,transparent),0 10px 20px rgba(var(--shrgb),.10)!important;
  transition:transform .15s cubic-bezier(.3,1.6,.5,1),box-shadow .15s}
html.cam:not(.night) #start .branch:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--rc,#C9B8EE) 30%,transparent)!important}
html.cam:not(.night) #start .branch .bn{font-family:var(--cute);font-size:18px;color:var(--frost)}
html.cam:not(.night) #start .branch[data-branch="reveal"]{--rc:var(--r-reveal)} html.cam:not(.night) #start .branch[data-branch="crush"]{--rc:var(--r-crush)}
html.cam:not(.night) #start .branch[data-branch="shape"]{--rc:var(--r-shape)} html.cam:not(.night) #start .branch[data-branch="ice"]{--rc:var(--r-ice)}
html.cam:not(.night) #start .branch[data-branch="cut"]{--rc:var(--r-cut)} html.cam:not(.night) #start .branch[data-branch="open"]{--rc:var(--r-open)}
html.cam:not(.night) #start .branch[data-branch="mix"]{--rc:var(--r-mix)} html.cam:not(.night) #start .branch[data-branch="key"]{--rc:var(--r-key)}
html.cam:not(.night) #start .branch[data-branch="sand"]{--rc:var(--r-sand)} html.cam:not(.night) #start .branch[data-branch="any"]{--rc:var(--r-any)}
html.cam:not(.night) #start .branch[data-branch="dare"]{--rc:var(--r-dare)} html.cam:not(.night) #start .branch[data-branch="ugc"]{--rc:var(--r-ugc)}
html.cam:not(.night) #start #brmore button{background:rgba(255,255,255,.86)!important;border:2px solid #fff!important;border-radius:18px!important;color:var(--frost)!important;
  box-shadow:0 4px 0 rgba(var(--shrgb),.12)!important;font-family:var(--cute)}
html.cam:not(.night) #start #brhead,html.cam:not(.night) #start #brhead *{color:var(--frost-dim)}
html.cam:not(.night) #start #brtotal{color:var(--acc)!important;font-family:var(--cute)}
html.cam:not(.night) #start #picktog{color:var(--muted)}
/* 오늘 · 기록 · 도움 */
html.cam:not(.night) #start #tdare{background:linear-gradient(135deg,#FFF0D9,#FFE0EC)!important;border:2px solid #fff!important;color:var(--frost)!important;
  box-shadow:0 5px 0 rgba(240,122,18,.18),0 10px 22px rgba(240,122,18,.12)!important}
html.cam:not(.night) #start #mine button{color:var(--frost);border-color:rgba(var(--shrgb),.12)}
html.cam:not(.night) #start .how .k{font-family:var(--cute);color:var(--frost)} html.cam:not(.night) #start .how .d{color:var(--muted)}
html.cam:not(.night) #start #biz,html.cam:not(.night) #start #biz *,html.cam:not(.night) #start #seonav,html.cam:not(.night) #start #seonav *{color:var(--muted)!important}
html.cam:not(.night) #start a,html.cam:not(.night) #start #todaych{color:var(--link)!important}
html.cam:not(.night) #start #tmrw{color:var(--muted)!important}
html.cam:not(.night) #start #goany,html.cam:not(.night) #start #goasmr{font-family:var(--cute);font-size:16px}
/* 언어 고르개(첫 화면 위에 떠 있는 것) */
html.cam:not(.night):has(#start:not(.gone)) #langpick{background:#fff!important;border:2px solid var(--lavl)!important;color:var(--frost,var(--ink));
  box-shadow:0 4px 0 rgba(var(--shrgb),.12)}
html.cam:not(.night):has(#start:not(.gone)) #langpick *{color:var(--ink)!important}

/* ══ 파스텔 방 — 판 화면 (2026-10-16) ══════════════════════════════════════
   첫 화면만 파스텔이고 판은 어두운 방이라, '시작하기' 를 누르면 다른 게임에 들어간 것 같았다.
   밤 테마(.night)가 아니면 판 화면의 색 변수도 파스텔로 바꿔 끼운다. 판 바탕 그림은 캔버스가 칠하고
   (bgOf → THEME.bg), 여기는 그 위의 계기판 · 단추 · 칩 · 서랍 · 창. */
html.cam:not(.night){
  --ground:var(--gnd); --ground-2:var(--gnd2);
  --panel:rgba(255,255,255,.86); --line:rgba(var(--shrgb),.18); --line-2:rgba(var(--shrgb),.34);
  --frost:var(--ink); --frost-dim:var(--ink2); --muted:var(--mut); --muted-2:var(--mut2);
  --amber:var(--acc); --amber-deep:var(--accd); --ice:#3D9BF0; --ice-deep:#2B78C9;
  --cute:"Jua","Fredoka",var(--ui)}
html.cam:not(.night) body{background:var(--ground)}
html.cam:not(.night) .glass{background:rgba(255,255,255,.82);border-color:#fff;box-shadow:0 4px 0 rgba(var(--shrgb),.10),0 8px 18px rgba(var(--shrgb),.10)}
/* 계기판 — 점수 · 라운드 · 온도 · 집 */
html.cam:not(.night) #score{color:var(--ink)}
html.cam:not(.night) #roundtag,html.cam:not(.night) #bestrow{color:var(--acc)}
html.cam:not(.night) #thermo,html.cam:not(.night) #tophome{background:rgba(255,255,255,.86);border:2px solid #fff;color:var(--ink);box-shadow:0 3px 0 rgba(var(--shrgb),.12)}
html.cam:not(.night) #tophome svg{stroke:var(--ink);color:var(--ink)}
html.cam:not(.night) #tval{color:var(--ink)}
/* 판 위의 큰 글(처음 만났다 · 팁 …) — 밝은 바탕이라 흰 글이 묻혔다 */
html.cam:not(.night) #toast .big{color:var(--ink);text-shadow:0 2px 0 #fff,0 0 14px rgba(255,255,255,.9)}
html.cam:not(.night) #toast .sub{color:var(--accd);text-shadow:0 1px 0 #fff}
html.cam:not(.night) #howline{background:rgba(255,255,255,.88);color:var(--ink2);border:2px solid #fff;box-shadow:0 3px 0 rgba(var(--shrgb),.10)}
html.cam:not(.night) #combo{color:var(--acc)}
/* 아래 단추 셋 — 냉동 · 다음 볼(가운데 큰 것) · 메뉴 */
html.cam:not(.night) #dock .btn{background:#fff;color:var(--ink);border:2px solid var(--lavl);box-shadow:0 4px 0 rgba(var(--shrgb),.18)}
html.cam:not(.night) #freeze{color:#2B78C9!important;border-color:#CFE6FF!important}
/* 셔터(다음 볼) — 2026-10-16 사람: '원 버튼 교정해줘 위치 디자인'. 주황 테 안에 테마 색 원이 겹쳐 무엇인지 모를
   덩어리였다. 하얀 젤리 받침 + 테마 색 알 + 하얀 ▶ 로 '다음' 이 읽히게 */
html.cam:not(.night) #nextball{background:#fff!important;border:0!important;
  box-shadow:0 5px 0 rgba(var(--shrgb),.24),0 12px 24px rgba(var(--shrgb),.22)!important}
html.cam:not(.night) #nextball::after{inset:7px;background:linear-gradient(180deg,var(--acc2) 0%,var(--acc) 100%);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.10),inset 0 4px 0 rgba(255,255,255,.35)}
html.cam:not(.night) #nextball:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(var(--shrgb),.24),0 6px 12px rgba(var(--shrgb),.2)!important}
/* 갈래 칩 줄 */
html.cam:not(.night) #chips .chip{color:var(--ink2);opacity:.75}
html.cam:not(.night) #chips .chip[aria-selected="true"],html.cam:not(.night) #chips .chip[aria-current="true"]{opacity:1;background:#fff!important;
  border-color:var(--accl)!important;color:var(--ink);box-shadow:0 3px 0 rgba(var(--accrgb),.25)}
/* 메뉴 서랍 · 창들 — 어두운 반투명 상자를 하얀 말랑 상자로 */
html.cam:not(.night) #more,html.cam:not(.night) .sheet>div,html.cam:not(.night) #sheet>div,html.cam:not(.night) #dexsheet>div{
  background:rgba(255,255,255,.96)!important;color:var(--ink);border:2px solid #fff!important;box-shadow:0 12px 36px rgba(var(--shrgb),.25)!important}
html.cam:not(.night) #more .btn{background:var(--lavs);color:var(--ink);border-color:var(--lavl)}
html.cam:not(.night) .ballnav{background:rgba(255,255,255,.8);color:var(--ink2);border-color:#fff}
/* 창(도감 · 볼 목록 · 랭킹 · 공유 · 사진)의 바깥 막 — 어두운 막을 옅은 라벤더 막으로 */
html.cam:not(.night) :is(#sheet,#ranksheet,#dexsheet,#sharesheet,#camsheet){background:rgba(var(--groundrgb),.72)!important}
html.cam:not(.night) .sheetbox{background:rgba(255,255,255,.97)!important;color:var(--ink);border:2px solid #fff!important;
  box-shadow:0 14px 40px rgba(var(--shrgb),.28)!important;border-radius:24px!important}
html.cam:not(.night) .sheetbox h2,html.cam:not(.night) .sheetbox h3{color:var(--ink);font-family:var(--cute)}
html.cam:not(.night) .sheetbox button{border-color:var(--lavl)}
/* 어두운 판을 전제로 흰 글 · 흰 테두리를 박아 둔 것들 */
html.cam:not(.night) :is(#dexsum b,.hallhead b,#dexinfo .nm){color:var(--acc)}
html.cam:not(.night) #dexfilter button{background:var(--lavs);border-color:var(--lavl);color:var(--ink2)}
html.cam:not(.night) #dexfilter button.on{background:linear-gradient(180deg,var(--acc2),var(--acc));border-color:transparent;color:#fff}
html.cam:not(.night) .dexbar .tr{background:var(--lavs)}
html.cam:not(.night) #dareend{background:rgba(255,255,255,.97)!important;color:var(--ink);border:2px solid #fff!important;box-shadow:0 14px 40px rgba(var(--shrgb),.28)}
html.cam:not(.night) .ballnav{border-color:#fff}
/* 밤 테마: 첫 화면의 파스텔 머리 그림은 숨긴다 */
html.night #start::before{display:none}

/* ══ 밝은 방 글씨 또렷하게 (2026-10-16) ═══════════════════════════════════
   사람: '글씨도 잘 안 보이고'. 어두운 방에 맞춘 옅은 색 · 반투명이 밝은 바탕에서 묻혔다 */
html.cam:not(.night) #chips .chip{opacity:.94;color:var(--ink2)}
html.cam:not(.night) #chips .chip .cn{font-weight:800}
html.cam:not(.night) #chips .chip .cc{font-weight:700;color:color-mix(in srgb,var(--rc,var(--mut)) 82%,#000)}
html.cam:not(.night) #chips .chip.x{opacity:.9}
html.cam:not(.night) #chips .chip.sep{background:rgba(var(--shrgb),.22)}
html.cam:not(.night) #subrow,html.cam:not(.night) #visits em{color:var(--mut)}
html.cam:not(.night) #visits b{color:var(--ink)}
html.cam:not(.night) #online{opacity:1}
html.cam:not(.night) #online i{background:#1FB86A;box-shadow:0 0 0 2px rgba(31,184,106,.18)}
html.cam:not(.night) #scorebox{background:rgba(255,255,255,.72);border-radius:18px;border:2px solid rgba(255,255,255,.9)}
html.cam:not(.night) #feverlbl{color:var(--mut)}
html.cam:not(.night) #feverbar{background:rgba(var(--shrgb),.16)}
html.cam:not(.night) #combo .t{color:var(--accd)}
/* 판 위 큰 글 — 볼 위에 겹쳐도 읽히게 흰 테를 두껍게, 작은 글은 하얀 알약 위에 */
html.cam:not(.night) #toast .big{text-shadow:0 0 2px #fff,0 0 2px #fff,0 2px 0 #fff,0 0 18px rgba(255,255,255,.95)}
html.cam:not(.night) #toast .sub{color:var(--accd);font-weight:800;width:fit-content;max-width:92vw;margin-left:auto;margin-right:auto;
  padding:4px 14px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 3px 0 rgba(var(--shrgb),.12);text-shadow:none}
html.cam:not(.night) #toast .sub:empty{display:none}
html.cam:not(.night) #howline{background:#fff}
html.cam:not(.night) #clipbtn{box-shadow:0 4px 0 #E0661C,0 8px 18px rgba(var(--shrgb),.25);border:3px solid #fff}
/* 모래 갈래의 찍기 · 깎기 — 52px 원 안에 '찍기' 와 모양 글자(—)가 한 줄로 서서 글자가 원 밖으로 밀렸다. 냉동처럼 세로로 */
html.cam #moldbtn,html.cam #sandbtn{flex-direction:column;gap:2px;line-height:1}
/* 폰: 단추가 다섯(찍기 · 냉동 · 셔터 · 메뉴 · 깎기)이면 22px 간격으로는 390 폭에 안 들어가 깎기가 둘째 줄로 떨어졌다 */
@media (max-width:480px){ html.cam #dock:has(#moldbtn:not([hidden])),html.cam #dock:has(#sandbtn:not([hidden])){column-gap:12px} }
@media (max-width:380px){ html.cam #dock:has(#moldbtn:not([hidden])),html.cam #dock:has(#sandbtn:not([hidden])){column-gap:6px} }
@media (max-width:340px){ html.cam #dock:has(#sandbtn:not([hidden])) :is(#freeze,#moretog,#moldbtn,#sandbtn){flex-basis:46px;width:46px;min-width:46px;height:46px}
  html.cam #dock:has(#sandbtn:not([hidden])) #nextball{flex-basis:68px;width:68px;min-width:68px;height:68px} }
html.cam #moldbtn .gl{margin:0;font-size:13px}
html.cam #sandbtn .hd{margin:2px 0 0;max-width:60%}
html.cam:not(.night) #moldbtn,html.cam:not(.night) #sandbtn{color:#B07418!important;border-color:#F6DDB4!important}

/* ══ 첫 화면 꾸밈 (2026-10-16) ═════════════════════════════════════════════
   사람: '랜딩은 더 예쁘게 꾸며줘'. 넓은 화면에서 왼쪽이 텅 비었고, 머리 그림 왼쪽 끝이 세로 줄로 보였다
   (그림에 왼쪽으로 사라지는 투명도도 구웠다 — tools/ui-art.mjs). 글씨가 든 상자에는 합성층을 만들지 않는다:
   움직이는 것은 글씨와 겹치지 않는 그림(마스코트 · 장식)뿐. */
/* 바탕의 반짝이 — 바탕 그림 층으로(요소를 더 만들지 않는다) */
html.cam:not(.night) #start{background:
  radial-gradient(circle at 6% 14%,#fff 0 2.5px,transparent 3.5px),
  radial-gradient(circle at 18% 32%,rgba(255,255,255,.85) 0 2px,transparent 3px),
  radial-gradient(circle at 9% 58%,#fff 0 3px,transparent 4px),
  radial-gradient(circle at 24% 76%,rgba(255,255,255,.8) 0 2px,transparent 3px),
  radial-gradient(circle at 92% 64%,#fff 0 2.5px,transparent 3.5px),
  radial-gradient(circle at 84% 86%,rgba(255,255,255,.85) 0 2px,transparent 3px),
  radial-gradient(ellipse 60% 40% at 0% 100%,rgba(var(--accrgb),.16),transparent 70%),
  radial-gradient(ellipse 50% 40% at 100% 100%,rgba(var(--shrgb),.12),transparent 70%),
  linear-gradient(168deg,var(--g1) 0%,var(--g2) 38%,var(--g3) 72%,var(--g4) 100%)}
/* 넓은 화면 왼쪽 — 구름 · 별 · 작은 친구들. 글 칸(640px) 밖에만 */
@media (min-width:1180px){
  html.cam:not(.night) #start::after{content:"";position:fixed;z-index:-1;pointer-events:none;
    left:max(8px,calc(50% - 320px - 24px - min(26vw,380px)));bottom:0;width:min(26vw,380px);aspect-ratio:640/918;
    background:url(/ui/deco-l.webp) center bottom/contain no-repeat}
}
/* 마스코트 — 워드마크 앞에서 통통 */
html.cam:not(.night) #start #sthead::before{content:"";flex:none;width:46px;height:47px;margin-right:-2px;
  background:url(/ui/mascot.webp) center/contain no-repeat}
@keyframes mascotHop{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-5px) rotate(-6deg)}60%{transform:translateY(-5px) rotate(5deg)}}
@media (prefers-reduced-motion:no-preference){
  html.cam:not(.night) #start:not(.gone) #sthead::before{animation:mascotHop 2.8s ease-in-out infinite}
}
html.cam:not(.night) #start h1{font-size:38px}
html.cam:not(.night) #start .nonet{box-shadow:0 2px 0 rgba(34,168,90,.18)}
/* 갈래 카드 — 하얀 바탕 아래쪽에 제 색이 은은히 고인다 · 아이콘 크게 */
html.cam:not(.night) #start .branch{background:linear-gradient(180deg,#fff 0%,#fff 45%,color-mix(in srgb,var(--rc,#C9B8EE) 11%,#fff) 100%)!important}
/* 이어하기 단추에 젤리 반짝 */
html.cam:not(.night) #start #go{position:relative;overflow:hidden}
html.cam:not(.night) #start #go::after{content:"";position:absolute;top:4px;left:6%;right:6%;height:42%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
/* 합계 숫자 — 둥근 글꼴, 테마 색 */
html.cam:not(.night) #start #brtotal{font-size:44px;text-shadow:0 3px 0 #fff}

/* ══ 콤보 배지 (2026-10-16) ════════════════════════════════════════════════
   사람: '콤보 등 액션 그래픽을 매우 화려하게, 선명하고 예쁘고 멋있게'. 예전 것은 반투명 주황 상자에
   숫자가 콤보가 오를수록 흰색으로 바래(밝은 방에서는 거의 안 보였다).
   흰 젤리 배지 + 단계(data-tier, p5)마다 바뀌는 그라데이션 숫자 · 뒤에 도는 빛살 · 5 · 10 · 20 … 에 터지는 고리 */
html.cam #combo{--cg:linear-gradient(180deg,#FFB0C6 0%,#FF4F86 100%);--crgb:255,79,134;--cb2:#E23C72;
  isolation:isolate;padding:8px 24px 9px;border-radius:24px;gap:4px;background:none;border:0;box-shadow:none}
/* 배지 바탕은 ::after 에 — 요소 제 바탕은 z-index 음수 자식(빛살)보다 아래에 칠해져 빛살이 배지 안으로 비쳤다 */
html.cam #combo::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:24px;pointer-events:none;
  background:#fff;border:3px solid #fff;box-sizing:border-box;
  box-shadow:0 5px 0 var(--cb2),0 10px 24px rgba(var(--crgb),.32),0 0 calc(var(--cs,0) * 50px) rgba(var(--crgb),.55)}
html.cam #combo[data-tier="2"]{--cg:linear-gradient(180deg,#FFD86A 0%,#FF7A2E 100%);--crgb:255,122,46;--cb2:#E2611A}
html.cam #combo[data-tier="3"]{--cg:linear-gradient(180deg,#B99BFF 0%,#FF4FA6 100%);--crgb:168,92,255;--cb2:#8A45E0}
html.cam #combo[data-tier="4"]{--cg:linear-gradient(90deg,#FF4F86,#FF9F2E,#FFD93D,#3FD58A,#3FA8FF,#A45CFF,#FF4F86);--crgb:255,120,170;--cb2:#A45CFF}
html.night #combo::after{background:rgba(22,18,34,.92);border-color:rgba(255,255,255,.22)}
html.cam #combo .n{font-family:"Fredoka",var(--mono);font-weight:700;letter-spacing:-.01em;
  font-size:calc(34px + var(--cs,0) * 34px);
  background:var(--cg);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 0 rgba(255,255,255,.9)) drop-shadow(0 3px 4px rgba(var(--crgb),.35))}
html.cam #combo .t{font-family:"Fredoka",var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.22em;line-height:1;
  color:#fff!important;padding:4px 10px 3px 12px;border-radius:999px;background:var(--cg);background-size:200% 100%;
  text-shadow:0 1px 0 rgba(0,0,0,.18)}
/* 빛살 — 콤보가 셀수록 진하고 크다 */
html.cam #combo::before{content:"";position:absolute;z-index:-2;left:50%;top:50%;width:calc(150px + var(--cs,0) * 150px);aspect-ratio:1;
  margin:calc(-75px - var(--cs,0) * 75px) 0 0 calc(-75px - var(--cs,0) * 75px);border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(var(--crgb),.30) 0 7deg,transparent 7deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%);
  opacity:calc(.25 + var(--cs,0) * .75)}
/* 단계 고리 — .mile 이 붙을 때 한 번 퍼진다 */
html.cam #combo .rg{position:absolute;z-index:-2;inset:-6px;border-radius:30px;pointer-events:none;
  border:4px solid rgba(var(--crgb),.85);opacity:0}
@media (prefers-reduced-motion:no-preference){
  html.cam #combo.on::before{animation:comboRays 6s linear infinite}
  html.cam #combo[data-tier="4"] .n,html.cam #combo[data-tier="4"] .t{animation:comboRainbow 1.6s linear infinite}
  html.cam #combo.mile .rg{animation:comboRing .7s cubic-bezier(.2,.8,.3,1)}
  html.cam #combo.pop{animation:combopop2 .42s cubic-bezier(.2,1.6,.35,1)}
}
@keyframes comboRays{to{transform:rotate(360deg)}}
@keyframes comboRainbow{to{background-position:200% 0}}
@keyframes comboRing{0%{opacity:1;transform:scale(.9)}100%{opacity:0;transform:scale(1.9,2.4)}}
@keyframes combopop2{
  0%{transform:translate(-50%,0) scale(1) rotate(0)}
  25%{transform:translate(-50%,calc(-6px - var(--cs,0) * 8px)) scale(calc(1.28 + var(--cs,0) * .25)) rotate(-4deg)}
  55%{transform:translate(-50%,1px) scale(.94) rotate(2deg)}
  78%{transform:translate(-50%,0) scale(1.04) rotate(-.6deg)}
  100%{transform:translate(-50%,0) scale(1) rotate(0)}}

/* ══ 로고 그림 (2026-10-16) ══════════════════════════════════════════════════
   사람: '로고 전체 언어 openai 로 예쁘게'. 글자 워드마크(그라데이션 글)를 젤리 사탕 로고 그림으로 —
   한국어는 '빠사삭', 나머지 열한 말은 'BBASASAK'(data-wm, p8ui 가 붙인다). 그림은 tools/ui-art.mjs(LOGO).
   h1 의 글은 그대로 두고(화면 읽기 · 검색) 크기만 0 으로 — 그림이 그 자리에 선다. 모든 테마 · 밤에도 같은 그림 */
html.cam #start h1[data-wm],html.cam #start h1{font-size:0!important;line-height:0;color:transparent!important;filter:none!important;
  -webkit-background-clip:border-box!important;background-clip:border-box!important;
  background:url(/ui/logo-ko.webp) left center/contain no-repeat!important;
  width:149px;height:60px;padding:0!important;flex:none;letter-spacing:0}
html.cam #start h1[data-wm="latin"]{background-image:url(/ui/logo-en.webp)!important;width:193px}
/* 언어 고르기 첫 쪽(/) — 영어 로고 */
#pickroot h1{font-size:0!important;color:transparent;filter:none;-webkit-background-clip:border-box;background-clip:border-box;
  background:url(/ui/logo-en.webp) left center/contain no-repeat;width:min(300px,70vw);aspect-ratio:644/200;height:auto;margin-bottom:18px}
@media (max-width:480px){
  html.cam #start h1,html.cam #start h1[data-wm]{width:104px;height:42px}
  html.cam #start h1[data-wm="latin"]{width:135px}
}

/* 언어 고르개 펼친 목록 — option 바탕이 어두운 방 색(#12161C)으로 박혀 있어 밝은 테마에서 검은 목록이 떴다(사람 제보) */
html.cam:not(.night) :is(#langsel,#langsel2){color-scheme:light}
html.cam:not(.night) :is(#langsel,#langsel2) option{background:#fff;color:var(--ink)}
html.cam:not(.night) #langsel{background:#fff;border:2px solid var(--lavl);color:var(--ink)}

/* ══ 연속 접속 달력 (2026-10-16, pZstreak) ══════════════════════════════════
   놀기 탭 이어하기 줄 아래 한 줄 — 🔥 N일 연속 · 이레 칸 · 내일 받는 것. 처음 온 사람(연속 0)에게는 안 보인다 */
#streakbox{width:100%;max-width:640px;box-sizing:border-box;text-align:left;margin:2px auto 0;padding:10px 14px;border-radius:18px;
  background:rgba(255,255,255,.86);border:2px solid #fff;box-shadow:0 4px 0 rgba(var(--shrgb,124,92,190),.10)}
#streakbox[hidden]{display:none}
html.cam #start:not([data-tab="play"]) #streakbox,:is(#start.first,html.bbfirst #start) #streakbox{display:none!important}
#streakbox .hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
#streakbox .n{font-family:var(--cute,inherit);font-weight:400;font-size:18px;color:var(--accd,#E2456F)}
#streakbox .dots{display:flex;gap:6px}
#streakbox .dots i{width:22px;height:22px;border-radius:50%;background:var(--lavs,#F7F2FD);border:2px solid var(--lavl,#EADFFF);
  display:grid;place-items:center;font-style:normal;font-size:12px;box-sizing:border-box}
#streakbox .dots i.on{background:linear-gradient(180deg,var(--acc2,#FF9DBA),var(--acc,#FF6F91));border-color:transparent}
#streakbox .dots i.now{box-shadow:0 0 0 3px rgba(var(--accrgb,255,111,145),.28)}
#streakbox .dots i[data-th]::after{content:"🎨"}
#streakbox .nx{margin:6px 0 0;font-size:13px;color:var(--ink2,#5B4B7A);font-weight:600}
#streakbox .kp{margin:2px 0 0;font-size:11.5px;color:var(--mut,#8C7EA8)}
html.night #streakbox{background:rgba(20,24,32,.8);border-color:rgba(255,255,255,.12)}
html.night #streakbox .nx{color:#DCE6EE}
/* 연속으로 여는 테마 — 자물쇠 */
.thsw.lock i{filter:grayscale(.75) brightness(.95);opacity:.7}
.thsw.lock .tn::before{content:"🔒 "}

/* 테마 고르개 — 메뉴 안 '🎨 테마' 를 누르면 동그라미 여섯이 펼쳐진다 */
#themes{display:flex;flex-wrap:wrap;gap:8px;padding:8px 4px 4px;flex-basis:100%;justify-content:center}
#themes[hidden]{display:none}
.thsw{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:2px 4px;cursor:pointer;
  color:var(--frost);font:inherit;font-size:11.5px;font-weight:700;min-width:58px}
.thsw i{display:block;width:40px;height:40px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 0 rgba(0,0,0,.12),0 6px 12px rgba(0,0,0,.12);
  transition:transform .15s cubic-bezier(.3,1.6,.5,1)}
.thsw:hover i{transform:translateY(-2px) scale(1.06)}
.thsw[aria-pressed="true"] i{outline:3px solid var(--amber);outline-offset:2px}
.thsw:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:12px}
.thsw[data-th="day"] i{background:radial-gradient(circle at 35% 30%,#fff 0 12%,transparent 13%),linear-gradient(135deg,#FFD6E7,#E4D6F3)}
.thsw[data-th="mint"] i{background:radial-gradient(circle at 35% 30%,#fff 0 12%,transparent 13%),linear-gradient(135deg,#BDF2E2,#BFE3FF)}
.thsw[data-th="peach"] i{background:radial-gradient(circle at 35% 30%,#fff 0 12%,transparent 13%),linear-gradient(135deg,#FFCDB8,#FFE6B0)}
.thsw[data-th="sky"] i{background:radial-gradient(circle at 35% 30%,#fff 0 12%,transparent 13%),linear-gradient(135deg,#C9DEFF,#E3D8FF)}
.thsw[data-th="lemon"] i{background:radial-gradient(circle at 35% 30%,#fff 0 12%,transparent 13%),linear-gradient(135deg,#FFEE9E,#D3F4BE)}
.thsw[data-th="night"] i{background:radial-gradient(circle at 68% 32%,#FFE7A8 0 10%,transparent 11%),linear-gradient(135deg,#2A2440,#08080C)}