:root {
    --font-read:    'Andika', 'Noto Sans Devanagari', 'Noto Sans Arabic', sans-serif;
    --font-display: 'Fredoka One', cursive;
    --font-map:     'Fredoka One', cursive;
    --font-map-serif: Georgia, serif;   
  }
  * { 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; left:50%;
    top:10px;
    top:calc(10px + max(0px, (834px - 100vh / var(--app-scale, 1)) / 2));
    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(38.9px * 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(58.3px * 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;
  }
  #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;
  }
  #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 var(--keys-bottom, 26px);
    z-index:90;
    display:flex; flex-direction:column; align-items:center; gap:var(--pill-keys-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; }
  body:not([data-mode="animals"]) #ctrl-panel { opacity:0; visibility:hidden; pointer-events:none; }
  #ctrl-panel.open .panel-top, #ctrl-panel.open #subtitle-box,
  #ctrl-panel.open .action-row, #ctrl-panel.open .lang-slider { pointer-events:auto; }
  #ctrl-panel.open .act-btn, #market-panel.open .act-btn, #home-panel.open .act-btn { animation:popIn .42s cubic-bezier(.34,1.7,.5,1) backwards; }
  #ctrl-panel.open .act-btn, #market-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), #market-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), #market-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), #market-panel.open .act-btn:nth-of-type(3), #home-panel.open .act-btn:nth-of-type(3) { --d-pop:.24s; --d-breathe:1.98s }
  #ctrl-panel.open .act-btn:nth-of-type(4), #market-panel.open .act-btn:nth-of-type(4), #home-panel.open .act-btn:nth-of-type(4) { --d-pop:.31s; --d-breathe:2.22s }
     ★ 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, #market-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, #market-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, #market-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, #market-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, #market-panel.open .act-btn.held.btn-name, #home-panel.open .act-btn.held.btn-name,
  #ctrl-panel.open .act-btn.held.btn-sound, #market-panel.open .act-btn.held.btn-sound, #home-panel.open .act-btn.held.btn-sound,
  #ctrl-panel.open .act-btn.held.btn-sentence, #market-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) }
  }
  @keyframes popIn { 0%{opacity:0;transform:scale(.3) translateY(14px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
  .panel-top { display:none; }
  #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:var(--pill-radius, 18px);
    padding:var(--pill-pad-y, 11px) var(--pill-pad-x, 18px);
    min-height:var(--pill-min-h, 54px); text-align:center;
    box-shadow:0 8px 22px rgba(0,0,0,.28);
    max-width:min(var(--pill-max-w, 560px),90vw);
    position:relative; z-index:1;
    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:calc(clamp(.95rem,2.4vw,1.2rem) * var(--pill-font, 1));
  }
  #subtitle-box[data-kind="sentence"] { max-width:min(calc(var(--pill-max-w, 560px) + 60px),92vw); }
  #subtitle-box[data-kind="sentence"] #subtitle-main,
  #home-title.sentence, #market-title.sentence {
    font-size:calc(clamp(.95rem,2.4vw,1.2rem) * var(--pill-font-sentence, var(--pill-font, 1)));
  }
  #subtitle-main {
    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;
    text-shadow:0 0 10px rgba(255,48,96,.4);
  }
  .kara-key {
    font-size:2.1em;
    font-weight:800;
    letter-spacing:.6px;
  }
  .ws { display:inline-block; width:.32em; }
  #subtitle-hint { font-size:.76rem; color:#B09877; margin-top:3px; }
  .action-row { display:flex; gap:var(--key-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, #market-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), top .2s ease, opacity .22s ease, transform .18s ease-out;
  }
  #an-roman-btn.show, #home-roman-btn.show, #market-roman-btn.show{ display:flex; }
  #an-roman-btn:active, #home-roman-btn:active, #market-roman-btn:active{ transform:scale(.92); }
  #an-roman-btn > #an-roman-globe, #home-roman-btn > .roman-globe, #market-roman-btn > .roman-globe{ display:none; width:87%; height:87%; }
  #an-roman-btn > #an-roman-abc, #home-roman-btn > .roman-abc, #market-roman-btn > .roman-abc{ position:relative; top:-0.08em; }   
  #an-roman-btn.globe > #an-roman-abc, #home-roman-btn.globe > .roman-abc, #market-roman-btn.globe > .roman-abc{ display:none; }
  #an-roman-btn.globe > #an-roman-globe, #home-roman-btn.globe > .roman-globe, #market-roman-btn.globe > .roman-globe{ display:block; }
  .act-btn {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    border:none; border-radius:var(--key-radius, 24px);
    padding:var(--key-pad-y, 12px) var(--key-pad-x, 16px); min-width:var(--key-min-w, 90px);
    font-family:var(--font-read);
    font-size:calc(.84rem * var(--key-font, 1)); 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:var(--key-icon, 32px); height:var(--key-icon, 32px); display:block; }   
  .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; }
  #ctrl-panel .lang-slider, #home-panel .lang-slider, #market-panel .lang-slider { height:var(--wheel-band, 148px); margin-top:var(--band-margin, 0px); }
  .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="market"]  #mode-market,
  body[data-mode="calendar"] #mode-calendar,
  body[data-mode="town"]    #mode-town,
  body[data-mode="passport"] #mode-passport {
    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="market"])  #mode-market *,
  body:not(.tab-switching):not([data-mode="calendar"]) #mode-calendar *,
  body:not(.tab-switching):not([data-mode="town"])    #mode-town *,
  body:not(.tab-switching):not([data-mode="passport"]) #mode-passport *,
  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; }   
  #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); }
  body.app-covered #menu-btn,
  body[data-mode="passport"] #menu-btn { opacity:0; pointer-events:none; }
  #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-btn { width:84px; height:84px; }
  #menu-btn .mb-cap {
    border-radius:24px; gap:7.7px; border-color:#F2B41C;
    background-image:linear-gradient(202deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,.20) 30%, rgba(255,255,255,0) 60%),
                     linear-gradient(202deg,#8CF0D2,#2FBF9F);
    box-shadow:-1.5px 3.5px 0 #127A64, -3px 8px 16px rgba(0,0,0,.34),
               inset 1px 2px 0 rgba(255,255,255,.55), inset -1px -2px 0 rgba(0,0,0,.12);
  }
  #menu-btn .mb-cap span {
    width:44px; height:7px;
    background:linear-gradient(180deg,#FFF1A8,#FFC53D 55%,#E09A12);
    box-shadow:0 1.5px 0 rgba(0,0,0,.35);
  }
  #menu-btn:active .mb-cap {
    box-shadow:-.5px 1px 0 #127A64, -1px 2px 5px rgba(0,0,0,.30), inset 1px 2px 0 rgba(255,255,255,.4);
  }
  #menu-btn::after {
    content:''; position:absolute; inset:-24%; z-index:-1; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle,#FFF27A 0 45%,rgba(255,226,61,.75) 60%,rgba(255,226,61,0) 72%);
    animation:mbDisc 5.2s ease-in-out infinite; will-change:transform,opacity;
  }
  @keyframes mbDisc { 0%,100%{ transform:scale(.9); opacity:.75 } 50%{ transform:scale(1.08); opacity:1 } }
  body.menu-open #menu-btn::after { animation:none; }
  #menu-scrim {
    position:fixed; inset:0; z-index:2147483600; 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:2147483601;
    width:min(46vw, 560px);
    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,#CDF3E1,#A6E5C8);   
    border-right:3px solid #2F8F6A; box-shadow:4px 0 18px rgba(0,0,0,.35);
    transform:translateX(-105%); transition:transform .3s ease;
    padding:calc(max(env(safe-area-inset-top, 0px), 20px) + 10px) 14px calc(env(safe-area-inset-bottom, 0px) + 14px);
    display:flex; flex-direction:column;
    --tile-h:clamp(54px, 8.9vh, 100px);   
    overflow-y:auto; overscroll-behavior:contain;
  }
  body.menu-open #menu-drawer { transform:translateX(0); }
  body.al-ceremony #app-canvas { z-index:500000; }
  body.al-ceremony #menu-scrim  { z-index:499000; pointer-events:none; }
  body.al-ceremony #menu-drawer { z-index:499001; pointer-events:none; }
  html body[data-mode="passport"] #menu-btn,
  html body.al-ceremony #menu-btn { opacity:0; visibility:hidden; pointer-events:none; }
  body.al-ceremony #passport-stage::after { content:''; position:absolute; inset:0; z-index:95; pointer-events:auto; }
  #menu-drawer > * { flex:0 0 auto; }
  .menu-sec { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:10px; row-gap:8px; }
  .menu-bottom { margin-top:auto; }
  .mi-slot{
    position:relative;
    display:block; border-radius:24px;
    padding:0 0 10px;
  }
  .mi-slot::before{
    content:''; position:absolute; left:0; right:0; top:8px; bottom:0;
    border-radius:inherit;
    background:var(--edge,#C69218);
    box-shadow:-4px 11px 15px rgba(0,0,0,.26);
  }
  .menu-item {
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; width:100%;
    font-family:var(--font-read); font-weight:800; color:#4A2E06;
    border:none; cursor:pointer; text-align:center;
    padding:calc(var(--tile-h) * .08) 6px; border-radius:24px;
    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;
    height:var(--tile-h);
  }
  .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:calc(var(--tile-h) * .52); height:calc(var(--tile-h) * .52); flex:0 0 auto; 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);
  }
  .menu-item .mi-label {
    display:block; max-width:100%; overflow:hidden; white-space:nowrap;
    font-size:clamp(12px, calc(var(--tile-h) * .195), 16px); line-height:1.1;
  }
  .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-calendar  { --face:linear-gradient(202deg,#F0A9E6,#D96FD0); --edge:#A544A0 }
  .mi-market    { --face:linear-gradient(202deg,#FFB3A0,#E9573F); --edge:#B23A26 }
  .mi-colors    { --face:linear-gradient(202deg,#DDF29A,#A8D84A); --edge:#6E9A1F }
  .mi-numbers   { --face:linear-gradient(202deg,#D9B08C,#A9743F); --edge:#6F4A24 }
  .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,#FFEFC9,#FFDD97); --edge:#CE9A2E }
  .mi-about     { --face:linear-gradient(202deg,#FFE7C0,#FFD08C); --edge:#C98B2C }
  .mi-parents   { --face:linear-gradient(202deg,#FFDDB4,#F7BE7C); --edge:#C07C34 }
  .menu-item .mi-emoji { font-size:calc(var(--tile-h) * .33); line-height:1; display:inline-flex; align-items:center; justify-content:center; }
  .menu-item .mi-emoji svg,
  .menu-item .mi-emoji img { width:calc(var(--tile-h) * .33); height:calc(var(--tile-h) * .33); display:block; }
  .mi-passport .menu-item .mi-emoji img {
    width:auto; height:calc(var(--tile-h) * .34); max-width:calc(var(--tile-h) * .40);
  }
  .menu-item.active {
    transform:translateY(8px);
    box-shadow:none;
  }
  .menu-divider { height:2px; background:rgba(184,148,30,.35); margin:10px 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;
  }
  #svg-explore:not(.has-sel) .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-shade{ fill:#0A1428; opacity:0; pointer-events:none; transition:opacity .35s ease; }
  #svg-explore.has-sel .ctry-shade{ opacity:.28; }
  .country{ transition:filter .15s, opacity .35s ease; }
  #svg-explore.has-sel .country:not(.sel){ opacity:.45; }   
  #svg-explore.has-sel .country.sel{
    opacity:1; fill:#FFD84A; stroke:#FF9F1C; stroke-width:1.6;
    animation:ctryGlowSel 2.4s ease-in-out infinite;
  }
  @keyframes ctryGlowSel{
    0%,100%{ filter:drop-shadow(0 0 4px #FFD24D) drop-shadow(0 0 2px #fff); }
    50%{ filter:drop-shadow(0 0 12px #FFC21A) drop-shadow(0 0 4px #fff); }
  }
  #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); }
  .panel-close, .gu-close, .pg-close { display:inline-flex; align-items:center; justify-content:center; }
  .panel-close svg, .gu-close svg, .pg-close svg { display:block; }
  .panel-close::before, .gu-close::before, .pg-close::before {
    content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:44px; height:44px; border-radius:inherit;
  }
  .gu-close, .pg-close { position:relative; }
  .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, #market-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); }
  }
  body[data-mode="passport"] { background:#1f3f73; }
  #mode-passport { position:fixed; inset:0; z-index:22; background:radial-gradient(ellipse at 50% 30%,#3d6fb5 0%,#1f3f73 60%,#14294d 100%); }
  #passport-stage { position:absolute; inset:0; overflow:hidden; }
  #passport-book { position:absolute; left:50%; top:50%; width:1000px; height:640px; transform:translate(-50%,-50%); }
  .pp-heart { position:absolute; top:50%; width:260px; height:260px; transform:translate(-50%,-50%); pointer-events:none; z-index:0;
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
  .pp-heart-l { left:25%; }
  .pp-heart-r { left:75%; }
  #passport-book { z-index:1; }
  #passport-book.pp-flat { display:flex; flex-wrap:wrap; }
  #passport-book.pp-flat .pp-page { width:500px; height:640px; }
  #passport-book.pp-flat .pp-page:nth-child(n+3) { display:none; }   
  .pp-page { background:#f4ecd8; overflow:hidden; position:relative;
    background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.03) 0 1px,transparent 1px 28px); }
  .pp-page.--left  { box-shadow:inset -14px 0 24px -14px rgba(0,0,0,.45); }
  .pp-page.--right { box-shadow:inset  14px 0 24px -14px rgba(0,0,0,.45); }
  .pp-page.pp-cover { background:#1d3b7a; background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.12),transparent 60%);
    border:14px solid #163061; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
  .pp-page.pp-front { border:0; padding:0; background:#1d3b7a; }
  .pp-page.pp-back  { border:0; background:#f4af7d; background-image:none; }   
  .pp-cover-art { width:100%; height:100%; display:block; object-fit:fill; }
  #passport-book, #passport-book * { touch-action:none; }   
  .pp-grid { display:grid; grid-template-columns:repeat(2,200px); gap:40px 42px; padding:50px 0 0; justify-content:center; }
  .pp-slot { width:200px; height:200px; display:flex; align-items:center; justify-content:center; position:relative; }
  .pp-slot.empty::before { content:""; position:absolute; inset:14px; border:4px dashed #c9bd9f; border-radius:10px; }
  .pp-slot.empty img { display:none; }
  .pp-q { display:none; font-family:var(--font-read); font-weight:700; font-size:92px; line-height:1; color:#c9bd9f;
    user-select:none; -webkit-user-select:none; transition:transform .12s ease-out, color .12s ease-out; }
  .pp-slot.empty .pp-q { display:block; }
  .pp-slot.empty:active .pp-q, .pp-slot.empty.asked .pp-q { transform:scale(.88); color:#b3a684; }
  .pp-slot.empty.asked::before { border-color:#b3a684; }
  .pp-how { position:absolute; z-index:6; max-width:360px; padding:14px 22px; border-radius:999px; box-sizing:border-box;
    background:#fff; color:#3b3428; font-family:var(--font-read); font-weight:700; font-size:22px; line-height:1.25;
    text-align:center; box-shadow:0 6px 18px rgba(0,0,0,.28); pointer-events:none; }
  .pp-ico { width:34px; height:34px; object-fit:contain; flex:none; }
  .pp-num { font-family:var(--font-read); font-style:normal; font-weight:700; font-size:24px; color:#5a4f3a; flex:none; }
  .pp-date { letter-spacing:1px; }
  .pp-slot.got img { width:100%; height:100%; object-fit:contain; transform:rotate(var(--tilt,0deg));
    filter:drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
  .pp-fly { position:absolute; z-index:5; pointer-events:none; object-fit:contain; transform-origin:50% 50%;
    filter:drop-shadow(0 18px 22px rgba(0,0,0,.35)); will-change:transform,opacity; }
  .pp-fly-shadow { position:absolute; z-index:4; pointer-events:none; border-radius:14px; background:rgba(0,0,0,1);
    filter:blur(14px); transform-origin:50% 50%; opacity:0; }
  .pp-id { padding:44px 46px 0; box-sizing:border-box; }
  .pp-photo { width:220px; height:270px; margin:0 auto; background:#e9f2fb; border:6px solid #fff; border-radius:8px;
    box-shadow:0 3px 8px rgba(0,0,0,.22); overflow:hidden; position:relative;
    background-image:radial-gradient(ellipse at 50% 40%,#f6fbff 0%,#d6e6f5 100%); }
  .pp-photo-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
  .pp-lines { margin-top:26px; display:flex; flex-direction:column; gap:18px; }
  .pp-line { display:flex; align-items:center; gap:12px; position:relative; }
  .pp-line .pp-chip { position:absolute; left:0; top:50%; transform:translateY(-50%); }
  .pp-val { display:flex; align-items:center; gap:10px; flex:none; padding:0 4px; }
  .pp-chip { width:38px; height:22px; border-radius:6px; flex:none; }
  .pp-chip.c1 { background:#f4b183; } .pp-chip.c2 { background:#8fc9a5; } .pp-chip.c3 { background:#9ec5ef; } .pp-chip.c4 { background:#e8c66b; }
  .pp-line b { flex:1; height:0; border-bottom:3px dotted #b9ad93; }
  .pp-mrz { position:absolute; left:46px; right:46px; bottom:34px; display:flex; flex-direction:column; gap:10px; }
  .pp-mrz span { height:12px; border-radius:6px;
    background:repeating-linear-gradient(90deg,#c9bd9f 0 10px,transparent 10px 16px,#c9bd9f 16px 22px,transparent 22px 30px); }
  button, input, select, textarea, optgroup { font-family: inherit; }
  .pin, .act-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 { 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)); }      
  #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); } }
  :root {
    --cream-0: #FAF1DC;    
    --cream-1: #F3E6C9;    
    --cream-2: #EBDAB3;    
    --cream-3: #E1CC9E;    
    --cream-line: #DDCBA3; 
    --honey: #E0A32E;      
    --honey-wash: #F6E2B4; 
    --honey-line: #E4C588; 
  }
  .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; }
  .pg-overlay.pg-in-host { position:absolute; z-index:6; background:var(--cream-0);
    -webkit-backdrop-filter:none; backdrop-filter:none; }
  @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: var(--cream-1); color: #3E3320;
    border-radius: 22px; 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: #A3906A; font-size: 18px; line-height: 1; cursor: pointer; border-radius: 8px; }
  .pg-close:active { background: var(--cream-2); }
  .pg-title { font-size: 17px; font-weight: 700; letter-spacing: .2px; }
  .pg-sub { font-size: 12px; color: #6E6146; 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: #B9821C; letter-spacing: 2px; }
  .pg-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .pg-key { height: 52px; border: none; border-radius: 14px; background: var(--cream-2); color: #3E3320; 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: var(--cream-3); transform: scale(.96); }
  .pg-key-action { background: var(--cream-3); color: #6E6146; }   
  .gu-panel {
    position:absolute; inset:0; z-index:5; display:flex;   
    background:var(--cream-0);
    opacity:0; pointer-events:none; transition:opacity .22s ease;
  }
  .gu-panel.open { opacity:1; pointer-events:auto; }
  .gu-sheet {
    width:100%; height:100%; display:flex; flex-direction:column;
    background:var(--cream-0); color:#3E3320; overflow:hidden;
    transform:translateX(14px); 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:calc(max(env(safe-area-inset-top, 0px), 20px) + 10px) 14px 12px 18px;
    border-bottom:1px solid var(--cream-line); background:var(--cream-1); 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:11px;
    background:var(--cream-2); color:#6E6146; font-size:16px; cursor:pointer;
  }
  .gu-close:active { background:var(--cream-3); transform:scale(.95); }
  .gu-scroll {
    padding:16px 18px calc(env(safe-area-inset-bottom, 0px) + 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:#6E6146; }
  .gu-foot { color:#7A6636; font-size:.85rem; margin-top:12px; }
  .gu-dim  { color:#A3906A; }
  .gu-hr { border:none; border-top:1px solid var(--cream-line); 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:#A3906A; margin:0 0 7px;
  }
  .gu-sec-body { }
  .gu-badges { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px; }
  .gu-badge {
    background:var(--honey-wash); color:#8A6520; border:1px solid var(--honey-line); 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:var(--cream-1); border:1px solid var(--cream-line); border-radius:14px;
    padding:12px 14px; margin:0 0 8px; cursor:pointer; font-family:var(--font-read); color:inherit;
  }
  .gu-row:active { background:var(--cream-2); 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:#6E6146; }
  .gu-row-chev { color:#A3906A; 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:#9A7326; 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:var(--cream-1); border:1px dashed var(--cream-line); border-radius:12px; padding:11px 12px;
  }
  .gu-todo-tag {
    flex:0 0 auto; background:var(--cream-2); color:#7A6636; border-radius:6px;
    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:#6E6146; font-size:.85rem; line-height:1.45; }
  .gu-danger {
    display:block; width:100%; box-sizing:border-box;
    background:#c2413a; color:#fff; border:none; border-radius:12px;
    padding:13px 14px; font-family:var(--font-read); font-weight:800; font-size:.95rem;
    cursor:pointer;
  }
  .gu-danger:active { background:#a93630; transform:scale(.99); }
  .gu-safe {
    display:block; width:100%; box-sizing:border-box; margin-top:8px;
    background:var(--cream-2); color:#6E6146; border:1px solid var(--cream-line); border-radius:12px;
    padding:13px 14px; font-family:var(--font-read); font-weight:800; font-size:.95rem;
    cursor:pointer;
  }
  .gu-safe:active { background:var(--cream-3); transform:scale(.99); }
  .gu-danger-ask {
    background:#F5DFD7; border:1px solid #E5B9B2; border-radius:12px; padding:12px;
  }
  .gu-danger-word { color:#8e2f2a; font-weight:800; margin:0 0 10px; font-size:.9rem; }
  .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:16px; background:var(--cream-1);
    border:1px solid var(--cream-line); 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:var(--cream-1); border:1px solid var(--cream-line); border-radius:16px; 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:#DCD1B8;
    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:var(--cream-0); 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:var(--honey); }
  .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:#3E3320; font-size:.9rem; font-weight:800; }
  .set-toggle-sub { color:#6E6146; font-size:.82rem; line-height:1.45; }
  .set-lang-sub { display:block; margin:3px 0 10px; }
  .set-lang-grid { display:flex; flex-wrap:wrap; gap:8px; }
  .set-lang { display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 1 auto;
              min-width:0; padding:7px 8px; border:3px solid transparent; border-radius:12px;
              background:var(--cream-1); font:inherit; font-family:var(--font-read); cursor:pointer; }
  .set-lang.on { border-color:var(--honey); background:var(--honey-wash); }
  .set-lang-flag .flag-img { display:block; width:44px; height:auto; border-radius:4px; }
  .set-lang-name { color:#3E3320; font-size:.72rem; font-weight:700; white-space:nowrap; }
  .gu-prose { color:#4A3D26; }
  .gu-prose .gu-h { font-family:var(--font-read); font-weight:800; font-size:.9rem; margin:14px 0 5px; }
  .gu-prose code { background:var(--cream-2); 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:var(--honey-wash); border:1px solid var(--honey-line); 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:#A3906A; 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-k10.webp") 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); }
  body[data-mode="market"] { background:#EAD7B6; }
  #mode-market { position:fixed; inset:0; z-index:22; background:#E8DCC6; }
  #mode-market { --market-soften:7px; --market-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.market-card-open #mode-market {
    filter:blur(var(--market-soften)) brightness(var(--market-dim));
    transform:scale(1.03); }
  #market-stage { position:absolute; inset:0; z-index:2; overflow:hidden;
    background-image:url("../assets/images/market/market-base.webp");
    background-repeat:no-repeat; }
  #market-stage:not(.framed) { background-image:none; }   
  .market-layer { position:absolute; pointer-events:none; transform-origin:center center; }
  .market-layer img { width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none; }
  #market-panel {
    position:fixed; left:0; right:0; bottom:0; z-index:84;
    padding:6px 18px var(--keys-bottom, 22px);
    display:flex; flex-direction:column; align-items:center; gap:var(--pill-keys-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;
  }
  #market-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; }
  #market-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;
  }
  #market-hero-img { max-width:78%; max-height:78%; object-fit:contain; display:block; }
  #market-panel.flying { transform:none; transition:opacity .28s ease; }
  #market-panel.flying #market-hero { position:relative; z-index:3; will-change:transform, opacity; }
  #market-hero.pop { animation:homeHeroPop .42s cubic-bezier(.34,1.5,.5,1); }
  #market-title {
    font-family:var(--font-read); font-weight:800;
    font-size:calc(clamp(.95rem,2.4vw,1.2rem) * var(--pill-font, 1)); color:#4A4036;
    letter-spacing:.3px; line-height:1.45;
    background:#FFFFFF; border-radius:var(--pill-radius, 18px); padding:var(--pill-pad-y, 11px) var(--pill-pad-x, 18px);
    min-height:var(--pill-min-h, 0px); box-sizing:border-box;
    text-align:center; box-shadow:0 8px 22px rgba(0,0,0,.28);
    max-width:min(var(--pill-max-w, 560px),90vw); white-space:nowrap;
  }
  #market-title, #home-title { position:relative; z-index:1; }   
  #market-title.sentence { white-space:normal; max-width:min(calc(var(--pill-max-w, 560px) + 60px),92vw); }
  #market-actions { margin-top:2px; }
  #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;
  }
  #home-panel {
    position:fixed; left:0; right:0; bottom:0; z-index:84;
    padding:6px 18px var(--keys-bottom, 22px);
    display:flex; flex-direction:column; align-items:center; gap:var(--pill-keys-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:calc(clamp(.95rem,2.4vw,1.2rem) * var(--pill-font, 1)); color:#4A4036;
    letter-spacing:.3px; line-height:1.45;
    background:#FFFFFF; border-radius:var(--pill-radius, 18px); padding:var(--pill-pad-y, 11px) var(--pill-pad-x, 18px);
    min-height:var(--pill-min-h, 0px); box-sizing:border-box;
    text-align:center; box-shadow:0 8px 22px rgba(0,0,0,.28);
    max-width:min(var(--pill-max-w, 560px),90vw); white-space:nowrap;
  }
  #home-title.sentence { white-space:normal; max-width:min(calc(var(--pill-max-w, 560px) + 60px),92vw); }
  #home-actions { margin-top: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; }
  }
  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:100000; background:linear-gradient(180deg,#E9FBF3,#B9EFD6); opacity:1;
  transition:opacity var(--spl-fade,400ms) ease; }
#al-splash.al-splash-out{ opacity:0; pointer-events:none; }
#al-splash .al-splash-stage{ opacity:0; transition:opacity var(--spl-in,400ms) cubic-bezier(0.65,0,0.35,1); }
#al-splash.al-splash-fonts .al-splash-stage{ opacity:1; }
#al-splash .al-splash-stage{ position:absolute; 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; }
#al-splash .al-splash-mark{ position:absolute; left:0; right:0; text-align:center;
  top:calc(50% + var(--spl-name-y,0px)); transform:translateY(-50%);
  font-family:var(--font-display); 
  font-size:var(--spl-name-size,52px); color:#1E5F47; letter-spacing:.5px; white-space:nowrap; }
#al-splash .al-splash-tag{ position:absolute; left:50%; width:var(--spl-tag-w,955px);
  top:calc(50% + var(--spl-tag-y,0px)); transform:translateX(-50%);
  font-family:var(--font-read); font-size:var(--spl-tag-size,22px); color:#1E5F47; text-align:center; }
.al-splash-time{ position:fixed; left:10px; bottom:10px; z-index:10000; pointer-events:none;
  font-family:var(--font-read); font-size:14px; color:#fff; background:rgba(0,0,0,.6);
  padding:4px 8px; border-radius:6px; }
#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; }
#home-stage{ transition:top .5s cubic-bezier(0.65,0,0.35,1), bottom .5s cubic-bezier(0.65,0,0.35,1); }
body.hgame-lift #home-stage{ top:-54px; bottom:54px; }
#hgame-lawn{ position:absolute; z-index:0; display:block; pointer-events:none; user-select:none; -webkit-user-drag:none; }
#hgame .hgame-prog{ z-index:4; }
body.hgame-lift #title-banner{ opacity:0 !important; pointer-events:none !important; transition:opacity .4s; }
#hgame-line{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:38px; z-index:1; pointer-events:none;
  display:flex; justify-content:center; align-items:baseline; gap:.34em;
  flex-wrap:nowrap; white-space:nowrap;
  font-family:var(--font-read); font-size:23.5px; font-weight:700;
  color:#4A4036; text-align:center;
  background:rgba(255,252,244,.92);
  border-radius:999px;
  padding:.14em .70em;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  text-shadow:0 0 6px #FFFCF4, 0 0 6px #FFFCF4, 0 0 12px #FFFCF4, 0 2px 3px rgba(255,252,244,.9);
}
#hgame-line:empty{ display:none; }
#hgame-line .kara-key{ font-size:2em; }   
#hgame .al-roman-btn{ pointer-events:auto; }   
#hgame-line .syl-plain{ transition:color .1s ease; }
#hgame-line .syl-plain.lit{ color:#FF3060; }
#hgame-tray{
  position:absolute; left:0; right:0; bottom:153px; 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)); }
#hgame-top{ position:fixed; inset:0; z-index:62; pointer-events:none; }
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;
}
#cmem{ position:absolute; inset:0; z-index:95; touch-action:none;
  background:#fbfcf7 url(../assets/images/games/cardmemory/leaves.webp) repeat; background-size:800px 800px; }   
#cmem[hidden]{ display:none; }
#cmem-fx{ position:absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; }   
#cmem-line{
  position:absolute; left:50%; transform:translateX(-50%); top:118px; z-index:2; pointer-events:none;
  max-width:92%; display:flex; justify-content:center; align-items:baseline; gap:.34em;
  font-family:var(--font-read); font-size:clamp(1rem,2.6vw,1.5rem); font-weight:700;
  color:#4A4036; text-align:center; background:rgba(255,252,244,.92); border-radius:999px;
  padding:.14em .70em; box-shadow:0 4px 12px rgba(0,0,0,.18);
}
#cmem-line:has(#cmem-line-a:empty){ display:none; }
#cmem-line .syl-plain{ transition:color .1s ease; }
#cmem-line .syl-plain.lit{ color:#FF3060; }
#cmem-board{ position:absolute; left:50%; margin-left:-305px; z-index:1; perspective:1400px; }
.cmem-card{ position:absolute; left:0; top:0; width:136px; height:185px; will-change:transform;
  -webkit-tap-highlight-color:transparent; }
.cmem-inner{ position:absolute; inset:0; transform-style:preserve-3d;
  transition:transform 520ms cubic-bezier(0.65,0,0.35,1); }
.cmem-face{ position:absolute; inset:0; border-radius:14px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 8px 16px rgba(0,0,0,.35); }
.cmem-front{ background:#fffdf5; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 16px rgba(0,0,0,.28), 0 0 0 1.5px rgba(120,120,100,.25); }
.cmem-front img{ width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; transform-origin:50% 50%; }
.cmem-back{ transform:rotateY(180deg); background:#fff; }
.cmem-back img{ width:100%; height:100%; display:block; pointer-events:none; }
.cmem-card.cmem-won .cmem-front{ box-shadow:0 0 0 5px #ffd35a, 0 8px 16px rgba(0,0,0,.35); }
.cmem-card.cmem-won{ opacity:.92; }
body.app-game #app-canvas > :not(#feedg):not(#cmem):not(#dstudio):not(.al-stamps){ visibility:hidden !important; }
body.app-game #ctrl-panel, body.app-game #ctrl-panel *,
body.app-game #country-panel, body.app-game #country-panel *,
body.app-game #postcard-overlay, body.app-game #postcard-overlay *,
body.app-game #lm-say, body.app-game #lm-say *,
body.app-game #home-panel, body.app-game #home-panel *,
body.app-game #market-panel, body.app-game #market-panel *{ visibility:hidden !important; }
body.app-game #mode-numbers, body.app-game #mode-numbers *,
body.app-game #mode-colors, body.app-game #mode-colors *{ visibility:hidden !important; }
body.app-game:not(.tab-switching) #mode-animals *,
body.app-game:not(.tab-switching) #mode-people *,
body.app-game:not(.tab-switching) #mode-home *,
body.app-game:not(.tab-switching) #mode-market *,
body.app-game:not(.tab-switching) #mode-calendar *,
body.app-game:not(.tab-switching) #mode-town *,
body.app-game:not(.tab-switching) #mode-passport *,
body.app-game:not(.tab-switching) #explore-stage *,
body.app-game:not(.tab-switching) #ctrl-panel *,
body.app-game:not(.tab-switching) #country-panel *,
body.app-game:not(.tab-switching) #postcard-overlay *,
body.app-game:not(.tab-switching) #lm-say *,
body.app-game:not(.tab-switching) #home-panel *,
body.app-game:not(.tab-switching) #market-panel * {
  animation-play-state:paused !important;
}
#feedg{ position:absolute; inset:0; z-index:95; overflow:hidden; touch-action:none; background:#cfe0ee; }
#feedg[hidden]{ display:none; }
#feedg-back{ position:absolute; inset:-12px; background:url(../assets/images/market/market-filled-soft.webp) center top/cover no-repeat; }
#feedg-stage{ position:absolute; left:0; top:0; width:1194px; height:834px; border:0; background:transparent; pointer-events:none; }
#feedg-cover{ position:absolute; inset:0; z-index:8; pointer-events:none; overflow:hidden;
  transition:opacity .45s cubic-bezier(0.65,0,0.35,1); }
#feedg-cover.away{ opacity:0; }
#feedg-cover.gone{ visibility:hidden; }   
#feedg-cover .back{ position:absolute; inset:-12px; background:url(../assets/images/market/market-filled-soft.webp) center top/cover no-repeat; }
#feedg-counter{ position:absolute; left:-200px; top:470px; width:1594px; height:364px; }
.feedg-food{ position:absolute; left:0; top:0; object-fit:contain; transform:translate(-50%,-50%); touch-action:none;
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none; filter:drop-shadow(0 6px 6px rgba(0,0,0,.25));
  transition:scale .3s, opacity .3s; z-index:3; will-change:transform; }
.feedg-food.held{ filter:drop-shadow(0 12px 10px rgba(0,0,0,.35)); z-index:5; }
.feedg-food.flying{ transition:transform .45s cubic-bezier(.65,0,.35,1); }
.feedg-food.eaten{ scale:0; opacity:0; }
body.fg-counter-set .al-stamps{ left:var(--fg-co-x) !important; top:var(--fg-co-y) !important; right:auto !important; bottom:auto !important;
  scale:var(--fg-co-k,1); transform-origin:50% 50%; }
#feedg .feedg-prog{ left:50%; top:50%; z-index:4; }
#feedg-pill{ position:absolute; right:44px; top:250px; z-index:4; max-width:40%;
  font-family:var(--font-read); font-weight:700; color:#4A4036; text-align:center; line-height:1.15;
  background:rgba(255,252,244,.95); border-radius:34px; padding:14px 30px; box-shadow:0 6px 16px rgba(0,0,0,.2); }
#feedg-pill[hidden]{ display:none; }
#feedg .al-roman-btn{ z-index:3; }   
#feedg-numbers{ position:absolute; left:50%; top:8px; transform:translateX(-50%); z-index:9; font:12px/1.2 monospace; color:#fff; background:rgba(0,0,0,.55); padding:2px 8px; border-radius:6px; pointer-events:none; white-space:nowrap; }
#feedg-a{ font-size:32px; }
#feedg-b{ font-size:44px; }
#feedg-pill b{ color:#c1272d; }
.feedg-points{ position:absolute; z-index:6; pointer-events:none; font-family:var(--font-read); font-weight:800;
  font-size:48px; color:#ffcf3a; -webkit-text-stroke:2px #7a4b00; text-shadow:0 4px 10px rgba(0,0,0,.35); }
.feedg-finger, .feedg-tip, .feedg-foodghost{ position:absolute; left:0; top:0; opacity:0; pointer-events:none; z-index:7;
  transform-origin:45% 3%; will-change:transform, opacity; }
.feedg-finger{ filter:drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.feedg-foodghost{ z-index:6; filter:brightness(1.2); object-fit:contain; }
.mi-language { --face:linear-gradient(202deg,#9BE3F2,#39B9D6); --edge:#1F87A1 }
.menu-lang-row { margin-bottom:8px; }
.menu-lang-row .mi-language { grid-column:3; }
.lk-panel, .lk-panel .gu-sheet { background:linear-gradient(180deg,#DFF6FB,#FFF3D6); }
.lk-panel .gu-head { background:transparent; border-bottom:none; }
.lk-panel .gu-title { font-size:1.35rem; color:#2B5E6B; text-align:center; padding-left:34px; }
.lk-panel .gu-close { background:#fff; box-shadow:0 2px 0 rgba(0,0,0,.14); }
.lk-panel .gu-scroll { padding-top:4px; }
.lk-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:calc(var(--tile-h,78px) * .16); }
.lk-tile {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(var(--tile-h,78px) * .07);
  padding:calc(var(--tile-h,78px) * .13) 4px calc(var(--tile-h,78px) * .11);
  border:none; border-radius:22px; background:#fff; cursor:pointer;
  box-shadow:-2px 5px 0 #C9D9DE, -3px 8px 14px rgba(0,0,0,.14);
  font-family:var(--font-read); -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform .16s cubic-bezier(.34,1.8,.5,1), box-shadow .16s ease, background .2s ease;
}
.lk-tile:active { transform:translate(-1px,4px); box-shadow:-.5px 1px 0 #C9D9DE; }
.lk-flag { display:block; width:64%; }
.lk-flag .flag-img { display:block; width:100%; height:auto; border-radius:9px; box-shadow:0 3px 5px rgba(0,0,0,.24); }
.lk-name { color:#3E3320; font-weight:800; font-size:clamp(13px, calc(var(--tile-h,78px) * .24), 20px); line-height:1.1; white-space:nowrap; }
.lk-tile.on { background:#FFF1BF; box-shadow:0 0 0 4px #F2B632, -2px 5px 0 #D69A1C, -3px 8px 14px rgba(0,0,0,.16); }
.lk-tile.pop { animation:lkPop .46s cubic-bezier(.34,1.7,.5,1); }
@keyframes lkPop { 0%{ transform:scale(1); } 35%{ transform:scale(1.13) rotate(-3deg); } 70%{ transform:scale(.97) rotate(1.5deg); } 100%{ transform:scale(1); } }
.menu-lang-row .menu-roman-row { grid-column:2; grid-row:1; padding:0; align-items:center; }
.menu-lang-row .mi-language { grid-row:1; }
.menu-roman-row{ display:none; justify-content:center; padding:2px 0 10px; }
.menu-roman-row.show{ display:flex; }
#menu-roman-btn{
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:64px; height:64px; padding:0;
  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:transform .18s ease-out;
}
#menu-roman-btn:active, #menu-roman-btn.mi-held{ transform:scale(.92); }
#menu-roman-btn > .roman-globe{ display:none; width:87%; height:87%; pointer-events:none; }
#menu-roman-btn > .roman-abc{ position:relative; top:-0.08em; pointer-events:none; }
#menu-roman-btn.globe > .roman-abc{ display:none; }
#menu-roman-btn.globe > .roman-globe{ display:block; }
.menu-english-row{ display:none; justify-content:center; align-items:center; }
.menu-english-row.show{ display:flex; }
.menu-lang-row .menu-english-row{ grid-column:1; grid-row:1; }
#menu-english-btn{
  box-sizing:border-box; width:64px; height:64px; border:4px solid #fff; border-radius:50%;
  background:#fff center/cover no-repeat;
  box-shadow:0 5px 0 rgba(60,40,10,.45), 0 8px 16px rgba(0,0,0,.25);
  cursor:pointer; touch-action:none;
  -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none;
  transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
#menu-english-btn.down{
  transform:translateY(4px) scale(.96);
  box-shadow:0 1px 0 rgba(60,40,10,.45), 0 2px 6px rgba(0,0,0,.25); border-color:#FFD76A;
}
.al-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;
  color:#4A3B2A; letter-spacing:.5px;
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  user-select:none; -webkit-user-select:none;
  transition:left .38s cubic-bezier(0.16,1,0.3,1), top .38s cubic-bezier(0.16,1,0.3,1),
             transform .18s ease-out;
}
.al-roman-btn.show{ display:flex; }
.al-roman-btn:active{ transform:scale(.92); }
.al-roman-btn > .roman-globe{ display:none; width:87%; height:87%; pointer-events:none; }
.al-roman-btn > .roman-abc{ position:relative; top:-0.08em; pointer-events:none; }
.al-roman-btn.globe > .roman-abc{ display:none; }
.al-roman-btn.globe > .roman-globe{ display:block; }
body.profile-chromebook {
  background: #EAD7B6 url("../assets/linen-mat.webp") center / cover no-repeat;
  background-attachment: fixed;
}
body.profile-chromebook .al-canvas-fit {
  position: fixed !important;
  inset: auto !important;
  left: 50% !important; top: 50% !important;
  width: calc(var(--canvas-w) * 1px) !important;
  height: calc(var(--canvas-h) * 1px) !important;
  transform: translate(-50%, -50%) scale(var(--app-scale, 1)) !important;
  transform-origin: center center !important;
}
body.profile-chromebook.fit-whole #app-canvas,
body.profile-chromebook.fit-whole .al-canvas-fit {
  left: 0 !important; top: 0 !important; transform-origin: 0 0 !important;
  transform: translate(var(--app-left), var(--app-top)) scale(var(--app-scale, 1)) !important;
}
body.profile-chromebook.fit-zoom #app-canvas,
body.profile-chromebook.fit-zoom .al-canvas-fit {
  transform: none !important; transform-origin: 0 0 !important; zoom: var(--app-scale, 1);
  contain: layout;
  left: calc(var(--app-left) / var(--app-scale, 1)) !important; top: calc(var(--app-top) / var(--app-scale, 1)) !important;
}
#pc-back-real{
  position:absolute; inset:0;
  display:none;                
  overflow:hidden;
  background:#fbf3e2;          
}
#pc-back-real .pcb-plate{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  object-fit:fill;             
}
#pc-back-real .pcb-f, .pcb-room .pcb-f{
  position:absolute;
  font-family:var(--font-read);   
  font-weight:400;
  color:#4A3B2A;
  white-space:normal;
  -webkit-font-smoothing:antialiased;
}
#pc-back-real .pcb-f b, .pcb-room .pcb-f b{ font-weight:700; }   
#pc-back-real .pcb-pic, .pcb-room .pcb-pic{
  display:inline-block;
  height:1em; width:1em;
  vertical-align:-0.14em;
  margin-left:0.15em;
}
#flip-snap{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0;
  z-index:3;
}
#pc-tap{
  position:absolute; inset:0;
  z-index:3;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#pc-back-real .pcb-tap{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
#pc-back-real .pcb-said{ animation:pcbSaid 0.9s ease-out; }
@keyframes pcbSaid{
  0%{ text-shadow:0 0 0 rgba(217,136,74,0); }
  25%{ text-shadow:0 0 10px rgba(217,136,74,.85); }
  100%{ text-shadow:0 0 0 rgba(217,136,74,0); }
}
#pc-name-btn{
  position:absolute; left:50%;
  transform:translateX(-50%);
  display:none;
  font-family:var(--font-read);
  font-size:33px; font-weight:700; color:#4A3B2A;
  background:#fff7e8;
  border:3px solid #e8b04a; border-radius:999px;
  padding:8px 26px;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  cursor:pointer; white-space:nowrap;
  box-sizing:border-box; text-align:center;
  -webkit-tap-highlight-color:transparent;
  transition:top .55s cubic-bezier(0.16,1,0.3,1);
}
#pc-name-btn.show{ display:flex; align-items:center; justify-content:center; }
#pc-roman-btn{
  position:absolute;
  display:none;
  align-items:center; justify-content:center;
  box-sizing:border-box;                      
  background:#33B8AD;
  border:3px solid #e8b04a; border-radius:999px;
  box-shadow:0 4px 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:top .55s cubic-bezier(0.16,1,0.3,1),
             left .38s cubic-bezier(0.16,1,0.3,1),
             transform .18s ease-out;
}
#pc-roman-btn.show{ display:flex; }
#pc-roman-btn:active{ transform:scale(.92); }
#pc-roman-btn > #pc-roman-globe{ display:none; width:87%; height:87%; }
#pc-roman-btn > #pc-roman-abc{ position:relative; top:-0.08em; }   
#pc-roman-btn.globe > #pc-roman-abc{ display:none; }
#pc-roman-btn.globe > #pc-roman-globe{ display:block; }
#postcard-overlay #lm-lang-slider{
  position:absolute; left:50%; bottom:24px;
  transform:translate(-50%, 60px);
  opacity:0;
  width:min(680px, 92vw);
  display:none;
  visibility:hidden; pointer-events:none;
  transition:transform .55s cubic-bezier(0.16,1,0.3,1), opacity .35s ease-out, visibility 0s linear .55s;
}
#postcard-overlay.active #lm-lang-slider{ display:block; }
#postcard-overlay #lm-lang-slider.pc-in{
  transform:translate(-50%, 0); opacity:1;
  visibility:visible; pointer-events:auto;
  transition:transform .55s cubic-bezier(0.16,1,0.3,1), opacity .35s ease-out, visibility 0s linear 0s;
}
#pc-back-real .syl-plain, .pcb-room .syl-plain, #pc-name-btn .syl-plain{
  transition:color .1s ease;
}
#pc-back-real .syl-plain.lit, .pcb-room .syl-plain.lit, #pc-name-btn .syl-plain.lit{
  color:#FF3060;
}