/* ============================================================
   DEVICE — the MYRIAD MV-88 handheld chassis.
   Ivory composite shell, charcoal screen module, crimson keys.
   Rendered entirely in CSS; tactile press physics included.
   ============================================================ */

#stage{display:flex;flex-direction:column;align-items:center;}

#device{
  --dw:clamp(300px, min(88vw,54vh), 392px);
  width:var(--dw);
  position:relative;z-index:7;
  border-radius:26px 26px 34px 34px;
  padding:0 0 14px;
  background:
    linear-gradient(155deg,#f3ecdc 0%,#e4dbc6 30%,#cfc5ab 74%,#b9ae93 100%);
  box-shadow:
    inset 0 3px 2px #ffffffcc,
    inset 3px 0 6px #ffffff59,
    inset -8px -12px 22px #0000001f,
    inset 0 -16px 18px #00000024,
    0 32px 60px -18px #000000c9,
    0 90px 90px -40px #0000007a;
}
#deviceShadow{width:calc(var(--dw,380px) * .86);height:26px;margin-top:2px;border-radius:50%;
  background:radial-gradient(closest-side,#000000b0,#00000000);filter:blur(6px);}

/* corner screws */
.screw{position:absolute;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d8d2c2,#8e8878 60%,#655f52);
  box-shadow:inset 0 -1px 2px #00000066;}
.screw::after{content:"";position:absolute;left:15%;right:15%;top:44%;height:1.6px;background:#4b463c;transform:rotate(38deg);}
.sc-tl{top:10px;left:10px;} .sc-tr{top:10px;right:10px;}
.sc-bl{bottom:10px;left:12px;} .sc-br{bottom:10px;right:12px;}

/* ---------- cartridge bay ---------- */
#cartBay{position:relative;height:46px;display:flex;align-items:flex-start;justify-content:center;padding-top:13px;}
.bay-etch{position:absolute;bottom:0;font-family:var(--display);letter-spacing:.34em;font-size:8px;color:#a99f87;
  text-shadow:0 1px 0 #fff8;transform:scaleY(1.05);}
#slotMouth{position:relative;width:56%;max-width:220px;height:19px;border-radius:5px 5px 2px 2px;
  background:linear-gradient(#22282b,#141a1c 65%,#0b1012);
  box-shadow:inset 0 3px 4px #000000e0,inset 0 -1px 1px #ffffff14,0 1px 0 #ffffffb8;}
#slotShadow{position:absolute;inset:3px 6px auto;background:#000000c7;height:4px;border-radius:2px;filter:blur(1px);}
#insertedTab{position:absolute;left:50%;top:-13px;transform:translateX(-50%);display:block;
  width:74%;height:14px;border-radius:4px 4px 1px 1px;
  background:linear-gradient(#75797e,#4c5054);box-shadow:inset 0 1px 1px #ffffff3d,0 2px 4px #00000066;}
#insertedTab b{position:absolute;inset:2px 4px;border-radius:1px;
  background:linear-gradient(#efe3c8,#dccfae);opacity:.92;}
#ejectLever{position:absolute;left:6%;top:16px;width:58px;height:15px;border-radius:8px;
  background:linear-gradient(#8b8574,#625d4e);box-shadow:inset 0 1px 1px #fff8,0 2px 3px #00000045;
  transition:transform .12s ease,filter .12s;}
#ejectLever i{font-style:normal;font-family:var(--display);font-size:7.5px;letter-spacing:.28em;color:#332f26;text-shadow:0 1px 0 #fff7;}
#ejectLever:hover{filter:brightness(1.07);}
#ejectLever:active{transform:translateY(2px) scaleX(.97);}
#flightLayer{position:fixed;inset:0;pointer-events:none;z-index:70;}

/* ---------- screen module ---------- */
#screenModule{margin:6px 12px 4px;border-radius:18px;padding:10px 12px 12px;
  background:linear-gradient(160deg,#394247,#272f33 55%,#1c2327);
  box-shadow:inset 0 2px 2px #ffffff26,inset 0 -6px 14px #00000066,0 2px 0 #ffffff54;}
.bezel-brand{display:flex;align-items:center;gap:8px;padding:1px 2px 8px;}
.brand-mark{font-family:var(--display);letter-spacing:.42em;font-size:13px;color:#cdd6cf;
  text-shadow:0 1px 1px #000c,0 -1px 0 #ffffff22;transform:scaleY(1.06);}
.brand-model{font-family:var(--display);letter-spacing:.2em;font-size:8px;color:#8b978f;
  transform:scaleY(1.05);}
.power-led,.msg-led{margin-left:auto;width:8px;height:8px;border-radius:50%;background:#12181a;
  box-shadow:inset 0 0 2px #000,0 0 0 2px #111517;}
.msg-led{margin-right:8px;}
.power-led{margin-right:4px;}
.power-led.on{background:#61e07f;box-shadow:0 0 8px #45d96eaa,0 0 2px #d0ffd9,inset 0 0 2px #093d1b;}
.msg-led.save-flash{animation:msgblink .5s steps(2,start) 1;background:#ffc23d;box-shadow:0 0 8px #ffb02d;}
@keyframes msgblink{to{visibility:hidden;}}

#lcdFrame{border-radius:12px;background:#101619;padding:8px;
  box-shadow:inset 0 0 0 2px #00000085,0 1px 0 #ffffff2e;}
#lcdGlass{position:relative;border-radius:8px;background:#0a0f10;
  padding:clamp(5px,1.1vw,9px);box-shadow:inset 0 4px 10px #000000d9;}
#lcd{position:relative;aspect-ratio:3/2;border-radius:4px;overflow:hidden;background:#08100d;
  filter:brightness(calc(.45 + var(--bright,.55)*.62)) saturate(1.06);
  transition:filter .3s ease;}
.lcd-scanlines{position:absolute;inset:0;pointer-events:none;z-index:9;
  background:repeating-linear-gradient(#0000 0 2px,#00000029 2px 3px),repeating-linear-gradient(90deg,#0000 0 2px,#00000012 2px 3px);
  mix-blend-mode:multiply;transition:opacity .2s;}
.lcd-scanlines.dimmed{opacity:.35;}
.glass-sheen{position:absolute;inset:0;pointer-events:none;z-index:10;border-radius:4px;
  background:linear-gradient(115deg,#ffffff10 0%,#ffffff05 16%,transparent 34%),linear-gradient(300deg,#ffffff08 0 12%,transparent 20%);
  mix-blend-mode:screen;}
.lcd-shadowbox{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 22px #000000b8;border-radius:8px;}

.scr-off{position:absolute;inset:0;background:
  linear-gradient(105deg,#17221f,#0d1513 60%,#131c19);
  display:none;place-items:center;}
.scr.off-mode .scr-off{display:grid;}
.ghost-panel{width:64%;aspect-ratio:5/4;border-radius:3px;border:1px solid #20302b;
  background:linear-gradient(120deg,#16221f80,#0d1513 70%);
  opacity:.5;box-shadow:inset 0 0 14px #000;}
#lcd powering-on .scr-off{opacity:0;}

.under-lcd-row{display:flex;align-items:center;gap:8px;padding:8px 2px 0;}
.etch-unit{font-family:var(--display);letter-spacing:.3em;font-size:7.5px;color:#77837c;transform:scaleY(1.05);}
.mini-fader{margin-left:auto;display:flex;align-items:center;gap:4px;color:#95a19a;}
.mini-fader + .mini-fader{margin-left:0;}
.mini-fader input[type=range]{appearance:none;-webkit-appearance:none;width:64px;height:14px;background:transparent;}
.mini-fader input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(#0c1113,#202a2d);box-shadow:inset 0 1px 2px #000;}
.mini-fader input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:14px;margin-top:-5px;border-radius:2px;
  background:linear-gradient(#e9e2cf,#a9a189);box-shadow:0 1px 2px #000a;}
.mini-fader input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#161d20;}
.mini-fader input[type=range]::-moz-range-thumb{width:9px;height:14px;border:0;border-radius:2px;background:#cfc7b0;box-shadow:0 1px 2px #000a;}
.scan-toggle{font-family:var(--display);font-size:7.5px;letter-spacing:.22em;color:#68746d;
  border:1px solid #37423e;border-radius:3px;padding:2.5px 6px;transform:scaleY(1.08);transition:.15s;}
.scan-toggle.on{color:#ffe2ac;background:#2c3632;border-color:#5c6c60;box-shadow:0 0 8px #ffde9c22 inset;}

/* boot canvas fills lcd */
#bootCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;image-rendering:pixelated;}

.sys-screen{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);text-align:center;background:radial-gradient(90% 80% at 50% 30%,#122019,#070d0b 80%);}
.sys-screen.show{display:flex;}
.sys-title{letter-spacing:.4em;color:#cfe3cf;font-size:15px;transform:scaleY(1.1);text-shadow:0 2px 0 #00000090;}
.sys-sub{font-family:ui-monospace,Menlo,monospace;font-size:9px;letter-spacing:.14em;color:#79c98f;}
.sys-blink{animation:sysBlink 1.1s steps(2,start) infinite;}
@keyframes sysBlink{to{visibility:hidden;}}
.slot-icon{width:84px;height:30px;border:2px solid #79c98f;border-radius:4px;position:relative;opacity:.75;}
.slot-icon::after{content:"";position:absolute;inset:5px 14px;border:1.5px dashed #79c98f66;border-radius:2px;}

/* CRT-ish off animation applied to whole lcd content */
@keyframes crtOff{
  0%{transform:scaleY(1);filter:brightness(1);}
  62%{transform:scaleY(.06);filter:brightness(2.4);}
  80%{transform:scale(.5,.04);filter:brightness(3);}
  100%{transform:scale(.002,.002);filter:brightness(4);}
}
.crt-off{animation:crtOff .5s cubic-bezier(.4,0,.9,.4) forwards;}
@keyframes powerFlicker{
  0%{opacity:0;} 8%{opacity:.9;} 14%{opacity:.2;} 22%{opacity:1;}
  30%{opacity:.55;} 41%{opacity:1;} 100%{opacity:1;}
}
.powering{animation:powerFlicker .8s steps(1,end) both;}

/* ---------- control deck ---------- */
#deck{display:flex;align-items:center;justify-content:space-between;padding:10px 26px 4px;gap:6px;}

#dpad{position:relative;width:31%;min-width:104px;aspect-ratio:1.16;display:block;filter:drop-shadow(0 4px 5px #00000052);}
.dbtn{position:absolute;width:36%;height:37%;border:0;transition:transform .06s;
  background:linear-gradient(#f6efe0,#ddd3ba 70%,#c8bea5);
  box-shadow:inset 0 2px 2px #fffdf3,inset 0 -4px 5px #00000026,-1px 0 0 #b3a98e,1px 0 0 #b3a98e;}
.d-up{left:32%;top:0;border-radius:8px 8px 2px 2px;clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),0 calc(100% - 6px));border-radius:9px;}
.d-down{left:32%;bottom:0;border-radius:2px 2px 9px 9px;clip-path:polygon(0 6px,100% 6px,100% 100%,0 100%);border-radius:9px;}
.d-left{left:0;top:31.5%;width:33%;height:37%;border-radius:9px;}
.d-right{right:0;top:31.5%;width:33%;height:37%;border-radius:9px;}
.dbtn i{position:absolute;inset:0;margin:auto;width:0;height:0;border-style:solid;opacity:.55;}
.d-up i{border-width:0 7px 9px;border-color:transparent transparent #8f8871 transparent;top:-24%;}
.d-down i{border-width:9px 7px 0;border-color:#8f8871 transparent transparent transparent;bottom:-24%;}
.d-left i{border-width:7px 0 7px 9px;border-color:transparent transparent transparent #8f8871;left:-16%;}
.d-right i{border-width:7px 9px 7px 0;border-color:transparent #8f8871 transparent transparent;right:-16%;}
.dpad-core{position:absolute;left:30%;top:29%;width:40%;height:42%;
  background:linear-gradient(#eee5d1,#d6ccb2);box-shadow:inset 0 -3px 5px #0000001f,0 0 0 1px #b3a98e55;}
.dpad-core b{position:absolute;left:34%;top:32%;width:32%;height:36%;border-radius:50%;
  background:radial-gradient(circle at 40% 32%,#c9bfa5,#aca280 70%);box-shadow:inset 0 2px 3px #00000042;}
.dbtn.pressed{transform:translateY(2px);filter:brightness(.94);}
.d-up.pressed{clip-path:none;}

#midCol{display:flex;flex-direction:column;gap:9px;align-items:center;}
.pillbtn{padding:4px 10px;border-radius:10px;background:linear-gradient(#5b656a,#3d474c 60%,#2c3439);
  box-shadow:inset 0 1px 1px #ffffff2b,inset 0 -3px 5px #0000004d,0 3px 4px #00000048;transition:transform .06s;}
.pillbtn b{display:block;font-family:var(--display);font-weight:400;font-size:8px;letter-spacing:.24em;color:#dfe6df;text-shadow:0 1px 1px #000;}
.pillbtn em{display:block;font-style:normal;font-size:6px;letter-spacing:.3em;color:#93a29a;margin-top:1px;}
.pillbtn:active,.pillbtn.pressed{transform:translateY(2px);filter:brightness(.9);}

#faceBtns{position:relative;width:30%;min-width:104px;height:64px;}
.face{position:absolute;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#e96d54,#c1402f 58%,#8e2417 100%);
  color:#ffe9de;font-family:var(--display);font-size:17px;letter-spacing:.06em;
  box-shadow:inset 0 2px 2px #ffffff59,inset 0 -5px 7px #00000045,0 4px 7px #00000057,0 0 0 4px #b9ae9366;
  transition:transform .06s,filter .06s;}
.face span{text-shadow:0 1px 1px #00000088;}
.b-a{right:2%;top:0;}
.b-b{right:52%;bottom:0;}
.face:active,.face.pressed{transform:translateY(3px);filter:brightness(.88);box-shadow:inset 0 3px 6px #00000066,0 1px 2px #00000057,0 0 0 4px #b9ae9366;}

/* ---------- chin / speaker / power ---------- */
#chinRow{display:flex;align-items:center;justify-content:space-between;padding:8px 22px 2px;}
.grille{opacity:.9;}
.pw-mark{font-family:var(--display);font-size:7.5px;letter-spacing:.24em;color:#9a9078;}
.pw-mark:not(.on-lbl){text-align:right;}
#powerRow{display:flex;align-items:center;gap:7px;}
#powerSwitch{--pwx:0px;position:relative;width:74px;height:22px;border-radius:12px;
  background:linear-gradient(#b4ab92,#948b73);box-shadow:inset 0 2px 4px #00000038,0 1px 0 #ffffff8c;transition:--pwx .2s;}
.pw-track{position:absolute;inset:3px;border-radius:9px;background:linear-gradient(#151b1d,#232b2e);overflow:hidden;box-shadow:inset 0 2px 3px #000000a6;}
.pw-track::after{content:"";position:absolute;top:0;bottom:0;width:50%;transition:left .16s ease;
  background:linear-gradient(#ff9a3c,#d96a1b);left:0;box-shadow:0 0 9px #ff8b2f88;opacity:.9;}
#powerSwitch[aria-checked="true"] .pw-track::after{left:50%;box-shadow:none;}
.pw-knob{position:absolute;left:calc(var(--side,0) * 50% + var(--side,0) * 2px);top:-1px;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fbf6ea,#cdc4aa 62%,#a79d83);box-shadow:0 2px 4px #00000063,inset 0 -2px 3px #00000026;
  transition:left .16s ease;pointer-events:none;}
#powerSwitch[aria-checked="false"] .pw-knob{--side:0;left:0;}
#powerSwitch[aria-checked="true"] .pw-knob{--side:1;left:calc(100% - 26px);}
#powerSwitch:active .pw-knob{filter:brightness(.95);}

/* device shrinks slightly on tiny heights */
@media (max-width:560px){
  #dpad{min-width:128px;}
  .face{width:47px;height:47px;}
}
@media (max-height:600px){
  #device{--dw:clamp(300px, min(80vw,47vh), 330px);}
  .face{width:38px;height:38px;}
}
@media (prefers-reduced-motion:reduce){
  .cart.in-flight,.cart.returning{transition-duration:.01s;}
  .pw-track::after,.pw-knob{transition-duration:.01s;}
}