/* ============================================================
   SCREEN CONTENT — logical 384x256 stage scaled to the LCD.
   Shared chrome + per-cartridge looks.
   ============================================================ */

#gameRoot{position:absolute;inset:0;z-index:5;}
#gameRoot .stage{position:absolute;left:50%;top:50%;width:384px;height:256px;
  margin:-128px 0 0 -192px;transform:scale(var(--gscale,1));transform-origin:center;
  font-family:'Trebuchet MS',Verdana,system-ui,sans-serif;color:#f2ead3;overflow:hidden;
  border-radius:4px;background:#000;}

.pixelbox{background:#e9dfc4;color:#33301c;border-radius:5px;box-shadow:inset 0 0 0 2px #ffffffb8,inset 0 -3px 6px #00000033,0 2px 0 rgba(0,0,0,.4);}
.titlefont{font-family:var(--display);letter-spacing:.18em;text-transform:uppercase;}

/* ---------- key hint strip ---------- */
.hintstrip{position:absolute;left:0;right:0;bottom:0;height:16px;display:flex;align-items:center;gap:10px;
  padding:0 10px;font-size:7px;letter-spacing:.14em;color:#cfe3d2;background:#03140db8;text-transform:uppercase;}
.kbd{display:inline-block;padding:1px 4px;border-radius:3px;border:1px solid #86a98f;color:#d9efe0;font-size:7px;letter-spacing:.1em;line-height:1.2;background:#0c251a;}

/* ================= COURTROOM ================= */
.court-bg{position:absolute;inset:0;}
.bg-court{background:
  radial-gradient(70% 46% at 50% 26%,#31506b,#223850 52%,#17273a 78%,#101c2c);
}
.bg-court::before{content:"";position:absolute;inset:0;
  background:
    linear-gradient(#0000 62%,#20202a84 62% 66%,#1a213077 66%),
    radial-gradient(24% 20% at 50% 12%,#eec96b30,transparent 70%);
}
.bg-court::after{content:"";position:absolute;left:14%;top:8%;width:72%;height:44%;border-radius:6px;
  background:radial-gradient(60% 60% at 50% 42%,#2e465ce6,#1d2f42 85%);border:2px solid #47617c;
  box-shadow:0 8px 20px #00000066;}
.bg-office{background:linear-gradient(180deg,#caa36a,#9a7340 55%,#6e4f28);
  box-shadow:inset 0 -60px 80px #00000059;}
.bg-office::after{content:"";position:absolute;left:6%;right:6%;top:8%;height:58%;
  background:linear-gradient(#7c5c33ee,#5f452262);border:3px solid #4a3316;border-radius:4px;
  box-shadow:inset 0 0 30px #00000059;}
.bg-recess{background:linear-gradient(180deg,#41586b56,#22303c),repeating-linear-gradient(90deg,#2c3a49 0 26px,#26323f 26px 27px);}
.bg-workshop{background:linear-gradient(180deg,#3d2f35,#241a20);box-shadow:inset 0 -40px 70px #00000080;}
.bg-black{background:#050708;}

.scene-decor{position:absolute;inset:0;pointer-events:none;}
.sc-bench-front{position:absolute;left:-4%;right:-4%;bottom:0;height:30%;
  background:linear-gradient(#7c2f21,#5d2016 60%,#411209);border-top:3px solid #93503b;
  box-shadow:0 -8px 18px #00000066;}
.sc-desk-def{position:absolute;left:3%;bottom:17%;width:34%;height:13%;
  background:linear-gradient(#8a5a2b,#63411c);border-top:3px solid #b98544;border-radius:3px;box-shadow:0 6px 10px #00000059;}
.sc-desk-pro{position:absolute;right:3%;bottom:17%;width:34%;height:13%;
  background:linear-gradient(#8a5a2b,#63411c);border-top:3px solid #b98544;border-radius:3px;box-shadow:0 6px 10px #00000059;}
.sc-judgebench{position:absolute;left:16%;right:16%;top:15%;height:20%;
  background:linear-gradient(#74331f,#4e1e10);border:3px solid #8f5033;border-bottom-width:5px;border-radius:4px;
  box-shadow:0 10px 16px #00000059;}
.judge-plaque{position:absolute;left:50%;top:19%;transform:translateX(-50%);
  font-family:var(--display);font-size:7px;letter-spacing:.32em;color:#ffd98e;background:#331309;
  border:1px solid #a05b2f;border-radius:2px;padding:2px 8px;z-index:2;}

/* portraits */
.portrait{position:absolute;left:0;bottom:0;width:100%;height:100%;display:none;}
.portrait.on{display:block;}
.pt-svg{display:block;width:100%;height:100%;filter:drop-shadow(0 8px 12px #000000aa);}
.p-zone-l,.p-zone-r,.p-zone-c,.p-zone-j{position:absolute;}
.p-zone-l{left:6px;bottom:58px;width:150px;height:150px;}
.p-zone-r{right:6px;bottom:58px;width:150px;height:150px;}
.p-zone-c{left:117px;top:34px;width:150px;height:150px;}
.p-zone-j{left:137px;top:22px;width:110px;height:110px;}
.portrait.enter{animation:ptEnter .26s cubic-bezier(.3,1.4,.5,1);}
@keyframes ptEnter{from{transform:translateX(-26px) scale(.92);opacity:0;}to{}}
.mood-shake{animation:moodShake .34s ease;}
@keyframes moodShake{0%,100%{transform:translate(0);}20%{transform:translate(-4px);}45%{transform:translate(4px);}70%{transform:translate(-3px);}}

/* dialogue window */
.dlg{position:absolute;left:8px;right:8px;bottom:18px;min-height:64px;padding:8px 12px 12px;
  z-index:6;display:none;}
.dlg.show{display:block;}
.dlg .nameplate{position:absolute;top:-11px;left:12px;padding:3px 12px 2px;border-radius:3px;
  font-family:var(--display);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  background:#20344a;color:#ffe9ba;border:1px solid #68809c;box-shadow:0 2px 3px #00000059;transform:scaleY(1.12);}
.dlg .text{font-size:10.5px;line-height:1.45;letter-spacing:.02em;min-height:44px;color:#2e2a17;
  font-family:ui-monospace,'Menlo','Consolas',monospace;}
.dlg .cont-arrow{position:absolute;right:10px;bottom:6px;width:0;height:0;border-style:solid;
  border-width:6px 5px 0 5px;border-color:#7a4d13 transparent transparent transparent;
  animation:bounceArrow .7s ease-in-out infinite;}
@keyframes bounceArrow{50%{transform:translateY(2px);}}
.dlg.narration .nameplate{display:none;}

/* choices menu */
.choicebox{position:absolute;right:10px;bottom:90px;min-width:120px;z-index:8;padding:6px;display:none;}
.choicebox.show{display:block;}
.choice{padding:5px 10px;font-size:9.5px;letter-spacing:.04em;border-radius:3px;margin:2px 0;
  color:#40391f;background:#f4ecd399;border:1px solid #00000022;display:flex;gap:6px;align-items:center;}
.choice.sel{background:#7a4d13;color:#ffe9ba;box-shadow:0 2px 4px #00000045;}
.choice.sel::before{content:"\25B8";}

/* court record / evidence */
.evdrawer{position:absolute;inset:0;z-index:14;display:none;flex-direction:column;
  background:#132018f0;backdrop-filter:blur(1px);}
.evdrawer.show{display:flex;}
.ev-head{display:flex;align-items:baseline;gap:8px;padding:7px 12px 4px;color:#ffd98e;
  font-family:var(--display);letter-spacing:.2em;font-size:11px;border-bottom:1px solid #39554a;}
.ev-head small{margin-left:auto;font-size:7px;letter-spacing:.1em;color:#9fc0ab;}
.ev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:8px 10px;flex:1;align-content:start;overflow:auto;}
.ev-cell{border:1px solid #3d5b4c;background:#0d1a12;border-radius:4px;padding:4px 3px;text-align:center;
  min-height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;}
.ev-cell.sel{outline:2px solid #ffc46a;background:#234134;}
.ev-cell.empty{opacity:.28;border-style:dashed;}
.ev-cell svg{width:22px;height:22px;}
.ev-cell b{font-size:6.6px;line-height:1.15;letter-spacing:.05em;color:#cfe8d5;font-weight:normal;}
.ev-detail{background:#e9dfc4;color:#33301c;margin:6px 8px;border-radius:5px;padding:7px 10px;
  display:none;min-height:54px;}
.ev-detail.show{display:block;}
.ev-detail h4{font-family:var(--display);letter-spacing:.14em;font-size:10px;margin-bottom:3px;}
.ev-detail p{font-size:8.5px;line-height:1.4;}
.ev-detail .newflag{color:#a3301d;font-weight:bold;}

/* cross-examination panel */
.testi-banner{position:absolute;right:6px;top:6px;z-index:5;background:#7a2015dd;color:#ffe6cf;
  border:1px solid #ffb08e;padding:4px 10px;border-radius:3px;font-family:var(--display);
  letter-spacing:.2em;font-size:8.5px;text-align:right;}
.stmt-hud{position:absolute;right:6px;top:26px;z-index:5;background:#101c14e6;border:1px solid #466052;
  border-radius:4px;padding:4px 8px;font-size:7.6px;letter-spacing:.12em;color:#b9d6c0;max-width:150px;}
.actionbar{position:absolute;left:0;right:0;bottom:0;height:18px;z-index:7;display:flex;gap:0;
  background:#03140dcc;}
.abtn{flex:1;font-family:var(--display);letter-spacing:.16em;font-size:8.5px;color:#9fc7a9;
  display:flex;align-items:center;justify-content:center;gap:4px;}
.abtn.primary{color:#ffe08d;background:#31240ecc;}
.abtn.disabled{opacity:.4;}

/* penalty & health */
.badgebar{position:absolute;left:6px;top:6px;z-index:6;display:flex;gap:3px;}
.badgebar i{width:9px;height:9px;border-radius:2px;background:linear-gradient(#ffcf5e,#c78d1c);
  box-shadow:0 0 0 1px #4a3208,inset 0 1px 1px #fff7;display:block;}
.badgebar i.lost{background:#1c2a20;box-shadow:0 0 0 1px #3d574a;opacity:.6;}
.penalty-flash{position:absolute;inset:0;z-index:20;pointer-events:none;background:
  repeating-linear-gradient(-45deg,#ff2a2a12 0 12px,#0000 12px 24px),#ff1c1c33;
  animation:penFlash .5s ease-out forwards;}
@keyframes penFlash{from{opacity:1;}to{opacity:0;}}
.crackline{position:absolute;inset:0;z-index:21;pointer-events:none;mix-blend-mode:screen;}

/* FX overlays */
.fx-objection{position:absolute;inset:0;z-index:30;display:none;place-items:center;pointer-events:none;}
.fx-objection.show{display:grid;}
.fx-slash{position:absolute;inset:-40px;background:
  linear-gradient(115deg,transparent 30%,#fff 46%,#fff 54%,transparent 70%);
  mix-blend-mode:lighten;animation:slashIn .38s cubic-bezier(.1,.8,.3,1) both;}
@keyframes slashIn{from{transform:translateX(-130%) skewX(-8deg);}to{transform:translateX(8%) ;}}
.fx-word{position:relative;font-family:var(--display);font-size:34px;letter-spacing:.05em;
  color:#fff;-webkit-text-stroke:1.6px #171005;text-shadow:4px 4px 0 #b3402b,6px 6px 0 #00000090;
  transform:rotate(-7deg) scaleY(1.25);animation:slamIn .3s cubic-bezier(.2,1.6,.4,1) both .06s;}
@keyframes slamIn{from{transform:rotate(-7deg) scale(2.1);opacity:0;}to{transform:rotate(-7deg) scaleY(1.25);opacity:1;}}
.fx-whiteflash{position:absolute;inset:0;background:#fff;z-index:29;pointer-events:none;animation:wflash .3s ease-out forwards;}
@keyframes wflash{from{opacity:.95;}to{opacity:0;}}
.shake-stage{animation:stShake .3s ease;}
@keyframes stShake{
  20%{transform:scale(var(--gscale,1)) translate(-5px,2px);}
  50%{transform:scale(var(--gscale,1)) translate(5px,-2px);}
  80%{transform:scale(var(--gscale,1)) translate(-3px,1px);}
}

/* title / chapter / interstitial screens */
.game-title-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:radial-gradient(80% 70% at 50% 30%,#1d3140,#0a1118 82%),#0a1118;text-align:center;}
.gt-cartglyph{width:74px;height:52px;}
.gt-title{font-family:var(--display);font-size:23px;letter-spacing:.1em;color:#ffe2ac;
  text-shadow:0 3px 0 #7c2015,0 5px 12px #000;transform:scaleY(1.22);}
.gt-sub{font-size:8px;letter-spacing:.3em;color:#9fc0ab;text-transform:uppercase;}
.menu-list{display:flex;flex-direction:column;gap:4px;margin-top:6px;min-width:130px;}
.menu-item{font-size:10px;letter-spacing:.14em;padding:5px 12px;border:1px solid #37534a;border-radius:3px;
  color:#bcd8c4;background:#0f1d1699;text-transform:uppercase;display:flex;gap:6px;}
.menu-item.sel{color:#ffe9ba;border-color:#e8a33d;background:#37261099;}
.menu-item.sel::before{content:"\25B8";}
.chapter-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:#0b0d10;z-index:25;}
.chapter-card .cc-num{font-family:var(--display);letter-spacing:.5em;color:#e8a33d;font-size:10px;transform:scaleY(1.2);}
.chapter-card .cc-name{font-family:var(--display);font-size:16px;letter-spacing:.12em;color:#eef2ec;transform:scaleY(1.1);text-align:center;padding:0 30px;}
.chapter-card .cc-sub{font-size:8px;letter-spacing:.18em;color:#8fa69a;}
.fade-black{position:absolute;inset:0;background:#000;z-index:24;pointer-events:none;transition:opacity .45s;}

/* verdict + endings */
.verdict-stamp{position:relative;font-family:var(--display);font-size:30px;letter-spacing:.08em;color:#eef;
  border:4px double currentColor;border-radius:6px;padding:8px 20px;transform:rotate(-8deg) scaleY(1.25);
  text-shadow:0 3px 0 #00000070;}
.verdict-stamp.guilty{color:#ff9d8a;}
.verdict-stamp.notguilty{color:#a6f5b9;}
.epilogue{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  background:#07090b;z-index:26;padding:0 34px;text-align:center;}
.epilogue p{font-size:9.5px;line-height:1.55;color:#cbd8cf;max-width:300px;}
.epilogue .ep-end{font-family:var(--display);letter-spacing:.34em;color:#e8a33d;font-size:11px;transform:scaleY(1.15);}

/* tutorial toast inside screen */
.scr-note{position:absolute;left:8px;right:8px;bottom:38px;z-index:9;padding:6px 10px;border-radius:4px;
  background:#101c14e0;border:1px solid #466052;color:#cfe8d5;font-size:8px;letter-spacing:.06em;line-height:1.45;}
.scr-note b{color:#ffd98e;}

/* ================= GEARWORK GRID (slide puzzle) ================= */
.grid-scene{position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 22%,#26383a,#101c1e 82%);display:flex;flex-direction:column;align-items:center;}
.gg-board{position:relative;width:174px;height:174px;margin-top:34px;border-radius:8px;
  background:#0e1516;box-shadow:0 0 0 3px #3c4a46,inset 0 0 18px #000000c4;padding:5px;}
.gg-tile{position:absolute;width:52px;height:52px;border-radius:5px;cursor:pointer;
  background:linear-gradient(#dfd5bb,#bcAF8F);transition:left .09s ease,top .09s ease;
  box-shadow:0 2px 4px #00000077,inset 0 1px 1px #ffffffb0;}
.gg-tile .gearart{position:absolute;inset:5px;}
.gg-num{position:absolute;right:3px;bottom:1px;font-size:8px;color:#33281a;font-weight:600;}
.gg-moveflash{animation:ggpop .12s ease;}
@keyframes ggpop{50%{filter:brightness(1.3);}}
.gg-rowbtns{display:flex;gap:6px;margin-top:12px;}
.gg-btn{font-family:var(--display);font-size:9px;letter-spacing:.16em;color:#ffe2ac;background:#12302599;
  border:1px solid #3d6a52;border-radius:4px;padding:5px 12px;}
.gg-btn.sel{border-color:#e8a33d;color:#ffd98e;background:#3a2a1080;}
.gg-stats{display:flex;gap:14px;margin-top:9px;font-size:9px;letter-spacing:.16em;color:#9fd8b4;}
.gg-titlecard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:#10201be8;z-index:3;text-align:center;padding:0 30px;}
.gg-win{position:absolute;inset:0;display:grid;place-items:center;background:#0d2015d6;z-index:4;}
.gg-win-card{text-align:center;}
.gg-win-card b{font-family:var(--display);font-size:17px;letter-spacing:.2em;color:#9df0b6;}
.gg-win-card span{display:block;font-size:9px;letter-spacing:.12em;color:#cfe8d5;margin-top:4px;}

/* ================= PISTON PANIC (reflex) ================= */
.pp-scene{position:absolute;inset:0;background:radial-gradient(100% 90% at 50% 0%,#3a3223,#141210 76%);
  display:flex;flex-direction:column;align-items:center;}
.pp-stage{position:relative;width:230px;height:170px;margin-top:26px;}
.pp-piston{position:absolute;width:62px;height:62px;border-radius:12px;display:grid;place-items:center;
  border:2px solid #5a5142;background:linear-gradient(#22201c,#171512);color:#8d8574;cursor:pointer;}
.pp-piston svg{width:30px;height:30px;}
.pp-piston.lit{border-color:#ffcd5e;color:#ffdc87;background:linear-gradient(#4d3f18,#2c240f);
  box-shadow:0 0 14px #ffb02d66,inset 0 0 8px #ffcd5e2e;}
.pp-piston.hitgood{animation:ppHit .18s ease;}
@keyframes ppHit{50%{transform:scale(.92);}}
.pp-piston.hitbad{animation:ppBad .25s ease;background:linear-gradient(#4d1815,#2c0e0c);border-color:#e05b45;}
@keyframes ppBad{25%{transform:translateX(-4px);}60%{transform:translateX(4px);}}
.pp-hud{display:flex;gap:16px;font-size:9px;letter-spacing:.14em;color:#cdb98a;margin-top:10px;}
.pp-lifebar{display:flex;gap:3px;}
.pp-lifebar i{width:10px;height:8px;background:linear-gradient(#ff8d5c,#c93d22);border-radius:2px;box-shadow:0 0 0 1px #00000055;}
.pp-lifebar i.gone{background:#241d18;box-shadow:0 0 0 1px #3a3128;opacity:.55;}
.pp-timerbar{position:absolute;left:50px;right:50px;top:200px;height:6px;border-radius:3px;background:#241f18;overflow:hidden;border:1px solid #453d2e;}
.pp-timerfill{height:100%;width:100%;background:linear-gradient(90deg,#ffcd5e,#ff8a3c);}
.pp-count{position:absolute;inset:0;display:grid;place-items:center;background:#0c0a08d8;z-index:5;
  font-family:var(--display);font-size:30px;color:#ffd98e;letter-spacing:.1em;}