/* =====================================================================
   VISIONARY VAULT — neon heist theme
   ===================================================================== */

:root {
    color-scheme: dark; /* native controls (dropdowns, file picker, scrollbars) in dark mode */
    --bg: #04060d;
    --bg-2: #0a0f1f;
    --panel: rgba(13, 20, 40, .72);
    --panel-solid: #0d1428;
    --line: rgba(80, 200, 255, .18);
    --text: #dbe7ff;
    --muted: #7d8bb0;
    --cyan: #22e7ff;
    --cyan-dim: rgba(34, 231, 255, .25);
    --gold: #ffc93c;
    --orange: #ff8a1f;
    --gold-dim: rgba(255, 201, 60, .25);
    --red: #ff3b5c;
    --green: #2bff88;
    --violet: #a26bff;
    --radius: 18px;
    --font-display: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'Share Tech Mono', 'Consolas', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 18px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

a { color: var(--cyan); text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

/* ---------- animated background ---------- */

.bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.bg-fx::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 15% 10%, rgba(162, 107, 255, .18), transparent 70%),
        radial-gradient(ellipse 60% 50% at 85% 20%, rgba(34, 231, 255, .14), transparent 70%),
        radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255, 201, 60, .10), transparent 70%);
}

.bg-grid {
    position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%;
    background-image:
        linear-gradient(var(--cyan-dim) 1px, transparent 1px),
        linear-gradient(90deg, var(--cyan-dim) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(500px) rotateX(62deg);
    transform-origin: top;
    mask-image: linear-gradient(to bottom, transparent, #000 40%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%);
    animation: grid-move 4s linear infinite;
    opacity: .45;
}

@keyframes grid-move { to { background-position: 0 60px, 0 0; } }

.bg-scan {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
}

body.alarm .bg-fx::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at center, transparent 40%, rgba(255, 59, 92, .35));
    animation: alarm 1s ease-in-out infinite;
}

@keyframes alarm { 50% { opacity: .2; } }

/* ---------- top bar ---------- */

.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 20px;
    padding: 14px 28px;
    background: linear-gradient(to bottom, rgba(4, 6, 13, .95), rgba(4, 6, 13, .7));
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
}

.brand {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-display); font-weight: 700; letter-spacing: .18em;
    color: var(--text); font-size: 18px; white-space: nowrap;
}

.brand b { color: var(--gold); text-shadow: 0 0 18px var(--gold-dim); }

/* event branding: the B2OF logo is dark-on-light, so it sits on a white badge */
.brand-logo {
    display: flex; align-items: center; height: 44px; padding: 4px 10px; border-radius: 10px;
    background: #fff; box-shadow: 0 0 18px rgba(255,255,255,.15); flex: none;
}
.brand-logo img { height: 34px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text small { font-size: 11px; letter-spacing: .32em; color: var(--cyan); font-weight: 700; }

.brand-icon {
    width: 38px; height: 38px; display: grid; place-items: center;
    border: 2px solid var(--cyan); border-radius: 50%;
    color: var(--cyan); box-shadow: 0 0 16px var(--cyan-dim), inset 0 0 12px var(--cyan-dim);
    animation: spin 12s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.topbar .spacer { flex: 1; }

.status-pill {
    font-family: var(--font-display); font-size: 12px; letter-spacing: .2em;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid currentColor; color: var(--muted);
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}

.status-pill::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

.status-pill.running { color: var(--green); }
.status-pill.running::before { animation: blink 1s infinite; }
.status-pill.over { color: var(--red); }
.status-pill.idle { color: var(--gold); }
.status-pill.paused { color: var(--violet); }
.status-pill.paused::before { animation: blink 1.6s infinite; }

@keyframes blink { 50% { opacity: .2; } }

.clock {
    font-family: var(--font-mono); font-size: 44px; line-height: 1;
    color: var(--cyan); text-shadow: 0 0 22px var(--cyan-dim);
    letter-spacing: .04em; min-width: 150px; text-align: right;
}

.clock.warn { color: var(--gold); text-shadow: 0 0 22px var(--gold-dim); }
.clock.paused { color: var(--violet); text-shadow: 0 0 22px rgba(162,107,255,.5); animation: blink 1.6s infinite; }
.clock.danger { color: var(--red); text-shadow: 0 0 22px rgba(255, 59, 92, .6); animation: pulse .8s ease-in-out infinite; }

@keyframes pulse { 50% { transform: scale(1.06); } }

.time-bar { position: sticky; top: 73px; z-index: 19; height: 4px; background: rgba(255,255,255,.05); }
.time-bar span {
    display: block; height: 100%; width: 100%;
    background: linear-gradient(90deg, var(--red), var(--gold) 30%, var(--cyan));
    box-shadow: 0 0 12px var(--cyan-dim);
    transition: width .5s linear;
    transform-origin: left;
}

.icon-btn {
    width: 42px; height: 42px; border-radius: 12px;
    border: 1px solid var(--line); background: rgba(255,255,255,.03);
    color: var(--text); font-size: 18px;
    display: grid; place-items: center; transition: .2s;
}
.icon-btn:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 14px var(--cyan-dim); }

.nav-link {
    font-family: var(--font-display); font-size: 12px; letter-spacing: .15em;
    padding: 11px 16px; border-radius: 12px; border: 1px solid var(--line); color: var(--text);
    white-space: nowrap; transition: .2s;
}
.nav-link:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- headings ---------- */

.page { max-width: 1280px; margin: 0 auto; padding: 36px 28px 60px; }

.headline {
    font-family: var(--font-display); font-weight: 900; text-align: center;
    font-size: clamp(30px, 5vw, 60px); letter-spacing: .12em; margin: 10px 0 6px;
    background: linear-gradient(180deg, #fff, var(--cyan) 70%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 20px var(--cyan-dim));
    position: relative;
}

.subline { text-align: center; color: var(--muted); font-size: 20px; margin: 0 0 30px; letter-spacing: .05em; }

.glitch { animation: glitch 6s infinite; }

@keyframes glitch {
    0%, 92%, 100% { transform: none; filter: drop-shadow(0 0 20px var(--cyan-dim)); }
    93% { transform: translate(-3px, 1px) skewX(-6deg); filter: drop-shadow(3px 0 0 var(--red)) drop-shadow(-3px 0 0 var(--cyan)); }
    95% { transform: translate(3px, -1px) skewX(4deg); }
    97% { transform: none; filter: drop-shadow(-2px 0 0 var(--violet)); }
}

/* ---------- banner (sealed / time up) ---------- */

.banner {
    margin: 0 auto 28px; max-width: 760px; text-align: center;
    padding: 18px 24px; border-radius: var(--radius);
    font-family: var(--font-display); letter-spacing: .14em; font-size: 15px;
    border: 1px solid; background: rgba(0,0,0,.35);
}
.banner big { display: block; font-size: 26px; margin-bottom: 4px; }
.banner.idle { color: var(--gold); border-color: var(--gold-dim); box-shadow: 0 0 30px var(--gold-dim) inset; }
.banner.paused { color: var(--violet); border-color: rgba(162,107,255,.45); box-shadow: 0 0 30px rgba(162,107,255,.25) inset; }
.banner.over { color: var(--red); border-color: rgba(255,59,92,.4); box-shadow: 0 0 30px rgba(255,59,92,.25) inset; animation: alarm 1.2s infinite; }

/* ---------- team grid ---------- */

.search {
    display: block; width: min(440px, 100%); margin: 0 auto 18px;
    padding: 14px 20px; border-radius: 999px;
    background: rgba(255,255,255,.04); border: 1px solid var(--line);
    color: var(--text); font: inherit; font-size: 18px; text-align: center; outline: none;
}
.search:focus { border-color: var(--cyan); box-shadow: 0 0 20px var(--cyan-dim); }

.live-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    width: min(760px, 100%); margin: 0 auto 14px; padding: 12px 18px; border-radius: 16px;
    border: 1px solid var(--line); background: rgba(255,255,255,.04);
}
.live-banner div { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.live-banner b { font-family: var(--font-display); letter-spacing: .14em; font-size: clamp(14px, 2.2vh, 18px); }
.live-banner small { color: var(--muted); font-size: 14px; }
.live-banner .lb-time { font-family: var(--font-mono); font-size: clamp(20px, 3vh, 26px); color: var(--green); }
.live-banner.is-live { border-color: rgba(43,255,136,.5); box-shadow: 0 0 30px rgba(43,255,136,.15) inset; }
.live-banner.is-live b { color: var(--green); }
.live-banner .btn { padding: 10px 16px; font-size: 12px; }

/* ---------- vault screen 1: batch picker ---------- */

.batch-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 2vw, 26px); margin: auto 0; padding: 10px 0; }
.batch-pick {
    width: clamp(200px, 20vw, 270px); padding: clamp(18px, 3vh, 30px) 18px; border-radius: 26px;
    display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1vh, 10px);
    background: var(--panel); border: 2px solid var(--line); color: var(--text);
    transition: transform .2s cubic-bezier(.2,.9,.3,1.4), border-color .2s, box-shadow .2s;
    animation: card-in .5s backwards;
}
.batch-pick:hover:not(:disabled) { transform: translateY(-6px) scale(1.03); border-color: var(--cyan); box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 30px var(--cyan-dim); }
.batch-pick:disabled { opacity: .45; cursor: default; }
.bp-label { font-family: var(--font-display); font-size: 13px; letter-spacing: .4em; color: var(--muted); }
.bp-number { font-family: var(--font-display); font-weight: 900; font-size: clamp(64px, 12vh, 110px); line-height: .95; color: #fff; text-shadow: 0 0 30px var(--cyan-dim); }
.bp-status { font-family: var(--font-display); font-size: 12px; letter-spacing: .16em; padding: 6px 12px; border-radius: 999px; border: 1px solid currentColor; color: var(--gold); }
.bp-clock { font-family: var(--font-mono); font-size: clamp(26px, 4.4vh, 38px); color: var(--muted); }
.bp-meta { font-size: 15px; color: var(--muted); }
.batch-pick.bp-running { border-color: rgba(43,255,136,.6); box-shadow: 0 0 40px rgba(43,255,136,.18), inset 0 0 30px rgba(43,255,136,.08); }
.batch-pick.bp-running .bp-status, .batch-pick.bp-running .bp-clock { color: var(--green); }
.batch-pick.bp-running .bp-status { animation: blink 1.6s infinite; }
.batch-pick.bp-paused { border-color: rgba(162,107,255,.6); }
.batch-pick.bp-paused .bp-status, .batch-pick.bp-paused .bp-clock { color: var(--violet); }
.batch-pick.bp-over .bp-status { color: var(--red); }

/* ---------- vault screen 2: teams of one batch ---------- */

.teams-info { text-align: center; font-family: var(--font-display); letter-spacing: .14em; font-size: clamp(13px, 2vh, 16px); color: var(--gold); margin: 0 0 2vh; }
.teams-info.ti-running { color: var(--green); }
.teams-info.ti-paused { color: var(--violet); }
.teams-info.ti-over { color: var(--red); }
.teams-info span { font-family: var(--font-mono); font-size: 1.3em; }

.batch-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 14px; }
.batch-tab {
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 120px;
    padding: 8px 16px; border-radius: 14px; border: 1px solid var(--line);
    background: rgba(255,255,255,.04); color: var(--text); transition: .15s;
}
.batch-tab b { font-family: var(--font-display); font-size: 13px; letter-spacing: .14em; }
.batch-tab small { font-size: 14px; color: var(--muted); font-family: var(--font-mono); }
.batch-tab:hover { border-color: var(--cyan); transform: translateY(-2px); }
.batch-tab.bt-running { border-color: rgba(43,255,136,.45); }
.batch-tab.bt-running small { color: var(--green); }
.batch-tab.bt-paused small { color: var(--violet); }
.batch-tab.bt-over small { color: var(--red); }
.batch-tab.active { background: var(--cyan); border-color: var(--cyan); color: #04121a; box-shadow: 0 0 18px var(--cyan-dim); }
.batch-tab.active small { color: #04121a; }

.team-card .bno {
    display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px;
    font-family: var(--font-display); font-size: 10px; letter-spacing: .08em; line-height: 18px;
    background: rgba(255,255,255,.08); color: var(--text);
}

.waiting {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 18px; border-radius: 16px; border: 1px dashed var(--gold-dim);
    color: var(--gold); font-family: var(--font-display); font-size: clamp(13px, 2vh, 16px); letter-spacing: .08em;
}
.waiting .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px var(--gold); animation: blink 1.2s infinite; flex: none; }

.letter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 12px; max-width: 980px; }

.letter {
    min-width: 42px; height: 42px; padding: 0 10px; border-radius: 12px;
    background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--text);
    font-family: var(--font-display); font-size: 15px; font-weight: 700; transition: .15s;
}
.letter:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }
.letter.active { background: var(--cyan); border-color: var(--cyan); color: #04121a; box-shadow: 0 0 18px var(--cyan-dim); }

.match-count { text-align: center; color: var(--muted); font-size: 15px; letter-spacing: .08em; margin: 0 0 22px; }

.table-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.table-tools .input { max-width: 320px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.seg button { background: none; border: none; color: var(--muted); padding: 10px 14px; font-family: var(--font-display); font-size: 11px; letter-spacing: .15em; }
.seg button.active { background: var(--cyan-dim); color: var(--cyan); }

.team-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 280px));
    justify-content: center;
}

.team-card {
    position: relative; overflow: hidden; text-align: left;
    padding: 12px 14px; border-radius: 14px;
    background: var(--panel); border: 1px solid var(--line); color: var(--text);
    display: flex; align-items: center; gap: 12px; min-height: 68px;
    transition: transform .25s cubic-bezier(.2,.9,.3,1.4), border-color .2s, box-shadow .2s;
    animation: card-in .5s backwards;
}

@keyframes card-in { from { opacity: 0; transform: translateY(20px) scale(.95); } }

.team-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
    transform: translateX(-100%); transition: transform .6s;
}

.team-card:hover:not(.done) {
    transform: translateY(-3px) scale(1.02);
    border-color: var(--cyan); box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 30px var(--cyan-dim);
}
.team-card:hover::after { transform: translateX(100%); }

.team-card .avatar {
    width: 44px; height: 44px; border-radius: 12px; flex: none;
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff;
    background: linear-gradient(135deg, hsl(var(--h) 90% 55%), hsl(calc(var(--h) + 50) 90% 45%));
    box-shadow: 0 0 22px hsl(var(--h) 90% 50% / .45);
}

.team-card .tc-body { flex: 1; min-width: 0; }
.team-card .name { font-family: var(--font-display); font-size: 14px; letter-spacing: .04em; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.team-card .meta { font-size: 14px; color: var(--muted); }
.team-card .chip { flex: none; }


.team-card.st-failed, .team-card.st-timeout {
    cursor: default; border-color: rgba(255,59,92,.3);
    background: linear-gradient(160deg, rgba(255,59,92,.12), var(--panel) 60%);
}
.team-card.st-failed .avatar, .team-card.st-timeout .avatar { filter: grayscale(1); box-shadow: none; }

.nope { animation: shake .45s; }

.chip {
    font-family: var(--font-display); font-size: 11px; letter-spacing: .14em;
    padding: 5px 10px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap;
}
.chip.locked { color: var(--cyan); }
.chip.cracked { color: var(--gold); background: var(--gold-dim); }
.chip.failed { color: var(--red); background: rgba(255,59,92,.12); }
.chip.waiting { color: var(--muted); }
.chip.live { color: var(--green); background: rgba(43,255,136,.1); animation: blink 1.6s infinite; }
.chip.paused { color: var(--violet); background: rgba(162,107,255,.12); }

.team-card.done { cursor: default; }
.team-card.st-running { border-color: rgba(43,255,136,.35); }
.team-card.st-running .meta b { color: var(--green); font-family: var(--font-mono); font-weight: 400; }
.team-card.st-paused { border-color: rgba(162,107,255,.4); }
.team-card.st-cracked {
    border-color: var(--gold-dim);
    background: linear-gradient(160deg, rgba(255, 201, 60, .14), var(--panel) 60%);
    cursor: default;
}
.team-card.st-cracked .avatar { filter: saturate(.3); }

.empty {
    text-align: center; padding: 60px 20px; color: var(--muted);
    border: 2px dashed var(--line); border-radius: var(--radius);
}
.empty big { display: block; font-family: var(--font-display); font-size: 22px; color: var(--text); margin-bottom: 8px; letter-spacing: .1em; }

/* ---------- entry screen ---------- */

.entry {
    display: grid; grid-template-columns: minmax(300px, 1fr) minmax(340px, 520px);
    gap: 50px; align-items: center; justify-content: center;
}

.back-btn {
    align-self: flex-start; background: none; border: 1px solid var(--line); color: var(--muted);
    padding: 8px 16px; border-radius: 12px; font-size: 16px; margin-bottom: 1.5vh; transition: .2s;
}
.back-btn:hover { color: var(--cyan); border-color: var(--cyan); }

/* the vault door */

.vault-wrap {
    --vs: min(500px, 38vw, calc(100vh - 190px));
    position: relative; width: var(--vs); aspect-ratio: 1; margin: 0 auto;
    perspective: 1400px;
}

.vault-inside {
    position: absolute; inset: 6%; border-radius: 50%;
    background: radial-gradient(circle, #fff7d1 0%, var(--gold) 25%, #b07800 60%, #2a1c00 100%);
    display: grid; place-items: center;
    box-shadow: inset 0 0 60px #000;
    font-size: 90px;
}
.vault-inside span { animation: float 2.4s ease-in-out infinite; filter: drop-shadow(0 0 30px #fff); }

@keyframes float { 50% { transform: translateY(-12px) scale(1.06); } }

.vault-door {
    position: absolute; inset: 0; border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #3a4766, #18203a 55%, #0b1022 100%);
    border: 10px solid #26314f;
    box-shadow:
        0 0 0 4px #0b1022, 0 0 0 7px var(--cyan-dim),
        0 30px 80px rgba(0,0,0,.7), inset 0 0 50px rgba(0,0,0,.8),
        0 0 60px var(--cyan-dim);
    transform-origin: 2% 50%;
    transition: transform 1.6s cubic-bezier(.65,0,.35,1), box-shadow .3s;
    transform-style: preserve-3d;
}

.vault-door .ring {
    position: absolute; border-radius: 50%;
    border: 3px solid rgba(120, 160, 255, .18);
}
.vault-door .r1 { inset: 9%; }
.vault-door .r2 { inset: 20%; border-style: dashed; border-color: var(--cyan-dim); animation: spin 40s linear infinite reverse; }

.vault-door .bolt {
    position: absolute; width: 16px; height: 16px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #9fb2d9, #2b3757);
    left: calc(50% - 8px); top: calc(50% - 8px);
    transform: rotate(var(--a)) translateY(calc(var(--vs) * -.44));
}

.dial {
    position: absolute; inset: 29%; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #56648a, #1b2440 70%);
    border: 4px solid #6b7aa3;
    box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 20px rgba(0,0,0,.7);
    transition: transform .45s cubic-bezier(.3,1.6,.5,1);
}

.dial .tick {
    position: absolute; left: calc(50% - 1px); top: 3px; width: 2px; height: 10px;
    background: rgba(255,255,255,.5); transform-origin: 1px calc(var(--vs) * .21 - 7px);
    transform: rotate(var(--a));
}

.dial .spoke {
    position: absolute; left: 50%; top: 50%; width: 125%; height: 14px;
    background: linear-gradient(#93a3cc, #4b5880); border-radius: 8px;
    transform: translate(-50%, -50%) rotate(var(--a));
    box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.dial .spoke::before, .dial .spoke::after {
    content: ''; position: absolute; top: -6px; width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #d5def5, #59668d);
}
.dial .spoke::before { left: -10px; }
.dial .spoke::after { right: -10px; }

.dial .hub {
    position: absolute; inset: 32%; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #e6ecff, #6d7ba5 60%, #2a3456);
    display: grid; place-items: center;
}

.door-led {
    position: absolute; left: 50%; top: 11%; width: 14px; height: 14px; margin-left: -7px;
    border-radius: 50%; background: var(--red); box-shadow: 0 0 14px var(--red);
    animation: blink 1.4s infinite;
}

.vault-wrap.denied .vault-door { animation: shake .5s; box-shadow: 0 0 0 4px #0b1022, 0 0 0 7px var(--red), 0 0 90px rgba(255,59,92,.7); }
.vault-wrap.granted .door-led { background: var(--green); box-shadow: 0 0 20px var(--green); animation: none; }
.vault-wrap.granted .dial { transform: rotate(1080deg) !important; transition: transform 1.4s cubic-bezier(.5,0,.3,1); }
.vault-wrap.open .vault-door { transform: rotateY(-115deg); }

@keyframes shake {
    10%, 90% { transform: translateX(-4px); }
    20%, 80% { transform: translateX(8px); }
    30%, 50%, 70% { transform: translateX(-14px); }
    40%, 60% { transform: translateX(14px); }
}

/* console */

.console {
    background: var(--panel); border: 1px solid var(--line); border-radius: 24px;
    padding: clamp(16px, 3vh, 30px); backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    max-height: 100%; overflow-y: auto;
}

.console .label { font-family: var(--font-display); font-size: 12px; letter-spacing: .3em; color: var(--muted); }

.console .team-name {
    font-family: var(--font-display); font-size: clamp(20px, 3.4vh, 30px); font-weight: 800; letter-spacing: .06em;
    margin: 4px 0 2px; color: #fff; word-break: break-word;
}

.console .meta-row { display: flex; gap: 18px; color: var(--muted); font-size: 16px; margin-bottom: clamp(10px, 2.4vh, 24px); }
.console .meta-row b { color: var(--cyan); font-family: var(--font-mono); font-size: 18px; }

.code-area { position: relative; margin-bottom: clamp(10px, 2.2vh, 20px); }

.code-boxes { display: flex; gap: 8px; justify-content: center; }

.code-box {
    flex: 1 1 0; min-width: 0; max-width: 54px; height: clamp(50px, 8vh, 70px); border-radius: 12px;
    display: grid; place-items: center;
    font-family: var(--font-mono); font-size: 36px; color: #fff;
    background: rgba(0,0,0,.4); border: 2px solid rgba(120, 160, 255, .2);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
/* typed = yellow (neutral, says nothing about right or wrong); box being typed into = orange */
.code-box.filled { border-color: var(--gold); color: #fff3c4; box-shadow: 0 0 14px var(--gold-dim), inset 0 0 10px var(--gold-dim); animation: pop .2s; }
.code-box.filled.just { animation: just-typed .45s ease-out; }
@keyframes just-typed {
    0% { transform: scale(1.15); border-color: var(--orange); color: var(--orange); box-shadow: 0 0 22px rgba(255,138,31,.7); }
    100% { transform: none; }
}
.code-box { position: relative; }
/* proven correct after an attempt: locked in place */
.code-box.locked { border-color: var(--green); color: var(--green); background: rgba(43,255,136,.08); box-shadow: 0 0 14px rgba(43,255,136,.35), inset 0 0 10px rgba(43,255,136,.15); animation: none; }
.code-box.locked::before { content: '🔒'; position: absolute; top: -10px; right: -7px; font-size: 12px; filter: drop-shadow(0 0 4px rgba(43,255,136,.8)); }
/* wrong after an attempt: flashes red, then clears for retyping */
.code-box.wrong { border-color: var(--red); color: var(--red); background: rgba(255,59,92,.1); box-shadow: 0 0 16px rgba(255,59,92,.5); animation: shake .45s; }
.feedback .ok-count { color: var(--green); }
.feedback .bad { color: var(--red); }
.confirm-code span.locked { border-color: var(--green); color: var(--green); background: rgba(43,255,136,.08); box-shadow: 0 0 14px rgba(43,255,136,.3); }
.code-box.cursor { border-color: var(--orange); box-shadow: 0 0 16px rgba(255,138,31,.45); }
.code-box.cursor::after { content: ''; width: 3px; height: 34px; background: var(--orange); animation: blink 1s infinite; }

.code-boxes.compact { gap: 6px; }
.code-boxes.compact .code-box { font-size: clamp(22px, 3.6vh, 30px); border-radius: 10px; }

@keyframes pop { 50% { transform: scale(1.15); } }

.code-boxes.denied .code-box { border-color: var(--red); box-shadow: 0 0 16px rgba(255,59,92,.5); animation: shake .5s; }
.code-boxes.granted .code-box { border-color: var(--green); box-shadow: 0 0 20px rgba(43,255,136,.6); color: var(--green); }

.code-input {
    position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px;
    cursor: pointer; text-transform: uppercase;
}

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(6px, 1.2vh, 12px); margin-bottom: clamp(10px, 2vh, 18px); }

.key {
    height: clamp(40px, 6.8vh, 64px); border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid var(--line); color: #fff;
    font-family: var(--font-mono); font-size: 28px;
    transition: transform .08s, background .15s, box-shadow .15s;
    box-shadow: 0 4px 0 rgba(0,0,0,.4);
}
.key:hover { background: rgba(34, 231, 255, .12); border-color: var(--cyan); }
.key:active, .key.pressed { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 0 20px var(--cyan-dim); }
.key.fn { font-family: var(--font-display); font-size: 14px; letter-spacing: .12em; color: var(--muted); }
.key:disabled { opacity: .35; cursor: not-allowed; transform: none; }
#entryScreen.locked .code-box { opacity: .45; }

.keyboard-hint { text-align: center; color: var(--muted); font-size: 15px; margin: -6px 0 16px; }

.unlock-btn {
    width: 100%; height: clamp(50px, 8vh, 70px); border-radius: 16px; border: none;
    font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: .3em;
    color: #1b1300;
    background: linear-gradient(135deg, #ffe48a, var(--gold) 45%, #ff9d2e);
    box-shadow: 0 8px 0 #9c5d00, 0 0 40px var(--gold-dim);
    transition: transform .1s, box-shadow .1s, filter .2s;
}
.unlock-btn:hover:not(:disabled) { filter: brightness(1.1); }
.unlock-btn:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 2px 0 #9c5d00, 0 0 40px var(--gold-dim); }
.unlock-btn:disabled { filter: grayscale(.9) brightness(.6); cursor: not-allowed; }

.feedback {
    min-height: clamp(40px, 7vh, 64px); margin-top: clamp(10px, 1.8vh, 18px); text-align: center;
    font-family: var(--font-display); letter-spacing: .1em; font-size: 15px;
}
.feedback .big { display: block; font-size: clamp(18px, 3vh, 26px); font-weight: 800; letter-spacing: .2em; margin-bottom: 6px; }
.feedback.denied { color: var(--red); text-shadow: 0 0 20px rgba(255,59,92,.6); }
.feedback.granted { color: var(--green); text-shadow: 0 0 20px rgba(43,255,136,.6); }
.feedback.info { color: var(--gold); }

.match-meter { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.match-meter i { width: 22px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); }
.match-meter i.on { background: var(--gold); box-shadow: 0 0 10px var(--gold); }

/* ---------- overlay ---------- */

.overlay {
    position: fixed; inset: 0; z-index: 50;
    display: grid; place-items: center; padding: 20px;
    background: radial-gradient(circle, rgba(10, 30, 20, .75), rgba(0,0,0,.92));
    animation: fade .3s;
}

@keyframes fade { from { opacity: 0; } }

.overlay-card { text-align: center; max-width: 1000px; animation: zoom .6s cubic-bezier(.2,1.6,.4,1); }

@keyframes zoom { from { transform: scale(.4); opacity: 0; } }

.overlay-card .trophy { font-size: 110px; filter: drop-shadow(0 0 40px var(--gold)); animation: float 2s ease-in-out infinite; }

.overlay-card h2 {
    font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 6vw, 72px);
    letter-spacing: .12em; margin: 10px 0;
    background: linear-gradient(180deg, #fff, var(--green));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 30px rgba(43,255,136,.5));
}

.overlay-card .who { font-family: var(--font-display); font-size: 26px; color: var(--gold); letter-spacing: .1em; }

.overlay-stats { display: flex; gap: 20px; justify-content: center; margin: 30px 0; flex-wrap: wrap; }
.stat {
    min-width: 170px; padding: 18px 22px; border-radius: 18px;
    background: rgba(255,255,255,.05); border: 1px solid var(--line);
}
.stat b { display: block; font-family: var(--font-mono); font-size: 42px; color: #fff; }
.stat span { font-family: var(--font-display); font-size: 11px; letter-spacing: .25em; color: var(--muted); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 26px; border-radius: 14px; border: 1px solid var(--cyan);
    background: rgba(34, 231, 255, .1); color: var(--cyan);
    font-family: var(--font-display); font-size: 13px; letter-spacing: .18em; font-weight: 700;
    transition: .2s; text-decoration: none;
}
.btn:hover { background: rgba(34, 231, 255, .2); box-shadow: 0 0 22px var(--cyan-dim); }
.btn.gold { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.btn.gold:hover { box-shadow: 0 0 22px var(--gold-dim); }
.btn.red { border-color: var(--red); color: var(--red); background: rgba(255,59,92,.1); }
.btn.green { border-color: var(--green); color: var(--green); background: rgba(43,255,136,.1); }
.btn.small { padding: 8px 12px; font-size: 11px; border-radius: 10px; }
.btn.big { padding: 18px 30px; font-size: 16px; border-radius: 16px; }

.control-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.control-row form, .control-row .btn { width: 100%; }
.control-row .btn { padding: 16px 8px; font-size: 13px; letter-spacing: .1em; white-space: nowrap; }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

.overlay.fail { background: radial-gradient(circle, rgba(40, 6, 14, .8), rgba(0,0,0,.94)); }
.overlay.fail .trophy { filter: drop-shadow(0 0 40px var(--red)); }
.overlay.fail h2 { background: linear-gradient(180deg, #fff, var(--red)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 30px rgba(255,59,92,.5)); }

.overlay.confirm { background: rgba(2, 4, 10, .88); }
.overlay.confirm .trophy { font-size: 80px; filter: drop-shadow(0 0 30px var(--gold)); }
.overlay.confirm h2 { font-size: clamp(30px, 6vw, 60px); background: linear-gradient(180deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 30px var(--gold-dim)); }
.confirm-text { font-size: 20px; color: var(--text); margin: 0 0 20px; }
.confirm-text b { color: var(--gold); }
.confirm-code { display: flex; justify-content: center; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; }
.confirm-code span {
    width: 52px; height: 66px; display: grid; place-items: center; border-radius: 12px;
    font-family: var(--font-mono); font-size: 34px; color: #fff;
    border: 2px solid var(--gold); background: rgba(255, 201, 60, .08); box-shadow: 0 0 16px var(--gold-dim);
}
.confirm-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.confirm-code span.blank { border-style: dashed; border-color: var(--muted); color: var(--muted); box-shadow: none; background: none; }
.confirm-text { line-height: 1.5; }

.ov-message { font-size: clamp(18px, 2.4vh, 24px); margin: 6px 0 18px; color: var(--text); }
.ov-message b { color: var(--gold); }
.overlay.fail .ov-message b { color: var(--red); }

.result-code span { position: relative; }
.result-code span i {
    position: absolute; right: -6px; top: -8px; width: 20px; height: 20px; border-radius: 50%;
    font-style: normal; font-size: 12px; display: grid; place-items: center; color: #04060d;
}
.result-code span.ok { border-color: var(--green); background: rgba(43,255,136,.1); box-shadow: 0 0 14px rgba(43,255,136,.35); }
.result-code span.ok i { background: var(--green); }
.result-code span.miss { border-color: var(--red); background: rgba(255,59,92,.12); box-shadow: 0 0 14px rgba(255,59,92,.35); color: #ffb3c0; }
.result-code span.miss i { background: var(--red); color: #fff; }

/* ---------- team intro (START SEARCHING) ---------- */

.intro {
    margin: auto; width: min(640px, 100%); text-align: center;
    background: var(--panel); border: 1px solid var(--line); border-radius: 28px;
    padding: clamp(20px, 4vh, 44px) clamp(20px, 4vw, 48px);
    box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: zoom .45s cubic-bezier(.2,1.4,.4,1);
}
.intro-avatar {
    width: clamp(64px, 10vh, 92px); height: clamp(64px, 10vh, 92px); margin: 0 auto 12px; border-radius: 24px;
    display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 4vh, 34px); color: #fff;
    background: linear-gradient(135deg, hsl(var(--h) 90% 55%), hsl(calc(var(--h) + 50) 90% 45%));
    box-shadow: 0 0 40px hsl(var(--h) 90% 50% / .5);
}
.intro .label { font-family: var(--font-display); font-size: 12px; letter-spacing: .3em; color: var(--muted); }
.intro-name { font-family: var(--font-display); font-size: clamp(26px, 5vh, 44px); margin: 6px 0 clamp(14px, 3vh, 28px); letter-spacing: .06em; overflow-wrap: anywhere; }
.rules { list-style: none; padding: 0; margin: 0 0 clamp(18px, 4vh, 34px); display: grid; gap: 10px; text-align: left; }
.rules li {
    display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px;
    background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: clamp(16px, 2.2vh, 20px);
}
.rules li span { font-size: 24px; }
.rules b { color: var(--gold); }
.start-btn {
    width: 100%; height: clamp(60px, 10vh, 84px); border: none; border-radius: 18px;
    font-family: var(--font-display); font-weight: 900; font-size: clamp(18px, 3vh, 26px); letter-spacing: .2em; color: #021a0e;
    background: linear-gradient(135deg, #b5ffd6, var(--green) 50%, #00c96b);
    box-shadow: 0 8px 0 #007a40, 0 0 50px rgba(43,255,136,.45);
    transition: transform .1s, box-shadow .1s, filter .2s;
    animation: breathe-green 2.2s ease-in-out infinite;
}
.start-btn:hover:not(:disabled) { filter: brightness(1.08); }
.start-btn:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 2px 0 #007a40, 0 0 50px rgba(43,255,136,.45); }
.start-btn:disabled { filter: grayscale(.8) brightness(.7); animation: none; }
@keyframes breathe-green { 50% { box-shadow: 0 8px 0 #007a40, 0 0 80px rgba(43,255,136,.7); } }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; }

/* ---------- toast ---------- */

.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 70; display: flex; flex-direction: column; gap: 12px; }
.toast {
    padding: 16px 22px; border-radius: 14px; max-width: 420px;
    background: var(--panel-solid); border: 1px solid var(--gold); color: var(--gold);
    font-family: var(--font-display); letter-spacing: .08em; font-size: 15px;
    box-shadow: 0 0 30px var(--gold-dim); animation: toast-in .5s cubic-bezier(.2,1.4,.4,1);
}
@keyframes toast-in { from { transform: translateX(120%); } }

/* ---------- leaderboard ---------- */

.stats-row { display: flex; gap: 18px; justify-content: center; margin-bottom: 36px; flex-wrap: wrap; }

.podium { display: flex; justify-content: center; align-items: flex-end; gap: 20px; margin: 10px 0 40px; flex-wrap: wrap; }

.podium-slot {
    width: 230px; text-align: center; padding: 22px 16px; border-radius: 22px 22px 8px 8px;
    background: var(--panel); border: 1px solid var(--line);
    animation: card-in .6s backwards;
}
.podium-slot .medal { font-size: 54px; }
.podium-slot .pname { font-family: var(--font-display); font-weight: 800; font-size: 19px; margin: 8px 0; word-break: break-word; }
.podium-slot .ptime { font-family: var(--font-mono); font-size: 34px; color: var(--gold); }
.podium-slot.p1 { order: 2; min-height: 270px; border-color: var(--gold); box-shadow: 0 0 40px var(--gold-dim); background: linear-gradient(180deg, rgba(255,201,60,.18), var(--panel)); }
.podium-slot.p2 { order: 1; min-height: 230px; border-color: #cfd8f0; }
.podium-slot.p3 { order: 3; min-height: 200px; border-color: #e0915a; }

.board { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.board th {
    font-family: var(--font-display); font-size: 11px; letter-spacing: .22em; color: var(--muted);
    text-align: left; padding: 0 16px; font-weight: 500;
}
.board td { padding: 16px; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.board td:first-child { border-left: 1px solid var(--line); border-radius: 14px 0 0 14px; }
.board td:last-child { border-right: 1px solid var(--line); border-radius: 0 14px 14px 0; }
.board tr.solved td { background: rgba(40, 34, 20, .8); border-color: var(--gold-dim); }
.board tr.failed td { background: rgba(40, 14, 20, .75); border-color: rgba(255,59,92,.25); }
.board tr.failed .segments i.on { background: var(--red); box-shadow: 0 0 8px rgba(255,59,92,.4); }
.board tr.flash td { animation: row-flash 1.5s 3; }
@keyframes row-flash { 50% { background: rgba(43,255,136,.25); } }

.rank {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 800; background: rgba(255,255,255,.06);
}
.board .tname { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .04em; }
.board .mono { font-family: var(--font-mono); font-size: 22px; }
.board .small { color: var(--muted); font-size: 14px; }

.segments { display: flex; gap: 4px; margin-bottom: 4px; }
.segments i { flex: 1; max-width: 26px; height: 10px; border-radius: 3px; background: rgba(255,255,255,.1); }
.segments i.on { background: var(--cyan); box-shadow: 0 0 8px var(--cyan-dim); }
tr.solved .segments i.on { background: var(--gold); box-shadow: 0 0 8px var(--gold-dim); }

/* ---------- admin ---------- */

.panel {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 24px; margin-bottom: 24px;
}
.panel h2 {
    margin: 0 0 18px; font-family: var(--font-display); font-size: 15px; letter-spacing: .22em; color: var(--cyan);
    display: flex; align-items: center; gap: 10px;
}

.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.admin-grid .panel { margin-bottom: 0; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label, .check { font-size: 15px; color: var(--muted); }
.check { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--cyan); }

.input, textarea.input {
    width: 100%; padding: 12px 14px; border-radius: 12px;
    background: rgba(0,0,0,.35); border: 1px solid var(--line); color: var(--text);
    font: inherit; font-size: 17px; outline: none;
}
textarea.input { font-family: var(--font-mono); font-size: 15px; min-height: 140px; resize: vertical; }
.input:focus { border-color: var(--cyan); box-shadow: 0 0 14px var(--cyan-dim); }
input[type=file].input { padding: 9px; }

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.alert { padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; border: 1px solid; }
.alert.ok { color: var(--green); border-color: rgba(43,255,136,.35); background: rgba(43,255,136,.07); }
.alert.err { color: var(--red); border-color: rgba(255,59,92,.4); background: rgba(255,59,92,.07); }
.alert ul { margin: 6px 0 0; padding-left: 20px; }

.table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table th { text-align: left; font-family: var(--font-display); font-size: 11px; letter-spacing: .18em; color: var(--muted); padding: 10px; border-bottom: 1px solid var(--line); font-weight: 500; }
.table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.table .mono { font-family: var(--font-mono); }
.secret { filter: blur(6px); cursor: pointer; transition: filter .2s; user-select: none; }
.secret.shown { filter: none; user-select: auto; }

.admin-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.admin-tabs a {
    padding: 10px 18px; border-radius: 12px; border: 1px solid var(--line); color: var(--muted);
    font-family: var(--font-display); font-size: 12px; letter-spacing: .16em; transition: .15s;
}
.admin-tabs a:hover { color: var(--cyan); border-color: var(--cyan); }
.admin-tabs a.active { background: var(--cyan); border-color: var(--cyan); color: #04121a; box-shadow: 0 0 18px var(--cyan-dim); }

.batch-grid.wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.batch-teams { list-style: none; margin: 6px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.batch-teams li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.batch-teams .bt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.batch-teams .bt-info { color: var(--muted); font-size: 14px; }
.batch-teams .chip { font-size: 9px; padding: 3px 8px; }
.batch-teams .bt-empty { color: var(--muted); }
.unassigned { margin-top: 18px; padding: 14px; border-radius: 14px; border: 1px dashed var(--line); display: grid; gap: 10px; }
.unassigned b { font-family: var(--font-display); font-size: 12px; letter-spacing: .16em; color: var(--gold); }
.unassigned div { display: flex; flex-wrap: wrap; gap: 6px; }
.unassigned .btn { justify-self: start; }

.batch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.batch-card {
    padding: 18px; border-radius: 18px; border: 1px solid var(--line);
    background: rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 10px;
}
.batch-card.bc-running { border-color: rgba(43,255,136,.5); box-shadow: 0 0 30px rgba(43,255,136,.12) inset; }
.batch-card.bc-paused { border-color: rgba(162,107,255,.5); }
.batch-card.bc-over { border-color: rgba(255,59,92,.35); }
.batch-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.batch-head b { white-space: nowrap; }
.batch-head b { font-family: var(--font-display); letter-spacing: .18em; font-size: 16px; }
.batch-head .status-pill { font-size: 10px; padding: 5px 10px; }
.batch-clock { font-family: var(--font-mono); font-size: 54px; line-height: 1; color: var(--cyan); text-shadow: 0 0 22px var(--cyan-dim); }
.batch-meta { color: var(--muted); font-size: 15px; }
.batch-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.batch-actions .btn { padding: 10px 14px; font-size: 12px; }

.bulk-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 12px; border-radius: 12px;
    background: rgba(255,255,255,.03); border: 1px dashed var(--line);
}
.batch-select { width: auto; padding: 6px 10px; font-size: 14px; }
select.input { cursor: pointer; }
/* the open dropdown list is drawn by the browser: keep it dark with readable text */
select.input option { background: var(--panel-solid); color: var(--text); }
select.input option:checked { background: var(--cyan); color: #04121a; }
.table input[type=checkbox], .bulk-bar input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--cyan); cursor: pointer; }

.game-clock { font-family: var(--font-mono); font-size: 64px; color: var(--cyan); text-shadow: 0 0 22px var(--cyan-dim); line-height: 1; margin: 6px 0 18px; }

.login-card { max-width: 420px; margin: 10vh auto 0; text-align: center; }

.slow-server {
    padding: 10px 20px; text-align: center; font-size: 15px;
    background: rgba(255, 138, 31, .15); border-bottom: 1px solid var(--orange); color: #ffd2a8;
}
.slow-server a { color: #fff; font-weight: 700; text-decoration: underline; }
body.working { cursor: progress; }
body.working main button:disabled { opacity: .55; }

/* pages without a team clock in the top bar */
body.no-clock #clock, body.no-clock #statusPill, body.no-clock .time-bar { display: none; }

/* ---------- fit-to-window (vault screen) ---------- */

body.fit { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.fit .topbar, body.fit .time-bar { position: relative; top: 0; flex: none; }
body.fit .page { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; padding: 2vh 28px; }
body.fit .banner { flex: none; margin-bottom: 1.6vh; padding: 10px 20px; font-size: 13px; }
body.fit .banner big { font-size: clamp(16px, 2.6vh, 22px); }
body.fit .banner.idle { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 40px var(--gold-dim) inset, 0 0 26px var(--gold-dim); } }

body.fit #batchesScreen, body.fit #teamsScreen, body.fit #introScreen, body.fit #entryScreen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.fit .headline { font-size: clamp(22px, 5vh, 54px); margin: 0 0 .4vh; }
body.fit .subline { font-size: clamp(14px, 2vh, 19px); margin-bottom: 1.8vh; }
body.fit .search { flex: none; padding: 10px 20px; margin-bottom: 1.4vh; }
body.fit .batch-bar { flex: none; margin-bottom: 1.4vh; }
body.fit .live-banner { flex: none; margin-bottom: 1.2vh; }
body.fit .letter-bar { flex: none; margin-bottom: 1vh; gap: 6px; }
body.fit .letter { min-width: 36px; height: 34px; font-size: 13px; border-radius: 10px; }
body.fit .match-count { flex: none; margin-bottom: 1.2vh; font-size: 14px; }

body.fit .team-grid {
    flex: 1; min-height: 0; overflow-y: auto; align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px;
    padding: 6px 8px 16px; margin: 0 -8px;
    scrollbar-width: thin; scrollbar-color: var(--cyan-dim) transparent;
}
body.fit .team-grid::-webkit-scrollbar { width: 8px; }
body.fit .team-grid::-webkit-scrollbar-thumb { background: var(--cyan-dim); border-radius: 4px; }

body.fit .entry { flex: 1; min-height: 0; gap: 4vw; }
body.fit .entry .console { align-self: center; }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
    .entry { grid-template-columns: 1fr; gap: 30px; }
    .vault-wrap { --vs: min(260px, 60vw); }
    .admin-grid { grid-template-columns: 1fr; }

    /* phones / portrait tablets: normal scrolling page, vault above the keypad */
    body.fit { height: auto; overflow: visible; display: block; }
    body.fit #batchesScreen, body.fit #teamsScreen, body.fit #introScreen, body.fit #entryScreen { display: block; }
    .brand-text small { letter-spacing: .2em; }
    .brand-logo { height: 36px; padding: 3px 8px; }
    .brand-logo img { height: 28px; }
    body.fit .team-grid { overflow: visible; }
    body.fit .entry { gap: 20px; }
}

@media (max-width: 700px) {
    .topbar { flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
    .topbar .spacer { display: none; }
    .clock { font-size: 32px; min-width: 0; margin-left: auto; }
    #fsBtn { display: none; }
    .time-bar { top: 0; position: relative; }
    .page { padding: 24px 16px 40px; }
    .brand { font-size: 14px; }
    .board thead { display: none; }
    .board td { padding: 10px; }
    .board .hide-sm { display: none; }
    .code-box { font-size: 26px; }
    .confirm-code span { width: 30px; height: 44px; font-size: 22px; }
    .control-row { grid-template-columns: 1fr; }
    .console { padding: 20px; }
}

.small { font-size: 14px; }