:root { --ink:#1d2733; --accent:#e5484d; --ok:#2f9e44; --bg:#f6f7f9; }
* { box-sizing:border-box; }
body { font-family:"Leelawadee UI",system-ui,sans-serif; background:var(--bg); color:var(--ink); margin:0; padding:1rem 1.5rem; }
h1 { font-size:1.15rem; }
#howto { max-width:60ch; font-size:.9rem; color:#445; }
#stage { position:relative; width:960px; max-width:100%; height:480px; margin:1rem 0; background:#fff;
         border:2px solid #dde3ea; border-radius:12px; overflow:hidden; }
#ployline { position:absolute; bottom:0; left:0; right:0; height:64px; background:#eef4ee; border-top:3px dashed #9c9; display:flex; align-items:center; gap:1rem; padding:0 1rem; font-size:1.6rem;}
#saybar { flex:1; text-align:center; background:#122013; color:#eaffe8; padding:7px 14px; border-radius:12px; font-size:1.5rem; white-space:nowrap; overflow:hidden; }   /* Ploy speaks the live string, right above the keyboard */
#saybar .done { color:#7dde8b; } #saybar .bad { color:#ff8b8b; text-decoration:underline; }
.organ { position:absolute; width:120px; height:80px; transform:translateX(-50%); scale:var(--sc,1); z-index:1; }
/* fall character: pseudo-3D approach (scale via --sc) + per-organ motion computed from game time (see o.wx) */
.organ .sprite { will-change: transform; }
.organ.locked { z-index:3; outline:2px solid #4ea1ff; outline-offset:5px; border-radius:10px; } .organ.cured { z-index:4; }
.organ.queue { opacity:.5; filter:grayscale(.3); }   /* waiting in line at the top, not yet descending */
.organ .face { width:120px; text-align:center; font-size:64px; line-height:80px; }
.organ.boss { width:170px; height:130px; } .organ.boss .face { width:170px; font-size:96px; line-height:130px; }
.organ.shielded .str { color:#e5484d; font-weight:700; } .organ.shielded { filter:grayscale(.35); }
.organ .say { color:#fff; background:#000000c0; padding:2px 8px; border-radius:10px; font-size:13px; font-style:italic; text-align:center; }   /* the relative's line — high contrast pill, read it, type the reply */
.organ .sprite { width:120px; height:80px; background-repeat:no-repeat; }
.organ.liver .sprite { background:url('/assets/organs/organ-liver.jpg') center/contain no-repeat; filter:drop-shadow(0 2px 2px #0003); }
.organ.pancreas .sprite { background-image:url('/assets/organs/sheets/pancreas-sheet-gemini-1-transparent.png'); background-size:300% 200%; }
.organ.heart .sprite { background-image:url('/assets/organs/sheets/heart-sheet-gemini-3-transparent.png'); background-size:300% 200%; }
.organ .str { position:absolute; top:-26px; left:50%; transform:translateX(-50%); white-space:nowrap; z-index:5;
              font:600 14px/1.4 ui-monospace,monospace; background:#1d2733; color:#fff; padding:2px 8px; border-radius:6px; }
.organ .str .done { color:#7dde8b; } .organ .str .bad { color:#ff8b8b; }
.organ .hpb { position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:46px; height:4px; border-radius:2px; background:#ffffff2e; overflow:hidden; z-index:5; }   /* standard overhead HP bar, drains per keystroke */
.organ .hpb i { display:block; height:100%; background:#74c0fc; }
.organ.locked { outline:3px solid var(--accent); outline-offset:4px; border-radius:8px; }
/* hit reaction + danger blink are time-driven inline styles in render (CSS keyframes restart on per-frame-rebuilt DOM = invisible) */
/* cure death-anim is time-driven inline style in render (CSS transitions can't run on per-frame-rebuilt DOM; hit-stop holds t.t so the white frame freezes) */
#stage.shake { animation:shakex .25s; } @keyframes shakex { 20%{translate:-7px 3px} 40%{translate:6px -4px} 60%{translate:-4px 2px} 80%{translate:3px -1px} }
.float { position:absolute; font:700 20px sans-serif; pointer-events:none; animation:rise .9s forwards; z-index:5; transform:translateX(-50%); }
.shot { position:absolute; z-index:6; font-size:21px; pointer-events:none; transform:translateX(-50%); filter:drop-shadow(0 0 6px #9ecbff); }   /* the bullet: glowing pill/syringe leaving Ploy */
.shot::after { content:''; position:absolute; left:50%; top:96%; width:3px; height:26px; margin-left:-1.5px; background:linear-gradient(#9ecbff, transparent); filter:blur(1.5px); border-radius:2px; }   /* glowing tail, gun-video step 2 */
.boom { position:absolute; z-index:7; font-size:36px; pointer-events:none; transform:translate(-50%,-50%); filter:drop-shadow(0 0 10px #ffb347); }   /* impact burst at body center */
.boom.small { font-size:16px; filter:drop-shadow(0 0 4px #ffb347); }   /* per-letter spark / non-kill word burst */
@keyframes rise { to { translate:0 -70px; opacity:0 } }
#banner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:800 44px sans-serif;
          color:#fff; background:#1d273355; pointer-events:none; opacity:0; }
#banner.show { animation:bannerpop 1.2s forwards; } @keyframes bannerpop { 15%{opacity:1; scale:1.1} 80%{opacity:1; scale:1} 100%{opacity:0} }
#hud { display:flex; gap:1.5rem; align-items:center; width:960px; max-width:100%; font-size:.95rem; }
#gauge { flex:1; height:14px; background:#dde3ea; border-radius:7px; overflow:hidden; }
#gauge > div { height:100%; background:linear-gradient(90deg,#e5484d,#f59f00); transition:width .1s; }
.screen { position:absolute; inset:0; background:#fffffffa; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; text-align:center; padding:1rem; }
.lie { font-size:2rem; font-weight:700; max-width:24ch; }
.sub { color:#667; font-size:.95rem; }
button { font:inherit; padding:.45rem 1.1rem; border-radius:8px; border:1px solid #ccd; background:#fff; cursor:pointer; }
button.primary { background:var(--ink); color:#fff; border-color:var(--ink); }
input { font:inherit; padding:.4rem .6rem; border:1px solid #ccd; border-radius:8px; width:16ch; }
#card { width:360px; } #card img { max-width:100%; max-height:300px; width:auto; height:auto; border-radius:12px; box-shadow:0 6px 24px #0003; }   /* short-laptop fix: was width:100% → img filled the 480px stage, pushing sub/buttons/challenge past overflow:hidden */
#challenge { font-size:.8rem; word-break:break-all; color:#556; max-width:60ch; }
.practice-tag { color:var(--ok); font-weight:700; }
#ecg { position:absolute; top:8px; right:8px; background:#0b1f14; border:2px solid #1c4a33; border-radius:6px; opacity:.85; z-index:5; }
#rankbadge { font:800 1rem sans-serif; letter-spacing:1px; }   /* DMC-style rank, rides Game.rank(best) */
/* debug affordances (only rendered under ?debug=1) */
#statepanel { position:fixed; left:1rem; bottom:1rem; z-index:20; max-width:min(960px,90vw); font-size:.8rem; }
#statepanel pre { background:#1d2733; color:#cde; padding:.6rem; border-radius:8px; overflow:auto; margin:.2rem 0 0; max-height:40vh; }
#errbanner { position:fixed; top:0; left:0; right:0; z-index:9999; background:var(--accent); color:#fff; padding:.4rem 1rem; font:700 .9rem/1.3 sans-serif; pointer-events:none; }   /* never blocks play */