/* ============================================
   FEED PROMPTY — Full Stylesheet
   Solo + VS Mode
   ============================================ */
:root {
  --bg:#f5f5f5;--bg-card:#ffffff;--surface:#e8e8e8;--border:#d0d0d0;
  --text:#1a1a2e;--text-mid:#555570;--text-dim:#8888a0;
  --green:#22c55e;--green-glow:rgba(34,197,94,.25);--yellow:#eab308;
  --pink:#f97316;--red:#ef4444;--cyan:#06b6d4;--orange:#f97316;--purple:#a855f7;
  --m-body:#bab2c8;--m-spot:#9e96ad;--m-ear:#3d5c5c;--m-leg:#5a6e6e;
  --m-stripe:#3d5050;--m-claw:#4a6060;--m-eye:#1a1a2e;--m-blush:#e8a0b8;--m-mouth:#2a2040;
  --ms-body:#8fbf9a;--ms-spot:#6ea87a;--ms-ear:#3a6648;--ms-leg:#4a7a56;
  --ms-stripe:#356645;--ms-claw:#3a6648;
  --mh-body:#d4b8e8;--mh-spot:#c0a0d6;
  --mg-body:#ffe088;--mg-spot:#f0c860;--mg-ear:#c89a30;
  /* Purple monster (opponent) */
  --mp-body:#b8a0d8;--mp-spot:#a088c4;--mp-ear:#6a4e8a;--mp-leg:#7a5e9a;
  --mp-stripe:#5a4278;--mp-claw:#6a4e8a;--mp-blush:#d480a0;--mp-mouth:#2a1840;
  --mp-belly:#e0c490;
  --radius:12px;--t:.3s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.hidden{display:none!important}
.conn-banner{position:fixed;top:0;left:0;right:0;z-index:9999;background:#ef4444;color:#fff;text-align:center;padding:8px;font-family:'Nunito',sans-serif;font-weight:700;font-size:.85rem;letter-spacing:.5px}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;z-index:0}
#app{max-width:960px;margin:0 auto;min-height:100dvh;position:relative;z-index:1}
.screen{display:none;flex-direction:column;min-height:100dvh;padding:14px 24px env(safe-area-inset-bottom,14px);overflow-y:auto}
.screen.active{display:flex}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--radius);font-family:'Press Start 2P',monospace;cursor:pointer;transition:all var(--t);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn-start{background:var(--green);color:#fff;padding:14px 28px;font-size:.6rem;letter-spacing:1px;box-shadow:0 4px 0 #16a34a,0 6px 20px var(--green-glow);position:relative;top:0}
.btn-start:active{top:4px;box-shadow:0 0 0 #16a34a,0 2px 10px var(--green-glow)}
.btn-vs{background:var(--pink);color:#fff;padding:14px 28px;font-size:.6rem;letter-spacing:1px;box-shadow:0 4px 0 #c0306a,0 6px 20px rgba(255,92,175,.3);position:relative;top:0}
.btn-vs:active{top:4px;box-shadow:0 0 0 #c0306a}
.btn-submit{background:var(--green);color:#fff;padding:12px 24px;font-size:.55rem;letter-spacing:1px;box-shadow:0 3px 0 #16a34a;position:relative;top:0}
.btn-submit:active{top:3px;box-shadow:none}
.btn-submit:disabled{opacity:.4;pointer-events:none}
.btn-attack{background:var(--pink) !important;box-shadow:0 3px 0 #c0306a !important}
.btn-link{background:none;border:none;color:var(--text-mid);font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ============================================
   LANDING
   ============================================ */
.landing-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.game-title{font-family:'Press Start 2P',monospace;font-size:1.2rem;line-height:1.9;background:linear-gradient(180deg,#0891b2,#16a34a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 6px rgba(8,145,178,.2))}
.subtitle{font-family:'Press Start 2P',monospace;font-size:.4rem;color:var(--text-mid);letter-spacing:3px;margin-top:4px}
.flavour-text{font-size:.9rem;line-height:1.6;color:var(--text-mid);max-width:340px}
.flavour-text em{color:var(--pink);font-style:normal;font-weight:800}
.mode-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.how-panel{text-align:left;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-top:2px;font-size:.82rem;line-height:1.6;color:var(--text-mid);max-width:360px;animation:slideUp .25s ease;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.how-panel.hidden{display:none}
.how-panel p{margin:5px 0}
.how-panel strong{color:var(--text);font-weight:700}
.how-example{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin:8px 0}
.how-example-label{font-family:'Press Start 2P',monospace;font-size:.28rem;color:var(--orange);letter-spacing:1px;margin-bottom:2px!important}
.how-example-label.how-example-good{color:#16a34a;margin-top:8px!important}
.how-example-vague{font-size:.78rem;color:var(--text-mid);font-style:italic;line-height:1.4;margin:2px 0!important}
.how-example-improved{font-size:.78rem;color:var(--text);line-height:1.5;margin:2px 0!important;font-weight:600}
.how-tag{display:inline-block;font-family:'Press Start 2P',monospace;font-size:.22rem;color:#fff;background:var(--cyan);padding:2px 4px;border-radius:3px;vertical-align:middle;margin:0 1px;letter-spacing:.5px}
.how-pro-tip{font-size:.8rem;color:#0891b2;font-weight:700;line-height:1.5;margin-top:6px!important}
.costar-grid{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:4px 8px;margin:8px 0;align-items:center}
.cl{font-family:'Press Start 2P',monospace;font-size:.45rem;color:#fff;background:var(--cyan);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:5px}

/* ============================================
   MONSTER (PNG-based for both)
   ============================================ */
.monster-stage{position:relative;display:flex;align-items:center;justify-content:center;height:160px;flex-shrink:0}
.monster{position:relative;width:130px;height:170px;transition:filter .4s}
.monster-img{width:100%;height:100%;object-fit:contain;transition:filter .35s,transform .35s}

/* Monster 1 (Player 1) PNG states */
.monster.idle .monster-img{filter:none}
.monster.hit .monster-img{filter:brightness(1.4) saturate(0.5) hue-rotate(-30deg);transform:scale(.92)}
.monster.sick .monster-img{filter:saturate(0.4) brightness(0.85) hue-rotate(40deg)}
.monster.happy .monster-img{filter:brightness(1.15) saturate(1.2)}
.monster.great .monster-img{filter:brightness(1.25) saturate(1.4) drop-shadow(0 0 8px rgba(57,255,110,.4))}
.monster.chewing .monster-img{animation:imgChew .3s ease 2}
.monster.mouth-open .monster-img{transform:scale(1.05)}
.monster.woozy .monster-img{filter:saturate(0.5) brightness(0.8) hue-rotate(60deg)}
.monster.end-happy .monster-img{filter:brightness(1.15) saturate(1.2)}
.monster.end-ok .monster-img{filter:none}
.monster.end-sad .monster-img{filter:saturate(0.4) brightness(0.8) hue-rotate(40deg)}

/* Monster states (shared animations) */
.monster.idle{animation:breathe 2.5s ease-in-out infinite}
.monster.woozy{animation:sway 3s ease-in-out infinite}
.monster.happy{animation:bounce .5s ease}
.monster.great{animation:bounce .5s ease}
.monster.sick{animation:shudder .4s ease}
.monster.hit{animation:shudder .3s ease}
.monster.end-happy{animation:breathe 2.5s ease-in-out infinite}
.monster.end-ok{animation:breathe 2.5s ease-in-out infinite}
.monster.end-sad{animation:sway 3s ease-in-out infinite}

/* Purple monster (opponent) overrides */
.monster-purple.idle .monster-img{filter:none}
.monster-purple.hit .monster-img{filter:brightness(1.4) saturate(0.5) hue-rotate(-30deg);transform:scale(.92)}
.monster-purple.sick .monster-img{filter:saturate(0.4) brightness(0.85) hue-rotate(40deg)}
.monster-purple.happy .monster-img{filter:brightness(1.15) saturate(1.2)}
.monster-purple.great .monster-img{filter:brightness(1.25) saturate(1.4) drop-shadow(0 0 8px rgba(180,110,255,.4))}
.monster-purple.chewing .monster-img{animation:imgChew .3s ease 2}
.monster-purple.mouth-open .monster-img{transform:scale(1.05)}

@keyframes imgChew{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.92)}}

/* ============================================
   HP BAR (shared)
   ============================================ */
.hp-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.hp-row-end{width:100%;max-width:300px}
.hp-label{font-family:'Press Start 2P',monospace;font-size:.4rem;color:var(--red);letter-spacing:1px;flex-shrink:0}
.hp-track{flex:1;height:14px;background:var(--surface);border-radius:8px;overflow:hidden;border:1px solid var(--border);position:relative}
.hp-bar{height:100%;border-radius:7px;transition:width .5s cubic-bezier(.4,0,.2,1),background .4s}
.hp-bar.hp-low{background:linear-gradient(90deg,var(--red),var(--orange))}
.hp-bar.hp-mid{background:linear-gradient(90deg,var(--orange),var(--yellow))}
.hp-bar.hp-high{background:linear-gradient(90deg,var(--yellow),var(--green))}
.hp-bar.hp-full{background:linear-gradient(90deg,var(--green),var(--cyan));box-shadow:0 0 12px var(--green-glow)}
.hp-num{font-family:'Press Start 2P',monospace;font-size:.5rem;color:var(--text);min-width:28px;text-align:right}

.hp-change{position:absolute;top:-4px;right:10px;font-family:'Press Start 2P',monospace;font-size:.55rem;pointer-events:none;z-index:25;white-space:nowrap;background:var(--bg-card);padding:2px 6px;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.hp-change.hidden{display:none}.hp-change.show{animation:hpPop .8s ease forwards}
.hp-change.hp-up{color:var(--green)}.hp-change.hp-down{color:var(--red)}

/* ============================================
   SOLO-SPECIFIC
   ============================================ */
.projectile{position:absolute;bottom:50%;left:15%;transform:translateX(0);padding:4px 10px;background:var(--bg-card);border:2px solid var(--border);border-radius:8px;font-size:.65rem;color:var(--text-mid);max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:20;pointer-events:none;font-family:'Nunito',sans-serif;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.projectile.hidden{display:none}.projectile.fly{animation:flyToMouth .5s cubic-bezier(.3,.1,.2,1) forwards}
.react-text{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-family:'Press Start 2P',monospace;font-size:.5rem;padding:5px 12px;border-radius:10px;z-index:25;pointer-events:none;white-space:nowrap;max-width:90%;text-align:center}
.react-text.hidden{display:none}.react-text.show{animation:popFloat 1s ease forwards}
.react-text.yum{color:#16a34a;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3)}
.react-text.yum-great{color:#ca8a04;background:rgba(234,179,8,.1);border:1px solid rgba(234,179,8,.3)}
.react-text.bleh{color:var(--pink);background:rgba(236,72,153,.08);border:1px solid rgba(236,72,153,.25);white-space:normal;font-size:.42rem;line-height:1.6}
.barf-zone{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);width:80px;height:50px;pointer-events:none;z-index:15}
.barf-drop{position:absolute;top:0;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;animation:barfFall .6s ease-in forwards}
.feedback{text-align:center;font-family:'Press Start 2P',monospace;font-size:.32rem;padding:2px 0;pointer-events:none;white-space:nowrap;line-height:1.6;height:28px;display:flex;align-items:center;justify-content:center;width:100%}
.feedback.fb-hidden{visibility:hidden}.feedback.show{animation:fadeIn .2s ease forwards}
.feedback.fb-great{color:#ca8a04}
.feedback.fb-good{color:#16a34a}
.feedback.fb-bad{color:var(--pink)}
.fb-sub{display:block;font-family:'Nunito',sans-serif;font-size:.68rem;font-weight:600;margin-top:2px;opacity:.7}
.game-hud{display:flex;justify-content:space-between;padding-bottom:4px}
.hud-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.hud-label{font-family:'Press Start 2P',monospace;font-size:.35rem;color:var(--text-dim);letter-spacing:1px}
.hud-value{font-family:'Press Start 2P',monospace;font-size:1rem;color:var(--text)}
.hud-timer .hud-value{color:#0891b2}
.hud-timer.urgent .hud-value{color:var(--red);animation:pulse .5s ease infinite}
.timer-bar-wrap{width:100%;height:4px;background:var(--surface);border-radius:4px;overflow:hidden;margin-bottom:6px}
.timer-bar{height:100%;width:100%;border-radius:4px;background:linear-gradient(90deg,#0891b2,#16a34a);transition:width 1s linear,background .5s}
.timer-bar.urgent{background:linear-gradient(90deg,var(--red),var(--orange))}
.bad-prompt-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;border-left:3px solid var(--orange);box-shadow:0 2px 8px rgba(0,0,0,.05)}
.bad-label{font-family:'Press Start 2P',monospace;font-size:.35rem;color:var(--orange);letter-spacing:1px}
.bad-prompt-text{font-size:.85rem;color:var(--text);margin-top:4px;line-height:1.35;font-style:italic;font-weight:600}
.input-area{margin-top:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;transition:border-color var(--t);position:relative;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.input-area:focus-within{border-color:rgba(34,197,94,.5)}
.input-label{font-size:.72rem;color:var(--text-mid);font-weight:700;display:block;margin-bottom:4px}
#prompt-input,#vs-input{width:100%;background:transparent;border:none;outline:none;color:var(--text);font-family:'Nunito',sans-serif;font-size:.9rem;line-height:1.45;resize:none;-webkit-appearance:none}
#prompt-input::placeholder,#vs-input::placeholder{color:var(--text-dim)}
.input-footer{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.char-count{font-family:'Press Start 2P',monospace;font-size:.3rem;color:var(--text-dim)}

/* ============================================
   SOLO BOSS BATTLE ARENA
   ============================================ */
.boss-hp-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.boss-hp-label{font-family:'Press Start 2P',monospace;font-size:.4rem;color:var(--red);letter-spacing:1px;flex-shrink:0;white-space:nowrap}
.solo-arena{position:relative;display:flex;align-items:center;justify-content:flex-start;height:200px;flex-shrink:0;overflow:hidden;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.03) 100%);border-radius:var(--radius);margin:4px 0}
.solo-prompty-wrap{position:absolute;left:8%;bottom:10px;z-index:10}
.solo-prompty-wrap .monster{width:110px;height:140px}
.chomp-overlay{position:absolute;top:-10px;left:-15px;width:140px;height:160px;object-fit:contain;z-index:15;animation:chompAppear .3s ease forwards;pointer-events:none}
.chomp-overlay.hidden{display:none}
@keyframes chompAppear{0%{transform:scale(0.5);opacity:0}50%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.solo-boss-wrap{position:absolute;bottom:-15px;z-index:5;transition:right .25s linear}
.solo-boss-wrap.boss-dead{opacity:0;transition:opacity .6s ease .3s}
.boss-monster{width:170px;height:200px;position:relative}
.boss-img{width:100%;height:100%;object-fit:contain;transition:filter .3s,transform .3s}
.boss-monster.boss-hit .boss-img{filter:brightness(2) saturate(0.3);transform:scale(.92)}
.boss-monster.boss-dying .boss-img{filter:saturate(0) brightness(0.5);animation:bossDeath 1.2s ease forwards}

/* Sludge walk — uneven lurching gait */
.boss-monster.sludge-walk .boss-img{animation:sludgeWalk 1.6s ease-in-out infinite}
@keyframes sludgeWalk{
  0%{transform:translateY(0) scaleY(1) scaleX(1) rotate(0deg)}
  12%{transform:translateY(-6px) scaleY(1.06) scaleX(.95) rotate(-2deg)}
  25%{transform:translateY(-2px) scaleY(.94) scaleX(1.04) rotate(1deg)}
  38%{transform:translateY(2px) scaleY(1.02) scaleX(.98) rotate(-1.5deg)}
  50%{transform:translateY(0) scaleY(.96) scaleX(1.03) rotate(0deg)}
  62%{transform:translateY(-8px) scaleY(1.08) scaleX(.93) rotate(2deg)}
  75%{transform:translateY(-1px) scaleY(.93) scaleX(1.05) rotate(-1deg)}
  88%{transform:translateY(3px) scaleY(1.03) scaleX(.97) rotate(1.5deg)}
  100%{transform:translateY(0) scaleY(1) scaleX(1) rotate(0deg)}
}

/* Boss death animation */
@keyframes bossDeath{
  0%{transform:scale(1);opacity:1;filter:saturate(0) brightness(0.5)}
  40%{transform:scale(1.1);filter:saturate(0) brightness(1.5)}
  100%{transform:scale(0.3) translateY(30px);opacity:0;filter:saturate(0) brightness(2)}
}

/* Soul fly-out */
.boss-soul{position:fixed;z-index:100;pointer-events:none;width:80px;height:80px}
.boss-soul.hidden{display:none}
.boss-soul.soul-fly{display:block;animation:soulFlyOut 2.5s cubic-bezier(.2,.8,.3,1) forwards}
.soul-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 12px rgba(180,130,255,.6))}
@keyframes soulFlyOut{
  0%{transform:translateY(0) scale(.5);opacity:0}
  15%{opacity:1;transform:translateY(-10px) scale(1.2)}
  50%{transform:translateY(-120px) scale(1) rotate(8deg);opacity:1}
  100%{transform:translateY(-300px) scale(.3) rotate(-5deg);opacity:0}
}

/* Boss hit text reuse */
.solo-boss-wrap .vs-hit{top:-10px;left:50%}

/* Orange sludge trail — matches boss monster drips */
.sludge-blob{position:absolute;border-radius:50% 45% 50% 40%;background:radial-gradient(ellipse at 40% 40%, rgba(243,156,107,.55), rgba(228,120,68,.4));box-shadow:0 1px 2px rgba(180,80,30,.15);z-index:1;pointer-events:none;animation:sludgeFade 8s ease forwards}
.sludge-drip{border-radius:50%;background:rgba(238,140,90,.45);box-shadow:none}
@keyframes sludgeFade{
  0%{opacity:.6;transform:scaleY(1)}
  30%{opacity:.45;transform:scaleY(.85)}
  100%{opacity:0;transform:scaleY(.6)}
}

/* ============================================
   SOLO END
   ============================================ */
.end-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;position:relative}
.end-rating{font-family:'Press Start 2P',monospace;font-size:.65rem;line-height:2;letter-spacing:1px}
.end-rating.r-master{color:#ca8a04}.end-rating.r-decent{color:#16a34a}.end-rating.r-needs{color:var(--pink)}
.end-stats{display:flex;gap:8px}
.stat-pill{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:8px 14px;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:60px;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.stat-label{font-family:'Press Start 2P',monospace;font-size:.25rem;color:var(--text-dim);letter-spacing:1px}
.stat-val{font-family:'Press Start 2P',monospace;font-size:.65rem;color:var(--text)}
.stat-good{color:#16a34a}.stat-bad{color:var(--pink)}
.end-message{font-size:.82rem;color:var(--text-mid);max-width:320px;line-height:1.5}
.confetti-box{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:0}
.c-piece{position:absolute;top:-16px;animation:confettiFall 2.5s ease-in forwards}

/* ============================================
   VS LOBBY / WAIT
   ============================================ */
.lobby-content,.wait-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.lobby-title{font-family:'Press Start 2P',monospace;font-size:1rem;color:var(--pink)}
.lobby-sub{font-size:.9rem;color:var(--text-mid);max-width:300px}
.lobby-sub-wide{max-width:520px}
.lobby-buttons{display:flex;flex-direction:column;align-items:center;gap:14px}
.lobby-or{font-size:.75rem;color:var(--text-dim);font-weight:600}
.join-row{display:flex;gap:8px;align-items:center}
.join-input{width:110px;background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);padding:12px 14px;color:var(--text);font-family:'Press Start 2P',monospace;font-size:.7rem;text-align:center;letter-spacing:4px;text-transform:uppercase;outline:none;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.join-input:focus{border-color:var(--pink)}
.join-input::placeholder{color:var(--text-dim);letter-spacing:2px;font-size:.5rem}
.lobby-error{color:var(--red);font-family:'Press Start 2P',monospace;font-size:.35rem;margin-top:4px}
.lobby-error.hidden{display:none}
.room-code{font-family:'Press Start 2P',monospace;font-size:2rem;letter-spacing:12px;color:var(--orange);background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);padding:16px 28px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.wait-dots{display:flex;gap:6px;font-family:'Press Start 2P',monospace;font-size:1.2rem;color:var(--text-dim)}
.wait-dots span{animation:dotPulse 1.4s ease infinite}
.wait-dots span:nth-child(2){animation-delay:.2s}
.wait-dots span:nth-child(3){animation-delay:.4s}

/* ============================================
   VS NAME ENTRY
   ============================================ */
.name-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.name-input{width:220px;background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);padding:14px 18px;color:var(--text);font-family:'Nunito',sans-serif;font-size:1.1rem;font-weight:700;text-align:center;outline:none;transition:border-color var(--t);box-shadow:0 2px 6px rgba(0,0,0,.05)}
.name-input:focus{border-color:var(--cyan)}
.name-input::placeholder{color:var(--text-dim);font-weight:500}
.name-monster-preview{width:100px;height:120px;display:flex;align-items:center;justify-content:center}
.name-monster-preview img{width:100%;height:100%;object-fit:contain}

/* ============================================
   VS COUNTDOWN
   ============================================ */
.countdown-content{flex:1;display:flex;align-items:center;justify-content:center}
.countdown-num{font-family:'Press Start 2P',monospace;font-size:4rem;color:var(--pink);animation:countPulse .8s ease infinite}

/* ============================================
   VS ARENA
   ============================================ */
.vs-hud{display:flex;justify-content:center;padding-bottom:4px}
.vs-timer-val{font-family:'Press Start 2P',monospace;font-size:1.1rem;color:#0891b2}
.vs-timer-val.urgent{color:var(--red);animation:pulse .5s ease infinite}
.vs-arena{display:flex;align-items:stretch;gap:0;margin:4px 0}
.vs-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.vs-side-enemy{opacity:.85}
.vs-center{display:flex;align-items:center;justify-content:center;padding:0 6px}
.vs-vs-text{font-family:'Press Start 2P',monospace;font-size:.6rem;color:var(--pink);writing-mode:vertical-lr;letter-spacing:4px}
.vs-name{font-family:'Press Start 2P',monospace;font-size:.45rem;letter-spacing:1px}
.vs-name-you{color:#0891b2}.vs-name-opponent{color:var(--pink)}
.vs-hp-wrap{display:flex;align-items:center;gap:4px;width:100%}
.vs-hp-wrap .hp-track{height:10px}
.vs-hp-wrap .hp-num{font-size:.4rem;min-width:22px}
.vs-monster-wrap{position:relative;height:110px;display:flex;align-items:center;justify-content:center}
.vs-monster-wrap .monster{width:80px;height:105px}
.vs-hit{position:absolute;top:-4px;left:50%;transform:translateX(-50%);font-family:'Press Start 2P',monospace;font-size:.5rem;color:var(--red);pointer-events:none;z-index:20;white-space:nowrap;background:var(--bg-card);padding:2px 8px;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.vs-hit.hidden{display:none}
.vs-hit.show{animation:hpPop .9s ease forwards}

/* ============================================
   MUSIC TOGGLE BUTTON
   ============================================ */
.btn-music{position:absolute;top:10px;right:10px;z-index:50;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:1.1rem;cursor:pointer;line-height:1;transition:all var(--t);-webkit-tap-highlight-color:transparent;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.btn-music:hover{border-color:var(--cyan)}
.btn-music.muted{opacity:.5}

/* ============================================
   INK ATTACK ROW & SPLAT OVERLAY
   ============================================ */
.ink-attack-row{display:flex;align-items:center;gap:10px;margin:10px auto 0;padding:10px 14px;background:var(--bg-card);border:2px solid var(--yellow);border-radius:var(--radius);box-shadow:0 0 18px rgba(234,179,8,.35);animation:inkRowGlow 2s ease-in-out infinite;max-width:700px;width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s}
.ink-attack-row:hover{transform:scale(1.02)}
.ink-attack-row:active{transform:scale(0.98)}
.ink-attack-row.hidden{display:none}
.ink-attack-row.used{opacity:.3;pointer-events:none;animation:none;border-color:var(--border);box-shadow:none}
.ink-arrow{font-size:1.2rem;color:var(--yellow);flex-shrink:0;animation:arrowBounce 1s ease-in-out infinite}
.btn-ink{background:none;border:none;cursor:pointer;padding:4px;flex-shrink:0;-webkit-tap-highlight-color:transparent;transition:transform .2s}
.btn-ink:hover{transform:scale(1.15)}
.ink-icon{width:52px;height:52px;object-fit:contain;display:block;filter:drop-shadow(0 0 8px rgba(234,179,8,.5))}
.ink-callout{font-size:.78rem;color:var(--text-mid);line-height:1.5;font-weight:600}
.ink-callout strong{color:var(--red);font-weight:800}
.ink-once{font-family:'Press Start 2P',monospace;font-size:.3rem;color:var(--yellow);letter-spacing:.5px}
@keyframes inkRowGlow{0%,100%{box-shadow:0 0 12px rgba(234,179,8,.2)}50%{box-shadow:0 0 24px rgba(234,179,8,.5)}}
@keyframes arrowBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Full-screen ink splat overlay — BLOCKS interaction */
.ink-splat-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;pointer-events:all;background:rgba(0,0,0,.25);overflow:hidden}
.ink-splat-overlay.hidden{display:none;pointer-events:none}
.splat-piece{position:absolute;pointer-events:none;opacity:0}
.splat-piece img{width:100%;height:100%;object-fit:cover}
.splat-piece.splat-show{animation:splatAppear .4s ease forwards}
/* Every piece covers the full screen — inset bleeds past edges, flipped/rotated for messy variety */
.splat-main-1{top:-10%;left:-10%;right:-10%;bottom:-10%;transform:rotate(-2deg)}
.splat-main-2{top:-15%;left:-15%;right:-15%;bottom:-15%;transform:rotate(4deg) scaleX(-1)}
.splat-rand-1{top:-5%;left:-5%;right:-5%;bottom:-5%;transform:rotate(6deg)}
.splat-rand-2{top:-20%;left:-20%;right:-20%;bottom:-20%;transform:rotate(-5deg) scaleX(-1)}
.splat-rand-3{top:-8%;left:-8%;right:-8%;bottom:-8%;transform:rotate(3deg) scaleY(-1)}
.splat-rand-4{top:-12%;left:-12%;right:-12%;bottom:-12%;transform:rotate(-7deg) scaleX(-1) scaleY(-1)}

@keyframes splatAppear{0%{opacity:0}100%{opacity:1}}
@keyframes splatFadeOut{0%{opacity:1}100%{opacity:0}}

/* Ink attack announcement message */
.ink-attack-msg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Press Start 2P',monospace;font-size:.55rem;color:#fff;background:rgba(0,0,0,.75);padding:16px 24px;border-radius:12px;text-align:center;z-index:10000;line-height:2;letter-spacing:.5px;animation:inkMsgPop .5s cubic-bezier(.2,.8,.3,1.2) forwards;white-space:nowrap;border:2px solid var(--yellow);box-shadow:0 0 30px rgba(234,179,8,.4)}
.ink-attack-msg.ink-msg-fade{animation:inkMsgFade .4s ease forwards}
@keyframes inkMsgPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}60%{transform:translate(-50%,-50%) scale(1.05)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes inkMsgFade{0%{opacity:1}100%{opacity:0}}

/* ============================================
   VS WIN/LOSE SPLASH
   ============================================ */
.splash-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
.splash-monster-img{width:200px;height:200px;object-fit:contain;animation:splashPop .6s cubic-bezier(.2,.8,.3,1.2) forwards}
.splash-text{font-family:'Press Start 2P',monospace;font-size:.9rem;letter-spacing:1px;line-height:2}
.splash-text.win-text{color:#ca8a04}
.splash-text.lose-text{color:var(--pink)}

@keyframes splashPop{0%{opacity:0;transform:scale(0.3) rotate(-10deg)}60%{transform:scale(1.1) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* ============================================
   VS END
   ============================================ */
.vs-end-result{font-family:'Press Start 2P',monospace;font-size:.8rem;line-height:2;letter-spacing:1px}
.vs-end-result.win{color:#ca8a04}.vs-end-result.lose{color:var(--pink)}.vs-end-result.draw{color:#0891b2}
.vs-end-monster-img{width:140px;height:140px;object-fit:contain;margin:4px 0}
.vs-end-monster-img.lose-aura,.monster.lose-aura{filter:drop-shadow(0 0 12px rgba(168,85,247,.6)) drop-shadow(0 0 30px rgba(168,85,247,.35)) drop-shadow(0 0 50px rgba(124,58,237,.2));animation:loseAuraPulse 2s ease-in-out infinite}
@keyframes loseAuraPulse{0%,100%{filter:drop-shadow(0 0 12px rgba(168,85,247,.6)) drop-shadow(0 0 30px rgba(168,85,247,.35)) drop-shadow(0 0 50px rgba(124,58,237,.2))}50%{filter:drop-shadow(0 0 18px rgba(168,85,247,.8)) drop-shadow(0 0 40px rgba(168,85,247,.5)) drop-shadow(0 0 65px rgba(124,58,237,.3))}}
.vs-end-compare{display:flex;gap:16px;width:100%;max-width:340px}
.vs-end-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.vs-end-label{font-family:'Press Start 2P',monospace;font-size:.42rem;color:var(--text-dim);letter-spacing:1px}
.vs-end-col .hp-row-end{width:100%}
.vs-end-col .hp-track{height:10px}

/* ============================================
   KEYFRAMES
   ============================================ */
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes sway{0%,100%{transform:rotate(-4deg) translateX(-3px)}50%{transform:rotate(4deg) translateX(3px)}}
@keyframes shudder{0%,100%{transform:translateX(0)}15%{transform:translateX(-6px) rotate(-3deg)}35%{transform:translateX(6px) rotate(3deg)}55%{transform:translateX(-4px)}75%{transform:translateX(4px) rotate(1deg)}}
@keyframes bounce{0%{transform:translateY(0)}25%{transform:translateY(-18px)}50%{transform:translateY(-3px)}70%{transform:translateY(-12px)}100%{transform:translateY(0)}}
@keyframes flyToMouth{0%{left:15%;opacity:1;transform:scale(1)}70%{left:55%;opacity:.85;transform:scale(.5)}100%{left:65%;opacity:0;transform:scale(0)}}
@keyframes popFloat{0%{opacity:0;transform:translateX(-50%) translateY(0) scale(.5)}20%{opacity:1;transform:translateX(-50%) translateY(-8px) scale(1.1)}50%{transform:translateX(-50%) translateY(-14px) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-26px) scale(.8)}}
@keyframes barfFall{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(40px) scale(.3);opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(calc(100vh + 40px)) rotate(720deg);opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes hpPop{0%{opacity:0;transform:translateY(0) scale(.6)}30%{opacity:1;transform:translateY(-10px) scale(1.1)}60%{transform:translateY(-16px) scale(1)}100%{opacity:0;transform:translateY(-24px) scale(.8)}}
@keyframes dotPulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes countPulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.3)}100%{transform:scale(1);opacity:.7}}

@media(max-width:380px){.game-title{font-size:1rem}.monster{width:115px;height:150px}.monster-stage{height:145px}.solo-arena{height:160px}.solo-prompty-wrap .monster{width:80px;height:105px}.boss-monster{width:120px;height:150px}.vs-monster-wrap .monster{width:70px;height:92px}.vs-monster-wrap{height:95px}}

/* ============================================
   COSTAR ROTATING HINT (Solo Mode)
   ============================================ */
.costar-hint{margin:6px 0;font-size:.82rem;font-weight:700;color:#0891b2;animation:hintFade .4s ease}
@keyframes hintFade{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}

/* ============================================
   QR CODE & JOIN METHODS (VS Wait Screen)
   ============================================ */
.join-methods{display:flex;align-items:center;gap:16px;margin:4px 0}
.join-method{display:flex;flex-direction:column;align-items:center;gap:8px}
.join-method-label{font-size:.78rem;color:var(--text-mid);font-weight:600;max-width:160px;text-align:center;line-height:1.4}
.join-method-or{font-family:'Press Start 2P',monospace;font-size:.4rem;color:var(--text-dim)}
.qr-img{width:90px;height:90px;border-radius:6px;object-fit:contain}

/* ============================================
   WIDESCREEN SOLO GAME LAYOUT
   ============================================ */
@media(min-width:640px){
  #screen-game{flex-direction:column}
  #screen-game .solo-arena{height:260px}
  #screen-game .bad-prompt-card{max-width:750px;align-self:center;width:100%}
  #screen-game .costar-hint{max-width:750px;align-self:center;width:100%}
  #screen-game .input-area{max-width:750px;align-self:center;width:100%}
  .game-hud{max-width:750px;align-self:center;width:100%}
  .boss-hp-row{max-width:750px;align-self:center;width:100%}
  .timer-bar-wrap{max-width:750px;align-self:center}
  .solo-prompty-wrap .monster{width:130px;height:165px}
  .boss-monster{width:200px;height:230px}
  .feedback{font-size:.36rem}
}
@media(min-width:1024px){
  #screen-game .solo-arena{height:300px}
  #screen-game .bad-prompt-card{max-width:850px}
  #screen-game .costar-hint{max-width:850px}
  #screen-game .input-area{max-width:850px}
  .game-hud{max-width:850px}
  .boss-hp-row{max-width:850px}
  .timer-bar-wrap{max-width:850px}
  .solo-prompty-wrap .monster{width:150px;height:190px}
  .boss-monster{width:240px;height:270px}
}

  /* VS arena widescreen */
  .vs-arena{max-width:700px;align-self:center;width:100%}
  .vs-monster-wrap .monster{width:100px;height:130px}
  .vs-monster-wrap{height:135px}
  #screen-vs-game .bad-prompt-card{max-width:700px;align-self:center;width:100%}
  #screen-vs-game .ink-attack-row{max-width:700px;align-self:center}
  #screen-vs-game .input-area{max-width:700px;align-self:center;width:100%}
  #screen-vs-game .vs-hud{max-width:700px;align-self:center;width:100%}
  #screen-vs-game .timer-bar-wrap{max-width:700px;align-self:center}
}

/* ============================================
   VS LOBBY INSTRUCTIONS (Role-based)
   ============================================ */
.vs-instructions{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;max-width:380px;text-align:left;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.vs-instr-header{font-family:'Press Start 2P',monospace;font-size:.42rem;color:var(--text-mid);letter-spacing:2px;text-align:center;margin-bottom:10px}
.vs-roles{display:flex;flex-direction:column;gap:10px}
.vs-role-card{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.role-title{font-size:.92rem;font-weight:800;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.role-badge{font-family:'Nunito',sans-serif;font-size:.72rem;font-weight:700;color:#fff;background:var(--pink);padding:4px 10px;border-radius:4px;letter-spacing:.3px}
.vs-step{display:flex;align-items:baseline;gap:8px;font-size:.88rem;color:var(--text-mid);line-height:1.5;margin:3px 0;font-weight:600}
.vs-step strong{color:var(--text);font-weight:800}
.step-num{font-family:'Press Start 2P',monospace;font-size:.35rem;color:#fff;background:var(--cyan);width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}

/* ============================================
   LAPTOP NOTE
   ============================================ */
.laptop-note{font-size:.78rem;color:var(--text-mid);font-weight:600}

/* ============================================
   WAIT SCREEN INSTRUCTION
   ============================================ */
.wait-instr{max-width:320px;line-height:1.5}

/* ============================================
   SOLO END — REVIEW PANEL
   ============================================ */
.review-panel{width:100%;max-width:400px;max-height:50vh;overflow-y:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;text-align:left;animation:slideUp .25s ease;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.review-panel.hidden{display:none}
.review-item{border-bottom:1px solid var(--border);padding:10px 0}
.review-item:last-child{border-bottom:none}
.review-label{font-family:'Press Start 2P',monospace;font-size:.25rem;color:var(--text-dim);letter-spacing:1px;margin-bottom:4px}
.review-vague{font-size:.75rem;color:var(--text-mid);font-style:italic;margin-bottom:4px;line-height:1.4}
.review-yours{font-size:.8rem;color:var(--text);margin-bottom:6px;line-height:1.4;font-weight:600}
.review-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.review-tag{font-family:'Press Start 2P',monospace;font-size:.22rem;padding:3px 6px;border-radius:4px;letter-spacing:.5px}
.review-tag.found{background:rgba(34,197,94,.12);color:#16a34a;border:1px solid rgba(34,197,94,.3)}
.review-tag.missing{background:rgba(236,72,153,.08);color:var(--pink);border:1px solid rgba(236,72,153,.2)}
.review-tip{font-size:.72rem;color:#0891b2;font-weight:600;margin-top:4px;line-height:1.4}

/* ============================================
   VS END — REMATCH & BUTTONS
   ============================================ */
.vs-end-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.rematch-wait{font-weight:600;animation:dotPulse 1.4s ease infinite}
.rematch-wait.hidden{display:none}
.rematch-popup{background:var(--surface);border:2px solid var(--cyan);border-radius:12px;padding:14px 20px;margin-top:10px;text-align:center;animation:popIn .35s cubic-bezier(.2,.8,.3,1.2)}
.rematch-popup.hidden{display:none}
.rematch-popup-text{font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:10px}
.rematch-popup-text strong{color:var(--cyan)}
.rematch-popup-buttons{display:flex;gap:10px;justify-content:center}
.btn-rematch-accept,.btn-rematch-decline{font-size:.65rem!important;padding:8px 20px!important;min-width:70px}
@keyframes popIn{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}

/* ============================================
   SPINNING MONSTER SIDE-TO-SIDE
   ============================================ */
.monster.spinning .monster-img{animation:spinDodge 1.2s ease-in-out infinite}
@keyframes spinDodge{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ============================================
   INSTRUCTION SCREENS
   ============================================ */
.instr-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.instr-img-wrap{width:100%;max-width:820px;max-height:58vh;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px;box-shadow:0 2px 12px rgba(0,0,0,.08);overflow:hidden}
.instr-img{width:100%;height:100%;max-height:56vh;object-fit:contain;border-radius:8px}
.instr-dots{display:flex;gap:8px;justify-content:center}
.dot{width:10px;height:10px;border-radius:50%;background:var(--border);transition:all .3s}
.dot.dot-active{background:var(--cyan);transform:scale(1.3)}
.instr-nav{display:flex;gap:10px;justify-content:center}
.instr-monsters{display:flex;align-items:center;justify-content:center;gap:20px;padding:16px 0}
.instr-mon{width:120px;height:150px;object-fit:contain}
.instr-mon-boss{width:170px;height:210px}
.instr-vs{font-family:'Press Start 2P',monospace;font-size:1rem;color:var(--pink);letter-spacing:2px}
.instr-text{font-size:.88rem;font-weight:600;color:var(--text-mid);line-height:1.7;max-width:420px;text-align:center}
.instr-text strong{color:var(--text);font-size:.95rem}
.instr-text em{color:var(--cyan);font-style:normal;font-weight:700}

/* ============================================
   BOSS URGENCY — Screen shake + red flash at midway
   ============================================ */
.arena-urgent{animation:arenaShake .4s ease-in-out}
@keyframes arenaShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.screen-red-flash{position:relative}
.screen-red-flash::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(239,68,68,.1);pointer-events:none;z-index:999;animation:redFlashPulse 1.5s ease-in-out infinite}
@keyframes redFlashPulse{0%,100%{opacity:.3}50%{opacity:1}}
.boss-urgency-border{border:2px solid rgba(239,68,68,.3)!important;animation:urgencyPulse 1.5s ease-in-out infinite}
@keyframes urgencyPulse{0%,100%{border-color:rgba(239,68,68,.2)}50%{border-color:rgba(239,68,68,.5)}}
.screen-vibrate{animation:screenVibrate .4s ease-in-out}
@keyframes screenVibrate{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,0)}50%{transform:translate(1px,0)}75%{transform:translate(-1px,0)}}

/* ============================================
   SCARED MONSTER STATE
   ============================================ */
.monster.scared .monster-img{filter:saturate(0.6) brightness(0.9);animation:scaredShake .5s ease-in-out infinite}
@keyframes scaredShake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-3px) rotate(-2deg)}75%{transform:translateX(3px) rotate(2deg)}}

/* ============================================
   SOLO END — TIME DISPLAY & SCORE SUBMIT
   ============================================ */
.solo-time-display{font-family:'Press Start 2P',monospace;font-size:.55rem;color:#0891b2;letter-spacing:1px;min-height:1.2em}
.score-submit-card{background:var(--bg-card);border:2px solid var(--cyan);border-radius:var(--radius);padding:16px 20px;text-align:center;max-width:320px;width:100%;box-shadow:0 4px 16px rgba(6,182,212,.12)}
.score-submit-card.hidden{display:none}
.score-card-title{font-family:'Press Start 2P',monospace;font-size:.45rem;color:var(--cyan);letter-spacing:1px;margin-bottom:10px}
.score-card-row{display:flex;gap:8px;align-items:center;justify-content:center}
.score-card-row .name-input{flex:1;padding:10px 14px;font-size:.9rem}
.btn-small{padding:10px 18px!important;font-size:.5rem!important}
.lb-submitted{font-family:'Press Start 2P',monospace;font-size:.35rem;color:var(--green);letter-spacing:.5px}
.end-buttons{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}
.name-error{font-size:.78rem;color:var(--red);margin-top:4px;font-weight:700}
.name-error.hidden{display:none}

/* ============================================
   LEADERBOARD
   ============================================ */
.lb-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.lb-tabs{display:flex;gap:8px}
.lb-tab{font-family:'Press Start 2P',monospace;font-size:.4rem;padding:8px 16px;border:2px solid var(--border);border-radius:8px;background:var(--bg-card);color:var(--text-mid);cursor:pointer;transition:all var(--t);letter-spacing:.5px}
.lb-tab.active{background:var(--cyan);color:#fff;border-color:var(--cyan)}
.lb-tab:hover:not(.active){border-color:var(--cyan)}
.lb-list,.lb-mini{width:100%;max-width:360px;text-align:left}
.lb-mini{max-width:320px}
.lb-header{display:flex;gap:4px;padding:6px 10px;font-family:'Press Start 2P',monospace;font-size:.28rem;color:var(--text-dim);letter-spacing:1px;border-bottom:1px solid var(--border)}
.lb-row{display:flex;gap:4px;padding:9px 10px;font-size:.88rem;font-weight:700;color:var(--text);border-bottom:1px solid rgba(0,0,0,.04);align-items:center}
.lb-row.lb-top{background:rgba(234,179,8,.06)}
.lb-rank{width:34px;text-align:center;flex-shrink:0;font-size:.85rem}
.lb-name-col{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-time-col{width:60px;text-align:right;flex-shrink:0;font-family:'Press Start 2P',monospace;font-size:.4rem;color:var(--cyan)}
.lb-empty{font-size:.8rem;color:var(--text-dim);text-align:center;padding:16px}

/* ============================================
   MOBILE-SPECIFIC OVERRIDES
   ============================================ */
@media(max-width:480px){
  #app{max-width:100%}
  .screen{padding:10px 12px env(safe-area-inset-bottom,10px)}
  .join-methods{flex-direction:column;gap:10px}
  .monster-stage{height:140px}
  .monster{width:110px;height:140px}
  .solo-arena{height:165px}
  .solo-prompty-wrap .monster{width:90px;height:115px}
  .boss-monster{width:135px;height:165px}
  .splash-monster-img{width:160px;height:160px}
  .ink-attack-msg{font-size:.4rem;white-space:normal;max-width:80vw;padding:12px 16px}
}