#display-mode{font-family:Arcade8,monospace;font-size:9px;white-space:nowrap;padding:9px 8px;color:#ffd638;border-color:#ffd638;margin-left:auto}header #sound{margin-left:0}
.portrait-mode{overflow:hidden;width:100%;height:var(--app-h);min-height:0;background:#071c27}
.portrait-mode .cabinet,.portrait-mode .cabinet:fullscreen{position:fixed;inset:0 auto auto 50%;transform:translateX(-50%);width:min(100vw,calc(var(--app-h)*.5625));height:var(--app-h);padding:env(safe-area-inset-top) 0 0;margin:0;border:0;border-radius:0;box-shadow:none;display:grid;grid-template-rows:minmax(0,1fr) 24%;background:#122c37}
.portrait-mode .display,.portrait-mode .cabinet:fullscreen .display{grid-row:1;position:relative;inset:auto;width:100%;height:100%;max-width:none;margin:0;min-height:0}
.portrait-mode .bezel{width:100%;height:100%;padding:0;border:0;border-radius:0;box-shadow:none;background:#122c37}
.portrait-mode #game{width:100%;height:100%;aspect-ratio:auto;border-radius:0;object-fit:fill}
.portrait-mode #loading{inset:0}
.portrait-mode .screen-meta,.portrait-mode footer,.portrait-mode header .wordmark,.portrait-mode header .edition{display:none}
.portrait-mode header,.portrait-mode .cabinet:fullscreen header{display:none;position:absolute;inset:calc(env(safe-area-inset-top) + 10px) 8px auto;transform:none;z-index:5;margin:0;gap:8px;justify-content:flex-end}
.portrait-mode.on-title header{display:flex}
.portrait-mode #display-mode,.portrait-mode #sound{font-size:8px;min-height:30px;opacity:.95;background:#102630e8;border-radius:6px}
.portrait-mode .controller{grid-row:2;position:relative;inset:auto;width:100%;height:100%;padding:0 0 env(safe-area-inset-bottom);pointer-events:auto;background:radial-gradient(#294650 1px,transparent 1px) 0 0/8px 8px #102c38;border-top:2px solid #41606a;z-index:3}
.portrait-mode .controller button{opacity:1;pointer-events:auto;min-width:0;min-height:0;padding:0;touch-action:none;box-shadow:0 4px 0 #061923}
.portrait-mode .dpad{position:absolute;left:3%;bottom:34%;top:auto;right:auto;transform:none;width:38%;height:40%;gap:5%;margin:0;display:flex}
.portrait-mode .dpad button{width:47.5%;max-width:none;height:100%;font-size:clamp(25px,7vw,42px);border-radius:14px;border-bottom-width:4px}
.portrait-mode .actions{position:static;display:contents}
.portrait-mode .actions button{position:absolute;width:17%;height:auto;aspect-ratio:1;border-radius:50%;margin:0;font-size:clamp(24px,7vw,40px);bottom:28%;top:auto;left:auto;right:4%;border-bottom-width:4px}
.portrait-mode .actions .attack{right:25%;background:#f0573c}
.portrait-mode .actions .jump{right:4%;background:#ffd538}
.portrait-mode .actions .special{right:6%!important;bottom:66%!important;top:auto!important;left:auto!important;width:13%!important;height:auto!important;font-size:clamp(18px,5vw,30px)!important;background:#70bcb4!important;aspect-ratio:1;padding:0}
.portrait-mode .actions button span{display:none}
.portrait-mode .system{position:absolute;left:40%;bottom:calc(7% + env(safe-area-inset-bottom));top:auto;right:auto;transform:translateX(-15%);flex-direction:row-reverse;display:flex;gap:12px;padding:0;margin:0}
.portrait-mode .system button{min-width:52px;min-height:24px;font-size:7px;padding:5px 7px;border-radius:12px;letter-spacing:-.4px;background:#70818a;color:#061c27}
.portrait-mode button.pressed{transform:translateY(2px);filter:brightness(1.2)}
@media(orientation:portrait) and (max-width:900px){.portrait-mode .cabinet{width:100vw}}
@media(max-width:380px){#display-mode{font-size:7px;padding:8px 5px}header .wordmark,header .wordmark b{font-size:21px}.portrait-mode .system button{min-width:43px;font-size:6px}.portrait-mode .system{gap:8px}}

/* Separate thumb zones: R occupies the middle, with clear space from A/B. */
.portrait-mode .dpad{left:3%;width:36%;bottom:36%;height:38%}
.portrait-mode .actions .attack{right:25%;bottom:23%;width:18%}
.portrait-mode .actions .jump{right:3%;bottom:38%;width:18%}
.portrait-mode .actions .special{left:44%!important;right:auto!important;top:8%!important;bottom:auto!important;width:13%!important;max-width:58px!important}
.portrait-mode .system{left:50%;transform:translateX(-50%);bottom:calc(4% + env(safe-area-inset-bottom));gap:14px}

.portrait-mode .dpad{bottom:calc(44px + env(safe-area-inset-bottom));height:min(38%,72px)}
.portrait-mode .actions .attack{bottom:calc(44px + env(safe-area-inset-bottom))}
.portrait-mode .actions .jump{bottom:calc(54px + env(safe-area-inset-bottom))}
.portrait-mode .actions .special{left:43%!important;width:12%!important}
.portrait-mode .system{bottom:calc(6px + env(safe-area-inset-bottom))}

/* Title-only four-direction input, retaining the play controls. */
.dpad .secret-direction{display:none}
.on-title .dpad{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.on-title .dpad .secret-direction{display:block}
.on-title .dpad button{height:44px;width:54px;font-size:24px}
.portrait-mode.on-title .dpad{height:96px;width:36%;bottom:calc(40px + env(safe-area-inset-bottom))}
.portrait-mode.on-title .dpad button{width:100%;height:46px}

/* One matching filled arrow shape in all four directions, independent of font fallback. */
.dpad .direction-icon{display:inline-block;width:1em;height:1em;vertical-align:middle;fill:currentColor;pointer-events:none}