/* S.E.A. Expeditions — parchment & brass, mobile-first */

/* Display face, self-hosted and subset from the printed set's own fonts.
   Everything that has to be *read* stays on Georgia: already on every phone,
   no download, and legible one-handed in bright sun — which is where this
   gets used. Period faces are for headings only. */
@font-face {
    font-family: 'Cinzel';
    src: url('fonts/cinzel.woff2') format('woff2');
    font-weight: 400 900;
    font-display: swap;
}
:root {
    --display: 'Cinzel', Georgia, serif;
    --title: 'Cinzel', Georgia, serif;
}

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

:root {
    --ink: #2b2013;
    --ink-soft: #5a4a33;
    --parchment: #f0e4c8;
    --parchment-deep: #e2d0a8;
    --card: #f7efdb;
    --brass: #8a6d2f;
    --brass-bright: #b08d3e;
    --gold: #d4af4f;
    --sea-green: #1f4d3f;
    --error: #7a2e1d;
    --success: #1f4d3f;
}

body {
    font-family: Georgia, 'Times New Roman', serif;
    background: var(--parchment) url('background.webp') center top / cover no-repeat fixed;
    color: var(--ink);
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
}

.container {
    max-width: 480px;
    margin: 0 auto;
    padding: 16px 16px 48px;
}

/* Header */
header { text-align: center; padding: 20px 0 24px; }
.sea-mark {
    display: inline-block;
    width: 96px; height: 96px;
    margin-bottom: 10px;
}
header h1 { font-family: var(--title); font-size: 1.45rem; font-weight: 700; letter-spacing: 1px; }
.motto {
    font-family: var(--display);
    color: var(--brass);
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 6px;
}
.tagline { font-style: italic; color: var(--ink-soft); font-size: 0.85rem; margin-top: 4px; }

/* Cards / stages */
.card {
    position: relative;
    background:
        url('orn-corner-tl.webp') left 6px top 6px / 44px no-repeat,
        url('orn-corner-tr.webp') right 6px top 6px / 44px no-repeat,
        url('orn-corner-bl.webp') left 6px bottom 6px / 44px no-repeat,
        url('orn-corner-br.webp') right 6px bottom 6px / 44px no-repeat,
        var(--card);
    border: 2px solid var(--brass);
    border-radius: 4px;
    /* the inner hairline of the double rule */
    box-shadow: inset 0 0 0 1px var(--card), inset 0 0 0 3px rgba(138, 109, 47, 0.55),
                0 2px 10px rgba(43, 32, 19, 0.22);
    padding: 26px 22px;
    margin-bottom: 20px;
}
.card.hidden { display: none; }
.card h2 {
    font-family: var(--title);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    color: var(--sea-green);
    margin-bottom: 6px;
}
.card h2::after {
    content: '';
    display: block;
    height: 16px;
    margin: 8px auto 14px;
    background: url('orn-rule.webp') center / contain no-repeat;
}
.card h3 { font-size: 1rem; margin-bottom: 8px; }
.card p { margin-bottom: 12px; line-height: 1.55; }
.hint-line { font-size: 0.85rem; font-style: italic; color: var(--ink-soft); }

blockquote {
    border-left: 3px solid var(--brass);
    padding: 10px 14px;
    font-style: italic;
    color: var(--ink-soft);
    margin-bottom: 16px;
    line-height: 1.6;
}

/* A printed notice pasted into the file — double rule, ornamented corners,
   no dashes and no rounded box. */
.uv-instruction {
    position: relative;
    background:
        url('orn-corner-tl.webp') left 5px top 5px / 26px no-repeat,
        url('orn-corner-tr.webp') right 5px top 5px / 26px no-repeat,
        url('orn-corner-bl.webp') left 5px bottom 5px / 26px no-repeat,
        url('orn-corner-br.webp') right 5px bottom 5px / 26px no-repeat,
        var(--parchment-deep);
    border: 2px solid var(--sea-green);
    border-radius: 0;
    box-shadow: inset 0 0 0 1px var(--parchment-deep),
                inset 0 0 0 3px rgba(31, 77, 63, 0.45);
    padding: 20px 22px 18px;
    margin-bottom: 16px;
}
.uv-instruction h3 {
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    color: var(--sea-green);
    padding: 0 20px;
    margin-bottom: 4px;
}
.uv-instruction h3::after {
    content: '';
    display: block;
    height: 14px;
    margin: 8px auto 12px;
    background: url('rule-3.webp') center / contain no-repeat;
}
.uv-instruction p:last-child { margin-bottom: 0; }

/* the one instruction with consequences if it is missed */
.keep-this {
    border-top: 1px solid rgba(31, 77, 63, 0.35);
    margin-top: 14px;
    padding-top: 12px;
}

/* Buttons */
.btn {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    padding: 14px;
    margin: 10px 0 4px;
    border: 1px solid var(--brass);
    border-radius: 6px;
    background: var(--parchment-deep);
    color: var(--ink);
    cursor: pointer;
}
.btn.primary {
    background:
        url('bar-right.webp') left 12px center / 52px auto no-repeat,
        url('bar-left.webp') right 12px center / 52px auto no-repeat,
        var(--sea-green);
    border-color: var(--sea-green);
    color: var(--gold);
    font-family: var(--display);
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    padding-left: 74px;
    padding-right: 74px;
    box-shadow: inset 0 0 0 1px var(--sea-green), inset 0 0 0 2px rgba(212, 175, 79, 0.5);
}
.btn:active { transform: translateY(1px); }

/* Messages */
.message { min-height: 1.2em; margin-top: 10px; font-size: 0.95rem; line-height: 1.5; }
.message.error { color: var(--error); }
.message.success { color: var(--success); font-weight: bold; }

/* Slot rows (séance order, route berths) */
.slot-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 14px 0 18px;
}
.slot {
    flex: 1;
    max-width: 110px;
    min-height: 76px;
    border: 2px dashed var(--brass);
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--ink-soft);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
}
.slot.filled {
    border-style: solid;
    background: var(--parchment-deep);
    color: var(--ink);
}
.slot-name { font-size: 0.7rem; text-align: center; line-height: 1.2; }
.slot-art { width: 46px; height: 46px; object-fit: contain; }
/* Séance berths — the same framed cards as the buttons, empty ones numbered */
.seat {
    position: relative;
    flex: 1;
    max-width: 118px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: block;
    line-height: 0;
}
.seat-card {
    width: 100%;
    aspect-ratio: 258 / 300;
    height: auto;
    display: block;
    border-radius: 4px;
}
.seat-number {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56%;
    opacity: 0.9;
}

/* Guest tiles (unlock) */
.guest-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.guest-tile {
    /* the artwork is the whole button — frame, portrait and name */
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: block;
    line-height: 0;
}
.guest-card {
    width: 100%;
    aspect-ratio: 258 / 300;
    height: auto;
    display: block;
    border-radius: 4px;
}
.guest-tile.picked { opacity: 0.35; }


/* Fallback entry */
#p3-input {
    width: 100%;
    font-family: inherit;
    font-size: 1.1rem;
    letter-spacing: 2px;
    padding: 12px;
    border: 1px solid var(--brass);
    border-radius: 6px;
    background: #fff9ea;
    color: var(--ink);
    text-align: center;
    margin-bottom: 6px;
}

/* Dials (Puzzle 1) */
.dial-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: flex-end;
    margin: 16px 0 28px;
}
.dial {
    flex: 1;
    max-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.dial-icon {
    height: 96px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 2px;
}
.dial-label {
    font-family: var(--display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--ink);
}
/* the "what to look for" clue — the whole point of the puzzle */
.dial-note {
    font-size: 0.75rem;
    font-style: italic;
    line-height: 1.25;
    text-align: center;
    color: var(--ink-soft);
    /* two lines' worth, so a one-line note still leaves the plates aligned */
    min-height: 2.5em;
    margin-bottom: 8px;
}
/* the engraved plates carry the chrome; the elements just size to them */
.dial-btn {
    width: 100%;
    max-width: 116px;
    aspect-ratio: 220 / 94;
    border: 0;
    background: center / contain no-repeat;
    cursor: pointer;
}
.dial-btn.up { background-image: url('plate-up.webp'); }
.dial-btn.down { background-image: url('plate-down.webp'); }
.dial-value {
    width: 100%;
    max-width: 116px;
    aspect-ratio: 220 / 109;
    background: url('plate-value.webp') center / contain no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
}

/* Animal pool (Puzzle 2) */
.tile-pool {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.animal-tile {
    /* same framed-card button as the séance guests */
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: block;
    line-height: 0;
}
.animal-tile.picked { opacity: 0.35; }

/* Code display (Puzzle 3 + finale) */
.code-display {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 16px 0;
}
.digit {
    font-family: var(--display);
    width: 52px; height: 64px;
    border: 2px solid var(--brass);
    border-radius: 6px;
    background: #fff9ea;
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.digit.blank { color: var(--brass-bright); background: var(--parchment-deep); }
.code-display.solved .digit { border-color: var(--sea-green); color: var(--sea-green); }

.sea-signoff { text-align: right; font-style: italic; color: var(--ink-soft); }
.creed { letter-spacing: 1px; font-variant: small-caps; }
.creed-line {
    font-family: var(--display);
    text-align: center;
    color: var(--brass);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-top: 18px;
}

/* Footer */
footer {
    text-align: center;
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin-top: 24px;
}
footer a { color: var(--ink-soft); }

/* Numbered medallions in place of the ①②③ glyphs */
.mark {
    display: inline-block;
    width: 1.35em;
    height: 1.35em;
    vertical-align: -0.35em;
    margin: 0 0.05em;
}
.card h2 .mark-lg {
    width: 1.6em;
    height: 1.6em;
    vertical-align: -0.42em;
    margin-right: 0.1em;
}

/* The unlock heading carries no medallion, so it needs a little more size
   to hold the top of the page on its own */
#stage-unlock h2 { font-size: 1.5rem; }

/* The three marks get a line of their own */
.mark-row {
    text-align: center;
    margin: 12px 0 14px;
}
.mark-row .mark {
    width: 2.2em;
    height: 2.2em;
    vertical-align: middle;
    margin: 0 0.28em;
}