*,*::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",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;padding:16px;gap:12px}
#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. 알림은 점수판 바로 밑이라 더 못 올린다.
   알림이 떠 있는 동안만 콤보를 그 아래로 내리고 조금 줄인다. 사라지면 제자리로. */
#ui:has(#toast.on) #combo{top:calc(50% - 33vmin + 92px)}
#ui:has(#toast.on) #combo.on{transform:translate(-50%,0) scale(.8)}
@media (max-width:640px){ #ui:has(#toast.on) #combo{top:196px} }
/* 저가 기기(.lowend, detectLowEnd · 느림 감지) — 흐림은 폰에서 가장 비싼 CSS 다. 끄고,
   비치던 만큼 판을 짙게 해 글이 그대로 읽히게 한다. 좋은 기기에는 이 줄이 안 걸린다. */
.lowend{--panel:rgba(16,24,33,.92)}
/* 처음 온 사람(#start.first) — 큰 단추 하나만. 나머지는 [다른 놀이 모두 보기] 뒤로 */
#start.first #gonew,#start.first #gorow2,#start.first #pickrow,#start.first #daybox,
#start.first #branches,#start.first #missions,#start.first #broke,#start.first #howto,
#start.first #carry,#start.first #adland{display:none!important}
#start.first #startbtns{display:flex;justify-content:center}
#start.first #go{font-size:clamp(20px,5.2vw,26px);padding:18px 40px;min-width:min(320px,82vw)}
.firstall{display:none}
#start.first .firstall{display:block;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) + 44px);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}
.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;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;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)}
}
.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 이다. 한 줄로 못 박아 두면
   가장 긴 '내가 만든 것' 이 말줄임표로 잘린다 — 두 줄로 접히게 둔다.
   줄 높이를 좁혀 한 줄짜리 탭과 키가 크게 안 어긋나게 한다. */
.stab{min-width:0;overflow:hidden;line-height:1.25;word-break:keep-all;
  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:12px;padding:8px 2px} }
.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}
#modelist{overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding-right:4px}
.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}
.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}
.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}
.d-reveal{background:var(--ice)}
.d-crush{background:#FFC27A}
.d-shape{background:#B7F0BE}
.d-ice{background:#B6E8FF}
.d-cut{background:#E2E8F0}
.d-open{background:#D6B4F5}
.d-mix{background:#8FF0BC}
.d-key{background:#FFAFC5}
.d-sand{background:#E2B26E}
#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)} }
#toast{position:absolute;left:50%;top:calc(50% - 33vmin);transform:translate(-50%,-14px);
  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}

#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,.56),rgba(8,11,16,.96));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:opacity .5s ease}
#start > *{flex:0 0 auto}
/* 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 .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칸씩)이 각각 한 줄에 딱
   떨어진다. 모래놀이가 아래 혼자 있던 줄에서 올라와 작은 카드 여섯이
   되었기 때문이다 — 열다섯 칸에서는 여섯째가 다음 줄로 떨어졌다. */
#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:5px;align-items:center;text-align:center;
  padding:15px 13px;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}
/* Black Han Sans 는 큰 제목용 초굵은 서체다. 17px 에서는 한글 속공간이
   메워져 글자가 검은 덩어리로 읽힌다 — 작은 자리에는 UI 서체를 쓴다. */
.branch .bn{font-family:var(--ui);font-size:18px;font-weight:800;color:var(--frost);
  letter-spacing:-.02em}
.branch .bc{font-size:11px;letter-spacing:.12em;color:var(--ice);font-weight:700}
/* 한국어가 주인이고 영문은 거들 뿐이다 — 무엇을 하는 놀이인지 한 눈에 */
.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}
#daybox{display:flex;flex-direction:column;gap:2px;align-items:center;
  padding:8px 16px;border-radius:14px;
  background:rgba(183,240,190,.06);border:1px solid rgba(183,240,190,.18)}
#daybox:empty,#daybox:has(> :only-child[hidden]){display:none}
#daybox .hook{margin:0}
#daybox #todaych{color:#CFF3D6;font-size:var(--fs-4)}
#daybox #tmrw{color:var(--amber);font-size:var(--fs-5);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 자동 — 랜덤 여정과 같은 줄에 나란히. 이쪽이 '안 만지는 길' 이라
   먼저 눈에 띄면 안 되고, 없는 것처럼 숨어도 안 된다. 같은 무게로 둔다. */
#gorow2{display:flex;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}
#goasmr{order:10;margin:2px auto 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:11px}
  #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}
  #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 .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}
}


#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}
#customtip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  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:50%;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ice)}
@keyframes tipbob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-3px)}}
@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;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;background:rgba(4,7,11,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto}
#camsheet[hidden]{display:none}
#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}
.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:-6px;right:-6px;width:22px;height:22px;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)}
/* 순수 모드 — 점수·콤보·피버를 감추고 소리와 촉감만 남긴다 */
#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}
#biz a:hover{color:var(--muted)}

@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:32px}
  #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}   /* 제목도 같은 줄 높이 — 혼자 위로 떴다 */
}