/* Code Red — Cold War dossier theme (mobile-first) */

:root {
    --d-bg: #e8e4df;
    --d-bg-grid: rgba(90, 82, 74, 0.06);
    --d-paper: #fcfcf9;
    --d-paper-dim: #f5f2ed;
    --d-ink: #2b2622;
    --d-muted: #5c5650;
    --d-red: #a33333;
    --d-red-dark: #8b2929;
    --d-blue-intel: #1e3a5f;
    --d-green-action: #2d5a3d;
    --d-green-muted: #3d6b4f;
    --d-brown: #8b7355;
    --d-folder-border: #a0826d;
    --d-dash: rgba(43, 38, 34, 0.35);
    --d-font-mono: "Courier Prime", "Courier New", monospace;
    --d-font-display: "Newsreader", "Georgia", serif;
    --d-font-stamp: "Special Elite", "Courier New", monospace;
    --d-radius: 2px;
    --d-shadow-folder: 0 12px 40px rgba(43, 38, 34, 0.18);
}

.dossier-body {
    font-family: var(--d-font-mono);
    color: var(--d-ink);
    background-color: var(--d-bg);
    background-image:
        linear-gradient(var(--d-bg-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--d-bg-grid) 1px, transparent 1px);
    background-size: 24px 24px;
    min-height: 100vh;
    padding: 16px 12px 32px;
}

.dossier-body .container {
    max-width: 420px;
    margin: 0 auto;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* ——— Shell ——— */
.dossier-shell {
    max-width: 420px;
    margin: 0 auto;
}

/* ——— Manila folder card ——— */
.dossier-folder {
    position: relative;
    background-color: #fdfcfa;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(43, 38, 34, 0.055) 1px, transparent 0),
        linear-gradient(var(--d-bg-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--d-bg-grid) 1px, transparent 1px);
    background-size:
        14px 14px,
        24px 24px,
        24px 24px;
    border: 2px solid var(--d-folder-border);
    box-shadow: var(--d-shadow-folder);
    padding: 22px 18px 28px;
    margin-top: 28px;
}

.dossier-folder--session {
    margin-top: 24px;
}

.dossier-folder--gameover {
    margin-top: 12px;
}

.dossier-folder--session > .game-header:first-child {
    margin-top: 4px;
}

.dossier-tab {
    position: absolute;
    top: -14px;
    left: 12px;
    background: #e8dcc8;
    border: 2px solid var(--d-folder-border);
    border-bottom: none;
    padding: 6px 14px 4px;
    font-family: var(--d-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--d-muted);
}

.dossier-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.dossier-meta-row--tight {
    margin-bottom: 6px;
}

.dossier-meta {
    font-family: var(--d-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--d-ink);
}

.dossier-stamp {
    display: inline-block;
    font-family: var(--d-font-stamp);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    padding: 6px 10px;
    border: 2px solid var(--d-red);
    color: var(--d-red);
    transform: rotate(-2deg);
    text-transform: uppercase;
}

.dossier-stamp--blue {
    border-color: var(--d-blue-intel);
    color: var(--d-blue-intel);
}

.dossier-stamp--dark {
    border-color: var(--d-ink);
    color: var(--d-ink);
    transform: none;
    font-family: var(--d-font-mono);
    font-size: 0.65rem;
}

.dossier-stamp--outline {
    transform: none;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
}

.dossier-hr {
    border: none;
    border-top: 1px dashed var(--d-dash);
    margin: 12px 0 16px;
}

.dossier-hr--fine {
    margin: 6px 0 12px;
}

.dossier-kicker {
    font-family: var(--d-font-display);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--d-muted);
    margin-bottom: 6px;
}

.dossier-brand {
    font-family: var(--d-font-display);
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--d-red);
    letter-spacing: 0.02em;
    margin: 0 0 8px;
    text-align: left;
}

.dossier-lede {
    font-family: var(--d-font-mono);
    font-size: 0.85rem;
    color: var(--d-muted);
    line-height: 1.45;
    margin-bottom: 22px;
}

.dossier-h2 {
    font-family: var(--d-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--d-ink);
    margin: 0 0 14px;
    letter-spacing: 0.04em;
}

/* ——— Forms ——— */
.dossier-form .form-group {
    margin-bottom: 16px;
}

.dossier-form label,
.dossier-label-caps {
    display: block;
    font-family: var(--d-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--d-ink);
    margin-bottom: 8px;
}

.dossier-form input[type="text"],
.dossier-form input[type="number"],
.dossier-input {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--d-font-mono);
    font-size: 0.95rem;
    border: 1px solid rgba(43, 38, 34, 0.28);
    border-radius: var(--d-radius);
    background: var(--d-paper-dim);
    color: var(--d-ink);
}

.dossier-form input:focus {
    outline: 2px solid rgba(163, 51, 51, 0.35);
    border-color: var(--d-red);
}

.dossier-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dossier-hint-red {
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--d-red);
    font-family: var(--d-font-mono);
}

.dossier-hint-red::before {
    content: "▶ ";
}

.btn-dossier-primary {
    width: 100%;
    margin-top: 8px;
    padding: 16px 20px;
    font-family: var(--d-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--d-red);
    border: none;
    border-radius: var(--d-radius);
    cursor: pointer;
    box-shadow: 0 4px 0 var(--d-red-dark);
}

.btn-dossier-primary:hover {
    filter: brightness(1.05);
}

.btn-dossier-dark {
    margin-top: 16px;
    width: 100%;
    padding: 14px 18px;
    font-family: var(--d-font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--d-ink);
    border: none;
    border-radius: var(--d-radius);
    cursor: pointer;
}

.btn-dossier-dark:hover {
    filter: brightness(1.06);
}

.btn-dossier-primary:active {
    transform: translateY(2px);
    box-shadow: none;
}

.btn-dossier-green {
    background: var(--d-green-action);
    box-shadow: 0 4px 0 #1f3d2a;
}

.btn-dossier-green:hover {
    filter: brightness(1.06);
}

.btn-dossier-ghost {
    font-family: var(--d-font-mono);
    font-size: 0.75rem;
    padding: 10px 14px;
    border: 2px solid rgba(43, 38, 34, 0.35);
    background: var(--d-paper);
    color: var(--d-ink);
    cursor: pointer;
    border-radius: var(--d-radius);
    white-space: nowrap;
}

.btn-dossier-ghost:hover {
    border-color: var(--d-red);
    color: var(--d-red);
}

/* Post-create info */
.dossier-post-create {
    padding: 16px;
    background: var(--d-paper-dim);
    border: 1px dashed var(--d-dash);
    margin-top: 16px;
}

.dossier-post-create h3 {
    font-family: var(--d-font-display);
    font-size: 1rem;
    margin-bottom: 10px;
}

.dossier-error {
    margin-top: 12px;
    padding: 12px;
    background: #fdeaea;
    border: 1px solid var(--d-red);
    color: var(--d-red-dark);
    font-size: 0.85rem;
    border-radius: var(--d-radius);
}

/* ——— Lobby / cell code ——— */
.dossier-cell-box {
    border: 2px dashed rgba(43, 38, 34, 0.35);
    padding: 14px;
    margin-bottom: 18px;
}

.dossier-cell-label {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--d-muted);
    margin-bottom: 8px;
}

.dossier-code-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.dossier-code-value {
    font-family: var(--d-font-stamp);
    font-size: 1.45rem;
    letter-spacing: 0.18em;
    color: var(--d-red);
}

.dossier-roster-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 18px 0 12px;
}

.dossier-h3 {
    font-family: var(--d-font-display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin: 0;
}

.dossier-roster-pill {
    font-family: var(--d-font-mono);
    font-size: 0.65rem;
    padding: 6px 10px;
    border: 2px solid var(--d-ink);
    background: var(--d-ink);
    color: #fff;
    letter-spacing: 0.08em;
}

/* Roster list (waiting + in-game) */
.dossier-roster {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dossier-roster li,
.dossier-roster-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff;
    border-left: 4px solid var(--d-red);
    box-shadow: 0 1px 0 rgba(43, 38, 34, 0.08);
    font-family: var(--d-font-mono);
    font-size: 0.9rem;
}

.dossier-roster-num {
    font-weight: 700;
    color: var(--d-muted);
    min-width: 1.5rem;
}

.dossier-roster-you {
    font-family: var(--d-font-stamp);
    font-size: 0.55rem;
    margin-left: auto;
    padding: 4px 8px;
    border: 2px solid var(--d-red);
    color: var(--d-red);
    transform: rotate(-3deg);
}

.dossier-waiting-title {
    font-family: var(--d-font-display);
    font-size: 1.15rem;
    margin: 8px 0 10px;
}

.dossier-quiet {
    font-family: var(--d-font-mono);
    font-size: 0.85rem;
    color: var(--d-muted);
}

/* Join gate (invite link) */
.join-gate-overlay {
    background: rgba(232, 228, 223, 0.96) !important;
    background-image:
        linear-gradient(rgba(90, 82, 74, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(90, 82, 74, 0.05) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
}

.join-gate-card {
    border: 2px solid var(--d-folder-border) !important;
    box-shadow: var(--d-shadow-folder) !important;
    background: var(--d-paper) !important;
    border-radius: var(--d-radius) !important;
}

.join-gate-card h2 {
    font-family: var(--d-font-display);
    color: var(--d-red);
}

.join-gate-card button[type="submit"] {
    width: 100%;
    padding: 14px 18px;
    margin-top: 4px;
    font-family: var(--d-font-display);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--d-red);
    border: none;
    border-radius: var(--d-radius);
    cursor: pointer;
    box-shadow: 0 4px 0 var(--d-red-dark);
}

/* ——— In-game header (default + phases) ——— */
.dossier-body .game-header {
    border: 2px dashed var(--d-dash);
    padding: 14px;
    margin-bottom: 16px;
    background: var(--d-paper-dim);
}

.dossier-phase-strip {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.dossier-phase-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    color: var(--d-muted);
    text-transform: uppercase;
}

.dossier-phase-title {
    font-family: var(--d-font-display);
    font-size: 1.35rem;
    font-weight: 800;
    margin: 4px 0 0;
    line-height: 1.15;
}

.dossier-timer-box {
    border: 2px dashed var(--d-red);
    padding: 8px 12px;
    text-align: center;
    min-width: 96px;
}

.dossier-timer-clock {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    color: var(--d-muted);
}

.dossier-timer-big {
    font-family: var(--d-font-mono);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--d-red);
}

.dossier-timer-box--warn {
    border-color: #b8860b;
    background: rgba(184, 134, 11, 0.08);
}

.dossier-timer-box--urgent {
    border-color: var(--d-red);
    background: rgba(163, 51, 51, 0.12);
    animation: dossier-pulse-timer 1s ease-in-out infinite;
}

@keyframes dossier-pulse-timer {
    50% {
        opacity: 0.88;
    }
}

.dossier-voting-hint {
    font-family: var(--d-font-mono);
    font-size: 0.78rem;
    color: var(--d-muted);
    margin: 0 0 14px;
    line-height: 1.45;
}

.dossier-voting-hint::before {
    content: "▶ ";
    color: var(--d-ink);
}

/* Role strip — allegiance panel */
.dossier-body .role-display.dossier-role-panel {
    border-width: 2px;
    border-style: solid;
    padding: 14px;
    margin-bottom: 14px;
}

.dossier-role-panel--intel {
    border-color: var(--d-blue-intel);
    background: rgba(30, 58, 95, 0.06);
}

.dossier-role-panel--hostile {
    border-color: var(--d-red);
    background: rgba(163, 51, 51, 0.06);
}

.dossier-role-round {
    font-size: 0.72rem !important;
    margin-bottom: 8px !important;
}

.dossier-body .role-display h3 {
    font-family: var(--d-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--d-muted);
    margin-bottom: 8px;
}

.dossier-role-stamp {
    display: inline-block;
    font-family: var(--d-font-stamp);
    font-size: 1.25rem;
    padding: 10px 14px;
    border: 3px double var(--d-ink);
    transform: rotate(-4deg);
    margin: 8px 0;
}

.dossier-role-stamp.good {
    border-color: var(--d-blue-intel);
    color: var(--d-blue-intel);
}

.dossier-role-stamp.bad {
    border-color: var(--d-red);
    color: var(--d-red);
}

/* Evil playing view overrides */
.dossier-body .evil-top-bar {
    border-bottom: 1px dashed var(--d-dash);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.dossier-body .evil-card {
    border: 2px solid rgba(163, 51, 51, 0.45);
    background: var(--d-paper);
    border-radius: var(--d-radius);
}

.dossier-body .evil-card-task {
    border-left: 6px solid var(--d-red);
}

.dossier-body .evil-label {
    font-family: var(--d-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--d-muted);
}

.dossier-body .evil-task-text {
    font-family: var(--d-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1.35;
}

.dossier-body .evil-btn-mission {
    background: var(--d-red);
    border-radius: var(--d-radius);
    font-family: var(--d-font-display);
    letter-spacing: 0.06em;
}

/* Discussion & vote reveal — strip legacy blues/yellows */
.dossier-body #discussionSection {
    background: var(--d-paper-dim) !important;
    border: 2px dashed var(--d-dash) !important;
    border-radius: var(--d-radius) !important;
}

.dossier-body #badPlayerEliminationReveal {
    background: rgba(163, 51, 51, 0.08) !important;
    border: 2px solid var(--d-red) !important;
    border-radius: var(--d-radius) !important;
}

.dossier-body #voteRevealSection {
    background: var(--d-paper-dim) !important;
    border: 2px solid var(--d-brown) !important;
    border-radius: var(--d-radius) !important;
}

.dossier-body #voteRevealSection h2,
.dossier-body .dossier-discussion h3 {
    font-family: var(--d-font-display);
}

.dossier-discussion {
    background: var(--d-paper-dim) !important;
    padding: 18px !important;
    border-radius: var(--d-radius) !important;
    margin-top: 18px !important;
    border: 2px dashed var(--d-brown) !important;
}

.dossier-body #voteResult {
    font-family: var(--d-font-mono);
    font-size: 0.82rem;
    color: var(--d-muted);
    margin-top: 12px;
}

.dossier-body #endDiscussionBtn {
    background: var(--d-ink) !important;
    font-family: var(--d-font-display);
    letter-spacing: 0.08em;
    border-radius: var(--d-radius) !important;
}

.dossier-body #nextVoteRevealBtn {
    background: var(--d-brown) !important;
    color: #fff !important;
    font-family: var(--d-font-display);
}

.dossier-body #finishVoteRevealBtn {
    background: var(--d-green-action) !important;
    font-family: var(--d-font-display);
}

.dossier-body #eliminationRevealDisplay {
    background: rgba(163, 51, 51, 0.08) !important;
    border: 2px solid var(--d-red) !important;
}

.dossier-body #startRoundBtn {
    background: var(--d-green-action) !important;
    font-family: var(--d-font-display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Voting grid */
.dossier-body .vote-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.dossier-body .vote-card {
    border: 2px solid rgba(43, 38, 34, 0.25);
    background: var(--d-paper);
    padding: 12px;
    text-align: center;
    cursor: pointer;
    border-radius: var(--d-radius);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dossier-body .vote-card:hover {
    border-color: var(--d-red);
}

.dossier-body .vote-card-number {
    font-family: var(--d-font-stamp);
    font-size: 1.5rem;
    color: var(--d-red);
}

.dossier-body .vote-card-name {
    font-family: var(--d-font-display);
    font-weight: 700;
    margin: 8px 0;
}

.dossier-body .vote-card-tap-hint {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--d-muted);
}

/* Players list (HTML ul in-game) */
.dossier-body .players-list h3 {
    font-family: var(--d-font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.dossier-body .players-list ul {
    list-style: none;
    padding: 0;
}

.dossier-body .players-list li {
    padding: 10px 12px;
    margin-bottom: 6px;
    border-left: 4px solid var(--d-blue-intel);
    background: #fff;
    font-family: var(--d-font-mono);
    font-size: 0.88rem;
}

/* Game over */
.dossier-body .game-over-panel {
    border: 3px solid var(--d-green-action);
    background: var(--d-paper);
    box-shadow: var(--d-shadow-folder);
}

.dossier-body .game-over-headline {
    font-family: var(--d-font-display);
}

/* Utility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.dossier-voting-wrap {
    margin-top: 18px;
    padding: 16px;
    border: 2px dashed var(--d-dash);
    background: var(--d-paper-dim);
    border-radius: var(--d-radius);
}

.dossier-body #votingSection .vote-cards {
    margin-top: 12px;
}

.join-gate-card .dossier-tab {
    position: absolute;
    top: -14px;
    left: 12px;
}

.join-gate-card {
    position: relative;
    margin-top: 20px;
}

.join-gate-card .dossier-form {
    margin-top: 8px;
}

.join-gate-card .dossier-input {
    margin-bottom: 4px;
}

/* Suspects list — US intel (blue rail) vs default (red) */
.dossier-roster--intel li {
    border-left-color: var(--d-blue-intel);
}

/* ——— Debrief / casualty (image 06 · DEBRIEF) ——— */
.dossier-casualty-box {
    position: relative;
    border: 2px solid var(--d-red);
    padding: 18px 16px 20px;
    margin-bottom: 18px;
    text-align: center;
    background: rgba(163, 51, 51, 0.06);
    overflow: visible;
}

.dossier-stamp-casualty {
    position: absolute;
    top: -10px;
    right: 8px;
    font-family: var(--d-font-stamp);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    color: var(--d-red);
    border: 2px solid var(--d-red);
    padding: 6px 10px;
    transform: rotate(8deg);
    background: rgba(252, 252, 249, 0.95);
    text-transform: uppercase;
}

.join-gate-dossier-title {
    font-family: var(--d-font-display);
    color: var(--d-red);
    margin-bottom: 8px;
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
}

.dossier-intel-brief {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--d-dash);
}

.dossier-intel-brief .good-player-banner-text {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--d-ink);
}

.dossier-other-spies {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--d-dash);
}

.dossier-other-spies-label {
    font-weight: 700;
    color: var(--d-red);
    margin-bottom: 8px;
    font-family: var(--d-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

.dossier-other-spies-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dossier-body .dossier-poison-panel .evil-card-vote-head {
    align-items: flex-start;
}

.dossier-tribunal-heading {
    letter-spacing: 0.04em;
}

.dossier-casualty-label {
    font-family: var(--d-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--d-red);
    margin-bottom: 8px;
}

.dossier-casualty-name {
    font-family: var(--d-font-display);
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--d-red);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dossier-casualty-sub {
    font-family: var(--d-font-mono);
    font-size: 0.78rem;
    color: var(--d-muted);
    margin-top: 10px;
}

.dossier-debrief-inset {
    border: 2px dashed var(--d-dash);
    padding: 14px 16px;
    margin-top: 14px;
    background: rgba(252, 252, 249, 0.65);
}

.dossier-debrief-inset h4 {
    font-family: var(--d-font-display);
    font-size: 0.95rem;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}

.dossier-debrief-inset p {
    font-family: var(--d-font-mono);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--d-ink);
}

.dossier-discussion > h3.dossier-discussion-title {
    font-family: var(--d-font-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
}

.dossier-discussion-lead {
    font-family: var(--d-font-mono);
    font-size: 0.85rem;
    color: var(--d-muted);
    margin-bottom: 12px;
    line-height: 1.45;
}

/* ——— Vote reveal / ballot (08 · REVEAL) ——— */
.dossier-ballot-screen {
    text-align: left !important;
    padding: 18px !important;
    margin-top: 18px !important;
    border: 2px solid var(--d-brown) !important;
    border-radius: var(--d-radius) !important;
    background: var(--d-paper-dim) !important;
}

.dossier-ballot-screen > h2 {
    font-family: var(--d-font-display);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.dossier-ballot-inner {
    border: 1px solid rgba(43, 38, 34, 0.2);
    background: #f0ebe5;
    padding: 16px 14px;
    margin-bottom: 14px;
}

.dossier-ballot-meta {
    font-family: var(--d-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    color: var(--d-muted);
    margin-bottom: 10px;
}

.dossier-ballot-accuser {
    font-family: var(--d-font-display);
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.dossier-reveal-stamp {
    display: inline-block;
    font-family: var(--d-font-stamp);
    font-size: 1.75rem;
    letter-spacing: 0.12em;
    color: var(--d-red);
    border: 3px double var(--d-red);
    padding: 12px 20px;
    margin: 8px 0 12px;
    transform: rotate(-6deg);
    text-transform: uppercase;
}

.dossier-ballot-await {
    font-family: var(--d-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: var(--d-muted);
    margin-top: 8px;
}

.btn-dossier-ballot-next {
    width: 100%;
    margin-top: 8px;
    padding: 14px 18px;
    font-family: var(--d-font-display);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--d-ink);
    border: none;
    border-radius: var(--d-radius);
    cursor: pointer;
}

.btn-dossier-ballot-final {
    width: 100%;
    margin-top: 8px;
    padding: 14px 18px;
    font-family: var(--d-font-display);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--d-green-action);
    border: none;
    border-radius: var(--d-radius);
    cursor: pointer;
}

/* ——— Verdict / start round (elimination card) ——— */
.dossier-verdict-casualty {
    position: relative;
    border: 2px solid var(--d-red);
    padding: 18px;
    margin-bottom: 18px;
    text-align: center;
    background: rgba(163, 51, 51, 0.07);
}

.dossier-verdict-title {
    font-family: var(--d-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.dossier-verdict-name {
    font-family: var(--d-font-display);
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--d-red);
    text-transform: uppercase;
}

.dossier-verdict-sub {
    font-family: var(--d-font-mono);
    font-size: 0.82rem;
    color: var(--d-muted);
    margin-top: 8px;
}

.dossier-start-round-wrap {
    text-align: center;
    margin-top: 8px;
}

.btn-dossier-next-round {
    width: 100%;
    max-width: 100%;
    padding: 16px 20px;
    font-family: var(--d-font-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--d-green-action);
    border: none;
    border-radius: var(--d-radius);
    cursor: pointer;
    box-shadow: 0 4px 0 #1f3d2a;
}

/* ——— Evil flow (Soviet mission screen) ——— */
.dossier-evil-flow .evil-card-team-head,
.dossier-evil-flow .evil-card-vote-head {
    align-items: center;
}

.dossier-strip--hostile {
    border: 2px solid var(--d-red);
    padding: 14px;
    margin-bottom: 14px;
    background: rgba(163, 51, 51, 0.06);
}

.dossier-strip-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.dossier-strip-label {
    font-family: var(--d-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--d-muted);
    margin-bottom: 4px;
}

.dossier-strip-sub {
    font-family: var(--d-font-mono);
    font-size: 0.78rem;
    color: var(--d-ink);
}

.dossier-stamp-rotate {
    font-family: var(--d-font-stamp);
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    color: var(--d-red);
    border: 3px solid var(--d-red);
    padding: 10px 12px;
    transform: rotate(-12deg);
    text-transform: uppercase;
    flex-shrink: 0;
    margin-top: 4px;
    background: rgba(252, 252, 249, 0.9);
}

.dossier-cover-label {
    margin-bottom: 8px !important;
}

.dossier-cover-quote {
    font-style: italic;
}

.btn-dossier-mission {
    width: 100%;
    margin-top: 12px;
    padding: 14px 18px;
    font-family: var(--d-font-display);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--d-red);
    border: none;
    border-radius: var(--d-radius);
    cursor: pointer;
    box-shadow: 0 4px 0 var(--d-red-dark);
}

.btn-dossier-mission.hidden {
    display: none !important;
}

.dossier-mission-logged {
    margin-top: 14px;
    padding: 12px 14px;
    font-family: var(--d-font-display);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--d-green-action);
    border: 2px solid var(--d-green-action);
    background: rgba(45, 90, 61, 0.06);
}

.dossier-cell-progress-box {
    border-style: dashed !important;
    border-color: var(--d-brown) !important;
}

.dossier-cell-pill {
    font-family: var(--d-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
}

.dossier-poison-panel {
    border: 2px solid var(--d-red) !important;
}

.dossier-poison-title {
    font-family: var(--d-font-display);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--d-red);
    letter-spacing: 0.02em;
    margin: 0;
}

.dossier-poison-tri {
    margin-right: 6px;
    font-size: 0.75rem;
}

.dossier-poison-lead {
    font-family: var(--d-font-mono);
    font-size: 0.72rem;
    color: var(--d-muted);
    margin-top: 8px;
    line-height: 1.4;
}

.dossier-body .evil-team-sub {
    font-family: var(--d-font-mono);
    font-size: 0.68rem;
    text-transform: lowercase;
}

/* Game over — mission success dossier */
.dossier-body .game-over-screen {
    padding-top: 8px;
}

.dossier-body .dossier-game-over-wrap.game-over-panel {
    border-radius: var(--d-radius) !important;
    background: var(--d-paper) !important;
    border: 4px double var(--d-green-action) !important;
    box-shadow: var(--d-shadow-folder);
}

.dossier-body .game-over-screen--won .dossier-game-over-wrap,
.dossier-body .game-over-screen--lost .dossier-game-over-wrap {
    background: var(--d-paper) !important;
}

.dossier-game-over-wrap {
    padding: 20px 18px 24px;
}

.dossier-game-over-wrap .game-over-headline {
    font-size: 1.65rem;
    letter-spacing: 0.04em;
    color: var(--d-ink);
    text-transform: uppercase;
}

.dossier-game-over-wrap:has(#dossierMissionSuccessRibbon:not(.hidden)) .game-over-headline {
    color: var(--d-red);
}

.dossier-game-over-wrap .game-over-sub {
    font-family: var(--d-font-mono);
    font-size: 0.88rem;
    color: var(--d-muted);
}

.dossier-mission-success-banner {
    display: inline-block;
    border: 2px dashed var(--d-brown);
    padding: 8px 12px;
    font-family: var(--d-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.dossier-mission-success-banner.hidden {
    display: none;
}

.dossier-recap-hint::before {
    content: "▶ ";
}

.dossier-recap-hint {
    font-family: var(--d-font-mono);
    font-size: 0.78rem;
    color: var(--d-muted);
    margin-top: 12px;
}


.btn-game-over-primary {
    font-family: var(--d-font-display) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    background: var(--d-red) !important;
    border-radius: var(--d-radius) !important;
    box-shadow: 0 4px 0 var(--d-red-dark);
}

/* Voting card accused state */
.dossier-body .vote-card.voted-accused {
    border-color: var(--d-red);
    box-shadow: 0 0 0 1px var(--d-red);
}

.dossier-body .vote-card-tap-hint.accused-label {
    color: var(--d-ink);
    letter-spacing: 0.12em;
}

/* Footer strip (design-system note) */
.dossier-lovable-footer {
    max-width: 420px;
    margin: 16px auto 0;
    padding: 0 12px;
    font-family: var(--d-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--d-muted);
    line-height: 1.4;
}

.dossier-lovable-footer::before {
    content: "▶ ";
}

/* ——— Eliminated / ghost channel (matches dossier game screens) ——— */
.dossier-haunt-screen {
    max-width: 420px;
    margin: 0 auto;
    padding: 16px 12px 28px;
}

.dossier-haunt-folder {
    margin-top: 24px;
}

.dossier-haunt-header {
    margin-bottom: 14px;
}

.dossier-haunt-screen .haunt-kicker.dossier-haunt-kicker {
    font-family: var(--d-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--d-muted);
    margin: 0 0 6px;
}

.dossier-haunt-screen .haunt-title.dossier-haunt-title {
    font-family: var(--d-font-display);
    font-size: 1.28rem;
    font-weight: 800;
    color: var(--d-ink);
    line-height: 1.15;
    margin: 0;
    text-shadow: none;
}

.dossier-haunt-screen .dossier-phase-strip {
    align-items: flex-start;
}

.dossier-haunt-context {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--d-dash);
}

.dossier-haunt-screen .haunt-phase-label {
    font-family: var(--d-font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--d-muted);
}

.dossier-haunt-screen .haunt-elim-strip {
    margin-top: 10px;
}

.dossier-haunt-screen .haunt-strip-chip {
    font-family: var(--d-font-mono);
    font-size: 0.72rem;
    padding: 6px 10px;
    border-radius: var(--d-radius);
    background: var(--d-paper-dim);
    border: 1px dashed var(--d-brown);
    color: var(--d-ink);
}

.dossier-haunt-screen .haunt-strip-muted {
    font-family: var(--d-font-mono);
    font-size: 0.82rem;
    color: var(--d-muted);
}

.dossier-haunt-screen .haunt-notifications {
    margin-bottom: 14px;
}

.dossier-haunt-screen .haunt-notif {
    border-radius: var(--d-radius);
}

.dossier-haunt-screen .haunt-notif-flash {
    background: rgba(163, 51, 51, 0.08);
    border: 2px solid var(--d-red);
    color: var(--d-red-dark);
}

.dossier-haunt-screen .haunt-notif-muted {
    background: var(--d-paper-dim);
    border: 1px dashed var(--d-dash);
    color: var(--d-ink);
}

.dossier-haunt-screen .haunt-notif p {
    font-family: var(--d-font-mono);
    font-size: 0.85rem;
}

.dossier-haunt-card.haunt-card {
    border-radius: var(--d-radius);
    padding: 16px 14px;
    margin-bottom: 14px;
    background: var(--d-paper-dim);
    border: 2px dashed var(--d-dash);
}

.dossier-haunt-screen .haunt-card-title {
    font-family: var(--d-font-display);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--d-red);
    margin-bottom: 8px;
}

.dossier-haunt-screen .haunt-gold,
.dossier-haunt-screen .haunt-pink {
    color: var(--d-red);
}

.dossier-haunt-screen .haunt-card-lead,
.dossier-haunt-screen .haunt-votes-sub {
    font-family: var(--d-font-mono);
    font-size: 0.8rem;
    color: var(--d-muted);
    line-height: 1.45;
}

.dossier-haunt-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    margin-top: 8px;
}

.dossier-haunt-form .dossier-input {
    flex: 1;
    min-width: 160px;
}

.dossier-haunt-submit {
    flex-shrink: 0;
    padding: 12px 18px;
    font-family: var(--d-font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--d-red);
    border: none;
    border-radius: var(--d-radius);
    cursor: pointer;
    box-shadow: 0 4px 0 var(--d-red-dark);
}

.dossier-haunt-submit:hover {
    filter: brightness(1.05);
}

.dossier-haunt-screen .haunt-meta,
.dossier-haunt-screen .haunt-status {
    font-family: var(--d-font-mono);
    font-size: 0.76rem;
    color: var(--d-muted);
}

.dossier-haunt-screen .haunt-vote-pill {
    font-family: var(--d-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    padding: 6px 10px;
    border-radius: var(--d-radius);
    background: var(--d-ink);
    border: 2px solid var(--d-ink);
    color: #fff;
}

.dossier-haunt-screen .haunt-task-grid {
    gap: 10px;
}

.dossier-haunt-screen .haunt-vote-card {
    border-radius: var(--d-radius);
    padding: 12px;
    background: #fff;
    border: 2px solid rgba(43, 38, 34, 0.18);
    min-height: 0;
}

.dossier-haunt-screen .haunt-vote-card:hover {
    border-color: var(--d-red);
}

.dossier-haunt-screen .haunt-vote-card-on {
    border-color: var(--d-red);
    background: rgba(163, 51, 51, 0.06);
}

.dossier-haunt-screen .haunt-vote-text {
    font-family: var(--d-font-display);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--d-ink);
}

.dossier-haunt-screen .haunt-vote-meta {
    font-family: var(--d-font-mono);
    font-size: 0.72rem;
    color: var(--d-muted);
}

.dossier-haunt-screen .haunt-vote-by strong {
    color: var(--d-ink);
}

.dossier-haunt-screen .haunt-you-tag {
    color: var(--d-red);
}

.dossier-haunt-screen .haunt-heart-btn {
    font-family: var(--d-font-mono);
    font-size: 0.68rem;
    background: rgba(163, 51, 51, 0.1);
    border: 1px solid var(--d-red);
    color: var(--d-red);
    border-radius: var(--d-radius);
}

.dossier-haunt-screen .haunt-submission-row {
    background: #fff;
    border: 1px solid rgba(43, 38, 34, 0.12);
    border-left: 4px solid var(--d-blue-intel);
    border-radius: var(--d-radius);
}

.dossier-haunt-screen .haunt-submission-text {
    font-family: var(--d-font-mono);
    color: var(--d-ink);
}

.dossier-haunt-screen .haunt-submission-by {
    font-family: var(--d-font-mono);
    color: var(--d-muted);
}

.dossier-haunt-screen .haunt-empty {
    font-family: var(--d-font-mono);
    color: var(--d-muted);
}

.dossier-haunt-screen .haunt-disabled {
    opacity: 0.5;
}

.dossier-haunt-footer-note {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px dashed var(--d-dash);
}

.dossier-haunt-screen .haunt-deadline {
    margin-top: 10px;
    font-family: var(--d-font-mono);
    font-size: 0.78rem;
    color: var(--d-muted);
}

/* ——— Site nav (home + how to play) ——— */
.dossier-site-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 420px;
    margin: 0 auto 14px;
    padding: 12px 16px;
    font-family: var(--d-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--d-paper-dim);
    border: 2px solid var(--d-folder-border);
    border-radius: var(--d-radius);
    box-shadow: 0 4px 14px rgba(43, 38, 34, 0.08);
}

.dossier-site-nav__link {
    color: var(--d-ink);
    text-decoration: none;
    padding: 4px 6px;
}

.dossier-site-nav__link:hover {
    color: var(--d-red);
}

.dossier-site-nav__link.is-active {
    color: var(--d-red);
    font-weight: 700;
    border-bottom: 2px solid var(--d-red);
}

.dossier-site-nav__sep {
    color: var(--d-muted);
    user-select: none;
}

/* How to play page */
.dossier-howto-title {
    font-size: 1.85rem;
}

.dossier-howto-section .dossier-h2 {
    margin-bottom: 12px;
}

.dossier-howto-p {
    font-family: var(--d-font-mono);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--d-ink);
    margin: 0 0 12px;
}

.dossier-howto-list,
.dossier-howto-ol {
    margin: 0;
    padding-left: 1.15rem;
    font-family: var(--d-font-mono);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--d-ink);
}

.dossier-howto-list li,
.dossier-howto-ol li {
    margin-bottom: 10px;
}

.dossier-howto-ol {
    list-style-type: decimal;
}

.dossier-howto-back {
    margin-top: 22px;
    text-align: center;
}