/* Approved portrait screens. Game sprites and combat effects stay in style.css. */
:root{--surface:#102239;--secondary:#1a304b;--muted:#a8b9ca;--border:#66829c;--ui-font:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif}
[hidden]{display:none!important}
.cover{position:fixed;inset:0;margin:auto;width:min(100%,480px);height:100%;overflow:hidden;z-index:20;background:#041a40;isolation:isolate}
.cover-art,.cover-art img,.cover-art video{position:absolute;inset:0;width:100%;height:100%}
.cover-art img,.cover-art video{object-fit:cover;object-position:center;pointer-events:none}
.cover-brand{position:absolute;top:env(safe-area-inset-top,0px);left:0;width:100%;height:22.49%;display:grid;place-items:center}
.cover-brand img{display:block;width:66.13%;height:auto;filter:brightness(0) invert(1)}
.cover-footer{position:absolute;bottom:0;left:0;width:100%;height:19.04%;min-height:112px;padding:0 20px env(safe-area-inset-bottom,0px);display:flex;align-items:center;justify-content:center;background:linear-gradient(transparent,#03173533)}
.cover-start{position:relative;width:100%;height:72px;flex-shrink:0;padding:0 10px;border:3px solid #071426;border-radius:14px;background:#ffdb4d;color:#071426;font:800 24px/1 var(--ui-font);cursor:pointer;box-shadow:0 0 12px #ffdb4d1f,0 12px 10px #000612bf,0 8px #8c4d06,inset 0 -5px #7a3d0038,inset 0 3px #ffffe5a6}
.cover-start:active{animation:none;transform:translateY(6px);box-shadow:0 2px #8c4d06,inset 0 2px #ffffe5a6}
.cover-start:focus-visible{outline:3px solid white;outline-offset:5px}
.game{background:#081426}
.header{height:60px;min-height:60px;padding:8px 10px;border:0;background:#081426}
.brand-wordmark{width:174px}
.header-actions{gap:8px}
.header-actions .settings{min-width:64px}
.header-actions .sound{min-width:74px}
.header-actions button{height:44px;padding:0 8px;font:700 13px/1 var(--ui-font);background:#1a304b;border:1px solid #3b536b;color:#fff0cb}
.header-actions .sound[aria-pressed=true]{background:#1a304b;border-color:#3b536b;color:#fff0cb}
.arena{flex:1 1 0}
.on-companion #on-speech{max-width:96px}
.controls{padding:16px 10px 18px;border:0;background:#14263d}
.controls .on-meter,.controls.on-mode .on-meter{min-height:30px;height:30px;margin:0 0 8px;padding:2px 6px;gap:8px;border:1px solid #354b62;border-radius:10px;background:#081426;font:400 11px/1 JamPixel,monospace;color:#a8b9ca}
.controls .on-meter strong,.controls.on-mode .on-meter strong{font-size:11px;color:#fff0cb;font-weight:400}
.controls .on-meter-face,.controls.on-mode .on-meter-face{width:22px;height:22px;border:1px solid #65809a}
.controls .on-meter #on-label{font-size:11px;min-width:0}
.controls .on-charge{gap:4px}
.controls .on-charge i,.controls.on-mode .on-charge i{width:8px;height:8px;transform:none;border:1px solid #8ba1b6;border-radius:1px;background:#182d44;box-shadow:none}
.controls .on-charge i.on{background:#ffdb4d;border-color:#fff0cb}
.controls .on-meter.ready{border-color:#ffcf78}
.controls .top-row,.controls .bottom-row{gap:8px}
.controls .bottom-row{margin-top:10px}
.controls .move,.controls .rush{height:70px;min-height:70px;padding:6px 3px;gap:5px}
.controls .move strong{font-size:24px}
.controls .rush strong,.controls .rush.on-ready strong{font-size:16px;line-height:1.05}
.controls .button-icon{height:22px}
.controls .rush .button-icon{height:20px}
.controls .rush .ui-icon.fist{width:20px;height:20px}
.controls .rush .ui-icon.bolt{width:10px;height:16px}
.controls .rush .gauge{gap:3px;margin-top:0;pointer-events:none}
.controls .rush .gauge i{width:11px;height:5px;border:1px solid #91a4b8;background:#25384b;box-shadow:none}
.controls .rush .gauge i.on{background:#ffdb4d;border-color:#fff0cb}
.controls .rush.ready{background:#b82f3e;color:#fff0cb;box-shadow:inset 0 2px #ffbb9f,inset 0 -3px #9b242640,0 4px #030d1c,0 0 0 2px #fff0cb;animation:none}
.controls .rush.on-ready{background:#f49c4f;color:#16223a;box-shadow:inset 0 2px #ffe4b8,inset 0 -3px #a2502240,0 4px #030d1c,0 0 0 2px #fff0cb}
.controls .rush.on-ready .button-icon{height:30px;width:30px}
.controls .rush.on-ready .gauge{display:none}
.controls .bottom-row{grid-template-columns:1fr 1fr}
.controls .bottom-row .move{height:52px;min-height:52px;flex-direction:row;gap:10px;padding:6px 3px}
.controls .bottom-row .move strong{font-size:24px;white-space:nowrap}
.controls .bottom-row .button-icon{height:22px;gap:6px}
.controls .bottom-row .ui-icon.fist{width:24px;height:24px}
.controls .bottom-row .ui-icon.arrow{width:16px;height:16px}
.social-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;height:calc(56px + env(safe-area-inset-bottom,0px));padding:4px 10px calc(8px + env(safe-area-inset-bottom,0px));background:#081426}
.social-actions #reset-game{height:44px;min-height:44px;border:1px solid #536b87;border-radius:10px;background:#14263d;color:#fff0cb;font:700 12px/1 var(--ui-font);box-shadow:inset 0 1px #ffffff14,0 2px #030d1c;cursor:pointer}
.social-actions #open-share{display:block;width:100%;height:44px;min-height:44px;padding:0;border:0;box-shadow:none;background:transparent;color:#a8b9ca;font:400 12px/1 var(--ui-font)}
.setup-dialog,.social-dialog{border:1px solid #3b526b;border-radius:20px;background:#102239;color:#fff0cb;box-shadow:0 18px 48px #0008;font-family:var(--ui-font);overflow:auto}
.setup-dialog:before,.setup-dialog:after,.social-dialog:before,.social-dialog:after{content:'⌜';position:absolute;top:4px;left:5px;color:#a8b9ca;font:16px/1 monospace;pointer-events:none}
.setup-dialog:after,.social-dialog:after{inset:auto 5px 4px auto;transform:rotate(180deg)}
.setup-dialog{width:min(347px,calc(100vw - 28px));max-height:calc(100dvh - 24px)}
.setup-form{padding:14px}
.setup-heading{align-items:center;margin:0 0 8px;min-height:44px}
.setup-heading h2{margin:0;font:800 22px/1.3 var(--ui-font);color:#fff0cb;letter-spacing:-.6px;text-shadow:none}
.setup-close,.social-close{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid #66829c;border-radius:12px;background:#1a304b;color:#fff0cb;font:24px/1 var(--ui-font)}
.setup-tabs{height:52px;gap:8px;padding:4px;margin-bottom:8px;border:0;border-radius:16px;background:#081426}
.setup-tabs button{position:relative;min-height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:#a8b9ca;font:700 12px/1 var(--ui-font)}
.setup-tabs button[aria-selected=true]{background:#1a304b;color:#fff0cb;border:0;box-shadow:none}
.setup-tabs button[aria-selected=true]:after{content:'';position:absolute;bottom:0;left:8%;width:84%;height:3px;border-radius:3px;background:#ffdb4d}
.setup-tabs button span{font-size:12px;margin-left:2px;opacity:1}
.opponent-fieldset legend{display:none}
.opponent-options{gap:8px;padding:0}
.opponent-card{height:100px;gap:2px;padding:20px 2px 4px;border:1px solid #3b526b;border-radius:10px;background:#081426;box-shadow:none}
.opponent-card .opponent-card-face{width:60px;height:60px;max-width:100%;border:0;background-color:transparent}
.opponent-card strong{font:700 11px/1 var(--ui-font);letter-spacing:-.5px;text-shadow:none}
.opponent-card small{display:none}
.opponent-card:has(input:checked){border:2px solid #ffdb4d;background:#1a304b;box-shadow:none;padding-top:19px}
.opponent-number{top:5px;left:0;width:100%;height:12px;padding:0;border:0;background:transparent;box-shadow:none;font:10px/1 var(--ui-font);color:#a8b9ca}
.opponent-card:has(input:checked) .opponent-number{visibility:hidden}
.opponent-card:has(input:checked):after{content:'선택됨';top:5px;left:0;right:0;padding:0;background:transparent;color:#ffdb4d;text-align:center;font:700 9px/1.2 var(--ui-font)}
.opponent-preview{min-height:0;margin:10px 0 8px;padding:0;border:0;background:transparent}
.opponent-preview-face,.opponent-preview strong{display:none}
.opponent-preview p{margin:0;padding:0;border:0;background:transparent;color:#fff0cb;box-shadow:none;font:700 12px/1.4 var(--ui-font)}
.target-label,.taunt-heading{font:400 12px/1.4 var(--ui-font)}
.target-label{margin-bottom:8px}
.setup-panel input[name=target],.setup-panel input[name=taunt]{height:48px;width:100%;padding:12px;border:1px solid #66829c;border-radius:10px;background:#081426;color:#fff0cb;font:400 16px/1.4 var(--ui-font)}
.setup-panel input::placeholder{color:#a8b9ca;opacity:1}
.setup-panel input:focus{outline:2px solid #ffdb4d;outline-offset:2px;border-color:#ffdb4d}
.setup-panel .taunt-heading{margin:10px 0 8px}
.taunt-heading span{font:10px/1 var(--ui-font);color:#a8b9ca}
.setup-panel .taunt-presets{display:grid;grid-template-columns:.8fr 1.1fr 1.1fr;gap:8px;margin-top:8px}
.setup-panel .taunt-presets button{min-width:0;min-height:44px;padding:4px;border:1px solid #66829c;border-radius:18px;background:#081426;color:#fff0cb;font:400 11px/1.2 var(--ui-font);overflow-wrap:anywhere}
.setup-actions{grid-template-columns:minmax(0,1fr) 88px;margin-top:10px;gap:8px}
.setup-actions .start-game,.setup-actions .restart{height:48px;min-height:48px;padding:0 6px;font:700 14px/1 var(--ui-font);border:1px solid #071426;border-radius:12px}
.setup-actions .start-game{display:flex;align-items:center;justify-content:center;background:#ffe2a0;color:#071426}
.setup-actions .restart{background:#1a304b;color:#fff0cb;border-color:#66829c;box-shadow:none;font-size:12px}
.player-fieldset legend{font:700 12px/1.4 var(--ui-font);margin-bottom:8px}
.setup-panel .player-options{max-height:min(47dvh,350px)}
.player-card strong{font-family:var(--ui-font)}
.social-dialog{width:min(337px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:0}
.social-dialog .social-close{top:7px;right:7px}
.social-panel{padding:20px 22px 22px}
.social-panel h2{margin:3px 40px 18px 0;color:#fff0cb;text-shadow:none;font:800 22px/1.3 var(--ui-font);letter-spacing:-.5px}
.share-ticket{height:160px;padding:16px;border:0;border-radius:12px;background:#fff0cb;box-shadow:none}
.ticket-score{height:100%;padding:0;gap:10px}
.share-face{width:96px;height:132px}
.ticket-score>div>span{font:700 16px/1.3 var(--ui-font)}
.ticket-score strong{font:800 64px/1.1 var(--ui-font);letter-spacing:-2px;color:#ef575a;text-shadow:none}
.ticket-score b{font:700 18px/1 var(--ui-font);color:#071426}
.ticket-score>div:last-child{min-width:0}
.ticket-score>div:last-child>div{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.social-note{margin:10px 0;text-align:left;font:400 12px/1.4 var(--ui-font);color:#a8b9ca}
.social-primary,.social-secondary{width:100%;border:1px solid #071426;border-radius:12px;font:700 14px/1 var(--ui-font)}
.social-primary{height:48px;min-height:48px;background:#ffe2a0;color:#071426}
.share-buttons{grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.social-secondary{height:44px;min-height:44px;padding:4px;border:1px solid #66829c;background:#1a304b;color:#fff0cb;box-shadow:none;font-size:12px}
.channel-card{margin-top:10px;padding:12px;border:1px solid #354b62;border-radius:12px;background:#1a304b}
.channel-card-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.channel-card-heading img{width:106px;height:auto;filter:brightness(0) invert(1)}
.channel-card-heading span{font:400 11px/1 var(--ui-font);color:#a8b9ca}
.channel-add{display:flex;align-items:center;justify-content:center;min-height:44px;border:2px solid #fee500;border-radius:12px;color:#fee500;text-decoration:none;font:700 14px/1 var(--ui-font)}
.channel-add:active{background:#fee500;color:#071426}
.channel-add:focus-visible{outline:3px solid white;outline-offset:3px}
.social-status{margin:0 22px 12px;font:12px/1.4 var(--ui-font)}
.social-status:empty{display:none}
@media(min-aspect-ratio:3/5){.cover-art img,.cover-art video{object-position:center bottom}}
@media(max-width:350px){.brand-wordmark{width:142px}.header-actions{gap:6px}.header-actions .settings{min-width:54px}.header-actions .sound{min-width:68px}.controls .move strong{font-size:22px}.controls .bottom-row .move strong{font-size:22px}.controls .on-meter,.controls .on-meter #on-label{font-size:10px}.controls .on-meter{gap:5px}.opponent-card .opponent-card-face{width:54px}.cover-footer{padding-inline:16px}}
@media(max-height:590px){.cover-footer{min-height:96px}.cover-start{height:64px}.controls{padding-block:8px 12px}.controls .move,.controls .rush{height:64px;min-height:64px}.controls .bottom-row .move{height:48px;min-height:48px;gap:8px}.social-actions{height:calc(52px + env(safe-area-inset-bottom,0px));padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}.setup-dialog{max-height:calc(100dvh - 16px)}}
@media(prefers-reduced-motion:reduce){.cover-start{animation:none!important}.cover-art video{display:none}}

/* Opponent and player selection share a compact two-tab layout. */
.setup-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.setup-tabs button{white-space:nowrap;letter-spacing:-.35px;font-size:11px}
.setup-tabs button span{font-size:10px}
#target-settings[hidden]{display:none!important}

/* Keep all eight approved faces inside the cover at narrow portrait sizes. */
.cover-art{background:#031839}
.cover-art img,.cover-art video{object-fit:contain;object-position:center}