/* shared topic UI */

.topbar > a.back,.topbar a.back{
  display:inline-flex !important;align-items:center;justify-content:center;
  width:auto !important;min-width:42px;height:42px;padding:0 14px !important;
  border-radius:999px !important;border:3px solid var(--ink);background:var(--sun);
  font-family:var(--font-d);font-size:18px;flex:none;text-decoration:none;white-space:nowrap;box-sizing:border-box;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--font-b);color:var(--ink);background:var(--bg);font-size:18px;line-height:1.7;overflow-x:clip;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:4px solid var(--sun);outline-offset:3px;border-radius:12px}
html.lang-en .zh{display:none!important}
html.lang-zh .en{display:none!important}

.topbar{position:fixed;inset:12px 12px auto;z-index:50;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;background:var(--bar);backdrop-filter:blur(10px);border:3px solid var(--ink);border-radius:999px;box-shadow:0 4px 0 var(--ink)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--font-d);font-size:20px;white-space:nowrap}
.nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav a{font-family:var(--font-d);font-size:17px;text-decoration:none;padding:6px 12px;border-radius:999px;white-space:nowrap}
.nav a:hover,.nav a.active{background:var(--accent);color:var(--ink)}
.lang-toggle{display:flex;gap:2px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:2px;flex:none}
.lang-toggle button{font-family:var(--font-d);font-size:15px;padding:4px 10px;border-radius:999px}
.lang-toggle button.on{background:var(--accent-2);color:#fff}
.sound-toggle{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--purple);color:#fff;border:3px solid var(--ink);flex:none}
.sound-toggle[aria-pressed="false"]{background:#aaa}
.sound-toggle[aria-pressed="false"] .wave{opacity:0}

/* Voice picker toggle + sheet */
.voice-toggle{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sun,#FFC83D);color:var(--ink,#2B2118);border:3px solid var(--ink,#2B2118);flex:none;font-size:20px;line-height:1;box-shadow:0 3px 0 var(--ink,#2B2118)}
.voice-toggle:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink,#2B2118)}
.voice-toggle[aria-expanded="true"]{background:var(--orange,#FF8A3D);color:#fff}
.voice-toggle-float{position:fixed;top:14px;right:72px;z-index:80}
.voice-sheet{position:fixed;inset:0;z-index:120;display:none;align-items:flex-end;justify-content:center;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
.voice-sheet.open{display:flex}
.voice-sheet-backdrop{position:absolute;inset:0;background:rgba(43,33,24,.35)}
.voice-sheet-panel{position:relative;z-index:1;width:min(440px,100%);max-height:min(78vh,640px);overflow:auto;background:var(--cream,#FFF6E5);border:4px solid var(--ink,#2B2118);border-radius:28px;box-shadow:0 10px 0 var(--ink,#2B2118);padding:18px 16px 20px;display:flex;flex-direction:column;gap:12px}
.voice-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.voice-sheet-head h2{font-family:var(--font-d,"ZCOOL KuaiLe",sans-serif);font-weight:400;font-size:24px;line-height:1.2;margin:0}
.voice-sheet-close{width:44px;height:44px;border-radius:50%;border:3px solid var(--ink,#2B2118);background:#fff;font-size:28px;line-height:1;display:grid;place-items:center;flex:none}
.voice-chips{display:flex;flex-wrap:wrap;gap:8px}
.voice-chip{min-height:44px;padding:8px 14px;border-radius:999px;border:3px solid var(--ink,#2B2118);background:#fff;font-family:var(--font-d,"ZCOOL KuaiLe",sans-serif);font-size:16px;box-shadow:0 3px 0 var(--ink,#2B2118)}
.voice-chip.on{background:var(--green-2,#4FB477);color:#fff}
.voice-chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink,#2B2118)}
.voice-section-label{font-family:var(--font-d,"ZCOOL KuaiLe",sans-serif);font-size:18px;margin-top:4px}
.voice-list{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow:auto;padding:4px 2px 8px;-webkit-overflow-scrolling:touch}
.voice-opt{display:flex;align-items:flex-start;gap:10px;min-height:48px;padding:10px 12px;border:3px solid var(--ink,#2B2118);border-radius:18px;background:#fff;cursor:pointer}
.voice-opt.on{background:var(--blue-2,#D3EEFA);box-shadow:0 3px 0 var(--ink,#2B2118)}
.voice-opt input{margin-top:4px;width:18px;height:18px;accent-color:var(--green,#2F7D4F);flex:none}
.voice-opt-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.voice-opt-text strong{font-family:var(--font-d,"ZCOOL KuaiLe",sans-serif);font-weight:400;font-size:17px}
.voice-opt-text small{color:var(--ink-2,#6B5A48);font-size:13px}
.voice-empty{font-size:15px;color:var(--ink-2,#6B5A48);padding:8px 4px;margin:0}
.voice-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding-top:4px}
.voice-actions .btn{min-height:48px;font-size:18px;padding:10px 20px}
.voice-preview-btn{background:var(--sun,#FFC83D)}
@media (max-width:720px){
  .voice-sheet-panel{max-height:min(82vh,680px);border-radius:24px 24px 20px 20px}
  .voice-sheet-head h2{font-size:22px}
}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);font-size:20px;padding:10px 22px;background:#fff;border:3px solid var(--ink);border-radius:999px;box-shadow:0 5px 0 var(--ink);text-decoration:none;transition:transform .12s,box-shadow .12s;color:var(--ink)}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn-big{font-size:26px;padding:14px 32px;background:var(--accent);color:var(--ink)}
.btn-ghost{background:rgba(255,255,255,.92)}
.speak.talking{background:#A8F0C8}

.hero{position:relative;min-height:100svh;overflow:hidden;display:grid;place-items:end center}
.hero-scene{position:absolute;inset:0;z-index:0}
.sky{position:absolute;inset:0;background:var(--sky)}
.hero-emoji{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);font-size:clamp(100px,22vw,180px);filter:drop-shadow(0 16px 24px rgba(0,0,0,.3));animation:bob 3.2s ease-in-out infinite;z-index:3}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-10px)}}
.hero-copy{position:relative;z-index:5;text-align:center;padding:100px 20px 8vh;max-width:860px;background:linear-gradient(transparent,rgba(0,0,0,.45) 30%,rgba(0,0,0,.75))}
.hero-kicker{display:inline-block;font-family:var(--font-d);font-size:18px;color:var(--ink);background:rgba(255,255,255,.9);border:3px solid var(--ink);border-radius:999px;padding:2px 16px;margin-bottom:12px}
.title-3d{font-family:var(--font-d);font-weight:400;font-size:clamp(36px,8vw,88px);line-height:1.05;color:var(--title);letter-spacing:.03em;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink),0 0 40px rgba(255,255,255,.35)}
.hero-sub{font-size:20px;margin:14px auto 10px;max-width:32em;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.disclaimer{font-size:13px;color:rgba(255,255,255,.88);max-width:36em;margin:0 auto 18px;line-height:1.45;background:rgba(0,0,0,.25);padding:8px 14px;border-radius:12px}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.sec{position:relative;padding:clamp(56px,8vw,100px) clamp(16px,4vw,48px)}
.sec-head{text-align:center;max-width:760px;margin:0 auto 36px}
.sec-head h2{font-family:var(--font-d);font-weight:400;font-size:clamp(36px,5.5vw,56px);line-height:1.15;margin:12px 0 10px}
.sec-head p{font-size:18px;color:var(--ink-2)}
.sec-head.light h2{color:#fff}.sec-head.light p{color:rgba(255,255,255,.85)}
.chip{display:inline-block;font-family:var(--font-d);font-size:17px;padding:4px 16px;border-radius:999px;background:var(--accent);color:var(--ink);border:3px solid var(--ink)}
.chip-blue{background:#7EC8F5}.chip-pink{background:#F5A3C7}.chip-purple{background:var(--purple);color:#fff}.chip-green{background:#A8F0C8}.chip-orange{background:#FFB86B}.chip-red{background:#FF8A8A}

.sec-facts{background:var(--cream)}
.cards{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.card{height:360px;perspective:900px}
.card-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.card.flip .card-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 8px 0 var(--ink);overflow:hidden;cursor:pointer}
.front{display:flex;flex-direction:column;background:var(--c)}
.front .pic{flex:1;display:grid;place-items:center;font-size:72px;background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.45),transparent 65%)}
.front .nm{background:#fff;border-top:4px solid var(--ink);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.front .nm b{font-family:var(--font-d);font-weight:400;font-size:26px;line-height:1.1}
.tag{font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;border:2px solid var(--ink);background:var(--sun);white-space:nowrap}
.back{transform:rotateY(180deg);background:#fff;padding:18px;display:flex;flex-direction:column;gap:8px}
.back h3{font-family:var(--font-d);font-weight:400;font-size:26px}
.back p{font-size:16px;line-height:1.55}
.back .sci{background:var(--sci-bg);border-radius:14px;padding:10px 12px;font-size:14px}
.back .sci b{color:var(--accent-2)}
.mini{font-size:14px;font-weight:800;padding:6px 12px;border-radius:999px;border:3px solid var(--ink);background:var(--sun);display:inline-flex;align-items:center;gap:6px;margin-top:auto}

/* sort game */
.sort-board{max-width:900px;margin:0 auto 20px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bin{border:4px dashed var(--ink);border-radius:var(--r);padding:14px;min-height:160px;background:rgba(255,255,255,.7)}
.bin.over{border-style:solid;background:var(--accent)}
.bin h3{font-family:var(--font-d);font-size:22px;margin-bottom:10px;text-align:center}
.bin .drop{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:60px}
.sort-items{max-width:900px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sitem{font-family:var(--font-d);font-size:16px;padding:12px 16px;background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);cursor:grab;user-select:none;touch-action:manipulation}
.sitem.placed{opacity:.3;pointer-events:none}
.sitem.picked{outline:4px solid var(--sun);outline-offset:3px;background:var(--sun)}
.sort-score{text-align:center;font-family:var(--font-d);font-size:22px;margin:16px 0 8px;min-height:1.4em}
.sort-reset{display:block;margin:0 auto}

/* dress / build */
.dress-game{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.kid-zone{min-height:280px;background:#fff;border:4px dashed var(--ink);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;transition:background .2s,border-color .2s}
.kid-zone.over{background:var(--accent);border-style:solid}
.kid-figure{font-size:90px;line-height:1}
.kid-hint{font-size:15px;color:var(--ink-2);margin-top:6px}
.worn{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px;min-height:48px}
.clothes{display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start}
.cloth{font-family:var(--font-d);font-size:18px;padding:12px 16px;border:3px solid var(--ink);border-radius:18px;background:#fff;box-shadow:0 4px 0 var(--ink);cursor:grab;user-select:none;touch-action:manipulation}
.cloth.good{background:var(--sun)}.cloth.bad{background:#FFD0D0}
.cloth.placed{opacity:.35;pointer-events:none}
.dress-score{text-align:center;margin:18px auto 10px;font-family:var(--font-d);font-size:22px;min-height:1.4em}

/* memory */
.mem-meta{text-align:center;margin-bottom:18px;font-family:var(--font-d);font-size:20px}
.mem-grid{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mcard{aspect-ratio:1;perspective:600px;border:0;padding:0;background:transparent}
.mcard .in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s}
.mcard.open .in,.mcard.done .in{transform:rotateY(180deg)}
.mcard .f,.mcard .b{position:absolute;inset:0;backface-visibility:hidden;border:3px solid var(--ink);border-radius:16px;display:grid;place-items:center;font-size:clamp(28px,5vw,40px)}
.mcard .f{background:var(--accent)}
.mcard .b{transform:rotateY(180deg);background:#fff}
.mcard.done .b{background:#A8F0C8}

/* timer / power */
.power-wrap{max-width:800px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.power-ring{position:relative;width:220px;height:220px;margin:0 auto}
.power-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.power-ring .track{fill:none;stroke:#ddd;stroke-width:10}
.power-ring .prog{fill:none;stroke:var(--accent-2);stroke-width:10;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .2s linear}
.power-emoji{position:absolute;inset:0;display:grid;place-items:center;font-size:64px;padding-bottom:24px}
.power-sec{position:absolute;bottom:28px;left:0;right:0;text-align:center;font-family:var(--font-d);font-size:28px}

/* catch / tap game */
.catch-stage{max-width:640px;margin:0 auto;height:320px;border:4px solid var(--ink);border-radius:var(--r);background:var(--cream-2);position:relative;overflow:hidden}
.catch-web{position:absolute;inset:20px;border:3px dashed var(--ink);border-radius:50%;opacity:.4;pointer-events:none}
.bug{position:absolute;font-size:36px;cursor:pointer;touch-action:manipulation;transition:transform .15s;user-select:none}
.bug:active{transform:scale(1.2)}
.bug.caught{opacity:.2;pointer-events:none;transform:scale(.5)}
.catch-score{text-align:center;font-family:var(--font-d);font-size:22px;margin:14px 0}

/* path choose */
.path-opts{max-width:800px;margin:0 auto;display:grid;gap:14px}
.path-btn{font-family:var(--font-d);font-size:20px;padding:18px 22px;border:4px solid var(--ink);border-radius:20px;background:#fff;box-shadow:0 5px 0 var(--ink);text-align:left;cursor:pointer;touch-action:manipulation}
.path-btn.ok{background:#A8F0C8}
.path-btn.no{background:#FFD0D0;opacity:.7}

/* melt / demo */
.demo-wrap{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.demo-stage{height:260px;border:4px solid var(--ink);border-radius:var(--r);display:grid;place-items:center;font-size:90px;background:var(--cream-2);position:relative;overflow:hidden}
.demo-card{background:#fff;border:4px solid var(--ink);border-radius:var(--r);padding:24px;box-shadow:0 8px 0 var(--ink)}
.demo-card h3{font-family:var(--font-d);font-size:28px;margin-bottom:8px}
.demo-card .btn{margin:8px 8px 0 0}

/* sequence */
.seq-slots{max-width:800px;margin:0 auto 16px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.seq-slot{min-width:100px;min-height:70px;border:4px dashed var(--ink);border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.5);font-family:var(--font-d);font-size:14px;padding:8px}
.seq-slot.filled{border-style:solid;background:#fff}
.seq-pool{max-width:800px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* RGB mix reuse */
.mix-wrap{max-width:900px;margin:0 auto;display:grid;gap:24px;justify-items:center}
.mix-stage{position:relative;width:min(360px,85vw);height:min(360px,85vw);border-radius:50%;background:#0a0a12;border:4px solid #fff;overflow:hidden;display:grid;place-items:center}
.spot{position:absolute;width:55%;height:55%;border-radius:50%;opacity:0;mix-blend-mode:screen;transition:opacity .35s;filter:blur(8px)}
.spot.r{background:#ff2020;left:12%;top:18%}.spot.g{background:#20ff40;right:12%;top:18%}.spot.b{background:#2060ff;left:28%;bottom:10%}
.spot.on{opacity:.85}
.mix-label{position:relative;z-index:2;font-family:var(--font-d);font-size:22px;color:#fff;text-shadow:0 2px 8px #000;text-align:center;padding:0 12px}
.mix-controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.sw{display:inline-flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:8px 16px;font-family:var(--font-d);cursor:pointer}
.sw input{width:18px;height:18px}
.dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--ink)}
.dot.r{background:#ff4040}.dot.g{background:#40ff60}.dot.b{background:#4060ff}

.foot{background:var(--bg);color:rgba(255,255,255,.8);text-align:center;padding:28px 16px;font-size:14px}
.foot a{display:inline-block;margin-top:8px;font-family:var(--font-d);font-size:18px;color:#fff}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 22px;border-radius:999px;font-family:var(--font-d);opacity:0;pointer-events:none;transition:.3s;z-index:100}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.sec-dark{background:linear-gradient(var(--bg),#1a2030);color:#fff}
.sec-dark .sec-head p{color:rgba(255,255,255,.8)}
.sec-alt{background:linear-gradient(var(--cream),var(--cream-2))}
.sec-warm{background:linear-gradient(#FFF6E5,#FFE0C8)}

html{-webkit-text-size-adjust:100%}

/* iPad / narrow tablet: 2-col cards, stack game panels */
@media(max-width:900px){
  .nav{display:none}
  .dress-game,.demo-wrap,.power-wrap,.sort-board{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .mem-grid{grid-template-columns:repeat(3,1fr)}
  .title-3d{font-size:clamp(32px,9vw,64px)}
  .topbar{gap:8px;padding:8px 10px}
  .brand{font-size:18px;min-width:0}
  .brand>span:last-child{overflow:hidden;text-overflow:ellipsis;max-width:min(36vw,200px)}
  .sec{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
  .path-btn{font-size:18px;padding:16px 18px;min-height:52px}
  .sitem,.cloth{font-size:17px;padding:14px 16px;min-height:48px}
  .bin{min-height:140px}
  .kid-zone{min-height:220px}
  .catch-stage{height:300px;max-width:100%}
  .seq-slot{min-width:88px;min-height:68px;font-size:13px}
}

/* iPhone (~390) and SE */
@media(max-width:600px){
  .cards{grid-template-columns:1fr;gap:14px}
  .card{height:300px}
  .front .pic{font-size:64px}
  .front .nm{padding:10px 12px}
  .front .nm b{font-size:22px}
  .tag{font-size:12px;padding:2px 8px}
  .back{padding:14px}
  .back h3{font-size:22px}
  .back p{font-size:15px;line-height:1.5}
  .back .sci{font-size:13px;padding:8px 10px}
  .mini{font-size:13px;padding:8px 12px;min-height:40px}
  .topbar{
    flex-wrap:wrap;border-radius:22px;row-gap:6px;
    padding:8px 8px 8px 10px;
    left:max(8px,env(safe-area-inset-left,0px));
    right:max(8px,env(safe-area-inset-right,0px));
    top:max(8px,calc(env(safe-area-inset-top,0px) + 6px));
  }
  .brand{font-size:15px}
  .brand>span:last-child{max-width:min(42vw,140px)}
  .lang-toggle button{font-size:14px;padding:6px 10px;min-height:40px}
  .sound-toggle{width:44px;height:44px;flex:none}
  .voice-toggle{width:44px;height:44px;flex:none}
  .hero-copy{padding:92px 14px 7vh}
  .hero-kicker{font-size:15px;padding:2px 12px}
  .hero-sub{font-size:17px;margin:12px auto 8px}
  .disclaimer{font-size:12px;padding:8px 12px;line-height:1.45}
  .hero-actions .btn{font-size:18px;padding:12px 18px}
  .hero-actions .btn-big{font-size:22px}
  .hero-emoji{font-size:clamp(88px,28vw,140px);bottom:10%}
  .sec{padding-top:48px;padding-bottom:48px}
  .sec-head{margin-bottom:24px}
  .sec-head h2{font-size:clamp(28px,8vw,40px)}
  .sec-head p{font-size:16px}
  .chip{font-size:15px;padding:4px 12px}
  .mem-grid{grid-template-columns:repeat(3,1fr);gap:10px;max-width:100%}
  .mcard .f,.mcard .b{font-size:clamp(24px,8vw,34px);border-radius:14px}
  .catch-stage{height:260px;border-radius:20px}
  .bug{font-size:40px;min-width:48px;min-height:48px;display:grid;place-items:center}
  .power-ring{width:min(200px,70vw);height:min(200px,70vw)}
  .power-emoji{font-size:52px}
  .power-sec{font-size:24px}
  .power-side{text-align:center}
  .power-side .btn{margin:6px}
  .demo-stage{height:200px;font-size:72px}
  .demo-card{padding:18px}
  .demo-card h3{font-size:22px}
  .demo-card .btn{margin:6px 6px 0 0;width:100%;justify-content:center}
  .sort-items,.clothes,.seq-pool,.seq-slots{gap:10px}
  .sort-score,.dress-score,.catch-score,.mem-meta{font-size:18px}
  .path-btn{font-size:17px;padding:16px;width:100%;box-sizing:border-box}
  .toast{max-width:min(92vw,360px);font-size:16px}
  .foot{padding:24px 14px calc(20px + env(safe-area-inset-bottom,0px));font-size:13px}
  .mix-controls .sw{padding:10px 14px;min-height:44px}
}

/* Phone landscape: don't let fixed topbar + hero eat everything */
@media(max-width:900px) and (max-height:500px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero-copy{padding-top:72px;padding-bottom:32px}
  .hero-emoji{font-size:72px;bottom:4%}
  .card{height:260px}
}