/* =====================================================================
   TUTY-VERSE styles: pixel-art handheld, cute palette, light + dark
   ===================================================================== */
:root{
  --bg1:#fcf0f5; --bg2:#ece3fa;
  --ink:#3a2340; --ink-soft:#6e5476;
  --pink-hi:#fde3ee; --pink:#f5bfd4; --pink-lo:#df9cb8;
  --lav-hi:#eee5fc; --lav:#cbb6ef; --lav-lo:#a68dd8;
  --plum:#3b2545; --plum-2:#56395f;
  --bezel:#2f2238; --bezel-2:#46304f;
  --screen:#fffaf8; --screen-2:#fbe8f2;
  --glass:rgba(255,255,255,.88); --glass-bd:#ecc9da;
  --pb:#e2a9c2; --pbs:#d58fb0;               /* pixel border + pixel depth */
  --accent:#e0709d; --accent-2:#a985e0; --gold:#e9b14f;
  --path:#f8d9e6; --path-bd:#e2a9c2;
  --cloud:#ffffff; --chip:#ffffff; --scrim:rgba(58,35,64,.4);
  --font-px:'Pixelify Sans','Trebuchet MS',ui-monospace,monospace;
  --font-body:'Quicksand','Segoe UI',system-ui,sans-serif;
  --ring:0 -3px 0 0 var(--pb),0 3px 0 0 var(--pb),-3px 0 0 0 var(--pb),3px 0 0 0 var(--pb);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg1:#1a1220; --bg2:#271a31; --ink:#f8eaf2; --ink-soft:#c9b3d0;
    --pink-hi:#d69cb5; --pink:#b47592; --pink-lo:#87526e; --lav-hi:#a892cf; --lav:#836dab; --lav-lo:#5c4884;
    --bezel:#130d17; --bezel-2:#291c30; --screen:#211729; --screen-2:#2c1e36;
    --glass:rgba(58,41,70,.9); --glass-bd:rgba(255,255,255,.16); --pb:#6a4d78; --pbs:#3a2646;
    --path:#47324f; --path-bd:#5d4468; --cloud:#3d2d49; --chip:#34253e; --scrim:rgba(8,4,12,.62);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg1:#1a1220; --bg2:#271a31; --ink:#f8eaf2; --ink-soft:#c9b3d0;
  --pink-hi:#d69cb5; --pink:#b47592; --pink-lo:#87526e; --lav-hi:#a892cf; --lav:#836dab; --lav-lo:#5c4884;
  --bezel:#130d17; --bezel-2:#291c30; --screen:#211729; --screen-2:#2c1e36;
  --glass:rgba(58,41,70,.9); --glass-bd:rgba(255,255,255,.16); --pb:#6a4d78; --pbs:#3a2646;
  --path:#47324f; --path-bd:#5d4468; --cloud:#3d2d49; --chip:#34253e; --scrim:rgba(8,4,12,.62);
}
:root[data-theme="light"]{color-scheme:light}

*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{
  margin:0; min-height:100dvh; font-family:var(--font-body); color:var(--ink);
  background:radial-gradient(60vmax 60vmax at 8% 0%,var(--pink-hi),transparent 60%),radial-gradient(60vmax 60vmax at 100% 100%,var(--bg2),transparent 60%),var(--bg1);
  display:flex; align-items:center; justify-content:center;
  padding:max(clamp(8px,2.5vw,28px),env(safe-area-inset-top,0px)) max(clamp(8px,2.5vw,28px),env(safe-area-inset-right,0px)) max(clamp(8px,2.5vw,28px),env(safe-area-inset-bottom,0px)) max(clamp(8px,2.5vw,28px),env(safe-area-inset-left,0px));
  -webkit-tap-highlight-color:transparent;
}
html{font-variant-ligatures:none}
button{font:inherit; color:inherit; cursor:pointer}
button:disabled{cursor:default}
input,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
[hidden]{display:none!important}
svg{image-rendering:pixelated}
.ic svg,.icon-btn svg,.pill i svg{display:block;width:100%;height:100%}

/* ================= CONSOLE ================= */
.console{
  container-type:inline-size;
  display:grid; grid-template-columns:minmax(92px,1fr) 7fr minmax(92px,1fr); align-items:stretch;
  width:min(1240px,100%,calc((100dvh - 56px) * 1.95));
  filter:drop-shadow(0 28px 36px rgba(110,50,100,.25));
  animation:boot .8s steps(8) both;
}
@keyframes boot{from{opacity:0; transform:translateY(16px)}}
.grip{
  --stick:clamp(54px,5.8cqw,74px); --cell:clamp(24px,2.5cqw,32px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--cell) * 1.15); padding:18px 8px;
}
.grip.left{background:linear-gradient(160deg,var(--pink-hi),var(--pink) 55%,var(--pink-lo)); border-radius:90px 14px 14px 90px/110px 14px 14px 110px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.65), inset -4px 0 0 rgba(0,0,0,.06), inset 0 -8px 16px rgba(0,0,0,.08)}
.grip.right{background:linear-gradient(200deg,var(--pink-hi),var(--pink) 55%,var(--pink-lo)); border-radius:14px 90px 90px 14px/14px 110px 110px 14px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.65), inset 4px 0 0 rgba(0,0,0,.06), inset 0 -8px 16px rgba(0,0,0,.08)}
.sw{display:flex; flex-direction:column; align-items:center; gap:6px}
.cap{font-family:var(--font-px); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(59,37,69,.7); font-weight:600}
.stick{width:var(--stick); aspect-ratio:1; border-radius:50%; border:0; color:#fff; display:grid; place-items:center;
  background:radial-gradient(circle at 40% 35%,var(--bezel-2),var(--plum) 70%);
  box-shadow:0 5px 0 rgba(0,0,0,.28), inset 0 0 0 5px rgba(255,255,255,.07); transition:transform .1s, box-shadow .1s}
.stick .ic{display:block; width:38%; aspect-ratio:1}
.stick:hover{filter:brightness(1.15)}
.stick:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.28), inset 0 0 0 5px rgba(255,255,255,.07)}
.dpad,.abxy{display:grid; gap:3px; grid-template-columns:repeat(3,var(--cell)); grid-template-rows:repeat(3,var(--cell))}
.dpad button,.abxy button{border:0; background:var(--plum-2); color:#f8e8f1; box-shadow:0 3px 0 var(--plum), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .08s, box-shadow .08s; display:grid; place-items:center; padding:0; width:100%; height:100%}
.dpad button{border-radius:6px}
.dpad button::before{content:""; width:46%; height:46%; background:currentColor; clip-path:polygon(50% 0,100% 100%,0 100%)}
.dpad .u{grid-area:1/2}.dpad .l{grid-area:2/1}.dpad .r{grid-area:2/3}.dpad .d{grid-area:3/2}
.dpad .l::before{transform:rotate(-90deg)}.dpad .r::before{transform:rotate(90deg)}.dpad .d::before{transform:rotate(180deg)}
.abxy button{border-radius:50%; font-family:var(--font-px); font-weight:700; font-size:clamp(11px,1.2cqw,14px)}
.abxy .x{grid-area:1/2}.abxy .y{grid-area:2/1}.abxy .b{grid-area:3/2}
.abxy .a{grid-area:2/3; background:var(--accent); box-shadow:0 3px 0 #a9527a}
.pressed,.dpad button:active,.abxy button:active{transform:translateY(3px)!important; box-shadow:0 0 0 var(--plum)!important}

.bezel{background:linear-gradient(180deg,var(--bezel-2),var(--bezel)); padding:14px 14px 28px; position:relative; display:flex; flex-direction:column}
.bezel::after{content:"tuty-verse"; position:absolute; left:0; right:0; bottom:7px; text-align:center; font-family:var(--font-px); font-size:11px; letter-spacing:.3em; color:rgba(255,215,232,.42); text-transform:uppercase}
.screen{
  position:relative; overflow:hidden; aspect-ratio:16/10; flex:1; border-radius:4px;
  background:radial-gradient(120% 80% at 0% 0%,var(--screen-2),transparent 55%),radial-gradient(90% 70% at 100% 100%,color-mix(in srgb,var(--lav) 28%,transparent),transparent 60%),var(--screen);
  display:grid; grid-template-rows:auto minmax(0,1fr) auto; box-shadow:inset 0 0 40px rgba(59,37,69,.12);
}
.screen::after{content:""; position:absolute; inset:0; z-index:90; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(60,30,80,.04) 0 1px,transparent 1px 3px)}

/* ================= pixel UI pieces ================= */
.pill,.icon-btn,.preview,.panel,.chip,.menu,.toast,.ghost,.btn-soft,.cta,.opt,.seg,.txt,.handle-row,.node-box,.card,.phone,.gcard,.confirm-box,.compose-box,.node-label,.avatar,.bubble,.ph-day,.tag,.hint{border-radius:0; box-shadow:var(--ring)}
.pill,.icon-btn,.preview,.panel,.chip,.ghost,.opt,.seg,.node-label,.avatar,.ph-day,.tag{margin:3px}

/* ================= HUD ================= */
.hud{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px 4px; z-index:6; min-width:0}
.who{display:flex; align-items:center; gap:10px; min-width:0}
.avatar{width:40px; height:40px; background:var(--glass); display:grid; place-items:center; flex:none; padding:2px}
.avatar svg{width:100%}
.who-t b{display:block; font-family:var(--font-px); font-size:16px; white-space:nowrap; letter-spacing:.02em}
.who-t span{display:block; font-size:12px; color:var(--ink-soft); white-space:nowrap; font-weight:700}
.stats{display:flex; gap:6px; align-items:center; justify-content:flex-end; min-width:0}
.pill{display:flex; align-items:center; gap:6px; padding:3px 9px 3px 5px; background:var(--glass); font-weight:700; font-size:13px; font-family:var(--font-px); font-variant-numeric:tabular-nums}
.pill i{width:18px; height:18px; display:block; flex:none; font-style:normal}
.pill.bump{animation:bump .4s steps(4)}
@keyframes bump{40%{transform:scale(1.15)}}
.icon-btn{width:36px; height:36px; padding:5px; border:0; background:var(--glass); display:grid; place-items:center; flex:none; color:var(--ink); transition:transform .1s}
.icon-btn:hover{transform:translateY(-2px)}
.icon-btn:active{transform:translateY(2px)}
.icon-btn>span{display:block; width:100%; height:100%}
.icon-btn svg{width:100%; height:100%}
#menuBtn>span{width:70%; margin:auto; height:70%}

/* ================= MENU ================= */
.menu{position:absolute; top:54px; right:10px; z-index:40; width:min(310px,calc(100% - 20px)); max-height:calc(100% - 64px); overflow:auto; padding:14px; background:var(--screen);
  transform-origin:top right; transition:transform .2s steps(5), opacity .15s, visibility .2s}
.menu[hidden]{display:block!important; opacity:0; visibility:hidden; transform:scale(.88); pointer-events:none}
.menu h4,.confirm-box h3,.compose-box h3{margin:0 0 10px; font-family:var(--font-px); font-size:17px}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0; font-size:13px; font-weight:700}
.set-row input[type=range]{width:120px; accent-color:var(--accent)}
.seg{display:flex; background:var(--chip); padding:2px}
.seg button{border:0; background:none; padding:4px 10px; font-family:var(--font-px); font-size:13px; font-weight:600}
.seg button[aria-pressed="true"]{background:var(--accent); color:#fff}
.ghost{display:block; width:calc(100% - 6px); background:var(--chip); padding:9px 12px; font-family:var(--font-px); font-size:14px; font-weight:600; border:0}

/* ================= MAP ================= */
.stage-area{position:relative; min-height:0}
.sky{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none}
.map-wrap{position:absolute; inset:0; overflow:auto; z-index:1; scrollbar-width:thin; overscroll-behavior:contain;
  background-image:radial-gradient(var(--pb) 1px,transparent 1.5px); background-size:16px 16px; background-position:0 0; background-attachment:local}
.map{position:relative}
.map svg.terrain{position:absolute; inset:0; overflow:visible}
.cloud rect{fill:var(--cloud)}
.cloud{filter:drop-shadow(0 3px 0 rgba(150,80,130,.18))}
.trail-bd{fill:none; stroke:var(--path-bd); stroke-width:20; stroke-linecap:square}
.trail-base{fill:none; stroke:var(--path); stroke-width:14; stroke-linecap:square}
.trail-dots{fill:none; stroke:#fff; stroke-opacity:.95; stroke-width:5; stroke-linecap:square; stroke-dasharray:5 15}
.trail-done{fill:none; stroke-width:14; stroke-linecap:square; stroke-dasharray:var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset 1.1s steps(24)}
.trail-done.on{stroke-dashoffset:0}
.spark rect{fill:#e9b14f}
.spark{animation:tw 3s steps(4) infinite; transform-box:fill-box; transform-origin:center}
@keyframes tw{50%{opacity:.25; transform:scale(.6)}}

.node{position:absolute; width:var(--node); height:var(--node); transform:translate(-50%,-50%); border:0; padding:0; background:none; z-index:2}
.node-box{position:absolute; inset:0; display:grid; place-items:center; padding:12%;
  background:linear-gradient(150deg,#fff 10%,color-mix(in srgb,var(--c) 55%,#fff));
  box-shadow:0 -4px 0 0 var(--c),0 4px 0 0 var(--c),-4px 0 0 0 var(--c),4px 0 0 0 var(--c),0 10px 0 0 color-mix(in srgb,var(--c) 65%,#000);
  transition:transform .15s steps(3)}
.node-box svg{width:100%; height:100%; display:block}
.node:hover .node-box{transform:translateY(-4px)}
.node:active .node-box{transform:translateY(4px)}
.node.current .node-box{box-shadow:0 -4px 0 0 var(--c),0 4px 0 0 var(--c),-4px 0 0 0 var(--c),4px 0 0 0 var(--c),0 10px 0 0 color-mix(in srgb,var(--c) 65%,#000),0 0 0 9px color-mix(in srgb,var(--c) 40%,transparent)}
.node-num{position:absolute; top:-9px; left:-9px; width:calc(var(--node)*.34); aspect-ratio:1; background:var(--plum); color:#fff; font-family:var(--font-px); font-weight:700; font-size:max(11px,calc(var(--node)*.17)); display:grid; place-items:center; z-index:1}
.node-flag{position:absolute; bottom:-9px; right:-9px; width:calc(var(--node)*.3); aspect-ratio:1; background:var(--chip); border:2px solid var(--pb); padding:3px; z-index:1}
.node-flag svg{width:100%; height:100%; display:block}
.node-label{position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%); white-space:nowrap; pointer-events:none; margin:0; padding:3px 10px; background:var(--glass); font-family:var(--font-px); font-weight:600; font-size:13px}
.token{position:absolute; width:calc(var(--node)*.8); z-index:3; pointer-events:none; transform:translate(-50%,calc(-100% - var(--node)*.5 - 2px - var(--hop,0px)))}
.token svg{display:block; width:100%; filter:drop-shadow(0 5px 0 rgba(90,40,90,.25)); animation:bob 1.6s ease-in-out infinite}
.token.moving svg{animation:none}
@keyframes bob{50%{transform:translateY(-4px)}}

/* sky effects */
.rainbow{position:absolute; top:3%; left:50%; width:min(62%,520px); transform:translateX(-50%); animation:rbfade 13s linear forwards}
.rainbow svg{display:block; width:100%; height:auto; image-rendering:auto}
@keyframes rbdraw{to{stroke-dashoffset:0}}
@keyframes rbfade{0%{opacity:0}12%{opacity:.88}82%{opacity:.88}100%{opacity:0}}
.bird{position:absolute; left:-40px; width:26px; animation:fly 17s linear forwards; will-change:transform}
.bird svg{display:block; width:100%; image-rendering:pixelated}
.bird .f1{animation:flap1 .5s steps(1) infinite}
.bird .f2{animation:flap2 .5s steps(1) infinite}
@keyframes flap1{0%{opacity:1}50%{opacity:0}}
@keyframes flap2{0%{opacity:0}50%{opacity:1}}
@keyframes fly{0%{transform:translate(0,0)}50%{transform:translate(55vw,var(--dy))}100%{transform:translate(115vw,0)}}
.shoot{position:absolute; width:90px; height:3px; transform-origin:left center; background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); opacity:0; animation:shoot 1.5s steps(24) forwards}
.shoot::before{content:""; position:absolute; left:-2px; top:-2px; width:7px; height:7px; background:#fff; box-shadow:0 0 8px 2px rgba(255,255,255,.8)}
@keyframes shoot{0%{opacity:0; transform:translate(0,0) rotate(-30deg)}12%{opacity:1}100%{opacity:0; transform:translate(-320px,185px) rotate(-30deg)}}

/* ================= PREVIEW BAR ================= */
.preview{margin:4px 14px 12px; padding:8px 8px 8px 14px; background:var(--glass); display:flex; align-items:center; gap:12px; z-index:5}
.preview-text{flex:1; min-width:0}
.preview-text b{font-family:var(--font-px); font-size:16px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.preview-text span{font-size:12.5px; color:var(--ink-soft); font-weight:700; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cta{border:0; padding:10px 16px; font-family:var(--font-px); font-weight:600; font-size:15px; white-space:nowrap; color:#fff; margin:3px 3px 9px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 -3px 0 0 #9a5683,0 3px 0 0 #9a5683,-3px 0 0 0 #9a5683,3px 0 0 0 #9a5683,0 9px 0 0 #7a3f68; transition:transform .1s}
.cta:hover{transform:translateY(-2px)}
.cta:active{transform:translateY(5px); box-shadow:0 -3px 0 0 #9a5683,0 3px 0 0 #9a5683,-3px 0 0 0 #9a5683,3px 0 0 0 #9a5683,0 4px 0 0 #7a3f68}
.cta[disabled]{background:var(--chip); color:var(--ink-soft); box-shadow:var(--ring); transform:none}
.preview .cta{margin:3px}
.key{display:inline-grid; place-items:center; width:20px; height:20px; background:rgba(255,255,255,.28); font-size:12px; margin-left:8px}
.btn-soft{border:0; padding:10px 16px; background:var(--chip); font-family:var(--font-px); font-weight:600; font-size:15px; margin:3px 3px 9px; box-shadow:var(--ring),0 9px 0 0 var(--pb); transition:transform .1s}
.btn-soft:hover{transform:translateY(-2px)} .btn-soft:active{transform:translateY(5px); box-shadow:var(--ring),0 4px 0 0 var(--pb)}

/* ================= STAGE CARD ================= */
.sheet{position:absolute; inset:0; z-index:20; display:grid; grid-template:minmax(0,1fr)/minmax(0,1fr); place-items:center; padding:12px;
  background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .25s}
.sheet.open{opacity:1; pointer-events:auto}
.card{position:relative; width:min(1000px,100%); height:100%; min-height:0; max-height:100%; padding:14px; background:var(--screen);
  display:grid; grid-template-rows:minmax(0,1fr) auto; gap:10px;
  box-shadow:0 -4px 0 0 var(--sc),0 4px 0 0 var(--sc),-4px 0 0 0 var(--sc),4px 0 0 0 var(--sc),0 0 0 10px color-mix(in srgb,var(--sc) 25%,transparent);
  transform:scale(.2); opacity:0; transition:transform .45s steps(7), opacity .25s}
.sheet.open .card{transform:none; opacity:1}
.close{position:absolute; top:10px; right:10px; z-index:6; width:38px; height:38px; padding:8px; border:0; background:var(--chip); color:var(--ink); box-shadow:var(--ring)}
.close span{display:block; width:100%; height:100%}
.card-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:16px; min-height:0}
.gal{display:flex; flex-direction:column; gap:8px; min-height:0}
.carousel{position:relative; flex:1; min-height:150px; overflow:hidden; background:color-mix(in srgb,var(--sc) 22%,var(--screen)); box-shadow:var(--ring); margin:3px}
.track{display:flex; height:100%; transition:transform .35s steps(8); touch-action:pan-y}
.slide{flex:0 0 100%; margin:0; position:relative; height:100%; display:grid; place-items:center; overflow:hidden}
.slide img{width:100%; height:100%; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; cursor:zoom-in; image-rendering:auto}
.slide img.cover{object-fit:cover}
.slide>svg{width:100%; height:100%; display:block; cursor:zoom-in}
.slide figcaption{position:absolute; left:10px; bottom:10px; padding:4px 10px; font-family:var(--font-px); font-size:13px; font-weight:600; background:rgba(255,255,255,.94); color:#3a2340; box-shadow:0 0 0 2px var(--pb); max-width:calc(100% - 100px); pointer-events:none}
.nav{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; padding:0; border:0; z-index:3; display:grid; place-items:center; background:rgba(255,255,255,.94); color:#3a2340; box-shadow:0 0 0 3px var(--pb),0 5px 0 3px var(--pb)}
.nav::before{content:""; width:40%; height:40%; background:currentColor; clip-path:polygon(0 50%,100% 0,100% 100%)}
.nav.next::before{transform:scaleX(-1)}
.nav:active{transform:translateY(calc(-50% + 3px))}
.nav.prev{left:10px}.nav.next{right:10px}
.zoom{position:absolute; top:10px; left:10px; z-index:3; padding:4px 10px; border:0; background:rgba(255,255,255,.94); color:#3a2340; font-family:var(--font-px); font-size:13px; font-weight:600; box-shadow:0 0 0 2px var(--pb)}
.dots{position:absolute; right:12px; bottom:14px; display:flex; gap:5px; z-index:3}
.dots button{width:10px; height:10px; padding:0; border:0; background:rgba(255,255,255,.7); box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.dots button[aria-current="true"]{width:24px; background:#fff}
.thumbs{display:grid; grid-template-columns:repeat(auto-fill,64px); gap:8px; margin:0 3px 3px}
.thumbs button{width:64px; aspect-ratio:1; padding:0; border:0; overflow:hidden; background:color-mix(in srgb,var(--sc) 25%,var(--chip)); opacity:.7; box-shadow:0 0 0 3px transparent}
.thumbs button[aria-current="true"]{opacity:1; box-shadow:0 0 0 3px var(--sc)}
.thumbs img,.thumbs svg{width:100%; height:100%; object-fit:cover; display:block}
.lightbox{position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px; background:rgba(10,4,16,.92)}
.lb-pic{flex:1; min-height:0; width:100%; display:grid; place-items:center}
.lb-pic img,.lb-pic svg{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; image-rendering:auto}
.lb-pic svg{width:min(100%,900px); height:auto}
.lightbox p{margin:0; color:#fff; font-family:var(--font-px); font-size:15px; text-align:center}
.lb-x{position:absolute; top:12px; right:12px; width:38px; height:38px; padding:8px; border:0; background:#fff; color:#3a2340}
.lb-x span{display:block; width:100%; height:100%}

.info{overflow:auto; min-height:0; padding:3px 4px 6px 0; overscroll-behavior:contain; scrollbar-width:thin}
.chips{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:6px; padding-right:48px}
.chip{font-family:var(--font-px); font-size:13px; font-weight:600; padding:3px 10px; background:var(--chip)}
.chip.tint{background:color-mix(in srgb,var(--sc) 30%,var(--chip))}
.chip.soon{background:var(--plum); color:#fff}
.card h2{font-family:var(--font-px); font-size:clamp(22px,2.6vw,30px); line-height:1.1; margin:6px 0 4px}
.role{font-size:14px; color:var(--ink-soft); margin:0 0 10px; font-weight:700}
.story p{margin:0 0 10px; font-size:14.5px; line-height:1.62; max-width:64ch}
.side{display:flex; flex-direction:column; gap:6px; margin-top:6px}
.panel{padding:10px 14px; background:var(--glass)}
.panel h3{margin:0 0 8px; font-family:var(--font-px); font-size:15px}
.stat{display:grid; grid-template-columns:84px 1fr 30px; align-items:center; gap:8px; font-size:13px; font-weight:700; margin:6px 0; font-family:var(--font-px)}
.bar{height:10px; background:color-mix(in srgb,var(--sc) 18%,var(--chip)); box-shadow:0 0 0 2px var(--pb); overflow:hidden}
.bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--sc),var(--accent-2)); transition:width .9s steps(14) .25s}
.trivia{margin:0; padding:0; list-style:none}
.trivia li{position:relative; padding-left:18px; font-size:13px; line-height:1.5; margin:6px 0}
.trivia li::before{content:""; position:absolute; left:2px; top:6px; width:8px; height:8px; background:var(--accent)}
.card-foot{display:flex; justify-content:flex-end; background:var(--screen)}

.toast{position:absolute; left:50%; bottom:84px; transform:translate(-50%,20px); z-index:70; padding:9px 16px; background:var(--plum); color:#fff;
  font-family:var(--font-px); font-weight:600; font-size:14px; opacity:0; transition:opacity .2s, transform .3s steps(5);
  white-space:nowrap; max-width:92%; overflow:hidden; text-overflow:ellipsis; pointer-events:none; box-shadow:0 -3px 0 0 var(--accent-2),0 3px 0 0 var(--accent-2),-3px 0 0 0 var(--accent-2),3px 0 0 0 var(--accent-2)}
.toast.show{opacity:1; transform:translate(-50%,0)}
.confetti{position:absolute; z-index:80; pointer-events:none; animation:pop 1.3s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes pop{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.6); opacity:0}}

/* ================= START SCREEN ================= */
.start{position:absolute; inset:0; z-index:28; overflow-x:hidden; overflow-y:auto; display:grid; padding:18px 14px; color:#3a2340;
  background:radial-gradient(60% 55% at 50% 34%,#fff3b8 0%,transparent 70%),radial-gradient(50% 40% at 0% 100%,#f9cfe0,transparent 70%),radial-gradient(50% 40% at 100% 0%,#e3d6fb,transparent 70%),linear-gradient(165deg,#fff4f8,#fff1d6 50%,#f1e8fd);
  transition:opacity .45s, transform .5s steps(8)}
.start.hide{opacity:0; transform:scale(1.05); pointer-events:none}
.start-inner{position:relative; z-index:1; margin:auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; width:min(680px,100%)}
.hero{width:clamp(96px,22vh,180px); filter:drop-shadow(0 10px 0 rgba(233,170,40,.25)); animation:hero 1.4s ease-in-out infinite}
.hero svg{display:block; width:100%}
@keyframes hero{50%{transform:translateY(-6px)}}
.start .eyebrow{font-family:var(--font-px); font-weight:600; font-size:14px; color:#9a5f12; background:#fff6d6; padding:3px 12px; box-shadow:0 0 0 3px #f6d98c}
.start h1{font-family:var(--font-px); font-size:clamp(26px,min(6.4vh,8.6vw),52px); margin:6px 0 0; letter-spacing:-.01em; line-height:1.05; color:#3a2340}
.start .brand{margin:0; font-family:var(--font-px); font-weight:600; font-size:clamp(15px,2.4vh,19px); color:#a9527a}
.start .sub{margin:2px 0 0; font-weight:700; color:#6e5476; font-size:clamp(13px,2.1vh,16px); max-width:48ch; line-height:1.4}
.start .ask{margin:8px 0 0; font-family:var(--font-px); font-weight:600; font-size:clamp(14px,2.3vh,17px)}
.choice{display:grid; grid-template-columns:1fr 1fr; gap:18px; width:100%; margin-top:4px; padding:8px 6px 14px}
.pick{border:0; padding:12px 10px 10px; color:#3a2340; font-family:var(--font-px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:84px;
  box-shadow:0 -4px 0 0 #3a2340,0 4px 0 0 #3a2340,-4px 0 0 0 #3a2340,4px 0 0 0 #3a2340,0 11px 0 0 #3a2340;
  transform-origin:center; animation:swell 2.6s steps(26) infinite}
.pick-a{background:linear-gradient(135deg,#ffe066,#ffb3cf)}
.pick-b{background:linear-gradient(135deg,#e3d6fb,#ffb3cf); animation-delay:1.3s}
@keyframes swell{0%,100%{transform:scale(1); filter:drop-shadow(0 0 0 rgba(243,163,60,0))}50%{transform:scale(1.07); filter:drop-shadow(0 0 16px rgba(243,163,60,.85))}}
.pick:hover,.pick:focus-visible{animation-play-state:paused; transform:scale(1.09)}
.pick:active{transform:scale(.97) translateY(4px); animation:none}
.pk-t{display:flex; align-items:center; justify-content:center; gap:8px}
.pk-t .lbl{font-weight:700; font-size:clamp(16px,2.4vh,20px); line-height:1.1}
.pk-t .sf{width:26px; height:26px; flex:none; animation:spin 4s steps(8) infinite}
.pk-t .sf svg{display:block; width:100%; height:100%}
@keyframes spin{to{transform:rotate(360deg)}}
.pick small{font-family:var(--font-body); font-weight:700; font-size:12.5px; color:#6e5476}
.link-btn{border:0; background:none; font-family:var(--font-px); font-weight:600; font-size:15px; color:#a9527a; text-decoration:underline; text-underline-offset:4px; padding:6px 10px}
.floaty{position:absolute; z-index:0; pointer-events:none; animation:floatUp linear infinite; opacity:0}
.floaty svg{display:block; width:100%}
@keyframes floatUp{0%{top:105%; opacity:0}15%{opacity:.9}85%{opacity:.9}100%{top:-10%; opacity:0}}

/* ================= MAILBOX ================= */
.mail{position:absolute; inset:0; z-index:32; display:grid; grid-template:minmax(0,1fr)/minmax(0,1fr); place-items:center; padding:10px; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .25s}
.mail.open{opacity:1; pointer-events:auto}
.phone{position:relative; width:min(480px,100%); height:100%; display:flex; flex-direction:column; overflow:hidden; background:var(--screen);
  box-shadow:0 -4px 0 0 var(--plum),0 4px 0 0 var(--plum),-4px 0 0 0 var(--plum),4px 0 0 0 var(--plum); transform:translateY(24px); transition:transform .35s steps(7)}
.mail.open .phone{transform:none}
.ph-top{flex:none; display:flex; align-items:center; gap:10px; padding:10px 12px; background:linear-gradient(135deg,#ffd76a,#f5bfd4 60%,#d9c8f6); color:#3a2340}
.back{width:34px; height:34px; flex:none; padding:7px; border:0; background:rgba(255,255,255,.85); font-weight:700; font-size:22px; line-height:1; color:#3a2340; display:grid; place-items:center}
.back span{display:block; width:100%; height:100%}
.ph-top .bd{width:40px; height:40px; flex:none}
.ph-t{min-width:0}
.ph-t b{font-family:var(--font-px); font-size:16px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ph-t span{font-size:12.5px; font-weight:700; opacity:.85}
.bd{background:color-mix(in srgb,#ffd257 40%,var(--chip)); box-shadow:0 0 0 2px var(--pb); display:grid; place-items:center; flex:none; width:36px; height:36px; padding:2px; margin:2px}
.bd svg{width:100%; display:block}
.ph-list{flex:1; min-height:0; overflow:auto; padding:14px 12px; display:flex; flex-direction:column; gap:14px; overscroll-behavior:contain}
.ph-day{align-self:center; font-family:var(--font-px); font-size:13px; font-weight:600; color:var(--ink-soft); background:var(--chip); padding:2px 12px}
.msg{display:flex; gap:10px; align-items:flex-end; border:0; background:none; padding:0; text-align:left; animation:tin .35s steps(6) both}
@keyframes tin{from{opacity:0; transform:translateX(30px)}}
.bubble{background:var(--glass); padding:8px 12px; max-width:calc(100% - 52px); margin:3px; transition:transform .1s}
.msg:hover .bubble{transform:translateY(-2px)} .msg:active .bubble{transform:translateY(2px)}
.bubble b{font-family:var(--font-px); font-size:14px}
.bubble p{margin:3px 0 0; font-size:13.5px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.tag{font-family:var(--font-px); font-size:11px; padding:0 6px; background:var(--chip); margin:0 0 0 6px; color:var(--ink-soft); font-weight:600; box-shadow:0 0 0 2px var(--pb); vertical-align:middle}
.ph-foot{flex:none; padding:10px 12px 12px; border-top:3px solid var(--pb); background:var(--screen)}
.send-wide{width:100%; display:flex; align-items:center; justify-content:center; gap:10px; border:0; padding:11px 14px; color:#3a2340; font-family:var(--font-px); font-weight:700; font-size:16px;
  background:linear-gradient(135deg,#ffe066,#ffb3cf); box-shadow:0 -3px 0 0 #3a2340,0 3px 0 0 #3a2340,-3px 0 0 0 #3a2340,3px 0 0 0 #3a2340,0 8px 0 0 #3a2340; margin-bottom:8px; transition:transform .1s}
.send-wide:hover{transform:translateY(-2px)} .send-wide:active{transform:translateY(5px)}
.sf-i{width:22px; height:22px; flex:none} .sf-i svg{display:block; width:100%; height:100%}

/* compose + confirm dialogs */
.compose,.confirm{position:absolute; inset:0; z-index:8; display:grid; grid-template:minmax(0,1fr)/minmax(0,1fr); place-items:center; padding:12px; background:var(--scrim)}
.compose-box,.confirm-box{width:min(420px,100%); max-height:100%; overflow:auto; padding:16px; background:var(--screen)}
.compose-box label{display:block; font-family:var(--font-px); font-weight:600; font-size:15px; margin:10px 0 5px}
.compose-box label small{font-family:var(--font-body); color:var(--ink-soft); font-weight:700}
.compose-box textarea,.txt{width:calc(100% - 6px); margin:3px; padding:8px 10px; border:0; background:var(--chip); resize:none; font-size:15px; font-family:var(--font-body); font-weight:600}
.txt{display:block}
.c-count{text-align:right; font-size:12px; color:var(--ink-soft); font-weight:700; font-family:var(--font-px)}
.handle-row{display:flex; align-items:center; background:var(--chip); margin:3px}
.handle-row .at{padding:0 4px 0 12px; font-family:var(--font-px); font-weight:700; font-size:18px; color:var(--accent)}
.handle-row input{flex:1; min-width:0; border:0; background:none; padding:9px 10px 9px 0; font-size:15px; font-weight:700}
.handle-row:focus-within{outline:3px solid var(--accent-2)}
.hint{margin:10px 3px 4px; padding:8px 10px; font-size:12.5px; line-height:1.45; font-weight:700; color:var(--ink-soft); background:var(--glass)}
.c-err{min-height:18px; margin:6px 3px 0; color:#d03a63; font-weight:700; font-size:13px; line-height:1.4}
.c-ok{font-weight:700; line-height:1.5}
.row-btns{display:flex; gap:12px; justify-content:flex-end; margin-top:12px; flex-wrap:wrap}
.confirm-box p{margin:0 0 6px; line-height:1.5; font-weight:600}

/* ================= WISH CARD ================= */
.gwrap{position:absolute; inset:0; z-index:34; display:grid; grid-template:minmax(0,1fr)/minmax(0,1fr); place-items:center; padding:14px; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .25s}
.gwrap.open{opacity:1; pointer-events:auto}
.gcard{position:relative; width:min(450px,100%); max-height:100%; overflow:auto; padding:26px 22px 22px; text-align:center; color:#3a2340;
  background:radial-gradient(70% 40% at 50% 0%,#fff1b5,transparent 70%),linear-gradient(165deg,#fffaf0,#ffe9f1 60%,#f0e8fd);
  box-shadow:0 -4px 0 0 #3a2340,0 4px 0 0 #3a2340,-4px 0 0 0 #3a2340,4px 0 0 0 #3a2340,0 0 0 12px color-mix(in srgb,var(--bc,#ffd257) 50%,transparent);
  transform:scale(.6); transition:transform .4s steps(7)}
.gwrap.open .gcard{transform:none}
.gcard .x{position:absolute; top:12px; right:12px; width:36px; height:36px; padding:8px; border:0; background:#fff; color:#3a2340; box-shadow:0 0 0 2px #ecc9da; z-index:2}
.gcard .x span{display:block; width:100%; height:100%}
.gcard .badge-big{width:92px; height:92px; margin:0 auto 4px; display:grid; place-items:center; background:color-mix(in srgb,#ffd257 45%,#fff); box-shadow:0 0 0 3px #fff,0 0 0 6px #ecc9da; padding:6px}
.gcard .badge-big svg{width:100%; display:block}
.gcard h3{font-family:var(--font-px); font-size:24px; margin:16px 0 6px}
.gcard .msgtext{font-size:15.5px; line-height:1.7; margin:0 0 14px; white-space:pre-wrap; font-weight:600}
.gcard .sig{font-family:var(--font-px); font-weight:700; font-size:17px}
.gcard .sig span{display:block; font-family:var(--font-body); font-size:14px; color:#a9527a; margin-top:2px}
.gcard .corner{position:absolute; display:block; opacity:.95; pointer-events:none}
.gcard .corner svg{display:block; width:100%}
.gcard .credits p{font-size:14px; line-height:1.6; margin:0 0 10px; text-align:left; font-weight:600}

/* ================= MASCOT BUILDER ================= */
.builder{position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; background:var(--screen); opacity:0; pointer-events:none; transform:translateY(14px); transition:opacity .22s, transform .3s steps(6)}
.builder.open{opacity:1; pointer-events:auto; transform:none}
.bd-head{flex:none; display:flex; align-items:center; gap:10px; padding:10px 14px; background:linear-gradient(135deg,#ffd76a,#f5bfd4 60%,#d9c8f6); color:#3a2340}
.bd-head b{font-family:var(--font-px); font-size:17px; display:block}
.bd-head span#bStep{font-size:12.5px; font-weight:700; opacity:.85}
.bd-main{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:14px; padding:12px 14px}
.bd-stage{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:0;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,#ffd257 22%,transparent),transparent 70%),repeating-conic-gradient(color-mix(in srgb,var(--pb) 18%,transparent) 0 25%,transparent 0 50%) 0 0/20px 20px; box-shadow:var(--ring); margin:3px}
.pedestal{position:relative; flex:1; min-height:0; width:100%}
.bd-cat{position:absolute; inset:10px 10px 0; animation:hero 1.6s ease-in-out infinite}
.bd-cat svg{display:block; width:100%; height:100%}
.bd-name{font-family:var(--font-px); font-weight:700; font-size:20px; background:var(--chip); padding:3px 14px; box-shadow:var(--ring); margin:3px}
.bd-panel{overflow:auto; min-height:0; padding:3px 6px 6px 3px; overscroll-behavior:contain; scrollbar-width:thin}
.bd-panel h3{font-family:var(--font-px); font-size:22px; margin:0 0 4px}
.bd-panel h4{font-family:var(--font-px); font-size:16px; margin:14px 0 8px}
.bd-panel h4 small{font-family:var(--font-body); color:var(--ink-soft); font-weight:700; font-size:12.5px}
.bd-panel .lead,.bd-panel .desc{margin:0 0 10px; font-weight:700; color:var(--ink-soft); line-height:1.5; font-size:14px}
.bd-panel .desc{color:var(--ink); font-weight:600}
.bd-panel label{display:block; font-family:var(--font-px); font-weight:600; font-size:15px; margin:12px 0 4px}
.ask-q{font-family:var(--font-px); font-weight:700; font-size:18px; margin:14px 0 4px}
.opts{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px 10px; padding:3px}
.opt{display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 4px 7px; border:0; background:var(--chip); font-family:var(--font-px); font-weight:600; font-size:13px; line-height:1.15; text-align:center; transition:transform .1s}
.opt:hover{transform:translateY(-2px)}
.opt .th{display:block; width:72px; aspect-ratio:248/196}
.opt .th svg{display:block; width:100%; height:100%}
.opt[aria-pressed="true"]{background:var(--accent-2); color:#fff; box-shadow:0 -3px 0 0 #3a2340,0 3px 0 0 #3a2340,-3px 0 0 0 #3a2340,3px 0 0 0 #3a2340}
.bd-foot{flex:none; display:flex; gap:12px; justify-content:flex-end; padding:8px 18px 4px; border-top:3px solid var(--pb); background:var(--screen)}
.builder .confirm{z-index:9}

/* ================= RESPONSIVE: phones (vertical) ================= */
@media (max-width:900px){ .card-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px} }
@media (max-width:760px){
  body{padding:max(6px,env(safe-area-inset-top,0px)) 6px max(6px,env(safe-area-inset-bottom,0px)); align-items:flex-start}
  .console{grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; width:100%; min-height:calc(100dvh - 12px); filter:drop-shadow(0 14px 18px rgba(110,50,100,.22))}
  .bezel{grid-area:1/1/2/3; padding:10px 8px 24px; border-radius:26px 26px 0 0; min-width:0}
  .grip.left{grid-area:2/1}
  .grip.right{grid-area:2/2}
  .screen{aspect-ratio:auto; min-height:430px; border-radius:6px}
  .grip{--stick:clamp(48px,13.5cqw,60px); --cell:clamp(26px,7.4cqw,33px); flex-direction:row; justify-content:center; gap:14px; padding:12px 8px 16px}
  .grip.left{border-radius:0 0 8px 60px/0 0 8px 50px}
  .grip.right{border-radius:0 0 60px 8px/0 0 50px 8px}
  .grip.right .sw{order:2}
  .cap{font-size:10px}
  .hud{padding:6px 8px 2px; gap:6px}
  .who-t{display:none}
  .avatar{width:34px; height:34px}
  .stats{gap:3px}
  .pill{padding:2px 7px 2px 4px; font-size:12px; margin:2px}
  .pill i{width:15px; height:15px}
  .pill.prog{display:none}
  .icon-btn{width:32px; height:32px; padding:4px; margin:2px}
  .preview{margin:2px 10px 10px; padding:6px 6px 6px 12px}
  .preview .cta{padding:8px 12px; font-size:14px}
  .toast{bottom:78px}
  .menu{right:6px; top:46px}
  /* stage card: single column, scrolls, claim button always pinned */
  .sheet{padding:0}
  .card{display:block; overflow:auto; overscroll-behavior:contain; padding:10px; scrollbar-width:thin}
  .card-grid{display:block}
  .gal{display:block}
  .carousel{height:clamp(230px,40dvh,360px); flex:none}
  .thumbs{grid-template-columns:repeat(4,1fr); gap:8px}
  .thumbs button{width:100%}
  .info{overflow:visible; padding-right:0; margin-top:8px}
  .card-foot{position:sticky; bottom:-10px; padding:8px 0 6px; margin-top:6px; z-index:5}
  .chips{padding-right:0}
  .close{top:16px; right:16px}
  /* mailbox + builder full-bleed */
  .mail{padding:0} .phone{box-shadow:none}
  .bd-main{grid-template-columns:minmax(0,1fr); grid-template-rows:clamp(150px,29dvh,260px) minmax(0,1fr); gap:8px; padding:8px 10px}
  .bd-name{font-size:17px}
  .choice{grid-template-columns:1fr; gap:16px}
  .pick{min-height:76px}
  .opts{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .opt .th{width:64px}
  .bd-foot{padding:8px 12px 4px}
}
@media (max-width:760px) and (max-height:700px){ .hero{width:clamp(70px,14vh,110px)} }
@media (max-height:520px) and (min-width:761px){ .hero{width:80px} .start .sub{display:none} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}

/* start screen scales with the console width so every button stays visible on any laptop */
@media (min-width:761px){
  .start{padding:12px 14px}
  .hero{width:clamp(60px,9.5cqw,150px)}
  .start .eyebrow{font-size:clamp(11px,1.15cqw,14px)}
  .start h1{font-size:clamp(24px,3.6cqw,46px); margin-top:4px}
  .start .brand{font-size:clamp(13px,1.45cqw,19px)}
  .start .sub{font-size:clamp(12px,1.25cqw,16px); margin-top:0}
  .start .ask{font-size:clamp(13px,1.4cqw,17px); margin-top:4px}
  .choice{gap:16px; padding:6px 6px 12px}
  .pick{min-height:clamp(56px,6.2cqw,84px); padding:8px 10px}
  .pk-t .lbl{font-size:clamp(15px,1.65cqw,20px)}
  .pk-t .sf{width:clamp(20px,2.1cqw,26px); height:clamp(20px,2.1cqw,26px)}
  .pick small{font-size:clamp(11px,1.05cqw,12.5px)}
  .link-btn{font-size:clamp(13px,1.2cqw,15px); padding:2px 10px}
}

/* achievements gallery */
.carousel[hidden],.thumbs[hidden]{display:none}
.awards{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:12px; padding:4px; align-content:start}
.award{display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; padding:8px 6px 10px; border:0; background:var(--chip); font-family:var(--font-px); color:var(--ink); text-align:center; cursor:pointer; box-shadow:var(--ring); margin:3px; transition:transform .12s}
.award:hover,.award:focus-visible{transform:translateY(-3px)}
.award .aw-pic{display:grid; place-items:center; width:100%; aspect-ratio:1; background:linear-gradient(135deg,#fff8de,#f6dc8e); overflow:hidden}
.award .aw-pic img{width:100%; height:100%; object-fit:cover; display:block}
.award .aw-pic svg{width:62%; height:62%; display:block}
.award b{font-size:13px; line-height:1.15}
.award small{font-family:var(--font-body); font-weight:700; font-size:11px; color:var(--ink-soft); line-height:1.2}
.lb-pic svg{max-height:55dvh}
.lb p{max-width:620px}
.card-grid.solo{display:block}
.card-grid.solo .awards{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}

/* ================= START SCREEN, game style ================= */
.start{padding-top:36px; padding-bottom:30px}
.start .sky{z-index:0}
.s-hud{position:absolute; top:8px; left:12px; right:12px; z-index:2; display:flex; justify-content:space-between; align-items:center; font-family:var(--font-px); font-weight:700; font-size:13px; color:#3a2340; pointer-events:none}
.lives{display:flex; gap:4px} .lives i{display:block; width:18px; height:18px; animation:beat 1.2s ease-in-out infinite} .lives i:nth-child(2){animation-delay:.2s} .lives i:nth-child(3){animation-delay:.4s}
.lives svg{display:block; width:100%; height:100%}
@keyframes beat{50%{transform:scale(1.25)}}
.lvl{background:#3a2340; color:#ffe066; padding:3px 9px; letter-spacing:.06em}
.start .hero{animation:hero 1.3s ease-in-out infinite}
.start .eyebrow{animation:blinkTag 2.4s ease-in-out infinite}
@keyframes blinkTag{50%{background:#ffe9a0}}
.logo{margin:6px 0 0; line-height:1.12; font-family:var(--font-px); font-weight:700; font-size:clamp(30px,min(7.4vh,10.4vw),58px); letter-spacing:.01em; color:#ffe066; -webkit-text-stroke:5px #3a2340; paint-order:stroke fill; text-shadow:0 5px 0 #3a2340; white-space:normal}
.tw{display:inline-block; white-space:nowrap}
.tl{display:inline-block; animation:wave 1.7s ease-in-out infinite, hue 5s steps(1) infinite}
.tl:nth-child(3n+1){color:#ffe066} .tl:nth-child(3n+2){color:#ffb3cf} .tl:nth-child(3n){color:#ffffff}
@keyframes wave{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-9px) rotate(-3deg)}60%{transform:translateY(2px) rotate(2deg)}}
@keyframes hue{0%{filter:none}50%{filter:brightness(1.12)}}
.start .brand{color:#a9527a; letter-spacing:.04em}
.start .ask{margin:4px 0 0; font-size:clamp(12px,1.9vh,15px); letter-spacing:.14em; text-transform:uppercase; color:#6e5476; animation:blinkAsk 1.2s steps(2) infinite}
@keyframes blinkAsk{50%{opacity:.45}}
.choice{width:min(100%,420px); gap:14px; padding:6px 6px 10px; grid-template-columns:1fr 1fr}
.pick{min-height:54px; padding:7px 8px 6px}
.pk-t .lbl{font-size:clamp(14px,2.1vh,17px)}
.pick small{font-size:11.5px}
.start .link-btn{font-size:13px; padding:2px 8px}
.credit{margin:4px 0 0; font-family:var(--font-px); font-weight:600; font-size:13px; color:#a9527a}
.ground{position:absolute; left:0; right:0; bottom:0; height:20px; z-index:0; pointer-events:none; border-top:4px solid #3a2340;
  background:repeating-linear-gradient(90deg,#86d98f 0 14px,#72ca7e 14px 28px)}
.ground::before{content:""; position:absolute; left:0; right:0; top:-14px; height:10px;
  background:radial-gradient(circle at 8px 5px,#ff9ec5 0 3px,transparent 3.5px) 0 0/46px 10px repeat-x,radial-gradient(circle at 30px 5px,#ffe066 0 3px,transparent 3.5px) 0 0/62px 10px repeat-x}
@media (max-width:760px){
  .choice{grid-template-columns:1fr 1fr; gap:10px; width:100%}
  .pick{min-height:50px; padding:6px 4px 5px}
  .pk-t .lbl{font-size:15px} .pick small{font-size:10.5px}
  .logo{-webkit-text-stroke:4px #3a2340}
}
@media (min-width:761px){
  .logo{font-size:clamp(26px,4.3cqw,54px); -webkit-text-stroke:clamp(3px,.4cqw,5px) #3a2340}
  .choice{width:min(100%,440px); gap:14px}
  .pick{min-height:clamp(46px,4.6cqw,60px); padding:6px 8px}
  .pk-t .lbl{font-size:clamp(14px,1.5cqw,18px)}
  .pick small{font-size:clamp(10.5px,.95cqw,12px)}
  .start .ask{font-size:clamp(11px,1.15cqw,14px)}
}
@media (max-height:620px){ .s-hud{display:none} .start{padding-top:12px} .start .eyebrow{display:none} }
/* dark theme start screen */
.start.night{background:radial-gradient(60% 55% at 50% 30%,#4b3a78 0%,transparent 70%),linear-gradient(165deg,#1d1633,#2c2150 55%,#171230)}
.start.night .s-hud,.start.night .ask,.start.night .pick small{color:#e8dcff}
.start.night .brand,.start.night .credit,.start.night .link-btn{color:#ffb3cf}
.start.night .eyebrow{background:#3a2c5e; color:#ffe9a0; box-shadow:0 0 0 3px #5b4690}
.start.night .ground{background:repeating-linear-gradient(90deg,#3f8f5a 0 14px,#357f4e 14px 28px)}
.start.night .pick small{color:#4a3358}

/* achievements: instagram banner + heart-shaped gallery */
.ig{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:10px 12px; margin:4px 3px 14px; background:linear-gradient(135deg,#ffe066,#ffb3cf); box-shadow:var(--ring); color:#3a2340}
.ig b{font-family:var(--font-body); font-weight:800; font-size:clamp(28px,8vw,42px); line-height:1.05}
.ig span{font-family:var(--font-body); font-weight:700; font-size:14px; line-height:1.35}
.heart{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; width:min(100%,500px); margin:0 auto; padding:6px}
.heart .award{margin:0; padding:3px; aspect-ratio:1; min-width:0; background:#fff; box-shadow:0 0 0 2.5px #e66f9c}
.heart .award .aw-pic{width:100%; height:100%; aspect-ratio:auto; background:linear-gradient(135deg,#fff0f6,#ffd0e2)}
.heart .award .aw-pic svg{width:66%; height:66%}
.heart .award:hover,.heart .award:focus-visible{transform:scale(1.08); z-index:2}
.msg .bd{width:58px; height:58px; padding:3px}
.msg .bubble{max-width:calc(100% - 74px)}

/* birthday wish card: faint floating hearts instead of corner flowers */
.gcard .hearts{position:sticky; top:0; height:0; z-index:0; pointer-events:none}
.gcard .hearts i{position:absolute; top:0; display:block; opacity:0; animation:heartUp linear infinite}
.gcard .hearts svg{display:block; width:100%}
@keyframes heartUp{0%{transform:translateY(95dvh) scale(.8); opacity:0}15%{opacity:.16}80%{opacity:.16}100%{transform:translateY(-6dvh) scale(1.1); opacity:0}}
.gcard .badge-big,.gcard h3,.gcard .msgtext,.gcard .sig{position:relative; z-index:1}

/* rainbow: pale, wide, behind the stages (map only) */
.rainbow{top:2%; left:50%; width:min(128%,1100px); animation:rbfade 16s ease-in-out forwards; z-index:0}
.rainbow svg{display:block; width:100%; height:auto}
@keyframes rbfade{0%{opacity:0}15%{opacity:.5}80%{opacity:.5}100%{opacity:0}}

/* achievements heart: compact, never needs a scroll */
.card-grid.solo{display:grid; place-items:center; min-height:0}
.heart{width:min(100%,330px,calc((100dvh - 330px) * 1.25)); min-width:200px; gap:5px; padding:4px}
.heart .award{box-shadow:0 0 0 2px #e66f9c}

/* fixes: centred heart gallery, room for the close button, no sideways scroll in the mailbox */
.card-grid.solo,.card-grid.solo .gal{display:block}
.card-grid.solo .gal{padding-top:44px}
.card-grid.solo .heart{margin:6px auto 4px}
.ph-list{overflow-x:hidden}
@keyframes rbfade{0%{opacity:0}15%{opacity:.62}80%{opacity:.62}100%{opacity:0}}
@media (max-width:760px){
  .card-foot{max-width:100%; box-sizing:border-box}
  .card-foot .cta{white-space:normal; line-height:1.2; text-align:center; width:calc(100% - 6px); max-width:100%; padding:9px 12px; font-size:14px; box-sizing:border-box}
}
@media (max-width:760px) and (max-height:760px){ .card-foot .cta .rw{display:none} }

/* light mode: pale hot-air balloons drift up; dark mode: only twinkling and shooting stars */
.balloon{position:absolute; top:104%; opacity:0; pointer-events:none; animation:balloonUp linear forwards; z-index:0}
.balloon svg{display:block; width:100%; height:auto; filter:saturate(.85)}
@keyframes balloonUp{0%{top:104%; transform:translateX(0); opacity:0}8%{opacity:.62}25%{transform:translateX(14px)}50%{transform:translateX(-10px)}75%{transform:translateX(12px)}92%{opacity:.62}100%{top:-34%; transform:translateX(0); opacity:0}}
.tstars{display:none; position:absolute; inset:0; pointer-events:none; z-index:0}
.tstar{position:absolute; width:var(--s,3px); height:var(--s,3px); background:#fff; box-shadow:0 0 6px 1px rgba(255,255,255,.7); animation:twk ease-in-out infinite}
@keyframes twk{0%,100%{opacity:.12; transform:scale(.6)}50%{opacity:1; transform:scale(1.25)}}
:root[data-theme="dark"] .tstars{display:block}
:root[data-theme="dark"] .rainbow,:root[data-theme="dark"] .balloon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tstars{display:block}
  :root:not([data-theme="light"]) .rainbow,:root:not([data-theme="light"]) .balloon{display:none}
}
.start.night #floaties{display:none}
@keyframes rbfade{0%{opacity:0}15%{opacity:.5}80%{opacity:.5}100%{opacity:0}}

/* achievements: bigger on laptop, readable picture text */
.lb-pic.aw svg{width:min(88%,420px)}
@media (min-width:761px){
  .card-grid.solo .gal{padding-top:4px}
  .card-grid.solo .heart{width:min(100%,470px); gap:7px}
}
@media (min-width:761px){
  .card:has(.heart) .card-foot{position:absolute; right:10px; bottom:4px; background:none; z-index:6}
  .card:has(.heart){overflow:hidden}
  .card-grid.solo .heart{gap:8px}
}
.heart .award .aw-pic svg.art{width:100%; height:100%}

/* ================= MINI GAMES ================= */
.gm{min-height:0; overflow:auto; padding:34px 4px 4px; scrollbar-width:thin; text-align:center}
.gm h2{margin:0 0 4px; font-size:24px}
.gm-sub{margin:0 0 12px; font-size:14px; font-weight:700; color:var(--ink-soft)}
.cta.alt{background:var(--chip); color:var(--ink); box-shadow:var(--ring)}
.gm-foot .cta{margin-bottom:3px}
.gm-win{display:flex; flex-direction:column; gap:4px; align-items:center; margin:12px auto 0; padding:12px 16px; max-width:460px; background:color-mix(in srgb,var(--sc) 24%,var(--screen)); box-shadow:var(--ring)}
.gm-win[hidden]{display:none}
.gm-win strong{font-family:var(--font-px); font-size:18px}
.gm-win span{font-size:14px; font-weight:700; line-height:1.4}
.gm-win em{font-style:normal; font-family:var(--font-px); font-weight:700; color:var(--accent)}
/* word cross */
.xgrid{display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:3px; width:min(100%,360px); margin:0 auto 14px}
.xgrid i{aspect-ratio:1; position:relative; display:grid; place-items:center}
.xgrid .xe{visibility:hidden}
.xc{background:#fff; box-shadow:0 0 0 2px #6aa7d8}
.xc sup{position:absolute; left:3px; top:1px; font-size:clamp(8px,2.6vw,11px); font-weight:800; color:#4a7fb0; line-height:1}
.xc b{font-family:var(--font-px); font-size:clamp(14px,4.6vw,22px); font-weight:800; color:#3a2340}
.xc.on{background:#d9f0ff; animation:xpop .3s}
@keyframes xpop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.xq{list-style:none; margin:0 auto; padding:0; max-width:520px; text-align:left; display:grid; gap:10px}
.xq li{padding:8px 10px; background:var(--chip); box-shadow:var(--ring)}
.xq label{display:flex; gap:8px; align-items:flex-start; font-size:14px; font-weight:700; line-height:1.35; margin-bottom:6px}
.xq .num{flex:none; width:22px; height:22px; display:grid; place-items:center; background:#6aa7d8; color:#fff; font-family:var(--font-px); font-size:13px}
.xin{display:flex; gap:6px}
.xin input{flex:1; min-width:0; padding:8px 10px; font:700 16px var(--font-body); text-transform:uppercase; border:0; background:var(--screen); color:var(--ink); box-shadow:var(--ring)}
.mini{flex:none; border:0; padding:8px 14px; font-family:var(--font-px); font-weight:700; font-size:14px; color:#fff; background:var(--accent); box-shadow:var(--ring)}
.mini[disabled]{background:var(--chip); color:var(--ink-soft)}
.xq li.ok{background:color-mix(in srgb,#8fd9a8 35%,var(--chip))}
.xq li.bad{animation:shk .35s}
@keyframes shk{20%{transform:translateX(-6px)}60%{transform:translateX(6px)}100%{transform:none}}
/* maze */
.mz{display:grid; gap:12px; justify-items:center}
.mzmap{position:relative; width:min(100%,320px,42dvh); aspect-ratio:1}
.mzmap svg{display:block; width:100%; height:100%}
.mzcat{position:absolute; width:17%; transform:translate(-50%,-62%); transition:left .13s linear,top .13s linear; z-index:2; pointer-events:none}
.mzcat svg{display:block; width:100%; height:auto; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.mzcat.dizzy{animation:shk .5s}
.mzq{width:100%; max-width:520px}
.lives2{display:flex; gap:4px; justify-content:center; margin-bottom:4px}
.lives2 span{width:22px; display:block}
.lives2 svg{display:block; width:100%}
.lives2 .lost{opacity:.35; filter:grayscale(1)}
.qn{margin:0; font-size:12px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em}
.mzq h3{margin:2px 0 10px; font-size:17px; line-height:1.3}
.gopts{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.gopt{border:0; padding:11px 10px; font-family:var(--font-px); font-weight:700; font-size:16px; background:var(--chip); color:var(--ink); box-shadow:var(--ring); transition:transform .1s}
.gopt:hover:not([disabled]){transform:translateY(-2px)}
.gopt.right{background:#bfeccd; color:#1f5b35}
.gopt.wrong{background:#ffd3d9; color:#8a2a3c; text-decoration:line-through}
.gopt[disabled]:not(.right):not(.wrong){opacity:.55}
.fb{min-height:20px; margin:8px 0 0; font-size:14px; font-weight:700}
/* sunflower catch */
.cg{position:relative; width:min(100%,420px); height:clamp(240px,46dvh,420px); margin:0 auto; overflow:hidden; touch-action:none; user-select:none; outline:0;
  background:linear-gradient(#cfeaff,#fff6d6 70%,#bfe6a8 70%,#9ed486); box-shadow:var(--ring)}
.cg-hud{position:absolute; left:8px; right:8px; top:6px; display:flex; justify-content:space-between; font-family:var(--font-px); font-weight:800; font-size:16px; color:#3a2340; z-index:3}
.cg-cat{position:absolute; bottom:1%; width:clamp(48px,15%,70px); transform:translateX(-50%); z-index:2; transition:left .06s linear; pointer-events:none}
.cg-cat svg{display:block; width:100%; height:auto}
.cg-item{position:absolute; width:clamp(22px,7%,32px); transform:translateX(-50%); pointer-events:none}
.cg-item svg{display:block; width:100%; height:auto}
.cg-pop{position:absolute; transform:translate(-50%,0); font-family:var(--font-px); font-weight:800; font-size:18px; color:#e8467c; animation:popup .7s forwards; z-index:3; pointer-events:none; text-shadow:0 0 3px #fff}
@keyframes popup{to{transform:translate(-50%,-28px); opacity:0}}
.cg-over{position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; background:rgba(255,255,255,.72); color:#3a2340; text-align:center; padding:10px}
.cg-over[hidden]{display:none}
.cg-over strong{font-family:var(--font-px); font-size:22px}
.cg-over span{font-weight:700; font-size:14px}
.cg-over em{font-style:normal; font-family:var(--font-px); font-weight:700; color:#c0396a}
.cg-over .cta{margin-top:6px}
@media (max-width:760px){
  .gm{padding-top:46px}
  .card-foot.gm-foot{position:sticky; bottom:-10px}
}
/* heart gallery: real photos */
.heart .award .aw-pic{position:relative; container-type:inline-size; display:block}
.heart .award .aw-pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%}
.heart .award .aw-lab{position:absolute; left:0; right:0; bottom:0; padding:9cqw 4cqw 5cqw; font-family:var(--font-px); font-weight:800; font-size:13cqw; line-height:1.05; color:#fff; text-align:center; background:linear-gradient(transparent,rgba(58,35,64,.82)); text-shadow:0 1px 2px rgba(0,0,0,.6)}
.heart .award .aw-n{position:absolute; right:3cqw; top:3cqw; min-width:17cqw; height:17cqw; display:grid; place-items:center; font-style:normal; font-family:var(--font-px); font-weight:800; font-size:11cqw; color:#fff; background:#e66f9c; border-radius:50%}
.lb-pic.aw{display:grid; place-items:center}
.lb-frame{position:relative; max-width:100%; max-height:100%; display:grid}
.lb-pic.aw img{max-width:min(100%,560px); max-height:calc(100dvh - 120px); width:auto; height:auto; object-fit:contain; display:block; margin:auto}
.lb-cap{position:absolute; left:0; right:0; bottom:0; margin:0; padding:26px 12px 12px; font-family:var(--font-body); font-weight:800; font-size:clamp(13px,3.4vw,17px); line-height:1.35; color:#fff; text-align:center; background:linear-gradient(transparent,rgba(20,8,28,.88))}
.lb-nav{position:absolute; top:50%; width:42px; height:42px; margin-top:-21px; border:0; border-radius:50%; background:rgba(255,255,255,.88); color:#3a2340; font-size:0}
.lb-nav::after{content:""; position:absolute; inset:0; margin:auto; width:10px; height:10px; border:solid #3a2340; border-width:0 3px 3px 0}
.lb-nav.prev{left:6px} .lb-nav.prev::after{transform:translateX(2px) rotate(135deg)}
.lb-nav.next{right:6px} .lb-nav.next::after{transform:translateX(-2px) rotate(-45deg)}
.lb-count{position:absolute; top:8px; left:8px; padding:3px 9px; font-family:var(--font-px); font-weight:700; font-size:13px; color:#fff; background:rgba(20,8,28,.7)}
/* fit tweaks */
.heart .award .aw-lab{font-size:15cqw; padding:10cqw 3cqw 5cqw}
.mzmap{width:min(100%,320px,30dvh)}
.gopts{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
@media (max-width:760px){
  .gopts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gopt{padding:10px 4px; font-size:15px}
  .mzq h3{font-size:16px; margin-bottom:8px}
  .gm{padding-top:40px}
  .gm h2{font-size:21px}
}
@media (max-height:720px){ .gm-sub{display:none} .gm{padding-top:34px} .mzmap{width:min(100%,320px,27dvh)} .fb{margin-top:4px; min-height:18px} }
@media (max-width:760px){ .xgrid{width:min(100%,262px); margin-bottom:10px} .xq{gap:8px} .xq li{padding:6px 8px} }
.card{container:card/inline-size}
.xq{grid-template-columns:minmax(0,1fr)} .xq li{min-width:0}
/* laptop: games use two columns so nothing needs scrolling */
@container card (min-width:640px){
  .gm.cross{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:24px; align-content:start; text-align:left; padding-top:26px}
  .gm.cross h2,.gm.cross .gm-sub{grid-column:1/-1; text-align:center}
  .gm.cross .gm-sub{display:block; margin-bottom:8px}
  .gm.cross .xgrid{grid-column:1; grid-row:3; width:280px; margin:0}
  .gm.cross .xq{grid-column:2; grid-row:3; max-width:none; gap:6px; margin:0}
  .gm.cross .xq li{padding:5px 8px} .gm.cross .xq label{margin-bottom:4px; font-size:13px}
  .gm.cross .xin input{padding:5px 8px; font-size:15px} .gm.cross .mini{padding:5px 12px}
  .gm.cross .gm-win{grid-column:1/-1; grid-row:4; margin-top:8px; padding:8px 14px}
  .mz{grid-template-columns:auto minmax(0,1fr); align-items:center; gap:24px; text-align:left}
  .mzmap{width:min(300px,56dvh)}
  .mzq{max-width:none} .lives2{justify-content:flex-start}
  .gm .gm-sub{display:block}
}
.card:has(.heart) .card-foot .cta .rw{display:none}

/* narrow screen (phones in portrait OR landscape): the console screen decides, not the browser window */
.sheet{container:sheet/inline-size}
@container sheet (max-width:620px){
  .sheet{padding:0}
  .card{display:block; overflow:auto; overscroll-behavior:contain; padding:10px; scrollbar-width:thin}
  .card-grid{display:block}
  .gal{display:block}
  .carousel{height:clamp(190px,40dvh,360px); flex:none}
  .thumbs{grid-template-columns:repeat(4,1fr); gap:8px}
  .thumbs button{width:100%}
  .info{overflow:visible; padding-right:0; margin-top:8px}
  .card-foot,.card:has(.heart) .card-foot{position:sticky; right:auto; bottom:-10px; padding:8px 0 6px; margin-top:6px; z-index:5; background:var(--screen); max-width:100%; box-sizing:border-box}
  .card-foot .cta{white-space:normal; line-height:1.2; text-align:center; width:calc(100% - 6px); max-width:100%; padding:9px 12px; font-size:14px; box-sizing:border-box}
  .card-foot .cta .rw{display:none}
  .chips{padding-right:0}
  .close{top:16px; right:16px}
  .card:has(.heart){overflow:auto}
  .card-grid.solo .gal{padding-top:44px}
  .gm{padding-top:42px; overflow:visible}
  .gm .gm-sub{display:none}
  .gm.cross{display:block; text-align:center}
  .gm.cross .xgrid{width:min(100%,262px); margin:0 auto 10px}
  .mz{grid-template-columns:1fr; justify-items:center; text-align:center; gap:8px}
  .mzmap{width:min(100%,260px,30dvh,56vw)}
  .lives2{justify-content:center}
  .gopts{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* memory match */
.mhud{display:flex; justify-content:center; gap:18px; margin:0 0 8px; font-family:var(--font-px); font-weight:800; font-size:15px; color:var(--ink)}
.mgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; width:min(100%,380px,52dvh); margin:0 auto}
.mc{position:relative; padding:0; border:0; background:none; aspect-ratio:1/1.08; perspective:600px; cursor:pointer}
.mf{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .4s}
.mc.up .mf,.mc.hit .mf{transform:rotateY(180deg)}
.mb,.mfront{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:grid; place-items:center; box-shadow:var(--ring)}
.mb{background:linear-gradient(135deg,#f48fb1,#a985e0)}
.mb i{width:34%; aspect-ratio:1; background:#fff; opacity:.9; clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%)}
.mfront{transform:rotateY(180deg); background:#fff; grid-template-rows:1fr auto; padding:6% 4% 4%; align-items:center; justify-items:center}
.mfront svg{width:62%; height:auto; display:block; align-self:end}
.mfront small{font-family:var(--font-px); font-weight:800; font-size:clamp(9px,2.7vw,12px); color:#3a2340; line-height:1; margin-top:2px}
.mc.hit .mfront{background:#e3f8e9; animation:xpop .4s}
.mem .gm-win .cta{margin-top:6px}
/* bigger, more detailed maze */
.mzcat{width:13%}
.mzmap{width:min(100%,340px,38dvh)}
@container sheet (max-width:620px){ .mzmap{width:min(100%,330px,36dvh,80vw)} }
@media (min-width:761px){ .mzmap{width:min(340px,60dvh)} }
/* pinned creator wish */
.msg.pinned .bubble{background:linear-gradient(135deg,#fff3c9,#ffe0ee); box-shadow:0 0 0 3px #f2c14e}
.tag.pin{background:#f2c14e; color:#3a2340; margin-left:6px}
@media (max-height:700px){ .mgrid{width:min(100%,380px,44dvh)} }
@container sheet (max-width:620px){ @media (max-height:700px){ .mzmap{width:min(100%,330px,31dvh,80vw)} } }
@container sheet (min-width:621px){ .mgrid{width:min(100%,380px,38dvh)} .gm.mem .gm-sub{display:none} }