:root {
    --page: #0c0c10;
    --lid: #e4000f;
    --lid-hi: #ff3340;
    --base: #e4000f;
    --base-hi: #ff3340;
    --edge: #9b000b;
    --hinge: #7d0009;
    --ink: rgba(255, 255, 255, 0.88);
    --bezel: #1c1c21;
    --bezel-line: rgba(255, 255, 255, 0.08);
    --screen-bg: #0a0a0d;
    --dpad: #2a2a30;
    --shoulder: #b8000c;
    --shoulder-ink: #fff;
    --small: #f3f3f3;
    --btn-ink: #fff;
    --btn-x: #2f5fd0;
    --btn-y: #2e9d4a;
    --btn-a: #c9001a;
    --btn-b: #f2bf00;
    --btn-ring: rgba(255, 255, 255, 0.85);
    --accent: #e4000f;
}

body[data-theme="neon"] {
    --page: #0b0c12;
    --lid: #00b4e0;
    --lid-hi: #3fd2f5;
    --base: #ff3d4f;
    --base-hi: #ff6d7b;
    --edge: #2b2d36;
    --hinge: #1f2028;
    --ink: rgba(20, 20, 26, 0.85);
    --bezel: #1b1c22;
    --dpad: #23242b;
    --shoulder: #1f2028;
    --shoulder-ink: #fff;
    --small: #24252c;
    --btn-ink: #fff;
    --btn-x: #23242b;
    --btn-y: #23242b;
    --btn-a: #23242b;
    --btn-b: #23242b;
    --btn-ring: rgba(255, 255, 255, 0.35);
    --accent: #00b4e0;
}

body[data-theme="famicom"] {
    --page: #16100e;
    --lid: #ece5d3;
    --lid-hi: #f8f3e6;
    --base: #ece5d3;
    --base-hi: #f8f3e6;
    --edge: #b9ae94;
    --hinge: #8b1e2b;
    --ink: #8b1e2b;
    --bezel: #2b2624;
    --dpad: #2a2626;
    --shoulder: #8b1e2b;
    --shoulder-ink: #f3ead6;
    --small: #8b1e2b;
    --btn-ink: #f3ead6;
    --btn-x: #8b1e2b;
    --btn-y: #8b1e2b;
    --btn-a: #b3122a;
    --btn-b: #b3122a;
    --btn-ring: rgba(60, 20, 20, 0.35);
    --accent: #b3122a;
}

body[data-theme="dmg"] {
    --page: #0f0f12;
    --lid: #cbc8c2;
    --lid-hi: #dedbd5;
    --base: #cbc8c2;
    --base-hi: #dedbd5;
    --edge: #96938d;
    --hinge: #7f7c77;
    --ink: #2b2a72;
    --bezel: #5b5e6c;
    --bezel-line: rgba(0, 0, 0, 0.2);
    --dpad: #1f1f24;
    --shoulder: #a19e98;
    --shoulder-ink: #2b2a72;
    --small: #8e8b86;
    --btn-ink: #f0eef0;
    --btn-x: #a1195a;
    --btn-y: #a1195a;
    --btn-a: #a1195a;
    --btn-b: #a1195a;
    --btn-ring: rgba(0, 0, 0, 0.2);
    --accent: #a1195a;
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--page);
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
    position: fixed;
    inset: 0;
}

#shell, #shell > *, .screen, #controls > * {
    position: absolute;
    box-sizing: border-box;
}

#shell {
    inset: 0;
    z-index: 0;
}

.half {
    border-radius: 28px;
    border: 3px solid var(--edge);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), inset 0 -10px 30px rgba(0, 0, 0, 0.12);
    transition: background 0.3s;
}

.lid {
    background: linear-gradient(170deg, var(--lid-hi), var(--lid) 55%);
}

.base {
    background: linear-gradient(170deg, var(--base-hi), var(--base) 55%);
}

.hinge {
    background: linear-gradient(var(--hinge), color-mix(in srgb, var(--hinge) 70%, #000));
    border-radius: 6px;
}

[data-mode="side"] .hinge {
    background: linear-gradient(90deg, var(--hinge), color-mix(in srgb, var(--hinge) 70%, #000));
}

.bezel {
    background: var(--bezel);
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px var(--bezel-line), 0 1px 0 rgba(255, 255, 255, 0.3), 0 -1px 2px rgba(0, 0, 0, 0.25);
}

.speaker {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--edge) 80%, #000) 38%, transparent 42%);
    background-size: 33.3% 50%;
    opacity: 0.8;
}

.led {
    border-radius: 50%;
    background: #39e26b;
    box-shadow: 0 0 6px #39e26b;
}

.screen {
    z-index: 1;
    background: var(--screen-bg);
    overflow: hidden;
    color: #e9e9ee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    image-rendering: pixelated;
}

body.playing .screen {
    display: none;
}

.title-logo {
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.04em;
    font-size: calc(var(--sw, 256px) * 0.16);
    line-height: 1;
}

.title-logo span {
    margin-left: 0.12em;
    padding: 0 0.18em;
    border: 0.08em solid currentColor;
    border-radius: 0.25em;
    color: var(--accent);
    background: #fff;
}

.title-sub {
    margin-top: 0.8em;
    font-size: calc(var(--sw, 256px) * 0.05);
    opacity: 0.6;
}

.load-button {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6em 1.1em;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: calc(var(--sw, 256px) * 0.065);
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}

.load-button:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.load-button input {
    display: none;
}

.themes {
    display: flex;
    gap: 0.6em;
    margin-top: 0.9em;
    font-size: calc(var(--sw, 256px) * 0.06);
}

.swatch {
    width: 1.5em;
    height: 1.5em;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
}

.swatch[aria-checked="true"] {
    border-color: #fff;
    transform: scale(1.12);
}

.swatch[data-theme="red"] { background: #e4000f; }
.swatch[data-theme="neon"] { background: linear-gradient(135deg, #00b4e0 50%, #ff3d4f 50%); }
.swatch[data-theme="famicom"] { background: linear-gradient(135deg, #ece5d3 50%, #8b1e2b 50%); }
.swatch[data-theme="dmg"] { background: linear-gradient(135deg, #cbc8c2 50%, #a1195a 50%); }

.hint {
    margin-top: 0.8em;
    font-size: calc(var(--sw, 256px) * 0.042);
    opacity: 0.5;
}

#controls {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

#controls > * {
    pointer-events: auto;
    touch-action: none;
    cursor: pointer;
}

.shoulder {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--shoulder);
    color: var(--shoulder-ink);
    font-weight: 800;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 2px 0 rgba(0, 0, 0, 0.35);
}

.dpad {
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.12) 0 65%, transparent 70%);
}

.dpad-arm {
    position: absolute;
    background: var(--dpad);
    border-radius: 7%;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 0 3px 0 rgba(0, 0, 0, 0.45);
}

.dpad-h {
    left: 4%;
    right: 4%;
    top: 34%;
    bottom: 34%;
}

.dpad-v {
    top: 4%;
    bottom: 4%;
    left: 34%;
    right: 34%;
}

.dpad-dimple {
    position: absolute;
    left: 42%;
    top: 42%;
    width: 16%;
    height: 16%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.06));
}

.dpad[data-dir~="up"] { transform: perspective(300px) rotateX(9deg); }
.dpad[data-dir~="down"] { transform: perspective(300px) rotateX(-9deg); }
.dpad[data-dir~="left"] { transform: perspective(300px) rotateY(-9deg); }
.dpad[data-dir~="right"] { transform: perspective(300px) rotateY(9deg); }
.dpad[data-dir~="up"][data-dir~="left"] { transform: perspective(300px) rotateX(7deg) rotateY(-7deg); }
.dpad[data-dir~="up"][data-dir~="right"] { transform: perspective(300px) rotateX(7deg) rotateY(7deg); }
.dpad[data-dir~="down"][data-dir~="left"] { transform: perspective(300px) rotateX(-7deg) rotateY(-7deg); }
.dpad[data-dir~="down"][data-dir~="right"] { transform: perspective(300px) rotateX(-7deg) rotateY(7deg); }

.face-btn {
    position: absolute;
    width: 36%;
    height: 36%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--btn-ink);
    font-weight: 800;
    box-shadow: inset 0 0 0 2px var(--btn-ring), inset 0 3px 0 rgba(255, 255, 255, 0.25), 0 3px 0 rgba(0, 0, 0, 0.4);
}

.face-btn[data-key="x"] { left: 32%; top: 0; background: var(--btn-x); }
.face-btn[data-key="y"] { left: 0; top: 32%; background: var(--btn-y); }
.face-btn[data-key="a"] { right: 0; top: 32%; background: var(--btn-a); }
.face-btn[data-key="b"] { left: 32%; bottom: 0; background: var(--btn-b); }

.small {
    display: flex;
    align-items: center;
    gap: 0.45em;
    color: var(--ink);
    font-size: 10px;
    letter-spacing: 0.06em;
}

.small i {
    flex: none;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: var(--small);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 rgba(0, 0, 0, 0.35);
}

.small b {
    font-weight: 700;
}

.small[data-side="left"] {
    flex-direction: row-reverse;
}

.down {
    filter: brightness(0.8);
    translate: 0 2px;
}

.shoulder.down, .face-btn.down, .small.down i {
    box-shadow: inset 0 0 0 2px var(--btn-ring), 0 1px 0 rgba(0, 0, 0, 0.4);
}

.small.down {
    filter: none;
    translate: none;
}

.small.down i {
    filter: brightness(0.75);
    translate: 0 2px;
}

/* EmulatorJS overrides: run full-viewport over the shell, show only the DS screens */
#game {
    position: fixed;
    inset: 0;
    z-index: 5;
}

#game .ejs_parent,
#game .ejs_game,
#game .ejs_canvas_parent {
    background: transparent !important;
}

#game .ejs_canvas {
    left: var(--cv-x) !important;
    top: var(--cv-y) !important;
    width: var(--cv-w) !important;
    height: var(--cv-h) !important;
    object-fit: fill;
    clip-path: var(--cv-clip, none);
    pointer-events: auto !important;
}

#game .ejs_virtualGamepad_parent {
    display: none !important;
}

#game .ejs_loading_text,
#game .ejs_error_text {
    left: var(--bs-cx) !important;
    top: var(--bs-cy) !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    max-width: var(--bs-w);
    text-align: center;
}

#game .ejs_message {
    left: var(--ts-x);
    top: var(--ts-y);
}