/* Original handheld presentation; the combat canvas keeps its 16:9 aspect ratio. */
.handheld-header,.handheld-display-label,.handheld-footer{display:none}
.rotate-screen .portrait-choice{width:min(310px,100%);min-height:48px;padding:12px 16px;border:1px solid #92b7ad77;border-radius:12px;background:#abc8ba12;color:#d4e3d8;font-size:11px;font-weight:800;letter-spacing:.6px;touch-action:manipulation}
.portrait-mode{--case:#cbd0d7;--case-ink:#334554;--stick-size:clamp(104px,32vw,140px);--key-size:clamp(50px,15vw,62px)}
.portrait-mode body{background:radial-gradient(ellipse at top,#33464b,#111d25)}
.portrait-mode .game-shell{max-width:480px;display:flex;flex-direction:column;padding:calc(8px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 0 calc(8px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));background:linear-gradient(120deg,#dce0e3 0%,#c6cdd5 60%,#aeb8c4);border:1px solid #eff4f47a;border-radius:20px 20px 52px 20px;box-shadow:inset 2px 2px 2px #fff9,inset -4px -5px 3px #56647440,0 10px 60px #050e2270}
.portrait-mode .handheld-header{display:flex;justify-content:space-between;align-items:center;padding:6px 22px 0;min-height:38px;color:var(--case-ink);flex:none;order:0}
.portrait-mode .handheld-header>span:first-child{font-size:16px;font-weight:950;font-style:italic;letter-spacing:-.6px}
.portrait-mode .handheld-header small{display:block;font:7px monospace;letter-spacing:2.3px;margin-top:3px;color:#586e80}
.portrait-mode .handheld-power{display:flex;align-items:center;gap:5px;font:7px monospace;letter-spacing:.6px;color:#4f6570}
.portrait-mode .handheld-power i{width:5px;height:5px;border-radius:50%;background:#39836c;box-shadow:0 0 0 2px #61867622,0 0 6px #4cbf9560}
.portrait-mode .arena-section{position:relative;inset:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;order:1;margin:10px 12px 0;padding:10px 10px 8px;border-radius:14px 14px 27px 14px;background:linear-gradient(145deg,#303e50,#1a2737);box-shadow:inset 0 2px 4px #0a152675,0 2px 1px #ffffffb0;flex:none;max-width:none}
.portrait-mode .arena{width:100%;aspect-ratio:16/9;border:1px solid #172635;border-radius:4px;order:1;flex:none;box-shadow:0 0 0 2px #070d1940}
.portrait-mode .arena-toolbar{position:static;inset:auto;display:flex;order:3;justify-content:center;height:44px;min-height:44px;padding:0;margin:2px 0 0;background:transparent;border:0;z-index:9}
.portrait-mode .arena-toolbar>span{display:none}
.portrait-mode .arena-toolbar>div{gap:2px;width:100%;justify-content:space-between}
.portrait-mode .arena-toolbar button{min-width:44px;height:44px;padding:0 5px;font-size:10px;border-radius:8px;background:#839ab811;color:#dae4e7}
.portrait-mode #toolbar-menu,.portrait-mode #pause-toggle{width:64px;flex:none;padding:0 2px;font-size:10px}
.portrait-mode #mobile-help,.portrait-mode #fullscreen-toggle{width:44px;font-size:18px}
.portrait-mode #audio-toggle{font-size:0;width:44px;padding:0}
.portrait-mode #audio-toggle::before{content:'♪';font-size:21px;color:#a9b9c4}
.portrait-mode #audio-toggle[aria-pressed="true"]::before{color:#a1e0b4}
.portrait-mode .handheld-display-label{display:flex;order:2;justify-content:space-between;color:#b7c3c566;font:6px monospace;letter-spacing:1.5px;padding:8px 5px 2px;user-select:none}
.portrait-mode .hud{inset:6px 4% auto;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:8px}
.portrait-mode .fighter-label{display:none}
.portrait-mode .fighter-hud b{font-size:10px;margin:1px 0 5px;text-shadow:1px 1px #182536}
.portrait-mode .health-track{height:7px;border-width:1px}
.portrait-mode .energy-track{height:3px;margin-top:4px}
.portrait-mode .clock-box>span{font-size:5px;letter-spacing:0}
.portrait-mode .clock-box strong{font-size:23px;line-height:1.1;text-shadow:1px 1px #182536}
.portrait-mode .round-dots{display:none}
.portrait-mode .controls{position:relative;inset:auto;display:block;order:2;flex:1;min-height:190px;margin:4px 18px 0;padding:0;z-index:4;pointer-events:none}
.portrait-mode .controls::before{content:'ARRASTE · SEGURE · LUTE';position:absolute;top:10px;left:0;right:0;text-align:center;font:7px monospace;letter-spacing:2px;color:#66758688;pointer-events:none}
.portrait-mode .joystick-zone{position:absolute;left:0;top:50%;bottom:auto;transform:translateY(-50%);gap:8px}
.portrait-mode .joystick{background:radial-gradient(circle,#475567 0 28%,#28364ae8 29% 65%,#8794a066 66%);border:1.5px solid #6272829c;box-shadow:inset 0 2px 6px #09162565,0 2px 1px #f6fbffb0}
.portrait-mode .joystick::before{border-color:#a8b8c444}
.portrait-mode .joystick-thumb{background:linear-gradient(145deg,#63717cdd,#273849ed);border-color:#acb7bf9e;box-shadow:0 4px 7px #18273d70,inset 0 1px #d3dbde77}
.portrait-mode .joystick-thumb i{background:#b7c2cdbd;box-shadow:0 0 0 4px #9cb0c022}
.portrait-mode .joystick.is-held{background-color:#527578}
.portrait-mode .joystick.is-held .joystick-thumb{background:linear-gradient(140deg,#e6b48ccb,#7b797edb);border-color:#ffe3b8}
.portrait-mode .joystick-caption{color:#526478;font-size:7px;text-shadow:none;letter-spacing:.7px}
.portrait-mode .attacks{position:absolute;right:0;top:50%;bottom:auto;transform:translateY(-50%);grid-template-columns:44px repeat(2,var(--key-size));grid-template-rows:repeat(2,var(--key-size));gap:8px 6px;opacity:1}
.portrait-mode .attacks button[data-action]{box-shadow:0 4px 0 #5462758c,0 5px 9px #46556b38,inset 0 1px #ffffff3b;border-color:#fbf4ee7d;color:#fff9ed;min-width:48px;min-height:48px}
.portrait-mode .attacks button[data-action="punch"]{background:linear-gradient(140deg,#a35a76e8,#76445dd9)}
.portrait-mode .attacks button[data-action="kick"]{background:linear-gradient(140deg,#417977e6,#32515fe3)}
.portrait-mode .attacks button[data-action="special"]{background:linear-gradient(140deg,#987446df,#645a4ce6)}
.portrait-mode .attacks button[data-action="alternate"]{background:linear-gradient(140deg,#756294e0,#554b72e6)}
.portrait-mode .attacks button.block-button{background:#465970d9;width:48px;height:48px;align-self:center;margin:0;border-color:#e4ecf078}
.portrait-mode .attacks button span{font-size:10px;letter-spacing:.2px;text-shadow:0 1px 2px #243042}
.portrait-mode .attacks button .energy-cost{font-size:8px;margin-top:3px}
.portrait-mode .attacks button.is-low-energy{background:#7a849193;border-color:#f8f5ef80;color:#d6dde2}
.portrait-mode .attacks button.is-pressed{transform:translateY(3px);background:#f3bb87e8;color:#24334d;box-shadow:0 1px 0 #5d687888,inset 0 2px 3px #172c4840}
.portrait-mode .handheld-footer{display:flex;order:3;align-items:center;justify-content:space-between;padding:0 24px 4px;min-height:48px;flex:none}
.portrait-mode .handheld-footer button{min-height:44px;border:1px solid #75889b77;border-radius:22px;padding:6px 13px;background:#e1e6eaa1;box-shadow:0 2px 0 #697a8c40,inset 0 1px #fff9;color:#3b536c;font-size:10px;font-weight:700;touch-action:manipulation}
.portrait-mode .handheld-speaker{display:flex;gap:5px;transform:rotate(-22deg);padding:0 6px}
.portrait-mode .handheld-speaker i{width:4px;height:28px;border-radius:4px;background:#66758670;box-shadow:1px 1px 0 #f5faffb0,inset 1px 1px #54637950}
.portrait-mode .selection{position:absolute;inset:58px 12px 12px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px;padding:13px;border-radius:14px 14px 30px 14px;background:linear-gradient(135deg,#273b4dfc,#172b3afa);z-index:10;max-height:none;overflow:hidden}
.portrait-mode body:has(.arena[data-phase="select"]) .arena-section,.portrait-mode body:has(.arena[data-phase="select"]) .handheld-footer{visibility:hidden}
.portrait-mode .selection-heading{grid-row:1;grid-column:1;font-size:8px;letter-spacing:.3px}
.portrait-mode .selection-heading>span:last-child{font-size:7px;letter-spacing:0}
.portrait-mode .fighter-options{grid-row:2;grid-column:1;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:74px;gap:7px}
.portrait-mode .fighter-card{height:74px;min-height:60px}
.portrait-mode .fighter-card canvas{width:42px;height:66px}
.portrait-mode .fighter-card strong{font-size:11px}
.portrait-mode .start-area{grid-row:3;grid-column:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end;width:auto;min-width:0}
.portrait-mode .opponent-picker{min-width:0;font-size:8px;gap:6px}
.portrait-mode .opponent-picker select{font-size:11px;min-height:44px;padding:6px}
.portrait-mode .start-area .primary-button{font-size:10px;letter-spacing:0;min-height:48px;padding:8px 4px;white-space:normal;line-height:1.3}
.portrait-mode .training-toggle{grid-column:1/-1;justify-content:center;min-height:36px;font-size:10px;margin:0}
.portrait-mode .selected-moves{display:block;grid-row:4;grid-column:1;font-size:10px;padding-top:8px;line-height:1.5;margin:0}
.portrait-mode .help-panel{inset:58px 12px 12px;z-index:12;padding:16px 18px;border-radius:15px 15px 30px 15px}
.portrait-mode .help-panel h2{font-size:20px}.portrait-mode .help-panel p{font-size:13px}
.portrait-mode .match-overlay{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;background:#0e203842}.portrait-mode .match-overlay.is-decision{inset:auto 10px max(10px,var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));background:#101c22f5;justify-content:flex-start}
.portrait-mode .match-overlay>span{font-size:8px;letter-spacing:.3px;line-height:1.4;max-width:96%}
.portrait-mode .match-overlay h1{font-size:28px;margin:5px 0 8px;line-height:1;text-shadow:2px 2px #142841}
.portrait-mode #result-actions{display:flex;gap:6px;align-items:center;justify-content:center;max-width:100%}
.portrait-mode .match-overlay .primary-button,.portrait-mode .match-overlay .secondary-button{min-height:44px;margin:0;padding:8px 10px;font-size:10px;white-space:normal;line-height:1.2}
@media(orientation:portrait) and (max-height:650px){
 .portrait-mode .game-shell{padding-top:var(--safe-area-inset-top, env(safe-area-inset-top, 0px));padding-bottom:var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))}
 .portrait-mode .handheld-header{min-height:32px;padding-top:3px}.portrait-mode .handheld-header>span:first-child{font-size:14px}.portrait-mode .handheld-header small{display:none}
 .portrait-mode .arena-section{margin-top:4px;padding-top:8px;padding-bottom:4px}.portrait-mode .handheld-display-label{display:none}
 .portrait-mode .controls{min-height:160px;margin-top:0}.portrait-mode .controls::before{display:none}
 .portrait-mode .handheld-footer{min-height:44px;padding-bottom:0}.portrait-mode .handheld-speaker i{height:22px}
 .portrait-mode .selection,.portrait-mode .help-panel{top:38px;bottom:8px}
 .rotate-screen{gap:9px}.rotate-screen .portrait-choice{min-height:44px}.rotate-screen .rotate-illustration{margin-top:0;height:68px}.rotate-screen .rotate-brand{font-size:21px}.rotate-screen h1{font-size:29px}
}
@media(orientation:portrait) and (max-width:350px){
 .portrait-mode .handheld-header{padding-left:18px;padding-right:18px}
 .portrait-mode .controls{margin-left:14px;margin-right:14px}
 .portrait-mode .attacks{grid-template-columns:44px repeat(2,50px);gap:7px 5px}
 .portrait-mode .handheld-footer{padding-left:18px;padding-right:22px}.portrait-mode .handheld-footer button{font-size:9px}
 .portrait-mode .fighter-card strong{font-size:10px}.portrait-mode .fighter-card canvas{width:34px;height:60px}.portrait-mode .fighter-card small{font-size:5px}
 .portrait-mode .selection{padding:10px;gap:8px}.portrait-mode .selected-moves{font-size:9px}
}
