/* ═══════════════════════════════════════════
   PET FIGHTER — DEICLER-STYLE UI v1
   ═══════════════════════════════════════════ */
:root{
  --bg:#0a0618;--ink:#f0ece4;--muted:#b0a8d0;
  --accent:#ff5fa2;--accent2:#7cf7ff;--gold:#ffd54f;--green:#7dff90;
  --glass:rgba(255,255,255,.06);--border:rgba(255,255,255,.1);
  --perfect:#7cf7ff;--great:#ffd54f;--miss:#ff5fa2;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{min-height:100%;background:var(--bg);color:var(--ink);font-family:'Outfit',sans-serif;overflow:hidden}
button{cursor:pointer;border:0;color:var(--ink);font:inherit;background:none}
.hidden{display:none!important}

/* ═ SCREENS ═ */
.screen{display:none;position:fixed;inset:0;flex-direction:column}
.screen.active{display:flex}
.scr-inner{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;overflow-y:auto;background:linear-gradient(170deg,#0a0618,#1a0f30 50%,#0a0618)}
.scr-title{font-family:'Bangers',cursive;font-size:clamp(1.5rem,4.5vw,2.6rem);text-align:center;letter-spacing:.04em}
.scr-hint{color:var(--muted);font-size:.85rem}
.scr-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ═ BUTTONS ═ */
.btn{padding:14px 28px;border-radius:14px;font-weight:800;font-size:.95rem;transition:transform .18s,box-shadow .18s;text-align:center}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.95)}.btn:disabled{opacity:.35;pointer-events:none}
.btn-sm{padding:10px 16px;font-size:.82rem}
.btn-accent{background:linear-gradient(135deg,#ff5fa2,#d4408a);color:#fff;box-shadow:0 6px 24px rgba(255,95,162,.3)}
.btn-glass{background:var(--glass);border:1px solid var(--border)}
.btn-dark{background:#0a0a0a;color:#fff;border:1.5px solid rgba(255,255,255,.15);box-shadow:0 6px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);text-shadow:none}
.btn-dark:hover,.btn-dark:focus{background:#181818;border-color:rgba(255,255,255,.28);box-shadow:0 8px 28px rgba(0,0,0,.7)}
.btn-credits{background:linear-gradient(135deg,rgba(255,213,79,.12),rgba(157,78,221,.12));color:#ffd54f;border:1.5px solid rgba(255,213,79,.3);box-shadow:0 4px 16px rgba(255,213,79,.08)}
.btn-credits:hover{background:linear-gradient(135deg,rgba(255,213,79,.22),rgba(157,78,221,.18));border-color:rgba(255,213,79,.55);box-shadow:0 6px 22px rgba(255,213,79,.18)}
.credits-card{text-align:center;padding:32px 28px 28px}
.credits-header{margin-bottom:20px}
.credits-paws{font-size:2.2rem;display:block;margin-bottom:6px}
.credits-title{font-family:'Dela Gothic One',sans-serif;font-size:clamp(1.4rem,4vw,2rem);margin:0 0 4px;background:linear-gradient(135deg,#ffd54f,#ff5fa2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.credits-sub{color:var(--muted);font-size:.82rem;margin:0}
.credits-body{background:rgba(255,255,255,.04);border-radius:16px;padding:20px;border:1px solid rgba(255,255,255,.07)}
.credits-role{font-size:.72rem;font-weight:800;letter-spacing:2px;color:var(--accent2);text-transform:uppercase;margin-bottom:14px}
.credits-names{display:flex;flex-direction:column;gap:12px}
.credits-person{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.05);border-radius:12px;padding:12px 16px;border:1px solid rgba(255,255,255,.07);text-align:left}
.credits-avatar{font-size:2rem;line-height:1;flex-shrink:0}
.credits-name{font-family:'Dela Gothic One',sans-serif;font-size:1.1rem;color:#fff8ef;line-height:1.2}
.credits-tag{font-size:.72rem;color:var(--muted);margin-top:2px}
.credits-divider{height:1px;background:rgba(255,255,255,.07);margin:16px 0}
.credits-made{font-size:.88rem;color:#fff8ef;font-weight:600;margin-bottom:4px}
.credits-version{font-size:.72rem;color:var(--muted)}
.chip-btn{width:42px;height:42px;border-radius:50%;background:var(--glass);border:1px solid var(--border);font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.chip-btn:hover{transform:scale(1.1)}

/* ═ MENU ═ */
#menuScreen{align-items:center;justify-content:center}
.menu-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.menu-bg img{width:100%;height:100%;object-fit:cover}
/* Rich CSS arena background — visible behind/under the image */
.menu-bg::before{content:'';position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse at 50% 15%,rgba(255,95,162,.18) 0%,transparent 45%),
  radial-gradient(ellipse at 15% 60%,rgba(124,247,255,.12) 0%,transparent 40%),
  radial-gradient(ellipse at 85% 60%,rgba(255,213,79,.10) 0%,transparent 40%),
  radial-gradient(ellipse at 50% 85%,rgba(157,78,221,.15) 0%,transparent 35%),
  linear-gradient(180deg,#0f0520 0%,#1a0a35 25%,#12062a 50%,#0a0418 75%,#050210 100%)}
.menu-bg::after{content:'';position:absolute;inset:0;z-index:-1;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.015) 2px,rgba(255,255,255,.015) 4px),
    radial-gradient(circle at 20% 20%,rgba(124,247,255,.04) 0%,transparent 2%),
    radial-gradient(circle at 65% 12%,rgba(255,95,162,.03) 0%,transparent 1.5%),
    radial-gradient(circle at 80% 25%,rgba(255,213,79,.04) 0%,transparent 2%),
    radial-gradient(circle at 35% 8%,rgba(255,255,255,.06) 0%,transparent 1%),
    radial-gradient(circle at 50% 18%,rgba(124,247,255,.03) 0%,transparent 1.5%),
    radial-gradient(circle at 90% 10%,rgba(255,255,255,.05) 0%,transparent 1%),
    radial-gradient(circle at 10% 15%,rgba(255,95,162,.04) 0%,transparent 1.5%)}
.menu-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,6,24,.65) 0%,rgba(10,6,24,.35) 30%,rgba(10,6,24,.50) 60%,rgba(10,6,24,.85) 100%)}
.menu-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;padding:20px;max-width:420px}
.menu-logo{width:clamp(200px,50vw,380px);filter:drop-shadow(0 4px 24px rgba(255,95,162,.25)) brightness(1.1);animation:logoBob 3.5s ease-in-out infinite}
@keyframes logoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.menu-title{font-family:'Dela Gothic One',sans-serif;font-size:clamp(1.2rem,3.2vw,2rem);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 24px rgba(255,95,162,.25)}
.menu-sub{color:var(--muted);font-size:.88rem;text-align:center;line-height:1.45}
.menu-btns{display:flex;flex-direction:column;gap:10px;width:100%}
.menu-foot{display:flex;gap:10px;margin-top:6px}

/* ═ CHAR SELECT ═ */
.char-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:min(96%,520px)}
.char-card{width:100%;border-radius:22px;padding:12px;text-align:center;border:2px solid transparent;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));transition:transform .22s,border-color .22s,box-shadow .22s}
.char-card:hover{transform:translateY(-6px);border-color:rgba(255,95,162,.4);box-shadow:0 12px 32px rgba(255,95,162,.1)}
.char-card.selected{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,213,79,.2);transform:translateY(-4px)}
.char-card.selected-online{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(124,247,255,.25);transform:translateY(-4px)}
.char-img{height:clamp(100px,22vh,200px);display:flex;align-items:flex-end;justify-content:center;border-radius:16px;overflow:hidden;background:radial-gradient(ellipse at bottom,rgba(255,95,162,.08),transparent 70%);position:relative}
.char-img img{max-height:100%;max-width:92%;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.char-img .pose-anim{display:none}
/* When card is selected, cycle through poses */
/* Poses alternas desactivadas — solo se muestra idle */
.char-card.selected .pose-idle{filter:drop-shadow(0 0 12px rgba(255,213,79,.5))}
.char-card h3{font-family:'Dela Gothic One',sans-serif;font-size:1rem;margin:8px 0 2px}
.char-card p{color:var(--muted);font-size:.72rem}
.char-stats{display:grid;gap:4px;margin-top:6px}
.char-stat{display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--muted)}
.char-stat span{width:28px;font-weight:700}
.stat-bar{flex:1;height:5px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.stat-bar div{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent2),var(--accent))}

/* ═ SCENARIO SELECT (improved) ═ */
.scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(92%,480px)}
.scenario-card{border-radius:22px;padding:0;text-align:center;border:2px solid transparent;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));transition:transform .22s,border-color .22s,box-shadow .22s;overflow:hidden}
.scenario-card:hover{transform:translateY(-6px);border-color:rgba(124,247,255,.4);box-shadow:0 12px 32px rgba(124,247,255,.1)}
.scenario-card.selected{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,213,79,.2);transform:translateY(-4px)}
.scenario-preview{height:clamp(90px,18vh,160px);position:relative;overflow:hidden;border-radius:14px 14px 0 0}
.scenario-preview img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.scenario-card:hover .scenario-preview img{transform:scale(1.06)}
.scenario-body{padding:10px 12px 14px}
.scenario-icon{font-size:1.4rem;margin-bottom:4px}
.scenario-card h3{font-family:'Dela Gothic One',sans-serif;font-size:clamp(.78rem,1.8vw,.95rem);margin:0 0 2px}
.scenario-card p{color:var(--muted);font-size:.68rem;margin:0}

/* ═ SONG SELECT ═ */
.song-list{display:flex;flex-direction:column;gap:8px;width:min(92%,420px);max-height:50vh;overflow-y:auto;padding:4px}
.song-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--glass);border:1px solid var(--border);cursor:pointer;transition:transform .18s,border-color .18s}
.song-card:hover{transform:translateX(4px);border-color:var(--accent)}
.song-card.selected{border-color:var(--gold);background:rgba(255,213,79,.06)}
.song-icon{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.song-info{flex:1;min-width:0}
.song-name{font-weight:800;font-size:.92rem}
.song-genre{color:var(--muted);font-size:.78rem}
.song-meta{display:flex;gap:6px;margin-top:3px;align-items:center}
.song-tag{padding:2px 7px;border-radius:999px;font-size:.66rem;font-weight:700}
.tag-edm{background:rgba(124,247,255,.12);color:var(--accent2)}
.tag-chip{background:rgba(255,213,79,.12);color:var(--gold)}
.tag-funk{background:rgba(255,95,162,.12);color:var(--accent)}
.tag-battle{background:rgba(125,255,144,.12);color:var(--green)}

/* ═ DIFFICULTY SELECT — Pet Fighter style ═ */
.diff-inner{background:
  radial-gradient(ellipse at 30% 80%,rgba(255,95,162,.06),transparent 50%),
  radial-gradient(ellipse at 70% 80%,rgba(124,247,255,.06),transparent 50%),
  linear-gradient(170deg,#0a0618,#1a0f30 50%,#0a0618)!important}
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(96%,580px);margin:0 auto}
.diff-card{position:relative;border-radius:22px;padding:26px 16px 22px;text-align:center;border:2px solid transparent;background:rgba(255,255,255,.04);transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .2s,background .2s;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:0}
.diff-card::before{content:'';position:absolute;inset:0;border-radius:20px;opacity:0;transition:opacity .25s}
.diff-card:hover{transform:translateY(-8px) scale(1.02)}
.diff-card:hover::before{opacity:1}
.diff-card:active{transform:scale(.97)}
/* Cachorro — cyan/teal */
.diff-rookie{border-color:rgba(124,247,255,.18)}
.diff-rookie::before{background:radial-gradient(ellipse at 50% 0%,rgba(124,247,255,.12),transparent 70%)}
.diff-rookie:hover{border-color:rgba(124,247,255,.6);box-shadow:0 16px 40px rgba(124,247,255,.2),0 0 0 1px rgba(124,247,255,.15)}
/* Callejero — gold */
.diff-fighter{border-color:rgba(255,213,79,.25);background:rgba(255,213,79,.03)}
.diff-fighter::before{background:radial-gradient(ellipse at 50% 0%,rgba(255,213,79,.15),transparent 70%)}
.diff-fighter:hover{border-color:rgba(255,213,79,.7);box-shadow:0 16px 40px rgba(255,213,79,.22),0 0 0 1px rgba(255,213,79,.2)}
/* Alfa — pink/red */
.diff-legend{border-color:rgba(255,95,162,.18)}
.diff-legend::before{background:radial-gradient(ellipse at 50% 0%,rgba(255,95,162,.14),transparent 70%)}
.diff-legend:hover{border-color:rgba(255,95,162,.65);box-shadow:0 16px 40px rgba(255,95,162,.22),0 0 0 1px rgba(255,95,162,.15)}
/* Badge */
.diff-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#ffd54f,#f59e0b);color:#0a0618;font-size:.58rem;font-weight:900;letter-spacing:.1em;padding:3px 10px;border-radius:0 0 8px 8px;white-space:nowrap}
/* Icon wrap */
.diff-icon-wrap{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:14px;transition:transform .25s;position:relative}
.diff-card:hover .diff-icon-wrap{transform:scale(1.15) rotate(-4deg)}
.diff-rookie .diff-icon-wrap{background:rgba(124,247,255,.1);border:1.5px solid rgba(124,247,255,.25);box-shadow:0 4px 16px rgba(124,247,255,.1)}
.diff-fighter .diff-icon-wrap{background:rgba(255,213,79,.1);border:1.5px solid rgba(255,213,79,.25);box-shadow:0 4px 16px rgba(255,213,79,.1)}
.diff-legend .diff-icon-wrap{background:rgba(255,95,162,.1);border:1.5px solid rgba(255,95,162,.25);box-shadow:0 4px 16px rgba(255,95,162,.1)}
/* Text */
.diff-card h3{font-family:'Bangers',cursive;font-size:clamp(1.1rem,2.5vw,1.4rem);margin:0 0 6px;letter-spacing:.04em}
.diff-rookie h3{color:var(--accent2)}.diff-fighter h3{color:var(--gold)}.diff-legend h3{color:var(--accent)}
.diff-card p{color:var(--muted);font-size:clamp(.68rem,1.5vw,.78rem);line-height:1.5;margin-bottom:16px}
/* Pips */
.diff-pips{display:flex;gap:5px;justify-content:center;margin-top:auto}
.diff-pip{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.1);transition:background .2s,box-shadow .2s}
.diff-rookie .diff-pip.on{background:var(--accent2);box-shadow:0 0 6px rgba(124,247,255,.4)}
.diff-fighter .diff-pip.on{background:var(--gold);box-shadow:0 0 6px rgba(255,213,79,.4)}
.diff-legend .diff-pip.on{background:var(--accent);box-shadow:0 0 6px rgba(255,95,162,.4)}

/* ═ GAME HUD ═ */
#gameScreen{background:#000;position:fixed;inset:0;overflow:hidden;isolation:isolate}
.game-hud{position:absolute;top:0;left:0;right:0;z-index:32;display:flex;justify-content:space-between;align-items:flex-start;padding:8px 12px;pointer-events:none}
.hud-side{position:relative;z-index:33;display:flex;flex-direction:column;gap:2px;background:rgba(0,0,0,.35);padding:6px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.06);min-width:clamp(80px,14vw,160px);backdrop-filter:blur(6px)}
.hud-side.right{align-items:flex-end}
.hud-name{font-weight:800;font-size:clamp(.7rem,1.8vw,.92rem)}
.health-shell{padding:2px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02));width:100%}
.health-bar{height:14px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;width:100%}
.health-bar span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#7dff90,#ffe14f 60%,#ff6a7a);transition:width .16s linear}
.stamina-shell{padding:1px;border-radius:999px;width:100%}
.stamina-bar{height:4px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;width:100%}
.stamina-bar span{display:block;width:0%;height:100%;background:linear-gradient(90deg,var(--accent2),var(--gold));transition:width .2s ease}
.round-dots{display:flex;gap:6px;min-height:12px}
.hud-side.right .round-dots{justify-content:end}
.round-dots i{width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,.35);display:inline-block}
.round-dots i.win{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(255,213,79,.5)}
.hud-mid{position:relative;z-index:35;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:2px;min-width:0}
.round-label{font-family:'Bangers',cursive;font-size:clamp(1rem,2.5vw,1.6rem);letter-spacing:.06em}
.timer{font-size:clamp(.9rem,2vw,1.4rem);font-weight:800;transition:color .3s}
.status-message{color:var(--accent2);font-weight:700;font-size:.72rem}
.game-top-actions{position:relative;z-index:36;display:flex;align-items:center;justify-content:center;gap:8px;margin:4px auto;pointer-events:auto}
.game-mini-btn{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%,rgba(20,10,40,.88),rgba(8,4,18,.96));border:1px solid rgba(255,255,255,.14);color:#fff;font-size:1rem;backdrop-filter:blur(8px);box-shadow:0 8px 20px rgba(0,0,0,.3);transition:transform .12s;pointer-events:auto}
.game-mini-btn:active{transform:scale(.94)}

/* ═ COMBO ═ */
.combo-display{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;text-align:center;font-family:'Bangers',cursive;font-size:clamp(1.4rem,4vw,2.4rem);color:var(--gold);letter-spacing:.08em;text-shadow:0 0 20px rgba(255,213,79,.6);opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .2s,transform .2s;pointer-events:none}
.combo-display.active{opacity:1;transform:translate(-50%,-50%) scale(1);animation:comboPop .3s ease-out}

/* ═ ARENA ═ */
.arena-wrap{position:absolute;inset:0;z-index:1}
#fightCanvas{display:block;width:100%;height:100%;touch-action:none}

@media(min-width:981px){
  #gameScreen.active{display:flex;flex-direction:column}
  #gameScreen.active .arena-wrap{position:relative;flex:1;min-height:0}
  #gameScreen.active #fightCanvas{width:100%;height:100%;display:block}
}
.ko-flare{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%) scale(.4);font-family:'Bangers',cursive;font-size:clamp(3rem,14vw,10rem);color:#fff3bd;text-shadow:0 0 30px rgba(255,95,162,.35),0 8px 0 rgba(54,9,90,.9);opacity:0;pointer-events:none;z-index:15}
.ko-flare.active{animation:koBurst .95s ease-out forwards}

/* ═ MOBILE CONTROLS ═ */
.mobile-controls{position:absolute;inset:0;display:none;pointer-events:none;z-index:18}
.left-zone,.right-zone{position:absolute;bottom:10px;width:min(48%,320px);display:grid;grid-template-columns:repeat(3,minmax(50px,1fr));gap:6px;padding:8px;pointer-events:none}
.left-zone{left:6px}.right-zone{right:6px}
.mobile-controls button{pointer-events:auto;align-self:end;min-height:56px;min-width:56px;border:1.5px solid rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));border-radius:18px;opacity:.6;box-shadow:0 8px 20px rgba(0,0,0,.22);position:relative;backdrop-filter:blur(6px);transition:transform .1s,background .1s}
.mobile-controls button::after{content:attr(aria-label);position:absolute;inset:auto 4px 5px 4px;font-size:.56rem;font-weight:800;text-align:center;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.mobile-controls button:active,.mobile-controls button.active{background:linear-gradient(180deg,rgba(255,95,162,.35),rgba(124,247,255,.15));transform:scale(.94);opacity:.85}
.mobile-controls button[data-action="left"]::before{content:'←'}
.mobile-controls button[data-action="right"]::before{content:'→'}
.mobile-controls button[data-action="jump"]::before{content:'↑'}
.mobile-controls button[data-action="light"]::before{content:'J'}
.mobile-controls button[data-action="heavy"]::before{content:'K'}
.mobile-controls button[data-action="block"]::before{content:'L'}
.mobile-controls button::before{position:absolute;inset:8px 0 auto;text-align:center;font-size:1.2rem;font-weight:900}

/* ═ OVERLAY ═ */
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,6,24,.7);backdrop-filter:blur(10px);overflow-y:auto;z-index:20}
.overlay.hidden{display:none}
.overlay-card{width:min(92%,440px);padding:24px;border-radius:24px;background:linear-gradient(180deg,rgba(26,15,48,.95),rgba(12,6,24,.97));border:1px solid var(--border);text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.5);animation:sUp .4s ease;margin:auto 0}
.overlay-badge{display:inline-flex;margin-bottom:8px;padding:5px 12px;border-radius:999px;background:rgba(255,95,162,.12);color:var(--accent);font-weight:800;font-size:.8rem}
.overlay-card h2{margin:0;font-size:clamp(1.4rem,5vw,2.6rem);font-family:'Bangers',cursive;letter-spacing:.06em}
.overlay-card p{color:var(--muted);margin-bottom:12px}
.overlay-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.overlay-actions button{padding:11px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--border);font-weight:800;font-size:.82rem;transition:transform .18s}
.overlay-actions button:hover{transform:translateY(-2px)}
.overlay-actions .secondary{background:rgba(255,255,255,.04)}

/* ═ MODALS ═ */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(8,0,18,.75);backdrop-filter:blur(10px);padding:14px;overflow-y:auto}
.modal.hidden{display:none}
.modal-card{width:min(96%,420px);padding:24px;border-radius:22px;background:linear-gradient(180deg,rgba(26,15,48,.96),rgba(12,6,24,.98));border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.5);position:relative;animation:sUp .3s ease;margin:auto}
.modal-wide{width:min(96%,500px)}
.modal-badge{display:inline-flex;margin-bottom:8px;padding:5px 12px;border-radius:999px;background:rgba(124,247,255,.12);color:var(--accent2);font-weight:800;font-size:.8rem}
.modal-card h2{font-family:'Dela Gothic One',sans-serif;font-size:clamp(1.3rem,3.5vw,1.8rem);margin:0 0 4px}
.modal-desc{color:var(--muted);font-size:.85rem;margin-bottom:14px}
.modal-hint{color:var(--muted);font-size:.78rem;margin-top:10px;text-align:center}
.brave-hint{margin-top:4px;color:#ffcc44;font-size:.72rem}
.modal-row{margin-bottom:8px}
.room-row{display:flex;gap:8px;align-items:center}
.room-row input{flex:1}
.modal-row input,.room-row input{width:100%;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--ink);font-size:.95rem;outline:none}
.modal-row input:focus,.room-row input:focus{border-color:var(--accent2)}
.copy-btn{padding:11px 12px;border-radius:12px;background:rgba(124,247,255,.1);border:1px solid rgba(124,247,255,.2);color:var(--accent2);font-size:1rem;flex-shrink:0}
.copy-btn.copied{background:rgba(125,255,144,.12);color:var(--green)}
.modal-btns{display:flex;gap:8px}
.modal-btns .btn{flex:1;padding:12px;border-radius:12px;font-size:.9rem}
.modal-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);font-size:1rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.modal-x:hover{background:rgba(255,95,162,.18)}
.room-status{margin-top:8px;padding:7px 12px;border-radius:10px;font-size:.82rem;font-weight:700;min-height:12px;text-align:center}
.room-status.info{background:rgba(124,247,255,.08);color:var(--accent2)}
.room-status.success{background:rgba(125,255,144,.08);color:var(--green)}
.room-status.error{background:rgba(255,95,162,.08);color:var(--accent)}

/* ═ LEADERBOARD ═ */
.lb-header{font-family:'Dela Gothic One',sans-serif;font-size:1.6rem;text-align:center;margin-bottom:14px;color:var(--gold)}
.lb-stats{display:flex;align-items:center;gap:16px;justify-content:center;margin-bottom:16px}
.lb-fighter{flex:1;text-align:center;padding:16px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:border-color .3s}
.lb-fighter.lb-leader{border-color:rgba(255,213,79,.5);background:rgba(255,213,79,.06);box-shadow:0 0 20px rgba(255,213,79,.12)}
.lb-fighter img{width:56px;height:56px;object-fit:contain;margin-bottom:6px}
.lb-name{font-weight:800;font-size:1rem;margin-bottom:3px}
.lb-wins{color:var(--gold);font-weight:800;margin-bottom:8px}
.lb-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:4px}
.lb-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),#ff8db8);transition:width .6s ease}
.lb-fill.biz{background:linear-gradient(90deg,#ffd54f,#ffaa00)}
.lb-pct{font-size:.8rem;color:var(--muted);font-weight:700}
.lb-vs{font-family:'Bangers',cursive;font-size:1.6rem;color:rgba(255,255,255,.25)}
.lb-total{text-align:center;color:var(--muted);margin-bottom:12px;font-size:.85rem}
.lb-reset{display:block;margin:0 auto;padding:8px 18px;border-radius:999px;background:rgba(255,80,80,.1);color:#ff8080;border:1px solid rgba(255,80,80,.2);font-weight:700;font-size:.82rem}

/* ═ CHAT ═ */
.chat-box{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:35;width:min(94%,500px);background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:8px;backdrop-filter:blur(6px)}
.chat-messages{max-height:60px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;margin-bottom:6px}
.chat-msg{font-size:.78rem;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.06)}
.chat-msg.local{text-align:right;background:rgba(124,247,255,.08)}
.chat-name{font-weight:800;color:var(--accent2);margin-right:4px}
.chat-emotes{display:flex;gap:6px;flex-wrap:wrap}
.chat-emote{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:1rem;transition:transform .15s}
.chat-emote:hover{transform:scale(1.2)}

/* ═ ONLINE LOBBY BAR ═ */
.online-lobby-bar{display:none;position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:90;align-items:center;justify-content:center;gap:8px;padding:8px 16px;border-radius:999px;background:linear-gradient(135deg,rgba(124,247,255,.14),rgba(255,95,162,.10));border:1px solid rgba(124,247,255,.3);color:var(--accent2);font-weight:800;font-size:.82rem;animation:pulse 1.8s ease-in-out infinite}
.online-lobby-bar.visible{display:flex}
.online-lobby-bar .waiting-dot{width:8px;height:8px;border-radius:50%;background:var(--accent2);animation:pulse .9s ease-in-out infinite}

/* ═ INSTALL BANNER ═ */
.install-banner{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:999;width:min(94vw,440px);border-radius:18px;background:linear-gradient(135deg,rgba(18,10,34,.97),rgba(10,6,24,.98));border:1px solid rgba(255,95,162,.25);box-shadow:0 20px 50px rgba(0,0,0,.45);animation:sUp .45s ease both}
.install-inner{display:flex;align-items:center;gap:10px;padding:12px 14px}
.install-icon{width:40px;height:40px;border-radius:10px;flex-shrink:0}
.install-text{flex:1;min-width:0}
.install-text strong{font-size:.88rem}.install-text p{margin:0;font-size:.72rem;color:var(--muted)}
.install-cta{padding:8px 14px;border-radius:999px;background:linear-gradient(135deg,var(--accent),#d4408a);color:#fff;font-weight:800;font-size:.8rem;flex-shrink:0}
.install-x{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.05);font-size:.78rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ═ ANIMATIONS ═ */
@keyframes sUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes koBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.26)}60%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes comboPop{0%{transform:translate(-50%,-50%) scale(1.4)}50%{transform:translate(-50%,-50%) scale(.9)}100%{transform:translate(-50%,-50%) scale(1)}}

/* ═ RESPONSIVE ═ */
@media(max-width:680px){
  .mobile-controls{display:block}
  .char-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .char-card{padding:10px}
  .char-img{height:clamp(90px,20vh,150px)}
  .scenario-grid{grid-template-columns:1fr;max-width:260px;gap:8px}
  .scenario-preview{height:clamp(60px,12vh,90px)}
  .scenario-body{padding:6px 8px 8px}
  .scenario-icon{font-size:1rem;margin-bottom:2px}
  .scenario-card h3{font-size:.78rem;margin:0 0 1px}
  .scenario-card p{font-size:.62rem}
  .game-hud{padding:10px 8px 0}
  .hud-name{font-size:.68rem}
  .health-bar{height:10px}
  .round-label{font-size:.8rem}
  .timer{font-size:.72rem}
  .game-mini-btn{width:36px;height:36px;font-size:.9rem}
  .game-top-actions{gap:6px;margin:2px auto}
}

@media(max-width:520px){
  .diff-grid{grid-template-columns:1fr;max-width:320px;gap:10px}
  .diff-card{flex-direction:row;text-align:left;padding:16px 18px;gap:14px;border-radius:18px}
  .diff-card:hover{transform:translateX(6px) scale(1)}
  .diff-icon-wrap{width:52px;height:52px;flex-shrink:0;margin-bottom:0;font-size:1.5rem}
  .diff-card:hover .diff-icon-wrap{transform:scale(1.1) rotate(0deg)}
  .diff-text-col{display:flex;flex-direction:column;flex:1;min-width:0}
  .diff-card h3{font-size:1.05rem;margin-bottom:3px}
  .diff-card p{margin-bottom:8px;font-size:.72rem}
  .diff-pips{justify-content:flex-start}
  .diff-badge{top:auto;bottom:-1px;border-radius:8px 8px 0 0}
}

@media(max-width:440px){
  .install-banner{bottom:0;left:0;right:0;width:100%;border-radius:14px 14px 0 0;transform:none}
  .char-grid{gap:8px}
  .char-card h3{font-size:.88rem}
  .char-card p{font-size:.66rem}
}

@media(orientation:landscape) and (max-width:980px){
  html,body{overflow-x:hidden;overflow-y:auto}
  .screen:not(#gameScreen).active{overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative}
  .scr-inner{justify-content:flex-start;padding-top:10px;min-height:100%}
  #gameScreen{position:fixed!important;overflow:hidden}
  .mobile-controls{display:block}
  .left-zone,.right-zone{bottom:3px;padding:3px;gap:3px;width:calc(50% - 4px)}
  .mobile-controls button{min-height:46px;border-radius:10px;opacity:.7}
  .mobile-controls button::before{font-size:.88rem!important;top:6px}
  .mobile-controls button::after{font-size:.48rem;bottom:3px}
  .game-hud{padding:4px 6px 0}
  .hud-side{padding:3px 5px;border-radius:8px}
  .hud-name{font-size:.58rem}
  .health-bar{height:5px}
  .stamina-bar{height:0}
  .round-dots i{width:6px;height:6px}
  .round-label{font-size:.68rem}
  .timer{font-size:.6rem}
  .status-message{font-size:.48rem}
  .game-mini-btn{width:30px;height:30px;font-size:.78rem}
  .game-top-actions{margin:2px auto;gap:6px}
  .combo-display{font-size:.72rem}
  .chat-box{display:none!important}
  .char-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  .char-card{padding:8px;border-radius:14px}
  .char-img{height:clamp(50px,14vh,100px)}
  .char-card h3{font-size:.8rem;margin:4px 0 0}
  .char-card p,.char-stats{display:none}
  .diff-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .diff-card{padding:12px 10px}
  .diff-icon-wrap{width:40px;height:40px;margin-bottom:8px}
  .scenario-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .scenario-preview{height:clamp(50px,10vh,80px)}
  .scenario-card h3{font-size:.72rem;margin:6px 0 0}
  .scenario-card p{display:none}
}

@media(orientation:portrait) and (max-width:680px){
  .game-hud{padding-top:10px}
}

@media(display-mode:standalone){
  html,body{overscroll-behavior:none;min-height:100dvh}
}

/* ═ SCROLL LOCK ═ */
.scroll-lock-btn.locked{background:rgba(255,95,162,.24)!important;border-color:rgba(255,95,162,.62)!important}
body.scroll-locked,body.scroll-locked .screen{overflow:hidden!important;touch-action:none}
body.pwa-game-active .arena-wrap,body.pwa-game-active #fightCanvas,body.pwa-game-active .mobile-controls button{touch-action:none}
html.game-result-open,body.game-result-open{touch-action:pan-x pan-y!important;overflow-y:auto!important}

/* ═ QR MODAL ═ */
.qr-modal-card{max-width:320px;text-align:center;width:min(96%,320px)}
.qr-badge{background:linear-gradient(135deg,rgba(124,247,255,.15),rgba(255,95,162,.1));color:var(--accent2);border:1px solid rgba(124,247,255,.25)}
.qr-canvas-wrap{position:relative;display:inline-block;margin:0 auto 10px}
#qrCanvas{display:block;border-radius:12px;padding:8px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 32px rgba(0,0,0,.3);max-width:min(160px,55vw);max-height:min(160px,55vw)}
.qr-pulse-ring{position:absolute;inset:-6px;border-radius:18px;border:2px solid rgba(255,95,162,.35);animation:qrPulse 2s ease-in-out infinite;pointer-events:none}
@keyframes qrPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.03)}}
.qr-code-chip{display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:7px 10px;margin-bottom:8px;word-break:break-all}
#qrCodeText{font-family:'Dela Gothic One',sans-serif;font-size:.78rem;color:var(--accent2);letter-spacing:.06em;word-break:break-all;flex:1;text-align:left}
.qr-hint{font-size:.72rem;color:var(--muted);margin-top:4px}
.qr-switcher{display:flex;gap:6px;margin-top:10px;border-top:1px solid rgba(255,255,255,.07);padding-top:10px}
.qr-tab{flex:1;padding:9px;border-radius:10px;font-size:.8rem;font-weight:700;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);transition:all .18s}
.qr-tab.active{background:rgba(255,95,162,.12);color:var(--accent);border-color:rgba(255,95,162,.3)}

/* ═ AD DOCK — small centered banner above controls ═ */
.ad-dock{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:19;display:flex;align-items:center;justify-content:center;pointer-events:auto}
.ad-dock.hidden{display:none}
.ad-card{width:clamp(160px,28vw,240px);height:clamp(32px,5vh,44px);border-radius:10px;overflow:hidden;background:rgba(8,4,18,.5);border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 14px rgba(0,0,0,.2);backdrop-filter:blur(4px);transition:transform .15s;display:block}
.ad-card:hover{transform:translateY(-1px)}
.ad-card img{width:100%;height:100%;object-fit:cover;display:block}

/* Desktop: bottom center small */
@media(min-width:981px){
  .ad-dock{bottom:10px}
  .ad-card{width:200px;height:36px;border-radius:8px}
}

/* Mobile portrait: above controls */
@media(max-width:680px){
  .ad-dock{bottom:auto;top:auto;position:relative;margin:-4px auto 4px;transform:none;left:auto}
  .ad-card{width:clamp(140px,45vw,200px);height:32px;border-radius:8px}
}

/* Mobile landscape: above controls, small */
@media(orientation:landscape) and (max-width:980px){
  .ad-dock{position:fixed;bottom:auto;top:auto;bottom:48px;z-index:25}
  .ad-card{width:clamp(120px,22vw,180px);height:28px;border-radius:6px}
}

/* ═ LANDSCAPE MOBILE — game fills entire viewport ═ */
@media(orientation:landscape) and (max-width:980px){
  /* Game screen: absolute fullscreen */
  #gameScreen{position:fixed!important;inset:0!important}
  #gameScreen .arena-wrap{position:absolute!important;inset:0!important;border-radius:0!important;border:0!important}
  #gameScreen #fightCanvas{width:100%!important;height:100%!important;min-height:0!important;display:block;object-fit:contain}
  /* HUD: small overlay at top */
  #gameScreen .game-hud{position:absolute!important;top:0;left:0;right:0;padding:2px 4px 0;z-index:35;background:linear-gradient(180deg,rgba(0,0,0,.4),transparent)}
  /* Controls: overlay at bottom of screen */
  .mobile-controls{z-index:20;display:block!important}
  .left-zone,.right-zone{bottom:4px;padding:2px;gap:2px;width:calc(50% - 3px)}
  .mobile-controls button{min-height:38px;border-radius:8px;opacity:.45}
  .mobile-controls button::before{font-size:.78rem!important;top:3px}
  .mobile-controls button::after{font-size:.4rem;bottom:1px}
  /* Ad dock: tiny, above controls */
  .ad-dock{position:fixed!important;bottom:44px;left:50%;transform:translateX(-50%);z-index:25}
  .ad-card{width:clamp(100px,18vw,150px);height:24px;border-radius:5px}
  /* Combo display */
  .combo-display{font-size:.72rem}
  /* Overlay card compact */
  .overlay-card{padding:10px 16px;border-radius:14px}
  .overlay-card h2{font-size:clamp(1rem,3.5vw,1.6rem)}
  .overlay-card p{font-size:.72rem;margin-bottom:6px}
  .overlay-actions button{padding:7px 12px;font-size:.72rem}
  /* Scenario grid stays 3-col */
  .scenario-grid{grid-template-columns:repeat(3,1fr);gap:8px;width:min(96%,500px)}
  .scenario-preview{height:clamp(50px,12vh,90px)}
  .scenario-body{padding:6px 6px 8px}
  .scenario-icon{font-size:1rem;margin-bottom:2px}
  .scenario-card h3{font-size:.68rem}
  .scenario-card p{display:none}
}
/* ═ ROTATE PROMPT (portrait mobile in game) ═ */
.rotate-prompt{display:none;position:fixed;inset:0;z-index:999;background:rgba(10,6,24,.92);backdrop-filter:blur(12px);flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;color:var(--ink)}
.rotate-prompt .rotate-icon{font-size:3rem;animation:rotateWiggle 2s ease-in-out infinite}
.rotate-prompt p{font-size:1rem;line-height:1.5;color:var(--muted);max-width:280px}
.rotate-prompt p strong{color:var(--accent)}
@keyframes rotateWiggle{0%,100%{transform:rotate(0deg)}25%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}}
@media(orientation:portrait) and (max-width:680px){
  .rotate-prompt.active{display:flex}
}
@media(orientation:portrait) and (display-mode:standalone){
  .rotate-prompt.active{display:flex}
}