/* Koops Bingo — shared shell (same visual language as Kupli Plugins) */
:root {
    --bg: #0f1115;
    --panel: #181b22;
    --panel-2: #1f242d;
    --border: #2a2f3a;
    --text: #e7e9ee;
    --muted: #8b93a4;
    --accent: #7aa2f7;
    --accent-2: #bb9af7;
    --green: #9ece6a;
    --red: #f7768e;
    --yellow: #e0af68;
    --radius: 10px;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
    display: flex; align-items: center; gap: 1.5rem;
    background: var(--panel); border-bottom: 1px solid var(--border);
    padding: 0.75rem 1.25rem;
}
.brand { color: var(--text); font-weight: 700; font-size: 1.05rem; }
.nav { display: flex; gap: 1rem; flex: 1; }
.nav a { color: var(--muted); padding: 0.25rem 0.5rem; border-radius: 6px; }
.nav a:hover { color: var(--text); background: var(--panel-2); text-decoration: none; }
.logout { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.logout span { color: var(--muted); font-size: 0.9rem; }
.logout button { background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 0.3rem 0.7rem; border-radius: 6px; cursor: pointer; }
.logout button:hover { color: var(--text); border-color: var(--accent); }

.container { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.25rem; }

h1, h2, h3 { margin-top: 0; color: var(--text); }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.2rem; margin-bottom: 0.75rem; }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; }
.row { display: flex; align-items: center; gap: 1rem; }
.grow { flex: 1; }
.right { text-align: right; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

.flash { background: rgba(158, 206, 106, 0.12); border: 1px solid var(--green); color: var(--green); border-radius: var(--radius); padding: 0.6rem 1rem; margin-bottom: 1rem; }
.error { background: rgba(247, 118, 142, 0.12); border: 1px solid var(--red); color: var(--red); border-radius: var(--radius); padding: 0.6rem 1rem; margin-bottom: 1rem; }

.btn {
    display: inline-block; background: var(--accent); color: #10131a; font-weight: 600;
    border: 1px solid transparent; border-radius: 8px; padding: 0.45rem 0.95rem;
    cursor: pointer; font-size: 0.95rem; text-decoration: none;
}
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn.secondary { background: transparent; color: var(--text); border-color: var(--border); font-weight: 500; }
.btn.secondary:hover { border-color: var(--accent); filter: none; }
.btn.danger { background: transparent; color: var(--red); border-color: var(--border); }
.btn.danger:hover { border-color: var(--red); }
.btn.small { padding: 0.25rem 0.6rem; font-size: 0.85rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 0.85rem; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); }
.table th.right { text-align: right; }
.table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table.data tbody tr:hover { background: var(--panel-2); }

.pill { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; border: 1px solid var(--border); color: var(--muted); }
.pill.draft    { color: var(--yellow); border-color: var(--yellow); }
.pill.active   { color: var(--green); border-color: var(--green); }
.pill.finished { color: var(--muted); }
.pill.ok       { color: var(--green); border-color: var(--green); }
.pill.warn     { color: var(--yellow); border-color: var(--yellow); }
.pill.bad      { color: var(--red); border-color: var(--red); }

label { display: block; margin-bottom: 0.9rem; color: var(--muted); font-size: 0.9rem; }
input[type=text], input[type=password], input[type=number], select, textarea {
    display: block; width: 100%; margin-top: 0.3rem;
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.95rem;
    font-family: inherit;
}
textarea { min-height: 8rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }

.login-card { max-width: 22rem; margin: 4rem auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }

/* CSP forbids inline style attributes (style-src 'self'), so all one-off
   layout tweaks live here as classes. JS may still set styles via CSSOM. */
.card.narrow { max-width: 28rem; }
.card.hero { max-width: 28rem; margin: 4rem auto; text-align: center; }
.row.end { justify-content: flex-end; }
.hidden { display: none; }

/* ------ bingo grids ------ */
.bingo-grid {
    display: grid; gap: 6px; margin: 1rem 0;
    grid-template-columns: repeat(var(--n, 3), 1fr);
}
.sq {
    position: relative; background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 8px; padding: 0.5rem; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 0.85rem; line-height: 1.25; cursor: pointer; user-select: none;
    overflow: hidden; overflow-wrap: break-word;
    transition: background 0.1s, border-color 0.1s;
}
@media (max-width: 600px) {
    .sq { font-size: 0.7rem; padding: 0.3rem; border-radius: 6px; }
}
.sq:hover { border-color: var(--accent); }
.sq.checked { background: rgba(122, 162, 247, 0.18); border-color: var(--accent); }
.sq.checked::after { content: "✔"; position: absolute; top: 4px; right: 7px; color: var(--accent); font-size: 0.8rem; }
.sq.readonly { cursor: default; }
.sq.readonly:hover { border-color: var(--border); }
.sq.checked.readonly:hover { border-color: var(--accent); }

.mini-grid { display: grid; gap: 2px; grid-template-columns: repeat(var(--n, 3), 12px); }
.mini-grid .m { width: 12px; height: 12px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--border); }
.mini-grid .m.on { background: var(--green); border-color: var(--green); }

/* ------ viewer card page ------ */
.stage-banner {
    background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius);
    padding: 0.6rem 1rem; margin-top: 1rem; font-weight: 600;
}
.stage-banner .sub { display: block; font-weight: 400; color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; }
.card-head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.card-head h1 { margin-bottom: 0.2rem; }
.bingo-btn {
    display: block; width: 100%; padding: 0.9rem; margin-top: 0.5rem;
    font-size: 1.15rem; font-weight: 700; border-radius: 10px; border: none; cursor: pointer;
    background: var(--green); color: #10131a;
}
.bingo-btn:disabled { background: var(--panel-2); color: var(--muted); cursor: not-allowed; }
.claim-note { margin-top: 0.6rem; font-size: 0.95rem; }
.winners-list { margin-top: 1rem; }
.winners-list .w { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.winners-list .w:last-child { border-bottom: none; }
.winners-list .w .tier { flex: 0 0 8rem; color: var(--muted); font-size: 0.9rem; }
.winners-list .w .who { font-weight: 600; }
.conn-note { color: var(--yellow); font-size: 0.85rem; margin-top: 0.5rem; display: none; }

/* ------ overview ------ */
.ov-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ov-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem; }
.ov-card .name { font-weight: 600; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; }
.ov-card .score { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.5rem; }
.ov-card.has-bingo { border-color: var(--green); }

/* ------ admin panel ------ */
.panel-cols { display: grid; gap: 1.25rem; grid-template-columns: 3fr 2fr; align-items: start; }
@media (max-width: 900px) { .panel-cols { grid-template-columns: 1fr; } }
.event-btns { display: flex; flex-direction: column; gap: 0.5rem; }
.event-btn {
    display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
    width: 100%; text-align: left; padding: 0.7rem 0.9rem; font-size: 0.98rem;
    background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer;
}
.event-btn:hover { border-color: var(--accent); }
.event-btn.logged { background: rgba(158, 206, 106, 0.15); border-color: var(--green); }
.event-btn .when { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.event-btn:disabled { opacity: 0.6; cursor: wait; }
.winner-rows { display: flex; flex-direction: column; gap: 0.7rem; }
.winner-row { display: flex; align-items: center; gap: 0.7rem; }
.winner-row .tier { flex: 0 0 7rem; color: var(--muted); font-size: 0.9rem; }
.winner-row select { flex: 1; margin-top: 0; }
.claim-list { display: flex; flex-direction: column; gap: 0.6rem; }
.claim-item { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.9rem; }
.claim-item.fresh { border-color: var(--yellow); }
.claim-item.acked { opacity: 0.55; }
.claim-item .top { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.25rem; }
.claim-item .who { font-weight: 600; }