/* ── FUENTES AUTO-ALOJADAS ── */
@font-face{
  font-family:'Cinzel';
  src:url('./assets/fonts/cinzel-latin.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Nunito';
  src:url('./assets/fonts/nunito-latin.woff2') format('woff2');
  font-weight:200 1000; font-style:normal; font-display:swap;
}

:root{
      --bg:#08121f; --bg2:#0d1b2e; --bg3:#13375f; --panel:#10243d; --panel2:#163252; --line:rgba(255,255,255,.12);
      --text:#f5f8ff; --muted:rgba(245,248,255,.72); --muted2:rgba(245,248,255,.52); --accent:#89ecff; --gold:#ffd76d;
      --danger:#ff8396; --ok:#7be6b7; --purple:#ba9aff; --radius:22px; --shadow:0 24px 48px rgba(0,0,0,.28);
      --safe-bottom:max(12px, env(safe-area-inset-bottom)); --safe-top:max(12px, env(safe-area-inset-top));
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;min-height:100%}
    body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:
      radial-gradient(circle at top left,rgba(80,170,255,.15),transparent 30%),
      radial-gradient(circle at bottom right,rgba(180,120,255,.12),transparent 28%),
      linear-gradient(180deg,#07111d,#09182c 48%,#0b1524);overscroll-behavior:none}
    body.app-static-screen{height:100svh;overflow:hidden;touch-action:pan-x pan-y}
    button,input,select{font:inherit}
    #app{max-width:1220px;margin:0 auto;padding:calc(14px + var(--safe-top)) 14px calc(94px + var(--safe-bottom))}
    body.app-static-screen #app{height:100svh;overflow:hidden}
    .native-shell #app{padding-top:calc(22px + var(--safe-top));padding-bottom:calc(102px + var(--safe-bottom))}
    .native-shell .bottom-nav{padding-bottom:calc(14px + var(--safe-bottom));position:sticky;bottom:0;z-index:50}
    .native-shell .topbar{position:sticky;top:calc(8px + var(--safe-top));z-index:18;backdrop-filter:blur(10px)}
    .screen{display:flex;flex-direction:column;gap:14px}
    .panel{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
    .hero{padding:22px}
    .title{margin:0;font-size:48px;line-height:.92;letter-spacing:-.06em}.title .five{color:#ff7189}.title .vidas{color:var(--gold)}

.brand-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand-hero__icon{width:88px;height:88px;object-fit:cover;border-radius:22px;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 36px rgba(0,0,0,.26)}
    .subtitle{margin:10px 0 0;color:var(--muted);line-height:1.45}
    .badge{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:12px;font-weight:800}
    .badge.gold{color:var(--gold)} .badge.cyan{color:var(--accent)} .badge.ok{color:var(--ok)}
    .row{display:flex;gap:12px;flex-wrap:wrap}.row.between{justify-content:space-between;align-items:center}
    .btn{border:none;border-radius:16px;padding:14px 18px;cursor:pointer;font-weight:900;background:linear-gradient(180deg,#98f0ff,#56caff);color:#07111f;box-shadow:0 16px 30px rgba(60,170,255,.24)}
    .btn.secondary{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));color:var(--text);border:1px solid var(--line);box-shadow:none}
    .btn.ghost{background:transparent;color:var(--text);border:1px dashed rgba(255,255,255,.16);box-shadow:none}
    .btn.danger{background:linear-gradient(180deg,#ffa0ad,#ff6e87);color:#1d0a12}
    .footer-actions{display:flex;gap:10px;flex-wrap:wrap}
    .grid{display:grid;gap:14px}.grid.main{grid-template-columns:1.28fr .92fr}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
    .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:10px}
    .stat{padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
    .stat span{display:block;color:var(--muted2);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.stat strong{display:block;margin-top:4px;font-size:20px}.small{font-size:13px;color:var(--muted)}
    .mode-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
    .mode-btn{min-height:60px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font-weight:900;cursor:pointer}
    .mode-btn.active{background:linear-gradient(180deg,rgba(137,236,255,.22),rgba(72,141,255,.14));border-color:rgba(137,236,255,.42)}
    .card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
    .menu-card{padding:16px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));display:flex;flex-direction:column;gap:10px}
    .menu-card h3,.menu-card h4{margin:0}.menu-card p{margin:0;color:var(--muted);line-height:1.42}
    .menu-card.locked{opacity:.68}
    .topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(8,18,36,.96),rgba(9,20,39,.94));box-shadow:var(--shadow)}
    .icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));cursor:pointer;color:var(--text);font-size:18px}
    .resources{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.resource{padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);display:flex;justify-content:center;align-items:center;gap:6px;font-weight:900;font-size:13px}.resource-icon{width:18px;height:18px;object-fit:contain;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 4px 12px rgba(0,0,0,.25)}.inline-icon{width:16px;height:16px;object-fit:contain;vertical-align:-3px;margin-right:6px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}.badge__icon{width:18px;height:18px;vertical-align:-4px;margin-right:8px}
    .bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,780px);padding:0 14px calc(10px + var(--safe-bottom));z-index:20}
    .bottom-shell{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:7px;border-radius:22px;border:1px solid rgba(255,200,80,.15);background:linear-gradient(180deg,rgba(6,10,22,.97),rgba(4,7,16,.99));box-shadow:0 -2px 32px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,200,80,.06);align-items:end;backdrop-filter:blur(16px)}
    .nav-btn{min-height:56px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid transparent;background:transparent;color:rgba(255,255,255,.4);cursor:pointer;font-weight:800;font-family:inherit;transition:color .12s,background .12s}
    .nav-btn.active{color:#ffd060;background:rgba(255,208,96,.1);border-color:rgba(255,208,96,.2)}
    .nav-btn--center{background:linear-gradient(160deg,#ffd060,#c8860a)!important;color:#1a0800!important;border-color:rgba(255,238,140,.5)!important;transform:translateY(-10px);box-shadow:0 8px 24px rgba(180,110,10,.5),0 0 0 1px rgba(255,238,140,.2);border-radius:16px!important;min-height:64px}
    .nav-btn small{font-size:10px;line-height:1;font-weight:700}
    .section-title{margin:0 0 6px;font-size:24px;letter-spacing:-.03em}
    .table-board{padding:16px;border-radius:26px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 50% 45%,rgba(39,112,82,.78),rgba(20,68,50,.92) 55%,rgba(8,22,16,1) 100%)}
    .table-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
    .phase-pill{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:rgba(8,18,31,.32);font-size:12px;font-weight:900}
    .phase-pill.warn{color:var(--gold)} .phase-pill.ok{color:var(--ok)} .phase-pill.danger{color:var(--danger)}
    .table-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:14px;align-items:start}
    .slot{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:250px}.slot-name{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82)}.slot-meta{font-size:11px;color:rgba(255,255,255,.68)}
    .card-shell{position:relative;width:110px;aspect-ratio:280/440;border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 30px rgba(0,0,0,.28)}
    .card-img{display:block;width:100%;height:100%;object-fit:cover;background:#fff}.temp-badge{position:absolute;right:6px;bottom:6px;background:rgba(8,18,31,.84);color:#fff;border-radius:999px;padding:4px 7px;font-size:10px;font-weight:900;letter-spacing:.06em}
    .card-back,.card-placeholder{width:110px;aspect-ratio:280/440;border-radius:14px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}
    .card-back{background:linear-gradient(180deg,#17375d,#11233c);background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.card-back--art{position:relative;overflow:hidden;border:none;background:none;padding:0;width:100%;height:100%}
.card-back--art img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.card-back__mark{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:28px;font-weight:900;color:var(--gold)}.card-back__text{font-size:14px;font-weight:900;letter-spacing:.18em;color:rgba(255,255,255,.82)}
    .card-placeholder{border:1px dashed rgba(255,255,255,.18);color:rgba(255,255,255,.5);background:rgba(0,0,0,.08)}
    .hand-card.playable:hover .card-shell{transform:translateY(-7px);border-color:rgba(137,236,255,.5);box-shadow:0 20px 34px rgba(0,0,0,.34)}
    .log{min-height:76px;line-height:1.48;color:var(--muted)}.history-list{display:flex;flex-direction:column;gap:8px}.history-item{padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
    .notice{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)} .highlight{color:var(--gold);font-weight:900}
    .toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);padding:12px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(10,20,35,.92);box-shadow:var(--shadow);z-index:50;min-width:220px;text-align:center}
    .progress{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.progress>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#8beeff,#56caff)}
    .list{display:flex;flex-direction:column;gap:10px}.list-item{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
    .pill{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:12px;font-weight:800}
    .input{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text)}
    .switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
    .switch input{accent-color:#56caff}
    @media (max-width:960px){.grid.main,.grid.two,.grid.three{grid-template-columns:1fr}.title{font-size:40px}.brand-hero__icon{width:72px;height:72px;border-radius:18px}.table-slots{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.bottom-shell{grid-template-columns:repeat(4,minmax(0,1fr))}}
    @media (max-width:640px){#app{padding:calc(10px + var(--safe-top)) 10px calc(104px + var(--safe-bottom))}.card-shell,.card-back,.card-placeholder{width:86px}.mode-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.slot{min-height:210px}.resources{grid-template-columns:1fr}}
  
    /* === Poker table scene refresh === */
    .match-header-row{gap:12px;align-items:flex-start}
    .match-header-actions{justify-content:flex-end}
    
    
    
    
    
    
.one-card-preview-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 0 4px;margin-top:10px;scroll-snap-type:x proximity}
    .prediction-panel{padding:12px}
    .compact-notice{margin:0}
    .match-collapsible{padding:0;overflow:hidden}
    .match-collapsible summary{
      list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:14px 16px;cursor:pointer;font-size:13px;font-weight:900
    }
    .match-collapsible summary span{font-size:11px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .match-collapsible summary::-webkit-details-marker{display:none}
    .match-collapsible[open] summary{border-bottom:1px solid rgba(255,255,255,.08)}
    .poker-centerpiece.ok{animation:none}
    .poker-centerpiece__badge{
      display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;
      background:rgba(255,215,109,.10);border:1px solid rgba(255,215,109,.25);font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--gold)
    }
    .poker-centerpiece__title{margin-top:8px;font-size:17px;font-weight:900;line-height:1.22;text-align:center}
    .poker-centerpiece__sub{margin-top:4px;text-align:center;font-size:11px;color:var(--muted)}
    .poker-centerpiece__meta{margin-top:8px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);text-align:center;font-size:11px;font-weight:800;color:#fff}
.poker-centerpiece__footer{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.poker-centerpiece__footer span{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:10px;font-weight:900;color:rgba(255,255,255,.86);letter-spacing:.06em}
    .trick-progress{display:flex;justify-content:center;gap:10px;margin-top:14px}
    .trick-progress__dot{
      width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);
      box-shadow:0 0 0 0 rgba(137,236,255,0);transition:transform .18s ease, background .18s ease, box-shadow .18s ease
    }
    .trick-progress__dot.done{background:rgba(137,236,255,.88);border-color:rgba(137,236,255,.9);box-shadow:0 0 0 6px rgba(137,236,255,.08)}
    .table-cards-zone{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      width:min(64%,520px);display:flex;justify-content:center;align-items:flex-end;gap:10px;flex-wrap:wrap;z-index:4;padding-top:110px
    }
    .table-card-slot{
      display:flex;flex-direction:column;align-items:center;gap:8px;
      animation:tableCardEnter .26s ease-out both
    }
    .table-card-slot .card-shell,.table-card-slot .card-back,.table-card-slot .card-placeholder{width:88px}
    .table-card-slot.waiting .card-placeholder{
      min-height:146px;background:rgba(255,255,255,.04);border-style:dashed;color:rgba(255,255,255,.38)
    }
    .table-card-seat{
      min-height:24px;padding:0 10px;border-radius:999px;background:rgba(7,17,29,.80);border:1px solid rgba(255,255,255,.10);
      font-size:11px;font-weight:800;color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.18)
    }
.table-card-seat.latest{border-color:rgba(137,236,255,.34);background:rgba(14,36,54,.86)}
.table-card-seat.winner{border-color:rgba(255,215,109,.42);background:rgba(47,35,6,.82);color:#ffe7a2}
    .table-card-slot.latest .card-shell{transform:translateY(-4px);box-shadow:0 16px 28px rgba(0,0,0,.28);animation:winnerGlow .45s ease both}
    .table-card-slot.latest .card-shell::after{
      content:"";position:absolute;inset:-8px;border-radius:22px;border:1px solid rgba(137,236,255,.42);box-shadow:0 0 0 8px rgba(137,236,255,.06)
    }
    .table-card-slot.winner .card-shell{transform:translateY(-6px) scale(1.02);box-shadow:0 18px 32px rgba(0,0,0,.32)}
    .table-card-slot.winner .card-shell::after{
      content:"";position:absolute;inset:-10px;border-radius:24px;border:1px solid rgba(255,215,109,.46);
      box-shadow:0 0 0 9px rgba(255,215,109,.08), 0 0 24px rgba(255,215,109,.24)
    }
.table-card-slot.latest .table-card-seat{border-color:rgba(137,236,255,.34)}
.table-card-slot.winner .table-card-seat{border-color:rgba(255,215,109,.42);color:#ffe7a2}
    .poker-seat-badge{
      position:relative;min-width:136px;max-width:168px;padding:9px 10px;border-radius:16px;
      background:linear-gradient(180deg, rgba(9,22,37,.88), rgba(7,17,29,.82));border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 22px rgba(0,0,0,.25);
      text-align:center;backdrop-filter:blur(6px);overflow:hidden
    }
.poker-seat-badge::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0) 42%);pointer-events:none}
    .poker-seat-badge.active{border-color:rgba(137,236,255,.42);box-shadow:0 0 0 1px rgba(137,236,255,.14),0 12px 24px rgba(0,0,0,.3);animation:turnPulse 1.8s ease-in-out infinite}
    .poker-seat-badge.winner{border-color:rgba(255,215,109,.42);box-shadow:0 0 0 1px rgba(255,215,109,.14),0 16px 28px rgba(0,0,0,.3)}
    .poker-seat-badge.self{background:rgba(7,17,29,.92);box-shadow:0 14px 28px rgba(0,0,0,.32)}
    .poker-seat-name{font-size:13px;font-weight:900;letter-spacing:.02em}
    .poker-seat-title{margin-top:3px;font-size:11px;color:rgba(255,255,255,.72)}
.poker-seat-badge__top{display:flex;align-items:center;justify-content:center;gap:8px}
.poker-seat-detail{margin-top:5px;font-size:11px;line-height:1.25;color:rgba(255,255,255,.82)}
.poker-seat-pips{display:flex;justify-content:center;gap:6px;margin-top:7px}
.poker-seat-pips span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.10);box-shadow:0 0 0 0 rgba(255,255,255,0)}
.poker-seat-pips span.live{background:rgba(137,236,255,.96);border-color:rgba(137,236,255,.9);box-shadow:0 0 0 5px rgba(137,236,255,.08)}
.poker-seat-pips span.gold{background:rgba(255,215,109,.96);border-color:rgba(255,215,109,.86);box-shadow:0 0 0 5px rgba(255,215,109,.08)}
.poker-seat-pips span.off{background:rgba(255,102,102,.9);border-color:rgba(255,102,102,.82);box-shadow:0 0 0 5px rgba(255,102,102,.07)}
    .poker-seat-meta{margin-top:6px;font-size:11px;color:var(--muted);font-weight:900;letter-spacing:.08em}
    .poker-seat-stats{margin-top:6px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
    .poker-seat-stats span{
      display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:10px;font-weight:900;color:#fff
    }
    .poker-seat-card .card-shell,.poker-seat-card .card-back,.poker-seat-card .card-placeholder{width:76px}
    .poker-seat-card .card-placeholder{display:grid;place-items:center;min-height:116px;background:rgba(255,255,255,.05)}
    .compact-seat-card{padding:10px 8px;font-size:11px;font-weight:800;text-align:center;line-height:1.25;color:rgba(255,255,255,.84)}
    .poker-seat-card.is-turn .card-shell,.poker-seat-card.is-turn .card-back{animation:turnFloat 2s ease-in-out infinite}
    .poker-seat-card.is-winner .card-shell,.poker-seat-card.is-winner .card-back{animation:winnerGlow .55s ease both}
    .seat-bottom{left:50%;bottom:20px;transform:translateX(-50%)}
    .seat-top{left:50%;top:20px;transform:translateX(-50%)}
    .seat-left{left:26px;top:50%;transform:translateY(-50%)}
    .seat-right{right:26px;top:50%;transform:translateY(-50%)}
    .seat-top-left{left:12%;top:18%;transform:translate(-50%,-50%)}
    .seat-top-right{right:12%;top:18%;transform:translate(50%,-50%)}
    .seat-bottom-left{left:14%;bottom:20%;transform:translate(-50%,50%)}
    .seat-bottom-right{right:14%;bottom:20%;transform:translate(50%,50%)}
    .poker-status{margin-top:12px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
    .poker-status .log{min-height:0}
    .poker-summary-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}

    
    
    
    
    
    
    .match-hand-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0 12px;flex-wrap:wrap}
    .segmented-control{display:inline-flex;gap:6px;flex-wrap:wrap}
    .segmented-control__btn{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);color:#fff;font-weight:800}
    .segmented-control__btn.active{border-color:rgba(137,236,255,.38);background:rgba(137,236,255,.14);box-shadow:0 0 0 1px rgba(137,236,255,.12)}
    .hand.hand--scrollable{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
    .hand.hand--scrollable::-webkit-scrollbar{height:6px}
    .hand.hand--scrollable::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
    .hand-card{transition:transform .16s ease;scroll-snap-align:center;flex:0 0 auto;aspect-ratio:280/440}
    .hand-card.playable{animation:playableIdle 2.4s ease-in-out infinite;cursor:pointer}
    .hand-card.playable:hover{transform:translateY(-6px)}
    .hand-card.locked{opacity:.78;filter:saturate(.82)}
.hand-card.selected{transform:translateY(-8px)}
.hand-card.selected .card-shell{border-color:rgba(255,215,109,.54);box-shadow:0 22px 38px rgba(0,0,0,.38),0 0 0 1px rgba(255,215,109,.22)}
.hand-card.selected .card-shell::after{content:"";position:absolute;inset:-10px;border-radius:24px;border:1px solid rgba(255,215,109,.42);box-shadow:0 0 0 8px rgba(255,215,109,.08)}





.interaction-rail{margin:-2px 0 12px;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.interaction-rail--ok{border-color:rgba(91,227,163,.22);background:rgba(91,227,163,.08)}
.interaction-rail--warn{border-color:rgba(255,201,87,.24);background:rgba(255,201,87,.08)}
.interaction-rail--ready{border-color:rgba(109,216,255,.26);background:rgba(109,216,255,.08)}
.interaction-rail--gold{border-color:rgba(255,215,109,.28);background:rgba(255,215,109,.08)}
.interaction-rail__main{display:grid;gap:4px;min-width:220px;flex:1 1 260px}
.interaction-rail__main strong{font-size:13px}
.interaction-rail__main span{font-size:12px;color:rgba(255,255,255,.8)}
.interaction-rail__feedback{padding:7px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}
.interaction-rail__feedback--ready{border-color:rgba(109,216,255,.34);background:rgba(109,216,255,.14)}
.interaction-rail__feedback--gold{border-color:rgba(255,215,109,.34);background:rgba(255,215,109,.14)}
.interaction-rail__feedback--neutral{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.08)}
    @keyframes turnPulse{0%,100%{box-shadow:0 0 0 1px rgba(137,236,255,.18),0 12px 24px rgba(0,0,0,.3)}50%{box-shadow:0 0 0 1px rgba(137,236,255,.28),0 0 0 12px rgba(137,236,255,.08),0 14px 26px rgba(0,0,0,.34)}}
    @keyframes winnerGlow{from{filter:drop-shadow(0 0 0 rgba(255,215,109,0));transform:translateY(0)}to{filter:drop-shadow(0 0 16px rgba(255,215,109,.28));transform:translateY(-2px)}}
    @keyframes turnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
    @keyframes tableCardEnter{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
    @keyframes centerPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.015)}}
    @keyframes playableIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
    @media (max-width: 1080px){
    }
    @media (max-width: 760px){
      
      .match-hand-toolbar{align-items:stretch}
      .segmented-control{width:100%}
      .segmented-control__btn{flex:1 1 0}
      
      
      .match-screen{padding-bottom:18px}
      .match-header-row{flex-direction:column;align-items:stretch}
      .match-header-actions{width:100%}
      .match-header-actions .btn{flex:1 1 0}
    @media (max-width: 560px){
    @media (max-width: 420px){
      .poker-centerpiece__sub{font-size:10px}
      .table-card-seat{font-size: 10px}
      .seat-top{top:8px}
      .seat-bottom{bottom:6px}
    }
    @media (pointer:coarse){
      .hand-card.playable,.poker-seat-badge.active,.poker-seat-card.is-turn .card-shell,.poker-seat-card.is-turn .card-back{animation:none}
      .hand-card.playable:hover,.hand-card.playable .card-shell,.hand-card.playable .card-back{transform:none}
    }

.hero-release{
  background:
    radial-gradient(circle at top right, rgba(255,215,109,.15), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.loadout-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
  margin-top:12px;
}
.loadout-card{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
}
.loadout-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:22px;
  background:rgba(4,8,18,.92);
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
}
.loadout-icon--empty{opacity:.62}
.loadout-icon--art{padding:0;position:relative}
.loadout-icon--art.rarity-common{background:linear-gradient(180deg,rgba(170,176,190,.28),rgba(90,98,116,.72));}
.loadout-icon--art.rarity-rare{background:linear-gradient(180deg,rgba(83,205,126,.28),rgba(28,111,67,.8));}
.loadout-icon--art.rarity-superRare{background:linear-gradient(180deg,rgba(92,170,255,.28),rgba(27,78,165,.82));}
.loadout-icon--art.rarity-epic{background:linear-gradient(180deg,rgba(187,120,255,.28),rgba(88,40,152,.82));  color:#c09aff;
}
.loadout-icon--art.rarity-legendary{background:linear-gradient(180deg,rgba(255,223,120,.3),rgba(156,101,9,.84));  color:#ffd878;
}
.loadout-icon__img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));}
.loadout-icon__art{width:100%;height:100%;object-fit:cover;display:block;background:rgba(4,8,18,.9)}
.loadout-icon__art--contain{object-fit:contain;padding:3px;background:rgba(4,8,18,.9)}
.collection-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.collectible-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(4,8,18,.75);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.collectible-card.equipped{
  border-color:rgba(201,168,76,.5);
  box-shadow:0 0 0 1px rgba(201,168,76,.2), 0 8px 24px rgba(0,0,0,.3);
}
.collectible-head{
  display:flex;
  gap:8px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.collectible-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:28px;
  background:rgba(4,8,18,.85);
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
}
.collectible-icon--art{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  border-radius:14px;
  background:rgba(4,8,18,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.collectible-art{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:rgba(4,8,18,.9);
}
.collectible-art--contain{
  object-fit:contain;
  padding:10px;
  background:rgba(4,8,18,.9);
  width:100%;
  height:100%;
  display:block;
}
.collectible-card h3{
  margin:0;
  font-size:18px;
}
.collectible-card p{
  margin:0;
  color:var(--muted);
  line-height:1.4;
  min-height:58px;
}
.collectible-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:auto;
}
.pill.rarity{font-weight:900}
.pill.rarity-common{color:#d7e7ff}
.pill.rarity-rare{color:#89ecff}
.pill.rarity-superRare{color:#7be6b7}
.pill.rarity-epic{color:#d1a2ff}
.pill.rarity-legendary{color:#ffd76d}
/* Exclusivo S0: no es una rareza de cofre, es una marca de haber estado. */
.pill.rarity-exclusiveS0{color:#ff8fb0}
.pill.rarity-starter{color:var(--ok)}
.asset-block + .asset-block{margin-top:14px}

.collectible-card.locked{ opacity:.45; filter:saturate(.5); }
.menu-card.owned{
  border-color:rgba(123,230,183,.3);
}
.collection-toolbar{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.collection-toolbar__label{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  color:var(--text);
}
.collection-toolbar__label .inline-icon{
  margin-right:0;
}

.select{
  appearance:none;
}
.search-input{
  position:relative;
  display:flex;
  align-items:center;
}
.search-input__icon{
  position:absolute;
  left:12px;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.search-input__field{
  padding-left:40px;
}
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip-btn{
  min-height:38px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:0 14px;
  font-weight:800;
  cursor:pointer;
}
.chip-btn.active{
  background:linear-gradient(180deg,rgba(137,236,255,.22),rgba(72,141,255,.14));
  border-color:rgba(137,236,255,.42);
}
.pill.ready{
  color:var(--ok);
  border-color:rgba(123,230,183,.28);
}
.release-box{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
}
@media (max-width: 900px){
  .toolbar-row{grid-template-columns:1fr;}
}


.app-hidden{opacity:0;pointer-events:none}

.startup-splash{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#080d18;
}
.startup-splash__bg{
  position:absolute;
  inset:0;
  background:center/cover no-repeat;
  filter:saturate(1.1) brightness(.9);
  transform:scale(1.04);
  transition:transform 8s ease;
}
.startup-splash.ready .startup-splash__bg{
  transform:scale(1.0);
}
.startup-splash__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(3,8,16,.2) 0%, rgba(3,8,16,.45) 50%, rgba(3,8,16,.82) 100%);
}
.startup-splash__content{
  position:relative;
  z-index:2;
  width:min(92vw, 460px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:20px;
}
.startup-splash__logo-wrap{
  width:min(82vw,320px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.startup-splash__logo{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 6px 32px rgba(0,0,0,.9)) drop-shadow(0 0 60px rgba(180,120,10,.4));
}
.startup-splash__copy{
  font-size:20px;
  font-weight:900;
  letter-spacing:.02em;
  color:#fff7d6;
  text-shadow:0 6px 24px rgba(0,0,0,.4);
}
.startup-splash__bar{
  width:100%;
  height:6px;
  padding:1px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.15);
}
.startup-splash__bar > span{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #a06a08 0%, #ffd060 40%, #c9a84c 70%, #ffee88 100%);
  box-shadow:0 0 14px rgba(201,168,76,.5);
  transition:width .12s linear;
}
.startup-splash__continue{
  min-width:240px;
  min-height:50px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(8,14,26,.74);
  color:#fff;
  font-weight:900;
  letter-spacing:.02em;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, background .2s ease;
}
.startup-splash.ready .startup-splash__continue{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.startup-splash__continue:disabled{cursor:default}
.startup-splash__continue:not(:disabled):hover{
  background:rgba(19,30,54,.92);
}
.startup-splash.leaving{
  opacity:0;
  transition:opacity .28s ease;
}
@media (max-width:640px){
  .startup-splash__content{width:min(94vw,420px);padding:18px 14px}
  .startup-splash__logo-wrap{width:min(88vw,340px);border-radius:24px}
  .startup-splash__copy{font-size:18px}
  .startup-splash__continue{min-width:220px}
}

/* Splash card flip background */
.startup-splash__card-bg{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
  pointer-events:none;
  opacity:.18;
}
.startup-splash__card-inner{
  width:clamp(120px,30vw,200px);
  aspect-ratio:2/3;
  position:relative;
  transform-style:preserve-3d;
  animation:splashCardFlip 3.2s ease-in-out infinite;
}
.startup-splash__card-front,
.startup-splash__card-back{
  position:absolute;
  inset:0;
  border-radius:12px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.startup-splash__card-front{
  width:100%;
  height:100%;
  object-fit:cover;
}
.startup-splash__card-back{
  background:linear-gradient(135deg,#1a2a4a,#0d1a32);
  border:2px solid rgba(201,168,76,.3);
  transform:rotateY(180deg);
}
@keyframes splashCardFlip{
  0%,40%{transform:rotateY(0deg)}
  50%,90%{transform:rotateY(180deg)}
  100%{transform:rotateY(360deg)}
}

/* ── PLAY SCREEN MAIN BUTTONS ─────────────────────────────────────────────── */
.play-main-btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:16px 20px;
  border-radius:16px;
  border:1.5px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(12px);
  cursor:pointer;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
}
.play-main-btn:active{transform:scale(.97)}
.play-main-btn--primary{
  background:linear-gradient(135deg,rgba(201,168,76,.35),rgba(140,100,20,.28));
  border-color:rgba(201,168,76,.55);
  box-shadow:0 4px 24px rgba(201,168,76,.18),inset 0 1px 0 rgba(255,255,255,.1);
}
.play-main-btn--notify{
  border-color:rgba(255,160,0,.5);
  animation:pvPulseRing 2.4s ease infinite;
}
.play-main-btn__icon{font-size:22px;flex-shrink:0;line-height:1}
.play-main-btn__label{
  flex:1;
  font-size:16px;
  font-weight:900;
  color:#fff;
  text-align:left;
  letter-spacing:.03em;
  font-family:'Cinzel',serif;
}
.play-main-btn__arrow{
  font-size:20px;
  color:rgba(255,255,255,.4);
  flex-shrink:0;
}
.play-main-btn--primary .play-main-btn__arrow{color:rgba(255,208,96,.7)}
.play-main-btn__badge{
  position:absolute;
  top:10px;
  right:40px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff566a;
  box-shadow:0 0 8px rgba(255,86,106,.6);
}

/* ── PLAY SCREEN SECONDARY BUTTONS ───────────────────────────────────────── */
.play-sec-btn{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:10px 6px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  cursor:pointer;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:transform .1s ease;
}
.play-sec-btn:active{transform:scale(.95)}
.play-sec-btn>span:first-child{font-size:18px;line-height:1}
.play-sec-btn>span:last-child{font-size:10px;font-weight:700;color:rgba(255,255,255,.65)}

/* ── MODE SELECTOR BOTTOM SHEET ───────────────────────────────────────────── */
.mode-selector-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:flex-end;
  animation:pvFadeIn .2s ease;
}
.mode-selector-sheet{
  width:100%;
  max-width:500px;
  margin:0 auto;
  background:linear-gradient(180deg,#0e1624,#091018);
  border-radius:24px 24px 0 0;
  border-top:1.5px solid rgba(201,168,76,.25);
  padding:16px 20px 32px;
  box-shadow:0 -8px 40px rgba(0,0,0,.7);
  animation:modeSheetUp .25s cubic-bezier(.34,1.56,.64,1);
  position:relative;
}
@keyframes modeSheetUp{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
.mode-selector-handle{
  width:40px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.2);
  margin:0 auto 16px;
}
.mode-selector-title{
  font-size:16px;font-weight:900;
  font-family:'Cinzel',serif;
  color:#ffd060;
  text-align:center;
  margin:0 0 18px;
  letter-spacing:.04em;
}
.mode-selector-cards{
  display:flex;
  gap:10px;
}
.mode-card{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:16px 8px;
  border-radius:16px;
  border:1.5px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  cursor:pointer;
  font-family:inherit;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.mode-card:active{transform:scale(.95)}
.mode-card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.mode-card--offline{opacity:.6}
.mode-card__icon{font-size:28px;line-height:1}
.mode-card__name{font-size:12px;font-weight:900;color:#fff;letter-spacing:.04em;font-family:'Cinzel',serif}
.mode-card__desc{font-size:10px;color:rgba(255,255,255,.5);text-align:center}
.mode-card__league{font-size:10px;color:#ffd060;font-weight:700;margin-top:2px}
.mode-selector-close{
  position:absolute;
  top:16px;right:16px;
  width:32px;height:32px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.6);
  font-size:14px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}


.screen-home{position:relative;isolation:isolate}
.screen-home::before{
  content:"";position:absolute;inset:0;border-radius:28px;
  background:linear-gradient(180deg, rgba(5,9,18,.34), rgba(5,9,18,.82)), none;
  opacity:.92;z-index:-2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.screen-home::after{content:"";position:absolute;inset:0;border-radius:28px;background:linear-gradient(180deg, rgba(7,17,29,.16), rgba(7,17,29,.52));z-index:-1}
.screen-home .topbar,.screen-home .panel{backdrop-filter:blur(8px);background:linear-gradient(180deg, rgba(10,20,35,.70), rgba(10,20,35,.46));}
.hero-release{position:relative;overflow:hidden;min-height:320px;background:radial-gradient(circle at top right, rgba(255,215,109,.18), transparent 30%), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));}
.hero-release::before{content:"";position:absolute;inset:0;background:none;opacity:.22;z-index:0;}
.hero-release > *{position:relative;z-index:1}

.menu-card--featured{overflow:hidden}
.menu-card__banner{margin:-16px -16px 12px;border-radius:18px 18px 14px 14px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
.menu-card__banner img{display:block;width:100%;height:150px;object-fit:cover}
.hero-online-banner{position:relative;overflow:hidden;padding:0}
.hero-online-banner__art{position:absolute;inset:0}
.hero-online-banner__art img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.02) brightness(.72)}
.hero-online-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(6,12,23,.30), rgba(6,12,23,.84));z-index:1}
.hero-online-banner__content{position:relative;z-index:2;padding:20px}
@media (max-width:640px){.menu-card__banner img{height:120px}.hero-online-banner__content{padding:16px}}

.hero-lobby-scene .hero-online-banner__art img{filter:saturate(1.02) brightness(.58)}
.lobby-scene-card{position:relative;overflow:hidden;padding:0;min-height:460px}
.lobby-scene-card__art{position:absolute;inset:0}
.lobby-scene-card__art img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.03) brightness(.52)}
.lobby-scene-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,12,28,.22), rgba(8,12,28,.86));z-index:1}
.lobby-scene-card__content{position:relative;z-index:2;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;min-height:460px}
@media (max-width:640px){.lobby-scene-card,.lobby-scene-card__content{min-height:380px}}


.result-screen-victory{
  background:
    linear-gradient(180deg, rgba(8,10,20,.12) 0%, rgba(8,10,20,.58) 38%, rgba(8,10,20,.82) 100%),
    none;
}
.result-victory-panel{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(22,18,36,.86) 0%, rgba(18,14,28,.94) 100%);
  border-color:rgba(255,214,120,.5);
  box-shadow:0 26px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);
}
.result-victory-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,215,120,.12) 0%, rgba(255,255,255,.02) 38%, rgba(255,160,60,.08) 100%);
  pointer-events:none;
}
.result-victory-panel > *{
  position:relative;
  z-index:1;
}
.result-screen-top1{
  background:
    linear-gradient(180deg, rgba(8,10,20,.10) 0%, rgba(8,10,20,.42) 36%, rgba(8,10,20,.82) 100%),
    none;
}
.result-top1-panel{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(34,24,10,.82) 0%, rgba(20,14,8,.94) 100%);
  border-color:rgba(255,220,130,.55);
  box-shadow:0 26px 60px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,245,210,.06);
}
.result-top1-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,224,140,.18) 0%, rgba(255,255,255,.03) 40%, rgba(255,170,40,.10) 100%);
  pointer-events:none;
}
.result-top1-panel > *{
  position:relative;
  z-index:1;
}
.result-screen-defeat{
  background:
    linear-gradient(180deg, rgba(8,8,14,.18) 0%, rgba(12,6,10,.56) 36%, rgba(10,6,8,.88) 100%),
    none;
}
.result-defeat-panel{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(24,12,16,.84) 0%, rgba(14,8,12,.95) 100%);
  border-color:rgba(255,96,96,.42);
  box-shadow:0 26px 60px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.04);
}
.result-defeat-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,96,96,.10) 0%, rgba(255,255,255,.02) 34%, rgba(120,0,0,.12) 100%);
  pointer-events:none;
}
.result-defeat-panel > *{
  position:relative;
  z-index:1;
}

.result-screen-top48{
  background:
    linear-gradient(180deg, rgba(8,10,24,.10) 0%, rgba(8,10,24,.42) 36%, rgba(8,10,24,.82) 100%),
    none;
}
.result-top48-panel{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(22,18,42,.84) 0%, rgba(14,12,30,.95) 100%);
  border-color:rgba(164,196,255,.5);
  box-shadow:0 26px 60px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.05);
}
.result-top48-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(140,180,255,.14) 0%, rgba(255,255,255,.02) 40%, rgba(120,90,255,.10) 100%);
  pointer-events:none;
}
.result-top48-panel > *{position:relative;z-index:1;}
.queue-scene-card .lobby-scene-card__art img{filter:saturate(1.04) brightness(.56);}
.season-top48-hero .hero-online-banner__art img{filter:saturate(1.04) brightness(.62);}
.season-missions-hero .hero-online-banner__art img{filter:saturate(1.02) brightness(.56);}


.pack-card{position:relative;overflow:hidden;padding:0}
.pack-card__art{position:absolute;inset:0}
.pack-card__art img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.04) brightness(.66)}
.pack-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(7,12,22,.22), rgba(7,12,22,.88));z-index:1}
.pack-card__content{position:relative;z-index:2;padding:18px}
.pack-card__visual{display:flex;justify-content:center;align-items:center;margin:12px 0 10px}
.pack-card__visual img{width:min(180px,72%);max-height:160px;object-fit:contain;display:block;filter:drop-shadow(0 14px 28px rgba(0,0,0,.38))}
.pack-card__visual--emoji{font-size:64px;line-height:1;filter:drop-shadow(0 10px 20px rgba(0,0,0,.25))}

.last-pack-hero{position:relative;overflow:hidden;padding:0}
.last-pack-hero__art{position:absolute;inset:0}
.last-pack-hero__art img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) brightness(.58)}
.last-pack-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,12,22,.18), rgba(8,12,22,.86));z-index:1}
.last-pack-hero__content{position:relative;z-index:2;padding:20px}


    .nav-icon{display:flex;align-items:center;justify-content:center;min-height:22px}
    .nav-icon__img{width:22px;height:22px;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
    .icon-btn--image{padding:0}
    .icon-btn--image img{width:22px;height:22px;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}

.collectible-card--founder{box-shadow:0 0 0 1px rgba(212,175,55,.55),0 0 18px rgba(212,175,55,.18);}


.compact-grid{align-items:start}
.home-hero{position:relative;overflow:hidden;background-size:cover;background-position:center;border-radius:28px;min-height:260px}
.home-hero--main{padding:0}
.home-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,26,.22),rgba(6,14,26,.86));}
.home-hero__content{position:relative;z-index:1;padding:22px;display:flex;flex-direction:column;gap:12px}
.home-hero__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.quick-hub__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hub-card{position:relative;min-height:160px;border:none;text-align:left;padding:18px;border-radius:24px;cursor:pointer;color:var(--text);display:flex;flex-direction:column;justify-content:flex-end;gap:8px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid var(--line);box-shadow:var(--shadow);background-size:cover;background-position:center;overflow:hidden}
.hub-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,18,36,.08),rgba(8,18,36,.84));}
.hub-card>*{position:relative;z-index:1}
.hub-card--primary{background:linear-gradient(135deg,rgba(98,215,255,.22),rgba(42,104,255,.16));}
.hub-card__label{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.play-hero{background:radial-gradient(circle at top right,rgba(137,236,255,.12),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03))}
.play-modes-grid .menu-card{min-height:200px}
.battle-hero{position:relative;overflow:hidden;background-size:cover;background-position:center;min-height:260px}
.battle-hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,18,36,.20),rgba(8,18,36,.88));}
.battle-hero__content{position:relative;z-index:1;padding:22px;display:flex;flex-direction:column;gap:8px}
.battle-progress{max-width:620px}
.battle-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;overflow-x:auto;overflow-y:hidden}
.battle-track-card{padding:14px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.04);display:flex;flex-direction:column;gap:8px;min-height:132px}
.battle-track-card__level{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);font-weight:900}
.battle-track-card.unlocked{background:linear-gradient(180deg,rgba(123,230,183,.16),rgba(255,255,255,.03));border-color:rgba(123,230,183,.34)}
.battle-track-card.locked{opacity:.9}
.mission-stack{display:flex;flex-direction:column;gap:10px}
.mission-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.mission-item.done{border-color:rgba(123,230,183,.34);background:linear-gradient(180deg,rgba(123,230,183,.14),rgba(255,255,255,.03))}
@media (max-width: 980px){
  .quick-hub__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 760px){
  .home-hero{min-height:220px}
  .home-hero__content,.battle-hero__content{padding:18px}
  .quick-hub__grid{grid-template-columns:1fr}
  .hub-card{min-height:138px}
  /* battle-track uses flex scroll, not grid */
}
@media (max-width: 560px){
  /* battle-track uses flex scroll, not grid */
  .home-hero__actions .btn,.footer-actions .btn{width:100%}
}

@media (pointer:coarse){
  .screen-home .topbar,.screen-home .panel{backdrop-filter:none}
}


.collectible-card.rarity-common{background:linear-gradient(180deg,rgba(122,131,148,.22),rgba(52,60,76,.72));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(182,190,208,.35);}
.collectible-card.rarity-rare{background:linear-gradient(180deg,rgba(55,167,97,.24),rgba(19,77,48,.78));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(94,221,138,.42);}
.collectible-card.rarity-superRare{background:linear-gradient(180deg,rgba(57,127,241,.24),rgba(15,54,126,.82));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(96,171,255,.42);}
.collectible-card.rarity-epic{background:linear-gradient(180deg,rgba(157,79,255,.24),rgba(70,27,126,.82));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(205,140,255,.46);}
.collectible-card.rarity-legendary{background:linear-gradient(180deg,rgba(255,208,76,.26),rgba(137,94,8,.84));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(255,226,133,.5);}
.collectible-icon.rarity-common,.collectible-icon--art.rarity-common{background:linear-gradient(180deg,rgba(170,176,190,.28),rgba(90,98,116,.72));box-shadow:0 0 0 1px rgba(205,210,224,.16) inset;}
.collectible-icon.rarity-rare,.collectible-icon--art.rarity-rare{background:linear-gradient(180deg,rgba(83,205,126,.28),rgba(28,111,67,.8));box-shadow:0 0 0 1px rgba(137,241,173,.2) inset;}
.collectible-icon.rarity-superRare,.collectible-icon--art.rarity-superRare{background:linear-gradient(180deg,rgba(92,170,255,.28),rgba(27,78,165,.82));box-shadow:0 0 0 1px rgba(162,205,255,.22) inset;}
.collectible-icon.rarity-epic,.collectible-icon--art.rarity-epic{background:linear-gradient(180deg,rgba(187,120,255,.28),rgba(88,40,152,.82));box-shadow:0 0 0 1px rgba(224,176,255,.22) inset;}
.collectible-icon.rarity-legendary,.collectible-icon--art.rarity-legendary{background:linear-gradient(180deg,rgba(255,223,120,.3),rgba(156,101,9,.84));box-shadow:0 0 0 1px rgba(255,236,171,.24) inset;}
.collectible-card.rarity-exclusiveS0{background:linear-gradient(180deg,rgba(255,143,176,.24),rgba(120,26,58,.82));border-color:rgba(255,183,205,.52);}
.collectible-icon.rarity-exclusiveS0,.collectible-icon--art.rarity-exclusiveS0{background:linear-gradient(180deg,rgba(255,143,176,.3),rgba(120,26,58,.84));box-shadow:0 0 0 1px rgba(255,199,216,.26) inset;}
.loadout-icon--art.rarity-exclusiveS0{background:linear-gradient(180deg,rgba(255,143,176,.3),rgba(120,26,58,.84));color:#ffc7d8;}
.pill.rarity-common{background:rgba(177,184,200,.2);border-color:rgba(214,219,231,.28);color:#f2f5ff;}
.pill.rarity-rare{background:rgba(83,205,126,.18);border-color:rgba(124,233,164,.3);color:#e6ffef;}
.pill.rarity-superRare{background:rgba(92,170,255,.18);border-color:rgba(140,197,255,.32);color:#eaf4ff;}
.pill.rarity-epic{background:rgba(187,120,255,.18);border-color:rgba(221,177,255,.32);color:#f8ebff;}
.pill.rarity-legendary{background:rgba(255,220,110,.2);border-color:rgba(255,236,171,.36);color:#fff9e7;}
.menu-card.owned.rarity-common, .menu-card.owned.rarity-rare, .menu-card.owned.rarity-superRare, .menu-card.owned.rarity-epic, .menu-card.owned.rarity-legendary{border-width:1px;}
.menu-card.owned.rarity-common{background:linear-gradient(180deg,rgba(120,128,144,.18),rgba(53,60,73,.78));}
.menu-card.owned.rarity-rare{background:linear-gradient(180deg,rgba(57,177,100,.18),rgba(20,87,51,.8));}
.menu-card.owned.rarity-superRare{background:linear-gradient(180deg,rgba(64,132,238,.18),rgba(19,63,142,.84));}
.menu-card.owned.rarity-epic{background:linear-gradient(180deg,rgba(156,83,255,.18),rgba(71,29,126,.84));}
.menu-card.owned.rarity-legendary{background:linear-gradient(180deg,rgba(255,212,82,.22),rgba(126,88,11,.86));}



    .screen-static-layout{height:calc(100svh - var(--safe-top) - var(--safe-bottom) - 92px);overflow:hidden;display:grid;grid-template-rows:auto auto auto 1fr;align-content:start}
    .screen-play.screen-static-layout{grid-template-rows:auto auto 1fr auto}
    .home-hero--compact{min-height:240px}
    .hero-mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
    .hero-mini-stat{padding:10px 12px;border-radius:16px;background:rgba(7,17,29,.48);border:1px solid rgba(255,255,255,.08)}
    .hero-mini-stat span{display:block;font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em}
    .hero-mini-stat strong{display:block;margin-top:4px;font-size:18px}
    .hub-strip-panel,.play-summary-row{padding:12px 14px}
    .hub-strip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
    .hub-strip-card{border:none;text-align:left;padding:14px;border-radius:20px;cursor:pointer;color:var(--text);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid var(--line);min-height:122px}
    .hub-strip-card--play{background:linear-gradient(180deg,rgba(137,236,255,.16),rgba(255,255,255,.04));border-color:rgba(137,236,255,.28)}
    .hub-strip-card__eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2)}
    .hub-strip-card strong{font-size:18px}
    .hub-strip-card span:last-child{font-size:13px;color:var(--muted);line-height:1.35}
    .concise-panel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px}
    .concise-info-card{border-radius:20px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);padding:14px;display:flex;flex-direction:column;gap:10px;min-height:0}
    .concise-info-card strong{font-size:17px;line-height:1.2}
    .concise-info-card p{margin:0;color:var(--muted);line-height:1.4;font-size:13px}
    .battle-hero--compact{min-height:190px}
    .play-mode-grid-compact{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;align-items:stretch}
    .play-mode-card{border-radius:24px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));padding:18px;display:flex;flex-direction:column;gap:10px;min-height:0}
    .play-mode-card--primary{background:linear-gradient(180deg,rgba(137,236,255,.14),rgba(255,255,255,.04));border-color:rgba(137,236,255,.24)}
    .play-mode-card h3{margin:0;font-size:24px}
    .play-mode-card p{margin:0;color:var(--muted);line-height:1.4}
    .mode-picker--compact{grid-template-columns:repeat(5,minmax(0,1fr));margin:4px 0 2px}
    .play-summary-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
    .play-summary-chip{padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
    .play-summary-chip span{display:block;font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em}
    .play-summary-chip strong{display:block;margin-top:4px;font-size:16px}
    .match-screen{height:calc(100svh - var(--safe-top) - var(--safe-bottom) - 20px);overflow:hidden;display:grid;grid-template-rows:auto auto 1fr;gap:12px}
    .match-screen .topbar{margin-bottom:0}

.match-pace-strip.ok{background:linear-gradient(180deg,rgba(56,188,124,.16),rgba(255,255,255,.03));border-color:rgba(94,226,162,.24)}
.match-pace-strip.warn{background:linear-gradient(180deg,rgba(255,190,80,.16),rgba(255,255,255,.03));border-color:rgba(255,210,128,.24)}
.match-pace-strip.danger{background:linear-gradient(180deg,rgba(255,110,110,.16),rgba(255,255,255,.03));border-color:rgba(255,146,146,.24)}
.match-pace-strip.neutral{background:rgba(255,255,255,.04)}
.match-pace-strip__top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.match-pace-strip__top strong{font-size:14px}
.match-pace-strip__top span{font-size:12px;color:var(--muted2);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.match-pace-strip__body{display:grid;gap:3px;font-size:12px;color:var(--muted);line-height:1.35}
.match-pace-strip__meter{height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.match-pace-strip__meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(137,236,255,.95),rgba(255,209,102,.92));transition:width .3s ease}

    .match-status-inline{margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .hand-card.playable:hover{transform:none}
    @media (max-width:1080px){
      .screen-static-layout{grid-template-rows:auto auto auto;overflow:auto;height:auto;max-height:calc(100svh - 110px)}
      .hub-strip-grid,.concise-panel-grid,.play-mode-grid-compact,.play-summary-row{grid-template-columns:1fr}
      .match-screen{height:auto;max-height:none;overflow:auto;display:flex}
    }
    @media (max-width:760px){
      .screen-static-layout{height:calc(100svh - var(--safe-top) - var(--safe-bottom) - 88px);grid-template-rows:auto auto auto 1fr}
      .brand-hero__icon{width:72px;height:72px;border-radius:18px}
      .title{font-size:40px}
      .home-hero--compact{min-height:220px}
      .hub-strip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .concise-panel-grid{grid-template-columns:1fr}
      .play-mode-grid-compact{grid-template-columns:1fr}
      .play-summary-row{grid-template-columns:repeat(3,minmax(0,1fr))}
      .play-mode-card h3{font-size:20px}
      .match-screen{gap:10px}
      .match-screen .row.between.match-header-row{display:none}
      .poker-summary-strip{display:none}
      .poker-seat-badge{min-width:108px;max-width:122px;padding:7px 8px;border-radius:14px}
      .poker-seat-name{font-size:12px}
      .poker-seat-title,.poker-seat-meta{font-size:10px}
      .poker-seat-stats{gap:4px}
      .poker-seat-stats span{font-size: 10px;padding:0 6px;min-height:20px}
      .poker-seat-card .card-shell,.poker-seat-card .card-back,.poker-seat-card .card-placeholder{width:62px}
      .seat-top{top:10px}
      .seat-left{left:8px}
      .seat-right{right:8px}
      .seat-top-left{left:12%;top:15%}
      .seat-top-right{right:12%;top:15%}
      .seat-bottom{bottom:10px}
      .table-cards-zone{padding-top:84px}
    }



body.app-static-screen{position:relative;overscroll-behavior-y:none}
body.app-static-screen #app{overscroll-behavior-y:none}
.screen-season0-shell{gap:12px}
.home-hero--season0,.battle-hero--season0{border-radius:28px}
.home-subtitle-tight{max-width:640px;margin-top:8px}
.home-hero__actions--season0{margin-top:6px}
.hero-mini-stats--season0{grid-template-columns:repeat(4,minmax(0,1fr))}
.hub-strip-panel--season0{padding:14px}
.hub-strip-grid--season0{grid-template-columns:repeat(3,minmax(0,1fr))}
.concise-panel-grid--season0{grid-template-columns:1fr 1fr 1.15fr}
.concise-info-card--season0{min-height:118px;justify-content:space-between}
.concise-info-card--accent{background:linear-gradient(180deg,rgba(137,236,255,.1),rgba(255,255,255,.04));border-color:rgba(137,236,255,.22)}
.play-mode-grid-compact--season0{grid-template-columns:1.18fr .95fr .95fr}
.play-mode-card--season0{justify-content:space-between}
.play-summary-row--season0 .play-summary-chip{min-height:74px}
.match-compact-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px}
.match-compact-header__copy{display:grid;gap:6px}
.match-compact-header__copy strong{font-size:20px;line-height:1.1}
.compact-notice--season0{padding:8px 10px;line-height:1.3}
.poker-summary-strip{gap:8px}
.table-cards-zone{width:min(88%,360px)}
.bottom-shell{padding:6px;gap:5px}
.nav-btn{min-height:52px}
@media (max-width:1080px){
  .screen-static-layout{height:calc(100svh - var(--safe-top) - var(--safe-bottom) - 92px);overflow:hidden;display:grid;grid-template-rows:auto auto auto 1fr}
  .screen-play.screen-static-layout{grid-template-rows:auto auto 1fr auto}
  .hub-strip-grid--season0,.concise-panel-grid--season0,.play-mode-grid-compact--season0{grid-template-columns:1fr}
  .hero-mini-stats--season0{grid-template-columns:repeat(2,minmax(0,1fr))}
  .match-screen{height:calc(100svh - var(--safe-top) - var(--safe-bottom) - 20px);max-height:none;overflow:hidden;display:grid;grid-template-rows:auto auto 1fr}
}
@media (max-width:760px){
  #app{padding:calc(10px + var(--safe-top)) 10px calc(88px + var(--safe-bottom))}
  .screen-season0-shell{gap:10px}
  .screen-static-layout{height:calc(100svh - var(--safe-top) - var(--safe-bottom) - 84px);grid-template-rows:auto auto auto 1fr;overflow:hidden}
  .home-hero--compact,.battle-hero--compact{min-height:176px}
  .home-hero,.battle-hero,.hub-strip-panel,.concise-panel-grid,.play-mode-grid-compact,.play-summary-row,.match-compact-header,
  .brand-hero{align-items:flex-start}
  .hero-mini-stats--season0{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hero-mini-stat{padding:9px 10px;border-radius:14px}
  .hub-strip-grid--season0{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .hub-strip-card{min-height:102px;padding:12px;border-radius:18px}
  .hub-strip-card strong{font-size:16px}
  .hub-strip-card span:last-child{font-size:12px;line-height:1.25}
  .concise-panel-grid--season0{grid-template-columns:1fr;gap:8px}
  .concise-info-card--season0{gap:8px;padding:12px;min-height:0}
  .play-mode-grid-compact--season0{grid-template-columns:1fr;gap:8px}
  .play-mode-card--season0{padding:14px;border-radius:20px}
  .play-summary-row--season0{grid-template-columns:1fr 1fr 1fr;gap:8px;padding:10px 12px}
  .play-summary-chip{padding:10px 12px;border-radius:16px}
  .match-screen{gap:8px;height:calc(100svh - var(--safe-top) - var(--safe-bottom) - 12px);overflow:hidden}
  .match-compact-header{padding:10px 12px;border-radius:20px;gap:8px}
  .match-compact-header__copy strong{font-size:17px}
  .match-header-actions .btn{min-height:40px;padding:10px 12px}
  .poker-summary-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .poker-centerpiece__title{font-size:15px;line-height:1.22}
  .poker-centerpiece__sub{font-size:10px}
  .table-cards-zone{width:min(90%,286px);padding-top:90px;gap:6px}
  .table-card-slot .card-shell,.table-card-slot .card-back,.table-card-slot .card-placeholder{width:54px}
  .one-card-preview-strip{display:none}
  .prediction-panel{padding:12px}
  .hand-card .card-shell,.hand-card .card-back,.hand-card .card-placeholder{width:74px}
  .bottom-shell{grid-template-columns:repeat(7,minmax(0,1fr));padding:5px;gap:4px;border-radius:20px}
  .nav-btn{min-height:50px;border-radius:14px}
  .nav-btn small{font-size:10px}
}


html.screen-static-ui,body.screen-static-ui{overscroll-behavior:none;}
body.screen-match{overflow:hidden;height:100dvh;}
body.screen-match #app{height:100dvh;padding-bottom:calc(18px + var(--safe-bottom));overflow:hidden;}
.screen-static{min-height:calc(100dvh - 26px - var(--safe-top) - var(--safe-bottom));}
.hero-microstats{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.hero-chip{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:800;color:#fff}
.menu-card--tight{min-height:0}
.compact-reward-strip{display:flex;justify-content:space-between;align-items:center;gap:14px}
.compact-reward-strip .footer-actions{margin-top:0}
.quick-hub__grid--compact .hub-card{min-height:148px}
.play-scene-hero .hero-online-banner__art img,.store-hero .hero-online-banner__art img,.collection-hero .hero-online-banner__art img{filter:saturate(1.04) brightness(.58)}
.mode-stage__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mode-stage-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:24px;border:1px solid rgba(255,255,255,.1);min-height:260px;overflow:hidden;box-shadow:var(--shadow)}
.mode-stage-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,26,.16),rgba(6,14,26,.84));z-index:0}
.mode-stage-card>*{position:relative;z-index:1}
.mode-stage-card--cpu{background:radial-gradient(circle at top right,rgba(137,236,255,.18),transparent 34%),none,rgba(255,215,109,.14),transparent 28%),none,rgba(123,230,183,.16),transparent 30%),none;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.mode-picker--compact{grid-template-columns:repeat(5,minmax(0,1fr))}
.store-screen .card-grid--packs{grid-template-columns:repeat(2,minmax(0,1fr))}
.pack-card{min-height:520px;border-radius:28px}
.pack-card__header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pack-card__visual--booster{min-height:220px;position:relative}
.pack-card__visual--booster::before{content:"";position:absolute;inset:12px;border-radius:24px;background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,0) 65%);filter:blur(6px)}
.pack-card__visual--booster img{width:min(210px,74%);max-height:190px;animation:packFloat 2.8s ease-in-out infinite}
.pack-odds-strip{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.pack-odds-chip{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);font-size:11px;font-weight:900;color:#fff}
.last-pack-hero--compact .last-pack-hero__content{padding:18px}
.collection-reward-inline{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
.collection-reward-inline__visual .collectible-icon--art{height:140px}
.collection-grid--gallery{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.collectible-card--spotlight{position:relative;overflow:hidden;padding:16px 16px 18px}
.collectible-card__glow{position:absolute;inset:auto -30% 65% -30%;height:120px;background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,0) 70%);pointer-events:none}
.collectible-card__title{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.collectible-card__status{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:11px;font-weight:900;color:rgba(255,255,255,.82)}
.collectible-card__status.ready{color:var(--ok);border-color:rgba(123,230,183,.26)}
.collectible-card__tags{display:flex;flex-wrap:wrap;gap:8px}
.inventory-panel--filters{padding-top:18px}
.pack-reveal-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,9,18,.82);backdrop-filter:blur(8px)}
.pack-reveal{position:relative;width:min(92vw,440px);padding:28px 18px 20px;border-radius:28px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(12,22,40,.96),rgba(8,16,30,.94));box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden;display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.pack-reveal__close{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.pack-reveal__burst{position:absolute;inset:-20%;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 38%);animation:burstPulse 1s ease-out infinite alternate}
.pack-reveal__booster{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;min-height:210px}
.pack-reveal__booster img{width:min(220px,62vw);max-height:210px;object-fit:contain;filter:drop-shadow(0 24px 40px rgba(0,0,0,.42));animation:packShake 0.9s cubic-bezier(.2,.8,.2,1)}
.pack-reveal__card{position:relative;z-index:1;width:100%}
.pack-reveal__header{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.pack-reveal--common{box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(214,219,231,.14) inset}
.pack-reveal--rare{box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(124,233,164,.16) inset}
.pack-reveal--superRare{box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(140,197,255,.18) inset}
.pack-reveal--epic{box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(221,177,255,.2) inset}
.pack-reveal--legendary{box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,236,171,.24) inset}
.match-screen{height:calc(100dvh - 26px - var(--safe-top) - var(--safe-bottom));overflow:hidden;gap:10px;padding-bottom:0}
.match-header-copy{max-width:440px}
.match-status-inline{margin-top:10px}
.round-history-panel{display:none}
@keyframes packFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes burstPulse{from{transform:scale(.92);opacity:.72}to{transform:scale(1.06);opacity:1}}
@keyframes packShake{0%{transform:scale(.82) rotate(-8deg);opacity:0}22%{transform:scale(1) rotate(6deg);opacity:1}42%{transform:scale(1.04) rotate(-4deg)}62%{transform:scale(1) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@media (max-width: 980px){.mode-stage__grid{grid-template-columns:1fr}.store-screen .card-grid--packs{grid-template-columns:1fr}.match-poker-grid{grid-template-columns:1fr}.match-screen{height:auto;min-height:calc(100dvh - 26px - var(--safe-top) - var(--safe-bottom));overflow:visible}.round-history-panel{display:block}.collection-reward-inline{grid-template-columns:1fr}}
@media (max-width: 640px){.compact-reward-strip{flex-direction:column;align-items:stretch}.compact-reward-strip .footer-actions .btn{width:100%}.quick-hub__grid--compact .hub-card{min-height:132px}.pack-card{min-height:480px}.pack-reveal{padding:24px 14px 18px}.pack-reveal__booster{min-height:180px}.pack-reveal__booster img{width:min(200px,66vw)}.match-screen{padding-bottom:12px}.match-poker-grid{gap:10px}.table-cards-zone{padding-top:86px}}


/* v8 refinado: tienda + colección */
.store-hero--premium,.collection-hero--premium{overflow:hidden;position:relative}
.store-hero--premium::after,.collection-hero--premium::after{content:"";position:absolute;inset:auto -18% -30% auto;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 72%);pointer-events:none}
.store-focus-strip,.inventory-highlight-strip{display:flex;justify-content:space-between;align-items:center;gap:16px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08)}
.inventory-highlight-strip__count{display:inline-flex;align-items:center;justify-content:center;min-width:90px;min-height:42px;padding:0 14px;border-radius:999px;background:rgba(137,236,255,.12);border:1px solid rgba(137,236,255,.18);font-weight:900;color:#fff}
.inventory-loadout-panel{padding-top:14px}
.inventory-loadout-panel .loadout-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.store-screen .card-grid--packs{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.packs-stage--premium{background:linear-gradient(180deg,rgba(10,20,37,.92),rgba(8,16,28,.94));border-color:rgba(255,255,255,.08)}
.pack-card{min-height:560px;border-radius:30px;overflow:hidden;padding:0;background:linear-gradient(180deg,rgba(11,22,40,.98),rgba(8,16,30,.98));border:1px solid rgba(255,255,255,.08)}
.pack-card__art{position:relative;height:154px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
.pack-card__art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,26,.12),rgba(6,14,26,.76));}
.pack-card__art img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.08) brightness(.7)}
.pack-card__content{position:relative;padding:18px;display:flex;flex-direction:column;gap:12px;min-height:calc(100% - 154px)}
.pack-card__visual--booster{min-height:238px;position:relative}
.pack-card__visual--booster::before{content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 68%);filter:blur(8px)}
.pack-card__visual--booster::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,255,255,.08);opacity:.7}
.pack-card__visual--booster img{width:min(232px,78%);max-height:216px;animation:packFloatPremium 2.6s ease-in-out infinite;filter:drop-shadow(0 28px 42px rgba(0,0,0,.42))}
.pack-card__header .pill:last-child{background:rgba(255,215,109,.12);border-color:rgba(255,215,109,.18);color:var(--gold)}
.pack-card h3{margin:0;font-size:24px;letter-spacing:-.04em}
.pack-card p{margin:0;color:var(--muted);line-height:1.46}
.pack-card .btn{margin-top:auto}
.pack-card--classic{box-shadow:0 22px 48px rgba(0,0,0,.28),0 0 0 1px rgba(214,219,231,.06) inset}
.pack-card--elite{box-shadow:0 24px 54px rgba(0,0,0,.32),0 0 0 1px rgba(255,236,171,.10) inset}
.collection-grid--gallery{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.collectible-card--spotlight{padding:14px 14px 16px;border-radius:24px;border-color:rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(16,30,50,.98),rgba(10,20,35,.96));box-shadow:0 18px 38px rgba(0,0,0,.24)}
.collectible-card__shine{position:absolute;inset:-30% auto auto -20%;width:180px;height:180px;background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,0) 72%);pointer-events:none;transform:rotate(-12deg)}
.collectible-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.collectible-head__right{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.collectible-card__title h3{margin:0;font-size:18px;line-height:1.18;letter-spacing:-.03em}
.collectible-card__status{white-space:nowrap}
.collectible-card p{margin:8px 0 0;color:var(--muted);line-height:1.42;font-size:13px}
.collectible-actions{margin-top:12px}
.collectible-card.locked .collectible-card__glow{opacity:.55}
.pack-reveal-overlay{background:radial-gradient(circle at center,rgba(17,32,56,.70),rgba(4,9,18,.92));backdrop-filter:blur(10px)}
.pack-reveal{width:min(92vw,460px);padding:30px 18px 20px;border-radius:30px;background:linear-gradient(180deg,rgba(13,24,44,.98),rgba(8,16,30,.96));}
.pack-reveal__stage{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-size:11px;font-weight:900;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.84)}
.pack-reveal__spark{position:absolute;width:140px;height:140px;border-radius:50%;filter:blur(8px);opacity:.65;pointer-events:none}
.pack-reveal__spark--a{left:-24px;top:90px;background:radial-gradient(circle,rgba(137,236,255,.26),rgba(137,236,255,0) 72%)}
.pack-reveal__spark--b{right:-18px;top:110px;background:radial-gradient(circle,rgba(255,215,109,.24),rgba(255,215,109,0) 72%)}
.pack-reveal__booster{min-height:224px}
.pack-reveal__booster img{animation:packIntro 1.05s cubic-bezier(.2,.8,.2,1)}
.pack-reveal__card{padding-top:4px}
.pack-reveal__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.pack-reveal__actions .btn{min-width:148px}
@keyframes packFloatPremium{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.015)}}
@keyframes packIntro{0%{transform:scale(.76) rotate(-10deg);opacity:0}22%{transform:scale(1.02) rotate(5deg);opacity:1}44%{transform:scale(1.06) rotate(-4deg)}68%{transform:scale(1) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
@media (max-width: 980px){.store-focus-strip,.inventory-highlight-strip{flex-direction:column;align-items:stretch}.store-screen .card-grid--packs{grid-template-columns:1fr}.inventory-loadout-panel .loadout-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.pack-card{min-height:520px}.pack-card__art{height:132px}.pack-card__content{min-height:calc(100% - 132px);padding:16px}.pack-card__visual--booster{min-height:208px}.pack-card__visual--booster img{width:min(210px,76%)}.inventory-loadout-panel .loadout-grid{grid-template-columns:1fr}.collectible-card__title{flex-direction:column;align-items:flex-start}.pack-reveal__actions .btn{width:100%}}


/* v9 visual polish */
.screen{animation:screenFadeIn .34s cubic-bezier(.2,.8,.2,1)}
@keyframes screenFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.home-hero--season-finish{position:relative;min-height:290px;box-shadow:0 34px 70px rgba(0,0,0,.34)}
.home-hero--season-finish::before{content:"";position:absolute;inset:auto -12% -35% -12%;height:180px;background:radial-gradient(circle,rgba(255,215,109,.18),rgba(255,215,109,0) 65%);pointer-events:none}
.home-hero__overlay--season{background:linear-gradient(180deg,rgba(5,12,23,.16),rgba(6,14,26,.62) 46%,rgba(6,14,26,.9) 100%)}
.home-hero__topline{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.home-hero__titlewrap{display:flex;flex-direction:column;gap:6px}
.home-hero__strap{display:inline-flex;align-items:center;width:fit-content;min-height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#e9f6ff}
.home-hero__subtitle{max-width:760px}
.hero-spotlight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:6px}
.hero-spotlight-card{padding:12px 14px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(4px)}
.hero-spotlight-card span{display:block;font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em}
.hero-spotlight-card strong{display:block;margin-top:6px;font-size:16px;line-height:1.15}
.home-shortcuts--season0,.home-pillars--season0,.compact-reward-strip--season0{border-radius:26px}
.quick-hub__grid--season0 .hub-card{position:relative;overflow:hidden;min-height:160px;justify-content:flex-end}
.quick-hub__grid--season0 .hub-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,14,24,.08),rgba(7,14,24,.78));z-index:0}
.quick-hub__grid--season0 .hub-card>*{position:relative;z-index:1}
.hub-card--season0 strong{font-size:22px;line-height:1.06;letter-spacing:-.03em}
.menu-card--spotlight{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border-color:rgba(255,255,255,.1)}
.mode-stage-card{transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.mode-stage-card:active{transform:translateY(1px) scale(.995)}
.result-screen{gap:16px}
.result-hero-card{position:relative;overflow:hidden}

.result-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.result-stat-card{padding:14px 15px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1)}
.result-stat-card span{display:block;font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em}
.result-stat-card strong{display:block;margin-top:8px;font-size:24px;line-height:1}













.result-exit-tile strong{font-size:18px;line-height:1.12}
.result-exit-tile:hover,.result-exit-tile:active{transform:translateY(-1px);border-color:rgba(137,236,255,.26);box-shadow:0 16px 30px rgba(0,0,0,.18)}

.pack-reveal-overlay{background:radial-gradient(circle at center,rgba(42,62,98,.78),rgba(4,9,18,.95));backdrop-filter:blur(12px)}
.pack-reveal{width:min(92vw,500px);padding:34px 18px 22px;border-radius:32px;background:radial-gradient(circle at 50% 12%,rgba(255,255,255,.06),rgba(255,255,255,0) 26%),linear-gradient(180deg,rgba(13,24,44,.98),rgba(8,16,30,.96))}
.pack-reveal::after{content:"";position:absolute;inset:10px;border-radius:26px;border:1px solid rgba(255,255,255,.08);pointer-events:none}
.pack-reveal__stage{letter-spacing:.14em;background:rgba(255,255,255,.075)}
.pack-reveal__booster{min-height:244px}
.pack-reveal__booster img{animation:packIntro 1.15s cubic-bezier(.2,.8,.2,1), packFloat 2.1s ease-in-out infinite 1.1s;transform-origin:center center}
.pack-reveal__card{padding-top:8px}
.pack-reveal__spark{width:170px;height:170px;opacity:.78;filter:blur(10px)}
.pack-reveal__spark--a{left:-38px;top:82px}
.pack-reveal__spark--b{right:-28px;top:102px}
@keyframes packFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.02)}}
.toast{animation:toastDrop .28s ease}
@keyframes toastDrop{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width: 980px){
  .hero-spotlight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .result-stats-grid,
  .home-hero__strap{font-size:11px}
  .hero-spotlight-grid,.result-stats-grid,
  .result-stat-card strong{font-size:22px}
  .pack-reveal{padding:28px 14px 18px}
  .pack-reveal__booster{min-height:208px}
}


.home-hero__subtitle{font-size:14px;line-height:1.5;color:rgba(245,248,255,.78)}
.hero-spotlight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:4px}
.hero-spotlight-card{padding:12px 12px 11px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(8,18,36,.36);backdrop-filter:blur(8px)}
.hero-spotlight-card span{display:block;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,248,255,.58)}
.hero-spotlight-card strong{display:block;margin-top:5px;font-size:15px;line-height:1.1;color:#fff}
.home-shortcuts--season0,.home-pillars--season0,.compact-reward-strip--season0,.store-focus-strip,.inventory-highlight-strip,.mode-stage,.play-scene-hero,.store-hero--premium,.collection-hero--premium{box-shadow:0 22px 44px rgba(0,0,0,.26)}

.hub-card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.hub-card:active{transform:translateY(1px) scale(.995)}
.hub-card--season0 strong{font-size:24px;line-height:1.02;letter-spacing:-.04em}
.hub-card .small{color:rgba(245,248,255,.78)}
.mode-stage-card h3,.pack-card h3{margin:0;font-size:24px;line-height:1.02;letter-spacing:-.04em}
.mode-stage-card p,.menu-card--spotlight p{color:rgba(245,248,255,.76)}
.mode-stage-card .btn{margin-top:auto}
.store-focus-strip,.inventory-highlight-strip,.compact-reward-strip{border-radius:22px}
.inventory-highlight-strip__count{min-width:96px;min-height:46px}
.result-screen .compact-reward-strip{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03))}
@media (max-width: 760px){
  .hero-spotlight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-hero__subtitle{font-size:13px}
  .hub-card--season0 strong{font-size:22px}
  .mode-stage-card h3,.pack-card h3{font-size:22px}
}
@media (max-width: 640px){
  #app{padding-left:12px;padding-right:12px;padding-bottom:calc(90px + var(--safe-bottom))}
  .topbar{grid-template-columns:auto 1fr;align-items:start;border-radius:24px;padding:10px}
  .topbar .resources{grid-column:1 / -1;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
  .home-hero--season-finish{min-height:248px}
  .home-shortcuts .section-head,.home-pillars .section-head,.store-screen .section-head,.inventory-screen 
  .quick-hub__grid--season0{grid-template-columns:1fr}
  .hub-card,.quick-hub__grid--compact .hub-card{min-height:124px}
  .mode-stage-card{min-height:220px;padding:16px}
  .store-focus-strip,.inventory-highlight-strip,.compact-reward-strip{padding:14px}
  .bottom-nav{padding-left:10px;padding-right:10px}
  .bottom-shell{gap:6px;padding:6px;border-radius:22px}
  .nav-btn{min-height:54px;border-radius:16px}
  .nav-btn small{font-size:10px}
}


/* v13 premium mobile: menos dashboard, más juego */
.screen-home-s0 .panel{
  background:linear-gradient(180deg, rgba(8,18,31,.56), rgba(8,18,31,.34));
  border-color:rgba(255,255,255,.08);
  box-shadow:0 18px 34px rgba(0,0,0,.20);
}
.screen-home-s0 .home-shortcuts--season0,
.screen-home-s0 .home-inline-strip--season0,
.play-screen .mode-stage--premium,
.store-screen .store-focus-strip--premium,
.inventory-screen .inventory-highlight-strip--premium,
.inventory-screen .inventory-loadout-panel--premium{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:none;
}
.home-stage-panel__head{margin-bottom:14px}
.home-inline-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 14px;border-radius:24px}
.home-inline-strip__item{padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.home-inline-strip__item span{display:block;font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em}
.home-inline-strip__item strong{display:block;margin-top:6px;font-size:16px;line-height:1.15}
.compact-reward-strip--premium{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));}
.quick-hub__grid--season0 .hub-card{min-height:180px;border-radius:28px;border-color:rgba(255,255,255,.08);box-shadow:0 22px 40px rgba(0,0,0,.24)}
.quick-hub__grid--season0 .hub-card::before{background:linear-gradient(180deg,rgba(5,12,22,.06),rgba(5,12,22,.72))}
.quick-hub__grid--season0 .hub-card strong{font-size:24px;max-width:12ch}
.home-hero--season-finish{min-height:320px;border-color:rgba(255,255,255,.10);box-shadow:0 30px 60px rgba(0,0,0,.30)}
.hero-spotlight-card{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035));border-color:rgba(255,255,255,.12)}
.play-scene-hero--premium{min-height:220px;border-radius:28px}
.play-screen .mode-stage--premium{padding:10px 0 0;background:transparent;border:none}
.mode-stage__grid{gap:16px}
.mode-stage-card{min-height:300px;border-radius:28px;border-color:rgba(255,255,255,.08);box-shadow:0 22px 42px rgba(0,0,0,.24)}
.mode-stage-card::before{background:linear-gradient(180deg,rgba(5,12,22,.12),rgba(5,12,22,.82))}
.mode-stage-card h3{margin:0;font-size:28px;line-height:1.02;letter-spacing:-.04em}
.mode-stage-card p{margin:0;color:var(--muted);line-height:1.45;max-width:28ch}
.mode-stage-card__footer{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.mode-stage-card__footer .btn{width:100%}
.store-screen .packs-stage--premium,
.inventory-screen .inventory-panel--filters,
.inventory-screen .inventory-loadout-panel--premium,
.inventory-screen .inventory-highlight-strip--premium{border-radius:28px}
.store-screen .packs-stage--premium{background:transparent;border:none;box-shadow:none;padding:0}
.store-screen .pack-card,
.inventory-screen .collectible-card--spotlight{border:1px solid rgba(255,255,255,.07)}
.store-screen .pack-card{box-shadow:0 22px 42px rgba(0,0,0,.26)}
.inventory-screen .collectible-card--spotlight{box-shadow:0 16px 30px rgba(0,0,0,.20)}
.inventory-screen .inventory-panel--filters{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));border-color:rgba(255,255,255,.06);box-shadow:none}
.store-screen .compact-reward-strip,
.inventory-screen .panel{border-color:rgba(255,255,255,.06)}
@media (max-width:760px){
  .home-inline-strip{grid-template-columns:1fr}
  .quick-hub__grid--season0 .hub-card{min-height:154px}
  .home-hero--season-finish{min-height:288px}
  .mode-stage-card{min-height:260px}
  .mode-stage-card h3{font-size:24px}
}


/* v15 premium pass */
.home-shortcuts--season0{background:transparent;border:none;box-shadow:none;padding:0}
.home-stage-panel__head{margin-bottom:2px}
.home-hero--season-finish{background-position:center top;overflow:hidden}
.home-hero--season-finish::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 18%,rgba(255,215,109,.10),transparent 16%),radial-gradient(circle at 18% 10%,rgba(137,236,255,.10),transparent 18%);pointer-events:none}
.home-hero__content{padding:26px 24px 24px}
.hero-spotlight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hero-spotlight-card{padding:12px 14px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(6px)}
.hero-spotlight-card span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(245,248,255,.58)}
.hero-spotlight-card strong{display:block;margin-top:8px;font-size:18px;line-height:1.05;letter-spacing:-.03em}
.quick-hub__grid--season0{gap:14px}
.quick-hub__grid--season0 .hub-card{min-height:188px;padding:20px 18px 18px;border-radius:30px;border-color:rgba(255,255,255,.06);box-shadow:0 18px 36px rgba(0,0,0,.20);transform-origin:center bottom}
.quick-hub__grid--season0 .hub-card:nth-child(2), .quick-hub__grid--season0 .hub-card:nth-child(4){transform:translateY(10px)}
.quick-hub__grid--season0 .hub-card::before{background:linear-gradient(180deg,rgba(5,12,22,.03),rgba(5,12,22,.78))}
.quick-hub__grid--season0 .hub-card::after{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0) 34%),linear-gradient(180deg,rgba(7,14,24,.06),rgba(7,14,24,.78))}
.quick-hub__grid--season0 .hub-card strong{font-size:26px;max-width:11ch}
.quick-hub__grid--season0 .hub-card .small{max-width:26ch;color:rgba(245,248,255,.74)}
.hub-card__label{font-size:10px;color:rgba(137,236,255,.86)}
.home-inline-strip--season0{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border-color:rgba(255,255,255,.06);box-shadow:none}
.home-inline-strip__item strong{font-size:15px;line-height:1.15}
.play-scene-hero--premium{padding:0;overflow:hidden;border-radius:30px}
.play-scene-hero--premium .hero-online-banner__content{padding:22px 22px 18px}
.play-scene-hero--premium .hero-online-banner__art img{filter:saturate(1.04) brightness(.68)}
.mode-stage__grid{gap:18px}
.mode-stage-card{min-height:312px;padding:20px 18px 18px;border-radius:30px;border-color:rgba(255,255,255,.07);box-shadow:0 18px 38px rgba(0,0,0,.21)}
.mode-stage-card:nth-child(2){transform:translateY(10px)}
.mode-stage-card__tag{color:#dff7ff}
.mode-stage-card h3{font-size:30px}
.mode-stage-card p{color:rgba(245,248,255,.74)}
.mode-stage-card__footer{gap:12px}
.store-screen .packs-stage--premium,.inventory-screen .inventory-panel--filters{padding:0;background:transparent;border:none;box-shadow:none}
.store-screen .card-grid--packs,.collection-grid--gallery{gap:16px}
.store-screen .pack-card{border-radius:30px;border-color:rgba(255,255,255,.06);box-shadow:0 18px 38px rgba(0,0,0,.22)}
.pack-card__content{padding:20px}
.pack-card__header{margin-bottom:2px}
.pack-card p{color:rgba(245,248,255,.74);line-height:1.44}
.collectible-card--spotlight{padding:16px 16px 18px;border-radius:28px;border-color:rgba(255,255,255,.06);box-shadow:0 18px 36px rgba(0,0,0,.21)}
.collectible-card__title h3{font-size:19px}
.collectible-card__status{background:rgba(255,255,255,.045)}
.collectible-card p{color:rgba(245,248,255,.74)}
.collectible-actions{margin-top:auto;padding-top:8px}
@media (max-width: 980px){
  .hero-spotlight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick-hub__grid--season0 .hub-card:nth-child(2), .quick-hub__grid--season0 .hub-card:nth-child(4), .mode-stage-card:nth-child(2){transform:none}
}
@media (max-width: 640px){
  .home-hero__content{padding:20px 18px 18px}
  .hero-spotlight-grid{grid-template-columns:1fr}
  .quick-hub__grid--season0 .hub-card{min-height:146px;padding:18px 16px 16px;border-radius:26px}
  .quick-hub__grid--season0 .hub-card strong{font-size:23px;max-width:unset}
  .mode-stage-card{min-height:248px;padding:18px 16px 16px;border-radius:26px}
  .mode-stage-card h3{font-size:24px}
  .store-screen .pack-card,.collectible-card--spotlight{border-radius:26px}
}


/* V16 premium polish */
.screen{gap:0}
.panel{
  position:relative;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.05), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  border-color:rgba(255,255,255,.10);
}
.panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 34%);
  opacity:.65;
}
.home-hero--season-finish,.store-hero--premium,.collection-hero--premium,.result-hero-card,
.battle-hero,.profile-hero--season0{
  box-shadow:0 28px 64px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}
.home-hero__actions .btn:first-child,
.store-focus-strip .btn:first-child,
.inventory-highlight-strip .btn:first-child{min-width:168px}
.hero-chip,.pill,.badge,.phase-pill,.poker-summary-chip{
  backdrop-filter:blur(8px);
}
.hero-chip{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.quick-hub__grid--season0 .hub-card,
.play-modes-grid .menu-card,
.collection-grid--gallery .collectible-card,
.card-grid--packs .pack-card,

.quick-hub__grid--season0 .hub-card:active,
.play-modes-grid .menu-card:active,
.collection-grid--gallery .collectible-card:active,
.card-grid--packs .pack-card:active{transform:translateY(1px) scale(.995)}
.quick-hub__grid--season0 .hub-card{
  border-color:rgba(255,255,255,.11);
  box-shadow:0 20px 42px rgba(0,0,0,.28);
}
.quick-hub__grid--season0 .hub-card::before{
  background:linear-gradient(180deg, rgba(10,20,34,.06), rgba(10,20,34,.84));
}
.quick-hub__grid--season0 .hub-card strong,
.play-modes-grid .menu-card h3,
.play-modes-grid .menu-card h4{
  text-shadow:0 8px 24px rgba(0,0,0,.24);
}
.play-modes-grid .menu-card,
.menu-card--spotlight{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.06), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.058), rgba(255,255,255,.024));
}
.store-focus-strip,.inventory-highlight-strip,.compact-reward-strip--season0{
  background:linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.02));
}
.pack-card__visual--booster::after{
  box-shadow:0 0 0 1px rgba(255,255,255,.03), 0 0 50px rgba(255,215,109,.06);
}
.pack-card__visual--booster img{
  animation:packFloatPremium 2.8s ease-in-out infinite;
}
.pack-reveal__card .collectible-card{
  transform:translateY(0) scale(1);
  animation:revealPop .45s cubic-bezier(.2,.8,.2,1);
}
.collectible-card{
  border-width:1px;
  border-color:rgba(255,255,255,.12);
}
.collectible-card__shine{
  opacity:.9;
  animation:cardShineSweep 4.8s ease-in-out infinite;
}
.collectible-card__status,
.poker-seat-stats span,
.profile-summary-chip{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045));
}
.profile-summary-strip--season0{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.profile-summary-chip{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:82px;border-radius:20px;border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}
.profile-summary-chip strong{font-size:26px;line-height:1}
.profile-summary-chip span{margin-top:6px;font-size:11px;font-weight:900;letter-spacing:.10em;text-transform:uppercase;color:var(--muted)}
.concise-panel-grid--profile{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));}
.poker-centerpiece__badge{
  box-shadow:0 0 0 1px rgba(255,215,109,.08), inset 0 1px 0 rgba(255,255,255,.05);
}
.table-card-slot.latest .card-shell,
.table-card-slot.winner .card-shell,
.hand-card.playable .card-shell{
  will-change:transform, box-shadow;
}
.hand-card.playable .card-shell{
  animation:handGlow 2.6s ease-in-out infinite;
}
.bottom-shell{
  background:linear-gradient(180deg, rgba(8,18,36,.985), rgba(9,20,39,.97));
  border-color:rgba(255,255,255,.10);
}
.nav-btn.active{
  box-shadow:0 10px 22px rgba(46,136,255,.18), inset 0 1px 0 rgba(255,255,255,.05);
}

@keyframes revealPop{0%{opacity:0;transform:translateY(10px) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cardShineSweep{0%,100%{transform:translateX(0) rotate(-12deg);opacity:.45}50%{transform:translateX(18px) rotate(-12deg);opacity:.92}}
@keyframes handGlow{0%,100%{box-shadow:0 14px 30px rgba(0,0,0,.28)}50%{box-shadow:0 18px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(137,236,255,.18)}}
@media (max-width:640px){
  .profile-summary-strip--season0{grid-template-columns:1fr}
  .profile-summary-chip{min-height:74px}
}


/* v17 premium-focus overrides */
.home-hero--premium-focus{min-height:338px;border:1px solid rgba(255,255,255,.09);box-shadow:0 34px 68px rgba(0,0,0,.34)}
.home-hero--premium-focus .home-hero__content{gap:14px;padding:28px 24px 24px}
.home-hero__actions--premium .btn{min-width:160px}
.hero-spotlight-grid--tight{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px}
.home-stage-panel--premium{padding-top:4px}
.quick-hub__grid--premium3{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.quick-hub__grid--premium3 .hub-card{min-height:196px;padding:22px 18px 18px;border-radius:30px;background-color:rgba(255,255,255,.02)}
.quick-hub__grid--premium3 .hub-card:nth-child(2){transform:translateY(0)}
.quick-hub__grid--premium3 .hub-card strong{font-size:28px;line-height:.98;max-width:10ch}
.quick-hub__grid--premium3 .hub-card .small{max-width:24ch;color:rgba(245,248,255,.76)}
.compact-reward-strip--season-cta{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));}
.store-screen .store-hero--premium{min-height:232px;border-radius:30px;overflow:hidden}
.store-screen .store-focus-strip--premium{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));border-color:rgba(255,255,255,.07)}
.packs-stage--premium{padding-top:18px}
.card-grid--packs{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.pack-card{position:relative;min-height:540px;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.07);box-shadow:0 22px 44px rgba(0,0,0,.26)}
.pack-card::after{content:"";position:absolute;inset:10px;border-radius:22px;border:1px solid rgba(255,255,255,.05);pointer-events:none}
.pack-card__art{height:146px}
.pack-card__art img{filter:saturate(1.06) brightness(.62)}
.pack-card__content{padding:18px;display:flex;flex-direction:column;min-height:calc(100% - 146px)}
.pack-card__visual--booster{min-height:224px}
.pack-card__visual--booster img{width:min(220px,78%);filter:drop-shadow(0 18px 28px rgba(0,0,0,.34));animation:packFloat 2.8s ease-in-out infinite}
.pack-card p{color:rgba(245,248,255,.76)}
.pack-odds-strip{margin-top:10px;margin-bottom:14px}
.last-pack-hero--compact{border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.07);box-shadow:0 22px 40px rgba(0,0,0,.24)}
.last-pack-hero--compact .last-pack-hero__content{padding:22px}
.pack-reveal-overlay{background:radial-gradient(circle at center,rgba(63,94,148,.86),rgba(4,9,18,.96));backdrop-filter:blur(14px)}
.pack-reveal{width:min(92vw,520px);padding:36px 20px 22px;border-radius:34px;box-shadow:0 40px 90px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.08) inset}
.pack-reveal__burst{background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 42%);animation:burstPulse 1.15s ease-out infinite alternate}
.pack-reveal__booster{min-height:252px}
.pack-reveal__booster img{animation:packIntro 1.05s cubic-bezier(.2,.8,.2,1), packShake 0.85s ease-out 1, packFloat 2.2s ease-in-out infinite 1.05s;filter:drop-shadow(0 26px 44px rgba(0,0,0,.46))}
.pack-reveal__card .collectible-card{transform:scale(1.02);box-shadow:0 18px 34px rgba(0,0,0,.28)}
.pack-reveal__stage{letter-spacing:.16em;color:#f4fbff}
.match-screen .poker-felt{min-height:720px;border-radius:40px;box-shadow:inset 0 24px 44px rgba(255,255,255,.04), inset 0 -36px 56px rgba(0,0,0,.28), 0 30px 56px rgba(0,0,0,.28)}
.match-screen .poker-centerpiece{width:min(64%,430px);padding:14px 16px 16px;background:linear-gradient(180deg,rgba(7,17,29,.82),rgba(7,17,29,.6));box-shadow:0 22px 38px rgba(0,0,0,.34)}
.match-screen .poker-centerpiece__title{font-size:18px}
.match-screen .poker-centerpiece__meta{font-size:12px}
.match-screen .table-card-slot.latest .card-shell,.match-screen .table-card-slot.winner .card-shell{transform:translateY(-8px) scale(1.04)}
.match-screen .poker-seat-badge.active{box-shadow:0 0 0 1px rgba(137,236,255,.18),0 0 0 12px rgba(137,236,255,.06),0 16px 28px rgba(0,0,0,.34)}
.match-screen .hand-card.playable .card-shell{border-color:rgba(137,236,255,.26)}
.match-screen .hand-card.playable:hover .card-shell{transform:translateY(-10px);box-shadow:0 24px 38px rgba(0,0,0,.38)}
@media (max-width: 760px){
  .hero-spotlight-grid--tight,.quick-hub__grid--premium3{grid-template-columns:1fr}
  .home-hero--premium-focus{min-height:292px}
  .quick-hub__grid--premium3 .hub-card{min-height:150px;padding:18px 16px 16px}
  .quick-hub__grid--premium3 .hub-card strong{font-size:24px;max-width:unset}
  .pack-card{min-height:500px}
  .pack-card__visual--booster{min-height:204px}
  .match-screen .poker-felt{min-height:620px}
  .match-screen .poker-centerpiece{width:min(84%,308px)}
}

.home-shortcuts--premium,.home-pillars--premium,.profile-strip--premium,.profile-hero--compact{
  position:relative;overflow:hidden;
}
.home-shortcuts--premium::before,.home-pillars--premium::before,.profile-strip--premium::before,.profile-hero--compact::before{
  content:"";position:absolute;inset:auto -16% -60% auto;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(137,236,255,.12),rgba(137,236,255,0) 70%);pointer-events:none
}
.home-shortcuts--premium .section-title,.home-pillars--premium .section-title{letter-spacing:-.04em}
.hero-spotlight-card, .menu-card--spotlight, .hub-card, .mode-stage-card, .pack-card, .collection-card{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}
.hero-spotlight-card:active,.menu-card--spotlight:active,.hub-card:active,.mode-stage-card:active,.pack-card:active,.collection-card:active{
  transform:translateY(1px) scale(.992);
}
.hero-spotlight-card{position:relative;overflow:hidden}
.hero-spotlight-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));pointer-events:none}
.quick-hub__grid--season0 .hub-card{border-color:rgba(255,255,255,.11);box-shadow:0 20px 36px rgba(0,0,0,.24)}
.quick-hub__grid--season0 .hub-card--primary{box-shadow:0 24px 40px rgba(31,136,255,.16),0 20px 36px rgba(0,0,0,.24)}
.mode-stage-card{backdrop-filter:blur(4px)}
.mode-stage-card .btn,.hub-card .small,.menu-card--spotlight p{max-width:34ch}
.profile-strip{display:flex;justify-content:space-between;align-items:center;gap:12px}
.profile-screen .hero .stats .stat strong{font-size:22px}
.profile-screen .panel{box-shadow:0 20px 40px rgba(0,0,0,.24)}
.profile-screen .notice{background:rgba(255,255,255,.045)}
.store-screen .hero-microstats .hero-chip,.inventory-screen .hero-microstats .hero-chip{background:rgba(255,255,255,.075)}
@media (max-width: 640px){
  .profile-strip{flex-direction:column;align-items:stretch}
}

/* v19 premium polish */
:root{
  --shadow-soft:0 16px 34px rgba(0,0,0,.22);
  --shadow-strong:0 26px 52px rgba(0,0,0,.30);
}
body{
  background:
    radial-gradient(circle at 12% 8%,rgba(76,155,255,.16),transparent 24%),
    radial-gradient(circle at 88% 14%,rgba(255,214,109,.10),transparent 20%),
    radial-gradient(circle at 50% 100%,rgba(126,88,255,.12),transparent 28%),
    linear-gradient(180deg,#06101b,#091628 42%,#0a1523);
}
#app{max-width:1180px;padding-inline:12px}
.panel{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
  border-color:rgba(255,255,255,.10);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(6px);
}
.panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 28%);
  opacity:.8;
}
.panel>*{position:relative;z-index:1}
.hero,.home-hero,.battle-hero,.profile-hero--season0,.profile-hero--compact{
  box-shadow:var(--shadow-strong);
}
.title{letter-spacing:-.07em;text-shadow:0 4px 24px rgba(0,0,0,.24)}
.brand-hero__icon{box-shadow:0 22px 42px rgba(0,0,0,.30)}
.subtitle{max-width:62ch}
.btn{
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 30px rgba(60,170,255,.20), inset 0 1px 0 rgba(255,255,255,.26);
}
.btn.secondary{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
}
.bottom-shell{
  background:linear-gradient(180deg,rgba(8,18,36,.94),rgba(8,18,36,.90));
  border-color:rgba(255,255,255,.10);
  box-shadow:0 24px 44px rgba(0,0,0,.36);
  backdrop-filter:blur(14px);
}
.nav-btn{transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease}
.nav-btn.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.nav-btn:active{transform:translateY(1px)}
.home-hero,.battle-hero{
  border:1px solid rgba(255,255,255,.10);
  isolation:isolate;
}
.home-hero__overlay,.battle-hero__shade{
  background:
    linear-gradient(180deg,rgba(6,14,26,.14),rgba(6,14,26,.86)),
    radial-gradient(circle at 50% 10%,rgba(255,255,255,.08),transparent 28%);
}
.home-hero__content,.battle-hero__content{padding:24px}
.home-hero__actions .btn:first-child,.battle-hero .btn:first-child{
  min-width:148px;
}
.quick-hub__grid--premium3 .hub-card,
.quick-hub__grid--season0 .hub-card,
.hub-card{
  border-color:rgba(255,255,255,.09);
  background:
    radial-gradient(circle at top right,rgba(255,255,255,.08),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  box-shadow:0 22px 42px rgba(0,0,0,.24);
}
.hub-card::before{
  background:linear-gradient(180deg,rgba(7,14,24,.02),rgba(7,14,24,.80));
}
.hub-card strong{font-size:clamp(22px,2.2vw,30px);line-height:.98;letter-spacing:-.04em}
.hub-card .small{color:rgba(245,248,255,.82)}
.menu-card,.mode-stage-card,.hero-spotlight-card,.menu-card--spotlight{
  border-color:rgba(255,255,255,.09);
  background:
    radial-gradient(circle at top right,rgba(255,255,255,.06),transparent 26%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.022));
  box-shadow:0 18px 34px rgba(0,0,0,.20);
}
.menu-card h3,.menu-card h4,.mode-stage-card h3,.hero-spotlight-card h3{letter-spacing:-.03em}
.collection-grid{gap:14px}
.collectible-card{
  position:relative;
  overflow:hidden;
  border-color:rgba(255,255,255,.09);
  background:
    radial-gradient(circle at top right,rgba(255,255,255,.08),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.022));
  box-shadow:0 18px 34px rgba(0,0,0,.22);
}
.collectible-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 30%);
}
/* El brillo y el destello son decoración absoluta. Esta regla los volvía
   relativos junto al resto y ocupaban 330px de hueco vacío encima de cada
   ficha, que es lo que se veía al abrir un objeto. */
.collectible-card>*:not(.collectible-card__glow):not(.collectible-card__shine){position:relative;z-index:1}
.collectible-card.equipped{
  border-color:rgba(137,236,255,.34);
  box-shadow:0 0 0 1px rgba(137,236,255,.12), 0 20px 40px rgba(0,0,0,.24);
}
.collectible-icon,
.loadout-icon{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 22px rgba(0,0,0,.18);
}
.collectible-icon--art{
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.collection-toolbar,
.home-shortcuts--premium,
.home-pillars--premium,
.profile-strip--premium{
  border-color:rgba(255,255,255,.08);
  box-shadow:0 16px 30px rgba(0,0,0,.18);
}
.pack-card{
  border-color:rgba(255,255,255,.10);
  box-shadow:0 24px 46px rgba(0,0,0,.28);
}
.pack-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.10),transparent 28%);
  z-index:1;
}
.pack-card__content{padding:20px}
.pack-card__visual--booster img{filter:drop-shadow(0 22px 36px rgba(0,0,0,.42))}
.last-pack-hero,
.hero-online-banner{
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 38px rgba(0,0,0,.22);
}
.pack-reveal{
  border-color:rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 50% -10%,rgba(255,255,255,.10),transparent 34%),
    linear-gradient(180deg,rgba(12,22,40,.97),rgba(8,16,30,.95));
}
.pack-reveal__burst{background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 40%)}
.profile-summary-chip{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.024));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 30px rgba(0,0,0,.18);
}
.profile-screen .panel,.profile-strip,.release-box{border-color:rgba(255,255,255,.09)}
.poker-overlay,
.poker-centerpiece,

@media (max-width:760px){
  #app{padding-inline:10px}
  .home-hero__content,.battle-hero__content{padding:18px}
  .hub-card strong{font-size:23px}
  .panel{backdrop-filter:none}
}


/* v21 home focus */
.home-hero--mobile-final{
  min-height:320px;
  box-shadow:0 38px 80px rgba(0,0,0,.38);
}
.home-hero__content--final{
  gap:14px;
  padding:24px 22px 22px;
}
.home-hero__titlewrap--final .title{
  font-size:clamp(34px, 8vw, 52px);
  line-height:.94;
}
.home-hero__subtitle--final{
  max-width:36ch;
  color:#eef6ff;
  font-size:14px;
  line-height:1.45;
}
.home-hero__actions--final{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:10px;
}
.btn--hero{
  min-height:52px;
  font-size:16px;
  font-weight:900;
}
.hero-pill-row--final{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.hero-pill-card{
  min-height:72px;
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.13);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  backdrop-filter:blur(10px);
}
.hero-pill-card span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#b9cee4;
  font-weight:800;
}
.hero-pill-card strong{
  font-size:18px;
  line-height:1.05;
  color:#fff;
}
.home-shortcuts--final{
  background:linear-gradient(180deg, rgba(11,21,37,.74), rgba(11,21,37,.48));
}
.quick-hub__grid--homefocus{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.quick-hub__grid--homefocus .hub-card{
  min-height:154px;
}
.quick-hub__grid--homefocus .hub-card--entry-main{
  grid-column:1 / -1;
  min-height:172px;
  background:linear-gradient(135deg, rgba(104,221,255,.22), rgba(58,118,255,.18));
}
.hub-card--entry strong{
  font-size:24px;
  line-height:1.02;
  letter-spacing:-.03em;
}
.compact-reward-strip--home{
  border-radius:22px;
  background:linear-gradient(180deg, rgba(12,22,38,.76), rgba(12,22,38,.54));
}
@media (max-width: 640px){
  .home-hero--mobile-final{min-height:296px}
  .home-hero__content--final{padding:20px 16px 18px}
  .home-hero__actions--final{grid-template-columns:1fr;gap:8px}
  .hero-pill-row--final{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .hero-pill-card{min-height:66px;padding:10px 10px}
  .hero-pill-card strong{font-size:15px}
  .quick-hub__grid--homefocus{grid-template-columns:1fr 1fr}
  .quick-hub__grid--homefocus .hub-card--entry-main{grid-column:1 / -1;min-height:160px}
  .quick-hub__grid--homefocus .hub-card{min-height:132px}
  .hub-card--entry strong{font-size:21px}
}


/* v30 · Navegación simplificada y lobby principal */
.play-screen--landing{gap:12px}
.play-scene-hero--landing{min-height:230px}
.play-lobby-main{padding:16px}
.play-lobby-main__grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(260px,.86fr);gap:14px}
.play-lobby-focus,.play-side-card{border-radius:24px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));box-shadow:var(--shadow)}
.play-lobby-focus{padding:20px;display:flex;flex-direction:column;gap:14px;justify-content:space-between}
.play-lobby-focus__tag{display:inline-flex;align-items:center;width:fit-content;min-height:28px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.play-lobby-focus h3,.play-side-card h4{margin:0}
.play-lobby-focus p,.play-side-card p{margin:0;color:var(--muted);line-height:1.45}
.play-lobby-focus__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.play-lobby-side{display:grid;gap:14px}
.play-side-card{padding:18px;display:flex;flex-direction:column;gap:12px;justify-content:space-between}
.leaderboard-panel--compact{padding:16px}
.leaderboard-list--compact{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.leaderboard-row{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)}
.leaderboard-row__rank{display:grid;place-items:center;height:38px;border-radius:999px;background:rgba(137,236,255,.12);border:1px solid rgba(137,236,255,.18);font-weight:900;color:#fff}
.leaderboard-row__wins{min-width:58px;text-align:center;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-weight:900}
.bottom-shell{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width: 980px){
  .play-lobby-main__grid{grid-template-columns:1fr}
  .play-side-card,.play-lobby-focus{padding:16px}
  .leaderboard-row{grid-template-columns:48px 1fr auto;padding:10px 12px}
}




/* v31 · Optimización de fluidez móvil */
html, body {
  overscroll-behavior-y: none;
}

body {
  text-rendering: optimizeSpeed;
}

.screen,
.toast,
.pack-reveal,
.pack-reveal-overlay,
.pack-card__visual--booster img,
.startup-splash,
.startup-splash__logo,
.topbar,
.panel,
.menu-card,
.collectible-card,
.btn,
.bottom-nav a,
.bottom-nav button,
.poker-seat-badge.active,
.poker-seat-card.is-turn .card-shell,
.poker-seat-card.is-turn .card-back,
.hand-card.playable {
  will-change: auto !important;
}

.screen,
.toast,
.topbar,
.panel,
.menu-card,
.collectible-card,
.btn,
.bottom-nav a,
.bottom-nav button {
  animation: none !important;
}

.screen {
  opacity: 1 !important;
  transform: none !important;
}

.pack-card__visual--booster img,
.pack-reveal__booster img,
.pack-reveal__burst,
.pack-reveal__card::after,
.hand-card.playable,
.poker-seat-badge.active,
.poker-seat-card.is-turn .card-shell,
.poker-seat-card.is-turn .card-back {
  animation: none !important;
}

.pack-reveal-overlay {
  backdrop-filter: none !important;
  background: rgba(4, 9, 18, .94) !important;
}

.pack-reveal,
.panel,
.menu-card,
.collectible-card,
.topbar {
  backdrop-filter: none !important;
}

.match-screen .footer-actions,
.match-screen .quick-actions,
.match-screen .secondary-actions,
.match-screen .floating-actions {
  display: none !important;
}

.match-screen .btn,
.match-screen button {
  min-height: 44px;
}

.match-screen .panel,
.match-screen .menu-card {
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
}

.bottom-nav {
  position: sticky;
  bottom: 0;
  transform: translateZ(0);
}

@media (max-width: 640px) {
  .screen,
  .panel,
  .menu-card,
  .collectible-card,
  .topbar,
  .btn,
  .bottom-nav a,
  .bottom-nav button {
    transition: background-color .16s ease, border-color .16s ease, opacity .16s ease !important;
  }

  .match-screen {
    padding-bottom: 8px !important;
  }

  .pack-card {
    min-height: auto !important;
  }
}



/* v32 · Punto 1 · Jugar más directo y menos dashboard */
.play-screen--radical{gap:14px}
.play-hub-hero{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(270px,.8fr);
  gap:14px;
  padding:18px;
  border-radius:28px;
  background:
    radial-gradient(circle at top left, rgba(123,230,183,.12), transparent 30%),
    radial-gradient(circle at 85% 18%, rgba(137,236,255,.11), transparent 24%),
    linear-gradient(180deg, rgba(9,20,36,.96), rgba(8,16,30,.92));
}
.play-hub-hero__copy{display:flex;flex-direction:column;gap:14px;justify-content:center}
.play-hub-hero__eyebrow{
  display:inline-flex;width:fit-content;align-items:center;min-height:28px;padding:0 12px;
  border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);
  font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#dfefff;
}
.play-hub-hero__title{margin:0;font-size:clamp(28px,4vw,38px);line-height:1.05}
.play-hub-hero__subtitle{margin:0;max-width:62ch;color:var(--muted);line-height:1.5}
.play-hub-hero__stats{display:flex;flex-wrap:wrap;gap:10px}
.play-hub-stat{
  display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);font-weight:800;color:#eef8ff
}
.play-hub-hero__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.play-hub-hero__actions .btn.large{min-height:54px;padding:0 22px;font-size:16px}
.play-hub-hero__rail{display:grid;gap:12px}
.play-quick-card{
  display:flex;flex-direction:column;gap:8px;justify-content:space-between;
  min-height:154px;padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
}
.play-quick-card strong{font-size:19px}
.play-quick-card span{color:var(--muted);line-height:1.45}
.play-quick-card__tag{
  display:inline-flex;width:fit-content;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase
}
.play-chooser{padding:16px 18px}
.play-chooser__head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px
}
.play-chooser__head h3{margin:0 0 4px}
.play-chooser__head p{margin:0;color:var(--muted)}
.mode-picker--landing{justify-content:flex-end}
.play-mode-strip{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px
}
.play-mode-pill{
  display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:20px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04)
}
.play-mode-pill--main{
  background:linear-gradient(180deg,rgba(123,230,183,.12),rgba(255,255,255,.04));
  border-color:rgba(123,230,183,.20)
}
.play-mode-pill__label{
  font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#d8ecff
}
.trophy-board{padding:16px 18px}
.trophy-board__head{align-items:flex-end}
.trophy-board__mini{
  min-height:34px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);font-weight:800
}
.trophy-podium{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px;margin-bottom:14px
}
.trophy-podium__card{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:flex-end;
  min-height:122px;padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03))
}
.trophy-podium__card--1{background:linear-gradient(180deg,rgba(255,215,109,.18),rgba(255,255,255,.04));border-color:rgba(255,215,109,.22)}
.trophy-podium__card--2{background:linear-gradient(180deg,rgba(175,199,230,.16),rgba(255,255,255,.04));border-color:rgba(175,199,230,.18)}
.trophy-podium__card--3{background:linear-gradient(180deg,rgba(214,153,112,.18),rgba(255,255,255,.04));border-color:rgba(214,153,112,.22)}
.trophy-podium__place{
  min-width:44px;height:34px;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);font-weight:900
}
@media (max-width: 980px){
  .play-hub-hero{grid-template-columns:1fr}
  .play-mode-strip{grid-template-columns:1fr}
  .trophy-podium{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .play-hub-hero,.play-chooser,.trophy-board{padding:14px}
  .play-hub-hero__title{font-size:30px}
  .play-hub-hero__actions .btn,
  .play-hub-hero__actions .btn.large{width:100%}
  .mode-picker--landing{justify-content:flex-start}
}




/* v34 · Punto 3: romper monotonía de cajas iguales */
:root{
  --panel-soft-bg: linear-gradient(180deg, rgba(17,26,44,.92), rgba(11,18,32,.96));
  --panel-elevated-bg: linear-gradient(180deg, rgba(24,37,63,.98), rgba(13,20,36,.98));
  --panel-premium-bg: radial-gradient(circle at top left, rgba(73,132,255,.14), transparent 34%), linear-gradient(180deg, rgba(18,28,48,.98), rgba(10,16,30,.98));
  --panel-subtle-border: rgba(255,255,255,.08);
  --panel-elevated-border: rgba(120,170,255,.18);
}

.panel,
.menu-card,
.collectible-card,
.result-card,
.profile-card,
.leaderboard-card,
.home-card,
.match-card{
  background: var(--panel-soft-bg) !important;
  border: 1px solid var(--panel-subtle-border) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.22) !important;
  border-radius: 22px !important;
}

.home-hero,
.play-hero,
.main-hero,
.mode-card--primary,
.mode-card.primary,
.cta-card,
.featured-card{
  background: var(--panel-premium-bg) !important;
  border: 1px solid var(--panel-elevated-border) !important;
  box-shadow: 0 22px 50px rgba(0,0,0,.32) !important;
}

.stat,
.mini-stat,
.info-pill,
.kpi-card,
.summary-pill{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.section-card,
.secondary-card,
.sub-panel,
.mode-card--secondary,
.mode-card.secondary{
  background: var(--panel-elevated-bg) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 20px !important;
}

.play-screen .panel,
.play-screen .menu-card,
.play-screen .leaderboard-card,
.play-screen .mode-card,
.play-screen .mode-card--secondary,
.play-screen .mode-card.secondary{
  margin-bottom: 10px !important;
}

.play-screen .mode-grid,
.play-screen .leaderboard,
.play-screen .quick-links{
  gap: 10px !important;
}

.play-screen .mode-card--primary,
.play-screen .mode-card.primary{
  transform: none !important;
  min-height: 0 !important;
}

.play-screen .mode-card--secondary,
.play-screen .mode-card.secondary,
.play-screen .leaderboard-card{
  opacity: .96;
}

.profile-screen .panel,
.profile-screen .menu-card,
.profile-screen .profile-card{
  background: linear-gradient(180deg, rgba(15,23,40,.96), rgba(10,16,29,.98)) !important;
}

.store-screen .pack-card,
.store-screen .last-pack-hero,
.inventory-screen .collectible-card{
  background: linear-gradient(180deg, rgba(20,31,54,.98), rgba(11,18,33,.98)) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
}

.bottom-nav{
  background: rgba(7,10,18,.82) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  backdrop-filter: blur(8px) !important;
}

@media (max-width: 640px){
  .panel,
  .menu-card,
  .collectible-card,
  .result-card,
  .profile-card,
  .leaderboard-card,
  .home-card,
  .match-card,
  .section-card,
  .secondary-card,
  .sub-panel{
    border-radius: 18px !important;
  }
}




/* v35 · Punto 4: jerarquía visual más clara */
:root{
  --hero-shadow-strong: 0 28px 60px rgba(0,0,0,.38);
  --section-gap: 14px;
  --hero-title-size: clamp(1.7rem, 4vw, 2.35rem);
  --hero-sub-size: clamp(.92rem, 2vw, 1.05rem);
  --cta-scale: 1.02;
}

h1, .screen-title, .hero-title, .play-hero__title, .main-hero__title{
  font-size: var(--hero-title-size) !important;
  line-height: 1.06 !important;
  letter-spacing: -.03em !important;
  font-weight: 900 !important;
}

h2, .section-title, .panel-title, .card-title{
  font-size: clamp(1.05rem, 2.6vw, 1.28rem) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
}

p, .muted, .helper, .subtle, .panel-copy, .hero-copy, .section-copy{
  font-size: var(--hero-sub-size) !important;
  line-height: 1.42 !important;
}

.home-hero,
.play-hero,
.main-hero{
  padding: 22px 18px 20px !important;
  box-shadow: var(--hero-shadow-strong) !important;
  position: relative !important;
  z-index: 2 !important;
}

.home-hero .btn-primary,
.play-hero .btn-primary,
.main-hero .btn-primary,
.mode-card--primary .btn,
.mode-card.primary .btn,
.primary-cta,
.cta-primary{
  transform: scale(var(--cta-scale)) !important;
  font-weight: 900 !important;
  min-height: 52px !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.28) !important;
}

.play-screen .mode-card--primary,
.play-screen .mode-card.primary,
.featured-card,
.cta-card{
  padding: 18px !important;
  min-height: 0 !important;
  box-shadow: 0 24px 52px rgba(0,0,0,.34) !important;
  position: relative !important;
  z-index: 2 !important;
}

.play-screen .mode-grid,
.play-screen .quick-links,
.play-screen .leaderboard,
.home-screen .hero-actions,
.home-screen .quick-links{
  gap: var(--section-gap) !important;
}

.play-screen .mode-card--secondary,
.play-screen .mode-card.secondary,
.secondary-card,
.sub-panel,
.leaderboard-card{
  opacity: .95 !important;
  transform: none !important;
}

.play-screen .leaderboard-card,
.play-screen .secondary-card{
  padding: 14px !important;
}

.stat,
.mini-stat,
.info-pill,
.summary-pill{
  font-size: .88rem !important;
  padding: 8px 10px !important;
}

.topbar .title,
.topbar .screen-title{
  font-size: 1rem !important;
  font-weight: 800 !important;
}

.bottom-nav a,
.bottom-nav button{
  font-size: .76rem !important;
}

.play-screen > * + *,
.home-screen > * + *,
.profile-screen > * + *,
.store-screen > * + *,
.inventory-screen > * + *{
  margin-top: 12px !important;
}

@media (max-width: 640px){
  .home-hero,
  .play-hero,
  .main-hero{
    padding: 18px 14px 16px !important;
  }

  h1, .screen-title, .hero-title, .play-hero__title, .main-hero__title{
    font-size: clamp(1.45rem, 6vw, 1.9rem) !important;
  }

  .home-screen > * + *,
  .play-screen > * + *,
  .profile-screen > * + *,
  .store-screen > * + *,
  .inventory-screen > * + *{
    margin-top: 10px !important;
  }
}




/* v36 · Punto 5: pantalla Jugar más directa y menos cargada */
.play-screen,
.screen-play,
[data-screen="play"]{
  --play-gap: 10px;
}

.play-screen .play-hero,
.screen-play .play-hero,
[data-screen="play"] .play-hero{
  margin-bottom: 8px !important;
}

.play-screen .mode-grid,
.screen-play .mode-grid,
[data-screen="play"] .mode-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--play-gap) !important;
}

.play-screen .mode-card--primary,
.play-screen .mode-card.primary,
.screen-play .mode-card--primary,
.screen-play .mode-card.primary,
[data-screen="play"] .mode-card--primary,
[data-screen="play"] .mode-card.primary{
  padding: 18px 16px !important;
  min-height: 0 !important;
}

.play-screen .mode-card--primary .btn,
.play-screen .mode-card.primary .btn,
.screen-play .mode-card--primary .btn,
.screen-play .mode-card.primary .btn,
[data-screen="play"] .mode-card--primary .btn,
[data-screen="play"] .mode-card.primary .btn{
  width: 100% !important;
  min-height: 54px !important;
}

.play-screen .mode-card--secondary,
.play-screen .mode-card.secondary,
.play-screen .leaderboard-card,
.play-screen .secondary-card,
.play-screen .sub-panel,
.screen-play .mode-card--secondary,
.screen-play .mode-card.secondary,
.screen-play .leaderboard-card,
.screen-play .secondary-card,
.screen-play .sub-panel,
[data-screen="play"] .mode-card--secondary,
[data-screen="play"] .mode-card.secondary,
[data-screen="play"] .leaderboard-card,
[data-screen="play"] .secondary-card,
[data-screen="play"] .sub-panel{
  padding: 12px 12px !important;
}

.play-screen .mode-card--secondary p,
.play-screen .mode-card.secondary p,
.play-screen .leaderboard-card p,
.play-screen .secondary-card p,
.play-screen .sub-panel p,
.screen-play .mode-card--secondary p,
.screen-play .mode-card.secondary p,
.screen-play .leaderboard-card p,
.screen-play .secondary-card p,
.screen-play .sub-panel p,
[data-screen="play"] .mode-card--secondary p,
[data-screen="play"] .mode-card.secondary p,
[data-screen="play"] .leaderboard-card p,
[data-screen="play"] .secondary-card p,
[data-screen="play"] .sub-panel p{
  font-size: .86rem !important;
  line-height: 1.32 !important;
  opacity: .86 !important;
}

.play-screen .quick-links,
.play-screen .secondary-actions,
.play-screen .mini-stats,
.screen-play .quick-links,
.screen-play .secondary-actions,
.screen-play .mini-stats,
[data-screen="play"] .quick-links,
[data-screen="play"] .secondary-actions,
[data-screen="play"] .mini-stats{
  gap: 8px !important;
}

.play-screen .quick-links .btn,
.play-screen .quick-links button,
.screen-play .quick-links .btn,
.screen-play .quick-links button,
[data-screen="play"] .quick-links .btn,
[data-screen="play"] .quick-links button{
  min-height: 42px !important;
  font-size: .88rem !important;
}

.play-screen .leaderboard-card table,
.play-screen .leaderboard-card .leaderboard-table,
.screen-play .leaderboard-card table,
.screen-play .leaderboard-card .leaderboard-table,
[data-screen="play"] .leaderboard-card table,
[data-screen="play"] .leaderboard-card .leaderboard-table{
  font-size: .84rem !important;
}

.play-screen .leaderboard-card tr:nth-child(n+6),
.screen-play .leaderboard-card tr:nth-child(n+6),
[data-screen="play"] .leaderboard-card tr:nth-child(n+6){
  display: none !important;
}

.play-screen .hero-copy,
.play-screen .section-copy,
.screen-play .hero-copy,
.screen-play .section-copy,
[data-screen="play"] .hero-copy,
[data-screen="play"] .section-copy{
  max-width: 36ch !important;
}

.play-screen .mode-card + .mode-card,
.play-screen .leaderboard-card + .secondary-card,
.screen-play .mode-card + .mode-card,
.screen-play .leaderboard-card + .secondary-card,
[data-screen="play"] .mode-card + .mode-card,
[data-screen="play"] .leaderboard-card + .secondary-card{
  margin-top: 0 !important;
}

@media (min-width: 760px){
  .play-screen .play-main-layout,
  .screen-play .play-main-layout,
  [data-screen="play"] .play-main-layout{
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .play-screen .leaderboard-card,
  .screen-play .leaderboard-card,
  [data-screen="play"] .leaderboard-card{
    position: sticky !important;
    top: 12px !important;
  }
}

@media (max-width: 640px){
  .play-screen,
  .screen-play,
  [data-screen="play"]{
    --play-gap: 8px;
  }

  .play-screen .play-hero,
  .screen-play .play-hero,
  [data-screen="play"] .play-hero{
    padding: 16px 14px !important;
  }

  .play-screen .mode-card--primary,
  .play-screen .mode-card.primary,
  .screen-play .mode-card--primary,
  .screen-play .mode-card.primary,
  [data-screen="play"] .mode-card--primary,
  [data-screen="play"] .mode-card.primary{
    padding: 16px 14px !important;
  }

  .play-screen .leaderboard-card tr:nth-child(n+5),
  .screen-play .leaderboard-card tr:nth-child(n+5),
  [data-screen="play"] .leaderboard-card tr:nth-child(n+5){
    display: none !important;
  }
}




/* v37 · Punto 6: perfil flojo */
.profile-screen,
.screen-profile,
[data-screen="profile"]{
  --profile-gap: 10px;
}

.profile-screen .profile-hero,
.screen-profile .profile-hero,
[data-screen="profile"] .profile-hero{
  background:
    radial-gradient(circle at top left, rgba(103,157,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(18,29,50,.98), rgba(10,16,30,.98)) !important;
  border: 1px solid rgba(120,170,255,.18) !important;
  box-shadow: 0 24px 52px rgba(0,0,0,.34) !important;
  padding: 18px 16px !important;
  border-radius: 24px !important;
  margin-bottom: 8px !important;
}

.profile-screen .profile-hero h1,
.profile-screen .profile-hero .hero-title,
.screen-profile .profile-hero h1,
.screen-profile .profile-hero .hero-title,
[data-screen="profile"] .profile-hero h1,
[data-screen="profile"] .profile-hero .hero-title{
  font-size: clamp(1.4rem, 4vw, 1.9rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}

.profile-screen .profile-layout,
.screen-profile .profile-layout,
[data-screen="profile"] .profile-layout{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--profile-gap) !important;
}

.profile-screen .profile-summary,
.profile-screen .profile-card--primary,
.screen-profile .profile-summary,
.screen-profile .profile-card--primary,
[data-screen="profile"] .profile-summary,
[data-screen="profile"] .profile-card--primary{
  background: linear-gradient(180deg, rgba(16,25,43,.98), rgba(10,16,29,.98)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.26) !important;
  padding: 16px 14px !important;
}

.profile-screen .profile-stats,
.profile-screen .profile-kpis,
.screen-profile .profile-stats,
.screen-profile .profile-kpis,
[data-screen="profile"] .profile-stats,
[data-screen="profile"] .profile-kpis{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.profile-screen .profile-stats .stat,
.profile-screen .profile-kpis .stat,
.screen-profile .profile-stats .stat,
.screen-profile .profile-kpis .stat,
[data-screen="profile"] .profile-stats .stat,
[data-screen="profile"] .profile-kpis .stat{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  padding: 10px 10px !important;
  min-height: 0 !important;
}

.profile-screen .profile-actions,
.screen-profile .profile-actions,
[data-screen="profile"] .profile-actions{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.profile-screen .profile-actions .btn,
.screen-profile .profile-actions .btn,
[data-screen="profile"] .profile-actions .btn{
  min-height: 44px !important;
  font-size: .9rem !important;
}

.profile-screen .profile-card,
.profile-screen .secondary-card,
.profile-screen .panel,
.screen-profile .profile-card,
.screen-profile .secondary-card,
.screen-profile .panel,
[data-screen="profile"] .profile-card,
[data-screen="profile"] .secondary-card,
[data-screen="profile"] .panel{
  background: linear-gradient(180deg, rgba(14,22,38,.96), rgba(9,14,26,.98)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.20) !important;
  padding: 14px 12px !important;
}

.profile-screen .profile-card h2,
.profile-screen .secondary-card h2,
.profile-screen .panel h2,
.screen-profile .profile-card h2,
.screen-profile .secondary-card h2,
.screen-profile .panel h2,
[data-screen="profile"] .profile-card h2,
[data-screen="profile"] .secondary-card h2,
[data-screen="profile"] .panel h2{
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
}

.profile-screen .profile-card p,
.profile-screen .secondary-card p,
.profile-screen .panel p,
.screen-profile .profile-card p,
.screen-profile .secondary-card p,
.screen-profile .panel p,
[data-screen="profile"] .profile-card p,
[data-screen="profile"] .secondary-card p,
[data-screen="profile"] .panel p{
  font-size: .88rem !important;
  line-height: 1.36 !important;
  opacity: .88 !important;
}

@media (min-width: 760px){
  .profile-screen .profile-layout,
  .screen-profile .profile-layout,
  [data-screen="profile"] .profile-layout{
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr) !important;
    align-items: start !important;
  }

  .profile-screen .profile-summary,
  .screen-profile .profile-summary,
  [data-screen="profile"] .profile-summary{
    position: sticky !important;
    top: 12px !important;
  }
}

@media (max-width: 640px){
  .profile-screen,
  .screen-profile,
  [data-screen="profile"]{
    --profile-gap: 8px;
  }

  .profile-screen .profile-hero,
  .screen-profile .profile-hero,
  [data-screen="profile"] .profile-hero{
    padding: 16px 14px !important;
    border-radius: 20px !important;
  }

  .profile-screen .profile-stats,
  .profile-screen .profile-kpis,
  .screen-profile .profile-stats,
  .screen-profile .profile-kpis,
  [data-screen="profile"] .profile-stats,
  [data-screen="profile"] .profile-kpis{
    grid-template-columns: 1fr 1fr !important;
  }
}




/* v38 · Punto 7: tienda y colección más valiosas y menos funcionales */
.store-screen,
.inventory-screen,
.screen-store,
.screen-inventory,
[data-screen="store"],
[data-screen="inventory"]{
  --collection-gap: 10px;
}

.store-screen .store-hero,
.inventory-screen .inventory-hero,
.screen-store .store-hero,
.screen-inventory .inventory-hero,
[data-screen="store"] .store-hero,
[data-screen="inventory"] .inventory-hero{
  background:
    radial-gradient(circle at top left, rgba(255,214,102,.14), transparent 32%),
    radial-gradient(circle at top right, rgba(108,155,255,.12), transparent 28%),
    linear-gradient(180deg, rgba(20,30,50,.98), rgba(10,16,30,.98)) !important;
  border: 1px solid rgba(255,220,120,.18) !important;
  box-shadow: 0 26px 56px rgba(0,0,0,.34) !important;
  border-radius: 24px !important;
  padding: 18px 16px !important;
}

.store-screen .pack-card,
.store-screen .last-pack-hero,
.screen-store .pack-card,
.screen-store .last-pack-hero,
[data-screen="store"] .pack-card,
[data-screen="store"] .last-pack-hero{
  background:
    radial-gradient(circle at top, rgba(255,255,255,.07), transparent 30%),
    linear-gradient(180deg, rgba(18,27,46,.98), rgba(10,16,30,.98)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.26) !important;
  overflow: hidden !important;
}

.store-screen .pack-card--featured,
.store-screen .pack-card.featured,
.store-screen .last-pack-hero,
.screen-store .pack-card--featured,
.screen-store .pack-card.featured,
.screen-store .last-pack-hero,
[data-screen="store"] .pack-card--featured,
[data-screen="store"] .pack-card.featured,
[data-screen="store"] .last-pack-hero{
  border-color: rgba(255,217,112,.24) !important;
  box-shadow: 0 24px 54px rgba(0,0,0,.34) !important;
}

.store-screen .pack-card__visual,
.screen-store .pack-card__visual,
[data-screen="store"] .pack-card__visual{
  position: relative !important;
}

.store-screen .pack-card__visual::after,
.screen-store .pack-card__visual::after,
[data-screen="store"] .pack-card__visual::after{
  content:"";
  position:absolute;
  inset:auto 14px 10px 14px;
  height: 28px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(113,170,255,.28), transparent 65%);
  filter: blur(10px);
  pointer-events:none;
}

.store-screen .pack-price,
.store-screen .pack-rarity,
.store-screen .reward-pill,
.screen-store .pack-price,
.screen-store .pack-rarity,
.screen-store .reward-pill,
[data-screen="store"] .pack-price,
[data-screen="store"] .pack-rarity,
[data-screen="store"] .reward-pill{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-weight: 800 !important;
}

.inventory-screen .collectible-grid,
.screen-inventory .collectible-grid,
[data-screen="inventory"] .collectible-grid{
  gap: var(--collection-gap) !important;
}

.inventory-screen .collectible-card,
.screen-inventory .collectible-card,
[data-screen="inventory"] .collectible-card{
  background:
    radial-gradient(circle at top, rgba(255,255,255,.06), transparent 24%),
    linear-gradient(180deg, rgba(18,28,48,.98), rgba(10,16,30,.98)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.24) !important;
  padding: 12px !important;
}

.inventory-screen .collectible-card__art,
.screen-inventory .collectible-card__art,
[data-screen="inventory"] .collectible-card__art{
  border-radius: 18px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(180deg, rgba(24,37,63,.98), rgba(12,18,31,.98)) !important;
  min-height: 112px !important;
}

.inventory-screen .collectible-card.is-premium,
.inventory-screen .collectible-card.rarity-epic,
.inventory-screen .collectible-card.rarity-legendary,
.screen-inventory .collectible-card.is-premium,
.screen-inventory .collectible-card.rarity-epic,
.screen-inventory .collectible-card.rarity-legendary,
[data-screen="inventory"] .collectible-card.is-premium,
[data-screen="inventory"] .collectible-card.rarity-epic,
[data-screen="inventory"] .collectible-card.rarity-legendary,

.inventory-screen .collectible-meta,
.inventory-screen .collectible-badges,
.screen-inventory .collectible-meta,
.screen-inventory .collectible-badges,
[data-screen="inventory"] .collectible-meta,
[data-screen="inventory"] .collectible-badges{
  gap: 6px !important;
}

.inventory-screen .rarity-pill,
.inventory-screen .owned-pill,
.inventory-screen .equipped-pill,
.screen-inventory .rarity-pill,
.screen-inventory .owned-pill,
.screen-inventory .equipped-pill,
[data-screen="inventory"] .rarity-pill,
[data-screen="inventory"] .owned-pill,
[data-screen="inventory"] .equipped-pill{
  border-radius: 999px !important;
  padding: 5px 9px !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
}

.inventory-screen .rarity-pill.rarity-common,
.screen-inventory .rarity-pill.rarity-common,
[data-screen="inventory"] .rarity-pill.rarity-common{
  background: rgba(160,170,185,.16) !important;
  border: 1px solid rgba(160,170,185,.18) !important;
}
.inventory-screen .rarity-pill.rarity-rare,
.screen-inventory .rarity-pill.rarity-rare,
[data-screen="inventory"] .rarity-pill.rarity-rare{
  background: rgba(77,183,122,.16) !important;
  border: 1px solid rgba(77,183,122,.18) !important;
}
.inventory-screen .rarity-pill.rarity-super,
.screen-inventory .rarity-pill.rarity-super,
[data-screen="inventory"] .rarity-pill.rarity-super{
  background: rgba(87,160,255,.16) !important;
  border: 1px solid rgba(87,160,255,.18) !important;
}
.inventory-screen .rarity-pill.rarity-epic,
.screen-inventory .rarity-pill.rarity-epic,
[data-screen="inventory"] .rarity-pill.rarity-epic{
  background: rgba(162,92,255,.16) !important;
  border: 1px solid rgba(162,92,255,.18) !important;
}
.inventory-screen .rarity-pill.rarity-legendary,
.screen-inventory .rarity-pill.rarity-legendary,
[data-screen="inventory"] .rarity-pill.rarity-legendary{
  background: rgba(255,193,68,.16) !important;
  border: 1px solid rgba(255,193,68,.18) !important;
}

.inventory-screen .collectible-card h3,
.screen-inventory .collectible-card h3,
[data-screen="inventory"] .collectible-card h3{
  font-size: .98rem !important;
  font-weight: 800 !important;
}

.inventory-screen .collectible-card p,
.screen-inventory .collectible-card p,
[data-screen="inventory"] .collectible-card p{
  font-size: .84rem !important;
  line-height: 1.32 !important;
  opacity: .88 !important;
}

@media (max-width: 640px){
  .store-screen,
  .inventory-screen,
  .screen-store,
  .screen-inventory,
  [data-screen="store"],
  [data-screen="inventory"]{
    --collection-gap: 8px;
  }

  .store-screen .store-hero,
  .inventory-screen .inventory-hero,
  .screen-store .store-hero,
  .screen-inventory .inventory-hero,
  [data-screen="store"] .store-hero,
  [data-screen="inventory"] .inventory-hero{
    padding: 16px 14px !important;
    border-radius: 20px !important;
  }

  .inventory-screen .collectible-card__art,
  .screen-inventory .collectible-card__art,
  [data-screen="inventory"] .collectible-card__art{
    min-height: 98px !important;
  }
}




/* v39 · Punto 8: partida más limpia y mesa más protagonista */
.match-screen,
.screen-match,
[data-screen="match"]{
  --match-gap: 10px;
  --match-side-opacity: .88;
}

.match-screen .table-wrap,
.match-screen .table-area,
.match-screen .table-shell,
.screen-match .table-wrap,
.screen-match .table-area,
.screen-match .table-shell,
[data-screen="match"] .table-wrap,
[data-screen="match"] .table-area,
[data-screen="match"] .table-shell{
  background:
    radial-gradient(circle at center, rgba(27,111,76,.24), transparent 58%),
    linear-gradient(180deg, rgba(8,18,22,.98), rgba(4,10,16,.98)) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.34) !important;
  border-radius: 28px !important;
  padding: 12px !important;
}

.match-screen .table-felt,
.match-screen .poker-table,
.match-screen .battle-table,
.screen-match .table-felt,
.screen-match .poker-table,
.screen-match .battle-table,
[data-screen="match"] .table-felt,
[data-screen="match"] .poker-table,
[data-screen="match"] .battle-table{
  min-height: 0 !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.05),
    inset 0 -18px 36px rgba(0,0,0,.16),
    0 18px 42px rgba(0,0,0,.28) !important;
}

.match-screen .match-header,
.match-screen .turn-banner,
.match-screen .prediction-banner,
.match-screen .status-banner,
.screen-match .match-header,
.screen-match .turn-banner,
.screen-match .prediction-banner,
.screen-match .status-banner,
[data-screen="match"] .match-header,
[data-screen="match"] .turn-banner,
[data-screen="match"] .prediction-banner,
[data-screen="match"] .status-banner{
  background: linear-gradient(180deg, rgba(13,22,38,.94), rgba(9,15,28,.97)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
}

.match-screen .match-header,
.screen-match .match-header,
[data-screen="match"] .match-header{
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
}

.match-screen .table-center,
.match-screen .center-status,
.match-screen .pot-center,
.screen-match .table-center,
.screen-match .center-status,
.screen-match .pot-center,
[data-screen="match"] .table-center,
[data-screen="match"] .center-status,
[data-screen="match"] .pot-center{
  background: rgba(8,15,26,.76) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
  padding: 10px 12px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.22) !important;
}

.match-screen .seat,
.match-screen .poker-seat-card,
.match-screen .player-badge,
.screen-match .seat,
.screen-match .poker-seat-card,
.screen-match .player-badge,
[data-screen="match"] .seat,
[data-screen="match"] .poker-seat-card,
[data-screen="match"] .player-badge{
  background: linear-gradient(180deg, rgba(14,22,38,.94), rgba(9,14,26,.98)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.20) !important;
}

.match-screen .seat:not(.is-self),
.match-screen .poker-seat-card:not(.is-self),
.screen-match .seat:not(.is-self),
.screen-match .poker-seat-card:not(.is-self),
[data-screen="match"] .seat:not(.is-self),
[data-screen="match"] .poker-seat-card:not(.is-self){
  opacity: var(--match-side-opacity) !important;
}

.match-screen .seat.is-self,
.match-screen .poker-seat-card.is-self,
.screen-match .seat.is-self,
.screen-match .poker-seat-card.is-self,
[data-screen="match"] .seat.is-self,
[data-screen="match"] .poker-seat-card.is-self{
  border-color: rgba(120,170,255,.18) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.26) !important;
}

.match-screen .seat.is-turn,
.match-screen .poker-seat-card.is-turn,
.screen-match .seat.is-turn,
.screen-match .poker-seat-card.is-turn,
[data-screen="match"] .seat.is-turn,
[data-screen="match"] .poker-seat-card.is-turn{
  border-color: rgba(255,214,102,.22) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.28) !important;
}

.match-screen .seat .hearts,
.match-screen .poker-seat-card .hearts,
.screen-match .seat .hearts,
.screen-match .poker-seat-card .hearts,
[data-screen="match"] .seat .hearts,
[data-screen="match"] .poker-seat-card .hearts{
  gap: 4px !important;
}

.match-screen .hand,
.match-screen .player-hand,
.screen-match .hand,
.screen-match .player-hand,
[data-screen="match"] .hand,
[data-screen="match"] .player-hand{
  gap: 6px !important;
  padding-top: 6px !important;
}

.match-screen .hand-card,
.match-screen .card-shell,
.screen-match .hand-card,
.screen-match .card-shell,
[data-screen="match"] .hand-card,
[data-screen="match"] .card-shell{
  border-radius: 16px !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.24) !important;
}

.match-screen .hand-card.playable,
.screen-match .hand-card.playable,
[data-screen="match"] .hand-card.playable{
  border-color: rgba(120,170,255,.18) !important;
}

.match-screen .match-actions,
.match-screen .footer-actions,
.match-screen .quick-actions,
.screen-match .match-actions,
.screen-match .footer-actions,
.screen-match .quick-actions,
[data-screen="match"] .match-actions,
[data-screen="match"] .footer-actions,
[data-screen="match"] .quick-actions{
  gap: 8px !important;
}

.match-screen .match-actions .btn,
.match-screen .footer-actions .btn,
.match-screen .quick-actions .btn,
.screen-match .match-actions .btn,
.screen-match .footer-actions .btn,
.screen-match .quick-actions .btn,
[data-screen="match"] .match-actions .btn,
[data-screen="match"] .footer-actions .btn,
[data-screen="match"] .quick-actions .btn{
  min-height: 42px !important;
  font-size: .88rem !important;
}

.match-screen .side-panel,
.match-screen .round-summary,
.match-screen .phase-panel,
.screen-match .side-panel,
.screen-match .round-summary,
.screen-match .phase-panel,
[data-screen="match"] .side-panel,
[data-screen="match"] .round-summary,
[data-screen="match"] .phase-panel{
  background: linear-gradient(180deg, rgba(11,18,31,.92), rgba(7,12,22,.96)) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 18px !important;
  padding: 10px !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.18) !important;
}

.match-screen .side-panel p,
.match-screen .round-summary p,
.match-screen .phase-panel p,
.screen-match .side-panel p,
.screen-match .round-summary p,
.screen-match .phase-panel p,
[data-screen="match"] .side-panel p,
[data-screen="match"] .round-summary p,
[data-screen="match"] .phase-panel p{
  font-size: .82rem !important;
  line-height: 1.3 !important;
  opacity: .85 !important;
}

@media (max-width: 640px){
  .match-screen,
  .screen-match,
  [data-screen="match"]{
    --match-gap: 8px;
    --match-side-opacity: .82;
  }

  .match-screen .table-wrap,
  .match-screen .table-area,
  .match-screen .table-shell,
  .screen-match .table-wrap,
  .screen-match .table-area,
  .screen-match .table-shell,
  [data-screen="match"] .table-wrap,
  [data-screen="match"] .table-area,
  [data-screen="match"] .table-shell{
    border-radius: 24px !important;
    padding: 10px !important;
  }

  .match-screen .table-center,
  .match-screen .center-status,
  .match-screen .pot-center,
  .screen-match .table-center,
  .screen-match .center-status,
  .screen-match .pot-center,
  [data-screen="match"] .table-center,
  [data-screen="match"] .center-status,
  [data-screen="match"] .pot-center{
    padding: 8px 10px !important;
    border-radius: 16px !important;
  }

  .match-screen .seat,
  .match-screen .poker-seat-card,
  .screen-match .seat,
  .screen-match .poker-seat-card,
  [data-screen="match"] .seat,
  [data-screen="match"] .poker-seat-card{
    border-radius: 14px !important;
  }

  .match-screen .side-panel,
  .match-screen .round-summary,
  .match-screen .phase-panel,
  .screen-match .side-panel,
  .screen-match .round-summary,
  .screen-match .phase-panel,
  [data-screen="match"] .side-panel,
  [data-screen="match"] .round-summary,
  [data-screen="match"] .phase-panel{
    display: none !important;
  }
}




/* v40 · Punto 9: más contraste entre pantallas núcleo y secundarias */
:root{
  --core-screen-max: 1120px;
  --secondary-screen-max: 980px;
}

/* Pantallas núcleo: más presencia */
.play-screen,
.match-screen,
.store-screen,
.inventory-screen,
.screen-play,
.screen-match,
.screen-store,
.screen-inventory,
[data-screen="play"],
[data-screen="match"],
[data-screen="store"],
[data-screen="inventory"]{
  max-width: var(--core-screen-max) !important;
}

.play-screen .play-hero,
.match-screen .match-header,
.match-screen .table-wrap,
.store-screen .store-hero,
.inventory-screen .inventory-hero,
.screen-play .play-hero,
.screen-match .match-header,
.screen-match .table-wrap,
.screen-store .store-hero,
.screen-inventory .inventory-hero,
[data-screen="play"] .play-hero,
[data-screen="match"] .match-header,
[data-screen="match"] .table-wrap,
[data-screen="store"] .store-hero,
[data-screen="inventory"] .inventory-hero{
  box-shadow: 0 26px 56px rgba(0,0,0,.34) !important;
}

/* Pantallas secundarias: más discretas y utilitarias */
.profile-screen,
.online-screen,
.friends-screen,
.settings-screen,
.notifications-screen,
.legal-screen,
.result-screen,
.screen-profile,
.screen-online,
.screen-friends,
.screen-settings,
.screen-notifications,
.screen-legal,
.screen-result,
[data-screen="profile"],
[data-screen="online"],
[data-screen="friends"],
[data-screen="settings"],
[data-screen="notifications"],
[data-screen="legal"],
[data-screen="result"]{
  max-width: var(--secondary-screen-max) !important;
}

.profile-screen .panel,
.profile-screen .profile-card,
.online-screen .panel,
.friends-screen .panel,
.settings-screen .panel,
.notifications-screen .panel,
.legal-screen .panel,
.result-screen .panel,
.screen-profile .panel,
.screen-profile .profile-card,
.screen-online .panel,
.screen-friends .panel,
.screen-settings .panel,
.screen-notifications .panel,
.screen-legal .panel,
.screen-result .panel,
[data-screen="profile"] .panel,
[data-screen="profile"] .profile-card,
[data-screen="online"] .panel,
[data-screen="friends"] .panel,
[data-screen="settings"] .panel,
[data-screen="notifications"] .panel,
[data-screen="legal"] .panel,
[data-screen="result"] .panel{
  background: linear-gradient(180deg, rgba(12,18,31,.94), rgba(8,12,22,.98)) !important;
  border-color: rgba(255,255,255,.06) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.18) !important;
}

/* Títulos secundarios menos heroicos */
.profile-screen .screen-title,
.online-screen .screen-title,
.friends-screen .screen-title,
.settings-screen .screen-title,
.notifications-screen .screen-title,
.legal-screen .screen-title,
.result-screen .screen-title,
.screen-profile .screen-title,
.screen-online .screen-title,
.screen-friends .screen-title,
.screen-settings .screen-title,
.screen-notifications .screen-title,
.screen-legal .screen-title,
.screen-result .screen-title,
[data-screen="profile"] .screen-title,
[data-screen="online"] .screen-title,
[data-screen="friends"] .screen-title,
[data-screen="settings"] .screen-title,
[data-screen="notifications"] .screen-title,
[data-screen="legal"] .screen-title,
[data-screen="result"] .screen-title{
  font-size: clamp(1.15rem, 2.8vw, 1.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

/* Acciones secundarias más calmadas */
.profile-screen .btn,
.online-screen .btn,
.friends-screen .btn,
.settings-screen .btn,
.notifications-screen .btn,
.legal-screen .btn,
.result-screen .btn,
.screen-profile .btn,
.screen-online .btn,
.screen-friends .btn,
.screen-settings .btn,
.screen-notifications .btn,
.screen-legal .btn,
.screen-result .btn,
[data-screen="profile"] .btn,
[data-screen="online"] .btn,
[data-screen="friends"] .btn,
[data-screen="settings"] .btn,
[data-screen="notifications"] .btn,
[data-screen="legal"] .btn,
[data-screen="result"] .btn{
  min-height: 42px !important;
  font-size: .88rem !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.18) !important;
}

/* Más aire arriba y abajo en núcleo */
.play-screen,
.match-screen,
.store-screen,
.inventory-screen,
.screen-play,
.screen-match,
.screen-store,
.screen-inventory,
[data-screen="play"],
[data-screen="match"],
[data-screen="store"],
[data-screen="inventory"]{
  padding-top: 14px !important;
  padding-bottom: 18px !important;
}

/* Secundarias más compactas */
.profile-screen,
.online-screen,
.friends-screen,
.settings-screen,
.notifications-screen,
.legal-screen,
.result-screen,
.screen-profile,
.screen-online,
.screen-friends,
.screen-settings,
.screen-notifications,
.screen-legal,
.screen-result,
[data-screen="profile"],
[data-screen="online"],
[data-screen="friends"],
[data-screen="settings"],
[data-screen="notifications"],
[data-screen="legal"],
[data-screen="result"]{
  padding-top: 10px !important;
  padding-bottom: 12px !important;
}

/* Resultado con peso medio: importante pero no núcleo */
.result-screen .result-card,
.screen-result .result-card,
[data-screen="result"] .result-card{
  background: linear-gradient(180deg, rgba(15,24,42,.96), rgba(9,14,26,.98)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.26) !important;
}

/* Ocultar adornos excesivos en secundarias */
.profile-screen .hero-copy,
.online-screen .hero-copy,
.friends-screen .hero-copy,
.settings-screen .hero-copy,
.notifications-screen .hero-copy,
.legal-screen .hero-copy,
.screen-profile .hero-copy,
.screen-online .hero-copy,
.screen-friends .hero-copy,
.screen-settings .hero-copy,
.screen-notifications .hero-copy,
.screen-legal .hero-copy,
[data-screen="profile"] .hero-copy,
[data-screen="online"] .hero-copy,
[data-screen="friends"] .hero-copy,
[data-screen="settings"] .hero-copy,
[data-screen="notifications"] .hero-copy,
[data-screen="legal"] .hero-copy{
  opacity: .82 !important;
  max-width: 42ch !important;
}

@media (max-width: 640px){
  .play-screen,
  .match-screen,
  .store-screen,
  .inventory-screen,
  .profile-screen,
  .online-screen,
  .friends-screen,
  .settings-screen,
  .notifications-screen,
  .legal-screen,
  .result-screen,
  .screen-play,
  .screen-match,
  .screen-store,
  .screen-inventory,
  .screen-profile,
  .screen-online,
  .screen-friends,
  .screen-settings,
  .screen-notifications,
  .screen-legal,
  .screen-result,
  [data-screen="play"],
  [data-screen="match"],
  [data-screen="store"],
  [data-screen="inventory"],
  [data-screen="profile"],
  [data-screen="online"],
  [data-screen="friends"],
  [data-screen="settings"],
  [data-screen="notifications"],
  [data-screen="legal"],
  [data-screen="result"]{
    max-width: 100% !important;
  }
}




/* v41 · Punto 10: acabado premium final */
:root{
  --premium-border: rgba(255,255,255,.09);
  --premium-border-strong: rgba(129,174,255,.20);
  --premium-glow: 0 24px 56px rgba(0,0,0,.34);
  --premium-shadow-soft: 0 14px 28px rgba(0,0,0,.22);
  --premium-radius-xl: 26px;
  --premium-radius-lg: 22px;
  --premium-radius-md: 18px;
}

/* Fondo general más profundo y menos plano */
html,
body{
  background:
    radial-gradient(circle at 50% -10%, rgba(81,126,220,.10), transparent 32%),
    radial-gradient(circle at 12% 18%, rgba(255,215,120,.05), transparent 18%),
    linear-gradient(180deg, #08111f 0%, #091321 45%, #070d17 100%) !important;
}

/* Topbar más refinada */
.topbar{
  background:
    linear-gradient(180deg, rgba(13,20,35,.88), rgba(9,14,25,.94)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 18px !important;
  box-shadow: var(--premium-shadow-soft) !important;
}

/* Superficies con acabado más elegante */
.panel,
.menu-card,
.collectible-card,
.profile-card,
.result-card,
.leaderboard-card,
.pack-card,
.last-pack-hero,
.secondary-card,
.sub-panel{
  position: relative !important;
  overflow: hidden !important;
}

.panel::before,
.menu-card::before,
.collectible-card::before,
.profile-card::before,
.result-card::before,
.leaderboard-card::before,
.pack-card::before,
.last-pack-hero::before,
.secondary-card::before,
.sub-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 24%),
    radial-gradient(circle at top left, rgba(255,255,255,.05), transparent 18%);
  pointer-events:none;
}

.home-hero,
.play-hero,
.store-hero,
.inventory-hero,
.profile-hero,
.main-hero,
.table-wrap,
.match-header{
  border-radius: var(--premium-radius-xl) !important;
  border: 1px solid var(--premium-border-strong) !important;
  box-shadow: var(--premium-glow) !important;
}

.panel,
.menu-card,
.collectible-card,
.profile-card,
.result-card,
.leaderboard-card,
.pack-card,
.last-pack-hero,
.secondary-card,
.sub-panel{
  border-radius: var(--premium-radius-lg) !important;
  border: 1px solid var(--premium-border) !important;
  box-shadow: var(--premium-shadow-soft) !important;
}

/* CTA principal más final */
.btn-primary,
.primary-cta,
.cta-primary,
.mode-card--primary .btn,
.mode-card.primary .btn{
  background:
    linear-gradient(180deg, rgba(109,170,255,.98), rgba(70,125,222,.98)) !important;
  color: #eef5ff !important;
  border: 1px solid rgba(180,215,255,.22) !important;
  box-shadow:
    0 16px 32px rgba(42,90,175,.26),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Chips y pills más finas */
.info-pill,
.summary-pill,
.mini-stat,
.stat,
.phase-chip,
.reward-pill,
.win-pill,
.loss-pill,
.rarity-pill,
.pack-price,
.pack-rarity{
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: none !important;
}

/* Tabla y ranking más limpios */
.leaderboard-card table,
.leaderboard-card .leaderboard-table{
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}
.leaderboard-card tr{
  background: rgba(255,255,255,.025) !important;
}
.leaderboard-card td,
.leaderboard-card th{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Cartas y sobres más “objeto” */
.collectible-card__art,
.pack-card__visual,
.hand-card,
.card-shell{
  border-radius: 18px !important;
  overflow: hidden !important;
}

.collectible-card__art{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 28px rgba(0,0,0,.20) !important;
}

.pack-card__visual::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 26%);
  pointer-events:none;
}

/* Bottom nav más integrada y elegante */
.bottom-nav{
  background:
    linear-gradient(180deg, rgba(8,12,21,.78), rgba(6,9,16,.90)) !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  box-shadow: 0 -8px 24px rgba(0,0,0,.14) !important;
}
.bottom-nav a,
.bottom-nav button{
  border-radius: 14px !important;
}
.bottom-nav .active,
.bottom-nav [aria-current="page"]{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(120,170,255,.12) !important;
}

/* Partida: centro y mesa mejor rematados */
.match-screen .table-center,
.match-screen .center-status,
.match-screen .pot-center,
.screen-match .table-center,
.screen-match .center-status,
.screen-match .pot-center,
[data-screen="match"] .table-center,
[data-screen="match"] .center-status,
[data-screen="match"] .pot-center{
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.22) !important;
}

.match-screen .seat,
.match-screen .poker-seat-card,
.screen-match .seat,
.screen-match .poker-seat-card,
[data-screen="match"] .seat,
[data-screen="match"] .poker-seat-card{
  border-radius: 16px !important;
}

/* Secundarias todavía más limpias */
.profile-screen .panel,
.online-screen .panel,
.friends-screen .panel,
.settings-screen .panel,
.notifications-screen .panel,
.legal-screen .panel,
.screen-profile .panel,
.screen-online .panel,
.screen-friends .panel,
.screen-settings .panel,
.screen-notifications .panel,
.screen-legal .panel,
[data-screen="profile"] .panel,
[data-screen="online"] .panel,
[data-screen="friends"] .panel,
[data-screen="settings"] .panel,
[data-screen="notifications"] .panel,
[data-screen="legal"] .panel{
  box-shadow: 0 10px 20px rgba(0,0,0,.16) !important;
}

/* Móvil: radios y densidad más finas */
@media (max-width: 640px){
  .home-hero,
  .play-hero,
  .store-hero,
  .inventory-hero,
  .profile-hero,
  .main-hero,
  .table-wrap,
  .match-header{
    border-radius: 22px !important;
  }

  .panel,
  .menu-card,
  .collectible-card,
  .profile-card,
  .result-card,
  .leaderboard-card,
  .pack-card,
  .last-pack-hero,
  .secondary-card,
  .sub-panel{
    border-radius: 18px !important;
  }

  .topbar{
    border-radius: 16px !important;
  }
}

.predict-btn.forbidden small{opacity:.92}


/* v45 · claridad rival y cierre de partida */
.rival-status-card,
.round-snapshot-card,
.rival-status-card{padding:10px 12px}
.rival-status-card.active{border-color:rgba(255,214,102,.28)}
.rival-status-card.winner{border-color:rgba(126,231,135,.28)}
.rival-status-card.warn{border-color:rgba(255,168,120,.24)}
.rival-status-card__top,
.round-snapshot-card__head,
.match-result-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.rival-status-card__top span,
.round-snapshot-card__head span{
  font-size:.74rem;
  opacity:.8;
}
.rival-status-card__meta,
.round-snapshot-card__meta,
.finished-summary__placements{
  margin-top:6px;
  font-size:.78rem;
  opacity:.82;
}
.round-snapshot{
  margin-top:10px;
}
.round-snapshot__title,
.finished-summary__title{
  font-weight:800;
  margin-bottom:8px;
}
.round-snapshot__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;
}
.round-snapshot-card{padding:10px 12px}
.round-snapshot-card.ok{border-color:rgba(126,231,135,.28)}
.round-snapshot-card.warn{border-color:rgba(255,214,102,.28)}
.round-snapshot-card.neutral{border-color:rgba(255,255,255,.08)}
.finished-summary__winner{
  font-weight:900;
}
.finished-summary__placements{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.finished-summary__placements span{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
}
@media (max-width:640px){
  .rival-status-strip,
  .round-snapshot__grid{grid-template-columns:1fr 1fr}
  .finished-summary__placements{gap:6px}
}


/* v48 prediction comfort */
.predict-btn.active{border-color:rgba(255,215,109,.42);background:rgba(255,215,109,.14);box-shadow:0 0 0 1px rgba(255,215,109,.12)}
.prediction-grid--selectable{margin-bottom:12px}





@media (max-width: 640px){}
@media (max-width: 640px){.interaction-rail{align-items:stretch}.interaction-rail__feedback{width:100%;text-align:center}}







.compact-reward-strip--result{margin-top:16px}
@media (max-width: 980px){}
@media (max-width: 640px){}


/* v51 premium HUD polish */






.match-self-hud__eyebrow{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}



.match-screen .match-compact-header{border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));box-shadow:0 18px 38px rgba(0,0,0,.22)}
.match-screen 
.match-screen 
.match-screen .poker-summary-strip{padding:8px 10px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.match-screen .poker-summary-chip{background:rgba(7,17,29,.6);border-color:rgba(255,255,255,.08)}

.transition-rail__head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.transition-rail__head strong{font-size:14px}
.transition-rail__head span{font-size:12px;color:rgba(255,255,255,.72)}
.transition-rail__body{display:grid;gap:10px}
.transition-rail__body>span{font-size:12px;color:rgba(255,255,255,.8)}
.transition-rail__progress{display:grid;grid-template-columns:repeat(auto-fit,minmax(14px,1fr));gap:8px}
.transition-rail__dot{height:10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.08)}
.transition-rail__dot--done{background:rgba(123,232,149,.42);border-color:rgba(123,232,149,.34);box-shadow:0 0 0 1px rgba(123,232,149,.16) inset}
.transition-rail__dot--current{background:rgba(255,214,102,.44);border-color:rgba(255,214,102,.36);box-shadow:0 0 0 1px rgba(255,214,102,.18) inset}
.transition-rail--trick-result{border-color:rgba(123,232,149,.24);background:linear-gradient(180deg,rgba(123,232,149,.09),rgba(255,255,255,.03))}
.transition-rail--prediction{border-color:rgba(137,236,255,.22);background:linear-gradient(180deg,rgba(137,236,255,.07),rgba(255,255,255,.03))}
.transition-rail--finished{border-color:rgba(255,214,102,.24);background:linear-gradient(180deg,rgba(255,214,102,.09),rgba(255,255,255,.03))}
@media (max-width: 640px){.transition-rail__progress{gap:6px}.transition-rail__dot{height:8px}.competitive-pulse__stats{grid-template-columns:minmax(0,1fr)} }
.match-screen 
.poker-seat-status--active{background:#89ecff;box-shadow:0 0 0 3px rgba(137,236,255,.12),0 0 14px rgba(137,236,255,.4)}
.poker-seat-status--winner{background:#ffd66d;box-shadow:0 0 0 3px rgba(255,214,109,.14),0 0 14px rgba(255,214,109,.35)}
.poker-seat-status--offline{background:#ff8b8b;box-shadow:0 0 0 3px rgba(255,139,139,.12),0 0 12px rgba(255,139,139,.35)}
.match-screen .hand-card.selected{transform:translateY(-10px) scale(1.02);filter:drop-shadow(0 18px 18px rgba(0,0,0,.34))}
.match-screen .predict-btn.active,.match-screen .segmented-control__btn.active{box-shadow:0 10px 20px rgba(0,0,0,.2)}
@media (max-width: 820px){
  
  
}
@media (max-width: 520px){
  .match-screen .match-compact-header__copy strong{font-size:16px}
}

/* v52 entry flow polish */
.play-hub-hero--entry{
  position:relative;
  overflow:hidden;
}
.entry-readiness-panel,
.online-entry-panel{
  position:relative;
  overflow:hidden;
}
.entry-readiness-grid,
.online-entry-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.entry-readiness-card,
.online-entry-card{
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-radius:18px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:116px;
}
.entry-readiness-card strong,
.online-entry-card strong{
  font-size:16px;
}
.entry-readiness-card small,
.online-entry-card small{
  color:rgba(255,255,255,.72);
  line-height:1.45;
}
.entry-readiness-card__tag,
.online-entry-card__tag{
  display:inline-flex;
  align-self:flex-start;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(255,255,255,.08);
}
.entry-readiness-card--cpu .entry-readiness-card__tag{ background:rgba(78,201,176,.22); }
.entry-readiness-card--online .entry-readiness-card__tag{ background:rgba(86,156,214,.22); }
.entry-readiness-card--friends .entry-readiness-card__tag{ background:rgba(208,126,255,.22); }
.hero-online-banner--entry .stats .stat strong{
  max-width:220px;
}
@media (max-width: 900px){
  .entry-readiness-grid,
  .online-entry-grid{
    grid-template-columns:1fr;
  }
  .hero-online-banner--entry .stats .stat strong{
    max-width:none;
  }
}

/* v53 mesa premium */
.trick-spotlight{position:absolute;left:50%;top:calc(50% + 112px);transform:translateX(-50%);z-index:2;display:grid;gap:4px;min-width:min(78%,320px);padding:11px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(7,17,29,.84),rgba(7,17,29,.62));box-shadow:0 16px 34px rgba(0,0,0,.24);backdrop-filter:blur(8px);text-align:center}
.trick-spotlight--active{border-color:rgba(137,236,255,.30);box-shadow:0 0 0 1px rgba(137,236,255,.08),0 16px 34px rgba(0,0,0,.28)}
.trick-spotlight--winner{border-color:rgba(255,215,109,.34);box-shadow:0 0 0 1px rgba(255,215,109,.08),0 18px 36px rgba(0,0,0,.28)}
.trick-spotlight__eyebrow{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.trick-spotlight__title{font-size:14px;font-weight:900;line-height:1.18;color:#fff}
.trick-spotlight__meta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.trick-spotlight__meta span{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}
.match-screen .poker-felt{overflow:hidden}
.match-screen .poker-felt::after{content:"";position:absolute;inset:12px;border-radius:30px;border:1px solid rgba(255,255,255,.06);pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.match-screen .table-cards-zone{padding-top:188px;padding-bottom:16px}
.match-screen .table-card-slot{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 20px rgba(0,0,0,.16)}
.match-screen .table-card-slot.latest{transform:translateY(-4px)}
.match-screen .table-card-slot.winner{box-shadow:0 0 0 1px rgba(255,215,109,.12),0 12px 26px rgba(0,0,0,.22)}
@media (max-width: 980px){.trick-spotlight{top:calc(50% + 100px);min-width:min(84%,290px);padding:9px 12px}.match-screen .table-cards-zone{padding-top:176px}}
@media (max-width: 640px){.trick-spotlight{top:calc(50% + 92px);min-width:min(88%,252px);padding:8px 10px;border-radius:16px}.trick-spotlight__title{font-size:13px}.trick-spotlight__meta{gap:6px;font-size:10px}.match-screen .table-cards-zone{padding-top:162px}}


/* v55 · flujo de turno y detalle rival */
.turn-ribbon__title{
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.turn-ribbon__track{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(94px,1fr));
  gap:8px;
}
.turn-ribbon__chip{
  min-height:58px;
  padding:10px 10px 9px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(11,18,29,.88);
  display:grid;
  gap:3px;
}
.turn-ribbon__chip--active{border-color:rgba(137,236,255,.28);box-shadow:0 0 0 1px rgba(137,236,255,.08)}
.turn-ribbon__chip--winner{border-color:rgba(255,215,109,.28);box-shadow:0 0 0 1px rgba(255,215,109,.08)}
.turn-ribbon__chip--warn{border-color:rgba(255,168,120,.26)}
.turn-ribbon__chip--done{border-color:rgba(126,231,135,.22)}
.turn-ribbon__index{font-size:.68rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.46)}
.turn-ribbon__chip strong{font-size:.8rem;line-height:1.05}
.turn-ribbon__chip small{font-size:.68rem;color:rgba(255,255,255,.72)}
.poker-seat-detail{
  margin-top:4px;
  font-size:.68rem;
  line-height:1.28;
  color:rgba(255,255,255,.66);
}
.rival-status-card__sub{
  margin-top:5px;
  font-size:.7rem;
  color:rgba(255,255,255,.66);
  line-height:1.3;
}
@media (max-width: 640px){
  .turn-ribbon__track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .turn-ribbon__chip{min-height:54px;padding:9px}
  .poker-seat-detail{font-size:.64rem}
}


/* V58: compactar pantalla de partida y reducir ruido visual */
.match-quick-rail{display:flex;flex-wrap:wrap;gap:8px;margin-top:-2px}
.match-insight-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:10px}
.competitive-pulse__top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.competitive-pulse__top strong{font-size:14px}
.competitive-pulse__top span{font-size:12px;color:rgba(255,255,255,.72);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.competitive-pulse__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.competitive-pulse__chip{display:grid;gap:4px;padding:10px 11px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.competitive-pulse__chip span{font-size:11px;color:rgba(255,255,255,.66);text-transform:uppercase;letter-spacing:.04em}
.competitive-pulse__chip strong{font-size:13px;color:#fff}
.competitive-pulse__body{font-size:12px;line-height:1.45;color:rgba(255,255,255,.82)}
.competitive-pulse--lead{border-color:rgba(123,232,149,.26);background:linear-gradient(180deg,rgba(123,232,149,.11),rgba(255,255,255,.03))}
.competitive-pulse--mid{border-color:rgba(137,236,255,.20);background:linear-gradient(180deg,rgba(137,236,255,.07),rgba(255,255,255,.03))}
.competitive-pulse--danger{border-color:rgba(255,120,120,.24);background:linear-gradient(180deg,rgba(255,120,120,.10),rgba(255,255,255,.03))}
.match-insights-toggle{margin-top:10px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));overflow:hidden}
.match-insights-toggle summary{list-style:none;cursor:pointer;padding:12px 14px;font-size:13px;font-weight:800;letter-spacing:.02em;display:flex;align-items:center;justify-content:space-between;gap:12px}
.match-insights-toggle summary::-webkit-details-marker{display:none}
.match-insights-toggle summary::after{content:'+';width:22px;height:22px;border-radius:999px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);font-size:14px;line-height:1;color:rgba(255,255,255,.82)}
.match-insights-toggle[open] summary::after{content:'–'}
.match-insights-toggle__body{padding:0 12px 12px;display:grid;gap:10px}
.match-insights-toggle .turn-ribbon,.match-insights-toggle .rival-status-strip{margin-top:0}
.match-screen 
.match-screen 
.match-screen 
.match-screen .match-self-chip,.screen-match .match-self-chip,[data-screen="match"] .match-self-chip{min-width:70px;padding:8px 10px;border-radius:14px}
.match-screen 
.match-screen .round-snapshot,.screen-match .round-snapshot,[data-screen="match"] .round-snapshot{margin-top:10px}
.match-screen .hand,.screen-match .hand,[data-screen="match"] .hand{margin-top:10px}
.match-screen .trick-spotlight,.screen-match .trick-spotlight,[data-screen="match"] .trick-spotlight{backdrop-filter:blur(10px);box-shadow:0 16px 32px rgba(0,0,0,.24)}
.match-screen .table-cards-zone,.screen-match .table-cards-zone,[data-screen="match"] .table-cards-zone{gap:10px}
.match-screen .table-card-slot,.screen-match .table-card-slot,[data-screen="match"] .table-card-slot{padding:10px 8px;border-radius:18px;background:rgba(7,16,28,.42)}
.match-screen .poker-seat-badge,.screen-match .poker-seat-badge,[data-screen="match"] .poker-seat-badge{backdrop-filter:blur(10px)}
@media (min-width: 980px){
  .match-insight-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width: 760px){
  .match-screen .match-poker-grid,.screen-match .match-poker-grid,[data-screen="match"] .match-poker-grid{gap:12px}
  .match-screen 
  .match-screen .match-hand-row,.screen-match .match-hand-row,[data-screen="match"] .match-hand-row{margin-top:10px}
  .match-screen 
  .match-screen 
  .match-screen .trick-spotlight,.screen-match .trick-spotlight,[data-screen="match"] .trick-spotlight{padding:10px 12px;border-radius:16px}
  .match-screen .poker-centerpiece,.screen-match .poker-centerpiece,[data-screen="match"] .poker-centerpiece{padding:14px 14px 12px}
  .match-screen .poker-centerpiece__footer,.screen-match .poker-centerpiece__footer,[data-screen="match"] .poker-centerpiece__footer{gap:6px;font-size:10px}
}
@media (max-width: 640px){
  .match-quick-rail{gap:6px}
  .match-insights-toggle summary{padding:11px 12px;font-size:12px}
  .match-insights-toggle__body{padding:0 10px 10px}
  .match-screen 
  .match-screen .round-snapshot,.screen-match .round-snapshot,[data-screen="match"] .round-snapshot{padding:11px 12px;border-radius:16px}
}


.match-quick-pill--soft{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.10)}
.match-quick-pill--live{background:rgba(109,216,255,.12);border-color:rgba(109,216,255,.30)}
.match-quick-pill--muted{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.72)}
.match-hand-toolbar__copy{max-width:420px;line-height:1.35}
.prediction-grid--selectable{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px}
.predict-btn.active{border-color:rgba(109,216,255,.34);background:rgba(109,216,255,.14);box-shadow:0 10px 22px rgba(0,0,0,.18)}






  .prediction-grid--selectable{grid-template-columns:repeat(2,minmax(0,1fr))}
  
  
}


/* v61 global premium polish */
:root{
  --v61-topbar-bg:linear-gradient(180deg,rgba(14,24,42,.94),rgba(9,16,30,.96));
  --v61-topbar-border:rgba(138,182,255,.16);
  --v61-topbar-shadow:0 16px 34px rgba(0,0,0,.28);
  --v61-glow-a:radial-gradient(circle at top left,rgba(94,151,255,.12),transparent 32%);
  --v61-glow-b:radial-gradient(circle at bottom right,rgba(255,215,112,.08),transparent 24%);
  --v61-soft-card:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.024));
}
html.ui-premium-v61 body,
body.ui-premium-v61{
  background:
    radial-gradient(circle at 10% -10%, rgba(87,141,255,.13), transparent 28%),
    radial-gradient(circle at 90% -5%, rgba(255,205,93,.08), transparent 22%),
    linear-gradient(180deg,#07111d 0%,#091523 42%,#08111b 100%);
}
body.ui-premium-v61 .topbar{
  background:var(--v61-topbar-bg);
  border-color:var(--v61-topbar-border);
  box-shadow:var(--v61-topbar-shadow);
}
body.ui-premium-v61 .topbar .title,
body.ui-premium-v61 .topbar .screen-title{letter-spacing:.01em}
body.ui-premium-v61 .panel{
  background:var(--v61-glow-a),var(--v61-glow-b),var(--v61-soft-card) !important;
  border-color:rgba(134,175,255,.11) !important;
  box-shadow:0 18px 38px rgba(0,0,0,.24);
}
body.ui-premium-v61 .panel::before{opacity:.82}
body.ui-premium-v61 .section-head{margin-bottom:12px;align-items:flex-end}
body.ui-premium-v61 .section-head h3{letter-spacing:.01em}
body.ui-premium-v61 .small{color:rgba(227,236,255,.72)}
body.ui-premium-v61 .badge,
body.ui-premium-v61 .pill,
body.ui-premium-v61 .phase-pill,
body.ui-premium-v61 .match-quick-pill,
body.ui-premium-v61 .poker-summary-chip{
  border-color:rgba(140,182,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
body.ui-premium-v61 .result-screen,
body.ui-premium-v61 .match-screen,
body.ui-premium-v61 .play-screen,
body.ui-premium-v61 .online-screen,
body.ui-premium-v61 .profile-screen{gap:14px}
body.ui-premium-v61 .match-compact-header,
body.ui-premium-v61 
body.ui-premium-v61 
body.ui-premium-v61 .nav-btn small{letter-spacing:.01em}
body.ui-premium-v61 .nav-btn.active{
  background:linear-gradient(180deg,rgba(76,132,255,.2),rgba(76,132,255,.1));
  border-color:rgba(122,168,255,.2);
}
body.ui-premium-v61 .table-card-slot,
body.ui-premium-v61 .poker-seat-badge{
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}
body.ui-premium-v61 .result-hero-card,
body.ui-premium-v61 .poker-centerpiece,
body.ui-premium-v61 .compact-reward-strip{
  box-shadow:0 18px 36px rgba(0,0,0,.24);
}
@media (max-width: 980px){
  body.ui-premium-v61 .panel{box-shadow:0 14px 26px rgba(0,0,0,.22)}
  body.ui-premium-v61 .match-screen,
  body.ui-premium-v61 .result-screen,
  body.ui-premium-v61 .play-screen{gap:12px}
}
@media (max-width: 640px){
  body.ui-premium-v61 .topbar{padding:10px 11px;border-radius:22px}
  body.ui-premium-v61 .panel{border-radius:22px}
  body.ui-premium-v61 
}


/* v62 global polish: menus + match coherence */
body.ui-polish-v62 .topbar--v62{display:flex;flex-direction:column;gap:10px;padding:12px 14px 13px;border-radius:22px;background:linear-gradient(180deg,rgba(11,21,34,.94),rgba(8,15,26,.9));border:1px solid rgba(255,255,255,.07);box-shadow:0 18px 34px rgba(0,0,0,.24)}
body.ui-polish-v62 .topbar--v62 .topbar__main{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
body.ui-polish-v62 .topbar--v62 .topbar__title strong{display:block;font-size:18px;line-height:1.1}
body.ui-polish-v62 .topbar--v62 .topbar__title .small{margin-top:4px}
body.ui-polish-v62 .topbar--v62 .topbar__statusbar{display:flex;flex-wrap:wrap;gap:8px}
body.ui-polish-v62 .topbar-chip{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:11px;font-weight:700;letter-spacing:.02em;color:#dce9fb}
body.ui-polish-v62 .topbar-chip.is-ok{background:rgba(72,208,141,.12);border-color:rgba(72,208,141,.22);color:#b8f3cf}
body.ui-polish-v62 .topbar-chip.is-warn{background:rgba(255,196,104,.12);border-color:rgba(255,196,104,.22);color:#ffe2a9}

body.ui-polish-v62 .launch-readiness-strip--v62{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body.ui-polish-v62 .launch-readiness-card, body.ui-polish-v62 .online-lane-card{display:flex;flex-direction:column;gap:8px;padding:14px 15px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 34px rgba(0,0,0,.18)}
body.ui-polish-v62 .launch-readiness-card__tag, body.ui-polish-v62 .online-lane-card__tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#93b7e9}
body.ui-polish-v62 .launch-readiness-card strong, body.ui-polish-v62 .online-lane-card strong{font-size:16px;line-height:1.15}
body.ui-polish-v62 .launch-readiness-card small, body.ui-polish-v62 .online-lane-card small{font-size:12px;line-height:1.45;color:#c9d7ea}
body.ui-polish-v62 .online-lane-grid--v62{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
body.ui-polish-v62 .online-lane-card--queue{background:linear-gradient(180deg,rgba(67,150,255,.14),rgba(255,255,255,.025))}
body.ui-polish-v62 .online-lane-card--rules{background:linear-gradient(180deg,rgba(83,225,182,.12),rgba(255,255,255,.025))}
body.ui-polish-v62 .online-lane-card--season{background:linear-gradient(180deg,rgba(191,120,255,.12),rgba(255,255,255,.025))}

body.ui-polish-v62 .match-session-rail--v62{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.07);box-shadow:0 12px 26px rgba(0,0,0,.18)}
body.ui-polish-v62 .match-session-chip{padding:7px 10px;border-radius:999px;background:rgba(7,17,29,.55);border:1px solid rgba(255,255,255,.08);font-size:11px;font-weight:700;color:#d8e8ff}
body.ui-polish-v62 .match-compact-header{margin-bottom:0}
body.ui-polish-v62 .match-poker-grid{margin-top:0}
body.ui-polish-v62 .play-hub-hero__subtitle, body.ui-polish-v62 .hero-online-banner__content .subtitle{max-width:66ch}
body.ui-polish-v62 .play-mode-pill strong{font-size:15px}

@media (max-width: 980px){
  body.ui-polish-v62 .launch-readiness-strip--v62,
  body.ui-polish-v62 .online-lane-grid--v62{grid-template-columns:1fr}
}
@media (max-width: 720px){
  body.ui-polish-v62 .topbar--v62{padding:11px 12px 12px;border-radius:18px}
  body.ui-polish-v62 .topbar--v62 .topbar__main{grid-template-columns:auto minmax(0,1fr);align-items:start}
  body.ui-polish-v62 .topbar--v62 .resources{grid-column:1 / -1;justify-content:flex-start;overflow:auto;padding-bottom:2px}
  body.ui-polish-v62 .topbar--v62 .topbar__title strong{font-size:17px}
  body.ui-polish-v62 .match-session-rail--v62{padding:9px 10px;border-radius:16px}
}


/* === v63 first impression + visual stability === */
body:not(.app-ready) #app{opacity:0}
.app-launch-shell{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:80;background:radial-gradient(circle at 20% 0%,rgba(80,170,255,.16),transparent 34%),radial-gradient(circle at 100% 100%,rgba(180,120,255,.16),transparent 32%),linear-gradient(180deg,#07111d,#09182c 48%,#0b1524)}
.app-launch-shell[hidden]{display:none}
.app-launch-shell__card{width:min(100%,420px);padding:22px;border-radius:28px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));box-shadow:0 24px 48px rgba(0,0,0,.34)}
.app-launch-shell__brand{display:flex;align-items:center;gap:14px}.app-launch-shell__brand img{width:68px;height:68px;border-radius:18px;object-fit:cover;border:1px solid rgba(255,255,255,.12)}
.app-launch-shell__brand strong{display:block;font-size:28px;letter-spacing:-.05em}.app-launch-shell__brand small{display:block;margin-top:4px;color:var(--muted)}
.app-launch-shell__bar{height:10px;margin-top:18px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.app-launch-shell__bar span{display:block;width:42%;height:100%;border-radius:999px;background:linear-gradient(90deg,#8beeff,#56caff);animation:appShellLoad 1.2s ease-in-out infinite alternate}
.app-launch-shell__meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
@keyframes appShellLoad{from{transform:translateX(-14%);width:36%}to{transform:translateX(110%);width:46%}}
.topbar--v63{gap:10px;min-height:112px}.topbar--v63 .topbar__main{align-items:center;gap:12px}.topbar--v63 .topbar__title{min-width:0}.topbar--v63 .topbar__title strong{font-size:18px}.topbar--v63 .topbar__statusbar{gap:8px;flex-wrap:wrap}.resources--v63{gap:8px}.resource--hide-mobile{display:inline-flex}.topbar-chip--launch{color:#d9efff}.topbar-chip--season{color:var(--gold)}
.launch-readiness-strip--v63,.first-impression-panel,.queue-readiness-panel{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.03));border-color:rgba(255,255,255,.1)}
.first-impression-grid,.queue-readiness-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.first-impression-card,.queue-readiness-card{padding:15px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));display:flex;flex-direction:column;gap:8px;min-height:140px}.first-impression-card__tag,.queue-readiness-card__tag{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;width:max-content;color:rgba(255,255,255,.82)}
.first-impression-card strong,.queue-readiness-card strong{font-size:18px;line-height:1.1}.first-impression-card small,.queue-readiness-card small{color:var(--muted);line-height:1.45}
.ui-stability-v63 .panel,.ui-stability-v63 .menu-card,.ui-stability-v63 .play-mode-pill,.ui-stability-v63 .launch-readiness-card,.ui-stability-v63 .entry-readiness-card,.ui-stability-v63 .online-entry-card,.ui-stability-v63 .online-lane-card,.ui-stability-v63 .play-quick-card{position:relative;overflow:hidden}
.ui-stability-v63 .panel::after,.ui-stability-v63 .menu-card::after,.ui-stability-v63 .play-mode-pill::after,.ui-stability-v63 .launch-readiness-card::after,.ui-stability-v63 .entry-readiness-card::after,.ui-stability-v63 .online-entry-card::after,.ui-stability-v63 .online-lane-card::after,.ui-stability-v63 .play-quick-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 40%);pointer-events:none}
.ui-stability-v63 .hero-online-banner__art img,.ui-stability-v63 .brand-hero__icon,.ui-stability-v63 .resource-icon,.ui-stability-v63 .nav-icon__img{display:block}
.ui-stability-v63 .hero-online-banner__art{min-height:180px}.ui-stability-v63 .hero-online-banner__art img{width:100%;height:100%;object-fit:cover}
.ui-stability-v63 .play-hub-hero__title,.ui-stability-v63 .section-title{ text-wrap:balance }
@media (max-width:900px){.first-impression-grid,.queue-readiness-grid{grid-template-columns:1fr}.topbar--v63{min-height:auto}.topbar--v63 .topbar__main{align-items:flex-start}}
@media (max-width:640px){.resource--hide-mobile{display:none}.app-launch-shell__card{padding:18px;border-radius:24px}.app-launch-shell__brand strong{font-size:24px}.topbar--v63 .topbar__title strong{font-size:17px}}

/* v65 matchmaking polish */
.queue-readiness-panel--v65{position:relative;overflow:hidden}
.queue-readiness-panel--v65::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(64,197,255,.10), transparent 38%);pointer-events:none}
.queue-standards-strip{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(9,18,38,.72),rgba(9,18,38,.42));color:rgba(238,244,255,.86);font-size:12px}
.online-entry-panel--v65 .online-entry-card,.online-lane-grid--v65 .online-lane-card{box-shadow:0 14px 34px rgba(0,0,0,.18)}
.queue-status-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.lobby-confirm-panel--v65{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.03));border-color:rgba(255,255,255,.1)}
.lobby-confirm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lobby-confirm-card{padding:15px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));display:flex;flex-direction:column;gap:8px;min-height:140px}
.lobby-confirm-card__tag{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;width:max-content;color:rgba(255,255,255,.82)}
.lobby-confirm-card strong{font-size:18px;line-height:1.1}.lobby-confirm-card small{color:var(--muted);line-height:1.45}
.ui-matchmaking-v65 .hero-online-banner--entry .footer-actions .btn{min-height:46px}
.ui-matchmaking-v65 .online-lane-card,.ui-matchmaking-v65 .queue-readiness-card,.ui-matchmaking-v65 .online-entry-card,.ui-matchmaking-v65 .lobby-confirm-card{backdrop-filter:blur(10px)}
.ui-matchmaking-v65 .queue-status-chips .pill,.ui-matchmaking-v65 .queue-standards-strip .pill{background:rgba(64,197,255,.12);border-color:rgba(64,197,255,.24);color:#ddf4ff}
@media (max-width:900px){.lobby-confirm-grid{grid-template-columns:1fr}}


/* limpieza final de primera impresión y estabilidad visual */
.release-readiness-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.release-readiness-card,.online-brief-card{display:flex;flex-direction:column;gap:8px;padding:14px 15px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 34px rgba(0,0,0,.18)}
.release-readiness-card__tag,.online-brief-card__tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#96bae9}
.release-readiness-card strong,.online-brief-card strong{font-size:16px;line-height:1.15}
.release-readiness-card small,.online-brief-card small{font-size:12px;line-height:1.45;color:#c9d7ea}
.release-readiness-card--android{background:linear-gradient(180deg,rgba(76,184,255,.14),rgba(255,255,255,.02))}
.release-readiness-card--store{background:linear-gradient(180deg,rgba(178,122,255,.12),rgba(255,255,255,.02))}
.release-readiness-card--build{background:linear-gradient(180deg,rgba(100,224,189,.12),rgba(255,255,255,.02))}
.online-brief-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.online-brief-card:first-child{background:linear-gradient(180deg,rgba(71,154,255,.15),rgba(255,255,255,.02))}
.ui-finish .topbar--v62,.ui-finish .panel,.ui-finish .bottom-shell{backdrop-filter:blur(12px)}
.ui-finish .panel{box-shadow:0 18px 38px rgba(0,0,0,.2)}
.ui-finish .play-hub-hero,.ui-finish .hero-online-banner,.ui-finish .lobby-scene-card{overflow:hidden}
.ui-finish .play-hub-hero__title,.ui-finish .section-title{letter-spacing:-.03em}
.ui-finish .play-hub-stat,.ui-finish .topbar-chip,.ui-finish .match-session-chip{backdrop-filter:blur(8px)}
.ui-finish .bottom-nav .nav-btn{transition:transform .18s ease, background .18s ease, border-color .18s ease}
.ui-finish .bottom-nav .nav-btn.active{transform:translateY(-1px)}
.ui-finish .app-launch-shell__card{background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));box-shadow:0 28px 56px rgba(0,0,0,.38)}
.ui-finish .app-launch-shell__meta{color:#cbd8ea}
body.app-ready #app{opacity:1;transform:none;transition:opacity .22s ease, transform .22s ease}
body:not(.app-ready) #app{transform:translateY(6px)}
@media (max-width:900px){.release-readiness-strip,.online-brief-strip{grid-template-columns:1fr}}


/* phase 1 · mesa móvil y jerarquía visual */
.match-compact-header--launch{padding:12px 14px}
.match-compact-header--launch .small{color:rgba(245,248,255,.72)}
@media (max-width: 980px){
  .match-screen{gap:10px;padding-bottom:8px}
  .match-screen 
  .match-screen 
  .match-screen .match-compact-header{padding:12px 14px}
  .match-screen .match-session-rail,.match-screen .match-insight-grid,.match-screen .match-insights-toggle,.match-screen .round-snapshot,.match-screen 
  .match-screen .table-head{margin-bottom:8px}
  .match-screen .table-head strong{font-size:16px}
  .match-screen .phase-pill{font-size:10px;padding:6px 10px}
  .match-screen .poker-felt-wrap,.match-screen .poker-felt{min-height:58svh}
  .match-screen .poker-felt{border-radius:26px}
  .match-screen .poker-overlay{top:8%;width:min(84%,320px);padding:10px 12px;font-size:12px}
  .match-screen .poker-centerpiece{width:min(52%,220px);padding:10px 10px 12px;border-radius:18px}
  .match-screen .poker-centerpiece__title{font-size:14px}
  .match-screen .poker-centerpiece__sub,.match-screen .poker-centerpiece__meta{font-size:10px}
  .match-screen .poker-centerpiece__footer span{font-size: 10px;min-height:22px;padding:0 8px}
  .match-screen .trick-progress{gap:8px;margin-top:10px}
  .match-screen .trick-progress__dot{width:10px;height:10px}
  .match-screen .table-cards-zone{width:min(76%,260px);gap:6px;padding-top:84px}
  .match-screen .table-card-slot .card-shell,.match-screen .table-card-slot .card-back,.match-screen .table-card-slot .card-placeholder{width:58px}
  .match-screen .table-card-slot.waiting .card-placeholder{min-height:90px}
  .match-screen .table-card-seat{font-size: 10px;min-height:20px;padding:0 7px}
  .match-screen .poker-seat{gap:5px}
  .match-screen .poker-seat-badge{min-width:84px;max-width:104px;padding:7px 8px;border-radius:14px}
  .match-screen .poker-seat-name{font-size:11px}
  .match-screen .poker-seat-title,.match-screen .poker-seat-detail,.match-screen .poker-seat-meta{display:none}
  .match-screen .poker-seat-pips{margin-top:4px;gap:4px}
  .match-screen .poker-seat-pips span{width:6px;height:6px}
  .match-screen .poker-seat-stats{margin-top:5px;gap:5px}
  .match-screen .poker-seat-stats span{font-size: 10px;min-height:18px;padding:0 6px}
  .match-screen .poker-seat-card .card-shell,.match-screen .poker-seat-card .card-back,.match-screen .poker-seat-card .card-placeholder{width:52px}
  .match-screen .poker-seat-card .card-placeholder{min-height:78px}
  .match-screen .seat-top{top:12px}
  .match-screen .seat-bottom{bottom:10px}
  .match-screen .seat-left{left:12px}
  .match-screen .seat-right{right:12px}
  .match-screen .seat-top-left{left:22%;top:15%}
  .match-screen .seat-top-right{right:22%;top:15%}
  .match-screen .seat-bottom-left{left:21%;bottom:18%}
  .match-screen .seat-bottom-right{right:21%;bottom:18%}
  .match-screen 
  .match-screen 
  .match-screen .match-self-chip{min-width:0;flex:1}
  .match-screen .match-self-chip strong{font-size:18px}
  .match-screen 
  .match-screen .one-card-preview-strip{gap:8px;padding:10px 0 2px}
  .match-screen .one-card-preview .card-shell,.match-screen .one-card-preview .card-back,.match-screen .one-card-preview .card-placeholder{width:54px}
  .match-screen .hand{gap:8px;padding:6px 2px 10px}
  .match-screen .hand-card .card-shell,.match-screen .hand-card .card-back,.match-screen .hand-card .card-placeholder{width:76px}
  .match-screen 
  .match-screen .topbar .topbar-title{font-size:16px}
  .match-screen .match-compact-header .footer-actions{width:100%}
  .match-screen .match-compact-header .footer-actions .btn{flex:1}
  .match-screen .poker-felt-wrap,.match-screen .poker-felt{min-height:54svh}
  .match-screen .poker-centerpiece{width:min(54%,210px)}
  .match-screen .table-cards-zone{padding-top:78px;width:min(78%,228px)}
  .match-screen .table-card-slot .card-shell,.match-screen .table-card-slot .card-back,.match-screen .table-card-slot .card-placeholder{width:52px}
  .match-screen .poker-seat-badge{min-width:76px;max-width:92px;padding:6px 6px}
  .match-screen .poker-seat-stats span{font-size: 10px;padding:0 5px}
  .match-screen .poker-seat-card .card-shell,.match-screen .poker-seat-card .card-back,.match-screen .poker-seat-card .card-placeholder{width:46px}
  .match-screen .hand-card .card-shell,.match-screen .hand-card .card-back,.match-screen .hand-card .card-placeholder{width:68px}
}


/* fase 2 menu y navegacion */
.topbar--clean .topbar__statusbar{display:none}
.resources--compact{grid-template-columns:repeat(3,minmax(0,1fr));max-width:360px}
.play-screen--clean{gap:16px}
.play-hero-clean{position:relative;overflow:hidden;min-height:220px;padding:0;border-radius:28px;background-size:cover;background-position:center;display:flex;align-items:stretch}
.play-hero-clean__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,20,.2),rgba(5,10,20,.78))}
.play-hero-clean__content{position:relative;z-index:1;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;max-width:620px}
.play-hero-clean__title{margin:0;font-size:34px;line-height:.98;letter-spacing:-.04em}
.play-hero-clean__subtitle{margin:0;color:rgba(245,248,255,.82);line-height:1.45;max-width:520px}
.play-hero-clean__actions{display:flex;gap:10px;flex-wrap:wrap}
.play-mode-grid-clean{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.play-mode-card-clean{cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:10px;min-height:160px;justify-content:flex-end;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));transition:transform .16s ease,border-color .16s ease,background .16s ease}
.play-mode-card-clean:hover{transform:translateY(-2px);border-color:rgba(137,236,255,.28)}
.play-mode-card-clean strong{font-size:26px;line-height:1.02}
.play-mode-card-clean small{color:var(--muted);line-height:1.45}
.play-mode-card-clean__label{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#94e8ff}
.play-mode-card-clean--primary{background:linear-gradient(180deg,rgba(88,198,255,.18),rgba(255,255,255,.03))}
.play-status-strip-clean{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px}
.play-status-pill-clean{border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.play-status-pill-clean span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);font-weight:800}
.play-status-pill-clean strong{font-size:18px;line-height:1.05}
@media (max-width:720px){
  .play-hero-clean{min-height:250px}
  .play-hero-clean__content{padding:18px}
  .play-hero-clean__title{font-size:30px}
  .play-mode-grid-clean{grid-template-columns:1fr}
  .play-mode-card-clean{min-height:132px}
  .play-status-strip-clean{grid-template-columns:1fr 1fr}
  .resources--compact{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Phase 3 HUD rebuild */
.match-screen .match-poker-grid,.screen-match .match-poker-grid,[data-screen="match"] .match-poker-grid{grid-template-columns:minmax(0,1fr) !important;gap:10px !important;}
.match-screen 
.match-screen .match-compact-header,.screen-match .match-compact-header,[data-screen="match"] .match-compact-header{padding:10px 12px !important;align-items:flex-start !important;}
.match-screen .match-compact-header__copy strong,.screen-match .match-compact-header__copy strong,[data-screen="match"] .match-compact-header__copy strong{font-size:18px !important;}
.match-screen .match-compact-header .small,.screen-match .match-compact-header .small,[data-screen="match"] .match-compact-header .small{font-size:11px !important;line-height:1.3 !important;}
.match-screen .poker-felt-wrap,.screen-match .poker-felt-wrap,[data-screen="match"] .poker-felt-wrap{padding:4px !important;}
.match-screen .poker-felt,.screen-match .poker-felt,[data-screen="match"] .poker-felt{min-height:64svh !important;border-radius:24px !important;}
.match-screen .poker-centerpiece,.screen-match .poker-centerpiece,[data-screen="match"] .poker-centerpiece{width:min(54%,220px) !important;padding:10px 10px 12px !important;border-radius:18px !important;}
.match-screen .poker-centerpiece__title,.screen-match .poker-centerpiece__title,[data-screen="match"] .poker-centerpiece__title{font-size:14px !important;line-height:1.16 !important;}
.match-screen .poker-centerpiece__sub,.match-screen .poker-centerpiece__meta,.screen-match .poker-centerpiece__sub,.screen-match .poker-centerpiece__meta,[data-screen="match"] .poker-centerpiece__sub,[data-screen="match"] .poker-centerpiece__meta{font-size:10px !important;}
.match-screen .poker-centerpiece__footer,.screen-match .poker-centerpiece__footer,[data-screen="match"] .poker-centerpiece__footer{display:none !important;}
.match-screen .table-cards-zone,.screen-match .table-cards-zone,[data-screen="match"] .table-cards-zone{width:min(78%,250px) !important;padding-top:92px !important;padding-bottom:10px !important;gap:6px !important;}
.match-screen .table-card-slot .card-shell,.match-screen .table-card-slot .card-back,.screen-match .table-card-slot .card-shell,.screen-match .table-card-slot .card-back,[data-screen="match"] .table-card-slot .card-shell,[data-screen="match"] .table-card-slot .card-back{width:58px !important;}
.match-screen .table-card-seat,.screen-match .table-card-seat,[data-screen="match"] .table-card-seat{font-size: 10px !important;padding:4px 8px !important;}
.match-screen .poker-seat,.screen-match .poker-seat,[data-screen="match"] .poker-seat{gap:4px !important;}
.match-screen .poker-seat-badge,.screen-match .poker-seat-badge,[data-screen="match"] .poker-seat-badge{min-width:78px !important;max-width:92px !important;padding:6px 6px 7px !important;border-radius:14px !important;}
.match-screen .poker-seat-name,.screen-match .poker-seat-name,[data-screen="match"] .poker-seat-name{font-size:10px !important;}
.match-screen .poker-seat-title,.match-screen .poker-seat-detail,.match-screen .poker-seat-meta,.screen-match .poker-seat-title,.screen-match .poker-seat-detail,.screen-match .poker-seat-meta,[data-screen="match"] .poker-seat-title,[data-screen="match"] .poker-seat-detail,[data-screen="match"] .poker-seat-meta{display:none !important;}
.match-screen .poker-seat-stats,.screen-match .poker-seat-stats,[data-screen="match"] .poker-seat-stats{margin-top:4px !important;gap:4px !important;}
.match-screen .poker-seat-stats span,.screen-match .poker-seat-stats span,[data-screen="match"] .poker-seat-stats span{font-size: 10px !important;min-height:17px !important;padding:0 5px !important;}
.match-screen .poker-seat-card .card-shell,.match-screen .poker-seat-card .card-back,.match-screen .poker-seat-card .card-placeholder,.screen-match .poker-seat-card .card-shell,.screen-match .poker-seat-card .card-back,.screen-match .poker-seat-card .card-placeholder,[data-screen="match"] .poker-seat-card .card-shell,[data-screen="match"] .poker-seat-card .card-back,[data-screen="match"] .poker-seat-card .card-placeholder{width:48px !important;}
.match-screen .poker-seat-card .card-placeholder,.screen-match .poker-seat-card .card-placeholder,[data-screen="match"] .poker-seat-card .card-placeholder{min-height:74px !important;}
.match-screen 
.match-screen .match-insight-grid--minimal,.screen-match .match-insight-grid--minimal,[data-screen="match"] .match-insight-grid--minimal{grid-template-columns:1fr !important;gap:8px !important;}
.match-screen .transition-rail,.match-screen .rival-status-strip,.screen-match .transition-rail,.screen-match .rival-status-strip,[data-screen="match"] .transition-rail,[data-screen="match"] .rival-status-strip{margin-top:8px !important;}
.match-screen .one-card-preview-strip,.screen-match .one-card-preview-strip,[data-screen="match"] .one-card-preview-strip{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
.match-screen .hand,.screen-match .hand,[data-screen="match"] .hand{gap:8px !important;padding-bottom:2px !important;}
.match-screen .hand-card .card-shell,.match-screen .hand-card .card-back,.screen-match .hand-card .card-shell,.screen-match .hand-card .card-back,[data-screen="match"] .hand-card .card-shell,[data-screen="match"] .hand-card .card-back{width:78px !important;}
.match-screen .match-quick-rail,.match-screen .trick-spotlight,.match-screen .round-snapshot,.screen-match .match-quick-rail,.screen-match .trick-spotlight,.screen-match .round-snapshot,[data-screen="match"] .match-quick-rail,[data-screen="match"] .trick-spotlight,[data-screen="match"] .round-snapshot{display:none !important;}
.match-screen .play-status-strip-clean,.screen-match .play-status-strip-clean,[data-screen="match"] .play-status-strip-clean{display:none !important;}
@media (max-width:640px){
  .topbar--clean .topbar__title .small{font-size:10px;}
  .play-hero-clean{min-height:210px !important;}
  .play-hero-clean__title{font-size:28px !important;line-height:1.02 !important;}
  .match-screen .match-compact-header .footer-actions,.screen-match .match-compact-header .footer-actions,[data-screen="match"] .match-compact-header .footer-actions{width:auto !important;}
  .match-screen .match-compact-header .footer-actions .btn,.screen-match .match-compact-header .footer-actions .btn,[data-screen="match"] .match-compact-header .footer-actions .btn{padding:0 10px !important;min-height:34px !important;}
  .match-screen .poker-felt,.screen-match .poker-felt,[data-screen="match"] .poker-felt{min-height:60svh !important;}
  .match-screen .table-cards-zone,.screen-match .table-cards-zone,[data-screen="match"] .table-cards-zone{width:min(80%,232px) !important;padding-top:82px !important;}
  .match-screen .poker-centerpiece,.screen-match .poker-centerpiece,[data-screen="match"] .poker-centerpiece{width:min(56%,196px) !important;}
  .match-screen .hand-card .card-shell,.match-screen .hand-card .card-back,.screen-match .hand-card .card-shell,.screen-match .hand-card .card-back,[data-screen="match"] .hand-card .card-shell,[data-screen="match"] .hand-card .card-back{width:72px !important;}
}


/* Phase 4 mobile match polish */
.round-kickoff-card__eyebrow,.round-action-overlay__eyebrow{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.round-action-overlay--prediction{border-color:rgba(137,236,255,.34)}
.round-action-overlay--play{border-color:rgba(255,215,109,.34)}
.round-action-overlay--trick-result{border-color:rgba(123,230,183,.34)}
.match-screen .table-cards-zone{padding-top:196px}
.match-screen .poker-felt{min-height:700px;padding:16px 16px 20px}
.match-screen .poker-centerpiece{top:52%;width:min(52%,340px)}
.match-screen .match-compact-header{padding:12px 14px}
.match-screen .match-compact-header strong{font-size:24px}
.match-screen 
.match-screen 
.match-screen .hand-wrap .hand{gap:12px}
.match-screen .poker-seat-badge{padding:10px 10px 12px;min-width:112px;max-width:124px}
.match-screen .poker-seat-name{font-size:12px}
.match-screen .poker-seat-title,.match-screen .poker-seat-detail,.match-screen .poker-seat-meta{font-size:10px}
.match-screen .poker-seat-card .card-shell,.match-screen .poker-seat-card .card-back,.match-screen .poker-seat-card .card-placeholder{width:68px}
.match-screen .poker-overlay{top:18%;width:min(80%,320px);font-size:12px}
@media (max-width: 760px){
  .match-screen .match-poker-grid{gap:12px}
  .match-screen .table-cards-zone{padding-top:170px}
  .match-screen .poker-felt{min-height:620px;padding:12px 12px 18px;border-radius:28px}
  .match-screen .poker-centerpiece{top:54%;width:min(62%,260px);padding:12px 12px 14px}
  .match-screen .poker-centerpiece__title{font-size:15px}
  .match-screen .poker-centerpiece__sub,.match-screen .poker-centerpiece__meta{font-size:11px}
  .match-screen .seat-top{top:104px}
  .match-screen .seat-top-left{left:14%;top:24%}
  .match-screen .seat-top-right{right:14%;top:24%}
  .match-screen .seat-left{left:10px;top:54%}
  .match-screen .seat-right{right:10px;top:54%}
  .match-screen .seat-bottom-left{left:16%;bottom:26%}
  .match-screen .seat-bottom-right{right:16%;bottom:26%}
  .match-screen .seat-bottom{bottom:12px}
  .match-screen .poker-seat-badge{min-width:92px;max-width:102px;padding:8px 8px 10px}
  .match-screen .poker-seat-pips{gap:4px;margin-top:6px}
  .match-screen .poker-seat-pips span{width:7px;height:7px}
  .match-screen .poker-seat-card .card-shell,.match-screen .poker-seat-card .card-back,.match-screen .poker-seat-card .card-placeholder{width:58px}
  .match-screen 
  .match-screen 
  .match-screen .prediction-panel{padding:14px}
  .match-screen .prediction-grid{gap:8px}
  .match-screen .predict-btn{min-height:70px}
  .match-screen 
}


/* fase 5 final cleanup */
@media (max-width: 980px){
  .online-brief-strip,.queue-readiness-panel,.online-entry-panel,.play-status-strip-clean{display:none !important;}
  .topbar__title .small{display:none !important;}
  .friends-screen .stats .stat,.profile-summary-strip--season0{min-width:0;}
}
.settings-screen .stats .stat span{opacity:.8}


/* v1 nuevo ciclo · home comercial */
.play-screen--commercial{gap:14px;padding-bottom:112px}
.play-screen--commercial .topbar--clean{padding-bottom:2px}
.commercial-home-hero{position:relative;overflow:hidden;min-height:320px;padding:0;border-radius:32px;border:1px solid rgba(255,255,255,.1);box-shadow:0 28px 56px rgba(0,0,0,.28);background-size:cover;background-position:center top}
.commercial-home-hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,20,.14),rgba(4,10,20,.42) 38%,rgba(4,10,20,.86) 100%)}
.commercial-home-hero__content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:26px 22px 22px;min-height:320px}
.commercial-home-hero__eyebrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.commercial-home-hero__tag{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#eef7ff}
.commercial-home-hero__copy{display:flex;flex-direction:column;gap:8px;max-width:28rem}
.commercial-home-hero__copy h2{margin:0;font-size:clamp(34px,6.8vw,54px);line-height:.94;letter-spacing:-.06em;color:#fff;text-shadow:0 10px 24px rgba(0,0,0,.28)}
.commercial-home-hero__copy p{margin:0;color:rgba(244,248,255,.82);font-size:14px;line-height:1.5}
.commercial-home-hero__actions{display:grid;grid-template-columns:1.35fr 1fr;gap:10px}
.commercial-home-hero__maincta{min-height:58px;font-size:18px}
.commercial-home-hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:4px}
.commercial-stat-pill{display:flex;flex-direction:column;gap:5px;padding:14px 14px 13px;border-radius:20px;background:rgba(8,16,28,.55);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.commercial-stat-pill span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(160,227,255,.92)}
.commercial-stat-pill strong{font-size:16px;line-height:1.05;color:#fff}
.commercial-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.commercial-mode-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:168px;padding:20px 18px;border-radius:28px;text-align:left;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:0 18px 36px rgba(0,0,0,.2)}
.commercial-mode-card--main{grid-column:1 / -1;min-height:198px;background:linear-gradient(135deg,rgba(43,116,255,.24),rgba(122,224,255,.14))}
.commercial-mode-card--online{background:linear-gradient(135deg,rgba(255,180,68,.16),rgba(255,255,255,.03))}
.commercial-mode-card__label,.commercial-progress-card__label{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:rgba(157,231,255,.92)}
.commercial-mode-card strong{font-size:28px;line-height:.98;letter-spacing:-.045em;color:#fff}
.commercial-mode-card small{color:rgba(244,248,255,.8);line-height:1.45;max-width:30ch}
.commercial-mode-card__cta,.commercial-progress-card__link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);font-size:12px;font-weight:800;color:#fff;margin-top:auto}
.commercial-mode-card__status{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-top:auto}
.commercial-mode-card__status.is-live{background:rgba(62,216,120,.12);border:1px solid rgba(62,216,120,.26);color:#bdf6d0}
.commercial-mode-card__status.is-off{background:rgba(255,193,79,.1);border:1px solid rgba(255,193,79,.2);color:#ffe3a4}
.commercial-progress-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.commercial-progress-card{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:18px;border-radius:26px;text-align:left;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));box-shadow:0 14px 28px rgba(0,0,0,.16)}
.commercial-progress-card__copy{display:flex;flex-direction:column;gap:8px;max-width:28ch}
.commercial-progress-card strong{font-size:24px;line-height:1;letter-spacing:-.04em;color:#fff}
.commercial-progress-card small{color:rgba(244,248,255,.78);line-height:1.45}
.bottom-shell{background:rgba(8,14,24,.94);border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.nav-btn{min-height:68px}
.nav-btn small{font-size:11px;font-weight:800}
@media (max-width: 760px){
  .play-screen--commercial{gap:12px}
  .commercial-home-hero{min-height:300px;border-radius:28px}
  .commercial-home-hero__content{padding:20px 18px 18px;min-height:300px}
  .commercial-home-hero__actions{grid-template-columns:1fr;gap:8px}
  .commercial-home-hero__stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .commercial-stat-pill{padding:12px 10px;border-radius:18px}
  .commercial-stat-pill strong{font-size:14px}
  .commercial-mode-grid,.commercial-progress-strip{grid-template-columns:1fr}
  .commercial-mode-card--main{min-height:176px}
  .commercial-mode-card{min-height:146px;padding:18px 16px;border-radius:24px}
  .commercial-mode-card strong,.commercial-progress-card strong{font-size:24px}
  .commercial-progress-card{padding:16px;border-radius:22px;align-items:flex-start;flex-direction:column}
}


/* v2 nuevo ciclo · jugar */
.play-screen--v2{display:grid;gap:14px}
.play-v2-hero{position:relative;overflow:hidden;padding:0;min-height:280px;background-size:cover;background-position:center;border-radius:28px}
.play-v2-hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,16,30,.22),rgba(8,16,30,.88))}
.play-v2-hero__content{position:relative;z-index:1;padding:22px;display:flex;flex-direction:column;gap:14px;min-height:280px;justify-content:flex-end}
.play-v2-hero__top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.play-v2-hero__headline{display:grid;gap:8px;max-width:640px}
.play-v2-hero__headline h2{margin:0;font-size:34px;line-height:1.05}
.play-v2-hero__headline p{margin:0;color:var(--muted);font-size:14px;line-height:1.45;max-width:520px}
.play-v2-hero__cta{width:100%;min-height:60px;font-size:20px;border-radius:20px;box-shadow:0 18px 40px rgba(6,12,24,.34)}
.play-v2-hero__footer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.play-v2-chip{padding:12px 14px;border-radius:18px;background:rgba(8,16,30,.5);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px)}
.play-v2-chip span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2)}
.play-v2-chip strong{display:block;margin-top:4px;font-size:16px}
.play-v2-mode-stack{display:grid;gap:12px}
.play-v2-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.play-v2-mode{position:relative;overflow:hidden;padding:0;border-radius:26px;min-height:172px;text-align:left;color:var(--text);cursor:pointer}
.play-v2-mode--cpu{min-height:196px}
.play-v2-mode__bg{position:absolute;inset:0;background-size:cover;background-position:center}
.play-v2-mode__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,14,28,.18),rgba(7,14,28,.9))}
.play-v2-mode__content{position:relative;z-index:1;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:inherit}
.play-v2-mode__eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#d8e7ff;font-weight:800}
.play-v2-mode strong{font-size:28px;line-height:1.05}
.play-v2-mode p{margin:0;color:rgba(236,244,255,.86);line-height:1.42;font-size:13px;max-width:420px}
.play-v2-mode__meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:4px}
.play-v2-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);font-size:12px;font-weight:800;color:#f6fbff}
.play-v2-badge.is-live{background:rgba(60,202,124,.18);border-color:rgba(92,232,154,.24);color:#e7fff0}
.play-v2-badge.is-off{background:rgba(255,199,90,.16);border-color:rgba(255,214,138,.24);color:#fff4d6}
.play-v2-link{font-size:13px;font-weight:800;color:#f6fbff}
.play-v2-quick-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.play-v2-quick-card{display:flex;flex-direction:column;gap:6px;text-align:left;border-radius:22px;padding:18px}
.play-v2-quick-card__label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2)}
.play-v2-quick-card strong{font-size:22px;line-height:1.08}
.play-v2-quick-card small{color:var(--muted);line-height:1.38}
@media (max-width:760px){
  .play-v2-hero{min-height:250px}
  .play-v2-hero__content{padding:18px;min-height:250px}
  .play-v2-hero__headline h2{font-size:28px}
  .play-v2-hero__footer,.play-v2-mode-grid,.play-v2-quick-row{grid-template-columns:1fr}
  .play-v2-chip strong{font-size:15px}
  .play-v2-mode{min-height:168px}
  .play-v2-mode--cpu{min-height:188px}
  .play-v2-mode strong{font-size:24px}
}


/* v3 nuevo ciclo · partida comercial */
.match-screen{gap:12px;padding-bottom:112px}
.match-screen .topbar--clean{display:none !important}
.match-screen .match-compact-header{position:relative;overflow:hidden;padding:16px 16px 14px;border-radius:26px;background:linear-gradient(135deg,rgba(48,124,255,.18),rgba(122,224,255,.10) 55%,rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 34px rgba(0,0,0,.22)}
.match-screen .match-compact-header::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(255,255,255,.12),transparent 35%);pointer-events:none}
.match-screen .match-compact-header__copy{position:relative;z-index:1;display:grid;gap:5px}
.match-screen .match-compact-header .badge{background:rgba(8,16,30,.42);border:1px solid rgba(255,255,255,.12);color:#eef7ff;font-weight:900;letter-spacing:.08em}
.match-screen .match-compact-header strong{font-size:28px;line-height:.96;letter-spacing:-.045em}
.match-screen .match-compact-header .small{font-size:12px;color:rgba(238,245,255,.82)}
.match-screen .match-header-actions{position:relative;z-index:1}
.match-screen .match-header-actions .btn{min-height:40px;border-radius:16px}
.match-screen .match-poker-grid{display:grid;gap:12px}
.match-screen 
.match-screen .table-head{display:none}
.match-screen .poker-felt-wrap{border-radius:28px;overflow:hidden}
.match-screen .poker-felt{min-height:74svh;padding:16px 14px 18px;border-radius:28px;background:radial-gradient(circle at 50% 50%, rgba(44,132,96,.24), transparent 34%), radial-gradient(circle at 20% 0%, rgba(90,183,255,.16), transparent 24%), linear-gradient(180deg,#0c1727 0%,#10273d 48%,#0c1727 100%)}
.match-screen .poker-lane-glow{background:radial-gradient(circle at center,rgba(77,241,184,.18),transparent 38%)}
.match-screen .round-kickoff-card{left:14px;top:14px;padding:10px 12px;border-radius:18px;background:linear-gradient(180deg,rgba(8,18,31,.88),rgba(8,18,31,.64));border:1px solid rgba(255,255,255,.12)}
.match-screen .round-action-overlay{top:74px;width:min(84%,320px);padding:12px 14px;border-radius:22px;background:linear-gradient(180deg,rgba(8,18,31,.92),rgba(8,18,31,.74));box-shadow:0 16px 34px rgba(0,0,0,.28)}
.match-screen .round-action-overlay strong{font-size:18px;line-height:1}
.match-screen .round-action-overlay small{font-size:12px;color:rgba(255,255,255,.8)}
.match-screen .poker-centerpiece{top:54%;width:min(66%,280px);padding:16px 16px 18px;border-radius:24px;background:linear-gradient(180deg,rgba(8,18,31,.92),rgba(8,18,31,.76));border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.match-screen .poker-centerpiece__badge{font-size:10px;letter-spacing:.14em}
.match-screen .poker-centerpiece__title{font-size:18px;line-height:1.05;font-weight:900}
.match-screen .poker-centerpiece__sub,.match-screen .poker-centerpiece__meta{font-size:12px;color:rgba(255,255,255,.8)}
.match-screen .poker-centerpiece__footer{font-size:11px;color:rgba(255,255,255,.74)}
.match-screen .table-cards-zone{width:min(90%,292px);padding-top:184px;gap:10px}
.match-screen .table-card-slot{padding:6px 6px 8px;border-radius:18px;background:rgba(8,16,28,.48);border:1px solid rgba(255,255,255,.08)}
.match-screen .table-card-seat{font-size:10px;font-weight:800;letter-spacing:.06em}
.match-screen .table-card-slot .card-shell,.match-screen .table-card-slot .card-back,.match-screen .table-card-slot .card-placeholder{width:78px}
.match-screen .poker-seat-badge{min-width:102px;max-width:110px;padding:8px 8px 10px;border-radius:18px;background:linear-gradient(180deg,rgba(8,18,31,.88),rgba(8,18,31,.68));border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 26px rgba(0,0,0,.2)}
.match-screen .poker-seat-name{font-size:12px;font-weight:900}
.match-screen .poker-seat-meta,.match-screen .poker-seat-detail,.match-screen .poker-seat-title{font-size:10px;line-height:1.2}
.match-screen .poker-seat-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:6px}
.match-screen .poker-seat-stats span{justify-content:center;font-size:10px;padding:4px 0;border-radius:999px;background:rgba(255,255,255,.06)}
.match-screen .poker-seat-card .card-shell,.match-screen .poker-seat-card .card-back,.match-screen .poker-seat-card .card-placeholder{width:58px;border-radius:14px}
.match-screen .seat-top{top:108px}.match-screen .seat-left{left:10px;top:53%}.match-screen .seat-right{right:10px;top:53%}.match-screen .seat-bottom{bottom:10px}.match-screen .seat-top-left{left:15%;top:24%}.match-screen .seat-top-right{right:15%;top:24%}
.match-screen 
.match-screen 
.match-screen .match-screen 
.match-screen .match-self-chip{padding:10px 12px;border-radius:18px;background:rgba(8,16,28,.44)}
.match-screen .match-self-chip span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(160,227,255,.86)}
.match-screen .match-self-chip strong{font-size:20px}
.match-screen 
.match-screen .match-screen 
.match-screen 
.match-screen .match-hand-row strong{font-size:18px;letter-spacing:-.03em}
.match-screen .prediction-panel{padding:16px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.match-screen .prediction-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.match-screen .predict-btn{min-height:76px;border-radius:18px}
.match-screen 
.match-screen .hand{gap:10px;padding:4px 2px 2px}
.match-screen .hand-card .card-shell,.match-screen .hand-card .card-back{width:84px;border-radius:18px;box-shadow:0 14px 26px rgba(0,0,0,.28)}
.match-screen .hand-card.selected{transform:translateY(-10px) scale(1.02)}
.match-screen .one-card-preview-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.match-screen .one-card-preview{padding:10px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
@media (max-width:760px){
  .match-screen{padding-bottom:108px}
  .match-screen .match-compact-header{padding:14px 14px 12px;border-radius:22px}
  .match-screen .match-compact-header strong{font-size:24px}
  .match-screen .poker-felt{min-height:66svh;padding:12px 10px 16px;border-radius:24px}
  .match-screen .round-kickoff-card{left:10px;top:10px;padding:8px 10px}
  .match-screen .round-action-overlay{top:62px;width:min(88%,296px);padding:10px 12px}
  .match-screen .round-action-overlay strong{font-size:16px}
  .match-screen .round-action-overlay small{font-size:11px}
  .match-screen .poker-centerpiece{top:55%;width:min(68%,236px);padding:12px 12px 14px;border-radius:22px}
  .match-screen .poker-centerpiece__title{font-size:16px}.match-screen .poker-centerpiece__sub,.match-screen .poker-centerpiece__meta{font-size:11px}
  .match-screen .table-cards-zone{width:min(88%,250px);padding-top:162px;gap:8px}
  .match-screen .table-card-slot .card-shell,.match-screen .table-card-slot .card-back,.match-screen .table-card-slot .card-placeholder{width:68px}
  .match-screen .poker-seat-badge{min-width:86px;max-width:94px;padding:7px 7px 8px;border-radius:16px}
  .match-screen .poker-seat-name{font-size:11px}.match-screen .poker-seat-meta,.match-screen .poker-seat-detail,.match-screen .poker-seat-title{font-size: 10px}
  .match-screen .poker-seat-card .card-shell,.match-screen .poker-seat-card .card-back,.match-screen .poker-seat-card .card-placeholder{width:50px}
  .match-screen .seat-left{left:4px;top:56%}.match-screen .seat-right{right:4px;top:56%}.match-screen .seat-top{top:96px}.match-screen .seat-top-left{left:14%;top:26%}.match-screen .seat-top-right{right:14%;top:26%}.match-screen .seat-bottom{bottom:8px}
  .match-screen 
  .match-screen 
  .match-screen 
  .match-screen .match-self-chip{padding:8px 10px;border-radius:16px}.match-screen .match-self-chip strong{font-size:18px}
  .match-screen .prediction-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .match-screen .predict-btn{min-height:68px}
  .match-screen .hand-card .card-shell,.match-screen .hand-card .card-back{width:74px}
}


/* v4 nuevo ciclo: topbar y navegación premium comercial */
body.ui-v4-nav, .ui-v4-nav{
  --v4-glow: rgba(108, 219, 255, .28);
  --v4-gold: rgba(255, 211, 104, .28);
}
body.ui-v4-nav .topbar--clean{
  position:sticky;
  top:calc(8px + var(--safe-top));
  z-index:24;
  padding:12px 14px;
  border-radius:26px;
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.08), transparent 26%),
    linear-gradient(180deg, rgba(14,26,45,.96), rgba(8,14,25,.94));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
body.ui-v4-nav .topbar--clean .topbar__main{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}
body.ui-v4-nav .topbar--clean .topbar__title strong{
  font-size:19px;
  line-height:1.08;
  letter-spacing:.01em;
}
body.ui-v4-nav .topbar--clean .topbar__title .small{
  margin-top:4px;
  color:rgba(234,242,255,.72);
  font-size:11px;
}
body.ui-v4-nav .topbar--clean .icon-btn--image{
  width:48px;
  height:48px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
body.ui-v4-nav .topbar--clean .icon-btn--image img{
  width:22px;
  height:22px;
  object-fit:contain;
}
body.ui-v4-nav .resources--compact{
  gap:8px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  min-width:min(330px, 100%);
}
body.ui-v4-nav .resources--compact .resource{
  min-height:44px;
  padding:0 12px;
  border-radius:16px;
  justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.08);
  color:#f4f8ff;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
body.ui-v4-nav .resources--compact .resource:nth-child(1){box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,211,104,.04)}
body.ui-v4-nav .resources--compact .resource:nth-child(2){box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(108,219,255,.04)}
body.ui-v4-nav .resource-icon{width:18px;height:18px}
body.ui-v4-nav .bottom-nav{
  padding:0 12px calc(12px + var(--safe-bottom));
}
body.ui-v4-nav .bottom-shell{
  gap:8px;
  padding:9px;
  border-radius:28px;
  background:
    radial-gradient(circle at 50% -10%, rgba(137,236,255,.16), transparent 32%),
    linear-gradient(180deg, rgba(12,22,38,.96), rgba(7,12,22,.94));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 46px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}
body.ui-v4-nav .nav-btn{
  min-height:74px;
  gap:6px;
  border-radius:20px;
  color:rgba(226,236,248,.66);
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
body.ui-v4-nav .nav-btn .nav-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.ui-v4-nav .nav-icon__img{width:20px;height:20px}
body.ui-v4-nav .nav-icon__emoji{font-size:18px;line-height:1}
body.ui-v4-nav .nav-btn small{
  font-size:11px;
  font-weight:900;
  letter-spacing:.01em;
}
body.ui-v4-nav .nav-btn.active,
body.ui-v4-nav .nav-btn[aria-current="page"]{
  color:#f6fbff;
  background:linear-gradient(180deg, rgba(124,225,255,.18), rgba(80,120,255,.10));
  border:1px solid rgba(124,225,255,.28);
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(38,98,255,.12), inset 0 1px 0 rgba(255,255,255,.10);
}
body.ui-v4-nav .nav-btn.active .nav-icon,
body.ui-v4-nav .nav-btn[aria-current="page"] .nav-icon{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.10);
}
body.ui-v4-nav .nav-btn:active{transform:translateY(1px)}
body.ui-v4-nav .screen-home .topbar--clean,
body.ui-v4-nav .screen-play .topbar--clean,
body.ui-v4-nav .screen-online .topbar--clean,
body.ui-v4-nav .screen-profile .topbar--clean{
  margin-bottom:14px;
}
@media (max-width:640px){
  body.ui-v4-nav .topbar--clean{
    padding:11px 12px;
    border-radius:22px;
  }
  body.ui-v4-nav .topbar--clean .topbar__main{
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
  }
  body.ui-v4-nav .resources--compact{
    grid-column:1 / -1;
    min-width:0;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  body.ui-v4-nav .resources--compact .resource{
    min-height:40px;
    padding:0 8px;
    font-size:12px;
  }
  body.ui-v4-nav .bottom-nav{padding-left:10px;padding-right:10px}
  body.ui-v4-nav .bottom-shell{gap:6px;padding:7px;border-radius:24px}
  body.ui-v4-nav .nav-btn{min-height:68px;border-radius:18px}
  body.ui-v4-nav .nav-btn .nav-icon{width:31px;height:31px;border-radius:11px}
  body.ui-v4-nav .nav-btn small{font-size:10px}
}


/* v5 nuevo ciclo — tienda e inventario unificados */
.store-shop-grid,
.inventory-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0}
.shop-action-card,
.inventory-summary-card{position:relative;overflow:hidden;border-radius:28px;padding:20px;background:linear-gradient(180deg,rgba(14,26,46,.96),rgba(8,16,30,.96));border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 42px rgba(0,0,0,.22)}
.shop-action-card::after,
.inventory-summary-card::after{content:"";position:absolute;inset:10px;border-radius:20px;border:1px solid rgba(255,255,255,.04);pointer-events:none}
.shop-action-card__top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.shop-action-card h3,
.inventory-summary-card h3{margin:0 0 8px;font-size:24px;letter-spacing:-.04em}
.shop-action-card p,
.inventory-summary-card p{margin:0;color:rgba(245,248,255,.76);line-height:1.46}
.shop-action-card__meta{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}
.shop-action-card__meta span{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:11px;font-weight:800;color:#fff}
.shop-action-card .btn{margin-top:auto;width:100%}
.shop-action-card--classic{background:linear-gradient(180deg,rgba(17,32,56,.98),rgba(9,18,34,.96))}
.shop-action-card--elite{background:linear-gradient(180deg,rgba(36,27,62,.98),rgba(12,18,34,.96))}
.shop-action-card--pass{background:linear-gradient(180deg,rgba(40,30,14,.98),rgba(12,18,34,.96))}
.legal-note-panel--compact{display:flex;justify-content:space-between;align-items:center;gap:16px}
.store-offers-panel .collection-grid--store{gap:14px}
.inventory-summary-card__value{display:inline-flex;align-items:center;justify-content:center;min-width:104px;min-height:46px;margin-top:16px;padding:0 16px;border-radius:999px;background:rgba(137,236,255,.10);border:1px solid rgba(137,236,255,.18);font-size:18px;font-weight:900;color:#fff}
.inventory-panel--gallery{padding-top:18px}
.store-screen .section-head .small,
.inventory-screen .section-head .small{color:rgba(245,248,255,.62)}
@media (max-width: 980px){
  .store-shop-grid,.inventory-overview-grid{grid-template-columns:1fr}
  .legal-note-panel--compact{flex-direction:column;align-items:stretch}
  .legal-note-panel--compact .footer-actions{width:100%}
  .legal-note-panel--compact .btn{width:100%}
}


/* v2.10.0 season0 launch polish */
.play-hub-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:12px;
}
.play-hub-pill{
  min-height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  color:#fff;
  font-weight:800;
  letter-spacing:.01em;
}
.play-summary-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.play-summary-chip{
  min-height:82px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));
  display:grid;
  align-content:start;
  gap:6px;
}
.play-summary-chip span{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.play-summary-chip strong{
  font-size:14px;
  line-height:1.2;
}
.play-v2-quick-row--four{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width: 760px){
  .play-hub-strip,
  .play-summary-strip{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width: 520px){
  .play-hub-strip,
  .play-summary-strip,
  .play-v2-quick-row--four{
    grid-template-columns:1fr;
  }
}


/* v211 orden y comprensión */
.screen-hub-panel{padding:10px 12px}.screen-hub{display:flex;gap:8px;flex-wrap:wrap}.screen-hub__btn{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#fff;font-weight:800}.screen-hub__btn.active{background:rgba(255,215,109,.12);border-color:rgba(255,215,109,.34);color:#ffe39d}.clarity-strip{display:grid;gap:10px}.clarity-strip strong{font-size:14px}.clarity-strip__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.clarity-chip{min-height:54px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:12px;font-weight:800;color:rgba(255,255,255,.92)}.friends-screen .grid.two.compact-grid,.battle-screen .grid.two.compact-grid{align-items:start}@media (max-width:760px){.clarity-strip__grid{grid-template-columns:1fr}.screen-hub{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}.screen-hub::-webkit-scrollbar{display:none}}

/* v2.13 cleanup and compact screens */
.screen-hub-panel{position:sticky;top:calc(var(--safe-top) + 8px);z-index:8;backdrop-filter:blur(10px)}
.legal-accordion-panel{display:grid;gap:10px}
.legal-details{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.04);overflow:hidden}
.legal-details summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:800;color:#fff}
.legal-details summary::-webkit-details-marker{display:none}
.legal-details__body{padding:0 16px 14px;color:var(--muted)}
@media (max-width:980px){
  .screen-hub-panel{top:calc(var(--safe-top) + 4px)}
  .store-screen .store-offers-panel,.store-screen .hero-microstats .hero-chip:nth-child(4){display:none}
  .inventory-screen .profile-summary-strip,.profile-screen .profile-summary-strip{padding:10px}
  .inventory-screen .inventory-loadout-panel,.profile-screen .panel{scroll-margin-top:78px}
}

/* v2.13 compact season 0 */
.screen-hub-panel{position:sticky;top:calc(var(--safe-top) + 8px);z-index:8;backdrop-filter:blur(10px)}
.legal-accordion-panel{display:grid;gap:10px}
.legal-details{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.04);overflow:hidden}
.legal-details summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:800;color:#fff}
.legal-details summary::-webkit-details-marker{display:none}
.legal-details__body{padding:0 16px 14px;color:var(--muted)}
.concise-panel-grid--profile,.inventory-overview-grid,.online-lane-grid,.online-brief-strip,.online-entry-panel,.queue-readiness-panel{display:none !important}
@media (max-width:980px){
  .screen-hub-panel{top:calc(var(--safe-top) + 4px)}
  .store-screen .store-offers-panel{display:none}
}


/* v2.18.1 MERGED NAV + VISUAL */
.topbar__actions{display:flex;align-items:center;gap:10px}
.icon-btn--text{min-height:34px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-size:12px;font-weight:900;color:#fff}
.screen-hub-panel{position:sticky;top:10px;z-index:30;background:rgba(7,17,29,.92);backdrop-filter:blur(10px)}
.screen-hub__head,.clarity-strip__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.screen-hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.screen-hub__btn{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:64px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:#fff;font-weight:900;text-align:left}
.screen-hub__btn small{font-size:11px;font-weight:700;color:rgba(255,255,255,.68)}
.screen-hub__btn.active{background:linear-gradient(180deg, rgba(255,215,109,.16), rgba(137,236,255,.12));border-color:rgba(255,215,109,.28);box-shadow:0 0 0 1px rgba(137,236,255,.08)}
.clarity-strip__grid{display:grid;grid-template-columns:1fr;gap:8px}
.clarity-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.clarity-chip__step{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;background:rgba(255,215,109,.14);border:1px solid rgba(255,215,109,.28);font-size:11px;font-weight:900;color:var(--gold)}
.bottom-nav{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
.bottom-shell{box-shadow:0 -10px 28px rgba(0,0,0,.28)}
.nav-btn{min-height:64px}
.nav-btn small{font-size:11px;font-weight:900}
.bottom-nav__hint{text-align:center;margin-top:8px;font-size:11px;color:rgba(255,255,255,.64)}
:root{
  --panel-radius:22px;
  --card-radius:20px;
  --soft-border:1px solid rgba(255,255,255,.10);
  --soft-bg:linear-gradient(180deg, rgba(10,22,37,.92), rgba(7,17,29,.88));
  --soft-shadow:0 16px 34px rgba(0,0,0,.26);
}
.panel,.menu-card,.asset-block,.notice,.list-item,.pack-card,.collectible-card,.play-v2-mode,.play-v2-quick-card,
.btn,.ghost-btn,.predict-btn,.mode-btn{min-height:48px;padding:0 16px}
.topbar{background:linear-gradient(180deg, rgba(10,22,37,.96), rgba(7,17,29,.92))!important}
.topbar__title strong,.section-title,.panel h3,.collectible-card__title h3,.play-v2-mode strong{letter-spacing:.01em}
.small,.subtitle,.panel p{line-height:1.45}
.resources--compact .resource{border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.play-v2-mode__shade{background:linear-gradient(180deg, rgba(5,12,22,.08), rgba(5,12,22,.84))!important}
.play-v2-mode__content,.play-v2-quick-card,.collectible-card,.pack-card__content{padding:16px!important}
.collectible-card__title,.section-head,.row.between{align-items:center}
.pill,.badge,.phase-pill,.play-v2-badge,.resource{font-weight:900;letter-spacing:.04em}
.bottom-shell{background:linear-gradient(180deg, rgba(10,22,37,.96), rgba(7,17,29,.94))!important;padding:10px}
.nav-btn{border-radius:18px}
.nav-btn.active{background:linear-gradient(180deg, rgba(255,215,109,.18), rgba(137,236,255,.12));border:1px solid rgba(255,215,109,.24)}
.list{gap:10px}
.list-item{padding:14px 16px}
input.input,textarea.input,select.input{border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);min-height:48px}
.hero-online-banner__content,.hero-online-banner__art img,.play-v2-mode__bg,.pack-card__art img,.last-pack-hero__art img{border-radius:18px}
.notice strong,.section-head h3,strong{font-weight:900}
@media (min-width:760px){.screen-hub{grid-template-columns:repeat(4,minmax(0,1fr))}.clarity-strip__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){
  .panel,.menu-card,.asset-block,.notice,.list-item,.pack-card,.collectible-card,.play-v2-mode,.play-v2-quick-card,
}

/* ═══════════════════════════════════════════════════════════════
   5 VIDAS · PREMIUM UI OVERRIDES — Season 0
   Append al final de styles.css
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS (override :root) ── */
:root {
  --ink:      #060e1a;
  --ink2:     #0a1628;
  --srf:      #111e35;
  --srf2:     #172845;
  --srf3:     #1e3258;
  --border:   rgba(255,255,255,.10);
  --border2:  rgba(255,255,255,.18);
  --txt:      #eef4ff;
  --txt2:     rgba(238,244,255,.70);
  --txt3:     rgba(238,244,255,.42);
  --gold:     #ffd060;
  --gold2:    #ffb820;
  --cyan:     #c9a84c;
  --cyan2:    #3ecaff;
  --red:      #ff566a;
  --green:    #5ee8a4;
  --purple:   #c09aff;
  --r-common:   #8da4c8;
  --r-rare:     #4db8ff;
  --r-srare:    #5ee8a4;
  --r-epic:     #c09aff;
  --r-legend:   #ffd060;
  /* keep legacy vars pointing to new values */
  --bg:     var(--ink);
  --bg2:    var(--ink2);
  --panel:  var(--srf);
  --panel2: var(--srf2);
  --line:   var(--border);
  --text:   var(--txt);
  --muted:  var(--txt2);
  --muted2: var(--txt3);
  --accent: var(--cyan);
}

/* ── GLOBAL BASE ── */
body {
  background: var(--ink) var(--cave-bg) center/cover no-repeat fixed;
  color: var(--txt);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(4,8,18,.72);
  z-index: 0;
  pointer-events: none;
}
#app { position: relative; z-index: 1; }
#app { padding-top: 0 !important; }
.screen { gap: 0 !important; background: transparent; }

/* ── TOPBAR ── */
.topbar--clean {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center;
  min-height: 56px; padding: 0 14px;
  background: rgba(6,14,26,.96);
  backdrop-filter: blur(24px);
  border: none; border-bottom: 1px solid var(--border);
  border-radius: 0 !important; box-shadow: none !important;
}
.topbar--clean .topbar__main {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 8px;
}
.topbar--clean .topbar__title strong {
  font-size: 17px; font-weight: 900; letter-spacing: -.02em; color: var(--txt);
}
.topbar--clean .topbar__title .small {
  font-size: 10px; color: var(--txt3); margin-top: 1px;
  font-weight: 700; letter-spacing: .04em;
}
.topbar--clean .resources--compact {
  display: flex; gap: 6px;
}
.topbar--clean .resource {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 9px; border-radius: 999px;
  background: var(--srf); border: 1px solid var(--border);
  font-size: 12px; font-weight: 800; color: var(--txt);
}
.topbar--clean .resource:last-child { display: none; } /* hide trophies in topbar */
.topbar--clean .icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--srf); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.topbar--clean .icon-btn--image img { width: 20px; height: 20px; object-fit: contain; }
.topbar--clean .icon-btn--text {
  width: auto; border-radius: 20px; padding: 0 12px;
  font-size: 12px; font-weight: 800; color: var(--cyan);
  background: rgba(201,168,76,.08); border-color: rgba(201,168,76,.2);
}
.topbar__leading { gap: 8px !important; }

/* ── BOTTOM NAV (premium) ── */
.bottom-nav { background: rgba(4,8,18,.65) !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
.bottom-shell {
  display: grid !important; grid-template-columns: repeat(5,1fr) !important;
  gap: 0 !important; padding: 0 !important;
  background: transparent !important; border-radius: 0 !important; border: none !important; box-shadow: none !important;
  height: 66px;
}
.nav-btn {
  flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 6px 4px;
  color: var(--txt3) !important; font-size: 10px; font-weight: 700;
  background: transparent !important; border: none !important; border-radius: 0 !important;
  position: relative;
}
.nav-btn.active { color: var(--cyan) !important; }
.nav-btn.active::before {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 2px;
  border-radius: 0 0 2px 2px; background: var(--cyan);
}
.nav-icon__img { width: 24px; height: 24px; object-fit: contain; opacity: .45; transition: opacity .15s; }
.nav-btn.active .nav-icon__img { opacity: 1; filter: drop-shadow(0 0 6px rgba(201,168,76,.5)); }
.nav-btn small { font-size: 10px !important; }
.bottom-nav__hint { display: none !important; }

/* ── HIDE OLD NAVIGATION STRIPS ── */
.screen-hub-panel, .clarity-strip, .compact-reward-strip--season0 { display: none !important; }

/* ── PANEL (base) ── */
.panel {
  background: var(--srf) !important; border: 1px solid var(--border) !important;
  border-radius: 18px !important; padding: 0 !important;
  box-shadow: none !important;
  margin: 8px 12px;
}
.panel .panel { margin: 0 !important; }
.panel .panel .panel { margin: 0 !important; }
.panel.hero { padding: 0 !important; border-radius: 18px !important; }

/* ── HERO CARD (generic) ── */
.pv-hero {
  position: relative; border-radius: 18px; overflow: hidden;
  min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end;
  margin: 8px 12px; border: 1px solid var(--border);
}
.pv-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pv-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(6,14,26,.05) 0%,rgba(6,14,26,.88) 100%); }
.pv-hero__body { position: relative; padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.pv-hero h2 { font-size: 26px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; color: var(--txt); margin: 0; }
.pv-hero p { font-size: 13px; color: var(--txt2); line-height: 1.5; margin: 0; }

/* ── TAGS / PILLS ── */
.pv-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
}
.pv-tag--gold   { background: rgba(255,208,96,.15);  border: 1px solid rgba(255,208,96,.3);  color: var(--gold);   }
.pv-tag--cyan   { background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.25);color: var(--cyan);   }
.pv-tag--green  { background: rgba(94,232,164,.12);  border: 1px solid rgba(94,232,164,.25); color: var(--green);  }
.pv-tag--red    { background: rgba(255,86,106,.12);  border: 1px solid rgba(255,86,106,.25); color: var(--red);    }
.pv-tag--purple { background: rgba(192,154,255,.12); border: 1px solid rgba(192,154,255,.25);color: var(--purple); }
.pv-tag--dim    { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);color: var(--txt2);   }
.pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--border); font-size: 11px; font-weight: 800; }
.pill.ready { background: rgba(94,232,164,.12); border-color: rgba(94,232,164,.3); color: var(--green); }

/* ── BUTTONS (premium) ── */
.btn {
  border-radius: 14px !important; font-weight: 900 !important;
  transition: transform .12s, filter .12s; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.96); filter: brightness(.9); }
.btn:not(.secondary):not(.ghost):not(.danger) {
  background: linear-gradient(160deg,#ffe566,#c9a84c) !important;
  color: #04121f !important; box-shadow: 0 10px 24px rgba(60,200,255,.25) !important;
}
.btn.secondary { background: var(--srf2) !important; border: 1px solid var(--border2) !important; color: var(--txt2) !important; box-shadow: none !important; }
.btn.ghost { background: transparent !important; border: 1px solid var(--border) !important; color: var(--txt3) !important; }
.btn.danger { background: linear-gradient(160deg,#ff8090,#ff3850) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(255,56,80,.22) !important; }
.btn--hero { padding: 16px 24px !important; font-size: 17px !important; border-radius: 16px !important; width: 100%; }
.btn--gold { background: linear-gradient(160deg,#ffe88a,#ffc830) !important; color: #1a0e00 !important; box-shadow: 0 10px 24px rgba(255,200,48,.25) !important; }
.primary-btn { background: linear-gradient(160deg,#ffe566,#c9a84c) !important; color: #04121f !important; border-radius: 14px !important; font-weight: 900 !important; padding: 12px 18px !important; }
.ghost-btn { background: transparent !important; border: 1px solid var(--border) !important; color: var(--txt3) !important; border-radius: 12px !important; padding: 10px 16px !important; }

/* ── PROGRESS BAR ── */
.progress, .battle-progress {
  height: 8px !important; border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important; overflow: hidden;
}
.progress > span, .battle-progress > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan2), var(--cyan)) !important;
  transition: width .5s ease;
}

/* ── STATS ── */
.stat {
  padding: 10px 12px !important; border-radius: 12px !important;
  background: var(--srf2) !important; border: 1px solid var(--border) !important;
}
.stat span { font-size: 10px !important; color: var(--txt3) !important; letter-spacing: .08em !important; font-weight: 700 !important; }
.stat strong { font-size: 18px !important; color: var(--txt) !important; margin-top: 3px !important; }

/* ── NOTICE ── */
.notice {
  background: rgba(255,208,96,.06) !important; border: 1px solid rgba(255,208,96,.2) !important;
  border-radius: 12px !important; padding: 13px !important;
  font-size: 13px !important; line-height: 1.55; color: var(--txt2) !important;
}
.notice strong { color: var(--gold) !important; }

/* ── INPUT ── */
.input {
  background: var(--srf2) !important; border: 1px solid var(--border) !important;
  border-radius: 12px !important; color: var(--txt) !important;
  font-size: 15px !important; font-weight: 700 !important; padding: 12px 14px !important;
}
.input:focus { border-color: rgba(201,168,76,.5) !important; }

/* ── LIST ITEMS ── */
.list-item {
  padding: 12px 16px !important; border-bottom: 1px solid var(--border) !important;
  display: flex; align-items: center; gap: 12px;
}
.list-item:last-child { border-bottom: none !important; }

/* ══════════════════════════════════════════════════════════════
   PLAY SCREEN (Hub)
══════════════════════════════════════════════════════════════ */
.play-screen { background: var(--ink) !important; }
.play-v2-hero {
  position: relative; min-height: 260px; border-radius: 18px;
  overflow: hidden; margin: 8px 12px; border: 1px solid var(--border);
  background-size: cover !important; background-position: center !important;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 !important;
}
.play-v2-hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,rgba(6,14,26,.05) 0%,rgba(6,14,26,.90) 100%) !important;
}
.play-v2-hero__content { position: relative; padding: 22px 18px 22px; display: flex; flex-direction: column; gap: 11px; }
.play-v2-hero__top { display: flex; gap: 7px; flex-wrap: wrap; }
.play-v2-hero__headline h2 { font-size: 26px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; margin: 0; }
.play-v2-hero__headline p { font-size: 13px; color: var(--txt2); line-height: 1.5; margin: 4px 0 0; }
.play-v2-hero__cta { padding: 15px 20px !important; font-size: 17px !important; }
.play-v2-hero__footer { display: flex; gap: 8px; flex-wrap: wrap; }
.play-v2-chip {
  display: flex; flex-direction: column; padding: 7px 11px;
  border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid var(--border);
}
.play-v2-chip span { font-size: 10px; color: var(--txt3); font-weight: 700; margin-bottom: 2px; }
.play-v2-chip strong { font-size: 13px; color: var(--txt); }

/* Play hub strip → replaced by mode grid below, hide old */
.play-hub-strip { display: none !important; }
.play-summary-strip { display: none !important; }

/* Mode stack */
.play-v2-mode-stack { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.play-v2-mode {
  position: relative; min-height: 160px; border-radius: 16px;
  overflow: hidden; border: 1px solid var(--border);
  background: var(--srf); padding: 0 !important; cursor: pointer;
}
.play-v2-mode--cpu { min-height: 200px; }
.play-v2-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.play-v2-mode__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.play-v2-mode__shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(6,14,26,.05),rgba(6,14,26,.82)); }
.play-v2-mode__content { position: relative; padding: 14px 16px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 5px; }
.play-v2-mode__eyebrow { font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.play-v2-mode__content strong { font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--txt); }
.play-v2-mode__content p { font-size: 12px; color: var(--txt2); line-height: 1.4; margin: 0; }
.play-v2-mode__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; }
.play-v2-badge {
  font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: var(--txt2);
}
.play-v2-badge.is-live { background: rgba(94,232,164,.15); border-color: rgba(94,232,164,.3); color: var(--green); }
.play-v2-badge.is-off  { background: rgba(255,86,106,.1);  border-color: rgba(255,86,106,.2);  color: var(--red);   }
.play-v2-link { font-size: 12px; font-weight: 900; color: var(--cyan); }

/* Quick row */
.play-v2-quick-row {
  display: grid; gap: 8px; margin: 0 12px 8px;
}
.play-v2-quick-row--four { grid-template-columns: 1fr 1fr; }
.play-v2-quick-card {
  padding: 13px !important; background: var(--srf) !important;
  border: 1px solid var(--border) !important; border-radius: 14px !important;
  cursor: pointer; text-align: left;
}
.play-v2-quick-card__label {
  font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan); display: block; margin-bottom: 4px;
}
.play-v2-quick-card strong { display: block; font-size: 15px; font-weight: 900; color: var(--txt); }
.play-v2-quick-card small { display: block; font-size: 11px; color: var(--txt3); margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════
   ONLINE SCREEN
══════════════════════════════════════════════════════════════ */
.online-screen, .online-screen .screen { background: var(--ink) !important; }
.hero-online-banner {
  position: relative; min-height: 200px; border-radius: 18px;
  overflow: hidden; margin: 8px 12px; padding: 0 !important; border: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-online-banner__art { position: absolute; inset: 0; }
.hero-online-banner__art img { width: 100%; height: 100%; object-fit: cover; }
.hero-online-banner__art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,rgba(6,14,26,.05),rgba(6,14,26,.88));
}
.hero-online-banner__content { position: relative; padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.hero-online-banner__content h2 { font-size: 24px; font-weight: 900; letter-spacing: -.03em; margin: 0; }
.hero-online-banner__content p { font-size: 13px; color: var(--txt2); margin: 0; }
.hero-microstats { display: flex; gap: 6px; flex-wrap: wrap; }
.hero-chip {
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: var(--txt2);
}

/* Stats */
.stats { display: grid !important; gap: 8px !important; }

/* Online matchmaking */
.online-queue-panel { padding: 18px !important; }
.online-queue-state { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 16px; text-align: center; }
.online-queue-ring {
  width: 80px; height: 80px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.1); border-top-color: var(--cyan);
  animation: pvSpin 1s linear infinite;
}
@keyframes pvSpin { to { transform: rotate(360deg); } }
.online-queue-timer { font-size: 34px; font-weight: 900; color: var(--cyan); font-variant-numeric: tabular-nums; }

/* Leaderboard */
.leaderboard-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.leaderboard-row:last-child { border-bottom: none; }
.lb-rank { width: 22px; font-size: 14px; font-weight: 900; color: var(--txt3); text-align: center; flex-shrink: 0; }
.lb-rank--1 { color: var(--gold); }
.lb-rank--2 { color: var(--cyan); }
.lb-rank--3 { color: var(--green); }

/* League list */
.league-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
}
.league-list-row:last-child { border-bottom: none; }
.league-list-row .badge-img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.league-list-row .lname { font-size: 14px; font-weight: 800; flex: 1; }
.league-list-row .lrange { font-size: 12px; color: var(--txt3); }

/* ══════════════════════════════════════════════════════════════
   FRIENDS SCREEN
══════════════════════════════════════════════════════════════ */
.friends-screen { background: var(--ink) !important; }
.hero-lobby-scene .hero-online-banner__art img { filter: brightness(.9); }
.mode-picker { display: flex !important; gap: 6px !important; flex-wrap: wrap; }
.mode-btn {
  min-height: auto !important; padding: 8px 14px !important;
  border-radius: 999px !important; font-size: 13px !important; font-weight: 800 !important;
  background: rgba(255,255,255,.05) !important; border: 1px solid var(--border) !important;
  color: var(--txt3) !important; cursor: pointer;
}
.mode-btn.active {
  background: rgba(201,168,76,.12) !important; border-color: rgba(201,168,76,.4) !important;
  color: var(--cyan) !important;
}
.section-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; }
.section-title { font-size: 20px !important; font-weight: 900 !important; letter-spacing: -.025em !important; margin: 0 !important; }
.subtitle { font-size: 13px !important; color: var(--txt2) !important; line-height: 1.5 !important; margin: 0 !important; }

/* ══════════════════════════════════════════════════════════════
   STORE SCREEN
══════════════════════════════════════════════════════════════ */
.store-screen { background: var(--ink) !important; }
.store-hero { min-height: 190px !important; }
.store-shop-grid { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 4px; }
.shop-action-card {
  background: var(--srf) !important; border: 1px solid var(--border) !important;
  border-radius: 18px !important; overflow: hidden; padding: 0 !important; display: flex; flex-direction: column;
}
.shop-action-card__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 0;
}
.shop-action-card h3 { font-size: 18px; font-weight: 900; letter-spacing: -.02em; padding: 8px 16px 0; margin: 0; }
.shop-action-card p { font-size: 13px; color: var(--txt2); padding: 6px 16px 0; margin: 0; line-height: 1.5; }
.shop-action-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 16px; font-size: 11px; color: var(--txt3); font-weight: 700;
}
.shop-action-card .btn { margin: 0 16px 16px; }

/* Pack cards */
.packs-stage { margin-top: 8px; }
.card-grid--packs { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
.pack-card-item {
  display: flex; border-radius: 16px; overflow: hidden;
  background: var(--srf2); border: 1px solid var(--border);
  align-items: stretch;
}
.pack-card-item__art {
  width: 90px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg,var(--ink2),var(--srf));
  padding: 10px;
}
.pack-card-item__art svg { filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
.pack-card-item__info { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.pack-card-item__info strong { font-size: 15px; font-weight: 900; }
.pack-card-item__info .pack-desc { font-size: 11px; color: var(--txt3); }
.pack-odds-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.pack-odds-chip {
  font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--txt3);
}
.pack-odds-chip.common  { color: var(--r-common); }
.pack-odds-chip.rare    { color: var(--r-rare);   }
.pack-odds-chip.srare   { color: var(--r-srare);  }
.pack-odds-chip.epic    { color: var(--r-epic);   }
.pack-odds-chip.legend  { color: var(--r-legend); }
.pack-card-item__cta { padding: 12px; display: flex; align-items: center; flex-shrink: 0; }
.pack-buy-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 14px; border-radius: 12px; cursor: pointer; border: none;
  background: linear-gradient(160deg,#ffe566,#c9a84c); color: #04121f;
  font-size: 13px; font-weight: 900; white-space: nowrap;
  box-shadow: 0 6px 14px rgba(60,200,255,.22);
  transition: transform .12s;
}
.pack-buy-btn:active { transform: scale(.95); }
.pack-buy-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.pack-buy-btn--gold { background: linear-gradient(160deg,#ffe88a,#ffc830); color: #1a0e00; box-shadow: 0 6px 14px rgba(255,200,48,.22); }
.pack-buy-btn img { width: 15px; height: 15px; object-fit: contain; }

/* Last pack result */
.pack-reveal-result {
  margin: 0 12px 8px; padding: 14px; border-radius: 14px;
  background: var(--srf2); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.pack-reveal-result__icon {
  width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--border);
}
.pack-reveal-result__icon img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.legal-note-panel { margin: 4px 12px 8px !important; }

/* ══════════════════════════════════════════════════════════════
   BATTLE PASS SCREEN
══════════════════════════════════════════════════════════════ */
.battle-screen { background: var(--ink) !important; }
.battle-hero {
  position: relative; min-height: 240px; border-radius: 18px; overflow: hidden;
  margin: 8px 12px; padding: 0 !important; border: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: flex-end;
  background-size: cover !important; background-position: center !important;
}
.battle-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(6,14,26,.05),rgba(6,14,26,.90)); }
.battle-hero__content { position: relative; padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.battle-hero__content .section-title { color: var(--txt) !important; }

/* Battle track */
.battle-track {
  display: flex !important; overflow-x: auto !important;
  gap: 0 !important; padding: 12px !important;
  grid-template-columns: none !important;
  scrollbar-width: none;
}
.battle-track::-webkit-scrollbar { display: none; }
.battle-track-card {
  flex-shrink: 0; width: 76px; display: flex; flex-direction: column;
  align-items: center; gap: 5px; padding: 10px 4px; position: relative; text-align: center;
  border: none !important; background: none !important; border-radius: 0 !important; margin: 0 !important;
}
.battle-track-card::after {
  content: ''; position: absolute; top: 24px; left: 50%; right: -50%;
  height: 2px; background: var(--border); z-index: 0;
}
.battle-track-card:last-child::after { display: none; }
.battle-track-card__level { font-size: 10px; font-weight: 800; color: var(--txt3); z-index: 1; }
.battle-track-card__gem {
  position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 12px;
  background: var(--srf2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.battle-track-card strong {
  font-size: 10px !important; font-weight: 700 !important; color: var(--txt3) !important;
  text-align: center; line-height: 1.3; display: block;
}
.battle-track-card .small { font-size: 10px !important; text-align: center; }
.battle-track-card.unlocked .battle-track-card__gem { background: rgba(94,232,164,.08); border-color: rgba(94,232,164,.3); }
.battle-track-card.locked .battle-track-card__gem { opacity: .45; }
.battle-track-card--premium .battle-track-card__gem { background: rgba(192,154,255,.08); border-color: rgba(192,154,255,.3); }
.battle-track-card--exclusive .battle-track-card__gem {
  background: rgba(255,208,96,.08); border-color: rgba(255,208,96,.4);
  box-shadow: 0 0 12px rgba(255,208,96,.16);
}

/* Missions */
.mission-stack { display: flex; flex-direction: column; gap: 0; padding: 0 16px 16px; }
.mission-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.mission-item:last-child { border-bottom: none; }
.mission-item strong { font-size: 14px; font-weight: 800; color: var(--txt); }
.mission-item .small { font-size: 11px; color: var(--txt3); margin-top: 3px; }
.mission-item.done strong { color: var(--green); }
.mission-item.done::before { content: '✓ '; color: var(--green); }

/* ══════════════════════════════════════════════════════════════
   PROFILE SCREEN
══════════════════════════════════════════════════════════════ */
.profile-screen { background: var(--ink) !important; }
.profile-hero--season0 {
  border-radius: 0 !important; margin: 0 !important;
  background: none !important; border: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 16px 20px !important;
}
.pv-profile-head {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 24px 20px 18px; text-align: center;
}
.pv-avatar-wrap { position: relative; width: 88px; height: 88px; }
.pv-avatar {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--srf2); background: var(--srf2);
}
.pv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pv-profile-name { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.pv-profile-title { font-size: 13px; color: var(--gold); font-weight: 700; }
.pv-profile-league { display: flex; align-items: center; gap: 8px; }
.pv-profile-league img { width: 28px; height: 28px; object-fit: contain; }

/* Profile summary strip */
.profile-summary-strip--season0 {
  display: flex !important; gap: 0 !important; border-radius: 0 !important;
  margin: 0 !important; border: none !important; border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important; padding: 0 !important; background: var(--srf) !important;
}
.profile-summary-chip {
  flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 8px;
  border-right: 1px solid var(--border);
}
.profile-summary-chip:last-child { border-right: none; }
.profile-summary-chip strong { font-size: 20px; font-weight: 900; }
.profile-summary-chip span { font-size: 10px; color: var(--txt3); font-weight: 700; margin-top: 2px; text-transform: uppercase; letter-spacing: .06em; }

/* Loadout */
.inventory-loadout-panel--premium { padding: 16px !important; }
.loadout-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.loadout-slot {
  aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  background: var(--srf2); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 6px; cursor: pointer;
}
.loadout-slot .loadout-icon__art { width: 100%; height: 70%; object-fit: contain; }
.loadout-slot .loadout-label { font-size: 10px; color: var(--txt3); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

/* ══════════════════════════════════════════════════════════════
   INVENTORY SCREEN
══════════════════════════════════════════════════════════════ */
.inventory-screen { background: var(--ink) !important; }
.collection-hero--premium { min-height: 180px !important; }
.inventory-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px; }
.inventory-summary-card {
  padding: 14px !important; display: flex; flex-direction: column; gap: 6px;
}
.inventory-summary-card h3 { font-size: 14px; margin: 0; }
.inventory-summary-card p { font-size: 11px; color: var(--txt3); margin: 0; line-height: 1.4; }
.inventory-summary-card__value { font-size: 20px; font-weight: 900; color: var(--cyan); margin-top: 4px; }

/* Collection toolbar */
.collection-toolbar { padding: 0 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.segmented-control { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.segmented-control::-webkit-scrollbar { display: none; }
.segmented-control__btn {
  flex-shrink: 0; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255,255,255,.04);
  font-size: 12px; font-weight: 800; color: var(--txt3); cursor: pointer;
  white-space: nowrap;
}
.segmented-control__btn.active {
  background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.3); color: var(--cyan);
}

/* Collection grid — small tile variant (only when inside gallery grid) */
.collection-grid--gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.collection-grid--gallery .collectible-card {
  position: relative; border-radius: 12px; overflow: hidden;
  background: var(--srf2); border: 1px solid var(--border);
  aspect-ratio: 1; cursor: pointer; transition: transform .12s;
}
.collection-grid--gallery .collectible-card:active { transform: scale(.93); }
.collection-grid--gallery .collectible-icon--art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.collection-grid--gallery .collectible-art { width: 80%; height: 80%; object-fit: contain; }
/* ensure all cosmetic images have transparent backgrounds */
.collectible-art { background: transparent; }
.collectible-art--contain { object-fit: contain; background: transparent; }
.collectible-icon--art img, .loadout-icon--art img { background: transparent !important; }
.collectible-card .rarity-dot {
  position: absolute; bottom: 5px; left: 5px; width: 7px; height: 7px; border-radius: 50%;
}
.rarity-common   .rarity-dot { background: var(--r-common);  box-shadow: 0 0 5px var(--r-common);  }
.rarity-rare     .rarity-dot { background: var(--r-rare);    box-shadow: 0 0 5px var(--r-rare);    }
.rarity-superRare.rarity-dot { background: var(--r-srare);   box-shadow: 0 0 5px var(--r-srare);   }
.rarity-epic     .rarity-dot { background: var(--r-epic);    box-shadow: 0 0 5px var(--r-epic);    }
.rarity-legendary.rarity-dot { background: var(--r-legend);  box-shadow: 0 0 5px var(--r-legend);  }
.collectible-card.locked { opacity: .5; }
.collectible-card .owned-mark {
  position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--green); color: #000; font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.collectible-card.rarity-rare     { border-color: rgba(77,184,255,.3);  }
.collectible-card.rarity-superRare{ border-color: rgba(94,232,164,.3);  }
.collectible-card.rarity-epic     { border-color: rgba(192,154,255,.3); }
.collectible-card.rarity-legendary{ border-color: rgba(255,208,96,.35); }


/* ══════════════════════════════════════════════════════════════
   SETTINGS SCREEN
══════════════════════════════════════════════════════════════ */
.settings-screen { background: var(--ink) !important; }
.settings-section { margin: 0 12px 8px; }
.settings-section__title { font-size: 11px; font-weight: 800; color: var(--txt3); text-transform: uppercase; letter-spacing: .1em; padding: 14px 4px 6px; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--srf); cursor: pointer;
}
.settings-row:first-of-type { border-radius: 14px 14px 0 0; }
.settings-row:last-of-type  { border-radius: 0 0 14px 14px; border-bottom: none; }
.settings-row--single { border-radius: 14px !important; border-bottom: none !important; margin-bottom: 8px; }
.settings-row__info .ti { font-size: 14px; font-weight: 800; color: var(--txt); }
.settings-row__info .ts { font-size: 11px; color: var(--txt3); margin-top: 2px; }
.settings-row__chevron { font-size: 14px; color: var(--txt3); }
/* Switch */
.switch-track {
  /* Sin display el span sigue siendo inline y no coge tamaño: sólo se veía el
     círculo blanco flotando, sin la barra, y no se distinguía on de off. */
  display: block;
  width: 46px; height: 26px; border-radius: 999px;
  background: rgba(255,255,255,.14); position: relative; cursor: pointer; transition: .25s; flex-shrink: 0;
}
.switch-track::before {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .25s;
}
.switch-track.on { background: linear-gradient(135deg, #c9a84c, #ffd060); }
.switch-track.on::before { transform: translateX(20px); }
input[type="checkbox"] + .switch-track { display: none; }

/* ══════════════════════════════════════════════════════════════
   RESULT SCREEN
══════════════════════════════════════════════════════════════ */
.result-screen { background: var(--ink) !important; }
.result-hero-card {
  position: relative; min-height: 220px; border-radius: 18px;
  overflow: hidden; padding: 0 !important; margin: 8px 12px;
  border: 1px solid var(--border) !important; display: flex; flex-direction: column; justify-content: flex-end;
}

.result-victory-panel 
.result-defeat-panel 
.result-top1-panel 
.result-hero-card .section-title { color: var(--txt) !important; }
.result-stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 6px;
  padding: 16px; margin: 0;
}
.result-stat-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 6px; border-radius: 10px;
  background: rgba(255,255,255,.07); border: 1px solid var(--border); text-align: center;
}
.result-stat-card span { font-size: 10px; color: var(--txt3); font-weight: 700; text-transform: uppercase; }
.result-stat-card strong { font-size: 16px; font-weight: 900; color: var(--txt); }








.result-exit-tile {
  padding: 12px 10px; border-radius: 12px; background: var(--srf2); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
}
.result-exit-tile span { font-size: 10px; color: var(--txt3); font-weight: 700; text-transform: uppercase; }
.result-exit-tile strong { font-size: 13px; font-weight: 900; line-height: 1.2; }
.result-exit-tile small  { font-size: 10px; color: var(--txt3); line-height: 1.3; }













/* ══════════════════════════════════════════════════════════════
   MATCH SCREEN
══════════════════════════════════════════════════════════════ */
.match-screen { background: var(--ink) !important; }
.match-compact-header--launch {
  border-radius: 0 !important; margin: 0 !important; border: none !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important; align-items: center; justify-content: space-between;
  padding: 10px 14px !important;
}
.match-compact-header__copy { display: flex; flex-direction: column; gap: 3px; }
.match-compact-header__copy strong { font-size: 15px; font-weight: 900; }
.match-compact-header__copy .small { font-size: 11px; }
.match-header-actions { flex-wrap: nowrap !important; gap: 6px !important; }

.poker-centerpiece__badge {
  font-size: 10px; font-weight: 900; letter-spacing: .14em;
  padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: var(--txt2);
}
.poker-centerpiece__title  { font-size: 14px; font-weight: 900; color: var(--txt); }
.poker-centerpiece__sub    { font-size: 10px; color: var(--txt3); }
.poker-centerpiece__meta   { font-size: 10px; color: var(--cyan); font-weight: 800; }
.poker-centerpiece__footer { display: flex; gap: 8px; font-size: 10px; color: var(--txt3); font-weight: 700; }
.table-cards-zone { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.table-card-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.table-card-seat {
  font-size: 10px; font-weight: 800; color: var(--txt3); padding: 2px 6px;
  border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--border);
}
.table-card-seat.winner { color: var(--gold); background: rgba(255,208,96,.1); border-color: rgba(255,208,96,.3); }
.table-card-slot.winner .table-card-seat { color: var(--gold); }
.seat-top         { top: 10px;  left: 50%; transform: translateX(-50%); }
.seat-top-left    { top: 10px;  left: 10%; }
.seat-top-right   { top: 10px;  right: 10%; }
.seat-left        { top: 50%;   left: 4px; transform: translateY(-50%); }
.seat-right       { top: 50%;   right: 4px; transform: translateY(-50%); }
.seat-bottom      { bottom: 80px; left: 50%; transform: translateX(-50%); }
.poker-seat-badge {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 8px; border-radius: 10px;
  background: rgba(6,14,26,.82); border: 1px solid var(--border); min-width: 72px;
}
.poker-seat-badge.active  { border-color: rgba(201,168,76,.5); }
.poker-seat-badge.winner  { border-color: rgba(255,208,96,.4); }
.poker-seat-badge.self    { border-color: rgba(201,168,76,.3); }
.poker-seat-badge__top { display: flex; align-items: center; gap: 5px; }
.poker-seat-name   { font-size: 11px; font-weight: 800; color: var(--txt); }
.poker-seat-title  { font-size: 10px; color: var(--txt3); }
.poker-seat-meta   { font-size: 10px; font-weight: 800; color: var(--txt3); text-transform: uppercase; letter-spacing: .06em; }
.poker-seat-detail { font-size: 10px; color: var(--txt3); }
.poker-seat-stats  { display: flex; gap: 6px; font-size: 10px; font-weight: 800; color: var(--cyan); }
.poker-seat-status { width: 7px; height: 7px; border-radius: 50%; background: var(--txt3); }
.poker-seat-status--active  { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.poker-seat-status--winner  { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.poker-seat-status--offline { background: var(--red); }
.poker-seat-pips { display: flex; gap: 3px; }
.poker-seat-pips span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.15); }
.poker-seat-pips span.live { background: var(--cyan); }
.poker-seat-pips span.gold { background: var(--gold); }

/* Hand panel */


.match-self-hud__eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--txt3); }









/* Phase tones */




/* One-card round */
.one-card-preview-strip { display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }

/* Objective */







/* Hand */
.hand--scrollable {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px 12px; scrollbar-width: none;
}
.hand--scrollable::-webkit-scrollbar { display: none; }
.hand-card {
  flex-shrink: 0; width: 68px; aspect-ratio: 280/440; border-radius: 10px;
  overflow: hidden; border: 1px solid var(--border); box-shadow: 0 8px 20px rgba(0,0,0,.4);
  cursor: pointer; transition: transform .12s;
}
.hand-card img { width: 100%; height: 100%; object-fit: cover; }
.hand-card.playable:hover  { transform: translateY(-10px); }
.hand-card.selected { transform: translateY(-12px); border-color: #c9a84c !important; box-shadow: 0 12px 24px rgba(201,168,76,.25) !important; }
.hand-card.locked { opacity: .65; cursor: default; }
.card-shell { position: relative; width: 100%; height: 100%; }
.card-img { width: 100%; height: 100%; object-fit: cover; }
.card-back {
  width: 100%; height: 100%; background: linear-gradient(180deg,#17375d,#11233c);
  background-size: cover !important; background-position: center !important;
  border: 1px solid rgba(255,255,255,.12);
}
.card-back__mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%); font-size: 20px; font-weight: 900; color: rgba(137,236,255,.4); }
.card-back__text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,30%); font-size: 10px; font-weight: 900; letter-spacing: .12em; color: rgba(137,236,255,.35); }
.card-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--txt3); background: rgba(255,255,255,.04);
  border-radius: 8px; border: 1px dashed rgba(255,255,255,.15);
}

/* Prediction panel */
.prediction-grid--selectable { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.predict-btn.active { background: rgba(201,168,76,.15); border-color: rgba(201,168,76,.5); }
.predict-btn.forbidden { opacity: .35; cursor: not-allowed; background: rgba(255,86,106,.05); border-color: rgba(255,86,106,.2); }













/* Match misc */
.round-action-overlay__eyebrow {
  font-size: 10px; font-weight: 900; letter-spacing: .14em;
  padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--border);
  color: var(--txt3); display: inline-block; margin-bottom: 4px;
}
.round-action-overlay--warn  .round-action-overlay__eyebrow { background: rgba(255,208,96,.1); border-color: rgba(255,208,96,.25); color: var(--gold); }
.round-action-overlay--ok    .round-action-overlay__eyebrow { background: rgba(94,232,164,.1); border-color: rgba(94,232,164,.25); color: var(--green); }
.round-action-overlay--danger.round-action-overlay__eyebrow { background: rgba(255,86,106,.1);  border-color: rgba(255,86,106,.25);  color: var(--red); }
.trick-progress { display: flex; gap: 4px; justify-content: center; margin-top: 4px; }
.trick-progress__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.15); }
.trick-progress__dot.done { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.interaction-rail { display: none; } /* handled by match-action-banner */
.round-snapshot { display: none; }

/* ══════════════════════════════════════════════════════════════
   PACK REVEAL OVERLAY
══════════════════════════════════════════════════════════════ */
.pack-reveal-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 30px; text-align: center;
  background: radial-gradient(ellipse 90% 90% at 50% 50%, rgba(30,20,60,.95), rgba(6,14,26,.98));
  animation: pvRevIn .35s ease;
}
@keyframes pvRevIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:none} }
.pack-reveal-overlay__label {
  font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--txt3);
}
.pack-reveal-item {
  width: 160px; height: 160px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border); background: var(--srf2);
  animation: pvItemPop .4s cubic-bezier(.34,1.56,.64,1) .1s both;
}
@keyframes pvItemPop { from{transform:scale(.4);opacity:0} to{transform:none;opacity:1} }
.pack-reveal-item img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.pack-reveal-item .collectible-icon { width: 100%; height: 100%; }
.pack-reveal-item .collectible-art  { width: 100%; height: 100%; object-fit: contain; padding: 14px; }

/* ══════════════════════════════════════════════════════════════
   COMPACT GRIDS
══════════════════════════════════════════════════════════════ */
.compact-grid { gap: 8px !important; }
.grid.two { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.grid.two .panel { margin: 0 !important; }
.row.between { flex-wrap: nowrap !important; }
.footer-actions { gap: 8px !important; }

/* ══════════════════════════════════════════════════════════════
   MISC
══════════════════════════════════════════════════════════════ */
.screen-static-ui .screen { padding-bottom: 80px; }
.screen-static { padding-bottom: 84px; }
.badge { background: rgba(255,255,255,.07) !important; border: 1px solid var(--border) !important; }
.badge.gold   { color: var(--gold)   !important; }
.badge.cyan   { color: var(--cyan)   !important; }
.badge.ok     { color: var(--green)  !important; }
.badge.purple { color: var(--purple) !important; }

/* ═══════════════════════════════════════════════════════════
   MATCH SCREEN v2 — mobile-first
═══════════════════════════════════════════════════════════ */
@keyframes pvSpin { to { transform: rotate(360deg); } }

.screen.match-screen {
  height: 100svh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important;
  gap: 0 !important;
}
.match-screen .topbar--clean { display: none !important; }

/* Hand cards in match */
.match-screen .hand-card img,
.match-screen .hand-card .card-shell,
.match-screen .hand-card .card-img { width: 100%; height: 100%; object-fit: cover; }
.match-screen .hand-card .card-back--art {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
}
.match-screen [data-card-index]:active { transform: translateY(-8px) scale(.96) !important; }

/* Table card rendering */
.match-screen .card-shell { width: 100%; height: 100%; }
.match-screen .card-img { width: 100%; height: 100%; object-fit: cover; }

/* predict-btn touch feedback */
.match-screen .predict-btn:not([disabled]):active {
  transform: scale(.92) translateY(-2px) !important;
}

/* Scrollbar hide on rivals and hand */
.match-screen [style*="overflow-x: auto"]::-webkit-scrollbar,
.match-screen [style*="overflow-x:auto"]::-webkit-scrollbar { display: none; }

/* Play screen hero button */
#startCpuBtn:active, #startCpuBtnAlt:active {
  transform: scale(.97);
  filter: brightness(.92);
}

/* Mode card hover/active */
[data-nav]:active, #startCpuBtnAlt:active { filter: brightness(.85); }

/* ═══ v5 FIXES ═══════════════════════════════════════════════ */

/* Full-bleed play hero — remove app top padding */
.play-screen { margin-top: calc(-1 * (14px + var(--safe-top, 0px))) !important; }
@media (max-width: 640px) {
  .play-screen { margin-top: calc(-1 * (10px + var(--safe-top, 0px))) !important; }
}

/* Battle track — force horizontal scroll */
.battle-track {
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Section gap consistency */
.screen > * + * { /* handled by panel margin */ }

/* Collectible card hover in inventory gallery */
[data-equip]:hover { opacity: 1 !important; filter: brightness(1.08); }
[data-equip]:active { transform: scale(.94); }

/* Result hero card padding override */
.result-hero-card.hero { padding: 20px 18px !important; }

/* .notice in result panels */
.result-hero-card .notice {
  margin-top: 12px;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* play screen mode grid */
.play-screen [style*="grid-template-columns: 1fr 1fr"] button:active {
  filter: brightness(.82);
  transform: scale(.97);
}

/* Match screen — ensure full height even with #app padding */
body.screen-match #app {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 100svh !important;
  overflow: hidden !important;
}
.match-screen {
  height: 100svh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
}

/* Profile summary strip alignment */
.profile-summary-strip--season0 { border-radius: 0 !important; }

/* Settings switch track pointer */
.switch-track { cursor: pointer; }

/* Battle track card gem div sizing */
.battle-track-card__gem {
  width: 44px !important;
  height: 44px !important;
  font-size: 18px !important;
}

/* Result exit grid — more visible */
.result-exit-tile {
  background: var(--srf2) !important;
  transition: background .15s;
}
.result-exit-tile:active { background: var(--srf3, #1e3258) !important; }

/* Inventory gallery equip tap feedback */
.inventory-screen [data-equip]:active {
  transform: scale(.9);
  transition: transform .1s;
}

/* Pack buy button tap */
.pack-buy-btn:active {
  transform: scale(.93) !important;
}

/* Bottom nav active indicator */
.nav-btn.active .nav-icon__img { 
  filter: brightness(0) saturate(100%) invert(87%) sepia(100%) saturate(300%) hue-rotate(150deg) brightness(104%) !important;
  opacity: 1 !important;
}

/* Global scrollbar hide for mobile */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

/* ═══ v6 CSS ═══════════════════════════════════════════════ */

/* Battle track card — override original gap/layout */
.battle-track-card {
  flex-shrink: 0 !important;
  width: 72px !important;
  min-width: 72px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 4px 10px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--srf2) !important;
  text-align: center !important;
  position: relative !important;
  transition: border-color .2s, background .2s !important;
}
.battle-track-card + .battle-track-card {
  margin-left: 6px;
}

/* Pack buy button full-width fallback */
.pack-buy-btn {
  min-width: 72px;
  white-space: nowrap;
}

/* Loadout card layout fix */
.loadout-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  background: var(--srf2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  min-width: 0 !important;
}

/* Match screen — prevent pull-to-refresh and body scroll */
body.screen-match {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  touch-action: none !important;
}
.match-screen [style*="overflow-x: auto"],
.match-screen [style*="overflow-x:auto"] {
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch !important;
}
.match-screen .hand-card {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
}
.match-screen .predict-btn {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
}

/* Pack reveal animation — ensure packShake exists */
@keyframes packShake {
  0%   { transform: translateY(0) rotate(0deg); }
  20%  { transform: translateY(-8px) rotate(-3deg); }
  40%  { transform: translateY(-4px) rotate(2deg); }
  60%  { transform: translateY(-6px) rotate(-2deg); }
  80%  { transform: translateY(-2px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes burstPulse {
  from { opacity: .6; transform: scale(.9); }
  to   { opacity: 0; transform: scale(1.3); }
}

/* Online screen queue animation */
.online-screen .hero-online-banner h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Result hero card improved padding for emoji */
.result-hero-card {
  padding: 22px 18px 20px !important;
}

/* Settings row last item no border */
.settings-section > div:last-child {
  border-bottom: none !important;
  border-radius: 0 0 14px 14px !important;
}
.settings-section > div:first-child {
  border-radius: 14px 14px 0 0 !important;
}

/* Inventory stats strip */
.inventory-screen .panel:first-of-type > div {
  min-height: 72px;
}

/* Bottom nav — ensure always above content */
.bottom-nav {
  z-index: 100 !important;
}

/* Legal accordion padding */
.legal-accordion-panel details {
  border-bottom: 1px solid var(--border);
}
.legal-accordion-panel details:last-child {
  border-bottom: none;
}
.legal-accordion-panel summary {
  padding: 14px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.legal-accordion-panel summary::-webkit-details-marker { display: none; }
.legal-accordion-panel summary::after {
  content: '+';
  font-size: 20px;
  color: var(--txt3);
  font-weight: 300;
}
.legal-accordion-panel details[open] summary::after { content: '−'; }
.legal-details__body { padding: 0 16px 14px; }
.legal-details__body p {
  font-size: 13px;
  color: var(--txt2);
  line-height: 1.55;
  margin: 8px 0 0;
}

/* Chip row category buttons — mobile optimized */
.chip-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 16px 12px;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--txt3);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.chip-btn.active {
  background: rgba(201,168,76,.12);
  border-color: rgba(201,168,76,.3);
  color: var(--cyan);
}

/* Toolbar inputs */
.toolbar-row {
  display: flex;
  gap: 8px;
  padding: 0 16px 8px;
  flex-wrap: wrap;
}
.toolbar-row .input {
  flex: 1;
  min-width: 0;
  font-size: 13px !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
}
.search-input {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  min-width: 140px;
}
.search-input__icon {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  opacity: .4;
}
.search-input__field {
  padding-left: 32px !important;
}

/* ═══ v7 CSS ═══════════════════════════════════════════════ */

/* Result screen — clean 3-panel layout */
.result-screen .panel.hero.result-hero-card {
  border-radius: 0 !important;
  margin: 0 !important;
}
.result-screen .screen > .panel:not(:first-child) {
  border-radius: 18px !important;
  margin: 8px 12px !important;
}

/* Result exit tile */
.result-exit-tile {
  padding: 10px 8px !important;
  border-radius: 10px !important;
  background: var(--srf2) !important;
  border: 1px solid var(--border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  text-align: center !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
.result-exit-tile span { font-size: 10px !important; color: var(--txt3) !important; font-weight: 700 !important; text-transform: uppercase; }
.result-exit-tile strong { font-size: 12px !important; font-weight: 900 !important; color: var(--txt) !important; }
.result-exit-tile:active { background: var(--srf3, #1e3258) !important; }

/* Battle track claim tap feedback */
[data-claim-bp-level]:active {
  transform: scale(.93) !important;
  filter: brightness(1.1) !important;
}
[data-claim-bp-level] {
  transition: transform .1s, filter .1s !important;
}

/* Stats grid in result */
.result-stats-grid {
  display: grid !important;
  gap: 6px !important;
  padding: 0 !important;
}
.result-stat-card {
  padding: 10px 8px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  text-align: center !important;
}
.result-stat-card span { font-size: 10px !important; color: var(--txt3) !important; font-weight: 700 !important; text-transform: uppercase; display: block; margin-bottom: 3px; }
.result-stat-card strong { font-size: 16px !important; font-weight: 900 !important; display: block; }

/* Play hero — full bleed no top gap */
.play-screen .topbar--clean {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}
.play-screen > div:nth-child(2) {
  /* hero div — no top margin */
  margin-top: 0 !important;
}

/* Battle track cards tap */
.battle-track-card { -webkit-tap-highlight-color: transparent; }

/* Screen fade animation — faster */
.screen { animation: screenFadeIn .18s ease-out !important; }
@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Btn hover on desktop */
@media (hover: hover) {
  .btn:hover:not(:disabled) { filter: brightness(1.06); }
  .pack-buy-btn:hover:not(:disabled) { filter: brightness(1.08); transform: scale(1.02); }
  [data-nav]:hover { filter: brightness(1.05); }
}

/* ═══ v8 CSS ═══════════════════════════════════════════════ */

/* Universal smooth scroll */
html { scroll-behavior: smooth; }

/* Match hand — always at bottom, never hidden */
.match-screen > div:last-child { flex-shrink: 0 !important; }

/* Battle pass level number */
.battle-hero .section-title { font-size: 20px !important; }

/* Profile season summary */
.profile-screen .panel[style*="padding:14px 16px"] {
  background: linear-gradient(135deg, rgba(255,208,96,.05), var(--srf)) !important;
  border-color: rgba(255,208,96,.18) !important;
}

/* Inventory toolbar padding fix */
.collection-toolbar { padding: 12px 0 0; }

/* Pack buy button disabled state */
.pack-buy-btn:disabled {
  opacity: .38 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Stat card min height */
.stat { min-height: 56px; display: flex; flex-direction: column; justify-content: center; }

/* Section-head margin-bottom override (already has padding) */
.section-head { margin-bottom: 0 !important; }

/* Online screen leaderboard rows */
.online-screen [style*="border-bottom:1px solid var(--border)"] {
  transition: background .12s;
}

/* Result hero — top item no margin */
.result-screen > .screen > .panel:first-of-type.hero {
  margin-top: 0 !important;
  border-top: none !important;
}

/* .footer-actions gap */
.footer-actions { gap: 8px !important; flex-wrap: wrap; }

/* Profile summary strip chip text */
.profile-summary-chip span {
  font-size: 10px !important;
  letter-spacing: .06em !important;
}

/* ═══ v9 CSS ═══════════════════════════════════════════════ */

/* Override ui-premium-v61 panel background */
body.ui-v9 .panel {
  background: var(--srf) !important;
  border-color: var(--border) !important;
}
body.ui-v9 .panel::before { display: none !important; }

/* Welcome grant banner */
.play-screen .panel[style*="border-color:rgba(94,232,164"] {
  animation: pvRevIn .3s ease-out;
}

/* Topbar back arrow */
.topbar--clean .icon-btn[data-nav] {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--txt) !important;
}

/* renderPlay quick-access numbers */
.play-screen [data-nav][style*="flex:1;padding:12px"] strong,
.play-screen [data-nav][style*="flex:1;padding:12px"] div:last-child {
  font-variant-numeric: tabular-nums;
}

/* Collection toolbar — no label row gap */
.collection-toolbar { padding-top: 8px !important; }
.collection-toolbar .toolbar-row:first-child { padding-top: 0; }

/* Notifications screen */
[data-screen="notifications"] .list-item {
  align-items: flex-start !important;
}

/* Battle track — ensure scrollbar hidden everywhere */
.battle-track { -ms-overflow-style: none !important; }

/* Match action zone — always above hand */
.match-screen [style*="border-top:1px solid rgba(255,255,255,.06)"] {
  flex-shrink: 0 !important;
  order: 10 !important;
}

/* Result screen first panel edge-to-edge */
[data-screen="result"] > .panel.hero:first-of-type {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Online screen lobby — no season card overflow */
.online-screen .panel { margin-bottom: 0; }

/* Profile season summary panel accent */
.profile-screen .panel[style*="rgba(255,208,96"] {
  border-color: rgba(255,208,96,.2) !important;
}

/* Section-head padding — consistent 14px 16px 8px */
.panel > .section-head:first-child {
  padding: 14px 16px 8px !important;
  margin-bottom: 0 !important;
}

/* ═══ v10 CSS ═══════════════════════════════════════════════ */

/* Welcome grant banner animation */
[data-claim-welcome] {
  -webkit-tap-highlight-color: transparent;
}

/* Friends code copy button tap */
.friends-screen button[onclick*="clipboard"]:active {
  background: rgba(201,168,76,.2) !important;
}

/* Quick access row text numbers */
.play-screen [data-nav][style*="border-radius:14px"] [style*="font-size:16px"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* result-hero-card padding unified */
.result-hero-card {
  padding: 22px 18px 20px !important;
}

/* CSS section-head final definition */
.section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 14px 16px 8px !important;
  margin-bottom: 0 !important;
  flex-wrap: wrap;
}
.section-head h3 { margin: 0 !important; }

/* Pack odds chips color text */
.pack-odds-chip { white-space: nowrap; }

/* Battle track level number */
.battle-track-card__level { line-height: 1.2; }

/* Mission item done checkmark */
.mission-item.done .pill { background: rgba(94,232,164,.15) !important; border-color: rgba(94,232,164,.3) !important; color: var(--green) !important; }

/* Loadout grid 2 columns on phone */
.loadout-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
@media (min-width: 400px) {
  .loadout-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Result screen exit tiles in a row */
.result-screen [style*="grid-template-columns:1fr 1fr 1fr"] {
  gap: 6px !important;
}

/* ── Season 0 additions ──────────────────────────────────────────────────── */

/* Collectible detail modal — bottom sheet */
.collectible-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.collectible-modal {
  width: 100%;
  max-width: 480px;
  max-height: 88dvh;
  overflow-y: auto;
  border-radius: 24px 24px 0 0;
  background: var(--ink2, #0d0f24);
  border: 1px solid rgba(255,255,255,.1);
  border-bottom: none;
  padding: 8px 16px 24px;
  overscroll-behavior: contain;
}

/* Round history — collapsible in match screen */
.round-history {
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  flex-shrink: 0;
}
.round-history summary {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 800;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.round-history summary::-webkit-details-marker { display: none; }

/* Action notice — context banner in match */
.action-notice {
  padding: 7px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.action-notice--ok      { background: rgba(94,232,164,.06); }
.action-notice--gold    { background: rgba(255,208,96,.08); }
.action-notice--danger  { background: rgba(255,86,106,.08); }
.action-notice--neutral { background: rgba(255,255,255,.03); }
.action-notice__title {
  font-size: 12px;
  font-weight: 900;
}
.action-notice__body {
  font-size: 11px;
  color: var(--txt3);
  margin-top: 2px;
  line-height: 1.4;
}

/* pvFadeIn — round overlay and transitions */
@keyframes pvFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Prevent white flash on transparent images */
.collectible-art--contain,.loadout-icon__art--contain{background:transparent!important;}
.collectible-icon--art img,.loadout-icon--art img{background:transparent;}

/* ══════════════════════════════════════════════════════════════
   REDESIGN — Menus Season 0
   ══════════════════════════════════════════════════════════════ */

/* — SPLASH (app-launch-shell) — */
.app-launch-shell {
  background:
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.6) 100%),
    none!important;
}
.app-launch-shell__card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: center;
}
.app-launch-shell__brand {
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.app-launch-shell__brand img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 20px !important;
  border: none !important;
  background: transparent !important;
}
.app-launch-shell__bar {
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.15) !important;
  max-width: 160px;
  margin: 0 auto;
}
.app-launch-shell__bar span {
  background: linear-gradient(90deg, #ffd060, #ffb020) !important;
}

/* — PLAY SCREEN (tapete verde) — */
.play-screen {
  /* felt overlay handled via inline style */
}
.play-screen button:active {
  opacity: .85;
  transform: scale(.985);
  transition: transform .08s, opacity .08s;
}

/* — INVENTORY TABS — */
.inventory-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--srf);
}
.inventory-tab {
  flex: 1;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 800;
  color: var(--txt3);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.inventory-tab.active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* — SETTINGS toggles — */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.settings-toggle-row:last-child { border-bottom: none; }

/* — RESULT screen backgrounds — */

/* ── RESULT SCREENS ── */
.result-screen--victory,
.result-screen--top1 {
  background: none!important;
}
.result-screen--defeat {
  background: none!important;
}
/* Panel de stats sobre fondo derrota */
.result-screen--defeat .result-hero-card {
  background: linear-gradient(180deg, rgba(24,8,12,.88), rgba(14,6,10,.95)) !important;
  border: 1px solid rgba(255,86,106,.3) !important;
  border-radius: 20px !important;
  min-height: 200px;
}
/* Overlay más denso abajo para legibilidad */
.result-screen--victory .result-overlay,
.result-screen--defeat .result-overlay {
  background: linear-gradient(180deg,
    rgba(4,8,18,.45) 0%,
    rgba(4,8,18,.82) 45%,
    rgba(4,8,18,.97) 100%);
}


/* — ONLINE screen trophy delta row — */
.online-trophy-delta {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,.03);
  border-top: 1px solid var(--border);
}
.online-trophy-delta__win {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(94,232,164,.08);
  border: 1px solid rgba(94,232,164,.2);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--green);
}
.online-trophy-delta__loss {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,86,106,.08);
  border: 1px solid rgba(255,86,106,.2);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--red);
}



/* ═══════════════════════════════════════════════════════════════
   COLECCIÓN — estilos mejorados
   ═══════════════════════════════════════════════════════════════ */

/* Tab bar de la colección */
.inventory-tab-bar {
  display: flex;
  gap: 0;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(4,8,18,.6);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
}
.inventory-tab {
  flex: 1;
  padding: 12px 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,.45);
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}
.inventory-tab.active {
  color: #c9a84c;
  border-bottom-color: #c9a84c;
}

/* Toolbar de filtros */
.collection-toolbar {
  padding: 10px 12px 8px;
  background: rgba(4,8,18,.5);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.toolbar-row {
  display: flex;
  gap: 7px;
  align-items: center;
}

/* Chip filtros */
.chip-row { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.chip-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.chip-btn.active {
  background: rgba(201,168,76,.18);
  border-color: rgba(201,168,76,.45);
  color: #c9a84c;
}

/* Loadout summary grid */
.loadout-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  padding: 12px;
}
.loadout-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(4,8,18,.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08);
  min-width: 0;
  overflow: hidden;
}

/* Collectible visual área — fondo oscuro siempre */
.collectible-icon,
.collectible-icon--art,
.loadout-icon,
.loadout-icon--art,
.collectible-art,
.collectible-art--contain,
.loadout-icon__art,
.loadout-icon__art--contain {
  background-color: rgba(4,8,18,.92) !important;
}

/* Imagen dentro de collectible — nunca blanca */
.collectible-icon img,
.collectible-icon--art img,
.loadout-icon img,
.loadout-icon--art img {
  background: rgba(4,8,18,.92) !important;
}

/* Badge grid glassmorphism */
.badge-grid-item {
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.12);
  background: rgba(4,8,18,.72);
  backdrop-filter: blur(8px);
  padding: 12px 8px;
}

/* Modal colección glassmorphism */
#collectible-modal-bg > div {
  background: rgba(4,8,18,.92) !important;
  backdrop-filter: blur(20px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL — Cueva del tesoro como fondo universal
   ═══════════════════════════════════════════════════════════════ */

/* El fondo de cueva cubre todo — las screens son transparentes */
html, body {
  background: var(--ink) none;
}

/* Overlay oscuro semipermanente sobre el fondo */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(4,8,18,.68);
  pointer-events: none;
}

/* App container encima del overlay */
#app, #root {
  position: relative;
  z-index: 1;
}

/* Screens transparentes — se ve el fondo a través */
.screen-static {
  background: transparent !important;
}
.screen {
  background: transparent !important;
}

/* Topbar glassmorphism unificado */
.topbar, .topbar--clean {
  background: rgba(4,8,18,.62) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(201,168,76,.2) !important;
}

/* Panels glassmorphism */
.panel, section.panel {
  background: rgba(4,8,18,.68) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

/* Botón primary dorado */
.btn:not(.btn-secondary):not(.secondary):not(.ghost):not(.danger) {
  background: linear-gradient(160deg,#ffe566,#c9a84c) !important;
  color: #1a0800 !important;
  box-shadow: 0 8px 24px rgba(201,168,76,.3) !important;
}
.btn:not(.btn-secondary):not(.secondary):not(.ghost):not(.danger):not(:disabled):hover {
  background: linear-gradient(160deg,#ffef80,#dbb84e) !important;
}

/* Tags cyan → dorado */
.pv-tag--cyan {
  color: #c9a84c;
  background: rgba(201,168,76,.12);
  border-color: rgba(201,168,76,.3);
}

/* Bottom nav transparente */
.bottom-nav {
  background: transparent !important;
}

/* Progress bars doradas */
.progress > span, .progress-bar > span {
  background: linear-gradient(90deg,#c9a84c,#ffd060) !important;
}

/* Inputs con fondo glassmorphism */
.input {
  background: rgba(4,8,18,.55) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.input:focus {
  border-color: rgba(201,168,76,.5) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,.15) !important;
}

/* Sección headers semitransparentes */
.section-head {
  background: rgba(4,8,18,.5) !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
}

/* Card shells con fondo oscuro para cosméticos */
.loadout-icon, .collectible-thumb {
  background: rgba(4,8,18,.5) !important;
}

/* ═══════════════════════════════════════════════════════════════
   GAME UI — CSS puro, sin imágenes de arte
   ═══════════════════════════════════════════════════════════════ */

/* ── PANEL / CARD ── */
.game-panel {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,200,80,.2) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(10px);
  padding: 16px;
  margin: 8px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.game-panel::before { display: none !important; }

/* ── SECTION HEADER ── */
.game-section-head {
  position: relative;
  background: linear-gradient(180deg, rgba(255,200,80,.1), rgba(255,200,80,.04));
  border: 1px solid rgba(255,200,80,.2) !important;
  border-radius: 12px !important;
  padding: 10px 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 12px 4px;
}
.game-section-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: #fff8e0;
}
.game-section-head .small {
  font-size: 11px;
  color: rgba(255,240,180,.7);
}

/* ── BOTÓN DORADO (Equipar, Reclamar, Confirmar) ── */
.btn-game,
.btn.btn-game {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffd060 0%, #d4880a 100%) !important;
  border: 1px solid rgba(255,238,140,.4) !important;
  box-shadow: 0 4px 16px rgba(180,120,10,.4), inset 0 1px 0 rgba(255,255,255,.25) !important;
  color: #1a0800 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase;
  padding: 12px 22px !important;
  min-width: 100px;
  min-height: 42px;
  border-radius: 12px !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter .12s, transform .1s, box-shadow .12s;
}
.btn-game:not(:disabled):hover  { filter: brightness(1.08); box-shadow: 0 6px 20px rgba(180,120,10,.5) !important; }
.btn-game:not(:disabled):active { filter: brightness(.94); transform: scale(.97); }
.btn-game:disabled { opacity: .45; cursor: not-allowed; }

/* ── BOTÓN SECUNDARIO (Cancelar, Volver) ── */
.btn-game-dark,
.btn.btn-game-dark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.85) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  padding: 11px 20px !important;
  min-width: 90px;
  min-height: 42px;
  border-radius: 12px !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter .12s, transform .1s;
}
.btn-game-dark:not(:disabled):hover  { background: rgba(255,255,255,.12) !important; }
.btn-game-dark:not(:disabled):active { filter: brightness(.9); transform: scale(.97); }
.btn-game-dark:disabled { opacity: .4; cursor: not-allowed; }

/* ── BARRA DE PROGRESO ── */
.progress-game {
  position: relative;
  height: 10px;
  background: rgba(255,255,255,.1);
  border: none !important;
  border-radius: 999px !important;
  overflow: hidden;
  margin: 4px 0;
}
.progress-game__fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, #ffd060, #c9840a);
  border-radius: 999px;
  transition: width .4s ease;
  max-width: 100%;
}

/* ── NAV BAR ── */
.bottom-nav-bg {
  display: none; /* no art image available */
}

/* ═══════════════════════════════════════════════════════════════
   TIPOGRAFÍA — Cinzel es la letra de la identidad, no la del texto
   Fallback offline: 'Palatino Linotype' / Georgia serif
   ═══════════════════════════════════════════════════════════════ */

/* Títulos principales — Cinzel Decorative */
h1, h2, .section-title, .result-screen h2,
.startup-splash__copy,
[class*="screen"] h2 {
  font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Georgia, serif !important; letter-spacing: .04em !important;
  letter-spacing: .02em;
}

/* Títulos de sección: van en Nunito. Cinzel se reserva para h1/h2. */
h3, .game-section-head h3,
.topbar__title strong,
.section-head h3 {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: .03em;
}

/* Los botones son interfaz, no identidad: se leen mejor en Nunito. */
.btn-game, .btn-game-dark {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Número de trofeos y stats grandes */
.online-screen [style*="font-size:52px"],
.result-screen [style*="font-size:30px"],
.result-screen [style*="font-size:32px"] {
  font-family: 'Cinzel', serif !important;
}

/* Antes esto convertía en Cinzel cualquier cosa en negrita del menú, incluido
   el saldo de monedas. La identidad no se reparte a peso. */

/* Tags y pills de liga */
.pv-tag--gold {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: .06em;
}

/* ═══════════════════════════════════════════════════════════════
   FIXES CLIENTE — pulido visual final
   ═══════════════════════════════════════════════════════════════ */

/* Result stat cards — glassmorphism */
.result-stat-card {
  background: rgba(4,8,18,.72) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 12px !important;
  padding: 10px 8px !important;
  text-align: center;
}
.result-stat-card span {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.45) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
.result-stat-card strong {
  display: block;
  font-size: 16px !important;
  font-weight: 900 !important;
  margin-top: 3px;
}

/* Store pack cards — imagen centrada */
.store-pack-card {
  text-align: center;
}
.store-pack-card img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.6));
}

/* Hero banners más altos para fondos de pantalla completa */
.hero-online-banner {
  min-height: 200px;
  max-height: 280px;
}
.hero-online-banner__art img {
  object-position: center top;
}

/* Inputs — fondo oscuro glassmorphism */
.input, input.input, select.input {
  background: rgba(4,8,18,.7) !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.9) !important;
  border-radius: 10px !important;
}
.input:focus, input.input:focus {
  border-color: rgba(201,168,76,.5) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,.1) !important;
  outline: none !important;
}

/* Separadores en listas — más sutiles */
.section-head {
  background: rgba(4,8,18,.55) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 11px 16px !important;
}

/* Scrollbar — invisible pero funcional */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar { display: none; }

/* Pantalla de carga — texto más elegante */
.startup-splash__copy {
  font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Georgia, serif !important;
  font-size: 16px !important;
  color: rgba(255,240,190,.8) !important;
  letter-spacing: .08em !important;
}

/* Bottom nav — altura más generosa */
.bottom-nav {
  height: 92px !important;
}

/* Settings rows — spacing */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.settings-toggle-row:last-child {
  border-bottom: none;
}

/* Tags de rareza en colección — texto más legible */
.pill.rarity-common  { color: rgba(200,210,230,.8); }
.pill.rarity-rare    { color: #5ee8a4; }
.pill.rarity-superRare { color: #78b4ff; }
.pill.rarity-epic    { color: #c89aff; }
.pill.rarity-legendary { color: #ffd060; }

/* Chip filtros colección — más visible */
.chip-btn {
  font-size: 12px !important;
  padding: 6px 14px !important;
}

/* Match screen — tapete más inmersivo */
.match-screen {
  background: transparent !important;
}

/* Predict buttons — más grandes en táctil */
.predict-btn {
  min-height: 48px !important;
  font-size: 15px !important;
}

/* Hand cards — más fácil de pulsar */
.hand-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ─────────────────────────────────────────────────────────────
   5 VIDAS — Animaciones añadidas en Season 0
   ───────────────────────────────────────────────────────────── */

/* Aura pulsante — usada en streak día actual, sala encontrada, emparejado */
@keyframes pvPulseRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 208, 96, 0.55); transform: scale(1); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 208, 96, 0);    transform: scale(1.04); }
}

/* Glow dorado pulsante — usado en onboarding de tienda (primer sobre) */
@keyframes pvGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 208, 96, 0)) drop-shadow(0 0 0 rgba(255, 208, 96, 0)); }
  50%      { filter: drop-shadow(0 0 24px rgba(255, 208, 96, 0.6)) drop-shadow(0 0 40px rgba(255, 208, 96, 0.35)); }
}

/* Flecha indicadora que "salta" hacia abajo — hint de primer toque */
@keyframes pvBounceDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* Fade-in suave con desplazamiento desde arriba — notificaciones */
@keyframes pvSlideInTop {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   5 VIDAS — Animaciones de partida (Season 0)
   ───────────────────────────────────────────────────────────── */

/* Carta entrando a la mesa (desde abajo con rebote) */
@keyframes pvCardLand {
  0%   { opacity: 0; transform: translateY(40px) scale(.85) rotate(-4deg); }
  60%  { opacity: 1; transform: translateY(-8px) scale(1.05) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
.table-card-enter { animation: pvCardLand .45s cubic-bezier(.34,1.56,.64,1) both; }

/* Carta ganadora — pulso dorado */
@keyframes pvWinnerGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(255,208,96,.5), 0 4px 12px rgba(0,0,0,.5); transform: translateY(0) scale(1); }
  50%      { box-shadow: 0 0 40px rgba(255,208,96,.85), 0 8px 22px rgba(0,0,0,.6); transform: translateY(-4px) scale(1.04); }
}
.table-card-winner { animation: pvWinnerGlow 1.4s ease-in-out infinite; }

/* Corazón (vida) perdido — sacude y desvanece */
@keyframes pvHeartLost {
  0%   { transform: scale(1);   opacity: 1; }
  20%  { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 12px rgba(255,86,106,.9)); }
  40%  { transform: scale(1.1) rotate(-8deg); }
  60%  { transform: scale(1) rotate(8deg); }
  100% { transform: scale(.6) rotate(0); opacity: .18; }
}

/* Prediction confirmada — sello de lacre apareciendo */
@keyframes pvSealStamp {
  0%   { transform: scale(2) rotate(-18deg); opacity: 0; }
  60%  { transform: scale(.85) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Shimmer para recompensas/XP */
@keyframes pvShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.pv-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,208,96,.3) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: pvShimmer 2.4s linear infinite;
}

/* Ripple en botones al pulsar */
@keyframes pvRipple {
  to { transform: scale(4); opacity: 0; }
}
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: translate(-50%,-50%) scale(0);
  pointer-events: none;
}
.btn-ripple:active::after { animation: pvRipple .55s ease-out; }

/* Ripple universal en botones principales del juego */
.btn-game, .btn-game-dark { position: relative; overflow: hidden; }
.btn-game::after,
.btn-game-dark::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: translate(-50%,-50%) scale(0);
  pointer-events: none; opacity: 0;
}
.btn-game:not(:disabled):active::after,
.btn-game-dark:not(:disabled):active::after {
  animation: pvRipple .5s ease-out;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   HOME — GAME MODE CARDS
   ═══════════════════════════════════════════════════════════════ */
.home-mode-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(12px);
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.home-mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  opacity: 0;
  transition: opacity .2s ease;
}
.home-mode-card:active { transform: scale(.97); }
.home-mode-card__icon-wrap {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 24px;
}
.home-mode-card__icon-img {
  width: 28px; height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.home-mode-card__text { flex: 1; min-width: 0; }
.home-mode-card__name {
  font-size: 14px; font-weight: 900;
  font-family: 'Cinzel', serif;
  letter-spacing: .06em;
  color: #fff;
}
.home-mode-card__desc {
  font-size: 10px;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-mode-card__arrow {
  font-size: 22px; color: rgba(255,255,255,.3);
  flex-shrink: 0; font-weight: 300;
}
.home-mode-card__offline-tag {
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(255,86,106,.2); color: #ff566a;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ONLINE card — golden accent */
.home-mode-card--online {
  border-color: rgba(201,168,76,.4);
  background: linear-gradient(135deg, rgba(201,168,76,.2) 0%, rgba(0,0,0,.55) 60%);
  box-shadow: 0 4px 20px rgba(201,168,76,.15), inset 0 1px 0 rgba(255,255,255,.08);
}
.home-mode-card--online .home-mode-card__name { color: #ffd060; }
.home-mode-card--online .home-mode-card__arrow { color: rgba(255,208,96,.5); }
.home-mode-card__icon-wrap--online {
  background: linear-gradient(135deg, rgba(201,168,76,.3), rgba(201,168,76,.1));
  border: 1px solid rgba(201,168,76,.4);
}

/* CPU card — blue accent */
.home-mode-card--cpu {
  border-color: rgba(120,180,255,.25);
  background: linear-gradient(160deg, rgba(60,120,220,.15) 0%, rgba(0,0,0,.55) 100%);
}
.home-mode-card--cpu .home-mode-card__name { color: #78b4ff; }
.home-mode-card__icon-wrap--cpu {
  background: rgba(60,120,220,.15);
  border: 1px solid rgba(120,180,255,.3);
}

/* Friends card — green accent */
.home-mode-card--friends {
  border-color: rgba(94,232,164,.25);
  background: linear-gradient(160deg, rgba(94,232,164,.1) 0%, rgba(0,0,0,.55) 100%);
}
.home-mode-card--friends .home-mode-card__name { color: #5ee8a4; }
.home-mode-card__icon-wrap--friends {
  background: rgba(94,232,164,.12);
  border: 1px solid rgba(94,232,164,.3);
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM NAV — GAME STYLE BAR
   ═══════════════════════════════════════════════════════════════ */
.bottom-nav {
  position: fixed !important;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  height: auto !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  pointer-events: none;
}
.bottom-nav__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 6px 4px 8px;
  background: linear-gradient(180deg, rgba(30,16,6,.95) 0%, rgba(18,8,2,.98) 100%);
  border-top: 1.5px solid rgba(201,168,76,.35);
  box-shadow: 0 -4px 20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,200,80,.08);
  pointer-events: auto;
}
.bottom-nav__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 0 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  max-width: 72px;
  position: relative;
  opacity: .55;
  transition: opacity .15s ease, transform .15s ease;
}
.bottom-nav__tab--active {
  opacity: 1;
}
.bottom-nav__tab--center {
  opacity: 1;
  transform: translateY(-6px);
  max-width: 80px;
}
.bottom-nav__tab--center .bottom-nav__icon--center {
  width: 32px; height: 32px;
  padding: 6px;
  background: linear-gradient(160deg, #ffd060, #c8860a);
  border-radius: 14px;
  border: 1.5px solid rgba(255,238,136,.5);
  box-shadow: 0 4px 16px rgba(200,130,10,.45);
}
.bottom-nav__icon {
  width: 24px; height: 24px;
  object-fit: contain;
  filter: none;
  opacity: .62;
  transition: filter .15s ease, opacity .15s ease;
}
.bottom-nav__tab--active .bottom-nav__icon { opacity: 1; }
.bottom-nav__tab--active .bottom-nav__icon {
  filter: drop-shadow(0 0 8px rgba(255,208,96,.6)) brightness(1.2) saturate(1);
}
.bottom-nav__label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(200,160,80,.55);
  letter-spacing: .02em;
  white-space: nowrap;
}
.bottom-nav__tab--active .bottom-nav__label {
  color: #ffd060;
  font-weight: 800;
}
.bottom-nav__tab--center .bottom-nav__label {
  color: #ffd060;
  font-weight: 900;
  font-size: 10px;
}
.bottom-nav__badge {
  position: absolute;
  top: 0; right: 6px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff566a;
  color: #fff;
  font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(18,8,2,.9);
  z-index: 2;
}

/* Hide the old bottom-nav-bg since we style __bar directly */
.bottom-nav-bg { display: none !important; }

/* Screen transition — fade in */
@keyframes pvScreenIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.screen-static { animation: pvScreenIn .25s ease-out; }

/* Collectible cards in grid — hover lift */
.collectible-card {
  transition: transform .15s ease, box-shadow .15s ease;
}
.collectible-card:active {
  transform: scale(.96);
}

/* Profile avatar glow */
.pv-avatar-wrap {
  filter: drop-shadow(0 0 16px rgba(201,168,76,.3));
}

/* Store pack card — lift on tap */
.store-pack-card {
  transition: transform .15s ease;
}
.store-pack-card:active {
  transform: scale(.97);
}

/* Match screen: fijada al viewport — la mano nunca se corta */
body.screen-match #app { padding: 0 !important; }
body.screen-match .match-screen {
  position: fixed !important;
  inset: 0 !important;
  height: 100dvh !important;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 30;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM v70 — lavado visual completo
   Nunito = UI (cuerpo, botones, labels, nav)
   Cinzel = display (títulos de pantalla, números grandes, momentos)
   ═══════════════════════════════════════════════════════════════ */

/* ── TIPOGRAFÍA BASE ── */
body {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select { font-family: inherit !important; }

/* Display: SOLO títulos de pantalla y números protagonistas */
h1, h2, .section-title,
.result-screen h2,
.startup-splash__copy {
  font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
}
/* h3 y section heads vuelven a sans — más limpio y legible */
h3, .game-section-head h3, .section-head h3, .topbar__title strong {
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

/* ── BOTONES — 2 variantes, misma métrica ── */
.btn-game, .btn.btn-game {
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  min-height: 48px;
  padding: 12px 22px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffd76d 0%, #eaa93c 55%, #d68f1e 100%) !important;
  border: none !important;
  border-bottom: 3px solid #9a6410 !important;
  box-shadow: 0 4px 14px rgba(180,120,10,.35), inset 0 1.5px 0 rgba(255,255,255,.45) !important;
  color: #3a2405 !important;
}
.btn-game:not(:disabled):active {
  transform: translateY(2px);
  border-bottom-width: 1px !important;
  filter: brightness(.96);
}
.btn-game-dark, .btn.btn-game-dark, .btn.secondary, .btn-secondary {
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  min-height: 48px;
  padding: 12px 20px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1.5px solid rgba(255,255,255,.14) !important;
  border-bottom: 3px solid rgba(0,0,0,.5) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: none !important;
}
.btn-game-dark:not(:disabled):active { transform: translateY(2px); border-bottom-width: 1.5px !important; }
.btn.danger {
  border-radius: 12px !important;
  font-weight: 800 !important;
}

/* ── PANELES — radio y borde unificados ── */
.panel, section.panel {
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(8,12,24,.66) !important;
  margin: 8px 12px !important;
  overflow: hidden;
}
.game-panel {
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(8,12,24,.66) !important;
}

/* Section heads: fuera cajas doradas — etiqueta limpia */
.game-section-head {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 13px 16px 11px;
  min-height: 0;
}
.game-section-head h3 { font-size: 14px; color: rgba(255,255,255,.92); }
.game-section-head .small { color: rgba(255,215,109,.75); font-weight: 700; }
.section-head {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 13px 16px 11px !important;
}
.section-head h3 { font-size: 14px !important; }

/* ── PILLS / TAGS — sans, consistentes ── */
.pv-tag, .pv-tag--gold, .pv-tag--dim, .pv-tag--green, .pv-tag--red, .pv-tag--purple, .pv-tag--cyan {
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
}

/* ── TOPBAR — más bajo y limpio ── */
.topbar--clean { min-height: 52px; }
.topbar--clean .topbar__title strong { font-size: 16px; }
.topbar--clean .resource {
  font-family: 'Nunito', sans-serif;
  border-radius: 10px;
  padding: 5px 10px;
}

/* ── HOME MODE CARDS — nombre sans, jerarquía clara ── */
.home-mode-card { border-radius: 18px; }
.home-mode-card__name {
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .01em;
}
.home-mode-card__desc { font-size: 11px; }

/* ── BOTTOM NAV — labels sans ── */
.bottom-nav__label {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .01em;
}

/* ── INPUTS ── */
.input, input.input, select.input {
  border-radius: 12px !important;
  min-height: 46px;
  font-weight: 700 !important;
}

/* ── STATS / RESULT CARDS — labels sans ── */
.result-stat-card span {
  font-family: 'Nunito', sans-serif !important;
  letter-spacing: .06em;
}
.result-stat-card strong { font-family: 'Cinzel', serif; }
.stat span { font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 700; }
.stat strong { font-size: 17px; font-weight: 900; }

/* ── LISTAS ── */
.list-item { border-radius: 0 !important; }

/* Números grandes protagonistas en Cinzel */
.online-screen [style*="font-size:52px"],
.battle-hero [style*="font-size:40px"] {
  font-family: 'Cinzel', serif !important;
}

/* ── NAV ICONS COMO EMOJI (sin assets) ── */
.bottom-nav__icon--emoji {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; font-size: 20px; line-height: 1;
  filter: grayscale(.35) brightness(.9);
}
.bottom-nav__tab--active .bottom-nav__icon--emoji { filter: none; }
.bottom-nav__icon--emoji.bottom-nav__icon--center {
  width: 40px; height: 40px; font-size: 22px;
  background: linear-gradient(160deg, #ffd060, #c8860a);
  border-radius: 14px;
  border: 1.5px solid rgba(255,238,136,.5);
  box-shadow: 0 4px 16px rgba(200,130,10,.45);
  filter: none;
}
.search-input__icon { font-size: 14px; opacity: .55; }

/* ═══════════════════════════════════════════════════════════════
   MESA DE JUEGO — identidad propia, 100% CSS
   Sala en penumbra + lámpara cenital + mesa de fieltro con canto
   de madera y filo dorado. Nada de tapete plano de solitario.
   ═══════════════════════════════════════════════════════════════ */
.pv-room {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 46% at 50% 34%, rgba(255,206,120,.16), transparent 62%),
    radial-gradient(ellipse 120% 80% at 50% 8%, #22160e 0%, #130c08 45%, #080505 100%);
}
/* Haz de luz de la lámpara sobre la mesa */
.pv-room::before {
  content: ''; position: absolute; left: 50%; top: -14%;
  width: 116%; height: 78%; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255,214,140,.20), transparent 70%);
  filter: blur(6px); pointer-events: none;
}
/* Viñeta que cierra la sala */
.pv-room::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 78% 62% at 50% 42%, transparent 42%, rgba(0,0,0,.72) 100%);
}

/* ── La mesa ── */
.pv-table {
  position: absolute; left: -3%; right: -3%; top: 3%; bottom: 8%;
  border-radius: 50%;
  background: linear-gradient(175deg, #52341c 0%, #35200f 42%, #1d1108 100%);
  padding: 13px;
  box-shadow:
    0 26px 60px rgba(0,0,0,.75),
    0 4px 0 rgba(0,0,0,.5),
    inset 0 2px 0 rgba(255,208,140,.30),
    inset 0 -3px 6px rgba(0,0,0,.6);
}
/* Filo dorado entre madera y fieltro */
.pv-table::before {
  content: ''; position: absolute; inset: 9px; border-radius: 50%;
  border: 2px solid rgba(206,163,74,.75);
  box-shadow: 0 0 14px rgba(206,163,74,.35), inset 0 0 12px rgba(0,0,0,.55);
  pointer-events: none; z-index: 2;
}
/* Superficie de fieltro */
.pv-felt {
  position: absolute; inset: 13px; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(ellipse 62% 52% at 50% 30%, rgba(255,236,190,.16), transparent 68%),
    radial-gradient(ellipse 96% 88% at 50% 42%, var(--felt-hi, #1f7247) 0%, var(--felt-lo, #0d3b25) 66%, #07271a 100%);
  box-shadow: inset 0 6px 22px rgba(0,0,0,.55), inset 0 -10px 26px rgba(0,0,0,.5);
}
/* Trama fina del fieltro */
.pv-felt::before {
  content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.030) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.045) 0 1px, transparent 1px 3px);
}
/* Anillo interior grabado en el fieltro */
.pv-felt::after {
  content: ''; position: absolute; inset: 13%; border-radius: 50%;
  border: 1px solid rgba(255,232,180,.11);
  box-shadow: inset 0 0 0 7px rgba(0,0,0,.06);
  pointer-events: none;
}
.pv-table__mat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; mix-blend-mode: overlay; }

/* ── Asientos ── */
.pv-seat__plate {
  margin-top: 11px; padding: 3px 9px 4px; border-radius: 9px; text-align: center;
  background: linear-gradient(180deg, rgba(26,16,8,.92), rgba(10,6,3,.94));
  border: 1px solid rgba(206,163,74,.30);
  box-shadow: 0 3px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,214,140,.14);
}
.pv-seat--active .pv-seat__plate {
  border-color: rgba(255,208,96,.8);
  box-shadow: 0 0 16px rgba(255,208,96,.4), inset 0 1px 0 rgba(255,230,170,.3);
}
.pv-seat__name {
  font-size: 10px; font-weight: 800; letter-spacing: .01em; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 74px;
}

/* ═══════════════════════════════════════════════════════════════
   PARTIDA — animaciones y mano en abanico
   ═══════════════════════════════════════════════════════════════ */

/* Reparto: las cartas llegan desde el centro de la mesa */
@keyframes pvDeal {
  from { opacity: 0; transform: translate(var(--dx,0px), -240px) rotate(var(--dr,-14deg)) scale(.62); }
  to   { opacity: 1; transform: translateY(var(--arc,0px)) rotate(var(--rot,0deg)) scale(1); }
}
/* Carta que cae a la mesa */
@keyframes pvLand {
  0%   { opacity: 0; transform: translateY(96px) scale(.72) rotate(-7deg); }
  62%  { opacity: 1; transform: translateY(-7px) scale(1.07) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
/* Carta ganadora de la baza */
@keyframes pvWinPulse {
  0%,100% { transform: translateY(-7px) scale(1.09); box-shadow: 0 0 0 2px #ffd060, 0 0 26px rgba(255,208,96,.65), 0 14px 26px rgba(0,0,0,.6); }
  50%     { transform: translateY(-12px) scale(1.14); box-shadow: 0 0 0 3px #ffe9a8, 0 0 44px rgba(255,208,96,.95), 0 18px 30px rgba(0,0,0,.6); }
}
/* Cartas perdedoras: se recogen hacia la ganadora */
@keyframes pvSweep {
  to { opacity: 0; transform: translate(var(--tox,0px), var(--toy,-6px)) scale(.5) rotate(var(--tor,0deg)); }
}

.pv-tcard { position: relative; border-radius: 9px; overflow: hidden; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.22); box-shadow: 0 8px 18px rgba(0,0,0,.6); }
.pv-tcard--land  { animation: pvLand .38s cubic-bezier(.34,1.45,.5,1) both; }
.pv-tcard--win   { animation: pvWinPulse .85s ease-in-out infinite; border-color: #ffd060; z-index: 3; }
.pv-tcard--sweep { animation: pvSweep .46s .34s cubic-bezier(.5,0,.75,0) both; }

/* ── Mano en abanico ── */
.pv-hand {
  /* La mano no se encoge: si falta espacio lo cede la mesa, que es elástica.
     Antes el contenedor la recortaba por abajo y las cartas salían cortadas. */
  flex: 0 0 auto;
  display: flex; justify-content: center; align-items: flex-end;
  /* Las cartas llegaban justo al borde inferior y parecían recortadas; en
     móviles con barra de gestos quedaban además por debajo de ella. */
  padding: 10px 8px calc(24px + env(safe-area-inset-bottom, 0px));
  min-height: 0;
}
.pv-hand .hand-card {
  margin-left: var(--ov, -30px);
  transform-origin: 50% 145%;
  will-change: transform;
}
.pv-hand .hand-card:first-child { margin-left: 0; }
.pv-hand .hand-card.playable:active { filter: brightness(1.08); }
.pv-hand-deal { animation: pvDeal .44s cubic-bezier(.22,1,.36,1) both; }

/* Barra de estado compacta: vidas + predicción + bazas */
.pv-status {
  display: flex; align-items: center; justify-content: center; gap: 0;
  padding: 5px 12px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(26,16,8,.9), rgba(8,5,3,.94));
  border: 1px solid rgba(206,163,74,.34);
  box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,214,140,.12);
}
.pv-status__div { width: 1px; height: 20px; background: rgba(255,255,255,.12); }
.pv-status__k { font-size: 8.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,220,150,.55); }
.pv-status__v { font-size: 17px; font-weight: 900; font-family: 'Cinzel', serif; line-height: 1; }

/* ═══════════════════════════════════════════════════════════════
   CORRECCIONES DE CLIENTE
   ═══════════════════════════════════════════════════════════════ */

/* Las cartas no llenaban su rectángulo: .card-shell tenía ancho fijo
   (110px / 86px) e ignoraba el contenedor, dejando marco visible. */
.hand-card .card-shell, .pv-tcard .card-shell, .pv-cardfit .card-shell,
.hand-card .card-back--art, .pv-tcard .card-back--art, .pv-cardfit .card-back--art {
  width: 100% !important; height: 100% !important;
  aspect-ratio: auto !important;
  border: none !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  background: #fff;
}
.hand-card .card-img, .pv-tcard .card-img, .pv-cardfit .card-img,
.hand-card .card-back--art img, .pv-tcard .card-back--art img, .pv-cardfit .card-back--art img {
  border-radius: inherit; display: block;
}
/* El hover heredado desplazaba la carta dentro de su marco */
.hand-card.playable:hover .card-shell { transform: none !important; box-shadow: none !important; border-color: transparent !important; }

/* Botones de predicción: "Gano"/"Pierdo" no caben en 48px */
.predict-btn--word {
  width: auto !important; min-width: 74px; padding: 0 14px !important;
}
.predict-btn--word span { font-size: 15px !important; }

/* Vista previa de rivales en la ronda de 1 carta */
.pv-peek {
  display: flex; gap: 8px; justify-content: center; align-items: flex-end;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.pv-peek__card { flex-shrink: 0; border-radius: 8px; overflow: hidden; border: 1.5px solid rgba(255,255,255,.2); box-shadow: 0 4px 12px rgba(0,0,0,.55); }
.pv-peek__name { font-size: 8.5px; font-weight: 800; color: rgba(255,255,255,.55); text-align: center; margin-bottom: 3px; white-space: nowrap; }

/* Las tarjetas de modo quedaban cortadas por la barra inferior */
.play-screen { padding-bottom: calc(104px + var(--safe-bottom)) !important; }
.screen-static-ui .screen, .screen-static { padding-bottom: calc(100px + var(--safe-bottom)) !important; }
.match-screen { padding-bottom: 0 !important; }
}
/* ↑ cierra el @media (max-width:760px) que quedó abierto en la línea 247 y que
   dejaba TODO el resto del fichero anidado dentro de él. A partir de aquí las
   reglas ya son de nivel superior y se aplican siempre. */

/* Cartas: llenar exactamente su marco (card-shell tenía ancho fijo) */
.hand-card .card-shell, .pv-tcard .card-shell, .pv-cardfit .card-shell,
.hand-card .card-back--art, .pv-tcard .card-back--art, .pv-cardfit .card-back--art {
  width: 100% !important; height: 100% !important;
  aspect-ratio: auto !important; border: none !important;
  border-radius: inherit !important; box-shadow: none !important; background: #fff;
}
.hand-card .card-img, .pv-tcard .card-img, .pv-cardfit .card-img,
.hand-card .card-back--art img, .pv-tcard .card-back--art img, .pv-cardfit .card-back--art img {
  width: 100% !important; height: 100% !important; object-fit: cover;
  border-radius: inherit; display: block;
}
.hand-card.playable:hover .card-shell { transform: none !important; box-shadow: none !important; }

/* "Gano"/"Pierdo" no caben en un botón de 48px */
.predict-btn--word { width: auto !important; min-width: 78px; padding: 0 14px !important; }
.predict-btn--word span { font-size: 15px !important; }

.pv-peek { display: flex; gap: 8px; justify-content: center; align-items: flex-end; flex-wrap: nowrap; }
.pv-peek__card { flex-shrink: 0; border-radius: 8px; overflow: hidden; border: 1.5px solid rgba(255,255,255,.22); box-shadow: 0 4px 12px rgba(0,0,0,.55); }
.pv-peek__name { font-size: 8.5px; font-weight: 800; color: rgba(255,255,255,.6); text-align: center; margin-bottom: 3px; white-space: nowrap; }

/* Nada cortado por la barra inferior */
.play-screen, .screen-static-ui .screen, .screen-static { padding-bottom: calc(100px + var(--safe-bottom)) !important; }
.match-screen { padding-bottom: 0 !important; }

/* Especificidad alta: había reglas con anchos fijos por contexto
   (74px en la mano, 54-88px en la mesa) que impedían que la carta
   llenara su marco. Estas ganan a todas. */
.match-screen .pv-hand .hand-card .card-shell,
.match-screen .pv-hand .hand-card .card-back,
.match-screen .pv-hand .hand-card .card-back--art,
.match-screen .pv-tcard .card-shell,
.match-screen .pv-tcard .card-back,
.match-screen .pv-tcard .card-back--art,
.match-screen .pv-cardfit .card-shell,
.match-screen .pv-cardfit .card-back,
.match-screen .pv-cardfit .card-back--art {
  width: 100% !important; height: 100% !important;
  min-width: 0 !important; max-width: none !important;
  aspect-ratio: auto !important; border: 0 !important;
  border-radius: inherit !important; box-shadow: none !important;
  margin: 0 !important; background: #fff;
}
.match-screen .pv-hand .hand-card img,
.match-screen .pv-tcard img,
.match-screen .pv-cardfit img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important; border-radius: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   DIRECCIÓN VISUAL — Lot 0
   Elegante · Competitivo · Aventurero · Atemporal
   Obsidiana y azul real de base, oro real para el ornamento,
   carmesí para la acción principal, zafiro para el progreso.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ink:        #0B0D12;   /* Obsidian Ink  */
  --navy:       #111E3A;   /* Royal Navy    */
  --navy-2:     #16264a;   /* navy elevado  */
  --rgold:      #F2C230;   /* Royal Gold    */
  --rgold-dim:  #b98d18;   /* oro en sombra */
  --rgold-lite: #ffe07a;   /* brillo del oro*/
  --crimson:    #C62828;   /* Crimson Red   */
  --crimson-lo: #8e1b1b;
  --sapphire:   #2E7BFF;   /* Sapphire Blue */
  --emerald:    #1FA463;   /* Emerald Green */
  --ivory:      #F7F3E6;   /* Ivory Pearl   */
}

/* ── Fondo global: obsidiana con velo azul real ── */
body{
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(17,30,58,.85), transparent 60%),
    linear-gradient(180deg, #0d1224 0%, var(--ink) 55%, #05070c 100%) !important;
  color: var(--ivory);
}

/* ── Paneles: laca azul noche con filo dorado ── */
.panel, section.panel, .game-panel{
  background: linear-gradient(180deg, rgba(20,33,62,.92), rgba(11,15,26,.94)) !important;
  border: 1px solid rgba(242,194,48,.28) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.55), inset 0 1px 0 rgba(242,194,48,.14) !important;
}
.section-head, .game-section-head{
  border-bottom: 1px solid rgba(242,194,48,.20) !important;
}
.game-section-head .small{ color: rgba(242,194,48,.8) !important; }

/* ── Botón principal: carmesí con marco dorado ── */
.btn-game, .btn.btn-game{
  background: linear-gradient(180deg, #d94141 0%, var(--crimson) 48%, var(--crimson-lo) 100%) !important;
  border: 1.5px solid var(--rgold) !important;
  border-bottom: 3px solid var(--rgold-dim) !important;
  color: var(--ivory) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  box-shadow: 0 4px 14px rgba(140,20,20,.4), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.btn-game:not(:disabled):active{ filter: brightness(.94); }

/* ── Botón secundario: azul real con filo dorado ── */
.btn-game-dark, .btn.btn-game-dark, .btn.secondary, .btn-secondary{
  background: linear-gradient(180deg, var(--navy-2), #0d1730) !important;
  border: 1.5px solid rgba(242,194,48,.55) !important;
  border-bottom: 3px solid rgba(242,194,48,.28) !important;
  color: var(--ivory) !important;
}

/* ── Progreso: zafiro ── */
.progress-game__fill,
.progress > span, .progress-bar > span{
  background: linear-gradient(90deg, #1c5fd8, var(--sapphire)) !important;
  box-shadow: 0 0 10px rgba(46,123,255,.45);
}

/* ── Barra inferior: laca obsidiana, filo dorado ── */
.bottom-nav__bar{
  background: linear-gradient(180deg, rgba(17,30,58,.96), rgba(8,11,20,.98)) !important;
  border-top: 1px solid rgba(242,194,48,.32) !important;
}
.bottom-nav__label{ color: rgba(242,194,48,.55); }
.bottom-nav__tab--active .bottom-nav__label{ color: var(--rgold); }
.bottom-nav__icon--emoji.bottom-nav__icon--center{
  background: linear-gradient(160deg, var(--rgold-lite), var(--rgold-dim)) !important;
  border-color: rgba(255,224,122,.6) !important;
}

/* ── Topbar ── */
.topbar, .topbar--clean{
  background: rgba(11,13,18,.78) !important;
  border-bottom: 1px solid rgba(242,194,48,.26) !important;
}

/* ── Etiquetas y pills ── */
.pv-tag--gold{ color: var(--rgold); background: rgba(242,194,48,.12); border-color: rgba(242,194,48,.34); }
.pv-tag--green{ color: var(--emerald); background: rgba(31,164,99,.12); border-color: rgba(31,164,99,.34); }
.pv-tag--red{ color: #ef5350; background: rgba(198,40,40,.14); border-color: rgba(198,40,40,.4); }

/* ── Escalera de rareza (según el sistema definido) ── */
.pill.rarity-common    { color:#c9d2e3 }
.pill.rarity-rare      { color:#5b9bff }
.pill.rarity-superRare { color:#35c47e }
.pill.rarity-epic      { color:#b07cf0 }
.pill.rarity-legendary { color:#f2c230 }

/* ── Mesa: sala de obsidiana con lámpara dorada ── */
.pv-room{
  background:
    radial-gradient(ellipse 70% 46% at 50% 32%, rgba(242,194,48,.14), transparent 62%),
    radial-gradient(ellipse 120% 80% at 50% 8%, #16264a 0%, #0d1428 45%, var(--ink) 100%) !important;
}
.pv-room::before{
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(242,194,48,.16), transparent 70%) !important;
}
/* Canto de la mesa: oro real sobre laca oscura */
.pv-table{
  background: linear-gradient(175deg, #2a3a63 0%, #16223f 42%, #0b1020 100%) !important;
  box-shadow:
    0 26px 60px rgba(0,0,0,.8),
    0 4px 0 rgba(0,0,0,.5),
    inset 0 2px 0 rgba(242,194,48,.34),
    inset 0 -3px 6px rgba(0,0,0,.6) !important;
}
.pv-table::before{
  border: 2px solid rgba(242,194,48,.8) !important;
  box-shadow: 0 0 16px rgba(242,194,48,.4), inset 0 0 12px rgba(0,0,0,.55) !important;
}
.pv-seat__plate{
  /* Madera y latón: el mismo material del marco de la mesa. El azul marino
     venía de otra paleta y encima del tapete verde cantaba. */
  background: linear-gradient(180deg, rgba(48,30,13,.95), rgba(20,12,5,.96)) !important;
  border: 1px solid rgba(206,163,74,.42) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,214,140,.16) !important;
}
.pv-seat--active .pv-seat__plate{ border-color: var(--rgold) !important; box-shadow: 0 0 16px rgba(242,194,48,.45) !important; }
/* Tope de ancho para que la placa de un asiento lateral no se salga de la
   pantalla cuando la predicción es larga ("Pierdo" en la ronda de una carta). */
.pv-seat__plate{ max-width: 84px; margin-left: auto; margin-right: auto; padding-left: 6px; padding-right: 6px; }

.vida-icono{ display:inline-block; object-fit:contain; flex-shrink:0; }
.vida-icono--vacia{ opacity:.5; filter:saturate(.35); }
.pv-status{
  background: linear-gradient(180deg, rgba(48,30,13,.94), rgba(20,12,5,.96)) !important;
  border: 1px solid rgba(242,194,48,.36) !important;
}
.pv-status__k{ color: rgba(242,194,48,.6); }

/* ── Tarjetas de modo del inicio ── */
.home-mode-card--online{
  border-color: rgba(242,194,48,.45);
  background: linear-gradient(135deg, rgba(198,40,40,.28) 0%, rgba(11,13,18,.6) 60%);
}
.home-mode-card--online .home-mode-card__name{ color: var(--rgold); }
.home-mode-card--cpu{ border-color: rgba(46,123,255,.4); background: linear-gradient(135deg, rgba(46,123,255,.2), rgba(11,13,18,.6) 60%); }
.home-mode-card--friends{ border-color: rgba(31,164,99,.4); background: linear-gradient(135deg, rgba(31,164,99,.2), rgba(11,13,18,.6) 60%); }

/* Entradas */
.input, input.input, select.input{
  background: rgba(11,15,26,.7) !important;
  border: 1.5px solid rgba(242,194,48,.24) !important;
  color: var(--ivory) !important;
}
.input:focus{ border-color: var(--rgold) !important; box-shadow: 0 0 0 3px rgba(242,194,48,.16) !important; }

/* ── Botón central de la barra: medallón ──
   El asset ya es un medallón con su propio aro dorado y sus gemas, así que
   no lleva caja detrás: sería un marco encima de otro. Sólo se le da tamaño,
   elevación y un halo cálido para que destaque como icono protagonista.
   El respaldo en emoji sí conserva su caja dorada (ver reglas anteriores). */
.bottom-nav__tab--center img.bottom-nav__icon--center{
  width: 52px; height: 52px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.65))
          drop-shadow(0 0 14px rgba(242,194,48,.35));
}
.bottom-nav__tab--center:has(img){ transform: translateY(-12px); }
.bottom-nav__tab--center:has(img) .bottom-nav__label{ margin-top: 2px; }
/* Los iconos de imagen del resto de pestañas no llevan filtro de opacidad */
.bottom-nav__tab img.bottom-nav__icon{ opacity: 1; filter: none; }
.bottom-nav__tab:not(.bottom-nav__tab--active) img.bottom-nav__icon{ opacity: .62; }

/* ── Medallones en la barra inferior ──
   Un medallón con aro, gemas y relieve necesita más superficie que una
   silueta plana: a 24 px se vuelve un borrón. Los iconos de imagen suben a
   34 px y la barra crece lo justo para acogerlos sin apretar las etiquetas. */
.bottom-nav__tab img.bottom-nav__icon{
  width: 34px; height: 34px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.bottom-nav__tab:not(.bottom-nav__tab--active) img.bottom-nav__icon{
  opacity: .72;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)) saturate(.8);
}
.bottom-nav__tab--active img.bottom-nav__icon{
  opacity: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)) drop-shadow(0 0 9px rgba(242,194,48,.5));
}
.bottom-nav:has(img.bottom-nav__icon){ height: 100px !important; }
.bottom-nav:has(img.bottom-nav__icon) .bottom-nav__bar{ padding-top: 6px; }
.bottom-nav:has(img.bottom-nav__icon) .bottom-nav__label{ margin-top: 3px; font-size: 10px; }
.bottom-nav:has(img.bottom-nav__icon) .bottom-nav__badge{ top: -2px; right: 2px; }

/* El central manda: se define después para que gane a la regla general. */
.bottom-nav .bottom-nav__tab--center img.bottom-nav__icon{
  width: 54px !important; height: 54px !important;
  opacity: 1 !important;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(242,194,48,.4)) !important;
}

/* Un punto más de tamaño y menos desaturado: a 34 px los motivos del
   interior del medallón (cofre, cartas, copa, busto) se empastaban. */
.bottom-nav__tab img.bottom-nav__icon{ width: 38px; height: 38px; }
.bottom-nav__tab:not(.bottom-nav__tab--active) img.bottom-nav__icon{ opacity: .82; filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); }

/* ── Medallones en las tarjetas de modo ──
   Igual que el botón central: el asset ya trae su aro dorado, así que la
   caja de color de detrás sobra y a 28 px el grabado se pierde. Cuando hay
   imagen, el medallón va suelto y más grande. El respaldo en emoji sí
   conserva su caja de color. */
.home-mode-card__icon-wrap:has(.home-mode-card__icon-img){
  width: auto; height: auto;
  background: none !important;
  border: none !important;
  border-radius: 0;
}
img.home-mode-card__icon-img{
  width: 52px; height: 52px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
/* La tarjeta ONLINE es la protagonista del menú: su medallón manda un poco más */
.home-mode-card--online img.home-mode-card__icon-img{
  width: 58px; height: 58px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.65)) drop-shadow(0 0 12px rgba(242,194,48,.3));
}

/* ══════════════════════════════════════════════════════════════
   MESA CON TAPETE REAL
   El tapete es un playmat rectangular con marco dorado y los cuatro
   palos en las esquinas. Recortarlo en óvalo se comía justo lo que le
   da valor, y pintarlo al 55 % en modo overlay lo dejaba invisible.
   Con tapete: rectángulo redondeado y el arte a plena opacidad.
   Sin tapete: sigue el óvalo de fieltro dibujado en CSS.
   ══════════════════════════════════════════════════════════════ */
.pv-table--mat{
  left: 2% !important; right: 2% !important;
  top: 7% !important; bottom: 6% !important;
  border-radius: 20px !important;
  padding: 6px !important;
  background: linear-gradient(175deg, #2a3a63 0%, #16223f 45%, #0b1020 100%) !important;
  box-shadow:
    0 22px 52px rgba(0,0,0,.8),
    0 3px 0 rgba(0,0,0,.5),
    inset 0 1px 0 rgba(242,194,48,.3) !important;
}
.pv-table--mat::before{
  inset: 3px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(242,194,48,.5) !important;
  box-shadow: 0 0 12px rgba(242,194,48,.25) !important;
}
.pv-table--mat .pv-felt{
  inset: 6px !important;
  border-radius: 15px !important;
  background: #0d3b25 !important;
  box-shadow: inset 0 0 26px rgba(0,0,0,.45) !important;
}
/* La trama y el anillo de CSS sobran: el tapete ya trae los suyos */
.pv-table--mat .pv-felt::before,
.pv-table--mat .pv-felt::after{ display: none !important; }
/* El arte a plena opacidad, sin mezcla */
.pv-table--mat .pv-table__mat{
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  object-fit: cover;
}

/* El tapete entra entero: es apaisado y el hueco de la mesa en móvil es casi
   cuadrado, así que recortar por los lados se comía los medallones de las
   esquinas. Con contain se ve completo y las bandas quedan sobre el mismo
   verde del fieltro, así que no se notan. */
.pv-table--mat .pv-table__mat{ object-fit: contain !important; }

/* ══ MESA VERTICAL ══
   El tapete es vertical, así que la mesa ocupa casi toda la altura
   disponible. Antes quedaba del tamaño de una carta y no se apreciaba. */
.pv-table--mat{
  left: 4% !important; right: 4% !important;
  top: 2% !important; bottom: 1% !important;
  border-radius: 22px !important;
}
.pv-table--mat .pv-table__mat{ object-fit: cover !important; }
/* La mano ocupa menos: las cartas han bajado de tamaño */


/* ══ MESA: SOLO EL TAPETE ══
   El tapete ya trae su propio marco dorado, así que el recuadro CSS
   (canto, filo y padding) sobraba: era un marco encima de otro. La mesa
   adopta ahora la proporción exacta del tapete y ocupa toda la altura
   disponible, así se ve entera por arriba y por abajo, sin recortes ni
   franjas. */
.pv-table--mat{
  top: 0 !important; bottom: 0 !important;
  left: 50% !important; right: auto !important;
  transform: translateX(-50%);
  height: 100% !important; width: auto !important;
  aspect-ratio: 941 / 1672;
  max-width: 98%;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.75) !important;
  overflow: hidden;
}
/* Fuera el filo dorado dibujado en CSS */
.pv-table--mat::before{ display: none !important; }
.pv-table--mat .pv-felt{
  inset: 0 !important;
  border-radius: 18px !important;
  background: none !important;
  box-shadow: none !important;
}
.pv-table--mat .pv-table__mat{
  object-fit: cover !important;
  border-radius: 18px;
}

/* ── Cartas boca abajo de los rivales ──
   Sin esto el reverso no se veía casi nunca: los rivales no mostraban
   cartas. Ahora cada asiento enseña su mano boca abajo, que además dice
   de un vistazo cuántas cartas le quedan. */
.pv-seat__hand{
  display: flex; justify-content: center; align-items: center;
  height: 26px; margin-top: 3px; pointer-events: none;
}
.pv-seat__hand img{
  width: 17px; aspect-ratio: 280/440;
  border-radius: 3px; object-fit: cover;
  border: 1px solid rgba(0,0,0,.55);
  box-shadow: 0 2px 5px rgba(0,0,0,.6);
  margin-left: -9px;
}
.pv-seat__hand img:first-child{ margin-left: 0; }
.pv-seat--active .pv-seat__hand img{ border-color: rgba(242,194,48,.6); }

/* ══ MESA A TODO EL ANCHO ══
   La mesa ocupa el ancho completo de la pantalla, sin márgenes negros a
   los lados. Para que quepa manteniendo la proporción del tapete se le
   cede altura: la mano se hace más baja y la zona de acción se ajusta. */
.pv-table--mat{
  left: 0 !important; right: 0 !important;
  transform: none !important;
  width: 100% !important; max-width: none !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  box-shadow: 0 -8px 30px rgba(0,0,0,.6) !important;
}
.pv-table--mat .pv-felt{ border-radius: 0 !important; }
.pv-table--mat .pv-table__mat{ border-radius: 0; object-position: center; }

/* La mano ocupa lo justo: las cartas han bajado de tamaño */

/* Zona de acción más ajustada para dejar altura a la mesa */
.match-screen .pv-status{ padding: 4px 11px !important; }

/* La pantalla de partida no lleva barra inferior, así que el relleno que
   sí necesitan las demás pantallas (112 px) aquí sólo dejaba una franja
   negra bajo la mano. Se define al final para que gane a esas reglas. */
.match-screen, body.screen-match .match-screen{ padding-bottom: 0 !important; }

/* ══ AVATARES CUADRADOS ══
   Son ilustraciones completas con su fondo y sus marcos ornamentados; el
   recorte circular se comía los bordes y parte del dibujo. Cuadrado con
   esquina redondeada se ven enteros y pegan con los medallones del resto. */
.pv-avatar-wrap{ border-radius: 20px; }
.pv-avatar{ border-radius: 20px !important; border-color: rgba(242,194,48,.45) !important; }
.pv-avatar img{ border-radius: 17px; }
/* Miniaturas de la colección */
.collectible-thumb, .loadout-icon{ border-radius: 12px !important; }


/* La mesa se cortaba por arriba y por abajo: el tapete es más estrecho que la
   pantalla y cover recortaba. Con contain se ve entero, marco incluido. */
.pv-table--mat .pv-table__mat{ object-fit: contain !important; }
.pv-table--mat{ background: transparent !important; box-shadow: none !important; }

/* La cabecera fija tapaba el buscador y los filtros de la colección. */
[data-screen="inventory"] .search-input,
[data-screen="inventory"] .chip-row{ position: relative; z-index: 1; }
[data-screen="inventory"] > .topbar--clean{ margin-bottom: 6px; }
[data-screen="inventory"] .panel:first-of-type{ margin-top: 10px !important; }

/* ══ INICIO: cabía 1017px en 830, por eso se cortaban VS CPU y VS Amigos ══ */
.play-screen{
  padding-top: 2px !important;
  /* La home tiene más contenido que pantalla: se desplaza en lugar de
     recortarse, que era lo que dejaba VS CPU y VS Amigos inalcanzables. */
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}
/* El tamaño del logo lo manda .home-head__logo y sus media queries. */
.home-mode-card{ padding: 10px 14px !important; border-radius: 14px; }
.home-mode-card--online{ padding: 12px 14px !important; }
img.home-mode-card__icon-img{ width: 42px !important; height: 42px !important; }
.home-mode-card--online img.home-mode-card__icon-img{ width: 48px !important; height: 48px !important; }
.home-mode-card__name{ font-size: 14px; }
.home-mode-card__desc{ font-size: 10px; }

/* ══ MESA MÁS GRANDE ══
   La altura sale de recortar la barra superior y la zona de acción, que
   tenían más aire del necesario. */
.match-screen .pv-status{ padding: 3px 10px !important; }
.match-screen .pv-status__v{ font-size: 15px; }
.pv-hand{ padding: 10px 8px calc(22px + env(safe-area-inset-bottom, 0px)) !important; }

/* Zona de acción más ajustada: son 105 px para una barra de una línea.
   Lo que se recorta se lo lleva la mesa, que crece con la altura libre. */
.match-screen [data-submit-prediction-selected],
.match-screen [data-play-selected],
.match-screen [data-clear-selected]{ height: 42px !important; }
.match-screen .predict-btn{ width: 44px !important; height: 44px !important; }
.match-screen .predict-btn span{ font-size: 18px !important; }


/* ══ BARRA INFERIOR ══
   Los medallones son bronce oscuro sobre un fondo casi negro: a media
   opacidad no se distinguían unos de otros. Se quedan siempre opacos y se
   les sube el brillo; la pestaña activa añade el halo dorado y una placa
   de fondo para que se vea cuál es. Las etiquetas también suben de
   contraste, que en dorado al 55 % no se leían. */
.bottom-nav__bar{
  background: linear-gradient(180deg, rgba(17,30,58,.96), rgba(7,10,18,.99));
  border-top: 1px solid rgba(242,194,48,.28);
  box-shadow: 0 -6px 22px rgba(0,0,0,.6);
}
.bottom-nav__tab{ position: relative; border-radius: 14px; }
.bottom-nav__tab img.bottom-nav__icon,
.bottom-nav__tab:not(.bottom-nav__tab--active) img.bottom-nav__icon{
  width: 40px; height: 40px;
  opacity: 1;
  filter: brightness(1.32) contrast(1.06) saturate(1.12)
          drop-shadow(0 2px 5px rgba(0,0,0,.75));
}
.bottom-nav__tab--active img.bottom-nav__icon{
  filter: brightness(1.5) contrast(1.08) saturate(1.2)
          drop-shadow(0 2px 6px rgba(0,0,0,.8))
          drop-shadow(0 0 10px rgba(242,194,48,.65));
}
.bottom-nav__tab--active:not(.bottom-nav__tab--center){
  background: linear-gradient(180deg, rgba(242,194,48,.16), rgba(242,194,48,.04));
  box-shadow: inset 0 0 0 1px rgba(242,194,48,.3);
}
.bottom-nav__label{
  color: rgba(247,243,230,.72);
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.bottom-nav__tab--active .bottom-nav__label{ color: #F2C230; }
.bottom-nav .bottom-nav__tab--center img.bottom-nav__icon{
  width: 56px !important; height: 56px !important;
  filter: brightness(1.24) saturate(1.1)
          drop-shadow(0 3px 9px rgba(0,0,0,.8))
          drop-shadow(0 0 16px rgba(242,194,48,.55)) !important;
}
.bottom-nav:has(img.bottom-nav__icon) .bottom-nav__label{ font-size: 10px; margin-top: 2px; }

/* ══ COFRES DE LA TIENDA ══
   La ilustración ya trae su propio marco dorado y su brillo, así que no lleva
   caja detrás: sólo tamaño y una sombra que la despegue del fondo. */
img.store-chest{
  width: 132px; height: auto; max-height: 104px;
  object-fit: contain; display: block; position: relative;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.7));
  transition: transform .18s ease;
}
[data-open-pack]:not([disabled]):hover ~ * img.store-chest,
.store-chest-wrap:hover img.store-chest{ transform: translateY(-3px) scale(1.03); }
span.store-chest{ font-size: 44px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.7)); }

/* El cofre de la pantalla de apertura sustituye al emoji de sobre. */
img.pack-reveal__chest{ width: 168px; height: auto; object-fit: contain; display: block; }
span.pack-reveal__chest{ font-size: 64px; }

/* ══ ICONOS DE RECURSO Y MEDALLAS ══
   Sustituyen a los emojis en el HUD y la clasificación. Se alinean con el
   texto que llevan al lado, que si no bailan media línea. */
img.res-icon{
  object-fit: contain;
  /* Nunca se fuerzan alto y ancho a la vez: el asset conserva su proporción. */
  width: auto;
  display: inline-block;
  vertical-align: -0.18em;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
span.res-icon--emoji{ display: inline-block; vertical-align: -0.08em; }

/* ══════════════════════════════════════════════════════════════
   APERTURA DE COFRE
   Tres momentos cortos: el cofre tiembla y se le escapa luz por las
   juntas, estalla, y se cambia por el asset abierto. El color sale de
   --luz, que pone la rareza del cofre, así que el básico es dorado, el
   raro verde, el épico violeta y el astral azul sin duplicar reglas.
   Todo con transform y opacity para que un móvil de gama media lo mueva.
══════════════════════════════════════════════════════════════ */
.pack-reveal-overlay--abriendo{
  /* Gana a las reglas de fondo que vienen de las capas anteriores del diseño. */
  background: var(--fondo-apertura, #04060d) !important;
  cursor: pointer;
  /* El fondo se difumina y se apaga para que el cofre quede solo. Se sigue
     intuyendo la pantalla de detrás, pero deja de competir. */
  backdrop-filter: blur(14px) brightness(.28) saturate(.7);
  -webkit-backdrop-filter: blur(14px) brightness(.28) saturate(.7);
}
.cofre-escena{
  position: relative;
  width: min(86vw, 420px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
}
.cofre-escena__cofre{
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.cofre-escena__img{
  width: min(74vw, 330px); height: auto; object-fit: contain; display: block;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.65));
}
span.cofre-escena__img{ font-size: 108px; }

/* Halo que respira por detrás del cofre */
.cofre-escena__halo{
  position: absolute; left: 50%; top: 46%;
  width: min(88vw, 460px); aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--luz), .34) 0%, rgba(var(--luz), .10) 42%, transparent 68%);
  pointer-events: none; z-index: 0;
}
/* Rayos que se escapan por la junta de la tapa */
.cofre-escena__rayos{
  position: absolute; left: 50%; top: 46%;
  width: min(70vw, 320px); height: 10px; transform: translate(-50%,-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--luz), .95), transparent);
  filter: blur(6px); opacity: 0; z-index: 1; pointer-events: none;
}
/* Destello del estallido */
.cofre-escena__destello{
  position: absolute; left: 50%; top: 46%;
  width: 40px; height: 40px; transform: translate(-50%,-50%) scale(0);
  border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(var(--luz), .9) 30%, transparent 70%);
  opacity: 0; z-index: 3; pointer-events: none;
}
.cofre-escena__pie{
  position: relative; z-index: 2;
  font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--luz), .9); text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
.cofre-escena__saltar{
  position: fixed; right: 16px; top: calc(16px + env(safe-area-inset-top, 0px));
  z-index: 4; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.42);
  color: rgba(255,255,255,.78); font-size: 12px; font-weight: 800;
  font-family: inherit; cursor: pointer; backdrop-filter: blur(4px);
}

/* — Tensión: temblor corto y luz creciente — */
.cofre-escena--tensa .cofre-escena__cofre{ animation: cofreTiembla 1.25s cubic-bezier(.36,.07,.19,.97) both; }
.cofre-escena--tensa .cofre-escena__halo{ animation: cofreHalo 1.25s ease-in both; }
.cofre-escena--tensa .cofre-escena__rayos{ animation: cofreRayos 1.25s ease-in both; }

@keyframes cofreTiembla{
  0%   { transform: scale(.86) translateX(0); }
  15%  { transform: scale(.92) translateX(-2px); }
  30%  { transform: scale(.95) translateX(2px); }
  45%  { transform: scale(.98) translateX(-3px); }
  60%  { transform: scale(1) translateX(3px); }
  75%  { transform: scale(1.02) translateX(-4px); }
  90%  { transform: scale(1.04) translateX(4px); }
  100% { transform: scale(1.06) translateX(0); }
}
@keyframes cofreHalo{ from { opacity: .15; transform: translate(-50%,-50%) scale(.6); } to { opacity: 1; transform: translate(-50%,-50%) scale(1.05); } }
@keyframes cofreRayos{ 0% { opacity: 0; } 55% { opacity: .35; } 100% { opacity: .95; } }

/* — Estallido: destello y el cofre ya abierto — */
.cofre-escena--estalla .cofre-escena__destello{ animation: cofreDestello .55s cubic-bezier(.2,.8,.2,1) both; }
.cofre-escena--estalla .cofre-escena__cofre{ animation: cofreAbre .55s cubic-bezier(.18,.9,.24,1) both; }
.cofre-escena--estalla .cofre-escena__halo{ animation: cofreHaloAbre .55s ease-out both; }
.cofre-escena--estalla .cofre-escena__rayos{ opacity: 0; }

@keyframes cofreDestello{
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0); }
  25%  { opacity: 1; transform: translate(-50%,-50%) scale(9); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(22); }
}
@keyframes cofreAbre{
  0%   { transform: scale(1.06); }
  30%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}
@keyframes cofreHaloAbre{ from { opacity: 1; transform: translate(-50%,-50%) scale(1.05); } to { opacity: .8; transform: translate(-50%,-50%) scale(1.35); } }

/* — Premio — */
.pack-reveal__chest{ width: min(190px, 54vw); height: auto; object-fit: contain; display: block; }
.pack-reveal__booster{ min-height: 150px; }
.pack-reveal__booster img{ animation: cofreEntraPremio .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cofreEntraPremio{ from { opacity: 0; transform: scale(1.18); } to { opacity: 1; transform: scale(1); } }

.pack-reveal__puntos{ display: flex; justify-content: center; gap: 6px; }
.pack-reveal__punto{ width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); transition: background .2s, box-shadow .2s; }
.pack-reveal__punto--visto{ background: rgba(var(--luz), .5); }
.pack-reveal__punto--activo{ background: rgb(var(--luz)); box-shadow: 0 0 8px rgba(var(--luz), .7); }

.pack-reveal__bonus{
  margin-top: 8px; padding: 7px 12px; border-radius: 10px;
  background: rgba(var(--luz), .10); border: 1px solid rgba(var(--luz), .26);
  font-size: 12px; font-weight: 800; color: rgba(255,255,255,.86);
  display: inline-flex; align-items: center; gap: 6px;
}
/* Duplicado: se entiende de un vistazo sin leer nada */
.pack-reveal__card--duplicado{ opacity: .96; }
.pack-reveal__sello{
  position: absolute; right: 12px; top: 46px; z-index: 2;
  padding: 4px 10px; border-radius: 999px; transform: rotate(6deg);
  background: rgba(255,208,96,.16); border: 1px solid rgba(255,208,96,.45);
  color: #ffd060; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
/* Rareza alta: el panel late una vez al aparecer */
.pack-reveal--alta{ animation: premioAlto .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes premioAlto{
  0%   { transform: scale(.94); box-shadow: 0 0 0 0 rgba(var(--luz), .5); }
  55%  { transform: scale(1.015); box-shadow: 0 0 0 14px rgba(var(--luz), 0); }
  100% { transform: scale(1); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
}

/* Quien apaga las animaciones ve el resultado directo, sin espera. */
@media (prefers-reduced-motion: reduce){
  .cofre-escena--tensa .cofre-escena__cofre,
  .cofre-escena--tensa .cofre-escena__halo,
  .cofre-escena--tensa .cofre-escena__rayos,
  .cofre-escena--estalla .cofre-escena__destello,
  .cofre-escena--estalla .cofre-escena__cofre,
  .pack-reveal__booster img,
  .pack-reveal--alta{ animation: none !important; }
}

/* ══ DIÁLOGOS DEL JUEGO ══
   Sustituyen a confirm(): el del navegador no se puede estilar y delata que
   por debajo hay una WebView. */
.dialogo-capa{
  position: fixed; inset: 0; z-index: 240;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(4,8,16,.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: dialogoFondo .16s ease both;
}
.dialogo{
  width: min(92vw, 380px);
  padding: 22px 20px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(17,30,58,.98), rgba(8,14,26,.98));
  border: 1px solid rgba(242,194,48,.24);
  box-shadow: 0 26px 60px rgba(0,0,0,.62);
  text-align: center;
  animation: dialogoEntra .2s cubic-bezier(.2,.8,.2,1) both;
}
.dialogo__titulo{
  margin: 0 0 8px; font-family: 'Cinzel', serif;
  font-size: 19px; font-weight: 900; color: #fff8e0; letter-spacing: -.01em;
}
.dialogo__cuerpo{
  margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.72);
}
.dialogo__botones{ display: flex; flex-direction: column; gap: 9px; }
.dialogo__botones .btn-game,
.dialogo__botones .btn-game-dark{ width: 100%; padding: 14px; font-size: 15px; }
.btn-game--peligro{
  background: linear-gradient(135deg, #d24a58, #a3202f) !important;
  border-color: rgba(255,150,160,.5) !important;
  color: #fff !important;
}
@keyframes dialogoFondo{ from { opacity: 0; } to { opacity: 1; } }
@keyframes dialogoEntra{ from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ══ GRAMÁTICA DE RAREZAS ══
   Un color por rareza, definido una sola vez. Antes raro salía verde en la
   colección y azul en la tienda, y súper raro al revés; y el más alto era
   magenta en unos sitios y cian en otros pese a que el cofre astral es azul.
   Todo lo que pinte una rareza sale de aquí. */
:root{
  --rareza-common:     #C9D2E3;   /* plata */
  --rareza-rare:       #5EE8A4;   /* verde */
  --rareza-superRare:  #78B4FF;   /* azul */
  --rareza-epic:       #C89AFF;   /* violeta */
  --rareza-legendary:  #F2C230;   /* oro */
}
.pill.rarity-common{color:var(--rareza-common)}
.pill.rarity-rare{color:var(--rareza-rare)}
.pill.rarity-superRare{color:var(--rareza-superRare)}
.pill.rarity-epic{color:var(--rareza-epic)}
.pill.rarity-legendary{color:var(--rareza-legendary)}

/* ══ TIENDA ══
   Un cofre por fila. El arte manda, debajo el precio, y las probabilidades
   detrás de un enlace: siguen estando completas, pero dejan de ser lo primero
   que compite con la ilustración. */
.tienda-cofre{
  position: relative;
  border-radius: 18px;
  border: 1.5px solid;
  overflow: hidden;
  display: flex; align-items: center; gap: 4px;
  /* El fondo de la tienda se ve por detrás, así que las tarjetas necesitan
     cuerpo propio: sin esto los textos se leían sobre la ilustración. */
  box-shadow: 0 8px 24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
}
.tienda-cofre__arte{
  position: relative; flex: 0 0 42%;
  display: flex; align-items: center; justify-content: center;
  min-height: 118px; padding: 10px 4px;
}
.tienda-cofre__halo{
  position: absolute; width: 130px; height: 86px; border-radius: 50%;
  filter: blur(5px); pointer-events: none;
}
.tienda-cofre__arte img.store-chest{ position: relative; width: 100%; max-width: 158px; max-height: 112px; }
.tienda-cofre__info{ flex: 1; min-width: 0; padding: 12px 13px 12px 2px; }
.tienda-cofre__nombre{
  font-family: 'Cinzel', serif; font-size: 16px; font-weight: 900;
  color: #fff8e0; text-shadow: 0 2px 6px rgba(0,0,0,.9); margin-bottom: 2px;
}
.tienda-cofre__garantia{ font-size: 12.5px; color: rgba(255,255,255,.78); margin-bottom: 1px; }
.tienda-cofre__resumen{ margin: 5px 0 11px; }
.tienda-cofre__dato{
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11.5px; font-weight: 700; padding: 1px 0;
}
.tienda-cofre__pct{ color: rgba(255,255,255,.8); font-weight: 800; flex-shrink: 0; }
.tienda-cofre__comprar{ width: 100%; font-size: 15px !important; padding: 12px !important; }
.tienda-cofre__comprar[disabled]{ opacity: .4; }
.tienda-cofre__falta{ text-align: center; font-size: 11px; font-weight: 700; margin-top: 6px; color: rgba(255,86,106,.9); }
.tienda-cofre__ver{
  width: 100%; margin-top: 10px; padding: 8px;
  background: transparent; border: none; cursor: pointer; font-family: inherit;
  color: rgba(255,255,255,.5); font-size: 12px; font-weight: 800;
}
.tienda-cofre__odds{
  margin-top: 4px; padding: 10px 12px; border-radius: 10px;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.08);
}
.tienda-cofre__odd{
  display: flex; justify-content: space-between;
  font-size: 12px; font-weight: 700; padding: 3px 0;
  color: rgba(255,255,255,.7);
}
.tienda-cofre__extra{
  margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 11px; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 4px;
}
@media (max-width: 360px){
  .tienda-cofre{ flex-direction: column; }
  .tienda-cofre__arte{ flex: none; width: 100%; }
  .tienda-cofre__info{ width: 100%; padding: 0 14px 14px; }
}

/* ══ INICIO: ONLINE manda ══
   Es el modo que sostiene el juego, así que ocupa más y las otras dos
   tarjetas quedan claramente por debajo. */
.home-mode-card--online{ padding: 18px 16px !important; }
.home-mode-card--online .home-mode-card__name{ font-size: 22px; letter-spacing: .02em; }
.home-mode-card--online img.home-mode-card__icon-img{ width: 62px !important; height: 62px !important; }
.home-mode-card--online .home-mode-card__desc{ font-size: 12px; }

/* ══ RESULTADO ══
   Lo que importa arriba y a mano; la clasificación, el pase y el historial
   detrás de "Ver detalles", que no todo el mundo los mira cada partida. */
.resultado-acciones{
  display: flex; flex-direction: column; gap: 10px;
  padding: 4px 20px 0; max-width: 420px; margin: 0 auto;
}
.resultado-acciones .btn-game{ font-size: 17px !important; padding: 16px !important; }
.resultado-acciones .btn-game-dark{ font-size: 14px !important; padding: 12px !important; }
.resultado-detalles{
  display: block; width: 100%; padding: 16px 20px 12px;
  background: transparent; border: none; cursor: pointer; font-family: inherit;
  color: rgba(255,255,255,.5); font-size: 13px; font-weight: 800;
}

/* ══ BARRA DE PARTIDA ══
   Antes había cuatro elementos fijos arriba: modo, ronda, fase y salir. La
   fase ya la cuenta la mesa (o predices, o tienes cartas que jugar), y el modo
   se sabe desde que entras. Queda la ronda, el tiempo y la salida. */
.pv-barra{
  position: relative; z-index: 5; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  background: rgba(0,0,0,.5);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.pv-barra__ronda{
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: 'Cinzel', serif; color: #ffd060;
  font-size: 14px; font-weight: 900; letter-spacing: .01em;
}
.pv-barra__sep{ opacity: .45; }
.pv-barra__cartas{ font-family: inherit; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.6); }
.pv-barra__dcha{ display: flex; align-items: center; gap: 8px; }
.pv-barra__reloj{
  font-size: 13px; font-weight: 900; color: rgba(255,255,255,.75);
  font-variant-numeric: tabular-nums;
}
.pv-barra__salir{
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55); font-size: 14px; line-height: 1;
  font-family: inherit; cursor: pointer;
}


/* ==========================================================================
   FONDO DE LA APLICACIÓN
   Una sola capa persistente, fuera del árbol que se repinta. La imagen del
   menú aparece y desaparece con opacidad según la pantalla, así que cambiar
   de sección no provoca ningún salto.
   ========================================================================== */
#fondo-app{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 100% 55% at 50% 0%,#1b2a45 0%,#0d1728 48%,#070d18 100%);
}
#fondo-app::before{
  content:""; position:absolute; inset:0;
  background-image:url('./assets/branding/fondo_menu_principal.webp');
  background-size:cover; background-position:center top;
  opacity:0; transition:opacity .32s ease;
}
/* Velo de legibilidad: la ilustración se ve, pero el texto de encima sigue
   leyéndose. Sin esto habría que elegir entre fondo bonito o interfaz legible. */
#fondo-app::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle 320px at 50% 12%,rgba(201,168,76,.16),transparent 70%),
    linear-gradient(180deg,rgba(4,8,18,.30) 0%,rgba(4,8,18,.52) 55%,rgba(4,8,18,.86) 100%);
}
body[data-screen="home"] #fondo-app::before,
body[data-screen="play"] #fondo-app::before,
body[data-screen="online"] #fondo-app::before{opacity:1}


/* ==========================================================================
   PANEL DE PREDICCIÓN
   La decisión que define la partida. Todas las opciones se ven a la vez: si no
   caben en una fila, bajan a la siguiente en vez de salirse por el lado.
   ========================================================================== */
.panel-prediccion{
  padding:10px 14px calc(10px + var(--safe-bottom,0px));
  background:linear-gradient(180deg,rgba(24,16,2,.94) 0%,rgba(4,4,6,.97) 100%);
  backdrop-filter:blur(12px);
  border-top:1.5px solid rgba(201,168,76,.42);
}
.panel-prediccion__cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:9px}
.panel-prediccion__pregunta{
  font-size:15px;font-weight:900;color:#ffd060;
  font-family:'Cinzel','Palatino Linotype',Georgia,serif;letter-spacing:.02em;
  text-shadow:0 2px 6px rgba(0,0,0,.8);line-height:1.2;
}
.panel-prediccion__apunte{font-size:11px;color:rgba(255,232,180,.62);font-weight:600;margin-top:2px}
.panel-prediccion__reloj{
  font-size:19px;font-weight:900;color:#ff566a;font-variant-numeric:tabular-nums;
  flex-shrink:0;text-shadow:0 2px 6px rgba(0,0,0,.9);line-height:1.2;
}
.panel-prediccion__opciones{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(46px,1fr));
  gap:7px;margin-bottom:10px;
}
.panel-prediccion .predict-btn{
  position:relative;height:50px;border-radius:12px;
  border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);
  color:#fff8e0;font-family:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s,box-shadow .12s,background .12s,border-color .12s;
}
.panel-prediccion .predict-btn__num{font-size:21px;font-weight:900;line-height:1}
.panel-prediccion .predict-btn--word .predict-btn__num{font-size:15px}
.panel-prediccion .predict-btn.selected{
  border-color:#ffd060;background:rgba(255,208,96,.24);color:#ffd060;
  transform:translateY(-3px);box-shadow:0 6px 18px rgba(255,208,96,.4);
}
.panel-prediccion .predict-btn.forbidden{
  border-color:rgba(255,86,106,.35);background:rgba(80,0,0,.45);
  color:rgba(255,180,180,.4);cursor:not-allowed;
}
/* El número prohibido se explica solo, sin un aviso aparte debajo. */
.panel-prediccion .predict-btn.forbidden .predict-btn__num{text-decoration:line-through}
.panel-prediccion .predict-btn__veto{
  position:absolute;top:3px;right:5px;font-size:9px;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;color:#ff566a;
}
.panel-prediccion__confirmar{
  width:100%;height:50px;border-radius:13px;border:2px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.28);
  font-size:15px;font-weight:900;font-family:inherit;
  letter-spacing:.03em;cursor:not-allowed;transition:transform .12s,box-shadow .12s;
}
.panel-prediccion__confirmar:not([disabled]){
  border-color:#ffd060;background:linear-gradient(135deg,#c9a84c,#ffd060);
  color:#1a0800;cursor:pointer;box-shadow:0 4px 16px rgba(201,168,76,.4);
}
.panel-prediccion__confirmar:not([disabled]):active{transform:translateY(1px)}


/* ==========================================================================
   VS AMIGOS — primero se elige cómo, luego se configura
   ========================================================================== */
/* Dos tarjetas grandes y una línea. La decisión es "con quién estás", y se
   toma de un vistazo: por eso ocupan la pantalla en vez de apoyarse arriba. */
.amigos-elige{
  display:flex;flex-direction:column;gap:14px;
  /* Cabecera arriba y barra inferior abajo: el alto útil es lo que queda
     entre las dos, o el aviso acaba debajo de la barra. */
  padding:36px 14px 8px;
  min-height:calc(100dvh - 200px);box-sizing:border-box;
}
.amigos-elige__hueco{flex:1 1 auto;min-height:0}
.amigos-elige__hueco:last-of-type{flex-grow:1.25}
.amigos-opcion{
  position:relative;
  display:flex;align-items:center;gap:15px;width:100%;text-align:left;
  padding:22px 18px;border-radius:18px;cursor:pointer;font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  background:linear-gradient(150deg,rgba(18,51,34,.55),rgba(7,17,8,.75));
  border:1.5px solid rgba(94,232,164,.28);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .12s,border-color .12s;
}
.amigos-opcion:active{transform:scale(.98)}
.amigos-opcion[data-friends-view="online"]{
  background:linear-gradient(150deg,rgba(20,40,78,.6),rgba(6,10,22,.78));
  border-color:rgba(120,180,255,.3);
}
.amigos-opcion__icono{width:60px;height:60px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.amigos-opcion__img{width:100%;height:100%;object-fit:contain}
.amigos-opcion__texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.amigos-opcion__nombre{
  font-size:19px;font-weight:900;color:#fff8e0;letter-spacing:.06em;
  text-transform:uppercase;
  font-family:'Cinzel','Palatino Linotype',Georgia,serif;
}
.amigos-opcion__desc{font-size:13px;line-height:1.4;color:rgba(255,255,255,.68)}
.amigos-opcion__sinred{
  position:absolute;top:10px;right:12px;
  font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;background:rgba(255,86,106,.2);color:#ff566a;
}
.amigos-opcion__flecha{font-size:22px;color:rgba(255,255,255,.35);flex-shrink:0}
.amigos-elige__nota{margin:0;text-align:center;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.45)}
.sala-privada .amigos-volver,
.sala-unirse .amigos-volver{ min-height:44px; }
.amigos-volver{
  margin:2px 14px 0;padding:8px 12px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.65);font-size:12px;font-weight:700;font-family:inherit;
}


/* Cabecera de sección que además se pliega. Misma pinta que .section-head para
   que no parezca un botón extraño metido en medio. */
.panel-desplegable{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:transparent;border:none;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:900;color:var(--txt1,#fff8e0);
}
.panel-desplegable span:last-child{font-size:11px;color:rgba(255,255,255,.45)}

.coleccion-desglose{
  width:100%;padding:11px 14px;background:transparent;border:none;cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.45);text-align:left;
}


/* Título e insignia en el perfil: se eligen donde se llevan puestos. */
.perfil-ficha__grupo{
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:7px;
}
.perfil-fichas{display:flex;flex-wrap:wrap;gap:7px}
.perfil-ficha{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 12px;border-radius:11px;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.72);font-size:12px;font-weight:800;
  transition:border-color .12s,background .12s,color .12s;
}
.perfil-ficha__img{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.perfil-ficha--puesta{
  background:rgba(201,168,76,.16);border-color:rgba(201,168,76,.75);color:#ffd060;
}


/* ==========================================================================
   PREMIO DEL COFRE
   El objeto ocupa la pantalla. Antes se enseñaba dentro de una ficha pequeña
   y un reverso de carta acababa midiendo 90px de ancho: no parecía un premio.
   ========================================================================== */
.premio{
  position:relative;width:min(92vw,420px);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:18px 18px calc(18px + var(--safe-bottom,0px));
  border-radius:24px;text-align:center;
  background:linear-gradient(180deg,rgba(10,16,30,.72),rgba(4,8,18,.9));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.premio__cabecera{display:flex;flex-direction:column;align-items:center;gap:8px}
.premio-arte{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:min(44dvh,340px);margin:2px 0 4px;
}
/* El halo tiñe el premio con el color de su rareza sin tapar el dibujo. */
.premio-arte__halo{
  position:absolute;inset:-6% -10%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--luz,rgba(255,208,96,.5)) 0%,transparent 68%);
  opacity:.55;filter:blur(6px);
}
.premio-arte__img{
  position:relative;max-width:min(78vw,320px);max-height:100%;
  object-fit:contain;border-radius:12px;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.75));
  animation:premioEntra .42s cubic-bezier(.2,.9,.25,1.2) both;
}
.premio-arte__texto{
  position:relative;font-size:26px;font-weight:900;line-height:1.2;padding:0 16px;
  font-family:'Cinzel','Palatino Linotype',Georgia,serif;
  text-shadow:0 0 24px currentColor,0 4px 12px rgba(0,0,0,.9);
  animation:premioEntra .42s cubic-bezier(.2,.9,.25,1.2) both;
}
@keyframes premioEntra{
  from{opacity:0;transform:scale(.72)}
  to{opacity:1;transform:scale(1)}
}
.premio__nombre{
  margin:0;font-size:24px;font-weight:900;color:#fff8e0;line-height:1.15;
  font-family:'Cinzel','Palatino Linotype',Georgia,serif;
}
.premio__copia{margin:0;font-size:13px;color:rgba(255,255,255,.66);line-height:1.45}
.premio__acciones{display:flex;gap:10px;width:100%;margin-top:6px}
.premio__acciones button{flex:1;min-height:48px;font-size:15px}
.premio__acciones button[disabled]{opacity:.55;cursor:default}
.premio .pack-reveal__sello{position:absolute;top:6px;right:6px}

/* La primera vez que te toca cerrar la ronda, explicar por qué falta un número. */
.panel-prediccion__aviso{
  margin-bottom:9px;padding:9px 11px;border-radius:10px;
  background:rgba(139,0,0,.2);border:1px solid rgba(255,86,106,.3);
  font-size:11.5px;line-height:1.45;color:#ffd7d7;
}


/* ==========================================================================
   ANIMACIONES APAGADAS
   Vale el ajuste del juego y vale lo que pida el sistema operativo. No se
   quitan las animaciones: se dejan en un instante, para que lo que animaba
   hacia un estado final siga acabando en ese estado.
   ========================================================================== */
html.sin-animaciones *,
html.sin-animaciones *::before,
html.sin-animaciones *::after{
  animation-duration:.001ms !important;
  animation-delay:0s !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  transition-delay:0s !important;
  scroll-behavior:auto !important;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
}


/* ==========================================================================
   MARCO COMPETITIVO DEL AVATAR
   El arte tiene el centro transparente, así que se superpone sin tapar la
   foto. El hueco del marco es más pequeño que el lienzo, de ahí el desborde.
   ========================================================================== */
.pv-avatar-wrap--marco{ overflow:visible; margin-bottom:26px; }
.pv-avatar-marco{
  position:absolute; inset:-34%; width:168%; height:168%;
  object-fit:contain; pointer-events:none; z-index:3;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.55));
}
.perfil-ficha__img{ width:20px; height:20px; object-fit:contain; flex-shrink:0 }


/* La ficha de un objeto: el arte manda el ancho de su recuadro y la acción va
   centrada debajo, no empujada contra el borde derecho. */
.collectible-actions{
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  text-align:center;
}
.collectible-actions .btn-game,
.collectible-actions .btn-game-dark{ width:100%; max-width:260px; }


/* En la ficha de un objeto todo va centrado: las etiquetas también, que se
   quedaban pegadas al borde izquierdo mientras el nombre y el botón no. */
#collectible-modal-bg .collectible-card__tags{ justify-content:center; }
#collectible-modal-bg .collectible-card__header{ justify-content:space-between; }
#collectible-modal-bg .collectible-card p{ text-align:center; }


/* El nivel que se puede reclamar lleva un botón de verdad: "¡Tap!" no dice
   qué pasa al tocarlo, y el reclamado se lee de un vistazo. */
.battle-track-card__reclamar{
  /* .btn-game trae 100px de ancho mínimo y 22px de relleno: en una tarjeta de
     la pista se sale por los lados, así que aquí se ciñe a la tarjeta. */
  margin-top:5px;
  width:100%;
  min-width:0 !important;
  min-height:32px !important;
  padding:7px 4px !important;
  font-size:10px !important;
  letter-spacing:0 !important;
  border-radius:9px !important;
  box-sizing:border-box;
}
.battle-track-card__hecho{
  margin-top:5px; font-size:10px; font-weight:800; color:var(--green,#5ee8a4);
}
.battle-track-card__falta{
  margin-top:5px; font-size:10px; font-weight:700; color:rgba(255,255,255,.28);
}


/* ==========================================================================
   CARTAS EN LA MESA
   Cada carta se queda junto a quien la jugó, entre su sitio y el centro. En
   un montón central no se sabía de quién era cada una, y en la ronda de una
   carta —donde ves las de los demás y no la tuya— era una adivinanza.
   ========================================================================== */
.pv-mesa-cartas{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.pv-tcard-slot{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.pv-tcard-slot__nombre{
  font-size:9px; font-weight:800; padding:2px 7px; border-radius:999px;
  white-space:nowrap; backdrop-filter:blur(4px);
}


/* ==========================================================================
   MANO DE UN RIVAL
   Cinco reversos en miniatura ocupaban una fila entera para decir "le quedan
   cinco cartas". Se dice con un reverso y el número.
   ========================================================================== */
.pv-seat__hand{ height:22px !important; gap:3px; }
.pv-seat__hand img{ width:15px !important; }
.pv-seat__cuenta{
  font-size:11px; font-weight:900; color:rgba(255,240,214,.85);
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}

/* ══════════════════════════════════════════════════════════════
   LOGROS
   Treinta y uno seguidos en una lista plana no se leen. Agrupados por
   familia, con su cuenta, y el gran logro aparte al final con sus ocho
   requisitos a la vista.
   ══════════════════════════════════════════════════════════════ */
.logros-lista{ padding:12px; display:grid; gap:14px; max-width:520px; margin:0 auto; width:100%; box-sizing:border-box; }
.logro-grupo{ display:grid; gap:8px; }
.logro-grupo__cabecera{
  display:flex; align-items:center; gap:8px; padding:0 2px 2px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.logro-grupo__titulo{ font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,208,96,.85); }
.logro-grupo__cuenta{ margin-left:auto; font-size:11px; font-weight:800; color:var(--txt3); }
.logro-grupo__marca{
  font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; color:#c89aff;
  background:rgba(200,154,255,.14); border:1px solid rgba(200,154,255,.34);
}
/* La rama avanzada se distingue: son los desafíos de arriba del todo. */
.logro-grupo--avanzada .logro-grupo__titulo{ color:#c89aff; }
.logro-grupo--avanzada .logro-grupo__cabecera{ border-bottom-color:rgba(200,154,255,.3); }
.logro-grupo--final .logro-grupo__titulo{ color:#ffd060; }
.logro-grupo--final .logro-grupo__cabecera{ border-bottom-color:rgba(255,208,96,.4); }

.logro{
  padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08);
  opacity:.78;
}
.logro--hecho{ opacity:1; border-color:rgba(94,232,164,.4); background:rgba(94,232,164,.06); }
.logro__cabecera{ display:flex; align-items:center; gap:8px; }
.logro__marca{ font-size:15px; line-height:1; }
.logro__nombre{ flex:1; font-size:14px; font-weight:900; color:var(--txt); }
.logro--hecho .logro__nombre{ color:#5ee8a4; }
.logro__titulo{ font-size:9.5px !important; }
.logro__cuenta{ margin-top:6px; font-size:11.5px; color:var(--txt2); }
.logro__barra{ margin-top:5px; height:5px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.logro__barra > div{ height:100%; background:linear-gradient(90deg,#c9a84c,#ffd060); }
.logro--hecho .logro__barra > div{ background:#5ee8a4; }

.logro-reqs{ display:flex; flex-wrap:wrap; gap:5px; padding:2px; }
.logro-req{
  font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px;
  color:var(--txt3); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
}
.logro-req--hecho{ color:#5ee8a4; background:rgba(94,232,164,.12); border-color:rgba(94,232,164,.34); }

/* ══════════════════════════════════════════════════════════════
   TUTORIAL
   Se aprende jugando: mesa, cartas y vidas de verdad, con el texto
   justo y siempre debajo de lo que hay que mirar. Misma paleta azul y
   dorada que el resto del juego.
   ══════════════════════════════════════════════════════════════ */
.tut-pantalla{
  min-height:100dvh; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0a1220 0%,#0d1626 55%,#070d18 100%);
  padding:max(10px,env(safe-area-inset-top)) 0 max(14px,env(safe-area-inset-bottom));
}
.tut-cabecera{ display:flex; align-items:center; gap:12px; padding:6px 16px 0; }
.tut-progreso{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.08); overflow:hidden; }
.tut-progreso > div{ height:100%; background:linear-gradient(90deg,#c9a84c,#ffd060); transition:width .35s ease; }
.tut-saltar{
  flex-shrink:0; background:transparent; border:none; font-family:inherit; cursor:pointer;
  color:rgba(255,255,255,.5); font-size:12px; font-weight:800; padding:8px 4px;
  text-decoration:underline; text-underline-offset:4px;
}
.tut-cuerpo{ flex:1; display:flex; align-items:center; justify-content:center; padding:8px 18px; }
.tut-escena{ width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }

.tut-dice{ margin:0; font-size:15px; line-height:1.55; color:rgba(255,255,255,.78); }
.tut-dice strong{ color:#ffd060; }
.tut-dice--grande{ font-size:19px; font-weight:900; color:#5ee8a4; }
.tut-pista{ margin:0; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,208,96,.75); animation:tutLatido 1.8s ease-in-out infinite; }
@keyframes tutLatido{ 0%,100%{opacity:.55} 50%{opacity:1} }
.tut-clave{ margin:0; font-size:14px; font-weight:900; color:#ff9db0; }
.tut-cta{ width:100%; max-width:320px; margin-top:4px; }

.tut-vidas{ display:flex; gap:6px; justify-content:center; }
.tut-carta{
  padding:0; border-radius:9px; overflow:hidden; border:2px solid rgba(255,255,255,.14);
  background:#0b1322; cursor:default; flex-shrink:0; transition:transform .15s ease, box-shadow .15s ease;
}
.tut-carta img{ width:100%; height:100%; object-fit:cover; display:block; }
.tut-carta[data-tut-jugar]{ cursor:pointer; }
.tut-carta[data-tut-jugar]:active{ transform:translateY(-6px) scale(1.03); }
.tut-carta--resaltada{ box-shadow:0 0 0 2px rgba(255,208,96,.5),0 8px 22px rgba(0,0,0,.5); animation:tutResalta 1.9s ease-in-out infinite; }
@keyframes tutResalta{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.tut-carta--oculta{ display:flex; align-items:center; justify-content:center; border-style:dashed; }
.tut-mano{ display:flex; gap:10px; justify-content:center; }

.tut-ejemplos{ display:grid; gap:8px; width:100%; }
.tut-ejemplo{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  font-size:14px; color:rgba(255,255,255,.8);
}
.tut-ejemplo--bien{ border-color:rgba(94,232,164,.32); }
.tut-ejemplo--mal{ border-color:rgba(255,86,106,.32); }
.tut-ejemplo__saldo{ font-weight:900; font-size:13px; white-space:nowrap; }
.tut-ejemplo__saldo--bien{ color:#5ee8a4; }
.tut-ejemplo__saldo--mal{ color:#ff566a; }

.tut-rivales{ display:flex; gap:10px; justify-content:center; }
.tut-rival{
  display:flex; flex-direction:column; align-items:center; gap:2px; min-width:74px;
  padding:7px 12px; border-radius:11px; background:rgba(4,8,18,.6); border:1px solid rgba(255,255,255,.08);
}
.tut-rival span{ font-size:10.5px; color:var(--txt3); font-weight:700; }
.tut-rival strong{ font-size:17px; color:#ffd060; line-height:1; }

.tut-preds{ display:flex; gap:8px; justify-content:center; }
.tut-pred{
  width:56px; height:56px; border-radius:14px; font-family:inherit; cursor:pointer;
  font-size:20px; font-weight:900; color:#fff8e0;
  background:linear-gradient(180deg,rgba(48,30,13,.9),rgba(20,12,5,.94));
  border:1.5px solid rgba(206,163,74,.5);
}
.tut-pred:active{ transform:scale(.94); }
.tut-pred--bloqueada{ color:rgba(255,255,255,.28); border-color:rgba(255,86,106,.4); background:rgba(255,86,106,.07); position:relative; }
.tut-pred--bloqueada::after{
  content:""; position:absolute; left:14%; right:14%; top:50%; height:2px;
  background:rgba(255,86,106,.7); transform:rotate(-18deg);
}

.tut-mesa{ display:flex; gap:14px; justify-content:center; align-items:flex-end; min-height:100px; }
.tut-mesa__jugada{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.tut-mesa__jugada span{ font-size:11px; font-weight:800; color:var(--txt3); }
.tut-mesa__jugada--gana span{ color:#5ee8a4; }
.tut-mesa__jugada--gana .tut-carta{ box-shadow:0 0 0 2px rgba(94,232,164,.55); }

.tut-marca{ font-size:13px; font-weight:900; padding:7px 16px; border-radius:999px; }
.tut-marca--bien{ color:#5ee8a4; background:rgba(94,232,164,.12); border:1px solid rgba(94,232,164,.32); }
.tut-marca--mal{ color:#ffb47d; background:rgba(255,150,80,.1); border:1px solid rgba(255,150,80,.3); }

.tut-marcador{ display:flex; gap:12px; }
.tut-marcador > div{
  min-width:96px; padding:11px 14px; border-radius:13px; text-align:center;
  background:rgba(4,8,18,.62); border:1px solid rgba(255,255,255,.09);
}
.tut-marcador span{ display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt3); }
.tut-marcador strong{ display:block; font-size:26px; font-family:'Cinzel',serif; color:#ffd060; line-height:1.15; }

.tut-cegada{ display:grid; gap:9px; width:100%; max-width:300px; }
.tut-apuesta{
  padding:15px; border-radius:14px; font-family:inherit; cursor:pointer;
  font-size:15px; font-weight:900; color:#fff8e0;
  background:linear-gradient(180deg,rgba(48,30,13,.92),rgba(20,12,5,.95));
  border:1.5px solid rgba(206,163,74,.5);
}
.tut-apuesta:active{ transform:scale(.97); }

.tut-patron{ display:flex; align-items:center; gap:5px; justify-content:center; }
.tut-patron__n{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel',serif; font-size:16px; font-weight:900; color:#ffd060;
  background:rgba(4,8,18,.6); border:1px solid rgba(201,168,76,.32);
}
.tut-patron__n--repite{ opacity:.5; }
.tut-patron__flecha{ color:rgba(255,255,255,.3); font-size:13px; }
.tut-final-reglas{ display:grid; gap:7px; width:100%; }
.tut-final-reglas > div{
  display:flex; align-items:center; gap:9px; justify-content:center;
  font-size:13.5px; color:rgba(255,255,255,.75);
}
.tut-titulo-final{ margin:6px 0 0; font-family:'Cinzel',serif; font-size:22px; color:#ffd060; }
.tut-lema{ margin:0; font-size:13px; color:rgba(255,255,255,.55); letter-spacing:.02em; }

/* ── Regalo de bienvenida ────────────────────────────────────────────────── */
.regalo-pantalla{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 90% 50% at 50% 20%,#1b2a45 0%,#0d1728 50%,#070d18 100%);
  padding:max(16px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));
}
.regalo-cuerpo{ width:100%; max-width:360px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.regalo-eyebrow{ font-size:11.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,208,96,.75); }
.regalo-cofre{ animation:regaloFlota 3.4s ease-in-out infinite; }
.regalo-cofre__img{ width:min(58vw,210px); height:auto; display:block; filter:drop-shadow(0 16px 34px rgba(0,0,0,.6)); }
@keyframes regaloFlota{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.regalo-titulo{ margin:0; font-family:'Cinzel',serif; font-size:27px; color:#ffd060; }
.regalo-copy{ margin:0; font-size:14px; color:rgba(255,255,255,.62); }
.regalo-aviso{ margin:0; font-size:12.5px; line-height:1.5; color:#ffb47d; background:rgba(255,150,80,.09); border:1px solid rgba(255,150,80,.28); border-radius:12px; padding:10px 13px; }
.regalo-abrir{ width:100%; margin-top:6px; }

/* ── Tutorial: la corrección ─────────────────────────────────────────────────
   Elegir mal no bloquea ni avanza: cuenta lo que habría pasado y devuelve el
   turno. Tiene que leerse como un consejo, no como un error del sistema. */
.tut-error{
  display:flex; align-items:flex-start; gap:10px; text-align:left;
  padding:12px 14px; border-radius:13px;
  background:rgba(255,150,80,.09); border:1px solid rgba(255,150,80,.3);
  animation:tutEntra .22s ease-out both;
}
.tut-error__marca{
  flex-shrink:0; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  color:#ffb47d; background:rgba(255,150,80,.15); border-radius:999px; padding:4px 9px; margin-top:1px;
}
.tut-error p{ margin:0; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.82); }
.tut-error strong{ color:#ffd060; }
.tut-error em{ color:#ffb47d; font-style:normal; }
@keyframes tutEntra{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.tut-carta--apagada{ opacity:.45; }
.tut-mesa__gana{ font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#5ee8a4; font-style:normal; }

/* El castigo de Marco: que se vea que una baza de más cuesta una vida. */
.tut-castigo{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 16px; border-radius:14px; width:100%;
  background:rgba(255,86,106,.07); border:1px solid rgba(255,86,106,.28);
}
.tut-castigo__quien{ font-size:12.5px; color:rgba(255,255,255,.72); }
.tut-castigo__quien strong{ color:#ffd060; }
.tut-castigo__saldo{ font-size:13px; font-weight:900; color:#ff566a; }

/* Tabla de la ronda: quién predijo qué y quién lo pagó. */
.tut-tabla{ display:grid; gap:6px; width:100%; }
.tut-fila{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:11px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); font-size:12.5px;
}
.tut-fila--falla{ border-color:rgba(255,86,106,.32); background:rgba(255,86,106,.06); }
.tut-fila__nombre{ font-weight:900; color:#fff8e0; min-width:52px; text-align:left; }
.tut-fila__dato{ color:var(--txt3); }
.tut-fila__dato strong{ color:#ffd060; }
.tut-fila__saldo{ margin-left:auto; font-weight:900; color:#5ee8a4; white-space:nowrap; }
.tut-fila--falla .tut-fila__saldo{ color:#ff566a; }
.tut-mesa--vacia{ align-items:center; justify-content:center; }
.tut-mesa__espera{
  font-size:11.5px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,208,96,.6); padding:26px 22px; border-radius:14px;
  border:1.5px dashed rgba(255,208,96,.28);
}

/* ── Elegir nombre ──────────────────────────────────────────────────────────
   Paso obligatorio del estreno. Una sola tarea en pantalla. El contenido va
   arriba, no centrado: con el teclado de Android desplegado, centrar deja el
   campo debajo de las teclas. */
.pantalla-nombre{
  min-height:100dvh;
  display:flex; flex-direction:column; align-items:center;
  background:linear-gradient(180deg,#0a1220 0%,#0d1626 55%,#070d18 100%);
  padding:max(28px, env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.nombre-caja{ width:100%; max-width:420px; margin:auto 0; }
.nombre-logo{ width:104px; height:auto; margin:0 auto 16px; display:block; filter:drop-shadow(0 4px 20px rgba(0,0,0,.8)); }
.nombre-titulo{ margin:0 0 8px; text-align:center; font-size:22px; font-weight:900; color:#fff; letter-spacing:-.02em; line-height:1.25; }
.nombre-copy{ margin:0 0 22px; text-align:center; font-size:13.5px; color:rgba(255,255,255,.58); line-height:1.55; }
.nombre-label{ display:block; margin:0 0 7px 2px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.nombre-campo{
  width:100%; padding:15px 16px; border-radius:14px;
  border:2px solid rgba(201,168,76,.45); background:rgba(4,8,18,.75);
  color:#fff8e0; font-size:18px; font-weight:800; font-family:inherit;
  text-align:center; letter-spacing:.01em; outline:none;
  transition:border-color .15s ease;
}
.nombre-campo:focus{ border-color:rgba(201,168,76,.85); }
.nombre-campo--mal{ border-color:rgba(255,86,106,.7); }
.nombre-pista{ margin:7px 2px 0; font-size:11.5px; color:rgba(255,255,255,.38); text-align:center; }
.nombre-aviso{ min-height:17px; margin-top:6px; text-align:center; font-size:12.5px; font-weight:700; line-height:1.35; color:rgba(255,86,106,.95); }
.nombre-aviso[data-tono="libre"]{ color:rgba(94,232,164,.95); }
.nombre-aviso[data-tono="comprobando"]{ color:rgba(255,255,255,.42); }
.nombre-legal{
  display:flex; align-items:flex-start; gap:10px; margin:14px 2px 0;
  color:rgba(255,255,255,.68); font-size:11.5px; line-height:1.45; cursor:pointer;
}
.nombre-legal input{ width:18px; height:18px; flex:0 0 18px; margin:0; accent-color:#c9a84c; }
.nombre-legal a{ color:#ffd060; text-underline-offset:2px; }
.nombre-continuar{ width:100%; margin-top:22px; padding:16px; font-size:15px; font-weight:900; letter-spacing:.06em; }
.nombre-legal + .nombre-continuar{ margin-top:14px; }
/* Deshabilitado tiene que verse deshabilitado: sin el rojo del juego, un
   botón apagado sigue pidiendo que lo pulsen. */
.nombre-continuar:disabled{ opacity:.5; filter:grayscale(.85) brightness(.75); cursor:default; box-shadow:none; }
.nombre-pie{ margin:12px 0 0; text-align:center; font-size:11px; color:rgba(255,255,255,.33); line-height:1.5; }

/* ── Elegir cómo empezar ───────────────────────────────────────────────────
   Va después del nombre y antes del cofre. Dos decisiones grandes, legibles
   con una mano y sin convertir la bienvenida en otro menú. */
.eleccion-pantalla{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:max(28px, env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 20%,rgba(201,168,76,.13),transparent 34%),
    linear-gradient(180deg,#0a1220 0%,#0d1626 55%,#070d18 100%);
}
.eleccion-caja{ width:100%; max-width:420px; text-align:center; }
.eleccion-logo{ width:112px; height:auto; display:block; margin:0 auto 18px; filter:drop-shadow(0 4px 20px rgba(0,0,0,.8)); }
.eleccion-eyebrow{ margin-bottom:7px; color:#ffd060; font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.eleccion-titulo{ margin:0 0 8px; color:#fff; font-size:25px; font-weight:900; letter-spacing:-.025em; }
.eleccion-copy{ margin:0 auto 24px; max-width:330px; color:rgba(255,255,255,.58); font-size:13.5px; line-height:1.55; }
.eleccion-opciones{ display:grid; gap:12px; }
.eleccion-opcion{
  width:100%; min-height:78px; display:flex; align-items:center; gap:13px;
  padding:14px 15px; border:1px solid rgba(255,255,255,.14); border-radius:17px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  color:#fff; font-family:inherit; text-align:left; cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.18); transition:transform .14s ease,border-color .14s ease,background .14s ease;
}
.eleccion-opcion--principal{ border-color:rgba(201,168,76,.58); background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(255,208,96,.07)); }
.eleccion-opcion:active{ transform:scale(.985); }
.eleccion-opcion:focus-visible{ outline:3px solid rgba(255,208,96,.55); outline-offset:3px; }
.eleccion-opcion__icono{
  width:43px; height:43px; flex:0 0 43px; display:grid; place-items:center;
  border-radius:13px; background:rgba(201,168,76,.16); border:1px solid rgba(201,168,76,.4);
  color:#ffd060; font-size:22px; font-weight:900;
}
.eleccion-opcion__icono--salto{ background:rgba(94,232,164,.1); border-color:rgba(94,232,164,.32); color:#5ee8a4; }
.eleccion-opcion__texto{ display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.eleccion-opcion__texto strong{ font-size:14px; font-weight:900; letter-spacing:.055em; }
.eleccion-opcion__texto small{ color:rgba(255,255,255,.5); font-size:12px; font-weight:600; }
.eleccion-opcion__flecha{ color:rgba(255,255,255,.38); font-size:28px; line-height:1; }
.eleccion-pie{ margin:17px 16px 0; color:rgba(255,255,255,.35); font-size:11px; line-height:1.5; }

/* ══ INICIO — Punto 3 ══════════════════════════════════════════════════════
   Jerarquía: logo, identidad, ONLINE, los dos modos secundarios, temporada y
   misiones. El objetivo es que la pantalla se llene sin convertirse en un
   panel de mandos: tres bloques y una barra. */
.play-screen{
  display: flex; flex-direction: column;
  gap: 8px;
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.play-screen > *{ position: relative; z-index: 2; }
.home-head{ text-align: center; }
.home-head__logo{
  display: block; margin: 0 auto; width: 128px; height: auto; object-fit: contain;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,.9)) drop-shadow(0 0 40px rgba(180,120,10,.5));
}
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Identidad ── */
.home-identidad{
  margin: 0 12px; padding: 8px 12px; border-radius: 14px;
  background: rgba(0,0,0,.6); border: 1.5px solid rgba(200,155,20,.4);
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(8px);
}
.home-identidad__avatar-btn{
  flex-shrink: 0; background: none; border: none; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.home-identidad__avatar{
  display: block; width: 46px; height: 46px; border-radius: 11px; overflow: hidden;
  border: 2px solid #c8860a; background: rgba(255,255,255,.08);
}
.home-identidad__avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.home-identidad__texto{ flex: 1; min-width: 0; }
.home-identidad__nombre{
  font-size: 15px; font-weight: 900; line-height: 1.2; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-identidad__titulo{
  font-size: 10.5px; font-weight: 700; color: rgba(255,210,80,.82); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-identidad__liga{
  font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.72); margin-top: 2px;
  display: flex; align-items: center; gap: 4px;
}
.home-identidad__monedas{
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0;
  font-size: 12.5px; font-weight: 900; color: #fff8e0;
}
.home-identidad__monedas span{ display: inline-flex; align-items: center; gap: 4px; }

/* ── Modos ── */
.home-modos{ padding: 0 12px; display: flex; flex-direction: column; gap: 8px; }
.home-modos__secundarios{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* ONLINE es el modo principal: más alto, más contraste y un brillo que se
   mueve despacio para que la vista caiga ahí primero. */
.home-mode-card--principal{
  padding: 16px 16px !important;
  border-width: 2px;
  box-shadow: 0 6px 26px rgba(201,168,76,.22), inset 0 1px 0 rgba(255,255,255,.1);
}
.home-mode-card--principal .home-mode-card__name{ font-size: 19px; letter-spacing: .08em; }
.home-mode-card--principal .home-mode-card__desc{ font-size: 12px; color: rgba(255,235,190,.8); }
.home-mode-card--principal .home-mode-card__icon-wrap{ width: 54px; height: 54px; }
.home-mode-card--principal img.home-mode-card__icon-img{ width: 46px !important; height: 46px !important; }
.home-mode-card--principal .home-mode-card__arrow{ font-size: 26px; color: rgba(255,208,96,.7); }
.home-mode-card--principal::after{
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgba(255,225,150,.16) 48%, transparent 66%);
  transform: translateX(-100%);
  animation: homeBrilloOnline 5.5s ease-in-out infinite;
}
@keyframes homeBrilloOnline{
  0%, 62% { transform: translateX(-100%); }
  86%, 100% { transform: translateX(100%); }
}
.home-modos__secundarios .home-mode-card{ flex-direction: column; align-items: flex-start; gap: 7px; }
.home-modos__secundarios .home-mode-card__name{ font-size: 13px; }
.home-modos__secundarios .home-mode-card__desc{ font-size: 10.5px; white-space: normal; }

/* ── Tarjetas de temporada y misiones ── */
.home-tarjetas{ padding: 0 12px; display: flex; flex-direction: column; gap: 8px; }
.home-tarjeta{
  width: 100%; box-sizing: border-box; text-align: left; font-family: inherit;
  padding: 11px 14px; border-radius: 14px;
  background: rgba(4,8,18,.66); border: 1.5px solid rgba(201,168,76,.26);
  backdrop-filter: blur(10px);
  display: block;
}
button.home-tarjeta{ cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.home-tarjeta:active{ transform: scale(.985); }
.home-tarjeta__cab{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.home-tarjeta__eyebrow{
  font-size: 10.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: #ffd060;
}
.home-tarjeta__flecha{ font-size: 22px; font-weight: 300; color: rgba(255,208,96,.55); flex-shrink: 0; }

.home-season__titular{
  font-size: 14px; font-weight: 900; color: #fff8e0; margin-top: 3px;
  display: flex; align-items: center; gap: 5px;
}
.home-season__premio{
  font-size: 11.5px; font-weight: 900; color: #fff8e0;
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.home-season__barra{
  height: 9px; margin-top: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.09);
}
.home-season__relleno{
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,#a06a08,#ffd060 65%,#fff0b0);
  box-shadow: 0 0 10px rgba(255,208,96,.45);
  transition: width .6s cubic-bezier(.22,.8,.3,1);
}
.home-season__barra--cima .home-season__relleno{ background: linear-gradient(90deg,#7a5bd8,#c09aff 60%,#f0e2ff); box-shadow: 0 0 10px rgba(192,154,255,.5); }
.home-season__pie{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.72); line-height: 1.35;
}
.home-season__pie strong{ color: #ffd060; font-weight: 900; }
.home-season__pct{ font-size: 11.5px; font-weight: 800; color: rgba(255,255,255,.45); flex-shrink: 0; }
.home-season--nueva{ border-color: rgba(201,168,76,.4); }

.home-misiones, .home-diaria{ display: flex; align-items: center; gap: 11px; }
.home-misiones__contador{
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: baseline; justify-content: center; gap: 1px;
  background: rgba(255,208,96,.12); border: 1.5px solid rgba(255,208,96,.32);
}
.home-misiones__contador strong{ font-size: 17px; font-weight: 900; color: #ffd060; line-height: 1; }
.home-misiones__contador span{ font-size: 11px; font-weight: 800; color: rgba(255,208,96,.6); }
.home-misiones__texto{ flex: 1; min-width: 0; }
.home-misiones__linea{
  font-size: 12px; color: rgba(255,255,255,.72); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-misiones__aviso{
  background: #ff566a; color: #fff; padding: 1px 6px; border-radius: 6px;
  font-size: 9.5px; letter-spacing: .02em; margin-left: 4px; text-transform: none;
}
.home-misiones--lista{ border-color: rgba(255,86,106,.5); background: rgba(255,86,106,.08); }
.home-misiones--lista .home-misiones__contador{ background: rgba(255,86,106,.14); border-color: rgba(255,86,106,.4); }
.home-misiones--lista .home-misiones__contador strong{ color: #ff8fa0; }

.home-diaria .home-tarjeta__eyebrow{ white-space: nowrap; }
.home-diaria__premio{ font-weight: 900; color: #fff8e0; display: inline-flex; align-items: center; gap: 3px; vertical-align: -2px; }
.home-diaria__btn{ flex-shrink: 0; padding: 9px 16px !important; font-size: 13px !important; min-width: 0; width: auto !important; }

/* Empuja el contenido hacia arriba cuando sobra pantalla, sin estirar nada. */
.home-relleno{ flex: 1 1 auto; min-height: 4px; }

/* Móviles cortos: se aprieta lo justo, sin bajar de tamaños legibles. */
@media (max-height: 700px){
  .home-head__logo{ width: 104px; }
  .play-screen{ gap: 6px; }
  .home-mode-card--principal{ padding: 13px 14px !important; }
  .home-mode-card--principal .home-mode-card__name{ font-size: 17px; }
  .home-tarjeta{ padding: 9px 13px; }
}
@media (max-height: 620px){
  .home-head__logo{ width: 88px; }
  .home-identidad__avatar{ width: 40px; height: 40px; }
  .home-mode-card--principal .home-mode-card__icon-wrap{ width: 46px; height: 46px; }
  .home-mode-card--principal img.home-mode-card__icon-img{ width: 38px !important; height: 38px !important; }
}

@media (prefers-reduced-motion: reduce){
  .home-mode-card--principal::after{ animation: none; opacity: 0; }
  .home-season__relleno{ transition: none; }
}

/* ── Barra inferior: los inactivos tienen que leerse ──
   Estaban al 62-72 % de opacidad y encima desaturados: parecían apagados,
   no simplemente no seleccionados. El activo sigue ganando por brillo y
   tamaño, que es de donde debe venir la jerarquía. */
.bottom-nav__tab:not(.bottom-nav__tab--active) img.bottom-nav__icon{
  opacity: .9;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)) saturate(.95);
}
.bottom-nav__label{ color: rgba(242,194,48,.78); }
.bottom-nav__tab--active .bottom-nav__label{ color: var(--rgold); }

/* Reparto del espacio sobrante y escalado por altura de pantalla. */
.home-relleno{ flex: 1 1 auto; min-height: 0; }
.home-mode-card--principal .home-mode-card__text{ text-align: left; }
@media (min-height: 780px){
  .play-screen{ gap: 12px; }
  .home-head__logo{ width: 146px; }
  .home-identidad{ padding: 11px 13px; }
  .home-identidad__avatar{ width: 52px; height: 52px; }
  .home-mode-card--principal{ padding: 22px 16px !important; }
  .home-modos__secundarios .home-mode-card{ padding: 15px 14px !important; }
  .home-tarjeta{ padding: 14px 15px; }
  .home-season__barra{ height: 10px; }
}
@media (max-height: 660px){
  .play-screen{ gap: 5px; padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .home-head__logo{ width: 92px; }
  .home-identidad{ padding: 6px 11px; }
  .home-identidad__avatar{ width: 40px; height: 40px; }
  .home-mode-card--principal{ padding: 11px 14px !important; }
  .home-modos__secundarios .home-mode-card{ padding: 9px 12px !important; }
  .home-tarjeta{ padding: 8px 12px; }
  .home-misiones__contador{ width: 36px; height: 36px; }
}

/* El bloque queda algo por encima del centro: un poco menos de aire arriba
   que abajo, que es donde está la barra. */
.home-relleno:first-child{ flex-grow: .6; }
@media (max-height: 660px){
  .play-screen{ gap: 4px; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .home-head__logo{ width: 84px; }
  .home-tarjeta{ padding: 7px 12px; }
  .home-season__pie{ margin-top: 4px; font-size: 11.5px; }
  .home-season__barra{ margin-top: 6px; }
}

/* ══ VS CPU ════════════════════════════════════════════════════════════════
   Dos decisiones y a jugar. Antes eran dos paneles con títulos, un párrafo de
   recompensas y dos botones apilados: parecía un formulario de ajustes. */
.cpu-setup{ display: flex; flex-direction: column; min-height: 100dvh; }
.cpu-cuerpo{
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  width: 100%; max-width: 420px; margin: 0 auto; box-sizing: border-box;
  /* .screen ya reserva abajo el sitio de la barra; arriba hay que compensar
     su desplazamiento negativo o el subtítulo queda debajo de la cabecera. */
  padding: 36px 16px 0;
}
.cpu-lema{
  margin: 0 0 20px; text-align: center;
  font-size: 13.5px; color: rgba(255,255,255,.55);
}
.cpu-bloque{ margin-bottom: 20px; }
.cpu-bloque__titulo{
  margin: 0 0 9px 2px; font-size: 11px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,208,96,.75);
  font-family: inherit;
}
.cpu-bloque__pie{ margin: 8px 0 0; text-align: center; font-size: 11.5px; color: rgba(255,255,255,.42); }

/* Selector segmentado: una sola pieza, no cinco botones sueltos. */
.cpu-segmentado{
  display: flex; padding: 4px; gap: 4px; border-radius: 14px;
  background: rgba(4,8,18,.72); border: 1.5px solid rgba(255,255,255,.09);
}
.cpu-segmento{
  flex: 1; padding: 13px 0; border: none; border-radius: 10px;
  background: transparent; cursor: pointer; font-family: inherit;
  font-size: 17px; font-weight: 900; color: rgba(255,255,255,.5);
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, color .16s ease, transform .1s ease;
}
.cpu-segmento:active{ transform: scale(.94); }
.cpu-segmento--activo{
  background: linear-gradient(160deg, rgba(201,168,76,.34), rgba(201,168,76,.14));
  color: #ffd060;
  box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16);
}

/* Dificultad: tres tarjetas, la elegida se ve de lejos. */
.cpu-niveles{ display: flex; gap: 8px; }
.cpu-nivel{
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  padding: 13px 6px; border-radius: 13px; cursor: pointer; font-family: inherit;
  border: 2px solid rgba(255,255,255,.09); background: rgba(4,8,18,.6);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .16s ease, background .16s ease, transform .1s ease;
}
.cpu-nivel:active{ transform: scale(.96); }
.cpu-nivel__nombre{
  font-size: 13.5px; font-weight: 900; letter-spacing: .04em;
  color: rgba(255,255,255,.72); font-family: 'Cinzel', serif;
}
.cpu-nivel__desc{ font-size: 10.5px; line-height: 1.3; color: rgba(255,255,255,.38); }
.cpu-nivel--activo{
  border-color: rgba(201,168,76,.85);
  background: linear-gradient(160deg, rgba(201,168,76,.22), rgba(46,123,255,.1) 90%);
  box-shadow: 0 4px 16px rgba(201,168,76,.18), inset 0 1px 0 rgba(255,255,255,.1);
}
.cpu-nivel--activo .cpu-nivel__nombre{ color: #ffd060; }
.cpu-nivel--activo .cpu-nivel__desc{ color: rgba(255,208,96,.72); }

.cpu-recompensas{
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 12px; border-radius: 11px; text-align: center;
  background: rgba(255,208,96,.05); border: 1px solid rgba(255,208,96,.16);
  font-size: 11.5px; color: rgba(255,208,96,.72); line-height: 1.45;
}
.cpu-recompensas__tope{ color: rgba(255,255,255,.42); font-size: 11px; }

/* Empuja el botón abajo cuando sobra pantalla y se encoge cuando no. */
/* En pantallas altas el hueco se reparte en vez de acumularse encima del
   botón: queda centrado y sigue cómodo para el pulgar. */
.cpu-relleno{ flex: 1 1 auto; min-height: 14px; }
.cpu-relleno--bajo{ flex-grow: .55; min-height: 0; }
.cpu-jugar{ width: 100%; padding: 17px !important; font-size: 16px !important; font-weight: 900; letter-spacing: .1em; }
.cpu-resumen{ margin: 10px 0 0; text-align: center; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.5); }

@media (max-height: 660px){
  .cpu-cuerpo{ padding-top: 30px; }
  .cpu-lema{ margin-bottom: 13px; }
  .cpu-bloque{ margin-bottom: 14px; }
  .cpu-segmento{ padding: 11px 0; }
  .cpu-nivel{ padding: 10px 6px; }
  .cpu-jugar{ padding: 14px !important; }
}

/* ══ SALA PRIVADA ══════════════════════════════════════════════════════════
   Primero jugar, después gestionar amigos. Las dos acciones mandan y la
   sección social va plegada debajo, no repartida por la pantalla. */
.sala-acciones{ display:flex; flex-direction:column; gap:12px; padding:22px 14px 16px; }
.sala-accion{
  position:relative; display:flex; align-items:center; gap:15px; width:100%; text-align:left;
  padding:20px 18px; border-radius:18px; cursor:pointer; font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  border:1.5px solid rgba(255,255,255,.1); background:rgba(4,8,18,.6);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .12s, border-color .16s;
}
.sala-accion:active{ transform:scale(.98); }
.sala-accion:disabled{ opacity:.45; filter:grayscale(.8); cursor:default; }
.sala-accion--crear{
  border-color:rgba(201,168,76,.5);
  background:linear-gradient(150deg, rgba(201,168,76,.24) 0%, rgba(6,10,22,.75) 62%);
  box-shadow:0 6px 24px rgba(201,168,76,.2), inset 0 1px 0 rgba(255,255,255,.09);
}
.sala-accion--crear .sala-accion__nombre{ color:#ffd060; }
.sala-accion--unirse{
  border-color:rgba(120,180,255,.3);
  background:linear-gradient(150deg, rgba(20,40,78,.6), rgba(6,10,22,.78));
}
.sala-accion__icono{ width:54px; height:54px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.sala-accion__img{ width:100%; height:100%; object-fit:contain; }
.sala-accion__texto{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.sala-accion__nombre{
  font-size:18px; font-weight:900; color:#fff8e0; letter-spacing:.06em; text-transform:uppercase;
  font-family:'Cinzel','Palatino Linotype',Georgia,serif;
}
.sala-accion__desc{ font-size:12.5px; line-height:1.35; color:rgba(255,255,255,.62); }
.sala-accion__flecha{ font-size:22px; font-weight:300; color:rgba(255,255,255,.35); flex-shrink:0; }

/* ── Amigos, plegable ── */
.amigos-panel{ margin:0 14px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.09); background:rgba(4,8,18,.5); overflow:hidden; }
.amigos-panel__cab{
  display:flex; align-items:center; gap:9px; padding:14px 15px; cursor:pointer;
  list-style:none; -webkit-tap-highlight-color:transparent;
}
.amigos-panel__cab::-webkit-details-marker{ display:none; }
.amigos-panel__titulo{
  flex:1; font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,208,96,.8);
}
.amigos-panel__cuenta{ font-size:12px; font-weight:800; color:rgba(255,255,255,.4); }
.amigos-panel__aviso{
  font-size:11px; font-weight:800; padding:2px 8px; border-radius:6px;
  background:#ff566a; color:#fff;
}
.amigos-panel__chevron{ font-size:19px; color:rgba(255,255,255,.35); transform:rotate(90deg); transition:transform .18s ease; }
.amigos-panel[open] .amigos-panel__chevron{ transform:rotate(-90deg); }
.amigos-panel__cuerpo{ padding:0 12px 12px; display:flex; flex-direction:column; gap:10px; }
.amigos-panel__etiqueta{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:6px; }
.amigos-panel__espera,
.amigos-panel__vacio{ margin:0; font-size:11.5px; line-height:1.5; color:rgba(255,255,255,.45); }
.amigos-buscar{ display:flex; gap:8px; }
.amigos-buscar .input{ flex:1; min-width:0; }
.amigos-buscar button{ flex-shrink:0; padding:11px 14px !important; font-size:13px !important; }
.amigos-fila{
  display:flex; align-items:center; gap:8px; padding:10px 11px; border-radius:11px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); margin-bottom:6px;
}
.amigos-fila:last-child{ margin-bottom:0; }
.amigos-fila--solicitud{ background:rgba(94,232,164,.09); border-color:rgba(94,232,164,.28); }
.amigos-fila__texto{ flex:1; min-width:0; }
.amigos-fila__nombre{ font-size:13.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.amigos-fila__meta{ font-size:11px; color:rgba(255,255,255,.45); margin-top:2px; display:flex; align-items:center; gap:4px; }
.amigos-fila__btn{ flex-shrink:0; padding:8px 12px !important; font-size:12px !important; min-height:36px; }

/* ── Unirme con código ── */
.sala-unirse__cuerpo{ padding:26px 20px; max-width:420px; margin:0 auto; width:100%; box-sizing:border-box; }
.sala-unirse__titulo{
  margin:0 0 6px; text-align:center; font-size:21px; font-weight:900; color:#fff;
  letter-spacing:.04em; text-transform:uppercase; font-family:'Cinzel','Palatino Linotype',Georgia,serif;
}
.sala-unirse__copy{ margin:0 0 22px; text-align:center; font-size:13px; color:rgba(255,255,255,.55); }
.sala-unirse__campo{
  width:100%; box-sizing:border-box; padding:20px 16px; border-radius:16px;
  border:2px solid rgba(201,168,76,.5); background:rgba(4,8,18,.78);
  color:#fff8e0; font-family:inherit; font-size:30px; font-weight:900;
  text-align:center; letter-spacing:.28em; text-transform:uppercase; outline:none;
  transition:border-color .15s ease;
}
.sala-unirse__campo:focus{ border-color:rgba(201,168,76,.9); }
.sala-unirse__campo::placeholder{ color:rgba(255,255,255,.2); letter-spacing:.18em; font-size:22px; }
.sala-unirse__entrar{ width:100%; margin-top:18px; padding:17px !important; font-size:16px !important; font-weight:900; letter-spacing:.1em; }
.sala-unirse__entrar:disabled{ opacity:.5; filter:grayscale(.85) brightness(.78); box-shadow:none; }

/* ── Lobby de la sala ── */
.sala-lobby{ display:flex; flex-direction:column; min-height:100dvh; }
.sala-codigo{
  margin:16px 14px 14px; padding:20px 16px; border-radius:18px; text-align:center;
  border:1.5px solid rgba(201,168,76,.45);
  background:linear-gradient(150deg, rgba(201,168,76,.18), rgba(6,10,22,.75) 65%);
}
.sala-codigo__eyebrow{ font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,208,96,.8); }
.sala-codigo__valor{
  margin:8px 0 14px; font-size:38px; font-weight:900; color:#fff8e0;
  letter-spacing:.2em; font-family:'Cinzel','Palatino Linotype',Georgia,serif;
}
.sala-codigo__acciones{ display:flex; gap:10px; justify-content:center; }
.sala-codigo__btn{ padding:11px 22px !important; font-size:13px !important; }
.sala-jugadores{ padding:0 14px; }
.sala-jugadores__cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.sala-jugadores__cab .mode-btn{ min-height:44px !important; min-width:40px; }
.sala-jugadores__cab h3{ margin:0; font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,208,96,.75); }
.sala-jugadores__rejilla{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sala-jugador{
  padding:12px; border-radius:12px; min-height:62px;
  background:rgba(4,8,18,.6); border:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; justify-content:center; gap:4px;
}
.sala-jugador--listo{ border-color:rgba(94,232,164,.45); background:rgba(94,232,164,.09); }
.sala-jugador--vacio{ align-items:center; justify-content:center; border-style:dashed; background:rgba(255,255,255,.02); color:rgba(255,255,255,.35); font-size:12px; }
.sala-jugador__nombre{ font-size:13.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sala-jugador__tu{ font-size:10px; font-weight:800; color:#ffd060; }
.sala-jugador__estado{ font-size:11.5px; color:rgba(255,255,255,.5); }
.sala-jugador--listo .sala-jugador__estado{ color:#5ee8a4; font-weight:800; }
.sala-relleno{ flex:1 1 auto; min-height:16px; }
/* La barra inferior es fija y tapa lo que quede debajo: el pie de la sala
   tiene que quedar por encima de ella. */
.sala-pie{ padding:0 14px calc(118px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:9px; }
.sala-pie__principal{ width:100%; padding:17px !important; font-size:15px !important; font-weight:900; letter-spacing:.08em; }
.sala-pie__principal:disabled{ opacity:.5; filter:grayscale(.85) brightness(.78); box-shadow:none; }
.sala-pie__fila{ display:flex; gap:9px; }
.sala-pie__fila button{ flex:1; padding:12px !important; font-size:13px !important; }

/* ══ ONLINE ════════════════════════════════════════════════════════════════ */
.online-buscar{
  width:100%; max-width:300px; padding:17px 32px !important;
  font-size:17px !important; font-weight:900; letter-spacing:.09em;
}
.online-buscar:disabled{ opacity:.45; filter:grayscale(.85) brightness(.75); box-shadow:none; }
.online-sinred{ margin-top:9px; font-size:12px; color:rgba(255,86,106,.85); font-weight:700; }
.online-plegable{
  border-radius:14px; border:1px solid rgba(255,255,255,.09);
  background:rgba(4,8,18,.5); overflow:hidden;
}
.online-plegable__cab{
  display:flex; align-items:center; gap:9px; padding:13px 15px; cursor:pointer;
  list-style:none; -webkit-tap-highlight-color:transparent;
}
.online-plegable__cab::-webkit-details-marker{ display:none; }
.online-plegable__titulo{
  flex:1; font-size:12px; font-weight:900; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(255,208,96,.8);
}
.online-plegable__chevron{ font-size:19px; color:rgba(255,255,255,.35); transform:rotate(90deg); transition:transform .18s ease; }
.online-plegable[open] .online-plegable__chevron{ transform:rotate(-90deg); }
.online-mipuesto{
  border-radius:12px; background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.28);
}
.online-top200{
  margin-top:6px; padding:9px 14px; border-radius:10px;
  background:rgba(94,232,164,.07); border:1px solid rgba(94,232,164,.18);
  font-size:12px; color:#5ee8a4; font-weight:700;
}

/* ══ BUSCANDO PARTIDA ══════════════════════════════════════════════════════
   Sólo personas. La cola del servidor no lleva bots, así que aquí no hay
   nada que insinúe lo contrario: ni huecos etiquetados, ni cuentas atrás. */
.mm-pantalla{
  display:flex; flex-direction:column; min-height:100dvh;
  background:linear-gradient(180deg,#0e1c33 0%,#0a1424 55%,#050a14 100%);
}
.mm-cuerpo{
  flex:1; display:flex; flex-direction:column; align-items:center;
  width:100%; max-width:420px; margin:0 auto; box-sizing:border-box;
  padding:max(30px, env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
}
.mm-eyebrow{
  font-size:13px; font-weight:900; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,208,96,.85); text-align:center;
}
.mm-insignia{ position:relative; width:132px; height:132px; margin:22px 0 4px; display:flex; align-items:center; justify-content:center; }
.mm-insignia__img{ width:94px; height:94px; object-fit:contain; filter:drop-shadow(0 6px 22px rgba(0,0,0,.7)); animation:mmLatido 2.6s ease-in-out infinite; }
.mm-insignia__aro{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(255,208,96,.4);
  animation:mmOnda 2.6s ease-out infinite;
}
.mm-insignia__aro--tarde{ animation-delay:1.3s; }
@keyframes mmOnda{
  0%   { transform:scale(.62); opacity:.75; }
  100% { transform:scale(1.12); opacity:0; }
}
@keyframes mmLatido{
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.05); }
}
.mm-liga{
  font-size:15px; font-weight:900; letter-spacing:.06em; color:#fff8e0;
  font-family:'Cinzel','Palatino Linotype',Georgia,serif;
}
.mm-cuenta{ margin-top:16px; font-size:14px; color:rgba(255,255,255,.6); font-weight:700; }
.mm-cuenta strong{ font-size:20px; color:#ffd060; font-weight:900; }
.mm-huecos{ width:100%; margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.mm-hueco{
  display:flex; align-items:center; gap:12px;
  padding:10px 13px; border-radius:13px; min-height:60px;
  background:rgba(255,255,255,.03); border:1.5px dashed rgba(255,255,255,.1);
}
.mm-hueco[data-ocupado="1"]{
  background:rgba(4,8,18,.62); border-style:solid; border-color:rgba(255,255,255,.16);
  animation:mmEntra .34s cubic-bezier(.2,.9,.3,1.2);
}
.mm-hueco--yo{ border-color:rgba(201,168,76,.55); background:rgba(201,168,76,.1); }
@keyframes mmEntra{
  from{ opacity:0; transform:translateY(9px) scale(.97); }
  to  { opacity:1; transform:none; }
}
.mm-hueco__avatar{
  width:40px; height:40px; flex-shrink:0; border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.12);
}
.mm-hueco[data-ocupado="1"] .mm-hueco__avatar{ border-color:rgba(255,208,96,.4); }
.mm-hueco__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.mm-hueco__nombre{
  flex:1; min-width:0; font-size:14px; font-weight:800; color:#fff8e0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mm-hueco[data-ocupado="0"] .mm-hueco__nombre{ color:rgba(255,255,255,.32); font-weight:600; font-size:13px; }
.mm-hueco__tu{ font-size:10px; font-weight:800; color:#ffd060; }
.mm-puntos::after{ content:'…'; animation:mmPuntos 1.4s steps(4,end) infinite; }
@keyframes mmPuntos{ 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'…'} }
.mm-relleno{ flex:1 1 auto; min-height:18px; }
.mm-espera{ font-size:12px; color:rgba(255,255,255,.4); margin-bottom:11px; }
.mm-cancelar{ width:100%; padding:15px !important; font-size:14px !important; font-weight:800; letter-spacing:.05em; }

@media (max-height: 700px){
  .mm-insignia{ width:104px; height:104px; margin:14px 0 2px; }
  .mm-insignia__img{ width:74px; height:74px; }
  .mm-huecos{ margin-top:12px; gap:6px; }
  .mm-hueco{ min-height:52px; padding:8px 12px; }
  .mm-hueco__avatar{ width:34px; height:34px; }
}
@media (prefers-reduced-motion: reduce){
  .mm-insignia__aro, .mm-insignia__img, .mm-hueco[data-ocupado="1"], .mm-puntos::after{ animation:none; }
  .mm-insignia__aro{ opacity:.35; }
}

/* Enlace secundario de la pantalla de nombre: recuperar cuenta y volver. */
.nombre-secundario{
  display:block; width:100%; margin-top:16px; padding:12px 8px;
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:700; color:rgba(255,208,96,.72);
  text-decoration:underline; text-underline-offset:3px;
  -webkit-tap-highlight-color:transparent;
}
.nombre-secundario:active{ color:#ffd060; }
.nombre-campo--codigo{ font-size:19px; letter-spacing:.06em; }
.nombre-campo--codigo::placeholder{ font-size:15px; letter-spacing:.04em; color:rgba(255,255,255,.2); }

/* ══ TIENDA — fondo e integración ══════════════════════════════════════════
   El marco dorado del fondo pide aire por los lados: si las tarjetas lo
   pisan, la ilustración deja de leerse como marco y parece un recorte. */
.store-screen{
  position: relative; background: #060a16;
  /* El contenedor de pantalla lleva margen lateral y padding arriba: aquí
     estorban, porque la cabecera tiene que ir de borde a borde y pegada al
     techo. El aire lateral lo ponen los hijos. */
  /* #app lleva 12px de aire a cada lado para todas las pantallas: la tienda
     los recupera con margen negativo, sin tocar el resto del juego. */
  margin-left: -12px !important; margin-right: -12px !important;
  width: calc(100% + 24px) !important; max-width: none !important;
  padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
}
.store-screen .pack-result, .store-screen > .panel{ margin-left: 22px; margin-right: 22px; }
.tienda-fondo{
  /* Entre las dos barras: son marcos, y un marco al que le faltan dos lados
     no enmarca nada. El alto de las barras se descuenta aquí. */
  --marco-arriba: calc(54px + env(safe-area-inset-top));
  --marco-abajo: calc(100px + env(safe-area-inset-bottom));
  position: fixed; left: 0; right: 0;
  top: var(--marco-arriba); bottom: var(--marco-abajo);
  z-index: 0; pointer-events: none;
  background: #060a16 url('./assets/branding/fondo_tienda.webp') center center / cover no-repeat;
}
/* Velo bajo el contenido: oscurece el centro, donde va el texto, y deja
   respirar los bordes, que es donde está el marco dorado. */
.tienda-fondo::after{
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 78% 62% at 50% 50%, rgba(6,10,22,.62) 0%, rgba(6,10,22,.34) 72%, rgba(6,10,22,.12) 100%);
}
.store-screen > *:not(.tienda-fondo){ position: relative; z-index: 1; }
.tienda-cofres{
  display: flex; flex-direction: column; gap: 14px;
  /* El marco dorado del fondo ocupa unos 20px por lado: si las tarjetas lo
     pisan, deja de leerse como marco. */
  padding: 4px 34px 12px;
}

/* La cabecera ocupaba media pantalla de ancho y flotaba baja: la regla
   general la pinta como una píldora flotante con margen. En la tienda manda
   de lado a lado y se pega arriba, respetando la zona segura del sistema. */
body .store-screen .topbar.topbar--clean{
  width: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: none !important; border-right: none !important; border-top: none !important;
  border-bottom: 1px solid rgba(242,194,48,.28) !important;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px !important;
  background: linear-gradient(180deg, rgba(6,10,22,.96), rgba(6,10,22,.82)) !important;
  backdrop-filter: blur(10px);
  position: sticky; top: 0;
  /* Por encima de las tarjetas: al bajar pasan por debajo en vez de taparla. */
  z-index: 6;
}
/* Fija al viewport: el body y #app tienen su propio aire arriba, así que
   "pegada al techo" con sticky se quedaba a 28px del borde. */
body .store-screen .topbar.topbar--clean{
  position: fixed !important; top: 0 !important; left: 0; right: 0;
}
.store-screen{ --tienda-barra: calc(58px + env(safe-area-inset-top)); }
.store-screen .tienda-cofres{ padding-top: calc(var(--tienda-barra) + 8px); }
body .store-screen .topbar.topbar--clean .topbar__main{ width: 100%; }
/* El enlace de probabilidades se pulsa con el pulgar: 32px se queda corto. */
.tienda-cofre__ver{ min-height: 44px; }

/* ══ CABECERA DE PANTALLA PRINCIPAL ════════════════════════════════════════
   Tienda, Colección, Pase y Perfil son destinos de la barra inferior: no se
   vuelve de ellas a ningún sitio, así que no llevan flecha. Sin ese botón, el
   título quedaba pegado al borde izquierdo como un texto suelto; centrado y
   con la tipografía del juego se lee como el nombre de la pantalla. */
body .topbar--principal .topbar__main{
  display: grid !important;
  /* Dos columnas: el título se centra en el hueco que dejan los recursos, no
     en la pantalla. Centrarlo en la pantalla lo hacía chocar con las monedas
     en cuanto el título era un poco largo. */
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center;
  gap: 8px !important;
}
body .topbar--principal .topbar__leading{
  grid-column: 1;
  justify-content: center;
  min-width: 0;
}
body .topbar--principal .topbar__actions{
  grid-column: 2;
  justify-content: flex-end;
  min-width: 0;
  /* Los recursos van en una sola línea: al comprimirse saltaban a dos y la
     cabecera crecía al doble de alto. Quien cede es el título, no ellos. */
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
body .topbar--principal .topbar__actions > *{ flex-wrap: nowrap !important; flex-shrink: 0; }
body .topbar--principal .topbar__leading{ overflow: hidden; }
body .topbar--principal .topbar__title strong{ overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
body .topbar--principal .topbar__title strong{
  font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif;
  font-size: 20px !important;
  font-weight: 900;
  letter-spacing: .06em;
  color: #fff8e0;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 0 22px rgba(242,194,48,.28);
}
/* Un filete dorado corto debajo: da el remate sin añadir otra línea de texto. */
body .topbar--principal .topbar__title{
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
body .topbar--principal .topbar__title::after{
  content: '';
  width: 42px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(242,194,48,.85), transparent);
}
/* En pantallas estrechas el título cede antes que los recursos. */
@media (max-width: 370px){
  body .topbar--principal .topbar__title strong{ font-size: 18px !important; }
}

/* ══ APERTURA DE COFRES — espectáculo por rareza ═══════════════════════════
   Cuatro escalones. La diferencia estaba calculada en el código pero no
   llegaba a la pantalla: un raro y un legendario se revelaban igual.
     1 raro · 2 súper raro · 3 épico · 4 legendario
   La tensión previa es idéntica en todos —ahí no se sabe todavía qué sale—;
   lo que cambia es el estallido y el premio ya revelado. */

/* — El estallido se tiñe de lo que va a salir — */
.cofre-escena--nivel2 .cofre-escena__destello{ transform: translate(-50%,-50%) scale(0); animation-duration: .62s; }
.cofre-escena--nivel2 .cofre-escena__halo{ opacity: .9; }
.cofre-escena--nivel3 .cofre-escena__destello{ animation-duration: .72s; filter: brightness(1.25); }
.cofre-escena--nivel3 .cofre-escena__halo{ opacity: 1; filter: brightness(1.2); }
.cofre-escena--nivel4 .cofre-escena__destello{ animation-duration: .85s; filter: brightness(1.5) saturate(1.2); }
.cofre-escena--nivel4 .cofre-escena__halo{ opacity: 1; filter: brightness(1.35) saturate(1.15); }
/* Onda expansiva: sólo en épico y legendario, y sólo una. */
.cofre-escena--nivel3 .cofre-escena__cofre::after,
.cofre-escena--nivel4 .cofre-escena__cofre::after{
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; border: 2px solid rgba(var(--luz), .8);
  animation: cofreOnda .7s cubic-bezier(.2,.8,.3,1) both; pointer-events: none;
}
.cofre-escena--nivel4 .cofre-escena__cofre::after{ animation-duration: .95s; border-width: 3px; }
@keyframes cofreOnda{
  from{ transform: scale(.2); opacity: .95; }
  to  { transform: scale(3.4); opacity: 0; }
}

/* — El premio ya revelado — */
/* Nivel 1, raro: tal cual estaba. Nada que añadir. */
.premio--nivel2 .premio-arte__halo{ opacity: .78; filter: blur(8px); }
.premio--nivel3 .premio-arte__halo{ opacity: .95; filter: blur(10px); animation: premioLatido 2.4s ease-in-out infinite; }
.premio--nivel4 .premio-arte__halo{ opacity: 1; filter: blur(12px) saturate(1.2); animation: premioLatido 1.9s ease-in-out infinite; }
@keyframes premioLatido{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
/* Rayos girando detrás del objeto: épico los tiene tenues, legendario marcados. */
.premio__rayos{
  position: absolute; left: 50%; top: 42%;
  width: min(150vw, 620px); height: min(150vw, 620px);
  transform: translate(-50%,-50%);
  pointer-events: none; z-index: 0; opacity: .18;
  background: repeating-conic-gradient(
    from 0deg,
    var(--tinta-rareza, #ffd060) 0deg 6deg,
    transparent 6deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%);
          mask-image: radial-gradient(circle, #000 12%, transparent 62%);
  animation: premioRayos 26s linear infinite;
}
.premio--nivel4 .premio__rayos{ opacity: .32; animation-duration: 18s; }
@keyframes premioRayos{ to{ transform: translate(-50%,-50%) rotate(360deg); } }
/* Marco del panel: cuanto mejor el premio, más presencia. */
.premio--nivel3{
  border-color: color-mix(in srgb, var(--tinta-rareza, #ffd060) 55%, transparent);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 34px -6px var(--tinta-rareza, #ffd060);
}
.premio--nivel4{
  border-width: 2px;
  border-color: color-mix(in srgb, var(--tinta-rareza, #ffd060) 85%, transparent);
  box-shadow: 0 24px 60px rgba(0,0,0,.65), 0 0 52px -4px var(--tinta-rareza, #ffd060);
}
.premio--nivel4 .premio__nombre{
  color: var(--tinta-rareza, #fff8e0);
  text-shadow: 0 0 22px color-mix(in srgb, var(--tinta-rareza, #ffd060) 60%, transparent), 0 2px 8px rgba(0,0,0,.9);
}
.premio--nivel4 .premio-arte__img{ animation: premioEntraFuerte .6s cubic-bezier(.18,.9,.22,1.35) both; }
@keyframes premioEntraFuerte{
  0%   { opacity: 0; transform: scale(.55) rotate(-6deg); }
  62%  { opacity: 1; transform: scale(1.09) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
/* Duplicado: una sola forma de decirlo, en el sitio donde se lee. */
.premio__duplicado{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,208,96,.12); border: 1px solid rgba(255,208,96,.35);
  color: #ffd060; font-size: 13px; font-weight: 900; letter-spacing: .03em;
}

@media (prefers-reduced-motion: reduce){
  .premio__rayos,
  .premio--nivel3 .premio-arte__halo,
  .premio--nivel4 .premio-arte__halo,
  .premio--nivel4 .premio-arte__img,
  .cofre-escena--nivel3 .cofre-escena__cofre::after,
  .cofre-escena--nivel4 .cofre-escena__cofre::after{ animation: none; }
  .cofre-escena--nivel3 .cofre-escena__cofre::after,
  .cofre-escena--nivel4 .cofre-escena__cofre::after{ display: none; }
}

/* ══ COLECCIÓN ═════════════════════════════════════════════════════════════
   Se viene a ver los cosméticos: el resumen cabe en dos líneas y la rejilla
   empieza casi arriba. Antes el progreso, las seis barras de rareza, los
   últimos obtenidos y el equipamiento ocupaban media pantalla. */
.inventory-screen{
  position: relative; background: #060a16;
  /* Igual que la tienda: #app mete 12px por lado y aquí la cabecera va de
     borde a borde. */
  margin-left: -12px !important; margin-right: -12px !important;
  /* El cuerpo de la página deja 28px por arriba para todas las pantallas.
     Aquí la cabecera es fija y esos 28 sólo alejan la rejilla, que es lo que
     se viene a ver. */
  margin-top: -28px !important;
  width: calc(100% + 24px) !important; max-width: none !important;
  padding-left: 0 !important; padding-right: 0 !important;
  --col-barra: calc(58px + env(safe-area-inset-top));
  padding-top: calc(var(--col-barra) + 48px) !important;
}
.coleccion-fondo{
  /* Entre las dos barras: son marcos, y un marco al que le faltan dos lados
     no enmarca nada. El alto de las barras se descuenta aquí. */
  --marco-arriba: calc(54px + env(safe-area-inset-top));
  --marco-abajo: calc(100px + env(safe-area-inset-bottom));
  position: fixed; left: 0; right: 0;
  top: var(--marco-arriba); bottom: var(--marco-abajo);
  z-index: 0; pointer-events: none;
  background: #060a16 url('./assets/branding/fondo_coleccion.webp') center center / cover no-repeat;
}
.coleccion-fondo::after{
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 78% 62% at 50% 50%, rgba(6,10,22,.66) 0%, rgba(6,10,22,.4) 72%, rgba(6,10,22,.14) 100%);
}
.inventory-screen > *:not(.coleccion-fondo){ position: relative; z-index: 1; }
body .inventory-screen .topbar.topbar--clean{
  position: fixed !important; top: 0 !important; left: 0; right: 0;
  width: auto !important; margin: 0 !important; border-radius: 0 !important;
  border-left: none !important; border-right: none !important; border-top: none !important;
  border-bottom: 1px solid rgba(242,194,48,.28) !important;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px !important;
  background: linear-gradient(180deg, rgba(6,10,22,.96), rgba(6,10,22,.82)) !important;
  backdrop-filter: blur(10px);
  /* Por encima de la rejilla: al bajar, las fichas pasan por debajo en vez de
     taparla. Las monedas y las gemas tienen que verse siempre. */
  z-index: 6 !important;
}

/* — Resumen — */
.col-resumen{
  margin: 0 22px 7px;
  padding: 9px 13px; border-radius: 14px;
  background: rgba(4,8,18,.66); border: 1px solid rgba(201,168,76,.22);
}
.col-resumen__linea{ display: flex; align-items: center; gap: 10px; }
.col-resumen__cifra{ display: flex; align-items: baseline; gap: 4px; flex-shrink: 0; }
.col-resumen__cifra strong{ font-size: 21px; font-weight: 900; color: #ffd060; font-family: 'Cinzel', serif; line-height: 1; }
.col-resumen__cifra span{ font-size: 12px; color: rgba(255,255,255,.45); font-weight: 700; }
.col-resumen__barra{ flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.col-resumen__barra > div{
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg,#c9a84c,#ffd060 60%,#ffee88);
  box-shadow: 0 0 10px rgba(255,208,96,.4); transition: width .6s;
}
.col-resumen__pct{ flex-shrink: 0; font-size: 12px; font-weight: 900; color: #ffd060; }
.col-resumen__puestos{ display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.col-puesto{
  flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 5px 8px; border-radius: 9px; cursor: pointer; font-family: inherit;
  background: rgba(255,255,255,.04); border: 1px solid rgba(201,168,76,.34);
  -webkit-tap-highlight-color: transparent;
}
.col-puesto img{ width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.col-puesto span{ font-size: 15px; color: rgba(255,255,255,.28); }
.col-puesto__que{
  font-size: 10px !important; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.55) !important; white-space: nowrap;
}
.col-puesto--vacio{ border-style: dashed; border-color: rgba(255,255,255,.12); }
.col-resumen__mas{
  flex-shrink: 0; min-height: 44px; padding: 7px 11px; border-radius: 9px; cursor: pointer; font-family: inherit;
  background: transparent; border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,208,96,.8); font-size: 11px; font-weight: 800;
}
.col-rarezas{ margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 5px; }
.col-rarezas__fila{ display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; }
.col-rarezas__fila > span:first-child{ width: 72px; flex-shrink: 0; }
.col-rarezas__barra{ flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.col-rarezas__barra i{ display: block; height: 100%; border-radius: 3px; }
.col-rarezas__n{ flex-shrink: 0; min-width: 44px; text-align: right; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.col-rarezas__n i{ opacity: .45; font-style: normal; }
.col-rarezas__dups{ margin-top: 4px; font-size: 10.5px; color: rgba(255,255,255,.45); }
.col-rarezas__dups strong{ color: #ffd060; }

/* — Filtros — */
.col-tabs{ display: flex; gap: 4px; padding: 0 22px; overflow-x: auto; scrollbar-width: none; }
.col-tabs::-webkit-scrollbar{ display: none; }
.col-tab{
  flex: 1; min-width: 0; min-height: 44px; padding: 7px 8px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 800; white-space: nowrap;
  background: rgba(4,8,18,.5); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.5); -webkit-tap-highlight-color: transparent;
}
.col-tab span{ display: block; font-size: 9.5px; font-weight: 700; opacity: .65; margin-top: 1px; }
.col-tab--activa{ background: rgba(201,168,76,.16); border-color: rgba(201,168,76,.55); color: #ffd060; }
.col-filtros{ display: flex; gap: 8px; align-items: center; padding: 6px 22px 4px; }
.col-buscar{ flex: 1; position: relative; min-width: 0; }
.col-buscar .input{ width: 100%; padding: 8px 8px 8px 28px; font-size: 13px; }
.col-tengo{ display: flex; gap: 4px; flex-shrink: 0; }
.col-tengo__btn{
  min-height: 44px; padding: 7px 10px; border-radius: 9px; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 800;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.5);
}
.col-tengo__btn--activo{ background: rgba(201,168,76,.14); border-color: rgba(201,168,76,.5); color: #ffd060; }

/* — Rejilla — */
.col-pista{ margin: 0; padding: 0 22px 4px; font-size: 9.5px; color: rgba(255,255,255,.38); text-align: center; }
.col-rejilla{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 22px 12px; }
.col-ficha{
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border-radius: 12px; cursor: pointer; font-family: inherit; text-align: center;
  background: rgba(4,8,18,.7); border: 1.5px solid var(--borde);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.col-ficha:active{ transform: scale(.97); }
.col-ficha__arte{
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; border-radius: 8px; overflow: hidden; background: rgba(2,5,12,.75);
}
.col-ficha__img{ width: 100%; height: 100%; object-fit: contain; }
.col-ficha__emoji{ font-size: 26px; }
.col-ficha__titulo{ font-size: 10px; font-weight: 900; line-height: 1.2; padding: 4px; }
/* Etiqueta del tipo: reversos y tapetes miden casi igual, y sin esto no hay
   forma de distinguirlos en la rejilla. Pequeña y sobre el arte. */
.col-ficha__tipo{
  position: absolute; left: 4px; top: 4px;
  padding: 1px 5px; border-radius: 4px;
  background: rgba(2,5,12,.72); border: 1px solid rgba(255,255,255,.12);
  font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.72); line-height: 1.5;
}
.col-ficha__check{
  position: absolute; right: 4px; top: 4px;
  width: 16px; height: 16px; border-radius: 5px;
  background: #c9a84c; color: #1a0800;
  font-size: 10px; font-weight: 900; line-height: 16px;
}
.col-ficha__nombre{
  /* Dos líneas fijas: "Reverso Clásico Rojo" no cabe en una a este ancho, y
     con altura fija todas las fichas de una fila miden lo mismo. */
  margin-top: 4px; font-size: 10px; font-weight: 800; line-height: 1.25;
  color: rgba(255,255,255,.85);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 25px;
}
.col-ficha__rareza{ font-size: 9.5px; font-weight: 800; color: var(--rareza); }
/* Lo que falta se distingue sin dejar de verse: el arte pierde color y algo
   de luz, pero se aprecia. Antes iba al 50 % de opacidad y con un velo negro
   encima: no se veía qué era. */
.col-ficha--falta .col-ficha__img{ filter: grayscale(.72) brightness(.72); }
.col-ficha--falta .col-ficha__nombre{ color: rgba(255,255,255,.5); }
.col-ficha--falta .col-ficha__rareza{ opacity: .6; }
.col-ficha--falta .col-ficha__arte::after{
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 6px, transparent 6px 12px);
}
.col-ficha--puesto{ box-shadow: 0 0 12px rgba(201,168,76,.28); }
.col-vacio{
  grid-column: 1 / -1; padding: 30px 20px; text-align: center;
  border-radius: 14px; background: rgba(4,8,18,.5); border: 1px dashed rgba(255,255,255,.12);
}
.col-vacio__titulo{ font-size: 13px; font-weight: 800; color: rgba(255,255,255,.65); margin-bottom: 4px; }
.col-vacio__copia{ font-size: 11px; color: rgba(255,255,255,.4); max-width: 230px; margin: 0 auto; }

/* ══ PASE DE BATALLA ═══════════════════════════════════════════════════════
   La cabecera ocupaba un tercio de pantalla para decir el nivel; ahora cabe
   en tres líneas y las recompensas empiezan casi arriba. */
.battle-screen{
  position: relative; background: #0a0620;
  margin-left: -12px !important; margin-right: -12px !important;
  margin-top: -28px !important;
  width: calc(100% + 24px) !important; max-width: none !important;
  padding-left: 0 !important; padding-right: 0 !important;
  --pase-barra: calc(58px + env(safe-area-inset-top));
  padding-top: calc(var(--pase-barra) + 48px) !important;
}
.pase-fondo{
  /* Entre las dos barras: son marcos, y un marco al que le faltan dos lados
     no enmarca nada. El alto de las barras se descuenta aquí. */
  --marco-arriba: calc(54px + env(safe-area-inset-top));
  --marco-abajo: calc(100px + env(safe-area-inset-bottom));
  position: fixed; left: 0; right: 0;
  top: var(--marco-arriba); bottom: var(--marco-abajo);
  z-index: 0; pointer-events: none;
  background: #0a0620 url('./assets/branding/fondo_pase.webp') center center / cover no-repeat;
}
.pase-fondo::after{
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 78% 62% at 50% 50%, rgba(10,6,32,.66) 0%, rgba(10,6,32,.4) 72%, rgba(10,6,32,.14) 100%);
}
.battle-screen > *:not(.pase-fondo){ position: relative; z-index: 1; }
body .battle-screen .topbar.topbar--clean{
  position: fixed !important; top: 0 !important; left: 0; right: 0;
  width: auto !important; margin: 0 !important; border-radius: 0 !important;
  border-left: none !important; border-right: none !important; border-top: none !important;
  border-bottom: 1px solid rgba(242,194,48,.28) !important;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px !important;
  background: linear-gradient(180deg, rgba(10,6,32,.96), rgba(10,6,32,.82)) !important;
  backdrop-filter: blur(10px);
  z-index: 6 !important;
}

/* — Cabecera de progreso — */
.pase-cabecera{
  margin: 0 22px 10px; padding: 11px 14px; border-radius: 14px;
  background: rgba(20,10,44,.66); border: 1px solid rgba(192,154,255,.26);
}
.pase-cabecera__linea{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.pase-cabecera__nivel{ display: flex; align-items: baseline; gap: 4px; }
.pase-cabecera__nivel strong{ font-size: 26px; font-weight: 900; line-height: 1; color: #ffd060; font-family: 'Cinzel', serif; text-shadow: 0 0 18px rgba(255,208,96,.45); }
.pase-cabecera__nivel span{ font-size: 13px; font-weight: 700; color: rgba(238,244,255,.42); }
.pase-cabecera__barra{ margin: 0; }
.pase-cabecera__pie{ display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 11px; font-weight: 700; color: rgba(238,244,255,.5); }
.pase-cabecera__pie span:last-child{ text-align: right; color: rgba(238,244,255,.4); }
.pase-reclamar{ padding: 8px 14px !important; font-size: 12px !important; min-height: 40px; }
.pase-regla{
  padding: 7px 16px 8px; border-bottom: 1px solid var(--border);
  font-size: 11px; color: rgba(255,255,255,.5); font-weight: 700; letter-spacing: .01em;
}
.pase-recompensas{ margin-left: 0 !important; margin-right: 0 !important; }

/* — Carrusel de recompensas — */
.battle-track{
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 12px 22px 16px; scrollbar-width: none;
}
.battle-track::-webkit-scrollbar{ display: none; }
.battle-nodo{
  scroll-snap-align: center;
  flex: 0 0 auto; width: 128px; min-height: 208px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 9px; border-radius: 16px; font-family: inherit; text-align: center;
  background: rgba(14,8,34,.72); border: 1.5px solid rgba(255,255,255,.1);
  -webkit-tap-highlight-color: transparent;
}
.battle-nodo__nivel{ font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: rgba(238,244,255,.55); }
.battle-nodo__hito{
  font-size: 8.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(255,208,96,.16); border: 1px solid rgba(255,208,96,.42); color: #ffd060;
}
.battle-nodo__arte{
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 92px; margin: 2px 0;
}
.battle-nodo__premio{
  font-size: 10.5px; font-weight: 800; line-height: 1.3; color: rgba(238,244,255,.8);
  display: flex; align-items: center; justify-content: center; gap: 3px; flex-wrap: wrap;
}
.battle-nodo__estado{
  margin-top: auto; padding-top: 6px;
  font-size: 10.5px; font-weight: 800; color: rgba(255,255,255,.4);
}
/* Estados */
.battle-nodo--actual{ border-color: rgba(201,168,76,.6); background: rgba(201,168,76,.1); }
.battle-nodo--actual .battle-nodo__nivel{ color: #ffd060; }
.battle-nodo--hecho{ border-color: rgba(94,232,164,.45); background: rgba(94,232,164,.07); }
.battle-nodo--hecho .battle-nodo__estado{ color: #5ee8a4; }
.battle-nodo--listo{
  cursor: pointer;
  border-color: rgba(255,208,96,.75); background: rgba(255,208,96,.12);
  box-shadow: 0 0 18px rgba(255,208,96,.2);
}
.battle-nodo--listo .battle-nodo__estado{ color: #ffd060; }
.battle-nodo--listo:active{ transform: scale(.97); }
/* Bloqueado: se sigue viendo qué es, con el candado encima y menos color. */
.battle-nodo--cerrado{ background: rgba(10,6,26,.6); border-color: rgba(255,255,255,.07); }
.battle-nodo--cerrado .battle-nodo__arte img{ filter: grayscale(.6) brightness(.7); }
.battle-nodo--cerrado .battle-nodo__premio{ color: rgba(238,244,255,.42); }
.battle-nodo__candado{
  position: absolute; right: 2px; bottom: 2px;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
}
.battle-nodo__candado-img{ width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,0,0,.7)); }
/* Hitos: más grandes y con marco propio. El 30 es el final del pase. */
.battle-nodo--hito{ width: 148px; min-height: 224px; border-color: rgba(255,208,96,.42); }
.battle-nodo--hito .battle-nodo__arte{ min-height: 106px; }
.battle-nodo--final{
  width: 176px; min-height: 250px;
  border-width: 2px; border-color: rgba(255,208,96,.85);
  background: linear-gradient(170deg, rgba(255,208,96,.18), rgba(14,8,34,.85) 62%);
  box-shadow: 0 0 34px -6px rgba(255,208,96,.65), inset 0 1px 0 rgba(255,255,255,.12);
}
.battle-nodo--final .battle-nodo__arte{ min-height: 124px; }
.battle-nodo--final .battle-nodo__nivel{ font-size: 13px; color: #ffd060; font-family: 'Cinzel', serif; letter-spacing: .1em; }
.battle-nodo--final .battle-nodo__hito{ font-size: 9px; background: rgba(255,208,96,.24); }
.battle-nodo--final .battle-nodo__premio{ font-size: 11.5px; color: #fff8e0; }

/* En móviles cortos el marco cede: el aire que lo luce arriba deja media
   fila de rejilla fuera de pantalla, y aquí manda el contenido. */
@media (max-height: 700px){
  .inventory-screen{ padding-top: calc(var(--col-barra) + 20px) !important; }
  .battle-screen{ padding-top: calc(var(--pase-barra) + 20px) !important; }
  .store-screen .tienda-cofres{ padding-top: calc(var(--tienda-barra) + 2px); }
}

/* ══ PERFIL ════════════════════════════════════════════════════════════════
   Quién eres arriba y en un bloque; los datos debajo, en tarjetas. Antes el
   avatar, el nombre y la liga iban sueltos en columna, con la mitad de la
   pantalla en blanco a los lados. */
.profile-screen{
  position: relative; background: #060a16;
  margin-left: -12px !important; margin-right: -12px !important;
  margin-top: -28px !important;
  width: calc(100% + 24px) !important; max-width: none !important;
  padding-left: 0 !important; padding-right: 0 !important;
  --perfil-barra: calc(58px + env(safe-area-inset-top));
  padding-top: calc(var(--perfil-barra) + 48px) !important;
  display: flex; flex-direction: column; gap: 10px;
}
.perfil-fondo{
  --marco-arriba: calc(54px + env(safe-area-inset-top));
  --marco-abajo: calc(100px + env(safe-area-inset-bottom));
  position: fixed; left: 0; right: 0;
  top: var(--marco-arriba); bottom: var(--marco-abajo);
  z-index: 0; pointer-events: none;
  background: #060a16 url('./assets/branding/fondo_perfil.webp') center center / cover no-repeat;
}
.perfil-fondo::after{
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 78% 62% at 50% 50%, rgba(6,10,22,.64) 0%, rgba(6,10,22,.38) 72%, rgba(6,10,22,.12) 100%);
}
.profile-screen > *:not(.perfil-fondo){ position: relative; z-index: 1; }
body .profile-screen .topbar.topbar--clean{
  position: fixed !important; top: 0 !important; left: 0; right: 0;
  width: auto !important; margin: 0 !important; border-radius: 0 !important;
  border-left: none !important; border-right: none !important; border-top: none !important;
  border-bottom: 1px solid rgba(242,194,48,.28) !important;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px !important;
  background: linear-gradient(180deg, rgba(6,10,22,.96), rgba(6,10,22,.82)) !important;
  backdrop-filter: blur(10px);
  z-index: 6 !important;
}

/* — Identidad — */
.perfil-identidad{
  display: flex; align-items: center; gap: 14px;
  margin: 0 22px; padding: 14px 15px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(201,168,76,.14), rgba(4,8,18,.72) 62%);
  border: 1.5px solid rgba(201,168,76,.4);
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
}
.perfil-identidad__avatar{
  position: relative; flex-shrink: 0; padding: 0; border: none; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 0;
}
/* El envoltorio y el hueco del avatar son <span>: sin esto son elementos en
   línea, ignoran el alto y la imagen sale a tamaño natural —512 px— y
   revienta el ancho de la pantalla. */
.perfil-identidad__avatar .pv-avatar-wrap{ display: block; width: 84px; height: 84px; }
.perfil-identidad__avatar .pv-avatar{ display: block; width: 84px; height: 84px; }
.perfil-identidad__avatar .pv-avatar img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.perfil-identidad__editar{
  position: absolute; right: -4px; bottom: -4px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#ffe566,#c9a84c); color: #1a0800;
  border: 2px solid rgba(4,8,18,.9); box-shadow: 0 2px 8px rgba(0,0,0,.6);
  font-size: 12px; font-weight: 900; line-height: 1;
}
.perfil-identidad__texto{ flex: 1; min-width: 0; }
.perfil-identidad__nombre{
  font-size: 21px; font-weight: 900; color: #fff8e0; line-height: 1.15;
  font-family: 'Cinzel','Palatino Linotype',Georgia,serif; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.perfil-identidad__titulo{
  font-size: 12px; font-weight: 700; color: rgba(255,210,80,.85); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.perfil-identidad__liga{ display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12.5px; font-weight: 800; color: rgba(255,255,255,.78); }
.perfil-identidad__liga img{ width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.perfil-identidad__trofeos{ display: inline-flex; align-items: center; gap: 4px; color: #ffd060; }

/* — Recursos y cifras — */
.perfil-recursos{ display: flex; gap: 8px; margin: 0 22px; }
.perfil-recurso{
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 6px; border-radius: 12px;
  background: rgba(4,8,18,.62); border: 1px solid rgba(255,255,255,.09);
}
.perfil-recurso strong{ font-size: 15px; font-weight: 900; color: #fff8e0; }
.perfil-cifras{ display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 0 22px; }
.perfil-cifra{
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 4px; border-radius: 12px;
  background: rgba(4,8,18,.55); border: 1px solid rgba(255,255,255,.07);
}
.perfil-cifra strong{ font-size: 17px; font-weight: 900; color: #ffd060; font-family: 'Cinzel', serif; line-height: 1.1; }
.perfil-cifra span{ font-size: 9px; font-weight: 700; color: rgba(255,255,255,.45); text-align: center; line-height: 1.2; }

/* — Accesos — */
.perfil-accesos{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 22px; }
.perfil-acceso{
  display: flex; align-items: center; gap: 9px; min-height: 60px;
  padding: 10px 11px; border-radius: 14px; cursor: pointer; font-family: inherit; text-align: left;
  background: rgba(4,8,18,.62); border: 1px solid rgba(201,168,76,.28);
  -webkit-tap-highlight-color: transparent;
}
.perfil-acceso:active{ transform: scale(.98); }
.perfil-acceso__icono{ flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
.perfil-acceso__img{ width: 30px; height: 30px; object-fit: contain; }
.perfil-acceso__texto{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.perfil-acceso__texto strong{ font-size: 13.5px; font-weight: 900; color: #fff8e0; }
.perfil-acceso__texto span{ font-size: 10.5px; color: rgba(255,255,255,.5); font-weight: 700; }
.perfil-acceso__flecha{ font-size: 19px; color: rgba(255,208,96,.5); flex-shrink: 0; }

/* — Tarjetas — */
.perfil-tarjeta{
  margin: 0 22px; padding: 13px 15px; border-radius: 16px;
  background: rgba(4,8,18,.62); border: 1px solid rgba(255,255,255,.09);
}
.perfil-tarjeta--plegable{ padding: 0; overflow: hidden; }
.perfil-tarjeta--plegable .panel-desplegable{ width: 100%; padding: 14px 15px; min-height: 48px; }
.perfil-tarjeta__titulo{
  margin: 0 0 10px; font-size: 11px; font-weight: 900;
  letter-spacing: .11em; text-transform: uppercase; color: rgba(255,208,96,.8);
}
.perfil-tarjeta__grupo + .perfil-tarjeta__grupo{ margin-top: 11px; }

/* — Últimas partidas — */
.perfil-partidas{ display: flex; flex-direction: column; gap: 6px; }
.perfil-partida{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 11px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06);
}
.perfil-partida__puesto{
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; font-family: 'Cinzel', serif;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.6);
}
.perfil-partida__puesto--p1{ background: rgba(255,208,96,.18); color: #ffd060; border: 1px solid rgba(255,208,96,.45); }
.perfil-partida__puesto--p2{ background: rgba(192,192,192,.16); color: #d8d8d8; }
.perfil-partida__puesto--p3{ background: rgba(205,127,50,.18); color: #e0a06a; }
.perfil-partida__texto{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.perfil-partida__texto strong{ font-size: 12.5px; font-weight: 800; color: rgba(255,255,255,.85); }
.perfil-partida__texto span{ font-size: 10.5px; color: rgba(255,255,255,.42); }
.perfil-partida__delta{ flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 900; color: #5ee8a4; }
.perfil-partida__delta--baja{ color: #ff8fa0; }

/* — Estadísticas — */
.perfil-stats{ padding: 0 15px 14px; }
.perfil-stats__grupo{
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.38); margin: 4px 0 8px;
}
.perfil-stats__grupo + .perfil-stats__rejilla + .perfil-stats__grupo{ margin-top: 14px; }
.perfil-stats__rejilla{ display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.perfil-stats__nota{ margin: 10px 0 0; font-size: 10.5px; color: rgba(255,255,255,.4); line-height: 1.45; }

/* — Temporadas — */
.perfil-temporadas{ display: flex; flex-direction: column; gap: 6px; }
.perfil-temporada{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 11px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
}
.perfil-temporada__nombre{ font-size: 12px; font-weight: 900; color: #ffd060; }
.perfil-temporada__puesto{ font-size: 13px; font-weight: 900; color: #fff8e0; }
.perfil-temporada__liga{ flex: 1; text-align: right; font-size: 11.5px; color: rgba(255,255,255,.55); }

/* — Tu cuenta, ahora en Ajustes — */
.ajustes-nombre{ display: flex; flex-direction: column; gap: 6px; }
.ajustes-nombre > span:first-child{ font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.ajustes-nombre__fila{ display: flex; gap: 8px; }
.ajustes-nombre__fila .input{ flex: 1; min-width: 0; }
.ajustes-nombre__fila .btn-game{ flex-shrink: 0; padding: 10px 16px !important; font-size: 13px !important; }
.ajustes-nombre__nota{ margin: 11px 0 0; font-size: 10.5px; color: rgba(255,255,255,.42); line-height: 1.5; }

@media (max-height: 700px){
  .profile-screen{ padding-top: calc(var(--perfil-barra) + 20px) !important; gap: 8px; }
  .perfil-identidad{ padding: 11px 13px; }
  .perfil-identidad__nombre{ font-size: 19px; }
}

/* ══ AJUSTES ═══════════════════════════════════════════════════════════════
   Las filas iban con un emoji delante —🔉, ✨, 📖— que no pegaba con el oro
   del resto del juego. Fuera los emojis: la jerarquía la da la tipografía y
   un filete dorado en cada cabecera de sección. */
.settings-screen{ --ajustes-oro: rgba(242,194,48,.8); }

/* Portada: el medallón del juego en vez de un engranaje de sistema. */
.ajustes-portada{
  display: flex; align-items: center; gap: 13px;
  margin: 4px 12px 6px; padding: 13px 15px; border-radius: 16px;
  background: linear-gradient(150deg, rgba(201,168,76,.14), rgba(4,8,18,.7) 62%);
  border: 1.5px solid rgba(201,168,76,.36);
}
.ajustes-portada__medalla{ flex-shrink: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.ajustes-portada__img{ width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0,0,0,.6)); }
.ajustes-portada__texto{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ajustes-portada__texto strong{
  font-size: 18px; font-weight: 900; color: #fff8e0; letter-spacing: .05em;
  font-family: 'Cinzel','Palatino Linotype',Georgia,serif;
}
.ajustes-portada__texto span{ font-size: 11.5px; color: rgba(255,255,255,.5); line-height: 1.35; }

/* Cabeceras de sección: un filete dorado corto y el texto en versalitas. */
.ajustes-titulo{
  display: flex; align-items: center; gap: 8px;
  padding: 16px 4px 7px;
  font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ajustes-oro);
}
.ajustes-titulo::before{
  content: ''; width: 14px; height: 2px; border-radius: 2px; flex-shrink: 0;
  background: linear-gradient(90deg, var(--ajustes-oro), transparent);
}
.ajustes-titulo--peligro{ color: rgba(255,86,106,.85); }
.ajustes-titulo--peligro::before{ background: linear-gradient(90deg, rgba(255,86,106,.85), transparent); }

.ajustes-bloque{
  background: rgba(4,8,18,.7); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.09); border-radius: 14px; overflow: hidden;
}
.settings-screen .ajustes-bloque .settings-toggle-row{ padding: 13px 15px; }
.ajustes-fila__nombre{ font-size: 14px; font-weight: 800; color: #fff8e0; letter-spacing: .01em; }
.ajustes-fila__pie{ font-size: 11px; color: rgba(255,255,255,.45); margin-top: 2px; line-height: 1.35; }
.settings-screen .settings-toggle-row .btn-game-dark{ min-height: 40px; padding: 8px 14px !important; font-size: 12.5px !important; }
/* El interruptor mide 46x26: se ve bien pero es poco para el pulgar. El área
   que se toca crece sin que el carril cambie de aspecto. */
.settings-screen [data-toggle-setting]{
  height: 44px !important; display: flex; align-items: center; justify-content: flex-end;
}

/* El botón de la cabecera pasa de carácter tipográfico a medallón, igual que
   los de la barra inferior. */
.icon-btn--ajustes{
  width: 36px !important; height: 36px !important;
  padding: 0 !important; background: none !important; border: none !important;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn--ajustes .icon-btn__img{
  width: 32px; height: 32px; object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.6));
  transition: transform .18s ease;
}
.icon-btn--ajustes:active .icon-btn__img{ transform: rotate(35deg) scale(.94); }

/* ══ LOGROS ════════════════════════════════════════════════════════════════
   Treinta y una tarjetas: tienen que ser compactas o la lista pesa. Lo
   conseguido va primero dentro de cada grupo y se nota de lejos; lo pendiente
   dice claramente qué hay que hacer y cuánto llevas. */
.logros-screen{
  position: relative; background: #060a16;
  margin-left: -12px !important; margin-right: -12px !important;
  width: calc(100% + 24px) !important; max-width: none !important;
}
.logros-screen > *:not(.perfil-fondo){ position: relative; z-index: 1; }
.logros-screen .logros-lista{ padding: 10px 20px calc(112px + env(safe-area-inset-bottom)); gap: 16px; }

.logros-resumen{
  padding: 12px 14px; border-radius: 15px;
  background: rgba(4,8,18,.68); border: 1px solid rgba(201,168,76,.3);
}
.logros-resumen__linea{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.logros-resumen__cifra{ display: flex; align-items: baseline; gap: 5px; }
.logros-resumen__cifra strong{ font-size: 24px; font-weight: 900; color: #ffd060; font-family: 'Cinzel', serif; line-height: 1; }
.logros-resumen__cifra span{ font-size: 12px; font-weight: 700; color: rgba(255,255,255,.5); }
.logros-resumen__pct{ font-size: 13px; font-weight: 900; color: #ffd060; }
.logros-resumen__barra{ height: 7px; margin-top: 9px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.logros-resumen__barra > div{
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,#c9a84c,#ffd060 60%,#ffee88);
  box-shadow: 0 0 10px rgba(255,208,96,.4); transition: width .6s;
}
.logros-resumen__nota{ margin: 9px 0 0; font-size: 10.5px; color: rgba(255,255,255,.42); line-height: 1.45; }

.logros-screen .logro-grupo{ gap: 7px; }
.logros-screen .logro-grupo__cuenta i{ font-style: normal; opacity: .5; }
.logro-grupo--completo .logro-grupo__titulo{ color: #5ee8a4; }
.logro-grupo--completo .logro-grupo__cabecera{ border-bottom-color: rgba(94,232,164,.35); }

/* Tarjeta compacta: nombre y cifra en una línea, cómo se consigue en otra,
   y la barra sólo mientras falte. */
.logros-screen .logro{
  padding: 10px 13px; border-radius: 13px; opacity: 1;
  background: rgba(4,8,18,.6); border: 1px solid rgba(255,255,255,.08);
}
.logros-screen .logro__cabecera{ gap: 10px; align-items: baseline; }
.logros-screen .logro__nombre{ font-size: 13.5px; }
.logro__cuenta{
  flex-shrink: 0; margin: 0 !important; font-size: 12.5px !important;
  font-weight: 900; color: #ffd060; font-variant-numeric: tabular-nums;
}
.logro__cuenta i{ font-style: normal; font-weight: 700; opacity: .5; color: rgba(255,255,255,.6); }
.logro__como{ margin-top: 3px; font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.35; }
.logros-screen .logro__barra{ margin-top: 7px; height: 4px; }
.logro__premio{ margin-top: 6px; font-size: 10.5px; color: rgba(255,255,255,.45); }
.logro__premio strong{ color: rgba(255,208,96,.9); font-weight: 800; }

/* Conseguido: un pequeño hito. Marco dorado, sello y un brillo en diagonal
   que lo separa del resto sin gritar. */
.logros-screen .logro--hecho{
  position: relative; overflow: hidden;
  border-color: rgba(255,208,96,.55);
  background: linear-gradient(150deg, rgba(255,208,96,.15), rgba(4,8,18,.72) 62%);
  box-shadow: 0 0 18px -6px rgba(255,208,96,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.logros-screen .logro--hecho::before{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(255,235,170,.1) 50%, transparent 58%);
}
.logros-screen .logro--hecho .logro__nombre{ color: #ffd060; }
.logro__sello{
  flex-shrink: 0; padding: 2px 9px; border-radius: 999px;
  background: rgba(255,208,96,.18); border: 1px solid rgba(255,208,96,.5);
  color: #ffd060; font-size: 9.5px; font-weight: 900;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.logros-screen .logro-req{ font-size: 10px; }

/* ══ PARTIDA — retoques ════════════════════════════════════════════════════
   Fuera los emojis del sistema: 👤 en los asientos sin avatar, 💀 y 📵 en los
   estados, ✓ y ✕ en los botones. Lo que había en su sitio son placas y texto,
   que es lo que usa el resto del juego. */
.pv-seat__inicial{
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 900; color: rgba(255,240,214,.5);
  font-family: 'Cinzel','Palatino Linotype',Georgia,serif;
  background: rgba(255,255,255,.05);
}
/* Cinco iconos de once píxeles no se leían: uno y la cifra. */
.pv-seat__vidas{
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px 1px 5px; border-radius: 999px;
  background: rgba(4,8,18,.85); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.pv-seat__vidas b{ font-size: 11.5px; font-weight: 900; color: #fff8e0; line-height: 1; }
.pv-seat__vidas--critico{ border-color: rgba(255,86,106,.6); }
.pv-seat__vidas--critico b{ color: #ff8fa0; }
.pv-seat__estado{
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  padding: 1px 7px; border-radius: 999px; z-index: 3; white-space: nowrap;
  font-size: 8.5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid rgba(0,0,0,.7); box-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.pv-seat__estado--fuera{ background: rgba(255,86,106,.95); color: #24020a; }
.pv-seat__estado--ausente{ background: rgba(150,155,168,.95); color: #14161c; }
/* Marcador bazas/predicción. En la ronda de una carta va sólo GANO o PIERDO. */
.pv-seat__marca{
  margin-top: 3px; display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 8px; border-radius: 999px;
  background: rgba(4,8,18,.72); border: 1px solid rgba(255,255,255,.16);
  font-size: 11px; font-weight: 900; line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.pv-seat__marca i{ font-style: normal; font-size: 10px; color: rgba(255,255,255,.3); }

/* Barra de acción */
.pv-turno{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: #5ee8a4; text-shadow: 0 2px 6px rgba(0,0,0,.9);
}
.pv-turno i{ font-style: normal; opacity: .45; }

.pv-fuera__titulo{
  font-size: 14px; font-weight: 900; color: #ff8fa0;
  letter-spacing: .08em; text-transform: uppercase;
}
.pv-fuera__copia{ font-size: 11px; color: rgba(255,255,255,.55); margin-top: 2px; }
/* La salida deja de ser una equis suelta. */
.pv-barra__salir{
  width: auto !important; min-width: 56px; padding: 0 12px !important;
  font-size: 11.5px !important; font-weight: 800; letter-spacing: .06em;
}
/* Fin de ronda: la fila propia se distingue de un vistazo. */
.pv-resumen__fila--yo{ box-shadow: inset 3px 0 0 rgba(255,208,96,.9); }

/* ── Contraste sobre tapetes claros ──
   Lux y Palacio Celestial son casi blancos: el texto claro de las placas se
   perdía. En vez de oscurecer el tapete, las placas ganan cuerpo. */
.pv-seat__plate{
  background: rgba(4,8,18,.72) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(6px);
}
.pv-seat__name{ text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.pv-seat__hand{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.65)); }


/* ══════════════════════════════════════════════════════════════
   PARTIDA — LA MESA OCUPA TODA LA PANTALLA
   El tapete deja de ser un recuadro con bandas negras a los lados y
   pasa a ocupar el móvil entero: de borde a borde y desde arriba del
   todo hasta donde empieza mi mano. Encima de él viven la barra, los
   asientos, las cartas, el marcador y los botones de acción; lo único
   que queda fuera del tapete son mis cartas.

   El arte mide 780×1200 (0,65) y el hueco de un móvil es más
   estrecho, así que con `cover` se recorta entre un 5 % y un 8 % por
   el eje que sobra. Se prefiere ese recorte a las bandas: se pierde
   un poco del marco del tapete y a cambio la mesa llena la pantalla.
   ══════════════════════════════════════════════════════════════ */

/* La pantalla de partida sale del carril de #app: necesita el ancho
   completo del móvil. Los márgenes seguros los reponen la barra por
   arriba y la mano por abajo, que son quienes tocan los bordes. */
body.screen-match{
  padding: 0 !important;
  overflow: hidden;
}
body.screen-match #app{
  padding: 0 !important;
  height: 100dvh; overflow: hidden;
}
/* Regla vieja: metía 12 px de carril al segundo <div> de la pantalla, que
   antes era la barra y ahora es la mesa entera. La mesa no lleva carril. */
.match-screen > .pv-mesa{ padding: 0 !important; }
.match-screen{
  width: 100% !important; max-width: none !important;
  height: 100dvh !important;
  margin: 0 !important; padding: 0 !important;
}

.pv-mesa{
  position: relative; z-index: 3;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* El tapete, de fondo y a sangre. Aquí se deshacen de golpe las cinco
   capas de reglas que lo fueron encogiendo: recuadro, filo dorado,
   proporción fija y `contain`. */
.pv-mesa > .pv-table{
  position: absolute !important;
  inset: 0 !important;
  width: auto !important; height: auto !important;
  max-width: none !important; aspect-ratio: auto !important;
  transform: none !important;
  padding: 0 !important; border: none !important; border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden; z-index: 0;
}
.pv-mesa > .pv-table::before{ display: none !important; }
.pv-mesa > .pv-table > .pv-felt{
  position: absolute; inset: 0 !important; border-radius: 0 !important;
}
.pv-mesa > .pv-table--mat > .pv-felt{ background: none !important; box-shadow: none !important; }
.pv-mesa > .pv-table--mat > .pv-felt::before,
.pv-mesa > .pv-table--mat > .pv-felt::after{ display: none !important; }
/* El tapete se ve ENTERO —marco dorado y medallones de las esquinas
   incluidos—, que es lo que le da valor: `contain`, nunca `cover`.
   El arte es 780×1200 y un móvil es más estrecho, así que sobra sitio por
   un eje. Ese sobrante no se deja en negro: lo llena una copia del mismo
   tapete ampliada y desenfocada, así la mesa ocupa la pantalla entera y el
   borde del tapete sigue viéndose recortado contra ella. */
.match-screen .pv-fondo-mesa{
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none;
}
.match-screen .pv-table__halo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  transform: scale(1.18);
  filter: blur(28px) saturate(1.15) brightness(.62);
}
.pv-mesa .pv-table__mat{
  position: absolute; inset: 0; z-index: 1;
  width: 100% !important; height: 100% !important;
  object-fit: contain !important; object-position: center center;
  opacity: 1 !important; mix-blend-mode: normal !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.55));
}
/* Sombra interior: cierra los bordes del tapete contra la pantalla y
   despega la mesa de la mano sin oscurecer el arte del centro. */
.pv-mesa::after{
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 90px rgba(0,0,0,.42);
}

/* La barra ya no lleva banda propia: se apoya en el tapete con un velo
   que se desvanece, así se lee sin partir la mesa en dos. */
.pv-mesa > .pv-barra{
  position: relative; z-index: 5; flex-shrink: 0;
  padding: calc(9px + env(safe-area-inset-top, 0px)) 14px 12px !important;
  background: linear-gradient(180deg, rgba(4,7,12,.82) 0%, rgba(4,7,12,.44) 58%, transparent 100%) !important;
  border-bottom: none !important;
}
/* El botón dice «Salir», no cabe en un círculo de 30 px. */
.pv-barra__salir{
  width: auto !important; height: 30px !important;
  padding: 0 13px !important; border-radius: 999px !important;
  font-size: 11.5px !important; font-weight: 800 !important;
  letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,240,214,.75) !important;
  background: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,240,214,.22) !important;
}

.pv-mesa__juego{
  position: relative; z-index: 3;
  flex: 1; min-height: 0; overflow: hidden;
}

/* La zona de acción también va encima del tapete: velo translúcido en
   lugar de la banda negra que antes cortaba la mesa por abajo. */
.pv-mesa__accion{ position: relative; z-index: 5; flex-shrink: 0; }
.pv-mesa__accion > div{
  background: linear-gradient(180deg, rgba(4,8,14,.26) 0%, rgba(4,8,14,.8) 100%) !important;
}
.pv-mesa__accion .panel-prediccion{
  background: linear-gradient(180deg, rgba(4,8,14,.22) 0%, rgba(4,8,14,.74) 52%, rgba(4,8,14,.9) 100%) !important;
  border-top: 1px solid rgba(201,168,76,.3) !important;
}
/* Sobre el tapete los botones necesitan cuerpo propio para leerse */
.pv-mesa__accion .predict-btn{
  background: rgba(6,10,16,.74) !important;
  border-color: rgba(255,240,214,.26) !important;
}
.pv-mesa__accion .predict-btn.selected{
  background: rgba(255,208,96,.26) !important; border-color: #ffd060 !important;
}
.pv-mesa__accion .predict-btn.forbidden{
  background: rgba(60,8,14,.62) !important; border-color: rgba(255,86,106,.32) !important;
}

/* Mi mano: lo único que vive fuera de la mesa. */
.pv-mano-zona{
  position: relative; z-index: 6; flex-shrink: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.86) 52%, #05070b 100%);
  box-shadow: 0 -12px 28px rgba(0,0,0,.6);
}

/* ── Asientos a la medida de la mesa ──
   Con el tapete a pantalla completa sobra sitio, así que las placas
   crecen según cuánta gente haya sentada: con dos rivales caben
   grandes, con cinco hay que apretar para que las de los extremos no
   se salgan por el lado. El ancho lo manda --placa desde el render. */
.pv-seat__plate{
  max-width: var(--placa, 84px) !important;
  background: rgba(4,8,18,.72) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(6px);
}
.pv-seat--l .pv-seat__name{ font-size: 12.5px !important; }
.pv-seat--m .pv-seat__name{ font-size: 12px !important; }
.pv-seat--l .pv-seat__marca,
.pv-seat--m .pv-seat__marca{ font-size: 12px !important; }
.pv-seat--l .pv-seat__hand{ height: 26px !important; }
.pv-seat--l .pv-seat__hand img{ width: 19px !important; }
.pv-seat--m .pv-seat__hand img{ width: 17px !important; }

/* Pie de mesa: el marcador de la ronda y mi placa, apilados y anclados al
   borde bajo del tapete. Antes cada uno colgaba de su propio porcentaje y,
   cuando el panel de predicción encogía la zona de juego, se montaban. */
.pv-pie{
  /* En porcentaje, no en píxeles: el tapete se ve entero, así que cuando le
     sobra alto deja una franja arriba y otra abajo. Con un margen fijo la
     placa caía en esa franja, fuera de la mesa. */
  position: absolute; left: 50%; bottom: max(10px, 2.5%);
  transform: translateX(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: 100%;
}

/* Chip de suma de predicciones: el mismo en el pie de mesa y dentro del
   panel de predicción. */
.pv-suma{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(0,0,0,.62); border: 1.5px solid rgba(255,255,255,.3);
  box-shadow: 0 3px 14px rgba(0,0,0,.45); white-space: nowrap;
}
/* Mientras se predice, el pie de mesa se retira: en pantallas cortas el
   panel deja poca mesa y se montaba con los asientos laterales. Lo que
   hacía falta para decidir —mis vidas y cómo va la suma— sube al panel. */
.panel-prediccion__estado{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 9px; flex-wrap: wrap;
}
.panel-prediccion__vidas{ display: flex; gap: 2px; flex-shrink: 0; }
.panel-prediccion__estado .pv-suma{ padding: 5px 11px; }
.panel-prediccion__estado .pv-suma span:first-child{ font-size: 14px !important; }
.panel-prediccion__estado .pv-suma span:last-child{ font-size: 11px !important; }

/* En móviles cortos (Redmi 9A y compañía) el panel de predicción, la mano y
   los asientos no caben los tres a su tamaño natural. Lo que cede es el
   panel: botones y textos más bajos, que sigue siendo cómodo de pulsar
   —44 px de alto— y le devuelve a la mesa unos 60 px. */
@media (max-height: 740px){
  .pv-mesa > .pv-barra{ padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 8px !important; }
  .pv-mesa__accion .panel-prediccion{ padding: 7px 12px calc(8px + var(--safe-bottom,0px)) !important; }
  .panel-prediccion__cabecera{ margin-bottom: 6px !important; }
  .panel-prediccion__pregunta{ font-size: 13.5px !important; }
  .panel-prediccion__apunte{ font-size: 10px !important; }
  .panel-prediccion__estado{ margin-bottom: 6px !important; }
  .panel-prediccion__estado .pv-suma{ padding: 3px 9px !important; }
  .panel-prediccion__opciones{ gap: 6px !important; margin-bottom: 7px !important; }
  .pv-mesa__accion .panel-prediccion .predict-btn,
  .match-screen .pv-mesa__accion .predict-btn{ height: 44px !important; }
  .panel-prediccion__confirmar{ min-height: 40px !important; height: 40px !important; }
  .panel-prediccion__aviso{ font-size: 10.5px !important; padding: 7px 10px !important; }
}

/* Mano asomada: mientras predigo sólo se ve la mitad alta de cada carta,
   que es donde van el número y el palo. Las cartas siguen siendo las
   mismas y no se encogen; simplemente asoman por el borde. En cuanto me
   toca jugar vuelven a salir enteras. */
.pv-mano-zona--asomada .pv-hand{
  align-items: flex-start;
  overflow: hidden;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}
.pv-mano-zona--asomada{
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.9) 100%);
}
/* El borde inferior se difumina para que se lea como «hay más carta
   debajo» y no como un recorte. */
.pv-mano-zona--asomada::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background: linear-gradient(180deg, transparent, rgba(3,5,9,.92));
  pointer-events: none;
}

/* La zona de acción vive fuera del tapete, entre la mesa y la mano, para
   que el borde bajo del tapete no quede nunca tapado. Se pinta oscura y
   continua con la mano: son los dos bloques que manejo yo. */
.pv-mesa__accion{
  position: relative; z-index: 5; flex-shrink: 0;
  background: #05070b;
}
.pv-mesa__accion > div{
  background: linear-gradient(180deg, rgba(10,16,24,.9) 0%, rgba(4,7,12,.98) 100%) !important;
}
.pv-mesa__accion .panel-prediccion{
  background: linear-gradient(180deg, rgba(14,22,18,.96) 0%, rgba(4,7,12,.99) 100%) !important;
  border-top: 1px solid rgba(201,168,76,.34) !important;
}

/* La mano recortada: durante toda la partida las cartas asoman sólo por su
   parte alta. Ganamos ~50 px de tapete y las cartas siguen grandes y
   reconocibles: el número y el palo van arriba. El alto lo calcula el
   render a partir del ancho real de la carta (--alto-mano). */
.pv-mano-zona--recorte .pv-hand{
  align-items: flex-start;
  overflow: hidden;
  max-height: var(--alto-mano, 112px);
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}
.pv-mano-zona--recorte::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background: linear-gradient(180deg, transparent, rgba(3,5,9,.9));
  pointer-events: none;
}
/* Mientras predigo asoman todavía menos: el panel necesita el sitio. */
.pv-mano-zona--asomada .pv-hand{
  max-height: calc(var(--alto-mano, 112px) * .82);
}
@media (max-height: 740px){
  .pv-mano-zona--asomada .pv-hand{ max-height: calc(var(--alto-mano, 112px) * .7); }
}

/* Jugar no necesita botón: se toca la carta y se toca otra vez. Esta línea
   dice cuál está elegida y qué falta para tirarla, y la franja de abajo se
   queda entera para la mano. */
.pv-turno--lista{
  color: rgba(255,255,255,.72); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-turno--lista strong{ color: #ffd060; }

/* ══════════════════════════════════════════════════════════════
   NADA DE FRANJA NEGRA ABAJO
   El fondo de mesa —el propio tapete ampliado y desenfocado— ocupa ya la
   pantalla entera, así que la mano, la barra de acción y el panel de
   predicción dejan de necesitar fondo opaco: se apoyan sobre la mesa con
   un velo translúcido. La pantalla deja de partirse en dos.
   ══════════════════════════════════════════════════════════════ */
.pv-mano-zona,
.pv-mano-zona--recorte,
.pv-mano-zona--asomada{
  background: linear-gradient(180deg, rgba(3,7,12,0) 0%, rgba(3,7,12,.34) 34%, rgba(3,7,12,.66) 100%) !important;
  box-shadow: none;
}
.pv-mano-zona--recorte::after,
.pv-mano-zona--asomada::after{
  background: linear-gradient(180deg, transparent, rgba(3,7,12,.55)) !important;
}
.pv-mesa__accion{
  position: relative; z-index: 5; flex-shrink: 0;
  background: transparent !important;
}
.pv-mesa__accion > div{
  background: linear-gradient(180deg, rgba(3,7,12,.34) 0%, rgba(3,7,12,.6) 100%) !important;
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.07) !important;
}
/* El panel de predicción sí necesita cuerpo: encima de un tapete claro
   (Lux, Palacio Celestial) los números tienen que leerse sin dudar. Medio
   transparente y con desenfoque detrás: se ve la mesa, se leen los botones. */
.pv-mesa__accion .panel-prediccion{
  background: linear-gradient(180deg, rgba(6,12,10,.66) 0%, rgba(3,6,10,.86) 100%) !important;
  backdrop-filter: blur(14px) saturate(1.1);
  /* El tapete ya trae su filo dorado justo encima: otra línea de oro
     aquí eran dos rayas paralelas. */
  border-top: 1px solid rgba(255,255,255,.09) !important;
}
.pv-mesa__accion .predict-btn{
  background: rgba(4,8,14,.72) !important;
  border-color: rgba(255,240,214,.3) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

/* ══════════════════════════════════════════════════════════════
   LA MESA NO SE MUEVE
   El tapete era el hueco que sobraba entre la barra, los botones y la
   mano, así que cambiaba de alto en cada fase: subía al predecir, bajaba
   al jugar. Ahora es una caja con la proporción exacta del arte
   (780×1200) centrada en la pantalla: su tamaño depende sólo del móvil,
   nunca de lo que esté pasando en la partida.

   Y como la zona de juego comparte esa caja, los porcentajes de los
   asientos y de las cartas son porcentajes DEL TAPETE. Nada se sale del
   fieltro.
   ══════════════════════════════════════════════════════════════ */
.match-screen{
  position: relative; background: #000;
  display: block !important;
  height: 100dvh !important; overflow: hidden;
}
.pv-mesa{
  position: absolute; inset: 0; z-index: 3;
  display: block !important;
  flex: none !important; min-height: 0;
  overflow: hidden;
}
/* La caja del tapete: la mayor que quepa manteniendo 780×1200. */
.pv-tapete{
  /* El tapete se apoya ARRIBA y lo que sobra cae abajo, debajo de las
     cartas. Centrarlo era el error: cuando no cabía —un navegador con barra
     de direcciones deja la pantalla más corta— se comía el marco de arriba y
     dejaba una franja abajo, justo al revés de lo que interesa.

     El alto sale del ancho, que es el de la pantalla: 941x1672. Y sólo baja
     del borde de arriba si aun así sobra sitio por abajo, es decir en
     móviles muy alargados, donde la mano no da para tapar todo lo que sobra
     y es mejor que esa franja quede arriba, contra la barra. */
  --alto-tapete: calc(100vw * 1672 / 941);
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  height: var(--alto-tapete);
  top: max(0px, calc(100dvh - var(--reserva-mesa, 178px) - var(--alto-tapete)));
  z-index: 2;
}
.pv-mesa > .pv-tapete > .pv-table{
  position: absolute !important; inset: 0 !important;
  width: auto !important; height: auto !important;
  max-width: none !important; aspect-ratio: auto !important;
  transform: none !important;
  padding: 0 !important; border: none !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  overflow: hidden; z-index: 0;
}
.pv-mesa > .pv-tapete > .pv-table::before{ display: none !important; }
.pv-mesa > .pv-tapete > .pv-table > .pv-felt{
  position: absolute; inset: 0 !important; border-radius: 0 !important;
}
/* La caja ya tiene la proporción del arte, así que `cover` no recorta
   nada: sólo evita la costura de medio píxel que deja `contain`. */
.pv-tapete .pv-table__mat{
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.55));
}
.pv-mesa__juego{
  /* Su caja va de debajo de la barra al borde de abajo. Los porcentajes de
     los asientos y de las cartas son de aquí: así nada queda tapado por la
     barra ni depende de cuánto se recorte el tapete en un móvil corto. */
  position: absolute; left: 0; right: 0; z-index: 3;
  top: calc(50px + env(safe-area-inset-top, 0px));
  bottom: var(--reserva-mesa, 178px);
  flex: none; overflow: visible;
}

/* Barra arriba del todo, sobre la mesa. */
.pv-mesa > .pv-barra{
  position: absolute; left: 0; right: 0; top: 0; z-index: 9;
  padding: calc(9px + env(safe-area-inset-top, 0px)) 14px 14px !important;
  background: none !important;
  border-bottom: none !important;
}
/* Un velo corto arriba, sólo para que la barra se lea sobre cualquier
   tapete. La viñeta larga y el halo de lámpara que había aquí existían para
   disimular la franja de fondo desenfocado; con el tapete a pantalla
   completa ya no hay franja, y lo que hacían era marcar una raya a media
   pantalla. */
.pv-mesa::before{
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: calc(96px + env(safe-area-inset-top, 0px));
  z-index: 8; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(2,4,8,.72) 0%, rgba(2,4,8,.34) 46%, rgba(2,4,8,.1) 76%, transparent 100%);
}

/* Marcador, mi placa y los botones: apoyados justo encima de la mano. */
.pv-abajo{
  position: absolute; left: 0; right: 0; z-index: 7;
  bottom: calc(var(--alto-mano, 170px) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
.pv-abajo .pv-pie{
  position: static; transform: none;
  align-self: center;
  bottom: auto;
}
.pv-abajo .pv-mesa__accion{ position: static; }

/* La mano: entera, a buen tamaño y anclada al borde de abajo. Al flotar
   sobre la mesa en lugar de ocupar sitio en la columna, sobresale por
   encima del tapete — como cartas sostenidas delante de la mesa. */
.pv-mano-zona{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  background: none !important;
  box-shadow: none;
}
.pv-mano-zona::after{ display: none !important; }
.pv-mano-zona .pv-hand{
  align-items: flex-end;
  overflow: visible;
  max-height: none;
  padding: 10px 8px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Las cartas se despegan de la mesa con su propia sombra, no con una
   banda oscura: la mesa se ve entera por detrás. */
.pv-mano-zona .hand-card{ filter: drop-shadow(0 -6px 18px rgba(0,0,0,.5)); }

/* En móviles cortos el marcador y mi placa se aprietan: la franja de abajo
   sube más (las cartas son casi la mitad de la pantalla) y a este ancho
   rozaba las placas de los asientos laterales. */
@media (max-height: 740px){
  .pv-abajo{ gap: 4px; }
  .pv-abajo .pv-marcador{ gap: 3px !important; }
  .pv-abajo .pv-suma{ padding: 4px 10px !important; }
  .pv-abajo .pv-suma span:first-child{ font-size: 13px !important; }
  .pv-abajo .pv-suma span:last-child{ font-size: 10px !important; }
  .match-screen .pv-status{ padding: 2px 9px !important; }
  .match-screen .pv-status__v{ font-size: 14px; }
}

/* En móviles cortos el panel de predicción alcanza a los asientos
   laterales: no hay alto para las dos cosas. Ahí se vuelve opaco, para que
   se lea como una hoja apoyada sobre la mesa y no como un cristal que deja
   ver medio nombre. Lo que hace falta para decidir —cuántos han predicho y
   cuánto suman— está dentro del propio panel. */
@media (max-height: 740px){
  .pv-mesa__accion .panel-prediccion{
    background: linear-gradient(180deg, rgba(6,12,10,.96) 0%, rgba(3,6,10,.99) 100%) !important;
  }
}

/* El panel de predicción llega hasta donde llega; en un móvil corto alcanza
   a los asientos de los lados. Con un borde duro les partía la placa por la
   mitad, que parece un fallo. Con un degradado por encima se pierden debajo
   del panel, que es lo que está pasando de verdad. */
.pv-mesa__accion--panel{ position: relative; }
.pv-mesa__accion--panel::before{
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
  height: 38px; pointer-events: none;
  background: linear-gradient(180deg, rgba(3,6,10,0), rgba(3,6,10,.55) 55%, rgba(3,6,10,.9));
}
@media (max-height: 740px){
  .pv-mesa__accion--panel::before{
    height: 46px;
    background: linear-gradient(180deg, rgba(3,6,10,0), rgba(3,6,10,.7) 50%, rgba(3,6,10,.98));
  }
}



/* ══════════════════════════════════════════════════════════════
   FONDOS DE LAS PANTALLAS PRINCIPALES
   Los cuatro fondos son 828x1471 (0,563), la proporción del hueco entre
   las dos barras en un móvil de 852 px de alto. En cualquier pantalla más
   corta —un navegador con barra de direcciones deja unos 714— ese hueco
   se vuelve mucho más ancho de proporción y `cover` recortaba hasta 70 px
   por arriba y otros tantos por abajo: justo las cenefas del marco, que
   es lo único que hay que ver.

   Ahora el fondo se ve ENTERO y lo que sobra lo llena una copia de sí
   mismo ampliada y desenfocada, igual que en la mesa. El marco queda
   siempre completo y no aparecen bandas de color plano.
   ══════════════════════════════════════════════════════════════ */
.tienda-fondo{
  background: #060a16 !important;
  overflow: hidden;
}
/* Capa de abajo: el propio fondo ampliado y desenfocado. Sólo se ve en
   móviles muy alargados, donde el hueco entre barras es más alto que el
   fondo a todo el ancho y queda sitio por abajo. */
.tienda-fondo::before{
  content: ''; position: absolute; inset: 0;
  background: url('./assets/branding/fondo_tienda.webp') center center / cover no-repeat;
  transform: scale(1.18);
  filter: blur(26px) saturate(1.1) brightness(.5);
}
/* Capa de arriba: el fondo a todo el ancho de la pantalla y anclado arriba,
   más el velo que oscurece el centro, que es donde va el texto.

   `100% auto` en vez de `contain`: contain enseñaba el marco entero pero
   dejaba bandas a los lados, y el fondo tiene que llegar a los dos bordes
   como llegaba antes. Con el ancho fijado al 100 % el alto sale solo; en un
   móvil de 852 px cuadra al píxel y se ven los cuatro lados del marco, y en
   uno más corto lo que se pierde es el filo de abajo —que queda contra la
   barra inferior— en vez de las cenefas de arriba.

   Las dos capas van en ::after porque los pseudoelementos se pintan por
   encima del fondo del elemento: al revés, el desenfoque tapaba el marco. */
.tienda-fondo::after{
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 78% 62% at 50% 50%, rgba(6,10,22,.62) 0%, rgba(6,10,22,.34) 72%, rgba(6,10,22,.12) 100%),
    url('./assets/branding/fondo_tienda.webp') center top / 100% auto no-repeat;
}
.coleccion-fondo{
  background: #060a16 !important;
  overflow: hidden;
}
/* Capa de abajo: el propio fondo ampliado y desenfocado. Sólo se ve en
   móviles muy alargados, donde el hueco entre barras es más alto que el
   fondo a todo el ancho y queda sitio por abajo. */
.coleccion-fondo::before{
  content: ''; position: absolute; inset: 0;
  background: url('./assets/branding/fondo_coleccion.webp') center center / cover no-repeat;
  transform: scale(1.18);
  filter: blur(26px) saturate(1.1) brightness(.5);
}
/* Capa de arriba: el fondo a todo el ancho de la pantalla y anclado arriba,
   más el velo que oscurece el centro, que es donde va el texto.

   `100% auto` en vez de `contain`: contain enseñaba el marco entero pero
   dejaba bandas a los lados, y el fondo tiene que llegar a los dos bordes
   como llegaba antes. Con el ancho fijado al 100 % el alto sale solo; en un
   móvil de 852 px cuadra al píxel y se ven los cuatro lados del marco, y en
   uno más corto lo que se pierde es el filo de abajo —que queda contra la
   barra inferior— en vez de las cenefas de arriba.

   Las dos capas van en ::after porque los pseudoelementos se pintan por
   encima del fondo del elemento: al revés, el desenfoque tapaba el marco. */
.coleccion-fondo::after{
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 78% 62% at 50% 50%, rgba(6,10,22,.66) 0%, rgba(6,10,22,.4) 72%, rgba(6,10,22,.14) 100%),
    url('./assets/branding/fondo_coleccion.webp') center top / 100% auto no-repeat;
}
.pase-fondo{
  background: #0a0620 !important;
  overflow: hidden;
}
/* Capa de abajo: el propio fondo ampliado y desenfocado. Sólo se ve en
   móviles muy alargados, donde el hueco entre barras es más alto que el
   fondo a todo el ancho y queda sitio por abajo. */
.pase-fondo::before{
  content: ''; position: absolute; inset: 0;
  background: url('./assets/branding/fondo_pase.webp') center center / cover no-repeat;
  transform: scale(1.18);
  filter: blur(26px) saturate(1.1) brightness(.5);
}
/* Capa de arriba: el fondo a todo el ancho de la pantalla y anclado arriba,
   más el velo que oscurece el centro, que es donde va el texto.

   `100% auto` en vez de `contain`: contain enseñaba el marco entero pero
   dejaba bandas a los lados, y el fondo tiene que llegar a los dos bordes
   como llegaba antes. Con el ancho fijado al 100 % el alto sale solo; en un
   móvil de 852 px cuadra al píxel y se ven los cuatro lados del marco, y en
   uno más corto lo que se pierde es el filo de abajo —que queda contra la
   barra inferior— en vez de las cenefas de arriba.

   Las dos capas van en ::after porque los pseudoelementos se pintan por
   encima del fondo del elemento: al revés, el desenfoque tapaba el marco. */
.pase-fondo::after{
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 78% 62% at 50% 50%, rgba(10,6,32,.66) 0%, rgba(10,6,32,.4) 72%, rgba(10,6,32,.14) 100%),
    url('./assets/branding/fondo_pase.webp') center top / 100% auto no-repeat;
}
.perfil-fondo{
  background: #060a16 !important;
  overflow: hidden;
}
/* Capa de abajo: el propio fondo ampliado y desenfocado. Sólo se ve en
   móviles muy alargados, donde el hueco entre barras es más alto que el
   fondo a todo el ancho y queda sitio por abajo. */
.perfil-fondo::before{
  content: ''; position: absolute; inset: 0;
  background: url('./assets/branding/fondo_perfil.webp') center center / cover no-repeat;
  transform: scale(1.18);
  filter: blur(26px) saturate(1.1) brightness(.5);
}
/* Capa de arriba: el fondo a todo el ancho de la pantalla y anclado arriba,
   más el velo que oscurece el centro, que es donde va el texto.

   `100% auto` en vez de `contain`: contain enseñaba el marco entero pero
   dejaba bandas a los lados, y el fondo tiene que llegar a los dos bordes
   como llegaba antes. Con el ancho fijado al 100 % el alto sale solo; en un
   móvil de 852 px cuadra al píxel y se ven los cuatro lados del marco, y en
   uno más corto lo que se pierde es el filo de abajo —que queda contra la
   barra inferior— en vez de las cenefas de arriba.

   Las dos capas van en ::after porque los pseudoelementos se pintan por
   encima del fondo del elemento: al revés, el desenfoque tapaba el marco. */
.perfil-fondo::after{
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 78% 62% at 50% 50%, rgba(6,10,22,.64) 0%, rgba(6,10,22,.38) 72%, rgba(6,10,22,.12) 100%),
    url('./assets/branding/fondo_perfil.webp') center top / 100% auto no-repeat;
}

/* ══════════════════════════════════════════════════════════════
   BARRAS DE ARRIBA Y AIRE BAJO ELLAS
   Las cuatro pantallas de la barra inferior llevan la misma cabecera fija,
   pero cada una medía distinto —54, 52 y 57 px— porque la altura salía del
   contenido: Perfil crece por la campana. Con el marco del fondo empezando
   siempre a 54 px, en Perfil asomaban 3 px de fondo por encima y en un
   móvil de 360 quedaba un hueco de 2.

   Ahora la altura es una sola y el marco cuelga de ella, así que no pueden
   descuadrarse. Y lo que va debajo respeta esa altura: en la Tienda el
   aviso de «sin conexión» quedaba entero detrás de la barra.
   ══════════════════════════════════════════════════════════════ */
:root{ --alto-topbar: calc(54px + env(safe-area-inset-top, 0px)); }

body .topbar--principal{
  height: var(--alto-topbar) !important;
  min-height: var(--alto-topbar) !important;
  box-sizing: border-box;
}
.tienda-fondo, .coleccion-fondo, .pase-fondo, .perfil-fondo{
  --marco-arriba: var(--alto-topbar);
}

/* El aire bajo la barra lo pone la pantalla, no cada bloque: así ninguno se
   queda detrás por haberse añadido después. */
.store-screen{ padding-top: var(--alto-topbar) !important; }
.store-screen .tienda-cofres{ padding-top: 10px; }
.battle-screen .pase-cabecera{ margin-top: 10px; }

/* ══════════════════════════════════════════════════════════════
   CABECERAS DE LAS PANTALLAS SECUNDARIAS
   Logros y VS CPU llevaban la suya pegada al techo; Ajustes, Amigos y
   Notificaciones la tenían flotando 30 px por debajo, que es el aire que
   el contenedor le da a todas las pantallas. Al lado de las demás parecía
   descolgada. Aquí se cancela ese aire y la cabecera va de lado a lado,
   igual que en las pantallas de la barra inferior.
   ══════════════════════════════════════════════════════════════ */
/* VS CPU no entra aquí: su cabecera ya estaba pegada al techo, y subirla
   otros 20 px metía el contenido por debajo de ella. */
.settings-screen,
.friends-screen,
[data-screen="notifications"]{
  margin-top: -20px !important;
  padding-top: 0 !important;
}
/* Notificaciones ya salía a sangre por su cuenta: si se le suma otra vez se
   va 24 px por fuera de la pantalla. Sólo se le corrige el alto. */
.settings-screen,
.friends-screen,
.cpu-setup{
  margin-left: -12px !important; margin-right: -12px !important;
  width: calc(100% + 24px) !important; max-width: none !important;
}
/* El aire lateral que se le quita a la pantalla se lo quedan los bloques:
   la cabecera va a sangre, el contenido no. */
.settings-screen > *:not(.topbar):not([class$="-fondo"]),
.friends-screen > *:not(.topbar):not([class$="-fondo"]),
.cpu-setup > *:not(.topbar):not([class$="-fondo"]){
  margin-left: 12px; margin-right: 12px;
}

/* ══════════════════════════════════════════════════════════════
   PUNTO 16 — RESULTADO
   Sin barra de arriba: al terminar una partida no hay a dónde volver que
   no sea uno de los dos botones, y las monedas y la campana no pintaban
   nada aquí. El espacio se lo queda lo que importa.
   ══════════════════════════════════════════════════════════════ */
.resultado-pantalla{
  position: relative; min-height: 100dvh;
  margin-left: -12px !important; margin-right: -12px !important;
  width: calc(100% + 24px) !important; max-width: none !important;
  padding: 0 !important; background: #05070f; overflow: hidden;
}
.resultado-fondo{ position: absolute; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center top; }
.resultado-velo{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,7,15,.24) 0%, rgba(4,7,15,.5) 52%, rgba(4,7,15,.86) 100%);
}
.resultado-pantalla--campeon .resultado-velo{
  background: linear-gradient(180deg, rgba(18,12,2,.2) 0%, rgba(8,7,3,.48) 52%, rgba(4,5,9,.86) 100%);
}
/* Rayos y chispas: sólo para el primer puesto. */
.resultado-rayos{
  position: absolute; left: 50%; top: -18%; width: 150%; height: 78%;
  transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,208,96,.16) 22deg,
    transparent 44deg, rgba(255,208,96,.16) 66deg, transparent 88deg,
    rgba(255,208,96,.16) 110deg, transparent 132deg, rgba(255,208,96,.16) 154deg,
    transparent 176deg, rgba(255,208,96,.16) 198deg, transparent 220deg,
    rgba(255,208,96,.16) 242deg, transparent 264deg, rgba(255,208,96,.16) 286deg,
    transparent 308deg, rgba(255,208,96,.16) 330deg, transparent 360deg);
  animation: pvSpin 30s linear infinite;
}
.resultado-chispas{ position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.resultado-chispas i{
  position: absolute; top: 18%; left: calc(6% + var(--n) * 6.6%);
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 0%, rgba(255,208,96,.9) 45%, transparent 70%);
  animation: resChispa 3.4s ease-in-out infinite;
  animation-delay: calc(var(--n) * -0.24s); opacity: 0;
}
@keyframes resChispa{
  0%{ transform: translateY(24px) scale(.5); opacity: 0; }
  22%{ opacity: 1; }
  100%{ transform: translateY(-120px) scale(1.15); opacity: 0; }
}
.resultado-cuerpo{
  position: relative; z-index: 1; min-height: 100dvh;
  display: flex; flex-direction: column; gap: 16px;
  /* La barra inferior sigue estando: el relleno cuenta con ella o los dos
     botones quedan justo debajo y no se pueden pulsar. */
  padding: calc(26px + env(safe-area-inset-top, 0px)) 18px calc(118px + env(safe-area-inset-bottom, 0px));
}
.resultado-hero{ text-align: center; }
.resultado-medalla{ line-height: 1; filter: drop-shadow(0 8px 26px rgba(255,200,60,.4)); }
.resultado-pantalla--campeon .resultado-medalla{
  filter: drop-shadow(0 0 34px rgba(255,208,96,.7)) drop-shadow(0 10px 24px rgba(0,0,0,.6));
  animation: pvSealStamp .8s cubic-bezier(.34,1.56,.64,1) both;
}
.resultado-puesto{
  width: 96px; height: 96px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 32%, rgba(255,255,255,.09), rgba(0,0,0,.42));
  border: 2px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1);
}
.resultado-puesto span{ font-family:'Cinzel',serif; font-size:42px; font-weight:900; color:rgba(255,255,255,.7); line-height:1; }
.resultado-titulo{
  margin: 14px 0 4px; font-size: 25px; font-weight: 900;
  font-family:'Cinzel','Palatino Linotype',Georgia,serif; letter-spacing:.03em;
  color: rgba(255,255,255,.9); text-shadow: 0 3px 12px rgba(0,0,0,.7);
}
.resultado-pantalla--campeon .resultado-titulo{
  color: #ffd060; font-size: 28px;
  text-shadow: 0 0 26px rgba(255,170,0,.5), 0 3px 12px rgba(0,0,0,.8);
}
.resultado-pantalla--podio .resultado-titulo{ color: #d9e4ff; }
.resultado-subtitulo{ margin: 0 0 16px; font-size: 13px; color: rgba(255,255,255,.55); }
/* Dos columnas como mucho, nunca cinco tarjetas diminutas en una fila. */
.resultado-resumen{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.resultado-dato{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 13px 12px; border-radius: 16px; min-width: 0;
  background: rgba(6,10,20,.62); border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.resultado-dato--ancho{ grid-column: 1 / -1; }
.resultado-dato__k{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.42); }
.resultado-dato__v{
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family:'Cinzel',serif; font-size: 24px; font-weight: 900; line-height: 1.1; color: #fff3d4;
}
.resultado-dato__v.es-suma{ color: var(--green, #5ee8a4); }
.resultado-dato__v.es-resta{ color: var(--red, #ff566a); }
.resultado-dato__v--oro{ color: var(--gold, #ffd060); }
.resultado-dato__v--liga{ font-size: 19px; color: var(--gold, #ffd060); }
.resultado-dato__pie{ font-size:11px; color:rgba(255,255,255,.45); display:inline-flex; align-items:center; gap:4px; }
.resultado-pantalla--campeon .resultado-dato{ border-color: rgba(255,208,96,.28); background: rgba(20,14,4,.62); }
.resultado-acciones{ display: flex; flex-direction: column; gap: 9px; margin-top: auto; }
.resultado-acciones .btn-game, .resultado-acciones .btn-game-dark{ width: 100%; }
.resultado-detalles{
  width: 100%; min-height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.62); font-family: inherit; font-size: 12.5px; font-weight: 800;
  letter-spacing: .04em; cursor: pointer;
}
.resultado-detalle{ display: flex; flex-direction: column; gap: 12px; }
.resultado-bloque{ padding: 14px; border-radius: 16px; background: rgba(4,8,16,.66); border: 1px solid rgba(255,255,255,.08); }
.resultado-bloque__titulo{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.42); margin-bottom:10px; }
.resultado-fila{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 11px; margin-bottom: 5px;
  background: rgba(255,255,255,.03); border: 1px solid transparent;
}
/* Tu fila se distingue sin leerla: marca dorada al canto y fondo propio. */
.resultado-fila--yo{ background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.4); box-shadow: inset 3px 0 0 var(--gold, #ffd060); }
.resultado-fila__puesto{ width:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; color:rgba(255,255,255,.65); }
.resultado-fila__nombre{ flex:1; min-width:0; font-size:13px; font-weight:800; color:rgba(255,255,255,.88); }
.resultado-fila__nombre span{ color: var(--gold,#ffd060); font-size:10px; margin-left:5px; }
.resultado-fila__delta{ display:inline-flex; align-items:center; gap:4px; flex-shrink:0; font-size:12.5px; font-weight:800; color:var(--green,#5ee8a4); }
.resultado-fila__delta.es-resta{ color: var(--red,#ff566a); }
.resultado-pase__linea{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:12.5px; color:rgba(255,255,255,.7); }
.resultado-pase__linea strong{ color: var(--gold,#ffd060); font-size:15px; font-weight:900; }
.resultado-pase__barra{ height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; margin:9px 0 6px; }
.resultado-pase__barra i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#c9a84c,#ffd060); }
.resultado-pase__pie{ font-size:11px; color:rgba(255,255,255,.45); }
.resultado-pase__cta{ width:100%; margin-top:11px; }
.resultado-ronda{ padding:10px 12px; border-radius:11px; background:rgba(0,0,0,.28); margin-bottom:6px; }
.resultado-ronda__cab{ font-size:11px; font-weight:800; color:rgba(255,255,255,.45); margin-bottom:5px; }
.resultado-ronda__linea{ font-size:11.5px; color:rgba(255,255,255,.62); padding:1px 0; }
.resultado-ronda__linea.es-exacto{ color: var(--green,#5ee8a4); }
.resultado-ronda__linea.es-grave{ color: var(--red,#ff566a); }

/* Estado vacío común: título corto, una frase y CTA sólo si tiene sentido. */
.estado-vacio{
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  padding: calc(30px + env(safe-area-inset-top, 0px)) 26px calc(120px + env(safe-area-inset-bottom, 0px));
}
.estado-vacio__titulo{ margin:0; font-family:'Cinzel',serif; font-size:19px; font-weight:900; letter-spacing:.12em; color:rgba(255,255,255,.72); }
.estado-vacio__copia{ margin:0; font-size:13px; color:rgba(255,255,255,.45); max-width:300px; line-height:1.5; }
.estado-vacio .btn-game{ margin-top:8px; min-width:180px; }
/* El mismo patrón dentro de un panel, sin ocupar la pantalla. */
.estado-vacio--enlinea{ min-height:0; padding:22px 16px; gap:6px; }
.estado-vacio--enlinea .estado-vacio__titulo{ font-size:14px; letter-spacing:.1em; }
.estado-vacio--enlinea .estado-vacio__copia{ font-size:12px; }
.estado-vacio--enpantalla{ min-height:62vh; padding-top:20px; padding-bottom:20px; }

/* ══════════════════════════════════════════════════════════════
   PUNTO 17 — MISMO MÓVIL
   ══════════════════════════════════════════════════════════════ */
.friends-screen .local-panel{
  margin: 4px 12px 12px; padding: 14px; border-radius: 18px;
  background: rgba(6,10,20,.66); border: 1px solid rgba(201,168,76,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.34);
}
.friends-screen .local-copia{ margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: rgba(255,232,180,.6); }
.friends-screen .local-cuerpo{ display: flex; flex-direction: column; gap: 10px; }
.friends-screen .local-jugar{ width: 100%; margin-top: 4px; }

/* Paso del móvil: sin cartas a la vista y sin textos de más. */
.pv-relevo{
  position: absolute; inset: 0; z-index: 25;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center;
  padding: calc(32px + env(safe-area-inset-top, 0px)) 30px calc(32px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(ellipse at center, rgba(10,14,28,.98), rgba(3,5,11,.99));
  backdrop-filter: blur(20px);
}
.pv-relevo__eyebrow{ font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.pv-relevo__nombre{
  font-family:'Cinzel','Palatino Linotype',Georgia,serif;
  font-size: 32px; font-weight: 900; color: #ffd060; line-height: 1.1;
  text-shadow: 0 0 28px rgba(255,170,0,.35), 0 3px 12px rgba(0,0,0,.8);
  max-width: 100%; overflow-wrap: anywhere;
}
.pv-relevo__copia{ font-size: 13px; color: rgba(255,255,255,.5); }
.pv-relevo__cta{ margin-top: 10px; min-width: 220px; }

/* ══════════════════════════════════════════════════════════════
   PUNTO 18 — ACTIVIDAD
   Una lista cronológica, sin filtros y sin emojis del sistema.
   ══════════════════════════════════════════════════════════════ */
.actividad-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 14px 10px; }
.actividad-cab__cuenta{ font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.35); }
/* Acción secundaria: se ve si se busca, no compite con la lista. */
.actividad-marcar{
  padding:6px 11px; border-radius:9px; min-height:32px;
  background: transparent; border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,232,180,.62); font-family: inherit; font-size: 11px; font-weight: 800; cursor: pointer;
}
.actividad-lista{ margin:0 12px 16px; border-radius:16px; overflow:hidden; background:rgba(6,10,20,.6); border:1px solid rgba(255,255,255,.07); }
.actividad-item{ display:flex; gap:12px; align-items:flex-start; position:relative; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.05); }
.actividad-item:last-child{ border-bottom:none; }
.actividad-item.es-nuevo{ background: rgba(255,255,255,.035); }
.actividad-item.es-nuevo::before{
  content:''; position:absolute; left:4px; top:50%; transform:translateY(-50%);
  width:3px; height:22px; border-radius:2px;
  background: var(--tono, #ffd060); box-shadow: 0 0 8px var(--tono, #ffd060);
}
.actividad-item--oro{ --tono:#ffd060; }
.actividad-item--rojo{ --tono:#ff566a; }
.actividad-item--azul{ --tono:#78b4ff; }
.actividad-item--lila{ --tono:#c89aff; }
.actividad-item--neutro{ --tono:rgba(255,255,255,.5); }
.actividad-item__icono{
  flex-shrink:0; width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.09);
}
.actividad-item__icono img{ width:26px; height:26px; object-fit:contain; display:block; }
.actividad-rombo{
  width:11px; height:11px; transform:rotate(45deg); border-radius:2px;
  background: linear-gradient(135deg, #ffd060, #c9a84c);
  box-shadow: 0 0 8px rgba(255,208,96,.45);
}
.actividad-item__texto{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.actividad-item__texto strong{ font-size:13px; font-weight:800; color:rgba(255,255,255,.72); }
.actividad-item.es-nuevo .actividad-item__texto strong{ color:#fff8e0; font-weight:900; }
.actividad-item__texto span{ font-size:11.5px; line-height:1.4; color:rgba(255,255,255,.55); }
.actividad-item__hora{ flex-shrink:0; white-space:nowrap; font-size:10px; font-weight:700; color:rgba(255,255,255,.32); }

/* ══════════════════════════════════════════════════════════════
   PUNTO 19 — PRIVACIDAD Y DATOS
   Subpantalla informativa: se lee y se entiende, sin decoración. Lo que se
   puede tocar sigue en Ajustes.
   ══════════════════════════════════════════════════════════════ */
.privacidad-pantalla{ padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
.privacidad-intro{ margin: 2px 16px 14px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.5); }
.privacidad-bloque{
  margin: 0 12px 10px; padding: 14px 15px; border-radius: 16px;
  background: rgba(6,10,20,.6); border: 1px solid rgba(255,255,255,.08);
}
.privacidad-bloque h3{
  margin: 0 0 6px; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold, #ffd060);
}
.privacidad-bloque p{ margin: 0; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.66); }
.privacidad-bloque strong{ color: rgba(255,255,255,.86); }
.privacidad-cols{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 8px; }
.privacidad-col{ padding: 10px 11px; border-radius: 12px; min-width: 0; background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.07); }
.privacidad-col__k{
  display: block; margin-bottom: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.42);
}
.privacidad-col ul{ margin: 0; padding-left: 16px; }
.privacidad-col li{ font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.66); }
.privacidad-nota{ margin-top: 8px !important; font-size: 11.5px !important; color: rgba(255,255,255,.42) !important; }
.privacidad-doc{ border-top: 1px solid rgba(255,255,255,.07); }
.privacidad-doc:first-of-type{ border-top: none; }
.privacidad-doc__resumen{
  list-style: none; cursor: pointer; padding: 11px 0;
  font-size: 13px; font-weight: 800; color: rgba(255,255,255,.82);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.privacidad-doc__resumen::-webkit-details-marker{ display: none; }
.privacidad-doc__resumen::after{
  content: ''; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid rgba(255,255,255,.4); border-bottom: 2px solid rgba(255,255,255,.4);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s;
}
.privacidad-doc[open] > .privacidad-doc__resumen::after{ transform: rotate(-135deg) translate(-2px, -2px); }
.privacidad-doc__cuerpo{ padding-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.privacidad-doc__bloque strong{ display: block; margin-bottom: 3px; font-size: 12px; font-weight: 800; color: rgba(255,232,180,.8); }
.privacidad-doc__bloque p{ font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.58); }
.privacidad-enlace{
  display: block; margin-top: 10px; min-height: 44px; line-height: 44px;
  text-align: center; border-radius: 12px; text-decoration: none;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,232,180,.82); font-size: 13px; font-weight: 800;
}

/* ══════════════════════════════════════════════════════════════
   PUNTO 20 — CAMBIO DE LIGA Y LOGROS
   ══════════════════════════════════════════════════════════════ */
.liga-overlay{
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 26px calc(24px + env(safe-area-inset-bottom, 0px));
  animation: pvFadeIn .35s ease;
}
.liga-overlay--sube{ background: radial-gradient(ellipse at center, rgba(22,15,3,.98), rgba(0,0,0,.99)); }
.liga-overlay--baja{ background: radial-gradient(ellipse at center, rgba(10,12,20,.98), rgba(0,0,0,.99)); }
.liga-overlay__rayos{
  position: absolute; inset: -25%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,208,96,.16) 30deg,
    transparent 60deg, rgba(255,208,96,.16) 90deg, transparent 120deg,
    rgba(255,208,96,.16) 150deg, transparent 180deg, rgba(255,208,96,.16) 210deg,
    transparent 240deg, rgba(255,208,96,.16) 270deg, transparent 300deg,
    rgba(255,208,96,.16) 330deg, transparent 360deg);
  animation: pvSpin 22s linear infinite;
}
.liga-overlay__cuerpo{
  position: relative; z-index: 2; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 320px;
}
.liga-overlay__eyebrow{ font-size:11px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.liga-overlay--sube .liga-overlay__eyebrow{ color: #ffd060; }
.liga-overlay__insignia img{ width:160px; height:160px; object-fit:contain; display:block; filter: drop-shadow(0 8px 22px rgba(0,0,0,.7)); }
.liga-overlay--sube .liga-overlay__insignia img{
  filter: drop-shadow(0 0 34px rgba(255,208,96,.6)) drop-shadow(0 8px 18px rgba(0,0,0,.7));
  animation: pvSealStamp .8s cubic-bezier(.34,1.56,.64,1) both;
}
.liga-overlay--baja .liga-overlay__insignia img{ width:124px; height:124px; opacity:.82; }
.liga-overlay__nombre{
  font-family:'Cinzel',serif; font-size:27px; font-weight:900; letter-spacing:.03em;
  color: rgba(255,255,255,.88); text-shadow: 0 3px 12px rgba(0,0,0,.8);
}
.liga-overlay--sube .liga-overlay__nombre{ color:#ffd060; text-shadow: 0 0 28px rgba(255,170,0,.5), 0 3px 12px rgba(0,0,0,.8); }
.liga-overlay__copia{ font-size:13px; line-height:1.5; color:rgba(255,255,255,.55); }
.liga-overlay__premio{
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,208,96,.12); border: 1px solid rgba(255,208,96,.34);
  font-size: 12px; font-weight: 800; color: #ffd060;
}
.liga-overlay__cta{ margin-top: 8px; min-width: 200px; }

/* Logro desbloqueado: un aviso corto que no interrumpe. */
.logro-toast{
  position: fixed; left: 12px; right: 12px; z-index: 1200;
  top: calc(10px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(24,18,4,.97), rgba(10,8,3,.97));
  border: 1px solid rgba(255,208,96,.42);
  box-shadow: 0 14px 32px rgba(0,0,0,.55);
  animation: pvSlideInTop .32s ease;
}
.logro-toast__icono{
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,208,96,.14); border: 1px solid rgba(255,208,96,.34);
}
.logro-toast__icono i{ width:12px; height:12px; transform:rotate(45deg); border-radius:2px; background:linear-gradient(135deg,#ffd060,#c9a84c); }
.logro-toast__texto{ flex:1; min-width:0; display:flex; flex-direction:column; }
.logro-toast__texto b{ font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:#ffd060; }
.logro-toast__texto span{ font-size:13px; font-weight:800; color:rgba(255,255,255,.9); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Lupa dibujada: el emoji del sistema cambia de forma en cada Android. */
.search-input__icon{
  position: relative; display: inline-block; width: 14px; height: 14px; flex-shrink: 0;
}
.search-input__icon::before{
  content: ''; position: absolute; left: 0; top: 0; width: 10px; height: 10px;
  border: 2px solid currentColor; border-radius: 50%; opacity: .55;
}
.search-input__icon::after{
  content: ''; position: absolute; right: 0; bottom: 0; width: 6px; height: 2px;
  background: currentColor; border-radius: 2px; transform: rotate(45deg); opacity: .55;
}

/* Perfil público: la misma cara y el mismo marco que se ven en la mesa. */
.perfilpub-cabecera{ text-align: center; margin-bottom: 14px; }
.perfilpub-avatar{
  position: relative; display: block; width: 84px; height: 84px; margin: 0 auto 10px;
  border-radius: 20px; overflow: visible;
}
.perfilpub-avatar img{
  width: 84px; height: 84px; border-radius: 20px; object-fit: cover; display: block;
  border: 2px solid rgba(242,194,48,.4); background: rgba(0,0,0,.4);
}
.perfilpub-avatar img.perfilpub-marco{
  position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px);
  border: none; border-radius: 0; background: none; object-fit: contain; pointer-events: none;
}
.perfilpub-titulo{
  margin-top: 3px; font-size: 12px; font-weight: 800;
  color: rgba(255,232,180,.72); letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════════════════
   PUNTO 6 — COSMÉTICO IMPORTANTE RECIÉN OBTENIDO
   El pase entrega tres piezas que definen la temporada. Un aviso de una
   línea no les hace justicia: se enseñan enteras, con nombre y rareza.
   ══════════════════════════════════════════════════════════════ */
.premio-overlay{
  position: fixed; inset: 0; z-index: 1100; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
  animation: pvFadeIn .4s ease;
}
.premio-overlay--exclusivo{ background: radial-gradient(ellipse at center, rgba(18,10,32,.98), rgba(2,3,8,.99)); }
.premio-overlay--legendario{ background: radial-gradient(ellipse at center, rgba(22,15,3,.98), rgba(2,3,8,.99)); }
.premio-overlay__rayos{
  position: absolute; inset: -25%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,208,96,.13) 26deg,
    transparent 52deg, rgba(255,208,96,.13) 78deg, transparent 104deg,
    rgba(255,208,96,.13) 130deg, transparent 156deg, rgba(255,208,96,.13) 182deg,
    transparent 208deg, rgba(255,208,96,.13) 234deg, transparent 260deg,
    rgba(255,208,96,.13) 286deg, transparent 312deg, rgba(255,208,96,.13) 338deg, transparent 360deg);
  animation: pvSpin 26s linear infinite;
}
.premio-overlay__cuerpo{
  position: relative; z-index: 2; height: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; max-width: 330px; width: 100%; min-height: 0;
}
.premio-overlay__eyebrow{
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase; color: #ffd060;
  text-shadow: 0 0 22px rgba(255,170,0,.45);
}
/* El arte manda el alto y el ancho sale solo: así se ve entero sea un
   tapete 941x1672, un reverso 560x880 o un avatar cuadrado. */
.premio-overlay__arte{
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  animation: pvSealStamp .8s cubic-bezier(.34,1.56,.64,1) both;
}
.premio-overlay__arte img{
  max-height: 100%; max-width: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 12px;
  box-shadow: 0 0 42px rgba(255,208,96,.38), 0 16px 36px rgba(0,0,0,.75);
}
.premio-overlay__nombre{
  font-family: 'Cinzel', serif; font-size: 21px; font-weight: 900;
  color: #fff3d4; text-shadow: 0 3px 12px rgba(0,0,0,.9);
}
.premio-overlay__tipo{ font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .04em; }
.premio-overlay__botones{ display: flex; gap: 10px; width: 100%; justify-content: center; padding-top: 4px; }
.premio-overlay__botones .btn-game,
.premio-overlay__botones .btn-game-dark{ flex: 1; max-width: 160px; }

/* ══════════════════════════════════════════════════════════════
   SEASON 0 — ONLINE
   Cabecera limpia, estado de temporada visible y una sola acción dominante.
   ══════════════════════════════════════════════════════════════ */
/* Online es la única vista de navegación que usa franjas a sangre. Quitamos
   aquí el padding global de #app en vez de compensarlo con márgenes negativos:
   así cabecera, estado de temporada, hero y fondo comparten exactamente el
   mismo eje en web, PWA y Android, independientemente del ancho del móvil. */
body[data-screen="online"]{
  overflow-x:hidden;
}
body[data-screen="online"] #app{
  width:100%; max-width:none; margin:0;
  padding:0 !important;
}
body .online-screen{
  width:100%; max-width:none; min-height:100dvh;
  margin:0 !important; padding:var(--alto-topbar) 0 0 !important;
  overflow-x:clip; animation:none;
  background:
    radial-gradient(ellipse 90% 38% at 50% 9%, rgba(38,109,219,.2), transparent 72%),
    linear-gradient(180deg,#0b1529 0%,#070b15 58%,#05070d 100%) !important;
}
body .online-screen .topbar--online{
  position:fixed !important; inset:0 0 auto !important; z-index:60 !important;
  width:100vw !important; height:var(--alto-topbar) !important;
  min-height:var(--alto-topbar) !important;
  margin:0 !important; padding:env(safe-area-inset-top, 0px) 16px 0 !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,rgba(6,10,22,.96),rgba(6,10,22,.88)) !important;
  border:0 !important; border-bottom:1px solid rgba(242,194,48,.26) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.24) !important;
}
body .topbar--online .topbar__main{
  width:100%; min-width:0; display:grid !important;
  grid-template-columns:40px minmax(0,1fr) 40px !important;
  align-items:center !important; gap:0 !important;
}
body .topbar--online .topbar__leading{
  display:contents !important;
}
body .topbar--online .topbar__leading .icon-btn{
  grid-column:1; justify-self:start; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1);
}
body .topbar--online .topbar__title{
  grid-column:2; justify-self:center; min-width:0; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
body .topbar--online .topbar__title::after{
  content:''; width:42px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(242,194,48,.85),transparent);
}
body .topbar--online .topbar__title strong{
  font-family:'Cinzel','Palatino Linotype',Georgia,serif;
  font-size:20px !important; letter-spacing:.06em; color:#fff8e0;
}
body .topbar--online .topbar__actions{ grid-column:3; justify-self:end; width:40px; min-width:40px; }
.topbar-online-spacer{ display:block; width:38px; height:38px; }
.online-season-strip i,
.online-match-meta i{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:#43dc9c; box-shadow:0 0 0 3px rgba(67,220,156,.12),0 0 12px rgba(67,220,156,.8);
}
.online-season-strip{
  width:100%; margin:0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:38px; padding:8px 16px;
  background:linear-gradient(90deg,rgba(17,35,68,.96),rgba(10,23,47,.94));
  border-bottom:1px solid rgba(112,172,255,.14);
  color:rgba(221,235,255,.78); font-size:11px; letter-spacing:.04em;
  text-transform:uppercase;
}
.online-season-strip span{ display:inline-flex; align-items:center; gap:8px; font-weight:900; }
.online-season-strip strong{ color:#dceaff; font-size:11px; font-weight:800; text-align:right; }
.online-season-strip--pending i{ background:#ffd060; box-shadow:0 0 0 3px rgba(255,208,96,.12),0 0 12px rgba(255,208,96,.7); }
.online-hero{
  --league-main:#8fdcff; --league-glow:rgba(75,171,255,.38); --league-bg:rgba(75,171,255,.12);
  position:relative; isolation:isolate; overflow:hidden; width:100%; min-height:0; margin:0;
  padding:24px 20px 28px; display:flex; align-items:center; justify-content:center;
  text-align:center; border-bottom:1px solid color-mix(in srgb,var(--league-main) 34%,transparent);
  background:
    radial-gradient(ellipse 68% 54% at 50% 25%,var(--league-bg),transparent 74%),
    linear-gradient(180deg,rgba(12,30,58,.95),rgba(6,11,22,.98));
}
.online-hero::after{
  content:''; position:absolute; z-index:-1; left:8%; right:8%; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--league-main),transparent); opacity:.55;
  box-shadow:0 0 22px var(--league-glow);
}
.online-hero__grid{
  position:absolute; z-index:-2; inset:0; opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 82%);
}
.online-hero__halo{
  position:absolute; z-index:-1; width:310px; height:310px; top:-42px; left:50%;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle,var(--league-glow),transparent 68%);
  filter:blur(8px); opacity:.9;
}
.online-hero__content{ position:relative; width:100%; max-width:420px; }
.online-rank-seal{
  position:relative; width:98px; height:98px; margin:0 auto 10px;
  display:grid; place-items:center;
}
.online-rank-seal::before,
.online-rank-seal::after{
  content:''; position:absolute; border-radius:50%; pointer-events:none;
}
.online-rank-seal::before{
  inset:4px; border:1px solid color-mix(in srgb,var(--league-main) 58%,transparent);
  box-shadow:inset 0 0 28px var(--league-glow),0 0 28px var(--league-glow);
}
.online-rank-seal::after{
  inset:14px; background:radial-gradient(circle at 36% 28%,rgba(255,255,255,.13),rgba(1,6,16,.78) 66%);
  border:1px solid rgba(255,255,255,.1); z-index:-1;
}
.online-rank-seal__orbit{
  position:absolute; inset:0; border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--league-main) 45%,transparent);
  animation:onlineOrbit 24s linear infinite;
}
.online-rank-seal__orbit::before,
.online-rank-seal__orbit::after{
  content:''; position:absolute; width:7px; height:7px; border-radius:50%;
  background:var(--league-main); box-shadow:0 0 12px var(--league-main);
}
.online-rank-seal__orbit::before{ top:8px; left:23px; }
.online-rank-seal__orbit::after{ right:8px; bottom:24px; }
@keyframes onlineOrbit{ to{ transform:rotate(360deg); } }
.online-rank-seal__core{ width:64px; height:64px; display:grid; place-items:center; }
.online-rank-seal__core img{
  width:58px; height:58px; object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.6)) drop-shadow(0 0 11px var(--league-glow));
}
.online-hero__eyebrow{
  color:rgba(222,235,255,.58); font-size:10px; font-weight:900;
  letter-spacing:.15em; text-transform:uppercase;
}
.online-hero h1{
  margin:4px 0 4px; color:var(--league-main);
  font:900 clamp(25px,7vw,32px)/1.05 'Cinzel','Palatino Linotype',Georgia,serif;
  text-shadow:0 0 24px var(--league-glow),0 3px 12px rgba(0,0,0,.7);
}
.online-trophy-total{
  display:flex; align-items:center; justify-content:center; gap:7px; margin:0 0 14px;
  color:#fff7de;
}
.online-trophy-total strong{ font:900 24px/1 'Cinzel','Palatino Linotype',Georgia,serif; }
.online-trophy-total span{ color:rgba(220,233,255,.52); font-size:11px; font-weight:700; }
.online-progress{
  margin:0 auto 16px; padding:12px 14px; border-radius:14px;
  background:rgba(2,7,16,.46); border:1px solid rgba(255,255,255,.075);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.online-progress__labels{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  margin-bottom:8px; color:rgba(220,233,255,.48); font-size:10px; font-weight:800;
}
.online-progress__labels span{ display:inline-flex; align-items:center; gap:3px; }
.online-progress__labels strong{ color:var(--league-main); font-size:10px; }
.online-progress__track{ height:7px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); }
.online-progress__track i{
  display:block; height:100%; min-width:0; border-radius:inherit;
  background:linear-gradient(90deg,color-mix(in srgb,var(--league-main) 68%,#447cff),var(--league-main));
  box-shadow:0 0 12px var(--league-glow); transition:width .4s ease;
}
.online-progress p{ margin:8px 0 0; color:rgba(220,233,255,.76); font-size:11px; line-height:1.4; }
.online-max-league{
  margin:0 0 18px; color:var(--league-main); font-size:11px; font-weight:900;
  letter-spacing:.08em; text-transform:uppercase;
}
body .online-buscar{
  width:100%; max-width:none; min-height:54px; padding:0 20px !important;
  display:flex; align-items:center; justify-content:center; gap:12px;
  border:1px solid rgba(255,235,160,.5) !important; border-radius:15px !important;
  background:linear-gradient(160deg,#ffe278,#d9a92e) !important;
  color:#171004 !important; font-size:14px !important; letter-spacing:.095em;
  box-shadow:0 12px 28px rgba(201,168,76,.24),inset 0 1px rgba(255,255,255,.5) !important;
}
.online-buscar b{ font-size:19px; line-height:1; transition:transform .18s ease; }
.online-buscar:not(:disabled):active b{ transform:translateX(4px); }
.online-match-meta{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:11px;
  color:rgba(220,233,255,.7); font-size:11px; font-weight:700;
}
.online-match-meta i{ width:6px; height:6px; }
.online-prelaunch-note{
  margin:11px 0 0; padding:9px 11px; border-radius:10px;
  border:1px solid rgba(255,208,96,.2); background:rgba(255,208,96,.07);
  color:#f3dfab; font-size:11px; line-height:1.45;
}
.online-prelaunch-note--result{ margin:0 16px 10px; text-align:center; }
.online-sinred{ margin-top:8px; }
.online-section,
.online-rank-wrap{
  width:calc(100% - 28px); max-width:560px;
  margin:12px auto 0 !important;
}
body .online-plegable{
  border-radius:16px; border-color:rgba(125,164,225,.14);
  background:linear-gradient(145deg,rgba(15,27,49,.78),rgba(5,10,20,.78));
  box-shadow:0 10px 28px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.025);
}
body .online-plegable__cab{ min-height:52px; padding:13px 15px; }
body .online-plegable__titulo{ color:#dce9ff; font-size:11px; letter-spacing:.105em; }
body .online-mipuesto{
  border-radius:15px; background:linear-gradient(135deg,rgba(45,104,190,.15),rgba(201,168,76,.08));
  border-color:rgba(117,174,255,.22); box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.online-mipuesto--vacio{
  min-height:68px; padding:12px 14px; display:flex; align-items:center; gap:12px;
}
.online-mipuesto__icon{
  width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto;
  border-radius:12px; background:rgba(242,194,48,.1); border:1px solid rgba(242,194,48,.2);
}
.online-mipuesto--vacio > span:last-child{ display:flex; flex-direction:column; gap:3px; min-width:0; text-align:left; }
.online-mipuesto--vacio strong{ color:#edf4ff; font-size:12px; }
.online-mipuesto--vacio small{ color:rgba(220,233,255,.48); font-size:10.5px; line-height:1.35; }
.online-bottom-space{ height:calc(124px + env(safe-area-inset-bottom, 0px)); }

@media (min-width:640px){
  .online-hero{ min-height:430px; }
}
@media (max-width:370px){
  body .online-screen .topbar--online{ padding-left:10px !important; padding-right:10px !important; }
  body .topbar--online .topbar__main{ grid-template-columns:38px minmax(0,1fr) 38px !important; }
  body .topbar--online .topbar__title strong{ font-size:18px !important; }
  .online-season-strip{ flex-wrap:wrap; gap:2px 8px; }
}
@media (max-height:740px){
  .online-hero{ padding-top:18px; padding-bottom:20px; }
  .online-rank-seal{ width:88px; height:88px; margin-bottom:8px; }
  .online-rank-seal__core img{ width:50px; height:50px; }
  .online-progress{ margin-bottom:13px; }
}
@media (prefers-reduced-motion:reduce){
  .online-rank-seal__orbit{ animation:none; }
}