/* "Label on the bottle" (B1, chosen Oct 9 2026): deep burgundy page, cream label cards with a gold inner rule, typewriter
   labels, a serif for names and numbers, wine-red ink for anything that is yours. Loaded last, so it restyles every tab
   without touching the markup. One look in light and dark mode alike (the label is the point). Mockups: web/_b1.html. */
html:root, html:root[data-theme] {
  --wine:#8e1f3a; --cream:#f7efe1; --card:#f7efe1; --ink:#2a1a1d; --muted:#7d6a62; --line:#c9b7a3; --gold:#c9a96b;
  --page:#5e1427; --deep:#3c0b18; --onpage:#fbeee9; --onpage-muted:#e9b9c4; --good:#2f7a4a;
  --serif:'Playfair Display', Georgia, serif; --num:Fraunces, Georgia, serif; --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) { html:root { --wine:#8e1f3a; --cream:#f7efe1; --card:#f7efe1; --ink:#2a1a1d; --muted:#7d6a62; --line:#c9b7a3; } }

body { background:var(--page) radial-gradient(120% 50% at 50% 0%, #74192f 0%, var(--page) 60%) fixed; color:var(--onpage); }
main { color:var(--onpage); }

/* ---------- page-level type (outside cards) ---------- */
h1, .hs h1, .lr h1, .lr .hero h1 { font:700 30px/1.05 var(--serif); color:var(--onpage); text-align:center; }
main > h1::before, .lr .hero h1::before { content:'FANTASY · VIVINO'; display:block; font:500 10px var(--mono); letter-spacing:.24em; color:var(--onpage-muted); margin-bottom:6px; }
h2, .lr h2 { font-family:var(--serif); color:var(--onpage); }
.sub, .hs .kicker, .lr .kicker, .step, label.t, .hs .sl, .lr .tag { font-family:var(--mono) !important; letter-spacing:.12em; text-transform:uppercase; color:var(--onpage-muted); }
.sub { text-align:center; font-size:11px; }
.hs .kicker { text-align:center; font-size:10px; }
.hs .lede, .lr .lede { color:var(--onpage); text-align:center; font:600 14px/1.45 var(--num); opacity:.92; }
.muted, .hs .muted { color:var(--onpage-muted); }
button.link { color:var(--onpage-muted); font-family:var(--mono); font-size:12px; text-decoration:underline; }

/* ---------- the label card ---------- */
.card, .hs .card, .lr .card, details.card, .score, .hrow, .lr .qc {
  background:var(--card); color:var(--ink); border:0; border-radius:6px; box-shadow:0 8px 22px rgba(0,0,0,.35);
  outline:1px solid var(--gold); outline-offset:-6px; }
.card .muted, .card .small, .card .sl, .card label.t, .card .step, .score .small, .card .kindnote, .card .pct, .card .note, .card .cap { color:var(--muted); }
.card .sl, .card label.t, .card .step { font-family:var(--mono) !important; }
.card button.link, .score button.link { color:var(--wine); }
.card h2, .card h3 { color:var(--ink); font-family:var(--serif); }

/* ---------- controls ---------- */
button { font:700 13px var(--mono); letter-spacing:.06em; text-transform:uppercase; border-radius:4px; background:var(--wine); color:var(--cream); }
button.ghost { background:transparent; color:var(--onpage); border:1.5px solid var(--onpage-muted); }
.card button.ghost, .hs .card button.ghost { color:var(--wine); border-color:var(--wine); }
main > button:not(.link):not(.ghost), .hs > button:not(.link):not(.ghost):not(.danger) { background:var(--cream); color:var(--wine); box-shadow:0 4px 0 var(--deep); }
.hs .danger { color:var(--onpage-muted); border-color:rgba(233,185,196,.4); }
input[type=text], input[type=number], select, .hs input[type=text], .hs input[type=number], .hs select {
  background:transparent; color:var(--ink); border:0; border-bottom:1.5px solid var(--ink); border-radius:0; font:500 15px var(--mono); padding:10px 2px; }
main > input[type=text] { color:var(--onpage); border-color:var(--onpage-muted); }

/* names, games and chips: rows on the label */
.names .nm, .nm { background:var(--card); color:var(--ink); border:0; border-radius:4px; font:700 16px var(--num); box-shadow:0 3px 10px rgba(0,0,0,.25); outline:1px solid var(--gold); outline-offset:-4px; }
.nm.other { background:transparent; color:var(--onpage); box-shadow:none; outline:1.5px dashed var(--onpage-muted); outline-offset:0; font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.nm .j { color:var(--good); font-family:var(--mono); }
.card .nm { box-shadow:none; outline:0; border-bottom:1px dashed var(--line); border-radius:0; background:transparent; }
.hs .chip, .chip { background:transparent; color:var(--ink); border:1.5px solid var(--ink); border-radius:3px; font:700 12px var(--mono); }
.hs .chip.on, .chip.on { background:var(--wine); border-color:var(--wine); color:var(--cream); }
.pill { background:transparent; color:var(--onpage); border:1.5px solid var(--onpage-muted); border-radius:3px; font:700 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.card .pill { color:var(--wine); border-color:var(--wine); }

/* ---------- the board ---------- */
.kindsw { gap:0; border:1.5px solid var(--ink); } .kindsw button { background:transparent; color:var(--ink); border:0; border-radius:0; }
.kindsw button.on { background:var(--wine); color:var(--cream); }
.kindnote { font:500 11px var(--mono); }
.ends { font:italic 700 18px var(--serif); color:var(--ink); } .val { font:800 20px var(--num); color:var(--wine); }
.band { font:700 12px var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink); }
.feel { font:italic 600 14px var(--num); color:var(--muted); }
.tip { background:#efe0bd; color:var(--ink); border-radius:2px; }
/* the paper card's 1-20 bar: a ruled box, filled in wine up to your mark */
input[type=range] { --trk:transparent; height:30px; }
input[type=range]::-webkit-slider-runnable-track { height:16px; border-radius:0; border:1.5px solid var(--ink);
  background:linear-gradient(to right, color-mix(in srgb, var(--wine) 24%, transparent) calc(12px + (100% - 24px) * var(--f)), transparent 0),
             repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%); }
input[type=range]::-webkit-slider-thumb { width:9px; height:30px; margin-top:-8.5px; border-radius:2px; background:var(--wine); border:0; box-shadow:0 2px 4px rgba(0,0,0,.3); }
input[type=range]::-moz-range-track { height:14px; border-radius:0; border:1.5px solid var(--ink); background:repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%); }
input[type=range]::-moz-range-progress { height:14px; border-radius:0; background:color-mix(in srgb, var(--wine) 24%, transparent); }
input[type=range]::-moz-range-thumb { width:8px; height:28px; border-radius:2px; background:var(--wine); border:0; }
.ticks b { font-family:var(--mono); color:var(--muted); } .ticks b.m { color:var(--ink); } .ticks i { background:var(--muted); }
.board { padding:16px 14px 6px; }
.stars svg { fill:#d9cbb6; } .stars .fill svg { fill:var(--wine); }
.sbtn { background:transparent; color:var(--wine); border:1.5px solid var(--wine); }
.sval { font:800 26px var(--num); color:var(--wine); }
/* the lock slider: a cream label strip on the page */
.slide { background:var(--card); border:0; border-radius:4px; box-shadow:0 4px 0 var(--deep); }
.slide .knob { background:var(--wine); border-radius:3px; } .slide .lbl { color:var(--wine); font-family:var(--mono); }
.slide.done { background:var(--card); } .slide.done .knob { background:var(--good); } .slide.done .lbl { color:var(--good); }
main > .muted, #status { color:var(--onpage-muted); }
.tick { color:#8fe0b0; }

/* ---------- scoreboard and code ---------- */
.score { margin:8px 0; } .score.first { background:var(--card); box-shadow:0 8px 22px rgba(0,0,0,.35), inset 4px 0 0 var(--wine); }
.score .big, .hs .score .big { font:800 26px var(--num); color:var(--wine); } .score b { font-family:var(--num); }
.code, .hs .code { font:700 42px var(--serif); color:var(--wine); }
.hs .link { font-family:var(--mono); color:var(--muted); }
.hs .stripbar { font-family:var(--mono); color:var(--onpage-muted); } .hs .stripbar b { color:var(--onpage); }
.hs .pl { border-top:1px dashed var(--line); font:700 15px var(--num); } .hs .pl .st { font-family:var(--mono); } .hs .pl .st.ok { color:var(--good); }
.hs .msg.ok { color:var(--good); } .hs .msg.err { color:#b3261e; }
.hs > .msg.ok, main > .msg.ok { color:#8fe0b0; }

/* ---------- host: reading the wine ---------- */
.hs .hit { background:transparent; border:0; border-bottom:1px dashed var(--line); border-radius:0; color:var(--ink); font:600 15px var(--num); }
.hs .hit .hm, .hs .found .hm { font-family:var(--mono); color:var(--muted); }
.hs .found { background:transparent; border:0; border-left:3px solid var(--wine); border-radius:0; font-family:var(--num); }
.hs .played .pb { background:#efe0bd; color:#6b4f12; border-radius:0; font-family:var(--mono); }
.hs .played .pb.new { background:#dcebd9; color:var(--good); }
.hs .shotbtn { border:1.5px dashed var(--wine); border-radius:4px; color:var(--wine); font-family:var(--mono); }
.hs .listnote { background:transparent; border:0; border-top:2px solid var(--wine); border-radius:0; padding:12px 0 0; }
.hs .wl-hero b { font-family:var(--num); color:var(--wine); } .hs .wl-hero span, .hs .wl-legend, .hs .wl-c { font-family:var(--mono); }
.hs .wl-c i { background:var(--wine); } .hs .wl-c div { background:#e8dccb; }
.hs .how { color:var(--ink); font-family:var(--num); }

/* ---------- history ---------- */
.htabs button { background:transparent; color:var(--onpage-muted); border:1px solid rgba(233,185,196,.4); border-radius:3px; font-family:var(--mono); }
.htabs button.on { background:var(--card); color:var(--wine); border-color:var(--card); }
.alltime th, .alltime td, .st-m, .st-h, .st-tiles span { font-family:var(--mono); }
.alltime td:nth-child(2) { font-family:var(--num); } .alltime tr.me td { background:#f0dfd9; }
.st-tiles div { background:transparent; border:1.5px solid var(--ink); border-radius:0; } .st-tiles b, .st-b .big { font-family:var(--num); color:var(--wine); }
.st-bar { background:#e8dccb; border-radius:0; } .st-bar i { border-radius:0; }
.hist-badge { font-family:var(--mono); border-radius:0; }

/* ---------- traits ---------- */
.lr .seg { background:var(--page); border-color:rgba(233,185,196,.3); }
.lr .seg button { background:transparent; color:var(--onpage-muted); border-color:rgba(233,185,196,.4); font-family:var(--mono); }
.lr .seg button.on { background:var(--card); color:var(--wine); }
.lr .fold { border-color:rgba(233,185,196,.3); } .lr .fold summary h2 { color:var(--onpage); } .lr .fold summary .cap { color:var(--onpage-muted); }
.lr .fold[open] { color:var(--onpage); }
.lr .note, .lr .cap { color:var(--onpage-muted); }

/* ---------- the reveal ---------- */
.rv { background:var(--page) radial-gradient(120% 50% at 50% 0%, #74192f 0%, var(--page) 60%); color:var(--onpage); }
.rv-k, .rv-sub, .rv-hint, .rv-pts .m { color:var(--onpage-muted); font-family:var(--mono); }
.rv-h, .rv-place { font-family:var(--serif); color:var(--onpage); }
.rv-ends { font-family:var(--serif); color:var(--onpage); }
.rv-line { background:var(--card); border-radius:0; height:14px; top:41px; }
.rv-tk, .rv-dots i { background:var(--onpage-muted); } .rv-tn { color:var(--onpage-muted); font-family:var(--mono); }
.rv-ans { --c:var(--cream); } .rv-you { --c:#ff8aa6; } .rv-gap { background:#ff8aa6; }
.rv-mk span { color:var(--onpage); font-family:var(--mono); }
.rv-pts .n, .rv-big { font-family:var(--num); color:var(--onpage); } .rv-pts .n small, .rv-big small { color:var(--onpage-muted); }
.rv-pts .t { border-radius:0; font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; border:2px solid currentColor; background:transparent !important; }
.rv-pts .t.dead { color:#8fe0b0; } .rv-pts .t.close { color:#f2d27a; } .rv-pts .t.miss { color:var(--onpage-muted); }
.rv-skip { background:var(--card); color:var(--wine); }

/* ---------- bottom nav ---------- */
#nav { background:var(--deep); border-top:0; }
#nav button { color:var(--onpage-muted); font-family:var(--mono); letter-spacing:.08em; }
#nav button.on { color:#fff; box-shadow:inset 0 3px 0 var(--gold); }

/* traits: four compact cards in tasting order */
.lr .card.qt { padding:11px 13px 10px; margin:0 0 9px; }
.qth { display:flex; align-items:center; gap:8px; } .qth b { display:grid; place-items:center; width:20px; height:20px; background:var(--wine); color:var(--cream); font:700 11px var(--mono); border-radius:2px; flex:none; }
.qth span { font:800 17px var(--num); flex:1; } .qth i { font:italic 600 13px var(--num); color:var(--wine); }
.qtf { font:600 14px/1.35 var(--num); margin:4px 0 6px; }
.qte { display:flex; justify-content:space-between; font:700 10.5px var(--mono); letter-spacing:.05em; text-transform:uppercase; } .qte.m { font-weight:500; text-transform:none; letter-spacing:0; color:var(--muted); margin-top:2px; }
.qtb { position:relative; height:10px; border:1.5px solid var(--ink); margin-top:2px; background:repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%); }
.qtb u { position:absolute; top:-5px; bottom:-5px; width:5px; margin-left:-2px; background:var(--wine); border-radius:1px; }
.qtc { font:500 10.5px var(--mono); color:var(--wine); margin-top:4px; }
.lr .more { text-align:center; font:700 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--onpage-muted); margin:6px 0 4px; }
.lr .hero { margin-bottom:12px; }

.listline { color:var(--onpage-muted); font-family:var(--mono); } .listline b { color:var(--onpage); }
.bottle span { font-family:var(--mono); color:var(--onpage-muted); } .bottle b { font-family:var(--serif); color:var(--onpage); font-size:22px; } .bottle small { font-family:var(--mono); color:var(--onpage-muted); font-size:10.5px; }
.hs .howlink { font-family:var(--mono); color:var(--onpage-muted); text-decoration:underline; text-underline-offset:3px; }
.chip.admin { border-style:dashed; } .adminbar { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:10px; font:500 11px var(--mono); color:var(--muted); }
details.card.is-hidden { opacity:.55; }
.hs > .chip.admin { display:block; margin:10px auto 0; color:var(--onpage-muted); border-color:var(--onpage-muted); background:transparent; } .hs > .chip.admin.on { color:#f2d27a; border-color:#f2d27a; }

.hs .pinrow { display:flex; gap:8px; margin:14px auto 0; max-width:260px; } .hs .pinrow input { color:var(--onpage); border-color:var(--onpage-muted); text-align:center; } .hs .pinrow button { width:auto; padding:0 16px; }