:root{
  color-scheme: dark;
  --bg:#0b1020; --panel:#161b22; --edge:#30363d;
  --fg:#e6edf3; --muted:#8b949e; --accent:#58a6ff; --gold:#f0c040;
  --safe-b: env(safe-area-inset-bottom);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* must win over any display: rule below, or [hidden] panels stay on screen */
[hidden]{display:none !important}
html,body{height:100%; margin:0; overflow:hidden}
body{
  background:var(--bg); color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  user-select:none; touch-action:manipulation;
}
button{font-family:inherit; cursor:pointer}

/* ---------- scenes ---------- */
.scene{position:fixed; inset:0; display:none}
.scene.active{display:block}

/* ---------- HUD ---------- */
#hud{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; gap:8px; align-items:center;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  pointer-events:auto;
}
#hud::-webkit-scrollbar{display:none}
#hud>.pill{flex:0 0 auto}
.pill{
  background:rgba(11,16,32,.78); border:1px solid var(--edge); border-radius:999px;
  padding:6px 13px; font-size:14px; font-weight:600; display:flex; align-items:center; gap:6px;
  backdrop-filter:blur(6px); white-space:nowrap;
}
.pill.money b{color:var(--gold)}
.pill.link{pointer-events:auto; color:var(--fg); cursor:pointer}
.xpbar{display:block; width:64px; height:6px; border-radius:3px; background:#2b3240; overflow:hidden}
.xpbar u{display:block; height:100%; width:0; background:linear-gradient(90deg,#3fb950,#58a6ff); transition:width .35s}
#hud-name{max-width:34vw; overflow:hidden; text-overflow:ellipsis; display:block}

/* ---------- buttons ---------- */
.btn{
  background:var(--accent); color:#03121f; border:0; border-radius:12px;
  padding:13px 26px; font-size:16px; font-weight:800;
}
.btn.big{font-size:19px; padding:15px 34px; border-radius:14px}
.btn.ghost{background:transparent; color:var(--fg); border:1px solid var(--edge)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45; pointer-events:none}

/* ---------- creator ---------- */
#creator{overflow:auto; background:
  radial-gradient(900px 500px at 15% -10%, rgba(88,166,255,.16), transparent 60%),
  radial-gradient(700px 400px at 90% 0%, rgba(188,140,255,.13), transparent 55%), var(--bg);}
.creator-wrap{max-width:900px; margin:0 auto; padding:24px 18px calc(30px + var(--safe-b))}
.creator-wrap h1{
  font-size:clamp(26px,7vw,38px); margin:6px 0 20px; text-align:center; letter-spacing:-1px;
  background:linear-gradient(100deg,#58a6ff,#bc8cff 60%,#3fb950);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.creator-main{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:720px){ .creator-main{grid-template-columns:280px 1fr; align-items:start} }
.preview{
  background:var(--panel); border:1px solid var(--edge); border-radius:18px;
  display:flex; align-items:center; justify-content:center; padding:16px; min-height:250px;
  position:sticky; top:8px;
}
.options{display:flex; flex-direction:column; gap:14px}
.field{display:flex; flex-direction:column; gap:7px}
.field>span{font-size:13px; color:var(--muted); font-weight:600}
.field input{
  background:var(--panel); border:1px solid var(--edge); color:var(--fg);
  border-radius:10px; padding:12px 14px; font-size:16px; width:100%;
}
.field input:focus{outline:2px solid var(--accent); outline-offset:1px}
.swatches{display:flex; flex-wrap:wrap; gap:8px}
.sw{width:34px; height:34px; border-radius:50%; border:2px solid transparent; box-shadow:0 0 0 1px var(--edge)}
.sw[aria-checked="true"]{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent)}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{
  background:var(--panel); border:1px solid var(--edge); color:var(--fg);
  border-radius:999px; padding:8px 14px; font-size:13.5px; font-weight:600;
}
.chip[aria-checked="true"]{background:var(--accent); color:#03121f; border-color:var(--accent)}
.creator-actions{display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap}

/* ---------- world ---------- */
#world-bg,#park-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
}
#world-actors{position:absolute; inset:0}
.actor{position:absolute; bottom:14%; transition:left .12s linear}
.actor .avatar-svg{display:block; filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}
.actor.flip{transform:scaleX(-1)}
.actor.walking{animation:bob .34s infinite ease-in-out}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}

#hotspots{position:absolute; inset:0; pointer-events:none}
.hot{
  position:absolute; bottom:14%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.hot .glow{
  width:54px; height:54px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,225,120,.55), rgba(255,225,120,0) 70%);
  animation:pulse 1.6s infinite ease-in-out;
}
@keyframes pulse{0%,100%{opacity:.55; scale:1}50%{opacity:1; scale:1.15}}
.hot .board-svg{filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.hot .tag{
  background:rgba(11,16,32,.82); border:1px solid var(--edge); border-radius:999px;
  padding:4px 11px; font-size:12.5px; font-weight:700; white-space:nowrap;
}

#prompt{
  position:absolute; left:50%; top:16%; transform:translateX(-50%); z-index:20;
  background:rgba(11,16,32,.88); border:1px solid var(--accent); border-radius:14px;
  padding:11px 20px; font-size:16px; font-weight:700; text-align:center;
}

.pad{
  position:absolute; left:0; right:0; bottom:0; z-index:30;
  display:flex; gap:14px; justify-content:center; align-items:center;
  padding:14px 16px calc(16px + var(--safe-b));
}
.padbtn{
  width:74px; height:74px; border-radius:50%; font-size:28px;
  background:rgba(11,16,32,.72); color:var(--fg); border:1px solid var(--edge);
  backdrop-filter:blur(6px);
}
.padbtn:active{background:rgba(88,166,255,.35)}
.padbtn.act{background:rgba(88,166,255,.9); color:#03121f; border-color:var(--accent)}
.padbtn.act[disabled]{background:rgba(11,16,32,.5); color:var(--muted); opacity:.5}

/* ---------- park ---------- */
#park-hud{
  position:absolute; top:calc(8px + env(safe-area-inset-top)); left:0; right:0; z-index:40;
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:0 10px;
}

#park-start,#park-result{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:45;
  text-align:center; background:rgba(11,16,32,.9); border:1px solid var(--edge);
  border-radius:20px; padding:26px 30px; backdrop-filter:blur(5px);
  display:flex; flex-direction:column; gap:12px; align-items:center; max-width:88vw;
}
#park-start .tip,#park-result p{color:var(--muted); font-size:14px; margin:0; line-height:1.5}
#park-result h2{margin:0; font-size:26px}

/* ---------- shop ---------- */
#shop{overflow:auto; background:var(--bg)}
.shop-wrap{max-width:760px; margin:0 auto; padding:calc(60px + env(safe-area-inset-top)) 18px calc(30px + var(--safe-b))}
.shop-wrap h1{font-size:clamp(24px,6vw,32px); margin:0 0 6px}
.shop-money{color:var(--muted); font-size:15px; margin-bottom:18px}
.shop-money b{color:var(--gold)}
.shop-items{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); margin-bottom:22px}
.item{
  background:var(--panel); border:1px solid var(--edge); border-radius:16px; padding:16px;
  display:flex; flex-direction:column; gap:8px;
}
.item.owned{border-color:#3fb950}
.item .top{display:flex; align-items:center; gap:10px}
.item .nm{font-weight:700; font-size:16px}
.item .ds{color:var(--muted); font-size:13px; line-height:1.45; flex:1}
.item .buy{
  background:var(--accent); color:#03121f; border:0; border-radius:10px;
  padding:10px; font-weight:800; font-size:14px; width:100%;
}
.item .buy.on{background:#3fb950}
.item .buy[disabled]{opacity:.4}
.item .sw-preview{width:44px; height:44px; border-radius:10px; flex:none; box-shadow:0 0 0 1px var(--edge)}

/* ---------- toast ---------- */
#toast{
  position:fixed; left:50%; bottom:calc(110px + var(--safe-b)); transform:translateX(-50%);
  background:rgba(11,16,32,.94); border:1px solid var(--accent); border-radius:12px;
  padding:11px 20px; font-weight:700; z-index:80; font-size:15px; text-align:center;
  animation:toastin .25s ease-out; max-width:88vw;
}
/* Arcade has live timing/balance meters in the normal toast band. Keep global
   save and mission notices visible, but reserve the lower band for play. */
#arcade.active ~ #toast,
#toast.arcade-toast{
  bottom:calc(175px + var(--safe-b));
  pointer-events:none;
  z-index:42;
}
@keyframes toastin{from{opacity:0; translate:0 12px}to{opacity:1; translate:0 0}}

/* ================= v2: energy, competitions, job, pet care ================= */
.pill.energy{gap:5px}
.enbar{display:block; width:56px; height:6px; border-radius:3px; background:#2b3240; overflow:hidden}
.enbar u{display:block; height:100%; width:100%; background:#3fb950; transition:width .3s, background .3s}

/* keep the line breaks in result / tip text */
#park-start .tip,#park-result p,#job-done p,#pet-mood{white-space:pre-line}
#park-start h2,#job-done h2{margin:0 0 2px; font-size:24px}
#park-start{gap:10px}

#pet-cheer{
  position:absolute; left:6%; bottom:16%; z-index:12; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  animation:bob .8s infinite ease-in-out;
}
#pet-cheer .tag{
  background:rgba(11,16,32,.82); border:1px solid var(--edge); border-radius:999px;
  padding:3px 10px; font-size:11.5px; font-weight:700; white-space:nowrap;
}

.food-emoji{font-size:38px; line-height:1; width:44px; text-align:center; flex:none}

/* ---------- job ---------- */
#job{overflow:auto; background:
  radial-gradient(800px 460px at 20% -10%, rgba(240,168,63,.18), transparent 60%), var(--bg);}
.job-wrap{
  max-width:520px; margin:0 auto; min-height:100%;
  padding:calc(64px + env(safe-area-inset-top)) 18px calc(30px + var(--safe-b));
  display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;
}
.job-wrap h1{font-size:clamp(24px,6vw,32px); margin:0}
#job-intro,#job-done,#job-play{display:flex; flex-direction:column; align-items:center; gap:14px; width:100%}
#job-intro[hidden],#job-done[hidden],#job-play[hidden]{display:none}
.job-order{
  background:var(--panel); border:1px solid var(--edge); border-radius:20px;
  padding:22px 26px; width:100%; display:flex; flex-direction:column; align-items:center; gap:12px;
}
.job-count{color:var(--muted); font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase}
.job-want{font-size:74px; line-height:1; animation:cuepop .2s ease-out}
#job-timer{width:100%; max-width:240px; height:9px; border-radius:5px; background:#2b3240; overflow:hidden}
#job-timer i{display:block; height:100%; width:100%; background:linear-gradient(90deg,#3fb950,#f0c040,#f85149)}
.job-btns{display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%}
.job-btn{
  font-size:44px; padding:16px 0; border-radius:18px;
  background:var(--panel); border:1px solid var(--edge); color:inherit;
}
.job-btn:active{background:rgba(88,166,255,.35); transform:translateY(1px)}

/* ---------- pet care ---------- */
#petcare{overflow:auto; background:
  radial-gradient(800px 460px at 80% -10%, rgba(188,140,255,.18), transparent 60%), var(--bg);}
.pet-wrap{
  max-width:460px; margin:0 auto; min-height:100%;
  padding:calc(64px + env(safe-area-inset-top)) 18px calc(30px + var(--safe-b));
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.pet-wrap h1{font-size:clamp(22px,6vw,30px); margin:0}
#pet-big{
  background:var(--panel); border:1px solid var(--edge); border-radius:24px;
  padding:18px 30px; animation:bob 2.4s infinite ease-in-out;
}
.pet-bars{display:flex; flex-direction:column; gap:9px; width:100%; max-width:300px}
.pet-bar{display:flex; align-items:center; gap:10px}
.pet-bar span{font-size:13px; color:var(--muted); width:46px; text-align:left; font-weight:600}
.hbar{flex:1; height:12px; border-radius:6px; background:#2b3240; overflow:hidden}
.hbar u{display:block; height:100%; width:0; border-radius:6px; transition:width .35s}
#pet-happy{background:linear-gradient(90deg,#e35d8a,#f0c040)}
#pet-full{background:linear-gradient(90deg,#3fb950,#58a6ff)}
.pet-rename{width:100%; max-width:300px; text-align:left}
.pet-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}

.hot .glow.emoji{display:flex; align-items:center; justify-content:center; font-size:30px}

/* ================= Trick Mode: the half-pipe ================= */
#pipe-svg{position:absolute; inset:0; width:100%; height:100%; z-index:5; overflow:visible}
#park-bg{filter:saturate(1.05)}

#speedbar{
  position:absolute; left:50%; transform:translateX(-50%); z-index:40;
  top:calc(52px + env(safe-area-inset-top));
  display:flex; align-items:center; gap:8px;
  background:rgba(11,16,32,.72); border:1px solid var(--edge); border-radius:999px;
  padding:5px 14px; backdrop-filter:blur(6px);
}
#speedbar span{font-size:10.5px; letter-spacing:.1em; color:var(--muted); font-weight:800}
#speedbar i{display:block; width:120px; height:8px; border-radius:4px; background:#2b3240; overflow:hidden}
#speedbar u{display:block; height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg,#3fb950,#ffe066 65%,#f85149); transition:width .1s linear}

/* Thumb zones. PUMP is ALWAYS bottom-left, SPIN/GRAB ALWAYS bottom-right.
   Nothing ever moves or swaps — buttons dim when they don't apply. */
#pipe-controls{
  position:absolute; left:0; right:0; bottom:0; z-index:45;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:10px max(12px, env(safe-area-inset-right)) calc(12px + var(--safe-b)) max(12px, env(safe-area-inset-left));
  opacity:0; pointer-events:none; transition:opacity .18s;
}
#pipe-controls.on{opacity:1; pointer-events:auto}
.thumb{display:flex; gap:10px; align-items:flex-end}
.thumb.right{flex-direction:row}
.pbtn{
  border-radius:22px; font-weight:900; letter-spacing:.03em;
  border:1px solid var(--edge); color:var(--fg);
  background:rgba(11,16,32,.75); backdrop-filter:blur(6px);
  width:96px; height:84px; font-size:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  transition:opacity .15s, background .15s, box-shadow .15s;
}
.pbtn small{font-size:10px; font-weight:700; opacity:.62; letter-spacing:.02em}
.pbtn:active{filter:brightness(1.25)}
.pbtn.dim{opacity:.3; filter:grayscale(.65)}
.pbtn.pump{width:124px; height:96px; font-size:19px}
.pbtn.pump.hot{
  background:#ffe066; color:#241a00; border-color:#fff3b0;
  box-shadow:0 0 26px rgba(255,224,102,.75);
}
.pbtn.pump.hot small{opacity:.8}
.pbtn.spin{background:rgba(88,166,255,.9); color:#03121f; border-color:var(--accent)}
.pbtn.grab{background:rgba(188,140,255,.9); color:#1a0033; border-color:#bc8cff}
.pbtn.spin.dim,.pbtn.grab.dim{background:rgba(11,16,32,.7); color:var(--fg)}
/* tablets and landscape: push right into the corners where thumbs actually sit */
@media (min-width:820px), (orientation:landscape) and (min-height:420px){
  #pipe-controls{padding-left:max(26px,env(safe-area-inset-left)); padding-right:max(26px,env(safe-area-inset-right)); padding-bottom:calc(26px + var(--safe-b))}
  .pbtn{width:110px; height:96px; font-size:17px}
  .pbtn.pump{width:142px; height:110px; font-size:21px}
}
/* no keyboard on a touch device, so hide the key hints there */
@media (pointer:coarse){ .pbtn small{display:none} }

#btn-help{
  position:absolute; z-index:46; right:12px; top:calc(96px + env(safe-area-inset-top));
  width:38px; height:38px; padding:0; justify-content:center; font-size:17px;
}
.keys{border-collapse:collapse; font-size:13px; margin:4px 0 2px; width:100%}
.keys th{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; text-align:left; padding:2px 6px}
.keys td{padding:4px 6px; border-top:1px solid var(--edge); color:#c9d1d9}
.keys kbd{
  background:#0d1117; border:1px solid var(--edge); border-bottom-width:2px; border-radius:5px;
  padding:1px 5px; font-family:ui-monospace,monospace; font-size:11.5px;
}

#pet-cheer{left:3%; bottom:auto; top:58%}

#how-to{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:50;
  background:rgba(11,16,32,.94); border:1px solid var(--accent); border-radius:20px;
  padding:24px 26px; max-width:min(90vw,420px); text-align:left;
  display:flex; flex-direction:column; gap:10px; backdrop-filter:blur(6px);
}
#how-to h2{margin:0; font-size:23px; text-align:center}
#how-to p{margin:0; font-size:14.5px; line-height:1.55; color:#c9d1d9}
#how-to b{color:var(--gold)}
#how-to .btn{margin-top:6px; align-self:center}

/* ================= decorations in the room ================= */
#decor-layer{position:absolute; inset:0; pointer-events:none; z-index:3}
.decor{
  position:absolute; transform:translate(-50%,-50%);
  font-size:clamp(34px,7vw,58px); line-height:1;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
  animation:decorin .35s ease-out;
}
@keyframes decorin{from{scale:.3; opacity:0}to{scale:1; opacity:1}}

/* ================= TV ================= */
#tv{overflow:auto; background:
  radial-gradient(900px 500px at 50% -10%, rgba(88,166,255,.16), transparent 60%), var(--bg);}
.tv-wrap{
  max-width:620px; margin:0 auto; min-height:100%;
  padding:calc(60px + env(safe-area-inset-top)) 18px calc(30px + var(--safe-b));
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.tv-set{width:100%; display:flex; flex-direction:column; align-items:center}
.tv-screen{
  width:100%; aspect-ratio:4/3; max-height:44vh;
  background:linear-gradient(160deg,#101826,#0a0f18);
  border:10px solid #2b3240; border-radius:16px;
  padding:18px; display:flex; flex-direction:column; gap:12px;
  box-shadow:inset 0 0 60px rgba(88,166,255,.16), 0 10px 30px rgba(0,0,0,.5);
  position:relative; overflow:hidden;
}
.tv-screen::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px);
}
.tv-chan{
  align-self:flex-start; font-size:11px; font-weight:900; letter-spacing:.14em;
  background:#f85149; color:#fff; padding:3px 10px; border-radius:4px;
}
.tv-text{font-size:clamp(15px,3.6vw,19px); line-height:1.55; color:#e6edf3; flex:1}
.tv-stand{width:110px; height:14px; background:#2b3240; border-radius:0 0 10px 10px}
.tv-buttons{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.tv-buttons .chip.on{background:var(--accent); color:#03121f; border-color:var(--accent)}

/* ================= wardrobe ================= */
#wardrobe{overflow:auto; background:
  radial-gradient(900px 500px at 20% -10%, rgba(226,93,138,.16), transparent 60%),
  radial-gradient(700px 400px at 85% 0%, rgba(188,140,255,.14), transparent 55%), var(--bg);}
.wr-wrap{max-width:900px; margin:0 auto; padding:calc(56px + env(safe-area-inset-top)) 18px calc(30px + var(--safe-b))}
.wr-wrap h1{font-size:clamp(24px,6vw,34px); margin:0 0 16px; text-align:center}
.wr-main{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:720px){ .wr-main{grid-template-columns:280px 1fr; align-items:start} }
.wr-wrap .tip{color:var(--muted); font-size:13px; margin:14px 0 0; text-align:center; line-height:1.5}
.wr-wrap .btn.big{display:block; margin:16px auto 0}

/* ================= decorate ================= */
#decorate{overflow:auto; background:
  radial-gradient(900px 500px at 70% -10%, rgba(240,192,64,.16), transparent 60%), var(--bg);}
.dec-wrap{max-width:700px; margin:0 auto; padding:calc(56px + env(safe-area-inset-top)) 18px calc(30px + var(--safe-b))}
.dec-wrap h1{font-size:clamp(22px,5.5vw,30px); margin:0 0 6px; text-align:center}
.dec-wrap .tip{color:var(--muted); font-size:13.5px; text-align:center; margin:0 0 16px; line-height:1.5}
.dec-slots{display:flex; gap:12px; justify-content:center; margin-bottom:20px}
.dec-slot{
  flex:1; max-width:130px; background:var(--panel); border:2px dashed var(--edge);
  border-radius:16px; padding:14px 6px; color:var(--fg);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.dec-slot.on{border-style:solid; border-color:var(--gold); background:#241d05}
.ds-emoji{font-size:34px; line-height:1}
.ds-lbl{font-size:11.5px; color:var(--muted); font-weight:700}
.dec-items{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.dec-item{
  background:var(--panel); border:1px solid var(--edge); border-radius:14px;
  padding:12px 6px; color:var(--fg);
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.dec-item.on{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold)}
.di-emoji{font-size:30px; line-height:1}
.di-name{font-size:11.5px; color:var(--muted); font-weight:600; text-align:center}
.dec-wrap .btn.big{display:block; margin:22px auto 0}

/* ================= friends ================= */
#friend{overflow:auto; background:
  radial-gradient(900px 500px at 30% -10%, rgba(226,93,138,.18), transparent 60%),
  radial-gradient(700px 400px at 85% 10%, rgba(88,166,255,.14), transparent 55%), var(--bg);}
.fr-wrap{
  max-width:560px; margin:0 auto; min-height:100%;
  padding:calc(56px + env(safe-area-inset-top)) 18px calc(30px + var(--safe-b));
  display:flex; flex-direction:column; gap:16px;
}
.fr-top{display:flex; gap:16px; align-items:center}
.fr-avatar{
  background:var(--panel); border:1px solid var(--edge); border-radius:20px;
  padding:8px 14px; flex:none;
}
.fr-id{flex:1; min-width:0}
.fr-id h1{font-size:clamp(20px,5vw,27px); margin:0 0 6px; line-height:1.15}
.fr-hearts{font-size:17px; letter-spacing:2px; margin-bottom:6px}
.fr-bar{height:9px; border-radius:5px; background:#2b3240; overflow:hidden}
.fr-bar i{display:block; height:100%; width:0; border-radius:5px;
  background:linear-gradient(90deg,#e35d8a,#f0c040); transition:width .35s}
.bubble{
  background:var(--panel); border:1px solid var(--edge); border-radius:18px;
  padding:16px 18px; font-size:15.5px; line-height:1.55; position:relative;
}
.bubble::before{
  content:''; position:absolute; top:-9px; left:34px;
  border:9px solid transparent; border-top:0; border-bottom-color:var(--edge);
}
.fr-actions{display:flex; flex-direction:column; gap:9px}
.fr-actions .btn{width:100%; text-align:left}
.fr-wrap .btn.ghost{margin-top:4px}

/* ================= mail ================= */
#mail{overflow:auto; background:
  radial-gradient(900px 500px at 60% -10%, rgba(88,166,255,.16), transparent 60%), var(--bg);}
.mail-wrap{max-width:640px; margin:0 auto; padding:calc(56px + env(safe-area-inset-top)) 18px calc(30px + var(--safe-b))}
.mail-wrap h1{font-size:clamp(23px,6vw,31px); margin:0 0 14px; text-align:center}
.mail-wrap .tip{color:var(--muted); font-size:14px; text-align:center; line-height:1.55}
.mail-list{display:flex; flex-direction:column; gap:11px; margin-bottom:20px}
.letter{
  background:var(--panel); border:1px solid var(--edge); border-radius:16px;
  padding:15px 17px; display:flex; flex-direction:column; gap:6px; cursor:pointer;
}
.letter.unread{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.lt-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.lt-top b{font-size:16px}
.lt-top span{color:var(--accent); font-size:11.5px; font-weight:800; white-space:nowrap}
.lt-from{color:var(--muted); font-size:12.5px}
.lt-body{font-size:14.5px; line-height:1.55; color:#c9d1d9}
.letter .buy{margin-top:6px}
.mail-wrap .btn.big{display:block; margin:0 auto}

/* ================= missions ================= */
#hud-trophy{padding:6px 11px; font-size:16px}
#missions{overflow:auto; background:
  radial-gradient(900px 500px at 50% -10%, rgba(240,192,64,.16), transparent 60%), var(--bg);}
.ms-wrap{max-width:640px; margin:0 auto; padding:calc(56px + env(safe-area-inset-top)) 18px calc(30px + var(--safe-b))}
.ms-wrap h1{font-size:clamp(24px,6vw,32px); margin:0 0 12px; text-align:center}
.ms-progress{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.ms-progress b{font-size:15px; color:var(--gold); white-space:nowrap; font-variant-numeric:tabular-nums}
.ms-progress i{flex:1; height:11px; border-radius:6px; background:#2b3240; overflow:hidden}
.ms-progress u{display:block; height:100%; width:0; border-radius:6px;
  background:linear-gradient(90deg,#3fb950,#f0c040); transition:width .4s}
.ms-group{font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
  margin:20px 0 8px; font-weight:800}
.ms-row{
  display:flex; align-items:center; gap:11px; padding:11px 13px; margin-bottom:7px;
  background:var(--panel); border:1px solid var(--edge); border-radius:13px;
}
.ms-row.done{border-color:#3fb950; background:#0f1f14}
.ms-tick{font-size:17px; flex:none}
.ms-txt{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0}
.ms-txt b{font-size:14.5px}
.ms-txt i{font-size:12.5px; color:var(--muted); font-style:normal}
.ms-row.done .ms-txt i{color:#3fb950}
.ms-rew{font-size:12.5px; color:var(--gold); font-weight:800; white-space:nowrap; flex:none}
.ms-wrap .btn.big{display:block; margin:22px auto 0}

/* ================= party ================= */
#party{overflow:auto; background:
  radial-gradient(900px 500px at 30% -10%, rgba(226,93,138,.2), transparent 60%),
  radial-gradient(700px 400px at 80% 5%, rgba(240,192,64,.18), transparent 55%), var(--bg);}
.pa-wrap{max-width:600px; margin:0 auto; padding:calc(56px + env(safe-area-inset-top)) 18px calc(30px + var(--safe-b)); text-align:center}
.pa-wrap h1{font-size:clamp(26px,7vw,36px); margin:0 0 20px}
.pa-guests{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:22px}
.pa-guest{
  background:var(--panel); border:1px solid var(--edge); border-radius:18px;
  padding:10px 14px 8px; display:flex; flex-direction:column; align-items:center; gap:4px;
  animation:popin .4s ease-out backwards;
}
.pa-guest:nth-child(2){animation-delay:.1s}
.pa-guest:nth-child(3){animation-delay:.2s}
.pa-guest:nth-child(4){animation-delay:.3s}
@keyframes popin{from{scale:.5; opacity:0}to{scale:1; opacity:1}}
.pa-guest span{font-size:12.5px; font-weight:700; color:var(--muted)}
.pa-gifts{display:flex; flex-direction:column; gap:8px; margin-bottom:24px}
.pa-gift{
  background:var(--panel); border:1px solid var(--edge); border-radius:12px;
  padding:11px 14px; font-size:14.5px;
}
.pa-gift b{color:var(--accent)}

/* ================= arcade mode ================= */
#ac-bg{
  position:absolute; inset:0; background:#9fd8f4; background-size:cover;
  background-position:center bottom;
}
#ac-svg{position:absolute; inset:0; width:100%; height:100%; touch-action:none}
.ac-sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
#ac-hud{
  position:absolute; top:calc(7px + env(safe-area-inset-top)); left:0; right:0; z-index:40;
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:0 7px;
  pointer-events:none;
}
.ac-hud-main,.ac-hud-status{
  max-width:100%; display:flex; gap:6px; align-items:center; justify-content:center;
}
#ac-hud .pill{padding:5px 10px; font-size:12.5px; box-shadow:0 2px 8px rgba(0,0,0,.18)}
#ac-hud button{pointer-events:auto}
.ac-phase-pill{max-width:170px; overflow:hidden}
#ac-phase{overflow:hidden; text-overflow:ellipsis}
.ac-combo{color:#d7dee6; min-width:94px; justify-content:center; transition:background .18s,color .18s,transform .18s}
.ac-combo.hot{background:#ffe066; border-color:#fff3b0; color:#241a00; transform:scale(1.04)}
.ac-objective{max-width:min(56vw,360px); overflow:hidden}
.ac-objective b{overflow:hidden; text-overflow:ellipsis}
.ac-objective.done{background:#2ea043; border-color:#56d364; color:#fff}
.ac-power{background:#38266b!important; border-color:#a989ff!important; color:#fff3ff}
.ac-focus{gap:5px!important}
.ac-focus>span{font-size:8px;letter-spacing:.07em;color:#c9d1d9}
.ac-focus>i{display:block;width:54px;height:7px;border-radius:4px;background:#2b3240;overflow:hidden}
.ac-focus>i>u{display:block;width:100%;height:100%;border-radius:4px;background:linear-gradient(90deg,#7d4fd0,#7ee0ff)}
.ac-focus>b{min-width:18px;font-size:10px;text-align:right}
#ac-speedbar{
  position:absolute; left:50%; transform:translateX(-50%); z-index:40;
  top:calc(79px + env(safe-area-inset-top));
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  background:rgba(11,16,32,.78); border:1px solid var(--edge); border-radius:999px;
  padding:5px 11px; backdrop-filter:blur(6px); box-shadow:0 2px 8px rgba(0,0,0,.18);
}
#ac-speedbar span{font-size:10px; letter-spacing:.1em; color:#c9d1d9; font-weight:900}
#ac-speedbar b{font-size:10.5px; min-width:28px; text-align:right}
#ac-speedbar i{display:block; width:clamp(92px,22vw,150px); height:8px; border-radius:4px; background:#2b3240; overflow:hidden}
#ac-speedbar u{
  display:block; height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg,#58a6ff,#bc8cff 58%,#ffe066); transition:width .16s linear;
}
#ac-prompt{
  position:absolute; z-index:44; left:50%; top:calc(116px + env(safe-area-inset-top));
  transform:translateX(-50%); max-width:min(88vw,500px); padding:9px 17px;
  border:2px solid #ffe066; border-radius:999px; background:rgba(11,16,32,.9);
  color:#fff; font-size:clamp(14px,3.8vw,19px); font-weight:900; text-align:center;
  box-shadow:0 5px 24px rgba(0,0,0,.34),0 0 20px rgba(255,224,102,.24);
  animation:ac-prompt-in .24s ease-out;
}
@keyframes ac-prompt-in{from{transform:translate(-50%,-8px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
#ac-timing{
  --spot-start:70%; --spot-size:18%; --spot-pos:0%;
  position:absolute; z-index:44; left:50%; bottom:calc(116px + var(--safe-b));
  transform:translateX(-50%); display:grid; grid-template-columns:auto minmax(104px,180px) auto;
  align-items:center; gap:7px; width:min(92vw,350px); padding:7px 10px;
  border:1px solid #697586; border-radius:999px; background:rgba(11,16,32,.9);
  box-shadow:0 5px 18px rgba(0,0,0,.32); backdrop-filter:blur(6px);
}
#ac-timing>span{font-size:9px; letter-spacing:.08em; font-weight:900; color:#c9d1d9}
#ac-timing>i{position:relative; display:block; height:14px; overflow:hidden; border-radius:999px;
  background:linear-gradient(90deg,#f85149,#f0a83f 55%,#f85149); border:1px solid #8b949e}
#ac-timing-window{position:absolute; left:var(--spot-start); width:var(--spot-size); top:0; bottom:0;
  border-left:2px solid #afffbd; border-right:2px solid #afffbd; background:#2ea043}
#ac-timing-needle{position:absolute; left:var(--spot-pos); top:-3px; width:4px; height:20px;
  border-radius:2px; background:#fff; box-shadow:0 0 5px #000; transform:translateX(-2px)}
#ac-timing>strong{min-width:54px; color:#ffe066; font-size:10px; text-align:center; letter-spacing:.03em}
#ac-timing.ready{border-color:#56d364; box-shadow:0 0 0 2px #56d36466,0 5px 18px rgba(0,0,0,.32)}
#ac-timing.ready>strong{color:#7ee787}
#ac-timing.success>strong{color:#7ee787}
#ac-timing.fail>strong{color:#ff7b80}
#ac-balance{
  --balance-pos:50%; position:absolute; z-index:44; left:50%; bottom:calc(116px + var(--safe-b));
  transform:translateX(-50%); display:grid; grid-template-columns:auto minmax(130px,220px) auto;
  align-items:center; gap:7px; width:min(92vw,380px); padding:7px 10px;
  border:1px solid #ffe066; border-radius:999px; background:rgba(11,16,32,.92);
  box-shadow:0 5px 18px rgba(0,0,0,.34); backdrop-filter:blur(6px);
}
#ac-balance>span{font-size:9px;letter-spacing:.08em;font-weight:900;color:#ffe066}
#ac-balance>i{position:relative;display:block;height:15px;overflow:hidden;border-radius:999px;
  background:linear-gradient(90deg,#f85149 0 15%,#f0a83f 28%,#2ea043 42% 58%,#f0a83f 72%,#f85149 85% 100%);border:1px solid #8b949e}
#ac-balance>i>u{position:absolute;left:40%;width:20%;top:0;bottom:0;border-left:2px solid #afffbd;border-right:2px solid #afffbd;background:#56d36433}
#ac-balance-cursor{position:absolute;left:var(--balance-pos);top:-3px;width:5px;height:21px;border-radius:3px;background:#fff;box-shadow:0 0 5px #000;transform:translateX(-2.5px)}
#ac-balance>strong{min-width:52px;font-size:10px;text-align:center;color:#7ee787}
#ac-balance.danger{border-color:#ff7b80;box-shadow:0 0 0 2px #f8514966,0 5px 18px rgba(0,0,0,.34)}
#ac-balance.danger>strong{color:#ff7b80}
#ac-focus-time{
  position:absolute;z-index:43;left:50%;top:calc(180px + env(safe-area-inset-top));transform:translateX(-50%);
  padding:6px 12px;border:1px solid #9bdcff;border-radius:999px;background:rgba(24,35,80,.88);
  color:#c8f3ff;font-size:11px;font-weight:850;white-space:nowrap;box-shadow:0 0 22px #58a6ff55;
}
#arcade.focus-time{box-shadow:inset 0 0 48px rgba(88,166,255,.22)}
#arcade.focus-time #ac-svg{filter:saturate(.88) brightness(1.04);transition:filter .2s}
/* The persistent coach prompt can wrap to several lines on a phone. Once an
   air action has started, the live Focus instruction and timing meter are the
   actionable guidance, so yield the same screen band until bullet time ends. */
#arcade.focus-time #ac-prompt{visibility:hidden;opacity:0}
#ac-controls{
  position:absolute; left:0; right:0; bottom:0; z-index:45;
  display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:end;
  padding:10px max(8px,env(safe-area-inset-right)) calc(10px + var(--safe-b)) max(8px,env(safe-area-inset-left));
  opacity:0; pointer-events:none; transition:opacity .18s;
}
#ac-controls.on{opacity:1; pointer-events:auto}
#ac-controls.paused{opacity:.22; pointer-events:none}
#ac-controls .thumb.left{justify-self:start}
#ac-controls .thumb.middle{justify-self:center}
#ac-controls .thumb.right{justify-self:end}
#ac-controls .pbtn{
  width:clamp(90px,28vw,110px); height:clamp(76px,22vw,94px); font-size:clamp(15px,4.5vw,19px);
  touch-action:none; border-width:2px; box-shadow:0 7px 20px rgba(0,0,0,.28);
}
#ac-controls .thumb.middle .pbtn{width:clamp(72px,23vw,96px);height:clamp(68px,20vw,84px);font-size:clamp(14px,4vw,18px)}
#ac-controls .pbtn span{pointer-events:none}
#ac-controls .pbtn small{pointer-events:none}
.pbtn.jump{background:rgba(63,185,80,.94); color:#04180a; border-color:#72df84}
.pbtn.duck{background:rgba(240,168,63,.94); color:#231400; border-color:#ffd27a}
.pbtn.trick{background:rgba(126,91,214,.95);color:#fff;border-color:#d1baff}
.pbtn.jump.air{background:rgba(88,166,255,.95); color:#03121f; border-color:#9bd0ff}
.pbtn.duck.air{background:rgba(188,140,255,.95); color:#1a0033; border-color:#dec2ff}
.pbtn.balance{background:#ffe066;color:#241a00;border-color:#fff3b0}
.pbtn.duck.release{background:#2ea043;color:#fff;border-color:#afffbd;box-shadow:0 0 0 3px #56d36466,0 7px 20px rgba(0,0,0,.28)}
.pbtn.trick.spot{background:#2ea043;color:#fff;border-color:#afffbd;box-shadow:0 0 0 3px #56d36466,0 7px 20px rgba(0,0,0,.28)}
.pbtn.used{background:rgba(67,75,88,.9)!important;color:#aeb8c4!important;border-color:#697586!important;box-shadow:0 4px 12px rgba(0,0,0,.2)!important}
.pbtn.dim{opacity:.62;filter:saturate(.55)}
#ac-controls .pbtn[aria-pressed="true"]{box-shadow:0 0 0 4px #fff8,0 7px 20px rgba(0,0,0,.28);filter:brightness(1.12)}
#ac-start,#ac-result,.ac-modal{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:50;
  text-align:center; background:rgba(11,16,32,.94); border:1px solid var(--edge);
  border-radius:20px; padding:clamp(17px,4vw,25px); backdrop-filter:blur(7px);
  display:flex; flex-direction:column; gap:11px; align-items:center;
  max-height:calc(100dvh - 18px - env(safe-area-inset-top) - var(--safe-b)); overflow:auto;
  box-shadow:0 16px 55px rgba(0,0,0,.48);
}
#ac-start{width:min(94vw,660px)}
#ac-result{width:min(90vw,460px)}
#ac-start h2,#ac-result h2,.ac-modal h2{margin:0; font-size:clamp(23px,6vw,29px)}
#ac-start .tip,#ac-result p,.ac-modal p{color:#aeb8c4; font-size:14px; margin:0; line-height:1.5; white-space:pre-line}
.ac-goals{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; width:100%}
.ac-goal{
  min-width:0; min-height:118px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; padding:10px 7px; border-radius:15px;
  border:2px solid var(--edge); background:#161b22; color:var(--fg); text-align:center;
  transition:border-color .16s,background .16s,transform .16s;
}
.ac-goal>span{font-size:29px; line-height:1}
.ac-goal>b{font-size:14.5px}
.ac-goal>small{font-size:11.5px; line-height:1.35; color:#aeb8c4}
.ac-goal.selected,.ac-goal[aria-checked="true"]{
  border-color:#ffe066; background:#302b1d; box-shadow:0 0 0 2px #ffe06644;
}
.ac-route{z-index:58}
.ac-modal{width:min(92vw,590px); z-index:58}
.ac-paused{width:min(88vw,360px); z-index:59}
.ac-route-cards{display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%}
.ac-route-cards button{
  min-height:152px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:16px 13px; border:2px solid var(--edge); border-radius:18px;
  background:#161b22; color:var(--fg);
}
.ac-route-cards button:first-child{border-color:#f0c040;background:linear-gradient(145deg,#3a2b18,#191c25)}
.ac-route-cards button:last-child{border-color:#58a6ff;background:linear-gradient(145deg,#152f45,#191c25)}
.ac-route-cards span{font-size:43px; line-height:1}
.ac-route-cards b{font-size:19px}
.ac-route-cards small{color:#c9d1d9; font-size:12.5px}
#arcade button:focus-visible{outline:3px solid #fff; outline-offset:3px}
#ac-player.ac-hurt{filter:drop-shadow(0 0 8px #ff453a) drop-shadow(0 0 2px #fff)}
#ac-inner{transform-box:fill-box; transform-origin:center}
#ac-pop{opacity:0; transition:opacity .18s ease-out}
#ac-pop.ac-show{opacity:1}

@media(max-width:480px){
  #ac-hud{padding:0 4px;gap:4px}
  .ac-hud-main,.ac-hud-status{gap:4px;width:100%}
  #ac-hud .pill{padding:5px 7px;font-size:11.5px}
  .ac-phase-pill{max-width:96px}
  #ac-pause,#ac-leave{font-size:0;width:34px;height:29px;padding:0;justify-content:center}
  #ac-pause::before{content:'⏸';font-size:15px}
  #ac-leave::before{content:'🏠';font-size:15px}
  .ac-combo{min-width:78px}
  .ac-objective{flex:1;min-width:0;max-width:none;justify-content:center}
  .ac-focus{padding-left:5px!important;padding-right:5px!important}
  .ac-focus>span{display:none}.ac-focus>i{width:38px}.ac-focus>b{display:none}
  #ac-speedbar{top:calc(75px + env(safe-area-inset-top));padding:4px 9px}
  #ac-prompt{top:calc(106px + env(safe-area-inset-top))}
  #ac-timing{bottom:calc(105px + var(--safe-b));width:min(94vw,330px);grid-template-columns:auto minmax(90px,1fr) auto}
  #ac-balance{bottom:calc(105px + var(--safe-b));width:min(94vw,340px);grid-template-columns:auto minmax(110px,1fr) auto}
  #ac-focus-time{top:calc(170px + env(safe-area-inset-top));font-size:10px;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
  .ac-goals{gap:6px}
  .ac-goal{min-height:105px;padding:8px 4px}
  .ac-goal>span{font-size:24px}.ac-goal>b{font-size:12.5px}.ac-goal>small{font-size:10.5px}
}
@media(max-width:350px){
  .ac-phase-pill{display:none!important}
  .ac-route-cards{grid-template-columns:1fr}
  .ac-route-cards button{min-height:112px}
  #ac-controls{gap:5px;padding-left:6px;padding-right:6px}
  #ac-controls .pbtn{width:90px}
  #ac-controls .thumb.middle .pbtn{width:72px}
}
@media(max-height:480px) and (orientation:landscape){
  #ac-hud{align-items:flex-start;right:auto;width:auto}
  .ac-hud-status{justify-content:flex-start}
  #ac-speedbar{left:auto;right:8px;transform:none;top:calc(49px + env(safe-area-inset-top))}
  #ac-prompt{top:calc(80px + env(safe-area-inset-top))}
  #ac-controls .pbtn{height:72px;width:104px}
  #ac-controls .thumb.middle .pbtn{height:66px;width:86px}
  #ac-timing{bottom:calc(82px + var(--safe-b))}
  #ac-balance{bottom:calc(82px + var(--safe-b))}
  #ac-focus-time{top:calc(140px + env(safe-area-inset-top))}
  .ac-goals{grid-template-columns:repeat(3,1fr)}
  .ac-goal{min-height:88px}.ac-goal>span{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  #ac-prompt{animation:none}
  #ac-pop,#ac-speedbar u,.ac-combo,.ac-goal,#ac-timing-needle{transition:none}
  #arcade.focus-time #ac-svg{filter:none;transition:none}
}

/* ================= phone ================= */
#phone{overflow:auto; background:
  radial-gradient(900px 500px at 50% -10%, rgba(88,166,255,.14), transparent 60%), var(--bg);}
.ph-wrap{max-width:430px; margin:0 auto; padding:calc(50px + env(safe-area-inset-top)) 16px calc(24px + var(--safe-b));
  display:flex; flex-direction:column; align-items:center; gap:14px}
.ph-body{
  width:100%; background:#0d1117; border:3px solid #2b3240; border-radius:34px;
  padding:10px; box-shadow:0 14px 40px rgba(0,0,0,.55); position:relative;
}
.ph-notch{width:96px; height:7px; border-radius:5px; background:#2b3240; margin:2px auto 8px}
.ph-screen{background:#11161f; border-radius:22px; overflow:hidden; display:flex; flex-direction:column;
  height:min(58vh,460px)}
.ph-top{display:flex; justify-content:space-between; align-items:center; padding:9px 14px;
  background:#161b22; border-bottom:1px solid var(--edge); font-size:13px; font-weight:800}
.ph-content{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:9px}
.ph-empty{color:var(--muted); text-align:center; font-size:14px; margin:auto}
.ph-tabs{display:flex; gap:8px; padding:10px 6px 4px; justify-content:center}
.ph-tab{background:transparent; border:1px solid var(--edge); color:var(--fg);
  border-radius:999px; padding:7px 14px; font-size:13px; font-weight:700}
.ph-tab.on{background:var(--accent); color:#03121f; border-color:var(--accent)}
.ph-chatrow{display:flex; align-items:center; gap:11px; background:#161b22; border:1px solid var(--edge);
  border-radius:14px; padding:9px 12px; cursor:pointer}
.ph-face{flex:none; display:flex}
.ph-who{display:flex; flex-direction:column; gap:2px; min-width:0}
.ph-who b{font-size:14.5px}
.ph-who i{font-size:12px; color:var(--muted); font-style:normal}
.ph-msg{max-width:82%; padding:9px 13px; border-radius:16px; font-size:14px; line-height:1.45;
  background:#222b38; align-self:flex-start; border-bottom-left-radius:5px}
.ph-msg.me{background:var(--accent); color:#03121f; align-self:flex-end;
  border-bottom-left-radius:16px; border-bottom-right-radius:5px; font-weight:600}
.ph-send{display:flex; flex-wrap:wrap; gap:7px; margin-top:6px}
.ph-btn{background:#222b38; border:1px solid var(--edge); color:var(--fg);
  border-radius:999px; padding:8px 13px; font-size:12.5px; font-weight:700}
.ph-btn.ghost{background:transparent; color:var(--muted)}
.ph-letter{background:#161b22; border:1px solid var(--edge); border-radius:14px; padding:11px 13px;
  display:flex; flex-direction:column; gap:4px; cursor:pointer}
.ph-letter.unread{border-color:var(--accent)}
.ph-letter b{font-size:14px}
.ph-letter i{font-size:11.5px; color:var(--muted); font-style:normal}
.ph-letter span{font-size:13px; line-height:1.5; color:#c9d1d9}
.ph-gift{background:var(--accent); color:#03121f; border:0; border-radius:9px; padding:7px;
  font-weight:800; font-size:12.5px; margin-top:5px}

/* ================= talents ================= */
#talents{overflow:auto; background:
  radial-gradient(900px 500px at 40% -10%, rgba(188,140,255,.17), transparent 60%), var(--bg);}
.tl-wrap{max-width:620px; margin:0 auto; padding:calc(56px + env(safe-area-inset-top)) 18px calc(30px + var(--safe-b))}
.tl-wrap h1{font-size:clamp(24px,6vw,32px); margin:0 0 8px; text-align:center}
.tl-wrap .tip{color:var(--muted); font-size:13.5px; text-align:center; margin:0 0 20px; line-height:1.55}
.tl-list{display:flex; flex-direction:column; gap:11px}
.tl-row{display:flex; gap:13px; align-items:flex-start; background:var(--panel);
  border:1px solid var(--edge); border-radius:16px; padding:14px}
.tl-emoji{font-size:32px; line-height:1; flex:none}
.tl-mid{flex:1; display:flex; flex-direction:column; gap:5px; min-width:0}
.tl-mid b{font-size:15px}
.tl-mid b i{font-style:normal; color:var(--gold); font-size:12.5px; font-weight:700}
.tl-perk{font-size:12.5px; color:#3fb950; font-weight:600}
.tl-bar{display:block; height:8px; border-radius:4px; background:#2b3240; overflow:hidden}
.tl-bar u{display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,#bc8cff,#58a6ff); transition:width .4s}
.tl-hint{font-size:11.5px; color:var(--muted)}
.tl-wrap .btn.big{display:block; margin:22px auto 0}

/* ================= talent show ================= */
#theatre{overflow:auto}
#ts-bg{position:absolute; inset:0; background-size:cover; background-position:center}
.ts-panel{
  position:relative; z-index:5; max-width:min(92vw,520px);
  margin:calc(56px + env(safe-area-inset-top)) auto calc(24px + var(--safe-b));
  background:rgba(11,16,32,.92); border:1px solid var(--edge); border-radius:20px;
  padding:22px 24px; backdrop-filter:blur(6px);
  display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center;
}
.ts-panel h1{font-size:clamp(24px,6vw,32px); margin:0}
.ts-panel h2{font-size:clamp(20px,5vw,26px); margin:0}
.ts-panel .tip{color:var(--muted); font-size:13.5px; margin:0; line-height:1.55; white-space:pre-line}
.ts-acts{display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:9px; width:100%}
.ts-act{
  background:var(--panel); border:1px solid var(--edge); border-radius:14px; padding:11px 6px;
  color:var(--fg); display:flex; flex-direction:column; align-items:center; gap:3px;
}
.ts-act.on{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); background:#241d05}
.ts-emoji{font-size:28px; line-height:1}
.ts-name{font-size:12.5px; font-weight:700}
.ts-lv{font-size:11px; color:var(--muted)}
#ts-bar{
  position:relative; width:100%; height:34px; border-radius:17px;
  background:#2b3240; border:1px solid var(--edge); overflow:hidden;
}
.ts-sweet{
  position:absolute; left:36%; width:28%; top:0; bottom:0;
  background:linear-gradient(90deg, rgba(63,185,80,.25), rgba(63,185,80,.55), rgba(63,185,80,.25));
  border-left:2px solid #3fb950; border-right:2px solid #3fb950;
}
#ts-marker{
  position:absolute; top:50%; transform:translate(-50%,-50%); font-size:22px;
  font-style:normal; left:0; transition:none;
}
.ts-meta{display:flex; justify-content:space-between; width:100%; font-size:13px; color:var(--muted); font-weight:700}
#ts-tap{width:100%; font-size:22px; padding:18px}
.ts-board{display:flex; flex-direction:column; gap:6px; width:100%}
.ts-row{
  display:flex; align-items:center; gap:9px; background:var(--panel);
  border:1px solid var(--edge); border-radius:11px; padding:9px 12px; font-size:14px;
}
.ts-row.me{border-color:var(--gold); background:#241d05}
.ts-row span:nth-child(2){flex:1; text-align:left}
.ts-row b{color:var(--gold)}

/* ================= typing your own messages ================= */
.type-row{display:flex; gap:7px; margin-top:8px; width:100%}
.type-row input{
  flex:1; min-width:0; background:#0d1117; border:1px solid var(--edge); color:var(--fg);
  border-radius:999px; padding:10px 15px; font-size:15px; font-family:inherit;
}
.type-row input:focus{outline:2px solid var(--accent); outline-offset:1px}
.type-send{
  background:var(--accent); color:#03121f; border:0; border-radius:999px;
  padding:10px 18px; font-weight:800; font-size:14px; flex:none;
}
.fr-actions .type-row{margin-top:2px}

/* ================= props standing in the world ================= */
#props-layer{position:absolute; inset:0; pointer-events:none; z-index:4}
.prop{position:absolute; bottom:13%; transform:translateX(-50%); filter:drop-shadow(0 6px 9px rgba(0,0,0,.4))}
.prop .item-svg{display:block}
.prop.plant.ready{animation:readybob 1.4s infinite ease-in-out}
@keyframes readybob{0%,100%{translate:0 0}50%{translate:0 -7px}}
.prop.shell{bottom:11%; animation:shellglint 2.6s infinite ease-in-out}
@keyframes shellglint{0%,100%{filter:drop-shadow(0 4px 7px rgba(0,0,0,.4))}
                      50%{filter:drop-shadow(0 4px 7px rgba(0,0,0,.4)) brightness(1.25)}}
.hot .glow.small{width:36px; height:36px}

/* ---- the character doing something ---- */
.actor.acting{animation:bendover .5s ease-in-out}
@keyframes bendover{0%,100%{rotate:0deg}50%{rotate:-13deg}}
.actor.acting.watering{animation:waterlean 1.2s ease-in-out}
@keyframes waterlean{0%{rotate:0deg}25%{rotate:-16deg}75%{rotate:-16deg}100%{rotate:0deg}}
.hero-prop{position:absolute; right:-18%; top:38%; pointer-events:none}
.hero-prop .item-svg{display:block}
.hero-prop .drops{
  position:absolute; left:80%; top:70%; font-size:15px; letter-spacing:-3px;
  animation:dripdown .55s infinite linear;
}
@keyframes dripdown{from{opacity:1; translate:0 0}to{opacity:0; translate:4px 22px}}
.hero-prop .sparkle{font-size:26px; animation:sparklepop .9s ease-out}
@keyframes sparklepop{0%{scale:.3; opacity:0}40%{scale:1.2; opacity:1}100%{scale:1; opacity:0}}

/* ================= you found something ================= */
#reveal{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:rgba(4,7,15,.78); backdrop-filter:blur(4px); padding:20px;
}
.rv-card{
  position:relative; background:var(--panel); border:1px solid var(--gold); border-radius:24px;
  padding:28px 32px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
  max-width:min(90vw,360px); animation:rvin .38s cubic-bezier(.2,1.4,.5,1);
  box-shadow:0 0 60px rgba(240,192,64,.28);
}
@keyframes rvin{from{scale:.5; opacity:0}to{scale:1; opacity:1}}
.rv-burst{
  position:absolute; inset:-40px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(240,192,64,.30), rgba(240,192,64,0) 68%);
  animation:burstpulse 2s infinite ease-in-out;
}
@keyframes burstpulse{0%,100%{scale:1; opacity:.75}50%{scale:1.14; opacity:1}}
#rv-art{margin-bottom:2px}
#rv-art .item-svg{display:block; animation:rvspin 3.4s infinite ease-in-out}
@keyframes rvspin{0%,100%{rotate:-5deg}50%{rotate:5deg}}
#rv-title{margin:0; font-size:16px; color:var(--muted); font-weight:700}
#rv-name{font-size:25px; font-weight:900; color:var(--gold)}
#rv-worth{font-size:14px; color:var(--muted); margin-bottom:8px}

/* ================= your bag ================= */
#bag{overflow:auto; background:
  radial-gradient(900px 500px at 45% -10%, rgba(240,192,64,.15), transparent 60%), var(--bg);}
.bag-wrap{max-width:680px; margin:0 auto; padding:calc(56px + env(safe-area-inset-top)) 18px calc(30px + var(--safe-b))}
.bag-wrap h1{font-size:clamp(24px,6vw,32px); margin:0 0 6px; text-align:center}
.bag-wrap .tip{color:var(--muted); font-size:13.5px; text-align:center; margin:0 0 16px; line-height:1.55}
.bag-list{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); margin-bottom:18px}
.bag-item{
  background:var(--panel); border:1px solid var(--edge); border-radius:16px; padding:14px 10px;
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
}
.bag-art{min-height:78px; display:flex; align-items:flex-end}
.bag-name{font-weight:700; font-size:14.5px}
.bag-n{font-size:12px; color:var(--muted)}
.bag-item .buy{margin-top:6px}
.bag-wrap .btn{display:block; margin:0 auto 12px}
.pa-gift.missed{background:transparent; border-style:dashed; color:var(--muted); font-size:13px}

/* ---- your own show ---- */
.ts-guests{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; width:100%}
.ts-guest{
  display:flex; align-items:center; gap:7px; padding:8px 9px; border-radius:12px; cursor:pointer;
  background:#161b22; border:2px solid #30363d; color:var(--text); font:inherit; text-align:left;
}
.ts-guest .gv{width:30px; height:30px; flex:0 0 30px; border-radius:50%; overflow:hidden; background:#0d1117}
.ts-guest .gv svg{width:100%; height:100%}
.ts-guest .gn{font-size:12.5px; font-weight:700; line-height:1.2}
.ts-guest .gt{font-size:10.5px; color:var(--muted)}
.ts-guest.on{border-color:var(--gold); background:#241d05}
.ts-guest.on::after{content:'✓'; margin-left:auto; color:var(--gold); font-weight:900}
#ts-performer{width:120px; height:150px; display:flex; align-items:flex-end; justify-content:center}
#ts-performer svg{width:100%; height:100%}
.ts-score{font-size:38px; font-weight:900; color:var(--gold); line-height:1}
.ts-posters{display:flex; flex-direction:column; gap:6px; width:100%}
.ts-poster{
  display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px;
  background:#161b22; border:1px solid #30363d; font-size:12.5px;
}
.ts-poster b{color:var(--gold)}
.ts-poster span{flex:1; text-align:left}
.ph-coming{
  margin-left:auto; font-size:11px; font-weight:800; white-space:nowrap;
  color:#0b1020; background:var(--gold); padding:3px 7px; border-radius:999px;
}

/* ---- making table ---- */
.cr-wrap{
  position:absolute; inset:0; overflow-y:auto; padding:64px 14px 24px;
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
}
.cr-wrap h1{font-size:clamp(24px,6vw,32px); margin:0}
.cr-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; width:100%; max-width:720px}
.cr-card{
  display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px;
  background:#161b22; border:2px solid #30363d; text-align:left;
}
.cr-card.able{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold)}
.cr-card.made{opacity:.62}
.cr-emoji{font-size:30px; line-height:1; flex:0 0 auto}
.cr-body{flex:1; min-width:0}
.cr-body b{font-size:13.5px; display:block; margin-bottom:4px}
.cr-needs{display:flex; flex-wrap:wrap; gap:5px}
.cr-need{
  display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700;
  color:var(--muted); background:#0d1117; border:1px solid #30363d; border-radius:999px; padding:2px 6px 2px 3px;
}
.cr-need.ok{color:var(--gold); border-color:var(--gold)}
.cr-need i{width:18px; height:18px; display:block}
.cr-need i svg{width:100%; height:100%}
.cr-card .btn{padding:8px 12px; font-size:12.5px; flex:0 0 auto}
/* the GRAB button lights up while you are holding it */
.pbtn.grab.on{
  background:#0b3d4d; border-color:#7ee0ff; color:#7ee0ff;
  box-shadow:0 0 0 2px #7ee0ff, 0 0 18px #7ee0ff66;
}

/* ---- party games ---- */
#pa-fun{display:flex; align-items:center; gap:9px; margin:0 0 10px; font-size:12px; font-weight:800; color:var(--muted)}
#pa-fun i{flex:1; height:12px; border-radius:999px; background:#161b22; border:1px solid #30363d; overflow:hidden}
#pa-fun u{display:block; height:100%; width:0; border-radius:999px; transition:width .45s ease;
  background:linear-gradient(90deg,#7ee0ff,#ff8fc4,#ffe066)}
#pa-fun b{color:var(--gold); min-width:38px; text-align:right}
#pa-say{min-height:34px; margin:0 0 12px; font-size:14px; color:var(--text)}
.pa-acts{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:9px; margin-bottom:18px}
.pa-act{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:11px 8px; border-radius:14px;
  background:#161b22; border:2px solid #30363d; color:var(--text); font:inherit; cursor:pointer;
}
.pa-act:disabled{opacity:.45; cursor:default}
.pa-act .e{font-size:26px; line-height:1}
.pa-act .n{font-size:12.5px; font-weight:700}
.pa-act.done{border-color:#3fb950}
#pa-play{margin-bottom:16px}
#pa-play-art{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:8px; min-height:96px; align-items:flex-end}
#pa-play-art .pv{width:74px}
#pa-play-art .pv svg{width:100%; height:auto}
#pa-play-art .spot{
  width:78px; height:78px; border-radius:16px; background:#161b22; border:2px solid #30363d;
  font-size:34px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#pa-play-art .spot.found{border-color:var(--gold); background:#241d05}
#pa-play-bar{position:relative; height:26px; border-radius:999px; background:#161b22;
  border:1px solid #30363d; margin:8px 0; overflow:hidden}
#pa-play-bar .pa-sweet{position:absolute; left:38%; width:24%; top:0; bottom:0; background:#ffe06633; border-left:2px solid var(--gold); border-right:2px solid var(--gold)}
#pa-play-marker{position:absolute; top:1px; font-style:normal; font-size:20px; transform:translateX(-50%)}
.pa-play-btns{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.pa-play-btns .btn{padding:11px 16px}
/* ---- noughts and crosses ---- */
.ttt{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:min(260px,74vw); margin:0 auto}
.ttt-c{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:clamp(28px,9vw,40px); line-height:1; border-radius:12px; cursor:pointer;
  background:#161b22; border:2px solid #30363d; color:var(--text);
}
.ttt-c:disabled{cursor:default}
.ttt-c.win{border-color:var(--gold); background:#241d05}
.pill.warn{background:#3d1d1d; border-color:#f85149; animation:nag 1.8s ease-in-out infinite}
@keyframes nag{0%,100%{opacity:1}50%{opacity:.55}}
.memo{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:10px 0}
.memo-c{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:26px;
  border-radius:10px; background:#161b22; border:2px solid #30363d; color:var(--text); cursor:pointer;
}
.memo-c.got{border-color:#3fb950; background:#0f2417}
.memo-c:disabled{cursor:default}

/* ---- the telly actually shows something now ---- */
.tv-screen{position:relative; overflow:hidden}
.tv-pic{position:absolute; inset:0; z-index:0}
.tv-pic .tvsvg{width:100%; height:100%; display:block}
.tv-screen .tv-chan, .tv-screen .tv-text{position:relative; z-index:2}
.tv-text{background:#0b1020cc; border-radius:8px; padding:6px 8px}
.tv-text.in{animation:tvline .45s ease-out}
@keyframes tvline{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.tv-scan{
  position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background:repeating-linear-gradient(180deg,#0000 0 2px,#00000026 2px 4px);
  animation:tvflicker 4.5s steps(60) infinite;
}
@keyframes tvflicker{0%,97%{opacity:.55}98%{opacity:.2}99%{opacity:.75}100%{opacity:.55}}
.tv-anchor{animation:tvbob 2.6s ease-in-out infinite; transform-origin:52px 40px}
@keyframes tvbob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-2deg)}}
.tv-mouth{animation:tvtalk .5s steps(2) infinite}
@keyframes tvtalk{0%,100%{transform:scaleY(1)}50%{transform:scaleY(2.2)}}
.tv-globe{animation:tvspin 6s linear infinite; transform-origin:158px 30px}
@keyframes tvspin{to{transform:rotate(360deg)}}
.tv-ticker{animation:tvroll 12s linear infinite}
@keyframes tvroll{from{transform:translateX(200px)}to{transform:translateX(-420px)}}
.tv-skater{animation:tvride 3.4s ease-in-out infinite}
@keyframes tvride{
  0%,100%{transform:translate(38px,44px) rotate(-38deg)}
  50%{transform:translate(162px,44px) rotate(38deg)}
}
.tv-cat{animation:tvchase 3.2s linear infinite}
@keyframes tvchase{from{transform:translate(-30px,58px)}to{transform:translate(230px,58px)}}
.tv-toast{animation:tvchase 3.2s linear infinite; animation-delay:-.55s}

/* ================= café shift ================= */
#cafe{overflow-y:auto}
#cf-hud{display:flex; gap:7px; flex-wrap:wrap; justify-content:center;
  padding:calc(10px + env(safe-area-inset-top)) 10px 6px}
.cf-tabs{display:flex; gap:7px; justify-content:center; padding:4px 10px 10px; flex-wrap:wrap}
.cf-tab{padding:9px 14px; border-radius:999px; background:#161b22; border:2px solid #30363d;
  color:var(--text); font:inherit; font-weight:700; font-size:13px; cursor:pointer}
.cf-tab.on{border-color:var(--gold); background:#241d05; color:var(--gold)}
.cf-tab .dot{color:#3fb950}
.cf-station{max-width:620px; margin:0 auto; padding:0 12px 10px; text-align:center}

.cf-cust{display:flex; align-items:flex-start; gap:10px; text-align:left; margin-bottom:8px}
.cf-face{font-size:46px; line-height:1; flex:0 0 auto}
.cf-bubble{flex:1; background:#161b22; border:2px solid #30363d; border-radius:14px;
  padding:10px 12px; font-size:14px; min-height:44px}
.cf-thread{display:flex; flex-direction:column; gap:5px; margin-bottom:8px; max-height:130px; overflow-y:auto}
.cf-msg{padding:6px 10px; border-radius:12px; font-size:12.5px; max-width:85%; text-align:left}
.cf-msg.me{align-self:flex-end; background:#1f6feb33; border:1px solid #1f6feb}
.cf-msg.them{align-self:flex-start; background:#161b22; border:1px solid #30363d}
.cf-ask{display:flex; gap:7px; margin-bottom:7px}
.cf-ask input{flex:1; padding:11px 12px; border-radius:12px; background:#0d1117;
  border:2px solid #30363d; color:var(--text); font:inherit; font-size:15px}
.cf-quick{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:10px}
.cf-quick button{padding:7px 11px; border-radius:999px; background:#161b22; border:1px solid #30363d;
  color:var(--muted); font:inherit; font-size:12px; cursor:pointer}
.cf-pad{background:#161b22; border:2px dashed #30363d; border-radius:14px; padding:10px; text-align:left}
.cf-pad h3{margin:0 0 6px; font-size:14px}
.cf-line{display:flex; gap:7px; font-size:13px; padding:3px 0; border-bottom:1px dotted #30363d}
.cf-line b{color:var(--gold)}
.cf-line.unknown{opacity:.45; font-style:italic}

.cf-tray{display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:8px; margin-top:8px}
.cf-item{display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 4px; border-radius:13px;
  background:#161b22; border:2px solid #30363d; color:var(--text); font:inherit; cursor:grab;
  touch-action:none; user-select:none}
.cf-item .e{font-size:26px; line-height:1; pointer-events:none}
.cf-item .n{font-size:11px; font-weight:700; pointer-events:none}
.cf-item.picked{border-color:var(--gold); background:#241d05}
.cf-ghost{position:fixed; z-index:99; font-size:34px; pointer-events:none; transform:translate(-50%,-50%); opacity:.95}

#cf-serve{display:block; margin:10px auto 22px; width:min(420px,90%)}

/* ---- the stations are the actual photographs, with live areas on top ---- */
.cf-scene{position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
  border:2px solid #30363d; background:#0d1117}
.cf-scene img{width:100%; height:100%; object-fit:cover; display:block}
.cf-zone{position:absolute; border-radius:10px; cursor:pointer; touch-action:none;
  border:2px solid transparent; transition:background .12s, border-color .12s}
.cf-zone:hover{background:#ffe06622}
.cf-zone.over, .cf-zone.hot{border-color:var(--gold); background:#ffe06638;
  box-shadow:0 0 0 2px #ffe06655, inset 0 0 22px #ffe06633}
.cf-zone .lab{position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  font-size:10px; font-weight:800; background:#0b1020cc; color:#fff; padding:1px 5px;
  border-radius:999px; white-space:nowrap; pointer-events:none}
/* the counter, measured off the picture */
.cf-zone.board  {left:25%;  top:71%; width:47%; height:29%}
.cf-zone.toaster{left:78%;  top:49%; width:19%; height:33%}
/* the coffee machine, measured off the picture */
.cf-zone.grinder{left:5%;   top:4%;  width:24%; height:92%}
.cf-zone.group  {left:44%;  top:27%; width:19%; height:33%}
.cf-zone.cupzone{left:45%;  top:60%; width:17%; height:26%}
.cf-zone.steamer{left:83%;  top:28%; width:14%; height:48%}
/* what you have made, drawn on top of the picture */
.cf-sandwich-art{position:absolute; left:34%; top:34%; width:29%; pointer-events:none;
  filter:drop-shadow(0 6px 10px #0008)}
.cf-sandwich-art svg{width:100%; height:auto}
.cf-cup-art{position:absolute; left:46%; top:56%; width:14%; pointer-events:none}
.cf-cup-art svg{width:100%; height:auto}
.cf-breads{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:8px 0}

/* ---- the recipe card that teaches the machine ---- */
.cf-recipe{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:9px 0 4px}
.cf-step{display:flex; align-items:center; gap:5px; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; background:#161b22; border:2px solid #30363d; color:var(--muted)}
.cf-step.done{border-color:#3fb950; color:#3fb950; background:#0f2417}
.cf-step.next{border-color:var(--gold); color:var(--gold); background:#241d05;
  animation:cfnext 1.3s ease-in-out infinite}
@keyframes cfnext{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.cf-step .num{opacity:.6; font-size:10px}
.cf-zone.next{border-color:var(--gold); background:#ffe06630; animation:cfnext 1.3s ease-in-out infinite}
.cf-item.next{border-color:var(--gold); animation:cfnext 1.3s ease-in-out infinite}
.cf-howsteps{display:flex; flex-direction:column; gap:6px; width:100%; text-align:left; font-size:13px}
.cf-howsteps > div{background:#161b22; border:1px solid #30363d; border-radius:10px; padding:7px 10px}
.cf-howsteps span{display:block; color:var(--muted); font-size:11.5px; margin-top:2px}
#so-bg{position:absolute; inset:0; background-size:cover; background-position:center}
#sleepover .pa-wrap{position:relative; z-index:1}
#sleepover h1, #sleepover .tip{text-shadow:0 2px 10px #000a}
#pa-fun-so{display:flex; align-items:center; gap:9px; margin:0 0 10px; font-size:12px;
  font-weight:800; color:#cbd5e1; text-shadow:0 2px 8px #000}
#pa-fun-so i{flex:1; height:12px; border-radius:999px; background:#161b22cc; border:1px solid #30363d; overflow:hidden}
#pa-fun-so u{display:block; height:100%; width:0; border-radius:999px; transition:width .45s ease;
  background:linear-gradient(90deg,#7ee0ff,#c084fc,#ffe066)}
#pa-fun-so b{color:var(--gold); min-width:38px; text-align:right}
#so-play-art{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:8px; min-height:80px; align-items:flex-end}
#so-play-art .pv{width:70px}
#so-play-art .pv svg{width:100%; height:auto}
#so-play-art .spot{width:74px; height:74px; border-radius:16px; background:#161b22dd; border:2px solid #30363d;
  font-size:32px; display:flex; align-items:center; justify-content:center; cursor:pointer}
#pa-bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.55}
#party .pa-wrap{position:relative; z-index:1}
#party h1, #party .tip{text-shadow:0 2px 10px #000a}


/* ============ City Road: jobs, the shop you can rob, the police, ============
   ============ sport and the airport. See citylife.js.            ============ */
.wantedpill{background:rgba(160,30,30,.9);color:#fff;letter-spacing:-2px;
  animation:wantedpulse 1.1s infinite}
@keyframes wantedpulse{50%{opacity:.45}}

.city-body{display:block}
.city-goods,.city-board{display:grid;gap:10px;margin:14px 0}
.city-good,.city-flight{display:grid;grid-template-columns:44px 1fr auto auto;gap:10px;
  align-items:center;background:#fbf7ef;border-radius:16px;padding:10px 12px;
  /* the page text is light on a dark background, so a light card needs its own
     colour or every label comes out white on white and vanishes */
  color:#22252e}
.city-flight{grid-template-columns:44px 1fr auto;background:#1d2c44;color:#ffd96a}
.city-ic{font-size:28px;text-align:center}
.city-nm{font-weight:800;font-size:16px;text-align:left;color:inherit}
.city-nm i{display:block;font-style:normal;font-weight:700;font-size:13px;opacity:.72;color:inherit}
.city-good .btn,.city-flight .btn{padding:10px 14px;font-size:14px;margin:0}
/* "Pocket it" must not read as disabled — it is a real choice */
.city-good .city-nick{background:#f2dede;color:#992222;border:2px solid #e0b8b8;opacity:1}
.city-good .btn:disabled{opacity:.45}

/* the cell */
.city-cell{position:relative;height:150px;background:#39405a;border-radius:18px;
  overflow:hidden;display:grid;place-items:center;margin:10px 0}
.city-you{font-size:56px}
.city-bars{position:absolute;inset:0;background:repeating-linear-gradient(90deg,
  transparent 0 26px,#9aa4bd 26px 33px)}
.city-clock{font-size:19px}

/* the building site */
.city-bar{height:10px;background:rgba(0,0,0,.18);border-radius:99px;overflow:hidden;margin:8px 0 12px}
.city-bar i{display:block;height:100%;width:100%;background:#f0913f;transition:width .1s linear}
.city-wall{display:grid;grid-template-columns:repeat(var(--c),1fr);gap:4px;margin-bottom:10px}
.city-brick{aspect-ratio:2/1;border:0;border-radius:5px;background:#e9e2d4;
  cursor:pointer;padding:0}
.city-brick.in{background:#a4574a}
.city-brick.just{animation:clpop .3s}
@keyframes clpop{0%{transform:scale(.6)}60%{transform:scale(1.15)}}

/* penalties */
.city-pitch{position:relative;height:190px;border-radius:18px;overflow:hidden;
  background:linear-gradient(#8fd0f0 52%,#5aad4a 52%);margin:10px 0}
.city-goal{position:absolute;left:8%;right:8%;top:12%;height:58%;
  border:6px solid #fff;border-bottom:0;background:rgba(255,255,255,.14)}
.city-keeper,.city-ball{position:absolute;left:50%;top:70%;font-size:32px;
  transform:translate(-50%,-50%);transition:.5s cubic-bezier(.3,1.4,.5,1)}
.city-ball{font-size:26px;top:116%}
.city-corners{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.city-corner{font-size:26px;padding:16px 0;margin:0}

/* the flight */
.city-sky{height:170px;border-radius:18px;margin:10px 0;overflow:hidden;
  background:linear-gradient(#7fc0f0,#dff0fb);display:grid;place-items:center}
.city-plane{font-size:64px;animation:clcross 2.6s linear}
@keyframes clcross{from{transform:translateX(-58vw)}to{transform:translateX(58vw)}}


/* ============ cars and boats — see wheels.js ============ */
.wh-body{display:block}
.wh-list{display:grid;gap:9px;margin:12px 0}
.wh-row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;
  background:#fbf7ef;color:#22252e;border-radius:16px;padding:10px 12px}
.wh-row.on{outline:3px solid #3f7fe0}
.wh-ic{font-size:28px;text-align:center}
.wh-nm{font-weight:800;font-size:15px;text-align:left}
.wh-nm i{display:block;font-style:normal;font-weight:600;font-size:12.5px;opacity:.7}
.wh-row .btn{margin:0;padding:10px 14px;font-size:13px}

.wh-road{position:relative;height:46vh;max-height:340px;border-radius:18px;overflow:hidden;
  background:repeating-linear-gradient(#4a4f58 0 34px,#545a64 34px 68px);margin:10px 0}
.wh-rrow{display:grid;grid-template-columns:repeat(3,1fr);height:14.28%}
.wh-cell{display:grid;place-items:center;font-size:clamp(20px,6vw,30px)}
.wh-you{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  font-size:clamp(24px,7vw,36px);transition:left .12s}
.wh-you.bump{animation:whbump .5s}
@keyframes whbump{50%{transform:translateX(-50%) rotate(28deg) scale(1.2)}}

.wh-sea{position:relative;height:46vh;max-height:340px;border-radius:18px;overflow:hidden;
  background:linear-gradient(#4fa8d8,#2d6f9e);margin:10px 0}
.wh-rock,.wh-fish{position:absolute;transform:translate(-50%,-50%);font-size:clamp(18px,5vw,26px)}
.wh-boat{position:absolute;bottom:8%;left:50%;transform:translate(-50%,-50%);
  font-size:clamp(24px,7vw,36px);z-index:2}
.wh-boat.bump{animation:whbump .5s}

.wh-steer{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wh-steer .btn{margin:0;padding:16px;font-size:22px}
.wh-steer .btn.down{filter:brightness(1.25)}


/* ============ the mirror: actually trying things on ============ */
.mr-wrap{max-width:520px;margin:auto;padding:66px 14px 14px;text-align:center}
.mr-wrap h1{font-size:clamp(20px,5.5vw,28px);margin:0 0 10px}
.mr-glass{position:relative;width:min(64vw,230px);height:min(78vw,300px);margin:0 auto 6px;
  border-radius:120px 120px 18px 18px;background:linear-gradient(160deg,#dfe9f4,#b9cee2);
  border:9px solid #b98a4a;box-shadow:inset 0 8px 26px rgba(255,255,255,.6),0 10px 26px rgba(0,0,0,.4);
  display:grid;place-items:end center;overflow:hidden}
.mr-you{padding-bottom:6px}
.mr-label{font-size:15px;font-weight:800;margin:6px 0 10px}
.mr-tabs{display:flex;gap:6px;justify-content:center;margin-bottom:8px}
.mr-tab{border:0;border-radius:12px;padding:9px 13px;background:#2a3049;color:#eaf0ff;
  font-size:13px;font-weight:700;cursor:pointer}
.mr-tab.on{background:#3f7fe0}
.mr-rail{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory}
.mr-item{flex:none;width:96px;border:0;border-radius:14px;padding:8px 5px;background:#2a3049;
  color:#eaf0ff;cursor:pointer;scroll-snap-align:center;display:flex;flex-direction:column;
  align-items:center;gap:3px}
.mr-item.on{background:#3f7fe0;outline:3px solid #fff}
.mr-item.have{box-shadow:inset 0 0 0 2px #48d07a}
.mr-item span{font-size:11px;font-weight:700;line-height:1.2}
.mr-item i{font-style:normal;font-size:11px;opacity:.8}
.mr-btns{display:grid;gap:7px;margin-top:6px}
.mr-btns .btn{margin:0}

/* the copper on your tail */
#cop{transition:left .45s linear;z-index:6}
#cop .cop-body{font-size:clamp(38px,11vw,64px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
  animation:copbob .5s infinite alternate ease-in-out}
@keyframes copbob{to{transform:translateY(-5px)}}

/* the cells */
.jl-wrap{max-width:460px;margin:auto;padding:70px 16px 16px;text-align:center}
.jl-wrap h1{font-size:clamp(20px,5.5vw,28px);margin:0 0 12px}
.jl-cell{position:relative;height:210px;border-radius:16px;overflow:hidden;
  background:linear-gradient(#3a3f52,#2b3040);display:grid;place-items:end center;margin-bottom:10px}
.jl-you{padding-bottom:6px}
.jl-bars{position:absolute;inset:0;background:repeating-linear-gradient(90deg,
  transparent 0 26px,rgba(190,198,214,.9) 26px 33px)}
.jl-clock{font-size:clamp(34px,10vw,52px);font-weight:900;margin:4px 0 6px;
  font-variant-numeric:tabular-nums;letter-spacing:2px}
.jl-wrap .tip.small{font-size:12px;opacity:.55;margin-top:10px}

/* ---- actually looking after the animal ---- */
.pr-wrap{max-width:480px;margin:auto;padding:70px 16px 16px;text-align:center}
.pr-wrap h1{font-size:clamp(20px,5.5vw,28px);margin:0 0 10px}
.pr-bars{display:flex;gap:10px;justify-content:center;margin-bottom:10px}
.pr-bar{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}
.pr-bar i{display:block;width:78px;height:9px;border-radius:99px;background:rgba(0,0,0,.3);overflow:hidden}
.pr-bar u{display:block;height:100%;background:#48d07a;text-decoration:none}
.pr-room{position:relative;height:240px;border-radius:18px;overflow:hidden;
  background:linear-gradient(#e8dcc8 62%,#a8794a 62%);margin-bottom:10px}
.pr-pet{position:absolute;bottom:12px;left:22%;transform:translateX(-50%);
  transition:left 1s ease-in-out;cursor:grab;touch-action:none}
.pr-pet.walk{animation:prwalk .3s infinite alternate}
@keyframes prwalk{to{transform:translateX(-50%) translateY(-4px)}}
.pr-pet.munch{animation:prmunch .3s}
@keyframes prmunch{50%{transform:translateX(-50%) scaleY(.9)}}
.pr-pet.happy{filter:brightness(1.15)}
.pr-bowl{position:absolute;bottom:14px;left:58%;transform:translateX(-50%);
  font-size:44px;cursor:pointer;line-height:1}
.pr-food{position:absolute;left:50%;top:2px;transform:translateX(-50%);font-size:15px;letter-spacing:-4px}
.pr-bag{position:absolute;bottom:16px;right:8%;font-size:38px;cursor:pointer;
  transition:transform .15s;line-height:1}
.pr-bag.held{transform:translateY(-26px) rotate(-18deg) scale(1.15)}
.pr-hearts{position:absolute;inset:0;pointer-events:none}
.pr-heart{position:absolute;bottom:70px;font-size:20px;animation:prheart 1.1s ease-out forwards}
@keyframes prheart{to{transform:translateY(-70px);opacity:0}}
.pr-say{font-size:14px;min-height:20px;margin:0 0 12px;opacity:.85}

.ab-flying{position:fixed;inset:0;z-index:80;display:grid;place-items:center;text-align:center;
  background:linear-gradient(#7fc0f0,#dff0fb);color:#20304a;font-size:19px;font-weight:800}
.ab-plane{font-size:74px;animation:abcross 2.6s linear}
@keyframes abcross{from{transform:translateX(-62vw)}to{transform:translateX(62vw)}}

.city-cont{font-size:12px;text-transform:uppercase;letter-spacing:.7px;opacity:.6;
  margin:14px 0 6px;text-align:left;font-weight:800}
.city-flight.been{opacity:.72}

/* where you are */
#whereami{position:absolute;top:52px;left:50%;transform:translateX(-50%);z-index:8;
  background:rgba(11,16,32,.74);backdrop-filter:blur(4px);border-radius:14px;
  padding:6px 16px;text-align:center;max-width:92vw;pointer-events:none}
#whereami b{display:block;font-size:clamp(14px,4vw,18px);font-weight:800;letter-spacing:.2px}
#whereami i{display:block;font-style:normal;font-size:11.5px;opacity:.65;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Looking for things — really hidden, not narrated. */
.hunt-field{position:relative; width:100%; height:100%; background-size:cover; background-position:center; overflow:hidden}
.hunt-bar{position:absolute; top:70px; left:50%; transform:translateX(-50%); z-index:6;
  background:rgba(10,14,26,.82); color:#fff; padding:8px 16px; border-radius:999px; font-size:16px}
.hunt-t{position:absolute; transform:translate(-50%,-50%); background:none; border:0; padding:0;
  cursor:pointer; z-index:4; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.hunt-t.tucked{z-index:2; opacity:.82; transform:translate(-50%,-50%) scale(.72)}
.hunt-fg{position:absolute; left:0; right:0; bottom:0; height:24%; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, transparent 0, rgba(0,0,0,.10) 40%, rgba(0,0,0,.34) 100%);
}
.hunt-t.got{animation:hunt-pop .45s ease forwards; pointer-events:none; z-index:5}
@keyframes hunt-pop{50%{transform:translate(-50%,-50%) scale(1.5)}
  100%{transform:translate(-50%,-90%) scale(1.1); opacity:.55; filter:drop-shadow(0 0 10px #ffd75e)}}
.hunt-out{position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:6}

/* Inside the plane. Drawn rather than photographed: a curved cabin roof,
   overhead lockers, a row of oval windows with the clouds sliding past, and
   the tops of the seats in front of you. */
#world-bg.cabin{
  background-color:#e8ebf1;
  background-image:
    /* the tops of the seats in front of you */
    repeating-linear-gradient(90deg,#39477e 0 10%,#2b3663 10% 11%,transparent 11% 13%),
    /* the carpet down the aisle */
    linear-gradient(180deg,#5b6690,#454f77),
    /* the cabin wall, with oval holes cut in it for the windows */
    radial-gradient(ellipse 26px 34px at 75px 50%,transparent 0 96%,#aeb7c6 96% 100%,#d5dae3 100%),
    /* clouds sliding past outside */
    radial-gradient(ellipse 54px 20px at 90px 66%,#fff 0 72%,transparent 73%),
    radial-gradient(ellipse 74px 24px at 300px 34%,#f4f9ff 0 72%,transparent 73%),
    linear-gradient(180deg,#6fb6e9,#a6d6f4),
    /* overhead lockers, then the curve of the roof */
    linear-gradient(180deg,#f0f3f8 0 70%,#cfd5e0 100%),
    linear-gradient(180deg,#f7f9fc,#dfe4ec);
  background-size:100% 17%, 100% 20%, 150px 20%, 400px 20%, 400px 20%, 100% 20%, 100% 11%, 100% 100%;
  background-position:0 100%, 0 100%, 0 32%, 0 32%, 0 32%, 0 32%, 0 18%, 0 0;
  background-repeat:repeat-x, no-repeat, repeat-x, repeat-x, repeat-x, no-repeat, no-repeat, no-repeat;
  animation:cabin-clouds 24s linear infinite;
}
@keyframes cabin-clouds{
  from{background-position:0 100%,0 100%,0 32%,0 32%,0 32%,0 32%,0 18%,0 0}
  to  {background-position:0 100%,0 100%,0 32%,-400px 32%,-400px 32%,0 32%,0 18%,0 0}
}

/* The little screen in the seat in front of you. */
.film-room{position:absolute; inset:0; background:#0a0d16; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px}
.film-screen{width:min(92%,560px); aspect-ratio:16/10; border-radius:10px; overflow:hidden;
  border:8px solid #1b2233; box-shadow:0 0 44px rgba(120,170,255,.28); position:relative; background:#000}
.film-pic{position:absolute; inset:0; overflow:hidden}
.film-actor{position:absolute; transform:translateX(-50%); line-height:1;
  transition:left 3.2s linear; filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.film-cap{position:absolute; left:0; right:0; bottom:0; padding:8px 12px; z-index:3;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72)); color:#fff;
  font-size:clamp(13px,3.4vw,17px); text-align:center}
.film-title{color:#cbd6ea; font-size:16px}
.film-run{width:min(92%,560px); height:5px; border-radius:99px; background:#1b2233; overflow:hidden}
.film-run i{display:block; height:100%; width:0; background:#58a6ff; transition:width .5s linear}

/* The window, and what is going past it. */
.ph-wall{position:absolute; inset:0; background:linear-gradient(180deg,#eef1f6,#d6dbe4);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px}
.ph-glass{position:relative; width:min(78%,420px); aspect-ratio:3/4; border-radius:46% / 40%;
  overflow:hidden; box-shadow:0 0 0 14px #c8cfda, 0 0 0 20px #aeb7c6, 0 12px 30px rgba(0,0,0,.28)}
.ph-sky{position:absolute; inset:-10%; background:
  radial-gradient(ellipse 70px 26px at 20% 30%,#fff 0 70%,transparent 71%),
  radial-gradient(ellipse 90px 30px at 70% 55%,#f6fbff 0 70%,transparent 71%),
  radial-gradient(ellipse 60px 22px at 45% 80%,#fff 0 70%,transparent 71%),
  linear-gradient(180deg,#4f9fd8 0 42%,#7fc0ea 42% 62%,#2f6f9e 62%);
  animation:ph-drift 15s linear infinite}
@keyframes ph-drift{from{transform:translateX(0)} to{transform:translateX(-24%)}}
.ph-s{position:absolute; transform:translate(-50%,-50%); background:none; border:0; padding:0;
  line-height:1; cursor:pointer; z-index:2; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.ph-s.seen{animation:hunt-pop .45s ease forwards; pointer-events:none}
.ph-frame{position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow:inset 0 0 40px rgba(255,255,255,.28), inset 0 -30px 40px rgba(0,0,0,.16)}
.ph-said{color:#2b3550; font-size:clamp(14px,3.6vw,17px); text-align:center; max-width:92%}

/* Under the water off Cape Town. */
.sc-sea{position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:crosshair;
  background:linear-gradient(180deg,#2f9ad0 0 10%,#1d76ad 34%,#12557f 62%,#0d3f61 88%,#c9b184 96%)}
.sc-rays{position:absolute; inset:0; pointer-events:none; opacity:.30; filter:blur(7px);
  background:repeating-linear-gradient(96deg,rgba(255,255,255,.20) 0 16px,transparent 16px 140px);
  animation:sc-ray 9s ease-in-out infinite alternate}
@keyframes sc-ray{from{transform:translateX(-20px)} to{transform:translateX(24px)}}
.sc-kelp{position:absolute; left:0; right:0; bottom:0; height:46%; pointer-events:none; z-index:1}
.sc-kelp span{position:absolute; bottom:-2%; width:13px; border-radius:60% 60% 20% 20%/70% 70% 8% 8%;
  background:linear-gradient(180deg,rgba(46,132,84,.35),rgba(20,84,54,.9));
  transform-origin:bottom center; animation:sc-sway 6s ease-in-out infinite alternate;
  box-shadow:inset -3px 0 4px rgba(0,0,0,.22)}
@keyframes sc-sway{from{transform:skewX(-7deg) scaleY(.97)} to{transform:skewX(7deg) scaleY(1)}}
.sc-fish,.sc-find,.sc-diver{position:absolute; transform:translate(-50%,-50%); line-height:1;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.sc-fish{pointer-events:none; z-index:2}
.sc-find{font-size:34px; z-index:3; animation:sc-bob 3s ease-in-out infinite alternate}
@keyframes sc-bob{from{transform:translate(-50%,-50%) rotate(-5deg)} to{transform:translate(-50%,-46%) rotate(5deg)}}
.sc-find.taken{animation:hunt-pop .5s ease forwards}
.sc-diver{font-size:42px; z-index:4; transition:none}
.sc-diver.kicking{animation:sc-kick .45s ease-in-out infinite alternate}
@keyframes sc-kick{from{transform:translate(-50%,-50%) rotate(-7deg)} to{transform:translate(-50%,-50%) rotate(7deg)}}
.sc-air{position:absolute; top:70px; left:50%; transform:translateX(-50%); z-index:6;
  background:rgba(6,26,42,.8); color:#fff; padding:7px 14px; border-radius:99px;
  display:flex; align-items:center; gap:9px; font-size:14px}
.sc-air .sc-track{display:block; width:130px; height:10px; border-radius:99px;
  background:rgba(255,255,255,.22); overflow:hidden}
.sc-air .sc-track u{display:block; height:100%; width:100%; background:#42d17a; text-decoration:none}
.sc-air .sc-track u.low{background:#ff8f5e}
.sc-said{position:absolute; left:50%; bottom:74px; transform:translateX(-50%); z-index:6;
  background:rgba(6,26,42,.82); color:#fff; padding:8px 14px; border-radius:12px;
  font-size:clamp(13px,3.4vw,16px); text-align:center; max-width:90%}
.sc-up{position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:6}

/* The doctor's room. */
.dr-room{position:absolute; inset:0; background:linear-gradient(180deg,#eef6fb,#dcecf5);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:76px 16px 20px}
.dr-doc{font-size:46px; line-height:1}
.dr-say{background:#fff; border:1px solid #cbdbe6; border-radius:14px; padding:10px 14px;
  color:#22364a; font-size:clamp(13px,3.5vw,16px); text-align:center; max-width:94%}
.dr-body{position:relative; width:min(82%,380px); aspect-ratio:3/4; flex:0 1 auto;
  max-height:56vh; touch-action:none;
  background:linear-gradient(180deg,#fff,#f2f8fc); border:1px solid #cddce7; border-radius:18px}
.dr-you{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:min(52vw,215px); line-height:1; opacity:.22}
.dr-mouth{position:absolute; left:50%; top:16%; transform:translate(-50%,-50%); z-index:3;
  background:#fff; border:2px solid #7fb4d6; border-radius:14px; padding:8px 12px; font-size:28px;
  display:flex; flex-direction:column; align-items:center; cursor:pointer}
.dr-mouth span{font-size:11px; color:#5b7d95}
.dr-chest{position:absolute; inset:0; z-index:2}
.dr-scope{position:absolute; left:50%; top:60%; transform:translate(-50%,-50%); font-size:38px;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))}
.dr-beat{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:16px;
  opacity:.15; animation:dr-beat 1s ease-in-out infinite}
@keyframes dr-beat{50%{transform:translate(-50%,-50%) scale(1.28)}}
.dr-sore{position:absolute; transform:translate(-50%,-50%); z-index:3; width:26px; height:26px;
  border-radius:50%; background:radial-gradient(circle,#ff6a5e 0 42%,rgba(255,106,94,.28) 60%,transparent 70%);
  animation:dr-sore 1.1s ease-in-out infinite; font-size:26px; text-align:center; line-height:26px}
.dr-sore.patched{background:none; animation:none}
@keyframes dr-sore{50%{transform:translate(-50%,-50%) scale(1.35)}}
.dr-plaster{position:absolute; transform:translate(-50%,-50%); font-size:34px;
  z-index:4; cursor:grab; touch-action:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.dr-read{min-height:26px; color:#22364a; font-size:15px; display:flex; align-items:center; gap:8px}
.dr-bar{display:inline-block; width:110px; height:9px; border-radius:99px; background:#cddce7; overflow:hidden}
.dr-bar u{display:block; height:100%; background:#58a6ff; text-decoration:none}
.dr-out{margin-top:2px}