/* ===================================================================
   Jebördy — moderner Retro-TV-Gameshow-Look (Neon + Scanlines)
   =================================================================== */
:root {
    --jb-bg: #070a1f;
    --jb-bg2: #121845;
    --jb-panel: #1a2156;
    --jb-panel2: #232c6e;
    --jb-blue: #18266f;
    --jb-blue-deep: #0c1545;
    --jb-gold: #ffce3a;
    --jb-gold-deep: #d99a1f;
    --jb-cyan: #2de2e6;
    --jb-magenta: #ff3caa;
    --jb-text: #eef0ff;
    --jb-muted: #8e95c9;
    --jb-green: #29e08a;
    --jb-red: #ff4d4d;
    --jb-shadow: 0 8px 30px rgba(0,0,0,.45);
    --jb-display: "Arial Black", "Segoe UI", Impact, system-ui, sans-serif;
}

body {
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(45,226,230,.10), transparent 60%),
        radial-gradient(900px 500px at 50% 110%, rgba(255,60,170,.10), transparent 60%),
        linear-gradient(160deg, var(--jb-bg2), var(--jb-bg));
    background-attachment: fixed;
    color: var(--jb-text);
    font-family: "Segoe UI", system-ui, sans-serif;
}

/* CRT-Scanlines als dezentes Overlay */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.06) 3px, rgba(0,0,0,0) 4px);
    z-index: 9999;
    mix-blend-mode: multiply;
}

/* Vollbreites Gameshow-Layout (ersetzt das Template-Sidebar-Layout) */
.jb-shell { min-height: 100vh; }
.jb-shell .content { max-width: 1280px; margin: 0 auto; padding: 1.25rem 1.5rem 3rem; }

/* Spielansicht: volles Fenster, kein Seiten-Scroll (Cams füllen die Höhe) */
.jb-shell .content:has(.room-view.playing) { max-width: 100%; height: 100vh; overflow: hidden; padding: .8rem 1rem; }

.muted { color: var(--jb-muted); }
.hint { color: var(--jb-muted); font-size: .8rem; }
.mb-2 { margin-bottom: .5rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }

/* ---------- Buttons ---------- */
.btn { border-radius: 8px; font-weight: 700; }
.btn-amber {
    background: linear-gradient(180deg, var(--jb-gold), var(--jb-gold-deep));
    color: #2a1c00; font-weight: 800; border: none; letter-spacing: .03em;
    box-shadow: 0 3px 0 #9c6f10, var(--jb-shadow);
}
.btn-amber:hover { filter: brightness(1.08); color: #2a1c00; }
.btn-amber:active { transform: translateY(2px); box-shadow: 0 1px 0 #9c6f10; }
.btn-amber:disabled { opacity: .45; box-shadow: none; }

.btn-outline { background: transparent; color: var(--jb-cyan); border: 2px solid var(--jb-cyan);
    font-weight: 700; box-shadow: 0 0 12px rgba(45,226,230,.25); }
.btn-outline:hover { background: rgba(45,226,230,.12); color: var(--jb-cyan); }

.btn-correct { background: linear-gradient(180deg, #36f59b, #16b76a); color: #042c17; font-weight: 800;
    border: none; box-shadow: 0 3px 0 #0c7a45; }
.btn-correct:active { transform: translateY(2px); box-shadow: 0 1px 0 #0c7a45; }
.btn-wrong { background: linear-gradient(180deg, #ff6b6b, #e23030); color: #2c0606; font-weight: 800;
    border: none; box-shadow: 0 3px 0 #9c1717; }
.btn-wrong:active { transform: translateY(2px); box-shadow: 0 1px 0 #9c1717; }
.btn-skip { background: #2c346f; color: var(--jb-muted); border: none; }
.btn-start {
    background: linear-gradient(180deg, var(--jb-gold), var(--jb-gold-deep)); color: #2a1c00;
    font-weight: 900; font-size: 1.15rem; padding: .7rem 1.4rem; border: none; border-radius: 10px;
    box-shadow: 0 4px 0 #9c6f10, 0 0 24px rgba(255,206,58,.4); text-transform: uppercase; letter-spacing: .05em;
}
.btn-start:disabled { opacity: .5; box-shadow: none; }

.form-control { background: #0c1238; color: var(--jb-text); border: 1px solid #2f3a83; border-radius: 8px; }
.form-control::placeholder { color: #5b63a0; }
.form-control:focus { background: #0c1238; color: var(--jb-text); border-color: var(--jb-gold);
    box-shadow: 0 0 0 .15rem rgba(255,206,58,.2); }
.alert-error { background: rgba(255,77,77,.15); color: #ffb0a8; padding: .5rem .75rem; border-radius: 6px;
    border: 1px solid rgba(255,77,77,.35); }

/* ---------- Home ---------- */
.home-wrap { max-width: 920px; margin: 3rem auto; text-align: center; }
.home-title {
    font-family: var(--jb-display); font-size: 5rem; font-weight: 900; letter-spacing: .08em;
    color: var(--jb-gold);
    text-shadow: 0 0 8px rgba(255,206,58,.5), 4px 4px 0 var(--jb-blue), 6px 6px 0 var(--jb-magenta);
    margin-bottom: .25rem;
}
.home-sub { color: var(--jb-cyan); margin-bottom: 2.5rem; letter-spacing: .08em; text-transform: uppercase;
    font-size: .95rem; }
.home-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.home-card { background: linear-gradient(180deg, var(--jb-panel2), var(--jb-panel)); border-radius: 14px;
    padding: 1.5rem; text-align: left; border: 1px solid #34409a; box-shadow: var(--jb-shadow); }
.home-card h2 { color: var(--jb-gold); font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    font-size: 1.3rem; }
.home-card p { color: var(--jb-muted); font-size: .9rem; }
.code-input { text-transform: uppercase; letter-spacing: .35em; text-align: center; font-weight: 800;
    font-size: 1.2rem; color: var(--jb-gold); }

/* ---------- Topbar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: linear-gradient(180deg, var(--jb-panel2), var(--jb-panel)); padding: .55rem 1rem;
    border-radius: 12px; margin-bottom: 1rem; border: 1px solid #34409a; box-shadow: var(--jb-shadow); }
.room-code strong { color: var(--jb-gold); font-size: 1.35rem; letter-spacing: .2em;
    text-shadow: 0 0 8px rgba(255,206,58,.4); }
.phase-label { color: var(--jb-cyan); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    font-size: .9rem; }
.topbar-right { display: flex; align-items: center; gap: .75rem; }
.me-label { color: var(--jb-muted); font-size: .9rem; }
.btn-sound { background: #0c1238; border: 1px solid #34409a; border-radius: 8px; font-size: 1.1rem;
    padding: .25rem .5rem; cursor: pointer; }
.btn-sound:hover { border-color: var(--jb-gold); }

/* Musik-Steuerung */
.music-controls { display: flex; align-items: center; gap: .5rem; background: #0c1238; padding: .25rem .6rem;
    border-radius: 8px; border: 1px solid #34409a; }
.music-icon { font-size: 1rem; }
.btn-music { background: transparent; color: var(--jb-cyan); border: 1px solid var(--jb-cyan); border-radius: 6px;
    padding: .2rem .55rem; cursor: pointer; font-weight: 700; font-size: .85rem; }
.btn-music.on { background: var(--jb-cyan); color: #042c2d; }
.music-vol { width: 90px; accent-color: var(--jb-gold); }

/* ---------- Lobby ---------- */
.lobby-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.lobby-side { display: flex; flex-direction: column; gap: 1rem; }
.players-box { background: var(--jb-panel); border-radius: 12px; padding: 1rem; border: 1px solid #34409a; }
.players-box h4 { color: var(--jb-gold); text-transform: uppercase; font-size: .95rem; letter-spacing: .04em; }
.players-box ul { list-style: none; padding: 0; margin: 0; }
.players-box li { padding: .3rem 0; border-bottom: 1px solid #2a3380; }
.waiting { background: linear-gradient(180deg, var(--jb-panel2), var(--jb-panel)); padding: 2.5rem;
    text-align: center; border-radius: 12px; font-size: 1.25rem; color: var(--jb-gold); margin-top: 1rem;
    border: 1px solid #34409a; }

/* ---------- Webcams ---------- */
.webcam-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
.webcam-tile { background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; position: relative;
    border: 2px solid #34409a; }

/* Kompaktmodus: Cams teilen sich die Spaltenhöhe -> alle ohne Scroll sichtbar */
.webcam-panel.compact { display: flex; flex-direction: column; gap: .5rem; height: 100%; }
.webcam-panel.compact .webcam-tile { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
.webcam-tile.gm { border-color: var(--jb-gold); box-shadow: 0 0 14px rgba(255,206,58,.3); }
.webcam-label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.65);
    color: #fff; font-size: .75rem; padding: .15rem .4rem; z-index: 2; }
.webcam-frame { width: 100%; height: 100%; border: 0; }
.webcam-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #4a5392; }
.webcam-setup { margin-top: .8rem; background: var(--jb-panel); padding: .8rem; border-radius: 10px;
    border: 1px solid #34409a; }
.webcam-setup label { font-size: .85rem; color: var(--jb-muted); display: block; margin-bottom: .3rem; }

/* ---------- Chat ---------- */
.chat-panel { background: var(--jb-panel); border-radius: 12px; padding: .8rem; display: flex;
    flex-direction: column; height: 320px; border: 1px solid #34409a; }
.chat-log { flex: 1; overflow-y: auto; margin-bottom: .5rem; }
.chat-msg { padding: .15rem 0; font-size: .9rem; }
.chat-sender { color: var(--jb-gold); font-weight: 700; }
.chat-empty { color: var(--jb-muted); font-style: italic; }
.chat-input { display: flex; gap: .4rem; }

/* ---------- Twitch-Panel ---------- */
.twitch-panel { background: var(--jb-panel); border-radius: 12px; padding: .8rem; border: 1px solid #4b2e83;
    display: flex; flex-direction: column; gap: .5rem; }
.twitch-head { display: flex; align-items: center; justify-content: space-between; }
.twitch-logo { color: #b388ff; font-weight: 800; }
.twitch-status { font-size: .8rem; padding: .15rem .5rem; border-radius: 10px; background: #2c2350; color: var(--jb-muted); }
.twitch-status.ok { background: rgba(41,224,138,.2); color: var(--jb-green); }
.twitch-status.warn { background: rgba(255,206,58,.2); color: var(--jb-gold); }
.twitch-status.err { background: rgba(255,77,77,.2); color: #ff9d92; }
.twitch-connect { display: flex; flex-direction: column; gap: .4rem; }
.twitch-connected { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.twitch-toggle { font-size: .85rem; color: var(--jb-muted); display: flex; align-items: center; gap: .4rem; margin: 0; }
.twitch-chat { background: #0c1238; border-radius: 8px; padding: .5rem; height: 160px; overflow-y: auto; font-size: .85rem; }
.tw-line { padding: .1rem 0; }
.tw-user { color: #b388ff; font-weight: 700; }
.twitch-send { display: flex; gap: .4rem; }
.twitch-sim { font-size: .85rem; color: var(--jb-muted); }
.twitch-sim summary { cursor: pointer; }
.sim-row { display: flex; gap: .4rem; margin: .4rem 0; }
.sim-user { max-width: 110px; }

/* ---------- Voting-Balken ---------- */
.votes { background: rgba(0,0,0,.25); border: 1px solid #4b2e83; border-radius: 10px; padding: .7rem .9rem; margin: 1rem 0; }
.votes-head { color: #b388ff; font-weight: 700; margin-bottom: .5rem; }
.vote-row { display: flex; align-items: center; gap: .6rem; margin: .35rem 0; }
.vote-letter { width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; border-radius: 50%;
    background: #9146ff; color: #fff; font-weight: 800; flex: 0 0 auto; }
.vote-bar { flex: 1 1 auto; height: 14px; background: #0c1238; border-radius: 7px; overflow: hidden; }
.vote-fill { height: 100%; background: linear-gradient(90deg, #9146ff, #b388ff); transition: width .3s; }
.vote-count { width: 2rem; text-align: right; font-weight: 700; color: var(--jb-gold); flex: 0 0 auto; }

/* ---------- Board-Builder ---------- */
.builder { background: linear-gradient(180deg, var(--jb-panel2), var(--jb-panel)); border-radius: 12px;
    padding: 1rem; margin-top: 1rem; border: 1px solid #34409a; }
.builder h3 { color: var(--jb-gold); text-transform: uppercase; letter-spacing: .03em; }
.cat-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.cat-chip { background: #0c1238; color: var(--jb-text); border: 1px solid #34409a; border-radius: 20px;
    padding: .4rem 1rem; cursor: pointer; transition: all .12s; }
.cat-chip:hover:not(:disabled) { border-color: var(--jb-cyan); }
.cat-chip.sel { background: linear-gradient(180deg, var(--jb-gold), var(--jb-gold-deep)); color: #2a1c00;
    font-weight: 800; border-color: var(--jb-gold); box-shadow: 0 0 10px rgba(255,206,58,.35); }
.cat-chip:disabled { opacity: .3; cursor: not-allowed; }
.builder-actions { display: flex; gap: .6rem; }
.builder-preview { margin-top: 1rem; border-top: 1px solid #2a3380; padding-top: 1rem; }
.preview-cats { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.preview-cat { background: var(--jb-blue); color: var(--jb-gold); padding: .25rem .6rem; border-radius: 6px;
    font-size: .85rem; font-weight: 700; }

/* ---------- Board ---------- */
.board { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr);
    grid-template-rows: auto repeat(4, 1fr); gap: .5rem; height: 100%; }
.board-head {
    background: linear-gradient(180deg, #1c2c7a, var(--jb-blue-deep)); color: var(--jb-gold);
    font-weight: 900; text-align: center; padding: .9rem .3rem; border-radius: 8px; text-transform: uppercase;
    font-size: .9rem; min-height: 56px; display: flex; align-items: center; justify-content: center;
    letter-spacing: .03em; text-shadow: 0 1px 2px rgba(0,0,0,.6); border: 1px solid #2a3680;
}
.board-cell {
    background: linear-gradient(180deg, #17246b, var(--jb-blue-deep)); color: var(--jb-gold);
    font-family: var(--jb-display); font-size: clamp(1.1rem, 2.4vw, 2rem); font-weight: 900;
    border: 1px solid #2a3680; border-radius: 8px; min-height: 0; cursor: pointer;
    transition: transform .08s, filter .15s; text-shadow: 0 0 6px rgba(255,206,58,.25), 0 2px 2px rgba(0,0,0,.5);
}
.board-cell:hover:not(:disabled) { filter: brightness(1.18); transform: scale(1.03); }
.board-cell.solved { background: #0c1238; color: transparent; cursor: default; text-shadow: none;
    border-color: #1a2050; }
.board-cell:disabled { cursor: default; }

/* ---------- Scoreboard ---------- */
.scoreboard { display: flex; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.score-card { background: linear-gradient(180deg, var(--jb-panel2), var(--jb-panel)); border-radius: 12px;
    padding: .6rem 1rem; min-width: 130px; text-align: center; border: 2px solid #34409a; position: relative; }
.score-card.active { border-color: var(--jb-gold); box-shadow: 0 0 16px rgba(255,206,58,.4); }
.score-card.buzzed { border-color: var(--jb-green); box-shadow: 0 0 18px var(--jb-green); }
.score-card.offline { opacity: .5; }
.score-name { font-weight: 700; }
.score-value { font-family: var(--jb-display); font-size: 1.7rem; font-weight: 900; color: var(--jb-gold);
    text-shadow: 0 0 10px rgba(255,206,58,.4); }
.score-tag { font-size: .7rem; color: var(--jb-gold); text-transform: uppercase; letter-spacing: .05em; }
.score-tag.buzz { color: var(--jb-green); }

/* ---------- Game layout (passt ohne Scroll in den Viewport) ---------- */
.room-view.playing { height: calc(100vh - 1.6rem); display: flex; flex-direction: column; overflow: hidden; }
.room-view.playing .topbar { flex: 0 0 auto; }
.room-view.playing .scoreboard { flex: 0 0 auto; margin-bottom: .6rem; }
.game-grid { display: grid; grid-template-columns: 1fr 300px; gap: 1rem; flex: 1 1 auto; min-height: 0; }
.game-main { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.game-main > * { flex: 1 1 auto; min-height: 0; }
.game-side { min-height: 0; }

/* ---------- Question stage ---------- */
.question-stage { background: linear-gradient(180deg, #17246b, var(--jb-blue-deep)); border-radius: 16px;
    padding: 1.25rem 1.5rem; height: 100%; overflow: auto; border: 2px solid #2a3680;
    box-shadow: var(--jb-shadow); }
.q-meta { display: flex; gap: .8rem; align-items: center; margin-bottom: 1rem; }
.q-cat { background: rgba(0,0,0,.3); padding: .25rem .7rem; border-radius: 6px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .03em; }
.q-val { color: var(--jb-gold); font-family: var(--jb-display); font-size: 1.5rem; font-weight: 900; }
.q-type { color: rgba(255,255,255,.45); font-size: .8rem; margin-left: auto; text-transform: uppercase; }

.gm-answer-banner { display: flex; align-items: center; gap: .5rem; background: rgba(0,0,0,.4);
    border: 1px dashed var(--jb-gold); color: var(--jb-gold); padding: .5rem .8rem; border-radius: 8px;
    margin-bottom: 1rem; font-size: 1.05rem; }
.gm-answer-icon { font-size: 1.1rem; }

.q-text { font-size: 1.7rem; font-weight: 800; text-align: center; margin: 1.5rem 0; line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0,0,0,.4); }
.q-media { max-width: 100%; max-height: 320px; display: block; margin: 1rem auto; border-radius: 10px;
    border: 2px solid rgba(255,255,255,.2); }
.q-audio { display: block; margin: 1rem auto; width: 80%; }

.answers { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1rem 0; }
.answer { background: #0c1238; color: var(--jb-text); border: 2px solid #34409a; border-radius: 10px;
    padding: .85rem 1rem; text-align: left; font-size: 1.05rem; cursor: pointer; transition: all .12s; }
.answer:hover:not(:disabled) { border-color: var(--jb-gold); }
.answer:disabled { cursor: default; }
.answer.locked { border-color: var(--jb-gold); background: #2a2410; box-shadow: 0 0 12px rgba(255,206,58,.3); }
.answer.correct { border-color: var(--jb-green); background: rgba(41,224,138,.18);
    box-shadow: 0 0 12px rgba(41,224,138,.3); }
.answer-letter { display: inline-block; width: 1.7rem; height: 1.7rem; line-height: 1.7rem; text-align: center;
    background: linear-gradient(180deg, var(--jb-gold), var(--jb-gold-deep)); color: #2a1c00; border-radius: 50%;
    font-weight: 900; margin-right: .5rem; }

.estimate-input { display: flex; gap: .5rem; margin: 1rem 0; }
.locked-text { text-align: center; font-size: 1.15rem; margin: 1rem 0; }
.gm-solution { background: rgba(0,0,0,.3); padding: .5rem .8rem; border-radius: 6px; margin: .8rem 0;
    color: var(--jb-gold); }

.buzzer { display: block; width: 100%; background: linear-gradient(180deg, #ff6b6b, #e23030); color: #fff;
    font-family: var(--jb-display); font-size: 2.2rem; font-weight: 900; letter-spacing: .05em; border: none;
    border-radius: 14px; padding: 1.5rem; margin: 1rem 0; cursor: pointer; text-transform: uppercase;
    box-shadow: 0 7px 0 #a82a1d, 0 0 30px rgba(255,77,77,.4); animation: buzz-pulse 1.1s infinite; }
.buzzer:active:not(.disabled) { transform: translateY(5px); box-shadow: 0 2px 0 #a82a1d; }
.buzzer.disabled { background: #3a3f63; box-shadow: 0 7px 0 #20243d; cursor: not-allowed; animation: none; }
@keyframes buzz-pulse { 0%,100% { box-shadow: 0 7px 0 #a82a1d, 0 0 20px rgba(255,77,77,.35); }
    50% { box-shadow: 0 7px 0 #a82a1d, 0 0 38px rgba(255,77,77,.7); } }

.q-status { text-align: center; color: var(--jb-gold); font-style: italic; margin: 1rem 0; }
.gm-controls { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.15); padding-top: 1rem; }

/* ---------- Finished / Notfound ---------- */
.finished { background: linear-gradient(180deg, var(--jb-panel2), var(--jb-panel)); border-radius: 16px;
    padding: 2rem; text-align: center; max-width: 520px; margin: 2rem auto; border: 1px solid #34409a; }
.finished h2 { color: var(--jb-gold); font-family: var(--jb-display); }
.ranking { list-style: none; padding: 0; }
.ranking li { display: flex; justify-content: space-between; background: #0c1238; margin: .5rem 0;
    padding: .8rem 1rem; border-radius: 10px; font-size: 1.2rem; border: 1px solid #2a3380; }
.ranking li:first-child { border: 2px solid var(--jb-gold); box-shadow: 0 0 18px rgba(255,206,58,.4); }
.r-score { color: var(--jb-gold); font-family: var(--jb-display); font-weight: 900; }
.notfound { text-align: center; margin: 4rem auto; max-width: 520px;
    background: linear-gradient(180deg, var(--jb-panel2), var(--jb-panel)); padding: 2rem; border-radius: 16px;
    border: 1px solid #34409a; }
.notfound h2 { color: var(--jb-gold); }

/* ---------- Admin ---------- */
.admin-gate { max-width: 360px; margin: 4rem auto; background: var(--jb-panel); padding: 1.5rem;
    border-radius: 14px; border: 1px solid #34409a; text-align: center; }
.admin-gate h2 { color: var(--jb-gold); }
.admin-wrap { padding: .5rem; }
.admin-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.admin-top h1 { color: var(--jb-gold); }
.admin-sets { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem;
    background: var(--jb-panel); padding: .7rem; border-radius: 10px; border: 1px solid #34409a; }
.admin-sets label { color: var(--jb-muted); }
.set-select { max-width: 280px; }
.admin-status { background: rgba(41,224,138,.15); color: var(--jb-green); padding: .5rem .8rem;
    border-radius: 8px; margin-bottom: 1rem; border: 1px solid rgba(41,224,138,.3); }
.admin-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: start; }
.admin-list { background: var(--jb-panel); border-radius: 12px; padding: 1rem; border: 1px solid #34409a; }
.admin-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.q-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.q-table th { text-align: left; color: var(--jb-gold); border-bottom: 1px solid #34409a; padding: .35rem .4rem; }
.q-table td { padding: .35rem .4rem; border-bottom: 1px solid #222a55; }
.q-table tr.sel { background: rgba(255,206,58,.1); }
.q-actions { white-space: nowrap; }
.btn-mini { background: #2a3266; border: none; border-radius: 6px; padding: .2rem .45rem; cursor: pointer; font-size: .9rem; }
.btn-mini.del:hover { background: var(--jb-red); }
.csv-box { margin-top: 1rem; background: #0c1238; padding: .7rem; border-radius: 8px; }
.csv-box code { color: var(--jb-cyan); }
.csv-replace { display: block; margin-top: .5rem; color: var(--jb-muted); }
.admin-edit { background: var(--jb-panel); border-radius: 12px; padding: 1rem; border: 1px solid var(--jb-gold);
    position: sticky; top: .5rem; }
.admin-edit h3 { color: var(--jb-gold); }
.admin-edit label { display: block; margin: .6rem 0 .2rem; color: var(--jb-muted); font-size: .85rem; }
.answer-edit { display: flex; align-items: center; gap: .4rem; margin: .3rem 0; }
.ae-letter { width: 1.4rem; height: 1.4rem; line-height: 1.4rem; text-align: center; border-radius: 50%;
    background: var(--jb-gold); color: #2a1c00; font-weight: 800; flex: 0 0 auto; }
.media-preview { max-width: 100%; max-height: 160px; margin-top: .5rem; border-radius: 8px; }
.edit-actions { display: flex; gap: .5rem; margin-top: 1rem; }

@media (max-width: 800px) { .admin-grid { grid-template-columns: 1fr; } }

@media (max-width: 800px) {
    .home-cards, .lobby-grid, .game-grid { grid-template-columns: 1fr; }
    .answers { grid-template-columns: 1fr; }
    .home-title { font-size: 3.2rem; }
    .topbar { flex-wrap: wrap; }
}