/* ==========================================================================
   FamilySite - "coastal morning" design system
   Sand + ocean teal + seafoam, with a sunset-coral accent and a sun-gold glow.
   Signature: a soft wave horizon between the warm sky header and sandy content.
   ========================================================================== */

:root {
    /* Sand + sky */
    --sand:      #FBF6EC;
    --sand-2:    #F3E9D6;
    --sky-top:   #FFDFA6;
    --sky-bot:   #FFC98C;

    /* Ocean */
    --ink:       #0E3B47;   /* deep ocean, primary text */
    --ink-soft:  #3E6470;   /* muted text */
    --sea:       #127C93;   /* links, primary accents */
    --sea-deep:  #0C5568;   /* buttons, headings on light */

    /* Foam */
    --foam:      #DCF1EB;
    --foam-2:    #A9DBCF;

    /* Warm accents */
    --coral:     #FF7A5C;   /* decorative accent */
    --coral-btn: #D14A2A;   /* accent buttons (contrast-safe on white) */
    --sun:       #FFC663;   /* highlight / focus */

    --line:      #E6DBC4;   /* hairline on sand */
    --card:      #FFFFFF;
    --shadow:    0 14px 30px -18px rgba(14, 59, 71, 0.45);
    --shadow-sm: 0 6px 16px -10px rgba(14, 59, 71, 0.4);

    --radius:    18px;
    --radius-lg: 26px;
    --maxw:      1080px;

    --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
    --body: "Nunito", system-ui, -apple-system, Segoe UI, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* Content never bleeds sideways: wide things (tables, canvases, code) live in their
   own scroll containers, so the page itself should never scroll horizontally. */
html, body { overflow-x: hidden; }

body {
    margin: 0;
    font-family: var(--body);
    color: var(--ink);
    background: var(--sand);
    line-height: 1.6;
    /* Sun glow in the top-right, seafoam in the top-left, fading into sand. */
    background-image:
        radial-gradient(120% 90% at 100% -10%, rgba(255, 198, 99, 0.35), rgba(255, 198, 99, 0) 55%),
        radial-gradient(90% 70% at -10% 0%, rgba(169, 219, 207, 0.30), rgba(169, 219, 207, 0) 50%);
    background-attachment: fixed;
    min-height: 100vh;
}

h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.12; margin: 0 0 0.4em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 1rem; }

a { color: var(--sea); text-decoration: none; }
a:hover { color: var(--sea-deep); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 6px; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

.eyebrow {
    font-family: var(--body);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--sea);
}

/* ---- Page shell ---------------------------------------------------------- */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.content { flex: 1 0 auto; padding-block: clamp(1.5rem, 4vw, 2.75rem); }

/* ---- Masthead (the sky + wave horizon) ----------------------------------- */
.masthead {
    position: relative;
    background: linear-gradient(180deg, var(--sky-top), var(--sky-bot));
    padding-top: 0.75rem;
}
.masthead-inner {
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.brand:hover { text-decoration: none; }
.brand-sun {
    width: 30px; height: 30px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FFF0C2, var(--sun) 60%, #F5A93C);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.45), 0 4px 10px -4px rgba(210, 130, 30, 0.7);
    flex: none;
}
.brand-name { font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--ink); letter-spacing: -0.01em; }

.nav { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.nav a {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px;
    color: var(--ink); font-weight: 700; font-size: 0.95rem;
    padding: 0.5rem 0.95rem; border-radius: 999px; white-space: nowrap;
}
.nav a:hover { background: rgba(255, 255, 255, 0.55); text-decoration: none; color: var(--sea-deep); }
.nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.75); color: var(--sea-deep); }
.nav-ico { font-size: 1rem; line-height: 1; }

.account { display: inline-flex; align-items: center; gap: 0.75rem; }
.account form { margin: 0; }

/* Desktop masthead: brand and account anchor the top corners; the tabs sit in
   their own centered bar underneath, so nothing wraps raggedly. Phones keep
   the app-style icon grid defined in the small-screen block below. */
@media (min-width: 721px) {
    .masthead-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "brand account" "nav nav";
        align-items: center;
        row-gap: 1rem;
    }
    .brand { grid-area: brand; }
    .account { grid-area: account; }
}

/* The bell and theme toggle pin to the viewport's top-right corner; below ~1300px
   the content column reaches that corner too, so give the account row clearance
   or Sign out disappears underneath them (seen on the Fold's inner screen). */
@media (min-width: 721px) and (max-width: 1320px) {
    .masthead-inner .account { margin-right: 6.75rem; }
    .masthead-inner .nav {
        grid-area: nav;
        justify-content: center;
        justify-self: center;
        max-width: 100%;
    }
}
.hello { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.hello span { color: var(--sea-deep); }

/* Wave that divides the sky from the sand. */
/* Beach scenery in the header's empty corners. Wide screens only (the middle
   belongs to the tabs), never over content, and hidden at night — the Starry
   Night masthead needs no company. */
.masthead-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; display: none; }
.masthead-decor img { position: absolute; opacity: 0.55; }
.mh-umbrella { left: 2.5vw; bottom: 34px; width: clamp(54px, 5vw, 84px); transform: rotate(-6deg); }
.mh-blanket { left: calc(2.5vw + 52px); bottom: 26px; width: clamp(44px, 4vw, 66px); }
.mh-sailboat { right: 3vw; bottom: 30px; width: clamp(48px, 4.5vw, 76px); }
.mh-sailboard { right: calc(3vw + 84px); bottom: 24px; width: clamp(34px, 3vw, 52px); transform: rotate(4deg); }
@media (min-width: 1100px) { .masthead-decor { display: block; } }
:root.dark-theme .masthead-decor { display: none; }

.masthead-wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
.masthead-wave svg { display: block; width: 100%; height: 46px; }
.masthead-wave path { fill: var(--sand); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-family: var(--body); font-weight: 700; font-size: 1rem;
    padding: 0.7rem 1.3rem; border-radius: 999px; border: 2px solid transparent;
    cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    text-decoration: none; line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn-coral { background: var(--coral-btn); color: #fff; box-shadow: var(--shadow-sm); }
.btn-coral:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgba(209, 74, 42, 0.9); }
.btn-sea { background: var(--sea-deep); color: #fff; box-shadow: var(--shadow-sm); }
.btn-sea:hover { color: #fff; transform: translateY(-2px); }
.btn-ghost { background: rgba(255, 255, 255, 0.6); color: var(--ink); border-color: rgba(14, 59, 71, 0.18); }
.btn-ghost:hover { background: #fff; color: var(--sea-deep); transform: translateY(-1px); }
.btn-block { width: 100%; }
.btn-sm { font-size: 0.85rem; padding: 0.4rem 0.9rem; }
.row-action { text-align: right; white-space: nowrap; }
.row-action form { margin: 0; }

/* ---- Cards --------------------------------------------------------------- */
.card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.4rem, 4vw, 2.2rem);
}

/* ---- Hero ---------------------------------------------------------------- */
.hero { max-width: 46ch; }
.hero h1 { margin-top: 0.4rem; }
.hero .lead { font-size: 1.15rem; color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }

/* ---- Section tiles (home hub) -------------------------------------------- */
.tiles { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 2.5rem; }
.tile {
    display: flex; flex-direction: column; gap: 0.35rem;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.4rem; box-shadow: var(--shadow-sm);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    color: var(--ink);
}
a.tile:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--foam-2); color: var(--ink); }
.tile-badge {
    width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
    font-size: 1.5rem; background: var(--foam); box-shadow: inset 0 0 0 1px var(--foam-2); margin-bottom: 0.5rem;
}
.tile h3 { margin: 0; }
.tile p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.tile .go { margin-top: auto; padding-top: 0.7rem; font-weight: 700; color: var(--sea); font-size: 0.9rem; }
a.tile:hover .go { color: var(--coral-btn); }

/* ---- Auth pages ---------------------------------------------------------- */
.auth-wrap { max-width: 460px; margin-inline: auto; }
.auth-card { position: relative; overflow: hidden; }
.auth-card .eyebrow { display: block; margin-bottom: 0.35rem; }
.auth-card h1 { font-size: clamp(1.7rem, 4vw, 2.1rem); }
.auth-note { color: var(--ink-soft); }
.auth-alt { text-align: center; margin-top: 1.4rem; margin-bottom: 0; color: var(--ink-soft); }

/* ---- Forms --------------------------------------------------------------- */
.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.35rem; color: var(--ink); }
.field > span small { font-weight: 600; color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-size: 0.78rem; margin-left: 0.35rem; }
.field .hint { display: block; margin-top: 0.35rem; color: var(--ink-soft); font-weight: 600; font-size: 0.8rem; }
.field input, .field select {
    width: 100%; font: inherit; color: var(--ink);
    background: var(--sand); border: 1.5px solid var(--line); border-radius: 12px;
    padding: 0.65rem 0.85rem; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus { outline: none; border-color: var(--sea); background: #fff; box-shadow: 0 0 0 4px rgba(18, 124, 147, 0.15); }
.field input::placeholder { color: #9fb0ac; }
.check { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 1rem; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--sea); }
.form-actions { margin-top: 0.4rem; }

/* ---- Tables (admin) ------------------------------------------------------ */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }
table.data { width: 100%; border-collapse: collapse; background: var(--card); min-width: 520px; }
table.data th, table.data td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
table.data thead th { background: var(--foam); color: var(--sea-deep); font-family: var(--display); font-weight: 600; font-size: 0.85rem; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; background: var(--sand-2); padding: 0.15rem 0.45rem; border-radius: 6px; font-size: 0.9rem; letter-spacing: 0.05em; }

.tag { display: inline-block; font-weight: 700; font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 999px; }
.tag-active  { background: var(--foam); color: var(--sea-deep); }
.tag-used    { background: var(--sand-2); color: var(--ink-soft); }
.tag-expired { background: #FBE0D6; color: var(--coral-btn); }

/* ---- Coming soon --------------------------------------------------------- */
.soon { max-width: 560px; margin-inline: auto; text-align: center; }
.soon .tile-badge { margin-inline: auto; width: 66px; height: 66px; font-size: 2rem; }
.soon .lead { color: var(--ink-soft); font-size: 1.1rem; }

/* ---- Alerts / callouts --------------------------------------------------- */
.callout { background: var(--foam); border: 1px solid var(--foam-2); border-radius: 14px; padding: 0.9rem 1.1rem; color: var(--ink); }
.callout strong { color: var(--sea-deep); }
.alert { background: #FCE7E0; border: 1px solid #F3C3B6; color: var(--coral-btn); border-radius: 14px; padding: 0.75rem 1rem; font-weight: 600; margin-bottom: 1rem; }

/* ---- Footer -------------------------------------------------------------- */
.beach-footer { flex: none; margin-top: 2.5rem; background: var(--sea-deep); color: #DCEFF3; }
.beach-footer .container { padding-block: 1.5rem 1.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; justify-content: space-between; }
.beach-footer a { color: #fff; }
.beach-footer .foot-mark { font-family: var(--display); font-weight: 700; }
.beach-footer small { color: #9FC8D2; }

/* Spacing helpers */
.stack > * + * { margin-top: 1rem; }
.mt-lg { margin-top: 2rem; }

/* Two-column layout that stacks on small screens (admin) */
.two-col { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); align-items: start; }
/* Stack below the form on tablets too: side by side, the invite table's six
   columns get squeezed and the Resend button runs off the edge. */
@media (max-width: 1024px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

/*
   Opt-in: put the "create something" card after the list it feeds once the layout
   is a single column.

   Side by side the form is a sidebar and costs nothing, but stacked it becomes a
   wall the reader has to scroll past — on a phone the calendar's event form is
   most of a screen and a half before a single upcoming date appears. What people
   open these pages for is the list; making something new is the occasional case.

   Applied at the same breakpoint the columns collapse at, because that is exactly
   when the problem starts. Not on .two-col generally: the admin pages use the same
   grid and their form-first order is deliberate.

   This reorders visually only — the form still comes first in the DOM, so keyboard
   and screen-reader order is unchanged. That is the accepted trade for `order`, and
   it stays coherent here because each card is introduced by its own heading.
*/
@media (max-width: 1024px) {
    .two-col.compose-last > :first-child { order: 2; }
}

/*
   The M.U.L.E. lobby stacks its sections at every width rather than using .two-col,
   so it needs a container of its own before its first card can be reordered. A
   single-column grid, which lays out the same as the plain block flow it replaces.
*/
.lobby { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1024px) {
    .lobby.compose-last > :first-child { order: 2; }
}

/* ---- Dashboard / feed ---------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.dash-greeting { margin-bottom: 1.5rem; }
.dash-greeting h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.dash { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
/* minmax(0,1fr), never bare 1fr: a grid track's auto minimum lets one oversized
   child (a wide screenshot, an embed) stretch the whole column past the viewport. */
@media (max-width: 860px) { .dash { grid-template-columns: minmax(0, 1fr); } }
.dash > * { min-width: 0; }
.feed-col > * + * { margin-top: 1.25rem; }
/* The permalink shows one post with no side column, so give it the feed's width. */
.single-post { max-width: 42rem; margin-inline: auto; }
/* Link under a trimmed reply list, back to the post's own page. */
.comments-more { display: inline-block; margin-top: 0.4rem; }

.composer { padding: 1rem 1.1rem; }
.composer textarea {
    width: 100%; font: inherit; color: var(--ink); resize: vertical; min-height: 3.2rem;
    background: var(--sand); border: 1.5px solid var(--line); border-radius: 14px; padding: 0.7rem 0.85rem;
}
.composer textarea:focus { outline: none; border-color: var(--sea); background: #fff; box-shadow: 0 0 0 4px rgba(18,124,147,0.15); }
.composer-actions { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; }
.attach-btn { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-weight: 700; font-size: 0.9rem; color: var(--sea-deep); background: var(--foam); border: 1px solid var(--foam-2); border-radius: 999px; padding: 0.5rem 0.9rem; }
.attach-btn:hover { background: #fff; }
.attach-btn input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* Thumbnails of everything attached (picked or pasted), shown before posting. */
.attach-previews { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; width: 100%; }
.attach-previews[hidden] { display: none; }
.attach-chip { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--foam); }
.attach-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-chip-file { display: grid; place-items: center; width: 100%; height: 100%; font-size: 1.4rem; }
.attach-chip-x {
    position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%;
    background: rgba(14, 59, 71, 0.75); color: #fff; font-size: 0.7rem; line-height: 1; cursor: pointer;
    display: grid; place-items: center;
}
.attach-chip-x:hover { background: var(--coral-btn); }

/* Attachments */
.attachments { display: grid; gap: 6px; margin: 0 0 0.9rem; }
.attachments .att { display: block; margin: 0; border-radius: 14px; overflow: hidden; background: var(--sand-2); }
.attachments img, .attachments video { display: block; width: 100%; }
.att-1 img, .att-1 video { max-height: 540px; object-fit: contain; background: #0c1418; }
.att-2 { grid-template-columns: 1fr 1fr; }
.att-3, .att-4 { grid-template-columns: 1fr 1fr; }
.att-2 img, .att-2 video, .att-3 img, .att-3 video, .att-4 img, .att-4 video { aspect-ratio: 1 / 1; object-fit: cover; }

/* Own-post / comment controls */
.post-menu { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; }
.post-menu form { margin: 0; }
.linkbtn { background: none; border: none; font: inherit; font-weight: 700; font-size: 0.85rem; color: var(--sea); cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 8px; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn.danger { color: var(--coral-btn); }
.comment-del { display: inline; margin-left: 0.35rem; }
.comment-del .linkbtn { font-size: 0.72rem; padding: 0 0.2rem; }

/* Reply reactions: the post controls at bubble scale. */
.comment-actions { display: flex; align-items: center; gap: 5px; margin-top: 0.35rem; flex-wrap: wrap; }
.comment-actions form { margin: 0; display: inline-flex; }
.like.sm, .react-chip.sm { padding: 0.12rem 0.5rem; font-size: 0.78rem; gap: 3px; }

/* Inline reply editing. */
.comment-edit { margin-top: 0.2rem; }
.comment-edit summary { display: inline; cursor: pointer; list-style: none; font-size: 0.72rem; }
.comment-edit summary::-webkit-details-marker { display: none; }
.comment-edit form { display: flex; gap: 6px; margin-top: 0.35rem; }
.comment-edit input[type=text] {
    flex: 1; min-width: 0; font: inherit; font-size: 0.85rem; padding: 0.35rem 0.55rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
}
.comment-edit .btn { flex: none; }

/* File library */
.btn.sm { padding: 0.4rem 0.85rem; font-size: 0.9rem; }
.folder-head { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; margin: 1.4rem 0 0.6rem; color: var(--sea-deep); }
.folder-head:first-child { margin-top: 0; }
.filelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.filerow { display: flex; align-items: center; gap: 0.85rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0.7rem 0.9rem; }
.fileicon { flex: none; font-size: 1.5rem; width: 2.2rem; text-align: center; }
.fileinfo { flex: 1; min-width: 0; }
.filename { display: block; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filename:hover { color: var(--sea-deep); }
.filemeta { display: block; color: var(--ink-soft); font-size: 0.82rem; }
.fileactions { flex: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.fileactions form { margin: 0; }

/* Event category chip */
.cat { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; font-size: 0.72rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--foam); color: var(--sea-deep); }
.events .cat { margin-bottom: 0.3rem; }

.avatar {
    flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--display); font-weight: 700; color: #fff; font-size: 1.1rem;
    background: linear-gradient(140deg, var(--sea), var(--sea-deep));
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
}
.avatar.sm { width: 32px; height: 32px; font-size: 0.9rem; }

.post-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.75rem; }
.post-author { display: block; font-family: var(--display); font-weight: 700; color: var(--ink); line-height: 1.1; }
.post-time { color: var(--ink-soft); font-size: 0.82rem; }
.post-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 0.9rem; font-size: 1.02rem; }

.post-actions { display: flex; align-items: center; gap: 1rem; padding-top: 0.4rem; border-top: 1px solid var(--line); }
.post-actions form { margin: 0; }
.like {
    display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
    background: var(--sand); border: 1.5px solid var(--line); border-radius: 999px;
    padding: 0.35rem 0.8rem; font: inherit; font-weight: 700; color: var(--ink-soft);
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.like:hover { transform: translateY(-1px); border-color: var(--foam-2); }
.like.liked { background: #FCE7E0; border-color: #F3C3B6; color: var(--coral-btn); }
.like, .react-chip { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.post-actions .count { color: var(--ink-soft); font-weight: 600; font-size: 0.88rem; }

/* Per-emoji reaction chips; hover shows who's behind each one. */
.react-chips { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.react-chip {
    display: inline-flex; align-items: center; gap: 0.28rem; cursor: pointer;
    background: var(--sand); border: 1.5px solid var(--line); border-radius: 999px;
    padding: 0.22rem 0.6rem; font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--ink-soft);
    transition: transform 0.12s ease, border-color 0.12s ease;
}
.react-chip:hover { transform: translateY(-1px); border-color: var(--foam-2); }
.react-chip.mine { background: #FCE7E0; border-color: #F3C3B6; color: var(--coral-btn); }

/* Long-press palette: a floating row of quick reactions above the button. */
.react-palette {
    position: absolute; z-index: 70; display: flex; gap: 0.15rem;
    background: var(--card); border: 1px solid var(--line); border-radius: 999px;
    box-shadow: var(--shadow); padding: 0.3rem 0.45rem;
}
.react-palette button {
    background: none; border: none; font-size: 1.45rem; line-height: 1.35;
    cursor: pointer; border-radius: 50%; padding: 0.12rem 0.3rem;
    transition: transform 0.1s ease;
}
.react-palette button:hover { transform: scale(1.25); }

/* ---- Admin: health & usage ------------------------------------------------ */
.health-warn { border-color: #E2A23B; background: #FDF3E1; }
.health-ok { border-color: #7CB77C; background: #EDF7ED; }
:root.dark-theme .health-warn { background: rgba(217, 142, 43, 0.14); border-color: rgba(217, 142, 43, 0.5); }
:root.dark-theme .health-ok { background: rgba(124, 183, 124, 0.12); border-color: rgba(124, 183, 124, 0.4); }
/* A health value that needs attention: a stale backup, most of all. */
.health-bad { color: var(--coral, #E4572E); }
.health-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.health-list li { display: flex; flex-direction: column; gap: 0.2rem; }
.health-list li > span { color: var(--ink-soft); font-size: 0.85rem; font-weight: 600; }
.meter { height: 8px; border-radius: 999px; background: var(--foam); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sea-deep), var(--coral-btn)); }
:root.dark-theme .meter { background: rgba(233, 237, 249, 0.1); }
.usage-scroll { overflow-x: auto; }
.usage-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.usage-table th, .usage-table td { padding: 0.5rem 0.7rem; text-align: center; border-bottom: 1px solid var(--line); }
.usage-table th:first-child { text-align: left; }
.usage-table .usage-name { display: flex; align-items: center; gap: 0.5rem; text-align: left; font-weight: 600; white-space: nowrap; }
.usage-table td.zero { color: var(--ink-soft); opacity: 0.45; }

/* Get-the-app page steps. */
/* App Dock: two equal cards (unlike .two-col's sidebar+content split, which
   crushes the long Android instructions into the narrow column). */
.dock-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; max-width: 980px; }
@media (max-width: 900px) { .dock-grid { grid-template-columns: minmax(0, 1fr); } }

.app-steps { margin: 0.6rem 0 1rem; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; }
.app-steps li { color: var(--ink); }

/* GIF picker button + search modal. */
.gif-btn {
    flex: none; background: var(--foam); border: 1px solid var(--foam-2); border-radius: 999px;
    font-weight: 800; font-size: 0.72rem; letter-spacing: 0.03em; color: var(--sea-deep);
    padding: 0.45rem 0.7rem; cursor: pointer; line-height: 1;
}
.gif-btn:hover { background: #fff; }
:root.dark-theme .gif-btn { background: rgba(233, 237, 249, 0.08); border-color: rgba(233, 237, 249, 0.2); color: var(--sun); }
.gif-modal { position: fixed; inset: 0; z-index: 90; background: rgba(12, 42, 56, 0.45); display: grid; place-items: center; }
.gif-modal[hidden] { display: none; }
.gif-panel {
    width: min(460px, 92vw); max-height: 80vh; display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden;
}
.gif-head { display: flex; gap: 0.5rem; padding: 0.8rem; border-bottom: 1px solid var(--line); }
.gif-search { flex: 1; padding: 0.55rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: var(--foam); color: var(--ink); }
.gif-close { flex: none; border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--ink-soft); padding: 0 0.4rem; }
.gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0.6rem; overflow-y: auto; }
.gif-choice { border: 0; padding: 0; background: var(--foam); border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 1; }
.gif-choice img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-choice.picking { opacity: 0.4; }
.gif-msg { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); padding: 1.5rem 0; }
.gif-credit { margin: 0; padding: 0.4rem; text-align: center; font-size: 0.72rem; color: var(--ink-soft); border-top: 1px solid var(--line); }

/* Suggestion-box callout on the forum index. */
.feedback-callout {
    display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.2rem;
    background: linear-gradient(120deg, #FFF6E3, #FDEBD7); border: 1.5px solid #F0C987;
    border-radius: var(--radius); color: var(--ink); box-shadow: var(--shadow-sm);
}
.feedback-callout:hover { text-decoration: none; border-color: var(--coral-btn); color: var(--ink); }
.feedback-callout .fb-emoji { font-size: 1.6rem; flex: none; }
.feedback-callout strong { display: block; }
.feedback-callout .fb-sub { color: var(--ink-soft); font-size: 0.9rem; }
.feedback-callout .fb-go { margin-left: auto; font-size: 1.3rem; color: var(--coral-btn); flex: none; }
:root.dark-theme .feedback-callout {
    background: linear-gradient(120deg, rgba(217, 142, 43, 0.14), rgba(217, 142, 43, 0.07));
    border-color: rgba(217, 142, 43, 0.45);
}

/* "Not a word" toast above the Wordle grid. */
.wordle-nope {
    margin: 0 auto 0.6rem; width: fit-content; padding: 0.35rem 1rem; border-radius: 999px;
    background: var(--ink); color: #fff; font-weight: 700; font-size: 0.88rem;
    animation: nope-pop 0.25s ease;
}
@keyframes nope-pop { from { transform: scale(0.8); opacity: 0; } }
:root.dark-theme .wordle-nope { background: #E9EDF9; color: #14203F; }

/* Nudge button on game rows waiting on someone else. */
.nudge-btn {
    margin-left: 0.5rem; padding: 0.28rem 0.7rem; border-radius: 999px;
    border: 1px solid var(--foam-2); background: var(--foam); color: var(--sea-deep);
    font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: transform 0.12s ease, background 0.12s ease;
}
.nudge-btn:hover { transform: translateY(-1px); background: #fff; }
:root.dark-theme .nudge-btn { background: rgba(233, 237, 249, 0.08); border-color: rgba(233, 237, 249, 0.2); color: var(--sun); }

/* Your-move badges on the arcade tiles. */
.icon-tile { position: relative; }
.tile-alert {
    position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px;
    border-radius: 999px; background: var(--coral-btn); color: #fff;
    font-size: 0.72rem; font-weight: 800; display: grid; place-items: center; padding: 0 5px;
}
.tile-alert.daily { background: var(--sea-deep); font-size: 1rem; line-height: 0; }
:root.dark-theme .tile-alert.daily { background: #2C4A8A; }

/* Text-size picker on the profile page. */
.fontsize-row { display: flex; align-items: center; gap: 1rem; }
.fontsize-btn { font-weight: 800; min-width: 3.2rem; }
.fontsize-label { font-weight: 700; color: var(--sea-deep); min-width: 6.5rem; text-align: center; }
:root.dark-theme .fontsize-label { color: var(--sun); }

/* Household tags on calendar events. */
.household-chip {
    display: inline-block; margin-left: 0.35rem; padding: 0.08rem 0.5rem;
    background: var(--foam); border: 1px solid var(--foam-2); border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; color: var(--sea-deep); vertical-align: middle;
}
:root.dark-theme .household-chip { background: rgba(233, 237, 249, 0.08); border-color: rgba(233, 237, 249, 0.2); color: var(--sun); }
.field.check { flex-direction: row; align-items: center; gap: 0.5rem; }
.field.check input { width: auto; }

/* Scripture citations in the daily text link out to the study Bible. */
.scripture-link { color: var(--sea-deep); font-weight: 600; text-decoration: underline dotted; text-underline-offset: 2px; }
.scripture-link:hover { text-decoration-style: solid; }
:root.dark-theme .scripture-link { color: var(--sun); }

/* YouTube previews under posts: thumbnail first, player only on tap. */
.yt-embed {
    position: relative; margin: 0 0 0.9rem; border-radius: 14px; overflow: hidden;
    aspect-ratio: 16 / 9; background: #000; max-width: 640px;
}
.yt-embed.sm { max-width: 420px; margin-top: 0.4rem; }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-thumb {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer;
    background-color: #000; background-size: cover; background-position: center;
    display: grid; place-items: center;
}
.yt-play {
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(12, 85, 104, 0.88); color: #fff; font-size: 1.35rem; padding-left: 4px;
    transition: transform 0.12s ease, background 0.12s ease;
}
.yt-thumb:hover .yt-play { transform: scale(1.12); background: var(--coral-btn); }

/* Instant "who reacted" tooltip (elements carrying data-who). */
.who-tip {
    position: absolute; z-index: 80; max-width: min(320px, 90vw);
    background: var(--ink); color: #fff; font-size: 0.82rem; font-weight: 600;
    border-radius: 10px; padding: 0.4rem 0.7rem; pointer-events: none;
    box-shadow: var(--shadow);
}

/* Upload progress: a ring that fills as bytes leave the device. */
.upload-overlay {
    position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
    background: color-mix(in srgb, var(--ink) 35%, transparent);
}
.upload-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: var(--shadow); padding: 1.5rem 2rem; text-align: center; max-width: min(320px, 90vw);
}
.upload-ring {
    --p: 0%;
    width: 92px; height: 92px; margin: 0 auto 0.8rem; border-radius: 50%;
    background: conic-gradient(var(--coral-btn) var(--p), var(--foam) 0);
    display: grid; place-items: center;
}
.upload-ring::before {
    content: ""; grid-area: 1 / 1; width: 70px; height: 70px; border-radius: 50%;
    background: var(--card);
}
.upload-pct { grid-area: 1 / 1; z-index: 1; font-weight: 800; font-family: var(--display); }
.upload-label { margin: 0 0 0.25rem; font-weight: 700; overflow-wrap: anywhere; }
.upload-speed { margin: 0 0 0.25rem; color: var(--sea-deep); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.upload-hint { margin: 0; color: var(--ink-soft); font-size: 0.82rem; }
body.uploading { overflow: hidden; }

/* The floating call window strips the page down to just the call. */
.call-popup .card { margin-top: 0.75rem; }
.call-popup .call-stage { height: calc(100vh - 2rem); }

.comments { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.comments li { display: flex; gap: 0.6rem; align-items: flex-start; }
.comment-bubble { background: var(--foam); border-radius: 14px; padding: 0.55rem 0.85rem; flex: 1; }
.comment-author { font-weight: 700; color: var(--sea-deep); font-size: 0.9rem; margin-right: 0.4rem; }
.comment-time { color: var(--ink-soft); font-size: 0.78rem; }
.comment-bubble p { margin: 0.15rem 0 0; overflow-wrap: anywhere; }

.comment-form { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.comment-form input {
    flex: 1; font: inherit; color: var(--ink); background: var(--sand);
    border: 1.5px solid var(--line); border-radius: 999px; padding: 0.55rem 0.9rem;
}
.comment-form input:focus { outline: none; border-color: var(--sea); background: #fff; box-shadow: 0 0 0 3px rgba(18,124,147,0.15); }
.comment-form .btn { padding-inline: 1rem; }

/* Sidebar */
.side-col > * + * { margin-top: 1.25rem; }
.side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.side-head h2 { margin: 0; font-size: 1.25rem; }
.events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.events li { display: flex; gap: 0.75rem; align-items: flex-start; }
.date-chip {
    flex: none; width: 52px; text-align: center; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--line); background: #fff; line-height: 1;
}
.date-chip .mon { display: block; background: var(--coral-btn); color: #fff; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; padding: 0.2rem 0; letter-spacing: 0.05em; }
.date-chip .day { display: block; font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--ink); padding: 0.25rem 0; }
.ev-title { display: block; font-weight: 700; color: var(--ink); }
.ev-when { display: block; color: var(--ink-soft); font-size: 0.85rem; }
.ev-meta { display: block; color: var(--ink-soft); font-size: 0.85rem; margin-top: 0.15rem; }
.ev-meta.muted { color: #98a9a4; font-size: 0.78rem; }
.events.big li { padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.events.big li:last-child { border-bottom: none; padding-bottom: 0; }

.side-quick h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.quick-links a { display: flex; align-items: center; gap: 0.5rem; background: var(--sand); border: 1px solid var(--line); border-radius: 12px; padding: 0.6rem 0.75rem; font-weight: 700; color: var(--ink); }
.quick-links a:hover { text-decoration: none; border-color: var(--foam-2); background: #fff; color: var(--sea-deep); }

/* ---- Chat / messages ----------------------------------------------------- */
.chat { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.25rem; height: calc(100vh - 220px); min-height: 460px; }
.list-pane { display: flex; flex-direction: column; min-height: 0; }
.list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.list-head h1 { font-size: 1.6rem; margin: 0; }

.new-chat { padding: 1rem; margin-bottom: 0.75rem; }
.new-chat h3 { margin: 0 0 0.6rem; }
.member-pick { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; max-height: 220px; overflow-y: auto; }
.member-pick label { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; cursor: pointer; }
.group-title { width: 100%; font: inherit; padding: 0.5rem 0.7rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--sand); margin-bottom: 0.6rem; }
.new-chat-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

.convo-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.35rem; }
.convo { display: flex; align-items: center; gap: 0.65rem; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 14px; padding: 0.6rem; cursor: pointer; font: inherit; }
.convo:hover { background: var(--card); border-color: var(--line); }
.convo.active { background: var(--card); border-color: var(--foam-2); }
.convo-main { flex: 1; min-width: 0; }
.convo-top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.convo-title { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-time { color: var(--ink-soft); font-size: 0.75rem; flex: none; }
.convo-preview { display: block; color: var(--ink-soft); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread { flex: none; background: var(--coral-btn); color: #fff; font-weight: 700; font-size: 0.72rem; min-width: 1.35rem; height: 1.35rem; border-radius: 999px; display: grid; place-items: center; padding: 0 0.35rem; }

.thread-pane { display: flex; flex-direction: column; min-height: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.thread-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink-soft); gap: 0.5rem; }
.thread-empty .tile-badge { margin: 0; }
.thread-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--sand); }
.thread-title { font-family: var(--display); font-weight: 700; color: var(--ink); display: block; line-height: 1.1; }
.thread-sub { color: var(--ink-soft); font-size: 0.8rem; }
.back-btn { display: none; background: none; border: none; font-size: 1.8rem; line-height: 1; color: var(--sea-deep); cursor: pointer; padding: 0 0.3rem 0.2rem; }

.msg-scroll { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
/* Sits above the oldest loaded message; a conversation opens on its last page. */
.msg-older { align-self: center; padding: 0.25rem 0 0.5rem; }
.msg { display: flex; flex-direction: column; max-width: 78%; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg.theirs { align-self: flex-start; align-items: flex-start; }
.msg-sender { font-size: 0.72rem; font-weight: 700; color: var(--sea-deep); margin: 0 0.3rem 0.1rem; }
.bubble { padding: 0.55rem 0.85rem; border-radius: 16px; overflow-wrap: anywhere; }
.msg.theirs .bubble { background: var(--foam); color: var(--ink); border-bottom-left-radius: 5px; }
.msg.mine .bubble { background: var(--sea-deep); color: #fff; border-bottom-right-radius: 5px; }
.msg-time { font-size: 0.68rem; color: var(--ink-soft); margin: 0.12rem 0.3rem 0; }

.composer-inline { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--line); background: var(--sand); }
.composer-inline input { flex: 1; font: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 0.6rem 1rem; }
.composer-inline input:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(18,124,147,0.15); }

@media (max-width: 820px) {
    .chat { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 180px); }
    .chat .thread-pane { display: none; }
    .chat.has-active .list-pane { display: none; }
    .chat.has-active .thread-pane { display: flex; }
    .back-btn { display: inline; }
}

/* ---- Wordle -------------------------------------------------------------- */
.wordle-wrap { max-width: 520px; margin-inline: auto; display: flex; flex-direction: column; gap: 1.25rem; }
.wordle-head { text-align: center; }
.wordle-head h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }

.wordle-grid { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.wordle-row { display: flex; gap: 6px; }
/* Own class, not .tile: the home-hub .tile card rule sets padding/flex that
   otherwise leaks in and pushes the letter off-center on some mobile browsers. */
.wtile {
    box-sizing: border-box; padding: 0;
    width: clamp(52px, 13vw, 62px); height: clamp(52px, 13vw, 62px);
    display: grid; place-items: center; line-height: 1;
    font-family: var(--display); font-weight: 800; font-size: 1.6rem; text-transform: uppercase;
    background: #fff; border: 2px solid var(--line); border-radius: 10px; color: var(--ink);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.wtile.filled { border-color: var(--sea); }
.wtile.correct { background: var(--sea); border-color: var(--sea); color: #fff; }
.wtile.present { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.wtile.absent { background: #C8BFA9; border-color: #C8BFA9; color: #fff; }

.wordle-row.shake { animation: shake 0.35s; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.wordle-result { text-align: center; border-radius: 14px; padding: 0.85rem 1rem; font-size: 1.05rem; }
.wordle-result.won { background: var(--foam); border: 1px solid var(--foam-2); color: var(--sea-deep); }
.wordle-result.lost { background: #FCE7E0; border: 1px solid #F3C3B6; color: var(--coral-btn); }

.keyboard { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.key-row { display: flex; gap: 5px; justify-content: center; width: 100%; }
.key {
    flex: 1; max-width: 44px; min-width: 0; height: 52px;
    display: grid; place-items: center; cursor: pointer;
    font-family: var(--body); font-weight: 800; font-size: 0.95rem;
    background: #fff; border: 1.5px solid var(--line); border-radius: 8px; color: var(--ink);
    padding: 0; touch-action: manipulation;
}
.key.wide { max-width: 64px; flex: 1.6; font-size: 0.75rem; }
.key.correct { background: var(--sea); border-color: var(--sea); color: #fff; }
.key.present { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.key.absent { background: #C8BFA9; border-color: #C8BFA9; color: #fff; }

.scoreboard h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.scores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.scores li { display: flex; align-items: center; gap: 0.6rem; }
.score-name { font-weight: 700; color: var(--ink); }
.score-result { color: var(--ink-soft); font-size: 0.9rem; margin-left: auto; text-align: right; }
.score-result em { font-style: normal; color: #98a9a4; }

/* ---- Seaside Crossword ----------------------------------------------------
   The grid is a square CSS grid sized off --xw-size, so a wider puzzle needs no
   new CSS. Selection reads at a glance: the square you're on is gold, the rest
   of the entry is foam. */
.xw-wrap { max-width: 620px; margin-inline: auto; display: flex; flex-direction: column; gap: 1.25rem; }
.xw-head { text-align: center; }
.xw-head h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }

/* The board is the column that has to fit one screen: status, grid, clue bar, keyboard and
   tools are the pieces you use at the same time, and the site header above them scrolls
   away. --xw-chrome is everything in that column except the grid - the status line, the
   clue bar, the keyboard and the tools row, plus the four gaps between them - so the grid
   can take whatever height is left. The numbers are measured off the rendered page rather than guessed, and the short
   viewport rules below re-state it wherever they change a key's height or a gap. */
.xw-board { --xw-chrome: 356px; display: flex; flex-direction: column; gap: 0.9rem; outline: none; }
.xw-board:focus-visible { outline: 2px solid var(--sun); outline-offset: 6px; border-radius: 14px; }

.xw-status { display: flex; align-items: center; gap: 0.6rem; justify-content: center; color: var(--ink-soft); font-size: 0.85rem; }
.xw-timer { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--sea-deep); font-variant-numeric: tabular-nums; }
.xw-helped { background: var(--sun); color: var(--ink); border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.72rem; font-weight: 700; }
.xw-left { margin-left: auto; }
.xw-status .xw-left:first-child { margin-left: 0; }

/* The board sizes itself off the puzzle: a square never grows past 52px, so a ten-square
   grid fills the width a five-square grid used to, and an old five-square day from the
   archive still renders at the size it was played at.

   It also sizes off the height, which is the part that took a bug report to notice. The
   grid is only half the screen: under it sit the clue bar, the keyboard and the tools, and
   a board measured against width alone pushes all of them off the bottom on any short
   viewport - a folding phone opened out, or a normal one held sideways. Then you are
   scrolling between the square you are typing in and the key you are typing with, which is
   the whole game made annoying.

   --xw-room is what the rest of the column needs; the board takes what is left. dvh rather
   than vh so a mobile browser collapsing its address bar doesn't leave the grid mis-sized. */
.xw-grid {
    /* Three caps, whichever bites first: the width of the screen, a square never bigger
       than 52px, and the height left once the rest of the column has its room. That third
       one is the bug report - measured off width alone, a ten-square grid on a short screen
       (a folding phone opened out, a normal one on its side) pushed the clue bar and the
       keyboard off the bottom, and you ended up scrolling between the square you type in
       and the key you type with. dvh rather than vh so a mobile browser collapsing its
       address bar re-sizes the grid instead of leaving it a screen too tall. The 200px
       floor is the point below which the grid is unreadable anyway: past there it is better
       to let the page scroll than to keep shrinking.

       Height is set outright rather than left to aspect-ratio: an aspect-ratio box still
       needs one definite axis, and inside an auto-height column there is none - the grid
       collapsed to its content, which for empty squares is a couple of pixels. */
    --xw-span: max(200px, min(94vw, calc(var(--xw-size, 5) * 52px), calc(100dvh - var(--xw-chrome))));
    width: var(--xw-span);
    height: var(--xw-span);
    display: grid;
    /* minmax(0, ...) on both axes: a plain 1fr track is minmax(auto, 1fr), so a square
       holding a letter would claim its content width and squeeze the empty squares next
       to it. Rows are spelled out for the same reason - left implicit they size to their
       content, and a row with letters in it grew taller than an empty one. */
    grid-template-columns: repeat(var(--xw-size, 5), minmax(0, 1fr));
    grid-template-rows: repeat(var(--xw-size, 5), minmax(0, 1fr));
    gap: 2px; background: var(--ink); padding: 2px; border-radius: 10px;
    margin-inline: auto;
}
.xw-cell {
    position: relative; background: var(--card); color: var(--ink);
    display: grid; place-items: center; cursor: pointer; user-select: none;
    font-family: var(--display); font-weight: 800;
    font-size: calc(var(--xw-span) / var(--xw-size) * 0.5);
    text-transform: uppercase; line-height: 1; border-radius: 3px;
    overflow: hidden;
    transition: background 0.12s ease;
}
.xw-cell.block { background: var(--ink); cursor: default; }
.xw-cell.in-entry { background: var(--foam); }
.xw-cell.selected { background: var(--sun); }
.xw-cell.wrong { color: var(--coral-btn); text-decoration: line-through; }
.xw-num {
    position: absolute; top: 1px; left: 2px;
    font-family: var(--body); font-weight: 700; line-height: 1; color: var(--ink-soft);
    font-size: calc(var(--xw-span) / var(--xw-size) * 0.24);
}

.xw-cluebar { display: flex; align-items: stretch; gap: 0.4rem; }
.xw-current {
    flex: 1; display: flex; align-items: center; gap: 0.5rem; text-align: left; cursor: pointer;
    background: var(--foam); border: 1px solid var(--foam-2); border-radius: 12px;
    padding: 0.6rem 0.8rem; color: var(--ink); font-family: var(--body); font-size: 0.95rem;
}
.xw-current-label { font-weight: 800; color: var(--sea-deep); white-space: nowrap; }
.xw-arrow {
    width: 42px; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    color: var(--sea-deep); font-size: 1.3rem; font-weight: 800; cursor: pointer; padding: 0;
}

.xw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; justify-content: center; }
.xw-tools-note { flex-basis: 100%; text-align: center; margin: 0; font-size: 0.78rem; }

.xw-result { text-align: center; border-radius: 14px; padding: 0.85rem 1rem; font-size: 1.05rem; }
.xw-result.won { background: var(--foam); border: 1px solid var(--foam-2); color: var(--sea-deep); }

/* Short and wide - a folding phone opened out, or any phone on its side. Height is the
   scarce axis there, so the gaps close up and the keyboard gives back the room the grid
   needs. */
@media (max-height: 780px) {
    .xw-wrap { gap: 0.75rem; }
    .xw-board { gap: 0.55rem; --xw-chrome: 310px; }
    .key { height: 40px; }
    .xw-head p { display: none; }
    /* --xw-chrome is only honest if the clue bar is a known height, and left to itself it
       is one line on a short clue and three on a long one - which is how a board that fit
       yesterday's puzzle overflowed on today's. Fixed here, with the clue cut off at two
       lines; the full text is in the clue lists under the board either way. */
    .xw-current { height: 3.1rem; }
    .xw-current-text {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-height: 620px) {
    .xw-wrap { gap: 0.5rem; }
    .xw-board { gap: 0.4rem; --xw-chrome: 244px; }
    .key { height: 34px; font-size: 0.9rem; }
    .xw-tools-note { display: none; }
}

/* A phone on its side. Below about 520px of height there is no arrangement in which a
   ten-square grid and a keyboard under it are both worth having - shrinking one to fit
   the other just makes two things too small to use. So they stop being stacked: the grid
   takes the height on the left, and the clue bar, keys and tools take the width beside it.
   Only where there is width to spare for it, which on a phone means landscape. */
@media (max-height: 520px) and (min-width: 640px) {
    .xw-wrap { max-width: none; }
    .xw-board {
        --xw-chrome: 6px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 0.9rem;
        align-content: start;
    }
    /* The grid is put in the left column by hand and spans however many rows the right
       column ends up with; everything else drops into the right column in source order.
       Six is more rows than the board ever has - the spare ones collapse to nothing. */
    .xw-grid { grid-column: 1; grid-row: 1 / span 6; align-self: center; }
    .xw-status, .xw-result, .xw-cluebar, .keyboard, .xw-tools { grid-column: 2; }
    .key { height: min(46px, calc((100dvh - 130px) / 3)); }
}

.xw-clue-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.xw-clue-lists h3 { font-size: 0.95rem; margin: 0 0 0.4rem; color: var(--sea-deep); text-transform: uppercase; letter-spacing: 0.04em; }
.xw-clue-lists ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.xw-clue {
    display: flex; gap: 0.45rem; align-items: baseline; cursor: pointer;
    padding: 0.3rem 0.4rem; border-radius: 8px; font-size: 0.88rem; line-height: 1.35;
}
.xw-clue:hover { background: var(--sand-2); }
.xw-clue.current { background: var(--foam); font-weight: 700; }
.xw-clue.done { color: var(--ink-soft); }
.xw-clue-num { font-weight: 800; color: var(--sea-deep); min-width: 1.1rem; }

@media (max-width: 420px) {
    .xw-clue-lists { grid-template-columns: 1fr; }
}

/* At night the grid still has to read as a grid: the black squares (and the hairline
   gaps between squares) go nearly black, while an empty square sits well above them,
   so the shape of the puzzle is obvious before a single letter is in it. */
:root.dark-theme .xw-grid { background: #05091A; }
:root.dark-theme .xw-cell { background: #22335F; }
:root.dark-theme .xw-cell.block { background: #05091A; }
:root.dark-theme .xw-cell.in-entry { background: var(--foam-2); }
:root.dark-theme .xw-cell.selected { background: var(--sun); color: #14203F; }
:root.dark-theme .xw-cell.wrong { color: var(--coral); }
:root.dark-theme .xw-helped { color: #14203F; }

/* ---- Sudoku --------------------------------------------------------------- */
.sud-wrap { max-width: 620px; margin-inline: auto; display: flex; flex-direction: column; gap: 1.25rem; }
.sud-head { text-align: center; }
.sud-head h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }

.sud-levels { display: flex; gap: 0.4rem; justify-content: center; }
.sud-level {
    flex: 1; max-width: 11rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    padding: 0.5rem 0.6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
    color: var(--ink); font-weight: 700; font-size: 0.9rem; text-decoration: none;
}
.sud-level:hover { text-decoration: none; border-color: var(--foam-2); color: var(--sea-deep); }
.sud-level.on { background: var(--sea-deep); border-color: var(--sea-deep); color: #fff; }
.sud-level-tick { font-size: 0.8rem; color: var(--sea); }
.sud-level.on .sud-level-tick { color: var(--sun); }

/* The same height budget the crossword board keeps: --sud-chrome is everything in the
   column except the grid - the status line, the digit pad and the tools row, plus the
   gaps between them - so the grid can take whatever height is left of the viewport. Set
   off the rendered page rather than guessed at, and re-stated wherever a rule below
   changes a key's height or a gap. */
.sud-board { --sud-chrome: 268px; display: flex; flex-direction: column; gap: 0.9rem; outline: none; }
.sud-board:focus-visible { outline: 2px solid var(--sun); outline-offset: 6px; border-radius: 14px; }

.sud-status { display: flex; align-items: center; gap: 0.6rem; justify-content: center; color: var(--ink-soft); font-size: 0.85rem; }
.sud-timer { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--sea-deep); font-variant-numeric: tabular-nums; }
.sud-helped { background: var(--sun); color: var(--ink); border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.72rem; font-weight: 700; }
.sud-left { margin-left: auto; }
.sud-status .sud-left:first-child { margin-left: 0; }

.sud-grid {
    /* Width of the screen, or 46px a square, or the height left over - whichever bites
       first. dvh so a mobile browser collapsing its address bar re-sizes the grid rather
       than leaving it a screen too tall. The 216px floor is 24px a square, below which the
       digits stop being readable and scrolling is the better trade. */
    --sud-span: max(216px, min(94vw, 414px, calc(100dvh - var(--sud-chrome))));
    width: var(--sud-span);
    height: var(--sud-span);
    display: grid;
    /* minmax(0, ...) on both axes: a plain 1fr track is minmax(auto, 1fr), so a square
       holding a digit - or nine pencil marks - would claim its content size and squeeze
       the empty squares next to it. */
    grid-template-columns: repeat(9, minmax(0, 1fr));
    grid-template-rows: repeat(9, minmax(0, 1fr));
    background: var(--line);
    border: 2px solid var(--ink);
    border-radius: 10px;
    overflow: hidden;
    margin-inline: auto;
}
.sud-cell {
    position: relative; background: var(--card); color: var(--sea-deep);
    display: grid; place-items: center; cursor: pointer; user-select: none;
    font-family: var(--display); font-weight: 700;
    font-size: calc(var(--sud-span) / 9 * 0.56);
    line-height: 1; overflow: hidden;
    /* Hairlines between squares, and heavier ones between the boxes. Borders rather than
       a grid gap, because a gap can't be three squares wide in one place and one in
       another. */
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transition: background 0.12s ease;
}
/* Only the two inside seams of each direction: the grid's own border draws the outside,
   and a band on the first row as well would leave a doubled edge. */
.sud-cell.band-left { border-left: 2px solid var(--ink); }
.sud-cell.band-top { border-top: 2px solid var(--ink); }
.sud-cell.band-right { border-right: none; }
.sud-cell.band-bottom { border-bottom: none; }
/* A given is the puzzle; anything you write is yours. Weight and colour carry that, the
   way a printed grid and a pencil do - a background tint as well would fight the
   highlight on the row and column you are working in, which is the one that has to read
   at a glance. */
.sud-cell.given { color: var(--ink); font-weight: 800; }
.sud-cell.peer { background: var(--foam); }
.sud-cell.given.peer { background: var(--foam-2); }
.sud-cell.twin { background: var(--foam-2); font-weight: 800; }
.sud-cell.selected { background: var(--sun); color: var(--ink); }
.sud-cell.wrong { color: var(--coral-btn); text-decoration: line-through; }

.sud-marks {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
    width: 100%; height: 100%; align-items: center; justify-items: center;
    font-family: var(--body); font-weight: 600; color: var(--ink-soft);
    font-size: calc(var(--sud-span) / 9 * 0.26); line-height: 1;
}

.sud-pad { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.sud-pad-row { display: flex; gap: 5px; justify-content: center; width: 100%; }
.sud-key {
    flex: 1; max-width: 44px; min-width: 0; height: 48px;
    display: grid; place-items: center; cursor: pointer;
    font-family: var(--display); font-weight: 800; font-size: 1.2rem;
    background: #fff; border: 1.5px solid var(--line); border-radius: 8px; color: var(--sea-deep);
    padding: 0; touch-action: manipulation;
}
/* All nine of a digit placed: it has nothing left to give, so it stops asking to be
   pressed. Greyed rather than removed - the pad keeps its shape, and the digit is still
   worth pressing to light up its twins on the grid. */
.sud-key.done { color: var(--ink-soft); background: var(--sand-2); border-color: var(--sand-2); }
.sud-key.wide { max-width: 9rem; flex: 2; font-family: var(--body); font-size: 0.85rem; font-weight: 700; }
.sud-key.on { background: var(--sea-deep); border-color: var(--sea-deep); color: #fff; }
.sud-pad-tools { gap: 0.5rem; }

.sud-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; justify-content: center; }
.sud-tools-note { flex-basis: 100%; text-align: center; margin: 0; font-size: 0.78rem; }

.sud-result { text-align: center; border-radius: 14px; padding: 0.85rem 1rem; font-size: 1.05rem; }
.sud-result.won { background: var(--foam); border: 1px solid var(--foam-2); color: var(--sea-deep); }

.sud-archive { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sud-day {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.6rem;
    border-radius: 999px; border: 1px solid var(--line); background: var(--card);
    color: var(--ink); font-size: 0.82rem; font-weight: 600; text-decoration: none;
}
.sud-day:hover { text-decoration: none; border-color: var(--foam-2); color: var(--sea-deep); }
.sud-day.solved { background: var(--foam); border-color: var(--foam-2); color: var(--sea-deep); }
.sud-day.started { border-color: var(--sun); }
.sud-day-mark { font-weight: 800; }

/* Short and wide - a folding phone opened out, or any phone on its side. Height is the
   scarce axis there, so the gaps close up and the pad gives back the room the grid needs. */
@media (max-height: 780px) {
    .sud-wrap { gap: 0.75rem; }
    .sud-board { gap: 0.55rem; --sud-chrome: 236px; }
    .sud-key { height: 40px; }
    .sud-head p { display: none; }
}

@media (max-height: 620px) {
    .sud-wrap { gap: 0.5rem; }
    .sud-board { gap: 0.4rem; --sud-chrome: 208px; }
    .sud-key { height: 34px; font-size: 1rem; }
    .sud-tools-note { display: none; }
}

/* A phone on its side. Below about 520px of height a nine-square grid and a digit pad
   under it are both too small to use, so they stop being stacked: the grid takes the
   height on the left, the pad and the tools take the width beside it. */
@media (max-height: 520px) and (min-width: 640px) {
    .sud-wrap { max-width: none; }
    .sud-board {
        --sud-chrome: 6px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 0.9rem;
        align-content: start;
    }
    .sud-grid { grid-column: 1; grid-row: 1 / span 5; align-self: center; }
    .sud-status, .sud-result, .sud-pad, .sud-tools { grid-column: 2; }
    .sud-key { height: min(46px, calc((100dvh - 120px) / 2)); }
}

@media (max-width: 420px) {
    .sud-level { font-size: 0.82rem; padding: 0.45rem 0.4rem; }
}

/* At night the grid still has to read as a grid: the box lines and the hairlines go
   nearly black against squares that sit well above them, so the shape is obvious before
   a single digit is in it. */
:root.dark-theme .sud-grid { background: #05091A; border-color: #05091A; }
:root.dark-theme .sud-cell { background: #22335F; color: #DCE6FF; border-right-color: #33477C; border-bottom-color: #33477C; }
:root.dark-theme .sud-cell.band-left { border-left-color: #05091A; }
:root.dark-theme .sud-cell.band-top { border-top-color: #05091A; }
:root.dark-theme .sud-cell.given { color: #fff; }
:root.dark-theme .sud-cell.peer { background: #2C406F; }
:root.dark-theme .sud-cell.given.peer { background: #2C406F; }
:root.dark-theme .sud-cell.twin { background: var(--foam-2); color: #14203F; }
:root.dark-theme .sud-cell.selected { background: var(--sun); color: #14203F; }
:root.dark-theme .sud-cell.wrong { color: var(--coral); }
:root.dark-theme .sud-marks { color: #9FB2E0; }
:root.dark-theme .sud-key { background: #22335F; color: #DCE6FF; border-color: #33477C; }
:root.dark-theme .sud-key.done { background: #1A2647; color: #6B7CA8; border-color: #1A2647; }
:root.dark-theme .sud-helped { color: #14203F; }

/* ---- Daily text ----------------------------------------------------------- */
.daily-text { padding: 1.1rem 1.25rem; background: linear-gradient(160deg, #FFF9EC, var(--card)); }
.daily-text summary { cursor: pointer; list-style: none; }
.daily-text summary::-webkit-details-marker { display: none; }
.dt-label { display: flex; align-items: baseline; gap: 0.45rem; font-family: var(--display); font-weight: 700; color: var(--sea-deep); margin-bottom: 0.35rem; }
.dt-date { font-family: var(--body); font-weight: 600; color: var(--ink-soft); font-size: 0.82rem; }
.dt-theme { display: block; font-style: italic; color: var(--ink); line-height: 1.5; }
.daily-text summary::after { content: "Read today's comment"; display: inline-block; margin-top: 0.5rem; font-weight: 700; font-size: 0.85rem; color: var(--sea); }
.daily-text[open] summary::after { content: "Tuck it away"; }
.dt-body { margin-top: 0.75rem; border-top: 1px solid var(--line); padding-top: 0.75rem; }
.dt-body p { color: var(--ink); }
.dt-body p:last-child { margin-bottom: 0; }

/* ---- Chess --------------------------------------------------------------- */
.chess-games { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.chess-row { display: flex; align-items: center; gap: 0.75rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0.7rem 0.9rem; color: var(--ink); }
.chess-row:hover { text-decoration: none; border-color: var(--foam-2); color: var(--ink); }
.chess-main { flex: 1; min-width: 0; }
.chess-title { display: block; font-weight: 700; }
.chess-sub { display: block; color: var(--ink-soft); font-size: 0.82rem; }
.chess-state { flex: none; }

.chess-wrap { max-width: 560px; margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; }
.chess-head { text-align: center; }
.chess-head h1 { font-size: clamp(1.4rem, 4vw, 1.9rem); margin-bottom: 0.15rem; }
.back-link { font-weight: 700; }
.chess-status { color: var(--ink-soft); margin: 0; }

.board {
    position: relative;
    display: grid; grid-template-columns: repeat(8, 1fr);
    width: 100%; max-width: 480px; margin-inline: auto; aspect-ratio: 1;
    border: 3px solid var(--sea-deep); border-radius: 10px; overflow: hidden;
    touch-action: manipulation;
}
.sq { position: relative; border: none; padding: 0; cursor: pointer; display: grid; place-items: center; aspect-ratio: 1; }
.sq.light { background: #EFE5CE; }
.sq.dark { background: #7FB2A6; }
.sq.lastmove { box-shadow: inset 0 0 0 999px rgba(255, 198, 99, 0.38); }
.sq.selected { outline: 3px solid var(--sun); outline-offset: -3px; z-index: 1; }
.sq.target.light, .sq.target.dark { box-shadow: inset 0 0 0 3px rgba(209, 74, 42, 0.55); }
.sq.target.lastmove { box-shadow: inset 0 0 0 3px rgba(209, 74, 42, 0.55), inset 0 0 0 999px rgba(255, 198, 99, 0.38); }
.dot { width: 30%; aspect-ratio: 1; border-radius: 50%; background: rgba(209, 74, 42, 0.45); }
/* Edge-square coordinates, colored to contrast with their own square. */
.coord { position: absolute; font-size: clamp(0.5rem, 1.8vw, 0.68rem); font-weight: 700; line-height: 1; pointer-events: none; user-select: none; }
.coord-rank { top: 3px; left: 4px; }
.coord-file { bottom: 3px; right: 4px; }
.sq.light .coord { color: #6E9C90; }
.sq.dark .coord { color: #EFE5CE; }

/* Pieces live on an overlay so they can slide between squares. Each piece keeps a
   stable DOM element (Blazor @key) and moves by transform, which the transition
   animates; captures fade out. Taps fall through to the squares underneath. */
.piece-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pieceEl {
    position: absolute; top: 0; left: 0; width: 12.5%; height: 12.5%;
    display: grid; place-items: center;
    font-size: clamp(1.6rem, 8vw, 2.3rem); line-height: 1; user-select: none;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.22s ease;
    will-change: transform;
}
.pieceEl.w { color: #FDFBF4; text-shadow: 0 1px 2px rgba(14,59,71,0.6); }
.pieceEl.b { color: #16323C; }
.pieceEl.captured { opacity: 0; transform-origin: center; scale: 0.6; transition: opacity 0.22s ease, scale 0.22s ease; }

.chess-actions { display: flex; justify-content: center; gap: 0.75rem; }
.moves-card { padding: 0.9rem 1.1rem; }
.moves-card summary { cursor: pointer; font-weight: 700; color: var(--sea-deep); }
.moves-list { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.85rem; color: var(--ink-soft); margin: 0.6rem 0 0; overflow-wrap: anywhere; }

/* ---- Shore Words ---------------------------------------------------------- */
.sw-wrap { max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; }

.sw-over {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center;
    background: var(--card); border: 2px solid var(--sun); border-radius: var(--radius);
    padding: 0.9rem 1.1rem; box-shadow: var(--shadow-sm);
}
.sw-over strong { font-family: var(--display); font-size: 1.15rem; color: var(--sea-deep); }
.sw-over span { color: var(--ink-soft); font-size: 0.9rem; }

.sw-score { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.sw-score li {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--card); border: 1px solid var(--line); border-radius: 999px;
    padding: 0.3rem 0.85rem; font-size: 0.9rem;
}
.sw-score li.current { border-color: var(--sun); box-shadow: 0 0 0 2px rgba(255, 198, 99, 0.4); }
.sw-score-name { font-weight: 700; }
.sw-score-pts { font-family: var(--display); font-weight: 800; color: var(--sea-deep); }
.sw-score-turn { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--coral-btn); }
.sw-score li.sw-bag { color: var(--ink-soft); border-style: dashed; }

/* The 15x15 board: seafoam squares in a deep-sea frame; premiums keep the palette.
   The board scales with the page; on very narrow phones the wrapper scrolls sideways
   instead of crushing tiles below a tappable size. */
.sw-board-scroll { width: 100%; overflow-x: auto; }
.sw-board {
    min-width: 330px;
    display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(15, 1fr);
    gap: 2px; width: 100%; max-width: 600px; margin-inline: auto; aspect-ratio: 1;
    background: var(--sea-deep); border: 3px solid var(--sea-deep); border-radius: 10px;
    padding: 2px; touch-action: manipulation;
}
.sw-cell {
    position: relative; border: none; padding: 0; min-width: 0; min-height: 0;
    display: grid; place-items: center; cursor: pointer; border-radius: 2px;
    background: var(--foam);
    font-size: clamp(0.34rem, 1.6vw, 0.56rem); font-weight: 800; letter-spacing: 0.02em;
    color: rgba(14, 59, 71, 0.55);
}
div.sw-cell { cursor: default; }
.sw-cell.dl { background: var(--foam-2); color: #0C5568; }
.sw-cell.tl { background: var(--sea); color: #FFFFFF; }
.sw-cell.dw { background: #FFB9A6; color: #8A3418; }
.sw-cell.tw { background: var(--coral-btn); color: #FFFFFF; }

/* Wooden-look tiles washed up in the sand. */
.sw-cell.has-tile {
    background: linear-gradient(160deg, #F9EED3, #ECD6A7);
    box-shadow: inset 0 -2px 0 rgba(139, 105, 49, 0.35), inset 0 0 0 1px #CBA76B;
}
.sw-tile {
    font-family: var(--display); font-weight: 800; line-height: 1;
    font-size: clamp(0.7rem, 2.6vw, 1.05rem); color: #5B4423; white-space: nowrap;
}
.sw-tile sub, .sw-rtile sub { font-size: 0.55em; font-weight: 700; vertical-align: sub; }
.sw-cell.pending { outline: 2px solid var(--coral-btn); outline-offset: -1px; }
.sw-cell.lastplay { outline: 2px solid var(--sun); outline-offset: -1px; }

.sw-rack { display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; min-height: 46px; }
.sw-rtile {
    width: clamp(38px, 11vw, 48px); aspect-ratio: 1; border: none; border-radius: 8px; cursor: pointer;
    background: linear-gradient(160deg, #F9EED3, #ECD6A7);
    box-shadow: var(--shadow-sm), inset 0 -3px 0 rgba(139, 105, 49, 0.35), inset 0 0 0 1px #CBA76B;
    font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: #5B4423;
    transition: transform 0.12s ease;
}
.sw-rtile.picked { transform: translateY(-5px); outline: 3px solid var(--sun); }

.sw-actions { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
/* Live "what this word would score" readout next to Play word. */
.sw-preview { font-size: 0.85rem; color: var(--sea-deep); background: var(--sand-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.75rem; }
.sw-preview strong { color: var(--coral, #D14A2A); }
.sw-preview-warn { color: var(--ink-soft); font-style: italic; }
.sw-alert { text-align: center; }

.sw-log h3 { margin-bottom: 0.4rem; }
.sw-log ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; color: var(--ink-soft); font-size: 0.9rem; }

/* Blank-tile letter picker. */
.sw-blank-veil { position: fixed; inset: 0; z-index: 60; background: rgba(14, 59, 71, 0.5); display: grid; place-items: center; padding: 1rem; }
.sw-blank { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.25rem; max-width: 360px; text-align: center; }
.sw-blank p { font-weight: 700; margin-bottom: 0.75rem; }
.sw-blank-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.35rem; margin-bottom: 0.9rem; }
.sw-blank-grid .sw-rtile { width: 100%; font-size: 1rem; }

/* ---- Calls ---------------------------------------------------------------- */
.calls-wrap { max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; gap: 1.25rem; }
.call-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.call-roster li { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.call-name { flex: 1; font-weight: 700; color: var(--ink); min-width: 8rem; }
.presence { display: block; font-size: 0.78rem; font-weight: 600; color: #98a9a4; }
.presence.on { color: var(--sea); }
.presence.on::before { content: "● "; }
.call-btns { display: inline-flex; gap: 0.5rem; }

.call-panel { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding-block: 2rem; }
.call-panel h2 { margin: 0; }
.avatar.big { width: 72px; height: 72px; font-size: 2rem; }
.call-panel.ringing .avatar.big { animation: ringpulse 1.2s ease-in-out infinite; }
@keyframes ringpulse {
    0%, 100% { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), 0 0 0 0 rgba(209,74,42,0.5); }
    50% { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), 0 0 0 14px rgba(209,74,42,0); }
}

.call-stage { position: relative; background: #0C1A20; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; max-height: 70vh; }
@media (min-width: 700px) { .call-stage { aspect-ratio: 16 / 10; } }
#fs-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#fs-local {
    position: absolute; right: 0.75rem; top: 0.75rem; width: 28%; max-width: 160px;
    aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; border: 2px solid rgba(255,255,255,0.6);
    background: #16323C; z-index: 2;
}
.call-stage.audio-only #fs-remote, .call-stage.audio-only #fs-local { visibility: hidden; }
.audio-badge {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.75rem; color: #DCEFF3; font-weight: 700; font-size: 1.2rem;
}
.call-bar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem;
    background: linear-gradient(0deg, rgba(12,26,32,0.85), rgba(12,26,32,0));
}
.call-status { color: #DCEFF3; font-weight: 700; margin-right: auto; }

/* ---- Motion / a11y ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
    .masthead-inner { padding-bottom: 1.4rem; gap: 0.75rem; }
    /* Phone nav: a tidy app-style icon grid instead of wrapping pills. */
    .nav { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; }
    .nav a {
        flex-direction: column; justify-content: center; gap: 2px;
        min-height: 58px; padding: 0.4rem 0.15rem;
        font-size: 0.7rem; border-radius: 14px; white-space: nowrap;
        background: rgba(255, 255, 255, 0.35);
    }
    .nav-ico { font-size: 1.35rem; }
    .account { width: 100%; justify-content: space-between; }
}

/* ---- Blazor error UI (kept, restyled) ------------------------------------ */
.blazor-error-boundary { background: var(--coral-btn); padding: 1rem 1.25rem; color: #fff; border-radius: 12px; }
.blazor-error-boundary::after { content: "Something slipped off the raft. Reload the page."; }

/* ---- Forum ---------------------------------------------------------------- */
.forum-cats { display: flex; flex-direction: column; gap: 0.75rem; }
.forum-cat-wrap { position: relative; }
.forum-cat { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; color: var(--ink); border-left: 5px solid var(--foam-2); }
/* A little boardwalk color per board: the accent cycles the beach palette. */
.forum-cat-wrap:nth-child(4n+2) .forum-cat { border-left-color: var(--sun); }
.forum-cat-wrap:nth-child(4n+3) .forum-cat { border-left-color: var(--coral, #E8846B); }
.forum-cat-wrap:nth-child(4n+4) .forum-cat { border-left-color: var(--sea); }
.forum-cat:hover { text-decoration: none; border-color: var(--foam-2); color: var(--ink); }
.forum-cat-wrap:nth-child(4n+2) .forum-cat:hover { border-left-color: var(--sun); }
.forum-cat-wrap:nth-child(4n+3) .forum-cat:hover { border-left-color: var(--coral, #E8846B); }
.forum-cat-wrap:nth-child(4n+4) .forum-cat:hover { border-left-color: var(--sea); }
/* Theme-image cards stack a banner above the usual row. */
.forum-cat.has-theme { flex-direction: column; align-items: stretch; gap: 0.8rem; padding-top: 0; overflow: hidden; }
.forum-cat-banner {
    display: block; width: calc(100% + 2.6rem); margin: 0 -1.3rem;
    height: 130px; object-fit: cover;
}
.forum-cat-row { display: flex; align-items: center; gap: 1rem; width: 100%; }
/* Admin theme-image button: bottom corner, quiet, and never on top of the counts. */
.forum-cat-theme { position: absolute; bottom: 0.45rem; right: 0.45rem; margin: 0; z-index: 2; opacity: 0.45; transition: opacity 0.15s ease; }
.forum-cat-theme:hover, .forum-cat-theme:focus-within { opacity: 1; }
.forum-cat-theme .attach-btn.icon-only { background: color-mix(in srgb, var(--card) 82%, transparent); padding: 0.25rem 0.4rem; }
/* Keep the meta column clear of the corner button on admin screens. */
.forum-cat-wrap:has(.forum-cat-theme) .forum-cat-row { padding-right: 1.6rem; }
.forum-cat-main { flex: 1; min-width: 0; }
.forum-cat-main h3 { margin: 0 0 0.15rem; }
.forum-cat-main p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.forum-cat-meta, .topic-meta { flex: none; text-align: center; color: var(--ink-soft); font-size: 0.8rem; display: flex; flex-direction: column; }
.count-big { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--sea-deep); line-height: 1.1; }
.muted { color: #98a9a4; }
.new-topic { padding: 1rem 1.2rem; }
.new-topic summary { cursor: pointer; font-weight: 700; color: var(--sea-deep); }
.topic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.topic-row { display: flex; align-items: center; gap: 0.75rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0.8rem 1rem; color: var(--ink); }
.topic-row:hover { text-decoration: none; border-color: var(--foam-2); color: var(--ink); }
.topic-main { flex: 1; min-width: 0; }
.topic-title { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.topic-sub { display: block; color: var(--ink-soft); font-size: 0.82rem; }
.thread { display: flex; flex-direction: column; gap: 0.9rem; }
/* Marks where a long thread was trimmed, between the opening post and the replies. */
.thread-gap { align-self: center; }
.forum-post .post-body { margin-bottom: 0; }

/* ---- Gallery -------------------------------------------------------------- */
.month-head { margin: 1.75rem 0 0.75rem; font-size: 1.2rem; color: var(--sea-deep); }
.gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.shot { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.shot a { position: relative; display: block; aspect-ratio: 1; background: var(--sand-2); }
.shot img, .shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.play-badge { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.6); pointer-events: none; }
.shot figcaption { padding: 0.5rem 0.65rem; font-size: 0.78rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 0.1rem; }
.shot-caption { color: var(--ink); font-weight: 600; }
.shot figcaption form { margin: 0; }
.shot figcaption .linkbtn { padding: 0; font-size: 0.75rem; }

/* One photo on its own page: as big as the screen allows, never cropped. */
.photo-single { margin: 0 auto; max-width: 60rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.photo-single a { display: block; }
.photo-single img, .photo-single video { width: 100%; max-height: 78vh; object-fit: contain; display: block; background: var(--sand-2); }
.photo-single figcaption { padding: 0.7rem 0.9rem; font-size: 0.85rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 0.5rem; }
.photo-single-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* ---- Photo Booth albums ---------------------------------------------------- */
.album-strip { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.album-card {
    display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
    background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.album-card img, .album-card video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--sand-2); }
.album-empty {
    display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3;
    background: var(--sand-2); font-size: 2rem; color: var(--ink-soft);
}
.album-name { padding: 0.45rem 0.6rem 0; font-weight: 700; font-size: 0.9rem; }
.album-count { padding: 0 0.6rem 0.5rem; font-size: 0.75rem; color: var(--ink-soft); }
.album-new summary { display: flex; flex-direction: column; cursor: pointer; list-style: none; }
.album-new summary::-webkit-details-marker { display: none; }
.album-new summary .album-name { padding-bottom: 0.5rem; }
.album-new form { display: flex; flex-direction: column; gap: 6px; padding: 0 0.6rem 0.6rem; }
.album-new input { min-width: 0; padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-size: 0.85rem; }
.shot-organize { margin-top: 0.25rem; }
.shot-organize summary {
    cursor: pointer; list-style: none; font-size: 0.75rem; color: var(--sea-deep);
    font-weight: 600; padding: 0.15rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shot-organize summary::-webkit-details-marker { display: none; }
.shot-organize-menu {
    display: flex; flex-direction: column; gap: 0.3rem; padding: 0.4rem 0.5rem; margin-top: 0.25rem;
    background: var(--sand-2); border: 1px solid var(--line); border-radius: 10px;
}
.shot-organize-menu .linkbtn { padding: 0.1rem 0; font-size: 0.78rem; text-align: left; }
.shot-organize-new { display: flex; gap: 4px; align-items: center; }
.shot-organize-new input {
    flex: 1; min-width: 0; width: 100%; font: inherit; font-size: 0.75rem; padding: 0.25rem 0.4rem;
    border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.shot-organize-new .btn { padding: 0.2rem 0.55rem; font-size: 0.75rem; flex: none; }
/* ---- Chess vs the computer -------------------------------------------------- */
.bot-picks { display: grid; gap: 8px; }
.bot-pick {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: 12px;
    background: var(--card); color: var(--ink); font: inherit; cursor: pointer; text-align: left;
}
.bot-pick:hover { border-color: var(--sea-deep); }
.bot-face { font-size: 1.4rem; }
.bot-name { font-weight: 700; font-size: 0.95rem; }
.bot-sub { font-size: 0.78rem; color: var(--ink-soft); }

.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form input { flex: 1; min-width: 0; padding: 0.5rem 0.65rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; }

/* ---- Reply attachments + emoji picker ------------------------------------- */
.comment-pics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.4rem; }
.comment-pics a { display: block; border-radius: 10px; overflow: hidden; background: var(--sand-2); }
.comment-pics img { display: block; max-height: 140px; max-width: 180px; object-fit: cover; }

.attach-btn.icon-only { padding: 0.45rem 0.6rem; position: relative; flex: none; }
.attach-count {
    position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
    border-radius: 999px; background: var(--coral-btn); color: #fff;
    font-size: 0.68rem; font-weight: 800; display: none; place-items: center; padding: 0 4px;
}
.attach-btn.has-files .attach-count { display: grid; }

.emoji-btn {
    flex: none; background: var(--foam); border: 1px solid var(--foam-2); border-radius: 999px;
    font-size: 1.05rem; line-height: 1; padding: 0.45rem 0.6rem; cursor: pointer;
}
.emoji-btn:hover { background: #fff; }
.emoji-panel {
    position: absolute; z-index: 60; background: var(--card); border: 1px solid var(--line);
    border-radius: 14px; box-shadow: var(--shadow); padding: 0.5rem;
    max-height: 340px; overflow-y: auto; overscroll-behavior: contain;
}
.emoji-group-label {
    position: sticky; top: -0.5rem; z-index: 1; background: var(--card);
    font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-soft); padding: 0.45rem 0.3rem 0.25rem;
}
.emoji-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; }
.emoji-choice {
    background: none; border: none; font-size: 1.35rem; line-height: 1.5;
    cursor: pointer; border-radius: 8px; padding: 0.15rem;
}
.emoji-choice:hover { background: var(--foam); }
.comment-form .attach-btn.icon-only, .comment-form .emoji-btn { align-self: center; }

/* ---- Admin: members ------------------------------------------------------- */
.member-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.member-row { padding: 1rem 1.2rem; }
.member-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.member-main { flex: 1; min-width: 10rem; }
.member-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--ink); }
.member-sub { display: block; color: var(--ink-soft); font-size: 0.82rem; }
.member-roles { display: inline-flex; gap: 0.3rem; }
.member-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.member-actions form { margin: 0; }
.role-form { display: inline-flex; gap: 0.5rem; align-items: center; }
.role-form select { font: inherit; padding: 0.45rem 0.6rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--sand); }

/* ---- Compact icon tiles (Games / Admin hubs) ------------------------------ */
.icon-tiles { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.icon-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem;
    width: 128px; min-height: 118px; padding: 1rem 0.5rem; text-align: center;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); color: var(--ink);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.icon-tile:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--foam-2); color: var(--sea-deep); }
.icon-tile .big { font-size: 2.4rem; line-height: 1; }
.icon-tile .word { font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.1; }

/* ---- Tide chart pattern popups (Wordle share-style, colors only) ---------- */
.scores li { position: relative; border-radius: 10px; padding: 0.2rem 0.3rem; }
.scores li.has-pattern { cursor: pointer; }
.scores li.has-pattern:hover, .scores li.has-pattern:focus { background: var(--foam); outline: none; }
.pattern-pop {
    display: none; position: absolute; left: 2.4rem; top: calc(100% + 4px); z-index: 40;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow); padding: 0.5rem;
    flex-direction: column; gap: 3px;
}
.scores li.has-pattern:hover .pattern-pop,
.scores li.has-pattern:focus .pattern-pop,
.scores li.has-pattern:focus-within .pattern-pop { display: flex; }
.pat-row { display: flex; gap: 3px; }
.pat-tile { width: 16px; height: 16px; border-radius: 4px; background: #C8BFA9; }
.pat-tile.p1 { background: var(--sun); }
.pat-tile.p2 { background: var(--sea); }

/* ---- E2EE banners --------------------------------------------------------- */
.crypto-banner { margin-bottom: 1.25rem; padding: 1.1rem 1.3rem; background: linear-gradient(160deg, #F1FAF7, var(--card)); }
.crypto-banner h3 { margin-bottom: 0.3rem; }
.crypto-fields { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crypto-fields input {
    flex: 1; min-width: 12rem; font: inherit; color: var(--ink);
    background: var(--sand); border: 1.5px solid var(--line); border-radius: 999px; padding: 0.6rem 1rem;
}
.crypto-fields input:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(18,124,147,0.15); }
.crypto-err { color: var(--coral-btn); font-weight: 600; margin: 0.5rem 0 0; min-height: 1.2em; }

/* ---- Avatar images + profile ---------------------------------------------- */
img.avatar { object-fit: cover; background: var(--foam); }
.avatar.mini { width: 35px; height: 35px; border-radius: 50%; }
.avatar.xl { width: 96px; height: 96px; border-radius: 50%; box-shadow: var(--shadow-sm); }
a.hello { display: inline-flex; align-items: center; gap: 0.45rem; }
a.hello:hover { text-decoration: none; }
a.hello span { color: var(--sea-deep); }
.profile-photo { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.profile-photo form { margin: 0; }

/* ---- Google sign-in ------------------------------------------------------- */
.or-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.1rem 0; color: var(--ink-soft); font-weight: 700; font-size: 0.8rem; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google-btn { gap: 0.6rem; }

/* ---- M.U.L.E. (retro game shell) ----------------------------------------- */
.mule-shell { max-width: 720px; margin-inline: auto; }
.mule-topline { margin-bottom: 0.6rem; }
.mule-screen {
    background: #000; border: 2px solid #2b2b6b; border-radius: 8px; padding: 6px;
    display: flex; justify-content: center; box-shadow: var(--shadow-sm);
}
.mule-screen canvas { image-rendering: pixelated; display: block; }
.mule-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; }
.mule-score { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.7rem;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px; font-size: 0.9rem; }
.mule-score.you { border-color: var(--sea); box-shadow: inset 0 0 0 1px var(--sea); }
.mule-score .dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.mule-score .dot.c0 { background: #d8402c; }
.mule-score .dot.c1 { background: #3a72d8; }
.mule-score .dot.c2 { background: #3aa83a; }
.mule-score .dot.c3 { background: #e0c02a; }
.mt-md { margin-top: 1rem; }
.mt-sm { margin-top: 0.5rem; }
.mule-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.mule-actions .mule-clock { flex-basis: 100%; font-variant-numeric: tabular-nums; }
.mule-join-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.55rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mule-join-row:last-child { border-bottom: none; }
.mule-news ul { margin: 0; padding-left: 1.2rem; }
.mule-news li { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 0.25rem; }
.mule-goods { flex-basis: 100%; font-variant-numeric: tabular-nums; }

/* ---- Cookbook ------------------------------------------------------------ */
.cb-columns { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .cb-columns { grid-template-columns: minmax(0, 1fr); } }
.cb-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.cb-head h2 { margin: 0; }
.cb-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cb-card h3 { margin-bottom: 0.2rem; }
.cb-group { padding: 0.9rem 1.1rem; margin-bottom: 0.7rem; }
.cb-group.active { border-color: var(--sea); }
.cb-group-head { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem;
    background: none; border: none; cursor: pointer; font: inherit; color: var(--ink); padding: 0; text-align: left; }
.cb-group-body { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.6rem; }
.cb-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.cb-row input, .cb-row select { flex: 1 1 140px; min-width: 0; padding: 0.5rem 0.7rem; border: 1px solid var(--line);
    border-radius: 10px; font: inherit; background: #fff; }
.cb-items { list-style: none; margin: 0; padding: 0; }
.cb-items li { padding: 0.3rem 0; border-bottom: 1px dashed var(--line); }
.cb-items li.done span { text-decoration: line-through; color: var(--ink-soft); }
.cb-items label { display: flex; gap: 0.5rem; align-items: baseline; cursor: pointer; }
.cb-member-picks { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.cb-member-picks label { display: inline-flex; gap: 0.35rem; align-items: center; cursor: pointer; }
.cb-tools { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cb-servings, .cb-units { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.cb-ingredients { list-style: none; margin: 0; padding: 0; }
.cb-ingredients li { padding: 0.35rem 0; border-bottom: 1px dashed var(--line); }
.cb-ingredients strong { color: var(--sea-deep); margin-right: 0.4rem; }
.cb-steps li { margin-bottom: 0.55rem; }
.cb-ing-row { display: flex; gap: 0.4rem; align-items: center; }
.cb-ing-row input, .cb-ing-row select { padding: 0.45rem 0.55rem; border: 1px solid var(--line); border-radius: 10px;
    font: inherit; background: #fff; min-width: 0; }
.cb-ing-row .cb-qty { flex: 0 0 64px; }
.cb-ing-row select { flex: 0 0 84px; }
.cb-ing-row .cb-name { flex: 2 1 120px; }
.cb-ing-row .cb-note { flex: 1 1 80px; }
.cb-narrow { max-width: 130px; }
.cb-thumb { width: 100%; height: 130px; object-fit: cover; border-radius: 12px; margin-bottom: 0.5rem; background: var(--foam); }
.cb-hero { display: block; width: 100%; max-height: 340px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.cb-photo-preview { display: block; max-width: 240px; border-radius: 12px; margin: 0.4rem 0; }
.feed-pager { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 1.25rem; }
.feed-pager a:only-child { margin-left: auto; }
.month-jump { margin-top: 1.25rem; }
.month-jump summary { cursor: pointer; font-weight: 700; color: var(--sea-deep); }
.month-jump-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }

/* ==========================================================================
   Dark mode - "Starry Night"
   An homage to Van Gogh's night sky: Prussian-blue depths, swirling lighter
   blues in the masthead sky, star-glow yellows for highlights, and the warm
   amber of lit village windows as the accent. Light mode stays beachy.
   ========================================================================== */
/* dark theme (class-driven; system preference applies it by default via JS) */
:root.dark-theme {
    /* The night */
    --sand:      #101B3C;   /* deep Prussian night, page background */
    --sand-2:    #182550;
    --sky-top:   #14224C;   /* masthead: the swirling sky */
    --sky-bot:   #2C4A8A;

    /* Moonlight */
    --ink:       #E9EDF9;   /* primary text */
    --ink-soft:  #A9B6DC;

    /* Star blues */
    --sea:       #8FB3F0;   /* links, accents */
    --sea-deep:  #AFC8F5;   /* headings-on-dark, strong text */

    --foam:      #1C2B58;   /* tinted surfaces */
    --foam-2:    #31479A;

    /* Village windows */
    --coral:     #F0B14A;
    --coral-btn: #D98E2B;   /* warm amber buttons */
    --sun:       #F5D76E;   /* the stars themselves */

    --line:      #2A3A6E;
    --card:      #16234C;
    --shadow:    0 14px 30px -18px rgba(0, 0, 0, 0.85);
    --shadow-sm: 0 6px 16px -10px rgba(0, 0, 0, 0.8);
}

/* The sky itself: a moonglow, a drift of swirl-light, and scattered stars. */
:root.dark-theme body {
    background: var(--sand);
    background-image:
        radial-gradient(120% 80% at 88% -12%, rgba(245, 215, 110, 0.16), rgba(245, 215, 110, 0) 55%),
        radial-gradient(70% 45% at 8% 0%, rgba(143, 179, 240, 0.12), rgba(143, 179, 240, 0) 60%),
        radial-gradient(2px 2px at 22% 18%, rgba(245, 215, 110, 0.9), transparent 100%),
        radial-gradient(2px 2px at 67% 9%, rgba(245, 215, 110, 0.7), transparent 100%),
        radial-gradient(2px 2px at 42% 31%, rgba(233, 237, 249, 0.6), transparent 100%),
        radial-gradient(2px 2px at 86% 24%, rgba(233, 237, 249, 0.5), transparent 100%),
        radial-gradient(2px 2px at 12% 42%, rgba(245, 215, 110, 0.5), transparent 100%);
    background-attachment: fixed;
}

/* The brand sun becomes the painting's radiant star. */
:root.dark-theme .brand-sun {
    background: radial-gradient(circle at 35% 35%, #FDF3C8, var(--sun) 55%, #D9A93C);
    box-shadow: 0 0 0 5px rgba(245, 215, 110, 0.15), 0 0 18px 2px rgba(245, 215, 110, 0.45);
}

/* Chrome on the night sky. */
:root.dark-theme .nav a:hover { background: rgba(233, 237, 249, 0.08); color: var(--sun); }
:root.dark-theme .nav a[aria-current="page"] { background: rgba(233, 237, 249, 0.14); color: var(--sun); }
:root.dark-theme .hello span { color: var(--sun); }

/* Buttons: amber windows and star-blue. */
:root.dark-theme .btn-coral { color: #14203F; }
:root.dark-theme .btn-coral:hover { color: #14203F; box-shadow: 0 12px 22px -12px rgba(217, 142, 43, 0.9); }
:root.dark-theme .btn-sea { background: #2C4A8A; color: var(--ink); }
:root.dark-theme .btn-sea:hover { color: #fff; }
:root.dark-theme .btn-ghost { background: rgba(233, 237, 249, 0.06); color: var(--ink); border-color: rgba(233, 237, 249, 0.18); }
:root.dark-theme .btn-ghost:hover { background: rgba(233, 237, 249, 0.12); color: var(--sun); }

/* Forms glow softly instead of going white. */
:root.dark-theme .field input:focus, :root.dark-theme .composer textarea:focus, :root.dark-theme .comment-form input:focus {
    background: var(--card);
    box-shadow: 0 0 0 4px rgba(143, 179, 240, 0.2);
}
:root.dark-theme .field input::placeholder, :root.dark-theme .composer textarea::placeholder { color: #7C89B4; }
.composer-inline input, .cb-row input, .cb-row select,
:root.dark-theme .cb-ing-row input, :root.dark-theme .cb-ing-row select {
    background: var(--card); color: var(--ink); border-color: var(--line);
}
:root.dark-theme .attach-btn:hover, :root.dark-theme .quick-links a:hover { background: rgba(233, 237, 249, 0.1); }

/* Warm states shift from coral to candlelit amber. */
:root.dark-theme .alert, :root.dark-theme .wordle-result.lost {
    background: rgba(217, 142, 43, 0.14); border-color: rgba(217, 142, 43, 0.45); color: #F0B96B;
}
:root.dark-theme .tag-expired { background: rgba(217, 142, 43, 0.2); color: #F0B96B; }
:root.dark-theme .like.liked { background: rgba(217, 142, 43, 0.18); border-color: rgba(217, 142, 43, 0.45); }
:root.dark-theme .react-chip.mine { background: rgba(217, 142, 43, 0.18); border-color: rgba(217, 142, 43, 0.45); color: var(--sun); }
:root.dark-theme .who-tip { background: #E9EDF9; color: #14203F; }
:root.dark-theme .upload-ring::before { background: var(--card); }
:root.dark-theme .emoji-group-label { background: var(--card); }
:root.dark-theme .forum-cat-theme .attach-btn.icon-only { background: rgba(20, 32, 63, 0.82); }
:root.dark-theme .unread { color: #14203F; }
:root.dark-theme .date-chip { background: var(--card); }
:root.dark-theme .date-chip .mon { color: #14203F; }

/* Messages: my words in swirl blue. */
:root.dark-theme .msg.mine .bubble { background: #2C4A8A; color: var(--ink); }

/* Wordle under the stars. */
/* The base dark rule outweighs .wtile.correct/.present (extra selector), so the
   judged states need their fills restated here or they stay card-navy with the
   bright-state ink — invisible letters. */
:root.dark-theme .wtile { background: var(--card); color: var(--ink); }
:root.dark-theme .wtile.absent { background: #3A4467; border-color: #3A4467; color: #C9D2EC; }
:root.dark-theme .wtile.present { background: var(--sun); border-color: var(--sun); color: #14203F; }
:root.dark-theme .wtile.correct { background: var(--sea); border-color: var(--sea); color: #14203F; }

/* Shore Words at night: moonlit board, lantern-lit premium squares; the wooden
   tiles keep their warm sand look, like driftwood under lamplight. */
:root.dark-theme .sw-board { background: #0C1530; border-color: #2A3A6E; }
:root.dark-theme .sw-cell { background: #1C2B58; color: rgba(233, 237, 249, 0.45); }
:root.dark-theme .sw-cell.dl { background: #31479A; color: #C9D6F5; }
:root.dark-theme .sw-cell.tl { background: #4A66C4; color: #F0F4FF; }
:root.dark-theme .sw-cell.dw { background: #7A4A2A; color: #F5D7B8; }
:root.dark-theme .sw-cell.tw { background: #D98E2B; color: #14203F; }
:root.dark-theme .sw-cell.has-tile {
    background: linear-gradient(160deg, #E8D4A8, #CBA96F);
    box-shadow: inset 0 -2px 0 rgba(70, 50, 15, 0.5), inset 0 0 0 1px #A57F3D;
}
:root.dark-theme .sw-tile { color: #46340F; }
:root.dark-theme .sw-rtile {
    background: linear-gradient(160deg, #E8D4A8, #CBA96F);
    box-shadow: var(--shadow-sm), inset 0 -3px 0 rgba(70, 50, 15, 0.5), inset 0 0 0 1px #A57F3D;
    color: #46340F;
}
:root.dark-theme .sw-cell.pending { outline-color: var(--sun); }
:root.dark-theme .sw-blank-veil { background: rgba(6, 12, 30, 0.65); }

/* Footer: the sleeping village. */
:root.dark-theme .beach-footer { background: #0C1530; color: var(--ink-soft); }

:root.dark-theme .mule-screen { border-color: var(--line); }

/* dark theme (class-driven; system preference applies it by default via JS) */
/* The daily text card had a hardcoded cream gradient; give it night colors. */
:root.dark-theme .daily-text { background: linear-gradient(160deg, #1B2B5C, var(--card)); }

/* The header becomes the painting itself, under a translucent night wash so
   the brand and nav stay readable. The wave still divides sky from page. */
:root.dark-theme .masthead {
    background-image:
        linear-gradient(180deg, rgba(16, 27, 60, 0.62), rgba(16, 27, 60, 0.5) 55%, rgba(16, 27, 60, 0.72)),
        url('starry-night.jpg');
    background-size: cover;
    background-position: center 28%;
}
.notif-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
    flex-wrap: wrap; padding: 0.55rem 0; border-bottom: 1px dashed var(--line); }
.notif-row:last-of-type { border-bottom: none; }
.notif-toggle { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.notif-times { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-soft); font-size: 0.9rem; }
.notif-times input[type="time"] { font: inherit; padding: 0.3rem 0.45rem; border: 1px solid var(--line);
    border-radius: 8px; background: var(--card); color: var(--ink); }
.mt-md { margin-top: 1rem; }
.nav a { position: relative; }
.nav-badge {
    position: absolute; top: 2px; right: 2px; min-width: 1.15rem; height: 1.15rem;
    padding: 0 0.25rem; border-radius: 999px; background: var(--coral-btn); color: #fff;
    font-size: 0.66rem; font-weight: 800; line-height: 1.15rem; text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* dark theme (class-driven; system preference applies it by default via JS) */
:root.dark-theme .nav-badge { background: var(--sun); color: #14203F; }

/* ---- Theme toggle + wordle archive/stats ---------------------------------- */
.theme-toggle {
    position: absolute; top: 0.8rem; right: 1rem; z-index: 5;
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(14, 59, 71, 0.2);
    background: rgba(255, 255, 255, 0.55); cursor: pointer; font-size: 1.05rem; line-height: 1;
    display: grid; place-items: center; transition: transform 0.15s ease;
}
.theme-toggle:hover { transform: scale(1.08); }
:root.dark-theme .theme-toggle { background: rgba(233, 237, 249, 0.1); border-color: rgba(233, 237, 249, 0.25); }

/* The what's-new bell sits beside the theme toggle. */
.bell-btn {
    position: absolute; top: 0.8rem; right: 3.5rem; z-index: 5;
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(14, 59, 71, 0.2);
    background: rgba(255, 255, 255, 0.55); font-size: 1.05rem; line-height: 1;
    display: grid; place-items: center; transition: transform 0.15s ease; text-decoration: none;
}
.bell-btn:hover { transform: scale(1.08); text-decoration: none; }
.bell-dot {
    position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px;
    border-radius: 999px; background: var(--coral-btn); color: #fff;
    font-size: 0.62rem; font-weight: 800; display: grid; place-items: center; padding: 0 3px;
}
:root.dark-theme .bell-btn { background: rgba(233, 237, 249, 0.1); border-color: rgba(233, 237, 249, 0.25); }

/* What's-new dialog (the bell) */
.updates-dialog {
    border: 1px solid var(--line); border-radius: 18px; padding: 0;
    width: min(480px, calc(100vw - 2rem)); max-height: min(70vh, 620px);
    background: var(--card); color: var(--ink); box-shadow: var(--shadow);
}
.updates-dialog::backdrop { background: rgba(12, 42, 56, 0.45); backdrop-filter: blur(2px); }
.updates-dialog-head {
    position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1.1rem 0.6rem; background: var(--card); border-bottom: 1px solid var(--line);
}
.updates-dialog-head h2 { margin: 0; font-size: 1.1rem; }
.updates-dialog-body { padding: 0.4rem 1.1rem 1.1rem; overflow-y: auto; max-height: calc(min(70vh, 620px) - 3.4rem); }
.updates-dialog .updates-items { gap: 0.35rem; }
.updates-dialog .updates-items li { display: flex; align-items: baseline; gap: 0.55rem; padding: 0.3rem 0; font-size: 0.95rem; }
:root.dark-theme .updates-dialog { background: var(--card); }
:root.dark-theme .updates-dialog::backdrop { background: rgba(4, 10, 26, 0.6); }

/* What's-new page */
.updates-day { font-size: 1.05rem; margin: 1.2rem 0 0.5rem; color: var(--sea-deep); }
:root.dark-theme .updates-day { color: var(--sun); }
.updates-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.updates-items .card { padding: 0.75rem 1rem; display: flex; align-items: baseline; gap: 0.6rem; }
.upd-emoji { flex: none; font-size: 1.15rem; }

/* Above-ground pool stands in for the baptism emoji in rendered views. */
.cat-ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }

.ev-actions { display: inline-flex; gap: 0.7rem; align-items: center; }
.ev-actions form { display: inline; margin: 0; }

.wordle-archive { padding: 1rem 1.2rem; }
.wordle-archive summary { cursor: pointer; font-weight: 700; color: var(--sea-deep); }
.archive-month { font-size: 0.95rem; margin: 0.8rem 0 0.4rem; }
.archive-days { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.archive-day {
    width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 8px;
    font-weight: 700; font-size: 0.85rem; text-decoration: none; color: var(--ink);
    background: var(--sand-2); border: 1px solid var(--line);
}
.archive-day:hover { text-decoration: none; border-color: var(--sea); }
.archive-day.solved { background: var(--sea); border-color: var(--sea); color: #fff; }
.archive-day.failed { background: var(--coral-btn); border-color: var(--coral-btn); color: #fff; }
.archive-day.playing { border-color: var(--sun); border-width: 2px; }
.archive-day.current { outline: 3px solid var(--sun); }
.wordle-stats .you-row td { font-weight: 700; color: var(--sea-deep); }

/* Dark mode: the wordle keyboard kept its daylight styling - white keys with
   moonlight ink made the letters vanish. Keys and result colors now follow the
   same night treatment as the grid tiles, with dark text on the bright states. */
:root.dark-theme .key { background: var(--card); border-color: var(--line); color: var(--ink); }
:root.dark-theme .key.correct { background: var(--sea); border-color: var(--sea); color: #14203F; }
:root.dark-theme .key.present { background: var(--sun); border-color: var(--sun); color: #14203F; }
:root.dark-theme .key.absent { background: #3A4467; border-color: #3A4467; color: #C9D2EC; }

/* ---- Shoreline decor ------------------------------------------------------
   Original SVGs painted as body background layers: they sit behind everything
   by construction, appearing in the open sand around the content column. On
   narrow screens (no spare margin) they step aside entirely. At night the
   umbrellas fold up and a moonlit sailboat rides the Starry Night horizon. */
body {
    background-image:
        url('decor/umbrella.svg'),
        url('decor/blanket.svg'),
        url('decor/sailboat.svg'),
        url('decor/sandcastle.svg'),
        url('decor/sailboard.svg'),
        radial-gradient(120% 90% at 100% -10%, rgba(255, 198, 99, 0.35), rgba(255, 198, 99, 0) 55%),
        radial-gradient(90% 70% at -10% 0%, rgba(169, 219, 207, 0.30), rgba(169, 219, 207, 0) 50%);
    background-repeat: no-repeat;
    background-position:
        left 1.5% bottom 4%,
        right 1.5% bottom 5%,
        right 2% top 24%,
        right 3% bottom 30%,
        left 2.5% top 30%,
        0 0,
        0 0;
    background-size: 180px, 160px, 150px, 140px, 130px, auto, auto;
    background-attachment: fixed;
}

:root.dark-theme body {
    background-image:
        url('decor/sailboat-night.svg'),
        radial-gradient(120% 80% at 88% -12%, rgba(245, 215, 110, 0.16), rgba(245, 215, 110, 0) 55%),
        radial-gradient(70% 45% at 8% 0%, rgba(143, 179, 240, 0.12), rgba(143, 179, 240, 0) 60%),
        radial-gradient(2px 2px at 22% 18%, rgba(245, 215, 110, 0.9), transparent 100%),
        radial-gradient(2px 2px at 67% 9%, rgba(245, 215, 110, 0.7), transparent 100%),
        radial-gradient(2px 2px at 42% 31%, rgba(233, 237, 249, 0.6), transparent 100%),
        radial-gradient(2px 2px at 86% 24%, rgba(233, 237, 249, 0.5), transparent 100%),
        radial-gradient(2px 2px at 12% 42%, rgba(245, 215, 110, 0.5), transparent 100%);
    background-repeat: no-repeat;
    background-position:
        right 3% bottom 8%,
        0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    background-size: 140px, auto, auto, auto, auto, auto, auto, auto;
    background-attachment: fixed;
}

/* Content needs the whole width on small screens: gradients only. */
@media (max-width: 1240px) {
    body {
        background-image:
            radial-gradient(120% 90% at 100% -10%, rgba(255, 198, 99, 0.35), rgba(255, 198, 99, 0) 55%),
            radial-gradient(90% 70% at -10% 0%, rgba(169, 219, 207, 0.30), rgba(169, 219, 207, 0) 50%);
        background-position: 0 0, 0 0;
        background-size: auto, auto;
    }
    :root.dark-theme body {
        background-image:
            radial-gradient(120% 80% at 88% -12%, rgba(245, 215, 110, 0.16), rgba(245, 215, 110, 0) 55%),
            radial-gradient(70% 45% at 8% 0%, rgba(143, 179, 240, 0.12), rgba(143, 179, 240, 0) 60%),
            radial-gradient(2px 2px at 22% 18%, rgba(245, 215, 110, 0.9), transparent 100%),
            radial-gradient(2px 2px at 67% 9%, rgba(245, 215, 110, 0.7), transparent 100%),
            radial-gradient(2px 2px at 42% 31%, rgba(233, 237, 249, 0.6), transparent 100%);
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
        background-size: auto, auto, auto, auto, auto;
    }
}

/* ---- Garage: classic-car vibe --------------------------------------------
   Chrome trim, badge-script titles, stamped license-plate spec chips. */
.gar-title { font-style: italic; letter-spacing: 0.02em; }
.gar-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.gar-head h2 { margin: 0; }
.gar-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 1rem; }
.gar-card {
    display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
    background: var(--card); border-radius: 14px; overflow: hidden;
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.gar-card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow); color: var(--ink); }
.gar-chrome-top {
    height: 7px;
    background: linear-gradient(180deg, #f5f6f8, #b9bec9 45%, #8f97a5 55%, #d8dce3);
}
.gar-cover { width: 100%; height: 170px; object-fit: cover; display: block; }
.gar-cover-empty { display: grid; place-items: center; font-size: 3rem; background: var(--sand-2); }
.gar-card-body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1.1rem 1.1rem; }
.gar-card-title { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 1.15rem; }
.gar-plate {
    align-self: flex-start; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.2rem 0.55rem; border: 2px solid var(--sea-deep); border-radius: 6px; color: var(--sea-deep);
    background: var(--sand);
}
.gar-hero { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    border: 4px solid #cfd4dc; }
.gar-hero img { display: block; width: 100%; max-height: 460px; object-fit: cover; }
.gar-specs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gar-spec {
    display: inline-flex; flex-direction: column; align-items: center; min-width: 86px;
    padding: 0.4rem 0.8rem; border-radius: 8px; border: 2px solid var(--sea-deep);
    background: var(--card); color: var(--sea-deep);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    box-shadow: inset 0 0 0 2px var(--sand);
}
.gar-spec small { font-size: 0.58rem; color: var(--ink-soft); letter-spacing: 0.2em; }
.gar-story p:last-child { margin-bottom: 0; }
.gar-shelf-label { margin: 1.1rem 0 0.5rem; font-style: italic; }
.gar-shelf { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gar-doc {
    display: flex; flex-direction: column; gap: 0.35rem; align-items: center; text-align: center;
    padding: 0.8rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease;
}
.gar-doc:hover { text-decoration: none; transform: translateY(-3px); color: var(--ink); border-color: var(--sea); }
.gar-doc img { width: 100%; max-height: 150px; object-fit: contain; border-radius: 6px; }
.gar-doc-blank { font-size: 2.6rem; }
.gar-doc-title { font-weight: 700; font-size: 0.85rem; line-height: 1.25; }
.gar-photo-actions { display: inline-flex; gap: 0.5rem; }
.gar-photo-actions form { display: inline; }
:root.dark-theme .gar-chrome-top { background: linear-gradient(180deg, #8fa2c8, #3a4a75 45%, #26355c 55%, #5a6c99); }
:root.dark-theme .gar-hero { border-color: #3a4a75; }
:root.dark-theme .gar-plate, :root.dark-theme .gar-spec { border-color: var(--sea); color: var(--sea); box-shadow: inset 0 0 0 2px var(--sand-2); }

/* ---- Boardwalk Putt: the daily 3D mini-golf hole -------------------------- */
.putt-wrap { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: 1.1rem; }
.putt-head { text-align: center; }
.putt-head h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
.putt-note strong { color: var(--sea-deep); }
.putt-help { text-align: center; margin: 0; font-size: 0.82rem; }

.putt-stage {
    position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 62vh;
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    border: 1px solid var(--line); background: #9bdcee;
    touch-action: none; user-select: none; -webkit-user-select: none;
}
.putt-canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.putt-hud {
    position: absolute; top: 0.6rem; left: 0.6rem; right: 0.6rem;
    display: flex; gap: 0.4rem; pointer-events: none; z-index: 2;
}
.putt-pill {
    background: rgba(255, 255, 255, 0.85); color: var(--sea-deep);
    font-family: var(--display); font-weight: 700; font-size: 0.85rem;
    padding: 0.25rem 0.7rem; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.putt-pill.putt-practice { background: rgba(255, 198, 99, 0.9); color: #5a3d00; margin-left: auto; }

.putt-toast {
    position: absolute; top: 3.2rem; left: 50%; transform: translateX(-50%);
    background: rgba(14, 59, 71, 0.85); color: #fff; font-weight: 700;
    padding: 0.4rem 1rem; border-radius: 999px; z-index: 3; pointer-events: none;
    animation: putt-pop 0.25s ease;
}
@keyframes putt-pop { from { transform: translateX(-50%) scale(0.7); opacity: 0; } }

.putt-fin {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(14, 59, 71, 0.35); z-index: 4;
}
/* An explicit display beats the hidden attribute's UA style; restore its meaning
   for every show/hide element that also sets a display. */
.putt-fin[hidden], .putt-toast[hidden], .react-palette[hidden],
.upload-overlay[hidden], .emoji-panel[hidden], .who-tip[hidden] { display: none; }
.putt-fin-card {
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 1.4rem 2rem; text-align: center; display: flex; flex-direction: column; gap: 0.5rem;
    max-width: 85%;
}
.putt-fin-title { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--sea-deep); }
.putt-fin-sub { color: var(--ink-soft); }

.putt-scores { counter-reset: none; }
.putt-pos {
    flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
    border-radius: 50%; background: var(--foam); color: var(--sea-deep);
    font-weight: 800; font-size: 0.8rem;
}
.putt-scores li.you-row .score-name { font-weight: 800; color: var(--sea-deep); }

.putt-archive { padding: 1rem 1.2rem; }
.putt-archive summary { cursor: pointer; font-weight: 700; color: var(--sea-deep); }
.putt-day.under { background: var(--sea); border-color: var(--sea); color: #fff; }
.putt-day.even { background: var(--foam-2); border-color: var(--foam-2); color: var(--sea-deep); }
.putt-day.over { background: var(--coral); border-color: var(--coral); color: #fff; }
.putt-stats .you-row td { font-weight: 700; color: var(--sea-deep); }
.putt-credit { text-align: center; font-size: 0.75rem; margin: 0; }

/* Night at the boardwalk: cards and pills pick up the Starry Night palette. */
:root.dark-theme .putt-stage { background: #101B3C; border-color: rgba(233, 237, 249, 0.18); }
:root.dark-theme .putt-pill { background: rgba(20, 32, 63, 0.85); color: var(--sun); }
:root.dark-theme .putt-pill.putt-practice { background: rgba(245, 215, 110, 0.9); color: #14203F; }
:root.dark-theme .putt-toast { background: rgba(233, 237, 249, 0.9); color: #14203F; }
:root.dark-theme .putt-fin { background: rgba(6, 10, 26, 0.55); }
:root.dark-theme .putt-day.even { color: #14203F; }
:root.dark-theme .putt-pos { color: var(--sun); }
:root.dark-theme .putt-scores li.you-row .score-name,
:root.dark-theme .putt-stats .you-row td,
:root.dark-theme .putt-archive summary,
:root.dark-theme .putt-fin-title,
:root.dark-theme .putt-note strong { color: var(--sun); }

/* ---- Iron Horizons (railroad finance, 1870-1900) --------------------------------- */
.ih-wrap { display: flex; flex-direction: column; gap: 1rem; }
.ih-scenario { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.9rem; margin: 0 0 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ih-scenario label { display: block; cursor: pointer; font-size: 0.92rem; }
.ih-scenario input { margin-right: 0.4rem; }
.ih-subhead { margin: 0.8rem 0 0.4rem; font-size: 1rem; color: var(--sea-deep); }
.ih-ai-pick { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.ih-ai-pick select { padding: 0.25rem 0.5rem; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }

.ih-year-strip { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.ih-year { font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--sea-deep); }
.ih-econ { padding: 0.15rem 0.65rem; border-radius: 999px; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase; }
.ih-econ-0 { background: #b0392b; color: #fff; }
.ih-econ-1 { background: var(--coral); color: #fff; }
.ih-econ-2 { background: var(--foam-2); color: var(--sea-deep); }
.ih-econ-3 { background: var(--sea); color: #fff; }
.ih-econ-4 { background: var(--sun); color: #5a3d00; }
.ih-turn { color: var(--ink-soft); font-size: 0.92rem; }

.ih-map-shell { background: #101b33; border-radius: var(--radius-lg); padding: 0.4rem; box-shadow: var(--shadow); display: flex; justify-content: center; }
.ih-map-shell canvas { max-width: 100%; height: auto; border-radius: calc(var(--radius-lg) - 4px); cursor: crosshair; }

.ih-columns { display: grid; gap: 1rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 900px) { .ih-columns { grid-template-columns: minmax(0, 1fr); } }

.ih-scroll { overflow-x: auto; }
.ih-market table, .ih-ops table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ih-market th, .ih-ops th { text-align: left; color: var(--ink-soft); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0.45rem; border-bottom: 1px solid var(--line); }
.ih-market td, .ih-ops td { padding: 0.32rem 0.45rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ih-market tbody tr { cursor: pointer; }
.ih-market tbody tr:hover { background: var(--foam); }
.ih-market tbody tr.sel { background: var(--foam-2); }
.ih-abbr { font-weight: 800; color: var(--sea-deep); }
.ih-swatch { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; }
.ih-up { color: #1c7c3c; font-weight: 700; font-size: 0.75rem; }
.ih-down { color: #b0392b; font-weight: 700; font-size: 0.75rem; }
.ih-flat { color: var(--ink-soft); font-size: 0.75rem; }
.ih-loss { color: #b0392b; font-weight: 700; }

.ih-ledger { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 0 0 0.6rem; }
.ih-ledger div { display: flex; flex-direction: column; }
.ih-ledger dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.ih-ledger dd { margin: 0; font-weight: 700; }
.ih-holdings { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.2rem; }

.ih-desk h4 { margin: 0.8rem 0 0.3rem; color: var(--sea-deep); }
.ih-actions-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.4rem 0; }
.ih-actions-row label { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.88rem; }
.ih-actions-row input[type="number"], .ih-actions-row input:not([type]), .ih-actions-row select {
    padding: 0.3rem 0.5rem; border-radius: 8px; border: 1px solid var(--line);
    background: var(--card); color: var(--ink); max-width: 11rem;
}
.ih-actions-row input[type="number"] { width: 5.5rem; }
.ih-quote { color: var(--ink-soft); font-size: 0.82rem; }
.ih-pass { margin-left: auto; }
.ih-wreck { border-style: dashed; }
.ih-charter summary { cursor: pointer; font-weight: 700; color: var(--sea-deep); }
.ih-alert { margin: 0; }
.ih-offer { border: 2px solid var(--sun); }

.ih-log ul { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.3rem; }
.ih-log li { border-bottom: 1px dashed var(--line); padding-bottom: 0.3rem; }

.ih-over h2 { margin-top: 0; }
.ih-rankings { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ih-rank-name { font-weight: 800; color: var(--sea-deep); }
.ih-rank-worth { margin-left: 0.5rem; font-weight: 700; }
.ih-rank-epilogue { display: block; color: var(--ink-soft); font-size: 0.88rem; font-style: italic; }

/* Night at the exchange: the Starry Night palette takes the desk. */
:root.dark-theme .ih-map-shell { background: #0a1226; border: 1px solid rgba(233, 237, 249, 0.14); }
:root.dark-theme .ih-market tbody tr:hover { background: rgba(233, 237, 249, 0.06); }
:root.dark-theme .ih-market tbody tr.sel { background: rgba(245, 215, 110, 0.14); }
:root.dark-theme .ih-abbr, :root.dark-theme .ih-year, :root.dark-theme .ih-subhead,
:root.dark-theme .ih-desk h4, :root.dark-theme .ih-charter summary,
:root.dark-theme .ih-rank-name { color: var(--sun); }
:root.dark-theme .ih-econ-2 { color: #14203f; }
:root.dark-theme .ih-econ-4 { color: #14203f; }
:root.dark-theme .ih-up { color: #7ee0a0; }
:root.dark-theme .ih-down, :root.dark-theme .ih-loss { color: #ef8a7a; }
:root.dark-theme .ih-offer { border-color: var(--sun); }

/* ---- Search --------------------------------------------------------------
   One box, results grouped by where they came from. The layout stays flat and
   text-first on purpose: scanning is the whole job here. */
.search-form { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.search-form input[type="search"] {
    flex: 1 1 16rem;
    min-width: 0;
    font-size: 1.05rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.7rem;
    border: 1px solid var(--line, rgba(0,0,0,0.15));
    background: var(--surface, #fff);
    color: inherit;
}

.search-results { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.search-results > li > a {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.8rem 0.95rem;
    border-radius: 0.7rem;
    background: var(--surface, #fff);
    border: 1px solid var(--line, rgba(0,0,0,0.08));
    text-decoration: none;
    color: inherit;
}
.search-results > li > a:hover { border-color: var(--coral, #E4572E); }
.sr-title { font-weight: 700; }
/* Snippets can be long; two lines is enough to judge a hit by. */
.sr-snippet {
    color: var(--ink-soft);
    font-size: 0.92rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sr-meta { color: var(--ink-soft); font-size: 0.82rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ---- On this day ---------------------------------------------------------
   Sits in the side column so resurfaced memories never push today's feed down
   the page. Thumbnail-led, because a photo is what makes someone click. */
.memories .memory-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.memories .memory-list > li > a {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    border-radius: 0.6rem;
    padding: 0.35rem;
}
.memories .memory-list > li > a:hover { background: var(--surface-soft, rgba(0,0,0,0.04)); }
.memory-thumb {
    flex: 0 0 auto;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.5rem;
    object-fit: cover;
}
.memory-thumb-blank {
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    background: var(--surface-soft, rgba(0,0,0,0.06));
}
.memory-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.memory-when { font-size: 0.75rem; font-weight: 700; color: var(--coral, #E4572E); text-transform: uppercase; letter-spacing: 0.02em; }
.memory-title { font-weight: 600; font-size: 0.92rem; }
/* Two lines is enough to recognise a memory; the link goes to the whole thing. */
.memory-snippet {
    color: var(--ink-soft);
    font-size: 0.84rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}