:root {
    --bg-1: #d7d4cf; --bg-2: #b8b4ad; --ink: #23211e; --ink-soft: #4a4843;
    --steel-hi: #f2f3f5; --steel-1: #d3d6db; --steel-2: #a7abb3;
    --steel-3: #767b84; --steel-edge: #5b5f67; --window: #14140f;
    --window-glow: #2a2a1f; --digit: #f4e9b8; --red-hi: #ff6a4d;
    --red-1: #e23b2e; --red-2: #a51f16; --panel: #efece6; --panel-line: #cdc9c0;
    --gold: #d9982b; --good: #3f9e5a; --cool: #6a86c9;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg-1: #1b1a18; --bg-2: #100f0d; --ink: #ece9e2; --ink-soft: #b7b3aa;
      --steel-hi: #cfd2d7; --steel-1: #9aa0a8; --steel-2: #6a6f78;
      --steel-3: #43474e; --steel-edge: #2a2d32; --window: #0a0a07;
      --window-glow: #1d1d13; --digit: #ffe98a; --red-hi: #ff5a3d;
      --red-1: #d5352a; --red-2: #7c150e; --panel: #211f1c; --panel-line: #37342f;
      --gold: #f0b64a; --good: #57c179; --cool: #8aa4e0;
    }
  }
  :root[data-theme="light"] {
    --bg-1: #d7d4cf; --bg-2: #b8b4ad; --ink: #23211e; --ink-soft: #4a4843;
    --steel-hi: #f2f3f5; --steel-1: #d3d6db; --steel-2: #a7abb3;
    --steel-3: #767b84; --steel-edge: #5b5f67; --window: #14140f;
    --window-glow: #2a2a1f; --digit: #f4e9b8; --red-hi: #ff6a4d;
    --red-1: #e23b2e; --red-2: #a51f16; --panel: #efece6; --panel-line: #cdc9c0;
    --gold: #d9982b; --good: #3f9e5a; --cool: #6a86c9;
  }
  :root[data-theme="dark"] {
    --bg-1: #1b1a18; --bg-2: #100f0d; --ink: #ece9e2; --ink-soft: #b7b3aa;
    --steel-hi: #cfd2d7; --steel-1: #9aa0a8; --steel-2: #6a6f78;
    --steel-3: #43474e; --steel-edge: #2a2d32; --window: #0a0a07;
    --window-glow: #1d1d13; --digit: #ffe98a; --red-hi: #ff5a3d;
    --red-1: #d5352a; --red-2: #7c150e; --panel: #211f1c; --panel-line: #37342f;
    --gold: #f0b64a; --good: #57c179; --cool: #8aa4e0;
  }

  :root {
    --taskbar-h: 46px;
    --z-wall: -2;         /* wallpaper */
    --z-surface: 1;       /* .wrap game desktop */
    --z-desktop-icons: 5;
    --z-assistant: 90;
    --z-win-base: 100;    /* windows climb 100..899 */
    --z-taskbar: 1000;
    --z-startmenu: 1100;
    --z-overlay: 1200;    /* #shroot modals, phone */
    --z-syscontrol: 1250; /* mute */
    --z-fx: 1300;         /* sparks/flood/flash/toasts */
    --z-boot: 9999;
  }

  * { box-sizing: border-box; }
  body {
    margin: 0; min-height: 100vh;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: radial-gradient(130% 100% at 50% 0%, var(--bg-1), var(--bg-2));
    -webkit-tap-highlight-color: transparent;
  }
  .wrap {
    max-width: 1120px; margin: 0 auto; padding: 1.5rem 1rem 4rem;
    display: grid; gap: 1.4rem;
    grid-template-columns: minmax(300px, 360px) 1fr;
    align-items: start;
    position: relative; z-index: var(--z-surface);
  }
  @media (max-width: 780px) { .wrap { grid-template-columns: 1fr; } }

  .eyebrow {
    grid-column: 1 / -1; text-align: center;
    font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
    font-weight: 700; color: var(--ink-soft);
  }
  .eyebrow b { color: var(--red-1); }

  .mono { font-variant-numeric: tabular-nums; font-family: "SF Mono", ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; }

  /* ---- left column: the device ---- */
  .left { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
  @media (max-width: 780px) { .left { position: static; } }

  .buster-stage { position: relative; height: 80px; margin-bottom: -20px; display: flex; justify-content: center; align-items: flex-end; }
  .bubble {
    position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%) translateY(6px) scale(.85);
    width: max-content; max-width: 250px; z-index: 9; pointer-events: none;
    background: var(--panel); color: var(--ink); border: 1px solid var(--panel-line); border-radius: 13px;
    padding: 8px 13px; font-size: 0.78rem; font-weight: 600; line-height: 1.28; text-align: center;
    box-shadow: 0 10px 22px rgba(0,0,0,.28); opacity: 0; transition: opacity .18s ease, transform .18s ease;
  }
  .bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 7px solid transparent; border-bottom: 0; border-top-color: var(--panel); }
  .bubble.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

  .pin-stage { position: relative; height: 96px; display: flex; justify-content: center; align-items: center; }
  #pinatron { width: 84px; height: 84px; cursor: pointer; transform-origin: 50% 6%; filter: drop-shadow(0 5px 5px rgba(0,0,0,.3)); }
  #pinatron:focus-visible { outline: 2px solid var(--red-1); outline-offset: 4px; border-radius: 12px; }
  .pin-bubble { bottom: 90px; }
  #pinatron .crack { transition: opacity .1s; }
  #pinatron.bust { animation: pinbust .55s ease; }
  @keyframes pinbust { 0%,100%{transform:rotate(0);} 18%{transform:rotate(-15deg) scale(1.06);} 44%{transform:rotate(12deg);} 68%{transform:rotate(-6deg);} 86%{transform:rotate(3deg);} }
  #pinatron.bust .crack { opacity: 1; }
  .pin-cd .bar > div { background: linear-gradient(90deg, var(--gold), #ffd88a); }

  .sisu-stage { position: relative; height: 96px; display: flex; justify-content: center; align-items: center; }
  #sisu { width: 88px; height: 88px; cursor: pointer; transform-origin: 50% 88%; filter: drop-shadow(0 5px 5px rgba(0,0,0,.3)); }
  #sisu:focus-visible { outline: 2px solid var(--red-1); outline-offset: 4px; border-radius: 12px; }
  .sisu-bubble { bottom: 90px; }
  #sisu.bang { animation: headbang .5s ease; }
  @keyframes headbang { 0%,100%{transform:rotate(0);} 22%{transform:rotate(20deg) translateY(3px);} 52%{transform:rotate(-9deg);} 78%{transform:rotate(11deg);} }
  .sisu-cd .bar > div { background: linear-gradient(90deg, #6a86c9, #a7c0ff); }

  @keyframes dance { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  body.music .buster-stage { animation: dance .5455s ease-in-out infinite; }
  body.music .pin-stage { animation: dance .5455s ease-in-out infinite; animation-delay: .27s; }
  body.music .sisu-stage { animation: dance .5455s ease-in-out infinite; animation-delay: .14s; }
  body.music .assistant-guy { animation: dance .5455s ease-in-out infinite; animation-delay: .4s; }
  #buster { width: 86px; height: 86px; transform-origin: 50% 90%; filter: drop-shadow(0 6px 6px rgba(0,0,0,.3)); cursor: pointer; }
  #buster:focus-visible { outline: 2px solid var(--red-1); outline-offset: 4px; border-radius: 12px; }
  .mouth-open { opacity: 0; }
  #buster.cheer .mouth-idle, #buster.spill .mouth-idle { opacity: 0; }
  #buster.cheer .mouth-open, #buster.spill .mouth-open { opacity: 1; }
  .sweat { opacity: 0; }
  #buster.bounce { animation: bounce .26s cubic-bezier(.3,1.5,.5,1); }
  @keyframes bounce { 0%{transform:translateY(0) scale(1,1);} 35%{transform:translateY(-13px) scale(.94,1.08);} 70%{transform:translateY(2px) scale(1.06,.94);} 100%{transform:translateY(0) scale(1,1);} }
  #buster.spill { animation: stumble .5s ease; }
  @keyframes stumble { 0%,100%{transform:translateY(0) rotate(0);} 20%{transform:translateY(2px) rotate(-12deg);} 55%{transform:rotate(9deg);} }
  .ow { opacity: 0; }
  #buster.spill .ow { animation: owpop .7s ease; }
  @keyframes owpop { 0%{opacity:0;transform:translateY(2px) scale(.5);} 30%{opacity:1;transform:translateY(-5px) scale(1.15);} 100%{opacity:0;transform:translateY(-16px) scale(1);} }

  .counter {
    display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
    padding: 1.5rem 1.4rem 1.7rem; border-radius: 26px;
    background: linear-gradient(160deg, var(--steel-hi) 0%, var(--steel-1) 22%, var(--steel-2) 60%, var(--steel-3) 100%);
    border: 1px solid var(--steel-edge);
    box-shadow: inset 0 2px 2px rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.3), 0 24px 48px -14px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.25);
  }
  .counter.shake { animation: shake .18s ease; }
  @keyframes shake { 0%,100%{transform:translate(0,0);} 25%{transform:translate(-3px,1px) rotate(-.4deg);} 75%{transform:translate(3px,-1px) rotate(.4deg);} }
  .brand { font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 800; color: var(--steel-edge); text-shadow: 0 1px 0 rgba(255,255,255,.4); }

  .window {
    width: 100%; padding: 0.6rem; border-radius: 12px; text-align: center;
    background: linear-gradient(180deg, var(--window), var(--window-glow));
    border: 1px solid #000; box-shadow: inset 0 3px 8px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.35);
  }
  .window .big { font-size: 2.9rem; line-height: 1.05; font-weight: 800; color: var(--digit); text-shadow: 0 0 10px rgba(244,233,184,.28); }
  .window .unit { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: #b8ad7a; }
  .window .rate { font-size: 0.7rem; color: #9c945f; margin-top: 2px; }

  .combo { width: 100%; display: flex; flex-direction: column; gap: 0.3rem; }
  .combo-label { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel-edge); display: flex; gap: 0.5em; align-items: baseline; }
  .combo-label b { font-size: 0.85rem; color: var(--red-1); }
  .combo-label.hot b { color: #ff9d1e; } .combo-label.blaze b { color: #ffd21e; }
  .combo-track { height: 8px; border-radius: 99px; background: var(--window); border: 1px solid #000; overflow: hidden; }
  .combo-fill { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--red-1), #ff9d1e, #ffd21e); box-shadow: 0 0 8px rgba(255,157,30,.6); transition: width .12s, opacity .5s; }

  .thumb {
    appearance: none; border: none; cursor: pointer; width: 124px; height: 124px; border-radius: 50%;
    color: #fff; font-family: inherit; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    background: radial-gradient(circle at 38% 30%, var(--red-hi) 0%, var(--red-1) 46%, var(--red-2) 100%);
    box-shadow: inset 0 3px 6px rgba(255,255,255,.4), inset 0 -8px 14px rgba(0,0,0,.4), 0 12px 20px -6px rgba(165,31,22,.7), 0 5px 0 var(--red-2);
    text-shadow: 0 1px 2px rgba(0,0,0,.4); transition: transform .07s, box-shadow .07s;
  }
  .thumb:active, .thumb.press { transform: translateY(5px); box-shadow: inset 0 3px 6px rgba(255,255,255,.25), inset 0 -6px 12px rgba(0,0,0,.45), 0 0 0 var(--red-2); }
  .thumb:focus-visible { outline: 3px solid var(--digit); outline-offset: 4px; }

  .buster-cd { width: 100%; font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-edge); text-align: center; }
  .buster-cd .bar { height: 6px; margin-top: 3px; border-radius: 99px; background: var(--window); border: 1px solid #000; overflow: hidden; }
  .buster-cd .bar > div { height: 100%; width: 100%; background: linear-gradient(90deg, var(--cool), #a7c0ff); transition: width .1s linear; }

  /* ---- right column: panels ---- */
  .right { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
  .panel { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 16px; padding: 1rem 1.1rem; }
  .panel h2 { margin: 0 0 0.7rem; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); font-weight: 800; }

  .res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.55rem; }
  .res {
    display: flex; flex-direction: column; gap: 1px; padding: 0.5rem 0.6rem; border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.05)); border: 1px solid var(--panel-line);
  }
  .res .n { font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
  .res .v { font-size: 1.1rem; font-weight: 800; }
  .res .r { font-size: 0.62rem; color: var(--ink-soft); }

  .gens { display: flex; flex-direction: column; gap: 0.45rem; }
  .gen {
    display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.8rem; align-items: center;
    padding: 0.5rem 0.7rem; border-radius: 10px; border: 1px solid var(--panel-line);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.04)); cursor: pointer;
    transition: border-color .12s, background .12s;
  }
  .gen:hover { border-color: var(--steel-3); }
  .gen.locked { opacity: 0.45; }
  .gen .name { font-weight: 700; font-size: 0.86rem; }
  .gen .desc { font-size: 0.66rem; color: var(--ink-soft); grid-column: 1 / -1; }
  .gen .own { font-size: 0.9rem; font-weight: 800; text-align: right; }
  .gen .cost { font-size: 0.66rem; text-align: right; color: var(--ink-soft); }
  .gen .cost.afford { color: var(--good); font-weight: 700; }

  .keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 0.4rem; }
  .kcell {
    position: relative; overflow: hidden; text-align: left; cursor: pointer;
    padding: 0.4rem 0.5rem 0.42rem; border-radius: 9px; border: 1px solid var(--panel-line);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.05));
    display: flex; flex-direction: column; gap: 1px; font: inherit; color: inherit;
    transition: border-color .1s, transform .05s;
  }
  .kcell:hover { border-color: var(--steel-3); }
  .kcell:active { transform: translateY(1px); }
  .kcell:focus-visible { outline: 2px solid var(--red-1); outline-offset: 1px; }
  .kcell .cap {
    display: inline-block; min-width: 1.15em; text-align: center; font-weight: 800; font-size: 0.7rem;
    padding: 1px 4px; border-radius: 5px; background: var(--steel-2); color: #14140f; text-transform: uppercase;
  }
  .kcell .kn { font-size: 0.68rem; font-weight: 700; line-height: 1.15; }
  .kcell .kc { font-size: 0.54rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
  .kcell .cdmask { position: absolute; left: 0; bottom: 0; right: 0; height: 3px; background: var(--cool); width: 0%; }
  .kcell.cat-gather .cap { background: #e2b23b; } .kcell.cat-build .cap { background: #7fa8d8; }
  .kcell.cat-ability .cap { background: #cf6ad0; } .kcell.cat-upgrade .cap { background: #6ac79a; }
  .kcell.cat-prestige .cap { background: #ff8a4d; } .kcell.cat-toggle .cap { background: #b5b0a6; }
  .kcell.cat-gamble .cap { background: #e2564f; } .kcell.cat-event .cap { background: #9d8cff; }

  .log { display: flex; flex-direction: column; gap: 2px; max-height: 150px; overflow-y: auto; font-size: 0.72rem; }
  .log div { color: var(--ink-soft); padding: 1px 0; border-bottom: 1px dashed var(--panel-line); }
  .log div:first-child { color: var(--ink); font-weight: 600; }

  .controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .knob {
    appearance: none; cursor: pointer; font: inherit; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--steel-edge); padding: 0.5rem 0.85rem; border-radius: 99px;
    background: linear-gradient(180deg, var(--steel-hi), var(--steel-2)); border: 1px solid var(--steel-edge);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(0,0,0,.25);
  }
  .knob:active { transform: translateY(1px); }
  .knob:focus-visible { outline: 2px solid var(--red-1); outline-offset: 2px; }

  /* overlays */
  #sparks { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-fx); }
  #flood { position: fixed; left: 0; right: 0; bottom: var(--taskbar-h); height: 0; z-index: var(--z-fx); pointer-events: none;
    background: linear-gradient(180deg, #fffdf8 0%, #f6f2e6 55%, #ece6d4 100%); box-shadow: inset 0 12px 26px rgba(0,0,0,.08); }
  #flood .surface { position: absolute; left: 0; right: 0; top: -22px; height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26' preserveAspectRatio='none'%3E%3Cpath d='M0 15 q15 -15 30 0 t30 0 t30 0 t30 0 V26 H0 Z' fill='%23fffdf8'/%3E%3C/svg%3E") repeat-x bottom / 120px 26px; }
  #flood.rise { animation: flood 2.6s cubic-bezier(.45,.05,.25,1) forwards; }
  #flood.rise .surface { animation: ripple .6s linear infinite; }
  @keyframes flood { 0%{height:0;} 32%{height:112vh;} 64%{height:112vh;} 100%{height:0;} }
  @keyframes ripple { from{background-position-x:0;} to{background-position-x:120px;} }

  .flash { position: fixed; left: 50%; top: 30%; transform: translate(-50%,-50%) scale(.4); z-index: var(--z-fx); pointer-events: none;
    font-size: clamp(2rem, 10vw, 4.4rem); font-weight: 900; font-style: italic; letter-spacing: -0.02em; color: #ffd21e;
    text-shadow: 0 0 18px rgba(255,157,30,.8), 0 4px 0 var(--red-2), 0 6px 20px rgba(0,0,0,.5); opacity: 0; text-align: center; }
  .flash.go { animation: pop .9s cubic-bezier(.2,1.4,.4,1) forwards; }
  @keyframes pop { 0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-6deg);} 25%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(3deg);} 70%{opacity:1;transform:translate(-50%,-52%) scale(1);} 100%{opacity:0;transform:translate(-50%,-90%) scale(1);} }

  #toasts { position: fixed; left: 50%; top: 44%; transform: translateX(-50%); z-index: var(--z-fx); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .toast { font-size: 0.9rem; font-weight: 700; color: var(--ink); background: var(--panel); border: 1px solid var(--panel-line); padding: 4px 12px; border-radius: 99px; box-shadow: 0 6px 16px rgba(0,0,0,.25); animation: toast 1.4s ease forwards; }
  @keyframes toast { 0%{opacity:0;transform:translateY(8px) scale(.9);} 15%{opacity:1;transform:translateY(0) scale(1);} 80%{opacity:1;} 100%{opacity:0;transform:translateY(-18px);} }

  .mute { position: fixed; top: 12px; right: 12px; z-index: var(--z-syscontrol); appearance: none; cursor: pointer; font-size: 1rem; line-height: 1;
    padding: 0.45rem 0.55rem; border-radius: 10px; background: linear-gradient(180deg, var(--steel-hi), var(--steel-2)); border: 1px solid var(--steel-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }

  /* Gurppy the (legally distinct) helper */
  .assistant { position: fixed; right: 16px; bottom: calc(var(--taskbar-h) + 16px); z-index: var(--z-assistant); display: flex; align-items: flex-end; gap: 8px; max-width: min(392px, 93vw); }
  .assistant-guy { width: 94px; height: 124px; cursor: pointer; flex: 0 0 auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); animation: gidle 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
  .assistant-guy:hover { filter: drop-shadow(0 6px 14px rgba(217,152,43,.6)); }
  @keyframes gidle { 0%,100%{transform:translateY(0) rotate(-1.5deg);} 50%{transform:translateY(-5px) rotate(1.5deg);} }
  .assistant.bob .assistant-guy { animation: gbob .55s ease; }
  @keyframes gbob { 0%,100%{transform:translateY(0) rotate(0);} 30%{transform:translateY(-13px) rotate(-7deg);} 62%{transform:translateY(0) rotate(5deg);} }
  .assistant-bubble { order: -1; position: relative; background: var(--panel); color: var(--ink); border: 1.5px solid var(--gold); border-radius: 16px; padding: 14px 16px; box-shadow: 0 12px 30px rgba(0,0,0,.42), 0 0 0 4px rgba(217,152,43,.14); font-size: 0.94rem; line-height: 1.4; }
  .assistant.bob .assistant-bubble { animation: gbubblepop .45s cubic-bezier(.2,1.3,.4,1); }
  @keyframes gbubblepop { 0%{transform:scale(.9);} 60%{transform:scale(1.04);} 100%{transform:scale(1);} }
  .assistant-bubble::after { content: ""; position: absolute; right: -9px; bottom: 26px; border: 9px solid transparent; border-left-color: var(--gold); border-right: 0; }
  .assistant.collapsed .assistant-bubble { display: none; }
  .assistant-x { position: absolute; top: 4px; right: 8px; border: none; background: none; color: var(--ink-soft); font-size: 1.05rem; cursor: pointer; line-height: 1; padding: 0; }
  .assistant-x:hover { color: var(--red-1); }
  .assistant-name { font-weight: 800; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
  .assistant-next { margin-top: 11px; }
  .assistant-reopen { position: fixed; right: 16px; bottom: calc(var(--taskbar-h) + 16px); z-index: var(--z-assistant); display: none; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--gold); background: linear-gradient(180deg, var(--steel-hi), var(--steel-2)); font-size: 1.6rem; font-weight: 800; color: var(--gold); cursor: pointer; box-shadow: 0 6px 14px rgba(0,0,0,.4), 0 0 0 0 rgba(217,152,43,.5); animation: greopenpulse 2s ease-in-out infinite; }
  @keyframes greopenpulse { 0%{box-shadow:0 6px 14px rgba(0,0,0,.4), 0 0 0 0 rgba(217,152,43,.5);} 70%{box-shadow:0 6px 14px rgba(0,0,0,.4), 0 0 0 12px rgba(217,152,43,0);} 100%{box-shadow:0 6px 14px rgba(0,0,0,.4), 0 0 0 0 rgba(217,152,43,0);} }

  @media (prefers-reduced-motion: reduce) {
    #buster.bounce, #buster.spill, #buster.spill .ow, .counter.shake, #pinatron.bust, #sisu.bang, .assistant.bob .assistant-guy,
    .assistant-guy, .assistant-reopen, .assistant.bob .assistant-bubble,
    #flood.rise, #flood.rise .surface, .flash.go, .toast,
    body.music .buster-stage, body.music .pin-stage, body.music .sisu-stage, body.music .assistant-guy { animation: none; }
    .thumb, .combo-fill { transition: none; }
  }
  /* ---- SHIFT LAYER: per-key sub-label on tiles ---- */
  .kcell .sh-line {
    display: flex; align-items: center; gap: 3px; margin-top: 3px;
    padding: 2px 4px; border-radius: 6px; cursor: pointer;
    background: linear-gradient(90deg, rgba(217,152,43,.16), rgba(157,140,255,.14));
    border: 1px solid transparent; line-height: 1.05;
  }
  .kcell .sh-line:hover { border-color: var(--gold); background: linear-gradient(90deg, rgba(217,152,43,.30), rgba(157,140,255,.24)); }
  .kcell .sh-line .shift-badge {
    flex: none; font-weight: 900; font-size: 0.5rem; letter-spacing: .02em;
    padding: 0 3px; border-radius: 4px; color: #14140f;
    background: linear-gradient(180deg, var(--gold), #b97e18);
  }
  .kcell .sh-line .shift-name { font-weight: 800; font-size: 0.54rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kcell .sh-line.empty { display: none; }

  /* ---- SHIFT LAYER: overlay "pages" ---- */
  #shroot { position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: none; }
  .sh-ov-backdrop {
    position: fixed; inset: 0; pointer-events: auto; display: flex; align-items: center; justify-content: center;
    padding: clamp(.6rem, 3vw, 2rem); background: rgba(8,7,5,.62); backdrop-filter: blur(3px);
    animation: shFade .16s ease;
  }
  @keyframes shFade { from { opacity: 0; } to { opacity: 1; } }
  .sh-ov {
    display: flex; flex-direction: column; width: min(560px, 100%); max-height: 90vh; overflow: hidden;
    border-radius: 20px; border: 1px solid var(--steel-edge); color: var(--ink);
    background:
      radial-gradient(120% 90% at 50% -10%, rgba(217,152,43,.12), transparent 60%),
      linear-gradient(165deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 82%, var(--steel-3)) 100%);
    box-shadow: 0 32px 64px -18px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.28);
    animation: shPop .22s cubic-bezier(.2,1.3,.4,1);
  }
  .sh-ov.wide { width: min(880px, 100%); }
  @keyframes shPop { 0% { transform: translateY(14px) scale(.94); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
  .sh-ov > header {
    display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; flex: none;
    border-bottom: 1px solid var(--panel-line);
    background: linear-gradient(180deg, rgba(217,152,43,.16), transparent);
  }
  .sh-ov > header .sh-hbadge {
    font-weight: 900; font-size: .7rem; letter-spacing: .06em; color: #14140f; padding: 3px 7px; border-radius: 7px;
    background: linear-gradient(180deg, var(--gold), #b97e18); box-shadow: 0 2px 6px rgba(0,0,0,.3);
  }
  .sh-ov > header h3 { margin: 0; flex: 1; font-size: .95rem; font-weight: 800; letter-spacing: .02em; }
  .sh-ov > header .sh-x {
    appearance: none; cursor: pointer; border: 1px solid var(--panel-line); border-radius: 9px; width: 30px; height: 30px;
    font-size: 1.15rem; line-height: 1; color: var(--ink); background: var(--panel);
  }
  .sh-ov > header .sh-x:hover { border-color: var(--red-1); color: var(--red-1); }
  .sh-body { padding: 1rem 1.1rem 1.2rem; overflow: auto; -webkit-overflow-scrolling: touch; }
  .sh-body button { font-family: inherit; }
  .sh-btn {
    appearance: none; cursor: pointer; font: inherit; font-weight: 800; font-size: .74rem; letter-spacing: .04em;
    color: #fff; padding: .55rem .9rem; border-radius: 11px; border: none;
    background: radial-gradient(circle at 40% 30%, var(--red-hi), var(--red-1) 60%, var(--red-2));
    box-shadow: 0 5px 0 var(--red-2), 0 8px 16px -6px rgba(165,31,22,.7);
  }
  .sh-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--red-2); }
  .sh-btn:disabled { filter: grayscale(.7) brightness(.8); cursor: not-allowed; box-shadow: none; transform: none; }
  .sh-btn.gold { background: radial-gradient(circle at 40% 30%, #ffd98a, var(--gold) 60%, #9a6c12); box-shadow: 0 5px 0 #7c560e, 0 8px 16px -6px rgba(217,152,43,.7); color: #14140f; }
  .sh-btn.cool { background: radial-gradient(circle at 40% 30%, #a7c0ff, var(--cool) 60%, #34497f); box-shadow: 0 5px 0 #2b3c6b, 0 8px 16px -6px rgba(106,134,201,.6); }
  .sh-btn.ghost { background: var(--panel); color: var(--ink); border: 1px solid var(--panel-line); box-shadow: none; }
  @media (prefers-reduced-motion: reduce) { .sh-ov-backdrop, .sh-ov { animation: none; } }

  /* ---- Bust Bay Fishing ---- */
  .fish-scene { position: relative; width: 100%; height: 118px; margin: .1rem 0 .3rem; }
  .fish-svg { width: 100%; height: 100%; display: block; }
  .fish-waves .wv { animation: fishwave 3.4s linear infinite; }
  .fish-waves .wv2 { animation-duration: 4.8s; animation-direction: reverse; }
  @keyframes fishwave { from { transform: translateX(0); } to { transform: translateX(80px); } }
  .fish-bob { transition: transform .25s ease; transform-origin: 150px 70px; }
  .fish-scene.cast .fish-bob { animation: fishfloat 2.2s ease-in-out infinite; }
  @keyframes fishfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
  .fish-scene.bite .fish-bob { animation: fishdip .32s ease-in-out infinite; }
  @keyframes fishdip { 0%,100% { transform: translateY(0) scale(1,1); } 45% { transform: translateY(9px) scale(1.12,.8); } }
  .fish-scene.bite .fish-lineseg { stroke: var(--red-1); stroke-width: 1.6; }
  .fish-catch {
    position: absolute; left: 50%; top: 6px; transform: translateX(-50%) translateY(6px) scale(.6);
    z-index: 4; pointer-events: none; opacity: 0; white-space: nowrap;
    font-size: .82rem; font-weight: 800; color: var(--ink);
    background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px;
    padding: 4px 11px; box-shadow: 0 8px 18px rgba(0,0,0,.28);
  }
  .fish-catch.show { animation: fishcatch 1.5s cubic-bezier(.2,1.3,.4,1) forwards; }
  @keyframes fishcatch {
    0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.5); }
    22% { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.1); }
    70% { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(1); }
  }
  .thumb-fish {
    appearance: none; cursor: pointer; font: inherit; font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; width: 100%; padding: .6rem; border-radius: 12px; border: none;
    background: radial-gradient(circle at 40% 28%, #7fd0ff, var(--cool) 58%, #34497f);
    box-shadow: inset 0 2px 4px rgba(255,255,255,.4), 0 5px 0 #2b3c6b, 0 8px 16px -6px rgba(106,134,201,.6);
    transition: transform .07s, box-shadow .07s, background .12s;
  }
  .thumb-fish:active { transform: translateY(4px); box-shadow: inset 0 2px 4px rgba(255,255,255,.3), 0 1px 0 #2b3c6b; }
  .thumb-fish:focus-visible { outline: 3px solid var(--digit); outline-offset: 3px; }
  .thumb-fish.reel {
    background: radial-gradient(circle at 40% 28%, var(--red-hi), var(--red-1) 55%, var(--red-2));
    box-shadow: inset 0 2px 4px rgba(255,255,255,.4), 0 5px 0 var(--red-2), 0 0 22px rgba(226,59,46,.7);
    animation: fishreelpulse .4s ease-in-out infinite;
  }
  @keyframes fishreelpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

  /* ---- Gurppa Metropolis (city builder) ---- */
.cty-wrap{display:flex;flex-direction:column;gap:10px}
.cty-palette{display:flex;flex-wrap:wrap;gap:6px}
.cty-pbtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;border-radius:10px;background:var(--panel);border:1px solid var(--panel-line);cursor:pointer;min-width:64px;transition:transform .08s,box-shadow .12s;user-select:none}
.cty-pbtn:hover{transform:translateY(-2px)}
.cty-pbtn:active{transform:translateY(0)}
.cty-pbtn.cty-sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset,0 0 10px -2px var(--gold)}
.cty-pemoji{font-size:20px;line-height:1}
.cty-pname{font-size:9px;font-weight:700;letter-spacing:.02em;text-align:center;color:var(--ink)}
.cty-pcost{font-size:9px;color:var(--gold);font-weight:700}
.cty-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cty-bull{cursor:pointer}
.cty-bull.cty-on{background:var(--red-2);color:#fff;border-color:var(--red-hi);box-shadow:0 0 10px -1px var(--red-hi)}
.cty-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.cty-cell{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:9px;background:linear-gradient(160deg,var(--steel-3,#2a2a2a),var(--steel-2,#1c1c1c));border:1px solid var(--steel-edge,#000);cursor:pointer;font-size:22px;overflow:hidden;transition:transform .07s,box-shadow .12s}
.cty-cell:hover{transform:scale(1.04);box-shadow:0 0 8px -2px var(--gold)}
.cty-cell.cty-empty{color:var(--ink-soft);font-size:16px;opacity:.35}
.cty-cell.cty-empty:hover{opacity:.7;box-shadow:0 0 8px -2px var(--good)}
.cty-cell.cty-bmode{cursor:crosshair}
.cty-cell.cty-bmode:not(.cty-empty):hover{box-shadow:0 0 10px -1px var(--red-hi);border-color:var(--red-hi)}
.cty-lvl{position:absolute;bottom:1px;right:2px;font-size:8px;font-weight:800;color:var(--gold);text-shadow:0 1px 1px #000;background:rgba(0,0,0,.4);padding:0 3px;border-radius:5px;line-height:12px}
.cty-pop{position:absolute;top:2px;left:3px;font-size:8px;opacity:.5}
@keyframes cty-pulse{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.cty-cell.cty-just{animation:cty-pulse .3s ease}
.cty-stats{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;color:var(--ink-soft);border-top:1px dashed var(--panel-line);padding-top:7px}
.cty-stats b{color:var(--gold)}
.cty-hint{font-size:10px;color:var(--ink-soft);opacity:.8}

  /* ---- Gurppa Reels (phone feed) ---- */
  .reels-preview { display:flex; align-items:center; gap:.7rem; }
  .reels-phoneicon {
    flex:none; width:44px; height:64px; border-radius:9px; position:relative;
    background:linear-gradient(160deg,#3a2b5e,#1c1430); border:2px solid var(--steel-edge);
    box-shadow:inset 0 0 8px rgba(157,140,255,.5), 0 4px 10px rgba(0,0,0,.35); overflow:hidden;
  }
  .reels-phoneicon::before { content:"▶"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; opacity:.9; }
  .reels-phoneicon::after { content:""; position:absolute; left:50%; top:5px; width:12px; height:3px; border-radius:3px; background:rgba(255,255,255,.4); transform:translateX(-50%); }
  .reels-open {
    appearance:none; cursor:pointer; font:inherit; font-weight:800; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:#fff;
    padding:.55rem .9rem; border-radius:12px; border:none;
    background:linear-gradient(120deg,#feda75,#fa7e1e 30%,#d62976 60%,#962fbf 85%,#4f5bd5);
    box-shadow:0 5px 14px -4px rgba(214,41,118,.7); flex:1;
  }
  .reels-open:active { transform:translateY(2px); }
  .reels-substat { font-size:.6rem; color:var(--ink-soft); margin-top:.4rem; }
  .reels-substat b { color:var(--ink); }

  .reel-phone {
    position:relative; width:min(370px,100%); height:min(74vh,680px); margin:0 auto;
    background:#000; border-radius:26px; overflow:hidden;
    border:2px solid #2a2531; box-shadow:0 20px 50px -12px rgba(0,0,0,.7);
    display:flex; flex-direction:column;
  }
  .reel-topbar {
    position:absolute; top:0; left:0; right:0; z-index:6; display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px 20px; color:#fff; pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.55), transparent);
  }
  .reel-topbar .rt-title { font-weight:800; font-size:.9rem; letter-spacing:.02em; display:flex; align-items:center; gap:6px; }
  .reel-post {
    pointer-events:auto; appearance:none; cursor:pointer; font:inherit; font-weight:800; font-size:.72rem; color:#14140f;
    padding:5px 11px; border-radius:99px; border:none; background:linear-gradient(180deg,#ffd98a,var(--gold)); box-shadow:0 2px 6px rgba(0,0,0,.4);
  }
  .reel-post:active { transform:translateY(1px); }
  .reel-feed { flex:1; overflow-y:auto; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .reel-feed::-webkit-scrollbar { display:none; }
  .reel-card {
    position:relative; height:100%; scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden;
    display:flex; align-items:flex-end; color:#fff; isolation:isolate;
  }
  .reel-bg { position:absolute; inset:0; z-index:-2; }
  .reel-actor { position:absolute; z-index:-1; left:50%; top:42%; transform:translate(-50%,-50%); font-size:96px; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
  .reel-actor2 { position:absolute; z-index:-1; left:64%; top:32%; font-size:54px; opacity:.95; }
  .reel-card.reel-anim .reel-actor { animation:reelBob 1.4s ease-in-out infinite; }
  .reel-card.reel-anim .reel-actor2 { animation:reelSpin 2.6s linear infinite; }
  @keyframes reelBob { 0%,100%{transform:translate(-50%,-50%) scale(1) rotate(-4deg);} 50%{transform:translate(-50%,-58%) scale(1.08) rotate(4deg);} }
  @keyframes reelSpin { from{transform:rotate(0) scale(1);} 50%{transform:rotate(180deg) scale(1.2);} to{transform:rotate(360deg) scale(1);} }
  .reel-badge {
    position:absolute; top:52px; left:14px; z-index:5; font-weight:900; font-size:.72rem; letter-spacing:.05em;
    padding:3px 9px; border-radius:99px; color:#14140f; background:linear-gradient(90deg,#ffd21e,#ff9d1e);
    box-shadow:0 0 16px rgba(255,157,30,.8); animation:reelPulse .8s ease-in-out infinite;
  }
  @keyframes reelPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }
  .reel-card.viral { box-shadow:inset 0 0 0 3px rgba(255,210,30,.7); }
  .reel-rail { position:absolute; right:10px; bottom:96px; z-index:5; display:flex; flex-direction:column; gap:16px; align-items:center; }
  .reel-act { appearance:none; cursor:pointer; border:none; background:none; color:#fff; font:inherit; font-weight:800; font-size:.62rem;
    display:flex; flex-direction:column; align-items:center; gap:2px; text-shadow:0 1px 3px rgba(0,0,0,.6); }
  .reel-act .ico { font-size:1.7rem; line-height:1; transition:transform .12s; }
  .reel-act:active .ico { transform:scale(.8); }
  .reel-act.like.liked .ico { animation:reelPop .3s ease; }
  .reel-act.like.liked { color:#ff4d6d; }
  @keyframes reelPop { 0%{transform:scale(.6);} 60%{transform:scale(1.35);} 100%{transform:scale(1);} }
  .reel-meta { position:relative; z-index:4; padding:14px 74px 16px 14px; width:100%;
    background:linear-gradient(0deg, rgba(0,0,0,.6), transparent); }
  .reel-user { display:flex; align-items:center; gap:7px; font-weight:800; font-size:.82rem; }
  .reel-user .av { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); }
  .reel-user .foll { font-weight:600; font-size:.62rem; color:rgba(255,255,255,.7); }
  .reel-cap { font-size:.74rem; font-weight:500; line-height:1.3; margin:5px 0 4px; }
  .reel-cap .tag { color:#8ab4ff; font-weight:700; }
  .reel-audio { display:flex; align-items:center; gap:5px; font-size:.62rem; color:rgba(255,255,255,.82); }
  .reel-audio .note { animation:reelNote 1.6s linear infinite; }
  @keyframes reelNote { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-2px);} }
  .reel-gain { position:absolute; z-index:7; right:16px; bottom:150px; font-weight:900; font-size:.9rem; color:#7cf25b; text-shadow:0 2px 4px rgba(0,0,0,.6); opacity:0; pointer-events:none; }
  .reel-gain.show { animation:reelGain 1s ease forwards; }
  @keyframes reelGain { 0%{opacity:0;transform:translateY(6px);} 25%{opacity:1;} 100%{opacity:0;transform:translateY(-26px);} }
  .rs0 .reel-bg { background:radial-gradient(120% 90% at 50% 20%, #ff8a3d, #b3203a 70%, #4a0d1f); }
  .rs1 .reel-bg { background:radial-gradient(120% 90% at 50% 20%, #7cf25b, #1f8a4c 70%, #0a3a22); }
  .rs2 .reel-bg { background:radial-gradient(120% 90% at 50% 20%, #a7c0ff, #4f5bd5 70%, #221a4a); }
  .rs3 .reel-bg { background:radial-gradient(120% 90% at 50% 20%, #ffe08a, #d9982b 70%, #5a3d0e); }
  .rs4 .reel-bg { background:radial-gradient(120% 90% at 50% 20%, #ff9de6, #d62976 70%, #4a0f34); }
  .rs5 .reel-bg { background:radial-gradient(120% 90% at 50% 20%, #eef1f5, #9aa0a8 70%, #3a3f47); }

  /* burned-in brainrot overlay caption */
  .reel-overlaycap {
    position:absolute; z-index:3; left:50%; top:33%; transform:translate(-50%,-50%) rotate(-3deg);
    max-width:82%; text-align:center; pointer-events:none; text-transform:uppercase;
    font-family:"Impact","Arial Black",system-ui,sans-serif; font-weight:900; font-size:1.55rem; line-height:1.02; letter-spacing:.01em;
    color:#fff; -webkit-text-stroke:2px #000;
    text-shadow:2px 2px 0 #000, -2px 2px 0 #000, 0 3px 0 rgba(0,0,0,.5), 0 0 16px rgba(0,0,0,.45);
    animation:reelOvl 2.2s ease-in-out infinite;
  }
  @keyframes reelOvl { 0%,100%{transform:translate(-50%,-50%) rotate(-3deg) scale(1);} 50%{transform:translate(-50%,-53%) rotate(-3deg) scale(1.06);} }

  /* ---- animated reel "clip" engine ---- */
  .reel-progress { position:absolute; top:0; left:0; right:0; height:3px; z-index:6; background:rgba(255,255,255,.18); }
  .reel-progress-fill { height:100%; width:0; background:rgba(255,255,255,.92); box-shadow:0 0 6px rgba(255,255,255,.6); }
  .reel-progress-fill.run { animation:reelProg 4.2s linear infinite; }
  @keyframes reelProg { from{width:0;} to{width:100%;} }

  .reel-fx { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
  .reel-p { position:absolute; font-size:26px; line-height:1; will-change:transform,opacity; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
  .p-up { bottom:14%; animation:pUp linear forwards; }
  @keyframes pUp { 0%{transform:translateY(0) scale(.7);opacity:0;} 15%{opacity:1;} 100%{transform:translateY(-260px) scale(1.1);opacity:0;} }
  .p-fall { top:-8%; animation:pFall linear forwards; }
  @keyframes pFall { 0%{transform:translateY(-20px) rotate(0);opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{transform:translateY(460px) rotate(70deg);opacity:0;} }
  .p-burst { top:44%; animation:pBurst ease-out forwards; }
  @keyframes pBurst { 0%{transform:translate(-50%,-50%) scale(.4);opacity:0;} 15%{opacity:1;transform:translate(-50%,-50%) scale(1.2);} 100%{transform:translate(calc(-50% + var(--dx,0)),calc(-50% + var(--dy,0))) scale(.6);opacity:0;} }
  .p-react { bottom:22%; animation:pReact ease-out forwards; }
  @keyframes pReact { 0%{transform:translateY(0) scale(.6);opacity:0;} 20%{opacity:.9;} 100%{transform:translateY(-170px) translateX(14px) scale(1);opacity:0;} }

  .reel-liquid { position:absolute; left:0; right:0; bottom:0; height:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(223,233,255,.35), rgba(170,200,255,.62)); border-top:3px solid rgba(255,255,255,.7);
    transition:height .5s ease; }
  .skit-flood.reel-playing .reel-liquid { height:28%; }
  .reel-liquid.surge { height:72%; }

  .reel-bignum { position:absolute; z-index:8; left:50%; top:50%; transform:translate(-50%,-50%) scale(0); opacity:0; pointer-events:none;
    font-family:"Impact","Arial Black",system-ui,sans-serif; font-weight:900; font-size:2rem; text-transform:uppercase; text-align:center; white-space:nowrap;
    color:#ffe86b; -webkit-text-stroke:2px #000; text-shadow:3px 3px 0 #000, 0 0 18px rgba(255,180,0,.8); }
  .reel-bignum.pop { animation:bignumPop .9s cubic-bezier(.2,1.4,.3,1) forwards; }
  @keyframes bignumPop {
    0%{transform:translate(-50%,-50%) scale(0) rotate(-8deg);opacity:0;}
    20%{transform:translate(-50%,-50%) scale(1.25) rotate(3deg);opacity:1;}
    70%{transform:translate(-50%,-60%) scale(1.08) rotate(-2deg);opacity:1;}
    100%{transform:translate(-50%,-92%) scale(.9);opacity:0;}
  }

  .reel-playing .reel-actor { animation:reelBeat .52s ease-in-out infinite !important; }
  @keyframes reelBeat { 0%,100%{transform:translate(-50%,-50%) scale(1);} 50%{transform:translate(-50%,-54%) scale(1.12);} }
  .reel-playing .reel-overlaycap { animation-duration:1.1s; }
  .reel-playing.skit-rave .reel-bg { animation:reelStrobe .28s steps(2,end) infinite; }
  @keyframes reelStrobe { 0%{filter:hue-rotate(0) brightness(1.1);} 50%{filter:hue-rotate(70deg) brightness(1.5);} 100%{filter:hue-rotate(-40deg) brightness(1.15);} }

  .reel-hit .reel-bg { animation:reelFlash .5s ease; }
  @keyframes reelFlash { 0%{filter:brightness(1);} 18%{filter:brightness(1.8) saturate(1.4);} 100%{filter:brightness(1);} }
  .reel-hit .reel-actor { animation:reelHitShake .5s ease !important; }
  @keyframes reelHitShake { 0%,100%{transform:translate(-50%,-50%) scale(1);} 20%{transform:translate(-54%,-50%) scale(1.18) rotate(-7deg);} 45%{transform:translate(-46%,-50%) scale(1.12) rotate(7deg);} 70%{transform:translate(-51%,-50%) scale(1.05) rotate(-3deg);} }

  /* comment sheet */
  .reel-comments {
    position:absolute; left:0; right:0; bottom:0; z-index:9; height:66%;
    display:flex; flex-direction:column; color:#fff; background:#15121a;
    border-radius:18px 18px 0 0; box-shadow:0 -12px 30px rgba(0,0,0,.55);
    transform:translateY(100%); transition:transform .26s cubic-bezier(.2,.8,.2,1);
  }
  .reel-comments.open { transform:translateY(0); }
  .rc-grab { width:38px; height:4px; border-radius:99px; background:rgba(255,255,255,.28); margin:8px auto 4px; }
  .rc-head { display:flex; align-items:center; justify-content:space-between; padding:4px 14px 10px; border-bottom:1px solid rgba(255,255,255,.1); }
  .rc-count { font-weight:800; font-size:.82rem; }
  .rc-close { appearance:none; border:none; background:none; color:rgba(255,255,255,.75); font-size:1rem; cursor:pointer; padding:4px 6px; }
  .rc-list { flex:1; overflow-y:auto; padding:8px 12px; display:flex; flex-direction:column; gap:13px; scrollbar-width:thin; }
  .rc-item { display:flex; gap:9px; align-items:flex-start; }
  .rc-av { flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); }
  .rc-body { flex:1; min-width:0; }
  .rc-top { display:flex; align-items:center; gap:6px; font-size:.68rem; color:rgba(255,255,255,.7); }
  .rc-top b { color:#fff; font-size:.72rem; font-weight:800; }
  .rc-tag { font-size:.56rem; font-weight:700; color:#ffd21e; background:rgba(255,210,30,.14); padding:1px 6px; border-radius:99px; }
  .rc-item.you .rc-tag { color:#7cf25b; background:rgba(124,242,91,.14); }
  .rc-time { margin-left:auto; font-size:.6rem; opacity:.6; }
  .rc-text { font-size:.76rem; line-height:1.35; margin-top:2px; overflow-wrap:anywhere; }
  .rc-text .tag { color:#8ab4ff; font-weight:700; }
  .rc-like { appearance:none; border:none; background:none; color:rgba(255,255,255,.7); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:1px; font:inherit; font-size:.58rem; font-weight:700; flex:none; padding:0 2px; }
  .rc-like .rc-heart { font-size:.95rem; line-height:1; }
  .rc-like.liked { color:#ff4d6d; }
  .rc-compose { display:flex; align-items:center; gap:8px; padding:9px 12px; border-top:1px solid rgba(255,255,255,.1); }
  .rc-compose .rc-av { width:26px; height:26px; font-size:14px; }
  .rc-input { flex:1; min-width:0; appearance:none; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:99px; padding:7px 12px; color:#fff; font:inherit; font-size:.74rem; outline:none; }
  .rc-input::placeholder { color:rgba(255,255,255,.5); }
  .rc-input:focus { border-color:rgba(255,210,30,.6); }
  .rc-send { appearance:none; border:none; cursor:pointer; font:inherit; font-weight:800; font-size:.72rem; color:#14140f; padding:7px 13px; border-radius:99px; background:linear-gradient(180deg,#ffd98a,var(--gold)); }
  .rc-send:active { transform:translateY(1px); }

  @media (prefers-reduced-motion: reduce) {
    .reel-card.reel-anim .reel-actor, .reel-card.reel-anim .reel-actor2, .reel-badge, .reel-audio .note { animation:none; }
    .reel-overlaycap { animation:none; }
    .reel-comments { transition:none; }
    .reel-fx { display:none; }
    .reel-playing .reel-actor, .reel-hit .reel-actor, .reel-hit .reel-bg, .reel-playing.skit-rave .reel-bg, .reel-progress-fill.run, .reel-bignum.pop { animation:none !important; }
  }
  /* ============ BustOS desktop shell ============ */
  body { padding-bottom: var(--taskbar-h); }
  #bos-wall { position: fixed; inset: 0; z-index: var(--z-wall); pointer-events: none;
    background:
      radial-gradient(1200px 700px at 80% -10%, rgba(226,59,46,.18), transparent 60%),
      radial-gradient(900px 600px at 10% 110%, rgba(106,134,201,.20), transparent 60%),
      repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 2px, transparent 2px 22px); }
  #bos-icons { position: fixed; top: 10px; left: 10px; z-index: var(--z-desktop-icons); display: none; flex-direction: column; gap: 10px; }
  .bos-dicon { width: 76px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; background: none; border: 0; color: var(--ink); font: inherit; padding: 4px; border-radius: 8px; }
  .bos-dicon:hover { background: rgba(127,127,127,.16); }
  .bos-dicon .gl { font-size: 30px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
  .bos-dicon .lb { font-size: .58rem; font-weight: 700; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
  @media (min-width: 1320px) { #bos-icons { display: flex; } }

  /* boot splash */
  #bos-boot { position: fixed; inset: 0; z-index: var(--z-boot); background: #070705; color: #f4e9b8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; font-family: ui-monospace, "DejaVu Sans Mono", monospace; }
  #bos-boot.gone { opacity: 0; transition: opacity .5s; pointer-events: none; }
  #bos-boot .logo { font-size: clamp(2.2rem, 9vw, 4.6rem); font-weight: 900; font-style: italic; letter-spacing: -.03em; color: #ff5a3d; text-shadow: 0 0 24px rgba(255,90,61,.6), 4px 4px 0 #7c150e; }
  #bos-boot .logo b { color: #ffd21e; }
  #bos-boot .tag { font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: #b8ad7a; }
  #bos-boot .barwrap { width: min(360px, 76vw); height: 10px; border: 1px solid #4a3d1e; border-radius: 6px; overflow: hidden; background: #14140f; }
  #bos-boot .bar { height: 100%; width: 0%; background: linear-gradient(90deg, #e23b2e, #ff9d1e, #ffd21e); transition: width .1s linear; }
  #bos-boot .blog { height: 84px; width: min(360px, 76vw); overflow: hidden; font-size: .62rem; color: #7c8a5a; line-height: 1.5; }
  #bos-boot .skip { font-size: .6rem; color: #5a5a44; letter-spacing: .1em; }

  /* taskbar */
  #bos-taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); z-index: var(--z-taskbar); display: flex; align-items: center; gap: 6px; padding: 0 8px;
    background: linear-gradient(180deg, rgba(30,28,24,.94), rgba(16,15,12,.98)); border-top: 1px solid rgba(255,255,255,.08); box-shadow: 0 -6px 18px rgba(0,0,0,.4); backdrop-filter: blur(6px); }
  #bos-start { appearance: none; cursor: pointer; font: inherit; font-weight: 900; font-size: .8rem; letter-spacing: .06em; color: #fff; height: 34px; padding: 0 14px; border-radius: 9px; border: none;
    background: radial-gradient(circle at 40% 30%, var(--red-hi), var(--red-1) 60%, var(--red-2)); box-shadow: 0 3px 0 var(--red-2), 0 6px 12px -3px rgba(165,31,22,.7); display: flex; align-items: center; gap: 7px; }
  #bos-start:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--red-2); }
  #bos-tasks { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  #bos-tasks::-webkit-scrollbar { display: none; }
  .bos-task { flex: none; cursor: pointer; font: inherit; font-size: .66rem; font-weight: 700; color: #e9e4d4; height: 34px; max-width: 160px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.05); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bos-task:hover { background: rgba(255,255,255,.12); }
  .bos-task.active { background: rgba(226,59,46,.24); border-color: rgba(255,120,90,.5); }
  .bos-task.pinned { background: rgba(226,59,46,.16); border-color: rgba(255,120,90,.4); font-weight: 800; }
  .bos-task.pinned .g { font-size: 1rem; }
  .bos-task .g { font-size: .95rem; }
  #bos-clock { flex: none; color: #d7d2c4; font-size: .66rem; font-weight: 700; text-align: right; line-height: 1.15; padding: 0 6px; font-variant-numeric: tabular-nums; }
  #bos-clock small { display: block; font-weight: 500; opacity: .7; font-size: .56rem; }

  /* start menu */
  #bos-startmenu { position: fixed; left: 8px; bottom: calc(var(--taskbar-h) + 6px); z-index: var(--z-startmenu); width: 268px; border-radius: 14px; overflow: hidden; opacity: 0; transform: translateY(10px) scale(.98); pointer-events: none; transition: opacity .14s, transform .14s;
    background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 80%, var(--steel-3))); border: 1px solid var(--steel-edge); box-shadow: 0 24px 50px -14px rgba(0,0,0,.7); }
  #bos-startmenu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  #bos-startmenu .sm-head { padding: 12px 14px; font-weight: 900; font-style: italic; color: var(--red-1); font-size: 1.1rem; border-bottom: 1px solid var(--panel-line); }
  #bos-startmenu .sm-head b { color: var(--gold); }
  #bos-startmenu .sm-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; color: var(--ink); padding: 9px 14px; background: none; border: 0; }
  #bos-startmenu .sm-item:hover { background: rgba(226,59,46,.14); }
  #bos-startmenu .sm-item .g { font-size: 1.1rem; width: 22px; text-align: center; }
  #bos-startmenu .sm-foot { padding: 8px 14px; font-size: .56rem; color: var(--ink-soft); border-top: 1px solid var(--panel-line); letter-spacing: .08em; text-transform: uppercase; }

  /* windows */
  .bos-win { position: fixed; z-index: var(--z-win-base); display: flex; flex-direction: column; min-width: 240px; min-height: 140px; max-width: 96vw; max-height: 80vh; border-radius: 12px; overflow: hidden;
    background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 86%, var(--steel-3))); border: 1px solid var(--steel-edge); box-shadow: 0 24px 60px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.2); }
  .bos-win.min { display: none; }
  .bos-win > .bos-titlebar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px; cursor: grab; user-select: none; flex: none;
    background: linear-gradient(180deg, rgba(226,59,46,.16), transparent); border-bottom: 1px solid var(--panel-line); }
  .bos-win.dragging > .bos-titlebar { cursor: grabbing; }
  .bos-titlebar .tt { flex: 1; font-weight: 800; font-size: .74rem; letter-spacing: .02em; display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bos-titlebar .wbtn { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--panel-line); background: var(--panel); cursor: pointer; font-size: .8rem; line-height: 1; color: var(--ink); display: flex; align-items: center; justify-content: center; }
  .bos-titlebar .wbtn.close:hover { background: var(--red-1); color: #fff; border-color: var(--red-2); }
  .bos-titlebar .wbtn.min:hover { background: var(--gold); color: #14140f; }
  .bos-win > .bos-wbody { flex: 1; overflow: auto; padding: 12px 14px; font-size: .78rem; }

  /* apps */
  .bos-term { background: #0b0b07; color: #9be34f; font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: .72rem; height: 100%; display: flex; flex-direction: column; }
  .bos-term .out { flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; padding: 10px 12px; line-height: 1.45; }
  .bos-term .out .u { color: #ffd21e; }
  .bos-term .out .e { color: #ff6a4d; }
  .bos-term .inrow { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid #1c1c12; }
  .bos-term .inrow .ps { color: #ff5a3d; font-weight: 700; }
  .bos-term .inrow input { flex: 1; background: none; border: 0; outline: none; color: #9be34f; font: inherit; }
  .bos-bin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px,1fr)); gap: 10px; margin-bottom: 12px; }
  .bos-file { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .58rem; color: var(--ink-soft); text-align: center; }
  .bos-file .g { font-size: 26px; }
  .bos-set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--panel-line); }
  .bos-seg { display: flex; gap: 4px; }
  .bos-seg button { cursor: pointer; font: inherit; font-size: .64rem; font-weight: 700; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--panel-line); background: var(--panel); color: var(--ink); }
  .bos-seg button.on { background: var(--red-1); color: #fff; border-color: var(--red-2); }

  /* ============ Traffic incident animation ============ */
  .car-scene { position: fixed; inset: 0; z-index: 9990; pointer-events: none; overflow: hidden; }
  .car-scene .car-road {
    position: absolute; left: 0; right: 0; top: 50%; height: 46px; transform: translateY(-50%);
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 26px, transparent 26px 60px);
    opacity: .5; animation: carRoad 2.2s ease-out forwards;
  }
  .car-scene .car-victim {
    position: absolute; left: 50%; top: 50%; font-size: 48px; transform: translate(-50%,-50%);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); animation: carVictim 2.2s ease-out forwards;
  }
  .car-scene .car-veh {
    position: absolute; left: 50%; top: 50%; font-size: 72px;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); animation: carDrive 2.2s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .car-scene .car-pow {
    position: absolute; left: 50%; top: 50%; font-size: 96px; opacity: 0;
    transform: translate(-50%,-50%); animation: carPow 2.2s ease-out forwards;
  }
  .car-scene .car-amount {
    position: absolute; left: 50%; top: 42%; opacity: 0; white-space: nowrap; text-align: center;
    font-family: "Impact","Arial Black",system-ui,sans-serif; font-weight: 900; font-size: 2.1rem;
    -webkit-text-stroke: 2px #000; text-shadow: 2px 2px 0 #000, 0 0 18px rgba(0,0,0,.5);
    transform: translate(-50%,-50%); animation: carAmt 2.2s cubic-bezier(.2,1.3,.3,1) forwards;
  }
  .car-scene.car-gain .car-amount { color: #57d977; }
  .car-scene.car-loss .car-amount { color: #ff5a4a; }

  @keyframes carRoad { 0%{opacity:0;} 12%{opacity:.5;} 80%{opacity:.5;} 100%{opacity:0;} }
  @keyframes carDrive {
    0%   { transform: translate(60vw,-50%) rotate(0); }
    30%  { transform: translate(-52%,-50%) rotate(0); }
    36%  { transform: translate(-64%,-50%) rotate(-5deg); }
    44%  { transform: translate(-54%,-50%) rotate(3deg); }
    100% { transform: translate(-80vw,-50%) rotate(0); }
  }
  @keyframes carVictim {
    0%,29% { transform: translate(-50%,-50%) scale(1) rotate(0); }
    38%    { transform: translate(-24%,-72%) scale(1.15) rotate(22deg); }
    58%    { transform: translate(-46%,-48%) rotate(-8deg); }
    100%   { transform: translate(-50%,-50%) rotate(0); }
  }
  @keyframes carPow {
    0%,29% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
    34%    { opacity: 1; transform: translate(-50%,-50%) scale(1.5); }
    55%    { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
    100%   { opacity: 0; transform: translate(-50%,-50%) scale(1); }
  }
  @keyframes carAmt {
    0%,30% { opacity: 0; transform: translate(-50%,-40%) scale(.4); }
    42%    { opacity: 1; transform: translate(-50%,-70%) scale(1.2); }
    80%    { opacity: 1; transform: translate(-50%,-120%) scale(1); }
    100%   { opacity: 0; transform: translate(-50%,-160%) scale(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .car-scene .car-road, .car-scene .car-veh, .car-scene .car-victim, .car-scene .car-pow { display: none; }
    .car-scene .car-amount { opacity: 1; animation: carAmtStill 2.4s ease-out forwards; }
    @keyframes carAmtStill { 0%,85%{opacity:1;} 100%{opacity:0;} }
  }

  /* ===== Reel Struggle fishing ===== */
  /* ---- Fishing v2: depth selector + reel-struggle ---- */
  .fish-depths { display:flex; gap:6px; margin:.1rem 0 .35rem; }
  .fish-dep { flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 2px;
    border-radius:10px; border:1px solid var(--panel-line); background:var(--panel); color:var(--ink);
    font-size:15px; cursor:pointer; transition:transform .08s,border-color .12s,box-shadow .12s; }
  .fish-dep span { font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
  .fish-dep em { font-size:9px; font-style:normal; color:var(--ink-soft); }
  .fish-dep:hover { transform:translateY(-2px); }
  .fish-dep.on { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold) inset,0 0 10px -2px var(--gold); }
  .fish-fight { position:absolute; inset:0; display:none; align-items:stretch; gap:8px;
    padding:8px 10px; z-index:5; pointer-events:none; }
  .fish-fight.on { display:flex; }
  .ff-track { position:relative; width:34px; border-radius:10px; overflow:hidden;
    background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.12)); border:1px solid var(--panel-line); }
  .ff-fish { position:absolute; left:50%; width:22px; height:14px; margin-left:-11px; margin-top:-7px;
    border-radius:7px; background:radial-gradient(circle at 40% 35%,#7fd0ff,var(--cool) 65%,#34497f);
    box-shadow:0 0 8px rgba(120,170,255,.7); transition:top .04s linear; }
  .ff-bar { position:absolute; left:2px; right:2px; border-radius:8px;
    background:linear-gradient(180deg,rgba(120,220,140,.30),rgba(90,200,120,.14));
    border:2px solid var(--good,#5fd07a); box-shadow:0 0 10px -2px var(--good,#5fd07a); transition:top .02s linear; }
  .ff-bar.hit { background:linear-gradient(180deg,rgba(255,220,80,.4),rgba(255,180,40,.2));
    border-color:var(--gold); box-shadow:0 0 14px -1px var(--gold); }
  .ff-meters { flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding-bottom:2px; }
  .ff-prog, .ff-tension { height:12px; border-radius:7px; overflow:hidden;
    background:rgba(0,0,0,.32); border:1px solid var(--panel-line); }
  .ff-prog i { display:block; height:100%; width:0; border-radius:7px;
    background:linear-gradient(90deg,var(--good,#5fd07a),#bff0c8); transition:width .04s linear; }
  .ff-tension i { display:block; height:100%; width:0; border-radius:7px;
    background:linear-gradient(90deg,#ffd24a,#ff9d1e); transition:width .04s linear; }
  .ff-tension.red i { background:linear-gradient(90deg,var(--red-1),var(--red-hi)); }
  .ff-tension.red { animation:ffredline .4s ease-in-out infinite; }
  @keyframes ffredline { 0%,100%{ box-shadow:0 0 0 rgba(226,59,46,0);} 50%{ box-shadow:0 0 12px rgba(226,59,46,.8);} }
  .thumb-fish.hook { background:radial-gradient(circle at 40% 28%,#ffe08a,var(--gold) 55%,#b8860b);
    box-shadow:inset 0 2px 4px rgba(255,255,255,.4),0 5px 0 #8a6a12,0 0 22px rgba(255,200,60,.7);
    animation:fishreelpulse .35s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .ff-tension.red, .thumb-fish.hook { animation:none; } }

  /* ===== BustPhone device ===== */
  .phone-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay, 1205); display: none; align-items: center; justify-content: center;
    background: rgba(6,6,10,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 14px; }
  .phone-backdrop.open { display: flex; animation: phFade .18s ease; }
  @keyframes phFade { from { opacity: 0; } to { opacity: 1; } }
  .phone-chassis { position: relative; width: 320px; height: 640px; max-height: 94vh; display: flex; flex-direction: column;
    background: #0b0b10; border-radius: 38px; padding: 10px 8px 8px; border: 1px solid #37343c;
    box-shadow: 0 30px 70px -18px rgba(0,0,0,.8), inset 0 0 0 2px #1c1a22; animation: phRise .22s cubic-bezier(.2,1.2,.3,1); }
  @keyframes phRise { from { transform: translateY(16px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
  .phone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 104px; height: 20px; border-radius: 0 0 14px 14px; background: #000; z-index: 3; }
  .phone-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 7px; color: #e8e6ef; font-size: .62rem; font-weight: 700; letter-spacing: .02em; }
  .phone-status .ps-carrier { opacity: .7; }
  .phone-status .ps-right b { color: #8ab4ff; }
  .phone-screen { flex: 1; min-height: 0; overflow: hidden; border-radius: 26px; position: relative; display: flex; flex-direction: column;
    background: radial-gradient(120% 80% at 50% 0%, var(--panel), var(--bg-2)); color: var(--ink); }
  .phone-navbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 4px; }
  .phone-homebtn { width: 110px; height: 5px; border-radius: 99px; border: none; background: #5b5f67; cursor: pointer; opacity: .8; }
  .phone-homebtn:active { opacity: 1; }
  .phone-closebtn { appearance: none; border: none; background: none; color: #9aa0a8; font: inherit; font-size: .6rem; font-weight: 700; cursor: pointer; letter-spacing: .04em; }
  .phone-closebtn:hover { color: var(--red-1); }

  .phone-home { flex: 1; display: flex; flex-direction: column; padding: 14px 14px 8px; overflow-y: auto; }
  .phone-hgreet { font-size: .82rem; font-weight: 800; color: var(--ink); margin: 2px 2px 14px; }
  .phone-hgreet small { display: block; font-weight: 600; font-size: .62rem; color: var(--ink-soft); margin-top: 2px; }
  .phone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; }
  .phone-appicon { appearance: none; border: none; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; font: inherit; }
  .phone-appicon .ai { width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 6px 14px -4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25); }
  .phone-appicon .al { font-size: .56rem; font-weight: 700; color: var(--ink); opacity: .9; }
  .phone-appicon:active .ai { transform: scale(.92); }
  .ic-tok .ai { background: linear-gradient(120deg,#feda75,#fa7e1e 30%,#d62976 60%,#962fbf 85%,#4f5bd5); color: #fff; }
  .ic-pay .ai { background: linear-gradient(160deg,#7cf25b,#1f8a4c); color: #06210f; }
  .ic-sig .ai { background: linear-gradient(160deg,#a7c0ff,#4f5bd5); color: #fff; }
  .ic-th  .ai { background: linear-gradient(160deg,#ff9de6,#d62976); color: #fff; }
  .phone-dock { margin-top: auto; text-align: center; font-size: .54rem; color: var(--ink-soft); opacity: .7; padding-top: 10px; }

  .phone-app { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
  .phone-appbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--panel-line); flex: none; }
  .phone-back { appearance: none; border: none; background: none; cursor: pointer; color: var(--ink); font-size: 1.3rem; line-height: 1; font-weight: 800; padding: 0 4px; }
  .phone-back.float { position: absolute; z-index: 9; top: 8px; left: 8px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); font-size: 1.6rem; }
  .phone-apptitle { font-size: .82rem; font-weight: 800; color: var(--ink); }
  .phone-appbody { flex: 1; overflow-y: auto; padding: 12px 14px 16px; }
  .phone-sub { font-size: .56rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 14px 2px 7px; }
  .phone-btn { appearance: none; cursor: pointer; font: inherit; font-weight: 800; font-size: .74rem; width: 100%; padding: 11px; border-radius: 12px; border: none; color: #14140f; background: linear-gradient(180deg,#ffd98a,var(--gold)); box-shadow: 0 4px 0 #7c560e; margin-bottom: 8px; }
  .phone-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #7c560e; }
  .phone-btn:disabled { filter: grayscale(.6) brightness(.85); cursor: not-allowed; box-shadow: none; transform: none; }
  .phone-btn.ghost { color: var(--ink); background: var(--panel); border: 1px solid var(--panel-line); box-shadow: none; }
  .phone-btn.cool { color: #fff; background: linear-gradient(180deg,#8aa4e0,var(--cool)); box-shadow: 0 4px 0 #2b3c6b; }
  .phone-crash { padding: 20px; color: var(--red-1); font-size: .74rem; }

  .pay-card { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; padding: 12px 14px; }
  .pay-row { display: flex; justify-content: space-between; align-items: center; font-size: .74rem; padding: 4px 0; }
  .pay-row + .pay-row { border-top: 1px dashed var(--panel-line); }
  .pay-row b { font-variant-numeric: tabular-nums; }

  .sig-card { text-align: center; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; padding: 18px 14px; }
  .sig-emoji { font-size: 2.6rem; }
  .sig-head { font-size: .9rem; font-weight: 800; margin: 6px 0 3px; color: var(--ink); }
  .sig-desc { font-size: .66rem; color: var(--ink-soft); }

  .th-dm { display: flex; gap: 10px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; padding: 12px; }
  .th-av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(127,127,127,.16); border: 1px solid var(--panel-line); }
  .th-body { flex: 1; min-width: 0; }
  .th-name { font-size: .72rem; font-weight: 800; color: var(--ink); }
  .th-msg { font-size: .7rem; color: var(--ink); line-height: 1.35; margin: 3px 0 6px; }
  .th-tag { display: inline-block; font-size: .6rem; font-weight: 800; color: var(--gold); }

  .phone-launch { appearance: none; cursor: pointer; font-size: 1.05rem; line-height: 1; height: 32px; min-width: 36px; border: 1px solid var(--steel-edge); border-radius: 9px; background: linear-gradient(180deg,var(--steel-hi),var(--steel-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
  .phone-launch.floating { position: fixed; right: 12px; bottom: calc(var(--taskbar-h, 46px) + 12px); z-index: var(--z-taskbar, 1000); height: 44px; min-width: 44px; border-radius: 50%; }

  /* make the reel feed fill the phone screen */
  .phone-app .reel-phone { width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; box-shadow: none; }

  @media (max-width: 480px) {
    .phone-backdrop { padding: 0; }
    .phone-chassis { width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; padding: 6px 4px 4px; border: none; }
    .phone-screen { border-radius: 16px; }
  }

  /* ===== Gurppa Metropolis (.mx-) ===== */
/* ---- Gurppa Metropolis (city sub-game) ---- */
.mx-wrap{display:flex;flex-direction:column;gap:9px;padding:10px 12px;height:100%;box-sizing:border-box;overflow-y:auto}
.mx-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mx-tier{font-size:13px;color:var(--ink)}
.mx-tier b{color:var(--gold)}
.mx-tierup{cursor:pointer;border:1px solid var(--gold);background:var(--panel);color:var(--gold);font-weight:800;border-radius:9px;padding:6px 10px;font-size:11px}
.mx-tierup small{opacity:.7;font-weight:600;margin-left:4px}
.mx-tierup:disabled{opacity:.4;cursor:not-allowed;border-color:var(--panel-line);color:var(--ink-soft)}
.mx-hud{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;color:var(--ink-soft);border-top:1px dashed var(--panel-line);border-bottom:1px dashed var(--panel-line);padding:6px 0}
.mx-hud b{color:var(--gold)}
.mx-boon{color:var(--good);font-weight:700}
.mx-pal{display:flex;flex-wrap:wrap;gap:6px}
.mx-pbtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 7px;border-radius:10px;background:var(--panel);border:1px solid var(--panel-line);cursor:pointer;min-width:60px;transition:transform .08s}
.mx-pbtn:hover{transform:translateY(-2px)}
.mx-pbtn.mx-on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset,0 0 10px -2px var(--gold)}
.mx-em{font-size:19px;line-height:1}
.mx-nm{font-size:9px;font-weight:700;text-align:center;color:var(--ink)}
.mx-cost{font-size:9px;color:var(--gold);font-weight:700}
.mx-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--ink-soft)}
.mx-bull{cursor:pointer;border:1px solid var(--panel-line);background:var(--panel);color:var(--ink);border-radius:8px;padding:5px 9px;font-weight:700;font-size:11px}
.mx-bull.mx-on{background:var(--red-2);color:#fff;border-color:var(--red-hi);box-shadow:0 0 10px -1px var(--red-hi)}
.mx-gridwrap{overflow:auto;max-height:46vh;border-radius:10px;border:1px solid var(--panel-line);padding:5px;background:rgba(0,0,0,.12)}
.mx-grid{display:grid;gap:4px;min-width:320px}
.mx-cell{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:8px;background:linear-gradient(160deg,#2a2a2a,#1c1c1c);border:1px solid #000;cursor:pointer;font-size:20px;overflow:hidden;transition:transform .07s,box-shadow .12s;color:var(--ink)}
.mx-cell:hover{transform:scale(1.05);box-shadow:0 0 8px -2px var(--gold)}
.mx-cell.mx-empty{color:var(--ink-soft);font-size:15px;opacity:.35}
.mx-cell.mx-empty:hover{opacity:.75;box-shadow:0 0 8px -2px var(--good)}
.mx-cell.mx-bmode{cursor:crosshair}
.mx-cell.mx-bmode:not(.mx-empty):hover{box-shadow:0 0 10px -1px var(--red-hi);border-color:var(--red-hi)}
.mx-z-road{background:linear-gradient(160deg,#3a3a3f,#232327)}
.mx-z-res{background:linear-gradient(160deg,#274a33,#16281d)}
.mx-z-com{background:linear-gradient(160deg,#2e3d5c,#161f30)}
.mx-z-ind{background:linear-gradient(160deg,#5c452e,#2c2016)}
.mx-z-civ{background:linear-gradient(160deg,#20503f,#0f2a20)}
.mx-z-pow{background:linear-gradient(160deg,#5c552e,#2c2810)}
.mx-z-land{background:linear-gradient(160deg,#4a2e5c,#241630);box-shadow:0 0 10px -2px var(--gold) inset}
.mx-l{position:absolute;bottom:1px;right:2px;font-size:8px;font-weight:800;color:var(--gold);text-shadow:0 1px 1px #000;background:rgba(0,0,0,.45);padding:0 3px;border-radius:5px;line-height:12px}
@keyframes mx-pulse{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.mx-cell.mx-just{animation:mx-pulse .3s ease}
.mx-dist{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:11px;color:var(--ink-soft)}
.mx-dpill{background:var(--panel);border:1px solid var(--gold);color:var(--gold);border-radius:99px;padding:2px 8px;font-weight:700;font-size:10px}
.mx-hint{opacity:.75}