:root { --cream:#fff3d8; --gold:#ffce55; --night:#0b0c23; --purple:#6b36ad; --teal:#63f3dc; --rose:#ff4d88; }
* {box-sizing:border-box}
html, body {margin:0; padding:0; background:var(--night); color:var(--cream); font-family: "Arial Black", "Trebuchet MS", Arial, sans-serif; overflow-x:hidden}
body {min-height:100vh; background:radial-gradient(ellipse at 48% 0%,#37215c 0,#131330 52%,#0a0c20 100%)}
body:before {content:"";position:fixed;inset:0;opacity:.095;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 4px,rgba(255,255,255,.4) 5px)}
button {cursor:pointer; font:inherit; color:inherit; touch-action:manipulation}
button:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
button:hover{filter:brightness(1.12)}
.app {max-width:1480px;padding:18px 25px 25px;margin:auto}
.topline,.lowerline{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:61px}
.top-brand {display:flex;align-items:center;gap:13px}
.brand-symbol {font-size:20px;color:var(--night);background:var(--gold);border:3px solid #ffde83;box-shadow:5px 5px 0 #050615;transform:rotate(-5deg);padding:8px 10px;line-height:1;position:relative}
.bolt{color:var(--rose);position:absolute;font-size:14px;right:-10px;top:-10px}
.brand-copy{display:flex;flex-direction:column;gap:2px;letter-spacing:1.8px}
.brand-copy strong{font-size:16px}
.brand-copy small{font:700 9px Arial,sans-serif;color:#aea4c0;letter-spacing:2px}
.header-actions{display:flex;gap:9px;align-items:center}
.version{font:700 10px Arial,sans-serif;color:#aab1cb;letter-spacing:1.8px;margin-right:14px}
.utility{border:1px solid #65608a;border-radius:3px;background:#1c1c3f; padding:10px 16px;font-size:10px;letter-spacing:1px}
.viewport{position:relative;width:100%;aspect-ratio:16 / 9;min-height:250px;background:#211139;border:3px solid #f7c759;overflow:hidden;box-shadow:0 0 0 7px #060a20,0 16px 45px #0009}
#game{display:block;width:100%;height:100%;object-fit:fill}
.screen-layer,.modal-layer{position:absolute;inset:0}
.menu-layer{background:linear-gradient(90deg,rgba(12,11,37,.96) 0%,rgba(14,11,42,.85) 41%,rgba(11,13,43,.26) 70%,rgba(17,9,42,.14));display:flex;align-items:center}
.menu-layer:before{position:absolute;inset:0;content:"";pointer-events:none;background:linear-gradient(120deg,transparent 45%,#fe4c8433 45.1%,transparent 47.5%)}
.menu-copy{width:60%;max-width:660px;padding-left:clamp(25px,5%,74px);padding-bottom:1.3%;z-index:2}
.sticker{display:inline-flex;align-items:center;gap:12px;background:var(--teal);color:#1a1432;padding:10px 13px;transform:rotate(-2deg);font-size:12px;letter-spacing:1.8px;box-shadow:6px 6px 0 #080819}
.signal{width:9px;height:9px;background:#ff497a;border-radius:50%;box-shadow:0 0 0 3px #f4809e}
h1{font-family:Impact, "Arial Black",sans-serif;text-shadow:7px 7px 0 #090817;margin:22px 0 12px;letter-spacing:1.5px;line-height:.87;font-size:clamp(52px,7.8vw,118px);font-weight:900;transform:skew(-4deg)}
h1>span{display:block}
h1>span:first-child{color:var(--gold)}
h1 .outline-title{color:#faf2e8;-webkit-text-stroke:2px #faf2e8}
h1 .subtitle-slant{font-size:.31em;line-height:1.5;color:var(--teal);letter-spacing:5px;margin:10px 0 0;white-space:nowrap}
h1 em{color:#fe4c8c;font-style:normal}
.menu-intro{font-size:clamp(13px,1.5vw,20px);font-family:Arial,sans-serif;line-height:1.5;letter-spacing:.5px;margin:10px 0 18px;color:#ede9f7}
.menu-intro strong{color:var(--gold)}
.menu-actions{display:flex;gap:13px;flex-wrap:wrap}
.primary-btn,.secondary-btn{border:0;border-radius:0;padding:16px 19px;font-size:15px;letter-spacing:.6px;text-align:left;box-shadow:5px 5px 0 #080816}
.primary-btn{background:var(--gold);color:#19102b}
.secondary-btn{background:#38295f;border:2px solid #b1a2dc;color:#fff; padding:14px 17px}
.primary-btn span,.secondary-btn span{margin-left:14px}
.menu-note{font:700 10px Arial,sans-serif;letter-spacing:2.3px;color:#a6a5c4;margin:20px 0 0}
.menu-note i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--rose);vertical-align:middle;margin:0 7px}
.menu-right{position:absolute;inset:0;pointer-events:none}
.fight-emblem{position:absolute;left:72%;top:42%;transform:translate(-50%,-50%) rotate(-9deg);font:italic 900 clamp(60px,9vw,150px) Impact,sans-serif;color:#ffe187;text-shadow:8px 8px 0 #15112d,-3px -3px 0 #fff1;opacity:.9}
.character-label{position:absolute;background:#170c36cc;padding:10px 15px;border-left:5px solid var(--teal);font:900 12px Arial,sans-serif;letter-spacing:3px;transform:rotate(-3deg)}
.character-label strong{font-size:25px;display:block;color:#fff}
.character-label small{font-size:9px;color:#a9ffed}
.will-label{top:14%;left:58%}.carl-label{right:5%;bottom:11%;border-color:var(--rose);transform:rotate(3deg)}
.carl-label small{color:#ffc6da}
.vertical-marker{position:absolute;right:7px;top:20px;writing-mode:vertical-rl;font:700 9px Arial,sans-serif;letter-spacing:3px;color:#fff6}
.game-tools{position:absolute;right:1.5%;top:18%;z-index:3}
.pill-tool{border-radius:4px;border:2px solid #ffee9e;background:#14112bba;padding:10px 14px;font-size:10px;letter-spacing:1px}
.modal-layer{z-index:8;background:#080817d9;display:flex;align-items:center;justify-content:center;padding:14px;backdrop-filter:blur(7px)}
.modal-card{background:#211a45;box-shadow:12px 12px 0 #070819;border:3px solid var(--gold);padding:28px 38px;max-width:720px;width:min(83%,680px);text-align:center;transform:rotate(-1deg)}
.modal-top{font:900 12px Arial,sans-serif;letter-spacing:4px;color:var(--teal)}
.modal-card h2{font:900 clamp(34px,5.5vw,80px) Impact,"Arial Black",sans-serif;color:var(--cream);letter-spacing:3px;line-height:1;margin:16px 0 9px}
.period{color:var(--rose)}
.modal-card p{font:16px/1.5 Arial,sans-serif;color:#d7d0e9}
.modal-card .primary-btn,.modal-card .quiet-btn{margin:12px 8px 0}
.quiet-btn{background:transparent;border:1px solid #a99ec5;padding:16px 20px;font-size:12px}
.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left;margin-top:22px}
.control-grid>div{border:1px solid #65577e;background:#100d2d;padding:15px 18px}
.control-grid h3{color:var(--gold);margin:0;font-size:14px}
.control-grid p{font-size:13px;line-height:2}
.control-grid b{background:#44406a;border-bottom:3px solid #9288be;padding:2px 6px;white-space:nowrap}
.help-card .fine-print{font-size:12px;line-height:1.55;margin:14px 0 0}
.is-hidden{display:none!important}
.touch-ui{position:absolute;z-index:5;inset:auto 0 1.1% 0;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;padding:0 3%}
.move-group,.attack-group{display:flex;align-items:flex-end;gap:8px;pointer-events:auto}
.touch-column{display:flex;gap:7px}
.touch-ui button{width:clamp(40px,6.3vw,77px);height:clamp(40px,6.3vw,77px);border:2px solid #fefaf6ad;border-radius:50%;background:#0c0b23ab;color:#fff;font:900 clamp(18px,3vw,28px) Arial,sans-serif;backdrop-filter:blur(5px);touch-action:none;user-select:none;-webkit-user-select:none}
.touch-ui button:active,.touch-ui button.active{transform:scale(.93);background:#fff8;color:#111}
.attack-group .punch{background:#1bbaa9b3}.attack-group .kick{background:#9d2b90b3}.attack-group .special{background:#dea129b3}
.rotation-tip{display:none;position:absolute;right:3%;bottom:2%;background:#0d0c23b3;border:1px solid #ffffff66;padding:5px 7px;font:9px Arial,sans-serif;pointer-events:none}
.lowerline{font:700 9px Arial,sans-serif;letter-spacing:1.8px;color:#c0b2ce;min-height:38px;margin-top:11px}
.gold-star{color:var(--gold);margin-right:7px}.bar-dot{color:var(--rose);margin:0 7px}
.disclaimer{font:11px/1.5 Arial,sans-serif;color:#8983a7;margin:8px 0}
@media (pointer:coarse){.touch-ui:not(.is-hidden){display:flex}}
@media (max-width:950px){.app{padding:7px 9px}.topline{min-height:48px}.brand-copy strong{font-size:11px}.brand-copy small{font-size:7px}.version{display:none}.utility{font-size:9px;padding:8px}.menu-copy{padding-left:28px}h1{font-size:clamp(41px,8vw,85px);margin:14px 0}.sticker{font-size:8px;padding:7px}.menu-intro{font-size:11px;margin:8px 0 12px}.primary-btn,.secondary-btn{font-size:11px;padding:11px}.menu-note{font-size:8px;margin-top:12px}.character-label strong{font-size:17px}.character-label{font-size:10px;padding:6px}.lowerline{font-size:8px;line-height:1.6}}
@media (max-width:620px){.topline{gap:8px}.brand-symbol{padding:5px;font-size:15px}.brand-copy strong{font-size:10px;letter-spacing:0}.brand-copy small{font-size:6px;letter-spacing:1px}.header-actions{gap:3px}.utility{font-size:8px;padding:6px}.menu-copy{padding-left:16px;width:80%}.sticker{font-size:6px;letter-spacing:1px;padding:4px}.menu-intro{font-size:9px}.menu-actions{gap:5px}.primary-btn,.secondary-btn{padding:7px 9px;font-size:9px}.menu-note{font-size:6px;letter-spacing:1px}.character-label{display:none}.fight-emblem{opacity:.25}.lowerline{font-size:7px}.lowerline>div:last-child{display:none}.modal-card{padding:14px;width:95%}.modal-card p{font-size:11px}.modal-card h2{margin:6px 0}.modal-top{font-size:9px}.control-grid{gap:5px}.control-grid>div{padding:8px}.control-grid h3{font-size:10px}.control-grid p{font-size:10px}.control-grid b{padding:1px 3px}.modal-card .primary-btn,.modal-card .quiet-btn{margin:5px;font-size:9px;padding:8px}}
@media(max-width:850px) and (orientation:portrait){.rotation-tip{display:block}.touch-ui button{width:40px;height:40px}}
@media (max-height:600px) and (orientation:landscape){.app{padding:3px 8px}.topline{min-height:34px}.lowerline,.disclaimer{display:none}.viewport{max-height:calc(100dvh - 44px);width:auto;max-width:100%;margin:auto}.brand-symbol{padding:3px}.menu-copy{padding-left:4%}.primary-btn,.secondary-btn{padding:9px}}
/* Arcade Edition menu, roster selection, and expanded touch combat */
.selection-layer{position:absolute;inset:0;z-index:7;background:linear-gradient(130deg,#100b29f8,#251547f5);display:flex;align-items:center;justify-content:center;padding:1.1%;overflow-y:auto}
.selection-panel{width:min(97%,1150px);background:#1d1739;border:3px solid #e3bd74;box-shadow:10px 10px 0 #0a0922;padding:15px 22px;color:#fff7e8}
.selection-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.selection-head h2{font:900 clamp(23px,3vw,45px) Impact,sans-serif;color:#ffdc7e;letter-spacing:2px;margin:2px 0 10px}
.selection-head .quiet-btn{font-size:11px;padding:8px 13px;margin:0}
.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 12px}.roster-item{background:#30254b;border:2px solid #655681;padding:9px;display:flex;align-items:center;gap:8px;text-align:left;flex-wrap:wrap;min-width:0;color:#fff8e9}.roster-item:hover,.roster-item.selected{background:#56406a;border-color:#ffdb74;box-shadow:inset 0 0 0 1px #ffedaf}.roster-item .avatar{display:flex;align-items:center;justify-content:center;width:47px;height:51px;flex-shrink:0;border:2px solid #f4d7b6;color:#261a37;font:900 34px Impact,sans-serif;transform:skew(-7deg)}.roster-item .will{background:#65e1c0}.roster-item .carlton{background:#f6d17f}.roster-item .phil{background:#b4b7d6}.roster-item .jazz{background:#f8a56c}.roster-item strong{font:900 18px Impact,sans-serif;letter-spacing:.7px}.roster-item small{display:block;color:#ffd9a4;font:800 9px Arial,sans-serif;letter-spacing:.6px}
.selection-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.selection-fields label{display:flex;flex-direction:column;gap:4px;font:800 10px Arial,sans-serif;letter-spacing:1.1px;color:#c7f3ec}.selection-fields select{font:800 13px Arial,sans-serif;color:#fffaf0;background:#32264d;border:1px solid #907fac;min-height:34px;padding:7px 8px;border-radius:2px;width:100%}
.selection-foot{display:flex;justify-content:space-between;align-items:center;margin-top:13px;gap:10px}.selection-foot p{font:700 10px Arial,sans-serif;color:#b7accd}.selection-foot .primary-btn{padding:11px 18px;font-size:14px}
.attack-group{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;max-width:44%}.touch-ui .attack-group button{width:clamp(31px,4.8vw,61px);height:clamp(31px,4.8vw,61px);font-size:clamp(10px,1.25vw,15px)}
.touch-ui .attack-group .super{background:#dd4d6ecc}.touch-ui .attack-group .assist{background:#4271bacc}.touch-ui .move-group button{width:clamp(34px,5.1vw,66px);height:clamp(34px,5.1vw,66px);font-size:clamp(13px,2vw,21px)}
@media(max-width:900px){.selection-panel{padding:6px 12px}.roster{gap:5px;margin-bottom:6px}.roster-item{padding:3px;gap:4px}.roster-item .avatar{width:29px;height:32px;font-size:22px}.roster-item strong{font-size:12px}.roster-item small{font-size:6px}.selection-fields{grid-template-columns:repeat(3,1fr);gap:5px}.selection-fields label{font-size:8px;gap:2px}.selection-fields select{font-size:10px;padding:2px 5px;min-height:26px}.selection-head h2{margin:1px 0 5px}.selection-foot{margin-top:6px}.selection-foot p{font-size:8px}.selection-foot .primary-btn{font-size:10px;padding:7px 9px}}
@media(max-width:620px){.roster-item small{display:none}.roster-item .avatar{width:24px;height:27px;font-size:17px}.roster-item strong{font-size:10px}.selection-foot p{display:none}.selection-foot{justify-content:flex-end}.selection-head .quiet-btn{font-size:9px;padding:5px 7px}.selection-panel{padding:4px 7px}.selection-fields label{font-size:7px}.selection-fields select{font-size:9px;min-height:24px}.menu-copy{width:90%}.menu-actions .secondary-btn{padding:6px 8px;font-size:8px}}
@media(max-width:850px) and (orientation:landscape){.selection-panel{width:min(97%,1000px);}.selection-head h2{font-size:clamp(20px,4vw,32px)}.roster-item small{display:none}.selection-fields{gap:3px}.selection-fields select{min-height:22px;font-size:10px;padding:2px}.roster-item .avatar{width:30px;height:30px}}

/* COMPLETE EDITION — authentic hard-edge arcade presentation */
#game{image-rendering:pixelated;image-rendering:crisp-edges}
.menu-layer{background:linear-gradient(90deg,#0c082adf 0%,#0a0926ed 28%,#080825a6 52%,#110d2d65 100%)}
.menu-right:after{content:"";position:absolute;inset:0 0 0 55%;background:url('assets/title-art.webp') center center/cover no-repeat;opacity:.64;mix-blend-mode:screen;filter:saturate(1.45);mask-image:linear-gradient(90deg,transparent,#000 30%)}
.menu-copy{width:70%}.menu-actions{max-width:585px}.menu-actions button{font-size:clamp(10px,1.1vw,14px)}
.roster{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.roster-item{min-height:70px;padding:5px;flex-wrap:nowrap;gap:8px;overflow:hidden}
.roster-item .roster-portrait{image-rendering:pixelated;width:55px;height:57px;object-fit:cover;border:2px solid #e4d2b0;flex:none;box-shadow:3px 3px 0 #09061c}
.roster-item .roster-label{min-width:0}.roster-item strong{font-size:clamp(12px,1.3vw,19px);line-height:1.05;display:block;white-space:nowrap}
.roster-item small{font-size:8px}
.roster-item[data-roster="viv1"],.roster-item[data-roster="viv2"]{border-color:#d8acd6}
.roster-item.selected{background:#604178;box-shadow:0 0 0 2px #ffec80,inset 0 0 0 1px #ffdc8e}
.selection-panel{width:min(99%,1190px);padding:10px 16px}
.selection-foot{margin-top:5px;justify-content:space-between}
.stage-preview{width:96px;height:58px;object-fit:cover;image-rendering:pixelated;border:2px solid #ffca70}
.rotation-tip{z-index:9}
#musicBtn{color:#71f7e0}
@media(max-width:950px){.roster-item{min-height:52px;gap:3px;padding:2px}.roster-item .roster-portrait{width:33px;height:40px}.roster-item strong{font-size:clamp(8px,1.18vw,12px)}.roster-item small{font-size:6px}.stage-preview{width:57px;height:36px}.selection-panel{padding:4px 8px}.selection-head h2{font-size:22px}.menu-copy{width:83%}}
@media(max-width:620px){.roster{gap:3px}.roster-item{min-height:35px}.roster-item .roster-portrait{width:26px;height:31px}.roster-item strong{font-size:8px}.roster-item small{display:none}.selection-panel{padding:3px 4px}.stage-preview{display:none}}
@media(max-height:430px) and (orientation:landscape){.selection-head h2{font-size:20px}.selection-panel{padding:3px 6px}.roster-item{min-height:40px}.roster-item .roster-portrait{width:30px;height:36px}.roster{gap:4px;margin-bottom:4px}.selection-foot{margin-top:3px}.selection-fields select{min-height:24px}.selection-head .quiet-btn{padding:5px 8px}.topline{min-height:29px}}


/* ULTIMATE EDITION 0.7 — vivid title/select screens and Bow Games splash */
.menu-layer{background:linear-gradient(90deg,rgba(12,8,42,.72) 0%,rgba(9,7,36,.46) 44%,rgba(14,10,47,.30) 100%), url('assets/title-bg-vivid.webp') center center/cover no-repeat;}
.menu-layer:before{background:radial-gradient(circle at 19% 18%,rgba(255,244,140,.18),transparent 20%),linear-gradient(130deg,transparent 43%,#fe4c8433 43.1%,transparent 47.5%);}
.menu-copy{width:55%;max-width:620px;background:rgba(10,11,38,.38);padding-top:18px;padding-bottom:18px;border:2px solid rgba(255,231,150,.34);backdrop-filter:blur(1px);box-shadow:8px 8px 0 rgba(9,7,31,.55)}
.sticker{background:#fff07d;color:#23154a;box-shadow:6px 6px 0 #170b35}
.primary-btn{background:linear-gradient(180deg,#fff278,#ffcf43);}
.secondary-btn{background:linear-gradient(180deg,#5d3bbb,#35245f);border-color:#e3d7ff}
.menu-note{color:#fff1a6}
.fight-emblem{left:76%;top:51%;color:#fff06c;text-shadow:8px 8px 0 #170b35,-4px -4px 0 rgba(0,0,0,.18)}
.character-label{background:#160c35d4;border-left-width:6px;box-shadow:6px 6px 0 rgba(9,6,27,.5)}
.selection-layer{background:linear-gradient(135deg,rgba(16,11,41,.80),rgba(27,16,66,.76)), url('assets/select-bg-vivid.webp') center center/cover no-repeat;}
.selection-panel{background:rgba(21,15,52,.77);backdrop-filter:blur(1.5px);border-color:#fff26f;box-shadow:12px 12px 0 #0a0922,0 0 0 3px rgba(0,0,0,.18)}
.select-stage-layout{display:grid;grid-template-columns:minmax(150px,1fr) 2.2fr minmax(150px,1fr);gap:10px;align-items:stretch;margin:2px 0 10px}
.select-center{display:flex;align-items:center}
.select-preview{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border:3px solid #6aeef0;background:linear-gradient(180deg,rgba(32,13,85,.88),rgba(15,15,65,.75));box-shadow:6px 6px 0 rgba(7,7,24,.55);overflow:hidden;min-height:316px}
.select-preview:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(251,255,164,.22),transparent 42%), linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%);pointer-events:none}
.select-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;filter:saturate(1.12) contrast(1.04)}
.select-preview-label{position:relative;z-index:1;width:100%;padding:10px 12px;background:linear-gradient(180deg,rgba(8,8,30,.2),rgba(8,8,30,.83));text-shadow:3px 3px 0 rgba(0,0,0,.45)}
.select-preview-label span{display:block;font:900 11px Arial,sans-serif;letter-spacing:2px;color:#fff3a0}
.select-preview-label strong{display:block;font:900 clamp(18px,2vw,30px) Impact,sans-serif;letter-spacing:1px;color:#fff}
.roster{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.roster-item{min-height:84px;background:linear-gradient(180deg,rgba(79,41,110,.94),rgba(57,31,90,.96));border-color:#83f2f4;padding:6px}
.roster-item.selected{background:linear-gradient(180deg,#ff3f94,#8b5bdb);box-shadow:0 0 0 3px #ffee75,inset 0 0 0 1px #fffad0}
.roster-item .roster-portrait{width:63px;height:63px;border-color:#ffefb7;box-shadow:4px 4px 0 #09061c}
.selection-fields{grid-template-columns:repeat(3,minmax(0,1fr));background:rgba(9,8,31,.4);padding:8px;border:1px solid rgba(255,255,255,.12)}
.selection-fields select{background:#251846;border-color:#8debef;color:#fffdf3}
.selection-foot{background:rgba(9,8,31,.45);padding:7px 8px;border:1px solid rgba(255,255,255,.12)}
.intro-splash{z-index:12;background:radial-gradient(circle at center,rgba(34,20,87,.60),rgba(8,8,24,.96));backdrop-filter:blur(3px)}
.intro-card{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(92vw,980px)}
.intro-art{display:block;width:min(92vw,960px);border:4px solid #ffe96d;box-shadow:0 0 0 8px #0a0822,14px 14px 0 rgba(0,0,0,.35);image-rendering:pixelated;background:#120a2e}
.intro-copy{text-align:center}
.intro-kicker{font:900 12px Arial,sans-serif;letter-spacing:4px;color:#6bf4df;margin:0 0 10px}
.intro-splash.fade-out{animation:introFade .8s ease forwards}
@keyframes introFade{to{opacity:0;visibility:hidden}}
@media(max-width:950px){.select-stage-layout{grid-template-columns:130px 1fr 130px;gap:6px}.select-preview{min-height:230px}.roster-item{min-height:70px}.roster-item .roster-portrait{width:48px;height:48px}.menu-copy{width:70%}}
@media(max-width:620px){.select-stage-layout{grid-template-columns:1fr;gap:6px}.select-preview{display:none}.menu-copy{width:84%;padding:10px;border-width:1px}.intro-kicker{font-size:9px;letter-spacing:2px}.intro-art{width:96vw}.selection-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* 0.8 — iPhone landscape controls & accessible entry/selection fixes */
.viewport{isolation:isolate}
.intro-splash{cursor:pointer;touch-action:manipulation;}
.intro-card{width:min(96%,960px);height:min(100%,710px);justify-content:center;min-height:0}
.intro-art{width:100%;height:auto;max-height:min(70dvh,530px);object-fit:contain;}
.intro-copy{display:flex;flex-direction:column;gap:5px;align-items:center;z-index:1;}
.intro-copy .primary-btn{padding:12px 25px;box-shadow:0 0 0 3px #181036,5px 5px 0 #ff43a0;}
.selection-head h2{color:#fff479;text-shadow:4px 4px #e32089,7px 7px #13082d;}
.selection-layer{overscroll-behavior:contain;}
/* Mid-sized landscape phones have very little vertical room. Fit every action on one visible screen. */
@media (orientation:landscape) and (max-height:530px){
  html,body{overflow:hidden;overscroll-behavior:none;}
  .app{width:100vw;max-width:none;padding:0;margin:0;}
  .topline,.lowerline,.disclaimer{display:none;}
  .viewport{width:100vw;height:100dvh;min-height:0;max-height:none;aspect-ratio:auto;border:0;box-shadow:none;}
  #game{height:100%;width:100%;}
  .intro-splash{padding:1vh 3vw;overflow:hidden;}
  .intro-card{max-width:none;width:100%;height:100%;gap:1vh;}
  .intro-art{height:72dvh;max-height:72dvh;max-width:90vw;width:auto;object-fit:contain;border-width:2px;}
  .intro-copy{min-height:16dvh;justify-content:center;gap:0;}
  .intro-kicker{font-size:clamp(8px,1.6vw,12px);letter-spacing:1px;margin:0 0 4px;}
  .intro-copy .primary-btn{padding:8px 18px;font-size:clamp(11px,2vw,16px);min-height:34px;}
  .menu-layer{background-position:center center;}
  .menu-copy{width:min(60%,590px);max-width:590px;padding:3vh 2vw 3vh 4vw;margin:0;background:rgba(9,7,34,.65);max-height:98%;overflow:auto;}
  h1{font-size:clamp(40px,7vw,78px);line-height:.9;margin:8px 0;}
  h1 .subtitle-slant{font-size:.26em;letter-spacing:2px;margin-top:4px;}
  .menu-intro{font-size:clamp(9px,1.45vw,14px);line-height:1.2;margin:3px 0 9px;}
  .menu-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px;gap:6px;}
  .menu-actions button{font-size:clamp(10px,1.4vw,13px);padding:8px 9px;min-height:32px;}
  .menu-note{font-size:7px;line-height:1.3;margin:8px 0 0;}
  .sticker{font-size:8px;padding:5px 8px;}
  .selection-layer{padding:0;overflow:hidden;align-items:stretch;justify-content:stretch;}
  .selection-panel{height:100%;min-height:0;max-height:100%;width:100%;max-width:none;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:4px;padding:4px max(6px,env(safe-area-inset-right)) 4px max(6px,env(safe-area-inset-left));box-shadow:none;border-width:2px;overflow:hidden;}
  .selection-head{align-items:center;min-height:30px;}
  .modal-top{font-size:clamp(7px,1.1vw,10px);letter-spacing:1px;}
  .selection-head h2{font-size:clamp(17px,3.1vw,25px);line-height:1;margin:0;}
  .selection-head .quiet-btn{font-size:11px;padding:5px 10px;}
  .select-stage-layout{display:grid;grid-template-columns:minmax(70px,.8fr) minmax(0,3.3fr) minmax(70px,.8fr);height:100%;min-height:0;margin:0;gap:5px;}
  .select-preview{display:flex;min-height:0;max-height:100%;height:100%;border-width:2px;}
  .select-preview-label{padding:4px;}
  .select-preview-label strong{font-size:clamp(10px,1.7vw,17px);}
  .select-preview-label span{font-size:9px;letter-spacing:0;}
  .select-center{width:100%;min-height:0;height:100%;}
  .roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:4px;margin:0;width:100%;height:100%;min-height:0;}
  .roster-item{display:flex;flex-direction:row;align-items:center;min-height:0;height:100%;padding:2px 3px;gap:4px;border-width:2px;overflow:hidden;}
  .roster-item .roster-portrait{display:block;height:min(100%,64px);max-height:64px;min-height:0;aspect-ratio:1;width:auto;object-fit:cover;flex:none;border-width:1px;}
  .roster-item strong{font-size:clamp(8px,1.45vw,12px);white-space:normal;line-height:1.05;}
  .roster-item small{display:none;}
  .selection-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 6px;padding:4px;margin:0;max-height:70px;}
  .selection-fields label{font-size:clamp(6px,.95vw,9px);line-height:1;gap:2px;}
  .selection-fields select{height:21px;min-height:21px;max-height:21px;padding:2px 5px;font-size:clamp(9px,1.1vw,11px);}
  .selection-foot{display:flex;align-items:center;justify-content:space-between;flex:none;padding:3px 4px;margin:0;gap:4px;min-height:36px;}
  .selection-foot p{display:block;font-size:clamp(8px,1vw,10px);line-height:1.15;margin:0;max-width:42%;color:#fff8bd;}
  .stage-preview{display:block;width:64px;height:32px;flex:none;}
  .selection-foot .primary-btn{flex:0 0 auto;padding:7px 15px;font-size:clamp(12px,1.8vw,17px);min-height:31px;background:#ffee50;border:2px solid #1f103a;box-shadow:3px 3px 0 #f3329b;}
  .touch-ui{padding:0 2% 0;bottom:max(.5%,env(safe-area-inset-bottom));}
  .touch-ui .move-group button{width:clamp(32px,6.3vh,52px);height:clamp(32px,6.3vh,52px);}
  .touch-ui .attack-group button{width:clamp(32px,6.3vh,52px);height:clamp(32px,6.3vh,52px);font-size:clamp(10px,1.25vw,15px);}
  .touch-ui .attack-group{max-width:39%;grid-template-columns:repeat(4,minmax(0,1fr));}
  .game-tools{top:2%;right:2%;}
}
@media (orientation:landscape) and (max-height:340px){
  .select-preview{display:none;}
  .select-stage-layout{grid-template-columns:1fr;}
  .selection-panel{gap:2px;}
  .selection-fields{max-height:57px;}
  .selection-fields label{font-size:7px;}
  .selection-foot p{display:none;}
  .selection-foot{justify-content:space-between;min-height:31px;}
  .intro-art{height:64dvh;max-height:64dvh;}
}
/* Turbo Remix: full-body selection, planted breathing animation and phone layout. */
.select-preview canvas{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 1px #08041a);}
.select-preview{background:radial-gradient(ellipse at 50% 65%,#55239499,#11082f 75%);min-width:0;}
.select-preview.right{background:radial-gradient(ellipse at 50% 65%,#164f7d99,#11082f 75%);}
.select-preview-label{background:linear-gradient(0deg,#100622f5,#100622cc 70%,transparent);pointer-events:none;}
.select-preview:after{content:"";position:absolute;width:150%;height:2px;top:12%;left:-25%;background:#fff3;box-shadow:0 0 30px #34ceff;transform:rotate(-25deg);pointer-events:none;}
.selection-panel{border-color:#e5d39e;background:#160c38d9;}
.roster-item{transition:background .12s,box-shadow .12s;}
.roster-item.selected{border-color:#fff145;box-shadow:0 0 0 2px #ffdf28,0 0 20px #d82ac780;}
.winner-quote{font-style:italic!important;color:#ffeb8b!important;font-size:21px!important;}
@media(max-width:620px) and (orientation:portrait){
 .viewport{min-height:620px;aspect-ratio:auto;}
 #game{height:auto;aspect-ratio:16/9;position:absolute;top:22%;}
 .menu-layer{align-items:center;background-size:auto 100%;}
 .menu-copy{width:92%;margin:4%;padding:18px;}
 h1{font-size:66px;}
 .menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
 .menu-actions button{font-size:12px;padding:13px 8px;}
 .selection-layer{align-items:stretch;padding:0;}
 .selection-panel{width:100%;padding:8px;display:flex;flex-direction:column;}
 .select-stage-layout{display:grid;grid-template-columns:78px 1fr 78px;gap:5px;min-height:240px;flex:1;}
 .select-preview{display:flex;min-height:230px;border-width:1px;}
 .select-preview canvas{width:150%;max-width:none;left:-25%;}
 .select-preview-label{padding:5px 2px;}
 .select-preview-label strong{font-size:11px;}
 .select-preview-label span{font-size:8px;}
 .roster{gap:4px;height:100%;}
 .roster-item{padding:2px;min-height:0;justify-content:center;}
 .roster-item .roster-portrait{width:38px;height:41px;}
 .roster-item strong{font-size:8px;}
 .roster-item small{display:none;}
 .selection-fields{grid-template-columns:1fr 1fr;}
 .selection-fields label{font-size:8px;}
 .selection-fields select{font-size:12px;min-height:32px;}
 .selection-foot{flex-wrap:wrap;gap:5px;}
 .selection-foot p{font-size:8px;max-width:48%;}
 .selection-foot .primary-btn{width:100%;text-align:center;font-size:15px;min-height:44px;}
 .touch-ui{bottom:35px;padding:0 8px;}
 .touch-ui .move-group{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
 .touch-column{flex-direction:column;}
 .touch-ui .move-group button,.touch-ui .attack-group button{width:43px;height:43px;}
 .touch-ui .attack-group{grid-template-columns:repeat(3,1fr);max-width:52%;}
 .game-tools{top:10px;}
 .rotation-tip{bottom:7px;}
 .modal-card h2{font-size:40px;}
}
@media (orientation:landscape) and (max-height:530px){
 .select-stage-layout{grid-template-columns:minmax(105px,1fr) minmax(0,3fr) minmax(105px,1fr);}
 .select-preview-label strong{font-size:13px;}
 .select-preview canvas{height:104%;top:-3%;}
 .touch-ui .move-group button,.touch-ui .attack-group button{width:clamp(38px,10.5vh,48px);height:clamp(38px,10.5vh,48px);}
 .game-tools{top:17%;right:1%;}
}
@media (prefers-reduced-motion:reduce){.select-preview:after{display:none}.roster-item{transition:none}}
body.qa-phone .app{width:844px;max-width:none;padding:0;margin:auto;}
body.qa-phone .topline,body.qa-phone .lowerline,body.qa-phone .disclaimer{display:none;}
body.qa-phone .viewport{width:844px;height:390px;max-height:none;min-height:0;border:0;aspect-ratio:auto;}
[hidden]{display:none!important}
.load-status{font:800 9px Arial,sans-serif;letter-spacing:1.5px;color:#fff28c;margin:0 0 4px;}
button:disabled{cursor:wait;filter:saturate(.3);opacity:.6;}

/* Fixed studio recording, with logo motion timed to the clip. */
.intro-splash.brand-playing .intro-art{animation:studioTagPulse 3.65s ease-out both;}
.intro-splash.brand-playing .intro-copy .primary-btn{pointer-events:none;}
@keyframes studioTagPulse{0%{transform:scale(.98);filter:brightness(.92)}16%{transform:scale(1.015);filter:brightness(1.12) drop-shadow(0 0 18px #c936f5)}35%{transform:scale(1.025);filter:brightness(1.16) drop-shadow(0 0 24px #36e4f5)}65%,100%{transform:scale(1);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.intro-splash.brand-playing .intro-art{animation:none;}}