:root{
    --bg-deep:#12161f;
    --accent:#ff9a3c;
    --accent-hot:#ffb86b;
    --rare:#7ad9ff;
    --legendary:#ffd23f;
    --ink:#eef1f6;
    --dim:#8b96a8;
    --danger:#ff5c6c;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{
    margin:0; padding:0; height:100%; overflow:hidden;
    background:var(--bg-deep);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:var(--ink); touch-action:none; user-select:none;
  }
  #wrap{
    position:relative; width:100vw; height:100vh;
    height:100dvh; /* dynamic viewport height — excludes mobile browser chrome */
    max-width:520px; margin:0 auto;
    display:flex; flex-direction:column; background:#000;
  }

  /* ---------- HUD ---------- */
  #hud{
    position:absolute; top:0; left:0; right:0; z-index:8;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:6px;
    padding:calc(14px + env(safe-area-inset-top)) 16px 24px;
    background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0));
    pointer-events:none;
  }
  .hud-chip{
    display:flex; align-items:center; gap:6px;
    background:rgba(0,0,0,.4);
    border:1px solid rgba(255,255,255,.14);
    padding:6px 10px; border-radius:999px;
    font-size:13px; font-weight:600; letter-spacing:.2px;
    backdrop-filter:blur(4px);
  }
  .rec-dot{
    width:8px; height:8px; border-radius:50%; background:var(--danger);
    box-shadow:0 0 8px var(--danger); animation:pulse 1.4s infinite;
  }
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

  /* ---------- CAMERA VIEW ---------- */
  #view{
    position:relative; flex:1; overflow:hidden; background:#0b0e14;
  }
  #world{
    position:absolute; top:0; bottom:0; left:0;
    will-change:transform;
  }
  /* room backdrop layers drawn in JS-sized world */
  .wall{
    position:absolute; top:0; bottom:26%; left:0; right:0;
    background:
      linear-gradient(180deg, #2a3140 0%, #232a37 70%, #1d2330 100%);
  }
  .floor{
    position:absolute; bottom:0; left:0; right:0; height:26%;
    background:linear-gradient(180deg, #37281a 0%, #241a10 100%);
    border-top:3px solid rgba(255,154,60,.12);
  }
  .furniture{position:absolute; pointer-events:none; opacity:.9;}

  /* camera vignette + fisheye hint */
  #view::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:4;
    box-shadow:inset 0 0 110px rgba(0,0,0,.65);
    border-radius:2px;
  }
  /* night-vision-ish scanline */
  #view::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:4;
    background:repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px);
  }

  /* crosshair / drop zone marker at screen center */
  #reticle{
    position:absolute; left:50%; z-index:5; pointer-events:none;
    width:74px; height:30px; margin-left:-37px;
    border:2px dashed rgba(255,154,60,.65);
    border-radius:50%;
    transition:border-color .15s, transform .15s;
  }
  #reticle.hot{border-color:var(--legendary); transform:scale(1.12);}
  #reticle .lbl{
    position:absolute; top:-20px; left:50%; transform:translateX(-50%);
    font-size:10px; font-weight:700; letter-spacing:1.5px; color:rgba(255,154,60,.8);
    white-space:nowrap;
  }

  /* compass strip showing camera direction */
  #compass{
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    width:60%; height:5px; border-radius:999px;
    background:rgba(255,255,255,.12); z-index:6;
  }
  #compass-dot{
    position:absolute; top:-3px; width:11px; height:11px; border-radius:50%;
    background:var(--accent); box-shadow:0 0 8px var(--accent);
    transform:translateX(-50%);
  }

  .cat{position:absolute; will-change:left,top; filter:drop-shadow(0 5px 6px rgba(0,0,0,.45));}
  .cat svg{width:100%; height:100%; display:block;}
  .cat.flip svg{transform:scaleX(-1);}
  .cat.eating{animation:munch .5s ease-in-out 2;}
  @keyframes munch{0%,100%{transform:translateY(0)}50%{transform:translateY(4px) scale(1.05,.95)}}
  .cat.fed-pop{animation:fedpop .45s ease-out forwards;}
  @keyframes fedpop{
    0%{transform:scale(1)} 40%{transform:scale(1.3) rotate(-5deg)} 100%{transform:scale(0); opacity:0}
  }
  .rarity-tag{
    position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
    padding:1px 6px; border-radius:999px; white-space:nowrap;
  }
  .r-rare .rarity-tag{background:rgba(122,217,255,.2); color:var(--rare); border:1px solid var(--rare);}
  .r-legendary .rarity-tag{background:rgba(255,210,63,.18); color:var(--legendary); border:1px solid var(--legendary);}
  .r-common .rarity-tag{display:none;}

  .heart{
    position:absolute; pointer-events:none; font-size:14px; z-index:5;
    animation:heartup 1s ease-out forwards;
  }
  @keyframes heartup{0%{transform:translateY(0); opacity:1} 100%{transform:translateY(-34px); opacity:0}}

  .treat{
    position:absolute; z-index:5;
    width:15px; height:15px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #ffcf8a, var(--accent) 60%, #b9631a 100%);
    box-shadow:0 3px 6px rgba(0,0,0,.4); pointer-events:none;
  }
  .treat-landed{
    position:absolute; width:12px; height:8px; border-radius:50%;
    background:radial-gradient(circle at 40% 30%, #ffcf8a, #c9761f);
    box-shadow:0 2px 3px rgba(0,0,0,.4);
  }

  .float-pts{
    position:absolute; pointer-events:none; z-index:6;
    font-weight:800; font-size:18px; color:var(--accent-hot);
    text-shadow:0 2px 4px rgba(0,0,0,.6);
    animation:floatUp .8s ease-out forwards;
  }
  .float-pts.bad{color:var(--danger); font-size:16px;}
  @keyframes floatUp{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-44px);opacity:0}}

  .bowl{
    position:absolute; pointer-events:none;
    width:56px; height:26px;
  }
  .bowl .basin{
    position:absolute; bottom:0; left:0; right:0; height:18px;
    background:linear-gradient(180deg,#5a90b8,#38607e);
    border-radius:8px 8px 14px 14px;
    box-shadow:0 3px 5px rgba(0,0,0,.4);
  }
  .bowl .water{
    position:absolute; top:0; left:5px; right:5px; height:12px;
    background:radial-gradient(ellipse at 45% 35%, #b8e4ff, #5aa8d8 70%);
    border-radius:50%;
    box-shadow:inset 0 2px 3px rgba(255,255,255,.4);
    animation:shimmer 3s ease-in-out infinite;
  }
  @keyframes shimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
  .splash{
    position:absolute; pointer-events:none; font-size:22px;
    animation:splashup .7s ease-out forwards;
  }
  @keyframes splashup{
    0%{transform:translateY(0) scale(.6); opacity:1}
    100%{transform:translateY(-30px) scale(1.4); opacity:0}
  }

  .cat.kitty .rarity-tag{
    display:block;
    background:rgba(255,92,108,.18); color:var(--danger); border:1px solid var(--danger);
  }
  .cat.kitty.grumpy{animation:grump .4s ease-in-out 2;}
  @keyframes grump{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}

  .cat.nugget .rarity-tag{
    display:block;
    background:rgba(180,132,224,.18); color:#b784e0; border:1px solid #b784e0;
  }
  .cat[class*="sp-"] .rarity-tag{display:block;}
  .cat.sp-shadow .rarity-tag{background:rgba(77,224,138,.15); color:#4de08a; border:1px solid #4de08a;}
  .cat.sp-shadow{opacity:.88;}
  .cat.sp-screamer .rarity-tag{background:rgba(122,184,255,.16); color:#7ab8ff; border:1px solid #7ab8ff;}
  .cat.sp-twin .rarity-tag{background:rgba(255,140,90,.16); color:#ff8c5a; border:1px solid #ff8c5a;}
  .cat.sp-snob .rarity-tag{background:rgba(240,237,230,.14); color:#f0ede6; border:1px solid #d9cfb8;}
  .cat.sp-zoomies .rarity-tag{background:rgba(255,210,63,.16); color:#ffd23f; border:1px solid #ffd23f;}
  .cat.sp-guard .rarity-tag{background:rgba(210,150,80,.18); color:#e0a35c; border:1px solid #e0a35c;}
  .cat.sp-forrest .rarity-tag{background:rgba(143,196,106,.16); color:#8fc46a; border:1px solid #8fc46a;}
  .cat.sp-forrest{transition:opacity .5s;}
  .cat.flopped svg{transform:scaleY(.55) translateY(24%);}
  .cat.flip.flopped svg{transform:scaleX(-1) scaleY(.55) translateY(24%);}
  .confused-mark{
    position:absolute; pointer-events:none; font-size:16px; z-index:5;
    animation:heartup 1s ease-out forwards;
  }

  /* ---------- leaderboard ---------- */
  #lb-section{
    width:100%; max-width:300px; margin-bottom:20px;
  }
  #lb-save-row{
    display:flex; gap:8px; margin-bottom:14px;
  }
  #lb-name, #rep-name{
    flex:1; min-width:0;
    font-family:inherit; font-size:14px; font-weight:600;
    padding:10px 14px; border-radius:12px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.07); color:var(--ink);
    outline:none;
  }
  #lb-name:focus, #rep-name:focus{border-color:var(--accent);}
  #lb-save-btn, #rep-save-btn{
    font-family:inherit; font-weight:800; font-size:13px;
    padding:10px 16px; border-radius:12px; border:none;
    background:rgba(255,154,60,.16); color:var(--accent);
    border:1px solid var(--accent); cursor:pointer;
  }
  #lb-save-btn:disabled, #rep-save-btn:disabled{opacity:.4;}
  #lb-list{
    display:flex; flex-direction:column; gap:5px;
    max-height:160px; overflow-y:auto;
    text-align:left;
  }
  .lb-row{
    display:flex; align-items:center; gap:10px;
    padding:7px 12px; border-radius:10px;
    background:rgba(255,255,255,.05);
    font-size:13px; font-weight:600;
  }
  .lb-row.me{background:rgba(255,154,60,.14); border:1px solid rgba(255,154,60,.4);}
  .lb-rank{width:22px; color:var(--dim); font-weight:800;}
  .lb-row:nth-child(1) .lb-rank{color:var(--legendary);}
  .lb-row:nth-child(2) .lb-rank{color:#cfd6e0;}
  .lb-row:nth-child(3) .lb-rank{color:#d18f5a;}
  .lb-nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .lb-sc{font-variant-numeric:tabular-nums;}
  .lb-lv{font-size:10px; color:var(--dim);}
  #lb-status{font-size:11px; color:var(--dim); margin-top:8px; min-height:14px;}

  /* ---------- Cat-alog ---------- */
  .catalog-btn{
    font-family:inherit; font-weight:700; font-size:14px;
    padding:11px 24px; border-radius:999px; cursor:pointer;
    background:rgba(255,255,255,.07); color:var(--ink);
    border:1px solid rgba(255,255,255,.2);
    margin-top:12px;
  }
  .catalog-btn:active{transform:scale(.96);}
  #catalog-overlay{justify-content:flex-start; overflow-y:auto; padding:24px 18px calc(24px + env(safe-area-inset-bottom));}
  #catalog-overlay h1{font-size:26px; margin-top:6px;}
  #catalog-sub{color:var(--dim); font-size:12px; margin:2px 0 6px; font-style:italic;}
  #catalog-progress{
    font-size:13px; font-weight:800; color:var(--accent);
    margin-bottom:16px; letter-spacing:.5px;
  }
  #catalog-grid{
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:10px; width:100%; max-width:380px;
  }
  .cata-card{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px; padding:12px 10px 10px;
    display:flex; flex-direction:column; align-items:center; text-align:center;
  }
  .cata-card.unlocked{border-color:rgba(255,154,60,.35);}
  .cata-art{width:76px; height:60px; margin-bottom:6px;}
  .cata-art svg{width:100%; height:100%;}
  .cata-card.locked .cata-art{filter:brightness(0) opacity(.45);}
  .cata-name{font-size:13px; font-weight:800;}
  .cata-breed{font-size:10px; color:var(--accent-hot); font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin:1px 0 4px;}
  .cata-desc{font-size:10.5px; color:var(--dim); line-height:1.45; min-height:44px;}
  .cata-meta{
    display:flex; gap:8px; margin-top:6px;
    font-size:10px; font-weight:800; color:var(--dim);
  }
  .cata-meta .pts{color:var(--legendary);}
  .cata-meta .fedn{color:var(--accent);}
  .cata-card.locked .cata-name, .cata-card.locked .cata-breed{color:var(--dim);}
  #catalog-close{margin-top:18px;}

  /* ---------- intro cutscene ---------- */
  #intro, #outro{
    position:absolute; inset:0; z-index:40;
    background:#0b0e14; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  #intro.hidden, #outro.hidden{display:none;}
  #outro .owner, #outro .suitcase{transform:translateX(46vw); transition:transform 2s ease-out;}
  #outro.arrived .owner, #outro.arrived .suitcase{transform:none;}

  /* ---------- cone of shame ---------- */
  #world.coned .cat::after{
    content:''; position:absolute; top:-8%; left:-16%;
    width:54%; height:74%;
    background:linear-gradient(90deg, rgba(238,240,255,.9), rgba(238,240,255,.18));
    clip-path:polygon(0 0, 100% 30%, 100% 70%, 0 100%);
    border-radius:10px; pointer-events:none;
  }
  #world.coned .cat.flip::after{left:auto; right:-16%; transform:scaleX(-1);}

  /* ---------- difficulty selector ---------- */
  #diff-row{display:flex; gap:8px; margin-bottom:16px; width:100%; max-width:340px;}
  .overlay button.diff-btn{
    flex:1 1 0; min-width:0;
    font-family:inherit; font-size:13px; font-weight:800;
    padding:12px 6px; border-radius:14px; cursor:pointer;
    background:rgba(255,255,255,.06); color:var(--dim);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:none;
    line-height:1.25;
  }
  .overlay button.diff-btn.sel{background:rgba(255,154,60,.16); color:var(--accent); border-color:var(--accent);}

  /* ---------- settings ---------- */
  .set-row{
    width:100%; max-width:280px; display:flex; align-items:center;
    justify-content:space-between; gap:14px; margin-bottom:18px;
    font-size:14px; font-weight:700;
  }
  .set-row input[type=range]{flex:1; accent-color:var(--accent);}
  .tog{
    width:52px; height:28px; border-radius:999px; position:relative; cursor:pointer;
    background:rgba(255,255,255,.12); transition:background .2s; flex:0 0 auto;
  }
  .tog::after{
    content:''; position:absolute; top:3px; left:3px; width:22px; height:22px;
    border-radius:50%; background:#cfd6e0; transition:left .2s;
  }
  .tog.on{background:var(--accent);}
  .tog.on::after{left:27px; background:#fff;}

  /* ---------- weekend report ---------- */
  #rep-grade{font-size:46px; font-weight:900; color:var(--legendary); line-height:1;}
  #rep-title{font-size:13px; color:var(--dim); font-weight:700; margin:4px 0 18px;}
  #rep-rows{width:100%; max-width:280px; display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
  .rep-row{
    display:flex; justify-content:space-between; font-size:13.5px; font-weight:600;
    padding:8px 12px; background:rgba(255,255,255,.05); border-radius:10px;
  }
  .rep-row b{font-variant-numeric:tabular-nums;}
  #stats-rows .rep-row{font-size:13px;}

  /* ---------- golden CatCam (Cat-apedia completion reward) ---------- */
  #cam-chip.golden{
    border-color:var(--legendary); color:var(--legendary);
    box-shadow:0 0 12px rgba(255,210,63,.35);
  }
  #reticle.golden{
    border-color:var(--legendary) !important;
    box-shadow:0 0 18px rgba(255,210,63,.45);
  }
  #reticle.golden .lbl{color:var(--legendary);}
  .iscene{
    position:absolute; inset:0; opacity:0; pointer-events:none;
    transition:opacity .6s ease;
  }
  .iscene.on{opacity:1; pointer-events:auto;}
  #skip-intro{
    position:absolute; top:16px; right:16px; z-index:45;
    font-family:inherit; font-size:12px; font-weight:700;
    padding:8px 16px; border-radius:999px;
    background:rgba(255,255,255,.08); color:var(--dim);
    border:1px solid rgba(255,255,255,.15); cursor:pointer;
  }
  #tap-hint{
    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
    font-size:11px; color:var(--dim); z-index:45; letter-spacing:.5px;
    animation:pulse 2s infinite;
  }

  /* scene 1: living room */
  .room-scene .iwall{position:absolute; inset:0 0 26% 0; background:linear-gradient(180deg,#2e3442,#232936);}
  .room-scene .ifloor{position:absolute; left:0; right:0; bottom:0; height:26%; background:linear-gradient(180deg,#4a4033,#2e2820);}
  .room-scene .iwin{position:absolute; left:8%; top:14%; width:110px; height:120px;
    background:linear-gradient(180deg,#8fc4ea,#c6e5f7); border:6px solid #171d29; border-radius:6px;}
  .room-scene .idoor{position:absolute; right:6%; bottom:26%; width:92px; height:210px;
    background:#5a4632; border:5px solid #3a2d1e; border-radius:4px 4px 0 0;
    transform-origin:right center; transition:transform 1s ease;}
  .room-scene .idoor .knob{position:absolute; left:10px; top:50%; width:9px; height:9px; border-radius:50%; background:#c9a86a;}
  .room-scene.door-shut .idoor{transform:perspective(500px) rotateY(0deg);}
  .room-scene .idoorframe{position:absolute; right:calc(6% - 6px); bottom:26%; width:104px; height:216px;
    border:6px solid #3a2d1e; border-bottom:none; border-radius:6px 6px 0 0;}

  .owner{position:absolute; bottom:24%; width:64px; height:150px; transition:transform 2.2s ease-in;}
  .owner svg{width:100%; height:100%;}
  #intro .leave .owner{transform:translateX(46vw);}
  .suitcase{position:absolute; bottom:24%; width:52px; height:64px; transition:transform 2.2s ease-in;}
  #intro .leave .suitcase{transform:translateX(46vw);}

  .icat{position:absolute; bottom:25%; width:92px; height:72px;}
  .icat svg{width:100%; height:100%;}
  .icat.ikitty{width:120px; height:86px;}
  .icat.tipped{animation:tipover 1s ease-in forwards;}
  @keyframes tipover{
    0%{transform:rotate(0)} 60%{transform:rotate(-78deg) translateY(6px)}
    75%{transform:rotate(-84deg) translateY(10px)} 100%{transform:rotate(-82deg) translateY(10px)}
  }

  .bub{
    position:absolute; max-width:210px;
    background:#fff; color:#1a1f28; font-size:13px; font-weight:600; line-height:1.35;
    padding:9px 13px; border-radius:14px;
    opacity:0; transform:scale(.6); transform-origin:bottom left;
    box-shadow:0 4px 14px rgba(0,0,0,.35);
    z-index:44;
  }
  .bub.show{animation:bubpop .3s ease-out forwards;}
  @keyframes bubpop{to{opacity:1; transform:scale(1);}}
  .bub::after{
    content:""; position:absolute; bottom:-8px; left:22px;
    border:9px solid transparent; border-top-color:#fff; border-bottom:none;
  }
  .bub.cat-bub{background:#ffe9c9;}
  .bub.cat-bub::after{border-top-color:#ffe9c9;}

  /* scene 2: the car */
  #is2{background:linear-gradient(180deg,#0d1526 0%,#16223a 55%,#1e2c48 100%);}
  #is2 .road{position:absolute; left:0; right:0; bottom:0; height:32%; background:#14161c;}
  #is2 .lane{position:absolute; bottom:15%; left:-20%; width:80px; height:7px; background:#e8dcc8; border-radius:4px;
    animation:lanego 1.1s linear infinite;}
  #is2 .lane.l2{animation-delay:.36s;}
  #is2 .lane.l3{animation-delay:.72s;}
  @keyframes lanego{from{left:110%}to{left:-20%}}
  #is2 .icar{position:absolute; left:50%; bottom:10%; transform:translateX(-50%); width:320px; height:190px;}
  #is2 .icar svg{width:100%; height:100%;}
  #is2 .phone-glow{position:absolute; left:50%; bottom:26%; transform:translateX(-24px);
    width:30px; height:22px; background:#cfe8ff; border-radius:3px;
    box-shadow:0 0 26px rgba(160,210,255,.8); animation:pulse 2.2s infinite;}

  /* scene 3: phone / catcam boot */
  #is3{background:#05070b; display:flex; align-items:center; justify-content:center;}
  #iphone{
    width:230px; height:440px; border-radius:34px;
    background:#10141c; border:5px solid #2b3342;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transform:scale(.4); opacity:0;
    transition:transform .9s cubic-bezier(.2,.8,.3,1), opacity .5s;
    position:relative; overflow:hidden;
  }
  #is3.on #iphone{transform:scale(1); opacity:1;}
  #iphone .notch{position:absolute; top:10px; width:70px; height:16px; border-radius:9px; background:#05070b;}
  #iphone .cam-ui{display:flex; flex-direction:column; align-items:center; gap:14px;}
  #iphone .cam-title{font-size:17px; font-weight:900; letter-spacing:2px;}
  #iphone .cam-status{font-size:12px; color:var(--dim); letter-spacing:1px;}
  #iphone .cam-status.live{color:var(--danger); font-weight:800;}
  #iphone .big-rec{width:14px; height:14px; border-radius:50%; background:var(--danger);
    box-shadow:0 0 14px var(--danger); animation:pulse 1.2s infinite;}
  #iphone .scan{position:absolute; inset:0;
    background:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);}

  /* ---------- knocked-over CatCam (Kitty Challenge) ---------- */
  /* transform driven per-frame from JS: escalating tilt + sway + re-bonk shakes */
  #paw-flash{
    position:absolute; top:40%; left:50%; transform:translate(-50%,-50%) scale(.3);
    font-size:64px; z-index:38; pointer-events:none; opacity:0;
  }
  #paw-flash.bonk{animation:pawflash .55s ease-out forwards;}
  @keyframes pawflash{
    0%{opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(-30deg)}
    40%{opacity:1; transform:translate(-50%,-50%) scale(1.5) rotate(8deg)}
    100%{opacity:0; transform:translate(-50%,-50%) scale(1.2) rotate(4deg)}
  }

  /* ---------- cat rivalries ---------- */
  .cat.fighting{animation:catfight .18s linear infinite;}
  @keyframes catfight{
    0%,100%{transform:translate(0,0) rotate(0)}
    25%{transform:translate(-3px,1px) rotate(-4deg)}
    50%{transform:translate(2px,-2px) rotate(3deg)}
    75%{transform:translate(-2px,-1px) rotate(-2deg)}
  }
  .fight-cloud{
    position:absolute; pointer-events:none; z-index:6;
    font-size:24px; animation:cloudshake .15s linear infinite;
  }
  @keyframes cloudshake{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(2px,-2px) scale(1.12)}
  }

  /* ---------- Kitty cam-knockover cutscene ---------- */
  #kc-frame{
    position:relative; width:290px; height:210px;
    background:linear-gradient(180deg,#2e3442 68%,#4a4033 68%);
    border:5px solid #2b3342; border-radius:14px; overflow:hidden;
    transition:transform .45s cubic-bezier(.3,1.6,.5,1);
    margin-bottom:18px;
  }
  #kc-frame.shake{animation:kcshake .3s linear 2;}
  @keyframes kcshake{
    0%,100%{transform:translate(0,0)} 25%{transform:translate(-5px,3px)}
    50%{transform:translate(5px,-3px)} 75%{transform:translate(-3px,2px)}
  }
  #kc-frame.tilt{transform:rotate(-27deg) scale(1.1);}
  #kc-rec{
    position:absolute; top:8px; left:10px; z-index:3;
    font-size:10px; font-weight:800; color:var(--danger); letter-spacing:1px;
  }
  #kc-kitty{
    position:absolute; bottom:8%; right:-140px; width:140px; height:100px;
    transition:right 1.3s ease-out;
  }
  #kc-kitty svg{width:100%; height:100%;}
  #kc-kitty.in{right:14px;}
  #kc-paw{
    position:absolute; bottom:52%; right:120px; font-size:30px;
    opacity:0; transform:rotate(-40deg) scale(.4);
  }
  #kc-paw.bonk{animation:pawbonk .4s ease-out forwards;}
  @keyframes pawbonk{
    0%{opacity:0; transform:rotate(-40deg) scale(.4) translateY(10px)}
    60%{opacity:1; transform:rotate(10deg) scale(1.3) translateY(-14px)}
    100%{opacity:1; transform:rotate(4deg) scale(1.1) translateY(-8px)}
  }
  #kc-caption{font-size:15px; font-weight:700; min-height:22px; text-align:center;}

  /* ---------- tip toast ---------- */
  #tip-toast{
    position:absolute; left:50%; transform:translateX(-50%) translateY(8px);
    bottom:186px; z-index:12; max-width:88%;
    background:rgba(12,16,24,.94); color:var(--ink);
    border:1px solid rgba(255,154,60,.5); border-radius:12px;
    padding:9px 14px; font-size:12.5px; font-weight:600; line-height:1.4;
    text-align:center; opacity:0; pointer-events:none;
    transition:opacity .25s, transform .25s;
  }
  #tip-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  #pause-note{font-size:11px; color:var(--dim); margin-top:14px; max-width:250px;}
  #share-btn{
    font-family:inherit; font-weight:800; font-size:13px;
    padding:10px 22px; border-radius:999px; cursor:pointer;
    background:rgba(122,217,255,.12); color:var(--rare);
    border:1px solid var(--rare); margin-bottom:16px;
  }
  #share-btn:active{transform:scale(.96);}

  @media (prefers-reduced-motion: reduce){
    .lane{animation:none !important;}
    .cat.fighting{animation:none !important;}
    .fight-cloud{animation:none !important;}
    #kc-frame.shake{animation:none !important;}
    .rec-dot{animation:none !important;}
  }

  #talk-wave{
    position:absolute; left:50%; z-index:5; pointer-events:none;
    width:20px; height:20px; margin-left:-10px;
    border:3px solid rgba(122,217,255,.8); border-radius:50%;
    opacity:0;
  }
  #talk-wave.go{animation:wave .9s ease-out;}
  @keyframes wave{
    0%{opacity:.9; transform:scale(.4)}
    100%{opacity:0; transform:scale(9)}
  }

  #combo-banner{
    position:absolute; top:70px; left:50%; transform:translateX(-50%);
    font-size:15px; font-weight:800; color:var(--legendary);
    text-shadow:0 2px 6px rgba(0,0,0,.7);
    opacity:0; z-index:7; pointer-events:none; transition:opacity .2s;
  }
  #combo-banner.show{opacity:1;}

  /* ---------- CONTROL DECK ---------- */
  #deck{
    position:relative; z-index:8;
    background:linear-gradient(180deg, #1a2029, #12161d);
    border-top:1px solid rgba(255,255,255,.08);
    padding:10px 14px calc(12px + env(safe-area-inset-bottom));
  }
  #goal-track{margin-bottom:10px;}
  #goal-bar-bg{height:7px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden;}
  #goal-bar-fill{
    height:100%; width:0%; border-radius:999px;
    background:linear-gradient(90deg, var(--accent), var(--legendary));
    transition:width .25s ease;
  }
  #goal-meta{
    display:flex; justify-content:space-between; margin-top:5px;
    font-size:11px; color:var(--dim); font-weight:600;
  }
  #controls{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .pad-btn{
    flex:0 0 auto;
    width:62px; height:62px; border-radius:18px;
    background:linear-gradient(180deg, #2b3342, #202632);
    border:1px solid rgba(255,255,255,.12);
    color:var(--ink); font-size:24px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 10px rgba(0,0,0,.35);
    cursor:pointer;
  }
  .pad-btn:active, .pad-btn.pressed{
    background:linear-gradient(180deg, #232a37, #1a1f29);
    transform:translateY(1px);
  }
  #center-btns{flex:1; display:flex; gap:10px; justify-content:center;}
  #fire-btn{
    width:84px; height:84px; border-radius:50%;
    background:radial-gradient(circle at 35% 28%, var(--accent-hot), #f07f1e 55%, #b45a10);
    border:3px solid rgba(255,255,255,.25);
    color:#241302; font-size:12px; font-weight:900; letter-spacing:1px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    box-shadow:0 6px 20px rgba(255,154,60,.4), inset 0 -4px 8px rgba(0,0,0,.2);
    cursor:pointer;
  }
  #fire-btn .big{font-size:26px; line-height:1;}
  #fire-btn:active{transform:scale(.95);}
  #fire-btn.empty{filter:grayscale(.8) brightness(.6);}
  #talk-btn{
    width:62px; height:62px; border-radius:50%;
    background:radial-gradient(circle at 35% 28%, #9fe3ff, #47a8d8 60%, #2b7aa6);
    border:2px solid rgba(255,255,255,.25);
    color:#06222f; font-size:22px; font-weight:900;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    box-shadow:0 5px 14px rgba(122,217,255,.35), inset 0 -3px 6px rgba(0,0,0,.2);
    cursor:pointer; position:relative;
  }
  #talk-btn:active{transform:scale(.95);}
  #talk-btn.cooldown{filter:grayscale(.7) brightness(.55);}
  #talk-cd-ring{
    position:absolute; inset:-2px; border-radius:50%;
    pointer-events:none;
  }
  .btn-lbl{font-size:8px; font-weight:900; letter-spacing:1px; margin-top:1px;}

  /* ---------- OVERLAYS ---------- */
  .overlay{
    position:absolute; inset:0; z-index:30;
    display:flex; flex-direction:column; align-items:center;
    /* center vertically ONLY when content fits; otherwise pin to top so the
       whole menu can be scrolled and nothing is clipped off either edge */
    justify-content:flex-start;
    background:rgba(8,11,16,.93);
    /* honor iOS safe areas: notch at top, home-bar at bottom */
    padding-top:calc(24px + env(safe-area-inset-top));
    padding-left:24px; padding-right:24px;
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
    text-align:center;
    backdrop-filter:blur(3px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* an inner wrapper lets short menus still sit centered while tall ones scroll */
  .overlay > *{ flex-shrink:0; }
  .overlay::before{ content:''; margin-top:auto; }
  .overlay::after{ content:''; margin-bottom:auto; }
  .overlay.hidden{display:none;}
  .overlay h1{font-size:28px; margin:0 0 8px; letter-spacing:-.5px;}
  .overlay p{color:var(--dim); margin:0 0 16px; font-size:14px; line-height:1.5; max-width:300px;}
  .stat-row{display:flex; gap:24px; margin-bottom:20px;}
  .stat{display:flex; flex-direction:column; align-items:center;}
  .stat b{font-size:22px;}
  .stat span{font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:1px;}
  .overlay button{
    font-family:inherit; font-weight:700; font-size:16px;
    padding:13px 34px; border-radius:999px; border:none;
    background:linear-gradient(135deg, var(--accent), #ff7a3c);
    color:#1a1206; cursor:pointer;
    box-shadow:0 6px 20px rgba(255,154,60,.35);
    flex:0 0 auto;
  }
  .overlay button:active{transform:scale(.96);}
  .catalog-btn{flex:0 0 auto;}
  .howto{
    display:flex; flex-direction:column; gap:7px; margin-bottom:16px;
    font-size:13px; color:var(--ink); text-align:left;
  }
  .howto span{display:flex; align-items:center; gap:10px;}
  .k{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:30px; height:30px; padding:0 8px; border-radius:9px;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
    font-weight:800; font-size:13px;
  }
  .legend{display:flex; gap:14px; margin-top:20px; font-size:12px; color:var(--dim);}
  .legend span{display:flex; align-items:center; gap:6px;}
  .dot{width:10px; height:10px; border-radius:50%;}
  .dot.c{background:#fff; opacity:.5}
  .dot.r{background:var(--rare); box-shadow:0 0 8px var(--rare);}
  .dot.l{background:var(--legendary); box-shadow:0 0 8px var(--legendary);}