/* ==========================================================================
   High Tide — "Tide & Gold" identity layer
   ==========================================================================
   Loaded after styles.css. The logo is the brief: gold leaf above a waterline,
   turquoise sea below it, a splash where they meet. Before this layer the game
   spoke a different language from its own logo — ember orange, wine and a
   purple night — so every screen read as a generic dark template.

   What changes here, and nothing else:
     - the palette tokens (styles.css components already read them; the ember
       and wine literals in styles.css were moved onto the same new colours)
     - the type of headings: Cinzel, the logo's chiselled serif family
     - the signature pieces: waterline text, liquid-gold primary button,
       gold-hairline panels with a sea glow at their base, the wave rule
   Semantic colours (danger, tension, the per-character colours, jealousy and
   pact notes) are deliberately left alone: they carry meaning, not brand.
   ========================================================================== */

:root {
    --bg-void: #020c13;
    --bg-deep: #05202b;
    --card-bg: rgba(6, 30, 42, 0.58);
    --card-bg-solid: rgba(4, 21, 30, 0.96);
    --border-soft: rgba(242, 195, 91, 0.14);
    --border-glow: rgba(25, 184, 191, 0.28);

    /* The old accent names keep working; they just mean the logo now. */
    --ember: #f2b84b;        /* gold leaf — the primary accent */
    --ember-soft: #ffd98c;
    --wine: #0b6e78;         /* deep sea */
    --frost: #5fe0dc;        /* foam turquoise */
    --gold: #f4c75e;
    --amber: #ffcf5c;
    --amber-soft: #ffe3a3;

    --sea: #19b8bf;
    --sea-deep: #06414b;
    --foam: #e2fcf8;
    --gold-hi: #fff1bd;
    --gold-lo: #b97a1c;
    --hairline: rgba(244, 199, 94, 0.22);

    /* Gold above the waterline, sea below — the logo's letters, as a fill. */
    --waterline: linear-gradient(180deg, #fff3c4 0%, #f6cb63 30%, #d99a2b 52%, #3fd0cf 53%, #149aa6 72%, #0b5f6e 100%);

    --focus-ring: #5fe0dc;
    --shadow-glow: 0 0 22px rgba(25, 184, 191, 0.10);
    --shadow-btn: 0 6px 22px rgba(242, 184, 75, 0.28);
}

::selection { background: var(--sea); color: #021016; }

/* --- The sea itself -------------------------------------------------------- */
body {
    background-image:
        radial-gradient(ellipse 70% 45% at 50% -8%, rgba(244, 199, 94, 0.10) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 8% 108%, rgba(25, 184, 191, 0.16) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 95% 100%, rgba(11, 110, 120, 0.20) 0%, transparent 70%),
        linear-gradient(180deg, var(--bg-void) 0%, var(--bg-deep) 100%);
}

/* --- Signature: waterline text ------------------------------------------- */
.intro-banner h2,
.modal-card h2 {
    font-family: 'Cinzel', serif;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: var(--waterline);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold);
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(25, 184, 191, 0.18));
}

/* The round title is too small for the waterline split to read (it goes
   muddy green), so it gets the gold half only. Names inside keep their own
   colours. */
#roundTitle {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--gold-hi);
    text-shadow: 0 0 16px rgba(244, 199, 94, 0.25);
}

.intro-banner h2 { font-size: clamp(24px, 2.2vw, 32px); }

/* --- Masthead: the logo, a gold hairline and a wave under it -------------- */
header {
    background:
        linear-gradient(180deg, rgba(4, 22, 31, 0.92), rgba(3, 15, 22, 0.86));
    border-bottom: 1px solid var(--hairline);
}

header::after {
    height: 6px;
    bottom: -6px;
    opacity: 0.9;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='6' viewBox='0 0 80 6'%3E%3Cpath d='M0 3 Q10 0 20 3 T40 3 T60 3 T80 3' fill='none' stroke='%2319b8bf' stroke-opacity='.55' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x center / 80px 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

#titleHeader {
    background: none;
    -webkit-text-fill-color: initial;
    line-height: 0;
    display: flex;
    align-items: center;
}

#titleHeader img {
    display: block;
    height: clamp(36px, 3.6vw, 52px);
    width: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 16px rgba(25, 184, 191, 0.18));
    transition: filter 0.25s ease, transform 0.25s var(--ease-pop);
}

h1#titleHeader:hover { filter: none; }
#titleHeader:hover img {
    transform: scale(1.04) rotate(-1deg);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(244, 199, 94, 0.45));
}

.stat-cluster,
.tide-indicator {
    border-color: var(--hairline) !important;
    background: linear-gradient(180deg, rgba(244, 199, 94, 0.06), rgba(25, 184, 191, 0.05)) !important;
}

.stat-key,
.sea-readout .sea-label { color: rgba(244, 199, 94, 0.72); }

/* --- Panels: navy glass, gold hairline, the sea glowing at the base -------- */
.arena-section,
.sidebar-player-card,
.action-box-group,
.intro-banner,
.modal-card {
    background:
        linear-gradient(180deg, rgba(244, 199, 94, 0.035), transparent 40%),
        var(--card-bg);
    border: 1px solid var(--hairline);
    box-shadow:
        inset 0 1px 0 rgba(255, 241, 189, 0.07),
        inset 0 -40px 50px -40px rgba(25, 184, 191, 0.20),
        0 18px 44px rgba(0, 0, 0, 0.35);
}

.modal-card { background: linear-gradient(180deg, rgba(244, 199, 94, 0.05), transparent 30%), var(--card-bg-solid); }

.modal-card::before {
    background: linear-gradient(160deg, var(--gold-hi), var(--gold) 18%, transparent 40%, transparent 62%, var(--sea) 85%, var(--frost));
    opacity: 0.55;
}

.sidebar-player-card:hover {
    border-color: rgba(244, 199, 94, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 241, 189, 0.1),
        inset 0 -40px 50px -40px rgba(25, 184, 191, 0.3),
        0 10px 30px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(244, 199, 94, 0.15);
}

aside {
    background: linear-gradient(180deg, rgba(3, 18, 26, 0.75), rgba(3, 22, 30, 0.55));
    border-right: 1px solid var(--hairline);
}

/* Section labels: small-caps Cinzel in gold, with a diamond instead of a dot. */
.aside-title,
.action-box-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.16em;
}

.aside-title { border-bottom: 1px solid var(--hairline); }

.aside-title::before {
    width: 7px;
    height: 7px;
    border-radius: 1px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--gold-hi), var(--sea));
    box-shadow: 0 0 10px rgba(25, 184, 191, 0.6);
    animation: none;
}

.action-box-title { color: var(--frost); }

/* --- Tabs ------------------------------------------------------------------ */
.tabs-navigation { border-bottom: 1px solid var(--hairline); }
.tab-btn { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.06em; }
.tab-btn.active { color: var(--gold); text-shadow: 0 0 14px rgba(244, 199, 94, 0.35); }
.tab-slider {
    height: 3px;
    background: linear-gradient(90deg, var(--gold-hi), var(--gold) 45%, var(--sea));
    box-shadow: 0 0 12px rgba(25, 184, 191, 0.55);
}

/* --- Buttons ---------------------------------------------------------------
   The primary button is a logo letter: polished gold with the sea risen into
   its lower third behind a wave. */
.btn-harem {
    /* Spaced capitals on every primary, like the draw button. */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1b1204;
    text-shadow: 0 1px 0 rgba(255, 244, 200, 0.55);
    border: 1px solid rgba(255, 235, 170, 0.75);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 27 Q15 22 30 27 T60 27 T90 27 T120 27 V40 H0Z' fill='%2312a3ab' fill-opacity='.9'/%3E%3Cpath d='M0 27 Q15 22 30 27 T60 27 T90 27 T120 27' fill='none' stroke='%23e2fcf8' stroke-opacity='.8' stroke-width='1.2'/%3E%3C/svg%3E") bottom / 120px 100% repeat-x,
        linear-gradient(180deg, #fff2c2 0%, #f7cd66 35%, #e1a336 70%, #b97a1c 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 6px 22px rgba(242, 184, 75, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.35);
}

.btn-harem:hover:not(:disabled) {
    background-position: 60px bottom, 0 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 8px 30px rgba(242, 184, 75, 0.4),
        0 0 26px rgba(25, 184, 191, 0.35),
        0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* Grows plainly on hover: the pop curve overshot and came back, a zoom in and out. */
.btn-harem { transition: background-position 0.9s ease, box-shadow 0.25s ease, transform 0.2s ease-out; }

/* styles.css gives `.nav-btn:hover` a flat translucent background, which
   would wipe the gold off a `nav-btn btn-harem` the moment you point at it. */
.btn-harem.nav-btn:hover:not(:disabled) {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 27 Q15 22 30 27 T60 27 T90 27 T120 27 V40 H0Z' fill='%2312a3ab' fill-opacity='.9'/%3E%3Cpath d='M0 27 Q15 22 30 27 T60 27 T90 27 T120 27' fill='none' stroke='%23e2fcf8' stroke-opacity='.8' stroke-width='1.2'/%3E%3C/svg%3E") bottom / 120px 100% repeat-x,
        linear-gradient(180deg, #fff2c2 0%, #f7cd66 35%, #e1a336 70%, #b97a1c 100%);
    background-position: 60px bottom, 0 0;
    border-color: rgba(255, 235, 170, 0.9);
}

.action-btn {
    background: linear-gradient(180deg, rgba(25, 184, 191, 0.08), rgba(6, 65, 75, 0.18));
    border: 1px solid rgba(95, 224, 220, 0.22);
    color: var(--foam);
}

.action-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(244, 199, 94, 0.14), rgba(25, 184, 191, 0.12));
    border-color: var(--gold);
    color: #fff;
    box-shadow: 0 6px 20px rgba(25, 184, 191, 0.22), 0 0 0 1px rgba(244, 199, 94, 0.2);
}

/* :not(.btn-harem) — some primary buttons carry both classes (the arena's
   "Next round" is `nav-btn btn-harem`), and this rule, coming later, used to
   strip their gold and leave dark text on a dark plate. */
.nav-btn:not(.btn-harem) {
    border: 1px solid var(--hairline);
    background: rgba(244, 199, 94, 0.05);
}

.nav-btn:not(.btn-harem):hover:not(:disabled) {
    border-color: rgba(244, 199, 94, 0.5);
    background: rgba(244, 199, 94, 0.1);
}

/* Danger keeps danger's colour: gold would make "this hurts someone" look
   like the safe default. */
.btn-danger-glow {
    color: #ff8f7a !important;
    border-color: rgba(255, 107, 96, 0.35) !important;
}

.btn-danger-glow:hover:not(:disabled) {
    background: rgba(255, 107, 96, 0.14) !important;
    border-color: #ff6b60 !important;
}

/* --- Rules and scrollbars ------------------------------------------------- */
.arena-head,
#roundTitle { border-bottom-color: var(--hairline); }

* { scrollbar-color: rgba(244, 199, 94, 0.35) transparent; scrollbar-width: thin; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(244, 199, 94, 0.45), rgba(25, 184, 191, 0.45)); }

/* --- Bowl caption under the 3D bowl matches the logo too ------------------- */
.bowl-caption {
    font-weight: 700;
    background: var(--waterline);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 13px;
}

/* ==========================================================================
   Phase 2 — menu, ticket, windows, icons, setup and endings
   ========================================================================== */

/* --- Icons (src/icons.js) ------------------------------------------------- */
.ht-ico {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.25em;
    overflow: visible;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

.tide-glyph .ht-ico { width: 26px; height: 26px; vertical-align: middle; }
.sound-toggle .ht-ico { width: 19px; height: 19px; vertical-align: middle; }
.vres-g .ht-ico { width: 17px; height: 17px; }
.vstrain .ht-ico { width: 15px; height: 15px; }
.vrig .ht-ico { width: 15px; height: 15px; vertical-align: -0.2em; }

.sound-toggle {
    border-color: var(--hairline);
    background: linear-gradient(180deg, rgba(244, 199, 94, 0.07), rgba(25, 184, 191, 0.05));
}
.sound-toggle:hover { border-color: rgba(244, 199, 94, 0.55); }
#btnOpenSettings .ht-ico { transition: transform 0.5s var(--ease-pop); }
#btnOpenSettings:hover .ht-ico { transform: rotate(45deg); }

.vres {
    border-color: var(--hairline);
    background: rgba(244, 199, 94, 0.05);
}

/* --- Main menu ------------------------------------------------------------
   Three plaques under the logo, centred, no numerals. Every plaque carries a
   strip of sea at its base that rises and rolls when you point at it; the
   first one is solid gold leaf with the sea inside it — a letter of the logo
   you can press. The secondary two are night glass in a gold hairline. */

/* The shade behind the menu used to be an `ellipse at center` (farthest-corner)
   gradient, which never reaches transparent at the box edges — it showed as a
   dark rectangle on the footage. closest-side fades out before the edges. */
#titleScreen.has-video .title-menu::before {
    inset: -70px -160px;
    background: radial-gradient(closest-side, rgba(2, 10, 16, 0.72), rgba(2, 10, 16, 0.42) 60%, transparent);
}

.title-menu {
    width: min(400px, 100%);
    gap: 12px;
    margin-top: clamp(14px, 3vh, 30px);
}

.title-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 13px 26px 15px;
    border-radius: 14px;
    border: 1px solid rgba(244, 199, 94, 0.30);
    background: linear-gradient(180deg, rgba(8, 36, 48, 0.78), rgba(3, 15, 23, 0.84));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 241, 189, 0.10), 0 10px 30px rgba(0, 0, 0, 0.38);
    color: #f3e6c4;
    text-align: center;
    overflow: hidden;
    transition: transform 0.25s var(--ease-pop), border-color 0.25s ease, box-shadow 0.25s ease;
    /* No blue flash on press: no tap highlight, no text selection, no focus ring
       (the plaque's own glow shows keyboard focus). */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    outline: none;
}
.title-menu-btn:focus,
.title-menu-btn:focus-visible,
.title-link:focus { outline: none; }
.title-menu-btn *,
.title-link { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }

/* The sea in the plaque: a wave crest on top of a turquoise fill, parked so
   only a sliver shows; hover lets it rise and roll. */
.title-menu-btn::before {
    inset: auto 0 0 0;
    height: 100%;
    z-index: -1;
    opacity: 1;
    border-radius: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='14' viewBox='0 0 80 14'%3E%3Cpath d='M0 8 Q10 2 20 8 T40 8 T60 8 T80 8 V14 H0Z' fill='%23129aa3'/%3E%3Cpath d='M0 8 Q10 2 20 8 T40 8 T60 8 T80 8' fill='none' stroke='%23bff7f2' stroke-opacity='.85' stroke-width='1.3'/%3E%3C/svg%3E") 0 0 / 80px 14px repeat-x,
        linear-gradient(180deg, transparent 13px, #0e8d97 13px, #07505a 100%);
    opacity: 0.55;
    transform: translateY(86%);
    transition: transform 0.6s var(--ease-smooth), opacity 0.4s ease;
}

/* A sweep of light across the plaque on hover (was the side bar). */
.title-menu-btn::after {
    left: -60%;
    top: 0;
    width: 40%;
    height: 100%;
    border-radius: 0;
    background: linear-gradient(105deg, transparent, rgba(255, 246, 214, 0.28), transparent);
    box-shadow: none;
    transform: skewX(-18deg);
    transition: none;
    pointer-events: none;
}

.title-menu-btn:hover:not(:disabled),
.title-menu-btn:focus-visible {
    transform: scale(1.02);
    border-color: rgba(244, 199, 94, 0.85);
    color: #fff6dc;
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 241, 189, 0.16),
        0 14px 34px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(25, 184, 191, 0.25),
        0 0 0 1px rgba(244, 199, 94, 0.25);
}

.title-menu-btn:hover:not(:disabled)::before,
.title-menu-btn:focus-visible::before {
    opacity: 0.8;
    transform: translateY(74%);
    animation: plaqueWave 2.4s linear infinite;
}

.title-menu-btn:hover:not(:disabled)::after,
.title-menu-btn:focus-visible::after { animation: plaqueShine 0.9s ease-out; }

@keyframes plaqueWave { to { background-position: 80px 0, 0 0; } }
@keyframes plaqueShine { from { left: -60%; } to { left: 130%; } }

.title-menu-btn:disabled {
    opacity: 0.38;
    filter: saturate(0.4);
}

.tm-idx,
.tm-arrow { display: none; }

.tm-text { align-items: center; gap: 3px; }

.tm-label {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: 0.16em;
}

.tm-meta {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: rgba(226, 252, 248, 0.66);
}

/* The primary plaque: gold leaf, sea risen into its lower third. */
.title-menu-btn.is-primary {
    padding: 17px 26px 19px;
    border: 1px solid rgba(255, 238, 180, 0.9);
    background: linear-gradient(180deg, #fff3c6 0%, #f8d06c 32%, #e5a93b 68%, #b97a1c 100%);
    color: #1d1405;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 12px 34px rgba(0, 0, 0, 0.45),
        0 0 38px rgba(244, 199, 94, 0.28);
}

.title-menu-btn.is-primary::before { opacity: 0.95; transform: translateY(82%); }

.title-menu-btn.is-primary:hover::before,
.title-menu-btn.is-primary:focus-visible::before { opacity: 1; transform: translateY(74%); }

.title-menu-btn.is-primary:hover,
.title-menu-btn.is-primary:focus-visible {
    color: #160f03;
    border-color: #fff4c8;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 16px 40px rgba(0, 0, 0, 0.5),
        0 0 52px rgba(244, 199, 94, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.3);
}

.title-menu-btn.is-primary .tm-label {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.title-menu-btn.is-primary .tm-meta { color: rgba(40, 26, 6, 0.78); font-weight: 600; }

/* The footage text-shadows were for light type; on gold they smear. */
#titleScreen.has-video .title-menu-btn.is-primary .tm-label,
#titleScreen.has-video .title-menu-btn.is-primary .tm-meta { text-shadow: 0 1px 0 rgba(255, 244, 200, 0.5); }
#titleScreen.has-video .title-menu-btn .tm-label { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }

/* --- Links under the menu: quiet pills, not a second row of buttons -------- */
.title-links {
    width: min(400px, 100%);
    margin-top: clamp(18px, 3vh, 28px);
    padding-top: 0;
    border-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-byline {
    margin-bottom: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(226, 252, 248, 0.6);
}

.title-byline::before,
.title-byline::after {
    content: "";
    width: 42px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='8'%3E%3Cpath d='M0 4h22' stroke='%23f4c75e' stroke-opacity='.5'/%3E%3Cpath d='M24 4c2 0 2-2.4 4.5-2.4S31 4 33 4s2-2.4 4.5-2.4S40 4 42 4' fill='none' stroke='%235fe0dc' stroke-opacity='.8' stroke-width='1.1'/%3E%3C/svg%3E") center / contain no-repeat;
}

.title-byline::after { transform: scaleX(-1); }

.title-links-row {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.title-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(244, 199, 94, 0.25);
    background: rgba(3, 16, 24, 0.6);
}

.title-link.is-support { border-color: rgba(244, 199, 94, 0.45); }
.title-link:hover,
.title-link:focus-visible { border-color: var(--gold); transform: scale(1.03); }

.tl-icon { width: 16px; height: 16px; }
.tl-meta,
.tl-arrow { display: none; }
.tl-label { font-size: 0.8125rem; }

.title-foot { border-top: 0; }

/* --- The drawn ticket -----------------------------------------------------
   Folded: cream stock with a printed gold border and a faint wave watermark.
   Open: a night-sea card in a gold frame, the name in the logo's serif, sealed
   with turquoise wax stamped with a wave. The glow stays the drawn person's
   colour — that is information, not decoration. */
.rt-flap {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='14' viewBox='0 0 60 14'%3E%3Cpath d='M0 7 Q7.5 1 15 7 T30 7 T45 7 T60 7' fill='none' stroke='%23b0802c' stroke-opacity='.18' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x center / 60px 14px,
        linear-gradient(180deg, #f8edd3, #e3cc9c);
    box-shadow: inset 0 0 0 1px rgba(150, 105, 40, 0.35), inset 0 0 0 5px #f3e4c1, inset 0 0 0 6px rgba(201, 138, 34, 0.75);
}

.rt-body {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30' preserveAspectRatio='none'%3E%3Cpath d='M0 16 Q15 8 30 16 T60 16 T90 16 T120 16 V30 H0Z' fill='%2319b8bf' fill-opacity='.22'/%3E%3Cpath d='M0 16 Q15 8 30 16 T60 16 T90 16 T120 16' fill='none' stroke='%235fe0dc' stroke-opacity='.45' stroke-width='1'/%3E%3C/svg%3E") bottom / 120px 30px repeat-x,
        radial-gradient(ellipse at 50% 0%, rgba(244, 199, 94, 0.14), transparent 60%),
        linear-gradient(170deg, #07222e, #041620 60%, #031018);
}

.rt-body::before {
    inset: 5px;
    border: 1px solid rgba(244, 199, 94, 0.55);
    box-shadow: inset 0 0 0 3px rgba(4, 22, 32, 0.9), inset 0 0 0 4px rgba(244, 199, 94, 0.22);
}

.rt-role { color: var(--gold); font-weight: 700; }

.rt-name {
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: 31px;
    letter-spacing: 0.04em;
}

.rt-seal {
    width: 34px;
    height: 34px;
    right: 9px;
    bottom: 7px;
    color: transparent;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13c2 0 2-1.6 3.5-1.6S10.5 13 12 13s2-1.6 3.5-1.6S17.5 13 19 13' fill='none' stroke='%23e2fcf8' stroke-opacity='.85' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 70% no-repeat,
        radial-gradient(circle at 35% 30%, #4fe0db, #0f8f9b 55%, #064a54 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(6, 74, 84, 0.8);
}

/* --- Windows --------------------------------------------------------------
   Gold corner flourishes (with a curl of sea inside each) and a wave rule
   under every title. */
.modal-card::after {
    content: "";
    position: absolute;
    inset: 8px;
    pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M2 22V6a4 4 0 0 1 4-4h16' fill='none' stroke='%23f4c75e' stroke-opacity='.75' stroke-width='1.3'/%3E%3Cpath d='M7 15c0-4.4 3.6-8 8-8' fill='none' stroke='%235fe0dc' stroke-opacity='.7' stroke-width='1.1'/%3E%3Ccircle cx='6' cy='6' r='1.6' fill='%23f4c75e'/%3E%3C/svg%3E") top left / 34px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cg transform='translate(34 0) scale(-1 1)'%3E%3Cpath d='M2 22V6a4 4 0 0 1 4-4h16' fill='none' stroke='%23f4c75e' stroke-opacity='.75' stroke-width='1.3'/%3E%3Cpath d='M7 15c0-4.4 3.6-8 8-8' fill='none' stroke='%235fe0dc' stroke-opacity='.7' stroke-width='1.1'/%3E%3Ccircle cx='6' cy='6' r='1.6' fill='%23f4c75e'/%3E%3C/g%3E%3C/svg%3E") top right / 34px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cg transform='translate(0 34) scale(1 -1)'%3E%3Cpath d='M2 22V6a4 4 0 0 1 4-4h16' fill='none' stroke='%23f4c75e' stroke-opacity='.75' stroke-width='1.3'/%3E%3Cpath d='M7 15c0-4.4 3.6-8 8-8' fill='none' stroke='%235fe0dc' stroke-opacity='.7' stroke-width='1.1'/%3E%3Ccircle cx='6' cy='6' r='1.6' fill='%23f4c75e'/%3E%3C/g%3E%3C/svg%3E") bottom left / 34px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cg transform='translate(34 34) scale(-1 -1)'%3E%3Cpath d='M2 22V6a4 4 0 0 1 4-4h16' fill='none' stroke='%23f4c75e' stroke-opacity='.75' stroke-width='1.3'/%3E%3Cpath d='M7 15c0-4.4 3.6-8 8-8' fill='none' stroke='%235fe0dc' stroke-opacity='.7' stroke-width='1.1'/%3E%3Ccircle cx='6' cy='6' r='1.6' fill='%23f4c75e'/%3E%3C/g%3E%3C/svg%3E") bottom right / 34px no-repeat;
}

.modal-card h2::after {
    content: "";
    display: block;
    width: 150px;
    height: 12px;
    margin: 10px auto 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='12' viewBox='0 0 150 12'%3E%3Cpath d='M0 6h52M98 6h52' stroke='%23f4c75e' stroke-opacity='.5' stroke-width='1'/%3E%3Cpath d='M55 6c3.3 0 3.3-3 6.7-3s3.3 3 6.6 3 3.4-3 6.7-3 3.3 3 6.7 3 3.3-3 6.6-3 3.4 3 6.7 3' fill='none' stroke='%235fe0dc' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.setup-card h2,
.dossier-card h2 {
    font-family: 'Cinzel', serif;
    font-size: clamp(22px, 2vw, 28px);
}

.modal-desc { color: var(--text-muted); }

.modal-img {
    border: 1px solid rgba(244, 199, 94, 0.45);
    box-shadow: 0 0 0 4px rgba(4, 22, 32, 0.9), 0 0 0 5px rgba(244, 199, 94, 0.25), 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 30px rgba(25, 184, 191, 0.15);
}

/* --- Setup ------------------------------------------------------------------ */
.setup-block h3 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.14em;
}

.setup-block {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(244, 199, 94, 0.10);
}

.setup-cast-btn,
.setup-contract,
.setup-toggle {
    border-color: rgba(244, 199, 94, 0.14);
    background: linear-gradient(180deg, rgba(244, 199, 94, 0.04), rgba(25, 184, 191, 0.03));
}

.setup-cast-btn:hover,
.setup-contract:hover { border-color: rgba(244, 199, 94, 0.45); }

.setup-cast-btn.is-sel,
.setup-contract.is-sel {
    border-color: var(--gold);
    background: linear-gradient(180deg, rgba(244, 199, 94, 0.14), rgba(25, 184, 191, 0.10));
    box-shadow: 0 0 0 1px rgba(244, 199, 94, 0.35), inset 0 -24px 30px -24px rgba(25, 184, 191, 0.45);
}

.setup-cast-btn.is-sel .setup-cast-face {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px #04161f, 0 0 0 3px var(--sea);
}

.setup-cast-name { font-family: 'Cinzel', serif; }

.setup-toggle.is-on {
    border-color: rgba(95, 224, 220, 0.5);
    background: linear-gradient(180deg, rgba(25, 184, 191, 0.12), rgba(25, 184, 191, 0.05));
}
.setup-toggle.is-on .setup-toggle-box { border-color: var(--frost); color: var(--frost); }

.setup-contract-style { color: var(--gold); }

/* The prologue opens like a logbook: a gold drop cap on its first line. */
.setup-beat:first-child::first-letter {
    font-family: 'Cinzel', serif;
    font-size: 2.6em;
    float: left;
    line-height: 0.9;
    margin: 0.06em 0.1em 0 0;
    color: var(--gold);
}

/* --- Endings ----------------------------------------------------------------
   The one screen that should feel like a title card. */
#endingModal .modal-card,
#epilogueModal .modal-card {
    max-width: 760px;
    padding: 40px 38px 34px;
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(244, 199, 94, 0.10), transparent 70%),
        radial-gradient(ellipse 90% 40% at 50% 100%, rgba(25, 184, 191, 0.14), transparent 70%),
        var(--card-bg-solid);
}

#endingModal h2,
#epilogueModal h2 {
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: 0.04em;
}

#endingModal .modal-desc {
    font-size: 1rem;
    line-height: 1.7;
    font-style: italic;
    color: var(--text-main);
    max-width: 56ch;
    margin-inline: auto;
}

.epilogue-text-box {
    background: linear-gradient(180deg, rgba(244, 199, 94, 0.04), rgba(25, 184, 191, 0.04));
    border: 1px solid rgba(244, 199, 94, 0.18);
    border-radius: 12px;
    padding: 18px 20px;
}

.epilogue-text-box h3 {
    font-family: 'Cinzel', serif;
    color: var(--gold);
    letter-spacing: 0.06em;
}

/* --- Scene plates (Media.plateFor) -----------------------------------------
   An empty location still for a social beat, with the two people in the round
   as gold-ringed portrait medallions in the corner. */
.visual-plate-wrapper { position: relative; }

.visual-plate-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(2, 10, 16, 0.55) 0%, transparent 38%);
}

.plate-faces {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 1;
    display: flex;
    gap: 12px;
}

.plate-face {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    animation: plateFaceIn 0.5s var(--ease-pop) both;
}

.plate-face + .plate-face { animation-delay: 0.12s; }

@keyframes plateFaceIn {
    from { opacity: 0; transform: translateY(8px) scale(0.9); }
    to   { opacity: 1; transform: none; }
}

.plate-face img {
    width: clamp(48px, 5vw, 68px);
    height: clamp(48px, 5vw, 68px);
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 2px solid var(--gold);
    box-shadow: 0 0 0 3px rgba(4, 22, 32, 0.85), 0 6px 16px rgba(0, 0, 0, 0.6), 0 0 18px rgba(25, 184, 191, 0.35);
}

.plate-face figcaption {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--gold-hi);
    background: rgba(2, 12, 18, 0.65);
    border: 1px solid rgba(244, 199, 94, 0.3);
    padding: 1px 9px;
    border-radius: 999px;
}


/* ==========================================================================
   Phase 3 (24-10-2026) — the pass that finishes the brand
   ==========================================================================
   1. The fonts finally load (src/fonts.css). Until now every Cinzel and Outfit
      line on screen was really Times New Roman and Arial.
   2. Story text gets a book face (Spectral); status lines stay in the UI face,
      so "what happened" and "what changed" no longer look the same.
   3. The screens the first two phases missed: Settings, the history log, the
      action groups, the choice cards, the Locker, the setup backdrop.
   ========================================================================== */

:root {
    --font-prose: 'Spectral', 'Georgia', serif;
    --font-ui: 'Outfit', 'Segoe UI', sans-serif;
    --font-title: 'Cinzel', 'Times New Roman', serif;
}

/* --- Story text in a book face ---------------------------------------------- */
.bubble-text,
.scene-prose,
.intro-banner p,
.setup-beat,
.epilogue-text-box,
.epilogue-text-box p,
#endingModal .modal-desc {
    font-family: var(--font-prose);
}
.bubble-text { font-size: 1.02rem; color: #e9f1ef; }
.scene-prose { font-size: 1rem; font-style: italic; }
.setup-beat { font-size: 1.05rem; color: #dfe9e7; }
.intro-banner p { font-size: 1rem; color: #d7e3e1; }
.intro-banner p strong { font-family: var(--font-ui); font-weight: 600; color: var(--gold-hi); }

/* Speech: a quiet card per line with the speaker's name in small capitals.
   The speaker colour still comes in inline on the left border. */
.speech-bubble {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 70%),
        rgba(4, 22, 32, 0.45);
    border-radius: 4px 14px 14px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding: 11px 18px 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.speech-bubble + .speech-bubble { margin-top: 2px; }
.bubble-name {
    font-family: var(--font-title);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

/* Status lines: the narrator's ledger, not the story. Small diamond marker,
   UI face, and the colour carries the kind (success/stat/status). */
.narrative-line {
    font-family: var(--font-ui);
    border-left: 0;
    padding: 5px 10px 5px 22px;
    position: relative;
}
.narrative-line::before {
    content: "";
    position: absolute;
    left: 7px; top: 0.95em;
    width: 5px; height: 5px;
    transform: rotate(45deg);
    background: currentColor;
    opacity: 0.55;
}
.narrative-line.scene-prose { font-family: var(--font-prose); padding-left: 22px; }
.narrative-line.scene-prose::before { background: var(--frost); opacity: 0.5; }
.stat-change { color: #9fe6d6; }
.success-log { color: var(--gold); }

/* --- Round title ------------------------------------------------------------ */
#roundTitle { font-size: clamp(18px, 1.5vw, 22px); letter-spacing: 0.03em; }

/* --- Action groups: one accent per kind ------------------------------------- */
.action-box-group {
    --kind: var(--frost);
    --kind-rgb: 95, 224, 220;
    position: relative;
    padding: 14px 16px 16px;
    border-radius: 14px;
}
.action-box-group[data-kind="intimate"] { --kind: #f39ab4; --kind-rgb: 243, 154, 180; }
.action-box-group[data-kind="tells"]    { --kind: var(--gold); --kind-rgb: 244, 199, 94; }
.action-box-group[data-kind="trio"]     { --kind: #ff9f6b; --kind-rgb: 255, 159, 107; }

.action-box-group::before {
    content: "";
    position: absolute;
    left: 16px; right: 16px; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--kind-rgb), 0.7), transparent);
}
.action-box-title {
    color: var(--kind, var(--frost));
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.action-box-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--kind-rgb, 95, 224, 220), 0.35), transparent);
}

.action-box-group .action-btn {
    font-family: var(--font-ui);
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 9px 14px;
    border-radius: 999px;
    color: #eef7f5;
    background: linear-gradient(180deg, rgba(var(--kind-rgb), 0.10), rgba(var(--kind-rgb), 0.03));
    border: 1px solid rgba(var(--kind-rgb), 0.26);
}
.action-box-group .action-btn:hover:not(:disabled) {
    color: #fff;
    background: linear-gradient(180deg, rgba(var(--kind-rgb), 0.24), rgba(var(--kind-rgb), 0.08));
    border-color: rgba(var(--kind-rgb), 0.85);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 18px rgba(var(--kind-rgb), 0.22);
}
.action-box-group .action-btn.is-locked {
    opacity: 1;
    color: rgba(238, 247, 245, 0.42);
    background: rgba(255, 255, 255, 0.015);
    border-style: dashed;
    border-color: rgba(var(--kind-rgb), 0.18);
}
.action-box-group .action-btn.is-locked .req-badge { color: rgba(255, 180, 160, 0.75); }

.req-badge {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.25);
}
.req-badge.req-ok { color: var(--gold); border-color: rgba(244, 199, 94, 0.35); }
/* A requirement of nothing is noise on fourteen buttons at once. */
.req-badge.req-zero { display: none; }

/* --- Choice cards (cut in / let it happen, landings, confrontations) -------- */
.finish-choice-box,
.landfall-box {
    background:
        linear-gradient(180deg, rgba(244, 199, 94, 0.06), transparent 50%),
        rgba(4, 22, 32, 0.6);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: inset 0 -40px 50px -40px rgba(25, 184, 191, 0.18);
}
.landfall-opt,
.confront-opt {
    position: relative;
    padding: 13px 44px 13px 18px !important;
    border-radius: 10px !important;
    background: linear-gradient(90deg, rgba(244, 199, 94, 0.07), rgba(25, 184, 191, 0.04)) !important;
    border: 1px solid rgba(244, 199, 94, 0.2) !important;
    transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease-pop) !important;
}
.landfall-opt::after,
.confront-opt::after {
    content: "";
    position: absolute;
    right: 18px; top: 50%;
    width: 8px; height: 8px;
    border-top: 2px solid var(--gold);
    border-right: 2px solid var(--gold);
    transform: translateY(-50%) rotate(45deg);
    opacity: 0.45;
    transition: opacity 0.2s, right 0.2s;
}
.landfall-opt:hover:not(:disabled),
.confront-opt:hover:not(:disabled) {
    border-color: rgba(244, 199, 94, 0.65) !important;
    background: linear-gradient(90deg, rgba(244, 199, 94, 0.14), rgba(25, 184, 191, 0.08)) !important;
    transform: scale(1.02) !important;
}
.landfall-opt:hover:not(:disabled)::after,
.confront-opt:hover:not(:disabled)::after { opacity: 1; right: 14px; }
.landfall-opt .lf-lbl { font-family: var(--font-title); font-weight: 700; letter-spacing: 0.04em; color: var(--gold-hi); font-size: 0.95rem; }
.landfall-opt .lf-sub { font-size: 0.78rem; color: rgba(226, 252, 248, 0.6); }

/* --- Sway panel ------------------------------------------------------------- */
.sway-panel {
    background: linear-gradient(180deg, rgba(244, 199, 94, 0.07), rgba(244, 199, 94, 0.015));
    border-color: rgba(244, 199, 94, 0.25);
    border-radius: 14px;
}
.sway-title { font-family: var(--font-title); font-weight: 700; letter-spacing: 0.18em; }
.sway-btn {
    background: rgba(2, 16, 24, 0.55);
    border-color: rgba(244, 199, 94, 0.18);
    border-radius: 10px;
}
.sway-btn-label { font-family: var(--font-ui); font-weight: 600; }
.sway-btn-cost { color: var(--gold); opacity: 0.8; }

/* --- History log: a ship's log, not a terminal ------------------------------- */
#panelLog { max-width: 980px; }
.persistent-log-entry {
    font-family: var(--font-ui);
    font-size: 0.92rem;
    line-height: 1.55;
    color: #d5e3e1;
    position: relative;
    padding: 9px 12px 9px 108px;
    border-bottom: 1px solid rgba(244, 199, 94, 0.07);
    border-radius: 6px;
}
.persistent-log-entry:hover { background: rgba(25, 184, 191, 0.05); }
.log-timestamp {
    position: absolute;
    left: 12px; top: 10px;
    width: 82px;
    box-sizing: border-box;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    text-align: center;
    padding: 1px 0;
    border: 1px solid rgba(244, 199, 94, 0.28);
    border-radius: 999px;
    background: rgba(244, 199, 94, 0.06);
    white-space: nowrap;
}

/* --- Settings: same ship as the rest ----------------------------------------- */
.settings-overlay { background: rgba(1, 10, 15, 0.72); backdrop-filter: blur(10px) saturate(1.1); }
.settings-card {
    position: relative;
    background:
        linear-gradient(180deg, rgba(244, 199, 94, 0.06), transparent 22%),
        linear-gradient(0deg, rgba(25, 184, 191, 0.08), transparent 30%),
        var(--card-bg-solid);
    border: 1px solid var(--hairline);
    box-shadow:
        inset 0 1px 0 rgba(255, 241, 189, 0.08),
        0 30px 90px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(0, 0, 0, 0.4);
}
.settings-head { border-bottom: 1px solid var(--hairline); }
.settings-head h2 {
    font-family: var(--font-title);
    font-weight: 800;
    letter-spacing: 0.03em;
    background: var(--waterline);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.settings-group { border-bottom-color: rgba(244, 199, 94, 0.1); }
.settings-group h3 {
    font-family: var(--font-title);
    color: var(--gold);
    letter-spacing: 0.2em;
    display: flex; align-items: center; gap: 10px;
}
.settings-group h3::before {
    content: "";
    width: 7px; height: 7px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--gold-hi), var(--sea));
}
.settings-label-text { font-family: var(--font-ui); font-weight: 500; }
.settings-close { border-color: var(--hairline); color: var(--gold); }
.settings-close:hover { background: rgba(244, 199, 94, 0.1); color: var(--gold-hi); }
.settings-switch.is-on .switch-track { background: linear-gradient(90deg, var(--sea), var(--frost)); }
.settings-slider input[type="range"] { accent-color: var(--gold); }
.settings-foot { border-top: 1px solid var(--hairline); }
.settings-btn { font-family: var(--font-ui); border-radius: 999px; }
.settings-btn.primary {
    background: linear-gradient(180deg, #fff2c2 0%, #f7cd66 40%, #e1a336 100%);
    border-color: rgba(255, 235, 170, 0.8);
    color: #1b1204;
    box-shadow: 0 6px 20px rgba(242, 184, 75, 0.25);
}
.settings-btn.primary:hover { background: linear-gradient(180deg, #fff6d6 0%, #fad77d 40%, #eab14a 100%); }
.settings-segmented button[aria-pressed="true"],
.settings-segmented .is-on {
    background: linear-gradient(180deg, rgba(244, 199, 94, 0.25), rgba(244, 199, 94, 0.1));
    color: var(--gold-hi);
}

/* --- The Locker ---------------------------------------------------------------- */
.lk-card {
    background:
        linear-gradient(180deg, rgba(244, 199, 94, 0.04), transparent 45%),
        rgba(4, 22, 32, 0.62);
    border-color: rgba(244, 199, 94, 0.14);
    box-shadow: inset 0 -36px 44px -36px rgba(25, 184, 191, 0.22), 0 10px 26px rgba(0, 0, 0, 0.3);
}
.lk-card.is-ready:hover { border-color: rgba(244, 199, 94, 0.5); }
.lk-name { font-family: var(--font-title); font-weight: 700; letter-spacing: 0.02em; color: var(--gold-hi); }
.lk-section h3 { font-family: var(--font-title); color: var(--gold); letter-spacing: 0.06em; }
.lk-band-head { color: var(--frost); }
.lk-claim {
    font-family: var(--font-ui);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.78rem;
    border-radius: 999px;
    color: #1b1204;
    border: 1px solid rgba(255, 235, 170, 0.7);
    background: linear-gradient(180deg, #fff2c2 0%, #f7cd66 40%, #d99a2b 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 14px rgba(242, 184, 75, 0.2);
}

/* --- Setup and prologue: the boat behind the paper ------------------------------ */
#setupModal {
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(2, 12, 18, 0.55), rgba(1, 6, 10, 0.92)),
        url("../data/video/deck.jpg") center / cover no-repeat,
        #020c13;
}
.setup-beat:first-child::first-letter { font-family: var(--font-title); }

/* --- Header: the two rows read as one instrument panel ---------------------------- */
.stat-pill { font-family: var(--font-ui); }
/* Numbers stay in the UI face: in Cinzel a 1 reads as I and a 0 as O. */
.stat-pill .stat-val,
.vday b, .vday strong { font-family: var(--font-ui); font-weight: 700; }

/* --- Sidebar names in the title face ------------------------------------------- */
.player-name-lbl { font-family: var(--font-title); font-weight: 700; letter-spacing: 0.03em; }

/* Status lines are the ledger, so they speak quieter than the story: medium
   weight, and only the names inside them are bright. */
.narrative-line.status-log,
.narrative-line.success-log,
.narrative-line.stat-change,
.persistent-log-entry { font-weight: 400; }
.narrative-line.status-log { color: rgba(255, 227, 163, 0.82); }
.narrative-line.status-log strong { color: var(--gold-hi); font-weight: 600; }
.narrative-line.success-log { color: rgba(244, 199, 94, 0.9); }
.persistent-log-entry strong { color: var(--gold-hi); font-weight: 600; }
.persistent-log-entry.status-log { color: #e6dcc0; }
.intro-banner p { max-width: 78ch; }

/* --- Window frame that stays put -------------------------------------------
   The modal cards scroll themselves (overflow-y: auto), and an absolutely
   placed ::before/::after inside a scroller only covers its first screenful:
   on a long card (the dossier) the gold corners and the gradient rim stopped
   halfway down and sat on top of the text. Element backgrounds do not scroll
   with the content, so the frame now lives there: the corners as four
   background layers, the rim as a border-box gradient behind a transparent
   border. */
:root {
    --ht-corners:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M2 22V6a4 4 0 0 1 4-4h16' fill='none' stroke='%23f4c75e' stroke-opacity='.75' stroke-width='1.3'/%3E%3Cpath d='M7 15c0-4.4 3.6-8 8-8' fill='none' stroke='%235fe0dc' stroke-opacity='.7' stroke-width='1.1'/%3E%3Ccircle cx='6' cy='6' r='1.6' fill='%23f4c75e'/%3E%3C/svg%3E") top 8px left 8px / 34px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cg transform='translate(34 0) scale(-1 1)'%3E%3Cpath d='M2 22V6a4 4 0 0 1 4-4h16' fill='none' stroke='%23f4c75e' stroke-opacity='.75' stroke-width='1.3'/%3E%3Cpath d='M7 15c0-4.4 3.6-8 8-8' fill='none' stroke='%235fe0dc' stroke-opacity='.7' stroke-width='1.1'/%3E%3Ccircle cx='6' cy='6' r='1.6' fill='%23f4c75e'/%3E%3C/g%3E%3C/svg%3E") top 8px right 8px / 34px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cg transform='translate(0 34) scale(1 -1)'%3E%3Cpath d='M2 22V6a4 4 0 0 1 4-4h16' fill='none' stroke='%23f4c75e' stroke-opacity='.75' stroke-width='1.3'/%3E%3Cpath d='M7 15c0-4.4 3.6-8 8-8' fill='none' stroke='%235fe0dc' stroke-opacity='.7' stroke-width='1.1'/%3E%3Ccircle cx='6' cy='6' r='1.6' fill='%23f4c75e'/%3E%3C/g%3E%3C/svg%3E") bottom 8px left 8px / 34px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cg transform='translate(34 34) scale(-1 -1)'%3E%3Cpath d='M2 22V6a4 4 0 0 1 4-4h16' fill='none' stroke='%23f4c75e' stroke-opacity='.75' stroke-width='1.3'/%3E%3Cpath d='M7 15c0-4.4 3.6-8 8-8' fill='none' stroke='%235fe0dc' stroke-opacity='.7' stroke-width='1.1'/%3E%3Ccircle cx='6' cy='6' r='1.6' fill='%23f4c75e'/%3E%3C/g%3E%3C/svg%3E") bottom 8px right 8px / 34px no-repeat;
    --ht-rim: linear-gradient(160deg, rgba(255, 241, 189, 0.75), rgba(244, 199, 94, 0.55) 18%, rgba(244, 199, 94, 0.12) 40%, rgba(25, 184, 191, 0.12) 62%, rgba(25, 184, 191, 0.6) 85%, rgba(95, 224, 220, 0.75)) border-box;
}
.modal-card::before,
.modal-card::after { display: none; }
.modal-card {
    border: 1px solid transparent;
    background:
        var(--ht-corners),
        linear-gradient(180deg, rgba(244, 199, 94, 0.05), transparent 30%) padding-box,
        linear-gradient(var(--card-bg-solid), var(--card-bg-solid)) padding-box,
        linear-gradient(#020c13, #020c13) padding-box,
        var(--ht-rim);
}
#endingModal .modal-card,
#epilogueModal .modal-card {
    background:
        var(--ht-corners),
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(244, 199, 94, 0.10), transparent 70%) padding-box,
        radial-gradient(ellipse 90% 40% at 50% 100%, rgba(25, 184, 191, 0.14), transparent 70%) padding-box,
        linear-gradient(var(--card-bg-solid), var(--card-bg-solid)) padding-box,
        linear-gradient(#020c13, #020c13) padding-box,
        var(--ht-rim);
}

/* The bowl overlay is centred on the arena panel, which is nearly empty while
   a ticket is being drawn: give it room so the chalice and its caption sit
   inside the panel instead of hanging off its bottom edge. */
body.is-drawing .arena-section { min-height: 640px; }

/* The gold plaque buttons speak in the title face, like the main menu. */
.btn-harem { font-family: var(--font-title); font-weight: 700; }
.log-timestamp { font-style: normal; }

/* ==========================================================================
   Main menu, take 3 (24-10-2026): a real sea in every plaque
   ==========================================================================
   Three wave bands per button (front layer listed first), light turquoise far away, sea-green in the
   middle and deep navy up front with a foam line, each rolling at its own
   speed (parallax). The tiles are 160/110/90 px and the loop moves each by a
   whole number of tiles, so it never jumps. Hover: the sea rises and rolls
   faster. Motion off: the sea stands still. */
.title-menu-btn {
    border-radius: 16px;
    padding-bottom: 32px;
}
.title-menu-btn::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 26px;
    z-index: -1;
    opacity: 1;
    border-radius: 0 0 15px 15px;
    transform: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40' viewBox='0 0 90 40' preserveAspectRatio='none'%3E%3Cpath d='M0 25 Q22.5 20 45.0 25 T90 25 V40 H0Z' fill='%230c5f70' fill-opacity='1'/%3E%3Cpath d='M0 25 Q22.5 20 45.0 25 T90 25' fill='none' stroke='%23bff7f2' stroke-opacity='0.85' stroke-width='1.3'/%3E%3C/svg%3E") 0 100% / 90px 100% repeat-x,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='40' viewBox='0 0 110 40' preserveAspectRatio='none'%3E%3Cpath d='M0 17 Q27.5 11 55.0 17 T110 17 V40 H0Z' fill='%2322b8c2' fill-opacity='0.85'/%3E%3Cpath d='M0 17 Q27.5 11 55.0 17 T110 17' fill='none' stroke='%237fe9e4' stroke-opacity='0.6' stroke-width='1'/%3E%3C/svg%3E") 0 100% / 110px 100% repeat-x,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40' preserveAspectRatio='none'%3E%3Cpath d='M0 9 Q40.0 2 80.0 9 T160 9 V40 H0Z' fill='%23a6f4ef' fill-opacity='0.5'/%3E%3Cpath d='M0 9 Q40.0 2 80.0 9 T160 9' fill='none' stroke='%23d8fffb' stroke-opacity='0.55' stroke-width='1'/%3E%3C/svg%3E") 0 100% / 160px 100% repeat-x;
    animation: menuSea 14s linear infinite;
    transition: height 0.55s var(--ease-smooth);
    /* The wave tiles touch the bottom edge; while they roll at a fractional
       screen scale the GPU wraps that teal bottom row onto the top row, which
       drew a blue line across the plaque. The top few px are always clear sky,
       so clip them off. */
    clip-path: inset(2px 0 0 0);
}
.title-menu-btn.is-primary { padding-bottom: 38px; }
.title-menu-btn.is-primary::before {
    opacity: 1;
    transform: none;
    height: 30px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40' viewBox='0 0 90 40' preserveAspectRatio='none'%3E%3Cpath d='M0 25 Q22.5 20 45.0 25 T90 25 V40 H0Z' fill='%230b6472' fill-opacity='1'/%3E%3Cpath d='M0 25 Q22.5 20 45.0 25 T90 25' fill='none' stroke='%23ffffff' stroke-opacity='0.9' stroke-width='1.4'/%3E%3C/svg%3E") 0 100% / 90px 100% repeat-x,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='40' viewBox='0 0 110 40' preserveAspectRatio='none'%3E%3Cpath d='M0 17 Q27.5 11 55.0 17 T110 17 V40 H0Z' fill='%2322b6c0' fill-opacity='0.92'/%3E%3Cpath d='M0 17 Q27.5 11 55.0 17 T110 17' fill='none' stroke='%23b6fbf6' stroke-opacity='0.8' stroke-width='1'/%3E%3C/svg%3E") 0 100% / 110px 100% repeat-x,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40' preserveAspectRatio='none'%3E%3Cpath d='M0 9 Q40.0 2 80.0 9 T160 9 V40 H0Z' fill='%23a9f7f1' fill-opacity='0.75'/%3E%3Cpath d='M0 9 Q40.0 2 80.0 9 T160 9' fill='none' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='1'/%3E%3C/svg%3E") 0 100% / 160px 100% repeat-x;
}
@keyframes menuSea {
    from { background-position: 0 100%, 0 100%, 0 100%; }
    to   { background-position: 450px 100%, -440px 100%, 320px 100%; }
}
.title-menu-btn:hover:not(:disabled)::before,
.title-menu-btn:focus-visible::before,
.title-menu-btn.is-primary:hover::before,
.title-menu-btn.is-primary:focus-visible::before {
    opacity: 1;
    transform: none;
    height: 38px;
    /* No filter here: a filtered layer at a fractional screen scale (125 %)
       leaves a 1px seam across the plaque at the top of the sea. */
    animation: menuSea 6s linear infinite;
}

/* Secondary plaques: deep night water above the waves, a lighter sheen at the
   top, so the band of blues reads from pale to dark top-to-bottom. */
.title-menu-btn:not(.is-primary) {
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%, rgba(95, 224, 220, 0.16), transparent 70%),
        linear-gradient(180deg, rgba(10, 52, 68, 0.88) 0%, rgba(5, 30, 44, 0.9) 55%, rgba(3, 18, 28, 0.94) 100%);
    border-color: rgba(127, 233, 228, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(191, 247, 242, 0.18),
        0 10px 30px rgba(0, 0, 0, 0.42),
        0 0 22px rgba(25, 184, 191, 0.12);
}
.title-menu-btn:not(.is-primary):hover:not(:disabled),
.title-menu-btn:not(.is-primary):focus-visible {
    border-color: rgba(143, 240, 234, 0.85);
    box-shadow:
        inset 0 1px 0 rgba(191, 247, 242, 0.25),
        0 14px 36px rgba(0, 0, 0, 0.5),
        0 0 34px rgba(25, 184, 191, 0.38);
}
.title-menu-btn:not(.is-primary) .tm-label {
    background: linear-gradient(180deg, #fff6d8 0%, #f4c75e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#titleScreen.has-video .title-menu-btn:not(.is-primary) .tm-label { text-shadow: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)); }
.title-menu-btn:not(.is-primary) .tm-meta { color: rgba(207, 247, 243, 0.75); }
/* No light sweep on the dark plaques: on hover it read as a pale box. */
.title-menu-btn:not(.is-primary)::after { display: none; }

/* The gold plaque: richer leaf, and a glint that crosses it now and then. */
.title-menu-btn.is-primary {
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 70%),
        linear-gradient(180deg, #fff5cf 0%, #fbd977 28%, #eab347 58%, #c88a26 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 12px 34px rgba(0, 0, 0, 0.45),
        0 0 44px rgba(244, 199, 94, 0.32),
        0 0 70px rgba(25, 184, 191, 0.14);
}
.title-menu-btn.is-primary::after { animation: plaqueShine 1.1s ease-out 1.2s, menuGlint 7s ease-in-out 3s infinite; }
@keyframes menuGlint {
    0%, 82% { left: -60%; }
    100%    { left: 130%; }
}

/* Continue with no save: still water, greyed. */
.title-menu-btn:disabled::before { animation: none; filter: grayscale(0.7) brightness(0.7); }
.title-menu-btn:disabled .tm-label { -webkit-text-fill-color: rgba(220, 230, 228, 0.55); }

html[data-motion="reduced"] .title-menu-btn::before,
html[data-motion="none"] .title-menu-btn::before,
html[data-motion="none"] .title-menu-btn.is-primary::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    .title-menu-btn::before, .title-menu-btn.is-primary::after { animation: none !important; }
}

/* ==========================================================================
   The sea everywhere (24-10-2026)
   ==========================================================================
   The main menu's three-band sea, made into a kit and carried through the
   game. Band tiles are 45/55/80 px wide (half the menu's, same shape at half height) and every loop moves each layer by
   whole tiles, so nothing jumps. Front band listed first.
     --sea-gold-*   bands for gold buttons (bright turquoise, white foam)
     --sea-night-*  bands for dark buttons, the masthead and the tab marker
     --sea-rule-*   three wave LINES, dark / mid / light: the new divider
   The tiles are plain URL-encoded SVG: colours are the fill/stroke values.
   ========================================================================== */
:root {
    --sea-gold-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40' viewBox='0 0 90 40' preserveAspectRatio='none'%3E%3Cpath d='M0 25 Q22.5 20 45.0 25 T90 25 V40 H0Z' fill='%230b6472' fill-opacity='1'/%3E%3Cpath d='M0 25 Q22.5 20 45.0 25 T90 25' fill='none' stroke='%23ffffff' stroke-opacity='0.9' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-gold-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='40' viewBox='0 0 110 40' preserveAspectRatio='none'%3E%3Cpath d='M0 17 Q27.5 11 55.0 17 T110 17 V40 H0Z' fill='%2322b6c0' fill-opacity='0.92'/%3E%3Cpath d='M0 17 Q27.5 11 55.0 17 T110 17' fill='none' stroke='%23b6fbf6' stroke-opacity='0.8' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-gold-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40' preserveAspectRatio='none'%3E%3Cpath d='M0 9 Q40.0 2 80.0 9 T160 9 V40 H0Z' fill='%23a9f7f1' fill-opacity='0.75'/%3E%3Cpath d='M0 9 Q40.0 2 80.0 9 T160 9' fill='none' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-night-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40' viewBox='0 0 90 40' preserveAspectRatio='none'%3E%3Cpath d='M0 25 Q22.5 20 45.0 25 T90 25 V40 H0Z' fill='%230c5f70' fill-opacity='1'/%3E%3Cpath d='M0 25 Q22.5 20 45.0 25 T90 25' fill='none' stroke='%23bff7f2' stroke-opacity='0.85' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-night-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='40' viewBox='0 0 110 40' preserveAspectRatio='none'%3E%3Cpath d='M0 17 Q27.5 11 55.0 17 T110 17 V40 H0Z' fill='%2322b8c2' fill-opacity='0.8'/%3E%3Cpath d='M0 17 Q27.5 11 55.0 17 T110 17' fill='none' stroke='%237fe9e4' stroke-opacity='0.6' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-night-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40' preserveAspectRatio='none'%3E%3Cpath d='M0 9 Q40.0 2 80.0 9 T160 9 V40 H0Z' fill='%23a6f4ef' fill-opacity='0.45'/%3E%3Cpath d='M0 9 Q40.0 2 80.0 9 T160 9' fill='none' stroke='%23d8fffb' stroke-opacity='0.5' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-rule-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='14' viewBox='0 0 90 14' preserveAspectRatio='none'%3E%3Cpath d='M0 9 Q22.5 6 45.0 9 T90 9' fill='none' stroke='%230f7d8a' stroke-opacity='0.95' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-rule-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='14' viewBox='0 0 110 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q27.5 4 55.0 7 T110 7' fill='none' stroke='%232cc3cc' stroke-opacity='0.85' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-rule-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='14' viewBox='0 0 160 14' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q40.0 2 80.0 5 T160 5' fill='none' stroke='%23b6f6f1' stroke-opacity='0.7' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --gold-leaf: linear-gradient(180deg, #fff5cf 0%, #fbd977 30%, #eab347 62%, #c88a26 100%);
}
@keyframes seaRoll {
    from { background-position: 0 100%, 0 100%, 0 100%, 0 0; }
    to   { background-position: 450px 100%, -440px 100%, 320px 100%, 0 0; }
}
@keyframes seaRollBare {
    from { background-position: 0 100%, 0 100%, 0 100%; }
    to   { background-position: 450px 100%, -440px 100%, 320px 100%; }
}
@keyframes ruleRoll {
    from { background-position: 0 50%, 0 50%, 0 50%; }
    to   { background-position: -450px 50%, 440px 50%, -320px 50%; }
}

/* --- Masthead: a living strip of sea instead of a thin blue squiggle ------ */
header::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -10px;
    height: 18px;
    z-index: 3;
    opacity: 1;
    pointer-events: none;
    background: var(--sea-night-1) 0 100% / 45px 100% repeat-x,
                var(--sea-night-2) 0 100% / 55px 100% repeat-x,
                var(--sea-night-3) 0 100% / 80px 100% repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
    animation: seaRollBare 40s linear infinite;
}

/* --- Dividers: three wave lines in three blues ----------------------------- */
.modal-card h2::after {
    width: 180px;
    height: 14px;
    margin: 12px auto 0;
    background: var(--sea-rule-1) 0 50% / 90px 100% repeat-x,
                var(--sea-rule-2) 0 50% / 110px 100% repeat-x,
                var(--sea-rule-3) 0 50% / 160px 100% repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
    animation: ruleRoll 30s linear infinite;
}
.settings-head h2::after {
    content: "";
    display: block;
    width: 220px;
    height: 14px;
    margin-top: 10px;
    background: var(--sea-rule-1) 0 50% / 90px 100% repeat-x,
                var(--sea-rule-2) 0 50% / 110px 100% repeat-x,
                var(--sea-rule-3) 0 50% / 160px 100% repeat-x;
    -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
    mask-image: linear-gradient(90deg, #000 60%, transparent);
    animation: ruleRoll 30s linear infinite;
}
.title-byline::before,
.title-byline::after {
    width: 64px;
    height: 12px;
    background: var(--sea-rule-1) 0 50% / 90px 100% repeat-x,
                var(--sea-rule-2) 0 50% / 110px 100% repeat-x,
                var(--sea-rule-3) 0 50% / 160px 100% repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
    mask-image: linear-gradient(90deg, transparent, #000 60%);
    animation: ruleRoll 30s linear infinite;
}
.title-byline::after { transform: scaleX(-1); }

/* Section titles in the arena and the Locker trail the same rule. */
.action-box-title::after,
.lk-band-head::after {
    height: 12px;
    background: var(--sea-rule-1) 0 50% / 90px 100% repeat-x,
                var(--sea-rule-2) 0 50% / 110px 100% repeat-x,
                var(--sea-rule-3) 0 50% / 160px 100% repeat-x;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent);
    mask-image: linear-gradient(90deg, #000, transparent);
    opacity: 0.8;
}

/* --- Tabs: the active tab rides on a small sea, not a bar ------------------- */
.tabs-navigation { border-bottom-color: rgba(127, 233, 228, 0.14); }
.tab-slider {
    height: 10px;
    bottom: -1px;
    border-radius: 0;
    box-shadow: none;
    background: var(--sea-night-1) 0 100% / 45px 100% repeat-x,
                var(--sea-night-2) 0 100% / 55px 100% repeat-x,
                var(--sea-night-3) 0 100% / 80px 100% repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    filter: drop-shadow(0 0 6px rgba(25, 184, 191, 0.55));
    animation: seaRollBare 16s linear infinite;
}

/* --- Gold buttons: gold leaf with the three-band sea in its lower third ------ */
.btn-harem,
.btn-harem.nav-btn:hover:not(:disabled),
.lk-claim,
.lk-claim:hover:not(:disabled),
.settings-btn.primary,
.settings-btn.primary:hover {
    background: var(--sea-gold-1) 0 100% / 45px 18px repeat-x, var(--sea-gold-2) 0 100% / 55px 18px repeat-x, var(--sea-gold-3) 0 100% / 80px 18px repeat-x, var(--gold-leaf);
    background-color: #e9b246;
}
.btn-harem,
.lk-claim,
.settings-btn.primary {
    border: 1px solid rgba(255, 238, 180, 0.85);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 0 26px rgba(244, 199, 94, 0.22);
}
.btn-harem:hover:not(:disabled),
.lk-claim:hover:not(:disabled),
.settings-btn.primary:hover {
    animation: seaRoll 5s linear infinite;
    filter: brightness(1.06) saturate(1.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 10px 30px rgba(0, 0, 0, 0.4),
        0 0 36px rgba(244, 199, 94, 0.4),
        0 0 22px rgba(25, 184, 191, 0.35);
}

/* --- Night buttons: dark water, a hairline, the sea along the bottom -------- */
.nav-btn:not(.btn-harem),
.sway-btn,
.settings-btn:not(.primary),
.landfall-opt,
.confront-opt,
.title-link {
    background: var(--sea-night-1) 0 100% / 45px 13px repeat-x, var(--sea-night-2) 0 100% / 55px 13px repeat-x, var(--sea-night-3) 0 100% / 80px 13px repeat-x,
        linear-gradient(180deg, rgba(12, 54, 70, 0.75), rgba(3, 20, 30, 0.9)) !important;
    background-color: rgba(3, 20, 30, 0.9) !important;
}
.nav-btn:not(.btn-harem):hover:not(:disabled),
.sway-btn:hover:not(:disabled),
.settings-btn:not(.primary):hover,
.landfall-opt:hover:not(:disabled),
.confront-opt:hover:not(:disabled),
.title-link:hover,
.title-link:focus-visible {
    background: var(--sea-night-1) 0 100% / 45px 20px repeat-x, var(--sea-night-2) 0 100% / 55px 20px repeat-x, var(--sea-night-3) 0 100% / 80px 20px repeat-x,
        linear-gradient(180deg, rgba(16, 70, 88, 0.85), rgba(4, 26, 38, 0.92)) !important;
    animation: seaRoll 7s linear infinite;
    border-color: rgba(143, 240, 234, 0.7) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 22px rgba(25, 184, 191, 0.28);
}
.sway-btn, .landfall-opt, .confront-opt { padding-bottom: 16px !important; }
/* Short gold buttons: lift the label clear of the water. */
.lk-claim { padding-top: 7px; padding-bottom: 17px; }
.settings-btn.primary { padding-bottom: 16px; }
.btn-harem { padding-bottom: 15px !important; }
.title-link { padding-bottom: 11px; }
.sway-btn:disabled, .nav-btn:disabled { filter: grayscale(0.6); }

/* Action pills: the sea only comes up when you point at one. */
.action-box-group .action-btn:hover:not(:disabled) {
    background: var(--sea-night-1) 0 100% / 45px 12px repeat-x, var(--sea-night-2) 0 100% / 55px 12px repeat-x, var(--sea-night-3) 0 100% / 80px 12px repeat-x,
        linear-gradient(180deg, rgba(var(--kind-rgb), 0.24), rgba(var(--kind-rgb), 0.08));
    animation: seaRoll 6s linear infinite;
}

html[data-motion="reduced"] header::after,
html[data-motion="none"] header::after,
html[data-motion="reduced"] .tab-slider,
html[data-motion="none"] .tab-slider,
html[data-motion="none"] .modal-card h2::after,
html[data-motion="none"] .settings-head h2::after,
html[data-motion="none"] .title-byline::before,
html[data-motion="none"] .title-byline::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    header::after, .tab-slider, .modal-card h2::after, .settings-head h2::after,
    .title-byline::before, .title-byline::after,
    .btn-harem, .lk-claim, .nav-btn, .sway-btn, .action-btn { animation: none !important; }
}

/* ==========================================================================
   The folded ticket (24-10-2026)
   ==========================================================================
   Before: two cream paper flaps with a pencil crease down the middle, which
   read as a beige box on top of the gold bowl. Now the slip is a night-sea
   letter: navy paper in a double gold frame, the three-band sea along its
   lower edge, and a gold-and-turquoise seal sitting across the fold. The seal
   breaks first, then the flaps open onto the name. */
.rt-flap {
    background:
        radial-gradient(ellipse 70% 90% at 50% 100%, rgba(95, 224, 220, 0.12), transparent 70%),
        linear-gradient(180deg, #0d3a4a 0%, #072636 55%, #041a26 100%);
    box-shadow:
        inset 0 0 0 1px rgba(244, 199, 94, 0.75),
        inset 0 0 0 4px #062330,
        inset 0 0 0 5px rgba(244, 199, 94, 0.35);
}
.rt-flap-top {
    z-index: 6;
    border-radius: 12px 12px 3px 3px;
    background:
        var(--sea-rule-1) 50% 42% / 90px 12px repeat-x,
        var(--sea-rule-2) 50% 42% / 110px 12px repeat-x,
        var(--sea-rule-3) 50% 42% / 160px 12px repeat-x,
        radial-gradient(ellipse 60% 80% at 50% 0%, rgba(244, 199, 94, 0.14), transparent 70%),
        linear-gradient(180deg, #0f4152 0%, #082a3a 60%, #062231 100%);
    box-shadow:
        inset 0 0 0 1px rgba(244, 199, 94, 0.75),
        inset 0 0 0 4px #062330,
        inset 0 0 0 5px rgba(244, 199, 94, 0.35),
        0 3px 8px rgba(0, 0, 0, 0.45);
}
.rt-flap-bottom {
    border-radius: 3px 3px 12px 12px;
    background:
        var(--sea-night-1) 0 100% / 45px 22px repeat-x,
        var(--sea-night-2) 0 100% / 55px 22px repeat-x,
        var(--sea-night-3) 0 100% / 80px 22px repeat-x,
        linear-gradient(180deg, #072636 0%, #052030 100%);
    animation: seaRollBare 9s linear infinite;
}
/* the old pencil crease */
.rt-flap-bottom::after { display: none; }

/* The seal across the fold: gold rim, turquoise wax, a wave stamped in it. */
/* It sits on the card, not on a flap: riding the top flap, it swung away
   half-clipped by the fold as the flap turned, which looked like a cut. */
.rt-flap-top::after { display: none; }
.rt-card::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -19px;
    width: 38px;
    height: 38px;
    margin-left: -19px;
    border-radius: 50%;
    z-index: 7;
    transform: translateZ(2px);
    pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13c2 0 2-1.6 3.5-1.6S10.5 13 12 13s2-1.6 3.5-1.6S17.5 13 19 13' fill='none' stroke='%23fff6d8' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M7 16.4c1.7 0 1.7-1.2 2.9-1.2s1.4 1.2 2.1 1.2 1.4-1.2 2.6-1.2 1.2 1.2 2.4 1.2' fill='none' stroke='%23bff7f2' stroke-opacity='.7' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 72% no-repeat,
        radial-gradient(circle at 35% 30%, #5fe6e0, #12939e 52%, #075460 100%);
    box-shadow:
        0 0 0 2px #f4c75e,
        0 0 0 3px rgba(120, 72, 10, 0.6),
        0 4px 10px rgba(0, 0, 0, 0.6),
        0 0 18px rgba(244, 199, 94, 0.55);
    animation: sealGlow 1.6s ease-in-out infinite;
    transition: transform 0.22s ease-in, opacity 0.22s ease-in;
}
@keyframes sealGlow {
    0%, 100% { box-shadow: 0 0 0 2px #f4c75e, 0 0 0 3px rgba(120, 72, 10, 0.6), 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 12px rgba(244, 199, 94, 0.35); }
    50%      { box-shadow: 0 0 0 2px #fff1bd, 0 0 0 3px rgba(120, 72, 10, 0.6), 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 24px rgba(95, 224, 220, 0.7); }
}
/* Opening: the seal bursts first, then the flaps swing open and fade out as
   they pass edge-on, so they never vanish mid-turn. */
.reveal-ticket.open .rt-card::after {
    animation: sealBreak 0.32s ease-out forwards;
}
@keyframes sealBreak {
    0%   { transform: translateZ(2px) scale(1);   opacity: 1; filter: brightness(1); }
    40%  { transform: translateZ(2px) scale(1.25); opacity: 1; filter: brightness(1.8); }
    100% { transform: translateZ(2px) scale(1.9);  opacity: 0; filter: brightness(2.2); }
}
.reveal-ticket.open .rt-flap-top,
.reveal-ticket.open .rt-flap-bottom {
    opacity: 0;
    transition: transform 0.6s cubic-bezier(.4, 0, .2, 1) 0.14s, opacity 0.3s ease 0.36s;
}
.reveal-ticket:not(.active) .rt-card::after { opacity: 0; }

/* The whole slip glows like the gold buttons while it is still folded. */
.reveal-ticket:not(.open) .rt-card { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(25, 184, 191, 0.25)); }

html[data-motion="none"] .rt-flap-bottom,
html[data-motion="none"] .rt-card::after { animation: none !important; }

/* The fold itself: a gold seam where the two halves meet. */
.rt-flap-bottom::before {
    content: "";
    position: absolute;
    left: 8px; right: 8px; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 241, 189, 0.85), transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
html[data-motion="none"] .reveal-ticket.open .rt-card::after { opacity: 0; }

/* ==========================================================================
   Locker objects in 3D (24-10-2026)
   ==========================================================================
   Each cheat card shows its object turning on a little pool of sea light:
   a 24-frame strip rendered in Blender (tools/blender/locker_items.py,
   packed by locker_atlas.py), stepped through with steps(). Faster on hover,
   stopped and greyed while the cheat is resting, still with motion off. */
.lk-card { grid-template-columns: 96px 1fr; }
.lk-obj {
    position: relative;
    width: 96px;
    height: 96px;
    margin: -8px 0 -6px -6px;
}
.lk-obj > span { display: none; }
/* the object itself, above its glow */
.lk-obj::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--sheet) 0 0 / 2304px 96px no-repeat;
    animation: lkSpin 4.2s steps(24) infinite;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(244, 199, 94, 0.18));
    transition: filter 0.3s ease;
}
/* a pool of sea light under it */
.lk-obj::after {
    content: "";
    position: absolute;
    left: 14%; right: 14%; bottom: 2px;
    height: 16px;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(95, 224, 220, 0.45), rgba(25, 184, 191, 0.12) 60%, transparent);
    filter: blur(2px);
}
@keyframes lkSpin { to { background-position: -2304px 0; } }

.lk-card.is-ready:hover .lk-obj::before {
    animation-duration: 1.8s;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(244, 199, 94, 0.45));
}
.lk-card.is-cooling .lk-obj::before {
    animation-play-state: paused;
    filter: grayscale(0.75) brightness(0.7) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55));
}
html[data-motion="none"] .lk-obj::before,
html[data-motion="reduced"] .lk-obj::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lk-obj::before { animation-play-state: paused; } }

/* ==========================================================================
   Ashore: the villa (PLAN-villa.md §3, haven-ui.js)
   ==========================================================================
   While the crew sleeps in the villa the game changes house: body.is-ashore
   swaps the three sea kits for sand and terracotta (same tiles, other inks),
   warms the panels a little and gives the two renamed tabs their icons. The
   semantic colours (characters, jealousy, pacts, danger) stay as they are.
   ========================================================================== */
body.is-ashore {
    --sea-gold-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40' viewBox='0 0 90 40' preserveAspectRatio='none'%3E%3Cpath d='M0 25 Q22.5 20 45.0 25 T90 25 V40 H0Z' fill='%238a4f2b' fill-opacity='1'/%3E%3Cpath d='M0 25 Q22.5 20 45.0 25 T90 25' fill='none' stroke='%23ffffff' stroke-opacity='0.9' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-gold-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='40' viewBox='0 0 110 40' preserveAspectRatio='none'%3E%3Cpath d='M0 17 Q27.5 11 55.0 17 T110 17 V40 H0Z' fill='%23c4834a' fill-opacity='0.92'/%3E%3Cpath d='M0 17 Q27.5 11 55.0 17 T110 17' fill='none' stroke='%23f7dcb0' stroke-opacity='0.8' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-gold-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40' preserveAspectRatio='none'%3E%3Cpath d='M0 9 Q40.0 2 80.0 9 T160 9 V40 H0Z' fill='%23ead2a4' fill-opacity='0.75'/%3E%3Cpath d='M0 9 Q40.0 2 80.0 9 T160 9' fill='none' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-night-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40' viewBox='0 0 90 40' preserveAspectRatio='none'%3E%3Cpath d='M0 25 Q22.5 20 45.0 25 T90 25 V40 H0Z' fill='%236e3f22' fill-opacity='1'/%3E%3Cpath d='M0 25 Q22.5 20 45.0 25 T90 25' fill='none' stroke='%23f3dcae' stroke-opacity='0.85' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-night-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='40' viewBox='0 0 110 40' preserveAspectRatio='none'%3E%3Cpath d='M0 17 Q27.5 11 55.0 17 T110 17 V40 H0Z' fill='%23b97a43' fill-opacity='0.8'/%3E%3Cpath d='M0 17 Q27.5 11 55.0 17 T110 17' fill='none' stroke='%23f0c98a' stroke-opacity='0.6' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-night-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40' preserveAspectRatio='none'%3E%3Cpath d='M0 9 Q40.0 2 80.0 9 T160 9 V40 H0Z' fill='%23e6cc98' fill-opacity='0.45'/%3E%3Cpath d='M0 9 Q40.0 2 80.0 9 T160 9' fill='none' stroke='%23fff1d6' stroke-opacity='0.5' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-rule-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='14' viewBox='0 0 90 14' preserveAspectRatio='none'%3E%3Cpath d='M0 9 Q22.5 6 45.0 9 T90 9' fill='none' stroke='%239a5a33' stroke-opacity='0.95' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-rule-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='14' viewBox='0 0 110 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q27.5 4 55.0 7 T110 7' fill='none' stroke='%23cf9356' stroke-opacity='0.85' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sea-rule-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='14' viewBox='0 0 160 14' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q40.0 2 80.0 5 T160 5' fill='none' stroke='%23f1d9ab' stroke-opacity='0.7' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --bg-deep: #1d1209;
    --card-bg: rgba(38, 24, 14, 0.6);
    --card-bg-solid: rgba(28, 17, 9, 0.96);
    --border-glow: rgba(214, 150, 84, 0.3);
    --wine: #7a4424;
    --hairline: rgba(244, 199, 94, 0.26);
    --shadow-glow: 0 0 22px rgba(214, 150, 84, 0.12);
    background-image:
        radial-gradient(ellipse 70% 45% at 50% -8%, rgba(244, 199, 94, 0.13) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 8% 108%, rgba(201, 120, 64, 0.16) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 95% 100%, rgba(110, 63, 34, 0.22) 0%, transparent 70%),
        linear-gradient(180deg, #0d0805 0%, var(--bg-deep) 100%);
}
body.is-ashore .tabs-navigation { border-bottom-color: rgba(240, 201, 138, 0.18); }
body.is-ashore .tab-slider { filter: drop-shadow(0 0 6px rgba(214, 150, 84, 0.55)); }

/* The two tabs that changed house: an old key, and a palm. */
.tab-btn.is-land::before {
    content: "";
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    margin: 0 0.45em -0.14em 0;
    background: currentColor;
    -webkit-mask: var(--tab-icon) center / contain no-repeat;
    mask: var(--tab-icon) center / contain no-repeat;
}
#tabPlay.is-land { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0M11 12h10M17 12v4M20.5 12v3' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
#tabSea.is-land  { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 21.5c-.2-4.6.3-8.4 1.3-11.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M13.8 10.3C11.6 7.2 7.4 6.2 4 8.3c3.4-.3 6.8.6 9.8 2zM13.8 10.3c.8-3.6 4.7-5.5 8-4-3 .1-5.6 1.6-8 4zM13.8 10.3c-3.2-.7-7 1.3-8.1 4.6 2.2-2.3 5-3.6 8.1-4.6zM13.8 10.3c3.1-.3 6.4 1.9 6.9 5-1.9-2.1-4.3-3.7-6.9-5z' fill='%23000'/%3E%3Cpath d='M2.5 21.5h19' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* The wave that carries the change along the tab bar. */
.tab-tide-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
}
.tab-tide {
    position: absolute;
    top: 0; bottom: 0;
    left: 0;
    width: 46%;
    background:
        linear-gradient(90deg, transparent 0%, rgba(255, 248, 220, 0.0) 5%, rgba(255, 248, 220, 0.98) 16%,
                        rgba(244, 199, 94, 0.85) 28%, rgba(214, 150, 84, 0.55) 50%, rgba(150, 90, 50, 0.25) 75%, transparent 100%);
    animation: tabTideIn 1.5s cubic-bezier(0.45, 0.05, 0.4, 1) forwards;
}
.tab-tide.is-back {
    background:
        linear-gradient(270deg, transparent 0%, rgba(226, 252, 248, 0.0) 5%, rgba(226, 252, 248, 0.98) 16%,
                        rgba(95, 224, 220, 0.82) 28%, rgba(25, 184, 191, 0.55) 50%, rgba(11, 95, 110, 0.25) 75%, transparent 100%);
    animation-name: tabTideOut;
}
@keyframes tabTideIn  { from { transform: translateX(230%); } to { transform: translateX(-110%); } }
@keyframes tabTideOut { from { transform: translateX(-110%); } to { transform: translateX(230%); } }
.tab-btn.is-washed { animation: tabWash 0.8s ease; }
@keyframes tabWash {
    0%   { filter: none; opacity: 1; }
    30%  { filter: blur(3px) brightness(1.8); opacity: 0.25; }
    100% { filter: none; opacity: 1; }
}

/* The banner: "The Villa · night 1 of 3", "Back to sea · day 9". */
.haven-banner {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.9s ease;
}
.haven-banner.is-on { opacity: 1; transition-duration: 0.6s; }
.haven-banner .hb-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 54px 24px 46px;
    /* A cinema band across the screen: whatever is behind goes quiet. */
    background: linear-gradient(180deg, transparent 0%, rgba(8, 5, 2, 0.78) 22%, rgba(8, 5, 2, 0.9) 50%,
                                rgba(8, 5, 2, 0.78) 78%, transparent 100%);
    transform: translateY(8px) scale(0.98);
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.haven-banner.is-on .hb-card { transform: none; }
.haven-banner b {
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: clamp(34px, 6vw, 72px);
    letter-spacing: 0.08em;
    line-height: 1;
    background: var(--gold-leaf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold);
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(244, 199, 94, 0.35));
}
.haven-banner.is-depart b {
    background: var(--waterline);
    -webkit-background-clip: text;
    background-clip: text;
}
.haven-banner span {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(14px, 1.6vw, 20px);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--amber-soft);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.haven-banner span::before,
.haven-banner span::after {
    content: "";
    display: inline-block;
    width: 48px;
    height: 1px;
    margin: 0 14px 0.3em;
    vertical-align: middle;
    background: linear-gradient(90deg, transparent, var(--gold));
}
.haven-banner span::after { transform: scaleX(-1); }
html[data-motion="none"] .haven-banner .hb-card,
html[data-motion="reduced"] .haven-banner .hb-card { transform: none; transition: none; }

/* --- The morning in the villa (PLAN-villa.md §6.1, day-ui.js) -------------- */
/* Candles: the nights left. One goes out every dawn. */
.villa-candles {
    display: inline-flex;
    gap: 7px;
    margin-left: 12px;
    vertical-align: middle;
}
.villa-candle {
    position: relative;
    display: inline-block;
    width: 7px;
    height: 16px;
    margin-top: 6px;
    border-radius: 2px 2px 1px 1px;
    background: linear-gradient(180deg, #f6ead2, #c9b48e);
    opacity: 0.45;
}
.villa-candle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -9px;
    width: 6px;
    height: 9px;
    margin-left: -3px;
    border-radius: 50% 50% 45% 45%;
    background: radial-gradient(ellipse at 50% 70%, #fff6cf 0%, #ffc04d 45%, rgba(255, 120, 30, 0) 75%);
    opacity: 0;
}
.villa-candle.is-lit { opacity: 1; }
.villa-candle.is-lit::before {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(255, 176, 70, 0.9));
    animation: candleFlicker 2.4s ease-in-out infinite;
}
.villa-candle.is-lit:nth-child(2)::before { animation-delay: -0.8s; }
.villa-candle.is-lit:nth-child(3)::before { animation-delay: -1.5s; }
@keyframes candleFlicker {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    30% { transform: scale(0.92, 1.08) rotate(3deg); }
    60% { transform: scale(1.06, 0.95) rotate(-1deg); }
}
html[data-motion="none"] .villa-candle::before,
html[data-motion="reduced"] .villa-candle::before { animation: none; }

/* The strip under the title: the house, the cistern, the boat. */
.villa-state {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.4fr;
    gap: 6px;
    margin: 4px 0 2px;
}
.villa-state .vs-cell {
    padding: 6px 10px;
    border-radius: 9px;
    background: rgba(214, 150, 84, 0.07);
    border: 1px solid rgba(240, 201, 138, 0.16);
}
.villa-state small {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(240, 201, 138, 0.75);
    margin-bottom: 2px;
}
.villa-state .vs-cell > div {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: var(--text-muted, #c9c2b0);
}
.villa-state svg { width: 15px; height: 15px; vertical-align: -3px; }
.villa-state b { color: var(--amber-soft); margin-left: 3px; font-size: 12.5px; }
.vs-res { display: inline-flex; align-items: center; }
.vs-res.is-gone { opacity: 0.35; }
.vs-boat { font-weight: 700; }
.vs-boat.is-safe { color: #8fd4a8; }
.vs-boat.is-open { color: #ffb347; }

/* Each post is a place on the island: its picture behind, darkened. */
.day-post.is-place {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 74px;
    border-color: rgba(240, 201, 138, 0.18);
}
.day-post-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: center / cover no-repeat;
    transition: transform 0.6s ease;
}
.day-post.is-place::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(14, 9, 5, 0.18) 0%, rgba(14, 9, 5, 0.62) 45%, rgba(14, 9, 5, 0.86) 100%);
}
.day-post.is-place:hover .day-post-bg { transform: scale(1.06); }
.day-post.is-place .day-post-d { color: rgba(240, 228, 205, 0.85); }
.day-post.is-place .day-post-n { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.day-post.is-place .day-post-head { padding-top: 22px; }
.day-post.is-place.is-manned { border-color: rgba(255, 217, 122, 0.45); }
.day-post.is-key {
    border-color: rgba(244, 199, 94, 0.55);
    box-shadow: 0 0 0 1px rgba(244, 199, 94, 0.18), 0 0 18px rgba(244, 199, 94, 0.12);
}
.day-post-tag {
    grid-column: 2;
    justify-self: start;
    margin-top: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    color: #1b1204;
    background: var(--gold-leaf);
}
@media (max-width: 620px) {
    .villa-state { grid-template-columns: 1fr; }
}
/* In The Island's board the strip stacks, the panel is narrow. */
.villa-state.is-compact { grid-template-columns: 1fr; gap: 4px; margin: 6px 0; }
.villa-state.is-compact .vs-cell { padding: 4px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.villa-state.is-compact small { margin: 0; }

/* --- The villa's two big questions (haven-ui.js, PLAN-villa.md §4.1 §7.1) -- */
.finish-choice-box.haven-choice {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-top: 26px;
}
.haven-choice .hc-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: center 40% / cover no-repeat;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.15) 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.15) 100%);
}
.haven-choice h3 { font-family: 'Cinzel', serif; font-size: 1.25rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); }
.haven-choice .lf-intro { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
.hc-faces { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.hc-face {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-grid;
    place-items: center;
    font-style: normal;
    font-weight: 700;
    color: #1b1204;
    background: var(--c);
    border: 2px solid var(--c);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.5);
}
.hc-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.haven-choice .haven-card,
.sea-proxy .haven-card {
    min-height: 92px;
    padding: 14px 16px;
    justify-content: center;
    gap: 4px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(20, 13, 6, 0.72), rgba(10, 7, 4, 0.86));
    border: 1px solid rgba(240, 201, 138, 0.28);
    backdrop-filter: blur(2px);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.haven-card .lf-lbl { font-family: 'Cinzel', serif; font-size: 17px; letter-spacing: 0.04em; }
.haven-card.is-go { border-color: rgba(244, 199, 94, 0.6); box-shadow: 0 0 0 1px rgba(244, 199, 94, 0.2), 0 8px 26px rgba(0, 0, 0, 0.45); }
.haven-card.is-go .lf-lbl { color: var(--gold); }
.haven-card:hover { transform: scale(1.02); border-color: rgba(255, 217, 122, 0.85); }
.haven-card .lf-note {
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amber-soft);
}
.haven-choice .landfall-opt.haven-card { display: flex; flex-direction: column; }
@media (min-width: 720px) {
    .haven-choice { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
    .haven-choice > :not(.haven-card):not(.hc-bg) { grid-column: 1 / -1; }
}

/* --- The smoke (haven-ui.js decorateSmoke / decorateRescue): who would go,
   on each card; and the two of them, by their fire. -------------------- */
.haven-card .lf-faces { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; min-height: 26px; }
.haven-card .lf-faces .hc-face { width: 26px; height: 26px; border-width: 1.5px; }
.haven-card .lf-faces .hc-face.is-small { width: 20px; height: 20px; margin-right: -4px; }
.hc-face.is-q {
    --c: rgba(244, 199, 94, 0.5);
    background: rgba(10, 7, 4, 0.6);
    border-style: dashed;
    color: var(--gold);
    font-family: 'Cinzel', serif;
}
.hc-face.is-q.is-maybe { opacity: 0.45; }
.haven-card:disabled { opacity: 0.45; transform: none; cursor: not-allowed; }
.haven-card:disabled .lf-faces { filter: grayscale(1); }
.haven-choice.is-smoke .haven-card { min-height: 84px; }
.hc-faces.is-cast { gap: 18px; justify-content: center; margin: 8px 0 14px; }
.hc-who { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hc-who b { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.08em; color: var(--gold); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
.hc-face.is-big {
    width: 62px;
    height: 62px;
    border-width: 2.5px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 22px rgba(255, 140, 60, 0.35), 0 6px 14px rgba(0, 0, 0, 0.55);
    animation: hc-rise 1.4s ease-out both;
}
.hc-who:nth-child(2) .hc-face.is-big { animation-delay: 0.35s; }
/* The raft (decorateRaft): open water instead of a picture, and her face with
   no name, asleep (grey, eyes nowhere), until she can say it. */
.haven-choice.is-raft .hc-bg {
    opacity: 0.9;
    background:
        radial-gradient(ellipse 60% 40% at 70% 30%, rgba(255, 214, 150, 0.22), transparent 70%),
        repeating-linear-gradient(176deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 18px),
        linear-gradient(180deg, #1d4a5c 0%, #0d2a37 55%, #06161e 100%);
}
.hc-face.is-nameless { --c: rgba(190, 205, 210, 0.55); background: #26343a; color: rgba(225, 235, 238, 0.85); font-family: 'Cinzel', serif; font-size: 26px; }
@keyframes hc-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- The night in the villa, framed (haven-ui.js, PLAN-villa.md §6.2 §6.3) - */
.narrative-line.haven-beat {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin: 10px 0;
    padding: 46px 18px 16px;
    border-radius: 12px;
    border: 1px solid rgba(240, 201, 138, 0.3);
    background: rgba(12, 8, 4, 0.55);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.haven-beat .hb-plate {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: center / cover no-repeat;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.2) 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.2) 100%);
}
.haven-beat > small,
.haven-rumour > small {
    position: absolute;
    top: 14px;
    left: 18px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.haven-beat > span:last-child { display: block; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); }
.narrative-line.haven-rumour {
    position: relative;
    margin: 10px 0;
    padding: 40px 16px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 140, 120, 0.28);
    background: linear-gradient(180deg, rgba(60, 20, 18, 0.35), rgba(20, 10, 8, 0.35)),
                url("../data/video/islas/interior/amanecer-playa.jpg") center / cover no-repeat;
}
.haven-rumour > small { color: #ffc3a8; }
.haven-rumour > .narrative-line { margin: 4px 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
/* A door left ajar, on what happened behind one. */
.haven-door {
    display: inline-block;
    width: 13px;
    height: 16px;
    margin: 0 8px -2px 0;
    border: 1.5px solid var(--amber-soft);
    border-radius: 1px;
    background: linear-gradient(90deg, rgba(255, 207, 92, 0.65) 0 22%, transparent 22%);
    transform: perspective(40px) rotateY(-28deg);
}
.narrative-line.haven-heard { color: var(--amber-soft); font-style: italic; opacity: 0.9; }