#actionHud { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.action-canvas { touch-action: none; }
#actionHud[hidden] { display: none; }
.action-top { position: absolute; right: 14px; top: 12px; pointer-events: auto; }
.action-bottom { position: absolute; bottom: 12px; left: 12px; right: 12px; display: grid; justify-items: center; gap: 8px; }
#actionPad { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; pointer-events: auto; }
.action-button { min-width: 58px; min-height: 48px; padding: 10px 16px; border: 1px solid #8ff5df66; border-radius: 12px; color: var(--text); background: #191333ed; font: 700 13px var(--font-mono); touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.action-button:active { background: #384464; border-color: var(--spark); }
.action-button:focus-visible { outline: 3px solid var(--spark); outline-offset: 2px; }
#actionHint { margin: 0; color: #d0c7e9; font: 500 12px/1.4 var(--font-mono); text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media(max-width: 520px) { .action-button { padding: 10px; min-width: 48px; font-size: 11px; }.action-bottom { bottom: 10px; }.action-top { top: 8px; right: 8px; } }
@media(max-width: 760px), (pointer: coarse) {
 .action-button { min-height: 52px; min-width: 48px; font: 700 14px var(--font-body); }
 .action-key { display: none; }
 .action-top .btn { min-height: 44px; }
 #actionHint { font: 400 12px/1.4 var(--font-body); }
 #actionReadout { position: absolute; top: 14px; left: 12px; right: 120px; width: auto; height: auto; overflow: visible; clip-path: none; margin: 0; font: 600 13px/1.4 var(--font-body); color: var(--text); }
 #actionPad[data-game="neon-wake"] { display: grid; grid-template-columns: repeat(3,48px) minmax(90px,1fr); grid-template-areas: '. up . action' 'left down right action'; gap: 7px; }
 #actionPad[data-game="neon-wake"] [data-action="left"] { grid-area: left; }
 #actionPad[data-game="neon-wake"] [data-action="right"] { grid-area: right; }
 #actionPad[data-game="neon-wake"] [data-action="up"] { grid-area: up; }
 #actionPad[data-game="neon-wake"] [data-action="down"] { grid-area: down; }
 #actionPad[data-game="neon-wake"] [data-action="action"] { grid-area: action; margin-left: 10px; }
}
@media(max-height:500px) and (orientation:landscape) {
 .action-bottom { bottom: 6px; justify-items: stretch; }
 #actionHint { display: none; }
 #actionPad[data-game="neon-wake"] { display: grid; width: 100%; grid-template-columns: repeat(3,44px) minmax(0,1fr) 94px; grid-template-areas: '. up . . action' 'left down right . action'; }
 #actionPad[data-game="neon-wake"] [data-action="left"] { grid-area: left; }
 #actionPad[data-game="neon-wake"] [data-action="right"] { grid-area: right; }
 #actionPad[data-game="neon-wake"] [data-action="up"] { grid-area: up; }
 #actionPad[data-game="neon-wake"] [data-action="down"] { grid-area: down; }
 #actionPad[data-game="neon-wake"] [data-action="action"] { grid-area: action; }
 .action-button { min-height: 44px; min-width: 44px; padding: 7px; }
 .action-key { display: none; }
}