/* ---------- photographed console (v10) ---------- */
.gbx{position:relative;width:min(440px,90vw);container-type:inline-size;user-select:none;-webkit-user-select:none;touch-action:manipulation;outline:none;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 34px 38px rgba(0,0,0,.55)) drop-shadow(0 6px 8px rgba(0,0,0,.35));transform:rotate(-2deg)}
.gbx:focus-visible{outline:2px solid var(--brass);outline-offset:8px;border-radius:24px}
.gbx-img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.gbx button{position:absolute;border:0;padding:0;margin:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none}
.gbx-screen{position:absolute;overflow:hidden;background:#8f9a6c;border-radius:.4cqw;display:grid;place-items:center;box-shadow:inset 0 .6cqw 1.4cqw rgba(0,0,0,.55)}
.gbx.on .gbx-screen{background:#9bbc0f}
.gbx-screen canvas{height:100%;width:auto;aspect-ratio:160/144;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.gbx-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.045) 0 1px,transparent 1px 3px),linear-gradient(128deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 34%),radial-gradient(120% 90% at 50% 125%,rgba(0,0,0,.2),rgba(0,0,0,0) 60%)}
.gbx-led{position:absolute;border-radius:50%;background:transparent;transition:background .2s,box-shadow .2s}
.gbx.on .gbx-led{background:radial-gradient(circle at 40% 35%,#ffc1bb,#ff3b30 50%,#b3160f);box-shadow:0 0 1.6cqw .3cqw rgba(255,59,48,.85)}
.gbx-switch{border-radius:1cqw;background:linear-gradient(#2a2725,#3b3734)!important;box-shadow:inset 0 .3cqw .5cqw rgba(0,0,0,.6),0 .15cqw 0 rgba(255,255,255,.6)}
.gbx-switch .knob{position:absolute;top:14%;left:6%;width:42%;height:72%;border-radius:.8cqw;background:linear-gradient(#a59c8f,#6f675d);box-shadow:inset 0 .15cqw 0 rgba(255,255,255,.4),0 .2cqw .3cqw rgba(0,0,0,.45);transition:left .18s}
.gbx-switch[aria-pressed="true"] .knob{left:52%}
.gbx-lbl{position:absolute;text-align:center;font:700 2.3cqw/1 var(--sans);letter-spacing:.14em;color:#6f5f4c;text-shadow:0 .12cqw 0 rgba(255,255,255,.6);pointer-events:none;white-space:nowrap}
.gbx-power-lbl{font-size:1.5cqw;color:#a1968a;text-shadow:none;letter-spacing:.1em}
.gbx-offon{text-align:left;font-size:1.9cqw}
.gbx-ab{font-size:3cqw;letter-spacing:.06em}
.gbx-ss{font-size:2.1cqw}
.gbx-brand{position:absolute;display:flex;align-items:baseline;gap:1.4cqw;color:#4a3c30;text-shadow:0 .12cqw 0 rgba(255,255,255,.55);pointer-events:none}
.gbx-brand em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:6.2cqw;letter-spacing:-.01em}
.gbx-brand span{font:700 2.3cqw/1 var(--sans);letter-spacing:.32em}
.gbx-dpad{position:absolute}
.gbx-dpad .gbk{position:absolute}
.gbx-dpad .dp-up{left:30%;top:-6%;width:40%;height:42%}
.gbx-dpad .dp-down{left:30%;bottom:-6%;width:40%;height:42%}
.gbx-dpad .dp-left{top:30%;left:-6%;height:40%;width:42%}
.gbx-dpad .dp-right{top:30%;right:-6%;height:40%;width:42%}
.gbk.is-down::after{content:"";position:absolute;inset:8%;border-radius:inherit;background:radial-gradient(closest-side,rgba(0,0,0,.32),rgba(0,0,0,.12) 70%,rgba(0,0,0,0));pointer-events:none}
.gbk.round,.gbk.round::after{border-radius:50%}
.gbk.pill,.gbk.pill::after{border-radius:999px}
.gbx-dpad .gbk::after{border-radius:.6cqw}
.gbx-dpad .gbk.is-down::after{inset:14%;background:rgba(0,0,0,.35)}
@media (max-width:760px){.gbx{transform:none;width:min(420px,92vw)}}
@media (prefers-reduced-motion: reduce){.gbx{transform:none}}