:root {
    --deep: #0d1116;
    --canvas: #161d27;
    --panel: #212730;
    --panel-soft: #252f3d;
    --terminal: #080a0d;
    --line: rgba(117, 125, 137, .34);
    --line-strong: rgba(117, 125, 137, .58);
    --text: #ebe7e4;
    --copy: rgba(235, 231, 228, .78);
    --muted: #9fa4ab;
    --blue: #6a9fcc;
    --terracotta: #b86b52;
    --sun: #e1b06e;
    --sage: #a3a473;
    --green: #5db87a;
    --serif: Constantia, Charter, 'Bitstream Charter', 'Iowan Old Style', Cambria, Georgia, serif;
    --mono: 'SFMono-Regular', 'Cascadia Code', Consolas, 'Liberation Mono', monospace;
    --max: 1500px;
}

* { box-sizing: border-box; }
html { background: var(--deep); scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
    min-height: 100vh;
    margin: 0;
    overflow-x: clip;
    background: var(--canvas);
    color: var(--text);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
body::before {
    content: '';
    position: fixed;
    inset: -5rem;
    z-index: 0;
    pointer-events: none;
    background-color: var(--canvas);
    background-image:
        linear-gradient(rgba(106,159,204,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(106,159,204,.018) 1px, transparent 1px),
        linear-gradient(rgba(106,159,204,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(106,159,204,.05) 1px, transparent 1px);
    background-size: 4px 4px, 4px 4px, 20px 20px, 20px 20px;
    mask-image: linear-gradient(to bottom, #000 0 55%, transparent 92%);
}
main, footer { position: relative; z-index: 1; }
a { color: inherit; text-decoration-color: rgba(106,159,204,.35); text-underline-offset: .16em; }
a:hover, a:focus-visible { color: var(--text); text-decoration-color: var(--blue); }
button { font: inherit; }
::selection { background: rgba(106,159,204,.28); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.skip-link { position: fixed; top: -80px; left: 1rem; z-index: 100; padding: .6rem .9rem; background: var(--blue); color: var(--deep); font: .72rem var(--mono); }
.skip-link:focus { top: 1rem; }

.site-header { position: sticky; top: 0; z-index: 50; padding: .8rem 1.2rem 0; }
.nav-shell {
    max-width: var(--max);
    min-height: 60px;
    margin: auto;
    padding: .65rem .9rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(180deg, rgba(33,39,48,.97), rgba(13,17,22,.93));
    border: 1px solid var(--line-strong);
    border-top-color: rgba(213,216,219,.28);
}
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--text); font: 700 .78rem var(--mono); text-decoration: none; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; background: var(--deep); border: 1px solid var(--line-strong); color: var(--terracotta); font-size: .85rem; }
.nav-links { display: flex; gap: clamp(.7rem, 1.6vw, 1.4rem); margin-right: auto; }
.nav-links a { color: rgba(213,216,219,.72); font: .64rem var(--mono); letter-spacing: .075em; text-decoration: none; text-transform: uppercase; }
.nav-links a:hover { color: var(--text); }
.nav-burger { display: none; width: 40px; height: 40px; padding: 0; place-items: center; align-content: center; gap: 4px; border: 1px solid var(--line); background: rgba(255,255,255,.025); cursor: pointer; }
.nav-burger i { display: block; width: 16px; height: 2px; background: rgba(213,216,219,.85); }
.nav-shell.nav-open .nav-links { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; flex-direction: column; padding: .8rem 1rem; background: var(--panel); border: 1px solid var(--line-strong); }
.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: .35rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(93,184,122,.11); animation: pulse 2.2s ease-in-out infinite; }
.live-dot.offline { background: #e8704f; animation: none; }
@keyframes pulse { 50% { opacity: .38; } }

.admin-status { display: inline-flex; align-items: center; margin-left: auto; }
.admin-status-text { color: var(--muted); font: .6rem var(--mono); letter-spacing: .05em; }
.copy-button { min-height: 32px; padding: .35rem .55rem; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--muted); cursor: pointer; font: .55rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.copy-button:hover, .copy-button:focus-visible { border-color: rgba(106,159,204,.7); color: var(--text); background: rgba(106,159,204,.08); }
.copy-button.on { border-color: var(--green); color: var(--green); }
.nav-burger { margin-left: auto; }
.nav-shell.nav-open .nav-burger { margin-left: 0; }

.admin-main { width: min(100%, var(--max)); margin: 0 auto; padding: clamp(1.2rem, 3vw, 2.4rem) 1.2rem 3rem; }
.admin-hero { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-label { display: inline-flex; margin: 0 0 1.1rem; padding: .34rem .52rem .38rem; background: rgba(33,39,48,.9); border: 1px solid var(--line); color: rgba(213,216,219,.82); font: .65rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.admin-hero h1, .admin-section h2 { margin: 0; font-weight: 450; letter-spacing: -.03em; line-height: 1.05; }
.admin-hero h1 { font-size: clamp(2.4rem, 4.5vw, 4rem); }
.admin-hero h1 em { color: var(--blue); font-style: normal; }
.admin-section { margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.section-intro { max-width: 820px; }
.section-intro h2 { font-size: clamp(1.9rem, 3.2vw, 3rem); }
.section-intro h2 em { color: var(--blue); font-style: normal; }
.section-intro.horizontal { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.section-intro.horizontal p { max-width: 420px; margin: 0 0 .5rem; color: var(--muted); font-size: .86rem; }

.admin-toolbar { margin: 1.4rem 0 1.2rem; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.window-select { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font: .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.window-btn { min-height: 32px; padding: .3rem .6rem; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--muted); cursor: pointer; font: .62rem var(--mono); letter-spacing: .05em; }
.window-btn:hover, .window-btn:focus-visible { border-color: var(--blue); color: var(--text); }
.window-btn.on { border-color: var(--blue); background: rgba(106,159,204,.14); color: var(--text); }
.admin-updated { color: var(--muted); font: .6rem var(--mono); letter-spacing: .05em; }
.admin-updated.stale { color: var(--terracotta); }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stat-card { min-height: 108px; padding: .9rem 1rem; display: flex; flex-direction: column; justify-content: space-between; background: rgba(255,255,255,.012); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-card strong { font: 400 clamp(1.7rem, 3.2vw, 2.6rem)/1.1 var(--serif); }
.stat-card span { color: var(--muted); font: .58rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.stat-card .live-dot { margin-right: .3rem; }
.window-grid { margin-top: .9rem; }
.window-card strong { color: var(--blue); }

.admin-section .data-panel { margin-top: 1.2rem; }
.data-panel { overflow: hidden; background: rgba(13,17,22,.32); border: 1px solid var(--line); }
.data-header { min-height: 52px; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.data-header h3, .data-header > span { margin: 0; font: .58rem var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.data-body { max-height: 520px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.empty-state { padding: 1rem; color: var(--muted); font: .7rem var(--mono); }

.game-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(210px, 1.8fr) minmax(90px, .7fr) minmax(110px, .8fr) auto; gap: 1rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.game-row:last-child { border-bottom: 0; }
.game-id { color: var(--text); font: .68rem var(--mono); text-decoration: none; }
.game-id:hover { color: var(--blue); }
.game-players { min-width: 0; color: var(--copy); font-size: .78rem; }
.player-chip { display: inline-flex; align-items: baseline; gap: .3rem; margin-right: .8rem; white-space: nowrap; }
.player-chip::before { content: '◆'; color: var(--blue); font-size: .42rem; }
.player-chip .ptype { color: var(--muted); font: .52rem var(--mono); text-transform: uppercase; }
.player-chip .stack { color: var(--muted); font: .55rem var(--mono); }
.game-meta { color: var(--muted); font: .58rem var(--mono); line-height: 1.5; }
.status-badge { display: inline-block; padding: .18rem .45rem; border: 1px solid currentColor; font: .55rem var(--mono); text-transform: uppercase; }
.status-active { color: var(--green); }
.status-finished { color: var(--muted); }
.status-waiting { color: var(--sun); }
.watch-link { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .6rem; border: 1px solid var(--line-strong); color: var(--text); font: .58rem var(--mono); letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
.watch-link:hover { border-color: var(--blue); color: var(--blue); }
.watch-link.live { border-color: var(--green); color: var(--green); }
.watch-link.live:hover { color: var(--text); background: rgba(93,184,122,.12); }

.player-row { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(90px, .5fr) minmax(150px, .9fr) minmax(170px, 1fr) auto; gap: 1rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.player-row:last-child { border-bottom: 0; }
.player-name { min-width: 0; }
.player-name .alias { display: block; overflow: hidden; color: var(--text); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.player-name .plate { color: var(--muted); font: .56rem var(--mono); }
.player-status { font: .56rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.player-status.jugando { color: var(--green); }
.player-status.en-cola { color: var(--sun); }
.player-status.conectado { color: var(--blue); }
.player-stats { color: var(--copy); font-size: .76rem; }
.player-stats b { color: var(--text); font-weight: 500; }
.player-last { min-width: 0; color: var(--muted); font: .56rem var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.queue-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; padding: .55rem 1rem; border-bottom: 1px solid var(--line); color: var(--copy); font-size: .78rem; }
.queue-row:last-child { border-bottom: 0; }
.queue-row .who { color: var(--text); }
.queue-row .mono { color: var(--muted); font: .56rem var(--mono); }

footer { max-width: var(--max); margin: 0 auto; padding: 2rem 1.2rem 3rem; }
.footer-brand { margin-bottom: .8rem; }
footer p { margin: 0 0 .8rem; color: var(--muted); font-size: .78rem; }
footer div { display: flex; gap: 1.2rem; }
footer div a { color: var(--muted); font: .6rem var(--mono); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; }
footer div a:hover { color: var(--text); }

@media (max-width: 980px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .game-row { grid-template-columns: 1fr auto; grid-template-areas: 'game watch' 'players watch' 'meta watch'; row-gap: .35rem; }
    .game-row .game-game { grid-area: game; }
    .game-row .game-players { grid-area: players; }
    .game-row .game-meta { grid-area: meta; }
    .game-row .game-watch { grid-area: watch; align-self: center; }
    .player-row { grid-template-columns: 1fr auto; grid-template-areas: 'name watch' 'status watch' 'stats watch' 'last watch'; row-gap: .3rem; }
    .player-row .player-name { grid-area: name; }
    .player-row .player-status { grid-area: status; }
    .player-row .player-stats { grid-area: stats; }
    .player-row .player-last { grid-area: last; }
    .player-row .player-watch { grid-area: watch; align-self: center; }
}
@media (max-width: 700px) {
    .nav-links { display: none; }
    .nav-burger { display: grid; }
    .nav-shell.nav-open .nav-links { display: flex; }
    .admin-status-text { display: none; }
    .section-intro.horizontal { display: block; }
    .section-intro.horizontal p { margin-top: .6rem; }
    .game-row, .player-row { padding-inline: .7rem; gap: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .live-dot { animation: none; }
}