:root{color-scheme:dark;--gold:#ffcf62;--mint:#7ff7db;--muted:#a9accd}*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:#080b18;color:#fff;font-family:Arial,Helvetica,sans-serif}body{display:flex;align-items:center;justify-content:center;min-height:100dvh;flex-direction:column;overflow-x:hidden;background:radial-gradient(ellipse at 50% 35%,#1c2544,#080b18 70%)}button,input,select{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border:0}button:focus-visible,a:focus-visible,canvas:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--mint);outline-offset:-3px}#game{width:min(100vw,calc(100dvh - 28px),800px);aspect-ratio:1;position:relative;overflow:hidden;background:#100e27;box-shadow:0 0 0 1px #59648c66,0 24px 90px #0009;isolation:isolate;container-type:inline-size}canvas{width:100%;height:100%;display:block;touch-action:none}.hidden{display:none!important}#top{position:absolute;top:2%;left:4%;right:4%;display:flex;align-items:center;gap:6px;z-index:6}.badge{flex:1;font-size:clamp(12px,3cqw,22px);font-weight:900;font-style:italic;letter-spacing:-.4px;color:var(--gold)}.badge small{display:block;font-size:clamp(6px,1.2cqw,9px);font-style:normal;letter-spacing:1px;color:#b4bfdb;margin-top:3px}#top button,.icon-button{min-width:40px;min-height:38px;padding:7px;background:#18233bee;border:1px solid #506588;border-radius:8px;font-size:11px;font-weight:bold}#pause{font-size:18px!important}#sound[aria-pressed=true]{color:var(--mint)}.volume-control{display:flex;gap:4px;align-items:center;font-size:8px;font-weight:bold;color:#b5c7df;background:#18233bee;border:1px solid #506588;border-radius:8px;padding:0 6px;min-height:38px}#volume{width:48px;height:34px;margin:0;accent-color:var(--mint)}.overlay{position:absolute;inset:0;padding:5%;display:flex;flex-direction:column;align-items:center;justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(150deg,#11152bee,#0c1024fa);text-align:center;z-index:4}.overlay>*{flex-shrink:0}.eyebrow{font-size:clamp(8px,1.7cqw,12px);font-weight:800;letter-spacing:2px;color:var(--mint)}h1{font-size:clamp(58px,19cqw,142px);font-style:italic;line-height:.8;letter-spacing:-.075em;margin:7% 0 4%;transform:rotate(-5deg);color:#fff0ca;text-shadow:4px 5px 0 #aa3e76,8px 10px 0 #262a55;animation:title-bob 4s ease-in-out infinite}h1 span{color:var(--gold)}h2{font-size:clamp(25px,7cqw,54px);color:var(--gold);font-style:italic;letter-spacing:-1px;line-height:1.05;margin:20px 0}.subtitle{font-size:clamp(12px,2.7cqw,20px);color:#d9d9ef;margin:4% 0 6%}.primary{width:100%;min-height:44px;border-radius:8px;padding:12px 18px;background:linear-gradient(115deg,#ffe8a6,#ffbc48);box-shadow:0 4px 0 #8a5235,0 8px 24px #0003;border:1px solid #ffe499;color:#241b2c;font-size:clamp(13px,3cqw,22px);font-weight:900;letter-spacing:.5px}.primary span{float:right}.title-screen .primary{max-width:80%}.title-screen{background:radial-gradient(ellipse at 65% 45%,#36556c33,transparent 60%),linear-gradient(150deg,#13152ddc,#0c1024f5)}.title-orbit{position:absolute;border:1px solid #668bac30;width:115%;height:38%;border-radius:50%;transform:rotate(-28deg);pointer-events:none;z-index:-1}.orbit-one{box-shadow:0 0 55px #65e5ce0c;animation:orbit 18s linear infinite}.orbit-two{transform:rotate(33deg);width:130%;height:65%;border-color:#e2a34920}.rules{font-size:clamp(9px,2cqw,14px);color:var(--muted);line-height:1.4;margin:6% 0 0}.footnote{font-size:clamp(8px,1.5cqw,11px);color:#8897b6;margin-top:4%}.select-screen{padding:3.5% 4%;justify-content:flex-start;gap:2%}.selection-header{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left}.selection-header h2{font-size:clamp(17px,4.4cqw,34px);margin:4px 0 0}.selection-header .eyebrow{font-size:clamp(7px,1.4cqw,10px)}.selection-tabs{display:flex;width:100%;gap:6px}.selection-tabs button{flex:1;min-height:32px;border-radius:6px;background:#1a223b;color:#9faecc;border:1px solid #3d4864;font-size:clamp(9px,2cqw,14px);font-weight:bold}.selection-tabs .active{color:var(--mint);border-color:var(--mint);background:#1a3b43}.select-body{display:flex;width:100%;gap:3%;height:43%}.choose{width:62%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,1fr);gap:5px}.choose button{--fighter-accent:#95ffe0;min-width:0;position:relative;display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid #424b68;border-radius:6px;background:linear-gradient(135deg,#27304d,#192139);text-align:left}.choose .portrait{width:25%;height:90%;display:flex;align-items:center;justify-content:center;color:var(--fighter-accent);font-style:italic;font-size:clamp(10px,2.6cqw,19px);font-weight:900;background:#080d1f66;border-radius:4px}.choose b{font-size:clamp(8px,1.9cqw,14px);overflow-wrap:anywhere}.choose button.selected{border-color:var(--fighter-accent);box-shadow:inset 3px 0 var(--fighter-accent);background:#34405d}.choose button.opponent:after{content:'CPU';position:absolute;right:2px;bottom:1px;color:#ffb5c7;font-size:6px}.fighter-preview{width:35%;min-width:0;border-radius:10px;border:1px solid #3f4967;background:radial-gradient(ellipse at 50% 42%,#42576866,#10152c);overflow:hidden;display:flex;flex-direction:column;align-items:center}.fighter-preview canvas{height:70%;width:100%;object-fit:contain}.fighter-preview h3{font-size:clamp(10px,2.4cqw,18px);margin:0 0 5%;text-transform:uppercase;letter-spacing:.5px}#stats{width:82%;display:flex;flex-direction:column;gap:3px}.stat{display:flex;align-items:center;gap:5px;font-size:clamp(6px,1.2cqw,9px);text-transform:uppercase;color:#c4cce1}.stat span{width:42%;text-align:left}.stat i{flex:1;height:4px;background:#ffffff17;border-radius:2px;overflow:hidden}.stat em{height:100%;display:block;background:var(--mint)}.move-card{width:100%;background:#16243a;border-left:3px solid var(--mint);border-radius:4px;text-align:left;padding:2% 3%;min-height:12%}.move-card>b{font-size:clamp(9px,2.2cqw,16px);color:var(--mint);letter-spacing:.5px}.move-card p{font-size:clamp(8px,1.9cqw,13px);line-height:1.35;color:#c5cee2;margin:4px 0 0}.match-options{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:clamp(7px,1.5cqw,11px);font-weight:bold;color:#98abc8;gap:5px}.match-options label{display:flex;align-items:center;gap:5px}.match-options select{border:1px solid #4c5d7c;border-radius:5px;color:#e5edff;background:#1a2840;padding:5px;font-size:clamp(9px,1.8cqw,13px)}.keys{display:flex;justify-content:center;flex-wrap:wrap;gap:3px 10px;font-size:clamp(7px,1.55cqw,11px);line-height:1.4;color:#a4b4ce}.keys b{color:#e8e9fa}.select-screen .primary{min-height:38px;padding:9px 15px}.secondary{min-height:40px;margin-top:18px;padding:10px 18px;background:#22314b;border:1px solid #5a6b8d;border-radius:7px;font-size:12px;color:#dbe2f1}.pause-actions{display:flex;gap:12px}.versus-names{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:12%;font-size:clamp(24px,7cqw,52px);font-style:italic;font-weight:900}.versus-names em{color:var(--gold);font-size:70%}#countdown{font-size:clamp(60px,20cqw,140px);color:var(--mint);font-weight:900;margin-top:4%}#result-text{font-size:clamp(12px,2.8cqw,18px);line-height:1.5;color:#b7c5de;max-width:32ch;margin:0 0 25px}#touch{position:absolute;bottom:2%;left:3%;right:3%;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;user-select:none;-webkit-user-select:none;touch-action:none;z-index:2}#touch>div{display:flex;gap:5px}#touch button{width:clamp(36px,9cqw,64px);height:clamp(44px,10cqw,70px);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;padding:3px;background:linear-gradient(145deg,#263a58ef,#142137ef);border:1px solid #6985a1;border-bottom:3px solid #080f21;border-radius:10px;color:#bcd1eb;font-size:clamp(19px,4cqw,28px);touch-action:none}#touch small{font-size:clamp(6px,1.45cqw,10px);font-weight:bold;margin-top:4px}#touch button[data-key=special]{color:var(--gold);background:linear-gradient(145deg,#604e3c,#352936);border-color:#c69756}#touch button[data-key=block]{color:var(--mint)}#touch button.active{background:#668bb1;transform:translateY(2px);color:#06152b}#full{display:flex;align-items:center;justify-content:center;min-height:28px;padding:5px 12px;font-size:10px;color:#8a9fbf;text-decoration:none}#diagnostic{position:absolute;bottom:0;left:0;background:#000;color:#0f0;font:9px monospace;z-index:8;pointer-events:none}@keyframes title-bob{50%{transform:rotate(-3deg) translateY(-6px)}}@keyframes orbit{to{transform:rotate(332deg)}}@media(hover:hover){button:hover{filter:brightness(1.16)}#full:hover{color:#fff}}@container(max-width:380px){#top{gap:4px;left:3%;right:3%}.badge small{font-size:6px}#top button{min-width:34px;min-height:34px;padding:5px;font-size:9px}.volume-control{min-height:34px;padding:0 3px}#volume{width:37px;height:30px}.selection-tabs button{min-height:27px}.selection-header .icon-button{min-width:30px;min-height:30px}.select-screen{gap:1.5%}.select-body{height:41%}.choose{gap:3px}.choose button{gap:3px;padding:3px}.select-screen .primary{min-height:34px;padding:7px 12px}.move-card{min-height:13%}.match-options select{padding:3px}#touch{gap:5px;left:2%;right:2%}#touch>div{gap:3px}#touch button{width:11cqw;min-width:31px;height:44px;border-radius:7px}.keys{gap:2px 7px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

#menu-sound{background:#1d3645;border:1px solid #558f91;color:var(--mint);border-radius:5px;min-height:28px;font-size:clamp(8px,1.6cqw,12px);font-weight:800;padding:4px 6px}.choose canvas.portrait{object-fit:cover;width:27%;height:100%;min-height:0;flex-shrink:0}

.stat .rating-1{width:20%}.stat .rating-2{width:40%}.stat .rating-3{width:60%}.stat .rating-4{width:80%}.stat .rating-5{width:100%}
/* Seven bounded rows keep the full matchup flow on a 480px embed. */
.select-screen{display:grid;grid-template-rows:8% 7% 39% 12% 7% 10% 7%;gap:1.65%;align-items:stretch;padding:3% 4%}.select-screen>*{min-height:0}.select-body{height:100%}.selection-header h2{font-size:clamp(17px,4cqw,30px)}.selection-tabs button{min-height:0}.move-card{min-height:0;padding:2% 3%}.select-screen .primary{min-height:0;padding:6px 14px}.keys{align-content:center}.select-screen .selection-header .icon-button{min-height:28px}.fighter-preview canvas{min-height:0}
@container(max-width:380px){.select-screen{gap:1.65%;padding:3% 4%}.select-body{height:100%}.move-card{min-height:0}.select-screen .primary{min-height:0}.selection-tabs button{min-height:0}.move-card p{font-size:8px;margin-top:2px}.match-options{font-size:6px}.match-options select{font-size:8px}#menu-sound{min-height:22px}}