/* Secession Noir — see DESIGN.md for the rules behind these tokens. */
@font-face { font-family: "Federant"; src: url("fonts/Federant.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Marcellus"; src: url("fonts/Marcellus.woff2") format("woff2"); font-display: swap; }

/* ---------- tokens ---------- */
:root, [data-theme="noir"] {
  --bg: #0B0908; --surface: #15100E; --surface-2: #201814; --surface-3: #2A1F1A;
  --ink: #F0E4CC; --ink-soft: #B09C7E; --given: #F4EDDF; --entry: #E0AE48; --entry-hi: #F4CB6A; --entry-glow: rgba(224, 174, 72, .35); --note: #A88C5E;
  --gold: #C89B3C; --gold-hi: #E8C46A;
  --line: rgba(200, 155, 60, .2); --line-strong: #C89B3C;
  --accent: #8E1B1F; --accent-hi: #B8282C; --accent-deep: #5E1014; --accent-ink: #F7EDE0; --accent-soft: rgba(142, 27, 31, .22);
  --sel: rgba(142, 27, 31, .7); --peer: rgba(142, 27, 31, .14); --same: rgba(200, 155, 60, .2); --focus: rgba(184, 40, 44, .26);
  --conflict: #FF7A7A; --conflict-bg: rgba(255, 90, 90, .16); --good: #9BC77E;
  --shadow: 0 1px 0 rgba(200, 155, 60, .08), 0 12px 30px rgba(0, 0, 0, .45);
  --backdrop: rgba(5, 3, 4, .66);
  --lead: #050404; --board-bg: #120D0B; --pane: rgba(142, 27, 31, .13); --glass: rgba(255, 240, 210, .035);
}
[data-theme="parchment"] {
  --bg: #F2E8D5; --surface: #FBF6EC; --surface-2: #EADDC4; --surface-3: #E2D2B4;
  --ink: #1C1314; --ink-soft: #6E5B4C; --given: #1C1314; --entry: #9A6410; --entry-hi: #7A4A06; --entry-glow: transparent; --note: #8C7452;
  --gold: #9C7A3C; --gold-hi: #B8924A;
  --line: rgba(120, 90, 40, .25); --line-strong: #8C6A2E;
  --accent: #A10E28; --accent-hi: #C4203A; --accent-ink: #FBF3E6; --accent-soft: rgba(161, 14, 40, .12);
  --sel: rgba(161, 14, 40, .3); --peer: rgba(161, 14, 40, .06); --same: rgba(140, 106, 46, .17); --focus: rgba(161, 14, 40, .14);
  --conflict: #B3122E; --conflict-bg: rgba(179, 18, 46, .12); --good: #4E7D3F;
  --shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 10px 26px rgba(80, 50, 20, .12);
  --backdrop: rgba(40, 25, 15, .4);
  --accent-deep: #6E1218; --title-ink: #8E1B1F; --lead: #3B2A1E; --board-bg: #FBF6EC; --pane: rgba(161, 14, 40, .06); --glass: rgba(255, 255, 255, .25);
}
:root {
  --f-display: "Federant", "Marcellus", Georgia, serif;
  --f-ui: "Marcellus", Georgia, "Times New Roman", serif;
  --radius: 14px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body {
  font-family: var(--f-ui); font-size: 16px;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none; overscroll-behavior: none; touch-action: manipulation;
  transition: background-color .3s ease;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
input { font: inherit; -webkit-user-select: text; user-select: text; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }
#app { height: 100%; }
.screen { height: 100%; }
button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

.primary {
  display: block; width: 100%; padding: 14px 18px; border-radius: 12px;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px rgba(230, 200, 135, .55), inset 0 0 0 4px var(--accent), inset 0 0 0 5px rgba(230, 200, 135, .3);
  font-family: var(--f-ui); font-size: 16px; letter-spacing: .1em; text-transform: uppercase;
  transition: transform .12s ease, filter .12s ease;
}
.primary:active { transform: scale(.97); filter: brightness(1.1); }
.ghost { padding: 10px 12px; border-radius: 10px; color: var(--ink-soft); font-size: 15px; letter-spacing: .04em; }
.ghost:active { background: var(--surface-2); }

/* ornaments */
.divider { display: block; width: min(240px, 70%); height: 24px; margin: 4px auto; color: var(--gold); stroke-width: 1.4; }
.corner { position: absolute; width: 40px; height: 40px; color: var(--gold); stroke-width: 1.5; pointer-events: none; }
.corner.tl { top: -9px; left: -9px; }
.corner.tr { top: -9px; right: -9px; transform: scaleX(-1); }
.corner.bl { bottom: -9px; left: -9px; transform: scaleY(-1); }
.corner.br { bottom: -9px; right: -9px; transform: scale(-1, -1); }

/* ---------- home ---------- */
#home { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.home-inner {
  max-width: 480px; margin: 0 auto; min-height: 100%;
  padding: calc(env(safe-area-inset-top) + 14px) 18px calc(env(safe-area-inset-bottom) + 18px);
  display: flex; flex-direction: column; gap: 11px;
}
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 2px; }
.arch { position: relative; width: min(240px, 64vw); aspect-ratio: 300 / 330; }
.arch-art { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--gold); stroke-width: 1.6; overflow: visible; }
.hero-fred { position: absolute; left: 13%; width: 74%; bottom: 7%; }
.greeting { margin: 12px 0 0; color: var(--gold); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.title { margin: 2px 0 0; font-family: var(--f-display); font-weight: 400; font-size: 46px; line-height: 1.05; color: var(--ink); }
.hero-line { margin: 6px 0 0; color: var(--ink-soft); font-size: 15px; font-style: italic; min-height: 1.2em; max-width: 30ch; }
.hero-line.special { color: var(--ink); font-style: normal; }

.card {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; row-gap: 3px;
  width: 100%; text-align: left; padding: 15px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .12s ease, border-color .2s ease;
}
.card:active { transform: scale(.97); border-color: var(--gold); }
.card-title { grid-column: 1; font-family: var(--f-display); font-size: 21px; line-height: 1.15; }
.card-sub { grid-column: 1; font-size: 14px; color: var(--ink-soft); letter-spacing: .02em; }
.diff-list { display: flex; flex-direction: column; gap: 9px; }
.poppies { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 1px; }
.poppies svg { width: 20px; height: 20px; }
.poppies svg.off { opacity: .2; filter: grayscale(1); }
.diff.insane {
  background: radial-gradient(120% 140% at 100% 0%, rgba(179, 18, 46, .55), transparent 60%), var(--surface);
  border-color: rgba(215, 38, 61, .5);
}
.diff.insane .card-title { color: var(--gold-hi); }

.continue { background: var(--accent); border-color: rgba(230, 200, 135, .5); color: var(--accent-ink); }
.continue .card-sub { color: inherit; opacity: .85; }
.progress { grid-column: 1 / span 2; margin-top: 10px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--gold-hi); }

.home-foot { margin-top: auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; }
.home-foot .ghost { position: relative; }
.dot { position: absolute; top: 7px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 2px var(--bg); }

/* ---------- game ---------- */
:root {
  --chrome: 318px;
  --board: min(calc(100vw - 44px), calc(100vh - var(--chrome) - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 720px);
}
@supports (height: 100dvh) {
  :root { --board: min(calc(100vw - 44px), calc(100dvh - var(--chrome) - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 720px); }
}
#game {
  display: flex; flex-direction: column; align-items: center; overflow: hidden;
  padding: calc(env(safe-area-inset-top) + 2px) 12px calc(env(safe-area-inset-bottom) + 10px);
}
.game-head { width: calc(var(--board) + 20px); display: flex; align-items: center; gap: 6px; height: 48px; flex: none; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--gold); }
.icon-btn:active { background: var(--surface-2); }
.game-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 21px; }
.game-title span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { font-family: var(--f-ui); font-size: 10px; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--gold); color: var(--gold); text-transform: uppercase; letter-spacing: .1em; }
.timer { display: flex; align-items: center; gap: 4px; padding: 7px 9px; border-radius: 10px; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 15px; }
.timer svg { width: 14px; height: 14px; color: var(--gold); }
.timer:active { background: var(--surface-2); }
.timer.off span { display: none; }

.game-main { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }

.board-wrap { position: relative; width: calc(var(--board) + 20px); height: calc(var(--board) + 20px); padding: 10px; flex: none; }
.board-wrap::before {
  content: ""; position: absolute; inset: 3px; border: 1px solid var(--line-strong); border-radius: 18px; opacity: .55; pointer-events: none;
}
.board {
  position: relative; width: 100%; height: 100%;
  display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow); transition: filter .25s ease;
}
.board.paused { filter: blur(10px); }
.cell {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: calc(var(--board) * .064); font-variant-numeric: tabular-nums lining-nums;
  transition: background-color .12s ease;
}
.cell.c8 { border-right: 0; }
.cell.r8 { border-bottom: 0; }
.cell.br { border-right: 1.5px solid var(--line-strong); }
.cell.bb { border-bottom: 1.5px solid var(--line-strong); }
.cell.peer { background: var(--peer); }
.cell.focus { background: var(--focus); }
.cell.same { background: var(--same); }
.cell.sel { background: var(--sel); }
.cell.conflict { background: var(--conflict-bg); }
.cell.sel.conflict { background: var(--sel); }
.val { line-height: 1; }
.cell.given .val { color: var(--given); }
.cell.entry .val { color: var(--entry); text-shadow: 0 0 10px var(--entry-glow); }
.cell.sel.entry .val { color: var(--entry-hi); }
.cell.conflict .val, .cell.mistake .val { color: var(--conflict); }
.cell.pop .val { animation: pop .18s ease-out; }
@keyframes pop { from { transform: scale(.6); opacity: .3; } to { transform: scale(1); opacity: 1; } }

.notes {
  position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  font-size: calc(var(--board) * .03); color: var(--note); line-height: 1;
}
.notes span { display: flex; align-items: center; justify-content: center; opacity: 0; }
.notes span.on { opacity: 1; }
.notes span.match { color: var(--accent-hi); }
[data-theme="noir"] .notes span.match { color: var(--gold-hi); text-shadow: 0 0 6px rgba(230, 200, 135, .5); }
.board.notes-row .notes { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 0 2px; padding-top: 1px; font-size: calc(var(--board) * .026); }
.board.notes-row .notes span:not(.on) { display: none; }

.pause-cover {
  position: absolute; inset: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border-radius: 10px; background: color-mix(in srgb, var(--bg) 60%, transparent);
}
.pause-cover p { margin: 0; font-family: var(--f-display); font-size: 30px; }
.pause-cover .primary { width: auto; padding: 12px 28px; }

/* Fred and his speech bubble */
.fred-bar { width: calc(var(--board) + 20px); display: flex; align-items: center; gap: 6px; height: 64px; flex: none; }
.bar-fred { width: 70px; flex: none; align-self: flex-end; margin-bottom: -4px; }
.bubble-slot { flex: 1; min-width: 0; display: flex; align-items: center; }
.bubble {
  position: relative; width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 8px 13px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--gold); box-shadow: var(--shadow); animation: rise .22s ease-out;
}
.bubble::before {
  content: ""; position: absolute; left: -7px; bottom: 14px; width: 12px; height: 12px;
  background: var(--surface); border-left: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(45deg);
}
.bubble b { font-weight: 400; font-size: 15px; line-height: 1.25; color: var(--ink); }
.bubble small { font-size: 13px; line-height: 1.25; color: var(--ink-soft); }
.bubble.is-good { border-color: var(--good); }
.bubble.is-good::before { border-color: var(--good); }
.bubble.is-bad b { color: var(--gold-hi); }
@keyframes rise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

.tools { width: var(--board); display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; flex: none; }
.tool {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 4px; border-radius: 12px;
  color: var(--gold); font-size: 12px; letter-spacing: .06em;
}
.tool span { color: var(--ink-soft); }
.tool:active { background: var(--surface-2); }
.tool svg { width: 24px; height: 24px; }
.tool .badge {
  position: absolute; top: 1px; right: calc(50% - 27px); font-size: 8.5px; font-weight: 400; letter-spacing: .06em;
  padding: 2px 4px; border-radius: 5px; border: 1px solid var(--line-strong); color: var(--ink-soft); background: var(--bg);
}
.tool.on { color: var(--accent-hi); }
.tool.on span { color: var(--ink); }
.tool.on .badge { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tool:disabled { opacity: .35; }

.pad { width: var(--board); display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; flex: none; }
.key {
  position: relative; height: 60px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: transform .1s ease, opacity .2s ease, border-color .2s ease;
}
.key:active { transform: scale(.93); border-color: var(--gold); }
.key .k-digit { font-size: 27px; line-height: 1; color: var(--entry); }
.key .k-left { font-size: 10px; color: var(--ink-soft); letter-spacing: .04em; }
.key.notes-mode .k-digit { font-size: 21px; color: var(--note); }
.key.done { background: transparent; border-style: dashed; }
.key.done .k-digit { color: var(--ink-soft); opacity: .4; }
.key.done .k-left { color: var(--accent-hi); font-size: 13px; }
.key.pulse { animation: pulse 1s ease-in-out 3; }
@keyframes pulse { 50% { box-shadow: 0 0 0 2px var(--accent-hi), 0 0 14px rgba(215, 38, 61, .6); } }

@media (min-width: 700px) {
  :root { --chrome: 350px; }
  .key { height: 72px; }
  .key .k-digit { font-size: 32px; }
  .tool { font-size: 13px; }
  .bar-fred { width: 84px; }
  .fred-bar { height: 76px; }
}

/* ---------- sheets ---------- */
.sheet { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.sheet-backdrop { position: absolute; inset: 0; background: var(--backdrop); opacity: 0; transition: opacity .25s ease; }
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 520px; max-height: 88%; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 24px 24px 0 0;
  padding: 8px 20px calc(env(safe-area-inset-bottom) + 20px);
  transform: translateY(105%); transition: transform .3s cubic-bezier(.2, .9, .3, 1);
}
.sheet.open { pointer-events: auto; }
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet.open .sheet-panel { transform: none; }
.sheet-grip { position: relative; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); opacity: .5; margin: 4px auto 12px; }
.sheet-grip::after { content: ""; position: absolute; left: -60px; right: -60px; top: -14px; bottom: -14px; } /* bigger drag target */
.sheet h2 { margin: 4px 0 14px; font-family: var(--f-display); font-weight: 400; font-size: 28px; }
.sheet h3 { margin: 18px 0 8px; font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); }
.sheet p { color: var(--ink-soft); line-height: 1.5; margin: 0 0 16px; }
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 16px;
}
.row:last-child { border-bottom: 0; }
button.row:active { background: var(--surface-2); }
.row .muted { color: var(--ink-soft); font-size: 14px; }
.row input[type="text"] { border: 0; background: none; color: var(--ink); text-align: right; outline: none; width: 55%; }
.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.switch span { position: absolute; inset: 0; border-radius: 15px; background: var(--surface-3); border: 1px solid var(--line); transition: background .2s ease; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); transition: transform .2s ease; }
.switch input:checked + span { background: var(--accent); border-color: var(--accent-hi); }
.switch input:checked + span::after { transform: translateX(20px); background: var(--gold-hi); }
.seg { display: flex; gap: 3px; background: var(--surface-3); padding: 3px; border-radius: 10px; }
.seg button { padding: 6px 11px; border-radius: 8px; font-size: 14px; color: var(--ink-soft); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.swatch {
  border-radius: 14px; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  font-size: 14px; border: 1.5px solid var(--line);
}
.swatch.on { border-color: var(--gold-hi); box-shadow: 0 0 0 2px var(--accent); }
.swatch .chips { display: flex; gap: 4px; }
.swatch .chips i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.sheet-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.stat .s-name { font-family: var(--f-display); font-size: 17px; margin-bottom: 8px; }
.stat .s-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-soft); padding: 2px 0; }
.stat .s-line b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }
.streak { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.streak .big { font-family: var(--f-display); font-size: 40px; color: var(--accent-hi); line-height: 1; }

/* wardrobe */
.wardrobe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.outfit {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 10px;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); font-size: 13px; text-align: center;
}
.outfit .o-art { width: 100%; }
.outfit.on { border-color: var(--gold-hi); box-shadow: 0 0 0 2px var(--accent); }
.outfit.locked .o-art { filter: brightness(0) invert(.75) sepia(.7) opacity(.3); }
.outfit.locked { color: var(--ink-soft); }
.outfit .o-req { font-size: 11px; color: var(--ink-soft); line-height: 1.3; }
.outfit .o-lock { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; color: var(--gold); }

/* mascot picker (shows once there is more than one mascot) */
.mascot-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 4px; }
.pick {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); font-size: 14px; text-align: center;
}
.pick .o-art { width: 100%; }
.pick.on { border-color: var(--gold-hi); box-shadow: 0 0 0 2px var(--accent); }
.pick.locked .o-art { filter: brightness(0) invert(.75) sepia(.7) opacity(.3); }
.pick.locked { color: var(--ink-soft); }
.pick .o-req { font-size: 11px; color: var(--ink-soft); line-height: 1.3; }
.pick .o-lock { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; color: var(--gold); }

/* letters */
.letter-row { display: flex; align-items: center; gap: 12px; }
.letter-row svg { color: var(--gold); flex: none; }
.letter-row.sealed svg { color: var(--accent-hi); }
.letter-row.locked { opacity: .5; }
.letter {
  position: relative; margin: 26px 4px 4px; padding: 34px 22px 24px; border-radius: 6px;
  background: #F4EAD6; color: #2A1A16; box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
}
.letter::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(156, 122, 60, .55); border-radius: 3px; pointer-events: none; }
.letter h4 { margin: 0 0 12px; font-family: var(--f-display); font-weight: 400; font-size: 24px; color: #8A1023; }
.letter p { color: #2A1A16; font-size: 17px; line-height: 1.6; white-space: pre-line; margin: 0; }
.letter .sig { margin-top: 16px; text-align: right; font-family: var(--f-display); font-size: 20px; color: #8A1023; }
.seal {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #D7263D, #8A1023 70%); box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  display: grid; place-items: center; color: #F1D9A8; font-family: var(--f-display); font-size: 20px;
}

/* ---------- loading / win ---------- */
.loading, .win {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.loading-fred { width: 150px; }
.loading p { margin: 0; color: var(--ink-soft); font-style: italic; }
.framed { position: relative; }
.win-card {
  width: min(360px, calc(100vw - 44px)); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px;
  padding: 18px 22px 18px; box-shadow: var(--shadow); text-align: center; animation: rise .35s ease-out;
}
.win-fred { width: 170px; margin: 0 auto -4px; }
.win-says {
  position: relative; display: inline-block; max-width: 92%; margin: 4px auto 8px; padding: 8px 14px; border-radius: 14px;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--gold-hi);
  font-family: var(--f-display); font-size: 19px; line-height: 1.2; animation: rise .35s ease-out;
}
.win-says::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px;
  background: var(--accent); border-right: 1px solid var(--gold-hi); border-bottom: 1px solid var(--gold-hi); transform: rotate(45deg);
}
.letter .letter-extra { margin-top: 14px; font-size: 14px; font-style: italic; color: #6B4A3A; }
.win h2 { margin: 2px 0 4px; font-family: var(--f-display); font-weight: 400; font-size: 36px; color: var(--gold-hi); }
.win-note { margin: 0 0 14px; color: var(--ink-soft); font-size: 16px; line-height: 1.4; font-style: italic; }
.win-stats { display: flex; justify-content: center; gap: 22px; margin-bottom: 14px; }
.win-stats div { display: flex; flex-direction: column; gap: 2px; }
.win-stats b { font-weight: 400; font-size: 22px; font-variant-numeric: tabular-nums; }
.win-stats small { color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.win-unlocks:empty { display: none; }
.win-unlocks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.unlock { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px dashed var(--gold); text-align: left; font-size: 14px; width: 100%; }
.unlock svg { color: var(--accent-hi); flex: none; }
button.unlock:active { background: var(--surface-2); }
.win .ghost { margin-top: 6px; width: 100%; }

#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* sync */
.sync-code {
  margin: 4px 0 8px; padding: 14px; border-radius: var(--radius); text-align: center;
  background: var(--surface); border: 1px dashed var(--gold); color: var(--gold-hi);
  font-size: 20px; letter-spacing: .06em; word-break: break-all;
  -webkit-user-select: all; user-select: all;
}
.sync-status { text-align: center; font-size: 14px; }
.sync-err { min-height: 1.3em; margin: 8px 0 0; font-size: 14px; color: var(--accent-hi); }

/* ---------- Secession layer ----------
   Art Nouveau rules from .claude/skills/art-nouveau-ui/SKILL.md: Vienna Secession palette,
   Mucha halo and framed title, whiplash stems, leaded-glass board. See DESIGN.md. */
:root {
  --sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 96'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath d='M8 94C4 74 14 60 10 44 7 32 2 22 10 12 16 5 26 8 24 16 22 22 15 20 16 15' stroke-width='2.2'/%3E%3Cpath d='M8 94C26 92 40 84 52 88 62 91 70 86 68 80 66 75 60 77 61 81' stroke-width='2'/%3E%3Cpath d='M10 44C18 40 22 32 20 26' stroke-width='1.4'/%3E%3C/g%3E%3Cpath d='M10 70C2 64 0 56 4 50 10 56 12 63 10 70Z'/%3E%3Cpath d='M30 90C34 82 42 78 50 80 46 87 38 91 30 90Z'/%3E%3Cpath d='M20 26C14 22 14 16 20 12 26 16 26 22 20 26Z'/%3E%3C/svg%3E");
  --tendril: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 50'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 49C3 30 12 15 30 10 46 6 60 11 58 20 56 27 47 25 49 19'/%3E%3Cpath d='M14 30C20 24 30 23 36 26' stroke-width='1.2'/%3E%3C/g%3E%3Cpath d='M30 10C35 3 46 1 54 4 47 9 38 11 30 10Z'/%3E%3C/svg%3E");
  --curl-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M39 20C30 20 22 16 18 9 15 4 8 4 7 10 6 15 12 17 14 13'/%3E%3Cpath d='M39 20C30 20 22 24 18 31 15 36 8 36 7 30 6 25 12 23 14 27'/%3E%3C/g%3E%3Ccircle cx='3' cy='20' r='2.4'/%3E%3C/svg%3E");
}

/* background: a faint Klimt mosaic field */
body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cg fill='none' stroke='%23C89B3C' stroke-width='.8' opacity='.05'%3E%3Crect x='4' y='4' width='14' height='14'/%3E%3Ccircle cx='39' cy='13' r='7'/%3E%3Cpath d='M13 39a3 3 0 1 1 3 3 6 6 0 1 1-6-6 9 9 0 1 1 9 9'/%3E%3Ccircle cx='39' cy='39' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}
#home, #game { background: transparent; }

/* hero */
.arch { width: min(232px, 60vw); margin-top: 6px; }
.greeting { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .22em; margin-top: 14px; }
.greeting::before, .greeting::after { content: ""; width: 26px; height: 1.5px; background: var(--gold); opacity: .7; }
.title {
  position: relative; display: inline-block; margin-top: 8px; padding: 4px 30px 10px;
  border: 2px solid var(--gold); border-radius: 999px;
  box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px rgba(200, 155, 60, .45);
  background: radial-gradient(120% 160% at 50% 0%, rgba(142, 27, 31, .35), transparent 70%), var(--surface);
  color: var(--title-ink, var(--gold-hi)); font-size: 42px;
}
.title::before, .title::after {
  content: ""; position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px;
  background: var(--gold); -webkit-mask: var(--curl-l) center / contain no-repeat; mask: var(--curl-l) center / contain no-repeat;
}
.title::before { left: -31px; }
.title::after { right: -31px; transform: scaleX(-1); }
.hero-line { margin-top: 10px; }

/* cards: leaf shape, two-weight contour, one tendril entering from the left */
.card {
  border-radius: 26px 8px 26px 8px; border: 2px solid rgba(200, 155, 60, .7);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px rgba(200, 155, 60, .28), 0 10px 24px rgba(0, 0, 0, .45);
  padding-left: 24px;
}
.diff:first-child::before, .diff.insane::before, .continue::before {
  content: ""; position: absolute; left: -9px; top: -13px; width: 62px; height: 40px; pointer-events: none;
  background: var(--gold); -webkit-mask: var(--tendril) left top / contain no-repeat; mask: var(--tendril) left top / contain no-repeat;
}
.card-title { color: var(--ink); }
.continue .card-title, .continue .card-sub { color: var(--accent-ink); }
.diff.insane {
  border-color: var(--gold-hi);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg fill='none' stroke='%23E8C46A' stroke-width='1' opacity='.22'%3E%3Crect x='2.5' y='2.5' width='8' height='8'/%3E%3Ccircle cx='19.5' cy='6.5' r='4'/%3E%3Cpath d='M6.5 19.5a1.6 1.6 0 1 1 1.6 1.6 3.2 3.2 0 1 1-3.2-3.2 4.6 4.6 0 1 1 4.6 4.6'/%3E%3Ccircle cx='19.5' cy='19.5' r='1.6' fill='%23E8C46A'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(100deg, var(--accent-deep), var(--accent));
}
.diff.insane .card-sub { color: #E9C9A8; }
.continue { background: linear-gradient(100deg, var(--accent-deep), var(--accent)); }
.divider { width: min(270px, 78%); height: 30px; }

/* game: board as leaded glass */
.board-wrap::before {
  inset: 1px; border: 2.5px solid var(--gold); border-radius: 14px; opacity: 1;
  box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px rgba(200, 155, 60, .45);
}
.corner { width: 46px; height: 46px; stroke-width: 1.6; }
.board-wrap .corner { display: none; }
.board-wrap::after {
  content: ""; position: absolute; left: -13px; bottom: -14px; width: 84px; height: 96px; pointer-events: none; z-index: 2;
  background: var(--gold); -webkit-mask: var(--sprig) left bottom / contain no-repeat; mask: var(--sprig) left bottom / contain no-repeat;
}
.board { background: var(--board-bg); border: 2px solid var(--lead); border-radius: 8px; }
.cell {
  border-right: 1px solid rgba(200, 155, 60, .16); border-bottom: 1px solid rgba(200, 155, 60, .16);
  background-image: linear-gradient(135deg, var(--glass), transparent 60%);
}
.cell.br { border-right: 3px solid var(--lead); box-shadow: 1px 0 0 rgba(232, 196, 106, .55); }
.cell.bb { border-bottom: 3px solid var(--lead); box-shadow: 0 1px 0 rgba(232, 196, 106, .55); }
.cell.br.bb { box-shadow: 1px 0 0 rgba(232, 196, 106, .55), 0 1px 0 rgba(232, 196, 106, .55); }
.cell.given .val { font-family: var(--f-display); }

/* the bubble is a leaf too */
.bubble { border-radius: 18px 18px 18px 4px; border-width: 1.5px; }

/* keys: Guimard-style arched windows */
.key {
  border-radius: 22px 22px 6px 6px / 18px 18px 6px 6px;
  border: 1.5px solid rgba(200, 155, 60, .55);
  box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px rgba(200, 155, 60, .2);
}
.key .k-digit { font-family: var(--f-display); }
.tool { color: var(--gold-hi); }

/* Tiffany panes: alternate 3x3 boxes get a faint jewel tint. It is an image layer,
   so the highlight colours (background-color) still show through. */
.board .cell:nth-child(1),.board .cell:nth-child(2),.board .cell:nth-child(3),.board .cell:nth-child(7),.board .cell:nth-child(8),.board .cell:nth-child(9),.board .cell:nth-child(10),.board .cell:nth-child(11),.board .cell:nth-child(12),.board .cell:nth-child(16),.board .cell:nth-child(17),.board .cell:nth-child(18),.board .cell:nth-child(19),.board .cell:nth-child(20),.board .cell:nth-child(21),.board .cell:nth-child(25),.board .cell:nth-child(26),.board .cell:nth-child(27),.board .cell:nth-child(31),.board .cell:nth-child(32),.board .cell:nth-child(33),.board .cell:nth-child(40),.board .cell:nth-child(41),.board .cell:nth-child(42),.board .cell:nth-child(49),.board .cell:nth-child(50),.board .cell:nth-child(51),.board .cell:nth-child(55),.board .cell:nth-child(56),.board .cell:nth-child(57),.board .cell:nth-child(61),.board .cell:nth-child(62),.board .cell:nth-child(63),.board .cell:nth-child(64),.board .cell:nth-child(65),.board .cell:nth-child(66),.board .cell:nth-child(70),.board .cell:nth-child(71),.board .cell:nth-child(72),.board .cell:nth-child(73),.board .cell:nth-child(74),.board .cell:nth-child(75),.board .cell:nth-child(79),.board .cell:nth-child(80),.board .cell:nth-child(81) {
  background-image: linear-gradient(var(--pane), var(--pane)), linear-gradient(135deg, var(--glass), transparent 60%);
}

.diff.insane .poppies svg { filter: drop-shadow(0 0 1px #E8C46A); }

/* sheets and the win card get the same two-weight contour */
.sheet-panel {
  border: 2px solid var(--gold); border-bottom: 0; border-radius: 28px 28px 0 0;
  box-shadow: inset 0 3px 0 0 var(--bg), inset 0 4px 0 0 rgba(200, 155, 60, .35);
}
.win-card {
  border: 2px solid var(--gold); border-radius: 30px 10px 30px 10px;
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px rgba(200, 155, 60, .35), var(--shadow);
}
.win-card { position: relative; }
.win-card .corner { display: none; }
.win-card::before, .win-card::after { content: ""; position: absolute; pointer-events: none; background: var(--gold); }
.win-card::before { left: -10px; top: -14px; width: 74px; height: 48px; -webkit-mask: var(--tendril) left top / contain no-repeat; mask: var(--tendril) left top / contain no-repeat; }
.win-card::after { right: -13px; bottom: -14px; width: 70px; height: 80px; transform: scaleX(-1); -webkit-mask: var(--sprig) left bottom / contain no-repeat; mask: var(--sprig) left bottom / contain no-repeat; }
.win-fred { background: radial-gradient(circle 74px at 50% 52%, var(--accent) 0 69px, var(--gold) 70px 72px, transparent 73px); }

.code-input {
  display: block; width: 100%; padding: 15px 14px; border-radius: var(--radius);
  background: var(--surface); border: 1.5px solid var(--gold); color: var(--ink);
  font-size: 18px; letter-spacing: .04em; text-align: center; outline: none;
  -webkit-user-select: text; user-select: text; -webkit-appearance: none; appearance: none;
}
.code-input:focus { border-color: var(--gold-hi); box-shadow: 0 0 0 3px var(--accent-soft); }
.code-input::placeholder { color: var(--ink-soft); letter-spacing: 0; }
.paste-btn { display: block; margin: 6px auto 0; }