:root {
    --font-read:    'Andika', 'Noto Sans Devanagari', 'Noto Sans Arabic', sans-serif;
    --font-display: 'Fredoka One', cursive;
    --font-map:     'Fredoka One', cursive;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  body { font-family:var(--font-read); overflow:hidden; background:#3DA6D4;
    overscroll-behavior:none; touch-action:manipulation;
    -webkit-user-select:none; user-select:none;
    -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; }
  :root { --canvas-w:1194; --canvas-h:834; --app-scale:1; }
  #app-canvas {
    position:fixed; left:50%; top:50%;
    width:calc(var(--canvas-w) * 1px);
    height:calc(var(--canvas-h) * 1px);
    transform:translate(-50%,-50%) scale(var(--app-scale,1));
    transform-origin:center center;
    overflow:hidden;   
    z-index:1;
  }
  #map-wrap { position:fixed; inset:0; }
  #explore-stage { position:absolute; inset:0; transform-origin:0 0;
                   transform:translate3d(0,0,0); pointer-events:none;
                   transition:opacity 2.363s cubic-bezier(.65,0,.35,1), visibility 2.363s; }
  body:not([data-mode="explore"]) #explore-stage { opacity:0; visibility:hidden; }
  body.explore-prepaint:not([data-mode="explore"]) #explore-stage {
    opacity:0.005; visibility:visible; transition:none; }
  #explore-stage #world-svg { pointer-events:auto; }
  #world-svg { width:100%; height:100%; display:block; }
  .cont { transition: filter .3s; }
  .ctlabel {
    font-family:var(--font-map);   
    fill:white; paint-order:stroke;
    stroke-width:5; stroke-linejoin:round;
    pointer-events:none;
  }
  #title-banner {
    position:fixed; top:10px; left:50%;
    transform:translateX(-50%);
    z-index:25; pointer-events:none;
  }
  #title-banner svg { width:min(340px,60vw); height:auto; display:block; }
  .map-rope {
    position:absolute; z-index:30;   
    pointer-events:none;
  }
  .map-rope { background:url('../assets/rope/rope-master.webp') 0 0 / 100% 100% no-repeat; }
  .map-rope div { display:none; }
  .map-compass { position:absolute; z-index:28; pointer-events:none; }
  #map-dim {
    position:fixed; inset:0;
    background:rgba(0,0,0,0);
    transition:background .4s ease;
    pointer-events:none; z-index:40; cursor:pointer;
  }
  #map-dim.active { background:rgba(8,18,48,.6); pointer-events:auto; }
  #pins { position:absolute; inset:0; pointer-events:none; }
  #pins .pin { position:absolute;
               width:calc(110px * var(--a-hi,1));
               height:calc(110px * var(--a-hi,1));
               margin-left:calc(110px * var(--a-hi,1) / -2);
               margin-top:calc(110px * var(--a-hi,1) / -2);
               transform:scale(calc(1 / var(--a-hi,1)));
               justify-content:center;              
               animation:apinFloat 3s ease-in-out infinite; }
  @keyframes apinFloat {
    0%,100%{ transform:translateY(0) scale(calc(1 / var(--a-hi,1))) }
    50%{ transform:translateY(-9px) scale(calc(1 / var(--a-hi,1))) }
  }
  #pin-rings{ position:absolute; inset:0; pointer-events:none; z-index:59; }
  #pin-rings .apin-ring{
    position:absolute;
    width:calc(110px * var(--a-hi,1));
    height:calc(110px * var(--a-hi,1));
    margin-left:calc(110px * var(--a-hi,1) / -2);
    margin-top:calc(110px * var(--a-hi,1) / -2);
    display:flex; align-items:center; justify-content:center;
    transform:scale(calc(1 / var(--a-hi,1)));
    animation:apinFloat 3s ease-in-out infinite;
  }
  #pin-rings .pin-ring{
    position:static; top:auto; left:auto; margin:0;
    width:calc(39px * var(--a-hi,1) * var(--pin-grow,1)); height:calc(39px * var(--a-hi,1) * var(--pin-grow,1));
    border-width:calc(6px * var(--a-hi,1));
    transform:none;
    animation:apinPing 3s ease-out infinite;
  }
  #pins .pin-ring {
    left:50%; top:50%;
    width:calc(39px * var(--a-hi,1) * var(--pin-grow,1)); height:calc(39px * var(--a-hi,1) * var(--pin-grow,1));
    margin-left:calc(39px * var(--a-hi,1) / -2);
    margin-top:calc(39px * var(--a-hi,1) / -2);
    border-width:calc(6px * var(--a-hi,1));
    transform:none;
    animation:apinPing 3s ease-out infinite;
  }
  @keyframes apinPing {
    0%{ transform:scale(.5); opacity:.9 }
    80%,100%{ transform:scale(3.12); opacity:0 }
  }
  body[data-mode="animals"] #pins .pin { will-change:transform; }
  #pins .pin-emoji,
  #pins .pin-img { filter:none; }
  #anim-stage { position:fixed; inset:0; transform-origin:0 0; will-change:transform; }
  #anim-map-canvas { position:absolute; inset:0; width:100%; height:100%;
                     display:block; pointer-events:none; will-change:transform; }
  #lm-pins, #lm-rings { position:absolute; inset:0; pointer-events:none; }
  #pins .pin, #lm-pins .pin { pointer-events:auto; }
  .pin {
    position:fixed;
    transform:translate(-50%,-50%) scale(var(--pin-ctr, calc(1/var(--map-zoom,1))));
    cursor:pointer; z-index:60;   
    isolation:isolate;            
    display:flex; flex-direction:column; align-items:center; gap:3px;
    animation:pinFloat 3s ease-in-out infinite;
  }
  @keyframes pinFloat {
    0%,100%{transform:translate(-50%,-50%) translateY(0) scale(var(--pin-ctr, calc(1/var(--map-zoom,1))))}
    50%{transform:translate(-50%,-50%) translateY(-9px) scale(var(--pin-ctr, calc(1/var(--map-zoom,1))))}
  }
  #pins .pin, #pin-rings .apin-ring { --a-hi:1; }
  body.anim-deep #pins .pin, body.anim-deep #pin-rings .apin-ring { --a-hi:3; }
  .pin-emoji {
    font-size:calc(clamp(2rem,3.6vw,3.2rem) * var(--a-hi,1) * var(--pin-grow,1));
    filter:drop-shadow(2px 5px 8px rgba(0,0,0,.55));
    line-height:1; transform:scale(1.28);   
  }
  .pin-img {
    width:calc(clamp(3rem,5.4vw,4.6rem) * var(--a-hi,1) * var(--pin-grow,1)); height:auto;
    display:block; transform:scale(1.2);   
    filter:drop-shadow(2px 4px 6px rgba(0,0,0,.4));
  }
  :root { --lm-box:76px; --lm-ring:39px; }   
  #lm-pins .pin, #lm-rings .lm-ring { --lm-hi:1; }
  body.lean-deep #lm-pins .pin, body.lean-deep #lm-rings .lm-ring { --lm-hi:3; }
  #lm-pins .pin {
    position:absolute;
    width:calc(var(--lm-box) * var(--pin-size,1) * var(--lm-hi,1));
    height:calc(var(--lm-box) * var(--pin-size,1) * var(--lm-hi,1));
    margin-left:calc(var(--lm-box) * var(--pin-size,1) * var(--lm-hi,1) / -2);
    margin-top:calc(var(--lm-box) * var(--pin-size,1) * var(--lm-hi,1) / -2);
    transform:scale(calc(1 / var(--lm-hi,1)));
    align-items:center; justify-content:center;   
    animation:lmFloat 3s ease-in-out infinite;    
  }
  #lm-pins .pin { pointer-events:none; }
  #lm-pins .pin * { pointer-events:none; }
  #lm-pins .pin .pin-tap {
    pointer-events:auto;
    position:absolute; left:50%; top:50%;
    width:calc(var(--lm-box) * var(--tap-mul,1) * var(--lm-hi,1));
    height:calc(var(--lm-box) * var(--tap-mul,1) * var(--lm-hi,1));
    margin-left:calc(var(--lm-box) * var(--tap-mul,1) * var(--lm-hi,1) / -2);
    margin-top:calc(var(--lm-box) * var(--tap-mul,1) * var(--lm-hi,1) / -2);
    border-radius:50%;
  }
  #lm-pins .pin-icon { width:100%; height:100%; }
  #lm-pins .pin-thumb { max-width:100%; max-height:100%; }   
  @keyframes lmFloat {
    0%,100%{ transform:translateY(0) scale(calc(1 / var(--lm-hi,1))) }
    50%{ transform:translateY(-9px) scale(calc(1 / var(--lm-hi,1))) }
  }
  body.lean-world #lm-pins .pin.pin-eu { pointer-events:none; }
  body.lean-world #lm-pins .pin.pin-eu .pin-tap { pointer-events:none; }
  .pin-thumb {
    max-width:calc(6.4vw * var(--pin-size,1) * var(--pin-hi,1));
    max-height:calc(6.4vw * var(--pin-size,1) * var(--pin-hi,1));
    width:auto; height:auto; display:block;
    filter:drop-shadow(2px 4px 6px rgba(0,0,0,.4));
    -webkit-user-drag:none; user-select:none;
  }
  .pin-label {
    background:white; color:#333;
    font-size:.7rem; font-weight:900;
    padding:3px 9px; border-radius:11px;
    box-shadow:0 2px 6px rgba(0,0,0,.3);
    letter-spacing:.5px;
  }
  #pins .pin-icon{ pointer-events:none; }
  .pin-icon{ position:relative; display:flex; align-items:center; justify-content:center; }   
  #lm-rings{ position:absolute; inset:0; pointer-events:none; z-index:59; }
  #lm-rings .lm-ring{
    position:absolute;
    width:calc(var(--lm-box) * var(--pin-size,1) * var(--lm-hi,1));
    height:calc(var(--lm-box) * var(--pin-size,1) * var(--lm-hi,1));
    margin-left:calc(var(--lm-box) * var(--pin-size,1) * var(--lm-hi,1) / -2);
    margin-top:calc(var(--lm-box) * var(--pin-size,1) * var(--lm-hi,1) / -2);
    display:flex; align-items:center; justify-content:center;
    transform:scale(calc(1 / var(--lm-hi,1)));   
    animation:lmFloat 3s ease-in-out infinite;
  }
  .pin-ring {
    position:absolute;
    width:calc(3.3vw * var(--pin-size,1)); height:calc(3.3vw * var(--pin-size,1));
    border-radius:50%;
    border:3px solid rgba(255,255,255,.8);
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    animation:pingRing 2.4s ease-out infinite;
    pointer-events:none;
  }
  @keyframes pingRing {
    0%{transform:translate(-50%,-50%) scale(.5); opacity:.9}
    100%{transform:translate(-50%,-50%) scale(2.4); opacity:0}
  }
  #lm-rings .pin-ring {
    position:static; top:auto; left:auto;
    width:calc(var(--lm-ring) * var(--pin-size,1) * var(--lm-hi,1));
    height:calc(var(--lm-ring) * var(--pin-size,1) * var(--lm-hi,1));
    border-width:calc(3px * var(--lm-hi,1));   
    transform:none;
    animation:lmPing 3s ease-out infinite;
  }
  @keyframes lmPing {
    0%{transform:scale(.5); opacity:.9}
    80%,100%{transform:scale(2.4); opacity:0}
  }
  #flyer {
    position:fixed; display:none; z-index:82;
    line-height:1; transform:translate(-50%,-50%);
    cursor:pointer;
    filter:none;   
    will-change:transform;   
  }
  #flyer.on-water { filter:none; }
  #flyer.wiggle { animation:wiggle .45s ease; }
  @keyframes wiggle {
    0%{transform:translate(-50%,-50%) rotate(0deg) scale(1)}
    30%{transform:translate(-50%,-50%) rotate(-4deg) scale(1.05)}
    60%{transform:translate(-50%,-50%) rotate(4deg) scale(1.03)}
    100%{transform:translate(-50%,-50%) rotate(0deg) scale(1)}
  }
  #flyer-hint {
    position:fixed; display:none; z-index:83;
    color:rgba(255,255,255,.78);
    font-size:.78rem; font-weight:700;
    text-align:center; pointer-events:none;
    text-shadow:1px 1px 3px rgba(0,0,0,.5);
    letter-spacing:.3px;
  }
  .dogrig{display:block;overflow:visible}
  .dogrig .dpart{transform-box:fill-box}
  .dogrig .d-dog{transform-origin:50% 92%; animation:dogBreath 3s ease-in-out infinite}
  .dogrig .d-earL{transform-origin:70% 16%}
  .dogrig .d-earR{transform-origin:30% 16%}
  .dogrig .d-tail{transform-origin:8% 94%; animation:dogTail 1.9s ease-in-out infinite}
  .dogrig .d-eyeL,.dogrig .d-eyeR{transform-origin:50% 50%; animation:dogBlink 4.6s ease-in-out infinite}
  @keyframes dogBreath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,0.985)}}
  @keyframes dogTail{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(9deg)}}
  @keyframes dogBlink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(0.12)}}
  #pin-cow .pin-emoji{ font-size:calc(7.301rem * var(--a-hi,1) * var(--pin-grow,1)); }   
  #pin-frog .pin-emoji{ font-size:calc(5.528rem * var(--a-hi,1) * var(--pin-grow,1)); }   
  #pin-lamb .pin-emoji{ font-size:calc(7.274rem * var(--a-hi,1) * var(--pin-grow,1)); }   
  #pin-owl .pin-emoji{ font-size:calc(5.773rem * var(--a-hi,1) * var(--pin-grow,1)); }   
  #pin-pig .pin-emoji{ font-size:calc(6.613rem * var(--a-hi,1) * var(--pin-grow,1)); }   
  #pin-dog .pin-emoji{ font-size:calc(5.951rem * var(--a-hi,1) * var(--pin-grow,1)); }
  #pin-rooster .pin-emoji{ font-size:calc(5.456rem * var(--a-hi,1) * var(--pin-grow,1)); }   
  #pin-cat .pin-emoji{ font-size:calc(6.145rem * var(--a-hi,1) * var(--pin-grow,1)); }   
  #pin-lion .pin-emoji{ font-size:calc(7.141rem * var(--a-hi,1) * var(--pin-grow,1)); }   
  #pin-duck .pin-emoji{ font-size:calc(8.782rem * var(--a-hi,1) * var(--pin-grow,1)); }   
  #pin-snake .pin-emoji{ font-size:calc(6.426rem * var(--a-hi,1) * var(--pin-grow,1)); }   
  #pin-bee .pin-emoji{ font-size:calc(6.622rem * var(--a-hi,1) * var(--pin-grow,1)); }   
  #pin-bee .pin-emoji{ transform:scale(1); }   
  #ctrl-panel {
    position:fixed; left:0; right:0; bottom:0;
    padding:0 18px 26px;
    z-index:90;
    display:flex; flex-direction:column; align-items:center; gap:11px;
    opacity:0; transform:translateY(24px);
    visibility:hidden;
    transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.4,.5,1), visibility 0s linear .45s;
    pointer-events:none;
  }
  #ctrl-panel.open { opacity:1; transform:translateY(0); visibility:visible;
    transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.4,.5,1), visibility 0s linear 0s; }
  #ctrl-panel.open .panel-top, #ctrl-panel.open #subtitle-box,
  #ctrl-panel.open .speed-row, #ctrl-panel.open .action-row, #ctrl-panel.open .lang-slider { pointer-events:auto; }
  #ctrl-panel.open .act-btn, #home-panel.open .act-btn, #ctrl-panel.open .lang-btn { animation:popIn .42s cubic-bezier(.34,1.7,.5,1) backwards; }
  #ctrl-panel.open .act-btn, #home-panel.open .act-btn { animation:popIn .42s cubic-bezier(.34,1.7,.5,1) backwards,
                                        breathe 10s ease-in-out infinite;
                              animation-delay:var(--d-pop), var(--d-breathe); }
  #ctrl-panel.open .act-btn:nth-of-type(1), #home-panel.open .act-btn:nth-of-type(1) { --d-pop:.10s; --d-breathe:1.50s }
  #ctrl-panel.open .act-btn:nth-of-type(2), #home-panel.open .act-btn:nth-of-type(2) { --d-pop:.17s; --d-breathe:1.74s }
  #ctrl-panel.open .act-btn:nth-of-type(3), #home-panel.open .act-btn:nth-of-type(3) { --d-pop:.24s; --d-breathe:1.98s }
     ★ Michael 2026-07-31: the rest between swells grew again, from 4.2s to TEN seconds, when the
     held-key look below arrived. Two things now say "press me" — the glow on the one that is
     playing and the bounce on the two that are not — and a bounce arriving every four seconds
     alongside a lit key read as busy. The SWELL ITSELF IS UNCHANGED: still half a second up, six
     tenths back down. Only the pause grew, which is why the percentages moved with the duration
     (74/86 of 4.2s and 89/94 of 10s are the same number of milliseconds). If you ever change the
     10s, move those two numbers with it or the swell turns slow and floaty. */
  @keyframes breathe { 0%,89%,100%{transform:scale(1)} 94%{transform:scale(1.10)} }
  #ctrl-panel.open .act-btn:active, #home-panel.open .act-btn:active {
    animation:popIn .42s cubic-bezier(.34,1.7,.5,1) backwards,
              breathe 10s ease-in-out infinite,
              pressDown .09s ease-out forwards;
    animation-delay:var(--d-pop), var(--d-breathe), 0s;
  }
  #ctrl-panel.open .act-btn.flash, #home-panel.open .act-btn.flash {
    animation:popIn .42s cubic-bezier(.34,1.7,.5,1) backwards,
              breathe 10s ease-in-out infinite,
              pressPop .32s cubic-bezier(.34,1.8,.5,1);
    animation-delay:var(--d-pop), var(--d-breathe), 0s;
  }
  #ctrl-panel.open .act-btn.held, #home-panel.open .act-btn.held {
    animation:popIn .42s cubic-bezier(.34,1.7,.5,1) backwards,
              breathe 10s ease-in-out infinite,
              pressDown .09s ease-out forwards;
    animation-delay:var(--d-pop), var(--d-breathe), 0s;
    z-index:2;
  }
  #ctrl-panel.open .act-btn.held.flash, #home-panel.open .act-btn.held.flash {
    animation:popIn .42s cubic-bezier(.34,1.7,.5,1) backwards,
              breathe 10s ease-in-out infinite,
              pressDown .09s ease-out forwards,
              repress .40s cubic-bezier(.34,1.5,.5,1);
    animation-delay:var(--d-pop), var(--d-breathe), 0s, 0s;
  }
  @keyframes repress {
    0%  { transform:translate(-2px,5px) scale(.97) }
    20% { transform:translate(-3px,8px) scale(.93) }   
    58% { transform:translate(0,-2px)   scale(1.06) }  
    82% { transform:translate(-2px,6px) scale(.96) }   
    100%{ transform:translate(-2px,5px) scale(.97) }   
  }
  #ctrl-panel.open .act-btn.held.btn-name, #home-panel.open .act-btn.held.btn-name,
  #ctrl-panel.open .act-btn.held.btn-sound, #home-panel.open .act-btn.held.btn-sound,
  #ctrl-panel.open .act-btn.held.btn-sentence, #home-panel.open .act-btn.held.btn-sentence {
    box-shadow:-.5px 1px 0 var(--edge),
               0 0 0 4px rgba(255,255,255,.35),
               0 0 22px 8px rgba(255,231,138,.55),
               inset 1px 2px 0 rgba(255,255,255,.55);
  }
  @keyframes pressDown { to { transform:translate(-2px,5px) scale(.97) } }
  @keyframes pressPop {
    0%  { transform:translate(-2px,5px) scale(.97) }
    42% { transform:translate(1px,-3px) scale(1.12) }
    72% { transform:translate(0,0) scale(.99) }
    100%{ transform:translate(0,0) scale(1) }
  }
  #ctrl-panel.open .lang-btn:nth-child(1){animation-delay:.30s}
  #ctrl-panel.open .lang-btn:nth-child(2){animation-delay:.36s}
  #ctrl-panel.open .lang-btn:nth-child(3){animation-delay:.42s}
  #ctrl-panel.open .lang-btn:nth-child(4){animation-delay:.48s}
  @keyframes popIn { 0%{opacity:0;transform:scale(.3) translateY(14px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
  .panel-top { display:none; }
  #close-btn {
    background:#F3DCBB; border:none; color:#8A5A28;
    font-family:var(--font-read); font-size:.9rem; font-weight:400;
    padding:8px 16px; border-radius:22px; cursor:pointer;
    transition:transform .15s, background .2s; flex-shrink:0;
  }
  #close-btn:hover { background:#EBC999; transform:scale(1.05); }
  #close-btn:active { transform:scale(.95); }
  #panel-name {
    flex:1; text-align:center;
    font-family:var(--font-read);
    font-size:clamp(1.4rem,3.4vw,1.9rem);
    color:#fff; letter-spacing:1px;
    text-shadow:0 2px 8px rgba(0,0,0,.55);
  }
  #subtitle-box {
    background:#FFFFFF;
    border-radius:18px;
    padding:11px 18px;
    min-height:54px; text-align:center;
    box-shadow:0 8px 22px rgba(0,0,0,.28);
    max-width:min(560px,90vw);
    position:relative; z-index:0;
    transition:opacity .30s ease, transform .45s cubic-bezier(0.65,0,0.35,1);
  }
  #ctrl-panel #subtitle-box.pill-wait {
    opacity:0; transform:translateY(var(--pill-tuck,64px)); pointer-events:none;
  }
  #subtitle-main {
    font-size:clamp(.95rem,2.4vw,1.2rem);
    font-weight:800; color:#4A4036;
    line-height:1.45; min-height:1.45em;
    letter-spacing:.3px;
  }
  .syl {
    display:inline-block;
    transition:color .1s ease, transform .1s ease;
    white-space:nowrap;
  }
  .syl.lit {
    color:#FF3060;
    transform:scale(1.2);
    text-shadow:0 0 10px rgba(255,48,96,.4);
  }
  .ws { display:inline-block; width:.32em; }
  #subtitle-hint { font-size:.76rem; color:#B09877; margin-top:3px; }
  .speed-row { display:flex; align-items:center; gap:8px; justify-content:center; }
  .speed-label { color:#fff; font-size:.82rem; font-weight:800; text-shadow:0 1px 4px rgba(0,0,0,.55); }
  .spd-btn {
    background:#FBEAD2;
    border:2.5px solid #F0D3A8;
    color:#8A5A2A;
    padding:5px 15px; border-radius:20px; cursor:pointer;
    font-family:var(--font-read); font-size:.82rem; font-weight:800;
    transition:transform .15s, background .2s, border-color .2s;
  }
  .spd-btn:hover { transform:scale(1.05); }
  .spd-btn:active { transform:scale(.95); }
  .spd-btn.active { background:#FFB84D; border-color:#F59500; color:#fff; }
  .action-row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; position:relative; }
  .action-row .act-btn { position:relative; z-index:1; }
  #an-roman-btn, #home-roman-btn{
    position:absolute; z-index:0;
    display:none;
    align-items:center; justify-content:center;
    box-sizing:border-box;
    background:#33B8AD;
    border:3px solid #e8b04a; border-radius:999px;
    box-shadow:-2px 5px 14px rgba(0,0,0,.22);
    font-family:var(--font-read); font-weight:700; font-size:23px;
    color:#4A3B2A; letter-spacing:.5px;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:left .38s cubic-bezier(0.16,1,0.3,1), transform .18s ease-out;
  }
  #an-roman-btn.show, #home-roman-btn.show{ display:flex; }
  #an-roman-btn:active, #home-roman-btn:active{ transform:scale(.92); }
  #an-roman-btn > #an-roman-globe, #home-roman-btn > .roman-globe{ display:none; width:87%; height:87%; }
  #an-roman-btn > #an-roman-abc, #home-roman-btn > .roman-abc{ position:relative; top:-0.167em; }
  #an-roman-btn.globe > #an-roman-abc, #home-roman-btn.globe > .roman-abc{ display:none; }
  #an-roman-btn.globe > #an-roman-globe, #home-roman-btn.globe > .roman-globe{ display:block; }
  .act-btn {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    border:none; border-radius:24px;
    padding:12px 16px; min-width:90px;
    font-family:var(--font-read);
    font-size:.84rem; font-weight:400;
    color:#fff; cursor:pointer;
    transition:transform .15s cubic-bezier(.34,1.6,.5,1), filter .15s, box-shadow .2s ease;
  }
  .act-btn .ico { font-size:1.95rem; line-height:1; filter:drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
  .act-btn .ico img { width:32px; height:32px; display:block; }   
  .spd-ico { width:1.25em; height:1.25em; vertical-align:-0.28em; margin-right:3px; }
  .act-btn:hover { transform:translateY(-4px) scale(1.05) rotate(-1.5deg); filter:brightness(1.06); }
  .act-btn:active { transform:translate(-2px,5px); }
  .act-btn.flash { animation:btnFlash .5s ease; }
  @keyframes btnFlash {
    0%,100%{filter:brightness(1)} 40%{filter:brightness(1.7)}
  }
  .act-btn.btn-name, .act-btn.btn-sound, .act-btn.btn-sentence{
    background-image:linear-gradient(202deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.30) 30%,
                                             rgba(255,255,255,.05) 52%, rgba(255,255,255,0) 64%),
                     var(--face);
  }
  .btn-name     { --face:linear-gradient(202deg,#FF9EC4,#FF5C9A); --edge:#C43A6E;
                  box-shadow:-2.5px 6px 0 #C43A6E, -4px 10px 18px rgba(0,0,0,.30),
                             inset 1px 2px 0 rgba(255,255,255,.8), inset -1px -3px 0 rgba(0,0,0,.10); }
  .btn-sound    { --face:linear-gradient(202deg,#7BE8B0,#2FC98D); color:#06402B; --edge:#1E8F63;
                  box-shadow:-2.5px 6px 0 #1E8F63, -4px 10px 18px rgba(0,0,0,.30),
                             inset 1px 2px 0 rgba(255,255,255,.85), inset -1px -3px 0 rgba(0,0,0,.10); }
  .btn-sentence { --face:linear-gradient(202deg,#AAB7FF,#6E7CF0); --edge:#4A55B8;
                  box-shadow:-2.5px 6px 0 #4A55B8, -4px 10px 18px rgba(0,0,0,.30),
                             inset 1px 2px 0 rgba(255,255,255,.8), inset -1px -3px 0 rgba(0,0,0,.10); }
  .btn-name:active     { box-shadow:-.5px 1px 0 #C43A6E, -1px 2px 5px rgba(0,0,0,.30), inset 1px 2px 0 rgba(255,255,255,.55); }
  .btn-sound:active    { box-shadow:-.5px 1px 0 #1E8F63, -1px 2px 5px rgba(0,0,0,.30), inset 1px 2px 0 rgba(255,255,255,.6); }
  .btn-sentence:active { box-shadow:-.5px 1px 0 #4A55B8, -1px 2px 5px rgba(0,0,0,.30), inset 1px 2px 0 rgba(255,255,255,.55); }
  .lang-slider { position:relative; width:100%; max-width:680px; height:148px; margin:0 auto; overflow:hidden; touch-action:none; cursor:grab; }
  .lang-slider.grabbing { cursor:grabbing; }
  .lang-item { position:absolute; left:50%; top:50%; display:flex; flex-direction:column; align-items:center; gap:3px; width:60px; will-change:transform,opacity; }
  .lang-item .lf { font-size:7rem; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
  .lang-item .lf .flag-img { width:96px; height:72px; border-radius:8px; }   
  .lang-item .ln { font-size:.76rem; font-weight:800; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); white-space:nowrap; width:var(--wheel-ln-w,auto); text-align:center; }
  .lang-item.center .ln { color:#FFE08A; }
  body.flag-spinning .lang-slider { pointer-events:none; }
  .mode-overlay {
    opacity:0; pointer-events:none;
    visibility:hidden;
    transition:opacity 2.363s cubic-bezier(.65,0,.35,1), visibility 2.363s;
  }
  body.town-prepaint:not([data-mode="town"]) #mode-town { opacity:0.005; pointer-events:none; visibility:visible; transition:none; }  
  body[data-mode="animals"] #mode-animals,
  body[data-mode="people"]  #mode-people,
  body[data-mode="explore"] #mode-explore,
  body[data-mode="home"]    #mode-home,
  body[data-mode="town"]    #mode-town {
    opacity:1; pointer-events:auto; visibility:visible;
  }
  body:not(.tab-switching):not([data-mode="animals"]) #mode-animals *,
  body:not(.tab-switching):not([data-mode="people"])  #mode-people *,
  body:not(.tab-switching):not([data-mode="home"])    #mode-home *,
  body:not(.tab-switching):not([data-mode="town"])    #mode-town *,
  body:not(.tab-switching):not([data-mode="explore"]) #explore-stage * {
    animation-play-state:paused !important;
  }
  .mode-svg {
    opacity:0; pointer-events:none;
    transition:opacity 2.363s cubic-bezier(.65,0,.35,1);
  }
  body[data-mode="people"]  #svg-people,
  body[data-mode="explore"] #svg-explore {
    opacity:1; pointer-events:auto;
  }
  body:not([data-mode="animals"]) #pins .pin,
  body:not([data-mode="animals"]) #pins .pin .pin-tap    { pointer-events:none; }
  body:not([data-mode="people"])  #lm-pins .pin,
  body:not([data-mode="people"])  #lm-pins .pin .pin-tap { pointer-events:none; }
  body:not([data-mode="animals"]) #flyer        { display:none !important; }
  body:not([data-mode="animals"]) #atlas-canvas { display:none !important; }   
  .mode-stub {
    position:fixed; top:50%; left:50%;
    transform:translate(-50%,-50%);
    z-index:30; text-align:center;
    background:rgba(255,255,255,.92);
    border:3px solid #B8941E; border-radius:24px;
    padding:26px 34px; max-width:80vw;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
  }
  .stub-emoji { font-size:3.4rem; line-height:1; }
  .stub-title { font-family:var(--font-read); font-size:1.7rem; color:#7A4A0A; margin-top:6px; }
  .stub-sub   { font-weight:700; color:#5a4a2a; margin-top:8px; line-height:1.4; }
  #menu-btn {
    position:absolute; left:11.04%; top:10.24%; z-index:999;
    width:76px; height:76px; cursor:pointer;
    background:none; border:none; padding:0;
    display:flex; align-items:center; justify-content:center;
    overflow:visible;   
    transform:translate(-50%,-50%);
    transition:transform .3s ease;
  }
  .mb-cap {
    width:100%; height:100%; border-radius:22px;
    border:3px solid #8B5A12;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
    background-image:linear-gradient(202deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.34) 30%,
                                             rgba(255,255,255,.06) 52%, rgba(255,255,255,0) 64%),
                     linear-gradient(202deg,#FFF6D4,#FFDD8E);
    box-shadow:-1.5px 3.5px 0 #A9701A, -3px 7px 14px rgba(0,0,0,.26),
               inset 1px 2px 0 rgba(255,255,255,.85), inset -1px -2px 0 rgba(0,0,0,.08);
    transition:transform .25s ease, box-shadow .12s ease;
  }
  #menu-btn:hover { transform:translate(-50%,-50%) scale(1.08); }
  #menu-btn:active .mb-cap {
    transform:translate(-1px,3px);
    box-shadow:-.5px 1px 0 #A9701A, -1px 2px 5px rgba(0,0,0,.26), inset 1px 2px 0 rgba(255,255,255,.6);
  }
  body.menu-open #menu-btn { transform:translate(-50%,-50%) translateX(-420px); }
  .mb-cap span { display:block; width:40px; height:5.5px; background:#7A4A0A; border-radius:4px; }
  @keyframes mbAttract {
    0%   { transform:rotate(0.0deg)    scale(1.000) }
    4%   { transform:rotate(-0.8deg)   scale(1.002) }
    8%   { transform:rotate(-9.3deg)   scale(0.990) }
    12%  { transform:rotate(-24.0deg)  scale(0.934) }
    16%  { transform:rotate(-23.5deg)  scale(0.923) }
    20%  { transform:rotate(0.8deg)    scale(0.988) }
    24%  { transform:rotate(29.3deg)   scale(1.024) }
    28%  { transform:rotate(49.5deg)   scale(1.026) }
    32%  { transform:rotate(68.6deg)   scale(1.030) }
    36%  { transform:rotate(90.3deg)   scale(1.034) }
    40%  { transform:rotate(114.3deg)  scale(1.036) }
    44%  { transform:rotate(139.9deg)  scale(1.038) }
    48%  { transform:rotate(166.5deg)  scale(1.039) }
    52%  { transform:rotate(193.5deg)  scale(1.039) }
    56%  { transform:rotate(220.1deg)  scale(1.038) }
    60%  { transform:rotate(245.7deg)  scale(1.036) }
    64%  { transform:rotate(269.7deg)  scale(1.034) }
    68%  { transform:rotate(291.4deg)  scale(1.030) }
    72%  { transform:rotate(310.4deg)  scale(1.026) }
    76%  { transform:rotate(326.4deg)  scale(1.021) }
    80%  { transform:rotate(339.1deg)  scale(1.016) }
    84%  { transform:rotate(348.6deg)  scale(1.011) }
    88%  { transform:rotate(354.8deg)  scale(1.007) }
    92%  { transform:rotate(358.4deg)  scale(1.003) }
    96%  { transform:rotate(359.8deg)  scale(1.001) }
    100% { transform:rotate(360.0deg)  scale(1.000) }
  }
  #menu-btn.attract .mb-cap { animation:mbAttract 1.05s linear both; }
  #menu-btn::before { content:''; position:absolute; inset:-18px; border-radius:36px; }
  #menu-scrim {
    position:fixed; inset:0; z-index:87; background:rgba(8,18,48,.45);
    opacity:0; pointer-events:none; transition:opacity .3s;
  }
  body.menu-open #menu-scrim { opacity:1; pointer-events:auto; }
  #menu-drawer {
    position:fixed; top:0; left:0; bottom:0; z-index:88;
    width:250px; max-width:78vw;
    background:
      radial-gradient(circle at 50% 100%, transparent 12px, rgba(255,255,255,.65) 12px 14px, transparent 14px) 0 0/28px 16px,
      radial-gradient(circle at 50% 100%, transparent 12px, rgba(255,255,255,.65) 12px 14px, transparent 14px) 14px 8px/28px 16px,
      linear-gradient(180deg,#FFF6DC,#FFE2A8);
    border-right:3px solid #8B5A12; box-shadow:4px 0 18px rgba(0,0,0,.35);
    transform:translateX(-105%); transition:transform .3s ease;
    padding:12px 12px 14px; display:flex; flex-direction:column; gap:8px;
  }
  body.menu-open #menu-drawer { transform:translateX(0); }
  .menu-head { font-family:var(--font-display);  font-size:1.3rem; color:#7A4A0A; text-align:center; padding:6px 0 8px; }
  .mi-slot{
    position:relative;
    display:block; border-radius:999px;
    padding:0 0 10px;
  }
  .mi-slot::before{
    content:''; position:absolute; left:0; right:0; top:8px; bottom:0;
    border-radius:999px;
    background:var(--edge,#C69218);
    box-shadow:-4px 11px 15px rgba(0,0,0,.26);
  }
  .menu-item {
    position:relative;
    display:flex; align-items:center; gap:10px; width:100%;
    font-family:var(--font-read); font-weight:800; font-size:1.05rem; color:#4A2E06;
    border:none; cursor:pointer; text-align:left;
    padding:9px 14px; border-radius:999px;
    background-image:linear-gradient(202deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.30) 30%,
                                             rgba(255,255,255,.05) 52%, rgba(255,255,255,0) 64%),
                     var(--face,linear-gradient(202deg,#FFE9AE,#FFD070));
    box-shadow:inset 1px 3px 0 rgba(255,255,255,.85), inset -1px -4px 0 rgba(0,0,0,.10);
    transition:transform .16s cubic-bezier(.34,1.8,.5,1), box-shadow .16s ease;
    min-height:44px;
  }
  .menu-item:hover:not(:disabled) { filter:brightness(1.06); }
  .menu-item:active, .menu-item.mi-held {
    transform:translateY(8px);
    box-shadow:none;
  }
  .menu-item .mi-emoji {
    width:32px; height:32px; flex:0 0 32px; border-radius:50%;
    background:rgba(255,255,255,.92);
    box-shadow:-1px 2px 0 rgba(0,0,0,.16), inset 0 -2px 0 rgba(0,0,0,.06);
  }
  .mi-animals   { --face:linear-gradient(202deg,#FFC69B,#FF9A54); --edge:#C96A24 }
  .mi-countries { --face:linear-gradient(202deg,#FFA9B8,#F76F87); --edge:#C2445C }
  .mi-landmarks { --face:linear-gradient(202deg,#A9C8FF,#6F9BF0); --edge:#4569B8 }
  .mi-household { --face:linear-gradient(202deg,#9CE9BE,#4FCE95); --edge:#2A9469 }
  .mi-town      { --face:linear-gradient(202deg,#CDB4FF,#9C7BF0); --edge:#6B4FBA }
  .mi-passport  { --face:linear-gradient(202deg,#FFE08A,#FFC53D); --edge:#C99514 }
  .mi-game      { --face:linear-gradient(202deg,#9FE6E4,#4FC9C6); --edge:#2A918F }
  .mi-settings  { --face:linear-gradient(202deg,#E2D9C6,#C3B79C); --edge:#8E8266 }
  .mi-about     { --face:linear-gradient(202deg,#DCE4F0,#B8C6DC); --edge:#8494AC }
  .mi-parents   { --face:linear-gradient(202deg,#E8CBA8,#CFA271); --edge:#966B3E }
  .menu-item .mi-emoji { font-size:1.3rem; display:inline-flex; align-items:center; justify-content:center; }
  .menu-item .mi-emoji svg { width:1.3rem; height:1.3rem; display:block; }
  .menu-item.active {
    transform:translateY(8px);
    box-shadow:none;
  }
  .menu-divider { height:2px; background:rgba(184,148,30,.35); margin:2px 4px; border-radius:2px; }
  .cont, .ctlabel { transition:opacity 2.363s cubic-bezier(.65,0,.35,1), filter .3s ease; }
  body.tab-switching .cont,
  body.tab-switching .ctlabel,
  body.tab-switching .mode-svg { transition:none; }
  body[data-mode="explore"] .cont { opacity:0; pointer-events:none; }
  .country {
    stroke:#ffffff; stroke-width:0.6;
    stroke-linejoin:round; cursor:pointer;
    transition:filter .15s;
  }
  .country:hover, .country.sel {
    fill:#FFE07A; stroke:#FFC53D; stroke-width:1.1;
    filter:drop-shadow(0 0 6px #FFD24D);
    animation:ctryGlow 2.4s ease-in-out infinite;
  }
  @keyframes ctryGlow{ 0%,100%{opacity:.62} 50%{opacity:.96} }
  .ctry-marker {
    position:fixed; transform:translate(-50%,-50%);
    width:20px; height:20px; border-radius:50%;
    background:#E8784A;            
    border:2.5px solid #fff;
    box-shadow:0 2px 5px rgba(0,0,0,.4);
    cursor:pointer; z-index:33;
    transition:transform .15s;
  }
  .ctry-marker:hover { transform:translate(-50%,-50%) scale(1.22); }
  #country-panel {
    position:fixed; left:50%; bottom:0; transform:translate(-50%,115%);
    width:min(440px,94vw); z-index:84;
    background:linear-gradient(180deg,#FFF7E0,#FFE7B0);
    border:3px solid #8B5A12; border-bottom:none;
    border-radius:26px 26px 0 0;
    box-shadow:0 -8px 26px rgba(0,0,0,.35);
    padding:18px 18px 28px;
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
  }
  #country-panel.open { transform:translate(-50%,0); }
  .country-hero { text-align:center; margin:2px 0 10px; }
  .country-flag-big { width:62px; height:46px; border-radius:7px; margin:0 auto;
    box-shadow:0 2px 5px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.12); }
  .flag-img { display:block; object-fit:cover; border-radius:5px; box-shadow:0 0 0 1px rgba(0,0,0,.15); }
  .panel-close {
    position:absolute; top:9px; right:11px; width:34px; height:34px; z-index:3;
    border:none; border-radius:50%; cursor:pointer; line-height:1;
    background:rgba(139,90,18,.12); color:#7A4A0A; font-size:1.05rem;
  }
  .panel-close:hover { background:rgba(139,90,18,.22); transform:scale(1.08); }
  .learn-row {
    display:flex; align-items:center; gap:12px;
    padding:9px 13px; margin:8px 4px 0; border-radius:18px; border:2.5px solid;
  }
  .learn-row.country-row { background:#EAF4FF; border-color:#A7CBEA; }
  .learn-row.cap-row     { background:#FFF2D2; border-color:#E8C45F; }
  .lr-badge { flex:0 0 auto; width:30px; height:30px; display:block; }
  .lr-badge.star  { filter:drop-shadow(0 1px 1px rgba(0,0,0,.28)); }
  .lr-badge.globe { filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
  .lr-name { font-family:var(--font-read); font-size:1.15rem; line-height:1.08; color:#7A4A0A;
    flex:1 1 auto; min-width:0; text-align:left;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .lr-btns { display:flex; gap:9px; flex:0 0 auto; }
  #country-panel .flag-btn { width:66px; height:50px; border-width:2.5px; border-radius:13px;
    box-shadow:0 3px 7px rgba(0,0,0,.2); }
  #country-panel .flag-btn .flag-img { width:46px; height:34px; }
  .flag-btn {
    width:114px; height:80px; cursor:pointer;
    border:3px solid #8B5A12; border-radius:16px; background:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,.25);
    display:flex; align-items:center; justify-content:center;
    transition:transform .15s;
  }
  .flag-btn:hover { transform:translateY(-3px) scale(1.04); }
  .flag-btn .flag-face { font-size:3rem; line-height:1; }
  #home-panel .btn-ico { width:48px; height:48px; display:block; }
  .flag-btn.wiggle { animation:btnWiggle .5s ease; }
  @keyframes btnWiggle {
    0%   { transform:rotate(0)     scale(1);    filter:brightness(1); }
    30%  { transform:rotate(-7deg) scale(1.10); filter:brightness(1.3); }
    60%  { transform:rotate(6deg)  scale(1.06); filter:brightness(1.15); }
    100% { transform:rotate(0)     scale(1);    filter:brightness(1); }
  }
  #passport-panel {
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.9);
    width:min(560px,92vw); max-height:82vh; z-index:90;
    background:linear-gradient(180deg,#FFF7E0,#FFE7B0);
    border:3px solid #8B5A12; border-radius:24px;
    box-shadow:0 12px 40px rgba(0,0,0,.4);
    padding:16px 16px 20px; overflow:auto;
    opacity:0; pointer-events:none;
    transition:opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1);
  }
  #passport-panel.open { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
  .pp-head { display:flex; align-items:center; justify-content:center; gap:12px; margin:2px 36px 14px; }
  .pp-title { font-family:var(--font-read); font-size:1.5rem; color:#7A4A0A; }
  .pp-count { font-family:var(--font-read); font-weight:800; color:#9A6A00;
    background:#FFD98A; border-radius:12px; padding:2px 10px; }
  .pp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px; }
  .pp-cell { position:relative; background:#fff; border:2.5px solid #E6C98A; border-radius:14px;
    padding:9px 4px; text-align:center; opacity:.5; filter:grayscale(.75); transition:transform .15s; }
  .pp-cell.got { opacity:1; filter:none; border-color:#F2A93B; box-shadow:0 3px 8px rgba(242,169,59,.35); }
  .pp-icon { font-size:2rem; line-height:1; }
  .pp-name { font-family:var(--font-read); font-weight:800; font-size:.7rem; color:#7A4A0A;
    margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pp-stamp { position:absolute; top:-7px; right:-7px; color:#E23B2E; font-size:1.15rem;
    text-shadow:-1px 0 #FFD23D,1px 0 #FFD23D,0 -1px #FFD23D,0 1px #FFD23D; }
  .pin, .act-btn, .lang-btn, .spd-btn, #flyer, #map-dim, .pin-img, #menu-btn, .menu-item { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  img, svg { -webkit-user-drag:none; user-drag:none; }
  @media (hover: none) {
    .act-btn:hover, .lang-btn:hover, .spd-btn:hover { transform:none; filter:none; }
    #menu-btn:hover { transform:translate(-50%,-50%); }
  }
  #glow-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:50; pointer-events:none; }
  #labels-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:51; pointer-events:none; }
  #lean-stage { position:fixed; inset:0; transform-origin:0 0; will-change:transform; }
  #lean-map-canvas { position:absolute; inset:0; width:100%; height:100%;
                     display:block; pointer-events:none; will-change:transform; }
  #lm-pins .pin-thumb { filter:none; }
  body[data-mode="people"] #lm-pins .pin { will-change:transform; }
  #glow-svg .glow-area{ fill:#FFE07A; stroke:#FFC53D; stroke-width:1.2; opacity:.55; }
  #glow-svg .glow-blob{ stroke:none; }
  #glow-svg #glow-content{ opacity:.8; animation:glowShim 2.85s ease-in-out infinite; }
  body[data-mode="explore"] #glow-svg #glow-content{ will-change:opacity; }
  #glow-svg #glow-content.arrive{ animation:glowArrive .55s ease-out both, glowShim 2.85s ease-in-out .55s infinite; }
  @keyframes glowShim{ 0%,100%{opacity:.62} 50%{opacity:1} }
  @keyframes glowArrive{ from{opacity:0} to{opacity:.62} }
  .pin-rig{ font-size:calc(2.155rem * var(--a-hi,1)); }      
  .snk2-body{ transform-box:fill-box; transform-origin:50% 86%; animation:snkSway 2.6s ease-in-out infinite; }
  @keyframes snkSway{ 0%,100%{transform:rotate(-3.2deg)} 50%{transform:rotate(3.2deg)} }
  .snk-tongue{ transform-box:fill-box; transform-origin:center top; animation:snkTongue 2.4s ease-in-out infinite; }
  @keyframes snkTongue{ 0%,70%,100%{transform:scaleY(.14)} 82%,92%{transform:scaleY(1)} }
  #postcard-overlay{
    position:fixed; inset:0;
    background:rgba(8,18,48,0);
    z-index:86;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
    transition:background .4s ease;
  }
  #postcard-overlay.active{ background:rgba(0,0,0,.25); pointer-events:auto; }
  #postcard-overlay:not(.active):not(.warming) #postcard-wrapper{ display:none; }
  #postcard-overlay.warming{ pointer-events:none; }
  #postcard-overlay.warming #postcard-wrapper{ opacity:0.001; }
  #postcard-wrapper{
    position:relative;
    overflow:hidden;
    border-radius:14px;
  }
  #postcard-frame{
    display:block;
    width:100%; height:100%;
    border:none; outline:none;
  }
  #flip-proxy{
    position:absolute;               
    display:none;
    transform-style:preserve-3d;
    pointer-events:none;
    z-index:2;
    will-change:transform;
  }
  #postcard-overlay.flipping #flip-proxy{ display:block; }
  .flip-face, .flip-face *{
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .flip-face{
    position:absolute; inset:0;
    border-radius:14px;
    overflow:hidden;
  }
  #flip-front{ transform:rotateY(0deg) translateZ(0.5px); }
  #flip-back{ transform:rotateY(180deg) translateZ(0.5px); }
  #flip-back.has-real .pc-back{ display:none; }
  #flip-thumb{
    position:absolute; inset:0; margin:auto;
    max-width:88%; max-height:88%;
    object-fit:contain;
    z-index:2;
  }
  #flip-preview{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    opacity:0;
    z-index:1;
  }
  .pc-back{
    position:absolute; inset:0;
    background:#fbf3e2;
    border:6px solid #fff;
    border-radius:14px;
    box-shadow:inset 0 0 0 2px #e8dcc2;
  }
  .pc-stamp{
    position:absolute; top:7%; right:5%;
    width:19%; aspect-ratio:1;
    background:#fff;
    border:3px dashed #d9884a;
    border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    transform:rotate(4deg);
  }
  .pc-stamp img{ width:78%; height:78%; object-fit:contain; }
  .pc-postmark{
    position:absolute; top:9%; right:22%;
    width:13%; aspect-ratio:1;
    border:3px solid rgba(200,90,80,.5);
    border-radius:50%;
    transform:rotate(-12deg);
  }
  .pc-divider{
    position:absolute; top:12%; bottom:12%; left:50%;
    width:3px; border-radius:2px;
    background:#d9c9a3;
  }
  .pc-lines{ position:absolute; left:58%; right:8%; top:42%; }
  .pc-lines i{
    display:block; height:4px; border-radius:2px;
    background:#d9c9a3; margin-bottom:14%;
  }
  .pc-lines i:last-child{ width:62%; }
  .al-spark { position: fixed; display: grid; place-items: center; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%) scale(0); opacity: 0; }
  .al-spark .arms { width: 100%; height: 100%; background: linear-gradient(135deg, #ffe9a0, #f3c141); clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); filter: drop-shadow(0 0 3px rgba(255,233,160,.55)); }
  .al-spark .pip  { position: absolute; width: 30%; height: 30%; background: radial-gradient(circle, #fff 0%, #ffe9a0 60%, transparent 100%); border-radius: 50%; filter: drop-shadow(0 0 2px rgba(255,255,255,.7)); }
  .al-spark.t-cream .arms { background: linear-gradient(135deg, #fff, #faecc4); filter: drop-shadow(0 0 3px rgba(250,236,196,.55)); }
  .al-spark.t-warm  .arms { background: linear-gradient(135deg, #ffe9a0, #e89870); filter: drop-shadow(0 0 3px rgba(232,152,112,.55)); }
  .al-teleport-out { transition: opacity 270ms ease-out !important; opacity: 0 !important; }
  .al-teleport-in { animation: alPinOpacityIn 480ms ease-out both, alFlyerPopIn 480ms cubic-bezier(.34,1.4,.5,1) both; }
  @keyframes alFlyerPopIn { from { transform: translate(-50%,-50%) scale(.7); } to { transform: translate(-50%,-50%) scale(1); } }
  .al-pin-fadein { animation: alPinOpacityIn 480ms ease-out both; }
  .al-pin-fadein .pin-icon { animation: alPinPopIn 480ms cubic-bezier(.34,1.4,.5,1) both; }
  @keyframes alPinOpacityIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes alPinPopIn { from { transform: scale(.7); } to { transform: scale(1); } }
  .pg-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
    background: rgba(20,22,28,.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    animation: pgFadeIn .18s ease-out both; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .pg-overlay.pg-closing { animation: pgFadeOut .2s ease-in both; }
  @keyframes pgFadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pgFadeOut { from { opacity: 1; } to { opacity: 0; } }
  .pg-card { position: relative; width: min(86vw, 320px); background: #f4f4f6; color: #2a2d34;
    border-radius: 18px; padding: 22px 20px 20px; box-shadow: 0 16px 48px rgba(0,0,0,.4);
    font-family: var(--font-read); text-align: center; }   
  .pg-card.pg-shake { animation: pgShake .4s; }
  @keyframes pgShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(4px)} }
  .pg-close { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: none; background: transparent;
    color: #9a9da6; font-size: 18px; line-height: 1; cursor: pointer; border-radius: 8px; }
  .pg-close:active { background: #e4e4e8; }
  .pg-title { font-size: 17px; font-weight: 700; letter-spacing: .2px; }
  .pg-sub { font-size: 12px; color: #767a84; margin: 3px 0 14px; }
  .pg-question { font-size: 24px; font-weight: 700; line-height: 1.25; min-height: 2.2em;
    display: flex; align-items: center; justify-content: center;
    text-wrap: balance; font-variant-numeric: tabular-nums; }
  .pg-entry { min-height: 34px; margin: 8px auto 14px; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: #1a73c0; letter-spacing: 2px; }
  .pg-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .pg-key { height: 52px; border: none; border-radius: 12px; background: #fff; color: #2a2d34; font-size: 21px; font-weight: 600;
    cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.12); font-variant-numeric: tabular-nums; }
  .pg-key:active { background: #e8e9ee; transform: scale(.96); }
  .pg-key-action { background: #e9edf3; color: #4a5160; }
  .gu-panel {
    position:fixed; inset:0; z-index:99998; display:flex; align-items:center; justify-content:center;
    background:rgba(18,20,26,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .22s ease;
  }
  .gu-panel.open { opacity:1; pointer-events:auto; }
  .gu-sheet {
    width:min(620px,94vw); max-height:88vh; display:flex; flex-direction:column;
    background:#f7f7f9; color:#22252c; border-radius:18px; overflow:hidden;
    box-shadow:0 18px 54px rgba(0,0,0,.42);
    transform:translateY(10px) scale(.985); transition:transform .22s cubic-bezier(.2,.8,.2,1);
  }
  .gu-panel.open .gu-sheet { transform:none; }
  .gu-head {
    display:flex; align-items:center; gap:10px; padding:14px 14px 12px 18px;
    border-bottom:1px solid #e3e4e9; background:#fff; flex:0 0 auto;
  }
  .gu-title { font-family:var(--font-read); font-weight:800; font-size:1.05rem; flex:1; }
  .gu-close {
    width:34px; height:34px; flex:0 0 auto; border:none; border-radius:9px;
    background:#eef0f4; color:#59606e; font-size:16px; cursor:pointer;
  }
  .gu-close:active { background:#e0e3ea; transform:scale(.95); }
  .gu-scroll {
    padding:16px 18px 22px; overflow-y:auto; -webkit-overflow-scrolling:touch;
    font-family:var(--font-read); font-size:.92rem; line-height:1.5;
  }
  .gu-scroll p { margin:0 0 .7em; }
  .gu-lead { color:#4a5160; }
  .gu-foot { color:#6b717e; font-size:.85rem; margin-top:12px; }
  .gu-dim  { color:#8b909b; }
  .gu-hr { border:none; border-top:1px solid #e3e4e9; margin:16px 0; }
  .gu-sec { margin:0 0 18px; }
  .gu-sec-title {
    font-family:var(--font-read); font-weight:800; font-size:.78rem; letter-spacing:.06em;
    text-transform:uppercase; color:#8b909b; margin:0 0 7px;
  }
  .gu-sec-body { }
  .gu-badges { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px; }
  .gu-badge {
    background:#e7f1e8; color:#2f6b3a; border:1px solid #cfe3d2; border-radius:999px;
    padding:3px 10px; font-size:.76rem; font-weight:700;
  }
  .gu-row {
    display:flex; align-items:center; gap:12px; width:100%; text-align:left;
    background:#fff; border:1px solid #e3e4e9; border-radius:12px;
    padding:12px 14px; margin:0 0 8px; cursor:pointer; font-family:var(--font-read); color:inherit;
  }
  .gu-row:active { background:#eef0f4; transform:scale(.995); }
  .gu-row-text { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
  .gu-row-title { font-weight:800; font-size:.95rem; }
  .gu-row-sub { font-size:.8rem; color:#767c88; }
  .gu-row-chev { color:#a8adb7; font-size:1.3rem; line-height:1; flex:0 0 auto; }
  .gu-row-off { opacity:.55; cursor:default; }
  .gu-back {
    border:none; background:transparent; color:#4a6fa5; font-family:var(--font-read);
    font-weight:700; font-size:.88rem; padding:0 0 12px; cursor:pointer;
  }
  .gu-todo {
    display:flex; align-items:flex-start; gap:9px;
    background:#f0f1f4; border:1px dashed #c8ccd4; border-radius:10px; padding:11px 12px;
  }
  .gu-todo-tag {
    flex:0 0 auto; background:#dfe2e8; color:#5d636f; border-radius:5px;
    padding:2px 7px; font-size:.66rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.04em; margin-top:1px; white-space:nowrap;
  }
  .gu-todo-what { color:#5d636f; font-size:.85rem; line-height:1.45; }
  .set-slot { display:flex; align-items:flex-start; gap:13px; margin:0 0 14px; }
  .set-icon { flex:0 0 auto; width:52px; height:52px; border-radius:14px; background:#fff;
    border:1px solid #e3e4e9; display:flex; align-items:center; justify-content:center;
    font-size:1.7rem; line-height:1; }
  .set-slot-body { flex:1; min-width:0; }
  .set-toggle { display:flex; align-items:flex-start; gap:11px; width:100%; text-align:left;
    background:#fff; border:1px solid #e3e4e9; border-radius:14px; padding:11px 13px;
    font-family:var(--font-read); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .set-toggle-track { flex:0 0 auto; width:46px; height:28px; border-radius:14px; background:#cdd0d8;
    position:relative; margin-top:1px; transition:background .22s ease; }
  .set-toggle-knob { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
    background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28);
    transition:transform .22s cubic-bezier(0.65,0,0.35,1); }
  .set-toggle.on .set-toggle-track { background:#2fb5a3; }
  .set-toggle.on .set-toggle-knob { transform:translateX(18px); }
  .set-toggle-text { display:flex; flex-direction:column; gap:3px; min-width:0; }
  .set-toggle-title { color:#2b303a; font-size:.9rem; font-weight:800; }
  .set-toggle-sub { color:#5d636f; font-size:.82rem; line-height:1.45; }
  .gu-prose { color:#3a3f4a; }
  .gu-prose .gu-h { font-family:var(--font-read); font-weight:800; font-size:.9rem; margin:14px 0 5px; }
  .gu-prose code { background:#eceef2; border-radius:4px; padding:1px 4px; font-size:.86em; }
  .gu-ul { margin:0 0 .7em; padding-left:1.15em; }
  .gu-ul li { margin:0 0 .3em; }
  .gu-draft {
    background:#fff5e0; border:1px solid #f0dcae; color:#7a5c14; border-radius:9px;
    padding:8px 11px; margin:0 0 11px; font-size:.82rem; font-weight:700;
  }
  .gu-facts { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; }
  .gu-facts dt { color:#8b909b; font-size:.82rem; }
  .gu-facts dd { margin:0; font-size:.82rem; font-weight:700; }
  body[data-mode="home"] { background:#EAD7B6; }
  #mode-home {
    position:fixed; inset:0; z-index:22;
    background:#cfeff7;   
  }
  #mode-home { --home-soften:7px; --home-dim:0.62;
    transition:filter .42s cubic-bezier(0.65,0,0.35,1), transform .42s cubic-bezier(0.65,0,0.35,1); }
  body.home-card-open #mode-home {
    filter:blur(var(--home-soften)) brightness(var(--home-dim));
    transform:scale(1.03); }
  #home-stage { position:absolute; inset:0; z-index:2;
    background:url("../assets/images/household/house-base.webp?v=clean5") center center / cover no-repeat; }
  .home-layer { position:absolute; pointer-events:none; transform-origin:center center; }
  .home-layer img { width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none; }
  .home-layer.glow img { filter:drop-shadow(0 0 4px #ffd24a) drop-shadow(0 0 4px #ffd24a) drop-shadow(0 0 9px #ffd24a); }
  @keyframes home-pop { 0%{transform:scale(1);} 35%{transform:scale(1.13);} 100%{transform:scale(1);} }
  .home-layer.pop { animation:home-pop .42s cubic-bezier(.34,1.56,.64,1); }
  #home-scene { display:none; }
  #home-scene-DISABLED { width:min(900px,100%); height:100%; max-height:780px; display:flex; flex-direction:column; }
  #home-roof {
    flex:0 0 auto; height:36px; background:#C85B33;
    clip-path:polygon(0 100%, 50% 0, 100% 100%);
  }
  #home-house {
    flex:1 1 auto; min-height:0;
    background:#9C6B2F; border:5px solid #7A4A0A;
    border-radius:4px 4px 20px 20px; padding:8px;
  }
  #home-rooms {
    height:100%; display:grid;
    grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; gap:8px; min-height:0;
  }
  .hi-room {
    border-radius:12px; padding:8px 8px 6px;
    display:flex; flex-direction:column; min-height:0;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);
  }
  .hi-living   { background:#FBEBCF; }
  .hi-kitchen  { background:#E6F0D8; }
  .hi-bathroom { background:#DCEBFA; }
  .hi-bedroom  { background:#EAE6FB; }
  .hi-room-name {
    flex:0 0 auto; font-family:var(--font-read);
    font-size:.95rem; color:#7A4A0A; margin:0 0 6px 2px;
  }
  .hi-tiles {
    flex:1 1 auto; min-height:0; overflow:auto;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
    gap:7px; align-content:start;
  }
  .hi-item {
    cursor:pointer; border:none; background:rgba(255,255,255,.82);
    border-radius:13px; padding:8px 3px 6px;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    transition:transform .12s ease, background .12s;
  }
  @media (hover:hover){ .hi-item:hover { transform:translateY(-3px) scale(1.06); background:#fff; } }
  .hi-emoji { font-size:1.9rem; line-height:1; filter:drop-shadow(1px 3px 4px rgba(0,0,0,.22)); }
  .hi-sprite { height:50px; width:auto; object-fit:contain; filter:drop-shadow(2px 5px 3px rgba(0,0,0,.28)); }
  .hi-item.has-sprite { background:rgba(255,255,255,.30); }
  @media (hover:hover){ .hi-item.has-sprite:hover { background:rgba(255,255,255,.6); } }
  .hi-hero-sprite { height:118px; width:auto; object-fit:contain; filter:drop-shadow(3px 8px 8px rgba(0,0,0,.34)); }
  .hi-word  { font-size:.7rem; font-weight:900; color:#5a3a0a; text-align:center; line-height:1.05; }
  .hi-item.hi-pop { animation:hiPop .45s cubic-bezier(.34,1.5,.5,1); }
  @keyframes hiPop { 0%{transform:scale(1)} 40%{transform:scale(1.22)} 100%{transform:scale(1)} }
  #home-panel {
    position:fixed; left:0; right:0; bottom:0; z-index:84;
    padding:6px 18px 22px;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    opacity:0; transform:translateY(24px); pointer-events:none;
    visibility:hidden;   
    transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.4,.5,1), visibility 0s linear .45s;
  }
  #home-panel.open { opacity:1; pointer-events:auto; transform:translateY(0); visibility:visible;
    transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.4,.5,1), visibility 0s linear 0s; }
  #home-hero {
    width:min(340px,62vw); height:min(230px,30vh);
    display:flex; align-items:center; justify-content:center;
    background:#FFFFFF; border-radius:22px; overflow:hidden;
    background-size:cover; background-position:center; background-repeat:no-repeat;
    box-shadow:0 10px 26px rgba(0,0,0,.32);
    margin-bottom:2px;
  }
  #home-hero-img { max-width:92%; max-height:92%; object-fit:contain; display:block; }
  #home-hero.scene #home-hero-img { max-width:100%; max-height:100%; object-fit:cover; width:100%; height:100%; }
  #home-panel.flying { transform:none; transition:opacity .28s ease; }
  #home-hero.pop { animation:homeHeroPop .42s cubic-bezier(.34,1.5,.5,1); }
  @keyframes homeHeroPop { 0%{transform:scale(.86)} 55%{transform:scale(1.04)} 100%{transform:scale(1)} }
  #home-title {
    font-family:var(--font-read); font-weight:800;
    font-size:clamp(.95rem,2.4vw,1.2rem); color:#4A4036;
    letter-spacing:.3px; line-height:1.45;
    background:#FFFFFF; border-radius:18px; padding:11px 18px;
    text-align:center; box-shadow:0 8px 22px rgba(0,0,0,.28);
    max-width:min(560px,90vw); white-space:nowrap;
  }
  #home-title.sentence { white-space:normal; max-width:min(620px,92vw); }
  #home-actions { margin-top:2px; }
  .hi-speak-row { display:flex; justify-content:center; margin:16px 0 2px; }
  @media (max-width:560px){
    #mode-home { overflow:auto; align-items:flex-start; padding-top:84px; }
    #home-scene { height:auto; }
    #home-house { flex:0 0 auto; }
    #home-rooms { grid-template-columns:1fr; grid-auto-rows:auto; }
    .hi-tiles { overflow:visible; }
  }
  body[data-mode="town"] { background:#3DA6D4; }
  #mode-town { position:fixed; inset:0; z-index:22; }
  #town-stage { position:absolute; inset:0; background-position:center center;
    background-size:cover; background-repeat:no-repeat; }
#al-splash{ position:fixed; inset:0; z-index:9999; background:#F3EADA;
  display:flex; align-items:center; justify-content:center; opacity:1; transition:opacity .4s ease; }
#al-splash.al-splash-out{ opacity:0; pointer-events:none; }
#al-splash .al-splash-mark{ font-family:var(--font-display); 
  font-size:3.2rem; color:#7A4A0A; letter-spacing:.5px; }
#home-game-btn{
  position:absolute; left:58px; bottom:33px; z-index:60;
  font-family:var(--font-read); font-weight:700; font-size:20px; color:#0d3b46;
  padding:12px 20px; border:0; border-radius:18px; cursor:pointer;
  background:linear-gradient(#7fe3d8,#35b3a6);
  box-shadow:0 5px 0 #1d7f76, 0 8px 14px rgba(0,0,0,.25);
}
#home-game-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 #1d7f76, 0 3px 8px rgba(0,0,0,.25); }
body[data-home-game="1"] #home-game-btn{ background:linear-gradient(#ffd08a,#e2952f); box-shadow:0 5px 0 #a96a17, 0 8px 14px rgba(0,0,0,.25); }
body[data-home-game="1"] #home-game-btn:active{ box-shadow:0 1px 0 #a96a17, 0 3px 8px rgba(0,0,0,.25); }
#hgame{ position:absolute; inset:0; z-index:70; touch-action:none; pointer-events:none; }
#hgame[hidden]{ display:none; }
#hgame-fx{ position:absolute; inset:0; pointer-events:none; z-index:2; }
#hgame-tray{
  position:absolute; left:0; right:0; bottom:88px; z-index:1; pointer-events:none;
  display:flex; justify-content:center; align-items:center; gap:30px;
}
.hgame-slot{ display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  position:relative; pointer-events:auto; }
.hgame-slot::after{ content:''; position:absolute; top:0; bottom:0; left:-13px; right:-13px; }
.hgame-slot img{ max-width:100%; max-height:100%; width:auto; height:auto; display:block;
  touch-action:none; pointer-events:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,.32)); }
@keyframes hgame-pop{
  0%{   opacity:0; transform:translateY(22px) scale(.35); }
  60%{  opacity:1; transform:translateY(0)    scale(1.12); }
  100%{ opacity:1; transform:translateY(0)    scale(1); }
}
img.hgame-pop{ animation:hgame-pop 420ms cubic-bezier(.34,1.56,.64,1) backwards; }
img.hgame-drag{ position:absolute; left:0; top:0; z-index:3; pointer-events:auto;
  touch-action:none; object-fit:contain; will-change:transform;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.4)); }
img.hgame-x{
  position:absolute; width:300px; height:328px; pointer-events:none;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
img.hgame-check{
  position:absolute; width:300px; height:282px; pointer-events:none;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.hgame-points{
  position:absolute; font-family:var(--font-read); font-weight:800; font-size:192px;
  color:#ffe25c; -webkit-text-stroke:4px #7a4b00;
  text-shadow:0 0 26px rgba(255,214,70,.9), 0 8px 16px rgba(0,0,0,.5);
  transform:translate(-50%,-50%); white-space:nowrap;
}
.hgame-bonus{
  position:absolute; font-family:var(--font-read); font-weight:800; font-size:88px;
  color:#ffe25c; -webkit-text-stroke:4px #7a4b00;
  text-shadow:0 0 26px rgba(255,214,70,.9), 0 8px 16px rgba(0,0,0,.5);
  transform:translate(-50%,-50%); white-space:nowrap; pointer-events:none;
}
.hgame-done{
  position:absolute; left:50%; top:50%; padding:22px 38px; border-radius:26px;
  font-family:var(--font-read); font-weight:800; font-size:46px; color:#0d3b46;
  background:rgba(255,255,255,.94); box-shadow:0 10px 26px rgba(0,0,0,.3);
  transform:translate(-50%,-50%); white-space:nowrap;
}