/* Lazarus Maze — the 2007 look, restored.
   Palette and typography recovered from the original lazarusmaze.com
   (Wayback Machine, 2009 capture): black void, stained asylum concrete,
   patina green headings, electric teal links, rusted copper. */

:root {
    --void:      #000;
    --panel:     rgba(8, 10, 9, 0.72);
    --edge:      #2a362f;
    --ink:       #e9e7de;
    --ink-dim:   #98a29a;
    --patina:    #91e7c6;   /* headings — original #mainContent h1 color */
    --teal:      #23fdcc;   /* links — original a:link color */
    --teal-dim:  #1c9c80;
    --rust:      #b3532a;   /* the logo's corroded copper */
    --rust-hi:   #d97a3f;
    --blood:     #7e1f1f;

    --brass:     #c9b78a;   /* aged brass — headings and warm accents */

    /* Legacy names kept so nothing breaks */
    --paper:       var(--void);
    --panel-edge:  var(--edge);
    --crimson:     var(--rust);
    --crimson-hi:  var(--rust-hi);
    --gold:        var(--brass);
    --madness:     var(--teal-dim);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: #000 url(img/legacy/back.jpg) no-repeat fixed top center;
    color: var(--ink);
    font-family: Arial, Helvetica, Verdana, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
}

.wrap { max-width: 1500px; margin: 0 auto; padding: 0 1.2rem 3rem; }

/* Reading text stays a readable width even on wide screens */
.prose p, .prose li { max-width: 78ch; }

/* Card grids: fill whatever screen is available */
.quest-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 0.9rem; margin-top: 0.9rem;
}
.quest-grid .quest { margin: 0; display: flex; flex-direction: column; }
.quest-grid .quest-desc { flex: 1; }
.quest-grid .quest-foot { margin-top: auto; }
.ach-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 0.7rem; margin-top: 0.9rem;
}
.ach-grid .ach { margin: 0; }
.case-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
    gap: 1rem;
}
.case-grid .panel { margin-bottom: 0; }
.char-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; align-items: start;
}
@media (max-width: 980px) { .char-grid { grid-template-columns: 1fr; } }
/* Venue pages: long prose left, action panels stacked right */
.venue-grid {
    display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.3rem; align-items: start;
}
@media (max-width: 980px) { .venue-grid { grid-template-columns: 1fr; } }

a { color: var(--rust-hi); font-weight: bold; text-decoration: none; }
a:hover { color: #fff; }

/* Masthead: the original graveyard fence band + rusted copper logo */
.masthead {
    margin: 0 -1.2rem;              /* band runs full width of the wrap */
    min-height: 299px;
    background: #000 url(img/legacy/band-2026.jpg) no-repeat center / cover;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 1rem 0 2.4rem;
}
.masthead h1 { font-size: 0; }       /* logo image carries the name */
.masthead h1 a { display: inline-block; }
.masthead-logo { max-width: min(90%, 620px); max-height: 230px; width: auto; height: auto; }
.hero {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--edge); border-radius: 3px; margin: 1.2rem 0;
}
.venue-banner {
    /* Natural aspect ratio: the whole picture, on every screen —
       height follows width instead of cropping. */
    display: block; width: 100%; height: auto;
    border: 1px solid var(--edge); border-radius: 3px; margin-bottom: 1.3rem;
}

/* Landing: pitch on the left, the Intelligencer teaser on the right */
.landing-grid {
    /* minmax(0,…): columns may shrink below their content's natural
       width — otherwise a wide image forces its column open. */
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.3rem; align-items: start;
}
@media (max-width: 980px) { .landing-grid { grid-template-columns: 1fr; } }
.intel h2 { letter-spacing: 0.12em; font-size: 1.05rem; }
.intel-ornament {
    display: block; width: 100%; height: auto;
    border-radius: 2px; margin-bottom: 0.6rem;
    filter: sepia(0.12);
}
.map-spot { display: block; }
.intel-edition {
    text-align: center; color: var(--ink-dim); font-style: italic;
    font-family: Georgia, 'Times New Roman', serif; font-size: 0.85rem;
    border-bottom: 1px dotted var(--edge); padding-bottom: 0.6rem;
}
.intel-list { list-style: none; margin: 0.2rem 0 0.8rem; }
.intel-list li {
    padding: 0.3rem 0; border-bottom: 1px dotted var(--edge);
    font-size: 0.92rem;
}
.intel-list strong { color: var(--brass); font-weight: bold; }
.intel-foot { font-style: italic; margin-top: 0.6rem; }
.tagline {
    color: var(--ink-dim); font-style: italic; font-size: 0.9rem;
    font-family: Georgia, 'Times New Roman', serif;
    text-shadow: 0 1px 4px #000, 0 0 12px #000; margin-top: 0.6rem;
}

/* Nav */
.nav {
    display: flex; gap: 1.4rem; flex-wrap: wrap;
    padding: 0.7rem 0.2rem; border-bottom: 1px dotted var(--edge);
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem;
}
.nav a { text-decoration: none; }
.nav-right { margin-left: auto; color: var(--ink-dim); }

/* Resource bars */
.bars { padding: 0.8rem 0.2rem; border-bottom: 1px dotted var(--edge); }
.bar-row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.35rem; }
.bar-label {
    width: 6.5rem; text-transform: uppercase; letter-spacing: 0.1em;
    font-size: 0.75rem; color: var(--ink-dim);
}
.bar {
    flex: 1; height: 0.85rem; background: #050605;
    border: 1px solid var(--edge); border-radius: 2px; overflow: hidden;
}
.bar-fill { height: 100%; transition: width 0.4s ease; }
.bar-composure { background: linear-gradient(180deg, var(--rust-hi), var(--rust)); }
.bar-sanity    { background: linear-gradient(180deg, var(--teal), var(--teal-dim)); }
.bar-num { min-width: 6rem; text-align: right; font-size: 0.85rem; color: var(--ink-dim); }
.bar-meta { justify-content: space-between; color: var(--brass); font-size: 0.9rem; margin-top: 0.4rem; }
.mad-whisper { color: var(--teal); font-style: italic; font-size: 0.8rem; }

/* Panels */
main { padding-top: 1.2rem; }
.panel {
    background: var(--panel); border: 1px solid var(--edge);
    border-radius: 3px; padding: 1.3rem 1.5rem; margin-bottom: 1.3rem;
}
.panel-narrow { max-width: 480px; margin-left: auto; margin-right: auto; }
.panel h2 {
    font-family: Georgia, 'Times New Roman', serif;
    text-transform: uppercase; letter-spacing: 0.3em; font-weight: bold;
    font-size: 1.25rem; text-align: center; color: var(--brass);
    margin-bottom: 0.8rem; padding-top: 0.2rem;
}
.panel h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: bold; color: var(--brass);
    letter-spacing: 0.08em; margin: 0.8rem 0 0.4rem;
}
.panel p { margin-bottom: 0.8rem; }
.aside { color: var(--ink-dim); font-size: 0.9rem; }

hr { border: none; border-bottom: 1px dotted var(--edge); }

/* Flash messages */
.flash {
    padding: 0.7rem 1rem; margin: 0.8rem 0; border-radius: 2px;
    border-left: 4px solid var(--brass); background: var(--panel);
}
.flash-error   { border-left-color: var(--blood); color: #d9a0a0; }
.flash-success { border-left-color: var(--brass); }
.flash-levelup {
    border-left-color: var(--rust-hi); color: var(--rust-hi);
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9rem;
}
.flash-story   {
    border-left-color: var(--teal-dim); font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
}
.flash-achieve {
    border-left-color: var(--brass); color: var(--brass);
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9rem;
}

/* Forms & buttons */
label { display: block; margin-bottom: 0.9rem; color: var(--ink-dim); font-size: 0.95rem; }
input[type="text"], input[type="password"] {
    display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.7rem;
    background: #050605; color: var(--ink);
    border: 1px solid var(--edge); border-radius: 2px;
    font-family: inherit; font-size: 1rem;
}
input:focus { outline: 1px solid var(--rust-hi); }

.button {
    display: inline-block; cursor: pointer;
    background: #171310; color: #e3cda9;
    border: 1px solid #7c5a33; border-radius: 2px;
    padding: 0.45rem 1.1rem; font-family: inherit; font-size: 0.85rem;
    font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em;
    text-decoration: none;
}
.button:hover {
    background: rgba(217, 122, 63, 0.14); color: #fff; border-color: var(--rust-hi);
}
.button-quiet { background: transparent; border-color: var(--edge); color: var(--ink-dim); }
.button-disabled {
    background: transparent; border-color: var(--edge); color: var(--ink-dim);
    opacity: 0.45; cursor: not-allowed;
}
.button-disabled:hover { background: transparent; color: var(--ink-dim); border-color: var(--edge); }
.button-quiet:hover { background: var(--panel); color: var(--ink); border-color: #7c5a33; }
.actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.2rem; }

/* Quests */
.quest {
    border: 1px solid var(--edge); border-radius: 3px;
    padding: 0.9rem 1.1rem; margin: 0.9rem 0; background: rgba(0, 0, 0, 0.35);
}
.quest-madness { border-color: var(--teal-dim); background: rgba(35, 253, 204, 0.05); }
.quest-locked { opacity: 0.62; }
.quest-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.quest-head h3 { margin: 0; }
.quest-costs { color: var(--ink-dim); font-size: 0.85rem; white-space: nowrap; }
.cost-sanity { color: var(--teal); }
.quest-desc { margin: 0.5rem 0; }
.quest-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.locked-note { color: var(--ink-dim); font-style: italic; font-size: 0.9rem; }
.quest-more { font-style: italic; text-align: center; margin-top: 1rem; }
.quest-multi {
    display: block; font-size: 0.72rem; color: var(--brass);
    font-style: italic; letter-spacing: 0.05em; text-transform: none;
}

/* Encounters: full-width stage for the scenes, book-shaped prose beneath */
.enc { max-width: none; }
.enc p {
    font-size: 1.05rem; max-width: 78ch;
    margin-left: auto; margin-right: auto;
    font-family: Georgia, 'Times New Roman', serif;
}
.enc-image {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--edge); border-radius: 3px;
    margin: 0.4rem 0 1rem; filter: saturate(0.85) brightness(0.95);
}
/* Interaction furniture stays a comfortable width, centered on the stage */
.enc-choices, .enc-looks, .enc-look, .enc-puzzle, .enc-abandon,
.scene-hint, .enc-meta, .enc .actions {
    max-width: 950px; margin-left: auto; margin-right: auto;
}
.scene-hint, .enc-meta { text-align: center; }
.enc-choices { margin: 1.2rem 0 0.6rem; display: flex; flex-direction: column; gap: 0.55rem; }
.enc-choice { width: 100%; text-align: left; padding: 0.7rem 1rem; }
.enc-check { color: var(--brass); font-size: 0.8rem; float: right; text-transform: none; letter-spacing: 0; }
.enc-abandon { margin-top: 1.4rem; text-align: right; }
.enc-back { margin-top: 1.2rem; text-align: center; }

/* Click-and-play scenes: the picture is the interface */
.scene { position: relative; }
.scene-img { margin-bottom: 0.3rem; }
.hotspot {
    position: absolute; margin: 0; padding: 0;
    border-radius: 4px;
}
.hotspot-btn {
    display: block; width: 100%; height: 100%;
    background: transparent; border: 0; cursor: pointer;
    border-radius: 4px;
}
.hotspot:hover, .hotspot-btn:focus-visible {
    outline: 2px solid var(--brass);
    box-shadow: 0 0 18px rgba(201, 183, 138, 0.35), inset 0 0 30px rgba(201, 183, 138, 0.08);
}
.hotspot-locked { cursor: not-allowed; }
.hotspot-locked:hover {
    outline: 2px dashed var(--blood);
    box-shadow: 0 0 14px rgba(126, 31, 31, 0.4);
}
.survey-check { display: none; }
.survey-check:checked ~ .scene .hotspot {
    outline: 1px dashed var(--brass);
    background: rgba(201, 183, 138, 0.06);
}
.survey-check:checked ~ .scene .hotspot-locked {
    outline: 1px dashed var(--blood);
    background: rgba(126, 31, 31, 0.06);
}
.scene-hint { color: var(--ink-dim); font-size: 0.85rem; font-style: italic; }
.scene-hint label {
    display: inline; color: var(--rust-hi); cursor: pointer; margin: 0;
    font-size: 0.85rem;
}
.scene-hint label:hover { color: #fff; }
.enc-looks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.4rem; }
.enc-look-btn { font-size: 0.8rem; }
.look-done { opacity: 0.65; }
.enc-look {
    border-left: 3px solid var(--brass); background: rgba(0, 0, 0, 0.35);
    padding: 0.8rem 1.1rem; margin: 0.8rem 0; border-radius: 0 3px 3px 0;
}
.enc-look h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.enc-puzzle { margin: 1.1rem 0 0.4rem; max-width: 340px; }
.enc-choice-locked {
    border: 1px dashed var(--edge); border-radius: 2px;
    padding: 0.7rem 1rem; color: var(--ink-dim); font-style: italic;
}
.enc-meta { color: var(--brass); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; }
.enc-banner {
    padding: 0.5rem 0.9rem; margin-top: 0.6rem; border: 1px dashed var(--rust);
    border-radius: 3px; font-style: italic;
}
.enc-banner a { color: var(--rust-hi); text-decoration: none; }
.enc-banner a:hover { color: #fff; }
.block-banner {
    padding: 0.5rem 0.9rem; margin-top: 0.6rem; border: 1px dashed var(--blood);
    border-radius: 3px; font-style: italic;
}
.block-banner a { color: #d9a0a0; text-decoration: none; }
.block-banner a:hover { color: #fff; }
.block-word { color: #d9a0a0; }

/* Records room */
#gate { transition: opacity 0.8s ease; }
.gate-done { opacity: 0.35; }
#gate input[readonly] { cursor: default; }
.case { border-left: 3px solid var(--edge); }
.case-closed { opacity: 0.78; border-left-color: var(--blood); }
.case-closed-tag { color: #c46a6a; font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.case-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.case-head h3 { margin: 0; }
.case-updates { list-style: none; margin: 0.6rem 0 0.2rem; padding-left: 0.8rem; border-left: 1px dotted var(--edge); }
.case-updates li { margin-bottom: 0.45rem; font-size: 0.95rem; }
.case-updates strong { color: var(--brass); font-weight: normal; }

/* Distinctions */
.ach {
    border: 1px solid var(--edge); border-radius: 3px;
    padding: 0.7rem 1rem; margin: 0.7rem 0; background: rgba(0, 0, 0, 0.35);
}
.ach-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.ach-head h3 { margin: 0; }
.ach-desc { margin: 0.3rem 0 0; font-size: 0.95rem; }
.ach-earned { border-left: 3px solid var(--brass); }
.ach-earned h3 { color: var(--brass); }
.ach-locked { opacity: 0.6; }
.ach-locked h3 { color: var(--ink-dim); }
.ach-sealed { opacity: 0.8; border-style: dashed; border-color: var(--teal-dim); }
.ach-sealed h3 { color: var(--teal); font-style: italic; }
.ach-was-sealed { border-left-color: var(--teal); }
.ach-was-sealed h3 { color: var(--teal); }

/* Genre colors — each writing style owns one. Content tagged
   .genre-for-<key> shows a hover ring ONLY to players of that genre:
   "they would know it's for them." */
body.g-penny-dreadfulist        { --genre-color: #c04848; }
body.g-graveyard-poet           { --genre-color: #8a76b8; }
body.g-sensation-novelist       { --genre-color: #c2608e; }
body.g-scientific-romancer      { --genre-color: #5f8fb4; }
body.g-gothic-antiquarian       { --genre-color: #c99b3f; }
body.g-spiritualist-pamphleteer { --genre-color: #a8c0cf; }
body.g-moral-essayist           { --genre-color: #7086a8; }
body.g-anonymous-hack           { --genre-color: #969686; }

body.g-penny-dreadfulist        .genre-for-penny-dreadfulist:hover,
body.g-graveyard-poet           .genre-for-graveyard-poet:hover,
body.g-sensation-novelist       .genre-for-sensation-novelist:hover,
body.g-scientific-romancer      .genre-for-scientific-romancer:hover,
body.g-gothic-antiquarian       .genre-for-gothic-antiquarian:hover,
body.g-spiritualist-pamphleteer .genre-for-spiritualist-pamphleteer:hover,
body.g-moral-essayist           .genre-for-moral-essayist:hover,
body.g-anonymous-hack           .genre-for-anonymous-hack:hover {
    box-shadow: 0 0 0 2px var(--genre-color), 0 0 14px var(--genre-color);
    border-radius: 3px;
}

/* The resident's record (under Disciplines on Yourself) */
.record {
    margin-top: 1.1rem; padding-top: 0.9rem;
    border-top: 1px dotted var(--edge);
    font-family: Georgia, 'Times New Roman', serif;
}
.record p { margin-bottom: 0.35rem; }

/* The Commonplace Book */
.clue-entry {
    border-left: 3px solid var(--edge); padding: 0.5rem 0.9rem;
    margin-bottom: 0.7rem; background: rgba(0, 0, 0, 0.25);
}
.clue-veiled { border-left-color: var(--teal-dim); }
.clue-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.clue-head strong { color: var(--brass); }
.clue-veiled .clue-head strong { color: var(--teal); }
.clue-tier {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--ink-dim); white-space: nowrap;
}
.clue-tier-2 { color: var(--brass); }
.clue-tier-3 { color: var(--rust-hi); }
.clue-text {
    font-family: Georgia, 'Times New Roman', serif; font-style: italic;
    font-size: 0.95rem; margin: 0.3rem 0 0.2rem;
}

/* The Hand You Write With */
.identity-name {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.35rem; color: var(--brass);
    letter-spacing: 0.15em; text-transform: uppercase;
    margin: 0.2rem 0 0.8rem;
}
.writer-effect { color: var(--brass); font-size: 0.88rem; }
.writer-silent { color: var(--teal); font-style: italic; }

/* The intake declaration */
.declare-option {
    display: block; padding: 0.5rem 0.7rem; margin-bottom: 0.4rem;
    border: 1px solid var(--edge); border-radius: 2px; cursor: pointer;
    color: var(--ink); font-size: 0.95rem;
}
.declare-option:hover { border-color: #7c5a33; }
.declare-option input { margin-right: 0.5rem; }

/* The watchword, shown once */
.watchword-phrase {
    font-family: Georgia, 'Times New Roman', serif; font-style: italic;
    font-size: 1.3rem; color: var(--brass); text-align: center;
    border: 1px dashed var(--brass); border-radius: 3px;
    padding: 1rem 1.2rem; margin: 1rem 0;
}

/* Honeypot: parked far off-screen; humans never see or fill it */
.oubliette {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* Tables */
.stat-table, .log-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; }
.stat-table th {
    text-align: left; text-transform: uppercase; letter-spacing: 0.08em;
    font-size: 0.8rem; color: var(--brass); font-weight: bold; width: 7rem;
}
.stat-table td, .stat-table th, .log-table td { padding: 0.35rem 0.6rem 0.35rem 0; border-bottom: 1px dotted var(--edge); }
.log-table .num { text-align: right; color: var(--brass); white-space: nowrap; }
.register-table td { padding-right: 1rem; }
.register-head td {
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem;
    color: var(--ink-dim);
}

/* Footer */
.colophon {
    text-align: center; color: var(--ink-dim); font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.85rem; padding-top: 2rem;
}
.colophon-meta { font-size: 0.75rem; opacity: 0.55; margin-top: 0.4rem; font-family: Arial, Helvetica, sans-serif; font-style: normal; }

/* Souvenir prevention — the city keeps its pictures */
img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}
#no-souvenirs {
    position: fixed; left: 50%; bottom: 2.2rem; transform: translateX(-50%);
    background: rgba(10, 10, 8, 0.92); color: var(--brass);
    border: 1px solid var(--edge); padding: 0.45rem 1.1rem;
    font-family: Georgia, 'Times New Roman', serif; font-style: italic;
    font-size: 0.85rem; letter-spacing: 0.04em;
    opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
    z-index: 999;
}
#no-souvenirs.show { opacity: 1; }

/* The Gamemistress's Study */
.admin-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.3rem; align-items: start;
}
@media (max-width: 980px) { .admin-grid { grid-template-columns: 1fr; } }
.study-warn { color: var(--rust-hi, #e08a52); }
.study-actions { flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.study-help select, .study-hire select {
    background: #111; color: var(--ink); border: 1px solid var(--edge);
    padding: 0.3rem 0.5rem; margin-left: 0.4rem;
}
.study-bots td { font-size: 0.88rem; }
.study-danger {
    margin-top: 1rem; padding-top: 0.8rem;
    border-top: 1px dotted var(--edge);
    display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
    font-size: 0.9rem;
}
.study-hire {
    margin-top: 1rem; padding-top: 0.8rem;
    border-top: 1px dotted var(--edge);
    display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
}

/* A Stranger's Guide to Ravensmoor */
.guide h3 {
    margin-top: 1.6rem;
    text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.95rem;
}
.guide-frontis {
    text-align: center; font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.9; padding: 0.6rem 0 0.9rem;
    border-bottom: 1px dotted var(--edge);
}
.guide-frontis strong { letter-spacing: 0.22em; font-size: 1.15rem; color: var(--brass); }
.guide-hint {
    font-size: 0.85rem; color: var(--ink-dim);
    padding: 0.45rem 0.2rem; border-bottom: 1px dotted var(--edge);
}
.study-typecase textarea {
    width: 100%; background: #0b0d0c; color: var(--ink);
    border: 1px solid var(--edge); border-radius: 2px;
    font-family: Consolas, 'Courier New', monospace; font-size: 0.85rem;
    line-height: 1.5; padding: 0.7rem; margin-top: 0.5rem;
}

/* The Guide reads as a printed pamphlet: a page-wide panel, centered,
   not a ribbon of text lost on the left of a full-width slab. */
.guide, .guide-foot {
    max-width: 50rem;
    margin-left: auto; margin-right: auto;
    padding-left: 2.2rem; padding-right: 2.2rem;
}

/* Sleuthing: the dice of chance */
.sleuth-btn { font-size: 0.78rem; padding: 0.25rem 0.6rem; white-space: nowrap; }