/* Portrait play: the scene and controls share one viewport-sized stage. */
.duel-page{display:flex;flex-direction:column}
.duel-stage{display:contents}
.duel-stage>.scene{order:1}
.duel-stage>.used-history{order:2}
.turn-controls{order:3}
.duel-tools{order:4;padding:0 12px 12px;background:#0d0c13}
.duel-tools .support-row{margin-top:0}
.mobile-turn-status{display:none}
.hand-toggle{display:none}
.cpu-hand .card-back{background:#000;border:0;border-radius:0}
.cpu-hand .card-back .sprite{display:block;width:100%;height:100%}
.opening-word .sprite{display:block;width:100%}
.initial-card{position:absolute;z-index:3;left:calc(50% + 65px);top:10px;width:44px;text-align:center;pointer-events:none}
.initial-card .sprite{display:block;width:100%;filter:drop-shadow(0 3px 4px #000)}
.initial-card small{display:block;font-size:9px;color:#eadbc7;text-shadow:0 1px 3px #000;margin-top:2px}
.opening-card{position:absolute;z-index:6;pointer-events:none;filter:drop-shadow(0 8px 12px #000)}
.opening-card .sprite{display:block;width:100%;visibility:hidden}
.opening-back{position:absolute;inset:0;background:#000}
.opening-back .sprite{visibility:visible;display:block;width:100%;height:100%}
.opening-card.face-up .sprite{visibility:visible}.opening-card.face-up .opening-back{display:none}
.opening-word{position:absolute;z-index:6;left:50%;transform:translate(-50%,-50%) rotate(-4deg);font-family:var(--serif);font-weight:900;white-space:nowrap;letter-spacing:.06em;color:#fff3dc;text-shadow:2px 3px #67172a,0 3px 15px #000;pointer-events:none}
@media(max-width:650px){
 .duel-shell{height:100dvh;min-height:0;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
 .duel-shell>.topbar{display:none}
 .duel-page{width:100%;flex:1;min-height:0;margin:0;max-width:none}
 .duel-info{flex:none;min-height:54px;padding:5px 12px}
 .duel-info .player-score{display:flex;flex-wrap:wrap;max-width:70%;gap:3px 7px}
 .duel-info .player-score .score{width:100%}
 .duel-info .equipped-title{max-width:175px}
 .duel-stage{order:1;display:block;position:relative;flex:1;min-height:0;isolation:isolate;overflow:hidden}
 .duel-stage>.scene{position:absolute;inset:0;min-height:0;width:100%;height:100%}
 .duel-stage .number-banner{top:7px;min-height:65px;width:85px;padding:6px 8px}
 .duel-stage .number-banner b{font-size:calc(34px * var(--number-scale,1))}
 .duel-stage .initial-card{left:calc(50% + 51px);top:8px;width:39px}
 .duel-stage .scene-label{display:none}
 .mobile-turn-status{display:block;position:absolute;top:10px;left:9px;z-index:3;max-width:calc(50% - 52px);font-size:11px;line-height:1.6;color:#f7eadc;text-shadow:0 1px 4px #000}
 .mobile-turn-status small{display:block;font-size:10px;color:#d0c2b5}
 .turn-controls{position:absolute;bottom:0;left:0;right:0;z-index:5;padding-top:40px;max-height:68%;overflow-y:auto;scrollbar-width:thin;transition:opacity .15s ease,transform .15s ease}
 .hand-toggle{display:block;position:absolute;right:10px;bottom:calc(var(--controls-height,280px) - 39px);z-index:6;min-height:38px;padding:5px 12px;font-size:12px;background:#171923f5;border-color:#b4a087}
 .hand-lowered .turn-controls{visibility:hidden;pointer-events:none;transform:translateY(100%);opacity:0}
 .hand-lowered .hand-toggle{bottom:8px}
 .turn-controls.is-waiting{visibility:hidden;pointer-events:none;opacity:0;transform:translateY(12px)}
 .turn-controls .hand-area{padding:8px 12px 10px;background:linear-gradient(180deg,#0b0e16f5,#0b0c14ed 28%);border-top:1px solid #b6a08244}
 .turn-controls .turn-line{font-size:10px;min-height:16px;gap:4px}
 .turn-controls .cpu-hand{display:none}
 .turn-controls .hand{margin:6px auto;gap:12px;max-width:none}
 .turn-controls .card-choice{width:clamp(46px,13dvh,84px);flex:none}
 .turn-controls .choice-settings{margin:5px 0;gap:5px;flex-wrap:nowrap}
 .turn-controls .choice-settings label{font-size:11px;white-space:nowrap}
 .turn-controls .choice-settings select,.turn-controls .choice-settings input{min-height:36px;max-width:128px;padding:3px;font-size:16px}
 .turn-controls .choice-settings .muted{font-size:10px;line-height:1.4}
 .turn-controls .action-row{gap:10px;position:sticky;bottom:0;z-index:1;background:#0b0c14}
 .turn-controls .action-row button{min-height:58px;padding:9px 6px;font-size:22px}
 .turn-controls .action-row small{font-size:10px;margin-top:3px;line-height:1.3}
 .turn-controls .deck-status{font-size:10px;line-height:1.4;margin:4px 0}
 .turn-controls>.page-card{margin:0;padding:14px;background:#10111ce8}
 .turn-controls>.page-card h2{font-size:20px}
 .turn-controls>.page-card p{font-size:12px;margin-bottom:6px}
 .duel-stage>.used-history{position:absolute;left:0;right:0;bottom:calc(var(--controls-height,280px) - 48px);height:100px;z-index:4;gap:8px;padding:4px 10px;background:#121119;border-top:1px solid #514044}
 .duel-page .used-side h3{font-size:10px;margin-bottom:2px}
 .duel-page .used-viewport{height:80px;touch-action:pan-x}
 .duel-page .used-empty{top:12px}
 .duel-tools{flex:none;padding:3px 10px 5px}
 .duel-tools .support-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
 .duel-tools button{min-height:38px;font-size:11px;padding:5px}
 .duel-tools .notice{font-size:10px;line-height:1.4;min-height:0;margin:3px 0 0;max-height:28px;overflow:auto}
 .duel-tools .notice:empty{display:none}
 body:has(.duel-shell) .award-toast{top:max(64px,calc(env(safe-area-inset-top) + 64px));bottom:auto;width:calc(100vw - 20px);padding:12px 16px}
 body:has(.duel-shell) .award-toast strong{font-size:18px}
}
@media(max-width:650px) and (max-height:620px){
 .turn-controls .card-choice{width:48px}
 .turn-controls .hand{margin:4px auto}
 .duel-stage .number-banner{min-height:56px;width:76px}
 .duel-stage .number-banner b{font-size:calc(29px * var(--number-scale,1))}
 .turn-controls .hand-area{padding:5px 10px 7px}
}
@media(prefers-reduced-motion:reduce){.turn-controls{transition:none}}