@font-face{font-family:"KF David Libre";src:url('./assets/fonts/david-libre-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"KF Rubik";src:url('./assets/fonts/rubik-variable.ttf') format('truetype');font-weight:300 900;font-style:normal;font-display:swap} :root{color-scheme:dark;--bg:#020e1b;--panel:#041a34;--line:#093669;--text:#ebf4fe;--muted:#6eb0fb;--primary:#5ea7fb;--cyan:#79b6fc;--pink:#77b5fc;font-family:"KF Rubik",Arial,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);min-width:300px}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.45;cursor:wait}button:focus-visible,canvas:focus-visible{outline:3px solid var(--primary);outline-offset:5px}button{transition:background .15s,border-color .15s,transform .15s}button:hover:not(:disabled){filter:brightness(1.14)}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}canvas{image-rendering:pixelated}h1,h2,p{margin:0}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:27px;height:26px;padding:0 7px;border:1px solid #126fd963;border-bottom:3px solid #126fd963;border-radius:3px;font:700 12px "KF Rubik",Arial,sans-serif;color:#c8e1fe}button kbd{color:inherit;border-color:currentColor;height:23px;opacity:.7}.game-header{height:82px;position:absolute;z-index:8;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(20px,4vw,64px);border-bottom:1px solid #ffffff0d}.wordmark{display:flex;align-items:center;gap:12px;border:0;background:none;padding:0;color:var(--primary);font:bold 33px "KF Rubik",Arial,sans-serif;letter-spacing:-2px}.wordmark span{font:700 10px/1.25 "KF Rubik",Arial,sans-serif;letter-spacing:2px;color:#cee4fe;text-align:left}.header-controls{display:flex;align-items:center;gap:10px}.edition{font:11px "KF Rubik",Arial,sans-serif;letter-spacing:2px;color:#2482ed;margin-left:24px}.edition b{color:var(--primary);padding-left:7px}.utility{background:#041932b3;border:1px solid #0a407e80;padding:9px 13px;color:#c5e0fe;font-size:14px;border-radius:2px}.utility[aria-pressed=false]{color:#1375e4}.screen{min-height:100svh;position:relative}.overline{font:700 12px/1.5 "KF Rubik",Arial,sans-serif;letter-spacing:4px;color:var(--primary)}.text-button{border:0;background:transparent;color:var(--muted);padding:8px;font-size:14px}.action{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 25px;border:1px solid #5ea7fb59;font-size:18px;font-weight:700;text-align:right;min-height:62px;border-radius:2px}.action-primary{background:var(--primary);color:#041a33;box-shadow:0 4px 0 #1064c3,0 12px 40px #00000044;border-color:var(--primary);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}.action-secondary{background:#052243da;border-color:#0f60bc80}.action-quiet{background:none;border-color:#0f60bc45;color:#77b5fc}.button-end{font:22px "KF Rubik",Arial,sans-serif;opacity:.65}.menu-screen{height:100svh;min-height:650px;display:flex;justify-content:center;align-items:center;overflow:hidden}.title-scene,.menu-shade,.scanlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.menu-shade{background:linear-gradient(90deg,#020e1b70,#020e1b00 30%,#020e1b10 70%,#020e1b80),linear-gradient(0deg,#020d19 0%,#03162b80 30%,transparent 90%)}.scanlines{background:repeating-linear-gradient(0deg,transparent 0 3px,#00000014 3px 4px);opacity:.55}.menu-content{position:relative;z-index:1;width:min(540px,76vw);padding-top:72px;text-align:center}.menu-content .overline{display:flex;gap:15px;align-items:center;justify-content:center;font-size:11px;letter-spacing:5px;margin-bottom:26px;color:#c5e0fe}.overline span{height:1px;width:32px;background:#1e7fed}.menu-content h1{filter:drop-shadow(0 12px 0 #020d19) drop-shadow(0 22px 38px #000000bb)}#title-logo{width:100%;height:auto;display:block}.menu-caption{font-size:18px;margin-top:26px;letter-spacing:1px;color:#88befc}.menu-actions{display:grid;gap:14px;max-width:328px;margin:36px auto 0}.enter-hint{display:block;margin-top:27px;font:10px "KF Rubik",Arial,sans-serif;letter-spacing:3px;color:#2683ed;animation:breathe 2.8s ease-in-out infinite}.screen-footer{position:absolute;bottom:23px;left:clamp(20px,4vw,64px);right:clamp(20px,4vw,64px);display:flex;justify-content:space-between;color:#1b7dec;font-size:12px;z-index:1}.screen-footer span:last-child{font:10px "KF Rubik",Arial,sans-serif;letter-spacing:2px}.asset-error{font-size:14px;color:#9ecafd;padding:18px}.select-screen{padding:110px clamp(20px,4vw,64px) 32px;background:radial-gradient(ellipse at 20% 48%,#072b544d,transparent 50%),radial-gradient(ellipse at 82% 52%,#072c5645,transparent 48%),linear-gradient(125deg,#020f1d,#041b35 52%,#020f1d)}.select-heading{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:15px;max-width:1480px;margin:auto;text-align:center}.select-heading>.text-button{justify-self:start}.select-heading h1{font-size:clamp(28px,3.4vw,50px);font-weight:900;letter-spacing:-1.2px;line-height:1.15;margin-top:6px}.select-heading .overline{font-size:10px;letter-spacing:3px}.select-count{justify-self:end;font:700 31px "KF Rubik",Arial,sans-serif;color:#77b5fc;display:flex;align-items:center;gap:9px}.select-count small{font-size:9px;letter-spacing:2px;max-width:50px}.selection-stage{max-width:1490px;margin:26px auto 0;display:grid;grid-template-columns:minmax(190px,1fr) minmax(410px,1.55fr) minmax(190px,1fr);align-items:center;gap:clamp(10px,2.7vw,40px)}.fighter-preview{--accent:var(--primary);position:relative;min-width:0}.preview-cpu{--accent:var(--cyan)}.fighter-preview-top{display:flex;justify-content:space-between;align-items:center;gap:6px;color:var(--accent)}.player-label{font:700 10px "KF Rubik",Arial,sans-serif;letter-spacing:2px}.fighter-type{font-size:12px;padding:5px 9px;border:1px solid #116bd250;color:#7ab7fc}.fighter-plinth{height:clamp(280px,31vw,440px);position:relative;overflow:hidden;margin-top:12px;border-bottom:2px solid var(--accent);background:linear-gradient(0deg,#ffffff06,transparent 80%)}.fighter-plinth:after{content:'';position:absolute;left:15%;right:15%;height:20px;bottom:0;background:var(--accent);filter:blur(20px);opacity:.35}.fighter-plinth canvas{height:100%;width:100%;object-fit:contain;position:absolute;inset:0;z-index:1}.fighter-shadow-number{position:absolute;top:18%;left:50%;transform:translateX(-50%);font:bold clamp(100px,14vw,200px)/1 "KF Rubik",Arial,sans-serif;color:transparent;-webkit-text-stroke:1px #4c99f11f;letter-spacing:-14px}.preview-copy{padding-top:15px}.preview-copy h2{font-size:clamp(22px,2.5vw,40px);line-height:1.08;font-weight:900;letter-spacing:-1px;color:var(--accent)}.preview-copy>p{font-size:14px;color:#5aa5fb;line-height:1.6;margin-top:8px;min-height:44px}.special-card{border-top:1px solid #0e56a94d;margin-top:12px;padding-top:12px;display:flex;flex-direction:column;gap:4px}.special-card small{font-size:12px;color:#2381ed}.special-card strong{font-size:17px}.fighter-stats{display:flex;gap:17px;margin-top:14px;font-size:12px;color:#61a9fb}.fighter-stats>span{display:flex;align-items:center;gap:7px}.fighter-stats i{display:flex;gap:3px}.fighter-stats b{width:6px;height:11px;background:#0b4689}.fighter-stats b.on{background:var(--accent)}.roster-center{align-self:center;min-width:0}.choose-side{display:grid;grid-template-columns:1fr 1fr;margin-bottom:20px;gap:7px}.choose-side button{display:flex;justify-content:space-between;align-items:center;border:1px solid #0b4382;background:#041b36;padding:12px;font-size:14px;font-weight:700;color:#3e91ef}.choose-side button span{font:10px "KF Rubik",Arial,sans-serif;padding:3px 5px;background:#00000033}.choose-side button[aria-pressed=true]{border-color:var(--primary);background:#072d59;color:var(--primary)}#choose-cpu[aria-pressed=true]{border-color:var(--cyan);background:#062950;color:var(--cyan)}.roster{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}.fighter-card{width:calc((100% - 35px)/6);position:relative;border:1px solid #0a4282;background:linear-gradient(#083365,#051f3d);border-radius:2px;padding:0;min-width:0;isolation:isolate;text-align:center;overflow:hidden}.fighter-card:hover{border-color:#a7cffd;transform:translateY(-3px)}.fighter-card.player-pick{border:2px solid var(--primary);background:linear-gradient(#0b4587,#242125);box-shadow:0 0 18px #5ea7fb1c}.fighter-card.cpu-pick{border:2px solid var(--cyan);background:linear-gradient(#093a71,#05203e)}.portrait-window{height:clamp(68px,7vw,108px);position:relative;overflow:hidden}.portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.card-name{display:block;padding:8px 2px;font-size:12px;font-weight:700;background:#020c1890;border-top:1px solid #ffffff09;white-space:nowrap}.card-number{position:absolute;z-index:2;top:4px;right:5px;color:#75b4fb;font:9px "KF Rubik",Arial,sans-serif}.pick-label{position:absolute;left:0;bottom:29px;z-index:3;padding:3px 4px;background:var(--primary);color:#031120;font:bold 9px "KF Rubik",Arial,sans-serif}.cpu-pick .pick-label{background:var(--cyan)}.match-divider{display:flex;align-items:center;gap:16px;margin:27px auto 22px;width:75%;opacity:.85}.match-divider span{height:1px;background:#0b4588;flex:1}.match-divider b{font:italic 900 43px "KF Rubik",Arial,sans-serif;color:#1273e2}.roster-center>.action{max-width:360px;margin:auto}.selection-note{text-align:center;font-size:13px;color:#62a9fb;margin-top:17px}.keyboard-hint{display:flex;align-items:center;justify-content:center;gap:6px;color:#116cd5;font-size:11px;margin-top:15px}.keyboard-hint>span{margin:0 5px}.keyboard-hint kbd{font-size:9px;height:20px;min-width:20px;padding:0 4px}.battle-screen{padding:104px clamp(14px,4vw,64px) 28px;background:radial-gradient(ellipse at 50% 35%,#072a51,#020d19 75%);display:flex;flex-direction:column;justify-content:center}.battle-topline,.battle-bottomline{display:flex;justify-content:space-between;align-items:center;gap:10px;width:min(100%,calc((100svh - 218px)*16/9),1400px);margin:0 auto;font-size:12px;color:#4494f0}.battle-topline{padding-bottom:12px}.battle-topline b{color:#c6e0fe;font-weight:400}.battle-topline>span:last-of-type{font:10px "KF Rubik",Arial,sans-serif;letter-spacing:3px}.battle-topline>div{display:flex;gap:10px;align-items:center}.battle-topline .text-button{font-size:12px;padding:3px}.arena-frame{position:relative;width:min(100%,calc((100svh - 218px)*16/9),1400px);margin:0 auto;border:1px solid #1271dd6b;box-shadow:0 30px 90px #00000099,0 0 0 5px #051d39;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#05203f}.arena-frame>canvas{width:100%;height:100%;display:block;outline-offset:-4px}.arena-frame:fullscreen{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:#020e1b;border:0;border-radius:0}.arena-frame:fullscreen>canvas{width:min(100vw,177.777vh);height:auto}.hud{position:absolute;top:5%;left:4%;right:4%;display:grid;grid-template-columns:1fr 11% 1fr;gap:2.5%;pointer-events:none}.health-heading{display:flex;align-items:center;gap:9px;justify-content:space-between;margin-bottom:7px;text-shadow:0 2px 3px #000000}.health-heading strong{font-size:clamp(15px,2vw,30px);font-weight:900}.player-tag{font:700 11px "KF Rubik",Arial,sans-serif;background:#020d1980;padding:3px 5px;color:var(--primary)}.cpu .player-tag{color:var(--cyan)}.health-track{height:clamp(13px,2.1vw,26px);background:#0a3c75c9;border:1px solid #dbebfe7a;box-shadow:0 3px 0 #020f1d80;padding:2px;transform:skewX(-11deg);overflow:hidden}.health-fill{height:100%;background:linear-gradient(0deg,#1377ea,#7db8fc);width:100%;transition:width .1s}.cpu .health-fill{background:linear-gradient(0deg,#1d7eed,#a6cffd);margin-left:auto}.under-health{display:flex;align-items:center;gap:9px;margin-top:8px}.energy-track{height:5px;flex:1;background:#062345d9;box-shadow:0 0 0 1px #73b2fb44}.energy-track>div{width:40%;height:100%;background:var(--primary)}.cpu .energy-track>div{background:var(--cyan);margin-left:auto}.energy-label{font:7px "KF Rubik",Arial,sans-serif;letter-spacing:1px;color:#cce3fe;text-shadow:0 2px #031122}.wins{display:flex;gap:5px}.wins i{height:7px;width:7px;border:1px solid #63aafb;transform:rotate(45deg);background:#031529}.wins .won{background:var(--primary);border-color:var(--primary)}.cpu .wins .won{background:var(--cyan);border-color:var(--cyan)}.timer-block{text-align:center;padding-top:0;color:#d8eafe;text-shadow:0 3px 0 #051d38}.timer-block>span{font:9px "KF Rubik",Arial,sans-serif;letter-spacing:1px}.timer-block strong{display:block;font:900 clamp(28px,4vw,61px)/1 "KF Rubik",Arial,sans-serif;letter-spacing:-3px}.arena-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;pointer-events:none;background:#020d1a26;padding:14% 14px 5%;text-shadow:0 4px 0 #04182f}.arena-overlay>span{font:700 13px "KF Rubik",Arial,sans-serif;letter-spacing:5px;color:var(--primary)}.arena-overlay>strong{font-size:clamp(29px,5vw,74px);font-weight:900;letter-spacing:-2px;margin-top:11px;line-height:1.1}.arena-overlay>p{font-size:18px;color:#d2e7fe;margin-top:12px}.result-actions{width:min(275px,65%);pointer-events:auto;display:grid;gap:11px;margin-top:22px}.result-actions:empty{display:none}.result-actions .action{padding:12px 20px;min-height:44px;font-size:16px}.battle-bottomline{margin-top:17px;font-size:12px}.battle-bottomline>span:last-child{font:9px "KF Rubik",Arial,sans-serif;letter-spacing:2px}.battle-bottomline kbd{height:21px;font-size:11px;margin-left:7px}.desktop-controls{display:flex;justify-content:center;gap:28px;margin-top:27px;color:#3189ee;font-size:12px}.desktop-controls>span{display:flex;align-items:center;gap:6px}.touch-controls{display:none;justify-content:space-between;gap:10px;margin:20px auto 0;width:min(100%,960px);touch-action:none}.touch-controls>div{display:flex;gap:6px}.touch-controls button{border:1px solid #0d52a0;background:#06264b;min-width:46px;height:47px;border-radius:3px;padding:0 12px;font-size:13px;font-weight:bold;user-select:none;touch-action:none}.touch-move button{font-size:25px}.touch-controls .held{background:#0f61be}.touch-controls .touch-special{border-color:var(--primary);color:var(--primary)}.game-dialog{background:linear-gradient(145deg,#06284e,#041932 70%);color:var(--text);border:1px solid #1169cd66;border-top:3px solid var(--primary);box-shadow:0 40px 130px #000000bb;padding:42px;max-width:calc(100vw - 32px);max-height:90svh;overflow:auto;border-radius:3px}.game-dialog::backdrop{background:#020a14c9;backdrop-filter:blur(9px)}.game-dialog h2{font-size:38px;font-weight:900;letter-spacing:-1px;margin-top:13px}.dialog-subtitle{font-size:15px;color:#67acfb;line-height:1.7;margin-top:12px}.pause-dialog{width:470px}.pause-actions{display:grid;gap:12px;margin-top:31px}.pause-actions .action{font-size:17px;min-height:58px;padding:16px 20px}.help-dialog{width:620px}.dialog-close{position:absolute;left:18px;top:12px;background:none;border:0;color:#5aa5fb;font-size:30px}.help-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 25px;margin-top:27px}.help-controls>div{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #0d53a277;padding:12px 0;font-size:14px;gap:10px}.help-controls>div>div{display:flex;align-items:center;gap:4px}.help-note{font-size:14px;line-height:1.8;color:#76b4fb;margin:22px 0}.help-dialog>.action{font-size:16px;justify-content:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes breathe{0%,100%{opacity:.45}50%{opacity:.9}} @media(min-width:1700px){.select-screen{display:flex;flex-direction:column;justify-content:center}.select-heading,.selection-stage{width:100%}.selection-stage{margin-top:36px}.portrait-window{height:113px}} @media(max-width:1100px){.selection-stage{grid-template-columns:minmax(155px,1fr) minmax(360px,1.65fr) minmax(155px,1fr);gap:15px}.select-screen{padding-left:25px;padding-right:25px}.fighter-type{display:none}.fighter-plinth{height:310px}.preview-copy h2{font-size:27px}.fighter-stats{gap:8px;flex-wrap:wrap}.special-card strong{font-size:15px}.roster{gap:6px}.fighter-card{width:calc((100% - 24px)/5)}.card-name{font-size:12px}.desktop-controls{gap:17px}} @media(max-width:800px){.game-header{height:68px;padding:0 20px}.edition{display:none}.wordmark{font-size:29px}.wordmark span{font-size:8px}.utility{font-size:13px;padding:8px 10px}.menu-screen{min-height:620px}.menu-content{padding-top:38px;width:min(510px,82vw)}.menu-content .overline{font-size:9px;letter-spacing:3px}.menu-caption{font-size:16px}.menu-actions{max-width:300px;margin-top:28px}.select-screen{padding:90px 18px 24px}.select-heading h1{font-size:34px}.select-heading .overline{font-size:9px;letter-spacing:2px}.select-count{font-size:24px}.select-count small{display:none}.selection-stage{grid-template-columns:1fr 1fr;gap:10px 22px;margin-top:22px}.fighter-preview{grid-row:1}.preview-player{grid-column:1}.preview-cpu{grid-column:2}.roster-center{grid-column:1/-1;grid-row:2;margin-top:22px;width:min(100%,580px);justify-self:center}.fighter-plinth{height:230px;margin-top:6px}.fighter-shadow-number{font-size:140px}.preview-copy{padding-top:11px}.preview-copy h2{font-size:28px}.preview-copy>p,.fighter-stats{display:none}.special-card{border:0;padding:0;margin-top:7px;gap:3px}.special-card small{font-size:11px}.special-card strong{font-size:14px}.choose-side{margin-bottom:12px}.fighter-card{width:calc((100% - 35px)/6)}.portrait-window{height:86px}.match-divider{margin:17px auto 13px}.match-divider b{font-size:31px}.keyboard-hint{display:none}.battle-screen{padding:89px 15px 24px;justify-content:flex-start}.arena-frame,.battle-topline,.battle-bottomline{width:100%}.desktop-controls{display:none}.touch-controls{display:flex}.battle-topline>span:last-of-type{display:none}.health-heading strong{font-size:21px}.timer-block strong{font-size:43px}.health-track{height:20px}.arena-overlay>strong{font-size:45px}.screen-footer{left:20px;right:20px;font-size:11px}.screen-footer span:last-child{font-size:8px}} @media(max-width:500px){.utility span{display:none}.utility{min-width:38px;font-size:18px;padding:5px 9px}.menu-screen{min-height:590px}.menu-content{width:88vw}.menu-content .overline{font-size:8px;letter-spacing:2px;margin-bottom:20px}.menu-caption{font-size:15px}.menu-actions{max-width:280px}.action{min-height:57px;padding:15px 21px;font-size:17px}.enter-hint{font-size:9px;letter-spacing:2px}.screen-footer{flex-direction:column;align-items:center;gap:7px;bottom:16px}.select-heading{grid-template-columns:45px 1fr 30px}.select-heading>.text-button{font-size:12px;padding:4px}.select-heading h1{font-size:29px}.select-heading .overline{letter-spacing:1.5px;font-size:8px}.select-count{font-size:20px}.selection-stage{gap:10px 14px}.fighter-plinth{height:200px}.player-label{font-size:8px;letter-spacing:1px}.preview-copy h2{font-size:24px}.special-card strong{font-size:13px}.fighter-shadow-number{font-size:105px}.roster-center{margin-top:17px}.fighter-card{width:calc((100% - 24px)/5)}.roster{gap:6px}.portrait-window{height:76px}.card-name{font-size:12px;padding:7px 0}.choose-side button{font-size:13px;padding:10px}.selection-note{font-size:12px}.battle-screen{padding-left:10px;padding-right:10px}.battle-topline{font-size:10px;gap:5px;padding-bottom:9px}.battle-topline .text-button{font-size:11px}.battle-topline kbd{font-size:10px;min-width:24px;padding:0 3px;height:20px}.hud{top:4%;left:4%;right:4%;gap:3%;grid-template-columns:1fr 12% 1fr}.health-heading{margin-bottom:5px;gap:4px}.health-heading strong{font-size:14px}.player-tag{font-size:8px;padding:2px}.health-track{height:11px;padding:1px}.under-health{gap:5px;margin-top:5px}.wins i{height:5px;width:5px}.energy-track{height:3px}.energy-label{display:none}.timer-block strong{font-size:29px;letter-spacing:-2px}.timer-block>span{font-size:6px;letter-spacing:0}.arena-overlay>strong{font-size:27px;margin-top:7px;letter-spacing:-1px}.arena-overlay>span{font-size:8px;letter-spacing:2px}.arena-overlay>p{font-size:12px;margin-top:7px}.result-actions{margin-top:12px;gap:5px}.result-actions .action{min-height:32px;font-size:12px;padding:6px 12px}.result-actions .text-button{font-size:11px;padding:2px}.battle-bottomline{font-size:10px}.battle-bottomline>span:last-child{font-size:7px;letter-spacing:1px}.battle-bottomline kbd{height:18px;font-size:9px;min-width:19px;margin-left:3px}.touch-controls{gap:8px;margin-top:18px}.touch-controls>div{gap:4px}.touch-controls button{min-width:32px;height:43px;padding:0 7px;font-size:11px}.touch-move button{font-size:21px}.game-dialog{padding:30px 24px}.game-dialog h2{font-size:31px}.help-controls{grid-template-columns:1fr}.game-dialog .overline{font-size:10px}.pause-actions .action{font-size:16px}.help-note{font-size:13px}} @media(max-height:600px) and (min-width:801px){.menu-screen{min-height:530px}.menu-content{width:380px;padding-top:65px}.menu-content .overline{margin-bottom:10px}.menu-caption{margin-top:12px;font-size:14px}.menu-actions{margin-top:18px;gap:9px;max-width:270px}.menu-actions .action{padding:12px 20px;min-height:48px;font-size:16px}.enter-hint{margin-top:15px}.battle-screen{padding-top:76px}.game-header{height:62px}.arena-frame,.battle-topline,.battle-bottomline{width:min(100%,calc((100svh - 150px)*16/9))}.desktop-controls{margin-top:15px}.battle-bottomline{margin-top:10px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* Reference-driven arcade shell: ink outlines, slanted blue plates and bright white meters. */ :root{--bg:#010912;--panel:#05203e;--line:#0e55a7;--primary:#2a85ee;--cyan:#559ef1;--text:#ffffff;--muted:#77b5fc;--blue:#1274e3;--ink:#010306} body{background:var(--bg)}.game-header{background:linear-gradient(#010912f5,#01091290);border-bottom:3px solid #000205;box-shadow:0 1px #1067ca4d}.wordmark{color:var(--primary);text-shadow:3px 3px #010306}.wordmark span{color:#d1e6fe}.edition{color:#67acfb}.edition b{color:#9fcbfd}.utility{border:3px solid #000205;border-radius:8px;background:#083364;box-shadow:inset 0 1px #5fa8fb70;padding:7px 12px;font-weight:700;color:#ebf4fe}.utility[aria-pressed=false]{background:#041930;color:#4a97f0}.overline{color:var(--primary)}.text-button{color:#9bc8fc;font-weight:700}.action{border:5px solid var(--ink);border-radius:10px;clip-path:none;transform:skewX(-12deg);padding:16px 25px;min-height:65px;box-shadow:0 5px 0 #000000,0 0 0 1px #53a1fb5c;font-size:20px}.action>*{transform:skewX(12deg)}.action-primary{background:linear-gradient(110deg,#1271dd,#2784ee 72%,#3b8fef);color:#020c18;border-color:#010408}.action-secondary{background:linear-gradient(120deg,#0e59ae,#1a7cec);border-color:#010408;color:#ffffff}.action-quiet{background:#052142;border-color:#01060b;color:#88befc}.action:hover:not(:disabled){transform:skewX(-12deg) translateY(-2px);filter:brightness(1.1)}.action:active:not(:disabled){transform:skewX(-12deg) translateY(2px)}.button-end{opacity:.9}.menu-screen{background:#020b15}.menu-shade{background:linear-gradient(90deg,#03162ba6,transparent 32%,transparent 68%,#03162ba6),linear-gradient(0deg,#010912 0%,#03152988 38%,transparent 95%)}.menu-content h1{filter:drop-shadow(0 9px 0 #000204) drop-shadow(0 18px 25px #010408)}.menu-content .overline{color:#cbe3fe}.overline span{background:#5ba6fb}.menu-caption{color:#a6cffd}.menu-actions{gap:18px}.enter-hint{color:#57a4fb}.screen-footer{color:#559ef1} .select-screen{background:radial-gradient(ellipse at 20% 50%,#0d519e65,transparent 53%),radial-gradient(ellipse at 83% 48%,#0d509c65,transparent 55%),linear-gradient(135deg,#031120,#05203f 52%,#020d1a)}.select-heading h1{color:#ffffff;text-shadow:4px 4px #010408}.select-count{color:var(--primary)}.selection-stage{gap:clamp(18px,2.7vw,42px)}.fighter-preview{background:linear-gradient(160deg,#08336570,#031427);border:5px solid #010408;border-radius:15px;padding:16px 16px 19px;box-shadow:0 0 0 1px #1169ce70}.fighter-preview-top{border-bottom:2px solid #0e58ad;padding-bottom:9px}.player-label{font-size:12px;letter-spacing:1px}.fighter-type{font-size:13px;color:#add2fd;border-color:#116dd6}.fighter-plinth{height:clamp(235px,calc(100svh - 435px),420px);border-bottom:4px solid var(--accent);background:linear-gradient(0deg,#1062bf70,transparent 72%);border-radius:10px 10px 3px 3px;margin-top:14px}.fighter-shadow-number{-webkit-text-stroke:2px #5ea7fb33;color:#093a7224;font-style:italic}.preview-copy h2{font-size:clamp(24px,2.4vw,39px);text-shadow:3px 3px #000306;letter-spacing:-.7px}.preview-copy>p{color:#84bcfc;line-height:1.55;min-height:42px}.special-card{border-top:2px solid #0e58ad62}.special-card small{color:#74b3fb}.special-card strong{color:#ffffff}.fighter-stats{color:#98c7fc}.fighter-stats b{background:#083466;border:1px solid #01050a;transform:skewX(-14deg);width:8px;height:12px}.fighter-stats b.on{background:linear-gradient(#4c99f1,#116ed8)}.preview-cpu .fighter-stats b.on{background:var(--cyan)}.choose-side{gap:12px;margin-bottom:15px;padding:0 5px}.choose-side button{background:#0a3e7a;border:4px solid #010407;border-radius:9px;transform:skewX(-10deg);font-size:15px;color:#9dc9fc;box-shadow:inset 0 1px #579ff140;padding:11px 13px}.choose-side button[aria-pressed=true]{background:linear-gradient(110deg,#116dd7,#2683ed);border-color:var(--primary);color:#d3e7fe}#choose-cpu[aria-pressed=true]{background:linear-gradient(110deg,#116dd7,#2683ed);border-color:var(--cyan);color:#d1e6fe}.roster{gap:9px;padding:13px 10px;background:#010811c9;border:3px solid #010407;border-radius:14px;box-shadow:inset 0 0 0 1px #0b488e}.fighter-card{width:calc((100% - 36px)/5);border:3px solid #010811;border-radius:10px 3px 10px 3px;background:linear-gradient(140deg,#2381ed,#0c4d97);box-shadow:0 0 0 1px #2b86ee59;transform:skewX(-7deg)}.fighter-card:hover{transform:skewX(-7deg) translateY(-3px);border-color:#93c4fc}.fighter-card:active{transform:skewX(-7deg) translateY(1px)}.fighter-card.player-pick{border:3px solid var(--primary);background:linear-gradient(#328aee,#0b4689);box-shadow:0 0 0 2px #020b15,0 0 20px #3189ee33}.fighter-card.cpu-pick{border:3px solid var(--cyan);background:linear-gradient(#1376e8,#0a3d77);box-shadow:0 0 0 2px #010912,0 0 15px #2f88ee22}.portrait-window{height:clamp(62px,8.5svh,96px)}.portrait{transform:skewX(7deg) scale(1.06)}.card-name{font-size:13px;padding:7px 0;background:#01070ee8;border-top:3px solid #010407;letter-spacing:0}.card-number{font-size:10px;color:#dcecfe;text-shadow:1px 1px #031427;transform:skewX(7deg)}.pick-label{bottom:32px;background:var(--primary);font-size:10px;border:2px solid #01070e;border-left:0;border-radius:0 4px 4px 0}.match-divider{margin:14px auto 10px;width:65%;opacity:1;gap:12px}.match-divider span{height:3px;background:linear-gradient(90deg,#0d509d,#69adfb,#0d509d)}.match-divider b{color:#c7e1fe;font-size:35px;text-shadow:3px 4px #01080f}.roster-center>.action{max-width:350px;min-height:60px}.selection-note{color:#81bafc;font-size:14px;margin-top:16px}.keyboard-hint{font-size:12px;color:#64aafb;margin-top:11px}.keyboard-hint kbd{color:#b3d6fd;border-color:#126fd9} .battle-screen{background:radial-gradient(ellipse at 50% 42%,#0a407d,#020b15 75%)}.battle-topline,.battle-bottomline{color:#84bcfc}.battle-topline b{color:#e2effe}.battle-topline .text-button{color:#d5e8fe}.arena-frame{border:6px solid #000306;border-radius:14px 4px 14px 4px;box-shadow:0 0 0 2px #0f5cb5,0 20px 70px #000000bb;container-type:inline-size}.hud{top:2.8%;left:3.5%;right:3.5%;grid-template-columns:minmax(0,1fr) 9% minmax(0,1fr);gap:3%}.health-panel{min-width:0}.health-heading{height:2.6cqw;margin-bottom:.5cqw;justify-content:flex-start;gap:.8cqw;padding:0 1.3cqw}.health-heading strong{font-size:clamp(13px,2.1cqw,30px);font-style:italic;font-weight:900;text-shadow:2px 3px #000000;letter-spacing:0}.player-tag{background:#010509;border:2px solid #0f5fbb;border-radius:4px;color:var(--primary);font-size:clamp(9px,1.2cqw,14px);padding:1px 5px}.cpu .player-tag{color:var(--cyan)}.cpu .health-heading{flex-direction:row-reverse}.health-shell{display:flex;gap:.5cqw;padding:.55cqw;min-height:7.8cqw;border:.65cqw solid #000306;border-radius:1.7cqw .8cqw 1.7cqw .8cqw;background:#010408;transform:skewX(-13deg);box-shadow:0 0 0 1px #338aee70;overflow:hidden}.hud-portrait{width:26%;flex-shrink:0;border-radius:1cqw .3cqw 1cqw .3cqw;background:linear-gradient(130deg,#1f7fed,#0d4f9a);overflow:hidden;border:1px solid #569ef170;position:relative}.hud-portrait canvas{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transform:skewX(13deg) scale(1.12)}.vitals{flex:1;min-width:0;position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:3cqw 1.75cqw 1.7cqw;align-content:start}.health-track{height:auto;margin:0;padding:0;background:#303232;border:0;border-radius:.7cqw;box-shadow:none;transform:none;overflow:hidden}.health-fill,.cpu .health-fill{height:100%;background:linear-gradient(100deg,#1272e0 0%,#2784ee 58%,#2884ee 100%);transition:width .12s linear;border-radius:.5cqw}.health-fill.critical,.cpu .health-fill.critical{background:linear-gradient(90deg,#348bef,#3f91ef)}.vitals>.energy-track{grid-row:2;height:auto;width:70%;justify-self:end;margin-top:.35cqw;background:#072950;border:.3cqw solid #000306;border-radius:.7cqw .25cqw .7cqw .25cqw;position:relative;box-shadow:none;overflow:hidden}.energy-track>div,.cpu .energy-track>div{background:linear-gradient(90deg,#116ad0,#2281ed);height:100%}.energy-track>div.ready{background:linear-gradient(90deg,#2683ed,#4494f0);box-shadow:0 0 8px #519cf1}.energy-value{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;transform:skewX(13deg);font:italic 900 clamp(8px,1.25cqw,18px)/1 "KF Rubik",Arial,sans-serif;text-shadow:1px 1px #000000,-1px -1px #000000;color:#ffffff}.health-value{font:italic 900 clamp(9px,1.45cqw,21px)/1 "KF Rubik",Arial,sans-serif;transform:skewX(13deg);align-self:end;text-align:left;padding-left:.4cqw;text-shadow:1px 1px #000000;letter-spacing:-.02em}.cpu .health-shell{flex-direction:row-reverse;transform:skewX(13deg);border-radius:.8cqw 1.7cqw .8cqw 1.7cqw}.cpu .hud-portrait canvas{transform:skewX(-13deg) scaleX(-1) scale(1.12)}.cpu .energy-value,.cpu .health-value{transform:skewX(-13deg)}.cpu .health-value{text-align:right;padding-right:.4cqw}.cpu .vitals>.energy-track{justify-self:start}.under-health{margin-top:.8cqw;gap:1cqw;justify-content:flex-end;padding:0 1.1cqw}.cpu .under-health{flex-direction:row-reverse}.energy-label{font:700 clamp(8px,.95cqw,12px) "KF Rubik",Arial,sans-serif;color:#b4d6fd;letter-spacing:.15em}.wins{gap:.6cqw}.wins i{width:1.8cqw;height:1.8cqw;min-width:8px;min-height:8px;border:.3cqw solid #010306;border-radius:50%;transform:none;background:#4f5350;box-shadow:0 0 0 1px #529cf130}.wins .won,.cpu .wins .won{border-color:#010306;background:radial-gradient(circle at 40% 35%,#bad9fd,#2784ee 55%,#0b4485);box-shadow:0 0 8px #4595f055}.timer-block{align-self:start;margin-top:2.6cqw;background:linear-gradient(150deg,#116bd1,#083262);border:.5cqw solid #010306;border-radius:1.2cqw .3cqw 1.2cqw .3cqw;padding:.6cqw .2cqw .7cqw;box-shadow:0 0 0 1px #5ea7fb70;text-shadow:2px 3px #01070e}.timer-block>span{display:block;font:700 clamp(6px,.8cqw,12px)/1.2 "KF Rubik",Arial,sans-serif;color:#aad1fd;letter-spacing:0}.timer-block strong{font:italic 900 clamp(23px,4cqw,58px)/1 "KF Rubik",Arial,sans-serif;letter-spacing:-.06em;color:#bfdcfd}.arena-overlay>span{color:var(--primary)}.arena-overlay>strong{color:#ecf5ff;text-shadow:4px 5px #020e1b}.arena-overlay>p{color:#cee4fe}.result-actions{width:min(300px,65%)}.result-actions .action{font-size:17px;min-height:48px;padding:10px 20px;border-width:4px}.desktop-controls{color:#77b5fb}.desktop-controls kbd,.battle-bottomline kbd{background:#083569;border-color:#1062bf;color:#d5e8fe}.touch-controls button{background:linear-gradient(#1270dc,#0a4281);border:4px solid #010306;border-radius:10px 3px 10px 3px;box-shadow:0 0 0 1px #116ad0;min-height:47px;color:#e6f1fe}.touch-controls .held{background:#5ea7fb}.touch-controls .touch-special{background:linear-gradient(#388def,#116ad0);color:#020c18;border-color:#01050a}.game-dialog{background:linear-gradient(145deg,#0e56a9,#05203e);border:7px solid #000205;border-radius:22px 6px 22px 6px;box-shadow:0 0 0 2px #2281ed,0 40px 130px #000000bb}.game-dialog::backdrop{background:#01060ce0}.game-dialog h2{color:#f0f7ff;text-shadow:3px 4px #031120}.dialog-subtitle,.help-note{color:#a2ccfd}.help-controls>div{border-color:#388def70}.help-controls kbd{color:#bfdcfd;background:#04172c;border:2px solid #01060c;box-shadow:0 0 0 1px #116cd3}.pause-actions{gap:16px}.dialog-close{color:#ffffff}.help-dialog>.action{transform:none}.dialog-subtitle{font-size:16px}.help-note{font-size:15px} @media(max-width:1100px){.fighter-preview{padding:12px 11px 16px}.selection-stage{gap:18px}.fighter-plinth{height:clamp(220px,calc(100svh - 450px),330px)}.fighter-card{width:calc((100% - 32px)/5)}.roster{gap:8px;padding:10px 7px}.portrait-window{height:70px}.card-name{font-size:12px}.preview-copy h2{font-size:28px}.fighter-stats{gap:10px}.action{font-size:18px}.roster-center>.action{min-height:57px}} @media(max-width:800px){.game-header{border-bottom-width:2px}.select-screen{padding:91px 15px 26px}.fighter-preview{padding:11px;border-width:4px}.selection-stage{gap:14px;margin-top:18px}.fighter-plinth{height:220px;margin-top:8px}.fighter-preview-top{padding-bottom:7px}.player-label{font-size:12px;letter-spacing:0}.roster-center{margin-top:12px}.portrait-window{height:85px}.fighter-card{width:calc((100% - 40px)/6)}.roster{gap:8px}.preview-copy h2{font-size:28px}.special-card small{font-size:12px}.special-card strong{font-size:14px}.selection-note{font-size:14px}.choose-side button{font-size:15px}.arena-frame{border-width:4px}.touch-controls{flex-wrap:wrap;justify-content:space-between}.health-heading strong{font-size:clamp(12px,2.1cqw,24px)}.arena-overlay>strong{font-size:clamp(27px,5.2cqw,46px)}.arena-overlay>span{font-size:clamp(9px,1.5cqw,14px)}.arena-overlay>p{font-size:clamp(12px,2.1cqw,18px)}} @media(max-width:500px){.utility{padding:5px 8px;min-width:38px}.menu-actions{gap:17px}.action{border-width:4px;min-height:59px;font-size:18px}.menu-caption{font-size:16px}.menu-content .overline{font-size:10px;letter-spacing:2px}.enter-hint{font-size:11px;letter-spacing:1px}.screen-footer{font-size:12px}.screen-footer span:last-child{font-size:10px}.select-heading .overline{font-size:10px;letter-spacing:1px}.select-heading h1{font-size:29px}.select-count{font-size:23px}.select-heading>.text-button{font-size:13px}.selection-stage{gap:10px}.fighter-preview{border-width:3px;padding:9px}.fighter-plinth{height:165px}.player-label{font-size:10px}.preview-copy h2{font-size:23px}.preview-copy{padding-top:10px}.special-card strong{font-size:13px}.roster-center{margin-top:16px}.roster{gap:7px;padding:9px 5px}.fighter-card{width:calc((100% - 28px)/5)}.portrait-window{height:69px}.card-name{font-size:12px;padding:6px 0}.pick-label{bottom:28px;font-size:9px}.choose-side{gap:9px;padding:0 4px}.choose-side button{font-size:14px;padding:10px 8px;border-width:3px}.match-divider{margin:12px auto 9px}.match-divider b{font-size:29px}.selection-note{font-size:13px}.hud{top:3%;left:4%;right:4%;gap:2%;grid-template-columns:minmax(0,1fr) 9% minmax(0,1fr)}.health-heading{height:3cqw;margin-bottom:.8cqw}.health-heading strong{font-size:clamp(9px,2.4cqw,13px)}.player-tag{font-size:8px;padding:0 2px;border-width:1px}.health-shell{min-height:8.5cqw;padding:.5cqw;border-width:.8cqw}.vitals{grid-template-rows:3cqw 2cqw 2cqw}.energy-value{font-size:clamp(7px,1.8cqw,10px)}.health-value{font-size:clamp(7px,1.9cqw,11px)}.under-health{margin-top:1cqw}.energy-label{display:none}.wins{gap:.9cqw}.timer-block{margin-top:3.6cqw}.timer-block strong{font-size:clamp(18px,4.8cqw,29px)}.timer-block>span{font-size:6px}.result-actions{margin-top:9px;gap:5px}.result-actions .action{font-size:12px;min-height:32px;padding:5px 12px;border-width:3px}.touch-controls{gap:12px;justify-content:center}.touch-controls button{height:46px;min-width:39px;padding:0 9px;font-size:12px}.touch-move button{font-size:23px}.game-dialog{padding:28px 23px;border-width:5px}.game-dialog h2{font-size:31px}.help-note{font-size:14px}.dialog-subtitle{font-size:15px}} @media(max-height:600px) and (min-width:801px){.menu-actions .action{min-height:48px;padding:9px 19px}.menu-actions{gap:11px}.fighter-plinth{height:210px}.portrait-window{height:63px}} /* Blue / white edition: one shared visual language, including mobile controls. */ :root{--bg:#041127;--panel:#09234a;--line:#3776bb;--text:#f5faff;--muted:#b1cdec;--primary:#fff;--cyan:#8ec6ff;--blue:#1261df;--ink:#020e22;--title-font:"KF David Libre",Georgia,serif;--body-font:"KF Rubik",Arial,sans-serif} h1,h2,h3,.preview-copy h2,.arena-overlay>strong,.special-card strong,.health-heading strong{font-family:var(--title-font);font-weight:700;font-style:normal;letter-spacing:0} .game-header{background:linear-gradient(#03132df5,#03132da6);border-bottom-color:#255384}.wordmark{color:#fff}.wordmark span{color:#b8d9ff}.overline{color:#9bcaff}.menu-screen{background:#03142e}.menu-content .overline{color:#d4e8ff}.menu-caption,.screen-footer{color:#c5dcf6}.enter-hint{color:#bdd0e5} .action-primary{background:linear-gradient(110deg,#fff,#d8edff);color:#07316c;border-color:#032458;box-shadow:0 5px #010c21,0 0 0 1px #81b5ed}.action-secondary{background:linear-gradient(120deg,#07439d,#1576ef);border-color:#031b41;color:#fff}.action-quiet{background:#082346;color:#d5e8ff}.utility{background:#0b3670;box-shadow:inset 0 1px #72b5ff70;border-color:#03224a}.utility[aria-pressed=false]{background:#0b203b;color:#8daaca} .select-screen{background:radial-gradient(ellipse at 15% 50%,#0a5bc247,transparent 55%),radial-gradient(ellipse at 90% 40%,#508eff24,transparent 50%),#041127}.fighter-preview{background:linear-gradient(160deg,#155fbe60,#071d3c);border-color:#03142d;box-shadow:0 0 0 1px #3274bd}.preview-player{--accent:#fff}.preview-cpu{--accent:#96ceff}.fighter-plinth{background:linear-gradient(0deg,#1762b947,transparent 72%)}.fighter-card{background:linear-gradient(140deg,#176ae0,#083c8e);border-color:#04214d}.fighter-card.player-pick{background:linear-gradient(#3b83eb,#123d7e);border-color:#fff;box-shadow:0 0 0 2px #06234b,0 0 18px #b3d7ff44}.fighter-card.cpu-pick{background:linear-gradient(#105bbf,#092b5f);border-color:#88cbff}.fighter-stats b.on{background:#fff}.choose-side button[aria-pressed=true],#choose-cpu[aria-pressed=true]{background:#145dbd;color:#fff}.choose-side button{background:#0a3067}.roster{background:#031228b8}.pick-label{color:#052358} .battle-screen{background:radial-gradient(ellipse at 50% 42%,#0b376a,#031126 75%)}.arena-frame{border-color:#021127;box-shadow:0 0 0 2px #327ac7,0 20px 70px #000b}.health-fill,.cpu .health-fill{background:linear-gradient(100deg,#0764f5,#4aa0ff 65%,#d9f0ff)}.health-fill.critical,.cpu .health-fill.critical{background:repeating-linear-gradient(125deg,#e4f3ff 0 8px,#3674b7 8px 16px)}.energy-track>div,.cpu .energy-track>div{background:linear-gradient(90deg,#5496e5,#bde2ff)}.energy-track>div.ready{background:#fff;box-shadow:0 0 8px #c8e6ff}.hud-portrait{background:linear-gradient(135deg,#266ed3,#092956)}.health-shell{box-shadow:0 0 0 1px #7ab9f370}.health-track{background:#11243e}.timer-block{background:linear-gradient(150deg,#1d6cce,#07306b)}.timer-block strong{color:#fff}.wins .won,.cpu .wins .won{background:radial-gradient(circle at 40% 35%,#fff,#c6e4ff 55%,#3671b4);box-shadow:0 0 8px #b2daff55}.player-tag{color:#fff;border-color:#306db6}.game-dialog{background:linear-gradient(145deg,#104781,#061a39);border-color:#020e22;box-shadow:0 0 0 2px #3e80c8,0 40px 130px #000b}.game-dialog::backdrop{background:#010b1de0} .super-intro{position:absolute;inset:0;z-index:6;pointer-events:none;image-rendering:auto}.mode-picker{display:flex;gap:8px;justify-content:center;margin:22px auto 0}.mode-picker button{display:flex;align-items:center;gap:20px;background:#07224b;border:1px solid #356cb0;border-radius:6px;padding:12px 22px;font-weight:700;min-height:46px}.mode-picker button[aria-pressed=true]{background:#f1f8ff;border-color:#fff;color:#073064}.mode-picker button span{font-size:12px;direction:ltr}.mode-note{text-align:center;color:#aac9e9;font-size:14px;margin:10px 0 0}.selection-stage{margin-top:20px}.desktop-controls{flex-wrap:wrap;gap:15px 28px}.desktop-controls b{color:#fff}.desktop-controls span{flex-wrap:wrap;justify-content:center}.desktop-controls kbd,.battle-bottomline kbd{background:#0c3668;color:#fff}.touch-controls button{background:linear-gradient(#155bbb,#08306c);box-shadow:0 0 0 1px #367fcd;color:#fff;min-width:48px;min-height:52px}.touch-controls .touch-special{background:linear-gradient(#fff,#bbdfff);color:#072a57}.touch-controls .held{background:#73b5ff;color:#05234c}.rotate-hint{display:none}.multiplayer-help{border:1px solid #3270af;border-radius:7px;padding:17px;margin-top:20px;background:#041b3880}.multiplayer-help h3{font-size:24px;margin:0 0 10px}.multiplayer-help p{font-size:15px;line-height:1.7;color:#cbe1f7}.game-header{padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right))} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}} /* Phone controls keep the arena centred and leave room for both thumbs. */ .touch-controls{direction:ltr}.touch-attack{direction:rtl}.touch-controls button{-webkit-touch-callout:none;touch-action:none}.touch-special{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px}.touch-special small{font-size:12px;line-height:1}.touch-special.charged{box-shadow:0 0 0 2px #fff,0 0 16px #69b2ff}.mode-picker button:disabled{opacity:.45;cursor:not-allowed}.mode-picker button:disabled:hover{filter:none}.game-dialog{overscroll-behavior:contain} @media(max-width:800px),(pointer:coarse){ .touch-controls{display:flex}.desktop-controls,.enter-hint,.keyboard-hint{display:none} .game-header{height:58px;padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right))}.utility{min-width:44px;min-height:44px}.edition{display:none} .menu-screen{min-height:100svh;height:auto;padding:76px 16px 70px}.menu-content{width:min(480px,90vw);padding-top:0}.menu-content .overline{margin-bottom:15px}.menu-caption{margin-top:16px}.menu-actions{margin-top:22px;max-width:290px}.screen-footer{bottom:14px} .select-screen{padding:78px max(14px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom))}.select-heading h1{font-size:32px}.select-heading .overline{font-size:12px;letter-spacing:1px}.select-count{font-size:23px}.mode-picker{margin-top:16px;gap:8px}.mode-picker button{padding:10px 12px;min-height:46px;font-size:15px;gap:9px}.mode-note{font-size:14px;margin-top:9px} .selection-stage{grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.fighter-preview{grid-row:1;padding:9px;border-width:3px}.fighter-preview-top{padding-bottom:5px}.player-label{font-size:12px;letter-spacing:0}.fighter-plinth{height:105px;margin-top:4px}.fighter-shadow-number{font-size:85px}.preview-copy{padding-top:7px}.preview-copy h2{font-size:24px}.preview-copy>p,.fighter-stats,.special-card small{display:none}.special-card{margin-top:5px;border:0;padding:0}.special-card strong{font-size:14px;line-height:1.2}.roster-center{grid-column:1/-1;grid-row:2;width:100%;margin-top:0}.choose-side{margin:0 0 10px;padding:0}.choose-side button{min-height:46px;font-size:15px;padding:8px}.roster{padding:9px 6px;gap:7px}.fighter-card{width:calc((100% - 28px)/5)}.portrait-window{height:clamp(45px,13vw,80px)}.card-name{font-size:14px;padding:7px 0}.card-number{display:none}.pick-label{bottom:33px}.match-divider{margin:9px auto}.match-divider b{font-size:25px}.roster-center>.action{min-height:50px;font-size:20px}.selection-note{font-size:14px;margin-top:10px} body[data-screen=battle]{overscroll-behavior:none}.battle-screen{min-height:100svh;min-height:100dvh;padding:65px max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom));justify-content:flex-start;gap:0}.battle-topline{width:100%;padding:0 0 5px;min-height:44px;font-size:14px}.battle-topline>span:last-of-type{display:none}.battle-topline .text-button{min-width:44px;min-height:44px;padding:8px;font-size:16px}.battle-topline kbd{display:none}.arena-frame{width:100%;border-width:3px;flex-shrink:0}.battle-bottomline{width:100%;margin-top:12px;font-size:14px}.battle-bottomline>span:last-child{display:none}.rotate-hint{display:block;margin-top:12px;text-align:center;color:#b4d3f4;font-size:14px}.touch-controls{width:100%;margin:18px auto 0;gap:10px;justify-content:space-between;align-items:center;flex-wrap:nowrap;flex-shrink:0;padding-inline:3px}.touch-controls>div{display:grid;grid-template-columns:repeat(2,clamp(48px,13vw,62px));gap:9px}.touch-move button:nth-child(2){grid-row:1;grid-column:1/-1;justify-self:center}.touch-controls button{width:clamp(48px,13vw,62px);min-width:48px;min-height:56px;height:56px;padding:0;font-size:15px;border-width:3px;border-radius:16px}.touch-move button{font-size:29px}.touch-controls .touch-special{color:#052b59;background:#dceeff}.touch-controls .held{background:#82bdff;color:#031934}.game-dialog{max-height:90svh;max-height:90dvh;padding:24px;max-width:calc(100vw - 24px)}.game-dialog h2{font-size:30px}.dialog-close{min-width:44px;min-height:44px}.help-controls{grid-template-columns:1fr}.help-controls>div,.help-note,.dialog-subtitle{font-size:16px}.multiplayer-help{padding:12px}.multiplayer-help p{font-size:15px} body[data-mode=versus] .touch-controls{display:none} } @media(max-width:800px) and (orientation:portrait){ .health-heading strong{font-size:14px}.health-heading{height:auto;min-height:16px}.player-tag{font-size:10px}.health-shell{min-height:11cqw}.vitals{grid-template-rows:3.5cqw 2.5cqw 2.5cqw}.health-value,.energy-value{font-size:10px}.timer-block>span{font-size:8px}.timer-block strong{font-size:26px}.under-health{margin-top:4px}.arena-overlay>strong{font-size:26px}.result-actions .action{min-height:38px;font-size:14px}.result-actions .text-button{min-height:38px;font-size:14px}.arena-overlay{padding-top:12%}.arena-overlay>p{font-size:14px} } @media(max-height:600px) and (orientation:landscape) and (pointer:coarse){ body[data-screen=battle] .game-header{display:none}.battle-screen{padding:0 max(8px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom));height:100svh;height:100dvh;min-height:0;overflow:hidden;--rail:110px}.battle-topline{min-height:42px;height:42px;flex-shrink:0;padding:0;position:relative;z-index:7}.battle-topline>span{font-size:13px}.battle-topline .text-button{min-height:40px;height:40px}.arena-frame{width:min(calc((100dvh - 52px - env(safe-area-inset-bottom))*16/9),calc(100vw - 2*var(--rail) - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:calc(100dvh - 52px - env(safe-area-inset-bottom));margin:auto;border-radius:7px;flex:none}.battle-bottomline,.rotate-hint{display:none}.touch-controls{position:absolute;inset:44px 0 max(5px,env(safe-area-inset-bottom));margin:0;max-width:none;pointer-events:none;padding:0 max(7px,env(safe-area-inset-right)) 0 max(7px,env(safe-area-inset-left));gap:0;align-items:center}.touch-controls>div{grid-template-columns:repeat(2,46px);gap:6px;pointer-events:auto}.touch-controls button{width:46px;min-width:46px;min-height:54px;height:54px;border-radius:13px;font-size:14px}.touch-move button{font-size:27px}.arena-overlay>strong{font-size:clamp(23px,5cqw,40px)}.arena-overlay>p{font-size:14px;margin-top:4px}.result-actions{gap:4px;margin-top:8px}.result-actions .action{min-height:36px;padding:5px 12px;font-size:14px}.result-actions .text-button{min-height:32px;padding:4px;font-size:14px}.menu-screen{padding-top:65px;padding-bottom:30px;min-height:100svh}.menu-content{width:310px}.menu-content .overline,.menu-caption,.screen-footer{display:none}.menu-actions{margin-top:10px;gap:8px}.menu-actions .action{min-height:43px;padding:7px 16px}.selection-stage{grid-template-columns:120px minmax(280px,1fr) 120px;align-items:start;gap:10px}.preview-player{grid-column:1;grid-row:1}.preview-cpu{grid-column:3;grid-row:1}.roster-center{grid-column:2;grid-row:1}.select-heading h1{font-size:26px}.fighter-plinth{height:95px}.select-count,.fighter-preview-top,.select-heading .overline{display:none}.preview-copy h2{font-size:21px}.portrait-window{height:45px}.card-name{font-size:13px;padding:5px 0}.pick-label{bottom:27px}.choose-side button{min-height:40px}.mode-picker{margin-top:10px}.mode-note{margin-top:5px}.game-dialog{max-height:94dvh;padding:20px}.pause-actions{margin-top:15px;gap:10px}.pause-actions .action{min-height:44px;padding:8px 16px} } /* Full-screen arcade: utilities live in the help menu. */ .menu-screen{padding-top:32px}.menu-content{padding-top:0}.select-screen{padding-top:28px}.battle-screen{padding-top:20px}.audio-options{display:flex;justify-content:center;gap:12px;margin:22px 0}.audio-options .utility span{display:inline}.audio-options .utility{min-height:44px}.roster{justify-content:center}.fighter-card{width:calc((100% - 32px)/4)} @media(max-width:800px),(pointer:coarse){.select-screen{padding-top:max(18px,env(safe-area-inset-top))}.battle-screen{padding-top:max(10px,env(safe-area-inset-top))}.menu-screen{padding-top:32px}.fighter-card{width:calc((100% - 21px)/4)}} @media(max-height:600px) and (orientation:landscape) and (pointer:coarse){.battle-screen{padding-top:0}.menu-screen{padding-top:24px}.select-screen{padding-top:14px}.fighter-card{width:calc((100% - 21px)/4)}} /* V11: a stage draw before the match, then an uninterrupted arena. */ .roulette-screen{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:70px 32px 32px;overflow:hidden;background:radial-gradient(ellipse at 50% 15%,#145cb855,transparent 65%),#041127} .roulette-back{position:absolute;top:max(18px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));min-height:44px} .roulette-content{width:min(1260px,100%);text-align:center}.roulette-status{color:#b1cdec;margin:12px 0 6px;font-size:16px}.roulette-content h1{font-size:clamp(34px,4.7vw,66px);line-height:1.2;min-height:1.25em} .arena-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:40px auto 30px;direction:rtl}.arena-card{overflow:hidden;border:2px solid #24466f;border-radius:10px;background:#091e3c;opacity:.6;transition:transform .12s,border-color .12s,opacity .12s,background .12s}.arena-card-image{position:relative;aspect-ratio:16/9;overflow:hidden}.arena-card canvas{display:block;width:100%;height:100%}.arena-number{position:absolute;left:10px;top:10px;direction:ltr;font-size:12px;padding:5px 8px;background:#041127dc;border-radius:4px;color:#fff}.arena-card h2{font-size:clamp(20px,2.2vw,30px);padding:16px 5px 4px}.arena-card p{font-size:14px;color:#9fbce1;padding:0 5px 18px}.arena-card.active{transform:translateY(-8px);border-color:#fff;opacity:1;box-shadow:0 0 24px #75b5ff40}.arena-card.winner{background:#edf6ff;color:#083266;border-color:#fff}.arena-card.winner p{color:#365f8f}.roulette-track{height:4px;width:220px;background:#15365f;margin:0 auto 16px;border-radius:3px;overflow:hidden;direction:ltr}#roulette-progress{height:100%;width:0;background:#b4dcff}.roulette-caption{font-size:13px;color:#87a6ca} body[data-screen=battle]{overflow:hidden;background:#020712} .battle-screen{position:fixed;inset:0;width:100%;height:100dvh;min-height:0;padding:0;display:flex;align-items:center;justify-content:center;gap:0;background:#020712;overflow:hidden} .battle-screen .arena-frame{width:min(100vw,calc(100dvh * 16 / 9));max-width:none;max-height:none;aspect-ratio:16/9;border:0;border-radius:0;box-shadow:none;margin:0;flex:none} .arena-tools{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:7;display:flex;gap:8px;direction:ltr}.arena-tools button{width:44px;height:44px;border:1px solid #d2e8ff77;border-radius:8px;background:#031631b8;color:white;font:24px Arial,sans-serif;box-shadow:0 2px 8px #0005}.arena-tools button:hover{background:#1355aa} @media(max-width:800px){.roulette-screen{padding:66px 18px 24px}.roulette-content h1{font-size:34px}.arena-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}.arena-card h2{font-size:21px;padding-top:10px}.arena-card p{font-size:12px;padding-bottom:12px}.arena-card.active{transform:translateY(-4px)}.roulette-status{font-size:14px}.roulette-back{right:12px}} @media(max-width:800px),(pointer:coarse){.battle-screen .touch-controls{position:absolute;inset:auto 0 max(10px,env(safe-area-inset-bottom));width:100%;max-width:none;margin:0;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));gap:0;align-items:end;justify-content:space-between;pointer-events:none;z-index:8}.battle-screen .touch-controls>div{display:grid;grid-template-columns:repeat(2,48px);gap:6px;pointer-events:auto}.battle-screen .touch-controls button{width:48px;min-width:48px;height:48px;min-height:48px;border-radius:10px;background:#082d65c9;font-size:13px}.battle-screen .touch-controls .touch-move button{font-size:24px}.battle-screen .touch-controls .touch-special{background:#e2f1fff0}.battle-screen .touch-controls .held{background:#73b5ff}.arena-tools button{width:40px;height:40px}.arena-tools{gap:6px}} @media(max-width:800px) and (orientation:portrait){.battle-screen{justify-content:center;padding-bottom:165px}.battle-screen .arena-frame{width:100vw}.battle-screen .touch-controls{bottom:max(24px,env(safe-area-inset-bottom));padding:0 20px}.battle-screen .touch-controls>div{grid-template-columns:repeat(2,58px);gap:10px}.battle-screen .touch-controls button{width:58px;height:54px}.arena-tools{bottom:5px}.arena-tools button{width:34px;height:34px;font-size:20px}} @media(max-height:600px) and (orientation:landscape){.roulette-screen{padding:44px 24px 12px}.roulette-content .overline,.roulette-caption{display:none}.roulette-status{font-size:12px;margin:0}.roulette-content h1{font-size:30px}.arena-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}.arena-card h2{font-size:20px;padding-top:8px}.arena-card p{padding-bottom:8px;font-size:12px}.roulette-track{margin-bottom:0}.roulette-back{top:4px}.arena-card.active{transform:translateY(-4px)}} /* Floating, translucent touch controls sit inside the arena at every phone orientation. */ @media(max-width:800px),(pointer:coarse){ .battle-screen{padding:0}.battle-screen .touch-controls{--touch-size:clamp(44px,7.5cqw,62px);bottom:10px;padding:0 12px;align-items:end;flex-wrap:nowrap} .battle-screen .touch-controls>div{grid-template-columns:repeat(2,var(--touch-size));gap:6px;pointer-events:none} .battle-screen .touch-controls button{width:var(--touch-size);min-width:var(--touch-size);height:var(--touch-size);min-height:var(--touch-size);padding:0;border:1.5px solid #e5f2ff8f;border-radius:50%;color:#fff;background:#10305932;box-shadow:inset 0 0 14px #e1edff0f,0 2px 8px #0002;text-shadow:0 1px 3px #00112d;font-size:13px;pointer-events:auto;transition:background .08s,border-color .08s,transform .08s} .battle-screen .touch-controls .touch-special{color:#fff;background:#2775c847;border-color:#addcffb3}.battle-screen .touch-controls .touch-special small{font-size:10px}.battle-screen .touch-controls .touch-special.charged{background:#71b8ff40;box-shadow:0 0 0 2px #d5edff66,0 0 16px #9edaff70} .battle-screen .touch-controls button.held{background:#cee6ff9c;border-color:#fff;color:#082c5e;text-shadow:none;transform:scale(.94)} .battle-screen .arena-tools{bottom:12px}.battle-screen .arena-tools button{background:#0b284245;border-color:#d6edff77;box-shadow:none} body[data-mode=versus] .touch-controls{display:none} } @media(max-width:800px),(pointer:coarse){.battle-screen .arena-tools button{width:44px;height:44px;min-width:44px;min-height:44px}} @media(max-width:360px) and (orientation:portrait){.arena-tools #fullscreen{display:none}} /* Boss selection and second-form accents. */ .mode-picker{flex-wrap:wrap}.mode-picker button{gap:12px}#mode-boss[aria-pressed=true]{background:#dceeff;border-color:#fff;color:#082b59} body[data-mode=boss] .choose-side{grid-template-columns:1fr}body[data-mode=boss] #choose-cpu{display:none}body[data-mode=boss] .preview-cpu{border-color:#a8d5ff;box-shadow:0 0 0 1px #77c3ff} @media(max-width:800px){.mode-picker{gap:5px}.mode-picker button{padding:10px 12px;font-size:14px;gap:8px}.mode-picker button span{font-size:10px}} /* Keep the complete fighter selection reachable on a landscape iPhone. */ @media(max-height:600px) and (orientation:landscape) and (max-width:1100px){ .select-screen{padding:8px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left))} .select-heading h1{font-size:25px}.select-heading .overline,.select-count{display:none}.select-heading .text-button{padding:8px;min-height:36px} .mode-picker{margin-top:3px;gap:5px}.mode-picker button{min-height:40px;padding:6px 12px;font-size:14px}.mode-note{font-size:12px;margin-top:3px;line-height:1.3} .selection-stage{grid-template-columns:100px minmax(290px,1fr) 100px;align-items:start;gap:10px;margin-top:8px} .preview-player{grid-column:1;grid-row:1}.preview-cpu{grid-column:3;grid-row:1}.roster-center{grid-column:2;grid-row:1;margin:0;width:100%} .fighter-preview{padding:7px}.fighter-preview-top,.fighter-stats,.stats,.preview-copy>p,.special-card small{display:none}.fighter-plinth{height:108px;margin-top:0}.preview-copy{padding-top:6px}.preview-copy h2{font-size:18px;line-height:1.1}.special-card{padding:5px 0;margin-top:3px}.special-card strong{font-size:12px} .choose-side{margin-bottom:6px}.choose-side button{min-height:36px;padding:5px;font-size:12px}.roster{gap:5px;margin:0 0 8px;padding:5px 4px}.fighter-card{width:calc((100% - 25px)/6);border-width:2px}.portrait-window{height:37px}.card-name{font-size:11px;line-height:1.15;padding:3px 0}.pick-label{bottom:19px;font-size:8px;padding:1px 4px}.card-number{display:none} .roster-center>.action{min-height:40px;font-size:18px;padding:6px 15px}#selection-note,.select-screen .keyboard-hint,.select-screen .match-divider{display:none} } .menu-fullscreen{position:absolute;z-index:4;top:max(16px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid #7ab9ff70;border-radius:7px;background:#052650e8;color:#eef7ff;font:16px "KF Rubik",Arial,sans-serif;cursor:pointer}.menu-fullscreen:hover{background:#0a4487}.menu-fullscreen:focus-visible{outline:3px solid white;outline-offset:4px}.menu-fullscreen>span:first-child{font-size:24px} /* Three menu choices remain reachable on short landscape screens. */ .menu-actions{gap:12px}#menu-boss .button-end{font:700 12px Arial;letter-spacing:1px}#menu-help{min-height:50px;font-size:18px} @media(max-height:600px) and (orientation:landscape){.menu-screen{padding-top:12px;padding-bottom:15px}.menu-content{width:290px}.menu-content h1{max-height:105px}.menu-content h1 canvas{max-height:105px;width:auto}.menu-actions{margin-top:5px;gap:6px}.menu-actions .action,#menu-help{min-height:42px;padding:6px 16px;font-size:17px}.enter-hint{margin-top:8px}} /* Character selection: central portrait cards, large opposing illustrations. */ body[data-screen=select]{background:#06162e;overflow-x:hidden} .select-screen{isolation:isolate;position:relative;min-height:100svh;padding:20px 3vw 24px;overflow:hidden;background:linear-gradient(180deg,#06172de8,#092b5577 55%,#05152ee8)} #select-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.35;filter:saturate(.4)} .select-screen:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,#5ca5ea25,transparent 65%);pointer-events:none;z-index:-1} .select-heading{position:relative;z-index:2;max-width:none;margin:0;min-height:54px}.select-heading h1{font-size:clamp(27px,3vw,44px)}.select-heading .overline{font-size:10px;margin-bottom:3px;letter-spacing:4px}.select-count{color:#a6ccee}.mode-picker{position:relative;z-index:2;margin:8px auto 0;gap:5px}.mode-picker button{min-height:36px;font-size:14px;padding:7px 18px;border-radius:2px}.mode-note{margin:5px auto;color:#aec4dd;font-size:12px} .selection-stage{width:100%;max-width:1600px;margin:12px auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,30%) minmax(0,1fr);gap:12px;align-items:stretch;position:relative} .fighter-preview{border:0!important;border-radius:0;background:none;box-shadow:none!important;padding:0;min-width:0;position:relative;overflow:visible}.preview-player{grid-column:1;grid-row:1}.preview-cpu{grid-column:3;grid-row:1}.fighter-preview-top{display:flex;position:absolute;top:10px;left:0;right:0;padding:0 18px;z-index:1;border:0}.fighter-type{display:none}.fighter-plinth{height:clamp(330px,64vh,760px);margin:0;overflow:hidden;background:none}.fighter-plinth:before,.fighter-plinth:after,.fighter-shadow-number{display:none}.fighter-plinth canvas{width:100%;height:100%;max-width:none;object-fit:contain;image-rendering:auto;position:static;transform:none;filter:drop-shadow(0 6px 16px #0005)} .preview-copy{position:absolute;bottom:2px;left:8px;right:8px;padding:15px 18px;text-align:right;background:linear-gradient(100deg,#03132acf,#123454dc);border-top:1px solid #d8edff80;border-bottom:1px solid #d8edff50;z-index:1}.preview-copy h2{font-size:clamp(25px,3.4vw,48px);line-height:1.1;margin:5px 0}.preview-copy>p,.fighter-stats{display:none}.special-card{border:0;background:none;margin:6px 0 0;padding:0}.special-card small{display:block;font-size:11px;color:#a4c9ed}.special-card strong{font-size:clamp(16px,1.6vw,23px);color:#edf6ff}.selection-ready{font-size:12px;letter-spacing:1px;color:#b3dcff} .roster-center{grid-column:2;grid-row:1;width:100%;align-self:center;margin:0;padding:14px 0;border-top:1px solid #a2c7e57a;border-bottom:1px solid #a2c7e57a}.selection-step{text-align:center;font-size:16px;color:#e7f4ff;margin:0 0 12px}.choose-side{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0 0 12px}.choose-side button{border-radius:0;min-height:36px;padding:5px;font-size:12px}.choose-side button:disabled{opacity:.4;cursor:default}.roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0;padding:0;overflow:visible}.fighter-card{width:100%;min-width:0;border:1px solid #b0c7dd70;border-radius:0;background:#082343;overflow:hidden;transition:transform .12s,border-color .12s,box-shadow .12s}.fighter-card:hover,.fighter-card:focus-visible{transform:translateY(-3px);border-color:#fff;box-shadow:0 0 15px #87caff70;z-index:2}.fighter-card:disabled{opacity:.45;cursor:default;transform:none}.portrait-window{height:clamp(64px,12vh,130px);background:linear-gradient(150deg,#316ba5,#071932)}.portrait-window canvas{width:100%;height:100%;object-fit:cover}.card-name{font-size:clamp(12px,1.1vw,17px);padding:4px 0;line-height:1.2}.card-number{display:none}.pick-label{bottom:25px;font-size:9px;padding:2px 4px;border-radius:0}.fighter-card.player-pick{border-color:#e5f7ff;box-shadow:0 0 0 1px #7acbff}.fighter-card.cpu-pick{border-color:#9ba7ff}.match-divider{display:none}.roster-center>.action{margin-top:14px;min-height:46px;font-size:18px;padding:8px 12px;border-radius:2px;width:100%}.selection-note{display:none}.keyboard-hint{display:block;margin-top:9px;text-align:center;font-size:11px;color:#a6c2dd} @media(max-height:600px) and (orientation:landscape){.select-screen{padding:7px max(12px,env(safe-area-inset-right)) 10px}.select-heading{min-height:30px}.select-heading h1{font-size:25px}.select-heading .overline,.select-count,.mode-note{display:none}.select-heading .text-button{min-height:30px;padding:3px 8px}.mode-picker{margin-top:0}.mode-picker button{min-height:30px;font-size:12px;padding:4px 12px}.selection-stage{margin-top:6px;grid-template-columns:minmax(0,1fr) minmax(260px,34%) minmax(0,1fr);gap:8px}.roster-center{padding:6px 0}.selection-step{font-size:12px;margin-bottom:5px}.choose-side{margin-bottom:5px}.choose-side button{min-height:28px;font-size:11px}.roster{gap:4px}.portrait-window{height:clamp(35px,10vh,60px)}.card-name{font-size:11px;padding:2px}.pick-label{bottom:18px;font-size:8px}.fighter-plinth{height:calc(100svh - 88px);min-height:240px}.fighter-preview-top{top:0;font-size:10px;padding:0 8px}.preview-copy{padding:8px;left:0;right:0}.preview-copy h2{font-size:23px}.special-card{margin-top:3px}.special-card small{display:none}.special-card strong{font-size:13px}.selection-ready{font-size:10px}.roster-center>.action{margin-top:7px;min-height:35px;font-size:15px}.keyboard-hint{display:none}} @media(max-width:650px) and (orientation:portrait){.select-screen{padding:14px 12px 24px}.select-heading h1{font-size:27px}.select-heading .overline,.select-count,.mode-note{display:none}.mode-picker button{padding:8px 10px;min-height:40px;font-size:12px}.selection-stage{grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.preview-player{grid-column:1;grid-row:1}.preview-cpu{grid-column:2;grid-row:1}.fighter-plinth{height:230px}.fighter-preview-top{top:0;font-size:9px;padding:0 4px}.preview-copy{padding:8px;left:0;right:0;bottom:0}.preview-copy h2{font-size:24px}.special-card small{display:none}.special-card strong{font-size:13px}.selection-ready{font-size:10px}.roster-center{grid-column:1/-1;grid-row:2;padding:9px 0;max-width:none}.selection-step{margin-bottom:8px;font-size:14px}.choose-side button{min-height:40px}.portrait-window{height:62px}.card-name{font-size:13px}.roster-center>.action{min-height:46px}.keyboard-hint{display:none}} @media(min-width:651px) and (min-height:601px){.select-screen .portrait-window{height:clamp(54px,10vh,110px)}.select-screen .fighter-plinth{height:calc(100svh - 205px);min-height:340px}.select-screen .roster-center{padding:10px 0}.select-screen .selection-stage{margin-top:8px}} /* Compact selection keeps confirmation reachable on landscape phones. */ @media(max-height:600px) and (orientation:landscape){ .select-screen .portrait-window{height:clamp(28px,8vh,43px)} .select-screen .roster-center{padding:4px 0}.select-screen .choose-side button{padding:2px 4px} .select-screen .fighter-plinth{height:calc(100svh - 88px);min-height:0} .select-screen .roster-center>.action{min-height:34px;padding:4px 8px;border-width:3px} .select-screen .card-name{line-height:1;padding:3px 0} } .mode-picker button[hidden]{display:none} #select-backdrop{opacity:.25;filter:grayscale(1);mix-blend-mode:screen}.select-screen{background:#07182d}.select-screen:after{background:linear-gradient(180deg,#04132930,#07182d33 35%,#07182dbb)} /* Approved face-off title art: keep portraits visible around the menu. */ .menu-shade{background:linear-gradient(90deg,transparent 20%,#03142e55 40%,#03142e55 60%,transparent 80%)} @media(orientation:portrait){ .menu-screen{padding-top:clamp(265px,39vh,420px);padding-bottom:65px;align-items:flex-start;height:auto;min-height:100svh} .menu-content{width:min(390px,88vw)}.menu-content .overline,.menu-caption{display:none} .menu-content h1{max-width:310px;margin:auto}.menu-actions{margin-top:15px;gap:10px} .menu-actions .action{min-height:49px;padding:9px 20px}.enter-hint{margin-top:16px} .menu-shade{background:none} } .menu-fullscreen>span:first-child{display:inline!important} /* Black letterbox bands for the opening movie. */ .menu-screen{background:#000}.menu-shade{background:linear-gradient(90deg,transparent 20%,#0005 40%,#0005 60%,transparent 80%)} /* Compact opening menu keeps the fighters visible. */ #menu-screen .menu-content{width:min(320px,82vw)} #menu-screen .menu-content h1{width:100%;max-width:320px;margin:0 auto} #menu-screen #menu-title{max-height:none;line-height:0;filter:drop-shadow(0 4px 8px #0009)} #menu-screen #title-logo{display:block;width:100%;height:auto;max-height:none;object-fit:contain;image-rendering:auto} #menu-screen .menu-content .overline{font-size:9px;letter-spacing:3px;margin-bottom:12px} #menu-screen .menu-caption{font-size:13px;margin-top:12px} #menu-screen .menu-actions{width:100%;max-width:270px;margin:20px auto 0;gap:8px} #menu-screen .menu-actions .action{min-height:44px;padding:7px 15px;font-size:17px;border-width:2px} #menu-screen .button-end{font-size:12px} #menu-screen .enter-hint{font-size:9px;letter-spacing:2px;margin-top:16px} #menu-screen .screen-footer{font-size:9px} #menu-screen .menu-fullscreen{min-height:36px;padding:6px 10px;font-size:12px;gap:7px} @media(max-width:600px),(max-height:600px){ #menu-screen .menu-content{width:min(250px,76vw)} #menu-screen .menu-actions{max-width:225px;margin-top:12px;gap:7px} #menu-screen .menu-actions .action{font-size:15px;min-height:44px} } /* Approved Granblue-style selection and battle HUD. */ .select-screen{background:radial-gradient(ellipse at 25% 0,#020c20,transparent 60%),linear-gradient(150deg,#0b1c35 8%,#334e6c 48%,#cfe5f3 83%,#edf7fd);padding:12px 3vw 25px;min-height:100dvh} #select-backdrop{opacity:.11;filter:grayscale(1);mix-blend-mode:luminosity} .select-screen:after{background:linear-gradient(120deg,#06162b33,transparent 60%)} .select-ornament{position:absolute;left:28%;width:44%;height:15px;border-top:1px solid #e8f6ff;pointer-events:none;z-index:2} .ornament-top{top:15px}.ornament-bottom{bottom:15px;left:31%;width:38%} .select-ornament:before,.select-ornament:after{content:'';position:absolute;top:-4px;width:7px;height:7px;border:1px solid #edf8ff;transform:rotate(45deg)} .select-ornament:before{left:0}.select-ornament:after{right:0} .select-ornament i{position:absolute;left:calc(50% - 9px);top:-9px;width:16px;height:16px;border:1px solid #fff;transform:rotate(45deg);box-shadow:inset 0 0 0 3px #15375466} .select-heading{min-height:33px;align-items:center} .select-heading>div,.select-count{display:none} .select-heading .text-button{font-size:13px;padding:5px 9px;min-height:32px;color:#e9f5ff} .mode-picker{margin:0 auto;gap:5px}.mode-picker button{background:#eaf4f6c9;color:#15364f;border:1px solid #c7e2f4;border-radius:0;min-height:32px;padding:5px 14px;font-size:12px} .mode-picker button[aria-pressed=true]{background:#0b4779dc;color:#fff;border-color:#dff3ff} .mode-note{font-size:11px;margin:5px 0 0;color:#d8ecfb} .selection-stage{grid-template-columns:minmax(0,1fr) minmax(300px,30%) minmax(0,1fr);max-width:1800px;gap:10px;margin:8px auto 0;align-items:stretch} .select-screen .fighter-plinth{height:calc(100dvh - 132px);min-height:470px;overflow:hidden;border:0;border-radius:0} .fighter-preview-top{display:none} .select-screen .fighter-plinth canvas{width:100%;max-width:none;margin:0;object-fit:contain;filter:drop-shadow(0 7px 18px #0004)} .preview-copy{bottom:47px;left:10%;right:10%;padding:18px 13px 12px;background:#071324a1;border:1px solid #e8f4ff;box-shadow:0 0 0 3px #e8f4ff35,inset 0 0 0 5px #a9d0ec20;text-align:center} .preview-copy:before{content:'CHARACTER / PLAYER 1';position:absolute;top:-11px;left:12%;right:12%;background:#edf6ff;color:#173650;font:11px Georgia,serif;padding:3px 4px;white-space:nowrap;clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%)} .preview-cpu .preview-copy:before{content:'CPU / CHARACTER'} body[data-mode=versus] .preview-cpu .preview-copy:before{content:'PLAYER 2 / CHARACTER'} body[data-mode=boss] .preview-cpu .preview-copy:before{content:'BOSS / CHARACTER'} .preview-copy h2{font-size:clamp(23px,2.8vw,39px);margin:4px 0 9px;text-shadow:0 2px 3px #071a2e} .selection-ready{display:block;font-size:11px;color:#d2eaff;border-bottom:1px solid #b6d9f840;padding-bottom:5px} .special-card{border-top:1px solid #b6d9f860;padding-top:9px;margin:0} .special-card small{display:none}.special-card strong{font-family:var(--body-font);font-size:clamp(13px,1.25vw,18px);font-weight:400;line-height:1.4} .select-screen .roster-center{border:0;padding:0;align-self:center;margin:0 0 38px} .selection-step{font-size:12px;font-family:var(--body-font);margin:0 0 7px;color:#e6f6ff;text-shadow:0 1px 2px #001024} .choose-side{gap:4px;margin-bottom:8px}.choose-side button{background:#0b27468c;border:1px solid #d6eaf5;border-radius:0;font-size:11px;min-height:31px;padding:4px 5px;transform:none} .choose-side button[aria-pressed=true]{background:#eaf4f6dc;color:#12344d;border-color:#fff} .roster{gap:4px;grid-template-columns:repeat(4,minmax(0,1fr));direction:rtl} .select-screen .fighter-card{border:1px solid #d9e9f6;background:#203856;box-shadow:0 0 0 1px #182b45;border-radius:0;transform:none;position:relative} .select-screen .fighter-card:hover,.select-screen .fighter-card:focus-visible{transform:none;border-color:#fff;box-shadow:0 0 0 2px #fff,0 0 12px #60b9ff;z-index:2} .select-screen .portrait-window{height:clamp(86px,14.5dvh,170px);background:linear-gradient(135deg,#315477,#061a33)} .select-screen .portrait-window canvas{object-fit:cover;image-rendering:auto} .select-screen .card-name{position:absolute;bottom:0;left:0;right:0;padding:18px 1px 4px;background:linear-gradient(transparent,#051326dd);font-size:clamp(11px,1vw,15px);line-height:1.2;color:#fff} .select-screen .pick-label{top:2px;bottom:auto;left:0;right:0;padding:2px 0;font:10px Georgia,serif;background:#1477c6c9;color:#fff;box-shadow:none;transform:none;text-align:center} .select-screen .fighter-card.cpu-pick{border-color:#c6ddeb;box-shadow:0 0 0 1px #e3f5ff88} .select-screen .fighter-card.player-pick{border-color:#71ceff;box-shadow:0 0 0 2px #fff,0 0 11px #3eaeff;z-index:1} .select-screen .roster-center>.action{margin-top:18px;min-height:37px;font-size:14px;background:#edf4f4dc;color:#14334d;border:1px solid #bad8ec;border-radius:0;box-shadow:none;transform:none;padding:7px 12px;display:flex;justify-content:space-between} .select-screen .roster-center>.action:hover{background:#fff;transform:none} .select-screen .keyboard-hint{font-size:11px;color:#e5f2fc;text-shadow:0 1px 2px #06162b;margin-top:9px} .select-screen .keyboard-hint kbd{border:1px solid #bdd7ec;background:#17385388;padding:1px 3px;font-size:10px} body[data-mode=boss] .preview-cpu{box-shadow:none!important} @media(max-width:650px) and (orientation:portrait){ .select-screen{padding:12px 12px 32px}.select-ornament{left:26%;width:48%}.ornament-bottom{display:none} .select-heading{min-height:32px}.mode-note{display:none}.mode-picker button{min-height:40px;padding:6px 10px} .selection-stage{grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} .select-screen .fighter-plinth{height:265px;min-height:0} .select-screen .fighter-plinth canvas{width:100%;margin:0} .preview-copy{left:0;right:0;bottom:0;padding:15px 7px 8px} .preview-copy h2{font-size:23px;margin:3px 0 6px}.preview-copy:before{font-size:8px;left:8%;right:8%;top:-8px;padding:2px} .selection-ready{font-size:10px}.special-card strong{font-size:12px} .select-screen .roster-center{grid-row:2;grid-column:1/-1;margin:8px 0 0} .selection-step{font-size:13px}.choose-side button{min-height:40px;font-size:12px} .select-screen .portrait-window{height:100px}.select-screen .card-name{font-size:12px}.select-screen .pick-label{font-size:9px} .select-screen .roster-center>.action{min-height:44px;margin-top:14px;font-size:16px} .select-screen .keyboard-hint{display:none} } @media(max-height:600px) and (orientation:landscape){ .select-screen{padding:6px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left))} .select-heading{min-height:27px}.select-heading .text-button{min-height:26px;padding:2px 5px} .mode-picker{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:max-content;margin:0;z-index:3}.mode-picker button{min-height:28px;padding:3px 10px;font-size:11px} .mode-note,.ornament-top,.ornament-bottom{display:none} .selection-stage{grid-template-columns:minmax(0,1fr) minmax(252px,34%) minmax(0,1fr);margin-top:2px;gap:8px} .select-screen .fighter-plinth{height:calc(100dvh - 48px);min-height:0} .preview-copy{bottom:15px;left:0;right:0;padding:13px 8px 7px}.preview-copy h2{font-size:22px;margin:3px 0 6px} .preview-copy:before{font-size:8px;top:-8px;padding:2px}.selection-ready{font-size:9px}.special-card strong{font-size:12px} .select-screen .roster-center{margin:0;padding:0}.selection-step{font-size:11px;margin-bottom:4px} .choose-side{margin-bottom:5px}.choose-side button{min-height:27px;font-size:11px;padding:2px 4px} .select-screen .portrait-window{height:clamp(46px,15dvh,80px)}.select-screen .card-name{font-size:11px;padding:12px 1px 3px}.select-screen .pick-label{font-size:8px} .select-screen .roster-center>.action{min-height:36px;margin-top:8px;font-size:14px;padding:5px 9px}.select-screen .keyboard-hint{display:none} } .select-screen .card-name{border:0} .mode-picker button[aria-checked=true]{background:#0b4779dc;color:#fff;border-color:#dff3ff} /* Arcade HUD: mirrored metal frames, gold life bars and a six-point clock. */ .battle-screen .hud{top:1.6%;left:1.2%;right:1.2%;height:12cqw;grid-template-columns:minmax(0,1fr) 10.6cqw minmax(0,1fr);gap:.5cqw;filter:drop-shadow(0 .18cqw .05cqw #010713);pointer-events:none} .battle-screen .health-panel{--edge:#49c9ff;--bright:#c3f3ff;--accent:#137ee7;--dark:#062553;--deep:#021124;position:relative;padding:1.1cqw 0 0 10.4cqw;min-width:0} .battle-screen .health-panel.cpu{--edge:#ff456e;--bright:#ffc6d7;--accent:#e52253;--dark:#560c32;--deep:#200c24;padding:1.1cqw 10.4cqw 0 0} .battle-screen .health-heading{height:2.3cqw;min-height:0;gap:.6cqw;margin:0 0 .3cqw;padding:0 .5cqw;position:relative;z-index:3;display:flex;align-items:center} .battle-screen .health-heading strong{font-family:var(--body-font);font-size:1.3cqw;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#edf6ff;text-shadow:.12cqw .12cqw #020918;order:2} .battle-screen .player-tag{font:700 .65cqw/1 monospace;letter-spacing:.05em;border:0;background:none;color:#bcd9ee;padding:0;order:3} .battle-screen .hud-flag{width:3.2cqw;height:2.15cqw;flex-shrink:0;border:.2cqw solid #030b19;box-shadow:0 0 0 .13cqw var(--accent);transform:skewX(-5deg);order:1} .battle-screen .cpu .hud-flag{transform:skewX(5deg)} .battle-screen .health-shell,.battle-screen .cpu .health-shell{position:static;display:block;padding:0;border:0;min-height:0;overflow:visible;background:none;box-shadow:none;transform:none} .battle-screen .hud-portrait{display:block;position:absolute;top:.25cqw;left:0;width:10.7cqw;height:10.6cqw;padding:.4cqw;border:0;border-radius:0;background:linear-gradient(145deg,var(--bright) 2%,var(--accent) 14%,#071429 22%,var(--edge) 38%,var(--dark) 56%,var(--edge) 85%,var(--bright) 94%);clip-path:polygon(7% 0,94% 0,100% 9%,100% 64%,91% 100%,7% 100%,0 92%,0 9%);overflow:hidden;z-index:2} .battle-screen .cpu .hud-portrait{left:auto;right:0;clip-path:polygon(6% 0,93% 0,100% 9%,100% 92%,93% 100%,9% 100%,0 64%,0 9%)} .battle-screen .hud-portrait:before{content:"";position:absolute;inset:.3cqw;background:repeating-linear-gradient(135deg,#1b6aa523 0 .18cqw,transparent .18cqw .6cqw),radial-gradient(ellipse at 50% 22%,var(--accent),var(--deep) 76%);border:.22cqw solid #051127;clip-path:inherit} .battle-screen .hud-portrait:after{content:"";position:absolute;inset:.65cqw .55cqw .45cqw;box-shadow:inset .15cqw 0 var(--edge),inset 0 -.2cqw var(--bright);clip-path:inherit;pointer-events:none} .battle-screen .hud-portrait canvas{position:relative;display:block;width:100%;height:100%;object-fit:cover;transform:none;image-rendering:pixelated;clip-path:inherit} .battle-screen .cpu .hud-portrait canvas{transform:scaleX(-1)} .battle-screen .vitals{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:3.6cqw 1.9cqw;gap:.15cqw;position:relative;min-width:0} .battle-screen .health-bezel{position:relative;height:3.6cqw;background:linear-gradient(#d7f6ff 0 6%,#3b6487 6% 13%,#030918 13% 24%,#1e416b 24% 78%,#020b1b 78% 87%,#8bcced 87% 93%,#243f67 93%);clip-path:polygon(4.5% 0,96% 0,100% 100%,0 100%);padding:.58cqw .9cqw .65cqw} .battle-screen .health-track,.battle-screen .cpu .health-track{height:100%;min-height:0;padding:0;border:0;border-radius:0;background:#251521;box-shadow:0 0 0 .15cqw #d5f6f8;transform:none;clip-path:polygon(2% 0,98% 0,100% 100%,0 100%);overflow:hidden} .battle-screen .health-fill,.battle-screen .cpu .health-fill{height:100%;border-radius:0;background:linear-gradient(180deg,#fffcbd 0 6%,#fff33c 6% 24%,#ffdc09 44%,#ffce0a 64%,#ffb411 90%,#ffed51 90%);box-shadow:inset 0 .16cqw #fff995;transition:width .16s ease-out;position:relative} .battle-screen .health-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ff8e17a1,transparent 43%);opacity:.65} .battle-screen .cpu .health-fill:after{transform:scaleX(-1)} .battle-screen .health-fill.critical,.battle-screen .cpu .health-fill.critical{background:linear-gradient(#ffc957,#ff8a24 30%,#ef4829 80%,#ffaf35)} .battle-screen .vitals>.energy-track,.battle-screen .cpu .vitals>.energy-track{position:relative;width:58%;height:1.75cqw;min-height:0;grid-row:2;justify-self:start;margin:0 0 0 .2cqw;border:.16cqw solid var(--accent);border-top-color:var(--bright);border-bottom-color:var(--edge);border-radius:0;background:var(--deep);box-shadow:inset 0 0 0 .15cqw #030b1c;clip-path:polygon(3% 0,100% 0,94% 100%,0 100%);overflow:hidden;transform:skewX(-13deg)} .battle-screen .cpu .vitals>.energy-track{justify-self:end;margin:0 .2cqw 0 0;clip-path:polygon(0 0,97% 0,100% 100%,6% 100%);transform:skewX(13deg)} .battle-screen .energy-track>div,.battle-screen .cpu .energy-track>div{height:100%;background:repeating-linear-gradient(110deg,transparent 0 1.8cqw,#06112445 1.8cqw 2.05cqw),linear-gradient(0deg,var(--dark),var(--accent) 45%,var(--edge) 55%,var(--accent));opacity:1;transition:width .15s linear} .battle-screen .cpu .energy-track>div{margin-left:auto} .battle-screen .energy-track>div.ready,.battle-screen .cpu .energy-track>div.ready{background:repeating-linear-gradient(110deg,transparent 0 1.8cqw,#ffffff45 1.8cqw 2.05cqw),linear-gradient(0deg,var(--accent),var(--bright),var(--accent));box-shadow:0 0 .6cqw var(--bright)} .battle-screen .super-label{position:absolute;left:0;top:0;bottom:0;min-width:39%;display:flex;align-items:center;justify-content:center;padding:0 .55cqw;background:linear-gradient(90deg,var(--accent) 75%,transparent);font:900 italic 1cqw/1 monospace;letter-spacing:.08em;color:#eaf8ff;text-shadow:.12cqw .12cqw var(--dark);transform:skewX(13deg)} .battle-screen .cpu .super-label{left:auto;right:0;background:linear-gradient(-90deg,var(--accent) 75%,transparent);transform:skewX(-13deg)} .battle-screen .health-value,.battle-screen .cpu .health-value,.battle-screen .energy-value,.battle-screen .cpu .energy-value,.battle-screen .energy-label{display:none} .battle-screen .under-health,.battle-screen .cpu .under-health{position:absolute;top:7.7cqw;right:1cqw;left:auto;margin:0;padding:0;gap:.5cqw} .battle-screen .cpu .under-health{right:auto;left:1cqw} .battle-screen .wins{gap:.6cqw} .battle-screen .wins i{width:.8cqw;height:.8cqw;min-width:0;min-height:0;border:.15cqw solid #9ab0c8;border-radius:0;transform:rotate(45deg);background:#08182f;box-shadow:0 0 0 .15cqw #020918} .battle-screen .wins .won,.battle-screen .cpu .wins .won{background:#ffe75b;border-color:#fffcc0;box-shadow:0 0 .5cqw #ffe76088} .battle-screen .timer-block{position:relative;align-self:start;justify-self:center;width:11.1cqw;height:12.2cqw;min-width:0;min-height:0;display:block;margin:-.25cqw 0 0;padding:0;background:none;border:0;border-radius:0;transform:none;box-shadow:none;text-align:center} .battle-screen .timer-star{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .battle-screen .timer-face{position:absolute;inset:2.05cqw 0 auto;width:100%;transform:none;text-align:center} .battle-screen .timer-face>.time-label{display:block;color:#dcefff;font:900 1.15cqw/1.2 monospace;letter-spacing:-.05em;text-shadow:.15cqw .15cqw #001024} .battle-screen .timer-face>strong{display:block;margin:.1cqw 0 0;color:#f0f7ff;font:900 4.7cqw/.98 monospace;letter-spacing:-.07em;font-variant-numeric:tabular-nums;text-shadow:.2cqw .2cqw #010a1a,-.1cqw -.1cqw #fff;transform:scaleX(.9);-webkit-text-stroke:.08cqw #f0f7ff} .battle-screen .timer-block>#round-label{position:absolute;left:-1cqw;right:-1cqw;top:9.3cqw;font:700 .64cqw/1 monospace;letter-spacing:.07em;white-space:nowrap;color:#c5e8ff;text-shadow:1px 1px #020c1d} @media(max-width:650px) and (orientation:portrait){ .battle-screen .health-heading strong{font-size:1.7cqw}.battle-screen .player-tag{display:none} .battle-screen .super-label{font-size:1.3cqw;min-width:48%;letter-spacing:0} .battle-screen .timer-block>#round-label{font-size:.9cqw} } /* Keep the supplied logo and all three buttons inside short landscape screens. */ @media(max-height:600px) and (orientation:landscape){ #menu-screen #title-logo{max-height:calc(100dvh - 230px);width:auto;max-width:100%;margin:auto} } /* Keep the first visible scene ready, and share its movie with character selection. */ .loading-screen{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#02060d;color:#e8f4ff;text-align:center} .loading-screen[hidden]{display:none} .loading-content{width:min(280px,80vw)} .loading-content h1{font-size:32px;margin:0 0 28px} .loading-content p{font-size:16px;color:#a9c8e9} .loading-track{height:3px;background:#17314c;overflow:hidden} .loading-track span{display:block;width:40%;height:100%;background:#6bc7ff;animation:loading-slide 1.3s ease-in-out infinite alternate} @keyframes loading-slide{from{transform:translateX(100%)}to{transform:translateX(-250%)}} @media(prefers-reduced-motion:reduce){.loading-track span{animation:none;width:100%;opacity:.65}} #select-backdrop{opacity:1;filter:brightness(.35);mix-blend-mode:normal} .select-screen:after{background:linear-gradient(180deg,#04132944,#04132911 45%,#04132977)} /* Mirrored warm arcade frames and a quiet animated portrait backdrop. */ .battle-screen .health-panel.player,.battle-screen .health-panel.cpu{--accent:#ffad16;--bright:#fff0a2;--edge:#e68908;--dark:#824007;--deep:#281609} .battle-screen .timer-face{inset:0;display:flex;align-items:center;justify-content:center} .battle-screen .timer-face>.time-label,.battle-screen .timer-block>#round-label{display:none} .battle-screen .timer-face>strong{margin:0;letter-spacing:-.06em;padding-right:.06em;font-size:4.2cqw} .battle-screen .super-label{font-family:"KF Rubik",Arial,sans-serif;font-style:normal;letter-spacing:0;min-width:56%;font-size:1.05cqw;white-space:nowrap} .battle-screen .hud-portrait:before{background:repeating-linear-gradient(125deg,transparent 0 12px,#ffe09855 13px 16px,transparent 17px 30px),radial-gradient(ellipse at center,#a76416,#241306 85%);background-size:200% 200%,100% 100%;animation:portrait-energy 5s linear infinite} .battle-screen .cpu .hud-portrait:before{animation-direction:reverse} @keyframes portrait-energy{from{background-position:0 0,center}to{background-position:60px -60px,center}} @media(prefers-reduced-motion:reduce){.battle-screen .hud-portrait:before{animation:none}} .battle-screen .arena-overlay>.result-art{display:block;width:min(56cqw,660px);max-height:25cqw;object-fit:contain;margin:0 auto 1cqw;image-rendering:pixelated;filter:drop-shadow(0 .4cqw .3cqw #0008)} .battle-screen .arena-overlay>.result-art{width:min(40cqw,500px);max-height:18cqw;image-rendering:auto;margin-bottom:1.5cqw} .battle-screen .timer-face>strong{font-family:Arial,Helvetica,sans-serif;font-weight:900;letter-spacing:-.04em;-webkit-text-stroke:0;transform:none} .battle-screen #overlay-title.countdown-number{font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:9cqw;letter-spacing:0;font-variant-numeric:tabular-nums} /* Cover the live fullscreen viewport, including browser-height changes. */ body[data-screen="menu"],html:fullscreen{background:#000} #menu-screen{height:100dvh;min-height:100dvh} body[data-screen="menu"] #title-scene{position:fixed;inset:0;width:100vw;height:100dvh} /* Gold / sapphire arcade system — supplied UI reference, 29.6. */ :root{--ui-gold:#ffd328;--ui-light:#fff2a6;--ui-blue:#063faa;--ui-ink:#020a35;--ui-cyan:#34d9ff;--ui-button:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2060%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22crispEdges%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20stop-color%3D%22%23fff6a3%22%2F%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%23ffce19%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%23ffb000%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d76b05%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20stop-color%3D%22%230959c8%22%2F%3E%3Cstop%20offset%3D%22.28%22%20stop-color%3D%22%23062c8b%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23020b40%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M24%201H276V5H282V10H288V16H294V22H299V38H294V44H288V50H282V55H276V59H24V55H18V50H12V44H6V38H1V22H6V16H12V10H18V5H24Z%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%2302082e%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M27%207H273L291%2030%20273%2053H27L9%2030Z%22%20fill%3D%22url%28%23b%29%22%20stroke%3D%22%23ffd934%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M30%2011H270M16%2027%2028%2013%22%20fill%3D%22none%22%20stroke%3D%22%2363bbff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M28%2049H272%22%20fill%3D%22none%22%20stroke%3D%22%23095af5%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M24%203H276M22%2057H277%22%20fill%3D%22none%22%20stroke%3D%22%23fff8b8%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E")} /* Frames are transparent vectors; labels and game values remain live Hebrew text. */ .action,.select-screen .roster-center>.action,#menu-screen .menu-actions .action,#menu-help{ background:var(--ui-button) center/100% 100% no-repeat;color:var(--ui-gold);border:0;border-radius:0;clip-path:none; transform:none;box-shadow:none;filter:drop-shadow(0 3px 0 #010625);font-weight:900;text-shadow:0 2px #773f00; padding-inline:28px;transition:filter .14s,transform .14s } .action>*,.action:hover>*,.action:active>*{transform:none} .action-primary,#menu-screen .menu-actions .action-primary{filter:drop-shadow(0 3px #020625) drop-shadow(0 0 5px #ffa90065);color:#fff4af} .action:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.18) drop-shadow(0 4px #020625)} .select-screen .roster-center>.action:hover{background:var(--ui-button) center/100% 100% no-repeat} .action:active:not(:disabled){transform:translateY(1px);filter:brightness(1.08)} .action:focus-visible{outline:2px solid #fff5b6;outline-offset:4px} .action .button-end{color:#6fe5ff;text-shadow:0 2px #001461} #menu-screen .overline,#menu-screen .enter-hint{color:#ffdf6c} #menu-screen .overline span{background:#f9bd18} #menu-screen .menu-actions{gap:10px} .utility,.arena-tools button,.text-button,.mode-picker button,.choose-side button{ border:2px solid #e8a719;border-radius:2px;background:linear-gradient(#093e9b,#03123e);color:#ffde58; box-shadow:inset 0 1px #fff0a0,inset 0 -2px #071f69,0 2px 0 #020827;text-shadow:0 1px #020822 } .text-button{padding:6px 13px}.text-button:hover{color:#fff8c7;background:#0a3a86} #menu-screen .menu-fullscreen{border-color:#d8aa26;background:#041b53ed;color:#ffe270} .select-screen .mode-picker button,.select-screen .choose-side button{color:#b9dcff;background:linear-gradient(#063b91,#021746);border-color:#977019;box-shadow:inset 0 1px #deae34,0 2px #00082a} .select-screen .mode-picker button[aria-pressed=true],.select-screen .choose-side button[aria-pressed=true]{color:#ffe355;background:linear-gradient(#1266d6,#062772);border-color:#ffe977;box-shadow:inset 0 0 0 1px #d2910d,0 0 8px #fac92944} .select-ornament{border-color:#d6a42d}.select-ornament:before,.select-ornament:after,.select-ornament i{border-color:#ffce37;background:#03256d} .select-screen .preview-copy{border:2px solid #d4a02d;background:linear-gradient(#082661dc,#010d2bef);box-shadow:0 0 0 2px #040927,inset 0 0 0 2px #174e97} .select-screen .preview-copy:before{background:#061e65;color:#ffdf53;border-block:1px solid #d9aa34} .select-screen .preview-copy h2{color:#fff3b1;text-shadow:2px 3px #0a123b}.selection-ready{color:#8cdeff} .select-screen .fighter-card{background:#03134b;border-color:#9c7624;box-shadow:inset 0 0 0 1px #193d86} .select-screen .fighter-card .portrait-window{background:radial-gradient(ellipse at top,#0a60c7,#02072f)} .select-screen .fighter-card .card-name{background:#041344;color:#fadd66} .select-screen .fighter-card.player-pick{border-color:#ffe967;box-shadow:0 0 0 2px #e1a70b,0 0 14px #ffbc1d66} .select-screen .fighter-card.cpu-pick{border-color:#66e7ff;box-shadow:0 0 0 1px #1397d6} .select-screen .fighter-card .pick-label{background:#ffd228;color:#041544;text-shadow:none} .select-screen .fighter-card.cpu-pick .pick-label{background:#45dcff} .arena-card{border-color:#98751f}.arena-card h2{color:#ffdc52}.arena-card.active{border-color:#ffe785;box-shadow:0 0 0 2px #f0ad17,0 0 20px #ffd32b66} .roulette-track{border-color:#e1a914;background:#041339}.roulette-track>div{background:linear-gradient(90deg,#078ed7,#3ee4ff,#fff2a4)} .game-dialog{border:3px solid #e6af28;border-radius:3px;background:linear-gradient(145deg,#08295d,#020b2b 70%);box-shadow:0 0 0 3px #020721,inset 0 0 0 2px #ffe996,0 20px 80px #000b} .game-dialog h2,.game-dialog .overline{color:#ffdd53}.game-dialog h2{text-shadow:0 3px #542e02} .game-dialog .dialog-close{color:#ffe15c}.game-dialog .help-controls>div{border-color:#bd92264d} .game-dialog kbd,.keyboard-hint kbd{color:#ffdb62;border-color:#967429;background:#07194d} .loading-screen{background:radial-gradient(ellipse at center,#081e58,#01051a 70%)} .loading-content h1{color:#ffe05b;text-shadow:2px 3px #7d3b03}.loading-track{height:8px;border:1px solid #d2a22a;background:#07103a}.loading-track span{background:linear-gradient(#e6ffff,#20ceff 40%,#0875ca)} /* The HUD shares the reference's gold armour, blue cavities and cyan energy. */ .battle-screen .health-panel.player,.battle-screen .health-panel.cpu{--accent:#ffbf0d;--bright:#fff5b6;--edge:#f7cd42;--dark:#0555a6;--deep:#020c38} .battle-screen .health-heading{width:max-content;max-width:96%;height:2.1cqw;margin-bottom:0;padding:.15cqw 1.6cqw .2cqw .55cqw;background:linear-gradient(#0648ac,#061c58);clip-path:polygon(0 0,93% 0,100% 100%,0 100%);border-top:.15cqw solid #ffcd2f} .battle-screen .cpu .health-heading{margin-left:auto;padding:.15cqw .55cqw .2cqw 1.6cqw;clip-path:polygon(7% 0,100% 0,100% 100%,0 100%)} .battle-screen .health-heading strong{color:#ffdf4b;text-shadow:.1cqw .12cqw #773807;font-weight:900} .battle-screen .player-tag{color:#91caff}.battle-screen .hud-flag{width:2.2cqw;height:1.5cqw;transform:none;box-shadow:0 0 0 .1cqw #e3a800} .battle-screen .cpu .hud-flag{transform:none} .battle-screen .hud-portrait{background:linear-gradient(135deg,#fff6b1 0 7%,#ffe13e 7% 16%,#ffac09 24%,#ae5000 43%,#ffcb0a 69%,#ffef8d 85%,#ac4e00 100%);padding:.52cqw;filter:drop-shadow(.12cqw .15cqw #000c40)} .battle-screen .hud-portrait:before{inset:.34cqw;border:.2cqw solid #001648;background:repeating-linear-gradient(125deg,transparent 0 12px,#44a7ff33 13px 16px,transparent 17px 30px),radial-gradient(ellipse at 50% 25%,#0758b9,#020a31 85%);background-size:200% 200%,100% 100%;animation:portrait-energy 5s linear infinite} .battle-screen .cpu .hud-portrait:before{animation-direction:reverse} .battle-screen .hud-portrait:after{inset:.3cqw;box-shadow:inset .15cqw 0 #fff291,inset 0 -.2cqw #ffaf04} .battle-screen .health-bezel{height:3.6cqw;padding:.45cqw .6cqw;background:linear-gradient(#fff598 0 9%,#e4a71a 9% 18%,#0445b7 18% 80%,#00143f 80% 86%,#ffca23 86% 94%,#9e4b00 94%);clip-path:polygon(0 0,96% 0,100% 50%,96% 100%,0 100%)} .battle-screen .cpu .health-bezel{clip-path:polygon(4% 0,100% 0,100% 100%,4% 100%,0 50%)} .battle-screen .health-track,.battle-screen .cpu .health-track{clip-path:inherit;background:repeating-linear-gradient(135deg,#041445 0 3px,#061951 3px 6px);box-shadow:none} .battle-screen .health-fill,.battle-screen .cpu .health-fill{background:linear-gradient(#fffbc7 0 8%,#ffef49 8% 23%,#ffdd06 43%,#ffbf02 65%,#f79100 87%,#ffd74b 87%);box-shadow:inset 0 .18cqw #fff799,inset 0 -.2cqw #ffbd08} .battle-screen .cpu .health-fill{margin-left:auto} .battle-screen .health-fill:after{background:repeating-linear-gradient(0deg,transparent 0 2px,#fff6af16 2px 3px);opacity:.8} .battle-screen .vitals>.energy-track,.battle-screen .cpu .vitals>.energy-track{width:73%;height:1.75cqw;border:.17cqw solid #ffc923;border-top-color:#fff2a1;border-bottom-color:#d48107;transform:none;box-shadow:inset 0 0 0 .12cqw #00153d;background:#041441} .battle-screen .energy-track>div,.battle-screen .cpu .energy-track>div{background:linear-gradient(#fffbc7 0 8%,#ffef49 8% 23%,#ffdd06 43%,#ffbf02 65%,#f79100 87%,#ffd74b 87%);box-shadow:inset 0 .18cqw #fff799,inset 0 -.2cqw #ffbd08} .battle-screen .energy-track>div.ready,.battle-screen .cpu .energy-track>div.ready{background:repeating-linear-gradient(90deg,transparent 0 2cqw,#ffffff66 2cqw 2.12cqw),linear-gradient(#f1ffff,#62f0ff 40%,#078dde);box-shadow:inset 0 .15cqw #fff,0 0 .6cqw #14cbff} .battle-screen .super-label,.battle-screen .cpu .super-label{min-width:59%;font-family:"KF Rubik",Arial,sans-serif;font-size:1cqw;font-weight:900;letter-spacing:0;transform:none;color:#e0fbff;text-shadow:.1cqw .1cqw #001039;background:linear-gradient(90deg,#041848e8 78%,transparent);padding:0 .5cqw} .battle-screen .cpu .super-label{background:linear-gradient(-90deg,#041848e8 78%,transparent)} .battle-screen .under-health{top:7.4cqw;right:.3cqw}.battle-screen .cpu .under-health{left:.3cqw;right:auto} .battle-screen .wins{gap:.5cqw}.battle-screen .wins i{width:1cqw;height:1cqw;border:.14cqw solid #e7b01b;background:#031957;box-shadow:inset 0 0 0 .1cqw #1762b4;transform:none} .battle-screen .wins .won,.battle-screen .cpu .wins .won{border-color:#fff6a1;background:linear-gradient(135deg,#e4ffff,#19cdff 45%,#0557c8);box-shadow:0 0 .4cqw #3dcbff88} .battle-screen .timer-block{width:11.1cqw;height:12.2cqw} .battle-screen .timer-face{inset:0;display:flex;justify-content:center;align-items:center} .battle-screen .timer-face>.time-label,.battle-screen .timer-block>#round-label{display:none} .battle-screen .timer-face>strong{color:#ffe75a;font:900 3.65cqw/1 Arial,Helvetica,sans-serif;letter-spacing:-.055em;padding:0 .055em 0 0;margin:0;transform:none;-webkit-text-stroke:0;text-shadow:0 .2cqw #9d4902,.13cqw .32cqw #020a36;font-variant-numeric:tabular-nums} .battle-screen .arena-tools button{background:linear-gradient(#063b95,#03133e);color:#ffe574;border-color:#c99b26;border-radius:3px;box-shadow:inset 0 1px #fff0a4,0 2px #01052b} .battle-screen .touch-controls button{border:2px solid #fac834;color:#ffdf54;background:radial-gradient(circle at 38% 25%,#1266ca,#052475 57%,#020b36 80%);box-shadow:inset 0 2px #fff2a1,inset 0 -3px #002057,0 3px #010a2f;text-shadow:0 2px #010a2f;font-weight:900} .battle-screen .touch-controls .touch-move button{border-radius:5px;font-size:26px;color:#fff075} .battle-screen .touch-controls .touch-special{border-color:#80ebff;background:radial-gradient(circle at 35% 25%,#03c8e9,#0656a8 55%,#031952);color:#e3ffff} .battle-screen .touch-controls .touch-special.charged{background:radial-gradient(circle at 35% 25%,#fff6ac,#ffc612 55%,#cb6e05);color:#071d52;border-color:#fff4aa} .battle-screen .touch-controls button.held{background:linear-gradient(#fff2a0,#ffc424);color:#07183f;transform:scale(.94);border-color:#fff4bd;text-shadow:none} @media(max-width:650px) and (orientation:portrait){.battle-screen .health-heading strong{font-size:1.65cqw}.battle-screen .super-label,.battle-screen .cpu .super-label{font-size:1.25cqw;min-width:76%}} @media(prefers-reduced-motion:reduce){.battle-screen .hud-portrait:before{animation:none}.action{transition:none}} /* Menu buttons matched to the supplied gold-active / blue-idle reference, 29.7. */ :root{--menu-button-gold:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2058%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22crispEdges%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22blue%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20stop-color%3D%22%230c62d8%22%2F%3E%3Cstop%20offset%3D%22.18%22%20stop-color%3D%22%23083aa9%22%2F%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%23031f75%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23031447%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22gold%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20stop-color%3D%22%23fff29a%22%2F%3E%3Cstop%20offset%3D%22.14%22%20stop-color%3D%22%23ffe136%22%2F%3E%3Cstop%20offset%3D%22.52%22%20stop-color%3D%22%23ffcf0c%22%2F%3E%3Cstop%20offset%3D%22.9%22%20stop-color%3D%22%23f8a305%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23bd6600%22%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%22grain%22%20width%3D%226%22%20height%3D%226%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M0%202h2v1H0zm3%203h1v1H3z%22%20fill%3D%22%23fff%22%20opacity%3D%22.065%22%2F%3E%3Cpath%20d%3D%22M4%200h2v1H4z%22%20fill%3D%22%23000%22%20opacity%3D%22.06%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M24%202H276V5H280V9H284V13H288V17H292V21H296V25H298V33H296V37H292V41H288V45H284V49H280V53H276V56H24V53H20V49H16V45H12V41H8V37H4V33H2V25H4V21H8V17H12V13H16V9H20V5H24Z%22%20fill%3D%22%23020b28%22%20stroke%3D%22%23001025%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M24%202H276V5H280V9H284V13H288V17H292V21H296V25H298V33H296V37H292V41H288V45H284V49H280V53H276V56H24V53H20V49H16V45H12V41H8V37H4V33H2V25H4V21H8V17H12V13H16V9H20V5H24Z%22%20fill%3D%22none%22%20stroke%3D%22%230874d2%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M25%204H275M25%2054H275%22%20stroke%3D%22%2323b8f4%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M25%208H275L292%2029%20275%2050H25L8%2029Z%22%20fill%3D%22url%28%23gold%29%22%20stroke%3D%22%23000f37%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M27%2010H273L287%2028M13%2026%2026%2011%22%20fill%3D%22none%22%20stroke%3D%22%23fff6ae%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M14%2033%2027%2047H273L286%2032%22%20fill%3D%22none%22%20stroke%3D%22%23ffc634%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22m21%2023%204%206-4%206-4-6Z%22%20fill%3D%22%23022758%22%2F%3E%3Cpath%20d%3D%22m21%2024%202%203-2%202-2-2Z%22%20fill%3D%22%23d8ffff%22%2F%3E%3Cpath%20d%3D%22m279%2023%204%206-4%206-4-6Z%22%20fill%3D%22%23022758%22%2F%3E%3Cpath%20d%3D%22m279%2024%202%203-2%202-2-2Z%22%20fill%3D%22%23d8ffff%22%2F%3E%3Cpath%20d%3D%22M25%208H275L292%2029%20275%2050H25L8%2029Z%22%20fill%3D%22url%28%23grain%29%22%2F%3E%3C%2Fsvg%3E")} :root{--menu-button-blue:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2058%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22crispEdges%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22blue%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20stop-color%3D%22%230c62d8%22%2F%3E%3Cstop%20offset%3D%22.18%22%20stop-color%3D%22%23083aa9%22%2F%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%23031f75%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23031447%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22gold%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20stop-color%3D%22%23fff29a%22%2F%3E%3Cstop%20offset%3D%22.14%22%20stop-color%3D%22%23ffe136%22%2F%3E%3Cstop%20offset%3D%22.52%22%20stop-color%3D%22%23ffcf0c%22%2F%3E%3Cstop%20offset%3D%22.9%22%20stop-color%3D%22%23f8a305%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23bd6600%22%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%22grain%22%20width%3D%226%22%20height%3D%226%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M0%202h2v1H0zm3%203h1v1H3z%22%20fill%3D%22%23fff%22%20opacity%3D%22.065%22%2F%3E%3Cpath%20d%3D%22M4%200h2v1H4z%22%20fill%3D%22%23000%22%20opacity%3D%22.06%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M24%202H276V5H280V9H284V13H288V17H292V21H296V25H298V33H296V37H292V41H288V45H284V49H280V53H276V56H24V53H20V49H16V45H12V41H8V37H4V33H2V25H4V21H8V17H12V13H16V9H20V5H24Z%22%20fill%3D%22%23020b28%22%20stroke%3D%22%23001025%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M24%202H276V5H280V9H284V13H288V17H292V21H296V25H298V33H296V37H292V41H288V45H284V49H280V53H276V56H24V53H20V49H16V45H12V41H8V37H4V33H2V25H4V21H8V17H12V13H16V9H20V5H24Z%22%20fill%3D%22none%22%20stroke%3D%22%230874d2%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M25%204H275M25%2054H275%22%20stroke%3D%22%2323b8f4%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M25%208H275L292%2029%20275%2050H25L8%2029Z%22%20fill%3D%22url%28%23blue%29%22%20stroke%3D%22%23000f37%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M27%2010H273M27%2048H273%22%20stroke%3D%22%23087bef%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M28%2011H272%22%20stroke%3D%22%233bafff%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M25%2010H31L16%2029%2031%2048H25L10%2029ZM275%2010H269L284%2029%20269%2048H275L290%2029Z%22%20fill%3D%22url%28%23gold%29%22%20stroke%3D%22%238e6200%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M24%2011H27L13%2029M276%2011H273L287%2029%22%20fill%3D%22none%22%20stroke%3D%22%23fff8b7%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M25%208H275L292%2029%20275%2050H25L8%2029Z%22%20fill%3D%22url%28%23grain%29%22%2F%3E%3C%2Fsvg%3E")} #menu-screen .menu-actions{gap:9px} #menu-screen .menu-actions .action{ background:var(--menu-button-blue) center/100% 100% no-repeat; display:flex;justify-content:center;text-align:center;gap:0;min-height:49px;padding:10px 28px; border:0;border-radius:0;color:#44cfff;font-size:18px;font-weight:900;line-height:1.15; text-shadow:0 2px #00194b;box-shadow:none;transform:none; filter:drop-shadow(0 0 3px #078dfc99) drop-shadow(0 2px 0 #010922); transition:filter .12s,transform .12s } #menu-screen .menu-actions .button-end{display:none} #menu-screen .menu-actions .action:hover:not(:disabled),#menu-screen .menu-actions .action:focus-visible{ background-image:var(--menu-button-gold);color:#052650;text-shadow:0 1px #ffe45a; filter:brightness(1.06) drop-shadow(0 0 6px #139dffb3) drop-shadow(0 2px 0 #010922);transform:translateY(-1px) } #menu-screen .menu-actions .action:focus-visible{outline:2px solid #8ce9ff;outline-offset:3px} #menu-screen .menu-actions .action:active:not(:disabled){background-image:var(--menu-button-gold);color:#052650;text-shadow:0 1px #ffe45a;transform:translateY(1px);filter:brightness(1.03) drop-shadow(0 0 3px #139dffb3)} @media(max-width:600px),(max-height:600px){#menu-screen .menu-actions .action{min-height:44px;font-size:16px;padding:8px 26px}} @media(prefers-reduced-motion:reduce){#menu-screen .menu-actions .action{transition:none}} /* Fullscreen control uses the same menu frame and interaction states. */ #menu-screen .menu-fullscreen{ background:var(--menu-button-blue) center/100% 100% no-repeat; border:0;border-radius:0;box-shadow:none;min-height:38px;min-width:130px; padding:8px 21px;gap:6px;justify-content:center;color:#44cfff; font-size:12px;font-weight:900;white-space:nowrap;text-shadow:0 1px #00194b; filter:drop-shadow(0 0 3px #078dfc88) drop-shadow(0 2px 0 #010922) } #menu-screen .menu-fullscreen:hover,#menu-screen .menu-fullscreen:focus-visible,#menu-screen .menu-fullscreen:active{ background-image:var(--menu-button-gold);color:#052650;text-shadow:0 1px #ffe45a; filter:drop-shadow(0 0 5px #139dffb3) drop-shadow(0 2px 0 #010922) } #menu-screen .menu-fullscreen:focus-visible{outline:2px solid #8ce9ff;outline-offset:3px} /* The supplied logo now has native alpha, including its blue glow. */ #menu-screen .menu-content{z-index:auto} #menu-screen #menu-title{position:relative;filter:none;mix-blend-mode:normal} #title-lettering{display:block;width:100%;height:auto;aspect-ratio:3/1;pointer-events:none} @media(max-height:600px) and (min-width:601px){ #menu-screen #title-lettering{max-height:calc(100dvh - 230px);width:auto;max-width:100%;margin:auto} } /* Selection controls share the opening menu's blue/chevron button family. */ #select-screen .mode-picker button,#select-screen .choose-side button,#select-screen .select-heading>.text-button,#select-screen .roster-center>.action{ background:var(--menu-button-blue) center/100% 100% no-repeat;border:0;border-radius:0; color:#44cfff;text-shadow:0 1px #00194b;box-shadow:none;transform:none; padding-inline:20px;justify-content:center;gap:7px;font-weight:900; filter:drop-shadow(0 0 2px #078dfc99) drop-shadow(0 2px 0 #010922) } #select-screen .mode-picker button,#select-screen .choose-side button{min-height:38px} #select-screen .select-heading>.text-button{min-width:90px;min-height:36px} #select-screen .roster-center>.action{min-height:44px;text-align:center} #select-screen .roster-center>.action .button-end{display:none} #select-screen .choose-side button span{background:none;color:inherit} #select-screen .mode-picker button[aria-pressed=true],#select-screen .choose-side button[aria-pressed=true]{color:#d8faff;filter:brightness(1.2) drop-shadow(0 0 5px #22bfff99)} #select-screen .mode-picker button:hover:not(:disabled),#select-screen .choose-side button:hover:not(:disabled),#select-screen .select-heading>.text-button:hover,#select-screen .roster-center>.action:hover:not(:disabled), #select-screen .mode-picker button:focus-visible,#select-screen .choose-side button:focus-visible,#select-screen .select-heading>.text-button:focus-visible,#select-screen .roster-center>.action:focus-visible{ background-image:var(--menu-button-gold);color:#052650;text-shadow:0 1px #ffe45a; filter:drop-shadow(0 0 5px #139dffb3) drop-shadow(0 2px 0 #010922) } #select-screen .fighter-card{border-color:#097ed3;box-shadow:inset 0 0 0 1px #00123b;background:#03164b} #select-screen .fighter-card .card-name{background:var(--menu-button-blue) center/100% 100% no-repeat;color:#44cfff;border:0;padding:8px 12px;min-height:31px;text-shadow:0 1px #00194b} #select-screen .fighter-card:hover:not(:disabled) .card-name,#select-screen .fighter-card:focus-visible .card-name{background-image:var(--menu-button-gold);color:#052650;text-shadow:0 1px #ffe45a} #select-screen .fighter-card.player-pick{border-color:#ffe967;box-shadow:0 0 0 1px #e1a70b,0 0 9px #ffbc1d55} #select-screen .fighter-card.cpu-pick{border-color:#66e7ff;box-shadow:0 0 0 1px #1397d6} @media(max-height:600px) and (orientation:landscape){#select-screen .mode-picker button,#select-screen .choose-side button{min-height:30px;padding-inline:15px}#select-screen .fighter-card .card-name{min-height:22px;padding:4px 9px}#select-screen .roster-center>.action{min-height:36px}} /* Pause window follows the approved menu button family, 29.12. */ :root{--pause-frame:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20470%20440%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22crispEdges%22%3E%0A%20%3Cdefs%3E%0A%20%20%3ClinearGradient%20id%3D%22blue%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%230b3284%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%2306215f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2303113d%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22gold%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23fff29a%22%2F%3E%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%23ffe136%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%23ffcf0c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23bd6600%22%2F%3E%3C%2FlinearGradient%3E%0A%20%3C%2Fdefs%3E%0A%20%3Cpath%20d%3D%22M24%203H446V7H454V15H462V23H467V417H462V425H454V433H446V437H24V433H16V425H8V417H3V23H8V15H16V7H24Z%22%20fill%3D%22%23010b2a%22%20stroke%3D%22%230874d2%22%20stroke-width%3D%223%22%2F%3E%0A%20%3Cpath%20d%3D%22M27%2010H443V15H450V22H458V418H450V425H443V430H27V425H20V418H12V22H20V15H27Z%22%20fill%3D%22url%28%23blue%29%22%20stroke%3D%22%230a83ee%22%20stroke-width%3D%222%22%2F%3E%0A%20%3Cpath%20d%3D%22M28%2012H442M28%20428H442%22%20stroke%3D%22%2346cfff%22%20stroke-width%3D%222%22%2F%3E%0A%20%3Cpath%20d%3D%22M27%2020H50V24H30V29H25V45H20V28H25ZM443%2020H420V24H440V29H445V45H450V28H445ZM27%20420H50V416H30V411H25V395H20V412H25ZM443%20420H420V416H440V411H445V395H450V412H445Z%22%20fill%3D%22url%28%23gold%29%22%2F%3E%0A%20%3Cpath%20d%3D%22M15%20188H21L11%20220%2021%20252H15L5%20220ZM455%20188H449L459%20220%20449%20252H455L465%20220Z%22%20fill%3D%22url%28%23gold%29%22%20stroke%3D%22%23815805%22%2F%3E%0A%20%3Cpath%20d%3D%22M16%20189H18L8%20220M454%20189H452L462%20220%22%20fill%3D%22none%22%20stroke%3D%22%23fff7bc%22%2F%3E%0A%3C%2Fsvg%3E%0A");} #pause-dialog{ width:470px;max-width:calc(100vw - 28px);padding:36px 38px 40px; border:0;border-radius:0;background:var(--pause-frame) center/100% 100% no-repeat; box-shadow:none;filter:drop-shadow(0 0 6px #078dfc80) drop-shadow(0 16px 30px #000b) } #pause-dialog h2{color:#8ae8ff;text-shadow:0 3px #00103d} #pause-dialog .overline{color:#44cfff} #pause-dialog .dialog-subtitle{color:#b7d9f5} #pause-dialog .pause-actions{gap:10px;margin-top:28px} #pause-dialog .pause-actions .action{ position:relative;background:var(--menu-button-blue) center/100% 100% no-repeat; display:flex;justify-content:center;text-align:center;gap:0;min-height:54px;padding:12px 48px; border:0;border-radius:0;color:#44cfff;font-size:18px;font-weight:900;line-height:1.15; text-shadow:0 2px #00194b;box-shadow:none;transform:none; filter:drop-shadow(0 0 3px #078dfc99) drop-shadow(0 2px 0 #010922); transition:filter .12s,transform .12s } #pause-dialog .pause-actions .action>span+span{display:none} #pause-dialog .pause-actions kbd{ position:absolute;left:27px;margin:0;padding:0;border:0;background:none;box-shadow:none; color:inherit;font:700 10px Arial,sans-serif;opacity:.7 } #pause-dialog .pause-actions .action:hover:not(:disabled),#pause-dialog .pause-actions .action:focus-visible{ background-image:var(--menu-button-gold);color:#052650;text-shadow:0 1px #ffe45a; filter:brightness(1.06) drop-shadow(0 0 6px #139dffb3) drop-shadow(0 2px 0 #010922);transform:translateY(-1px) } #pause-dialog .pause-actions .action:focus-visible{outline:2px solid #8ce9ff;outline-offset:3px} #pause-dialog .pause-actions .action:active:not(:disabled){background-image:var(--menu-button-gold);color:#052650;text-shadow:0 1px #ffe45a;transform:translateY(1px)} /* Double the visible logo while keeping the button column at its approved size. */ #menu-screen .menu-content #menu-title{margin:30px auto} #menu-screen #title-lettering,#menu-screen #title-logo{transform:scale(2);transform-origin:center;pointer-events:none} @media(max-width:600px),(max-height:600px){ #pause-dialog{padding:26px 28px 30px} #pause-dialog h2{font-size:30px;margin-bottom:12px} #pause-dialog .pause-actions{margin-top:18px;gap:7px} #pause-dialog .pause-actions .action{min-height:46px;font-size:16px;padding:10px 43px} #menu-screen .menu-content #menu-title{margin:22px auto} } @media(prefers-reduced-motion:reduce){#pause-dialog .pause-actions .action{transition:none}} /* Shared blue rim / gold accent panels for character info and arena roulette. */ #select-screen .preview-copy{ border:0;border-radius:0;box-shadow:none;background:var(--pause-frame) center/100% 100% no-repeat; padding:26px 22px 18px;filter:drop-shadow(0 0 4px #078dfc77) drop-shadow(0 3px #010922) } #select-screen .preview-copy:before{ top:-17px;left:9%;right:9%;min-height:32px;display:flex;align-items:center;justify-content:center; padding:7px 22px;border:0;clip-path:none;background:var(--menu-button-blue) center/100% 100% no-repeat; color:#44cfff;font-family:Arial,sans-serif;font-weight:800;font-size:10px; filter:drop-shadow(0 0 3px #078dfc88);text-shadow:0 1px #00194b } #select-screen .preview-copy h2{color:#d3f5ff;text-shadow:0 3px #00103d} #select-screen .preview-copy .selection-ready{border-color:#158ede66;color:#75d8ff} #select-screen .preview-copy .special-card{border-color:#158ede66} /* Fit the complete face inside each card, above its nameplate. */ #select-screen .portrait-window canvas{ inset:3px 0 auto;width:100%;height:calc(100% - 34px);object-fit:contain;object-position:center; transform:none;image-rendering:auto } #select-screen .fighter-card .pick-label{left:auto;right:3px;top:3px;width:auto;min-width:22px;padding:2px 4px} #select-screen .mode-picker button[aria-pressed=true]{ background-image:var(--menu-button-gold);color:#052650;text-shadow:0 1px #ffe45a; filter:drop-shadow(0 0 5px #139dffb3) drop-shadow(0 2px #010922) } #roulette-screen .arena-card{ position:relative;padding:10px;border:0;border-radius:0;overflow:visible; background:var(--pause-frame) center/100% 100% no-repeat;box-shadow:none;opacity:.72; filter:drop-shadow(0 0 3px #078dfc66) drop-shadow(0 3px #010922) } #roulette-screen .arena-card-image{margin:3px 4px 0;clip-path:polygon(5% 0,95% 0,100% 7%,100% 100%,0 100%,0 7%)} #roulette-screen .arena-card h2{ background:var(--menu-button-blue) center/100% 100% no-repeat;color:#44cfff; padding:11px 18px;margin:7px 0 0;font-size:clamp(16px,1.65vw,24px);text-shadow:0 1px #00194b } #roulette-screen .arena-card p{padding:8px 5px 12px;color:#b7d9f5} #roulette-screen .arena-card.active,#roulette-screen .arena-card.winner{ opacity:1;background:var(--pause-frame) center/100% 100% no-repeat; filter:drop-shadow(0 0 8px #1faeffaa) drop-shadow(0 3px #010922) } #roulette-screen .arena-card.active h2,#roulette-screen .arena-card.winner h2{background-image:var(--menu-button-gold);color:#052650;text-shadow:0 1px #ffe45a} #roulette-screen>.text-button{ background:var(--menu-button-blue) center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none; color:#44cfff;padding:10px 24px;text-shadow:0 1px #00194b;filter:drop-shadow(0 0 3px #078dfc88) } #roulette-screen>.text-button:hover,#roulette-screen>.text-button:focus-visible{background-image:var(--menu-button-gold);color:#052650;text-shadow:0 1px #ffe45a} @media(max-width:650px),(max-height:600px){ #select-screen .preview-copy{padding:20px 12px 13px} #select-screen .preview-copy:before{font-size:8px;left:4%;right:4%;padding-inline:16px;min-height:27px;top:-13px} } @media(max-height:600px) and (orientation:landscape){ #select-screen .portrait-window canvas{height:calc(100% - 24px);top:1px} #select-screen .fighter-card .pick-label{font-size:7px;min-width:17px;padding:1px 2px} #roulette-screen .arena-card{padding:7px} #roulette-screen .arena-card h2{font-size:16px;padding:8px 16px;margin-top:4px} #roulette-screen .arena-card p{font-size:11px;padding:5px 2px 8px} } /* Result actions and battle utility controls use the exact menu button artwork. */ #overlay-action,#result-select,#fullscreen,#pause{ background:var(--menu-button-blue) center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none; color:#44cfff;text-shadow:0 1px #00194b;transform:none; filter:drop-shadow(0 0 3px #078dfc99) drop-shadow(0 2px #010922) } #overlay-action,#result-select{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 28px;text-align:center;font-weight:900} #result-select{width:min(270px,70%);margin-inline:auto} #fullscreen,#pause{width:64px;height:46px;min-height:44px;padding:10px 18px;display:flex;align-items:center;justify-content:center} #overlay-action:hover,#overlay-action:focus-visible,#result-select:hover,#result-select:focus-visible, #fullscreen:hover,#fullscreen:focus-visible,#pause:hover,#pause:focus-visible, #overlay-action:active,#result-select:active,#fullscreen:active,#pause:active{ background-image:var(--menu-button-gold);color:#052650;text-shadow:0 1px #ffe45a; filter:brightness(1.06) drop-shadow(0 0 6px #139dffb3) drop-shadow(0 2px #010922) } #overlay-action:focus-visible,#result-select:focus-visible,#fullscreen:focus-visible,#pause:focus-visible{outline:2px solid #8ce9ff;outline-offset:3px} .battle-screen .timer-face>strong{font-size:1.825cqw;text-shadow:0 .1cqw #9d4902,.065cqw .16cqw #020a36} /* Result lettering replaces the winner name and score caption. */ #result-art:not([hidden]) + #overlay-text{display:none} /* The loading screen shares the menu's doubled title frames and still-image fallback. */ #loading-screen .loading-content{width:min(640px,80vw)} #loading-screen .loading-lettering{position:relative;width:100%;aspect-ratio:3/1;margin:0 auto 18px;line-height:0} #loading-screen .loading-lettering>canvas,#loading-screen .loading-lettering>img{position:absolute;left:25%;top:25%;display:block;width:50%;height:auto;aspect-ratio:3/1;transform:scale(2);transform-origin:center;image-rendering:auto;pointer-events:none} #loading-screen .loading-track{width:min(280px,100%);margin:auto} /* Keep portrait art continuous behind the center controls and screen margins. */ #select-screen .fighter-plinth canvas{position:absolute;inset:0 auto auto 0;pointer-events:none} #select-screen .fighter-plinth{z-index:0} #select-screen .roster-center{position:relative;z-index:2} #select-screen .preview-copy{z-index:3} @media(min-width:651px),(orientation:landscape){ #select-screen .fighter-plinth{overflow:visible} } /* Character info keeps its frame without a role nameplate or decorative arrows. */ #pause-dialog,#select-screen .preview-copy,#roulette-screen .arena-card,#roulette-screen .arena-card.active,#roulette-screen .arena-card.winner{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20470%20440%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22crispEdges%22%3E%0A%20%3Cdefs%3E%0A%20%20%3ClinearGradient%20id%3D%22blue%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%230b3284%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%2306215f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2303113d%22%2F%3E%3C%2FlinearGradient%3E%0A%20%20%3ClinearGradient%20id%3D%22gold%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23fff29a%22%2F%3E%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%23ffe136%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%23ffcf0c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23bd6600%22%2F%3E%3C%2FlinearGradient%3E%0A%20%3C%2Fdefs%3E%0A%20%3Cpath%20d%3D%22M24%203H446V7H454V15H462V23H467V417H462V425H454V433H446V437H24V433H16V425H8V417H3V23H8V15H16V7H24Z%22%20fill%3D%22%23010b2a%22%20stroke%3D%22%230874d2%22%20stroke-width%3D%223%22%2F%3E%0A%20%3Cpath%20d%3D%22M27%2010H443V15H450V22H458V418H450V425H443V430H27V425H20V418H12V22H20V15H27Z%22%20fill%3D%22url%28%23blue%29%22%20stroke%3D%22%230a83ee%22%20stroke-width%3D%222%22%2F%3E%0A%20%3Cpath%20d%3D%22M28%2012H442M28%20428H442%22%20stroke%3D%22%2346cfff%22%20stroke-width%3D%222%22%2F%3E%0A%20%3Cpath%20d%3D%22M27%2020H50V24H30V29H25V45H20V28H25ZM443%2020H420V24H440V29H445V45H450V28H445ZM27%20420H50V416H30V411H25V395H20V412H25ZM443%20420H420V416H440V411H445V395H450V412H445Z%22%20fill%3D%22url%28%23gold%29%22%2F%3E%0A%3C%2Fsvg%3E%0A")} #select-screen .preview-copy::before{content:none;display:none} /* The full torso continues behind each roster name button. */ #select-screen .portrait-window canvas{inset:0;width:100%;height:100%;object-fit:fill} #select-screen .fighter-card .card-name{z-index:2} /* 29.23 — continuous HP edge, quiet round markers, shared opening lightning. */ .battle-screen .health-panel.player .health-bezel{padding-left:0} .battle-screen .health-panel.cpu .health-bezel{padding-right:0} .battle-screen .under-health,.battle-screen .cpu .under-health{display:none} .battle-screen .energy-track>div{position:relative;overflow:hidden} .battle-screen .energy-lightning{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.62;mix-blend-mode:screen} .battle-screen .super-label{z-index:1} .battle-screen .energy-track>div.ready,.battle-screen .cpu .energy-track>div.ready{background:linear-gradient(#065cad,#043775 45%,#021b52);box-shadow:inset 0 .12cqw #86eaff,0 0 .6cqw #14cbff} /* 29.31 — dedicated boss-selection eyes, one fighter and compact roster. */ body[data-mode=boss] #select-backdrop{filter:none;opacity:1;mix-blend-mode:normal} body[data-mode=boss] .select-screen:after{background:linear-gradient(180deg,#00000018,transparent 35%,#01081877)} body[data-mode=boss] .select-screen .preview-cpu{display:none} body[data-mode=boss] .select-screen .selection-stage{grid-template-columns:minmax(220px,30%) minmax(400px,48%) 1fr;margin-top:clamp(100px,22vh,240px);align-items:end} body[data-mode=boss] .select-screen .fighter-plinth{height:46vh;min-height:280px} body[data-mode=boss] .select-screen .roster{grid-template-columns:repeat(6,minmax(0,1fr))} body[data-mode=boss] .select-screen .portrait-window{height:clamp(62px,11vh,112px)} @media(max-width:650px){body[data-mode=boss] .select-screen .selection-stage{grid-template-columns:1fr;margin-top:90px}body[data-mode=boss] .select-screen .preview-player{grid-column:1;grid-row:1;width:60%;margin:auto}body[data-mode=boss] .select-screen .fighter-plinth{height:230px;min-height:0}body[data-mode=boss] .select-screen .roster-center{grid-column:1;grid-row:2}body[data-mode=boss] .select-screen .roster{grid-template-columns:repeat(4,minmax(0,1fr))}} body[data-mode=boss] #select-screen .preview-player .preview-copy{position:fixed;bottom:5vh;left:3%;right:auto;width:27%} @media(max-width:650px){body[data-mode=boss] #select-screen .preview-player .preview-copy{position:absolute;bottom:0;left:0;right:0;width:auto}} /* 29.32 — a single pause heading and uncluttered arena cards. */ #pause-dialog h2{font-family:"KF Rubik",Arial,sans-serif;font-size:clamp(40px,6vw,64px);font-weight:900;line-height:1.1;letter-spacing:.05em;text-align:center;margin:10px 0 0} #roulette-screen .arena-card{padding-bottom:20px} /* 29.33 — boss selection keeps its battle heading without a redundant side picker. */ body[data-mode=boss] #select-screen .choose-side{display:none} body[data-mode=boss] #select-screen .select-heading>div{display:block;grid-column:2;grid-row:1} body[data-mode=boss] #select-screen .select-heading .overline{display:none} body[data-mode=boss] #select-title{margin:0;color:#d3f5ff;font-size:clamp(28px,3vw,46px);text-shadow:0 3px #00103d,0 0 12px #000} /* 29.34 — lower the boss heading and roster beneath the eyes. */ body[data-mode=boss] #select-screen .select-heading>div,body[data-mode=boss] #mode-note{transform:translateY(clamp(20px,4vh,48px))} @media(min-width:651px){body[data-mode=boss] #select-screen .roster-center{transform:translateY(clamp(32px,7vh,80px))}} @media(max-width:650px){body[data-mode=boss] #select-screen .roster-center{margin-top:24px}} /* 29.36 — label the selected fighters’ special moves on both sides. */ #select-screen .special-card small{display:block;color:#8edcff;font-size:clamp(10px,1vw,13px);line-height:1.3;margin:0 0 3px} /* Approved low/wide boss selection, 29.47. Heading stays independent of the lower group. */ .boss-selection-note{display:none} body[data-mode=boss] #select-screen{height:100svh;min-height:0;padding:0;container-type:inline-size} body[data-mode=boss] #select-screen .mode-picker,body[data-mode=boss] #select-screen #mode-note{display:none} body[data-mode=boss] #select-screen .select-heading{position:absolute;inset:0;max-width:none;min-height:0;margin:0;pointer-events:none} body[data-mode=boss] #select-screen .select-heading>div{position:absolute;top:17%;left:0;width:100%;transform:none;text-align:center} body[data-mode=boss] #select-screen #select-title{font:700 2.7cqw "KF David Libre",serif;color:#d9f5ff;text-shadow:0 .2cqw #00132d;margin:0} body[data-mode=boss] #select-screen #select-back{position:absolute;right:3%;top:3%;pointer-events:auto} body[data-mode=boss] #select-screen .selection-stage{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;display:block;transform:translateY(-1.5%) scale(.85);transform-origin:50% 100%} body[data-mode=boss] #select-screen .preview-player{position:absolute;left:0;bottom:0;width:50%;height:100%;margin:0} body[data-mode=boss] #select-screen .fighter-plinth{position:absolute;left:4%;width:92%;height:80%;bottom:-20%;min-height:0;margin:0;overflow:visible} body[data-mode=boss] #select-screen .preview-player .preview-copy{position:absolute;left:18%;right:auto;bottom:auto;width:64%;padding:1.1cqw 1.6cqw;display:flex;flex-direction:column;justify-content:center;text-align:center} body[data-mode=boss] #select-screen .preview-copy .selection-ready{font-size:.72cqw;border:0;padding:0;margin:0;letter-spacing:0} body[data-mode=boss] #select-screen .preview-copy h2{font:700 2.4cqw "KF David Libre",serif;padding:.5cqw 0;margin:.4cqw 0;border-block:1px solid #1982b866} body[data-mode=boss] #select-screen .preview-copy .special-card{padding:0;margin:0} body[data-mode=boss] #select-screen .special-card small{font-size:.72cqw;margin:0} body[data-mode=boss] #select-screen .special-card strong{font-size:1.2cqw;margin-top:.35cqw;display:block} body[data-mode=boss] #select-screen .roster-center{position:absolute;left:75%;width:46%;bottom:.25%;transform:translateX(-50%);margin:0;padding:0;border:0;background:none} body[data-mode=boss] #select-screen .boss-selection-note{display:block;font-size:.86cqw;text-align:center;margin:0 0 .6cqw;color:#d9e8f9;text-shadow:0 2px 4px #000} body[data-mode=boss] #select-screen .selection-step{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0} body[data-mode=boss] #select-screen .roster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.24cqw;padding:0;margin:0;direction:rtl} body[data-mode=boss] #select-screen .fighter-card{border:1px solid #128acf;background:linear-gradient(115deg,#0c57a8,#061639);padding:0;overflow:hidden;border-radius:0;min-height:0;transform:none} body[data-mode=boss] #select-screen .portrait-window{height:auto;aspect-ratio:150/140;margin:0;overflow:hidden;background:none} body[data-mode=boss] #select-screen .portrait-window canvas{inset:0;width:100%;height:100%;transform:none;object-fit:fill} body[data-mode=boss] #select-screen .fighter-card .card-name{position:absolute;bottom:.15cqw;left:.2cqw;right:.2cqw;min-height:2.2cqw;padding:.5cqw .2cqw;font-size:1.03cqw;line-height:1.2;margin:0} body[data-mode=boss] #select-screen .fighter-card .pick-label{top:.25cqw;right:.25cqw;font:bold .75cqw Arial;padding:.2cqw .3cqw;min-width:0} body[data-mode=boss] #select-screen .roster-center>#start{display:flex;margin:1cqw auto 0;width:78%;max-width:none;min-height:3.25cqw;padding:.7cqw 1cqw;font-size:1.1cqw} /* A stacked arrangement keeps touch targets readable on narrow portrait displays. */ @media(max-width:650px) and (orientation:portrait){ body[data-mode=boss] #select-screen #select-title{font-size:6cqw} body[data-mode=boss] #select-screen .selection-stage{transform:translateY(-1.5%) scale(.94)} body[data-mode=boss] #select-screen .preview-player{width:100%} body[data-mode=boss] #select-screen .fighter-plinth{left:0;width:100%;height:70%;bottom:16%} body[data-mode=boss] #select-screen .preview-player .preview-copy{left:18%;width:64%;padding:2cqw 3cqw} body[data-mode=boss] #select-screen .preview-copy .selection-ready,body[data-mode=boss] #select-screen .special-card small{font-size:2.4cqw} body[data-mode=boss] #select-screen .preview-copy h2{font-size:5.4cqw;padding:1cqw 0} body[data-mode=boss] #select-screen .special-card strong{font-size:3.2cqw} body[data-mode=boss] #select-screen .roster-center{left:50%;width:96%;bottom:.25%} body[data-mode=boss] #select-screen .boss-selection-note{font-size:2.4cqw;margin-bottom:1.5cqw} body[data-mode=boss] #select-screen .roster{gap:.6cqw} body[data-mode=boss] #select-screen .fighter-card .card-name{font-size:2.4cqw;min-height:6cqw;padding:1.3cqw .2cqw} body[data-mode=boss] #select-screen .fighter-card .pick-label{font-size:2cqw} body[data-mode=boss] #select-screen .roster-center>#start{font-size:3.5cqw;min-height:11cqw;margin-top:2cqw} } body[data-mode=boss] #select-screen .select-heading{display:block} body[data-mode=boss] #select-screen .select-heading>div{grid-column:auto;grid-row:auto} body[data-mode=boss] #select-screen .ornament-bottom{display:none} body[data-mode=boss] #select-screen .fighter-card[aria-pressed=true]{border:2px solid #ffda3e;box-shadow:0 0 .35cqw #ffdf6f88} body[data-mode=boss] #select-screen .fighter-card[aria-pressed=true] .card-name{background-image:var(--menu-button-gold);color:#08264c} body[data-mode=boss] #select-screen{overflow:clip} @media(max-height:600px) and (orientation:landscape){ body[data-mode=boss] #select-screen .roster-center>#start{min-height:52px;font-size:14px;padding:7px 18px} body[data-mode=boss] #select-screen .boss-selection-note{font-size:10px} body[data-mode=boss] #select-screen .preview-copy .selection-ready,body[data-mode=boss] #select-screen .special-card small{font-size:10px} body[data-mode=boss] #select-screen .special-card strong{font-size:14px} } /* 29.51: thirteen fighters, three ordinary rows and two boss rows. */ body:not([data-mode=boss]) #select-screen .roster{grid-template-columns:repeat(5,minmax(0,1fr))} body[data-mode=boss] #select-screen .roster{grid-template-columns:repeat(8,minmax(0,1fr))} body[data-mode=boss] #select-screen .fighter-card .card-name{font-size:.9cqw;padding-inline:.1cqw} @media(max-width:650px) and (orientation:portrait){ body[data-mode=boss] #select-screen .fighter-card .card-name{font-size:2.2cqw} } /* Approved ice blue / white UI, 29.60. Functional meters and all scene art retain their colors. */ html[data-ui-theme=frost]{ --ui-button:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2058%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22crispEdges%22%3E%0A%3Cdefs%3E%3ClinearGradient%20id%3D%22fill%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%2391C9EB%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23C9ECFF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%0A%3Cpath%20d%3D%22M24%202H276V5H280V9H284V13H288V17H292V21H296V25H298V33H296V37H292V41H288V45H284V49H280V53H276V56H24V53H20V49H16V45H12V41H8V37H4V33H2V25H4V21H8V17H12V13H16V9H20V5H24Z%22%20fill%3D%22%23EAF8FF%22%20stroke%3D%22%23214F86%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M25%208H275L292%2029%20275%2050H25L8%2029Z%22%20fill%3D%22url%28%23fill%29%22%20stroke%3D%22%23214F86%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M28%2011H272M28%2047H272%22%20fill%3D%22none%22%20stroke%3D%22%235E9BC7%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22m21%2023%204%206-4%206-4-6Zm258%200%204%206-4%206-4-6Z%22%20fill%3D%22%23214F86%22%2F%3E%0A%3C%2Fsvg%3E"); --menu-button-blue:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2058%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22crispEdges%22%3E%0A%3Cdefs%3E%3ClinearGradient%20id%3D%22fill%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%2391C9EB%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23C9ECFF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%0A%3Cpath%20d%3D%22M24%202H276V5H280V9H284V13H288V17H292V21H296V25H298V33H296V37H292V41H288V45H284V49H280V53H276V56H24V53H20V49H16V45H12V41H8V37H4V33H2V25H4V21H8V17H12V13H16V9H20V5H24Z%22%20fill%3D%22%23EAF8FF%22%20stroke%3D%22%23214F86%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M25%208H275L292%2029%20275%2050H25L8%2029Z%22%20fill%3D%22url%28%23fill%29%22%20stroke%3D%22%23214F86%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M28%2011H272M28%2047H272%22%20fill%3D%22none%22%20stroke%3D%22%235E9BC7%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22m21%2023%204%206-4%206-4-6Zm258%200%204%206-4%206-4-6Z%22%20fill%3D%22%23214F86%22%2F%3E%0A%3C%2Fsvg%3E"); --menu-button-gold:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2058%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22crispEdges%22%3E%0A%3Cdefs%3E%3ClinearGradient%20id%3D%22fill%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23E4F8FF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%0A%3Cpath%20d%3D%22M24%202H276V5H280V9H284V13H288V17H292V21H296V25H298V33H296V37H292V41H288V45H284V49H280V53H276V56H24V53H20V49H16V45H12V41H8V37H4V33H2V25H4V21H8V17H12V13H16V9H20V5H24Z%22%20fill%3D%22%23EAF8FF%22%20stroke%3D%22%23214F86%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M25%208H275L292%2029%20275%2050H25L8%2029Z%22%20fill%3D%22url%28%23fill%29%22%20stroke%3D%22%23214F86%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M28%2011H272M28%2047H272%22%20fill%3D%22none%22%20stroke%3D%22%235E9BC7%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22m21%2023%204%206-4%206-4-6Zm258%200%204%206-4%206-4-6Z%22%20fill%3D%22%23214F86%22%2F%3E%0A%3C%2Fsvg%3E"); --pause-frame:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20470%20440%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22crispEdges%22%3E%0A%3Cdefs%3E%3ClinearGradient%20id%3D%22panel%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23C4E9FC%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23EAF8FF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%0A%3Cpath%20d%3D%22M24%203H446V7H454V15H462V23H467V417H462V425H454V433H446V437H24V433H16V425H8V417H3V23H8V15H16V7H24Z%22%20fill%3D%22%23EAF8FF%22%20stroke%3D%22%23214F86%22%20stroke-width%3D%223%22%2F%3E%0A%3Cpath%20d%3D%22M27%2010H443V15H450V22H458V418H450V425H443V430H27V425H20V418H12V22H20V15H27Z%22%20fill%3D%22url%28%23panel%29%22%20stroke%3D%22%235E9BC7%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M28%2012H442M28%20428H442%22%20stroke%3D%22%23214F86%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M27%2020H50V24H30V29H25V45H20V28H25ZM443%2020H420V24H440V29H445V45H450V28H445ZM27%20420H50V416H30V411H25V395H20V412H25ZM443%20420H420V416H440V411H445V395H450V412H445Z%22%20fill%3D%22%23214F86%22%2F%3E%0A%3C%2Fsvg%3E"); } /* One palette for controls on every screen; the world behind it remains dark. */ html[data-ui-theme=frost]{ --panel:#EAF8FF;--line:#5E9BC7;--text:#ECF7FF;--muted:#C4E9FC; --primary:#B9E8FC;--cyan:#D9F2FF;--pink:#C4E9FC; --ui-gold:#FFFFFF;--ui-light:#E4F8FF;--ui-blue:#91C9EB;--ui-ink:#174A7E;--ui-cyan:#C4E9FC; --frost-text:#123F6E;--frost-muted:#326998;--frost-edge:#5E9BC7; } /* Shared regular, selected, hover, keyboard-focus and held controls. */ html[data-ui-theme=frost] :is(#menu-screen,#select-screen,#roulette-screen,#battle-screen,#pause-dialog,#help-dialog) :is(.action,.text-button,.utility,.menu-fullscreen,.mode-picker button,.choose-side button), html[data-ui-theme=frost] :is(#overlay-action,#result-select,#fullscreen,#pause){ background:var(--menu-button-blue) center/100% 100% no-repeat; color:var(--frost-text);text-shadow:none;border:0;box-shadow:none; filter:drop-shadow(0 2px 0 #102E4966); } html[data-ui-theme=frost] :is(#menu-screen,#select-screen,#roulette-screen,#battle-screen,#pause-dialog,#help-dialog) :is(.action,.text-button,.utility,.menu-fullscreen,.mode-picker button,.choose-side button):is(:hover,:focus-visible,:active):not(:disabled), html[data-ui-theme=frost] #select-screen :is(.mode-picker button,.choose-side button)[aria-pressed=true], html[data-ui-theme=frost] :is(#overlay-action,#result-select,#fullscreen,#pause):is(:hover,:focus-visible,:active){ background-image:var(--menu-button-gold);color:#174A7E;text-shadow:none; filter:drop-shadow(0 2px 0 #102E4966) drop-shadow(0 0 5px #B9E8FC77); } html[data-ui-theme=frost] button:focus-visible,html[data-ui-theme=frost] canvas:focus-visible{ outline-color:#FFFFFF;outline-offset:4px; } html[data-ui-theme=frost] :is(#help-dialog,#pause-dialog) button:focus-visible{ outline-color:#214F86; } html[data-ui-theme=frost] #menu-screen :is(.overline,.enter-hint,.menu-caption){color:#E4F8FF} html[data-ui-theme=frost] #menu-screen .overline span{background:#B9E8FC} html[data-ui-theme=frost] .screen-footer{color:#C4E9FC} html[data-ui-theme=frost] #select-screen .select-ornament, html[data-ui-theme=frost] #select-screen .select-ornament::before, html[data-ui-theme=frost] #select-screen .select-ornament::after, html[data-ui-theme=frost] #select-screen .select-ornament i{border-color:#E4F8FF;background:none} /* Info panels, pause, instructions and all arena cards use the approved frame. */ html[data-ui-theme=frost] :is(#pause-dialog,#help-dialog), html[data-ui-theme=frost] #select-screen .preview-copy, html[data-ui-theme=frost] #roulette-screen :is(.arena-card,.arena-card.active,.arena-card.winner){ background:var(--pause-frame) center/100% 100% no-repeat; border:0;box-shadow:none;color:var(--frost-text); filter:drop-shadow(0 3px 0 #102E4977) drop-shadow(0 0 4px #B9E8FC44); } html[data-ui-theme=frost] #select-screen .preview-copy h2, html[data-ui-theme=frost] :is(#pause-dialog,#help-dialog) h2{color:var(--frost-text);text-shadow:none} html[data-ui-theme=frost] #select-screen .preview-copy .selection-ready, html[data-ui-theme=frost] #select-screen .special-card small{color:var(--frost-muted);border-color:#5E9BC766} html[data-ui-theme=frost] #select-screen .special-card{border-color:#5E9BC766} html[data-ui-theme=frost] #select-screen .special-card strong{color:var(--frost-text)} html[data-ui-theme=frost] #select-screen .preview-copy h2{border-color:#5E9BC766} html[data-ui-theme=frost] #select-screen .fighter-card{background:#EAF8FF;border-color:#5E9BC7;box-shadow:inset 0 0 0 1px #C4E9FC} html[data-ui-theme=frost] #select-screen .portrait-window{background:linear-gradient(150deg,#9DCEF0,#D9F2FF)} html[data-ui-theme=frost] #select-screen .fighter-card .card-name{ background-image:var(--menu-button-blue);color:var(--frost-text);text-shadow:none; } html[data-ui-theme=frost] #select-screen .fighter-card:is(.player-pick,[aria-pressed=true],:hover,:focus-visible){ border-color:#FFFFFF;box-shadow:0 0 0 1px #214F86,0 0 9px #B9E8FC88; } html[data-ui-theme=frost] #select-screen .fighter-card.cpu-pick{border-color:#214F86;box-shadow:0 0 0 1px #91C9EB} html[data-ui-theme=frost] #select-screen .fighter-card:is([aria-pressed=true],:hover,:focus-visible) .card-name{ background-image:var(--menu-button-gold);color:#174A7E;text-shadow:none; } html[data-ui-theme=frost] #select-screen .fighter-card .pick-label{ background:#FFFFFF;color:#174A7E;border:1px solid #5E9BC7;text-shadow:none; } html[data-ui-theme=frost] #select-screen .fighter-card.cpu-pick .pick-label{background:#214F86;color:#FFFFFF} html[data-ui-theme=frost] #roulette-screen .arena-card h2{ background-image:var(--menu-button-blue);color:var(--frost-text);text-shadow:none; } html[data-ui-theme=frost] #roulette-screen .arena-card:is(.active,.winner) h2{ background-image:var(--menu-button-gold);color:#174A7E;text-shadow:none; } html[data-ui-theme=frost] #roulette-screen .arena-card:is(.active,.winner){filter:drop-shadow(0 0 8px #D9F2FFAA) drop-shadow(0 3px #102E4977)} html[data-ui-theme=frost] .roulette-track{border-color:#5E9BC7;background:#174A7E} html[data-ui-theme=frost] .roulette-track>div{background:linear-gradient(90deg,#91C9EB,#E4F8FF,#FFFFFF)} html[data-ui-theme=frost] :is(#pause-dialog,#help-dialog) :is(.overline,.dialog-subtitle,.help-controls,.help-tip){color:var(--frost-muted);text-shadow:none} html[data-ui-theme=frost] #help-dialog .help-controls>div{border-color:#5E9BC766;background:none} html[data-ui-theme=frost] #help-dialog .help-controls strong{color:var(--frost-text)} html[data-ui-theme=frost] #help-dialog .help-note{color:var(--frost-muted)} html[data-ui-theme=frost] #help-dialog .multiplayer-help{background:#FFFFFF66;border-color:#5E9BC766;color:var(--frost-text)} html[data-ui-theme=frost] #help-dialog .multiplayer-help :is(p,h3){color:var(--frost-text)} html[data-ui-theme=frost] #help-dialog .dialog-close{background:none;color:var(--frost-text);filter:none} html[data-ui-theme=frost] #help-dialog kbd{background:#FFFFFF;border-color:#5E9BC7;color:#174A7E} html[data-ui-theme=frost] #loading-screen :is(h1,p){color:#E4F8FF;text-shadow:none} html[data-ui-theme=frost] #loading-screen .loading-track{border-color:#5E9BC7;background:#174A7E} html[data-ui-theme=frost] #loading-screen .loading-track span{background:linear-gradient(#FFFFFF,#B9E8FC,#91C9EB)} /* HUD chrome changes; yellow health/charging fills and ready lightning stay intact. */ html[data-ui-theme=frost] #battle-screen .health-panel{--accent:#B9E8FC;--bright:#FFFFFF;--edge:#5E9BC7;--dark:#214F86;--deep:#174A7E} html[data-ui-theme=frost] #battle-screen .health-heading{background:linear-gradient(#EAF8FF,#C4E9FC);border-top-color:#FFFFFF} html[data-ui-theme=frost] #battle-screen .health-heading strong{color:#123F6E;text-shadow:none} html[data-ui-theme=frost] #battle-screen .player-tag{color:#326998} html[data-ui-theme=frost] body[data-boss-tier="2"] #p2-name{color:#7e36a9} html[data-ui-theme=frost] body[data-boss-tier="2"] #opponent-hud-tag{color:#9257b6} html[data-ui-theme=frost] #battle-screen .hud-portrait{background:linear-gradient(135deg,#FFFFFF 0 7%,#E4F8FF 7% 16%,#B9E8FC 24%,#5E9BC7 43%,#C4E9FC 69%,#FFFFFF 85%,#214F86 100%)} html[data-ui-theme=frost] #battle-screen .hud-portrait::before{border-color:#214F86;background:repeating-linear-gradient(125deg,transparent 0 12px,#FFFFFF44 13px 16px,transparent 17px 30px),radial-gradient(ellipse at 50% 25%,#91C9EB,#214F86 85%);background-size:200% 200%,100% 100%} html[data-ui-theme=frost] #battle-screen .hud-portrait::after{box-shadow:inset .15cqw 0 #FFFFFF,inset 0 -.2cqw #5E9BC7} html[data-ui-theme=frost] #battle-screen .health-bezel{background:linear-gradient(#FFFFFF 0 9%,#91C9EB 9% 18%,#214F86 18% 80%,#174A7E 80% 86%,#C4E9FC 86% 94%,#5E9BC7 94%)} html[data-ui-theme=frost] #battle-screen .health-track{background:repeating-linear-gradient(135deg,#174A7E 0 3px,#214F86 3px 6px)} html[data-ui-theme=frost] #battle-screen .vitals>.energy-track{border-color:#5E9BC7;border-top-color:#FFFFFF;border-bottom-color:#91C9EB;background:#174A7E;box-shadow:inset 0 0 0 .12cqw #214F86} html[data-ui-theme=frost] #battle-screen .super-label{background:linear-gradient(90deg,#EAF8FFF0 78%,transparent);color:#123F6E;text-shadow:none} html[data-ui-theme=frost] #battle-screen .cpu .super-label{background:linear-gradient(-90deg,#EAF8FFF0 78%,transparent)} html[data-ui-theme=frost] #battle-screen .timer-face>strong{color:#123F6E;text-shadow:none} html[data-ui-theme=frost] #battle-screen .touch-controls button{ background:radial-gradient(circle at 38% 25%,#EAF8FF,#C4E9FC 57%,#91C9EB 80%); border-color:#5E9BC7;color:#123F6E;box-shadow:inset 0 2px #FFFFFF,inset 0 -3px #5E9BC7,0 3px #102E4966;text-shadow:none; } html[data-ui-theme=frost] #battle-screen .touch-controls .touch-special{background:radial-gradient(circle at 35% 25%,#C4E9FC,#91C9EB 55%,#5E9BC7);color:#123F6E;border-color:#214F86} html[data-ui-theme=frost] #battle-screen .touch-controls .touch-special.charged{background:radial-gradient(circle at 35% 25%,#E4F8FF,#62D8FF 55%,#137EAF);color:#123F6E;border-color:#FFFFFF} html[data-ui-theme=frost] #battle-screen .touch-controls button.held{background:linear-gradient(#FFFFFF,#E4F8FF);color:#174A7E;border-color:#214F86;text-shadow:none} /* Approved free-font pairing: titles in David Libre, supporting UI in Rubik. */ #pause-dialog h2{font-family:var(--title-font);font-weight:700} .battle-screen .timer-face>strong,.battle-screen #overlay-title.countdown-number{font-family:var(--body-font);font-weight:900} .select-screen .pick-label,.preview-copy:before,.battle-screen .player-tag,.battle-screen .timer-face>.time-label,.battle-screen .timer-block>#round-label{font-family:var(--body-font)} /* Lighter Rubik: regular text, medium controls, semibold clock. */ :root{font-weight:400} :is(#menu-screen,#select-screen,#roulette-screen,#battle-screen,#pause-dialog,#help-dialog) :is(button,.card-name,.player-tag,.super-label,kbd,.overline,.selection-step,.selection-ready,.mode-note,.boss-selection-note,.special-card strong){font-weight:500} :is(#menu-screen,#select-screen,#roulette-screen,#battle-screen,#pause-dialog,#help-dialog) .action.action{font-weight:500} /* Illustrated controls: one live keyboard map, using the actual input bindings. */ #help-dialog.help-dialog{width:min(1120px,calc(100vw - 32px));max-width:1120px;max-height:94svh;padding:30px clamp(18px,3vw,38px);overflow-y:auto} #help-dialog>.overline{text-align:right;padding-left:48px} #help-dialog #help-controls{display:block;margin:20px 0 0} #help-dialog #help-controls>div{display:block;padding:0;border:0;background:none} #help-dialog .control-guide-tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 12px} #help-dialog .control-guide-tabs button{min-width:120px;min-height:42px;padding:8px 18px;background:#D3EEFC;color:#174A7E;border:2px solid #5E9BC7;box-shadow:inset 0 0 0 2px #FFFFFF;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);font-size:15px;font-weight:500} #help-dialog .control-guide-tabs button[aria-pressed=true]{background:#214F86;color:#FFFFFF;border-color:#FFFFFF;box-shadow:inset 0 0 0 2px #5E9BC7} #help-dialog .control-guide-caption{text-align:center;font-size:14px;line-height:1.7;color:#32668F;margin:0 0 12px} #help-dialog #help-controls>.keyboard-scroll{overflow-x:auto;overscroll-behavior-x:contain;direction:ltr;border:1px solid #8AB6D4;background:linear-gradient(#F4FBFF,#DFF1FC);border-radius:4px;scrollbar-color:#5E9BC7 #D4ECFB} #help-dialog .keyboard-map{display:block;width:100%;min-width:730px;height:auto;font-family:"KF Rubik",Arial,sans-serif} .keyboard-shell{fill:#BEDCF0;stroke:#214F86;stroke-width:3} .keyboard-shell-shine{fill:none;stroke:#FFFFFF;stroke-width:3} .keyboard-key .key-base{fill:#8BB1CE;stroke:#5E87A8;stroke-width:1} .keyboard-key .key-top{fill:#ECF7FE;stroke:#87AFCD;stroke-width:1.5} .keyboard-key .key-shine{fill:none;stroke:#FFFFFF;stroke-width:1.5} .keyboard-key text{fill:#789BB8;font-size:17px;font-weight:400} .keyboard-key text.key-small{font-size:12px} .keyboard-key.is-active .key-base{fill:#123C69;stroke:#123C69} .keyboard-key.is-active .key-top{fill:#214F86;stroke:#FFFFFF;stroke-width:2} .keyboard-key.is-active text{fill:#FFFFFF;font-weight:500;font-size:20px} .keyboard-key.is-active text.key-small{font-size:15px} .keyboard-key.is-special .key-top{fill:#8BD5F4;stroke:#174A7E} .keyboard-key.is-special text{fill:#123F6E} .keyboard-callout path{fill:none;stroke:#4F94BB;stroke-width:1.5;stroke-linejoin:round} .keyboard-callout circle{fill:#6EC6E6;stroke:#FFFFFF;stroke-width:1.5} .keyboard-callout rect{fill:#F2FAFF;stroke:#BDDDEE;stroke-width:1} .keyboard-callout text{fill:#174A7E;font-size:20px;font-weight:500} #help-dialog .keyboard-scroll-hint{display:none;font-size:12px;color:#32668F;text-align:center;margin:8px 0} #help-dialog #help-controls>.control-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:16px 0 0} #help-dialog .control-legend-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#174A7E} #help-dialog .control-legend-item>span{display:inline-flex;align-items:center;gap:3px} #help-dialog .control-legend-item strong{font-weight:500} #help-dialog .control-legend-item kbd{height:25px;min-width:25px;padding:0 5px;font-size:11px;box-shadow:none;border:1px solid #5E9BC7;border-bottom-width:3px} #help-dialog .control-or{font-size:11px;color:#668BA7} #help-dialog .control-special-note{color:#32668F;text-align:center;font-size:13px;line-height:1.8;margin:14px 0} #help-dialog .combat-help{margin:16px 0;border-top:1px solid #9EC6E0;padding-top:12px} #help-dialog .combat-help summary{cursor:pointer;color:#174A7E;font-size:14px;font-weight:500} #help-dialog .combat-help .help-note{margin:12px 0;font-size:14px} @media(max-width:760px){ #help-dialog.help-dialog{width:calc(100vw - 16px);padding:24px 14px;max-height:96svh} #help-dialog .control-guide-tabs{gap:6px} #help-dialog .control-guide-tabs button{min-width:0;flex:1;padding:8px;font-size:14px} #help-dialog .keyboard-scroll-hint{display:block} #help-dialog .control-guide-caption{font-size:13px} #help-dialog #help-controls>.control-legend{justify-content:flex-start;gap:10px 16px} } #select-screen :is(.special-card small,.mode-note,.boss-selection-note,.selection-step,.selection-ready){font-weight:400} #battle-screen .health-heading strong{font-weight:500} #battle-screen .timer-face>strong,#battle-screen #overlay-title.countdown-number{font-weight:600} /* 29.86 — ice-blue life bars, matching the approved frost interface. */ html[data-ui-theme=frost] #battle-screen .health-fill, html[data-ui-theme=frost] #battle-screen .cpu .health-fill{background:linear-gradient(#d9f5ff 0 5%,#69cfff 5% 13%,#269bec 32%,#126bce 65%,#104f9f 88%,#4cbcff 88%);box-shadow:inset 0 .18cqw #effcff,inset 0 -.2cqw #74cfff} html[data-ui-theme=frost] #battle-screen .health-fill.critical, html[data-ui-theme=frost] #battle-screen .cpu .health-fill.critical{background:linear-gradient(#a5dcff,#368fe0 25%,#174e9b 80%,#61bdff)} /* Compact battle HUD; input hit targets retain their existing accessible size. */ #battle-screen .hud{transform:none} #battle-screen .health-panel.player{transform:scale(.88);transform-origin:0 0} #battle-screen .health-panel.cpu{transform:scale(.88);transform-origin:100% 0} #battle-screen .timer-block{transform:scale(.88);transform-origin:50% 0} html[data-ui-theme=frost] #battle-screen .energy-track>div:not(.ready){background:linear-gradient(#e3f9ff 0 8%,#b3eaff 8% 30%,#72cef5 66%,#43aade 90%,#a5e8ff 90%);box-shadow:inset 0 .15cqw #f2fdff,inset 0 -.15cqw #6ac8f0} /* Instructions: keep content inside the stepped frame, with a compact footer action. */ #help-dialog.help-dialog{padding:52px clamp(28px,4vw,56px) 40px;scrollbar-gutter:stable} #help-dialog .help-heading{position:relative;padding-left:56px;min-height:48px} #help-dialog .help-heading h2{margin:0 0 12px;line-height:1.2} #help-dialog .help-heading .dialog-subtitle{margin:0;line-height:1.6} #help-dialog .help-heading .dialog-close{left:0;top:0;width:44px;height:44px;padding:0;line-height:1;display:grid;place-items:center} #help-dialog #help-done{display:flex;align-items:center;justify-content:center;width:220px;max-width:100%;min-height:48px;height:48px;margin:24px auto 12px;padding:8px 24px;font-size:16px} @media(max-width:600px){ #help-dialog.help-dialog{padding:38px 24px 30px;max-height:94svh} #help-dialog .help-heading{padding-left:46px} #help-dialog .help-heading h2{font-size:28px} #help-dialog #help-done{width:190px} } /* Scroll the instructions inside the frame; its corners and footer stay clear. */ #help-dialog.help-dialog{overflow:hidden;scrollbar-gutter:auto} #help-dialog.help-dialog[open]{display:flex;flex-direction:column} #help-dialog .help-heading{flex-shrink:0} #help-dialog .help-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 6px;flex:1} #help-dialog #help-done{flex-shrink:0;margin-bottom:0} /* 29.89: header sits below and inward from both ornamental corner brackets. */ #help-dialog .help-heading{padding:12px 32px 0 80px;min-height:64px} #help-dialog .help-heading .dialog-close{left:16px;top:12px;width:48px;height:48px} #help-dialog .help-heading .dialog-close svg{display:block;width:28px;height:28px} #help-dialog .combat-help .new-fighter-credits{margin-top:16px;font-size:13px;line-height:1.7;color:var(--frost-muted,#32668f)} @media(max-width:600px){ #help-dialog .help-heading{padding:16px 18px 0 56px} #help-dialog .help-heading .dialog-close{left:0;top:12px} } /* 29.93 — one opening film, fading over the existing live menu. */ .opening-sequence{position:fixed;inset:0;z-index:10001;background:#000;opacity:1;isolation:isolate;overflow:hidden;transition:opacity 700ms ease;outline:none} .opening-sequence.is-fading{opacity:0;pointer-events:auto} .opening-sequence video{display:block;width:100%;height:100%;object-fit:contain;background:#000} .opening-skip,.opening-play{position:absolute;z-index:1;min-height:44px;border:1px solid #b9e8fc88;border-radius:4px;background:#071a36c9;color:#e4f8ff;font:400 14px "KF Rubik",Arial,sans-serif;padding:10px 17px;backdrop-filter:blur(5px)} .opening-skip{bottom:max(22px,env(safe-area-inset-bottom));left:max(22px,env(safe-area-inset-left));display:flex;gap:14px;align-items:center} .opening-play{top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;padding:14px 24px;white-space:nowrap} .opening-play:active:not(:disabled){transform:translate(-50%,-50%)} .opening-sequence.is-fading button{visibility:hidden} @media(prefers-reduced-motion:reduce){.opening-sequence{transition-duration:160ms}} /* 29.94 — explicit Continue gesture starts the scored film. */ .opening-ready{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:radial-gradient(ellipse at 50% 42%,#0b3155 0,#031328 48%,#01060f 100%);color:#e4f8ff;text-align:center;padding:70px 24px} .opening-ready>img{width:min(340px,68vw);height:auto;max-height:48dvh;object-fit:contain;filter:drop-shadow(0 0 20px #3d9ad344)} .opening-ready>p{font:400 18px "KF Rubik",Arial,sans-serif;color:#b9e8fc} .opening-ready .opening-play{position:static;transform:none;min-width:210px;min-height:54px;display:flex;align-items:center;justify-content:center;gap:50px;padding:13px 30px;border:2px solid #e4f8ff;border-radius:0;background:linear-gradient(#eafaff,#a5d8f1);color:#174a7e;box-shadow:0 0 0 3px #214f86,0 0 0 5px #91c9eb;font:500 21px "KF Rubik",Arial,sans-serif;clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%)} .opening-ready .opening-play:active:not(:disabled){transform:translateY(1px)} .opening-fullscreen{position:absolute;z-index:2;top:max(20px,env(safe-area-inset-top));right:max(22px,env(safe-area-inset-right));min-height:44px;display:flex;align-items:center;gap:10px;border:1px solid #b9e8fc99;border-radius:3px;padding:10px 15px;background:#d5f1ff;color:#174a7e;font:400 14px "KF Rubik",Arial,sans-serif} .opening-fullscreen>span:first-child{font-size:24px;line-height:1} @media(max-height:520px){.opening-ready{gap:10px;padding-block:45px}.opening-ready>img{max-height:42dvh;width:min(260px,55vw)}.opening-ready>p{font-size:15px}.opening-ready .opening-play{min-height:48px;font-size:18px}.opening-fullscreen{top:10px;right:12px}} /* Four independent directions keep jump and crouch available under one thumb. */ .battle-screen .touch-controls>.touch-move{grid-template-columns:repeat(3,var(--touch-size,48px))} .battle-screen .touch-move button:nth-child(1){grid-row:2;grid-column:1} .battle-screen .touch-move button:nth-child(2){grid-row:1;grid-column:2;justify-self:center} .battle-screen .touch-move button:nth-child(3){grid-row:2;grid-column:2} .battle-screen .touch-move button:nth-child(4){grid-row:2;grid-column:3} /* 30.09 — an independent cinematic matte sits above every battle HUD layer. */ #arena-frame>#lesson-cinema{position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none;image-rendering:auto} #arena-frame .hud,#arena-frame .arena-tools,#arena-frame .touch-controls{opacity:var(--lesson-ui-opacity,1)} #arena-frame.lesson-cinematic .arena-tools,#arena-frame.lesson-cinematic .touch-controls{visibility:hidden;pointer-events:none} /* Fullscreen flex centering must match the underlying 16:9 arena exactly. */ #arena-frame:fullscreen>#lesson-cinema{inset:50% auto auto 50%;width:min(100vw,177.777vh);height:auto;aspect-ratio:16/9;transform:translate(-50%,-50%)} /* 30.24 — approved simple pixel controls, including approved 30.23 font. */ html[data-button-style=pixel-simple]{ --pixel-hex-normal:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2060%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22crispEdges%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22p%22%3E%3Cpolygon%20points%3D%2224%2C2%20276%2C2%20276%2C6%20280%2C6%20280%2C10%20284%2C10%20284%2C14%20288%2C14%20288%2C18%20292%2C18%20292%2C22%20296%2C22%20296%2C26%20298%2C26%20298%2C34%20296%2C34%20296%2C38%20292%2C38%20292%2C42%20288%2C42%20288%2C46%20284%2C46%20284%2C50%20280%2C50%20280%2C54%20276%2C54%20276%2C58%2024%2C58%2024%2C54%2020%2C54%2020%2C50%2016%2C50%2016%2C46%2012%2C46%2012%2C42%208%2C42%208%2C38%204%2C38%204%2C34%202%2C34%202%2C26%204%2C26%204%2C22%208%2C22%208%2C18%2012%2C18%2012%2C14%2016%2C14%2016%2C10%2020%2C10%2020%2C6%2024%2C6%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url%28%23p%29%22%3E%3Crect%20width%3D%22300%22%20height%3D%2260%22%20fill%3D%22%23cceefc%22%2F%3E%3Crect%20width%3D%22300%22%20height%3D%224%22%20fill%3D%22%23effbff%22%2F%3E%3Crect%20y%3D%2253%22%20width%3D%22300%22%20height%3D%227%22%20fill%3D%22%23acd9ef%22%2F%3E%3C%2Fg%3E%3Cpolygon%20points%3D%2224%2C2%20276%2C2%20276%2C6%20280%2C6%20280%2C10%20284%2C10%20284%2C14%20288%2C14%20288%2C18%20292%2C18%20292%2C22%20296%2C22%20296%2C26%20298%2C26%20298%2C34%20296%2C34%20296%2C38%20292%2C38%20292%2C42%20288%2C42%20288%2C46%20284%2C46%20284%2C50%20280%2C50%20280%2C54%20276%2C54%20276%2C58%2024%2C58%2024%2C54%2020%2C54%2020%2C50%2016%2C50%2016%2C46%2012%2C46%2012%2C42%208%2C42%208%2C38%204%2C38%204%2C34%202%2C34%202%2C26%204%2C26%204%2C22%208%2C22%208%2C18%2012%2C18%2012%2C14%2016%2C14%2016%2C10%2020%2C10%2020%2C6%2024%2C6%22%20fill%3D%22none%22%20stroke%3D%22%234b83aa%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); --pixel-hex-hover:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2060%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22crispEdges%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22p%22%3E%3Cpolygon%20points%3D%2224%2C2%20276%2C2%20276%2C6%20280%2C6%20280%2C10%20284%2C10%20284%2C14%20288%2C14%20288%2C18%20292%2C18%20292%2C22%20296%2C22%20296%2C26%20298%2C26%20298%2C34%20296%2C34%20296%2C38%20292%2C38%20292%2C42%20288%2C42%20288%2C46%20284%2C46%20284%2C50%20280%2C50%20280%2C54%20276%2C54%20276%2C58%2024%2C58%2024%2C54%2020%2C54%2020%2C50%2016%2C50%2016%2C46%2012%2C46%2012%2C42%208%2C42%208%2C38%204%2C38%204%2C34%202%2C34%202%2C26%204%2C26%204%2C22%208%2C22%208%2C18%2012%2C18%2012%2C14%2016%2C14%2016%2C10%2020%2C10%2020%2C6%2024%2C6%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url%28%23p%29%22%3E%3Crect%20width%3D%22300%22%20height%3D%2260%22%20fill%3D%22%23edfaff%22%2F%3E%3Crect%20width%3D%22300%22%20height%3D%224%22%20fill%3D%22%23ffffff%22%2F%3E%3Crect%20y%3D%2253%22%20width%3D%22300%22%20height%3D%227%22%20fill%3D%22%23d2eefb%22%2F%3E%3C%2Fg%3E%3Cpolygon%20points%3D%2224%2C2%20276%2C2%20276%2C6%20280%2C6%20280%2C10%20284%2C10%20284%2C14%20288%2C14%20288%2C18%20292%2C18%20292%2C22%20296%2C22%20296%2C26%20298%2C26%20298%2C34%20296%2C34%20296%2C38%20292%2C38%20292%2C42%20288%2C42%20288%2C46%20284%2C46%20284%2C50%20280%2C50%20280%2C54%20276%2C54%20276%2C58%2024%2C58%2024%2C54%2020%2C54%2020%2C50%2016%2C50%2016%2C46%2012%2C46%2012%2C42%208%2C42%208%2C38%204%2C38%204%2C34%202%2C34%202%2C26%204%2C26%204%2C22%208%2C22%208%2C18%2012%2C18%2012%2C14%2016%2C14%2016%2C10%2020%2C10%2020%2C6%2024%2C6%22%20fill%3D%22none%22%20stroke%3D%22%2370add0%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); --pixel-hex-selected:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2060%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22crispEdges%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22p%22%3E%3Cpolygon%20points%3D%2224%2C2%20276%2C2%20276%2C6%20280%2C6%20280%2C10%20284%2C10%20284%2C14%20288%2C14%20288%2C18%20292%2C18%20292%2C22%20296%2C22%20296%2C26%20298%2C26%20298%2C34%20296%2C34%20296%2C38%20292%2C38%20292%2C42%20288%2C42%20288%2C46%20284%2C46%20284%2C50%20280%2C50%20280%2C54%20276%2C54%20276%2C58%2024%2C58%2024%2C54%2020%2C54%2020%2C50%2016%2C50%2016%2C46%2012%2C46%2012%2C42%208%2C42%208%2C38%204%2C38%204%2C34%202%2C34%202%2C26%204%2C26%204%2C22%208%2C22%208%2C18%2012%2C18%2012%2C14%2016%2C14%2016%2C10%2020%2C10%2020%2C6%2024%2C6%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url%28%23p%29%22%3E%3Crect%20width%3D%22300%22%20height%3D%2260%22%20fill%3D%22%2328608f%22%2F%3E%3Crect%20width%3D%22300%22%20height%3D%224%22%20fill%3D%22%236ca6cd%22%2F%3E%3Crect%20y%3D%2253%22%20width%3D%22300%22%20height%3D%227%22%20fill%3D%22%231c496e%22%2F%3E%3C%2Fg%3E%3Cpolygon%20points%3D%2224%2C2%20276%2C2%20276%2C6%20280%2C6%20280%2C10%20284%2C10%20284%2C14%20288%2C14%20288%2C18%20292%2C18%20292%2C22%20296%2C22%20296%2C26%20298%2C26%20298%2C34%20296%2C34%20296%2C38%20292%2C38%20292%2C42%20288%2C42%20288%2C46%20284%2C46%20284%2C50%20280%2C50%20280%2C54%20276%2C54%20276%2C58%2024%2C58%2024%2C54%2020%2C54%2020%2C50%2016%2C50%2016%2C46%2012%2C46%2012%2C42%208%2C42%208%2C38%204%2C38%204%2C34%202%2C34%202%2C26%204%2C26%204%2C22%208%2C22%208%2C18%2012%2C18%2012%2C14%2016%2C14%2016%2C10%2020%2C10%2020%2C6%2024%2C6%22%20fill%3D%22none%22%20stroke%3D%22%23a8d9f3%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); --pixel-utility-normal:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%2044%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22crispEdges%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22p%22%3E%3Cpolygon%20points%3D%226%2C1%20154%2C1%20154%2C3%20158%2C3%20158%2C7%20159%2C7%20159%2C37%20158%2C37%20158%2C41%20154%2C41%20154%2C43%206%2C43%206%2C41%202%2C41%202%2C37%201%2C37%201%2C7%202%2C7%202%2C3%206%2C3%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url%28%23p%29%22%3E%3Crect%20width%3D%22160%22%20height%3D%2244%22%20fill%3D%22%23cceefc%22%2F%3E%3Crect%20width%3D%22160%22%20height%3D%224%22%20fill%3D%22%23effbff%22%2F%3E%3Crect%20y%3D%2237%22%20width%3D%22160%22%20height%3D%227%22%20fill%3D%22%23acd9ef%22%2F%3E%3C%2Fg%3E%3Cpolygon%20points%3D%226%2C1%20154%2C1%20154%2C3%20158%2C3%20158%2C7%20159%2C7%20159%2C37%20158%2C37%20158%2C41%20154%2C41%20154%2C43%206%2C43%206%2C41%202%2C41%202%2C37%201%2C37%201%2C7%202%2C7%202%2C3%206%2C3%22%20fill%3D%22none%22%20stroke%3D%22%234b83aa%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); --pixel-utility-hover:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%2044%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22crispEdges%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22p%22%3E%3Cpolygon%20points%3D%226%2C1%20154%2C1%20154%2C3%20158%2C3%20158%2C7%20159%2C7%20159%2C37%20158%2C37%20158%2C41%20154%2C41%20154%2C43%206%2C43%206%2C41%202%2C41%202%2C37%201%2C37%201%2C7%202%2C7%202%2C3%206%2C3%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url%28%23p%29%22%3E%3Crect%20width%3D%22160%22%20height%3D%2244%22%20fill%3D%22%23edfaff%22%2F%3E%3Crect%20width%3D%22160%22%20height%3D%224%22%20fill%3D%22%23ffffff%22%2F%3E%3Crect%20y%3D%2237%22%20width%3D%22160%22%20height%3D%227%22%20fill%3D%22%23d2eefb%22%2F%3E%3C%2Fg%3E%3Cpolygon%20points%3D%226%2C1%20154%2C1%20154%2C3%20158%2C3%20158%2C7%20159%2C7%20159%2C37%20158%2C37%20158%2C41%20154%2C41%20154%2C43%206%2C43%206%2C41%202%2C41%202%2C37%201%2C37%201%2C7%202%2C7%202%2C3%206%2C3%22%20fill%3D%22none%22%20stroke%3D%22%2370add0%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); --pixel-utility-selected:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%2044%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22crispEdges%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22p%22%3E%3Cpolygon%20points%3D%226%2C1%20154%2C1%20154%2C3%20158%2C3%20158%2C7%20159%2C7%20159%2C37%20158%2C37%20158%2C41%20154%2C41%20154%2C43%206%2C43%206%2C41%202%2C41%202%2C37%201%2C37%201%2C7%202%2C7%202%2C3%206%2C3%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url%28%23p%29%22%3E%3Crect%20width%3D%22160%22%20height%3D%2244%22%20fill%3D%22%2328608f%22%2F%3E%3Crect%20width%3D%22160%22%20height%3D%224%22%20fill%3D%22%236ca6cd%22%2F%3E%3Crect%20y%3D%2237%22%20width%3D%22160%22%20height%3D%227%22%20fill%3D%22%231c496e%22%2F%3E%3C%2Fg%3E%3Cpolygon%20points%3D%226%2C1%20154%2C1%20154%2C3%20158%2C3%20158%2C7%20159%2C7%20159%2C37%20158%2C37%20158%2C41%20154%2C41%20154%2C43%206%2C43%206%2C41%202%2C41%202%2C37%201%2C37%201%2C7%202%2C7%202%2C3%206%2C3%22%20fill%3D%22none%22%20stroke%3D%22%23a8d9f3%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); --menu-button-blue:var(--pixel-hex-normal);--menu-button-gold:var(--pixel-hex-hover);--ui-button:var(--pixel-hex-normal); } html[data-button-style=pixel-simple] :is(.action,.text-button,.utility,.menu-fullscreen,.mode-picker button,.choose-side button,.control-guide-tabs button,.arena-tools button,.touch-controls button,.opening-play,.opening-fullscreen){ background:var(--pixel-hex-normal) center/100% 100% no-repeat!important; border:0!important;border-radius:0!important;box-shadow:none!important;clip-path:none!important; color:#174a7e!important;text-shadow:none!important;filter:none!important;backdrop-filter:none!important; image-rendering:pixelated;outline-offset:3px;font-family:"KF Rubik",Arial,sans-serif;font-weight:500; transition:color .1s,transform .1s!important; } html[data-button-style=pixel-simple] :is(.utility,.menu-fullscreen,.arena-tools button,.touch-controls button,.opening-fullscreen,.control-guide-tabs button){background-image:var(--pixel-utility-normal)!important;} html[data-button-style=pixel-simple] :is(.action,.text-button,.utility,.menu-fullscreen,.mode-picker button,.choose-side button,.control-guide-tabs button,.arena-tools button,.touch-controls button,.opening-play,.opening-fullscreen):is(:hover,:focus-visible):not(:disabled){background-image:var(--pixel-hex-hover)!important;} html[data-button-style=pixel-simple] :is(.utility,.menu-fullscreen,.arena-tools button,.touch-controls button,.opening-fullscreen,.control-guide-tabs button):is(:hover,:focus-visible):not(:disabled){background-image:var(--pixel-utility-hover)!important;} html[data-button-style=pixel-simple] :is(.action,.text-button,.utility,.menu-fullscreen,.mode-picker button,.choose-side button,.control-guide-tabs button,.arena-tools button,.touch-controls button,.opening-play,.opening-fullscreen):is([aria-pressed=true],.held):not(:disabled){background-image:var(--pixel-hex-selected)!important;color:#fff!important;} html[data-button-style=pixel-simple] :is(.utility,.menu-fullscreen,.arena-tools button,.touch-controls button,.opening-fullscreen,.control-guide-tabs button):is([aria-pressed=true],.held):not(:disabled){background-image:var(--pixel-utility-selected)!important;color:#fff!important;} html[data-button-style=pixel-simple] :is(.action,.text-button,.utility,.menu-fullscreen,.mode-picker button,.choose-side button,.control-guide-tabs button,.arena-tools button,.touch-controls button,.opening-play,.opening-fullscreen):active:not(:disabled){translate:0 1px;} html[data-button-style=pixel-simple] :is(.action,.text-button,.utility,.menu-fullscreen,.mode-picker button,.choose-side button,.control-guide-tabs button,.arena-tools button,.touch-controls button,.opening-play,.opening-fullscreen):disabled{opacity:.45;cursor:not-allowed;} html[data-button-style=pixel-simple] :is(.action,.text-button,.utility,.menu-fullscreen,.mode-picker button,.choose-side button,.control-guide-tabs button,.arena-tools button,.touch-controls button,.opening-play,.opening-fullscreen):focus-visible{outline:2px solid #fff!important;} html[data-button-style=pixel-simple] :is(#help-dialog,#pause-dialog) :is(.action,.text-button,.utility,.menu-fullscreen,.mode-picker button,.choose-side button,.control-guide-tabs button,.arena-tools button,.touch-controls button,.opening-play,.opening-fullscreen):focus-visible{outline-color:#174a7e!important;} html[data-button-style=pixel-simple] .opening-ready .opening-play{padding-inline:30px;gap:38px;min-height:54px;} html[data-button-style=pixel-simple] #select-screen .fighter-card .card-name{background:#cceefc!important;border:0;color:#174a7e!important;text-shadow:none;} html[data-button-style=pixel-simple] #select-screen .fighter-card[aria-pressed=true] .card-name{background:#28608f!important;color:#fff!important;} @media(prefers-reduced-motion:reduce){html[data-button-style=pixel-simple] :is(.action,.text-button,.utility,.menu-fullscreen,.mode-picker button,.choose-side button,.control-guide-tabs button,.arena-tools button,.touch-controls button,.opening-play,.opening-fullscreen){transition:none!important;}} @font-face{font-family:"Knesset Pixel Soft";src:url('./assets/fonts/knesset-pixel-soft-30.23.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap} html[data-button-style=pixel-simple] :is(.action,.text-button,.utility,.menu-fullscreen,.mode-picker button,.choose-side button,.control-guide-tabs button,.arena-tools button,.touch-controls button,.opening-play,.opening-fullscreen){font-family:"Knesset Pixel Soft","KF Rubik",Arial,sans-serif!important;font-weight:400!important;font-synthesis:none;letter-spacing:0!important;line-height:1.4} html[data-button-style=pixel-simple] .opening-ready>p{font-family:"Knesset Pixel Soft","KF Rubik",Arial,sans-serif;font-size:24px;line-height:1.5} html[data-button-style=pixel-simple] .opening-ready .opening-play{font-size:28px;line-height:1.4} html[data-button-style=pixel-simple] #menu-screen .menu-actions .action{font-size:clamp(15px,2vw,20px);line-height:1.4} html[data-button-style=pixel-simple] :is(#start,#help-done,#pause-dialog .action){font-size:clamp(16px,2vw,22px);line-height:1.4} html[data-button-style=pixel-simple] :is(.mode-picker,.choose-side) button{padding-inline:16px} html[data-button-style=pixel-simple] :is(.mode-picker,.choose-side) button[aria-pressed=true] :is(span,b){color:inherit} html[data-button-style=pixel-simple] .action .button-end{color:inherit;text-shadow:none} @media(max-height:520px){html[data-button-style=pixel-simple] .opening-ready>p{font-size:20px}html[data-button-style=pixel-simple] .opening-ready .opening-play{min-height:48px;font-size:24px;gap:28px}} /* 30.25 — pixel typography throughout supporting copy; existing headings retained. */ html[data-button-style=pixel-simple]{--body-font:"Knesset Pixel Soft","KF Rubik",Arial,sans-serif} html[data-button-style=pixel-simple] :where(body,body *):not(:is(h1,h2,h3,h4,h5,h6,[role=heading],.arena-overlay>strong,.special-card strong)):not(:is(h1,h2,h3,h4,h5,h6,[role=heading],.arena-overlay>strong,.special-card strong) *){font-family:var(--body-font)!important;font-weight:400!important;font-synthesis:none} /* These compact labels are headings, despite sharing body-font variables in older CSS. */ html[data-button-style=pixel-simple] .special-card strong{font-family:"KF Rubik",Arial,sans-serif!important} html[data-button-style=pixel-simple] #overlay-title.countdown-number{font-family:"KF Rubik",Arial,sans-serif!important} html[data-button-style=pixel-simple] #select-screen .fighter-card .card-name{padding-inline:2px;white-space:nowrap} html[data-button-style=pixel-simple] .battle-screen .super-label{font-size:1.05cqw;line-height:1.3} html[data-button-style=pixel-simple] #help-dialog .keyboard-map{font-family:var(--body-font)} /* 30.26 — compact roster name strips reveal the avatars underneath. */ html[data-button-style=pixel-simple] #select-screen .fighter-card .card-name{min-height:0;height:auto;padding:2px 2px;font-size:clamp(8px,.8vw,12px);line-height:1.15;bottom:0;left:1px;right:1px} html[data-button-style=pixel-simple] body[data-mode=boss] #select-screen .fighter-card .card-name{min-height:clamp(14px,1.2cqw,20px);padding:1px 2px;font-size:clamp(8px,.72cqw,12px);line-height:1.15;bottom:0;left:1px;right:1px} @media(max-width:650px) and (orientation:portrait){ html[data-button-style=pixel-simple] #select-screen .fighter-card .card-name{font-size:10px;padding:2px 2px;min-height:0} html[data-button-style=pixel-simple] body[data-mode=boss] #select-screen .fighter-card .card-name{font-size:clamp(9px,2.4cqw,12px);padding:2px 2px;min-height:0} } /* Real family weights, matched by the native font engine. */ @font-face{font-family:"Knesset Pixel Soft";src:url('./assets/fonts/knesset-pixel-soft-medium-30.26.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Knesset Pixel Soft";src:url('./assets/fonts/knesset-pixel-soft-semibold-30.26.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Knesset Pixel Soft";src:url('./assets/fonts/knesset-pixel-soft-bold-30.26.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap} html[data-button-style=pixel-simple] #select-screen :is(.preview-copy h2,.preview-copy .special-card strong){font-family:"Knesset Pixel Soft","KF Rubik",Arial,sans-serif!important;font-weight:700!important;font-synthesis:none;line-height:1.35} html[data-button-style=pixel-simple] #select-screen .fighter-card .card-name{font-weight:500!important} /* 30.27 — shared breathing room in every character information panel. */ html[data-button-style=pixel-simple] #select-screen :is(.preview-copy h2,.preview-copy .special-card strong){letter-spacing:.04em;word-spacing:.08em} /* 30.36: Slightly smaller confirmation label in normal and boss selection. */ html[data-button-style=pixel-simple] #select-screen #start{font-size:clamp(15px,1.8vw,20px)} /* 30.36: Center roster labels inside the compact cyan strip in both modes. */ html[data-button-style=pixel-simple] #select-screen .fighter-card .card-name{ display:flex;align-items:center;justify-content:center;text-align:center; height:calc(1.15em + 4px);padding:0 2px;line-height:1;margin:0; } html[data-button-style=pixel-simple] body[data-mode=boss] #select-screen .fighter-card .card-name{ height:clamp(14px,1.2cqw,20px);padding:0 2px;line-height:1; } @media(max-width:650px) and (orientation:portrait){ html[data-button-style=pixel-simple] body[data-mode=boss] #select-screen .fighter-card .card-name{height:calc(1.15em + 4px)} } /* 30.39: Slight breathing room for every small avatar name. */ html[data-button-style=pixel-simple] #select-screen .fighter-card .card-name{ letter-spacing:.035em;word-spacing:.06em; } /* 30.39: Button and arena labels use the approved pixel family, including h2 labels. */ html[data-button-style=pixel-simple] :is(button,[role=button]) :is(h1,h2,h3,h4,h5,h6), html[data-button-style=pixel-simple] #roulette-screen .arena-card h2{ font-family:"Knesset Pixel Soft","KF Rubik",Arial,sans-serif!important; font-weight:500!important;font-synthesis:none; } /* 30.42 — compact pause card without the redundant English heading. */ #pause-dialog{padding-top:28px;padding-bottom:28px} #pause-dialog .pause-actions{margin-top:0} @media(max-width:600px),(max-height:600px){#pause-dialog{padding-top:22px;padding-bottom:22px}} /* 30.46 — still HUD portrait backplates, without the moving diagonal texture. */ .battle-screen .hud-portrait::before{animation:none;background:radial-gradient(ellipse at 50% 25%,#0758b9,#020a31 85%);background-size:auto} html[data-ui-theme=frost] #battle-screen .hud-portrait::before{animation:none;background:radial-gradient(ellipse at 50% 25%,#91C9EB,#214F86 85%);background-size:auto} /* 30.50 — match both information labels and loosen every special-move name. */ #select-screen .preview-copy .special-card>small{border-bottom:1px solid #158ede66;padding-bottom:5px;margin-bottom:5px} html[data-ui-theme=frost] #select-screen .preview-copy .special-card>small{border-bottom-color:#5E9BC766} html[data-button-style=pixel-simple] #select-screen .preview-copy .special-card>strong{display:block;letter-spacing:.07em;word-spacing:.12em} /* 30.54 — keep scrolling available without visible browser scrollbar chrome. */ html,body,body *{scrollbar-width:none;-ms-overflow-style:none} html::-webkit-scrollbar,body::-webkit-scrollbar,body *::-webkit-scrollbar{display:none;width:0;height:0} /* 30.55 — character names identify the HUD sides; remove tiny role badges. */ #battle-screen .health-heading .player-tag{display:none!important} /* Approved special-meter sprite effect30.62; health bars/portraits/timer retain their layout. */ .special-meter-vfx{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none} #battle-screen .energy-track.special-meter-charged{animation:specialMeterMicroshake .24s linear infinite;filter:drop-shadow(0 0 3px #32d9ff);will-change:transform} #battle-screen .energy-track.special-meter-frozen{animation-play-state:paused} @keyframes specialMeterMicroshake{0%,100%{transform:translate(0,0)}12%{transform:translate(-.7px,.3px)}25%{transform:translate(.8px,-.4px)}37%{transform:translate(-.5px,-.3px)}50%{transform:translate(.7px,.4px)}62%{transform:translate(-.8px,0)}75%{transform:translate(.5px,-.4px)}87%{transform:translate(-.3px,.3px)}} @media(prefers-reduced-motion:reduce){#battle-screen .energy-track.special-meter-charged{animation:none}} /* Approved horizontal arcade logo31.27; same art in ready/loading/menu states. */ .opening-ready>img{width:min(640px,86vw);aspect-ratio:3/1;max-height:40dvh} @media(max-height:520px){.opening-ready>img{width:min(500px,80vw);max-height:35dvh}} /* Retain the menu column and logo width, while reserving enough vertical space for its 2x draw. */ #menu-screen .menu-content #menu-title{margin:56px auto} @media(max-width:600px),(max-height:600px){#menu-screen .menu-content #menu-title{margin:44px auto}} /* 31.28 — clean, viewport-fitted instructions and audio controls in pause. */ html[data-button-style=pixel-simple] body[data-mode=boss] #select-screen #select-title, html[data-button-style=pixel-simple] #help-dialog #help-title{ font-family:"Knesset Pixel Soft","KF Rubik",Arial,sans-serif!important;font-weight:700!important;font-synthesis:none;letter-spacing:.025em; } #help-dialog.help-dialog{width:min(1120px,calc(100vw - 24px));height:min(800px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);padding:24px;overflow:hidden;overscroll-behavior:none;scrollbar-gutter:auto} #help-dialog .help-heading{position:relative;min-height:48px;padding:0 64px 0 0;flex:0 0 auto} #help-dialog .help-heading #help-title{font-size:clamp(24px,3vw,36px);line-height:1.25;margin:0} #help-dialog .help-heading .dialog-close{top:0;left:0;right:auto;width:44px;height:44px} #help-dialog .help-scroll{display:flex;flex-direction:column;min-height:0;overflow:hidden;overscroll-behavior:none;scrollbar-gutter:auto;padding:0;flex:1} #help-dialog #help-controls{display:flex;flex-direction:column;min-height:0;height:100%;margin:6px 0 0} #help-dialog .control-guide-tabs{flex:0 0 auto;flex-wrap:nowrap;margin:0 0 10px;gap:8px} #help-dialog .control-guide-tabs button{min-height:44px} #help-dialog #help-controls>.keyboard-scroll{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:hidden;direction:ltr} #help-dialog .keyboard-map{width:100%;height:100%;min-width:0;max-height:100%;flex:1} #help-dialog #help-controls>.control-legend{display:flex;flex:0 0 auto;justify-content:center;gap:8px 16px;margin:10px 0 0} #help-dialog #help-done{flex:0 0 auto;min-height:44px;height:44px;margin:10px auto 0;font-size:18px} #pause-dialog .audio-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 0} #pause-dialog .audio-options .utility{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;width:100%;padding:8px;font-size:16px} /* Small or short displays show the same bindings as compact key cards. */ @media(max-width:760px),(max-height:600px){ #help-dialog.help-dialog{height:min(700px,calc(100dvh - 24px));padding:12px} #help-dialog .help-heading{padding:0 52px 0 0;min-height:44px} #help-dialog .help-heading #help-title{font-size:24px} #help-dialog #help-controls{margin:2px 0 0} #help-dialog .control-guide-tabs{gap:6px;margin-bottom:6px} #help-dialog .control-guide-tabs button{min-width:0;flex:1;min-height:44px;padding:6px;font-size:15px} #help-dialog #help-controls>.keyboard-scroll{display:none} #help-dialog #help-controls>.control-legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:center;flex:1;gap:6px;margin:0} #help-dialog .control-legend-item{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;padding:5px 3px;border:1px solid #8ab6d4;background:#ffffff55;border-radius:4px;font-size:14px} #help-dialog .control-legend-item>span{justify-content:center;gap:2px;white-space:nowrap} #help-dialog .control-legend-item kbd{min-width:22px;height:24px;padding:0 3px;font-size:12px} #help-dialog #help-done{margin-top:6px} } @media(max-width:650px) and (orientation:portrait){ #help-dialog #help-controls>.control-legend{grid-template-columns:repeat(2,minmax(0,1fr))} } /* 31.30 — game interaction surfaces must not select text or open long-press callouts. */ html,body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} img,svg,canvas,video{-webkit-user-drag:none} /* 31.31 — purpose-drawn pixel glyphs, independent of fallback fonts. */ .pixel-control-icon{display:block;width:20px;height:20px;flex:0 0 auto;image-rendering:pixelated;shape-rendering:crispEdges;pointer-events:none} .arena-tools #fullscreen,.arena-tools #pause{display:flex;align-items:center;justify-content:center} /* Keep the help heading and footer inside the ornamental corner brackets. */ #help-dialog.help-dialog{padding:40px clamp(44px,4vw,60px) 40px} #help-dialog .help-heading{min-height:64px;padding:8px 76px 0 64px} #help-dialog .help-heading .dialog-close{left:16px;top:8px} #help-dialog #help-done{margin-top:16px} @media(max-width:760px),(max-height:600px){ #help-dialog.help-dialog{padding:clamp(18px,5dvh,28px) clamp(24px,4vw,44px)} #help-dialog .help-heading{min-height:48px;padding:8px 32px 0 56px} #help-dialog .help-heading .dialog-close{left:8px;top:4px} #help-dialog #help-done{margin-top:8px} } @media(max-height:360px){ #help-dialog .control-legend-item{padding:3px;font-size:13px;gap:2px} #help-dialog .control-legend-item kbd{height:22px;font-size:11px} } /* 31.35 — Gantz retires: a wider two-word result and a quiet ending. */ #arena-frame.fight-cancelled .touch-controls{display:none!important} #arena-frame.fight-cancelled .arena-overlay>.result-art{width:min(58cqw,680px);max-height:22cqw} /* 31.37 — preserve all HUD slots when Gantz's panel is hidden. */ .battle-screen .hud>.health-panel.player{grid-column:1;grid-row:1} .battle-screen .hud>.timer-block{grid-column:2;grid-row:1} .battle-screen .hud>.health-panel.cpu{grid-column:3;grid-row:1} /* 31.38 — custom pixel heading on the arena draw. */ html[data-button-style=pixel-simple] #roulette-screen #roulette-name{ font-family:"Knesset Pixel Soft","KF Rubik",Arial,sans-serif!important; font-weight:700!important;font-synthesis:none;letter-spacing:.025em; } /* 31.39 — two help modes, with player two consistently purple. */ #help-dialog .help-heading{padding-right:16px} #help-dialog .help-heading #help-title{text-align:right} #help-dialog .control-guide-tabs button{white-space:normal} .keyboard-key.is-player-two.is-active .key-base{fill:#472373;stroke:#472373} .keyboard-key.is-player-two.is-active .key-top{fill:#70439D;stroke:#FFFFFF;stroke-width:2} .keyboard-key.is-player-two.is-active text{fill:#FFFFFF} .keyboard-key.is-player-two.is-special .key-top{fill:#D8B9F7;stroke:#70439D} .keyboard-key.is-player-two.is-special text{fill:#472373} .keyboard-callout.is-player-two path{stroke:#9461BD} .keyboard-callout.is-player-two circle{fill:#B688DC} .keyboard-callout.is-player-two rect{fill:#F7F0FF;stroke:#CEB7E6} .keyboard-callout.is-player-two text{fill:#70439D} #help-dialog .control-legend-group{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;width:100%} #help-dialog .control-player-label{color:#214F86;font-size:14px;white-space:nowrap} #help-dialog .is-player-two :is(.control-player-label,.control-legend-item,.control-legend-item strong){color:#70439D} html[data-ui-theme=frost] #help-dialog .is-player-two kbd{color:#70439D;border-color:#9461BD;background:#F7F0FF} @media(max-width:760px),(max-height:600px){ #help-dialog .help-heading{padding-right:8px} #help-dialog #help-controls>.control-legend.is-versus{display:flex;flex-direction:column;gap:6px} #help-dialog .control-legend-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;flex:1;align-content:center} #help-dialog .control-player-label{grid-column:1/-1;text-align:right;font-size:13px} #help-dialog .is-versus .control-legend-item{font-size:13px;padding:3px} } /* 31.42 — native countdown lettering, matching the result graphics. */ .battle-screen .arena-overlay>.countdown-art{display:block;width:min(44cqw,525px);height:auto;aspect-ratio:3/2;margin:0 auto;image-rendering:pixelated;filter:drop-shadow(0 .4cqw .3cqw #0008);pointer-events:none} /* 31.48 — approved royal-blue / white HUD31.47, rendered from real match data. */ #battle-screen .hud{visibility:hidden;pointer-events:none} #arena-frame>.royal-hud{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;image-rendering:pixelated;opacity:var(--lesson-ui-opacity,1)} #arena-frame:fullscreen>.royal-hud{inset:50% auto auto 50%;width:min(100vw,177.777vh);height:auto;aspect-ratio:16/9;transform:translate(-50%,-50%)} #battle-screen #arena-frame .arena-tools{bottom:1.6cqw;gap:.625cqw;z-index:7} html[data-button-style=pixel-simple] #battle-screen #arena-frame .arena-tools :is(#fullscreen,#pause){ width:3.96cqw;height:3.13cqw;min-width:38px;min-height:32px;padding:0!important; border:0!important;border-radius:0!important;box-shadow:none!important;clip-path:none!important; color:#073bff!important;background-color:transparent!important; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2032%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M5%205H35L39%209V25L35%2030H5L1%2026V9Z%22%20fill%3D%22%2301072d%22%2F%3E%3Cpath%20d%3D%22M5%203H35L39%207V24L35%2028H5L1%2024V7Z%22%20fill%3D%22%23073bff%22%2F%3E%3Cpath%20d%3D%22M5%201H35L39%205V22L35%2026H5L1%2022V5Z%22%20fill%3D%22%23073bff%22%2F%3E%3Cpath%20d%3D%22M5%203H35L37%206V20L34%2023H6L3%2020V6Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M5%2020H35V22H5Z%22%20fill%3D%22%23c7f6ff%22%2F%3E%3Cpath%20d%3D%22M5%2026H35V27H5Z%22%20fill%3D%22%2300dbff%22%2F%3E%3C%2Fsvg%3E")!important; background-repeat:no-repeat!important;background-position:center!important;background-size:100% 100%!important; display:flex;align-items:center;justify-content:center;filter:none;} #battle-screen #arena-frame .arena-tools .pixel-control-icon{width:1.667cqw;height:1.667cqw;min-width:16px;min-height:16px;max-width:30px;max-height:30px;color:#073bff;transform:translateY(-.2cqw)} html[data-button-style=pixel-simple] #battle-screen #arena-frame .arena-tools :is(#fullscreen,#pause):hover{filter:brightness(1.1)} html[data-button-style=pixel-simple] #battle-screen #arena-frame .arena-tools :is(#fullscreen,#pause):active{translate:0 2px}