/* Family Fighters: best-of-three round indicator. */
.hud-center{position:relative}
.round-score{position:absolute;left:50%;top:100%;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-width:155px;margin-top:5px;padding:3px 8px;border:2px solid #c99247;
  border-radius:6px;background:rgba(16,16,34,.90);box-shadow:0 3px 9px #0006;
  color:#fff0c8;white-space:nowrap;font-family:system-ui,sans-serif}
.round-score b{color:#ffcf5d;letter-spacing:2px;font-size:13px;line-height:1.2}
.round-score em{font-size:9px;font-style:normal;font-weight:900;letter-spacing:1px}
@media(max-width:580px){
  .round-score{min-width:103px;margin-top:3px;padding:2px 3px;gap:3px;border-width:1px}
  .round-score b{font-size:9px;letter-spacing:0}
  .round-score em{font-size:6px;letter-spacing:0}
}

/* Escolha de lutadores com retratos de rosto, no estilo arcade. */
.select-screen{background:radial-gradient(ellipse at 50% 25%,#3c3767df,#090b24ee 72%)}
.fighter-grid{gap:1.1%;height:62%}
.fighter-card{border-color:#78809e;background-color:#161a31;box-shadow:inset 0 0 0 2px #ffffff25,0 12px 18px #030417a0}
.fighter-card img{top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%;filter:saturate(1.09) contrast(1.04);transform:scale(1.01)}
.fighter-card::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#ffffff16 0%,transparent 42%,#0b1025a0 75%,#0c1027f5 100%)}
.fighter-card:hover img,.fighter-card.selected img{transform:scale(1.11)}
.fighter-card.selected{border-color:#ffe2a5;box-shadow:0 0 0 3px #fff6d1,0 0 35px #ffc85fa6,0 14px 22px #050312c9}
.fighter-meta{position:relative;z-index:2;padding:29px 4px 13px;background:none;text-shadow:1px 2px 4px #060814,0 0 12px #020308}
.fighter-meta strong{font-size:clamp(19px,2.5vw,38px);letter-spacing:2px}
.fighter-meta small{font-size:clamp(8px,.95vw,13px);letter-spacing:.35px;color:#fff0c3}
@media(max-width:580px){.fighter-meta{padding:8px 0 3px}.fighter-meta strong{font-size:11px;letter-spacing:.3px}.fighter-meta small{font-size:5px;letter-spacing:0}.fighter-card img{object-position:50% 30%}}

/* Multiplayer local, slots visíveis e cores independentes. */
.local-versus{background:linear-gradient(155deg,#b7a2ff,#7773e9);color:#131334}
.versus-selection{display:flex;align-items:center;gap:10px;margin:5px 0 4px;min-height:38px}
.versus-selection button{padding:8px 14px;border-radius:7px;border:2px solid #596078;background:#1c2542;color:#e9e7ff;font:900 12px system-ui,sans-serif}
.versus-selection button.active{border-color:#ffd46b;background:#50364b;color:#fff5ce;box-shadow:0 0 12px #ffd76a69}
.versus-selection #selectSlot2.active{border-color:#5be2ff;background:#24426c;color:#d9faff;box-shadow:0 0 12px #5be2ff69}
.versus-selection>span{margin-left:auto;font:800 10px system-ui,sans-serif;letter-spacing:1px;color:#cad1eb}
.fighter-card.selected-p2{border-color:#63e3ff;box-shadow:0 0 0 3px #81eeff,0 0 28px #38dfff90;transform:translateY(-4px)}
.fighter-card.selected.selected-p2{border-image:linear-gradient(110deg,#ffd978 50%,#59ecff 50%) 1;border-radius:12px}
.select-screen:has(.versus-selection:not(.hidden)) .fighter-grid{height:56%}
.how-card .control-columns p{line-height:1.55}
@media(max-width:920px){.versus-selection{min-height:24px;gap:5px;margin:3px 0}.versus-selection button{padding:4px 8px;font-size:9px}.versus-selection>span{font-size:8px}.select-screen:has(.versus-selection:not(.hidden)) .fighter-grid{height:53%}}
@media(max-width:580px){.versus-selection{min-height:16px}.versus-selection button{padding:2px 4px;font-size:6px;border-width:1px}.versus-selection>span{font-size:5px;letter-spacing:0}.select-screen:has(.versus-selection:not(.hidden)) .fighter-grid{height:49%}}

/* Arenas ilustradas, com escolha dedicada e foco para gamepad. */
.arena-screen{background:linear-gradient(145deg,#0d1028ed,#111a38e8 54%,#110c26f0)}
.arena-panel{width:94%;height:91%;display:flex;flex-direction:column;gap:12px;min-height:0}
.arena-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex:none}
.arena-head h2{font:900 clamp(20px,3.2vw,46px)/1 Impact,'Arial Black',sans-serif;letter-spacing:1.5px;color:#ffebbd;text-shadow:3px 4px 0 #181329;margin:8px 0 0}
.arena-pad-hint{font:800 clamp(8px,.85vw,12px) system-ui,sans-serif;letter-spacing:.4px;color:#a9c4df;padding-bottom:5px}
.arena-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:11px}
.arena-card{display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;min-width:0;min-height:0;border:3px solid #7483a2;border-radius:10px;background:#15172e;color:#fff;text-align:left;isolation:isolate;padding:10px;box-shadow:0 8px 12px #0009;transition:transform .15s,border-color .15s,box-shadow .15s}
.arena-card img,.arena-card .arena-mini{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .22s,filter .22s}
.arena-card::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#09152b04 7%,#09102720 40%,#050813ed 100%)}
.arena-card strong{font:900 clamp(10px,1.25vw,18px)/1.1 Impact,'Arial Black',sans-serif;letter-spacing:.4px;text-shadow:1px 2px 3px #000}
.arena-card:hover img,.arena-card.active img,.arena-card:hover .arena-mini,.arena-card.active .arena-mini{transform:scale(1.065)}
.arena-card.active{border-color:#ffe59b;box-shadow:0 0 0 2px #f8c861,0 0 25px #ffb448b2;transform:translateY(-3px)}
.arena-bottom{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:49px}
.arena-bottom strong{font:800 clamp(10px,1.08vw,14px) system-ui,sans-serif;letter-spacing:.4px;color:#ffe6a9;text-align:center}
@media(max-width:920px){.arena-panel{gap:5px;height:94%}.arena-grid{gap:6px}.arena-card{padding:6px;border-width:2px;border-radius:5px}.arena-bottom{min-height:30px}.arena-bottom .ghost-button,.arena-bottom .big-button{padding:9px 12px}}
@media(max-width:580px){.arena-panel{gap:3px;height:96%}.arena-head h2{font-size:16px;margin:2px 0}.arena-head .section-kicker{font-size:6px;letter-spacing:.5px}.arena-pad-hint{display:none}.arena-grid{gap:3px}.arena-card{padding:3px;border-width:1px;border-radius:3px}.arena-card span{font-size:4px;letter-spacing:0;margin:0}.arena-card strong{font-size:6px;line-height:1.15;letter-spacing:0}.arena-bottom{gap:3px;min-height:16px}.arena-bottom strong{font-size:5px}.arena-bottom .ghost-button,.arena-bottom .big-button{font-size:6px;padding:4px}}

/* Título arredondado: fonte local, leve e disponível também offline no Android. */
@font-face{font-family:'Family Fighters Display';src:url('assets/fonts/family-headline-v38.ttf') format('truetype');font-style:normal;font-weight:900;font-display:swap}

/* Capa ilustrada e abertura cinematográfica. */
.cinematic-home{background:#120d28;isolation:isolate}
.home-cover-art{position:absolute;inset:-1.5%;z-index:0;background:url('assets/cover/family-fighters-v37.webp') center/cover no-repeat;animation:ff-poster-drift 18s ease-in-out infinite alternate}
.cinematic-home::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#050616c9 0%,#090c25a0 16%,transparent 38%,transparent 69%,#030513b8 89%,#060516eb 100%)}
.home-cover-sparks{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle at 13% 49%,#eeb77c20,transparent 28%),radial-gradient(circle at 83% 50%,#b0b18b1b,transparent 32%);animation:ff-aura 5s ease-in-out infinite alternate}
.cinematic-home .home-content{inset:0;width:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:3.5% 3% 2.5%;text-shadow:0 3px 9px #03020e,0 1px 2px #02030c;pointer-events:none}
.cinematic-home .home-content>*{pointer-events:auto}
.home-heading{width:100%;max-width:1100px;margin:0 auto}
.cinematic-home .home-content .eyebrow{font-size:clamp(8px,1.12vw,15px);letter-spacing:3.5px;color:#fff0be;text-shadow:0 2px 8px #000}
.cinematic-home .home-content h1{font:900 clamp(40px,6.2vw,102px)/1 'Family Fighters Display','DejaVu Sans',system-ui,sans-serif;letter-spacing:-.065em;white-space:nowrap;margin:6px 0 12px;color:#fff6dc;filter:drop-shadow(0 5px 0 #27152d) drop-shadow(0 0 13px #170d2d);transform:none;-webkit-text-stroke:2px #502a53;text-shadow:0 3px 0 #e4a760;text-transform:uppercase}
.cinematic-home .home-content h1 em{font-style:normal;color:#ffca63;text-shadow:0 3px 0 #b04757,0 0 11px #ffab6080;-webkit-text-stroke:2px #61304e}
.cinematic-home .home-content p{margin:0 auto;max-width:890px;font-size:clamp(9px,1.25vw,16px);font-weight:800;color:#ffecc9;line-height:1.25}
.home-command{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%}
.cinematic-home .home-buttons{margin:0;display:flex;justify-content:center;gap:14px;flex-wrap:nowrap}
.cinematic-home .home-buttons .big-button{font-size:clamp(11px,1.37vw,18px);padding:17px 25px;border:2px solid #fff2c1;box-shadow:0 5px 0 #10091d,0 0 22px #040315db}
.home-minor-buttons{display:flex;align-items:center;gap:15px;justify-content:center}
.home-minor-buttons .subtle-button{border:1px solid #eacfa273;background:#100e27d8;border-radius:30px;padding:7px 13px;font-size:clamp(8px,.8vw,11px);letter-spacing:.6px}
.home-music-button{color:#d6f8ef!important}
@keyframes ff-poster-drift{from{transform:scale(1)}to{transform:scale(1.055) translateX(-.55%)}}
@keyframes ff-aura{from{opacity:.63}to{opacity:1}}
.story-screen{background:#090a1a;isolation:isolate}
.story-visual{position:absolute;inset:-1%;z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat;animation:ff-story-pan 7s ease-in-out infinite alternate;transition:background-image .25s}
.story-screen::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0a0e1bf2 0%,#0e1326dc 29%,#15152776 47%,transparent 68%),linear-gradient(0deg,#08091b9c 0%,transparent 32%,#08091b18 100%)}
.story-shimmer{display:none}
.story-copy{z-index:3;position:absolute;left:7%;top:15%;width:49%;max-width:700px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:15px;text-shadow:1px 3px 5px #050514}
.story-copy .section-kicker{color:#ffcf7d;letter-spacing:3px;font-size:clamp(10px,1.2vw,16px)}
.story-copy h2{font:900 clamp(30px,5.1vw,76px)/.95 Impact,'Arial Black',sans-serif;letter-spacing:1px;margin:0;color:#ffe7aa;text-shadow:4px 5px 0 #5d214d,0 0 18px #140e23;text-transform:uppercase}
.story-copy p{font-size:clamp(12px,1.65vw,23px);line-height:1.46;color:#f1edf7;max-width:560px;font-weight:700;margin:0;min-height:90px}
.story-progress-track{height:5px;width:min(420px,90%);border-radius:100px;background:#ffffff2b;overflow:hidden;margin-top:5px}
.story-progress-track>div{height:100%;width:0;background:linear-gradient(90deg,#8ce8ff,#ffc666);box-shadow:0 0 12px #ffc666}
.story-actions{display:flex;gap:12px;align-items:center}
.story-actions .big-button,.story-actions .ghost-button{font-size:clamp(10px,1.1vw,15px)}
.story-pad-hint{font:800 clamp(9px,.95vw,13px) system-ui,sans-serif;color:#b5bdd5;letter-spacing:.5px}
@keyframes ff-story-pan{from{transform:scale(1) translateX(0)}to{transform:scale(1.055) translateX(-.4%)}}
@media(max-width:920px){.cinematic-home .home-content{padding:2.6% 2.5% 2%}.cinematic-home .home-content h1{font-size:clamp(36px,5.8vw,76px);margin:4px 0}.cinematic-home .home-buttons{gap:8px}.cinematic-home .home-buttons .big-button{padding:10px 14px;font-size:clamp(9px,1.25vw,15px)}.home-command{gap:5px}.home-minor-buttons .subtle-button{padding:4px 9px}.story-copy{top:11%;gap:10px}.story-copy p{min-height:50px}.story-actions .big-button,.story-actions .ghost-button{padding:10px 12px}}
@media(max-width:580px){.home-cover-art{background-position:53% center}.cinematic-home .home-content{padding:2% 2% 1%}.cinematic-home .home-content .eyebrow{font-size:5px;letter-spacing:1px}.cinematic-home .home-content h1{font-size:clamp(22px,6vw,34px);white-space:nowrap;-webkit-text-stroke:1px;letter-spacing:-.05em;margin:1px 0}.cinematic-home .home-content p{font-size:6px}.cinematic-home .home-buttons{gap:4px}.cinematic-home .home-buttons .big-button{font-size:6px;padding:7px 6px;border-width:1px;border-radius:3px}.home-command{gap:3px}.home-minor-buttons{gap:3px}.home-minor-buttons .subtle-button{font-size:5px;padding:3px 6px}.story-copy{left:5%;top:9%;width:63%;gap:5px}.story-copy .section-kicker{font-size:6px;letter-spacing:1px}.story-copy h2{font-size:clamp(18px,5.5vw,29px)}.story-copy p{font-size:7px;line-height:1.25;min-height:26px}.story-progress-track{height:3px;margin-top:0}.story-actions{gap:4px}.story-actions .big-button,.story-actions .ghost-button{font-size:6px;padding:6px 8px}.story-pad-hint{font-size:5px}}
@media(prefers-reduced-motion:reduce){.home-cover-art,.home-cover-sparks,.story-visual,.story-shimmer{animation:none}}

/* Reino da Gabi — epílogo ilustrado: as regiões livres da magia sombria. */
.ending-screen{display:block;padding:0;overflow:hidden;isolation:isolate;background:#13172b}
.restoration-showcase,.ending-celebration{position:absolute;inset:0;overflow:hidden}
.restoration-showcase{background:#1a2846}
.restoration-art{display:block;width:100%;height:100%;object-fit:cover;animation:ff-restored-pan 6s ease-out both}
.restoration-showcase::after{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#0b193caf,transparent 76%),linear-gradient(0deg,#0a1e45d8,transparent 28%,transparent 69%,#152b4b67)}
.restoration-magic{pointer-events:none;position:absolute;inset:-8%;z-index:1;mix-blend-mode:screen;opacity:.45;background:radial-gradient(circle at 14% 23%,#ffdc8d67,transparent 25%),radial-gradient(circle at 76% 27%,#fffaa94a,transparent 18%),radial-gradient(circle at 49% 74%,#e0be9e32,transparent 28%);animation:ff-restored-glitter 2.5s ease-in-out infinite alternate}
.restoration-caption{position:absolute;z-index:2;top:8%;left:6%;width:min(640px,58%);color:#fff9dc;text-shadow:0 3px 6px #13204c,0 1px 2px #0a1736}
.restoration-caption .section-kicker{color:#fff0a0;letter-spacing:2.5px;font-size:clamp(9px,1.2vw,17px)}
.restoration-caption h2{font:900 clamp(32px,5.4vw,78px)/1 Impact,'Arial Black',sans-serif;margin:9px 0 14px;color:#fff0ad;-webkit-text-stroke:1px #8a4e7b;text-shadow:3px 5px 0 #6b3769,0 0 18px #fff8ae7b}
.restoration-caption p{font-size:clamp(12px,1.55vw,21px);line-height:1.42;max-width:510px;font-weight:750;margin:0;color:#fff8e8}
.restoration-footer{position:absolute;z-index:2;left:6%;right:6%;bottom:6%;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.restoration-progress{font:900 clamp(21px,2.7vw,36px) system-ui,sans-serif;letter-spacing:8px;color:#ffe3a0;text-shadow:0 0 14px #ffbd74,0 2px 4px #281842}
.restoration-actions{display:flex;align-items:center;gap:10px}.restoration-actions button{font-size:clamp(11px,1vw,15px)}
.ending-celebration{display:flex;justify-content:space-between;align-items:flex-end;padding:2.7% 6%;gap:1.5%;background:linear-gradient(90deg,#250f3980 0%,#250d3833 40%,#261138a0 100%),url('assets/stages/kingdom/castle-restored-v42.webp') center/cover no-repeat}
.ending-celebration::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 23% 34%,#ffe5a581,transparent 24%),radial-gradient(circle at 79% 21%,#ffe1a967,transparent 23%),repeating-radial-gradient(circle at 62% 30%,transparent 0 46px,#ffea9577 47px,transparent 48px);animation:ff-restored-glitter 3s ease-in-out infinite alternate}
.ending-celebration>*{position:relative;z-index:1}
.ending-celebration .ending-gabi{height:91%;max-width:43%;object-position:bottom center;filter:drop-shadow(0 0 14px #fff4ba) drop-shadow(0 14px 15px #42264e)}
.ending-celebration .ending-copy{max-width:53%;margin:auto 0;background:#1f1533e8;border:3px solid #ffe7a0;border-radius:20px;padding:3%;box-shadow:0 0 30px #f1cf8145,7px 8px #25112c}
.ending-celebration .ending-copy .section-kicker{color:#ffe79d;letter-spacing:1px;font-weight:900}
.ending-celebration .ending-copy h2{font:900 clamp(28px,4.4vw,68px)/.98 Impact,'Arial Black',sans-serif;color:#ffe39e;margin:10px 0;text-shadow:3px 4px #98486f}
.ending-celebration .ending-copy p{font-size:clamp(12px,1.5vw,21px);color:#fff7dd;line-height:1.4}
@keyframes ff-restored-pan{from{transform:scale(1.045)}to{transform:scale(1)}}
@keyframes ff-restored-glitter{from{opacity:.48;transform:scale(.98)}to{opacity:.93;transform:scale(1.03)}}
@media(max-width:920px){.restoration-caption{top:7%}.restoration-caption h2{margin:6px 0}.restoration-footer{bottom:4%}.restoration-actions button{padding:8px 11px}.ending-celebration .ending-copy{padding:2%}}
@media(max-width:580px){.restoration-caption{top:4%;left:4%;width:69%}.restoration-caption .section-kicker{font-size:6px;letter-spacing:1px}.restoration-caption h2{font-size:clamp(16px,5vw,27px);margin:3px 0}.restoration-caption p{font-size:7px;line-height:1.25}.restoration-footer{bottom:3%;left:4%;right:4%}.restoration-progress{font-size:13px;letter-spacing:2px}.restoration-actions{gap:4px}.restoration-actions button{padding:5px 7px;font-size:6px}.ending-celebration .ending-copy h2{font-size:19px;margin:3px 0}.ending-celebration .ending-copy p{font-size:7px;line-height:1.25}.ending-celebration .ending-copy .section-kicker{font-size:6px}.ending-celebration .ending-copy button{padding:6px 8px;font-size:6px;margin:3px 2px 0 0}.ending-celebration .ending-gabi{height:84%}}
@media(prefers-reduced-motion:reduce){.restoration-art,.restoration-magic,.ending-celebration::before{animation:none}}

/* Game Over: humorous character-specific illustrations, no technical spoilers. */
.gameover-screen{display:block;overflow:hidden;isolation:isolate;background:#140b2b}
.gameover-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:ff-gameover-reveal .75s ease-out both}
.gameover-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,transparent 0%,#130d2b17 45%,#0a082ab0 62%,#07071bec 100%),linear-gradient(0deg,#09071a83,transparent 45%)}
.gameover-copy{position:absolute;z-index:2;right:5%;top:50%;transform:translateY(-50%);width:36%;display:flex;flex-direction:column;align-items:flex-start;gap:15px;text-align:left;color:#fff4e5;text-shadow:0 3px 6px #040116}
.gameover-copy .section-kicker{color:#ffe1aa;letter-spacing:2px;font-size:clamp(9px,1.18vw,17px)}
.gameover-copy h2{font:900 clamp(48px,7.2vw,110px)/.91 Impact,'Arial Black',sans-serif;letter-spacing:1px;margin:0;color:#ffe0a0;text-shadow:4px 5px 0 #9d3b71,0 0 23px #df7591b4;-webkit-text-stroke:1px #752861}
.gameover-copy p{margin:0;max-width:480px;font-weight:800;font-size:clamp(14px,1.55vw,22px);line-height:1.43}
.gameover-copy small{font:750 clamp(10px,1.1vw,15px)/1.35 system-ui,sans-serif;color:#a9ddef}
.gameover-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.gameover-actions button{font-size:clamp(10px,1.12vw,16px)}
@keyframes ff-gameover-reveal{from{transform:scale(1.025);filter:brightness(.5) saturate(.55)}to{transform:scale(1);filter:brightness(1) saturate(1)}}

/* The restored kingdom finale shows the five family members hugging Gabi. */
.ending-celebration{justify-content:flex-end;align-items:center;background:#f6d0b9}
.ending-celebration .ending-family-hug{position:absolute;z-index:0;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;filter:none}
.ending-celebration::before{z-index:1;background:linear-gradient(90deg,transparent 0%,#1a173206 54%,#1d163b7e 80%,#1b153aaf 100%);animation:none}
.ending-celebration .ending-copy{z-index:2;width:36%;max-width:36%;margin:0;background:#1e183fdb;border:2px solid #ffdfaa;border-radius:16px;padding:2.2%;box-shadow:0 0 35px #ffe5aa86,4px 7px 0 #4a2946}
.ending-celebration .ending-copy h2{font-size:clamp(23px,3.6vw,55px)}
.ending-celebration .ending-copy p{font-size:clamp(11px,1.3vw,18px)}
@media(max-width:920px){.gameover-copy{gap:8px}.gameover-actions{gap:5px}.gameover-actions button{padding:9px 12px}.ending-celebration .ending-copy{padding:1.6%}}
@media(max-width:580px){.gameover-copy{right:3%;width:41%;gap:3px}.gameover-copy .section-kicker{font-size:6px;letter-spacing:.5px}.gameover-copy h2{font-size:clamp(24px,6.5vw,40px);-webkit-text-stroke:0;text-shadow:2px 3px #9d3b71}.gameover-copy p{font-size:7px;line-height:1.25}.gameover-copy small{font-size:5px}.gameover-actions{margin-top:3px;gap:3px}.gameover-actions button{padding:5px 7px;font-size:6px}.ending-celebration .ending-copy{width:42%;max-width:42%;border-width:1px;padding:1.4%;border-radius:7px}.ending-celebration .ending-copy h2{font-size:16px}.ending-celebration .ending-copy p{font-size:6px}}
@media(prefers-reduced-motion:reduce){.gameover-art{animation:none}}

/* v18 — Desktop, tablet and phone: all scene layers share 16:9 coordinates. */
#frame{background:#090c1c}
#frame #arena{position:relative;z-index:0}
#frame #fighterLayer{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;background:transparent}
#frame .vignette{z-index:1}
#frame .hud{z-index:8;isolation:isolate}
#frame .fight-banner,#frame .combo-banner{z-index:7}
#frame .screen{z-index:10}
#frame .touch-pad{z-index:12}
.pause-overlay{position:absolute;inset:0;z-index:11;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none;text-align:center;background:rgba(7,7,24,.69);text-shadow:0 4px 10px #04030f}
.pause-overlay strong{font:900 clamp(46px,8vw,112px)/1 Impact,'Arial Black',sans-serif;color:#ffe4a1;letter-spacing:3px;-webkit-text-stroke:1px #622d5c;text-shadow:5px 7px #5b254f,0 0 24px #ffe38e73}
.pause-overlay span{font:850 clamp(12px,1.6vw,25px)/1.2 system-ui,sans-serif;color:#f4edfa}
.battle-load{width:100%;max-width:420px;margin:10px auto 2px;display:flex;flex-direction:column;gap:5px;text-align:center}
.battle-load-track{height:8px;border-radius:100px;overflow:hidden;background:#605b78}
.battle-load-track>div{width:0%;height:100%;background:linear-gradient(90deg,#48c9ff,#ffe194);transition:width .15s}
.battle-load small{font:800 11px/1.3 system-ui,sans-serif;color:#514361}
.orientation-hint{display:none}

/* Fullscreen still preserves the original artwork proportions and the playfield. */
#frame:fullscreen{width:100vw;height:100dvh;max-width:none;max-height:none;aspect-ratio:auto;border:0;border-radius:0;background:#050817;box-shadow:none}
#frame:fullscreen canvas{object-fit:cover;object-position:center center}

@media(pointer:coarse){
  body{overscroll-behavior:none;-webkit-user-select:none;user-select:none}
  #frame .touch-pad{display:none;position:absolute;left:2.2%;right:2.2%;bottom:max(2%,env(safe-area-inset-bottom));margin:0;align-items:flex-end;justify-content:space-between;gap:10px;pointer-events:none}
  #frame.fighting .touch-pad{display:flex}
  #frame .touch-pad>div{pointer-events:auto}
  #frame .touch-pad button{width:clamp(40px,4.7vw,55px);height:clamp(40px,4.7vw,55px);min-width:0;min-height:0;padding:0;border:2px solid #e9cb80a8;border-radius:13px;background:#17172ee8;box-shadow:0 3px 0 #080919b8;color:#fff5d1;font:900 clamp(14px,2.2vw,25px)/1 system-ui,sans-serif;touch-action:none;-webkit-tap-highlight-color:transparent}
  #frame .touch-pad button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
  #frame .touch-pad .touch-symbol{font:900 clamp(17px,2.5vw,28px)/1 system-ui,sans-serif;pointer-events:none}
  #frame .touch-pad small{font:900 clamp(6px,.84vw,10px)/1 system-ui,sans-serif;color:inherit;letter-spacing:-.15px;pointer-events:none}
  #frame .touch-pad button.pressed,#frame .touch-pad button:active{background:#ffdc79;color:#20142a;transform:scale(.94);border-color:#fff1c6}
  #frame .touch-direction{display:grid;grid-template-columns:repeat(3,clamp(40px,4.7vw,55px));grid-template-rows:repeat(2,clamp(40px,4.7vw,55px));gap:4px;align-items:end}
  #frame .touch-direction [data-touch=left]{grid-column:1;grid-row:2}
  #frame .touch-direction [data-touch=jump]{grid-column:2;grid-row:1}
  #frame .touch-direction [data-touch=crouch]{grid-column:2;grid-row:2}
  #frame .touch-direction [data-touch=right]{grid-column:3;grid-row:2}
  #frame .touch-actions{display:grid;grid-template-columns:repeat(6,clamp(40px,4.7vw,55px));grid-template-rows:repeat(2,clamp(40px,4.7vw,55px));gap:3px}
  #frame .touch-actions [data-touch=special],#frame .touch-actions [data-touch=super],#frame .touch-actions [data-touch=xray]{background:#763d96e8;border-color:#fad1f7}
  #frame .touch-actions [data-touch=punch],#frame .touch-actions [data-touch=kick],#frame .touch-actions [data-touch=punchStrong],#frame .touch-actions [data-touch=kickStrong]{background:#a04457e8;border-color:#ffd7b3}
  #frame .touch-actions [data-touch=xray]{background:#bd6022e8;border-color:#fff3a3}
  #frame .touch-actions #touchPause{background:#23243aaa;border-color:#aaa7c9;font-size:17px}
  #frame .hud{inset:clamp(5px,1.1vh,13px) clamp(7px,1.8vw,22px) auto}
  #frame .hud-name{font-size:clamp(9px,1.5vw,15px)}
  #frame .hud-center{flex-basis:clamp(49px,8vw,100px)}
  #frame .hud-center strong{font-size:clamp(20px,4.2vw,42px)}
  #frame .hud-name span{font-size:clamp(6px,1vw,10px)}
  #frame .life-outer{height:clamp(11px,2.6vh,23px)}
  #frame .meter-outer{height:clamp(6px,1.15vh,10px)}
}

/* Phone and tablet: proportional cover removes black bars on extra-wide screens. */
@media(pointer:coarse) and (orientation:landscape){
  html,body{height:100%;overflow:hidden;background:#050817}
  .app{width:100%;height:100dvh;max-width:none;margin:0}
  .app .topbar,.app .below,.app footer{display:none}
  .game-shell{margin:0;height:100dvh}
  #frame{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
  #frame canvas{object-fit:cover;object-position:center center}
  .cinematic-home .home-content h1{font-size:clamp(33px,5.7vw,77px)}
  .cinematic-home .home-buttons .big-button{padding:clamp(7px,1.45vw,15px) clamp(10px,1.9vw,24px);font-size:clamp(9px,1.6vw,16px)}
  .home-minor-buttons .subtle-button{font-size:clamp(8px,1.2vw,11px);padding:clamp(5px,.75vw,8px) clamp(8px,1.1vw,13px)}
  .story-copy p{font-size:clamp(10px,1.7vw,20px)}
  .story-actions .big-button,.story-actions .ghost-button{font-size:clamp(9px,1.3vw,14px)}
}

@media(pointer:coarse) and (orientation:portrait){
  .orientation-hint{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;z-index:999;background:radial-gradient(circle at 50% 38%,#623b98 0%,#181137 55%,#080a1a 100%);padding:30px;text-align:center;color:#fff0c2}
  .orientation-icon{font:900 84px/1 system-ui,sans-serif;color:#ffcb67;animation:turn-device 2.7s ease-in-out infinite}
  .orientation-hint strong{font:900 clamp(25px,7vw,42px)/1 Impact,'Arial Black',sans-serif;letter-spacing:2px}
  .orientation-hint p{font-size:clamp(14px,4vw,19px);line-height:1.5;max-width:320px;margin:0;color:#efe3fa}
  .orientation-hint button{margin-top:10px;font-size:14px}
  @keyframes turn-device{50%{transform:rotate(90deg)}}
}
@media(prefers-reduced-motion:reduce){.orientation-icon{animation:none}}

/* Extra game modes and configuration screens — responsive 16:9 overlay UI. */
.cinematic-home .home-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(840px,95%)}
.cinematic-home .home-buttons .big-button{font-size:clamp(10px,1.08vw,16px);padding:clamp(6px,1.05vw,12px) 6px}
.cinematic-home .home-buttons .gamepad-focus{outline:3px solid #7fe8ff;outline-offset:3px;box-shadow:0 0 20px #76dbffa8,0 3px 0 #090b26}
.home-minor-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.home-minor-buttons .subtle-button{font-size:clamp(8px,.95vw,12px);padding:5px 8px}
.fighter-grid{overflow-y:auto;scrollbar-width:thin;grid-template-columns:repeat(auto-fit,minmax(17%,1fr));align-content:start}
.fighter-card.selected-partner{border-color:#6effc3;box-shadow:0 0 18px #77ffd570}
.extra-screen{display:flex;justify-content:center;align-items:center;padding:2.5%;overflow:hidden;background:linear-gradient(122deg,#080d26f5,#311742f2 55%,#132845f6)}
.extra-panel{width:min(720px,100%);max-height:96%;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;align-items:center;gap:13px;padding:25px;background:#151a39ed;border:2px solid #ffd992;border-radius:16px;box-shadow:0 15px 65px #050615aa;color:#fff3dd}
.extra-panel.wide{width:min(1100px,100%)}
.extra-panel h2{font:900 clamp(24px,3.2vw,45px)/1 Impact,'Arial Black',sans-serif;letter-spacing:1px;text-align:center;margin:0;color:#ffdc9c;text-shadow:2px 3px #532447}
.extra-panel p{margin:2px 0;font:700 clamp(10px,1.25vw,16px)/1.4 system-ui,sans-serif;text-align:center}
.audio-sliders{width:min(580px,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px;row-gap:13px;margin:9px 0}
.audio-sliders label{display:grid;grid-template-columns:1fr auto;gap:4px;font:900 clamp(11px,1.4vw,17px) system-ui,sans-serif}
.audio-sliders output{color:#76e0ff}
.audio-sliders input{grid-column:1/-1;width:100%;accent-color:#ffcb74;cursor:pointer;min-height:25px}
.extra-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.unlock-grid{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.unlock-card{display:flex;flex-direction:column;align-items:center;overflow:hidden;border:2px solid #ffd995;border-radius:9px;background:#241b3a;padding:6px;gap:4px}
.unlock-card img{display:block;width:100%;height:clamp(55px,14vh,142px);object-fit:contain}
.unlock-card.locked img{filter:grayscale(1) brightness(.40)}
.unlock-card strong{font:900 clamp(9px,1.2vw,15px) system-ui,sans-serif}
.unlock-card small{font:800 clamp(7px,.8vw,11px) system-ui,sans-serif;color:#ffe2a6}
.moves-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:7px}
.moves-tabs button{background:#2b335a;border:2px solid #7e80b6;border-radius:6px;color:#fff0d4;font:800 clamp(10px,1.2vw,15px) system-ui,sans-serif;padding:8px 13px;cursor:pointer}
.moves-tabs button.active,.moves-tabs button:hover{background:#69477c;border-color:#ffe0a0}
.moves-detail{width:100%;display:grid;grid-template-columns:min(22%,210px) 1fr;align-items:center;gap:20px;background:#0a102b;border-radius:10px;padding:12px}
.moves-detail img{width:100%;max-height:250px;object-fit:contain}
.moves-detail h3{font:900 clamp(16px,2.1vw,26px) system-ui,sans-serif;color:#ffd897;margin:0}
.moves-detail p{text-align:left}
.moves-detail ul{columns:2;column-gap:24px;padding-left:18px;font:750 clamp(9px,1.09vw,13px)/1.5 system-ui,sans-serif}
.moves-detail li{break-inside:avoid;margin-bottom:6px}
.moves-detail{grid-template-columns:minmax(95px,18%) minmax(0,1fr);align-items:start;gap:15px}
.moves-character{text-align:center;min-width:0;position:sticky;top:0}
.moves-character img{width:100%;height:clamp(110px,20vh,195px);max-height:none;object-fit:contain;object-position:center bottom}
.moves-character h3{font-size:clamp(15px,1.8vw,25px);line-height:1.1;margin:4px 0}
.moves-character p{font-size:clamp(9px,1vw,12px);text-align:center;color:#d7cee4}
.moves-content{min-width:0;width:100%}
.moves-content>h3{font-size:clamp(16px,2.2vw,26px);margin-bottom:2px}
.moves-content>p{color:#d1d8e7;margin:0 0 10px;font-size:clamp(10px,1.1vw,13px)}
.attack-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:15px}
.attack-card{min-width:0;display:flex;flex-direction:column;gap:10px;padding:11px 7px;border:2px solid #6b79ad;border-radius:9px;background:linear-gradient(#253356,#151a34);text-align:center;box-shadow:0 3px 0 #070b1b}
.attack-card strong{font:900 clamp(11px,1.16vw,15px)/1.12 system-ui,sans-serif;letter-spacing:.3px;color:#fff5d5}
.attack-card.strong-punch{border-color:#e49e79;background:linear-gradient(#64404a,#2b1d35)}
.attack-card.weak-kick{border-color:#65b6d9;background:linear-gradient(#25486a,#16243d)}
.attack-card.strong-kick{border-color:#bf92ee;background:linear-gradient(#4b346b,#211735)}
.attack-keys{display:flex;justify-content:space-around;gap:3px}
.attack-keys span{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.attack-keys small{font:800 clamp(7px,.62vw,10px)/1 system-ui,sans-serif;color:#d5d1e2}
.attack-keys kbd{background:#fff3c9;color:#18203e;border:1px solid #9e98aa;box-shadow:0 2px 0 #62657a;font-size:clamp(11px,1.2vw,17px);padding:5px 7px;min-width:26px;margin:0}
.moves-sections{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.moves-sections section{min-width:0;background:#151d3c;border:1px solid #45496a;border-radius:8px;padding:10px}
.moves-sections h4{color:#ffd68d;font:900 clamp(12px,1.18vw,15px) system-ui,sans-serif;margin:1px 0 9px}
.moves-sections ul{columns:1;padding-left:16px;font:650 clamp(10px,.96vw,12px)/1.45 system-ui,sans-serif;margin:0;color:#ecedf7}
.moves-sections li{margin-bottom:8px}
.moves-sections li b{color:#ffdb92}
.moves-sections kbd{padding:1px 4px;font-size:clamp(9px,.83vw,11px)}
.intro-versus{gap:2.5%;height:clamp(140px,22vw,255px)}
.intro-versus .intro-bust{height:100%;width:40%;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent 0%,black 9%,black 91%,transparent 100%)}
.intro-versus .intro-bust img{height:110%;width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 7px 6px #0008)}
.intro-versus .intro-bust img.cursed{filter:brightness(.50) saturate(.43) sepia(.24) hue-rotate(208deg) drop-shadow(0 0 12px #a737e6);}
.intro-versus:has(img.cursed){background:linear-gradient(110deg,#a6a6d7,#4e315e 73%,#241536);border-color:#702d91}
.intro-versus .intro-bust img.full-boss{height:100%;width:100%;object-fit:cover;object-position:center 7%;align-self:flex-start;transform:scale(1.34);transform-origin:center top}
.intro-versus>strong{flex:none;z-index:2}
.gamepad-check{font:800 clamp(9px,1vw,14px) system-ui,sans-serif;color:#95ffcd;text-align:center}
.gallery-scene{position:relative;display:flex;align-items:end;overflow:hidden;width:100%;min-height:270px;border-radius:10px;background:#080a23}
.gallery-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery-scene>div{position:relative;margin-left:auto;width:48%;background:#100e31ce;padding:17px;color:#ffe3ae;text-shadow:0 2px 4px #000}
.gallery-scene h3{font:900 clamp(18px,2.1vw,28px) Impact,'Arial Black',sans-serif;margin:0 0 6px}
.gallery-scene p{text-align:left}
.training-hud,.tag-hud{position:absolute;z-index:8;top:20%;left:2%;display:flex;flex-direction:column;gap:3px;padding:7px 12px;border-radius:8px;border:1px solid #e6c986;background:#121c3ac9;color:#ffefbd;font:850 clamp(9px,1vw,14px) system-ui,sans-serif;pointer-events:auto}
.training-hud button{background:#744f79;border:1px solid #ffdfac;border-radius:5px;padding:4px;color:white;cursor:pointer}
.tag-hud{top:auto;bottom:14%;left:29%;right:29%;flex-direction:row;justify-content:space-around;text-align:center;font-size:12px}
@media(max-width:920px){
 .cinematic-home .home-buttons{gap:3px;width:88%}
 .cinematic-home .home-buttons .big-button{font-size:clamp(7px,1.2vw,10px);padding:6px 4px}
 .home-minor-buttons .subtle-button{font-size:7px;padding:3px 5px}
 .extra-panel{gap:5px;padding:12px;border-radius:8px}
 .extra-panel h2{font-size:clamp(16px,3.4vw,25px)}
 .extra-panel p{font-size:clamp(7px,1.3vw,11px)}
 .audio-sliders{column-gap:11px;row-gap:5px;margin:2px}.audio-sliders label{font-size:9px}.audio-sliders input{min-height:14px}
 .unlock-grid{gap:5px}.unlock-card img{height:clamp(35px,14vh,74px)}
 .moves-detail{gap:8px;padding:5px}.moves-detail img{max-height:115px}.moves-detail ul{font-size:8px;line-height:1.3}
 .moves-detail{grid-template-columns:minmax(50px,13%) minmax(0,1fr);gap:7px}.moves-character img{height:65px}.moves-character h3{font-size:10px}.moves-character p{font-size:7px}
 .moves-content>h3{font-size:13px}.moves-content>p{font-size:9px;margin-bottom:5px}
 .attack-map{gap:4px;margin-bottom:7px}.attack-card{padding:5px 2px;gap:4px;border-width:1px;border-radius:4px}.attack-card strong{font-size:8px}.attack-keys{gap:1px}.attack-keys small{font-size:5px}.attack-keys kbd{font-size:10px;padding:3px;min-width:15px}
 .moves-sections{gap:5px}.moves-sections section{padding:5px}.moves-sections h4{font-size:9px;margin:1px 0 3px}.moves-sections ul{font-size:8px;line-height:1.35;padding-left:10px}.moves-sections li{margin-bottom:5px}.moves-sections kbd{font-size:8px}
 .intro-versus{height:95px}.intro-versus .intro-bust img{height:115%}.intro-versus .intro-bust img.full-boss{height:100%;transform:scale(1.36)}
 .moves-tabs{gap:3px}.moves-tabs button{font-size:8px;padding:4px 7px}
 .gallery-scene{min-height:clamp(100px,38vh,210px)}.gallery-scene>div{padding:6px}
 .tag-hud{font-size:8px;bottom:18%}
 .training-hud{top:23%;font-size:8px}
}

/* v22 — Four clean entries on the cover, with genuinely navigable submenus. */
.game-shell:not(:has(#frame.fighting)) .below{display:none}
.cinematic-home .home-command{width:100%;gap:6px}
.cinematic-home .home-buttons.primary-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(700px,78%);gap:10px}
.cinematic-home .home-buttons.primary-menu .big-button{min-width:0;min-height:48px;padding:13px 19px;font-size:clamp(13px,1.6vw,21px);white-space:normal;line-height:1.05;letter-spacing:.3px}
.cinematic-home .home-buttons.primary-menu .gamepad-focus{outline:3px solid #78edff;outline-offset:3px;filter:brightness(1.13)}
.home-quiet-hint{font:800 clamp(8px,.85vw,12px)/1.3 system-ui,sans-serif;color:#ffedca;text-shadow:0 2px 5px #080410;letter-spacing:.6px}
.menu-screen{background:linear-gradient(115deg,#0b1028e8,#25103bdc 54%,#0b1d39e9);padding:2.2%;backdrop-filter:blur(6px)}
.menu-panel{width:min(860px,95%);max-height:98%;overflow:auto;display:flex;align-items:center;flex-direction:column;gap:clamp(8px,1.4vh,17px);padding:clamp(13px,2.2vw,30px);border:2px solid #ffda87;border-radius:16px;background:linear-gradient(135deg,#171936f7,#271637f7 80%);box-shadow:0 18px 70px #030619c9;text-align:center}
.menu-panel h2{margin:0;font:900 clamp(24px,3.8vw,49px)/1 Impact,'Arial Black',sans-serif;color:#ffdf94;letter-spacing:1.6px;text-shadow:3px 3px #5b2854}
.menu-panel p{max-width:620px;margin:0;color:#e5def5;font:750 clamp(11px,1.2vw,17px)/1.35 system-ui,sans-serif}
.mode-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
.mode-options button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;white-space:normal;min-height:66px;line-height:1.15}
.mode-options button small{font-size:clamp(8px,.95vw,12px);font-weight:700;opacity:.83}
.mode-options button.gamepad-focus,.difficulty-options button.gamepad-focus{outline:3px solid #79e9ff;outline-offset:3px}
.settings-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.difficulty-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.difficulty-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px 10px;min-height:135px;border:2px solid #6a769d;border-radius:12px;background:#202647;color:#fff3d2;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.difficulty-options button strong{font:900 clamp(16px,2.3vw,27px)/1.15 Impact,'Arial Black',sans-serif;letter-spacing:.5px}
.difficulty-options button small{font:700 clamp(9px,1vw,13px)/1.25 system-ui,sans-serif;color:#cfdaf5}
.difficulty-options button.selected{border-color:#ffdd8a;background:linear-gradient(135deg,#594072,#392b64);box-shadow:0 0 0 2px #ffc8607a,0 0 25px #bd70ff47;transform:translateY(-3px)}
.menu-actions{display:flex;justify-content:center;gap:12px;align-items:center;flex-wrap:wrap}
@media(max-width:920px){
 .cinematic-home .home-buttons.primary-menu{width:min(510px,83%);gap:5px}
 .cinematic-home .home-buttons.primary-menu .big-button{min-height:34px;padding:7px 9px;font-size:clamp(10px,1.55vw,14px);border-width:1px;border-radius:6px}
 .home-quiet-hint{font-size:8px}
 .menu-panel{gap:6px;padding:10px 14px;border-radius:8px}
 .menu-panel h2{font-size:clamp(19px,3vw,31px)}
 .menu-panel p{font-size:9px}
 .menu-panel .section-kicker{font-size:7px;letter-spacing:1px}
 .mode-options{gap:5px}.mode-options button{min-height:35px;padding:5px 6px;font-size:clamp(9px,1.3vw,13px)}
 .mode-options button small{font-size:clamp(7px,.85vw,10px)}
 .difficulty-options{gap:6px}.difficulty-options button{min-height:78px;padding:9px 5px;gap:4px}
 .difficulty-options button strong{font-size:clamp(11px,1.7vw,17px)}
 .difficulty-options button small{font-size:clamp(7px,.95vw,10px)}
 .menu-actions button,.menu-panel>.ghost-button{padding:8px 10px;font-size:9px}
}
@media(max-width:580px){
 .cinematic-home .home-buttons.primary-menu{width:84%;gap:4px}
 .cinematic-home .home-buttons.primary-menu .big-button{min-height:27px;padding:5px;font-size:clamp(8px,1.48vw,11px)}
 .home-quiet-hint{font-size:6px}
 .menu-panel{max-height:98%;padding:7px;gap:4px;border-width:1px}
 .menu-panel h2{font-size:17px}.mode-options{gap:4px}.mode-options button{min-height:27px;padding:4px;font-size:8px}
 .mode-options button small{font-size:6px}
 .difficulty-options button{min-height:56px;padding:5px}
 .difficulty-options button strong{font-size:10px}.difficulty-options button small{font-size:6px}
 .menu-panel .ghost-button{padding:5px 8px;font-size:7px}
}

/* v23 — Compact home navigation, spacious portraits and full uncropped endings. */
.cinematic-home .home-buttons.primary-menu{grid-template-columns:repeat(3,minmax(0,1fr));width:min(825px,86%)}
.cinematic-home .home-buttons.primary-menu .big-button{min-height:54px}
.select-screen{display:flex;flex-direction:column;gap:clamp(6px,1.1vh,12px);padding:2.3% 4% 2%;overflow:hidden}
.select-head,.select-bottom,.versus-selection{flex:none}
.select-head h2{margin:4px 0 0;font-size:clamp(23px,3.1vw,44px)}
.fighter-grid,.select-screen:has(.versus-selection:not(.hidden)) .fighter-grid{
  flex:1;min-height:0;height:auto;margin:0;gap:clamp(5px,.85vw,12px);
  grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);align-content:stretch;overflow-y:auto
}
.fighter-grid:not(:has(.fighter-card:nth-child(5))){width:min(1050px,100%);max-height:370px;align-self:center;margin:auto 0}
.fighter-grid:has(.fighter-card:nth-child(5)),
.select-screen:has(.versus-selection:not(.hidden)) .fighter-grid:has(.fighter-card:nth-child(5)){
  grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));max-height:520px;margin:auto 0
}
.fighter-card{min-height:0;isolation:isolate;border-radius:10px}
.fighter-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;transform:none;filter:drop-shadow(0 5px 8px #040315a0)}
.fighter-card img{top:0;bottom:auto;height:calc(100% - 46px);object-position:center 39%}
.fighter-card:hover img,.fighter-card.selected img{transform:scale(1.035)}
.fighter-card::after{background:linear-gradient(180deg,transparent 5%,transparent 57%,#0b1025b0 75%,#0c1027f5 100%)}
.fighter-meta{padding:16px 3px 8px;gap:2px}
.fighter-meta strong{font-size:clamp(15px,2vw,27px)}
.fighter-meta small{font-size:clamp(8px,.78vw,11px)}
.select-bottom{min-height:44px}
#galleryScreen .extra-panel{height:95%;max-height:95%;gap:clamp(4px,.7vh,10px);padding:clamp(8px,1.2vw,16px)}
.gallery-scene{flex:1;min-height:0;max-height:none;display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;overflow:hidden;background:#090d27}
.gallery-scene img{position:relative;inset:auto;display:block;width:100%;height:100%;min-height:0;object-fit:contain;object-position:center}
.gallery-scene>div{position:relative;margin:0;width:100%;padding:7px 14px;background:#130e2de5;display:flex;align-items:center;gap:14px}
.gallery-scene h3{font-size:clamp(14px,1.6vw,22px);flex:none;margin:0}
.gallery-scene p{font-size:clamp(9px,1.05vw,14px);margin:0;line-height:1.25}
.gameover-art,.restoration-art,.ending-celebration .ending-family-hug{object-fit:contain;object-position:center center}
.gameover-screen{background:#100b25}
.ending-celebration{background:#19102d}
.restoration-showcase{background:#1a2846}
@media(max-width:920px){
 .cinematic-home .home-buttons.primary-menu{width:86%;gap:6px}
 .cinematic-home .home-buttons.primary-menu .big-button{min-height:34px}
 .select-screen{padding:1.5% 2.8%;gap:4px}
 .select-head h2{font-size:clamp(16px,3vw,27px)}
 .fighter-meta{padding:8px 2px 4px}.fighter-meta strong{font-size:clamp(9px,1.75vw,17px)}.fighter-meta small{font-size:clamp(5px,.85vw,9px)}
 .select-bottom{min-height:29px}
 .gallery-scene{min-height:0}.gallery-scene>div{padding:4px 7px;gap:6px}.gallery-scene p{font-size:8px}
}
@media(max-width:580px){
 .cinematic-home .home-buttons.primary-menu{width:94%;gap:3px}
 .cinematic-home .home-buttons.primary-menu .big-button{min-height:29px;padding:5px 4px;font-size:clamp(7px,1.38vw,10px)}
 .select-head h2{font-size:clamp(13px,3vw,19px)}.select-head .section-kicker{font-size:6px}
 .fighter-meta strong{font-size:9px}.fighter-meta small{font-size:5px}
 .gallery-scene>div{display:block}.gallery-scene h3{font-size:10px}.gallery-scene p{font-size:6px}
}

/* Full first-run download: nothing in the game responds until assets are cached. */
.offline-gate{position:absolute;z-index:30;inset:0;display:flex;align-items:center;justify-content:center;padding:3%;background:linear-gradient(125deg,#080d22f8,#27153ff6 55%,#0c223bf8);color:#fff1d4}
.offline-gate.hidden{display:none}
.offline-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2vh,22px);text-align:center;width:min(660px,90%);padding:clamp(20px,3.2vw,46px);border:2px solid #ffe29a;border-radius:18px;background:linear-gradient(140deg,#151a38,#291b42);box-shadow:0 16px 50px #0009}
.offline-panel h2{font:900 clamp(25px,4.4vw,56px)/1 Impact,'Arial Black',sans-serif;letter-spacing:1px;margin:0;color:#ffdd90}
.offline-panel p{font:700 clamp(10px,1.25vw,17px)/1.4 system-ui,sans-serif;margin:0;max-width:530px}
.offline-progress{width:100%;height:clamp(12px,2.2vh,22px);overflow:hidden;border-radius:50px;border:2px solid #6e83a5;background:#090d24}
.offline-progress>div{height:100%;width:0%;background:linear-gradient(90deg,#4dddff,#ffd970);transition:width .17s ease-out}
#offlinePercent{font:900 clamp(22px,3vw,40px) system-ui,sans-serif;color:#78e5ff}
#offlineDetails{font:750 clamp(9px,1.2vw,15px)/1.35 system-ui,sans-serif;color:#cfdbef}
@media(max-width:680px){.offline-panel{gap:7px;padding:11px;border-radius:8px}.offline-panel h2{font-size:22px}.offline-panel p{font-size:8px}.offline-panel .section-kicker{font-size:7px}.offline-progress{height:12px}}

/* v25 — The Game Over illustration is a single 16:9 canvas: captions belong
   inside its deliberately empty right side, never in a separate footer. */
#galleryScreen .gallery-scene{display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}
#galleryScreen .gallery-art{position:relative;display:block;flex:none;width:auto;height:min(100%,56.25vw);max-width:100%;aspect-ratio:16/9;isolation:isolate;overflow:hidden}
#galleryScreen .gallery-art img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
#galleryScreen .gallery-copy{position:absolute;z-index:2;top:46%;right:3.5%;transform:translateY(-50%);width:38%;max-height:89%;margin:0;padding:clamp(6px,1vw,15px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(5px,1vw,12px);overflow:auto;border:1px solid #ffe4ae69;border-radius:12px;background:linear-gradient(100deg,#121026b3,#100c2bcb);color:#fff0cf;text-shadow:0 2px 4px #000}
#galleryScreen .gallery-copy h3{margin:0;font:900 clamp(13px,1.65vw,26px)/1.06 Impact,'Arial Black',sans-serif;color:#ffda91}
#galleryScreen .gallery-copy p{margin:0;font:750 clamp(9px,1.04vw,15px)/1.28 system-ui,sans-serif;text-align:left;overflow-wrap:break-word}
.cpu-team-options{flex:none;display:flex;justify-content:center;align-items:center;gap:clamp(4px,1vw,12px);flex-wrap:wrap}
.cpu-team-options.hidden{display:none}
.cpu-team-options button{font:800 clamp(9px,1.1vw,14px)/1.1 system-ui,sans-serif;padding:7px 13px;min-height:32px;border-color:#7ee7ed;color:#a3fff4}
.cpu-team-options button:hover{background:#226775}
#rosterScreen #lockAll:disabled{opacity:.42;cursor:default}
@media(max-width:920px){
 #galleryScreen .gallery-copy{width:40%;padding:5px 7px;gap:3px;border-radius:5px}
 #galleryScreen .gallery-copy h3{font-size:clamp(9px,1.55vw,15px)}
 #galleryScreen .gallery-copy p{font-size:clamp(7px,.95vw,10px);line-height:1.19}
 .cpu-team-options button{padding:4px 7px;min-height:23px;font-size:9px}
}
@media(max-width:580px){
 #galleryScreen .gallery-copy{right:2%;top:50%;width:44%;padding:3px 5px;gap:2px;border-width:0;background:#130b2acc}
 #galleryScreen .gallery-copy h3{font-size:clamp(8px,2.5vw,13px)}
 #galleryScreen .gallery-copy p{font-size:clamp(6px,1.55vw,9px);line-height:1.13}
 .cpu-team-options button{min-height:19px;font-size:7px;padding:3px 5px}
}

/* v30 — Home and exit controls; a mobile arena that never sits beneath the buttons. */
#frame .fight-home{position:absolute;top:91px;left:10px;z-index:14;display:block;padding:7px 11px;border:1px solid #ffe4ab;border-radius:8px;background:#181e3df0;color:#fff0c9;font:900 12px/1 system-ui,sans-serif;box-shadow:0 3px 0 #070b19;touch-action:manipulation}
#frame .fight-home:active{background:#edb94f;color:#16152c}
.cinematic-home .exit-home-button{padding:6px 16px;border:1px solid #e6c7b58c;border-radius:7px;color:#ffdbcb;background:#26182ecb;font:850 clamp(9px,1vw,13px)/1 system-ui,sans-serif;letter-spacing:.4px}
.cinematic-home .exit-home-button.gamepad-focus{outline:2px solid #7fe8ff;outline-offset:2px}
.exit-panel p{max-width:590px}

@media(pointer:coarse) and (orientation:landscape){
  #frame{--ff-dock:clamp(104px,28dvh,156px);--ff-btn:clamp(42px,5.1vw,57px)}
  #frame.fighting{background:linear-gradient(180deg,#090e22 0%,#13152b 70%,#11112a 100%)}
  /* Preserve the original 16:9 camera without stretching the fighters. */
  #frame.fighting canvas{position:absolute;inset:0 0 auto;width:100%;height:calc(100% - var(--ff-dock));object-fit:contain;object-position:center center}
  #frame.fighting .vignette{bottom:var(--ff-dock)}
  #frame.fighting .hud{top:38px;bottom:auto;left:8px;right:8px;gap:6px}
  #frame.fighting .hud-center{flex-basis:clamp(54px,8vw,90px)}
  #frame.fighting .fight-home{top:5px;left:7px;padding:6px 12px;font-size:clamp(10px,1.4vw,14px)}
  #frame.fighting .fight-banner{top:33%}
  #frame.fighting .combo-banner{bottom:calc(var(--ff-dock) + 3%);font-size:clamp(18px,2.6vw,37px)}
  #frame.fighting .pause-overlay{bottom:var(--ff-dock)}
  #frame.fighting .touch-pad{left:0;right:0;bottom:0;height:var(--ff-dock);margin:0;padding:5px clamp(8px,1.7vw,22px);gap:clamp(5px,1.4vw,17px);justify-content:space-between;align-items:center;border-top:2px solid #9078ac;background:linear-gradient(180deg,#141733,#090b20 88%);box-shadow:inset 0 5px 12px #060718;pointer-events:none}
  #frame.fighting .touch-direction{grid-template-columns:repeat(3,var(--ff-btn));grid-template-rows:repeat(2,var(--ff-btn));gap:4px}
  #frame.fighting .touch-actions{grid-template-columns:repeat(6,var(--ff-btn));grid-template-rows:repeat(2,var(--ff-btn));gap:4px}
  #frame.fighting .touch-pad button{width:var(--ff-btn);height:var(--ff-btn);min-width:0;min-height:0;box-shadow:0 2px 0 #040718}
  #frame.fighting .touch-pad .touch-symbol{font-size:clamp(17px,2.7vw,26px)}
  #frame.fighting .touch-pad small{font-size:clamp(6px,.85vw,10px)}
  .cinematic-home .exit-home-button{padding:clamp(4px,.8vw,8px) clamp(9px,1.5vw,18px);font-size:clamp(8px,1vw,12px)}
}

/* Arena mobile imersiva: analógico e três ações ao alcance dos polegares. */
#frame .mobile-fight-controls{display:none}
.mobile-moves-tip{display:none}
@media(pointer:coarse){
  #frame.fighting{background:#19242b}
  /* Preenche a tela sem distorcer personagens: corta apenas a sobra vertical do 16:9. */
  #frame.fighting #arena,#frame.fighting #fighterLayer{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center
  }
  #frame.fighting .vignette{inset:0}
  #frame.fighting .touch-pad{display:none}
  #frame.fighting .mobile-fight-controls{position:absolute;inset:0;z-index:12;display:block;pointer-events:none}
  #frame.fighting .mobile-fight-controls button{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;border:2px solid #efd8a99c;box-shadow:0 3px 0 #0b151eaa,0 4px 13px #0b151e70;color:#fff8dd;background:#182333cd;text-shadow:0 1px 2px #090d17;border-radius:100%;padding:0}
  #frame.fighting .mobile-fight-controls button.pressed,#frame.fighting .mobile-fight-controls button:active{transform:scale(.94);background:#ecb862ed;color:#182033;border-color:#fff1ca}
  /* Dual-stick inspired rubber thumb cap with a real 360-degree drag surface. */
  #frame.fighting .mobile-joystick{--stick-size:clamp(106px,17.5vw,170px);position:absolute;left:max(2%,env(safe-area-inset-left));bottom:max(3%,env(safe-area-inset-bottom));width:var(--stick-size);height:var(--stick-size);border-radius:50%;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;border:5px solid #8a91a6b8;background:radial-gradient(circle at 50% 45%,#101c2dea 0 49%,#293343ee 59%,#101a2be9 70%,#050a16ee 100%);box-shadow:inset 0 0 0 3px #141729, inset 0 6px 12px #02040aca,0 4px 11px #030710b8}
  #frame.fighting .mobile-joystick::before{content:'';position:absolute;inset:9px;border:2px solid #b4bfd16b;border-radius:50%;box-shadow:inset 0 0 12px #01030eac,0 0 0 2px #090f1b65;pointer-events:none}
  #frame.fighting .mobile-joystick-thumb{position:absolute;left:50%;top:50%;width:47%;height:47%;border:3px solid #878d9d;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 36% 27%,#485064,#252d3d 50%,#0d1220 93%);box-shadow:inset 0 2px 2px #dae5fc28,inset 0 -7px 7px #070b17c7,0 4px 8px #01030bcc,0 0 0 3px #0a1221cb;pointer-events:none;will-change:transform}
  #frame.fighting .mobile-joystick-thumb::after{content:'';position:absolute;inset:10%;border:1px solid #a5aeba40;border-radius:50%;box-shadow:inset 0 0 10px #0007}
  #frame.fighting .mobile-joystick.active{border-color:#c3d4ebd9;box-shadow:inset 0 0 0 3px #151b2c,inset 0 6px 12px #02040acc,0 0 15px #73bdff50,0 4px 11px #030710b8}
  #frame.fighting .mobile-action-pair{position:absolute;right:max(2%,env(safe-area-inset-right));bottom:max(6%,env(safe-area-inset-bottom));display:flex;flex-direction:row;gap:clamp(8px,1.6vw,20px);align-items:flex-end;pointer-events:none}
  #frame.fighting .mobile-action-pair button{--action:clamp(64px,10.5vw,118px);width:var(--action);height:var(--action);font-weight:950}
  #frame.fighting .mobile-action-pair .mobile-main-action span{font-size:clamp(25px,3.3vw,45px);font-family:system-ui,sans-serif;pointer-events:none}
  #frame.fighting .mobile-action-pair .mobile-main-action small{font:900 clamp(9px,1.22vw,16px)/1.2 system-ui,sans-serif;letter-spacing:.4px;pointer-events:none}
  #frame.fighting .mobile-action-pair .mobile-attack{background:#863d37c9;border-color:#ffca9f}
  #frame.fighting .mobile-action-pair .mobile-magic{background:#554285cd;border-color:#e9d0ff}
  #frame.fighting .mobile-action-pair .mobile-special:disabled{background:#222a37bc;border-color:#8893a079;color:#a3a8af;box-shadow:0 2px 0 #0b151e82;opacity:.68;pointer-events:none;filter:saturate(.45)}
  #frame.fighting .mobile-action-pair .mobile-special.charged{background:linear-gradient(145deg,#d68e25,#ffc954);border-color:#fff7be;color:#24152d;box-shadow:0 0 0 2px #fff0a2a6,0 0 20px #ffd46ab8,0 3px 0 #3c2d17;animation:ff-magic-ready 1.3s ease-in-out infinite alternate}
  #frame.fighting .mobile-action-pair .mobile-special.charged.pressed{background:#fff0a5;transform:scale(.94)}
  #frame.fighting .mobile-action-pair .mobile-special small{font-size:clamp(9px,1.17vw,15px);letter-spacing:.15px}
  #frame.fighting .mobile-action-pair .mobile-extra-tag{--action:clamp(43px,6vw,69px);font-size:22px;gap:2px;background:#29474ccd;border-color:#a4f6df}
  #frame.fighting .mobile-action-pair .mobile-extra-tag:not(.hidden){position:absolute;right:0;bottom:calc(100% + 6px)}
  #frame.fighting .mobile-action-pair .mobile-extra-tag small{font-size:8px}
  #frame.fighting .mobile-top-pause{position:absolute;top:clamp(5px,1vh,13px);right:max(1%,env(safe-area-inset-right));width:clamp(34px,4vw,52px);height:clamp(34px,4vw,52px);font-size:clamp(17px,2vw,26px);background:#192636c9;border-radius:12px}
  #frame.fighting .fight-home{top:clamp(5px,1vh,13px);left:max(1%,env(safe-area-inset-left));font-size:clamp(10px,1.4vw,14px);padding:clamp(7px,1.1vh,11px) clamp(10px,1.8vw,19px);z-index:13}
  #frame.fighting .hud{top:clamp(5px,1vh,13px);bottom:auto;left:clamp(91px,10vw,160px);right:clamp(50px,6vw,90px);gap:clamp(6px,1.5vw,23px)}
  #frame.fighting .hud-center{flex-basis:clamp(42px,6.4vw,78px);min-width:0}
  #frame.fighting .hud-center strong{font-size:clamp(19px,3.1vw,35px)}
  #frame.fighting .hud-center>span{font-size:clamp(6px,.8vw,10px)}
  #frame.fighting .round-score{top:100%;padding:2px 4px;gap:clamp(2px,.6vw,8px);white-space:nowrap;border-width:1px}
  #frame.fighting .round-score em{font-size:clamp(6px,.8vw,10px)}
  #frame.fighting .round-score b{font-size:clamp(7px,.9vw,11px)}
  #frame.fighting .hud-name{font-size:clamp(9px,1.55vw,17px)}
  #frame.fighting .hud-name span{font-size:clamp(6px,.8vw,11px)}
  #frame.fighting .life-outer{height:clamp(16px,2.9vh,23px);border-width:2px;margin-top:4px}
  #frame.fighting .meter-outer{height:clamp(6px,1.15vh,9px);border:1px solid #0e1524;margin-top:3px;background:#0d1931;box-shadow:0 0 0 1px #abc0d15e}
  #frame.fighting .meter-fill{transition:width .12s ease-out;box-shadow:inset 0 1px 2px #fff8,0 0 7px #6eb7ff6e}
  #frame.fighting .energy-readout{display:block;font:900 clamp(10px,1.15vw,14px)/1.1 system-ui,sans-serif;color:#bce9ff;text-shadow:0 1px 3px #081122;margin-top:3px;letter-spacing:.45px}
  #frame.fighting .hud-right .energy-readout{color:#f0caff}
  #frame.fighting .fight-banner{top:24%}
  #frame.fighting .combo-banner{bottom:26%;left:28%;font-size:clamp(17px,3.3vw,34px)}
  #frame.fighting .pause-overlay{inset:0}
  .mobile-moves-tip{display:block;background:#273e49b8;border-left:3px solid #d8c68e;padding:8px 11px;line-height:1.35}
}
@keyframes ff-magic-ready{from{filter:brightness(.95)}to{filter:brightness(1.16)}}
.energy-readout{display:none}
@media(prefers-reduced-motion:reduce){#frame.fighting .mobile-action-pair .mobile-special.charged{animation:none}}

/* v35 — Combat status stays near the screen edges, never across the fighters. */
#frame.fighting .fight-banner{
  top:24%;left:50%;right:auto;bottom:auto;transform:translateX(-50%);
  width:max-content;max-width:52%;box-sizing:border-box;padding:5px 12px;
  border:1px solid #ffdda05e;border-radius:30px;background:#0a1024c9;
  font:900 clamp(14px,1.8vw,23px)/1.15 system-ui,sans-serif;
  color:#ffe3a0;text-shadow:0 2px 3px #070915;letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none
}
#frame.fighting .combo-banner{
  top:33%;left:2.5%;right:auto;bottom:auto;transform:none;
  box-sizing:border-box;max-width:36%;padding:4px 10px;
  border-left:3px solid #efbd80;border-radius:0 9px 9px 0;
  background:#0a1024b8;font:850 clamp(12px,1.45vw,20px)/1.15 system-ui,sans-serif;
  color:#fff1d2;text-shadow:0 1px 3px #100c17;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none
}
@media(pointer:coarse){
  #frame.fighting .fight-banner{top:23%;max-width:45%;padding:3px 8px;font-size:clamp(11px,1.35vw,16px)}
  #frame.fighting .combo-banner{top:30%;left:1.5%;max-width:30%;padding:3px 7px;font-size:clamp(10px,1.2vw,14px)}
}

/* v37 — Round starts and wins use the classic full-size arcade callout;
   ordinary combat notifications and combo badges stay discreet. */
#frame.fighting .fight-banner.major{
  top:39%;left:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%) rotate(-2deg);
  width:max-content;max-width:94%;padding:0;
  border:none;border-radius:0;background:transparent;
  font:900 clamp(32px,5.3vw,83px)/.98 Impact,'Arial Black',sans-serif;
  letter-spacing:1px;color:#fff1b9;
  text-shadow:4px 5px 0 #79345b,0 0 20px #070713,0 0 8px #09091c;
  -webkit-text-stroke:1px #4d2145;
  white-space:normal;overflow:visible;text-overflow:clip;text-align:center;
}
@media(pointer:coarse){
  #frame.fighting .fight-banner.major{top:37%;max-width:92%;font-size:clamp(25px,4.7vw,65px)}
}