/* =====================================================================
LA BALDUNETA v2 — CHAMPIONSHIP SERIES
Dirección visual: "sala de trofeos". Carbón + oro + hielo.
Display: Anton · Texto: Inter Tight · Datos: IBM Plex Mono
===================================================================== */
:root{
--void:#08090C;
--panel:#101216;
--panel-2:#171A20;
--panel-3:#1F242C;
--line:rgba(255,255,255,.09);
--line-soft:rgba(255,255,255,.05);
--gold:#E0B152;
--gold-lt:#FBEBC0;
--gold-dk:#8A6320;
--ice:#68D8F5;
--live:#FF4B4B;
--win:#5FD38A;
--text:#F2F3F5;
--muted:#939AA6;
--muted-2:#666D79;
--display:'Anton','Oswald','Arial Narrow',sans-serif;
--body:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
--mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
--r:3px;
--cut:12px;
--clip:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
--shadow:0 30px 70px -40px #000;
--wrap:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;font-family:var(--body);font-size:15px;line-height:1.62;color:var(--text);
background:var(--void);
background-image:
radial-gradient(900px 480px at 82% -6%,rgba(224,177,82,.10),transparent 64%),
radial-gradient(760px 420px at 6% 4%,rgba(104,216,245,.07),transparent 62%);
background-attachment:fixed;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:#0B0C10}
::-webkit-scrollbar{height:9px;width:9px}
::-webkit-scrollbar-track{background:var(--panel)}
::-webkit-scrollbar-thumb{background:var(--panel-3);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:var(--gold-dk)}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;text-transform:uppercase;margin:0;line-height:.94;letter-spacing:.01em}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
/* ---------- Piezas base ---------------------------------------------- */
.kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;
letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.kicker::before{content:"";width:20px;height:1px;background:currentColor;opacity:.8}
.btn{
position:relative;overflow:hidden;isolation:isolate;border:0;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:14px 26px;font-family:var(--body);font-weight:700;font-size:12.5px;
letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
color:#0C0D11;background:linear-gradient(135deg,var(--gold-lt),var(--gold) 48%,#B98F32);
clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
transition:transform .16s ease,box-shadow .16s ease;box-shadow:0 12px 30px -16px rgba(224,177,82,.9);
}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-125%);
background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.6) 50%,transparent 64%);
transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 38px -16px rgba(224,177,82,1)}
.btn:hover::after{transform:translateX(125%)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.small{padding:10px 16px;font-size:11px}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-lt);background:rgba(224,177,82,.07)}
.btn.ghost::after{display:none}
.btn.ice{background:linear-gradient(135deg,#BFF1FF,var(--ice) 48%,#2E9DBC);box-shadow:0 12px 30px -16px rgba(104,216,245,.8)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--line);
border-radius:var(--r);font-family:var(--mono);font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted)}
.chip.gold{border-color:rgba(224,177,82,.4);color:var(--gold);background:rgba(224,177,82,.08)}
.chip.ice{border-color:rgba(104,216,245,.35);color:var(--ice);background:rgba(104,216,245,.08)}
.chip.live{border-color:rgba(255,75,75,.4);color:#FF9A9A;background:rgba(255,75,75,.1)}
.chip.live i{width:6px;height:6px;border-radius:50%;background:var(--live);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,75,75,.6)}70%{box-shadow:0 0 0 8px rgba(255,75,75,0)}100%{box-shadow:0 0 0 0 rgba(255,75,75,0)}}
.hidden{display:none!important}
.empty{grid-column:1/-1;color:var(--muted-2);font-size:13.5px;margin:0;padding:16px 0}
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
/* ---------- Cabecera -------------------------------------------------- */
.chrome{position:sticky;top:0;z-index:40;background:rgba(8,9,12,.9);backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid var(--line-soft)}
.utility{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 4vw;height:34px;
border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.02);
font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.utility a{text-decoration:none;transition:color .2s}
.utility a:hover{color:var(--gold)}
.utility .socials{display:flex;gap:18px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 4vw;height:70px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{width:40px;height:40px;display:grid;place-items:center;font-family:var(--display);font-size:19px;color:#0C0D11;
background:linear-gradient(145deg,var(--gold-lt),var(--gold) 46%,#9A6F26);
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.brand b{display:block;font-family:var(--display);font-size:22px;letter-spacing:.04em;line-height:1}
.brand small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;color:var(--muted-2);margin-top:3px}
.nav{display:flex;gap:6px}
.nav a{position:relative;padding:9px 14px;text-decoration:none;color:var(--muted);border-radius:var(--r);
font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;transition:color .2s,background .2s}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.actions{display:flex;align-items:center;gap:9px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);background:transparent;
color:var(--muted);border-radius:var(--r);cursor:pointer;transition:color .2s,border-color .2s}
.icon-btn:hover{color:var(--gold);border-color:rgba(224,177,82,.45)}
.icon-btn svg{width:17px;height:17px}
.icon-btn.on{color:var(--gold);border-color:rgba(224,177,82,.5);background:rgba(224,177,82,.1)}
.profile-btn{display:flex;align-items:center;gap:9px;height:40px;padding:0 13px;border:1px solid var(--line);
background:transparent;color:var(--text);border-radius:var(--r);cursor:pointer;font-family:var(--mono);font-size:11px}
.profile-btn:hover{border-color:rgba(224,177,82,.45)}
.profile-btn .pts{color:var(--gold);font-weight:700}
/* ---------- Hero ------------------------------------------------------ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease;transform:scale(1.04)}
.hero-slide.on{opacity:.5}
.hero-bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(92deg,var(--void) 6%,rgba(8,9,12,.86) 46%,rgba(8,9,12,.55)),linear-gradient(0deg,var(--void),transparent 46%)}
.hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(600px 380px at 76% 44%,rgba(224,177,82,.16),transparent 68%)}
.hero-in{position:relative;z-index:2;width:min(var(--wrap),92%);margin:0 auto;padding:96px 0 72px;
display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:52px;align-items:center}
.hero-copy h1{font-size:clamp(62px,8.6vw,132px);line-height:.86;margin:22px 0 20px;letter-spacing:-.005em}
.hero-copy h1 em{font-style:normal;background:linear-gradient(112deg,var(--gold-lt),var(--gold) 46%,#8A6320);
-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{color:#B4BAC4;font-size:16.5px;max-width:480px;margin:0 0 30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px}
.hero-dots{display:flex;gap:7px;margin-top:34px}
.hero-dots button{width:32px;height:3px;padding:0;border:0;background:rgba(255,255,255,.2);cursor:pointer;transition:background .3s}
.hero-dots button.on{background:var(--gold)}
/* Tarjeta de próxima partida (lower third de transmisión) */
.next-card{background:linear-gradient(168deg,var(--panel-2),var(--panel));border:1px solid var(--line);
clip-path:var(--clip);box-shadow:var(--shadow)}
.next-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;
border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.02)}
.next-head span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.next-body{padding:22px 18px}
.next-title{font-size:27px;margin-bottom:6px}
.next-meta{font-family:var(--mono);font-size:11px;color:var(--muted-2);letter-spacing:.06em;margin:0 0 18px}
.vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:20px}
.vs .side{text-align:center}
.vs .crest{width:52px;height:52px;margin:0 auto 9px;display:grid;place-items:center;font-family:var(--display);font-size:20px;
color:var(--gold-lt);background:linear-gradient(150deg,var(--panel-3),#0D0F13);border:1px solid rgba(224,177,82,.28);
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.vs .side b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs .x{font-family:var(--display);font-size:22px;color:var(--muted-2)}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;border-top:1px solid var(--line-soft);padding-top:16px}
.count div{text-align:center}
.count strong{display:block;font-family:var(--mono);font-weight:700;font-size:25px;font-variant-numeric:tabular-nums;
background:linear-gradient(180deg,#fff,#9AA1AD);-webkit-background-clip:text;background-clip:text;color:transparent}
.count span{display:block;margin-top:5px;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--muted-2);text-transform:uppercase}
/* ---------- Banda de estadísticas ------------------------------------ */
.statband{border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.02)}
.statband-in{width:min(var(--wrap),92%);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.statband div{padding:22px 12px;text-align:center;border-right:1px solid var(--line-soft)}
.statband div:last-child{border-right:0}
.statband strong{display:block;font-family:var(--mono);font-weight:700;font-size:29px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.statband span{display:block;margin-top:6px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--muted-2);text-transform:uppercase}
.statband .live-num{color:var(--ice)}
/* ---------- Secciones ------------------------------------------------- */
.section{width:min(var(--wrap),92%);margin:0 auto;padding:92px 0}
.section.tight{padding:64px 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px}
.head h2{font-size:clamp(36px,4.6vw,62px);margin-top:12px}
.head p{color:var(--muted);margin:10px 0 0;max-width:520px}
.panel{background:linear-gradient(168deg,var(--panel-2),var(--panel));border:1px solid var(--line);clip-path:var(--clip)}
/* ---------- Llave (bracket) ------------------------------------------ */
.bracket-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.bracket-bar button{padding:9px 14px;border:1px solid var(--line);background:transparent;color:var(--muted);
border-radius:var(--r);cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;transition:.2s}
.bracket-bar button:hover{color:var(--text);border-color:var(--muted-2)}
.bracket-bar button.on{color:#0C0D11;background:var(--gold);border-color:var(--gold);font-weight:700}
.bracket-scroll{overflow-x:auto;padding:6px 2px 20px}
.bracket{display:flex;gap:44px;min-width:min-content;align-items:stretch}
.round{display:flex;flex-direction:column;justify-content:space-around;gap:14px;min-width:238px}
.round-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);
text-align:center;padding-bottom:12px;border-bottom:1px solid var(--line-soft);margin-bottom:6px}
.match{position:relative;background:linear-gradient(168deg,var(--panel-2),var(--panel));border:1px solid var(--line);
border-radius:var(--r);overflow:hidden;transition:border-color .25s}
.match:hover{border-color:rgba(224,177,82,.32)}
.round:not(:last-child) .match::after,
.round:not(:first-child) .match::before{content:"";position:absolute;top:50%;width:22px;height:1px;background:var(--line)}
.round:not(:last-child) .match::after{left:100%}
.round:not(:first-child) .match::before{right:100%}
.slot{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;padding:11px 12px;
border-bottom:1px solid var(--line-soft);font-size:13px}
.slot:last-child{border-bottom:0}
.slot .seed{font-family:var(--mono);font-size:9.5px;color:var(--muted-2)}
.slot .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.slot .sc{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--muted-2);font-variant-numeric:tabular-nums}
.slot.win{background:linear-gradient(90deg,rgba(224,177,82,.14),transparent)}
.slot.win .nm{color:var(--text);font-weight:600}
.slot.win .sc{color:var(--gold)}
.slot.lose .nm,.slot.lose .sc{opacity:.45}
.slot.tbd .nm{color:var(--muted-2);font-style:italic}
.match .tag{position:absolute;top:-9px;left:10px;padding:2px 7px;background:var(--panel-3);border:1px solid var(--line);
font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.champion{align-self:center;min-width:246px;padding:1px;clip-path:var(--clip);
background:linear-gradient(150deg,var(--gold-lt),var(--gold) 42%,var(--gold-dk))}
.champion-in{clip-path:var(--clip);background:linear-gradient(168deg,#191410,#0B0C0F);padding:26px 20px;text-align:center}
.champion .cup{width:40px;height:40px;color:var(--gold);margin:0 auto 12px}
.champion span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--gold);text-transform:uppercase}
.champion h3{font-size:29px;margin:12px 0 0;color:var(--gold-lt)}
.champion small{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--muted-2)}
/* ---------- Stream ---------------------------------------------------- */
.stream-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:stretch}
.player-box{position:relative;aspect-ratio:16/9;background:#06070A;border:1px solid var(--line);clip-path:var(--clip);overflow:hidden}
.player-box iframe{width:100%;height:100%;border:0;display:block}
.player-box::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.18;
background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}
.offair{height:100%;display:grid;place-content:center;text-align:center;gap:8px;
background:radial-gradient(circle at 50% 42%,rgba(104,216,245,.14),#07080B 68%)}
.offair h3{font-size:28px}
.offair p{margin:0;color:var(--muted);font-size:14px}
.live-tag{position:absolute;top:16px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:7px;
padding:7px 11px;background:var(--live);color:#fff;border-radius:2px;
font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em}
.live-tag i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.3s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
.chat-box{background:var(--panel);border:1px solid var(--line);clip-path:var(--clip);display:flex;flex-direction:column;min-height:320px}
.chat-box header{padding:13px 15px;border-bottom:1px solid var(--line-soft);font-family:var(--mono);
font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.chat-box iframe{flex:1;width:100%;border:0}
.chat-off{flex:1;display:grid;place-content:center;text-align:center;color:var(--muted-2);font-size:13px;padding:20px}
/* ---------- Calendario de torneos ------------------------------------ */
.schedule{display:grid;gap:10px}
.event{display:grid;grid-template-columns:112px 1fr auto auto;align-items:center;gap:20px;padding:18px 22px;
background:linear-gradient(168deg,var(--panel-2),var(--panel));border:1px solid var(--line);
border-left:3px solid var(--gold);border-radius:var(--r);transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s}
.event:hover{transform:translateX(4px);border-color:rgba(224,177,82,.35);border-left-color:var(--gold-lt)}
.event .when{font-family:var(--mono);text-align:center;line-height:1.25}
.event .when b{display:block;font-size:26px;font-weight:700;color:var(--gold)}
.event .when span{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-top:4px}
.event h3{font-size:25px;margin-bottom:6px}
.event p{margin:0;color:var(--muted);font-size:13.5px}
.event .prize{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--gold);text-align:right;white-space:nowrap}
.event .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
/* ---------- Ranking --------------------------------------------------- */
.rank-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:18px;align-items:start}
.board{padding:24px 22px;background:linear-gradient(168deg,var(--panel-2),var(--panel));border:1px solid var(--line);clip-path:var(--clip)}
.board h3{font-size:23px}
.board .sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin:8px 0 18px}
.tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--line-soft)}
.tab{flex:1;padding:11px 4px;border:0;background:transparent;color:var(--muted-2);cursor:pointer;
font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
border-bottom:2px solid transparent;margin-bottom:-1px;transition:.2s}
.tab:hover{color:var(--muted)}
.tab.on{color:var(--gold);border-bottom-color:var(--gold)}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px;align-items:end}
.pod{padding:1px;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}
.pod-in{clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
background:linear-gradient(168deg,#14161B,#0B0C0F);padding:16px 10px;text-align:center}
.pod .medal{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.pod .face{width:44px;height:44px;margin:11px auto 9px;display:grid;place-items:center;border-radius:50%;
font-family:var(--display);font-size:17px;color:#0C0D11}
.pod b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod small{display:block;font-family:var(--mono);font-size:9.5px;color:var(--muted-2);margin-top:3px}
.pod .val{display:block;margin-top:10px;font-family:var(--mono);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.pod.p1{order:2}
.pod.p2{order:1;margin-bottom:18px}
.pod.p3{order:3;margin-bottom:30px}
.pod.p1{background:linear-gradient(150deg,var(--gold-lt),var(--gold) 45%,var(--gold-dk))}
.pod.p1 .face{background:linear-gradient(140deg,var(--gold-lt),var(--gold))}
.pod.p1 .medal,.pod.p1 .val{color:var(--gold-lt)}
.pod.p2{background:linear-gradient(150deg,#EDF1F6,#9AA5B4 45%,#5B6373)}
.pod.p2 .face{background:linear-gradient(140deg,#EDF1F6,#9AA5B4)}
.pod.p2 .medal,.pod.p2 .val{color:#CBD3DE}
.pod.p3{background:linear-gradient(150deg,#F0CBA4,#BE8250 45%,#69431F)}
.pod.p3 .face{background:linear-gradient(140deg,#F0CBA4,#BE8250)}
.pod.p3 .medal,.pod.p3 .val{color:#E4B58C}
.row{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:12px 6px;
border-bottom:1px solid var(--line-soft);transition:background .2s}
.row:last-child{border-bottom:0}
.row:hover{background:rgba(255,255,255,.03)}
.row .pos{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--muted-2);font-variant-numeric:tabular-nums}
.row b{display:block;font-size:13.5px;font-weight:600}
.row small{display:block;font-family:var(--mono);font-size:10px;color:var(--muted-2);margin-top:2px}
.row .val{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.row .val span{font-size:9px;color:var(--muted-2);font-weight:400;margin-left:4px}
.row.me{background:rgba(224,177,82,.08)}
/* Ruleta */
.reward{padding:26px 22px;text-align:center;background:linear-gradient(168deg,var(--panel-2),var(--panel));
border:1px solid var(--line);clip-path:var(--clip)}
.reward h3{font-size:23px;margin-bottom:8px}
.reward p{color:var(--muted);font-size:13.5px;margin:0 0 18px}
.wheel-wrap{position:relative;width:196px;height:196px;margin:4px auto 20px}
.wheel{width:100%;height:100%;border-radius:50%;border:6px solid var(--panel-3);
box-shadow:0 0 0 2px rgba(224,177,82,.5),inset 0 0 40px rgba(0,0,0,.6),0 22px 46px -24px rgba(224,177,82,.5);
transition:transform 4s cubic-bezier(.15,.85,.15,1)}
.wheel-labels{position:absolute;inset:0;pointer-events:none}
.wheel-labels b{position:absolute;left:50%;top:50%;font-family:var(--mono);font-size:11px;font-weight:700;color:#0C0D11;
transform-origin:0 0}
.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;
display:grid;place-items:center;background:linear-gradient(160deg,var(--panel-3),#0A0B0E);
border:1px solid rgba(224,177,82,.45);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.pin{position:absolute;left:50%;top:-6px;transform:translateX(-50%);width:0;height:0;z-index:3;
border-left:9px solid transparent;border-right:9px solid transparent;border-top:18px solid var(--gold-lt);
filter:drop-shadow(0 3px 5px rgba(0,0,0,.7))}
#spinInfo{display:block;margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted-2);min-height:15px}
/* ---------- Jugadores + sponsors ------------------------------------- */
.players{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.pcard{position:relative;padding:20px 12px 16px;text-align:center;background:linear-gradient(168deg,var(--panel-2),var(--panel));
border:1px solid var(--line);border-radius:var(--r);transition:transform .25s,border-color .25s}
.pcard:hover{transform:translateY(-4px);border-color:rgba(224,177,82,.32)}
.pcard .seed{position:absolute;top:8px;left:10px;font-family:var(--mono);font-size:9.5px;color:var(--muted-2)}
.pcard .face{width:52px;height:52px;margin:4px auto 10px;display:grid;place-items:center;border-radius:50%;
background:linear-gradient(150deg,var(--panel-3),#0B0C0F);border:1px solid rgba(224,177,82,.25);
font-family:var(--display);font-size:20px;color:var(--gold-lt)}
.pcard h4{font-size:17px;margin-bottom:4px}
.pcard small{display:block;font-family:var(--mono);font-size:9.5px;color:var(--muted-2)}
.pcard .val{display:block;margin-top:8px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--gold)}
.sponsors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sponsor{padding:24px;background:linear-gradient(168deg,var(--panel-2),var(--panel));border:1px solid var(--line);
border-radius:var(--r);transition:border-color .25s}
.sponsor:hover{border-color:rgba(104,216,245,.3)}
.sponsor h3{font-size:21px;margin-bottom:9px}
.sponsor p{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.sponsor a{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ice);text-decoration:none}
.sponsor a:hover{color:#B9EEFF}
.share-band{display:flex;align-items:center;justify-content:space-between;gap:26px;margin-top:22px;padding:40px;
background:radial-gradient(560px 240px at 86% 20%,rgba(224,177,82,.18),transparent 66%),linear-gradient(118deg,#14161B,#0A0B0E 62%);
border:1px solid var(--line);clip-path:var(--clip)}
.share-band h2{font-size:clamp(30px,3.6vw,46px);margin:12px 0 8px}
.share-band p{margin:0;color:var(--muted);max-width:440px}
/* ---------- Pie ------------------------------------------------------- */
footer{border-top:1px solid var(--line-soft);background:rgba(255,255,255,.02);margin-top:40px}
.foot-in{width:min(var(--wrap),92%);margin:0 auto;padding:40px 0;display:flex;justify-content:space-between;
align-items:center;gap:20px;flex-wrap:wrap}
.foot-in p{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
/* ---------- Modal, formularios, avisos ------------------------------- */
.modal{position:fixed;inset:0;z-index:70;background:rgba(4,5,8,.85);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}
.modal-card{position:relative;width:min(520px,100%);max-height:88vh;overflow:auto;padding:32px;
background:linear-gradient(168deg,#14161B,#08090C);border:1px solid var(--line);clip-path:var(--clip);
box-shadow:var(--shadow);animation:rise .32s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
.modal-card h2{font-size:31px;margin-bottom:8px}
.modal-card h3{font-size:21px;margin-bottom:8px}
.modal-card .hint{color:var(--muted-2);font-size:13px;margin:0 0 18px}
.sep{border:0;border-top:1px solid var(--line-soft);margin:24px 0 20px}
.close{position:absolute;right:14px;top:10px;border:0;background:none;color:var(--muted);font-size:27px;cursor:pointer;line-height:1}
.close:hover{color:var(--gold)}
.form{display:grid;gap:11px}
.form label{display:grid;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted-2)}
input,select,textarea{width:100%;background:#0A0B0E;color:var(--text);border:1px solid var(--line);border-radius:var(--r);
padding:12px 13px;font:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus{outline:0;border-color:rgba(224,177,82,.55);box-shadow:0 0 0 3px rgba(224,177,82,.12)}
textarea{min-height:88px;resize:vertical}
input[type=file]{padding:9px}
.toast{position:fixed;right:20px;bottom:20px;z-index:95;max-width:340px;padding:14px 18px;
background:linear-gradient(160deg,#171A20,#0A0B0E);border:1px solid var(--line);border-left:3px solid var(--gold);
border-radius:var(--r);box-shadow:var(--shadow);font-size:13.5px;opacity:0;transform:translateY(120px);
transition:transform .34s cubic-bezier(.2,.7,.2,1),opacity .34s}
.toast.show{opacity:1;transform:translateY(0)}
.toast.bad{border-left-color:var(--live)}
/* ---------- Panel administrador -------------------------------------- */
.admin-body{min-height:100vh}
.admin-body .chrome{position:sticky;top:0}
.admin-shell{display:grid;grid-template-columns:236px 1fr;min-height:calc(100vh - 70px)}
.admin-nav{padding:24px 12px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;gap:3px;background:rgba(255,255,255,.02)}
.admin-nav button{border:0;background:transparent;color:var(--muted-2);text-align:left;padding:12px 13px;cursor:pointer;
border-radius:var(--r);border-left:2px solid transparent;font-family:var(--mono);font-size:10.5px;
letter-spacing:.14em;text-transform:uppercase;transition:.2s}
.admin-nav button:hover{color:var(--text);background:rgba(255,255,255,.04)}
.admin-nav button.on{color:var(--gold);background:rgba(224,177,82,.1);border-left-color:var(--gold)}
.admin-main{padding:34px;overflow:auto}
.admin-main h1{font-size:40px;margin-bottom:8px}
.admin-main .lead{color:var(--muted-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;margin:0 0 26px}
.login{max-width:430px;margin:8vh auto;padding:34px;background:linear-gradient(168deg,#14161B,#08090C);
border:1px solid var(--line);clip-path:var(--clip)}
.login h1{font-size:36px}
.login p{color:var(--muted-2);font-size:13.5px;margin:8px 0 20px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.card{padding:20px;border:1px solid var(--line);background:linear-gradient(168deg,var(--panel-2),var(--panel));border-radius:var(--r)}
.card strong{display:block;font-family:var(--mono);font-weight:700;font-size:31px;color:var(--gold);font-variant-numeric:tabular-nums}
.card span{display:block;margin-top:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--muted-2);text-transform:uppercase}
.split{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start}
.box{padding:20px;border:1px solid var(--line);background:linear-gradient(168deg,var(--panel-2),var(--panel));border-radius:var(--r)}
.box h3{font-size:20px;margin-bottom:14px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
th{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--muted-2);text-transform:uppercase}
tr:last-child td{border-bottom:0}
td input{padding:8px 9px;font-size:13px}
.mini{display:inline-flex;gap:6px;flex-wrap:wrap}
.btn.danger{background:linear-gradient(135deg,#8C2A34,#4E151C);color:#FFDCDF;box-shadow:none}
.state{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.state.approved{color:var(--win)}
.state.pending{color:var(--gold)}
.state.rejected{color:#FF8A8A}
.admin-bracket{display:grid;gap:10px}
.admin-match{display:grid;grid-template-columns:88px 1fr 1fr auto;gap:10px;align-items:center;padding:12px;
border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.admin-match .rn{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--muted-2);text-transform:uppercase}
.admin-match .team{display:grid;grid-template-columns:1fr 58px;gap:8px;align-items:center}
.admin-match .team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.admin-match .team.win span{color:var(--gold);font-weight:600}
/* ---------- Responsive ------------------------------------------------ */
@media(max-width:1160px){
.players{grid-template-columns:repeat(4,1fr)}
.statband-in{grid-template-columns:repeat(3,1fr)}
.statband div:nth-child(3){border-right:0}
}
@media(max-width:1000px){
.hero-in{grid-template-columns:1fr;gap:34px;padding:64px 0 56px}
.stream-grid,.rank-grid,.split{grid-template-columns:1fr}
.chat-box{min-height:280px}
.nav{display:none}
.sponsors{grid-template-columns:1fr 1fr}
.admin-shell{grid-template-columns:1fr}
.admin-nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line-soft);padding:9px;position:sticky;top:104px;z-index:12}
.admin-nav button{white-space:nowrap;border-left:0;border-bottom:2px solid transparent}
.admin-nav button.on{border-left:0;border-bottom-color:var(--gold)}
.cards{grid-template-columns:1fr 1fr}
.event{grid-template-columns:88px 1fr;gap:14px}
.event .prize{grid-column:2;text-align:left}
.event .btn{grid-column:2;justify-self:start}
}
@media(max-width:640px){
.utility .season{display:none}
.topbar{padding:0 16px;height:64px}
.brand b{font-size:19px}
.hero-copy h1{font-size:clamp(48px,13vw,72px)}
.section{padding:64px 0}
.head{display:block}
.head .btn{margin-top:16px}
.statband-in{grid-template-columns:repeat(2,1fr)}
.statband div{border-bottom:1px solid var(--line-soft)}
.statband div:nth-child(2n){border-right:0}
.players{grid-template-columns:repeat(2,1fr)}
.sponsors{grid-template-columns:1fr}
.podium{grid-template-columns:1fr}
.pod.p1,.pod.p2,.pod.p3{order:0;margin-bottom:0}
.pod-in{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:12px;text-align:left}
.pod .face{margin:0}
.pod .val{margin:0}
.pod .who{min-width:0}
.share-band{display:block;padding:28px}
.share-band .btn{margin-top:22px;width:100%}
.modal-card{padding:24px 20px}
.admin-main{padding:18px}
.cards{grid-template-columns:1fr}
.admin-match{grid-template-columns:1fr}
.box{overflow:auto}
table{min-width:620px}
.foot-in{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
[data-reveal]{opacity:1;transform:none}
}
/* =====================================================================
LA BALDUNETA v2.1 — REDISEÑO GAMER / VISIBILIDAD GARANTIZADA
===================================================================== */
:root{--neon:#7CFF00;--violet:#9B5CFF;--cyan:#00D9FF}
body{overflow-x:hidden;background:
radial-gradient(circle at 15% 12%,rgba(155,92,255,.16),transparent 31%),
radial-gradient(circle at 88% 34%,rgba(0,217,255,.12),transparent 30%),
linear-gradient(180deg,#05070c 0%,#080b12 45%,#05070c 100%)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.24;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,black,transparent 90%)}
main,footer,.chrome{position:relative;z-index:2}
/* Nunca ocultar secciones por fallos de JS/IntersectionObserver */
[data-reveal]{opacity:1!important;transform:none!important}
.section{width:min(1320px,94%);margin:0 auto;padding:84px 0;position:relative;scroll-margin-top:120px}
.section::before{content:"";position:absolute;left:0;right:0;top:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(124,255,0,.4),rgba(0,217,255,.3),transparent)}
.section .head{margin-bottom:28px}
.section .head h2{font-size:clamp(44px,6vw,78px);text-shadow:0 0 32px rgba(155,92,255,.18)}
.section .head p{max-width:720px;color:#aeb6c6;font-size:16px}
.chrome{box-shadow:0 12px 36px rgba(0,0,0,.42)}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:linear-gradient(90deg,var(--neon),var(--cyan));transform:scaleX(0);transition:.25s}
.nav a:hover::after{transform:scaleX(1)}
.brand-mark{box-shadow:0 0 30px rgba(224,177,82,.28)}
.hero{min-height:760px;display:flex;align-items:center}
.hero::after{content:"";position:absolute;inset:auto -10% -240px;height:440px;background:radial-gradient(ellipse,rgba(124,255,0,.12),transparent 65%);filter:blur(30px);pointer-events:none}
.hero-in{padding:110px 0 90px}
.hero-copy h1{text-shadow:0 18px 60px rgba(0,0,0,.7)}
.hero-copy h1 em{filter:drop-shadow(0 0 18px rgba(224,177,82,.22))}
.next-card{position:relative;overflow:hidden;border-color:rgba(124,255,0,.18)}
.next-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 20%,rgba(124,255,0,.07),transparent 65%);animation:sweep 4.5s linear infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.statband{position:relative;background:rgba(8,11,18,.88);border-block:1px solid rgba(255,255,255,.08);box-shadow:0 16px 60px rgba(0,0,0,.36)}
.statband strong{color:var(--neon);text-shadow:0 0 20px rgba(124,255,0,.28)}
.stream-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.7fr);gap:18px}
.player-box,.chat-box{min-height:540px;border:1px solid rgba(0,217,255,.22);background:linear-gradient(145deg,rgba(16,20,30,.96),rgba(7,9,15,.98));box-shadow:0 28px 80px rgba(0,0,0,.45),inset 0 0 60px rgba(0,217,255,.025)}
.player-box{position:relative;overflow:hidden}
.player-box::before{content:"STREAM ZONE";position:absolute;right:18px;bottom:14px;font:700 11px var(--mono);letter-spacing:.28em;color:rgba(255,255,255,.12);z-index:1}
.player-box iframe{width:100%;height:540px;border:0;display:block;position:relative;z-index:2}
.offair{min-height:540px;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,rgba(155,92,255,.13),transparent 62%)}
.offair h3{font-size:52px;color:var(--text)}
.offair p{color:var(--muted)}
.chat-box iframe{width:100%;height:500px;border:0}
.schedule{display:grid;gap:14px}
.event{border:1px solid var(--line);background:linear-gradient(110deg,rgba(23,26,36,.96),rgba(10,12,18,.96));box-shadow:0 16px 50px rgba(0,0,0,.28);transition:.25s}
.event:hover{transform:translateY(-3px);border-color:rgba(124,255,0,.35);box-shadow:0 24px 65px rgba(0,0,0,.42),0 0 28px rgba(124,255,0,.06)}
.rank-grid{gap:22px}
.board,.reward{border:1px solid rgba(155,92,255,.24);background:linear-gradient(145deg,rgba(19,22,31,.97),rgba(8,10,16,.98));box-shadow:0 26px 80px rgba(0,0,0,.4)}
.reward{position:relative;overflow:hidden}
.reward::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(155,92,255,.12);filter:blur(50px);top:-90px;right:-70px}
.wheel{filter:drop-shadow(0 0 26px rgba(224,177,82,.25))}
.players{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.pcard{min-height:220px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(26,30,40,.96),rgba(10,12,18,.98));transition:.25s;position:relative;overflow:hidden}
.pcard::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:linear-gradient(90deg,var(--violet),var(--cyan),var(--neon));transform:scaleX(.25);transition:.25s}
.pcard:hover{transform:translateY(-6px);border-color:rgba(0,217,255,.28)}
.pcard:hover::after{transform:scaleX(1)}
/* Reproductor flotante */
.music-dock{position:fixed;z-index:80;right:18px;bottom:18px;width:min(390px,calc(100vw - 28px));padding:10px;border:1px solid rgba(124,255,0,.32);background:rgba(7,10,16,.92);backdrop-filter:blur(18px);box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 36px rgba(124,255,0,.07);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.music-toggle{width:100%;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:11px;border:0;background:transparent;color:var(--text);cursor:pointer;text-align:left;padding:3px}
.music-disc{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--neon),var(--violet),var(--cyan),var(--neon));box-shadow:0 0 20px rgba(124,255,0,.2)}
.music-disc::before{content:"";width:30px;height:30px;border-radius:50%;background:#090c12;border:4px solid rgba(255,255,255,.08)}
.music-disc i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.music-dock.playing .music-disc{animation:disc 3s linear infinite}
@keyframes disc{to{transform:rotate(360deg)}}
.music-copy small{display:block;color:var(--neon);font:700 8px var(--mono);letter-spacing:.18em}
.music-copy b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;font-size:13px;margin-top:2px}
.music-state{font:700 10px var(--mono);color:var(--gold);letter-spacing:.14em}
.music-volume{display:grid;grid-template-columns:auto 1fr 42px;align-items:center;gap:8px;margin-top:8px;padding:7px 7px 2px;border-top:1px solid var(--line)}
.music-volume input{width:100%;accent-color:var(--neon)}
.music-volume b{font:700 10px var(--mono);color:var(--muted);text-align:right}
@media(max-width:980px){.nav{display:none}.stream-grid{grid-template-columns:1fr}.chat-box{min-height:420px}.hero{min-height:auto}.hero-in{grid-template-columns:1fr;padding:84px 0 64px}.next-card{max-width:620px}.section{padding:64px 0}.player-box,.offair{min-height:390px}.player-box iframe{height:390px}}
@media(max-width:620px){.utility{display:none}.topbar{height:66px;padding:0 14px}.brand small{display:none}.actions .chip{display:none}.hero-in{width:92%;padding-top:70px}.hero-copy h1{font-size:58px}.hero-copy p{font-size:15px}.statband-in{grid-template-columns:repeat(2,1fr)!important}.section .head h2{font-size:46px}.music-dock{right:14px;bottom:14px}.music-copy b{max-width:150px}.music-volume{display:grid}.event{grid-template-columns:1fr!important}.player-box,.offair{min-height:280px}.player-box iframe{height:280px}}
/* ===== INTRO CINEMÁTICA CS2 ===== */
.cs-intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;background:#030507;transition:opacity .85s ease,visibility .85s ease}
.cs-intro.done{opacity:0;visibility:hidden;pointer-events:none}
.cs-intro::before{content:"";position:absolute;inset:-15%;background:radial-gradient(circle at 50% 55%,rgba(225,153,43,.22),transparent 32%),linear-gradient(115deg,transparent 42%,rgba(255,113,25,.12) 49%,transparent 54%);animation:introCamera 5s ease-in-out infinite alternate}
.intro-content{position:relative;z-index:8;text-align:center;padding:24px;filter:drop-shadow(0 20px 40px #000)}
.intro-overline{font-family:var(--mono);letter-spacing:.42em;font-size:clamp(9px,1vw,13px);color:#d6a94b}
.intro-logo{width:94px;height:94px;margin:24px auto 18px;display:grid;place-items:center;background:linear-gradient(145deg,#ffe39a,#d49a2b 55%,#7a4a0a);clip-path:polygon(50% 0,92% 20%,100% 67%,70% 100%,30% 100%,0 67%,8% 20%);box-shadow:0 0 70px rgba(235,157,38,.5);animation:logoImpact 1.2s cubic-bezier(.15,.9,.2,1) both}
.intro-logo span{font-family:var(--display);font-size:39px;color:#090a0d}
.intro-content h1{margin:0;font-family:var(--display);font-size:clamp(58px,9vw,150px);line-height:.85;letter-spacing:.015em;text-transform:uppercase;color:#f1f1ed;text-shadow:0 3px 0 #333,0 0 35px rgba(255,255,255,.12);animation:titleGlitch 3.5s infinite}
.intro-content h1 em{font-style:normal;color:#df9e2f;text-shadow:0 0 30px rgba(238,147,31,.5)}
.intro-content p{font-family:var(--mono);letter-spacing:.4em;color:#a9acb3;font-size:clamp(9px,1vw,13px);margin:22px 0}
.intro-loader{width:min(480px,70vw);height:3px;margin:0 auto;background:rgba(255,255,255,.12);overflow:hidden}
.intro-loader b{display:block;height:100%;width:0;background:linear-gradient(90deg,#8b5511,#ffb83f,#fff0b1);box-shadow:0 0 18px #ff9c24;transition:width .1s linear}
.intro-seconds{display:block;margin-top:12px;font:700 12px var(--mono);letter-spacing:.2em;color:#dca449}
.intro-skip{margin-top:16px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:#bfc2c8;padding:9px 14px;font:700 10px var(--mono);letter-spacing:.18em;cursor:pointer}
.intro-crosshair{position:absolute;left:50%;top:50%;width:100px;height:100px;transform:translate(-50%,-50%);opacity:.16;animation:crossAim 4s ease-in-out infinite}
.intro-crosshair::before,.intro-crosshair::after{content:"";position:absolute;background:#fff}.intro-crosshair::before{width:100%;height:1px;top:50%}.intro-crosshair::after{height:100%;width:1px;left:50%}
.intro-crosshair i{position:absolute;inset:27%;border:1px solid #fff;border-radius:50%}
.intro-smoke{position:absolute;width:80vw;height:80vw;border-radius:50%;filter:blur(60px);opacity:.35;background:radial-gradient(circle,rgba(100,110,120,.5),rgba(30,36,42,.15) 45%,transparent 70%)}
.smoke-a{left:-35vw;bottom:-45vw;animation:smokeDrift 9s ease-in-out infinite alternate}.smoke-b{right:-38vw;top:-45vw;animation:smokeDrift 11s ease-in-out infinite alternate-reverse}
.intro-sparks{position:absolute;inset:0;background-image:radial-gradient(circle,#ffbd4a 0 1px,transparent 1.7px);background-size:53px 61px;opacity:.25;animation:sparks 2s linear infinite}
.intro-flash{position:absolute;inset:0;background:radial-gradient(circle at 77% 44%,#fff7d3,rgba(255,141,25,.45) 2%,transparent 9%);opacity:0;animation:muzzle 2.4s infinite}
body.intro-lock{overflow:hidden}
@keyframes logoImpact{0%{transform:scale(2.4);opacity:0;filter:blur(18px)}65%{transform:scale(.9);opacity:1}100%{transform:scale(1)}}
@keyframes titleGlitch{0%,91%,100%{transform:none;clip-path:none}92%{transform:translateX(-5px);clip-path:inset(20% 0 55%)}94%{transform:translateX(5px);clip-path:inset(60% 0 12%)}96%{transform:none;clip-path:none}}
@keyframes smokeDrift{to{transform:translate(15vw,-10vh) scale(1.25)}}
@keyframes sparks{to{transform:translateY(61px)}}
@keyframes muzzle{0%,82%,100%{opacity:0}83%{opacity:.95}85%{opacity:0}}
@keyframes crossAim{0%,100%{transform:translate(-53%,-48%) scale(.9)}50%{transform:translate(-47%,-52%) scale(1.08)}}
@keyframes introCamera{to{transform:scale(1.08) rotate(.5deg)}}
/* Reproductor siempre visible en la parte superior */
.music-dock{position:fixed!important;top:112px!important;right:18px!important;bottom:auto!important;z-index:85!important;width:min(360px,calc(100vw - 36px));display:flex!important;align-items:center;gap:10px;padding:9px 11px;background:rgba(7,9,13,.94);border:1px solid rgba(224,177,82,.35);box-shadow:0 16px 45px rgba(0,0,0,.45),0 0 25px rgba(224,177,82,.08);backdrop-filter:blur(14px)}
.music-dock.no-track{opacity:.72}.music-dock.no-track .music-state{color:#8a8e96}.music-toggle{min-width:0;flex:1}.music-copy{min-width:0}.music-copy b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:155px}.music-volume{display:flex;align-items:center;gap:5px}.music-volume input{width:72px}.music-volume b{font-size:9px}
@media(max-width:720px){.music-dock{top:82px!important;right:8px!important;width:calc(100vw - 16px)}.music-volume input{width:55px}.intro-content h1{font-size:17vw}}
/* Cuenta de jugador */
.profile-btn { display:flex; align-items:center; gap:8px; }
.profile-btn img { width:30px; height:30px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.24); }
.account-head { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.account-head h2 { margin:0 0 4px; }
.account-avatar { width:76px; height:76px; border-radius:50%; display:grid; place-items:center; overflow:hidden; background:#f3a61d; color:#111; font:700 25px/1 Oswald,sans-serif; border:3px solid rgba(243,166,29,.35); flex:0 0 auto; }
.account-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-warning { padding:11px 13px; margin:0 0 14px; border:1px solid rgba(243,166,29,.45); background:rgba(243,166,29,.1); color:#ffd891; font-size:13px; }
.account-steam { display:flex; width:100%; justify-content:center; margin-top:10px; }
.form input[type=file] { padding:10px; }
/* ===== CABECERA / HERO PRO 2026 ===== */
.chrome{background:rgba(4,6,10,.88);backdrop-filter:blur(22px);border-bottom:1px solid rgba(255,255,255,.07);box-shadow:0 18px 55px rgba(0,0,0,.32)}
.utility{height:28px;background:linear-gradient(90deg,rgba(224,177,82,.09),transparent 30%,transparent 70%,rgba(0,217,255,.05));border-bottom:1px solid rgba(255,255,255,.045)}
.topbar{height:78px;position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),var(--neon),var(--cyan),transparent);opacity:.4}
.brand-mark{filter:drop-shadow(0 0 16px rgba(224,177,82,.25));transform:skew(-4deg)}
.nav{padding:7px;border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.018);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.nav a{padding:10px 15px;position:relative}
.nav a::after{content:"";position:absolute;left:15px;right:15px;bottom:3px;height:2px;background:linear-gradient(90deg,var(--gold),var(--neon));transform:scaleX(0);transition:.25s}
.nav a:hover::after{transform:scaleX(1)}
.hero{min-height:790px;background:#05070b}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(4,6,10,.98) 0%,rgba(4,6,10,.82) 38%,rgba(4,6,10,.38) 67%,rgba(4,6,10,.9) 100%),repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.018) 80px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(255,255,255,.014) 80px)}
.hero-tactical{position:absolute;z-index:3;left:50%;top:18px;transform:translateX(-50%);width:min(var(--wrap),92%);display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.32);font:700 9px var(--mono);letter-spacing:.24em;pointer-events:none}
.hero-tactical b{color:var(--gold);font-size:12px;border:1px solid rgba(224,177,82,.28);padding:6px 10px;background:rgba(224,177,82,.05)}
.hero-in{grid-template-columns:minmax(0,1.2fr) minmax(380px,.8fr);gap:90px;padding:130px 0 100px}
.hero-copy{position:relative;padding-left:28px}
.hero-copy::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;background:linear-gradient(var(--gold),var(--neon),transparent);box-shadow:0 0 18px rgba(124,255,0,.2)}
.hero-status{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(124,255,0,.25);background:rgba(124,255,0,.055);color:var(--neon);font:700 9px var(--mono);letter-spacing:.16em;margin-bottom:16px}
.hero-status i{width:7px;height:7px;border-radius:50%;background:var(--neon);box-shadow:0 0 12px var(--neon);animation:pulseLive 1.4s infinite}
.hero-copy h1{font-size:clamp(70px,8.7vw,142px);letter-spacing:-.025em;filter:drop-shadow(0 22px 36px rgba(0,0,0,.65))}
.hero-copy h1 em{background:linear-gradient(110deg,#ffe7a8 0%,#d9a441 45%,#6e4a13 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{font-size:17px;line-height:1.75;border-left:1px solid rgba(255,255,255,.12);padding-left:18px}
.next-card{transform:perspective(1000px) rotateY(-2deg);box-shadow:0 38px 90px rgba(0,0,0,.55),0 0 0 1px rgba(124,255,0,.08),0 0 60px rgba(124,255,0,.05)}
.next-card::before{content:"MATCH CENTER";position:absolute;right:-1px;top:-31px;padding:7px 12px;background:var(--neon);color:#071006;font:900 9px var(--mono);letter-spacing:.15em;clip-path:polygon(8px 0,100% 0,100% 100%,0 100%)}
.music-dock{pointer-events:auto!important}
.music-toggle,.music-volume,.music-volume input{pointer-events:auto!important;position:relative;z-index:2}
.modal{cursor:default}.modal-card{cursor:auto}
@keyframes pulseLive{50%{opacity:.35;transform:scale(.75)}}
@media(max-width:980px){.hero-in{grid-template-columns:1fr;gap:48px}.hero-copy{padding-left:20px}.hero-tactical{display:none}.next-card{transform:none}}
/* v3 estable */
.players-title-row{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.players-title-row h2{margin:0}.players-count{min-width:150px;padding:14px 18px;border:1px solid rgba(224,177,82,.35);background:linear-gradient(135deg,rgba(224,177,82,.12),rgba(0,210,255,.06));display:flex;align-items:baseline;justify-content:center;gap:8px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.players-count strong{font-size:30px;color:var(--gold)}.players-count span{text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:#8f98a8}.pcard .face img{width:100%;height:100%;object-fit:cover;border-radius:50%}.session-badge{display:inline-flex;align-items:center;gap:8px}.session-badge:before{content:'';width:7px;height:7px;border-radius:50%;background:#72ff00;box-shadow:0 0 12px #72ff00}@media(max-width:700px){.players-title-row{align-items:flex-start;flex-direction:column}.players-count{min-width:130px}}
/* Aviso de arranque: sólo aparece si la home no pudo cargar los datos. */
.boot-error{
position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
z-index:9999; max-width:min(680px,92vw);
display:flex; flex-direction:column; gap:6px;
padding:16px 20px; border-radius:14px;
background:rgba(20,10,12,.96); border:1px solid rgba(255,90,90,.5);
box-shadow:0 18px 50px rgba(0,0,0,.55); color:#ffe9e9;
font-family:'Inter Tight',system-ui,sans-serif;
}
.boot-error b{font-size:15px; letter-spacing:.02em}
.boot-error small{font-size:12.5px; opacity:.85; word-break:break-word}
.boot-error a{color:#ffd479}
/* =====================================================================
LA BALDUNETA v4.2 — barra superior, música y adaptación a móvil
Este bloque va último a propósito: manda sobre las reglas anteriores.
===================================================================== */
/* ---------- Barra superior: temporada centrada y destacada ------------ */
.utility{
display:grid!important;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:10px;
height:auto;
min-height:40px;
padding:6px 4vw;
}
.utility .season{
grid-column:2;
justify-self:center;
order:0;
display:inline-flex;
align-items:center;
gap:9px;
padding:6px 20px;
font-family:var(--display);
font-size:15px;
letter-spacing:.16em;
text-transform:uppercase;
color:#0C0D11;
background:linear-gradient(120deg,#FFE08A,#E0B152 42%,#FFD36E 72%,#C98F2E);
border:1px solid rgba(255,226,150,.75);
box-shadow:0 0 24px rgba(224,177,82,.35),0 6px 20px rgba(0,0,0,.4);
clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
text-shadow:0 1px 0 rgba(255,255,255,.35);
animation:seasonGlow 3.4s ease-in-out infinite;
}
.utility .season::before{content:'★';font-size:12px;opacity:.75}
.utility .socials{grid-column:3;justify-self:end}
@keyframes seasonGlow{
0%,100%{box-shadow:0 0 20px rgba(224,177,82,.28),0 6px 20px rgba(0,0,0,.4)}
50%{box-shadow:0 0 34px rgba(255,214,120,.55),0 6px 20px rgba(0,0,0,.4)}
}
/* ---------- Reproductor: aviso cuando espera el primer toque ---------- */
.music-dock.waiting{border-color:rgba(124,255,0,.55)}
.music-dock.waiting .music-state{color:#9dff5a;animation:seasonGlow 2s ease-in-out infinite}
/* ---------- Adaptación general ---------------------------------------- */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img,iframe,video,canvas{max-width:100%}
.player-box iframe,.chat-box iframe{width:100%;border:0}
/* Tablet y celular en horizontal */
@media(max-width:900px){
.utility{padding:6px 16px}
.utility .socials{gap:12px}
.topbar{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px}
.actions{flex-wrap:wrap;justify-content:flex-end}
.players{grid-template-columns:repeat(3,1fr)}
.stream-grid{grid-template-columns:1fr}
.player-box,.offair{min-height:0}
.player-box{aspect-ratio:16/9}
.player-box iframe{height:100%;position:absolute;inset:0}
.chat-box{min-height:340px}
}
/* Celular */
@media(max-width:620px){
/* La temporada tiene que verse también en el teléfono */
.utility{display:grid!important;grid-template-columns:1fr;justify-items:center;gap:8px;padding:8px 12px}
.utility .season{display:inline-flex!important;grid-column:1;font-size:13px;padding:5px 16px}
.utility .socials{grid-column:1;justify-self:center;gap:16px}
.topbar{padding:10px 12px;gap:8px}
.brand-mark{width:34px;height:34px;font-size:16px}
.brand b{font-size:17px}
.brand small{display:none}
.actions{gap:6px}
.actions .btn.small{padding:8px 12px;font-size:11px}
.hero-in{width:92%;padding:56px 0 48px}
.hero-copy h1{font-size:clamp(42px,13vw,64px);line-height:.96}
.hero-copy p{font-size:14.5px}
.hero-cta{display:grid;gap:10px}
.hero-cta .btn{width:100%;text-align:center;justify-content:center}
.hero-tactical{display:none}
.next-card{max-width:100%;transform:none}
.section{padding:52px 0}
.section .head h2{font-size:clamp(34px,10.5vw,46px)}
.section{width:94%;scroll-margin-top:96px}
.players{grid-template-columns:repeat(2,1fr)}
.pcard{padding:14px 10px}
.pcard h4{font-size:14px}
.bracket{gap:24px}
.bracket-scroll{margin:0 -4vw;padding:6px 4vw 20px}
.round{min-width:200px}
.wheel-wrap{width:170px;height:170px}
.tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
.tab{white-space:nowrap}
.modal{padding:0}
.modal-card{width:100%;max-height:100vh;border-radius:0;padding:22px 16px}
.form input,.form select,.form textarea,.form button{font-size:16px} /* evita el zoom de iOS */
/* El reproductor pasa abajo para no tapar la cabecera ni el contenido */
.music-dock{
position:fixed!important;top:auto!important;bottom:0!important;right:0!important;left:0!important;
width:100%!important;padding:8px 10px;
border-left:0;border-right:0;border-bottom:0;clip-path:none;
display:grid!important;grid-template-columns:1fr auto;align-items:center;gap:8px
}
.music-copy small{font-size:8px}
.music-copy b{max-width:38vw;font-size:12px}
.music-volume input{width:64px}
footer{padding-bottom:84px}
}
@media(max-width:420px){
.players{grid-template-columns:1fr}
.statband-in{grid-template-columns:repeat(2,1fr)!important}
.music-copy b{max-width:32vw}
.music-volume input{width:52px}
.intro-content h1{font-size:16vw}
.intro-skip{padding:10px 18px;font-size:11px}
}
/* =====================================================================
LA BALDUNETA v5 — inscripciones, emparejamiento, notificaciones
===================================================================== */
/* ---------- Tres próximos torneos junto al hero ----------------------- */
.next-three{display:grid;gap:8px;margin-top:14px}
.next-three-title{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}
.next-three-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
padding:10px 12px;text-decoration:none;color:inherit;
background:linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
border:1px solid var(--line-soft);transition:border-color .2s,transform .2s,background .2s}
.next-three-item:hover{border-color:rgba(224,177,82,.5);transform:translateX(3px)}
.next-three-item.full{opacity:.6}
.n3-date{display:grid;text-align:center;min-width:46px}
.n3-date b{font-family:var(--display);font-size:15px;color:var(--gold);line-height:1;text-transform:uppercase}
.n3-date small{font-family:var(--mono);font-size:8.5px;color:var(--muted-2)}
.n3-body{display:grid;min-width:0}
.n3-body b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n3-body small{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--muted-2)}
.n3-tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
border:1px solid var(--line-soft);padding:4px 7px;white-space:nowrap}
/* ---------- Tarjetas de torneo ---------------------------------------- */
.event .prize{display:grid;gap:2px;align-content:center}
.event .prize small{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)}
.event .prize b{font-family:var(--display);font-size:19px;color:var(--gold);letter-spacing:.02em}
.event-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.event.is-full{opacity:.78}
.chip.full-chip{color:#ff9d9d;border-color:rgba(255,120,120,.45);background:rgba(255,90,90,.08)}
.live-btn{background:linear-gradient(120deg,#ff3b3b,#c81d1d);color:#fff;border-color:transparent;display:inline-flex;align-items:center;gap:7px}
.live-btn i{width:7px;height:7px;border-radius:50%;background:#fff;animation:seasonGlow 1.6s ease-in-out infinite}
.live-frame{position:relative;aspect-ratio:16/9;margin:14px 0;border:1px solid var(--line);overflow:hidden}
.live-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ---------- Diagrama previo de la llave -------------------------------- */
.bracket-preview{padding:6px 0}
.preview-path{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0}
.preview-path .pp{display:grid;gap:3px;padding:12px 16px;min-width:120px;text-align:center;
border:1px solid rgba(224,177,82,.28);background:linear-gradient(160deg,rgba(224,177,82,.1),rgba(255,255,255,.02));
clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.preview-path .pp b{font-family:var(--display);font-size:17px;letter-spacing:.04em;color:var(--gold)}
.preview-path .pp small{font-family:var(--mono);font-size:9px;color:var(--muted-2)}
.preview-path .pp-arrow{color:var(--muted-2)}
.preview-meta{display:flex;gap:8px;flex-wrap:wrap}
.bracket-bar button i{font-style:normal;font-size:9px;opacity:.7;margin-left:6px}
/* ---------- Elegir torneo / opciones ---------------------------------- */
.pick-list{display:grid;gap:9px;margin-top:6px}
.pick-item{display:grid;gap:3px;text-align:left;padding:14px 16px;cursor:pointer;
background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
border:1px solid var(--line);color:inherit;transition:border-color .2s,transform .2s}
.pick-item:hover:not(.disabled){border-color:var(--gold);transform:translateY(-2px)}
.pick-item.on{border-color:rgba(224,177,82,.6)}
.pick-item.disabled{opacity:.55;cursor:not-allowed}
.pick-item b{font-size:15px}
.pick-item small{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted-2)}
.pick-item em{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--gold)}
.opt-cards{display:grid;gap:12px;margin-top:6px}
.opt-card{display:grid;gap:6px;text-align:left;padding:18px;cursor:pointer;color:inherit;
background:linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--line);
transition:border-color .2s,transform .2s}
.opt-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.opt-card b{font-family:var(--display);font-size:20px;letter-spacing:.03em}
.opt-card small{font-size:13px;color:var(--muted);line-height:1.5}
.opt-card em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--gold)}
.opt-card.highlight{border-color:rgba(124,255,0,.4);background:linear-gradient(155deg,rgba(124,255,0,.09),rgba(255,255,255,.015))}
.opt-card.highlight b{color:#a6ff6a}
/* ---------- Plantel y buscador de jugadores --------------------------- */
.roster{display:grid;gap:7px;margin:12px 0}
.roster-head{display:flex;justify-content:space-between;align-items:center;
font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.roster-item,.search-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
padding:8px 10px;background:rgba(255,255,255,.035);border:1px solid var(--line-soft);width:100%;
color:inherit;text-align:left}
.search-item{cursor:pointer;transition:border-color .2s}
.search-item:hover:not(.disabled){border-color:var(--gold)}
.search-item.disabled{opacity:.45;cursor:not-allowed}
.face.sm{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;overflow:hidden;
background:linear-gradient(145deg,rgba(224,177,82,.25),rgba(255,255,255,.05));
font-family:var(--display);font-size:12px}
.face.sm img{width:100%;height:100%;object-fit:cover}
.roster-item .rn,.search-item .rn{display:grid;min-width:0}
.roster-item .rn b,.search-item .rn b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster-item .rn small,.search-item .rn small{font-family:var(--mono);font-size:9.5px;color:var(--muted-2)}
.roster-item .leader{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--gold)}
.roster-item .x{background:transparent;border:1px solid var(--line);color:var(--muted-2);
font-family:var(--mono);font-size:9.5px;padding:5px 9px;cursor:pointer}
.roster-item .x:hover{color:#ff9d9d;border-color:rgba(255,120,120,.5)}
.search-item em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--gold)}
.search-label{display:grid;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted-2);margin-top:6px}
.search-results{display:grid;gap:6px;max-height:230px;overflow:auto;margin:10px 0 16px;padding-right:4px}
/* ---------- Notificaciones -------------------------------------------- */
.icon-btn{position:relative}
.notif-dot{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
display:grid;place-items:center;background:#ff3b3b;color:#fff;font-family:var(--mono);font-size:9px;font-weight:700}
.icon-btn.has-unread{color:var(--gold);border-color:rgba(224,177,82,.5)}
.notif-list{display:grid;gap:9px;max-height:52vh;overflow:auto;margin:8px 0 16px}
.notif{padding:13px 15px;border:1px solid var(--line-soft);background:rgba(255,255,255,.03);display:grid;gap:5px}
.notif.unread{border-color:rgba(224,177,82,.45);background:linear-gradient(150deg,rgba(224,177,82,.09),rgba(255,255,255,.02))}
.notif b{font-size:14px}
.notif p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.notif small{font-family:var(--mono);font-size:9px;color:var(--muted-2)}
.notif .btn{justify-self:start;margin-top:4px}
/* ---------- Estado de emparejamiento en el perfil --------------------- */
.queue-list{display:grid;gap:8px;margin:8px 0 4px}
.queue-item{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:11px 13px;border:1px solid var(--line-soft);background:rgba(255,255,255,.03)}
.queue-item span{display:grid;min-width:0}
.queue-item b{font-size:13.5px}
.queue-item small{font-family:var(--mono);font-size:9.5px;color:var(--muted-2)}
/* ---------- Jugadores: tarjetas angostas y altas ---------------------- */
.players-head-actions{display:flex;align-items:center;gap:12px}
.players-note{font-size:12.5px;color:var(--muted-2);margin:0 0 18px}
.players-note a{color:var(--gold)}
.players.players-tall{grid-template-columns:repeat(5,1fr);gap:14px}
.players.players-all{grid-template-columns:repeat(6,1fr);gap:14px}
.players-tall .pcard,.players-all .pcard{display:grid;gap:7px;align-content:start;justify-items:center;
padding:22px 10px 18px;min-height:250px}
.players-tall .pcard .face,.players-all .pcard .face{width:74px;height:74px}
.players-all .pcard .hrs{font-family:var(--mono);font-size:9px;color:var(--muted-2)}
@media(max-width:1160px){
.players.players-tall{grid-template-columns:repeat(4,1fr)}
.players.players-all{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:900px){
.players.players-tall,.players.players-all{grid-template-columns:repeat(3,1fr)}
.preview-path{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}
.event-actions{justify-content:flex-start}
}
@media(max-width:620px){
.players.players-tall,.players.players-all{grid-template-columns:repeat(2,1fr);gap:10px}
.players-tall .pcard,.players-all .pcard{min-height:210px;padding:16px 8px 14px}
.players-tall .pcard .face,.players-all .pcard .face{width:60px;height:60px}
.players-head-actions{width:100%;justify-content:space-between}
.event{grid-template-columns:1fr!important;gap:12px}
.event .prize{justify-items:start}
.event-actions{justify-content:flex-start;width:100%}
.event-actions .btn,.event-actions .chip{flex:1;text-align:center;justify-content:center}
.next-three-item{grid-template-columns:auto 1fr;row-gap:4px}
.n3-tag{grid-column:2;justify-self:start}
.opt-card b{font-size:17px}
.search-results{max-height:190px}
.notif-list{max-height:46vh}
.preview-path .pp{min-width:104px;padding:10px 12px}
}
/* =====================================================================
LA BALDUNETA v6 — fondo de CS, premio, servidores, árbol y volumen
===================================================================== */
/* ---------- Fondo del hero -------------------------------------------- */
/* El fondo va en .hero-bg (que ya es absoluto). No se toca el
posicionamiento de .hero-in ni de .hero-tactical: al hacerlo, la capa de
fondo entraba en la grilla y empujaba todo el contenido a la derecha. */
.hero-bg{
background:url('/img/hero-cs.svg') center center/cover no-repeat #05070b;
}
.hero.has-banner .hero-bg{background-image:none}
.hero-bg::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
radial-gradient(115% 85% at 50% 45%,rgba(5,7,11,.30),rgba(5,7,11,.80) 62%,rgba(5,7,11,.96)),
linear-gradient(180deg,rgba(5,7,11,.72),rgba(5,7,11,.18) 42%,rgba(5,7,11,.94));
}
/* ---------- Cartel del premio ----------------------------------------- */
.prize-band-wrap{padding-top:20px!important;padding-bottom:0!important}
.prize-band{display:grid;grid-template-columns:1.3fr auto auto;gap:22px;align-items:center;
padding:20px 26px;border:1px solid rgba(224,177,82,.42);
background:linear-gradient(120deg,rgba(224,177,82,.16),rgba(124,255,0,.05) 55%,rgba(255,255,255,.02));
box-shadow:0 0 40px rgba(224,177,82,.10),inset 0 0 60px rgba(224,177,82,.05);
clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.prize-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.prize-band h3{font-family:var(--display);font-size:clamp(24px,3vw,36px);margin:4px 0 6px;letter-spacing:.02em;
background:linear-gradient(100deg,#FFE08A,#E0B152 45%,#FFD36E);-webkit-background-clip:text;background-clip:text;color:transparent}
.prize-band p{margin:0;font-size:13.5px;color:var(--muted);max-width:52ch;line-height:1.5}
.prize-band-count{display:grid;gap:4px;justify-items:center;padding:0 22px;border-left:1px solid rgba(224,177,82,.28);border-right:1px solid rgba(224,177,82,.28)}
.pc-label,.pc-when,.pl-label{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.pc-nums{display:flex;align-items:baseline;gap:5px}
.pc-nums b{font-family:var(--display);font-size:30px;color:var(--gold);line-height:1}
.pc-nums small{font-family:var(--mono);font-size:8.5px;color:var(--muted-2);margin-right:5px}
.pc-open{font-family:var(--display);font-size:20px;color:#a6ff6a}
.prize-band-leader{display:grid;gap:5px;justify-items:center;min-width:150px}
.pl-who{display:flex;align-items:center;gap:8px}
.pl-who img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.pl-who b{font-size:14px}
.pl-pts{font-family:var(--mono);font-size:11px;color:var(--neon)}
/* ---------- Servidores públicos ---------------------------------------- */
.servers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.server-card{display:grid;gap:10px;align-content:start;padding:20px;
background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line);
clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
transition:border-color .2s,transform .2s}
.server-card:hover{border-color:rgba(124,255,0,.4);transform:translateY(-3px)}
.server-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.server-top b{font-family:var(--display);font-size:19px;letter-spacing:.03em}
.server-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.server-meta{display:flex;gap:7px;flex-wrap:wrap}
.server-ip{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--neon);
padding:9px 11px;background:rgba(124,255,0,.06);border:1px dashed rgba(124,255,0,.28);word-break:break-all}
.server-actions{display:flex;gap:8px;flex-wrap:wrap}
.server-actions .btn{flex:1;text-align:center;justify-content:center}
/* ---------- Árbol competitivo vertical --------------------------------- */
.tree{display:grid;gap:0;margin:14px 0 6px}
.tree-round h4{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
color:var(--gold);margin:0 0 10px;text-align:center}
.tree-matches{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.tree-match{display:grid;gap:1px;border:1px solid var(--line);background:var(--panel);overflow:hidden}
.tree-match.played{border-color:rgba(124,255,0,.32)}
.tm-side{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;
background:rgba(255,255,255,.03);font-size:13px}
.tm-side b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-side i{color:var(--muted-2);font-style:normal;font-size:12px}
.tm-side em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--muted-2)}
.tm-side.win{background:linear-gradient(90deg,rgba(124,255,0,.14),rgba(255,255,255,.02))}
.tm-side.win b{color:#c6ff9a;font-weight:700}
.tm-side.win em{color:#c6ff9a}
.tree-link{display:grid;place-items:center;height:26px}
.tree-link i{width:1px;height:100%;background:linear-gradient(180deg,rgba(224,177,82,.55),rgba(224,177,82,.05))}
/* ---------- Barra de volumen ------------------------------------------- */
.music-volume input[type=range]{
-webkit-appearance:none;appearance:none;height:6px;border-radius:4px;outline:none;
background:linear-gradient(90deg,var(--neon) 0 var(--fill,15%),rgba(255,255,255,.16) var(--fill,15%) 100%);
border:1px solid rgba(255,255,255,.10)}
.music-volume input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
background:#fff;border:2px solid var(--neon);cursor:pointer;box-shadow:0 0 8px rgba(124,255,0,.5)}
.music-volume input[type=range]::-moz-range-thumb{
width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--neon);cursor:pointer}
.music-volume input[type=range]::-moz-range-track{background:transparent}
.music-volume b{min-width:32px;text-align:right}
/* ---------- Responsive de lo nuevo ------------------------------------- */
@media(max-width:1160px){ .servers-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:900px){
.prize-band{grid-template-columns:1fr;gap:16px;text-align:left}
.prize-band-count{justify-items:start;padding:14px 0;border-left:0;border-right:0;
border-top:1px solid rgba(224,177,82,.22);border-bottom:1px solid rgba(224,177,82,.22)}
.prize-band-leader{justify-items:start}
}
@media(max-width:620px){
.servers-grid{grid-template-columns:1fr}
.hero-bg{background-position:58% center}
.tree-matches{grid-template-columns:1fr}
.prize-band{padding:16px 18px}
.pc-nums b{font-size:24px}
.event-actions .btn{flex:1 1 45%}
}
.bracket-bar .tree-open{margin-left:auto;color:var(--gold);border-color:rgba(224,177,82,.45)}
.bracket-bar .tree-open:hover{background:rgba(224,177,82,.12)}
@media(max-width:620px){.bracket-bar .tree-open{margin-left:0;width:100%}}
/* =====================================================================
LA BALDUNETA v7 — aviso de transmisión y tiempo de vista
===================================================================== */
.live-banner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
margin-bottom:22px;padding:16px 22px;border:1px solid var(--line);
background:linear-gradient(120deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.live-banner .lb-copy{display:grid;gap:3px;min-width:0}
.live-banner .lb-copy b{font-family:var(--display);font-size:clamp(17px,2.2vw,24px);letter-spacing:.04em}
.live-banner .lb-copy small{font-size:12.5px;color:var(--muted)}
.live-banner .lb-actions{display:flex;gap:8px;flex-wrap:wrap}
.live-banner .lb-dot{width:14px;height:14px;border-radius:50%;background:var(--muted-2);flex:none}
.live-banner.is-live{border-color:rgba(255,59,59,.5);
background:linear-gradient(120deg,rgba(255,59,59,.16),rgba(124,255,0,.05) 60%,rgba(255,255,255,.02));
box-shadow:0 0 34px rgba(255,59,59,.14)}
.live-banner.is-live .lb-copy b{color:#ff8f8f}
.live-banner.is-live .lb-dot{background:#ff3b3b;box-shadow:0 0 0 0 rgba(255,59,59,.6);animation:lbPulse 1.6s infinite}
@keyframes lbPulse{
0%{box-shadow:0 0 0 0 rgba(255,59,59,.55)}
70%{box-shadow:0 0 0 14px rgba(255,59,59,0)}
100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}
}
.live-banner.is-off{border-color:var(--line-soft)}
.live-banner.is-off .lb-copy b{color:var(--muted)}
.live-banner.is-off .lb-dot{background:#4a5160}
.live-banner.is-unknown{border-color:rgba(224,177,82,.35)}
.live-banner.is-unknown .lb-copy b{color:var(--gold);font-size:clamp(14px,1.8vw,19px)}
.live-banner.is-unknown .lb-dot{background:var(--gold)}
.watch-note{margin:14px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted-2);text-align:center}
@media(max-width:760px){
.live-banner{grid-template-columns:auto 1fr;gap:12px;padding:14px 16px}
.live-banner .lb-actions{grid-column:1/-1}
.live-banner .lb-actions .btn{flex:1;text-align:center;justify-content:center}
}
/* =====================================================================
LA BALDUNETA v8 — redes, invitaciones y paneles nuevos
===================================================================== */
.socials-bar{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
margin:22px auto 0;padding:16px 22px;border:1px solid var(--line-soft);
background:linear-gradient(120deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
.socials-label{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)}
.socials-icons{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.social-ico{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;text-decoration:none;
color:var(--muted);border:1px solid var(--line);background:rgba(255,255,255,.03);
font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
transition:color .2s,border-color .2s,transform .2s,background .2s}
.social-ico svg{width:18px;height:18px}
.social-ico:hover{transform:translateY(-2px);color:#fff}
.social-ico.kick:hover{border-color:#7CFF00;background:rgba(124,255,0,.10);color:#b6ff7a}
.social-ico.instagram:hover{border-color:#e1306c;background:rgba(225,48,108,.12);color:#ff8fb4}
.social-ico.x:hover{border-color:#fff;background:rgba(255,255,255,.10)}
.social-ico.youtube:hover{border-color:#ff3b3b;background:rgba(255,59,59,.12);color:#ff9d9d}
.social-ico.tiktok:hover{border-color:#25f4ee;background:rgba(37,244,238,.10);color:#8ff7f3}
.social-ico.discord:hover{border-color:#5865F2;background:rgba(88,101,242,.14);color:#aab2ff}
/* Invitación a jugar */
.invite-card{display:grid;gap:12px}
.invite-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--neon)}
.invite-card h2{font-size:clamp(22px,4vw,32px);line-height:1.05;
background:linear-gradient(100deg,#c6ff9a,#7CFF00 60%,#e0b152);-webkit-background-clip:text;background-clip:text;color:transparent}
.invite-steps{margin:0;padding-left:20px;display:grid;gap:7px;color:var(--muted);font-size:13.5px;line-height:1.5}
.invite-steps b{color:var(--text)}
.invite-server{display:grid;gap:7px;padding:14px;border:1px dashed rgba(124,255,0,.35);background:rgba(124,255,0,.06)}
.invite-server span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.invite-server code{font-family:var(--mono);font-size:13px;color:var(--neon);word-break:break-all}
.invite-server .btn{justify-self:start}
/* Panel: tarjetas de candidatos y fila en línea */
.card.cand{display:grid;gap:6px;align-content:start}
.card.cand strong{font-size:16px}
.card.cand span{font-family:var(--mono);font-size:11px;color:var(--gold)}
.card.cand small{color:var(--muted-2);font-size:11px}
.card.cand .btn{justify-self:start;margin-top:4px}
tr.is-online td{background:rgba(124,255,0,.05)}
.live-switch .mini{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:620px){
.socials-bar{gap:12px;padding:14px}
.social-ico span{display:none}
.social-ico{padding:10px}
.social-ico svg{width:20px;height:20px}
}
/* v8.2 — banners publicitarios visibles */
.home-banners{width:min(var(--wrap),92%);margin:28px auto 0;position:relative;border:1px solid rgba(224,177,82,.28);background:#080a0f;overflow:hidden;clip-path:var(--clip);box-shadow:0 20px 55px rgba(0,0,0,.28)}
.home-banners-track{position:relative;aspect-ratio:16/3.2;min-height:145px;max-height:300px}
.home-banner-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .7s ease;overflow:hidden;color:inherit;text-decoration:none}
.home-banner-slide.on{opacity:1;visibility:visible}
.home-banner-slide img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.home-banner-copy{position:absolute;inset:auto 0 0;padding:44px 28px 20px;background:linear-gradient(transparent,rgba(5,7,11,.88));display:grid;gap:3px}
.home-banner-copy b{font-family:var(--display);font-size:clamp(20px,3vw,34px);letter-spacing:.03em}.home-banner-copy small{color:#c2c7d0}
.home-banners-dots{position:absolute;right:18px;bottom:14px;z-index:3;display:flex;gap:7px}
.home-banners-dots button{width:28px;height:3px;padding:0;border:0;background:rgba(255,255,255,.35);cursor:pointer}.home-banners-dots button.on{background:var(--gold)}
@media(max-width:700px){.home-banners{margin-top:18px}.home-banners-track{aspect-ratio:16/6;min-height:120px}.home-banner-copy{padding:30px 16px 13px}.home-banners-dots{right:12px;bottom:9px}}
/* Playlists por carpetas/categorías */
.music-dock{flex-wrap:wrap}
.music-playlists{width:100%;display:grid;grid-template-columns:minmax(105px,.8fr) minmax(150px,1.2fr);gap:7px;padding-top:8px;border-top:1px solid var(--line)}
.music-playlists label{min-width:0;display:grid;gap:4px}
.music-playlists label span{font:700 8px var(--mono);letter-spacing:.18em;color:var(--muted-2)}
.music-playlists select{min-width:0;width:100%;height:31px;padding:0 8px;border:1px solid rgba(224,177,82,.25);background:#0a0d12;color:var(--text);font:700 10px var(--mono);outline:none}
.music-playlists select:focus{border-color:rgba(124,255,0,.58)}
.music-playlists select:disabled{opacity:.55}
@media(max-width:520px){.music-playlists{grid-template-columns:1fr 1.35fr}.music-playlists select{font-size:9px}}
.chat-box header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chat-open-kick{font:800 9px var(--mono);letter-spacing:.08em;color:var(--gold);border:1px solid rgba(224,177,82,.35);padding:7px 9px;text-decoration:none;white-space:nowrap}
.chat-open-kick:hover{color:#fff;border-color:var(--gold)}
@media(max-width:520px){.chat-box header{align-items:flex-start;flex-direction:column}.chat-open-kick{width:100%;text-align:center}}
.kick-connect{display:flex;justify-content:center;align-items:center;width:100%;background:#53fc18!important;color:#071006!important;border-color:#53fc18!important;font-weight:900}
.center{text-align:center}.kick-linked{display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:center;padding:14px;border:1px solid rgba(83,252,24,.35);background:rgba(83,252,24,.08);margin:0 0 18px}.kick-linked b{color:#53fc18}.kick-linked span{grid-column:1}.kick-linked button{grid-column:2;grid-row:1/3}
/* v21 — ingreso con Steam */
.steam-connect{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;min-height:48px;margin:0 0 10px!important;border-radius:2px;position:relative;z-index:2;background:linear-gradient(180deg,#1b2838,#0f1922)!important;color:#e7f0f7!important;border-color:#66c0f4!important;font-weight:900}
.steam-connect:hover{background:linear-gradient(180deg,#24384f,#16232f)!important;color:#fff!important;border-color:#9fd5ff!important}
.steam-connect svg{flex:0 0 auto}
.steam-card{border:1px solid rgba(102,192,244,.35);background:rgba(27,40,56,.45);padding:16px;margin:0 0 18px}
.steam-card-head{display:flex;gap:14px;align-items:center}
.steam-card-head img{width:56px;height:56px;object-fit:cover;border:1px solid rgba(102,192,244,.5)}
.steam-linked-icon{display:grid;place-items:center;width:56px;height:56px;background:#1b2838;color:#66c0f4;border:1px solid rgba(102,192,244,.5)}
.steam-card-head b{display:block;color:#e7f0f7;font-size:16px}
.steam-card-head span{display:block;color:var(--muted);font:600 11px var(--mono);letter-spacing:.06em;margin:2px 0 4px;word-break:break-all}
.steam-card .verified-badge{color:#66c0f4;font:700 10px var(--mono);letter-spacing:.1em}
.steam-card-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin:14px 0 0}
.steam-card-stats div{padding:10px;background:rgba(0,0,0,.25);border:1px solid var(--line);text-align:center}
.steam-card-stats strong{display:block;font:700 18px var(--display);color:#fff}
.steam-card-stats span{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.steam-card .mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.steam-locked{border:1px solid rgba(102,192,244,.3);background:rgba(27,40,56,.35);padding:14px;margin:2px 0 4px}
.steam-locked.pending{border-color:rgba(224,177,82,.45);background:rgba(224,177,82,.07)}
.steam-locked-head{display:flex;align-items:center;gap:10px;color:#66c0f4}
.steam-locked.pending .steam-locked-head{color:var(--gold)}
.steam-locked-head b{display:block;color:#e7f0f7;font-size:14px}
.steam-locked-head small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.steam-locked-head>div{flex:1}
.steam-lock{font-size:15px;opacity:.75}
.steam-locked-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.steam-locked-row>span{color:var(--muted);font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.steam-locked-row a,.steam-locked-row code{color:#e7f0f7;font:600 12px var(--mono);word-break:break-all;text-align:right}
.steam-locked-row a:hover{color:#66c0f4}
.steam-locked .hint{margin:10px 0 0;font-size:12px}
.steam-locked .steam-connect{margin-top:12px!important}
/* v22 — moderación: advertencias y bajas */
.mod-block{text-align:center;padding:6px 0}
.mod-block .mod-icon{display:block;font-size:44px;line-height:1;margin-bottom:12px}
.mod-block h2{margin:0 0 6px}
.mod-block .hint{margin:0 0 14px}
.mod-reason{text-align:left;border:1px solid var(--line);background:rgba(0,0,0,.28);padding:14px;margin:0 0 16px}
.mod-reason small{display:block;color:var(--muted);font:700 10px var(--mono);letter-spacing:.16em;margin-bottom:6px}
.mod-reason p{margin:0;color:#fff;font-size:15px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.mod-block.danger .mod-reason{border-color:rgba(255,86,86,.45);background:rgba(255,86,86,.08)}
.mod-block.danger h2{color:#ff6b6b}
.mod-block.warn .mod-reason{border-color:rgba(224,177,82,.5);background:rgba(224,177,82,.08)}
.mod-block.warn h2{color:var(--gold)}
.mod-block .btn{width:100%}
.notif.notif-warning{border-left:3px solid var(--gold)}
.notif.notif-warning b{color:var(--gold)}
.link-kick{color:#53fc18;text-decoration:none;border-bottom:1px solid rgba(83,252,24,.35)}
.link-kick:hover{border-bottom-color:#53fc18}
@media(max-width:520px){.steam-card-head{flex-direction:column;text-align:center}.steam-card .mini .btn{flex:1 1 100%}.steam-locked-row{flex-direction:column;align-items:flex-start;gap:4px}.steam-locked-row a,.steam-locked-row code{text-align:left}}
/* Fase 4: recompensas */
.rewards-panel{display:grid;gap:18px}.rewards-summary{display:flex;align-items:center;justify-content:space-between;gap:20px}.rewards-summary small,.reward-top span{font:700 10px var(--mono);letter-spacing:.18em;color:var(--gold)}.rewards-summary strong{display:block;font:700 clamp(28px,4vw,52px) var(--display);margin:4px 0}.rewards-summary span{color:var(--muted);font-size:13px}.reward-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.reward-card{background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid var(--line);padding:20px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}.reward-card.done{border-color:rgba(215,171,66,.65)}.reward-top{display:flex;justify-content:space-between;gap:12px}.reward-card h3{margin:16px 0 7px}.reward-card p{min-height:38px;color:var(--muted);font-size:13px}.reward-progress{height:6px;background:#17191e;margin:16px 0 8px;overflow:hidden}.reward-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#7cff00)}.reward-card>small{display:block;color:var(--muted-2);margin-bottom:12px}.achievement-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.achievement{display:flex;gap:12px;padding:14px;border:1px solid var(--line);opacity:.45}.achievement.unlocked{opacity:1;border-color:rgba(124,255,0,.35);background:rgba(124,255,0,.04)}.achievement>span{font-size:28px}.achievement b,.achievement small,.achievement em{display:block}.achievement small{color:var(--muted);margin:4px 0}.achievement em{font:500 10px var(--mono);color:var(--gold);font-style:normal}@media(max-width:700px){.rewards-summary{align-items:flex-start;flex-direction:column}.rewards-summary .btn{width:100%}}
/* Fase 5: economía */
.shop-summary{display:flex;justify-content:space-between;align-items:center;gap:18px}.shop-summary small{display:block;color:var(--muted);font-size:11px;letter-spacing:.12em}.shop-summary strong{font-size:28px}.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:14px 0}.shop-card{background:rgba(255,255,255,.035);border:1px solid var(--line);padding:16px;min-height:250px;display:flex;flex-direction:column;gap:8px}.shop-card img{width:100%;height:120px;object-fit:cover;border-radius:8px}.shop-card>span{font:700 11px var(--mono);color:var(--acid);text-transform:uppercase}.shop-card h3,.shop-card p{margin:0}.shop-card p{color:var(--muted);font-size:13px;flex:1}.shop-cost{display:flex;justify-content:space-between;align-items:end}.shop-cost b{font-size:20px}.shop-cost small{color:var(--muted-2)}.shop-history>div{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.shop-history span small{display:block;color:var(--muted)}.shop-history em{font-style:normal;font-size:11px;text-transform:uppercase}.status-delivered{color:var(--acid)}.status-rejected,.status-cancelled{color:#ff8f8f}.status-approved{color:#8fc7ff}@media(max-width:620px){.shop-summary{align-items:flex-start;flex-direction:column}.shop-history>div{grid-template-columns:1fr auto}.shop-history>div>strong{grid-column:2}}
/* Fase 7: perfil gamer */
.gamer-card{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center;margin:18px 0;padding:18px;border:1px solid rgba(124,255,0,.28);background:linear-gradient(135deg,rgba(124,255,0,.08),rgba(215,171,66,.05))}.gamer-level{text-align:center;border-right:1px solid var(--line)}.gamer-level small,.gamer-level span{display:block;font:700 9px var(--mono);letter-spacing:.16em;color:var(--muted)}.gamer-level strong{display:block;font:800 50px/1 var(--display);color:var(--acid);margin:5px 0}.gamer-main b,.gamer-main span,.gamer-main small{display:block}.gamer-main b{font:700 23px var(--display)}.gamer-main span,.gamer-main small{color:var(--muted);font-size:11px}.xp-track{height:8px;background:#101318;margin:12px 0 7px;overflow:hidden}.xp-track i{display:block;height:100%;background:linear-gradient(90deg,var(--acid),var(--gold))}.gamer-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0 0 18px}.gamer-stats>div{padding:13px;border:1px solid var(--line);background:rgba(255,255,255,.025)}.gamer-stats strong,.gamer-stats span{display:block}.gamer-stats strong{font:700 18px var(--display)}.gamer-stats span{font:600 9px var(--mono);letter-spacing:.1em;color:var(--muted);margin-top:4px}.gamer-section{margin:20px 0}.gamer-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}.gamer-badges>div{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid rgba(215,171,66,.3);background:rgba(215,171,66,.045)}.gamer-badges span{font-size:23px}.gamer-badges b{font-size:11px}.season-history{display:grid;gap:7px}.season-history>div{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center;padding:11px;border:1px solid var(--line)}.season-history span b,.season-history span small{display:block}.season-history span small,.season-history>div>small{color:var(--muted);font-size:10px}.season-history em{font-style:normal;color:var(--acid);font:700 14px var(--mono)}@media(max-width:650px){.gamer-card{grid-template-columns:76px 1fr}.gamer-level strong{font-size:38px}.gamer-stats{grid-template-columns:repeat(2,1fr)}.season-history>div{grid-template-columns:1fr auto}.season-history>div>strong,.season-history>div>small{text-align:right}}
/* v2.9 UX, tienda y perfiles */
.kick-connect{margin:0 0 22px!important;min-height:48px;border-radius:2px;position:relative;z-index:2}.account-head{padding-top:4px}.pair-code-modal{text-align:center;padding:18px}.pair-code-modal .pair-shield{display:grid;place-items:center;margin:0 auto 12px;width:64px;height:64px;border-radius:50%;background:#53fc18;color:#071006;font-size:34px;font-weight:900;box-shadow:0 0 30px #53fc1870}.pair-code-modal strong{display:block;color:#53fc18;font:700 44px/1 'IBM Plex Mono';letter-spacing:12px;margin:24px 0 12px}.pair-code-modal small{display:block;margin-bottom:22px;color:var(--muted)}
.store-tabs{display:flex;gap:8px;margin:0 0 18px;border-bottom:1px solid var(--line)}.store-tabs button{background:none;border:0;color:var(--muted);font:700 12px 'IBM Plex Mono';text-transform:uppercase;letter-spacing:1px;padding:14px 18px;cursor:pointer}.store-tabs button.on{color:var(--gold);border-bottom:2px solid var(--gold)}.product-store{display:grid;grid-template-columns:210px 1fr;gap:18px}.product-filters{background:var(--panel);border:1px solid var(--line);padding:16px;height:max-content}.product-filters b{display:block;margin-bottom:12px}.product-filters button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--muted);padding:10px;cursor:pointer}.product-filters button.on{background:#c99a3522;color:var(--gold)}.product-grid,.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}.product-card,.shop-card{background:var(--panel);border:1px solid var(--line);padding:12px;min-width:0}.product-card img,.shop-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;margin-bottom:10px}.product-card span{font-size:10px;color:var(--gold);text-transform:uppercase}.product-card h3{margin:6px 0}.product-card p{color:var(--muted);min-height:42px}.product-price{display:flex;gap:8px;align-items:baseline;margin:12px 0}.product-price b{font-size:22px;color:var(--gold)}.product-price s{color:var(--muted)}
.user-order,.order-admin{margin-bottom:14px}.order-head,.order-admin>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:center}.order-head span,.order-admin>div:first-child{flex:1}.order-head small,.order-admin small{display:block;color:var(--muted)}.order-chat{margin-top:14px;background:#090a0f;border:1px solid var(--line);padding:12px;max-height:300px;overflow:auto}.order-chat p{max-width:78%;padding:8px 10px;border-radius:6px;margin:6px 0}.order-chat p.admin{background:#1c1831}.order-chat p.user{background:#263a1b;margin-left:auto}.order-chat form{display:flex;gap:8px;margin-top:10px}.order-chat input{flex:1}.order-admin{border:1px solid var(--line);padding:14px;background:var(--panel)}
.floating-ad{position:fixed;left:16px;bottom:16px;width:190px;z-index:90;background:#10130e;border:1px solid #53fc18;border-radius:12px;padding:8px;box-shadow:0 0 30px #53fc1835;text-decoration:none;color:#fff}.floating-ad img{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:8px}.floating-ad b{display:block;padding:9px 4px 3px;text-align:center;font-size:13px}.floating-ad button{position:absolute;right:5px;top:5px;border:0;background:#111c;color:#fff;border-radius:50%;width:24px;height:24px;cursor:pointer}
.faceit-level{position:relative;display:grid;place-items:center;width:150px;height:150px;margin:15px auto;border-radius:50%;background:conic-gradient(#53fc18 var(--p,30%),#25282d 0);box-shadow:inset 0 0 0 12px #111318}.faceit-level:after{content:'';position:absolute;inset:16px;border-radius:50%;background:#15171c}.faceit-level span,.faceit-level strong{position:relative;z-index:1}.faceit-level strong{font:700 55px 'Anton'}.public-profile{max-width:780px}.players-list article,.player-card{cursor:pointer}
/* Los números de seed quedan centrados en todos los casilleros del bracket */
.bracket .seed,.bracket .team-no,.bracket [class*="seed"],.bracket-preview .seed,.admin-match .seed{display:inline-grid!important;place-items:center!important;min-width:28px;height:28px;text-align:center;line-height:28px;padding:0!important}
@media(max-width:760px){.product-store{grid-template-columns:1fr}.product-filters{display:flex;overflow:auto}.product-filters b{display:none}.product-filters button{width:auto;white-space:nowrap}.floating-ad{width:140px}.pair-code-modal strong{font-size:34px;letter-spacing:8px}}
/* v3.1 Lobbies CS2, asignación y veto Premier */
.lobby-roster{display:grid;gap:8px}.lobby-roster-row{display:grid;grid-template-columns:1fr minmax(150px,220px);gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);background:#090b10}.lobby-roster-row b,.lobby-roster-row small{display:block}.lobby-roster-row small{margin-top:3px;color:var(--muted);font-size:10px}.lobby-roster-row select{width:100%}.lobby-teams{margin:12px 0}.map-veto{margin-top:12px;border-color:rgba(215,171,66,.45)}.veto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:12px 0}.server-connect{margin-top:14px;padding:16px;border:1px solid rgba(124,255,0,.42);background:rgba(124,255,0,.05)}.server-connect code{user-select:all}.lobby-user-card{scroll-margin-top:20px}
@media(max-width:680px){.lobby-roster-row{grid-template-columns:1fr}.veto-grid{grid-template-columns:repeat(2,1fr)}}
/* v3.1.1 correcciones visuales */
.match{overflow:visible}.match .tag{top:5px;left:6px;z-index:4;min-width:28px;height:20px;display:grid;place-items:center;padding:0}.match .slot:first-of-type{padding-top:24px}.faceit-level{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:0}.faceit-level span{position:absolute!important;top:31px;left:0;right:0;text-align:center;line-height:1}.faceit-level strong{position:relative!important;display:block;line-height:1;margin-top:15px;text-align:center;transform:none}.server-connect .btn{margin:5px 6px 5px 0}
/* v3.2 */
.music-dock{display:none!important;position:fixed!important;top:84px!important;right:22px!important;left:auto!important;bottom:auto!important;z-index:1200!important;max-width:min(450px,calc(100vw - 28px))!important}.music-dock.open{display:grid!important}.music-close{position:absolute;right:8px;top:6px;border:0;background:transparent;color:#fff;font-size:25px;cursor:pointer;z-index:3}.icon-btn#musicBtn.on{border-color:var(--gold);color:var(--gold)}
.xp-track{position:relative!important;border:1px solid rgba(255,255,255,.08);min-height:10px}.xp-track i{min-width:2px;box-shadow:0 0 12px rgba(124,255,0,.45)}
.mode-wins{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.mode-wins>*{padding:8px 12px;border:1px solid var(--line);background:#101217}
@media(max-width:700px){.music-dock{top:68px!important;right:8px!important}.music-playlists{grid-template-columns:1fr!important}.server-card,.reward-card,.gamer-card{min-width:0}.section{padding-left:15px!important;padding-right:15px!important}}
/* v3.3.0 — navegación, llave y reproductor */
.music-dock{padding-top:16px!important}
.music-close{position:absolute!important;top:10px!important;right:10px!important;width:30px!important;height:30px!important;display:grid!important;place-items:center!important;z-index:6!important}
.music-toggle{padding-right:54px!important;min-height:52px!important}
.match{position:relative;padding-top:38px!important;min-width:300px}
.match .tag{top:8px!important;left:10px!important;min-width:36px;text-align:center}
.match-date{position:absolute;top:7px;left:56px;right:8px;display:flex;align-items:center;justify-content:flex-end;gap:8px;font:700 9px var(--mono);letter-spacing:.08em;color:var(--gold)}
.match-date span{color:var(--muted)}
.match-date i{font-style:normal;color:var(--cyan);border-left:1px solid var(--line);padding-left:8px}
.match-date.pending{color:var(--muted-2)}
.admin-match .mini{align-items:center;flex-wrap:wrap;overflow:visible}
.admin-match .mini .btn{white-space:normal;min-height:38px;line-height:1.15;overflow:visible}
.admin-match{overflow:visible}
@media(max-width:720px){.match{min-width:270px}.match-date{left:50px;font-size:8px}.music-toggle{padding-right:46px!important}}
#myLobbiesBtn.lobby-waiting{border-color:#3ee789!important;color:#8dffc0!important;box-shadow:0 0 0 2px rgba(62,231,137,.16),0 0 18px rgba(62,231,137,.22);animation:lobbyPulse 1.4s infinite}.slot.is-live{border-color:#d8aa42!important;box-shadow:inset 3px 0 #d8aa42}.match-live-label{display:block;color:#65ee9d;font-size:9px;letter-spacing:2px;margin-top:3px}.watch-live{font-size:9px;color:#f2c85b;border:1px solid #9c7525;padding:4px 6px;text-decoration:none;margin-right:5px;white-space:nowrap}@keyframes lobbyPulse{50%{box-shadow:0 0 0 4px rgba(62,231,137,.08),0 0 26px rgba(62,231,137,.36)}}
.match-watch-live{position:absolute;right:10px;top:8px;z-index:8;padding:6px 9px;border:1px solid #d3a634;background:#15120b;color:#ffd56a;font:700 9px/1 var(--mono);letter-spacing:1.4px;text-decoration:none;box-shadow:0 0 14px rgba(211,166,52,.18)}
.match-watch-live:hover{background:#d3a634;color:#080a0e}
/* v3.7 tienda, verificación y visibilidad */
.nav-store{border:1px solid var(--gold)!important;color:var(--gold)!important;padding:12px 18px!important;box-shadow:0 0 18px rgba(224,174,67,.16);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.nav-store:hover{background:rgba(224,174,67,.12)!important;box-shadow:0 0 24px rgba(224,174,67,.3)}
.verified-badge,.verified-icon{display:inline-flex;align-items:center;justify-content:center;color:#fff;background:#2d96f3;border-radius:999px;font-size:11px;padding:3px 7px;margin-left:6px;vertical-align:middle}.verified-icon{width:20px;height:20px;padding:0;font-size:13px}
.steam-help{display:block;margin-top:8px;border:0;background:none;color:var(--gold);text-decoration:underline;cursor:pointer;padding:0;font:600 12px var(--mono)}
.steam-tutorial{border:1px solid var(--line);background:#14283d;margin:18px 0;padding:0 0 18px;overflow:hidden}.steam-bar{background:#1b2838;padding:13px 18px;font-weight:800;letter-spacing:.12em}.steam-account{background:linear-gradient(90deg,#254764,#1b3045);padding:24px;display:flex;flex-direction:column;gap:8px}.steam-account span{font-size:28px;font-weight:800}.steam-account strong{color:#aeb8c3}.steam-tutorial ol{margin:18px 25px 0;padding-left:20px}.steam-tutorial li{margin:8px 0}.notif-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.xp-track i,.faceit-level i{background:linear-gradient(90deg,#e2aa3b,#7cff00)!important;box-shadow:0 0 14px rgba(124,255,0,.5)!important}
.floating-ad{z-index:9999!important;display:flex!important;position:fixed!important;left:18px!important;bottom:18px!important;visibility:visible!important;opacity:1!important}
.store-page{min-height:100vh;background:radial-gradient(circle at 50% 0,#1b203e 0,#080b12 58%);color:var(--text)}.store-header{position:sticky;top:0;z-index:20;padding:18px 4vw}.store-main{max-width:1280px;margin:auto;padding:40px 24px 90px}.store-hero{text-align:center;padding:35px 0 50px}.store-hero small{color:var(--gold);letter-spacing:.3em}.store-hero h1{font-size:clamp(64px,10vw,140px);margin:4px 0;line-height:.9}.store-hero p{color:var(--muted);font-size:18px}.coin-dashboard{display:flex;justify-content:space-between;gap:20px;margin-bottom:18px}.coin-dashboard small{display:block;color:var(--muted);letter-spacing:.15em}.coin-dashboard strong{font-size:30px;color:var(--gold)}.daily-box{display:grid;grid-template-columns:260px 1fr;gap:30px;align-items:center;margin-bottom:40px;border-color:var(--gold)}.case-art{aspect-ratio:1;display:grid;place-content:center;text-align:center;background:linear-gradient(145deg,#edc15f,#8c651a);clip-path:polygon(15% 0,85% 0,100% 15%,100% 85%,85% 100%,15% 100%,0 85%,0 15%);color:#0b0d12}.case-art span{font-size:72px;font-weight:900}.case-art b{letter-spacing:.18em}.daily-box h2{font-size:42px;margin:0}.daily-box p{color:var(--muted);max-width:620px}.daily-box #spinResult strong{display:block;margin-top:14px;font-size:26px;color:#7cff00}@media(max-width:700px){.daily-box{grid-template-columns:1fr}.case-art{max-width:220px;margin:auto}.coin-dashboard{flex-direction:column}}
/* v3.8 — cajas animadas, acceso rápido y perfil de temporada */
.case-zone{border-color:rgba(224,177,82,.55);padding:24px;margin-bottom:42px;overflow:hidden}.case-zone-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}.case-zone-head small{font:700 10px var(--mono);letter-spacing:.22em;color:var(--gold)}.case-zone-head h2{font-size:clamp(32px,5vw,58px);margin:4px 0}.case-zone-head p{margin:0;color:var(--muted)}.case-carousel{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center}.case-list{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 18px}.case-list::-webkit-scrollbar{height:5px}.case-nav{height:70px;border:1px solid var(--line);background:#0b0e14;color:var(--gold);font-size:34px;cursor:pointer}.case-card{position:relative;flex:0 0 210px;height:178px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,#151922,#090b10);color:var(--text);cursor:pointer;scroll-snap-align:center;transition:.22s transform,.22s border-color,.22s box-shadow;padding:28px 12px 12px}.case-card:hover,.case-card.selected{transform:translateY(-5px);border-color:var(--case,#e0b152);box-shadow:0 15px 36px color-mix(in srgb,var(--case,#e0b152) 22%,transparent)}.case-lid{position:absolute;left:22px;right:22px;top:19px;height:22px;border:2px solid var(--case,#e0b152);background:#202630;transform:perspective(180px) rotateX(18deg);transform-origin:bottom}.case-shell{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--case,#e0b152);background:linear-gradient(145deg,color-mix(in srgb,var(--case,#e0b152) 16%,#10131a),#090b10);clip-path:polygon(8% 0,92% 0,100% 12%,100% 88%,92% 100%,8% 100%,0 88%,0 12%)}.case-shell span{font:900 46px var(--display);color:var(--case,#e0b152)}.case-shell b{font-size:15px;margin-top:6px}.case-shell small{font:700 8px var(--mono);letter-spacing:.12em;color:var(--muted);margin-top:5px}.case-amber{--case:#e0b152}.case-violet{--case:#9c61ff}.case-red{--case:#ff5268}.case-green{--case:#68e87b}.case-blue{--case:#4a8dff}.case-cyan{--case:#4ce4e8}.case-opening{position:relative;margin-top:25px;padding:25px 0 12px;border-top:1px solid var(--line)}.case-pointer{position:absolute;z-index:2;top:17px;left:50%;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:18px solid var(--gold);transform:translateX(-50%)}.case-reel-window{overflow:hidden;border:1px solid rgba(224,177,82,.4);background:#07090e;padding:18px 0}.case-reel{display:flex;gap:12px;width:max-content;will-change:transform}.reel-case{width:150px;flex:0 0 150px;text-align:center}.mini-case{height:92px;display:grid;place-items:center;border:2px solid var(--case,#e0b152);background:linear-gradient(145deg,color-mix(in srgb,var(--case,#e0b152) 18%,#161a22),#080a0e);clip-path:polygon(10% 0,90% 0,100% 14%,100% 86%,90% 100%,10% 100%,0 86%,0 14%)}.mini-case span{font:900 33px var(--display);color:var(--case,#e0b152)}.reel-case b{display:block;font-size:10px;margin-top:8px;color:var(--muted)}.case-reveal{min-height:0;display:grid;place-items:center;opacity:0;transform:translateY(14px);transition:.35s ease;padding:0}.case-reveal.open{opacity:1;transform:none;padding:28px 0 4px}.cs-case{position:relative;width:190px;height:150px;perspective:500px}.cs-case-lid{position:absolute;z-index:2;left:12px;right:12px;top:10px;height:42px;border:3px solid var(--gold);background:#272117;transform-origin:bottom;transition:1s cubic-bezier(.2,.8,.2,1)}.case-reveal.open .cs-case-lid{transform:rotateX(-115deg) translateY(-12px)}.cs-case-body{position:absolute;left:8px;right:8px;bottom:0;height:112px;border:3px solid var(--gold);background:linear-gradient(145deg,#3d3017,#11100d);display:grid;place-content:center;text-align:center;clip-path:polygon(8% 0,92% 0,100% 14%,100% 100%,0 100%,0 14%)}.cs-case-body span{font:900 52px var(--display);color:var(--gold)}.cs-case-body small{font:700 9px var(--mono);letter-spacing:.16em}.case-reveal #spinResult{text-align:center}.case-reveal #spinResult small,.case-reveal #spinResult strong,.case-reveal #spinResult span{display:block}.case-reveal #spinResult small{font:700 9px var(--mono);letter-spacing:.2em;color:var(--muted)}.case-reveal #spinResult strong{font:900 clamp(24px,4vw,42px) var(--display);color:#7cff00;margin:4px 0}.case-reveal #spinResult span{color:var(--gold)}
.scroll-top{position:fixed;right:24px;bottom:24px;z-index:70;width:48px;height:48px;border:1px solid rgba(224,177,82,.6);background:#0a0d13;color:var(--gold);font-size:24px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(12px);transition:.22s}.scroll-top.show{opacity:1;pointer-events:auto;transform:none}.scroll-top:hover{background:var(--gold);color:#080a0e}
.available-cases-float{position:fixed;right:20px;top:50%;z-index:55;width:min(280px,calc(100vw - 32px));padding:16px 16px 16px 70px;border:1px solid rgba(124,255,0,.55);background:linear-gradient(135deg,#11170d,#090c10);box-shadow:0 18px 50px #000b;transform:translateY(-50%);cursor:pointer;text-decoration:none;color:var(--text);animation:caseFloatPulse 2.4s ease-in-out infinite}.available-cases-float:before{content:'LB';position:absolute;left:14px;top:50%;width:44px;height:44px;display:grid;place-items:center;transform:translateY(-50%);border:2px solid var(--gold);background:#2a2111;color:var(--gold);font:900 20px var(--display);clip-path:polygon(12% 0,88% 0,100% 14%,100% 86%,88% 100%,12% 100%,0 86%,0 14%)}.available-cases-float b,.available-cases-float span{display:block}.available-cases-float b{font-size:14px;color:#7cff00}.available-cases-float span{font-size:11px;color:var(--muted);margin-top:4px}@keyframes caseFloatPulse{50%{box-shadow:0 18px 55px rgba(124,255,0,.22);border-color:#7cff00}}
.season-elo-badge{--rank:#e0b152;display:inline-grid;place-items:center;min-width:58px;height:68px;padding:4px 9px;position:relative;background:linear-gradient(145deg,color-mix(in srgb,var(--rank) 28%,#171a21),#080a0f);border:1px solid var(--rank);clip-path:polygon(50% 0,92% 18%,82% 78%,50% 100%,18% 78%,8% 18%);color:#fff;text-align:center}.season-elo-badge:before,.season-elo-badge:after{content:'';position:absolute;left:14%;right:14%;height:2px;background:var(--rank)}.season-elo-badge:before{top:13px}.season-elo-badge:after{bottom:13px}.season-elo-badge strong{font:900 28px/1 var(--display);text-shadow:0 2px 0 #000}.season-elo-badge small{font:700 7px var(--mono);letter-spacing:.12em;color:var(--gold)}.season-badge-item{justify-content:flex-start!important;min-height:88px}.season-badge-item .season-elo-badge{flex:0 0 58px}.gamer-section+.gamer-section{margin-top:30px}.gamer-badges{margin-bottom:8px}.gamer-badges>div{min-height:58px}.public-profile>h3{margin-top:30px;margin-bottom:12px}.public-profile .gamer-badges{margin-bottom:28px}
@media(max-width:760px){.case-zone{padding:16px}.case-zone-head{align-items:stretch;flex-direction:column}.case-zone-head .btn{width:100%}.case-carousel{grid-template-columns:1fr}.case-nav{display:none}.case-card{flex-basis:178px;height:158px}.available-cases-float{top:auto;bottom:82px;right:12px;transform:none}.scroll-top{right:14px;bottom:18px}}
/* v3.9.0 */
.intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(.45)}.intro-content{z-index:5}.case-shell img{width:145px;height:90px;object-fit:contain;display:block;margin:-6px auto -12px}.mini-case img{width:118px;height:70px;object-fit:contain;display:block;margin:auto}.floating-ad{z-index:7000!important;display:block!important;opacity:1!important;visibility:visible!important}.order-closed{padding:12px;border:1px solid var(--gold);color:var(--gold)}
/* v3.9.1 — cajas PNG/WebP transparentes y diálogos propios */
.case-card{height:210px;padding:8px;background:linear-gradient(160deg,rgba(21,25,34,.72),rgba(9,11,16,.9));overflow:hidden}.case-card .case-shell{border:0;background:transparent;clip-path:none;justify-content:flex-end;padding:0 8px 10px}.case-card .case-shell img{width:100%;height:150px;object-fit:contain;margin:0;filter:drop-shadow(0 14px 13px rgba(0,0,0,.55));transition:transform .22s ease}.case-card:hover .case-shell img,.case-card.selected .case-shell img{transform:scale(1.06)}.case-card .case-shell b{font-size:15px;color:var(--case);margin-top:1px}.case-card .case-shell small{font-size:8px}.mini-case{height:104px;border:1px solid color-mix(in srgb,var(--case) 65%,transparent);background:rgba(10,12,17,.75);clip-path:none}.mini-case img{width:138px;height:94px;object-fit:contain;margin:auto;filter:drop-shadow(0 8px 8px #0009)}.case-open-image{display:block;width:min(540px,92vw);height:auto;max-height:410px;object-fit:contain;filter:drop-shadow(0 24px 24px rgba(0,0,0,.65));margin:0 auto 8px}.case-reveal.open{display:flex;flex-direction:column;align-items:center}.site-dialog{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:18px;background:rgba(3,5,9,.82);backdrop-filter:blur(10px)}.site-dialog.hidden{display:none}.site-dialog-card{position:relative;width:min(460px,100%);padding:28px;border:1px solid rgba(224,177,82,.55);background:linear-gradient(160deg,#171b24,#0b0e14);box-shadow:0 30px 90px #000;color:var(--text)}.site-dialog-card>small{font:700 9px var(--mono);letter-spacing:.2em;color:var(--gold)}.site-dialog-card h2{margin:8px 32px 8px 0;font-size:32px}.site-dialog-card p{color:var(--muted);line-height:1.5}.site-dialog-card label{display:grid;gap:8px;margin:20px 0;color:var(--muted);font-size:12px}.site-dialog-card input{width:100%;padding:13px 14px;border:1px solid rgba(224,177,82,.5);background:#080b11;color:#fff;font-size:18px;outline:none}.site-dialog-card input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(224,177,82,.12)}.site-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.site-dialog-x{position:absolute;right:14px;top:12px;border:0;background:none;color:var(--muted);font-size:28px;cursor:pointer}.site-dialog-x:hover{color:#fff}@media(max-width:760px){.case-card{flex-basis:190px;height:190px}.case-card .case-shell img{height:132px}.case-open-image{max-height:300px}.site-dialog-card{padding:24px 18px}.site-dialog-actions{flex-direction:column-reverse}.site-dialog-actions .btn{width:100%}}
/* v3.9.2 ajustes de cajas, insignia y anuncio */
.season-elo-badge{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;padding:4px 9px!important}.season-elo-badge small,.season-elo-badge strong{display:block!important;width:100%!important;text-align:center!important;margin:0!important;transform:none!important}.season-elo-badge small{line-height:1!important}.season-elo-badge strong{line-height:.95!important}.case-admin-grid{display:grid;gap:10px;margin:14px 0}.case-admin-row{display:grid;grid-template-columns:90px 1fr 1fr;gap:12px;align-items:end;padding:12px;border:1px solid var(--line);background:#0a0c11}.case-admin-row b{color:var(--gold);align-self:center}.case-admin-row label{margin:0}.floating-ad{pointer-events:auto!important;isolation:isolate!important}.floating-ad img{background:transparent!important;object-fit:contain!important}@media(max-width:760px){.case-admin-row{grid-template-columns:1fr}.floating-ad{left:8px!important;bottom:70px!important}}
/* =====================================================================
v6 — barra fija opaca, premios del mes, galería, temporada, likes y
chat de ganadores.
===================================================================== */
/* --- 1. La barra superior de la tienda deja de ser transparente ------- */
.store-header{
position:sticky;top:0;z-index:60;
background:#0A0D14;
background:linear-gradient(180deg,#0C1019 0%,#080B12 100%);
border-bottom:1px solid rgba(255,255,255,.09);
box-shadow:0 14px 40px rgba(0,0,0,.55);
display:flex;align-items:center;justify-content:space-between;gap:16px
}
.store-header::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:linear-gradient(90deg,transparent,var(--gold),var(--ice),transparent);opacity:.45
}
/* El título gigante ya no puede pasar por encima de la barra. */
.store-page .store-main{position:relative;z-index:1}
.store-hero h1{position:relative;z-index:0}
/* --- 3. Premios del mes en la portada --------------------------------- */
.monthly-prizes{padding:56px 4vw 20px}
.monthly-prizes .mp-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;margin-bottom:26px}
.monthly-prizes h2{font:400 clamp(38px,5.4vw,68px)/.95 var(--display);letter-spacing:.5px;margin:6px 0 10px;color:var(--text)}
.monthly-prizes .mp-kicker{font:700 11px/1 var(--mono);letter-spacing:.32em;color:var(--gold)}
.monthly-prizes .mp-lead{color:var(--muted);max-width:760px;font-size:16px;margin:0}
.mp-more{background:none;border:0;color:var(--gold);font:700 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:10px 0;border-bottom:1px solid var(--gold-dk)}
.mp-more:hover{color:var(--gold-lt)}
.mp-track{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 20px;scroll-snap-type:x mandatory}
.mp-track::-webkit-scrollbar{height:8px}
.mp-track::-webkit-scrollbar-thumb{background:rgba(224,177,82,.35);border-radius:8px}
.mp-card{flex:0 0 280px;scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);position:relative;overflow:hidden}
.mp-card::before{content:"";position:absolute;inset:0;border-top:2px solid var(--gold);opacity:.75}
.mp-card figure{margin:0;aspect-ratio:16/10;background:#0B0E14;overflow:hidden}
.mp-card figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.mp-card:hover figure img{transform:scale(1.05)}
.mp-card .mp-body{padding:16px 18px 20px}
.mp-card .mp-pos{font:700 10px/1 var(--mono);letter-spacing:.28em;color:var(--muted-2)}
.mp-card h3{font:400 26px/1.05 var(--display);margin:8px 0 6px}
.mp-card p{color:var(--muted);font-size:14px;margin:0 0 12px;min-height:20px}
.mp-card .mp-value{display:inline-flex;align-items:baseline;gap:7px;color:var(--gold);font:700 22px/1 var(--body)}
.mp-card .mp-value small{font:700 11px/1 var(--mono);letter-spacing:.2em;color:var(--muted)}
.mp-empty{color:var(--muted);border:1px dashed var(--line);padding:26px;text-align:center}
.mp-guide{white-space:pre-wrap;color:var(--muted);font-size:15px;line-height:1.65}
.mp-guide strong{color:var(--text)}
/* --- 4/14. Accesos destacados de Tienda, Temporada y Galería ---------- */
.nav .nav-store,.nav .nav-season,.nav .nav-gallery{
color:#12151C!important;background:linear-gradient(135deg,var(--gold-lt),var(--gold));
padding:8px 14px;font-weight:700;letter-spacing:.08em;border-radius:2px
}
.nav .nav-season{background:linear-gradient(135deg,#BFEEFF,var(--ice));color:#0A1620!important}
.nav .nav-gallery{background:linear-gradient(135deg,#E6E8EE,#9BA3B4);color:#12151C!important}
.nav .nav-store:hover,.nav .nav-season:hover,.nav .nav-gallery:hover{filter:brightness(1.12)}
/* --- Páginas independientes (temporada / galería / chat) -------------- */
.sub-page{min-height:100vh;background:radial-gradient(circle at 50% 0,#1b203e 0,#080b12 58%);color:var(--text)}
.sub-header{
position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:16px 4vw;background:linear-gradient(180deg,#0C1019 0%,#080B12 100%);
border-bottom:1px solid rgba(255,255,255,.09);box-shadow:0 14px 40px rgba(0,0,0,.55)
}
.sub-main{max-width:1240px;margin:auto;padding:36px 24px 90px}
.sub-hero{text-align:center;padding:26px 0 40px}
.sub-hero small{color:var(--gold);letter-spacing:.3em;font:700 11px/1 var(--mono)}
.sub-hero h1{font:400 clamp(52px,9vw,120px)/.9 var(--display);margin:8px 0}
.sub-hero p{color:var(--muted);font-size:17px;max-width:720px;margin:0 auto}
/* Temporada */
.season-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:26px}
.season-summary div{background:var(--panel);border:1px solid var(--line);padding:18px}
.season-summary strong{display:block;font:400 30px/1 var(--display);color:var(--gold)}
.season-summary span{color:var(--muted);font:700 10px/1 var(--mono);letter-spacing:.22em}
.season-table{background:var(--panel);border:1px solid var(--line)}
.season-row{display:grid;grid-template-columns:64px 56px 1fr 110px 130px 90px;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.season-row:last-child{border-bottom:0}
.season-row.head{color:var(--muted);font:700 10px/1 var(--mono);letter-spacing:.22em;background:rgba(255,255,255,.02)}
.season-row .pos{font:400 26px/1 var(--display);color:var(--muted)}
.season-row.top1 .pos{color:var(--gold)}.season-row.top2 .pos{color:#D6DCE6}
.season-row.top3 .pos{color:#C98A43}
.season-row img,.season-row .ava{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--panel-3);display:grid;place-items:center;font:700 14px/1 var(--body)}
.season-row .who b{display:block}
.season-row .who small{color:var(--muted)}
.season-lvl{display:flex;flex-direction:column;gap:5px}
.season-lvl b{font:700 15px/1 var(--body);color:var(--ice)}
.season-lvl i{display:block;height:4px;background:var(--panel-3);position:relative}
.season-lvl i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:linear-gradient(90deg,var(--gold),var(--ice))}
@media(max-width:860px){
.season-row{grid-template-columns:44px 44px 1fr 80px;gap:10px;padding:12px}
.season-row .col-xp,.season-row .col-likes{display:none}
}
/* Galería */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.gallery-item{background:var(--panel);border:1px solid var(--line);overflow:hidden;cursor:zoom-in}
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s ease}
.gallery-item:hover img{transform:scale(1.06)}
.gallery-item .cap{padding:12px 14px}
.gallery-item .cap b{display:block;font:400 20px/1.1 var(--display)}
.gallery-item .cap small{color:var(--muted)}
.gallery-viewer{position:fixed;inset:0;background:rgba(4,6,10,.94);display:grid;place-items:center;z-index:200;padding:24px}
.gallery-viewer img{max-width:min(1100px,94vw);max-height:86vh;object-fit:contain}
.gallery-viewer button{position:absolute;top:20px;right:24px;background:none;border:0;color:#fff;font-size:34px;cursor:pointer}
/* --- 11. Likes entre jugadores ---------------------------------------- */
.like-btn{display:inline-flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:9px 16px;cursor:pointer;font:700 13px/1 var(--body);letter-spacing:.06em;transition:.2s}
.like-btn:hover{border-color:var(--gold)}
.like-btn.on{background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:#12151C;border-color:transparent}
.like-btn i{font-style:normal;font-size:15px}
.like-count{color:var(--muted);font:700 12px/1 var(--mono);letter-spacing:.1em}
.player-likes{display:inline-flex;align-items:center;gap:5px;color:var(--gold);font:700 12px/1 var(--mono)}
/* --- 12. Pantalla de ganador ------------------------------------------ */
.win-screen{border:1px solid var(--gold);background:linear-gradient(160deg,rgba(224,177,82,.14),rgba(8,9,12,.9));padding:40px 28px;text-align:center;margin-bottom:20px}
.win-screen h2{font:400 clamp(38px,6vw,72px)/.95 var(--display);color:var(--gold);margin:0 0 12px}
.win-screen p{color:var(--text);font-size:17px;max-width:620px;margin:0 auto 10px}
.win-screen .win-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.lose-screen{border:1px solid var(--line);background:var(--panel);padding:30px;text-align:center;margin-bottom:20px}
.lose-screen h2{font:400 34px/1 var(--display);margin:0 0 10px}
/* --- 13. Chat de premios ---------------------------------------------- */
.chat-shell{max-width:820px;margin:auto}
.chat-log{background:var(--panel);border:1px solid var(--line);padding:18px;height:60vh;min-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.chat-msg{max-width:78%;padding:11px 14px;border:1px solid var(--line);background:var(--panel-2)}
.chat-msg.mine{align-self:flex-end;background:linear-gradient(135deg,rgba(224,177,82,.22),rgba(224,177,82,.08));border-color:rgba(224,177,82,.4)}
.chat-msg.admin{border-left:3px solid var(--gold)}
.chat-msg b{display:block;font:700 12px/1 var(--mono);letter-spacing:.14em;color:var(--gold);margin-bottom:6px}
.chat-msg small{display:block;color:var(--muted-2);font-size:11px;margin-top:6px}
.chat-form{display:flex;gap:10px;margin-top:14px}
.chat-form input{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--text);padding:13px 14px;font:400 15px var(--body)}
.chat-closed{border:1px solid var(--line);background:var(--panel);padding:28px;text-align:center;color:var(--muted)}
.admin-chat-list{display:grid;gap:14px}
.admin-chat-log{max-height:280px;overflow-y:auto;background:#0B0E14;border:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:8px;margin:12px 0}
.admin-chat-link{font:700 12px/1.5 var(--mono);color:var(--ice);word-break:break-all}
/* --- 10. Marcador en vivo: estado arriba, mapa abajo ------------------ */
.scoreboard .vs .state-live{display:block;margin-bottom:6px}
.scoreboard .vs .selected-map{display:block;margin-top:2px}
.coin-reset{display:block;margin-top:6px;color:var(--muted);font:400 12px/1.3 var(--body);font-style:normal}
.site-dialog-actions .hidden{display:none!important}
/* =====================================================================
v16 — ADAPTACIÓN DE PANTALLA
Todo tiene que encajar al 100 % de zoom, en cualquier resolución y
también en el teléfono. Este bloque va último para poder corregir
medidas de bloques anteriores.
===================================================================== */
/* ---------- 1. Cabecera pública que encaja siempre ------------------- */
.topbar{
gap:clamp(10px,1.6vw,22px);
padding:0 clamp(14px,3vw,48px);
height:clamp(64px,5.2vw,78px)
}
.brand{flex:0 0 auto;min-width:0}
/* "LA BALDUNETA" nunca se parte en dos líneas */
.brand b{white-space:nowrap;font-size:clamp(16px,1.35vw,22px)}
.brand small{white-space:nowrap;font-size:clamp(7.5px,.6vw,8.5px)}
.brand-mark{width:clamp(32px,2.6vw,40px);height:clamp(32px,2.6vw,40px);font-size:clamp(15px,1.25vw,19px);flex:0 0 auto}
.nav{min-width:0;flex:0 1 auto;padding:5px;gap:2px}
.nav a{
padding:9px clamp(8px,.75vw,15px);
font-size:clamp(9.5px,.72vw,11px);
letter-spacing:clamp(.06em,.1vw,.16em);
white-space:nowrap
}
.nav a::after{left:clamp(8px,.75vw,15px);right:clamp(8px,.75vw,15px)}
.nav .nav-store,.nav .nav-season,.nav .nav-gallery{padding:8px clamp(9px,.8vw,14px)}
.actions{flex:0 0 auto;gap:clamp(6px,.6vw,9px)}
.actions .btn.small{padding:9px clamp(10px,.9vw,16px);font-size:clamp(10px,.75vw,12px);white-space:nowrap}
.icon-btn{width:clamp(34px,2.6vw,40px);height:clamp(34px,2.6vw,40px);flex:0 0 auto}
.profile-btn{white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
/* Botón de menú: aparece cuando la barra ya no entra en una línea */
.burger{
display:none;width:42px;height:42px;place-items:center;gap:5px;flex-direction:column;
border:1px solid var(--line);background:transparent;border-radius:var(--r);cursor:pointer;flex:0 0 auto
}
.burger i{display:block;width:18px;height:2px;background:var(--gold);transition:.25s}
.burger.open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1240px){
.burger{display:flex}
.topbar{position:relative;flex-wrap:nowrap}
.nav{
display:none;position:absolute;left:0;right:0;top:100%;z-index:60;
flex-direction:column;gap:2px;padding:10px;clip-path:none;
background:#0A0D14;border:1px solid var(--line);border-top:0;
box-shadow:0 24px 60px rgba(0,0,0,.6);max-height:70vh;overflow:auto
}
.nav.open{display:flex}
.nav a{padding:13px 16px;font-size:12px;letter-spacing:.14em;text-align:left}
.nav a::after{display:none}
.nav .nav-store,.nav .nav-season,.nav .nav-gallery{text-align:center}
}
@media(max-width:620px){
.actions .btn.small{padding:8px 10px;font-size:10.5px}
.profile-btn{max-width:120px}
}
/* ---------- 2 y 5. Panel administrador a escala real ----------------- */
/* La cabecera del panel es opaca: antes se veía el menú pasando por detrás */
.admin-body .chrome{background:#0A0D14;backdrop-filter:none;z-index:50}
.admin-body .topbar{height:clamp(58px,4.6vw,68px)}
.admin-shell{
grid-template-columns:clamp(178px,14vw,230px) minmax(0,1fr);
min-height:calc(100vh - 68px)
}
.admin-nav{padding:16px 9px;gap:2px;position:sticky;top:68px;align-self:start;max-height:calc(100vh - 68px);overflow-y:auto;background:#0B0E15;z-index:20}
.admin-nav button{padding:9px 11px;font-size:9.5px;letter-spacing:.1em;line-height:1.35}
.admin-main{padding:clamp(16px,1.8vw,30px);min-width:0}
.admin-main h1{font-size:clamp(26px,2.4vw,36px)}
.admin-main .lead{font-size:9.5px;margin-bottom:18px}
/* Cajas, formularios y tablas que no se desbordan */
.admin-main .box{padding:clamp(14px,1.2vw,18px)}
.admin-main .box h3{font-size:clamp(15px,1.25vw,18px)}
.admin-main .split{grid-template-columns:minmax(0,clamp(260px,24vw,330px)) minmax(0,1fr);gap:14px}
.admin-main .cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.admin-main .card{padding:14px}
.admin-main .card strong{font-size:clamp(22px,2vw,28px)}
.admin-main table{font-size:12px}
.admin-main th,.admin-main td{padding:8px 6px}
.admin-main .box>div[style*="overflow"],.admin-main .table-wrap{overflow-x:auto}
.admin-main input,.admin-main select,.admin-main textarea{max-width:100%;font-size:13px;padding:9px 10px}
.admin-main label{font-size:9.5px}
/* Los botones no se parten en varias líneas ni quedan flaquitos */
.admin-main .btn{white-space:nowrap}
.admin-main .btn.small{padding:8px 12px;font-size:11px;line-height:1.1}
.admin-main .mini{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* Fila de partida de la llave: etiqueta, configuración, equipos y botones,
cada cosa en su renglón en vez de aplastarse en columnas finitas */
.admin-match{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px 14px;padding:14px
}
.admin-match .rn{grid-column:1/-1}
.admin-match .match-config-grid{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(165px,1fr))!important}
.admin-match .team{grid-template-columns:minmax(0,1fr) 72px}
.admin-match .mini{grid-column:1/-1;padding-top:4px;border-top:1px solid var(--line-soft)}
.lobby-admin-live{display:grid;grid-template-columns:90px minmax(0,1fr) 90px;gap:10px;align-items:center;margin:12px 0}
.lobby-admin-live b{text-align:center;font-size:13px}
@media(max-width:1000px){
.admin-nav{position:sticky;top:0;flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden}
.admin-main .split{grid-template-columns:1fr}
.admin-match{grid-template-columns:1fr}
.lobby-admin-live{grid-template-columns:1fr}
}
/* ---------- 3. Buscador de usuarios (ganadores de torneos) ----------- */
.user-picker{border:1px solid var(--line);background:#0B0E15;max-height:290px;overflow-y:auto;padding:6px}
.user-picker label{
display:flex;align-items:center;gap:10px;padding:9px 10px;cursor:pointer;
text-transform:none;letter-spacing:0;font-size:13px;color:var(--text);border-radius:2px
}
.user-picker label:hover{background:rgba(255,255,255,.05)}
.user-picker input[type=checkbox]{width:auto;margin:0;flex:0 0 auto}
.user-picker .u-name{font-weight:600}
.user-picker .u-tag{color:var(--muted);font-family:var(--mono);font-size:11px}
.user-picker .u-empty{padding:16px;color:var(--muted);text-align:center;font-size:13px}
.picker-count{color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.1em;margin:8px 0 0}
/* ---------- Ajustes generales de escala al 100 % --------------------- */
.section .head h2{font-size:clamp(34px,4.4vw,62px)}
.monthly-prizes{padding:clamp(34px,4vw,56px) clamp(14px,3vw,48px) 20px}
.statband-in{gap:10px}
.sub-main{padding:clamp(20px,2.4vw,36px) clamp(14px,2.4vw,24px) 80px}
.sub-header{padding:14px clamp(14px,3vw,48px)}
.sub-header .mini{display:flex;gap:8px;flex-wrap:wrap}
.store-header{padding:14px clamp(14px,3vw,48px)}
.store-main{padding:clamp(22px,2.6vw,40px) clamp(14px,2vw,24px) 80px}
.store-hero h1{font-size:clamp(48px,8vw,120px)}
/* =====================================================================
v17 — encuadre de "Los premios del mes", panel sin recortes y
legibilidad de los botones destacados del menú.
===================================================================== */
/* ---------- 1. Premios del mes alineado con el resto de la home ------ */
.monthly-prizes{
width:min(1320px,94%);
margin:0 auto;
padding:clamp(38px,4.6vw,64px) 0 clamp(16px,2vw,28px);
scroll-margin-top:120px
}
.monthly-prizes .mp-head{align-items:flex-end;gap:20px}
.monthly-prizes .mp-lead{max-width:62ch}
.mp-more{align-self:flex-end;flex:0 0 auto}
@media(max-width:760px){
.monthly-prizes .mp-head{flex-direction:column;align-items:flex-start;gap:12px}
.mp-more{align-self:flex-start}
.mp-card{flex-basis:min(260px,78vw)}
}
/* ---------- 2. Panel: nada queda cortado a la derecha ---------------- */
/* Las tablas anchas (Servidores, Usuarios, Órdenes…) scrollean dentro de
su caja en vez de empujar la página y comerse los botones del borde. */
.admin-main{overflow-x:hidden}
.admin-main .box{overflow-x:auto;overflow-y:visible}
.admin-main .box>table,.admin-main .box>div>table{min-width:max-content}
/* Los botones de cada fila van en una sola línea, no apilados */
.admin-main td .mini{flex-wrap:nowrap;white-space:nowrap}
.admin-main td .btn.small{padding:7px 11px;font-size:10.5px}
/* Campos de tabla con un ancho razonable para que la fila no se estire */
.admin-main td input[type=text],.admin-main td input:not([type]){min-width:110px}
.admin-main td input[type=number]{width:78px;min-width:0}
.admin-main td select{min-width:104px}
.admin-main th,.admin-main td{white-space:nowrap}
.admin-main td small,.admin-main td p{white-space:normal}
/* ---------- 3. Botones destacados del menú legibles al pasar --------- */
/* Antes el hover general los oscurecía y el texto se perdía. */
.nav a.nav-store:hover,.nav a.nav-store:focus-visible,
.nav a.nav-season:hover,.nav a.nav-season:focus-visible,
.nav a.nav-gallery:hover,.nav a.nav-gallery:focus-visible{
background:linear-gradient(135deg,#FFF3D0,#F0C463);
color:#0B0D12!important;
filter:none;
box-shadow:0 0 0 1px rgba(255,255,255,.25),0 8px 24px rgba(0,0,0,.35)
}
.nav a.nav-season:hover,.nav a.nav-season:focus-visible{background:linear-gradient(135deg,#D9F6FF,#7FE0FA)}
.nav a.nav-gallery:hover,.nav a.nav-gallery:focus-visible{background:linear-gradient(135deg,#FFFFFF,#C3CAD8)}
.nav a.nav-store::after,.nav a.nav-season::after,.nav a.nav-gallery::after{display:none}
/* ---------- 4. Bloque de reinicios en Configuración ------------------ */
.reset-zone{border:1px solid rgba(255,90,90,.35);background:rgba(255,90,90,.05);padding:16px;margin-top:18px}
.reset-zone h3{color:#FF9A9A;margin-bottom:6px}
.reset-zone .hint{margin:0 0 14px}
.reset-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line-soft)}
.reset-row:first-of-type{border-top:0}
.reset-row span{flex:1 1 260px;color:var(--muted);font-size:12.5px;line-height:1.5}
/* ---------- v17b. La celda de acciones rompía la tabla ---------------
Varias tablas del panel usan | , y .mini tiene
display:inline-flex. Un | con display:inline-flex se sale del
armado de la tabla: por eso los botones de Guardar / Ocultar / Borrar
aparecían apilados y cortados fuera del recuadro, a la derecha.
Se devuelve la celda a table-cell y los botones van en línea. */
.admin-main td.mini,.admin-main th.mini{
display:table-cell;
white-space:nowrap;
vertical-align:middle
}
.admin-main td.mini>.btn{display:inline-flex;vertical-align:middle;margin:2px 5px 2px 0}
.admin-main td.mini>.btn:last-child{margin-right:0}
/* =====================================================================
v18 — Botones destacados del menú, imágenes cuadradas y avisos de
resolución debajo de cada campo de imagen.
===================================================================== */
/* ---------- 1. TIENDA · TEMPORADA · GALERÍA -------------------------- */
.nav a.nav-store,.nav a.nav-season,.nav a.nav-gallery{
--c1:#FBEBC0; --c2:#E0B152; --c3:#8A6320; --ink:#14100A;
position:relative;overflow:hidden;isolation:isolate;
display:inline-flex;align-items:center;gap:7px;
padding:9px 16px 9px 13px;
color:var(--ink)!important;
background:linear-gradient(160deg,var(--c1) 0%,var(--c2) 52%,var(--c3) 100%);
border:0;border-radius:0;
clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
font-family:var(--mono);font-weight:700;letter-spacing:.14em;
text-shadow:0 1px 0 rgba(255,255,255,.35);
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.22),0 6px 18px rgba(0,0,0,.35);
transition:transform .22s cubic-bezier(.2,.9,.3,1.2),box-shadow .22s,filter .22s
}
/* Punto de color a la izquierda, como una luz de estado */
.nav a.nav-store::before,.nav a.nav-season::before,.nav a.nav-gallery::before{
content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;
background:var(--ink);opacity:.55;box-shadow:0 0 0 2px rgba(255,255,255,.35)
}
/* Brillo que cruza el botón al pasar el cursor */
.nav a.nav-store::after,.nav a.nav-season::after,.nav a.nav-gallery::after{
content:"";position:absolute;inset:0;display:block;pointer-events:none;
background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);
transform:translateX(-120%);transition:transform .55s ease
}
.nav a.nav-season{--c1:#DFF7FF;--c2:#68D8F5;--c3:#1E6E8C;--ink:#06141C}
.nav a.nav-gallery{--c1:#FFFFFF;--c2:#C9D0DC;--c3:#727A88;--ink:#14171D}
.nav a.nav-store:hover,.nav a.nav-season:hover,.nav a.nav-gallery:hover,
.nav a.nav-store:focus-visible,.nav a.nav-season:focus-visible,.nav a.nav-gallery:focus-visible{
color:var(--ink)!important;
background:linear-gradient(160deg,var(--c1) 0%,var(--c2) 52%,var(--c3) 100%);
transform:translateY(-2px);
filter:saturate(1.12) brightness(1.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(0,0,0,.2),0 10px 26px rgba(0,0,0,.45)
}
.nav a.nav-store:hover::after,.nav a.nav-season:hover::after,.nav a.nav-gallery:hover::after{transform:translateX(120%)}
.nav a.nav-store:active,.nav a.nav-season:active,.nav a.nav-gallery:active{transform:translateY(0)}
/* En el menú desplegable van rectos y a lo ancho */
@media(max-width:1240px){
.nav a.nav-store,.nav a.nav-season,.nav a.nav-gallery{
clip-path:none;justify-content:center;padding:13px 16px;margin:3px 0
}
}
/* ---------- 5 y 6. Imágenes cuadradas y bien encuadradas ------------- */
/* Premios canjeables, productos y premios del mes: todas cuadradas y
recortadas al centro, así no importa el tamaño que suba el admin. */
.shop-card img,.product-card img{
/* height:auto es imprescindible: una regla anterior deja height:120px
y una altura explícita anula el aspect-ratio, por eso la tarjeta de
premios canjeables no quedaba cuadrada. */
width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center;
display:block;background:#0B0E14;border-radius:2px;margin-bottom:10px
}
.mp-card figure{aspect-ratio:1/1}
.mp-card figure img{width:100%;height:100%;object-fit:cover;object-position:center;background:#0B0E14}
/* Si la imagen no carga, se ve un recuadro prolijo en vez de rota */
.shop-card img,.product-card img,.mp-card figure img{color:transparent;font-size:0}
.admin-main .shop-card img{aspect-ratio:1/1;object-fit:cover}
/* ---------- Aviso de resolución debajo de cada campo de imagen ------- */
.img-hint{
margin:-6px 0 14px;padding:8px 11px;
border-left:2px solid var(--gold);
background:rgba(224,177,82,.07);
color:var(--muted);
font-family:var(--body);font-size:12px;line-height:1.5;
text-transform:none;letter-spacing:0
}
.img-hint b{color:var(--gold-lt);font-weight:700}
/* =====================================================================
v19 — Fondo del inicio, video de intro a pantalla completa, botones
del menú legibles y carga de imágenes de la tienda.
===================================================================== */
/* ---------- 1. La imagen del panel se ve detrás del hero ------------- */
/* Una regla anterior ponía background-image:none cuando el hero tenía
contenido; ahora la imagen elegida en el panel manda. */
.hero-bg{background-size:cover;background-position:center;background-repeat:no-repeat}
/* ---------- 2. Con video, el video es el fondo de la intro ----------- */
.cs-intro.has-video::before,
.cs-intro.has-video .intro-smoke,
.cs-intro.has-video .intro-sparks,
.cs-intro.has-video .intro-crosshair,
.cs-intro.has-video .intro-flash{display:none!important}
.cs-intro.has-video{background:#000}
.cs-intro.has-video .intro-video{filter:brightness(.72);z-index:0}
/* El texto sigue legible por encima del video */
.cs-intro.has-video .intro-content{z-index:5;position:relative}
.cs-intro.has-video .intro-content::before{
content:"";position:absolute;inset:-40px -60px;z-index:-1;
background:radial-gradient(ellipse at center,rgba(0,0,0,.62),transparent 72%)
}
/* ---------- 3. TIENDA · TEMPORADA · GALERÍA siempre legibles --------- */
/* Se fijan los colores sin depender de variables y se anula el hover
general del menú, que les metía un fondo oscuro encima. */
.nav a.nav-store,.nav a.nav-store:link,.nav a.nav-store:visited,
.nav a.nav-store:hover,.nav a.nav-store:focus,.nav a.nav-store:active{
background-image:linear-gradient(160deg,#FBEBC0 0%,#E0B152 52%,#8A6320 100%)!important;
background-color:#E0B152!important;color:#14100A!important
}
.nav a.nav-season,.nav a.nav-season:link,.nav a.nav-season:visited,
.nav a.nav-season:hover,.nav a.nav-season:focus,.nav a.nav-season:active{
background-image:linear-gradient(160deg,#DFF7FF 0%,#68D8F5 52%,#1E6E8C 100%)!important;
background-color:#68D8F5!important;color:#06141C!important
}
.nav a.nav-gallery,.nav a.nav-gallery:link,.nav a.nav-gallery:visited,
.nav a.nav-gallery:hover,.nav a.nav-gallery:focus,.nav a.nav-gallery:active{
background-image:linear-gradient(160deg,#FFFFFF 0%,#C9D0DC 52%,#727A88 100%)!important;
background-color:#C9D0DC!important;color:#14171D!important
}
/* La rayita inferior del menú no aplica a estos tres: su ::after es el brillo */
.nav a.nav-store::after,.nav a.nav-season::after,.nav a.nav-gallery::after{
background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%)!important;
left:0!important;right:0!important;top:0!important;bottom:0!important;height:auto!important
}
.nav a.nav-store:hover,.nav a.nav-season:hover,.nav a.nav-gallery:hover{filter:brightness(1.09) saturate(1.1)}
/* ---------- 4. Imágenes de la tienda que cargan bien ----------------- */
/* Mientras baja la imagen se ve un recuadro del mismo tamaño, así la
tarjeta no salta; si la imagen falla, queda el recuadro y no un ícono
de imagen rota. */
.shop-card img,.product-card img{background:#12151C}
.shop-card img.img-fail,.product-card img.img-fail{
visibility:hidden;position:absolute;width:0;height:0
}
.img-placeholder{
width:100%;aspect-ratio:1/1;margin-bottom:10px;border-radius:2px;
background:repeating-linear-gradient(45deg,#12151C,#12151C 10px,#161A22 10px,#161A22 20px)
}
.shop-card,.product-card{position:relative}
.shop-card img.img-fail+span::before,.product-card img.img-fail+h3::before{
content:"";display:block;width:100%;aspect-ratio:1/1;margin-bottom:10px;border-radius:2px;
background:repeating-linear-gradient(45deg,#12151C,#12151C 10px,#161A22 10px,#161A22 20px)
}
/* =====================================================================
v20 — Acceso a la transmisión desde el árbol del torneo.
===================================================================== */
/* El acceso aparece apenas el administrador prepara el servidor. Mientras
la partida no arrancó se muestra en tono neutro; cuando está en vivo,
en rojo y con el punto parpadeando. */
.match-watch-live{
display:flex;align-items:center;justify-content:center;gap:6px;
margin:8px 10px 2px;padding:8px 10px;
border:1px solid var(--live);border-radius:2px;
background:rgba(255,75,75,.12);color:#FFC9C9;
font:700 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
text-decoration:none;transition:.2s
}
.match-watch-live:hover{background:rgba(255,75,75,.24);color:#fff}
.match-watch-live.pending{
border-color:rgba(224,177,82,.55);background:rgba(224,177,82,.1);color:var(--gold-lt)
}
.match-watch-live.pending:hover{background:rgba(224,177,82,.2);color:#fff}
/* v23 — Ranking Deathmatch en tarjeta de servidor */
.dm-ranking-btn{width:100%;justify-content:center;gap:8px;margin-top:2px}
.dm-ranking-btn span{font-family:var(--mono);opacity:.72}
.dm-ranking-modal{display:grid;gap:14px}
.dm-ranking-modal h2{margin:0}
.dm-top-streak{display:grid;gap:5px;padding:14px 16px;border:1px solid rgba(124,255,0,.28);background:rgba(124,255,0,.06)}
.dm-top-streak span{font:700 11px/1 var(--mono);letter-spacing:.12em;color:#7cff00}
.dm-top-streak b{font-size:16px}
.dm-rank-list{display:grid;gap:7px}
.dm-rank-row{display:grid;grid-template-columns:42px minmax(0,1fr) 90px 90px;align-items:center;gap:10px;padding:11px 12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.dm-pos{font-family:var(--mono);color:#7cff00}
.dm-player{display:flex;align-items:center;gap:8px;min-width:0}
.dm-player img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.dm-player b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-player i{font-style:normal;color:#7cff00}
.dm-rank-row>span:not(.dm-player){display:grid;gap:2px;text-align:right}
.dm-rank-row small{font:600 9px/1 var(--mono);letter-spacing:.08em;color:var(--muted)}
.dm-rank-row>span>b{font-family:var(--mono)}
@media(max-width:560px){.dm-rank-row{grid-template-columns:34px minmax(0,1fr) 66px 66px;gap:7px;padding:10px 8px}.dm-player img{display:none}.dm-rank-row small{font-size:8px}}
|