/* Moonhowl — werewolf at camp. Dark forest night theme. */
:root {
    --bg: #0a0e14;
    --bg2: #101722;
    --panel: #141d2b;
    --panel2: #1a2535;
    --line: #26344a;
    --text: #dce6f2;
    --muted: #7e8ea3;
    --moon: #ffd24d;
    --moon-dim: #c9a53d;
    --blood: #ff4d6d;
    --forest: #4dffc3;
    --night: #7a9cff;
    --warn: #ff8a3d;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    background: var(--bg);
    background-image: radial-gradient(ellipse 60% 40% at 70% -5%, #1b2a4a66, transparent),
                      radial-gradient(ellipse 40% 30% at 20% 110%, #14301f44, transparent);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
}
#app { min-height: 100%; }

/* ── shared bits ─────────────────────────────────────────────── */
.game-title {
    font-size: 2.4rem; letter-spacing: 0.12em; text-align: center;
    color: var(--moon); text-shadow: 0 0 24px #ffd24d44; margin: 18px 0 6px;
}
.btn {
    display: inline-block; border: 1px solid var(--line); border-radius: 10px;
    background: var(--panel2); color: var(--text); font-size: 0.95rem;
    padding: 9px 16px; cursor: pointer; text-decoration: none; text-align: center;
    transition: background 0.15s, transform 0.05s;
}
.btn:hover { background: #223049; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
    background: linear-gradient(180deg, #ffd24d, #e0a83a); color: #241a05;
    border-color: #a8852f; font-weight: 700;
}
.btn-primary:hover { background: linear-gradient(180deg, #ffe07a, #eab545); }
.btn-large { font-size: 1.15rem; padding: 14px 26px; width: 100%; }
.btn-sm { font-size: 0.8rem; padding: 5px 10px; }
.card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 14px; padding: 18px 20px;
}
.card h2 { font-size: 1.1rem; margin-bottom: 12px; color: var(--moon); }
.muted { color: var(--muted); }
.small { font-size: 0.8rem; }
.mono { font-family: Consolas, monospace; }
.warn { color: var(--warn); }
.hidden { display: none !important; }
.error-banner {
    background: #3a1420; border: 1px solid var(--blood); color: #ffb3c0;
    border-radius: 10px; padding: 10px 14px; margin: 12px auto; max-width: 560px;
    text-align: center;
}
input, select {
    width: 100%; padding: 10px 12px; margin: 4px 0 12px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--bg2); color: var(--text);
    font-size: 1rem;
}
input:focus, select:focus { outline: 2px solid var(--moon-dim); border-color: transparent; }
label { font-size: 0.85rem; color: var(--muted); }
.check-row { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; cursor: pointer; }
.check-row input { width: auto; margin: 0; }

/* ── home ────────────────────────────────────────────────────── */
.home-container { max-width: 900px; margin: 0 auto; padding: 12px 16px 40px; }
.hero { margin-bottom: 18px; }
.tagline { text-align: center; color: var(--muted); line-height: 1.5; }
.tagline-hot { color: var(--blood); font-weight: 600; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 700px) { .home-grid { grid-template-columns: 1fr; } }
.registry-head { margin: 18px 0 8px; font-size: 0.95rem; color: var(--moon); }
.live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--forest); box-shadow: 0 0 8px var(--forest);
    animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: 0.4; } }
.room-browser { list-style: none; max-height: 220px; overflow-y: auto; }
.room-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-bottom: 1px solid var(--line); cursor: pointer;
}
.room-row:hover { background: var(--panel2); }
.room-row .room-code { font-family: Consolas, monospace; font-weight: 700; color: var(--moon); }
.room-row .muted { flex: 1; font-size: 0.85rem; }
.empty-msg { padding: 10px; }
.leaderboard-card { margin-bottom: 16px; overflow-x: auto; }
.leaderboard { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.leaderboard th {
    text-align: left; color: var(--muted); font-weight: 600; padding: 6px 8px;
    border-bottom: 1px solid var(--line);
}
.leaderboard td { padding: 7px 8px; border-bottom: 1px solid #1c2738; }
.crew-names { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-camp { color: var(--forest); font-weight: 600; }
.win-pack { color: var(--blood); font-weight: 600; }
.win-jester { color: #d9b8ff; font-weight: 600; }
.how-to h2 { color: var(--moon); font-size: 1.1rem; margin: 10px 0 12px; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.how-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    padding: 14px;
}
.how-icon { font-size: 1.5rem; display: block; margin-bottom: 6px; }
.how-card b { color: var(--text); }
.how-card p { color: var(--muted); font-size: 0.85rem; margin-top: 4px; line-height: 1.45; }
.home-footer { text-align: center; margin-top: 26px; }

/* ── lobby ───────────────────────────────────────────────────── */
.lobby-container { max-width: 520px; margin: 0 auto; padding: 12px 16px 40px; text-align: center; }
.room-code-display { font-size: 1.1rem; margin: 10px 0 4px; }
.room-code-display .code {
    font-family: Consolas, monospace; font-size: 1.5rem; font-weight: 800;
    color: var(--moon); letter-spacing: 0.15em; margin: 0 6px;
}
.share-hint { color: var(--muted); font-size: 0.88rem; margin-bottom: 16px; line-height: 1.5; }
.lobby-card { text-align: left; margin-bottom: 16px; }
.player-list { list-style: none; }
.player-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 6px;
    border-bottom: 1px solid #1c2738;
}
.player-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.player-name { flex: 1; text-align: left; }
.host-badge {
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em;
    background: var(--moon); color: #241a05; border-radius: 6px; padding: 2px 6px;
}
.start-hint { color: var(--muted); font-size: 0.85rem; margin-top: 10px; }
.waiting-msg { color: var(--muted); margin-top: 18px; }
.blink { animation: blinkA 1.6s infinite; }
@keyframes blinkA { 50% { opacity: 0.45; } }

/* ── game screen ─────────────────────────────────────────────── */
.game-container { max-width: 1100px; margin: 0 auto; padding: 8px 10px 20px; }
.topbar {
    display: flex; align-items: center; gap: 10px; padding: 8px 6px;
    border-bottom: 1px solid var(--line); margin-bottom: 10px;
}
.topbar-title { font-weight: 800; letter-spacing: 0.08em; color: var(--moon); }
.phase-chip {
    font-size: 0.82rem; font-weight: 700; padding: 4px 12px; border-radius: 999px;
    background: var(--panel2); border: 1px solid var(--line);
}
.phase-chip.night { background: #15204a; color: var(--night); border-color: #2b3a77; }
.phase-chip.day { background: #4a3a15; color: var(--moon); border-color: #776a2b; }
.phase-chip.dawn, .phase-chip.dusk { background: #3a2415; color: var(--warn); border-color: #77502b; }
.phase-chip.results { background: #153a2a; color: var(--forest); border-color: #2b7755; }
.phase-timer { font-family: Consolas, monospace; font-size: 1.05rem; color: var(--text); flex: 1; }
.phase-timer.low { color: var(--blood); font-weight: 700; }

.game-grid {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px;
    align-items: start;
}
@media (max-width: 900px) { .game-grid { grid-template-columns: 1fr 1fr; } .panel-players { grid-column: 1 / -1; } }
@media (max-width: 640px) { .game-grid { grid-template-columns: 1fr; } }
.panel {
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    padding: 12px; min-height: 120px;
}
.panel h3 { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 10px; }

.player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.pcard {
    position: relative; border: 1px solid var(--line); border-radius: 10px;
    background: var(--bg2); padding: 10px 8px 8px; text-align: center;
    cursor: default; transition: border-color 0.15s, transform 0.08s;
}
.pcard.selectable { cursor: pointer; }
.pcard.selectable:hover { border-color: var(--moon-dim); transform: translateY(-1px); }
.pcard.selected { border-color: var(--moon); box-shadow: 0 0 0 1px var(--moon), 0 0 14px #ffd24d33; }
.pcard.dead { opacity: 0.45; filter: grayscale(0.8); }
.pcard.me { outline: 1px dashed #3c4f6b; }
.pcard .pdot { width: 22px; height: 22px; border-radius: 50%; margin: 0 auto 6px; }
.pcard .pname { font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .ptag { font-size: 0.68rem; color: var(--muted); min-height: 1em; }
.pcard .pdone { position: absolute; top: 5px; right: 7px; font-size: 0.7rem; }
.pcard .pvotes {
    display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; min-height: 10px; margin-top: 5px;
}
.pcard .vote-pip { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 4px #0008; }
.pcard .grave { font-size: 1.1rem; }
.action-hint {
    margin-top: 10px; font-size: 0.85rem; color: var(--moon);
    min-height: 1.3em; text-align: center;
}
.wolf-tools { display: flex; gap: 8px; margin-top: 8px; justify-content: center; }
.btn-kind { font-size: 0.82rem; }
.btn-kind.active { border-color: var(--blood); color: var(--blood); font-weight: 700; }
.skip-row { margin-top: 10px; text-align: center; }

.feed { list-style: none; max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column-reverse; }
.feed li { padding: 7px 4px; border-bottom: 1px solid #1c2738; font-size: 0.86rem; line-height: 1.4; }
.feed .f-death { color: var(--blood); }
.feed .f-night { color: var(--night); }
.feed .f-day { color: var(--moon); }
.feed .f-calm { color: var(--forest); }
.feed .f-vote_out { color: var(--warn); }
.feed .f-win_camp { color: var(--forest); font-weight: 700; }
.feed .f-win_pack { color: var(--blood); font-weight: 700; }
.feed .f-win_jester { color: #d9b8ff; font-weight: 700; }
.feed .f-last_words { color: var(--moon); font-style: italic; }
.feed .f-private { color: #d9b8ff; }
.feed .f-private::before { content: '🔒 '; }

.chat-log { list-style: none; max-height: 38vh; overflow-y: auto; display: flex; flex-direction: column-reverse; }
.chat-log li { padding: 5px 4px; font-size: 0.86rem; line-height: 1.35; word-break: break-word; }
.chat-log .c-name { font-weight: 700; margin-right: 5px; }
.chat-log .c-wolf { background: #2a102033; border-left: 2px solid var(--blood); padding-left: 7px; }
.chat-log .c-dead { opacity: 0.65; font-style: italic; }
.chat-log .c-sys { color: var(--muted); font-style: italic; }
.chat-form { display: flex; gap: 6px; margin-top: 8px; }
.chat-form input { margin: 0; flex: 1; }
.chat-form input:disabled { opacity: 0.5; }

/* ── overlays ────────────────────────────────────────────────── */
.overlay {
    position: fixed; inset: 0; background: #060910dd; z-index: 50;
    display: flex; align-items: center; justify-content: center; padding: 18px;
}
.overlay-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
    padding: 26px 24px; max-width: 460px; width: 100%; text-align: center;
    max-height: 86vh; overflow-y: auto;
    box-shadow: 0 10px 60px #000a;
}
.role-card .role-icon { font-size: 3.2rem; margin-bottom: 8px; }
.role-card h2 { color: var(--moon); margin-bottom: 10px; }
.role-card p { color: var(--text); font-size: 0.95rem; line-height: 1.55; margin-bottom: 12px; }
.role-pack { color: var(--blood); font-weight: 600; }
.results-card h2 { margin-bottom: 4px; }
.results-card h2.camp { color: var(--forest); }
.results-card h2.pack { color: var(--blood); }
.results-card h2.jester { color: #d9b8ff; }
.recap { text-align: left; margin: 10px 0 14px; border: 1px solid var(--line);
    border-radius: 10px; padding: 8px 12px; background: var(--bg2); }
.recap summary { cursor: pointer; color: var(--moon); font-size: 0.9rem;
    font-weight: 600; }
.recap ul { list-style: none; margin-top: 8px; max-height: 32vh; overflow-y: auto; }
.recap li { padding: 4px 2px; font-size: 0.82rem; color: var(--muted);
    border-bottom: 1px solid #1c2738; line-height: 1.4; }
.recap li:last-child { border-bottom: none; }
.reveal-list { list-style: none; text-align: left; margin: 14px 0; }
.reveal-list li {
    display: flex; align-items: center; gap: 9px; padding: 7px 4px;
    border-bottom: 1px solid #1c2738; font-size: 0.9rem;
}
.reveal-list .pdot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.reveal-list .r-name { flex: 1; }
.reveal-list .r-role { color: var(--muted); }
.reveal-list .r-role.wolf { color: var(--blood); font-weight: 700; }
.reveal-list .r-fate { font-size: 0.75rem; color: var(--muted); }
.results-actions { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }

.toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--panel2); border: 1px solid var(--moon-dim); color: var(--text);
    border-radius: 12px; padding: 10px 18px; font-size: 0.9rem; z-index: 60;
    box-shadow: 0 6px 30px #000b; max-width: 90vw; text-align: center;
}

/* Night mode tint on the whole board */
.game-container.is-night .panel { background: #111a2c; }
.game-container.is-night .topbar-title { color: var(--night); }