/* The hardware details follow E-9999 and DMG-01 references; the screen is enlarged for play. */
.main-layout { padding: 18px; overflow: hidden; }
.console-area { width: var(--console-width, min(calc(100vw - 36px), calc((100svh - 42px) * .62))); perspective: 1400px; }
.device {
  --shell-light: #efd467; --shell-mid: #dfbf4d; --shell-dark: #c5a03b; --shell-ink: #373527;
  --tilt-x: 0deg; --tilt-y: 0deg; --light-x: 35%; --light-y: 20%; --shadow-x: 8px;
  display: flex; flex-direction: column; padding: 3% 4.4% 3.5%;
  border-radius: 24px 24px 46px 46px; border-color: #a9893f;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style: preserve-3d;
  transition: transform 130ms ease-out; touch-action: none;
  background: radial-gradient(ellipse at var(--light-x) var(--light-y), #ffffff38, transparent 62%), linear-gradient(112deg, var(--shell-light), var(--shell-mid) 55%, var(--shell-dark));
  box-shadow: inset 1px 2px 2px #fff9, inset -2px 0 3px #74612d44, inset 0 -5px 1px #7b672c55, inset 0 -9px 8px #92762a33, var(--shadow-x) 12px 0 -5px #9f8d53, calc(var(--shadow-x) * 2) 27px 45px #0008, 0 0 70px #667ecb0d;
}
.device::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at var(--light-x) var(--light-y), #ffffff14, transparent 58%); z-index: 5; }
.shell-grain { opacity: .37; }
.shell-wear { position: absolute; inset: 3px; pointer-events: none; border-radius: inherit; opacity: .6; background: linear-gradient(112deg, transparent 5%, #fff5 5.1%, transparent 5.25%), linear-gradient(35deg, transparent 92%, #554b3b28 92.15%, transparent 92.3%); box-shadow: inset 2px 1px 1px #fff5, inset -1px -1px 2px #463f2d22; }
.hardware-rail { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; height: 5.5cqw; margin: 0 .8cqw 2cqw; order: 0; color: #5c5335; }
.theme-switch { display: flex; gap: 1px; padding: 2px; border-radius: 5px; background: #6d5c3326; box-shadow: inset 0 1px 2px #3b372233, 0 1px #fff5; }
.theme-switch button { position: relative; min-height: 17px; border: 0; border-radius: 3px; padding: 2px 6px; background: transparent; font: bold clamp(7px, 1.9cqw, 9px)/1.4 Arial, sans-serif; letter-spacing: .4px; color: #60552f; }
.theme-switch button[aria-pressed=true] { color: #373324; background: linear-gradient(#ecda92, #cab66f); box-shadow: 0 1px 2px #51452755, inset 0 1px #fff9; }
.theme-switch button::after { content: ""; position: absolute; inset: -5px 0; }
.power-engraving { font: 1.8cqw Arial, sans-serif; letter-spacing: .4px; text-shadow: 0 1px #fff5; opacity: .65; }
#motion-button { border: 0; padding: 4px 2px; display: flex; align-items: center; gap: 4px; background: none; font: bold 2.1cqw Arial, sans-serif; }
#motion-button i { width: 4px; height: 4px; border-radius: 50%; background: #5e7644; }
#motion-button[aria-pressed=false] i { background: #8d8879; }
.gameboy-only { display: none !important; }
.bezel { position: relative; order: 1; padding: 3.3cqw 3cqw 2.2cqw; border: 1px solid #40392c; border-radius: 9px 9px 20px 20px; background: linear-gradient(120deg, #34382d, #292e25 68%, #3d4034); box-shadow: inset 0 1px 2px #151a10bb, 0 1px #fff8, 0 -1px 2px #77612d; }
.bezel-heading { margin: 0 .4cqw 2cqw; color: #d9cd79; font: bold 2.5cqw Arial, sans-serif; letter-spacing: 1.5px; }
.bezel-heading span:last-child { font-size: 2cqw; letter-spacing: .5px; }
.lcd { border-radius: 2px; border: 2px solid #161e12; background: #a4ae80; box-shadow: inset 3px 4px 9px #24301c66, 0 1px #a2a785; }
.screen-glass { background: radial-gradient(ellipse at var(--light-x) var(--light-y), #ecf4c62e, transparent 58%), repeating-linear-gradient(0deg, transparent 0 2px, #1c391909 3px); }
.bezel-footer { margin-top: 2cqw; font-size: 1.7cqw; color: #c4bd83; }
.device-brand { order: 2; margin: 3cqw 1cqw 1cqw; min-height: 5cqw; }
.device-brand > span:first-child { font-size: 5.1cqw; font-style: normal; font-weight: 900; letter-spacing: -.8px; color: #303327; }
.device-brand b { font-weight: 900; }
.model-badge { font-size: 3.2cqw; padding: .4cqw 1.2cqw; border: 0; box-shadow: none; font-weight: 800; }
.utility-controls { order: 3; padding: 2.2cqw 13cqw 0; gap: 8cqw; position: relative; z-index: 2; }
.utility { gap: 1.5cqw; }
.utility > span { font-size: 2cqw; font-weight: 700; }
.utility-button { height: 5.3cqw; width: 8.5cqw; border: 1px solid #9c7d29; border-radius: 50%; background: linear-gradient(#e6cd6b, #c29e3a); box-shadow: 0 2px 0 #806a30, 0 3px 2px #58451d55, inset 0 1px #fff6; }
.utility-button svg { width: 3cqw; height: 3cqw; stroke: #595032; }
.start-button svg { fill: #595032; }
.play-controls { order: 4; padding: 1.3cqw 7cqw 0; }
.dpad { width: 33cqw; height: 31cqw; padding: 1.8cqw; }
.dpad-well { background: transparent; box-shadow: none; }
.dpad-base { display: none; }
.direction { border: 1px solid #a38329; border-radius: 50% !important; background: linear-gradient(#ead27b, #caa647); box-shadow: 0 2px 0 #877033, 0 3px 3px #5a481c55, inset 0 1px #fff8 !important; color: #5b502e; font-size: 2.6cqw; text-shadow: 0 1px #f6e4a070; }
.dpad-center { background: none; }.dpad-center::before { display: none; }
.direction:active, .direction.is-pressed { transform: translateY(2px); box-shadow: inset 0 1px 2px #71571b55 !important; }
.action-control { width: 28cqw; height: 31cqw; padding-top: 2cqw; }
.a-control { display: flex; flex-direction: column; align-items: center; }
.rotate-button { width: 17.5cqw; height: 17.5cqw; font-size: 8.5cqw; color: #514429; background: radial-gradient(circle at 35% 24%, #f0d679, #d6b34c 65%, #b99135); border-color: #a68530; text-shadow: 0 1px #f7e4a8; box-shadow: 0 4px 0 #8f7531, 0 5px 4px #58451a66, inset 0 2px 2px #ffedbba0, 0 0 0 4px #a48a3b38; }
.rotate-button:active, .rotate-button.is-pressed { box-shadow: 0 1px 0 #8f7531, inset 0 1px 3px #70561b55, 0 0 0 4px #a48a3b38; }
.rotate-label { margin-top: 2.1cqw; font-size: 2cqw; letter-spacing: .6px; transform: none; }
.rotate-orbit { font-size: 5cqw; right: 0; top: 1cqw; }
.ab-well { display: none; }
.device-bottom { order: 5; position: relative; min-height: 6cqw; padding: 1cqw 3cqw 1.2cqw; justify-content: flex-end; pointer-events: none; }
.device-serial { font-size: 1.7cqw; letter-spacing: .9px; }
.speaker { gap: 1cqw; padding-right: 2cqw; transform: none; }
.speaker i { width: 1cqw; height: 5cqw; background: #8f782f; box-shadow: inset 1px 1px 1px #53451c99, 1px 1px #ffe6a477; }
.speaker i:first-child, .speaker i:last-child { height: 3.8cqw; margin-top: .6cqw; }
.shell-seam { bottom: 9px; }
.volume-wheel { position: absolute; right: -7px; top: 59%; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--shell-ink); }
.volume-wheel span { position: absolute; right: 8px; top: -11px; font: 1.55cqw Arial, sans-serif; writing-mode: vertical-rl; }
.volume-wheel input { appearance: none; writing-mode: vertical-lr; direction: rtl; width: 7px; height: 32px; margin: 0; border: 1px solid #24241e; border-radius: 3px; background: repeating-linear-gradient(0deg, #252522 0 2px, #6d6d63 2px 3px); cursor: ns-resize; }
.volume-wheel input::-webkit-slider-thumb { appearance: none; width: 9px; height: 9px; border-radius: 1px; background: #494a40; border: 1px solid #797a6b; }
.volume-wheel input::-moz-range-thumb { width: 8px; height: 8px; border-radius: 1px; background: #494a40; border: 1px solid #797a6b; }

/* Nintendo DMG-01: grey shell, asymmetrical corner, smoked bezel, wine red A/B. */
.device[data-theme=gameboy] { --shell-light: #d9d8cd; --shell-mid: #c6c6ba; --shell-dark: #b1b2a5; --shell-ink: #343d76; border-color: #95968c; border-radius: 22px 22px 88px 22px; padding-bottom: 3%; background: radial-gradient(ellipse at var(--light-x) var(--light-y), #ffffff40, transparent 65%), linear-gradient(115deg, var(--shell-light), var(--shell-mid) 64%, var(--shell-dark)); box-shadow: inset 1px 2px 2px #fffc, inset -2px 0 3px #4b4f4340, inset 0 -5px 1px #73776b55, inset 0 -9px 7px #85897733, var(--shadow-x) 12px 0 -5px #7f847a, calc(var(--shadow-x) * 2) 27px 45px #0009, 0 0 70px #667ecb0d; }
[data-theme=gameboy] .brick-only { display: none !important; }
[data-theme=gameboy] .gameboy-only { display: block !important; }
[data-theme=gameboy] .hardware-rail { color: #727568; }
[data-theme=gameboy] .theme-switch { background: #5b615528; }
[data-theme=gameboy] .theme-switch button { color: #61695a; }
[data-theme=gameboy] .theme-switch button[aria-pressed=true] { color: #353f6e; background: linear-gradient(#deded2, #b6baaa); }
[data-theme=gameboy] .bezel { padding: 7cqw 3.8cqw 3.5cqw 7.2cqw; border-radius: 12px 12px 43px 12px; border-color: #55575b; background: linear-gradient(130deg, #7a7a80, #63636b 78%, #707077); box-shadow: inset 0 1px 1px #cac9c377, 0 1px #e5e5d5, 0 -1px 2px #74776a; }
[data-theme=gameboy] .bezel-heading { display: flex !important; position: absolute; top: 2.3cqw; left: 4cqw; right: 4cqw; justify-content: flex-end; font: 1.9cqw Arial, sans-serif; letter-spacing: .45px; color: #d4d5d0; padding: 0; }
[data-theme=gameboy] .bezel-heading::before, [data-theme=gameboy] .bezel-heading::after { content: ""; position: absolute; top: 0; height: 1.5cqw; border-top: .45cqw solid #6f3651; border-bottom: .45cqw solid #303b6d; }
[data-theme=gameboy] .bezel-heading::before { left: 0; width: 10cqw; }
[data-theme=gameboy] .bezel-heading::after { right: 0; width: 4cqw; }
[data-theme=gameboy] .bezel-heading span:last-child { margin-right: 6cqw; font-size: 1.95cqw; letter-spacing: .15px; }
[data-theme=gameboy] .bezel-footer { display: none; }
[data-theme=gameboy] .battery-mark { position: absolute; left: 1cqw; top: 31%; color: #d4d4cb; text-align: center; font: 1.15cqw Arial, sans-serif; }
.battery-mark i { display: block; height: 1.7cqw; width: 1.7cqw; margin: 0 auto 1.2cqw; border: 1px solid #651e28; border-radius: 50%; background: #ca343c; box-shadow: 0 0 5px #e2403566, inset 0 1px 1px #ff8e68; }
[data-theme=gameboy] .lcd { background: #9aa960; border-color: #3b4233; box-shadow: inset 4px 6px 12px #2e3d2566, 0 1px #aaa98f77; }
[data-theme=gameboy] .lcd canvas { aspect-ratio: 10 / 9; image-rendering: pixelated; filter: none; }
[data-theme=gameboy] .screen-glass { background: radial-gradient(ellipse at var(--light-x) var(--light-y), #dae4b110, transparent 62%), repeating-linear-gradient(0deg, transparent 0 calc(var(--lcd-pixel) - .25px), #263b2009 calc(var(--lcd-pixel) - .25px) var(--lcd-pixel)), repeating-linear-gradient(90deg, transparent 0 calc(var(--lcd-pixel) - .25px), #263b2009 calc(var(--lcd-pixel) - .25px) var(--lcd-pixel)); box-shadow: inset 4px 6px 12px #283d265e, inset -1px -1px 3px #d5dfaa33; }
[data-theme=gameboy] .device-brand { margin: 2.7cqw .7cqw 1.5cqw; min-height: 5.5cqw; }
[data-theme=gameboy] .nintendo-wordmark { font: bold 3.7cqw Arial, sans-serif; color: #303d73; letter-spacing: -.4px; text-shadow: 0 1px #ffffff38; }
.nintendo-wordmark b { font-size: 5.4cqw; font-style: italic; font-weight: 700; letter-spacing: -.7px; margin-left: .5cqw; }
.nintendo-wordmark sup { font: 2cqw Arial, sans-serif; }
[data-theme=gameboy] .play-controls { order: 3; padding: 4cqw 1.5cqw 0; }
[data-theme=gameboy] .dpad { width: 33cqw; height: 31cqw; padding: 1.5cqw; }
[data-theme=gameboy] .dpad-well { inset: -.3cqw; background: linear-gradient(130deg, #b3b5a63b, #e6e6d633); box-shadow: inset 0 1px 2px #6f72642c, 0 1px #ffffe14a; }
[data-theme=gameboy] .dpad-base { display: block; inset: 1.5cqw; background: #181a19; transform: translateY(3px); }
[data-theme=gameboy] .direction, [data-theme=gameboy] .dpad-center { border: 0; color: #464744; background: linear-gradient(135deg, #343735, #222623); text-shadow: 0 -1px #131613; font-size: 2.3cqw; }
[data-theme=gameboy] .direction { box-shadow: inset 0 1px 1px #93958c77 !important; border-radius: 0 !important; }
[data-theme=gameboy] .direction.up { border-radius: 3px 3px 0 0 !important; background: repeating-linear-gradient(0deg, transparent 0 5px, #a0a29413 5px 6px), linear-gradient(135deg, #343735, #222623); }
[data-theme=gameboy] .direction.down { border-radius: 0 0 3px 3px !important; }
[data-theme=gameboy] .direction.left { border-radius: 3px 0 0 3px !important; }
[data-theme=gameboy] .direction.right { border-radius: 0 3px 3px 0 !important; }
[data-theme=gameboy] .dpad-center { background: #2c302b; }
[data-theme=gameboy] .dpad-center::before { display: block; width: 6cqw; height: 6cqw; background: radial-gradient(circle at 65% 65%, #44483e, #20251d); box-shadow: inset 0 1px 2px #141b11, 0 1px #7b826566; }
[data-theme=gameboy] .action-control { width: 43cqw; height: 31cqw; padding: 0; display: block; }
[data-theme=gameboy] .ab-well { display: block; position: absolute; inset: 4cqw -1cqw 6cqw 0; border-radius: 30px; transform: rotate(-25deg); background: linear-gradient(145deg, #afb2a733, #eff0df55); box-shadow: inset 1px 2px 2px #6d736033, 0 1px #eff1db77; }
[data-theme=gameboy] .a-control, [data-theme=gameboy] .b-control { position: absolute; text-align: center; color: #303d73; font: bold 3.6cqw Arial, sans-serif; }
[data-theme=gameboy] .a-control { right: 0; top: 1.3cqw; }
[data-theme=gameboy] .b-control { left: 2cqw; top: 10.2cqw; }
[data-theme=gameboy] .rotate-button, .b-button { width: 15.8cqw; height: 15.8cqw; padding: 0; border: 1px solid #67243c; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #a3365e, #88234a 60%, #6b1c3d); box-shadow: 0 4px 0 #4e2331, 0 5px 4px #32312b66, inset 0 1px 2px #df86a477, inset -2px -2px 2px #5b233d55; }
[data-theme=gameboy] .rotate-button:active, [data-theme=gameboy] .rotate-button.is-pressed, .b-button:active, .b-button.is-pressed { transform: translateY(3px); box-shadow: 0 1px 0 #4e2331, inset 0 1px 3px #4d142f55; }
.a-label, .b-control > span { display: block; margin-top: 1.6cqw; transform: rotate(-25deg); }
[data-theme=gameboy] .utility-controls { order: 4; align-self: center; width: 35cqw; padding: 1.5cqw 0 0; gap: 5cqw; transform: translateX(-7cqw) rotate(-22deg); }
[data-theme=gameboy] .utility { gap: 1.8cqw; }
[data-theme=gameboy] .utility > span { font-size: 2.4cqw; letter-spacing: .6px; }
[data-theme=gameboy] .utility-button { width: 13cqw; height: 4cqw; border: 1px solid #6c7065; border-radius: 15px; background: linear-gradient(#9b9e91, #7a7f70); box-shadow: 0 2px 0 #535c4c, 0 3px 2px #323c2944, inset 0 1px #d8dbc399, 0 0 0 2px #b5b8a866; }
[data-theme=gameboy] .select-control svg, [data-theme=gameboy] .start-control svg { display: none; }
[data-theme=gameboy] .sound-control { position: absolute; left: -23cqw; top: -7cqw; transform: rotate(22deg); }
[data-theme=gameboy] .sound-control .utility-button { width: 5cqw; height: 5cqw; border-radius: 50%; }
[data-theme=gameboy] .sound-control > span { font-size: 1.5cqw; letter-spacing: 0; }
[data-theme=gameboy] .sound-control svg { width: 3cqw; height: 3cqw; }
[data-theme=gameboy] .device-bottom { min-height: 13cqw; padding-top: 0; }
[data-theme=gameboy] .speaker { position: absolute; right: 0; bottom: 2.5cqw; gap: 1.7cqw; padding-right: 4cqw; transform: rotate(-27deg); }
[data-theme=gameboy] .speaker i { width: 1.55cqw; height: 11.5cqw; margin: 0; background: #767c70; box-shadow: inset 1px 2px 1px #343f2acc, 1px 1px #ecefd4cc; }
[data-theme=gameboy] .speaker i:first-child, [data-theme=gameboy] .speaker i:last-child { height: 9.8cqw; margin-top: 1.7cqw; }
.phones-label { position: absolute; bottom: -.2cqw; left: 37%; font: 1.5cqw Arial, sans-serif; color: #7d8570; text-shadow: 0 1px #f2f3db; }
[data-theme=gameboy] .shell-seam { left: 3%; right: 4%; bottom: 5px; background: #6870572a; }
[data-motion=off] { transform: none !important; transition: none !important; }
@media (max-width: 620px) { .main-layout { padding: 18px 14px; } .theme-switch button { padding-left: 5px; padding-right: 5px; } }
@media (prefers-reduced-motion: reduce) { .device { transform: none !important; transition: none !important; } }