/* The supplied artwork is the controller; moving surfaces reuse exact crops. */
.mobile-controls { display: none; }
.controller-art { display: block; width: 100%; height: auto; pointer-events: none; }
.mobile-controls img { user-select: none; -webkit-user-drag: none; }
.controller-button, .thumb-stick { position: absolute; touch-action: none; -webkit-tap-highlight-color: transparent; }
.controller-button { appearance: none; border: 0; padding: 0; background: transparent; box-shadow: none; cursor: pointer; border-radius: 50%; }
.controller-button:hover:not(:disabled), .controller-button:active { background: transparent; box-shadow: none; }
.controller-button::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.button-surface, .stick-cap { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 50%; pointer-events: none; }
.button-surface img, .stick-cap img { position: absolute; max-width: none; height: auto; pointer-events: none; }
.button-surface { transition: transform 110ms cubic-bezier(.2,.8,.3,1.3), filter 100ms; transform: translateY(0) scale(1); }
.controller-button.pressed .button-surface { transform: translateY(2px) scale(.94); filter: brightness(.72); }
.controller-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.thumb-stick { border-radius: 50%; }
/* Cover the printed stick with a clean gray crop from the same photograph. */
.thumb-stick::before { content: ''; position: absolute; inset: 2.94118%; border-radius: 50%; background: url('phonecontroller.jpg?v=dreamcast-buttons-1') 45.95588% 93.09309% / 477.77778% auto; box-shadow: inset 0 2px 5px #0002; pointer-events: none; }
/* Keep the cap visible over the base even when the pointer is released. */
.stick-cap { z-index: 1; transition: transform 130ms cubic-bezier(.2,.8,.3,1.3); transform: translate(var(--stick-x, 0px), var(--stick-y, 0px)); }
.thumb-stick.engaged .stick-cap { transition: none; filter: brightness(.94); }
.face-y { left: 76.67151%; top: 8.80503%; width: 10.90116%; height: 15.72327%; }
.face-y img { width: 917.33333%; left: -703.33333%; top: -56.00000%; }
.face-x { left: 65.69767%; top: 22.01258%; width: 10.90116%; height: 15.72327%; }
.face-x img { width: 917.33333%; left: -602.66667%; top: -140.00000%; }
.face-b { left: 87.42733%; top: 22.01258%; width: 10.90116%; height: 15.72327%; }
.face-b img { width: 917.33333%; left: -802.00000%; top: -140.00000%; }
.face-a { left: 76.67151%; top: 36.05870%; width: 10.90116%; height: 15.72327%; }
.face-a img { width: 917.33333%; left: -703.33333%; top: -229.33333%; }
.system-select { left: 38.15407%; top: 47.06499%; width: 9.08430%; height: 7.33753%; }
.system-select img { width: 1100.80000%; left: -420.00000%; top: -641.42857%; }
.system-start { left: 54.28779%; top: 46.33124%; width: 8.06686%; height: 9.22432%; }
.system-start img { width: 1239.63964%; left: -672.97297%; top: -502.27273%; }
.system-select, .system-select .button-surface { border-radius: 18%; }
.system-start .button-surface { clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 12%; }
.system-start { border-radius: 0; }
.thumb-stick { left: 8.57558%; top: 12.68344%; width: 22.23837%; height: 32.07547%; }
.stick-cap { inset: 8.82353%; }
.stick-cap img { width: 546.03175%; left: -57.53968%; top: -58.73016%; }
@media (max-width: 759px), (pointer: coarse) and (max-width: 1024px) {
 html { overscroll-behavior: none; }
 .site-header { padding-top: max(7px, env(safe-area-inset-top)); }
 .header-row { grid-template-columns: 85px minmax(0, 1fr); gap: 12px; }
 .tabs a { font-size: 11px; padding: 12px 5px; }
 .player-shell { width: 100%; margin: 14px auto 0; padding: 0 max(10px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)); }
 .game-layout { display: block; }
 .game-frame { border: 1px solid #39303f; padding: 0; border-radius: 14px; overflow: hidden; background: #111; }
 #game { aspect-ratio: 4 / 3; }
 #game .ejs_virtualGamepad_parent { display: none !important; }
 .demo-screen { inset: 0 0 auto; width: 100%; height: auto; aspect-ratio: 4 / 3; }
 .mobile-controls { display: block; position: relative; width: 100%; aspect-ratio: 1376 / 954; flex: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; overflow: hidden; background: #aba9a5; }
 .game-frame:fullscreen, .game-frame.fullscreen-fallback { flex-direction: column; overflow: auto; justify-content: center; }
 .game-frame:fullscreen #game, .game-frame.fullscreen-fallback #game { width: min(100vw, calc(100dvh / 1.44331)); height: auto; }
 .game-frame:fullscreen .mobile-controls, .game-frame.fullscreen-fallback .mobile-controls { width: min(100vw, calc(100dvh / 1.44331)); }
 .game-frame:fullscreen .demo-screen, .game-frame.fullscreen-fallback .demo-screen { inset: auto; width: min(100vw, calc(100dvh / 1.44331)); height: auto; aspect-ratio: 4 / 3; top: calc((100dvh - min(100vw, calc(100dvh / 1.44331)) * 1.44331) / 2); }
}
@media (orientation: landscape) and (max-height: 540px) and (pointer: coarse), (orientation: landscape) and (max-height: 540px) and (max-width: 759px) {
 .site-header { display: none; }
 .player-shell { margin: 0; padding: 0; }
 .game-frame, .game-frame:fullscreen, .game-frame.fullscreen-fallback { height: 100dvh; width: 100%; border: 0; border-radius: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0; background: #111; padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
 #game, .game-frame:fullscreen #game, .game-frame.fullscreen-fallback #game { width: 52%; max-width: calc(100dvh * 4 / 3); height: auto; flex: none; }
 .mobile-controls, .game-frame:fullscreen .mobile-controls, .game-frame.fullscreen-fallback .mobile-controls { width: 48%; max-width: calc(100dvh * 1376 / 954); }
 .demo-screen, .game-frame:fullscreen .demo-screen, .game-frame.fullscreen-fallback .demo-screen { inset: auto auto auto env(safe-area-inset-left); width: 52%; max-width: calc(100dvh * 4 / 3); height: auto; }
}
@media (prefers-reduced-motion: reduce) { .button-surface, .stick-cap { transition: none; } }