.handheld-player { grid-column: 1 / -1; width: 100%; min-width: 0; text-align: center; }
.handheld { position: relative; width: 100%; max-width: 64rem; margin: 0 auto; isolation: isolate; filter: drop-shadow(0 24px 25px #0008); }
.handheld > img { display: block; width: 100%; height: auto; pointer-events: none; }
.handheld-screen { position: absolute; left: 20.55%; top: 17.45%; width: 59%; height: 60%; overflow: hidden; background: #030504; border-radius: 2px; }
.handheld .game-stage { position: absolute; inset: 0; margin: 0; }
.handheld .game-stage iframe { display: block; border: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; }
#game-launch { position: absolute; inset: 0; width: 100%; border: 0; color: var(--ink); background: radial-gradient(ellipse, #19221e, #020403 75%); font: inherit; font-size: clamp(.85rem, 2vw, 1.4rem); cursor: pointer; letter-spacing: .12em; }
#game-launch span { display: block; margin-top: 1rem; font-size: .6em; color: var(--ink-muted); letter-spacing: .08em; }
.hardware { position: absolute; padding: 0; border: 0; background: transparent; border-radius: 25%; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.hardware:disabled { cursor: default; }
.hardware:active:not(:disabled), .hardware.is-held { background: #b8e8bd44; box-shadow: 0 0 12px #b8e8bd66; }
.hardware:focus-visible, #game-launch:focus-visible { outline: 2px solid #ccdbbd; outline-offset: -3px; }
.hardware.up { left: 8%; top: 27%; width: 4.5%; height: 8%; }
.hardware.down { left: 8%; top: 41%; width: 4.5%; height: 8%; }
.hardware.left { left: 5%; top: 34%; width: 4%; height: 9%; }
.hardware.right { left: 11.5%; top: 34%; width: 4%; height: 9%; }
.hardware.look-up { left: 87.7%; top: 26%; width: 4.5%; height: 8%; }
.hardware.look-down { left: 87.7%; top: 42%; width: 4.5%; height: 8%; }
.hardware.look-left { left: 83.6%; top: 34%; width: 4.5%; height: 8%; }
.hardware.look-right { left: 91.6%; top: 34%; width: 4.5%; height: 8%; }
.hardware-stick { position: absolute; top: 48%; width: 11%; height: 22%; min-width: 44px; min-height: 44px; border-radius: 50%; touch-action: none; }
.move-stick { left: 6.7%; }
.view-stick { left: 82.2%; }
.hardware-stick.is-held { background: radial-gradient(circle, transparent 35%, #b8e8bd44 70%, transparent 72%); }
.handheld-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 42rem; margin: .9rem auto 0; border: 1px solid var(--line-strong); }
.handheld-modes button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem; min-width: 0; min-height: 48px; border: 0; background: #101512; color: var(--ink-muted); padding: .65rem .8rem; cursor: pointer; font: inherit; font-size: .85rem; text-align: left; touch-action: manipulation; }
.handheld-modes button + button { border-left: 1px solid var(--line-strong); }
.handheld-modes button > span:first-child { font: .65rem "IBM Plex Mono", monospace; }
.handheld-modes button > span:last-child { min-width: 0; white-space: nowrap; }
.handheld-modes small { display: block; margin-top: .2rem; font-size: .7rem; line-height: 1.5; color: var(--ink-muted); white-space: normal; overflow-wrap: anywhere; }
.handheld-modes button:hover:not(:disabled), .handheld-modes button:focus-visible { color: var(--ink); background: #202821; }
.handheld-modes button:focus-visible { position: relative; outline-offset: -3px; }
.handheld-modes button[aria-pressed="true"] { color: var(--ink); background: #283129; box-shadow: inset 0 -3px #bdc9b6; }
.handheld-modes button:disabled { cursor: default; }
.handheld-guide { margin: .75rem 0 0; font-size: .8rem; line-height: 2; color: var(--ink-muted); }
.handheld-guide span { font-size: .7rem; }
.handheld-mobile-hint { display: none; margin: .35rem 0 0; font-size: .7rem; color: var(--ink-muted); }
.handheld-player .game-actions { justify-content: center; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin: .75rem auto 0; }
.handheld-player .game-actions > * { margin-block: 0; }
.handheld-player .game-actions .text-link { touch-action: manipulation; }
#game-expand { min-height: 44px; padding: .55rem 1rem; border: 1px solid var(--line-strong); }
#game-expand:hover, #game-expand:focus-visible { border-color: var(--signal); background: rgb(211 224 211 / 6%); }
#game-close, #game-fallback { min-height: 44px; padding: .55rem .35rem; border: 0; color: var(--ink-muted); }
#game-close:hover, #game-close:focus-visible, #game-fallback:hover, #game-fallback:focus-visible { color: var(--ink); background: rgb(211 224 211 / 6%); }
#game-fallback { gap: .45rem; }
.handheld-player .game-state { min-height: 1.5em; margin: .5rem 0 0; }
.handheld-player.is-expanded { position: fixed; z-index: 1100; inset: 0; overflow: auto; background: #090c0b; padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "handheld" "modes" "actions" "guide" "hint" "state"; align-content: center; justify-items: center; gap: .75rem; }
.is-expanded .handheld { grid-area: handheld; width: min(100%, 64rem, calc((100svh - 13rem) * 2)); }
.is-expanded .handheld-modes { grid-area: modes; margin: 0; }
.is-expanded .handheld-modes small { display: none; }
.is-expanded .handheld-modes button { min-height: 44px; }
.is-expanded .handheld-guide { grid-area: guide; margin: 0; }
.is-expanded .handheld-mobile-hint { grid-area: hint; margin: 0; }
.is-expanded .game-actions { grid-area: actions; margin: 0; }
.is-expanded .game-state { grid-area: state; margin: 0; }
body.handheld-expanded { overflow: hidden; }
@media (max-width: 720px) {
 .handheld-player { width: calc(100% + 2 * var(--gutter)); margin-left: calc(-1 * var(--gutter)); }
 .handheld-player.is-expanded { width: 100%; margin: 0; }
 .handheld { max-width: none; }
 .handheld-modes { width: calc(100% - 1.6rem); }
 .handheld-modes button { padding: .65rem .5rem; gap: .45rem; }
 .handheld-guide { padding: 0 1rem; font-size: .7rem; }
 .handheld-guide span { display: none; }
 .handheld-mobile-hint { display: block; }
 .handheld-player .game-actions { padding: 0 1rem; }
 .handheld-player.is-expanded .handheld-modes { width: 100%; }
}
@media (max-width: 420px) {
 .handheld-modes button { grid-template-columns: minmax(0, 1fr); }
 .handheld-modes button > span:first-child { display: none; }
}
@media (orientation: landscape) and (max-height: 600px) {
 .handheld-player.is-expanded { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "handheld handheld" "modes actions"; align-content: center; gap: .4rem .75rem; padding: max(.4rem, env(safe-area-inset-top)) max(.4rem, env(safe-area-inset-right)) max(.4rem, env(safe-area-inset-bottom)) max(.4rem, env(safe-area-inset-left)); }
 .is-expanded .handheld { width: min(100%, 64rem, calc((100svh - 4.5rem) * 2)); }
 .is-expanded .handheld-guide, .is-expanded .handheld-mobile-hint, .is-expanded .game-state { display: none; }
 .is-expanded .handheld-modes { width: 100%; }
 .is-expanded .handheld-modes button { grid-template-columns: minmax(0, 1fr); }
 .is-expanded .handheld-modes button > span:first-child { display: none; }
 .is-expanded .game-actions { justify-self: end; padding: 0; }
 .is-expanded .game-actions a { display: none; }
}