/* Dark framed screens, image proportions and hierarchy follow the supplied design board. */
:root{--panel:#20232beF;--cream:#fff8ee;--coral:#ff6475;--mint:#8cdfd0}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
#menu{background-image:url('rukus-brand-kit/artwork/main-menu-v2.png')}#menu::before{background:linear-gradient(90deg,transparent 40%,#12161b35 62%,#12161bc9 100%)}.menu-nav{top:50%;transform:translateY(-50%);right:7%;width:clamp(240px,25vw,390px)}.menu-nav button{padding:15px 22px;margin-top:14px;border-radius:8px}.menu-nav #play{padding:19px 22px}.menu-brand{margin-bottom:22px}.menu-note,.layout-link{display:none!important}
#game-flow{position:fixed;inset:0;z-index:12;background:radial-gradient(ellipse at 50% 0,#33344180,transparent 65%),#11161b;color:var(--cream);overflow:auto;padding:5vh 24px}.flow-shell{max-width:940px;margin:auto}.flow-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #ffffff1c;padding:0 0 20px}.flow-heading h1{font-size:18px;letter-spacing:1px;margin:0}.flow-heading>img{width:90px;height:54px;object-fit:contain}.flow-heading>button{width:auto;margin:0;background:none;color:#f9f4ec;padding:12px 0;font-size:11px}.flow-content{max-width:720px;margin:5vh auto 0}.mode-cards{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}.mode-card{display:flex;flex-direction:column;align-items:center;background:linear-gradient(#303540,#1d2029);border:1px solid #696d76;border-radius:9px;color:#fff8ee;overflow:hidden;padding:0 0 28px;margin:0;letter-spacing:0}.mode-card>img{width:100%;height:230px;object-fit:cover}.mode-card:last-child>img{object-position:65% center}.mode-icon{font-size:38px;line-height:1;margin:22px 0 14px}.mode-card strong{font-size:25px}.mode-card small{color:#c8c6ce;font-weight:400;font-size:13px;line-height:1.4;margin:12px 0 0}.mode-card:hover{border-color:var(--mint)}.quiet-button{background:none;color:#c8c6ce;font-size:11px;width:auto;display:block;margin:25px auto 0;padding:10px}.primary-button{background:linear-gradient(110deg,#ff8b7c,#ff5d72);border:1px solid #ffb2a8;border-radius:8px;color:#141820;padding:17px}.primary-button:disabled{opacity:.45;cursor:not-allowed}
.character-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}.character-card{position:relative;background:linear-gradient(145deg,#873b43,#27262d);height:440px;margin:0;padding:0;overflow:hidden;border-radius:8px;border:2px solid #ffb6a9;color:white}.character-card.wildcard{background:linear-gradient(145deg,#376768,#202930);border-color:#aae5e0}.character-card>img{position:absolute;left:0;top:0;height:auto;width:100%;transform:scale(1.22);transform-origin:50% 0}.character-card strong{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,#10131ceF 50%);padding:65px 8px 18px;font-size:24px;line-height:1.05;text-shadow:0 2px 3px #000}.selection-tick{position:absolute;top:12px;right:12px;padding:5px 8px;border-radius:50%;background:var(--mint);color:#142023;display:none}.character-card[aria-pressed=true]{box-shadow:0 0 0 3px #fff8ee}.character-card[aria-pressed=true] .selection-tick{display:block}.character-note{text-align:center;color:#bdbbc6;font-size:11px;margin:20px 0}.setup-detail{text-align:center;color:#aaa8b6;letter-spacing:1.5px;font-size:10px}
#private-screen{max-width:440px;border:1px solid #ffffff24;border-radius:7px;padding:26px;background:var(--panel)}#private-screen>p{color:#fff8ee;font-size:15px}.room-link{display:flex;gap:8px;margin:22px 0}.room-link input{min-width:0;flex:1;background:#151921;border:1px solid #ffffff20;border-radius:6px;padding:12px;color:#f9f4ec}.room-link button{width:44px;margin:0;border-radius:6px}.toggle-row{display:flex;justify-content:space-between;align-items:center;margin:22px 0;font-size:13px}.toggle-row input{accent-color:var(--mint)}#private-screen .availability-note{color:#c5c2cd;font-size:12px}
#loading-screen{position:relative;min-height:440px;background:url('assets/characters/instigator_wildcard_hero_arena.png') center / cover;border:1px solid #ffffff30;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px}#loading-screen::before{content:'';position:absolute;inset:0;background:linear-gradient(#10141b20,#10141bc9)}#loading-screen>*{position:relative}.loading-logo{width:75%;max-width:480px}#loading-progress{width:60%;height:12px;margin-top:35px;accent-color:var(--mint)}#loading-label{color:var(--cream);font-size:12px;letter-spacing:1px}
dialog{background:linear-gradient(140deg,#252b32,#171b22);border:1px solid #82848d;border-radius:5px;color:var(--cream)}dialog h2{font-size:15px;margin:0 0 25px}dialog button{background:#292d38;border:1px solid #ffffff18;color:var(--cream);border-radius:7px}#pause-dialog{width:min(440px,90vw);padding:25px 30px}#pause-dialog h2{text-align:left}.pause-actions{padding:30px 0 15px}.pause-actions button{margin-top:12px}#pause-leave{color:#ff858b;background:#37282e}.audio-settings label{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}.audio-settings input{width:65%;margin:0}#settings-dialog{max-height:85vh;overflow:auto}#settings-dialog label{margin:16px 0}#settings-dialog select{padding:8px}#settings-dialog p{font-size:11px}
#duel-result{width:min(820px,94vw);height:460px;min-width:0;overflow:hidden;border:1px solid #b0adb1;border-radius:5px;padding:55px 45px 30px 52%;background:radial-gradient(ellipse at 20% 80%,#843c4940,transparent 70%),#151b22;text-align:center}#result-character{position:absolute;left:0;bottom:-80px;width:58%;height:520px;object-fit:contain;object-position:center bottom}.result-crown{color:#ffc857;position:relative;font-size:40px;line-height:1;margin-bottom:5px}#duel-result h2{font-size:48px;position:relative;color:#ffc857;transform:rotate(-7deg);margin:0 0 22px;white-space:nowrap}#duel-result p{color:#c8c6cc;font-size:12px;position:relative}#duel-result button{position:relative;font-size:11px;padding:13px}#duel-result .primary-button{color:#151922}
body:has(#duel-hud:not([hidden])) header{display:none}.duel-score{top:14px;background:#242731b8;border-radius:0 0 15px 15px;border:1px solid #ffffff35;padding:8px 22px;min-width:160px}.duel-score b{font-size:17px}.duel-score span{color:#fff8ee;font-size:26px}.duel-score small{font-size:8px}.duel-health{left:25px;bottom:24px;padding:8px 16px 10px 72px;min-width:230px;border-radius:15px;border:1px solid #eee8e330}.duel-health b{font-size:22px}.duel-health>img{position:absolute;left:-10px;top:-11px;width:73px;height:73px;object-fit:cover;object-position:50% 0;background:#503a40;border-radius:50%;border:3px solid #ff858b}.duel-health i{height:13px}.duel-health span{font-size:8px}.duel-health small:empty{display:none}.player-hearts{position:absolute;left:30px;top:24px;display:flex;align-items:center;gap:5px;font-size:26px;color:#ff697c;text-shadow:0 2px 1px #292936}.player-hearts img,.opponent-hearts img{width:66px;height:66px;border:3px solid #ff8f96;object-fit:cover;object-position:50% 0;border-radius:50%;background:#693e43}.player-hearts span.empty{color:#303644}.opponent-hearts{position:absolute;right:24px;top:24px;display:flex;align-items:center;gap:5px;font-size:26px;color:#84ceef;text-shadow:0 2px 1px #292936}.opponent-hearts img{border-color:#a2deec;background:#354851}.opponent-hearts span.empty{color:#303644}body:has(#duel-hud:not([hidden])) .target-health{display:none}.loadout{bottom:22px;gap:8px}.loadout button{width:76px;height:75px;padding:5px;border-radius:10px;transform:skew(-6deg)}.loadout img{height:48px}.loadout span{font-size:8px}.ammo{bottom:25px;min-width:135px;padding:10px 16px}.ammo strong{font-size:30px}.ammo small{font-size:7px}.combat-help{bottom:110px;font-size:8px;background:#252a3370}.menu-return{top:102px;right:25px;font-size:8px;padding:8px}#hit-confirm.visible::before{content:'×';display:block;font-size:28px;line-height:1;position:absolute;top:-34px;left:50%;transform:translateX(-50%)}#duel-feed{top:140px}
@media(max-width:700px){.menu-nav{right:6%;width:210px}.menu-brand{margin-bottom:10px}.flow-heading h1{font-size:14px}.flow-heading>img{width:65px}.mode-cards{grid-template-columns:1fr 1fr;gap:12px}.mode-card>img{height:150px}.mode-card strong{font-size:20px}.mode-card small{font-size:11px}.character-card{height:330px}.character-card strong{font-size:19px}.character-cards{gap:14px}.flow-content{margin-top:3vh}#duel-result{height:390px;padding:45px 20px 20px 49%}#result-character{height:400px;bottom:-50px}#duel-result h2{font-size:30px}.player-hearts,.opponent-hearts{font-size:16px;top:15px;gap:2px}.player-hearts{left:12px}.opponent-hearts{right:12px}.player-hearts img,.opponent-hearts img{width:43px;height:43px}.duel-score{top:70px}.duel-health{left:15px;bottom:120px;min-width:180px}.ammo{bottom:120px}.loadout{bottom:24px}.combat-help{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.character-card>img{transform:scale(2)}.mode-links{display:flex;justify-content:center;gap:24px}.mode-links a{text-decoration:none}
.portrait{overflow:hidden;position:relative;display:block;width:66px;height:66px;border-radius:50%;border:3px solid #ff8f96;flex-shrink:0;background:#693e43}.portrait img{position:absolute;left:0;top:0;width:100%;height:auto;border:0;border-radius:0;transform:scale(3);transform-origin:50% 0}.opponent-hearts .portrait{border-color:#a2deec;background:#354851}.duel-health .portrait{position:absolute;left:-10px;top:-11px;width:73px;height:73px}@media(max-width:700px){.player-hearts .portrait,.opponent-hearts .portrait{width:43px;height:43px}}
/* Confirmed combat feedback; overlays never intercept input. */
#combat-feedback{position:absolute;inset:0;z-index:5;pointer-events:none;font-family:Arial,sans-serif;color:#fff8ee}#combat-feedback[hidden]{display:none}#hit-confirm{display:none!important}
#impact-reticle{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%) scale(1.2);opacity:0;color:#fff8ee;transition:opacity .07s,transform .08s}#impact-reticle.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}#impact-reticle i{position:absolute;width:11px;height:3px;background:currentColor;box-shadow:0 1px 3px #151b22}#impact-reticle i:nth-child(1){left:0;top:3px;transform:rotate(45deg)}#impact-reticle i:nth-child(2){right:0;top:3px;transform:rotate(-45deg)}#impact-reticle i:nth-child(3){left:0;bottom:3px;transform:rotate(-45deg)}#impact-reticle i:nth-child(4){right:0;bottom:3px;transform:rotate(45deg)}#impact-reticle[data-kind=bank],#impact-reticle[data-kind=ko]{color:#ffc857}#impact-reticle[data-kind=bonk]{color:#ff8791}
#impact-label{position:absolute;left:50%;top:calc(50% + 30px);transform:translateX(-50%);font-size:15px;font-weight:900;letter-spacing:.8px;text-shadow:0 2px 4px #151b22;opacity:0;white-space:nowrap;transition:opacity .1s}#impact-label.visible{opacity:1}#impact-label[data-kind=bank],#impact-label[data-kind=ko]{color:#ffc857}#impact-label[data-kind=shield]{font-size:11px;color:#a2e8ef}#impact-label[data-kind=bonk]{color:#ff8791}
#self-shield{position:absolute;inset:8px;border:2px solid #9ce6ef00;border-radius:14px;transition:border-color .2s}.protected #self-shield{border-color:#9ce6ef66;box-shadow:inset 0 0 24px #7adbc81a}
#duel-message{top:38%;font-weight:950;font-style:italic;letter-spacing:-2px;line-height:1.1;color:#fff8ee}#duel-message[data-phase=countdown]{font-size:100px;text-shadow:0 4px 0 #292936,0 0 32px #ffc85755}#duel-message[data-phase=go]{font-size:clamp(24px,4vw,48px);color:#ffc857;white-space:nowrap}#duel-message[data-phase=respawn]{font-size:27px;letter-spacing:1px;background:#171b22dc;padding:16px 28px;border-top:2px solid #ff8791;border-bottom:1px solid #ff879133;border-radius:5px}
.duel-score[data-leader=player]{border-color:#7adbc8aa}.duel-score[data-leader=bot]{border-color:#ff8791aa}#bot-warning:not(:empty){padding:8px 12px;border-radius:5px;background:#251e26c9;border:1px solid #ff879144;font-weight:900}#bot-warning[data-bank=true]{color:#ffc857;border-color:#ffc85766}
.result-kicker{position:relative;font-size:10px;letter-spacing:2px;color:#c8c6cc;margin-bottom:10px}.result-stats{position:relative;display:flex;justify-content:center;gap:18px;margin:20px 0}.result-stats span{display:flex;flex-direction:column;gap:4px;font-size:8px;letter-spacing:.8px;color:#bfbfc8}.result-stats b{font-size:20px;color:#fff8ee;letter-spacing:0}#duel-result[data-winner=bot] h2{color:#ff8791}#duel-result[data-winner=draw] h2{color:#a2deec}
@media(max-width:700px){#duel-message[data-phase=countdown]{font-size:72px}.result-stats{gap:10px;margin:15px 0}.result-stats span{font-size:7px}.result-stats b{font-size:17px}#bot-warning{top:26%;font-size:8px}#impact-label{font-size:12px}}
@media(prefers-reduced-motion:reduce){#impact-reticle,#impact-label,#self-shield{transition:none}}
#duel-result{height:500px;padding-top:32px;padding-bottom:24px}#duel-result .result-crown{font-size:30px;margin-bottom:5px}#duel-result h2{font-size:44px;margin-bottom:14px}#duel-result p{margin:10px 0}#duel-result .result-stats{margin:16px 0}#duel-result button{padding:11px}
@media(max-width:700px){#duel-result{height:430px;padding-top:25px}#duel-result h2{font-size:29px;margin-bottom:12px}#duel-result .result-crown{font-size:25px}#duel-result .result-stats{margin:12px 0}#duel-result button{font-size:10px;padding:10px}#duel-result p{font-size:10px}}
/* Dialog percentage padding resolves against the viewport, so cap the artwork column explicitly. */
#duel-result{padding:32px 36px 24px min(52vw,425px)}
@media(max-width:700px){#duel-result{padding:25px 16px 20px 48vw}}
@media(max-width:700px){#duel-result h2{font-size:clamp(22px,6.1vw,29px)}}