/* ===========================================================================
   The Bathroom — bespoke "case file" page. Not the shared game-landing
   template: a cork board, pinned index cards, taped photos, a typed witness
   statement with redactions, and ink-stamp CTAs. Fully self-contained.

   Palette: the game's own red & black. Documents are dark, charred paper with
   bone text; blood-red is the single accent (stamps, pins, tabs, ink). All
   colors route through the vars below — retint the whole page from one place.
   =========================================================================== */
body.dossier-page {
    --cork:        #0b0708;   /* page backdrop, near-black */
    --cork-2:      #100b0c;   /* main cork board */
    --paper:       #17100f;   /* charred document surface */
    --paper-2:     #1d1513;   /* lighter document (cards / notes) */
    --paper-3:     #241a17;   /* lightest document (rolodex / hover) */
    --ink:         #ded3cc;   /* primary text on dark paper */
    --ink-soft:    #a99f97;   /* secondary text on dark paper */
    --ink-faint:   #7c726b;   /* captions / labels */
    --bone:        #e9e3dc;   /* bright text on cork (headings) */
    --bone-soft:   #b3a99f;   /* muted text on cork */
    --blood:       #c0161c;   /* accent red */
    --blood-bright:#e6242b;   /* accent red, hover */
    --blood-deep:  #6f0c10;   /* deep red, borders / shadows */
}

body.dossier-page { background: var(--cork); }

body.dossier-page main.container {
    max-width: 900px;
    padding-top: 0;
    font-family: 'Courier New', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    color: var(--ink);
}

/* --- Cork board backdrop ------------------------------------------------ */
body.dossier-page main.container {
    background-color: var(--cork-2);
    background-image:
        radial-gradient(circle at 50% 0%, rgba(192, 22, 28, .1) 0, transparent 55%),
        radial-gradient(circle at 8% 15%, rgba(0, 0, 0, .45) 0, transparent 9%),
        radial-gradient(circle at 22% 65%, rgba(0, 0, 0, .4) 0, transparent 8%),
        radial-gradient(circle at 40% 30%, rgba(0, 0, 0, .38) 0, transparent 7%),
        radial-gradient(circle at 58% 80%, rgba(0, 0, 0, .4) 0, transparent 9%),
        radial-gradient(circle at 72% 20%, rgba(0, 0, 0, .4) 0, transparent 8%),
        radial-gradient(circle at 88% 55%, rgba(0, 0, 0, .42) 0, transparent 9%),
        radial-gradient(circle at 15% 90%, rgba(0, 0, 0, .38) 0, transparent 7%),
        radial-gradient(circle at 95% 90%, rgba(0, 0, 0, .4) 0, transparent 8%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* --- Folder tabs (replaces the site nav entirely) ----------------------- */
.case-tabs {
    display: flex;
    gap: .4rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 1.25rem 0;
}

.case-tab {
    background: var(--paper-2);
    color: var(--ink);
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    padding: .5rem 1rem .45rem;
    border-top: 2px solid var(--blood-deep);
    clip-path: polygon(6% 0, 94% 0, 100% 100%, 0% 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    transition: transform .12s ease, background .12s ease, color .12s ease;
}

.case-tab:hover { background: var(--paper-3); color: var(--bone); transform: translateY(-2px); }
.case-tab-acquire { margin-left: auto; background: var(--blood); color: #fff; border-top-color: var(--blood-bright); }
.case-tab-acquire:hover { background: var(--blood-bright); color: #fff; }

/* --- Cover / hero -------------------------------------------------------- */
.case-cover {
    position: relative;
    padding: 2.5rem 0 3rem;
    text-align: center;
}

.case-stamp-classified {
    display: inline-block;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blood-bright);
    border: 4px solid var(--blood-bright);
    padding: .2rem 1rem;
    transform: rotate(-6deg);
    opacity: .9;
    background: rgba(192, 22, 28, .08);
}

.case-number {
    margin-top: .75rem;
    color: var(--bone-soft);
    font-size: .85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* The cover is a physical case folder: a centred tab on top and a back cover
   peeking evenly around the front. Kept symmetric so nothing looks off-centre. */
.case-folder {
    position: relative;
    margin: 3.5rem auto 0;
    max-width: 760px;
    background: var(--paper);
    background-image:
        linear-gradient(to bottom, rgba(192, 22, 28, .06), transparent 120px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.06'/%3E%3C/svg%3E");
    border: 1px solid #33231e;
    border-radius: 3px;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .05),
        inset 0 0 60px rgba(0, 0, 0, .45),
        0 22px 44px rgba(0, 0, 0, .7);
    padding: 2.6rem 2.25rem 2.25rem;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.75rem;
    align-items: center;
    text-align: left;
}

/* Back cover — sits behind and peeks out by an equal amount on every side. */
.case-folder::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -7px;
    background: var(--paper-2);
    border: 1px solid #33231e;
    border-radius: 4px;
}

/* Folder tab — centred label flap sticking up from the top edge. */
.case-folder::before {
    content: "CASE FILE \00B7 04-B";
    position: absolute;
    z-index: 1;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    height: 27px;
    padding: 0 1.6rem;
    display: grid;
    place-items: center;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--bone-soft);
    background: var(--paper-2);
    border: 1px solid #33231e;
    border-bottom: 0;
    border-top: 2px solid var(--blood-deep);
    border-radius: 6px 6px 0 0;
}

.case-photo {
    position: relative;
    background: #0d0908;
    padding: .5rem .5rem 1.6rem;
    border: 1px solid #2a1c19;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
    transform: rotate(-4deg);
}

.case-photo img { display: block; width: 100%; height: auto; filter: grayscale(.6) contrast(1.15) brightness(.8) sepia(.5) hue-rotate(-25deg) saturate(1.8); }

.case-photo-label {
    position: absolute;
    bottom: .4rem;
    left: .6rem;
    font-size: .68rem;
    letter-spacing: .08em;
    color: var(--ink-faint);
    text-transform: uppercase;
}

.case-photo-tape {
    position: absolute;
    width: 70px;
    height: 24px;
    background: rgba(120, 110, 95, .35);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    top: -10px;
}

.case-photo-tape-l { left: -14px; transform: rotate(-38deg); }
.case-photo-tape-r { right: -14px; transform: rotate(38deg); }

/* --- Game wordmark (replaces the plain typed title) --------------------- */
.case-logo {
    display: block;
    width: min(340px, 92%);
    height: auto;
    margin: 0 0 .7rem;
    filter: invert(1) brightness(1.05) drop-shadow(0 2px 6px rgba(192, 22, 28, .55));
    transform: rotate(-1.5deg);
}

.case-title {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--blood-bright);
    text-shadow: 1px 1px 0 rgba(192, 22, 28, .35), 2px 2px 0 rgba(0, 0, 0, .5);
    transform: rotate(-1.5deg);
    margin: 0 0 .6rem;
}

.case-typed { font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 .9rem; }

.case-warning {
    display: inline-block;
    font-size: .82rem;
    color: #ff9d97;
    background: rgba(192, 22, 28, .16);
    border: 1px dashed var(--blood);
    padding: .4rem .7rem;
    margin: 0 0 1.1rem;
}

.case-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.case-stamp-btn {
    display: inline-block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--blood-bright);
    border: 3px solid var(--blood-bright);
    border-radius: 50% / 18%;
    padding: .55rem 1.4rem;
    transform: rotate(-3deg);
    background: rgba(192, 22, 28, .08);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.case-stamp-btn:hover { transform: rotate(-3deg) scale(1.05); background: rgba(192, 22, 28, .2); box-shadow: 0 0 18px rgba(192, 22, 28, .4); }
.case-stamp-btn-sm { font-size: .82rem; padding: .4rem 1rem; }

.case-tape-btn {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: .88rem;
    letter-spacing: .03em;
    background: #14100f;
    color: var(--ink);
    border: 1px solid #2a1c19;
    padding: .6rem 1.1rem;
    cursor: pointer;
    transition: background .15s ease;
}

.case-tape-btn:hover { background: #201b19; }
.case-tape-btn:disabled { opacity: .6; cursor: default; }

.footage-frame {
    max-width: 760px;
    margin: 0 auto 2rem;
    aspect-ratio: 16 / 9;
    background: #000;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .7);
}

.footage-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Section heading (shared look) --------------------------------------- */
.case-heading {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 1.3rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--blood);
    margin: 0 0 1.25rem;
    padding-top: 2.5rem;
}

.case-lead { color: var(--bone-soft); max-width: 62ch; margin: 0 0 2rem; }

/* --- Evidence board: pinned index cards ---------------------------------- */
.case-board { padding-bottom: 1rem; }

.board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2.25rem 1.5rem;
    margin-bottom: 2.5rem;
}

.board-card {
    position: relative;
    background: var(--paper-2);
    border: 1px solid #2a1c19;
    padding: 1.2rem 1rem 1rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .55);
}

.board-card h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bone); margin: 0 0 .4rem; }
.board-card p { font-size: .85rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }

.board-pin {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff5a52, var(--blood) 55%, var(--blood-deep) 85%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}

.rot-0 { transform: rotate(-2.5deg); }
.rot-1 { transform: rotate(1.8deg); }
.rot-2 { transform: rotate(-1deg); }
.rot-3 { transform: rotate(2.6deg); }
.rot-4 { transform: rotate(-3.4deg); }

/* --- Polaroid screenshots ------------------------------------------------- */
.polaroid-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    justify-content: center;
    padding-top: .5rem;
}

.polaroid {
    background: #0d0908;
    border: 1px solid #2a1c19;
    padding: .6rem .6rem 1.4rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .6);
    width: 220px;
}

.polaroid img { display: block; width: 100%; height: auto; filter: grayscale(.65) contrast(1.2) brightness(.78) sepia(.5) hue-rotate(-25deg) saturate(1.8); }
.polaroid figcaption { font-size: .7rem; letter-spacing: .06em; color: var(--ink-faint); text-align: center; padding-top: .5rem; }

/* --- Witness statement: typed page with redactions ----------------------- */
.case-statement { padding-bottom: 1rem; }

.typed-sheet {
    background: var(--paper-2);
    border: 1px solid #2a1c19;
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem 2.25rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .6);
    transform: rotate(.6deg);
}

.typed-sheet p { color: var(--ink); font-size: .92rem; line-height: 1.75; margin: 0 0 1rem; }
.typed-sheet p:last-child { margin-bottom: 0; }

.redacted {
    background: #000;
    color: #000;
    user-select: none;
    border-radius: 1px;
    transition: color .15s ease;
}

.redacted:hover,
.redacted:focus { color: var(--blood-bright); cursor: help; }

/* --- Sign-out log (newsletter) -------------------------------------------- */
.case-logbook {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 1rem;
}

.case-logbook .muted { color: var(--bone-soft); margin: 0 0 1.25rem; }

.logbook-form {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

.logbook-form input {
    flex: 1 1 220px;
    font-family: 'Courier New', ui-monospace, monospace;
    background: var(--paper-2);
    border: 1px solid #2a1c19;
    padding: .7rem .9rem;
    color: var(--ink);
}

.logbook-form input::placeholder { color: var(--ink-faint); }

/* --- Case notes (FAQ) ------------------------------------------------------ */
.case-notes { padding-bottom: 1rem; }

.note-stack {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

.note-card {
    background: var(--paper-2);
    border: 1px solid #2a1c19;
    padding: 1rem 1.1rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .5);
}

.note-card summary {
    cursor: pointer;
    font-size: .9rem;
    font-weight: 700;
    color: var(--bone);
    list-style: none;
}

.note-card summary::-webkit-details-marker { display: none; }
.note-card summary::after { content: '+'; float: right; color: var(--blood-bright); font-weight: 800; }
.note-card[open] summary::after { content: '\2212'; }
.note-card p { font-size: .85rem; color: var(--ink-soft); margin: .6rem 0 0; line-height: 1.5; }

/* --- Related files (socials) ---------------------------------------------- */
.case-related { padding-bottom: 1rem; }

.rolodex {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
}

.rolodex-card {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--paper-2);
    border: 1px solid #2a1c19;
    color: var(--ink);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 700;
    padding: .55rem 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
    transition: background .15s ease, border-color .15s ease;
}

.rolodex-card img { width: 18px; height: 18px; }
.rolodex-card:hover { background: var(--paper-3); border-color: var(--blood-deep); }

/* --- Closing stamp --------------------------------------------------------- */
.case-close {
    text-align: center;
    padding: 3rem 0 4rem;
}

.case-stamp-closed { color: var(--blood-bright); border-color: var(--blood-bright); background: rgba(192, 22, 28, .08); margin-bottom: 1.5rem; }
.case-close .case-stamp-btn { display: block; margin: 0 auto; width: fit-content; }

.case-back {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--bone-soft);
    font-size: .85rem;
    text-decoration: none;
}

.case-back:hover { color: var(--bone); }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 720px) {
    .case-folder { grid-template-columns: 1fr; text-align: center; padding: 1.5rem; }
    .case-photo { max-width: 220px; margin: 0 auto; }
    .case-title, .case-logo { transform: none; }
    .case-logo { margin-left: auto; margin-right: auto; }
    .case-actions { justify-content: center; }
    .case-tabs { flex-wrap: wrap; }
    .case-tab-acquire { margin-left: 0; }
}