:root {
  color-scheme: light;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  --ink: #2a2521;
  --muted: #756a60;
  --paper: #f3eadb;
  --paper-deep: #e7d7c2;
  --wood: #2b1c19;
  --wood-light: #56372b;
  --brass: #b98a47;
  --brass-light: #e6c989;
  --line: rgba(62, 41, 30, .18);
  --accent: #a24b31;
  --accent-soft: #ead0ba;
  --room-wash: #eadcca;
  --shadow: 0 20px 55px rgba(42, 28, 20, .15);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--room-wash); background-image: radial-gradient(circle at 10% 5%, rgba(255,255,255,.55), transparent 27rem), radial-gradient(circle at 90% 12%, rgba(182,145,105,.18), transparent 31rem), repeating-linear-gradient(0deg, rgba(74,45,28,.024) 0 1px, transparent 1px 4px); }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg width='140' height='140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); mix-blend-mode: multiply; z-index: 9; }
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

.site-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px clamp(18px, 5vw, 70px); color: #f5e9d5; background: linear-gradient(90deg, #241615, #3a251e 48%, #211516); border-bottom: 1px solid rgba(230,201,137,.23); box-shadow: 0 4px 18px rgba(20,12,10,.28); }
.brand, .header-link { text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: Georgia, serif; font-size: 1.15rem; letter-spacing: .02em; }
.brand-mark { width: 25px; height: 25px; display: inline-block; border: 2px solid var(--brass-light); border-radius: 4px; position: relative; transform: rotate(45deg); box-shadow: inset 0 0 0 3px rgba(185,138,71,.18); }
.brand-mark::after { content: ""; position: absolute; width: 8px; height: 8px; left: 6px; top: 6px; border-radius: 50%; background: var(--brass-light); }
.header-links { display: flex; align-items: center; gap: 18px; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; }
.header-link { color: #e9d8bc; }
.header-link:hover { color: white; }
.streak-pill { padding: 7px 10px; color: var(--brass-light); border: 1px solid rgba(230,201,137,.38); border-radius: 999px; }

#game-shell { position: relative; z-index: 1; }
.parlor-home { max-width: 1360px; margin: 0 auto; padding: clamp(30px, 6vw, 76px) clamp(18px, 5vw, 70px) 80px; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 430px); align-items: center; gap: clamp(40px, 8vw, 120px); min-height: 490px; }
.hero-copy { max-width: 680px; }
.eyebrow, .kicker, .mini-label, .round-label, .room-card-status, .room-number, .trace-readout span:last-child { text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 800; }
.eyebrow { margin: 0 0 13px; color: var(--accent); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.08; }
.hero-copy h1 { max-width: 650px; margin-bottom: 20px; font-size: clamp(3.3rem, 7vw, 6.5rem); letter-spacing: -.055em; }
.hero-lede { max-width: 590px; margin-bottom: 28px; color: var(--muted); font-size: clamp(1.04rem, 1.5vw, 1.23rem); line-height: 1.65; }
.hero-actions, .control-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 11px 16px; color: #fff9ef; background: var(--wood); border: 1px solid var(--wood); border-radius: 5px; box-shadow: 0 4px 0 #170e0d, 0 10px 18px rgba(42,28,20,.13); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.button:hover { transform: translateY(-2px); background: #472b23; box-shadow: 0 6px 0 #170e0d, 0 14px 20px rgba(42,28,20,.16); }
.button.secondary { color: var(--ink); background: transparent; border-color: var(--line); box-shadow: none; }
.button.secondary:hover { background: rgba(255,255,255,.32); }
.button.quiet { min-height: 38px; padding: 9px 12px; color: var(--accent); background: rgba(255,255,255,.36); border: 1px solid var(--line); box-shadow: none; font-size: .67rem; }
.button .achievement-icon { width: 16px; height: 16px; }
.text-link { color: var(--accent); font-weight: 800; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

.cabinet-portrait { position: relative; padding: 25px 23px 20px; border: 9px solid #241614; border-radius: 12px; background: linear-gradient(145deg, #684631, #2a1917 75%); box-shadow: inset 0 0 0 2px #a87545, inset 0 0 0 6px #39241d, 0 25px 40px rgba(40,24,17,.3); transform: rotate(1.2deg); }
.cabinet-portrait::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(230,201,137,.35); pointer-events: none; }
.cabinet-crown { display: grid; place-items: center; width: 54px; height: 54px; margin: -48px auto 18px; color: var(--brass-light); background: #2b1b18; border: 2px solid var(--brass); border-radius: 50%; box-shadow: 0 0 0 6px #3c271d; }
.cabinet-crown .room-mark { width: 24px; }
.cabinet-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; background: #1b1111; border: 2px solid #956b42; }
.cabinet-drawer { display: grid; place-items: center; gap: 3px; min-height: 82px; color: var(--brass-light); background: linear-gradient(145deg, #4a2d22, #241716); border: 1px solid #93653d; border-radius: 3px; text-decoration: none; box-shadow: inset 0 0 14px rgba(0,0,0,.28); }
.cabinet-drawer:hover { color: white; background: linear-gradient(145deg, #65402b, #2e1b18); }
.cabinet-drawer .room-mark { width: 30px; height: 30px; }
.cabinet-drawer span { font-size: .62rem; letter-spacing: .14em; }
.cabinet-label { position: relative; z-index: 1; margin-top: 17px; color: var(--brass-light); font: 700 .66rem Georgia, serif; letter-spacing: .24em; text-align: center; }

.home-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 16px 0 65px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-stats div { padding: 20px 16px; border-right: 1px solid var(--line); }
.home-stats div:last-child { border-right: 0; }
.home-stats b, .home-stats span { display: block; }
.home-stats b { color: var(--accent); font: 700 1.65rem Georgia, serif; }
.home-stats span { margin-top: 5px; color: var(--muted); font-size: .75rem; }
.rooms-section { scroll-margin-top: 20px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 22px; }
.section-heading h2 { margin-bottom: 0; font-size: clamp(2rem, 4vw, 3.4rem); }
.section-heading > p { max-width: 180px; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; text-align: right; }
.room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.room-card { position: relative; overflow: hidden; display: flex; min-height: 310px; flex-direction: column; padding: 22px; color: var(--ink); background: linear-gradient(145deg, rgba(255,255,255,.64), rgba(237,220,196,.66)); border: 1px solid rgba(76,45,28,.19); border-radius: 7px; box-shadow: 0 10px 20px rgba(68,44,28,.08), inset 0 0 0 5px rgba(255,255,255,.2); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.room-card::after { content: ""; position: absolute; width: 100px; height: 100px; right: -45px; bottom: -45px; border-radius: 50%; background: var(--accent-soft); opacity: .36; }
.room-card:hover { transform: translateY(-5px) rotate(-.35deg); box-shadow: 0 18px 32px rgba(68,44,28,.15), inset 0 0 0 5px rgba(255,255,255,.25); }
.room-card-top, .room-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.room-card-status { color: var(--accent); font-size: .61rem; }
.room-card-mark { display: grid; place-items: center; width: 66px; height: 66px; margin: 29px 0 22px; color: var(--accent); background: rgba(255,255,255,.38); border: 1px solid rgba(88,47,29,.2); border-radius: 50%; box-shadow: inset 0 0 0 6px rgba(255,255,255,.2); }
.room-card h3 { margin-bottom: 11px; font-size: 1.75rem; }
.room-card p { max-width: 32ch; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.room-card-foot { position: relative; z-index: 1; margin-top: auto; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; line-height: 1.35; }
.room-card-foot > span { max-width: 19ch; }
.room-difficulty { margin-left: auto; color: var(--accent); font-size: .59rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.room-card-foot b { color: var(--accent); font-size: 1.3rem; }
.room-mark, .achievement-icon { width: 35px; height: 35px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.retention-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-top: 54px; padding: 28px; color: #f4e5cc; background: linear-gradient(120deg, #34221d, #4b2e25); border: 1px solid #8c5e38; box-shadow: var(--shadow); }
.retention-strip > div:first-child { display: grid; place-items: center; width: 52px; height: 52px; color: var(--brass-light); border: 1px solid var(--brass); border-radius: 50%; }
.retention-strip .eyebrow { color: var(--brass-light); }
.retention-strip h2 { margin-bottom: 7px; font-size: 1.65rem; }
.retention-strip p { margin-bottom: 0; color: #d9c6aa; font-size: .84rem; line-height: 1.5; }
.retention-strip .text-link { color: var(--brass-light); white-space: nowrap; }

.room-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 54px); max-width: 1360px; margin: 0 auto; padding: clamp(28px, 5vw, 62px) clamp(18px, 5vw, 70px) 80px; }
.room-main { min-width: 0; }
.room-aside { display: flex; flex-direction: column; gap: 16px; padding-top: 84px; }
.game-topline { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 35px; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.back-link { color: var(--accent); font-weight: 800; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.game-intro { max-width: 790px; margin-bottom: 28px; }
.game-intro h1 { margin-bottom: 12px; font-size: clamp(3.1rem, 6vw, 6rem); letter-spacing: -.055em; }
.game-intro > p:last-child { max-width: 680px; color: var(--muted); font-size: 1.02rem; line-height: 1.65; }
.game-panel, .side-panel { background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(239,224,204,.68)); border: 1px solid var(--line); box-shadow: 0 14px 35px rgba(67,43,28,.1), inset 0 0 0 5px rgba(255,255,255,.22); }
.game-panel { padding: clamp(20px, 3.2vw, 40px); }
.side-panel { padding: 22px; }
.side-panel h2 { margin-bottom: 11px; font-size: 1.35rem; }
.side-panel p, .side-panel li { color: var(--muted); font-size: .82rem; line-height: 1.55; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 13px; }
.panel-heading h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.6rem); }
.kicker { margin-bottom: 8px; color: var(--accent); }
.panel-score { flex: 0 0 auto; padding: 8px 10px; color: var(--accent); border: 1px solid var(--line); border-radius: 999px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.panel-note { max-width: 760px; color: var(--muted); font-size: .86rem; line-height: 1.6; }
.panel-note b { color: var(--ink); }
.status { min-height: 1.4em; margin: 16px 0 0; color: var(--muted); font-size: .83rem; line-height: 1.45; }
.status.warn { color: #9b3e2c; }
.status.good { color: #38705e; }
.side-stats { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 18px; border-top: 1px solid var(--line); }
.side-stats div { padding: 14px 8px 0 0; }
.side-stats b, .side-stats span { display: block; }
.side-stats b { color: var(--accent); font: 700 1.45rem Georgia, serif; }
.side-stats span { color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
.room-links { display: grid; gap: 4px; }
.room-link { display: flex; align-items: center; gap: 10px; padding: 8px 5px; color: var(--ink); border-bottom: 1px solid rgba(76,45,28,.1); text-decoration: none; }
.room-link:hover { color: var(--accent); background: rgba(255,255,255,.35); }
.room-link .room-mark, .room-link .achievement-icon { flex: 0 0 auto; width: 23px; height: 23px; }
.room-link span { min-width: 0; }
.room-link b, .room-link small { display: block; }
.room-link b { font-size: .75rem; }
.room-link small { margin-top: 2px; color: var(--muted); font-size: .64rem; }
.trophy-link { margin-top: 8px; color: var(--accent); }
.how-to { margin: 0; padding-left: 18px; }
.small-note { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); font-size: .72rem !important; }

body[data-room-theme="threadlight"] { --accent: #a24b31; --accent-soft: #e7bea0; --room-wash: #e8ded2; }
body[data-room-theme="tideglass"] { --accent: #2f7180; --accent-soft: #9fcdd0; --room-wash: #dce8e4; }
body[data-room-theme="counterpoint"] { --accent: #674d87; --accent-soft: #c4b0dc; --room-wash: #e5dfe9; }
body[data-room-theme="ravel"] { --accent: #986035; --accent-soft: #dfbd8e; --room-wash: #e8dfd1; }
body[data-room-theme="mosaic"] { --accent: #a34d3d; --accent-soft: #e2a99c; --room-wash: #e7dcd5; }
body[data-room-theme="dinner"] { --accent: #356d67; --accent-soft: #a6cfbf; --room-wash: #dce7df; }
body[data-room-theme="marginalia"] { --accent: #654a7d; --accent-soft: #c7afd3; --room-wash: #e5dce7; }

.loom-stage { position: relative; max-width: 620px; margin: 28px auto 19px; padding: 38px 24px 24px; background: linear-gradient(135deg, #2d201e, #50382e); border: 7px solid #2b1b18; box-shadow: inset 0 0 0 2px #b88650, 0 14px 28px rgba(31,19,15,.18); }
.loom-label { position: absolute; color: #e6c989; font: 700 .62rem Georgia, serif; letter-spacing: .15em; }
.loom-label-top { top: 12px; left: 24px; }
.loom-board { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; touch-action: none; }
.loom-cell { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; color: #f8e8c9; background: linear-gradient(145deg, #4c342c, #291c1b); border: 1px solid #93623e; border-radius: 3px; box-shadow: inset 0 0 14px rgba(0,0,0,.35); font: 700 clamp(1.45rem, 5vw, 2.5rem) Georgia, serif; user-select: none; transition: background .12s ease, transform .12s ease; }
.loom-cell:hover { transform: translateY(-1px); background: #684639; }
.loom-cell.is-path { color: #2e211a; background: #e9c675; border-color: #ffebac; box-shadow: 0 0 0 3px rgba(246,214,126,.28), 0 0 18px rgba(246,214,126,.4); }
.loom-cell.is-hinted { outline: 3px solid #d5a3df; outline-offset: -5px; }
.loom-traces { position: absolute; z-index: 2; inset: 38px 24px 24px; width: calc(100% - 48px); height: calc(100% - 62px); pointer-events: none; overflow: visible; }
.thread-trace { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: .2; }
.thread-trace.found { stroke: rgba(230,201,137,.72); stroke-width: .34; filter: drop-shadow(0 0 .05px #f8d46e); }
.thread-trace.hint { stroke: #d5a3df; stroke-dasharray: .2 .12; stroke-width: .26; opacity: .9; }
.thread-trace.active { stroke: rgba(244,181,73,.96); stroke-width: .32; filter: drop-shadow(0 0 .11px #fff); }
.loom-cell.is-warmed { background: linear-gradient(145deg, #dcae55, #a65d3b); border-color: #f3d485; color: #3b271d; box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 0 14px rgba(242,185,86,.46); }
.loom-cell.is-warmed.is-path { background: #f0c568; box-shadow: inset 0 0 0 3px rgba(255,255,255,.24), 0 0 18px rgba(242,185,86,.72); }
.trace-readout { display: flex; align-items: center; justify-content: space-between; gap: 15px; max-width: 620px; margin: 0 auto; padding: 13px 15px; background: rgba(255,255,255,.48); border: 1px solid var(--line); }
.trace-word { min-width: 0; color: var(--accent); font: 700 1.25rem Georgia, serif; letter-spacing: .12em; overflow-wrap: anywhere; }
.trace-readout span:last-child { color: var(--muted); white-space: nowrap; }
.clue-ledger { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.clue-ledger li { display: flex; gap: 8px; padding: 9px; color: var(--muted); border-bottom: 1px solid rgba(76,45,28,.1); font-size: .78rem; line-height: 1.35; }
.clue-ledger li.is-current { color: var(--ink); background: rgba(255,255,255,.35); border-left: 3px solid var(--accent); }
.clue-ledger li.is-done { color: #38705e; }
.clue-ledger span { flex: 1; }
.clue-ledger b { color: var(--accent); }
.completion-loom { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; max-width: 380px; margin: 25px auto; padding: 15px; background: #2b1b18; border: 3px solid var(--brass); }
.sealed-loom-cell { display: grid; place-items: center; aspect-ratio: 1; color: #3a281b; background: #f1ce7b; box-shadow: inset 0 0 0 2px rgba(255,255,255,.32), 0 0 10px rgba(248,209,110,.38); font: 700 1rem Georgia, serif; }
.completion-callout { color: var(--accent); font-size: .8rem; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: .12em; }

.tideglass-panel { --water: #3b8190; --shore: #dfbc71; }
.tide-target-wrap, .tide-board-wrap { margin-top: 24px; }
.mini-label { display: block; margin-bottom: 9px; color: var(--muted); font-size: .62rem; }
.tide-chart, .tide-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; max-width: 360px; padding: 11px; }
.tide-chart { background: #bf9a5d; border: 3px solid #735632; }
.tide-board { background: #234a55; border: 4px solid #1d343a; box-shadow: inset 0 0 0 2px #79a8aa; }
.tide-chart-cell, .tide-cell { aspect-ratio: 1; display: grid; place-items: center; border-radius: 2px; }
.tide-chart-cell.is-dry { background: #efd791; box-shadow: inset 0 0 0 1px rgba(89,57,26,.35); }
.tide-chart-cell.is-water { background: #3e8793; color: #a9d8d5; }
.tide-cell { padding: 0; color: #b3dcda; background: #377888; border: 1px solid #6da8a7; font-size: 1.2rem; }
.tide-cell.is-settled { background: #e4c879; border-color: #f1e0a9; }
.tide-cell.is-settled::after { content: ""; width: 23%; height: 23%; border-radius: 50%; background: rgba(89,58,26,.22); }
.tide-cell.is-adrift { background: #316a7b; }
.tide-cell.is-shortest { outline: 3px solid #f2c66b; outline-offset: -4px; box-shadow: 0 0 14px rgba(242,198,107,.65); }

.survey-card { max-width: 680px; margin: 25px auto 0; padding: clamp(22px, 4vw, 42px); background: linear-gradient(145deg, #eee3f0, #d6c5dd); border: 1px solid #a895b7; box-shadow: inset 0 0 0 5px rgba(255,255,255,.28), 0 12px 24px rgba(70,46,90,.13); }
.round-label { color: var(--accent); }
.survey-card h3 { margin: 13px 0 25px; font-size: clamp(1.7rem, 3vw, 2.7rem); }
.answer-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.answer-input { width: 100%; min-height: 52px; padding: 12px 14px; color: var(--ink); background: rgba(255,255,255,.68); border: 1px solid rgba(71,46,90,.35); border-radius: 3px; font-size: 1.05rem; }
.answer-input::placeholder { color: #a397a5; }
.answer-input:focus { border-color: var(--accent); outline: 3px solid rgba(103,77,135,.17); }
.survey-card .control-row { margin-top: 14px; }
.answer-history { display: grid; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.answer-history li { display: grid; grid-template-columns: 23px 1fr; gap: 3px 8px; padding: 9px 0; border-bottom: 1px solid rgba(76,45,28,.1); }
.answer-history li > span { grid-row: span 2; color: var(--accent); font-weight: 800; }
.answer-history b { font-size: .8rem; }
.answer-history small { color: var(--muted); font-size: .66rem; }
.empty-history { display: block !important; color: var(--muted); font-size: .78rem; }

.ravel-ladder { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 11px; margin: 28px 0; }
.ravel-fixed, .ravel-rung { width: 112px; min-height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12px 9px; background: #f4e5c8; border: 1px solid #b78a55; box-shadow: 0 7px 0 rgba(118,78,42,.18), inset 0 0 0 4px rgba(255,255,255,.28); }
.ravel-fixed { color: var(--accent); font: 700 1.35rem Georgia, serif; letter-spacing: .12em; }
.ravel-fixed.end { background: #3c2920; color: #f3d38a; }
.ravel-rung { gap: 6px; width: 150px; border-color: #bb9264; }
.ravel-rung > span { color: var(--muted); font-size: .6rem; font-weight: 800; letter-spacing: .12em; }
.ravel-rung small { color: var(--muted); font-size: .68rem; line-height: 1.25; text-align: center; }
.ravel-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px; width: 100%; gap: 5px; align-items: center; }
.mini-hint { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--accent); background: #f2d9aa; border: 1px solid rgba(152,96,53,.42); border-radius: 50%; font-weight: 900; }
.mini-hint:hover { background: #fff0cc; }
.mini-hint:disabled { color: #fff3d2; background: var(--accent); }
.ravel-hint { color: #7b4a28; font-size: .65rem; line-height: 1.25; text-align: center; }
.ravel-input { min-height: 39px; padding: 6px; border-color: rgba(152,96,53,.38); font-weight: 800; letter-spacing: .16em; text-align: center; text-transform: uppercase; }
.ravel-arrow { color: var(--accent); font-size: 1.3rem; font-weight: 800; }
.ravel-complete-chain { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin: 25px auto; color: var(--accent); font: 700 1.3rem Georgia, serif; letter-spacing: .1em; }
.ravel-complete-chain span { padding: 9px 10px; background: rgba(227,198,151,.48); border-bottom: 2px solid var(--accent); }

.nonogram-frame { overflow-x: auto; margin: 25px auto; padding: 22px 18px 25px; background: linear-gradient(145deg, #592f35, #2e2427); border: 7px solid #2a1b1a; box-shadow: inset 0 0 0 2px #c49255, 0 14px 28px rgba(31,19,15,.16); }
.mosaic-column-clues, .mosaic-row { display: grid; grid-template-columns: 76px repeat(9, minmax(31px, 1fr)); min-width: 450px; gap: 4px; }
.mosaic-column-clues { align-items: end; margin-bottom: 5px; }
.mosaic-column-clue { display: flex; min-height: 44px; flex-direction: column; justify-content: end; align-items: center; gap: 3px; color: #f4d78b; font-size: .7rem; font-weight: 800; }
.mosaic-column-clue span, .mosaic-row-clue span { display: block; }
.mosaic-row { margin-bottom: 4px; }
.mosaic-row-clue { display: flex; justify-content: end; align-items: center; gap: 5px; padding-right: 9px; color: #f4d78b; font-size: .7rem; font-weight: 800; }
.mosaic-row-clue i { color: rgba(244,215,139,.4); font-style: normal; }
.mosaic-row-cells { display: grid; grid-column: 2 / -1; grid-template-columns: repeat(9, minmax(31px, 1fr)); gap: 4px; }
.mosaic-cell { min-width: 0; aspect-ratio: 1; padding: 0; color: rgba(255,255,255,.25); background: #e8d8bc; border: 1px solid rgba(255,255,255,.2); border-radius: 2px; font-size: .9rem; transition: transform .12s ease, background .12s ease; }
.mosaic-cell:hover { transform: scale(1.04); background: #f1e6d2; }
.mosaic-cell.is-filled { background: linear-gradient(145deg, #e7ba5c, #b66b3e); border-color: #f5dc91; box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 0 10px rgba(242,185,86,.28); }
.mosaic-cell.is-filled { color: transparent; }
.mosaic-cell.is-hinted { outline: 3px solid #8ad4c3; outline-offset: -4px; }
.mosaic-reveal { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; max-width: 420px; margin: 25px auto; padding: 10px; background: #2a1b1a; border: 3px solid #c49255; }
.mosaic-reveal span { aspect-ratio: 1; background: #e8d8bc; }
.mosaic-reveal span.is-filled { background: #e7ba5c; box-shadow: 0 0 8px rgba(242,185,86,.5); }

.dinner-table-wrap { max-width: 720px; margin: 24px auto 20px; padding: 18px; background: #294e4a; border: 7px solid #19312f; box-shadow: inset 0 0 0 2px #a78254, 0 14px 28px rgba(31,19,15,.16); }
.dinner-table { position: relative; min-height: 500px; aspect-ratio: 1.15; background: radial-gradient(ellipse at center, #54766b, #244841 67%, #173431); border: 2px solid #a78254; border-radius: 50%; box-shadow: inset 0 0 0 12px rgba(255,255,255,.035), inset 0 0 34px rgba(0,0,0,.2); }
.dinner-table::before, .dinner-table::after { content: ""; position: absolute; inset: 20%; border: 1px solid rgba(230,201,137,.3); border-radius: 50%; }
.dinner-table::after { inset: 28%; border-color: rgba(230,201,137,.14); }
.tablecloth { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; gap: 5px; width: 32%; aspect-ratio: 1; transform: translate(-50%, -50%); color: #e4c98e; border: 1px solid rgba(230,201,137,.42); border-radius: 50%; font: .58rem Georgia, serif; letter-spacing: .11em; text-align: center; }
.tablecloth .room-mark { width: 32px; }
.tablecloth small { color: rgba(244,225,183,.65); font: 700 .45rem "Trebuchet MS", sans-serif; letter-spacing: .13em; }
.dinner-seat { position: absolute; left: var(--left); top: var(--top); z-index: 2; display: grid; place-items: center; gap: 1px; width: 104px; min-height: 98px; padding: 5px; color: #24433f; background: #e5d0a3; border: 2px solid #b28651; border-radius: 9px; box-shadow: 0 6px 0 rgba(24,35,29,.34), 0 8px 16px rgba(20,25,20,.18); transform: translate(-50%, -50%); transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.dinner-seat:hover, .dinner-seat.is-target { background: #f3dfb2; border-color: #f5d37d; transform: translate(-50%, -50%) translateY(-3px); }
.dinner-seat.is-filled { background: #f0dfbe; }
.dinner-seat .dinner-portrait { width: 76px; height: auto; border-radius: 12px; }
.seat-caption { color: #8b693c; font-size: .5rem; font-weight: 800; letter-spacing: .1em; }
.seat-number { color: #8b693c; font-size: .6rem; font-weight: 800; letter-spacing: .1em; }
.character-portrait { display: grid; place-items: center; width: 32px; height: 32px; color: #fff5df; border: 2px solid rgba(255,255,255,.55); border-radius: 50%; box-shadow: inset 0 -4px 0 rgba(0,0,0,.16); font: 700 1rem Georgia, serif; }
.dinner-portrait { display: block; width: 100%; height: auto; overflow: hidden; }
.prop-mark { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.portrait-prop { color: #6a513a; }
.portrait-wine { --portrait-wine: #873f42; background: #873f42; }.portrait-teal { --portrait-teal: #36756c; background: #36756c; }.portrait-moss { --portrait-moss: #607a44; background: #607a44; }.portrait-violet { --portrait-violet: #735987; background: #735987; }.portrait-amber { --portrait-amber: #ad7137; background: #ad7137; }.portrait-blue { --portrait-blue: #4d6e89; background: #4d6e89; }.portrait-rose { --portrait-rose: #a85968; background: #a85968; }.portrait-slate { --portrait-slate: #58606d; background: #58606d; }
.character-tray { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.tray-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.tray-heading .mini-label { margin-bottom: 4px; }
.tray-note { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.4; }
.tray-count { color: var(--accent); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.character-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.character-card { display: grid; align-self: start; align-content: start; min-width: 0; padding: 9px; color: var(--ink); background: rgba(255,255,255,.54); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 5px 12px rgba(68,44,28,.06); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.character-card:hover, .character-card.is-selected { border-color: var(--accent); box-shadow: 0 8px 20px rgba(68,44,28,.13); transform: translateY(-2px); }
.character-card.is-placed { background: rgba(224,239,229,.7); }
.portrait-button { display: block; width: 100%; padding: 0; color: inherit; background: transparent; border: 0; text-align: left; }
.portrait-frame { display: block; overflow: hidden; border: 1px solid rgba(76,45,28,.16); border-radius: 12px; background: #d4c0a8; }
.portrait-button:focus-visible { outline-offset: 5px; }
.portrait-index { display: block; margin-top: 8px; color: var(--muted); font-size: .57rem; font-weight: 800; letter-spacing: .13em; }
.portrait-note { width: 100%; min-height: 38px; margin-top: 8px; padding: 8px 9px; color: var(--ink); background: rgba(255,255,255,.76); border: 1px solid rgba(76,45,28,.2); border-radius: 5px; font-size: .74rem; }
.portrait-note::placeholder { color: #978679; }
.portrait-note:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(53,109,103,.13); outline: 0; }
.portrait-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; margin-top: 6px; }
.details-button { padding: 5px 0; color: var(--accent); background: transparent; border: 0; font-size: .61rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.details-button:hover { text-decoration: underline; }
.placed-tag { color: #38705e; font-size: .54rem; font-weight: 800; letter-spacing: .1em; }
.character-detail { margin-top: 4px; padding: 10px; color: var(--muted); background: rgba(225,237,226,.72); border-left: 2px solid var(--accent); font-size: .69rem; line-height: 1.4; }
.character-detail p { margin-bottom: 9px; }
.character-detail dl { display: grid; gap: 5px; margin: 0; }
.character-detail dl div { display: grid; grid-template-columns: 66px 1fr; gap: 5px; }
.character-detail dt { color: var(--accent); font-size: .55rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.character-detail dd { margin: 0; color: var(--ink); }
.dinner-clues { display: grid; gap: 5px; margin: 15px 0 0; padding: 0; list-style: none; counter-reset: dinner; }
.dinner-clues li { display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid rgba(76,45,28,.1); }
.clue-meta { display: grid; align-content: start; gap: 5px; }
.dinner-clues li > .clue-meta > span { color: var(--accent); font-weight: 800; }
.clue-scope { width: max-content; padding: 3px 4px; color: #38705e; background: rgba(166,207,191,.35); border-radius: 3px; font-size: .47rem; letter-spacing: .08em; text-transform: uppercase; }
.dinner-clues p { margin: 0; color: var(--ink); font-size: .75rem; line-height: 1.45; }
.seated-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; max-width: 490px; margin: 25px auto; }
.seated-list span { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; background: rgba(166,207,191,.35); border-bottom: 1px solid #6a9c8d; }
.seated-list i { color: var(--muted); font-size: .62rem; font-style: normal; text-transform: uppercase; }
.seated-list b { color: var(--accent); }

.book-page { display: grid; grid-template-columns: 45px minmax(0, 1fr); max-width: 720px; min-height: 310px; margin: 25px auto; background: #f4ecd9; border: 1px solid #b99c75; box-shadow: 9px 9px 0 rgba(83,53,45,.15), inset 0 0 35px rgba(118,79,44,.12); }
.book-spine { display: grid; place-items: center; color: #e8c997; background: linear-gradient(90deg, #3a2532, #754b65, #3a2532); border-right: 5px solid #2b1b23; }
.book-spine .room-mark { width: 25px; transform: rotate(-90deg); }
.quote-stack { padding: 25px 28px; }
.book-quote { display: grid; grid-template-columns: 32px 1fr; gap: 10px; margin: 0; padding: 13px 0; border-bottom: 1px solid rgba(97,67,45,.2); }
.book-quote span { color: var(--accent); font: 700 .78rem Georgia, serif; }
.book-quote p { margin: 0; color: #46372f; font: 1rem/1.55 Georgia, serif; }
.marginalia-panel .answer-label, .marginalia-panel .answer-input { max-width: 720px; margin-left: auto; margin-right: auto; }
.marginalia-panel .control-row { max-width: 720px; margin: 13px auto 0; }
.bookplate { display: grid; gap: 4px; margin-top: 16px; padding: 15px; color: #e8d5bc; background: #3b2734; border: 1px solid #976b80; box-shadow: inset 0 0 0 4px rgba(255,255,255,.07); }
.bookplate b { font: 1.15rem Georgia, serif; }
.bookplate span { color: #c9adbc; font-size: .67rem; text-transform: uppercase; letter-spacing: .12em; }
.book-reveal { display: grid; justify-items: center; gap: 8px; max-width: 330px; margin: 25px auto; padding: 28px 18px; color: #f3e5cf; background: linear-gradient(145deg, #3b2734, #69455f); border: 2px solid #a97890; box-shadow: 8px 8px 0 rgba(76,45,28,.17); }
.book-reveal .room-mark { color: #e9c78e; }
.book-reveal b { font: 700 1.7rem Georgia, serif; text-align: center; }
.book-reveal small { color: #d9bfd0; }

.complete-panel { text-align: center; }
.complete-emblem { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 20px; color: var(--accent); background: rgba(255,255,255,.38); border: 1px solid var(--line); border-radius: 50%; }
.complete-emblem .room-mark { width: 38px; height: 38px; }
.complete-panel h2 { margin-bottom: 12px; font-size: clamp(2rem, 4vw, 3.6rem); }
.complete-panel > p { color: var(--muted); font-size: .86rem; }
.score-line { margin: 17px 0; color: var(--accent); font-size: 1.35rem; letter-spacing: .18em; }
.share-card { max-width: 450px; margin: 24px auto; padding: 15px; color: var(--ink); background: rgba(255,255,255,.5); border: 1px dashed var(--accent); font: .82rem/1.55 Georgia, serif; white-space: pre-line; }
.control-row.center { justify-content: center; }
.share-note { font-size: .7rem !important; }

.trophy-case { max-width: 1120px; margin: 0 auto; padding: clamp(34px, 6vw, 75px) clamp(18px, 5vw, 70px) 80px; }
.trophy-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.trophy-heading h1 { margin-bottom: 12px; font-size: clamp(3.2rem, 7vw, 6rem); letter-spacing: -.06em; }
.trophy-heading p:last-child { max-width: 630px; color: var(--muted); line-height: 1.6; }
.trophy-total { display: grid; place-items: center; min-width: 145px; aspect-ratio: 1; padding: 18px; color: #f3e5cf; background: #38231e; border: 6px solid #95683e; border-radius: 50%; box-shadow: 0 12px 20px rgba(51,29,20,.2); text-align: center; }
.trophy-total b { font: 700 2.8rem Georgia, serif; color: var(--brass-light); }
.trophy-total span { color: #d9c2a6; font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; }
.shelf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 20px 0; border-top: 13px solid #39231d; border-bottom: 17px solid #39231d; background: repeating-linear-gradient(0deg, transparent 0 188px, #5b3626 188px 202px); }
.achievement-shelf-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; min-height: 170px; padding: 18px; background: linear-gradient(145deg, #f4e8d1, #dfc7a7); border: 1px solid #a37a4e; box-shadow: 0 8px 0 #8a5d3b, inset 0 0 0 4px rgba(255,255,255,.24); }
.achievement-shelf-card.is-locked { filter: saturate(.4); opacity: .72; }
.achievement-card-icon { display: grid; place-items: center; width: 57px; height: 57px; color: var(--accent); background: rgba(255,255,255,.4); border: 1px solid var(--line); border-radius: 50%; }
.achievement-card-icon .achievement-icon { width: 29px; height: 29px; }
.achievement-shelf-card h2 { margin-bottom: 6px; font-size: 1.35rem; }
.achievement-shelf-card p:last-child { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.4; }
.achievement-lock { color: var(--accent); font-size: 1.2rem; }
.achievement-date { display: block; margin-top: 7px; color: var(--accent); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.archive-panel { margin-top: 28px; padding: 24px; background: rgba(255,255,255,.33); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.archive-panel h2 { margin-bottom: 7px; }
.archive-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.archive-list div { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; background: rgba(255,255,255,.48); border-left: 3px solid var(--accent); }
.archive-list b { font-size: .82rem; }
.archive-list span { color: var(--muted); font-size: .7rem; }
.trophy-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 35px; }
.trophy-footer p { margin: 0; color: var(--muted); font-size: .75rem; }

.toast { position: fixed; z-index: 20; left: 50%; bottom: 22px; max-width: min(90vw, 480px); padding: 12px 17px; color: #fff4df; background: #2d1d1a; border: 1px solid var(--brass); box-shadow: 0 10px 22px rgba(30,17,14,.3); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .18s ease, transform .18s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1000px) { .room-layout { grid-template-columns: 1fr; } .room-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; } .room-aside > section:last-child { grid-column: 1 / -1; } .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shelf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .site-header { padding: 17px 18px; } .header-link { display: none; } .parlor-home, .room-layout, .trophy-case { padding-left: 16px; padding-right: 16px; } .home-hero { grid-template-columns: 1fr; min-height: 0; gap: 45px; } .hero-copy h1 { font-size: clamp(3.1rem, 17vw, 5rem); } .cabinet-portrait { max-width: 380px; margin: 0 auto; } .home-stats { grid-template-columns: repeat(2, 1fr); margin-bottom: 44px; } .home-stats div:nth-child(2) { border-right: 0; } .home-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .room-grid { grid-template-columns: 1fr; } .section-heading, .trophy-heading { align-items: start; flex-direction: column; } .section-heading > p { max-width: none; text-align: left; } .retention-strip { grid-template-columns: auto 1fr; } .retention-strip .text-link { grid-column: 2; } .game-topline { align-items: start; flex-direction: column-reverse; gap: 9px; } .room-aside { display: block; } .room-aside > section { margin-bottom: 16px; } .panel-heading { flex-direction: column; } .loom-stage { padding-left: 12px; padding-right: 12px; } .loom-traces { left: 12px; right: 12px; width: calc(100% - 24px); } .control-row .button { flex: 1 1 auto; } .ravel-ladder { display: grid; grid-template-columns: 1fr; } .ravel-arrow { transform: rotate(90deg); } .ravel-fixed, .ravel-rung { width: min(100%, 260px); margin: 0 auto; } .character-grid { grid-template-columns: repeat(2, 1fr); } .dinner-table { min-height: 330px; } .dinner-seat { width: 61px; min-height: 62px; padding: 3px; } .dinner-seat .dinner-portrait { width: 43px; height: 51px; } .dinner-seat b { font-size: .59rem; } .tablecloth { font-size: .4rem; } .tablecloth .room-mark { width: 23px; } .mosaic-column-clues, .mosaic-row { grid-template-columns: 52px repeat(9, minmax(28px, 1fr)); min-width: 340px; } .mosaic-row-cells { grid-template-columns: repeat(9, minmax(28px, 1fr)); } .nonogram-frame { padding-left: 9px; padding-right: 9px; } .shelf-grid { grid-template-columns: 1fr; background: repeating-linear-gradient(0deg, transparent 0 188px, #5b3626 188px 202px); } .trophy-total { align-self: center; min-width: 120px; } .trophy-footer { align-items: start; flex-direction: column; } }

/* Focused wordwork, explicit nonogram states, and readable scoring boards. */
.ravel-endpoints { display: flex; align-items: center; justify-content: space-between; gap: 15px; max-width: 720px; margin: 26px auto 16px; }
.ravel-endpoint-rule { color: var(--muted); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.ravel-ladder { display: grid; gap: 7px; max-width: 720px; margin: 0 auto 18px; }
.ravel-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 86px; align-items: center; gap: 11px; padding: 10px 13px; background: rgba(244,229,200,.48); border: 1px solid rgba(183,138,85,.38); border-left: 4px solid transparent; transition: background .15s ease, border-color .15s ease, transform .15s ease; cursor: pointer; }
.ravel-row:hover, .ravel-row.is-focused { background: #f4e5c8; border-left-color: var(--accent); transform: translateX(3px); }
.ravel-row.is-solved .ravel-input { color: #356d56; border-color: #7da58d; }
.ravel-row-number { color: var(--muted); font: 700 .72rem Georgia, serif; letter-spacing: .1em; }
.ravel-row-word { min-width: 0; }
.ravel-row-state { color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-align: right; text-transform: uppercase; }
.ravel-row.is-focused .ravel-row-state { color: var(--accent); }
.ravel-current-clue { grid-column: 2 / -1; padding: 10px 0 2px; border-top: 1px solid rgba(152,96,53,.22); }
.ravel-current-clue p { margin: 3px 0 0; color: var(--ink); font: 1rem/1.35 Georgia, serif; }
.ravel-focus-note { display: grid; gap: 4px; max-width: 720px; margin: 15px auto 0; padding: 13px 15px; color: var(--ink); background: rgba(255,255,255,.4); border-left: 3px solid var(--accent); }
.ravel-focus-note b { color: var(--accent); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.ravel-focus-note span { font: 1rem/1.35 Georgia, serif; }
.counterpoint-clock { display: grid; min-width: 82px; padding: 8px 11px; color: #fff4e5; background: #38233d; border: 1px solid #a887af; text-align: center; }
.counterpoint-clock .mini-label { margin: 0; color: #d7c2dc; }
.counterpoint-clock b { font: 700 1.55rem Georgia, serif; letter-spacing: .08em; }
.counterpoint-progress { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.counterpoint-board-toggle { margin: 11px 0; }
.counterpoint-board { display: grid; gap: 5px; margin: 13px 0 0; padding: 0; list-style: none; }
.counterpoint-band { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 9px; background: rgba(255,255,255,.42); border-left: 3px solid #a18aa9; }
.counterpoint-band.is-zero { border-left-color: #b46b64; }
.counterpoint-band.is-sweet { border-left-color: #6b9b76; background: rgba(222,239,224,.58); }
.counterpoint-band.is-open { border-left-color: #c38a45; }
.counterpoint-band span { color: var(--muted); font-size: .57rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.counterpoint-band b { color: var(--accent); font-size: .67rem; }
.counterpoint-band p { grid-column: 1 / -1; margin: 2px 0 0; color: var(--ink); font-size: .68rem; line-height: 1.35; }
.counterpoint-reveal { margin: 15px auto; padding: 15px; max-width: 860px; background: rgba(255,255,255,.37); border: 1px solid var(--line); text-align: left; }
.counterpoint-reveal > div:first-child { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; }
.counterpoint-reveal > div:first-child span, .counterpoint-reveal > div:first-child small { color: var(--muted); font-size: .62rem; }
.counterpoint-reveal > div:first-child small { grid-column: 1 / -1; }
.counterpoint-reveal > div:first-child b { color: var(--accent); font: 1.2rem Georgia, serif; }
.counterpoint-final-board .counterpoint-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaic-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; max-width: 680px; margin: 0 auto 13px; }
.mosaic-tool { min-height: 37px; padding: 8px 12px; color: #f4e8cd; background: #563039; border: 1px solid #b78466; border-radius: 3px; font-size: .67rem; font-weight: 800; letter-spacing: .05em; }
.mosaic-tool:hover, .mosaic-tool.is-selected { color: #382124; background: #efd18a; border-color: #f5dfad; }
.mosaic-tool-help { margin-left: auto; color: rgba(255,255,255,.65); font-size: .62rem; }
.mosaic-cell.is-empty { color: #8b4548; background: #f2e7d1; font-size: 1.35rem; font-weight: 800; }
.mosaic-cell.is-unknown { color: rgba(255,255,255,.3); }
.mosaic-cell.is-line-focused { outline: 2px solid #8ad4c3; outline-offset: -3px; }
.mosaic-row-clue, .mosaic-column-clue { cursor: pointer; }
.mosaic-row-clue, .mosaic-column-clue { border: 0; background: transparent; font: inherit; }
.mosaic-row-clue:hover, .mosaic-column-clue:hover { color: #fff2bd; }
.tide-cell.is-dry { background: #d8b768; border-color: #f2daa0; }
.tide-cell.is-water { background: #316a7b; }
.tide-cell.is-correct { box-shadow: inset 0 0 0 2px rgba(255,255,255,.16); }
.tide-cell.is-wrong { box-shadow: inset 0 0 0 2px rgba(170,57,58,.65); }
.tide-cell.is-shortest { outline: 3px solid #f2c66b; outline-offset: -4px; }
.marginalia-search-panel .answer-input { min-height: 42px; font-size: .9rem; }
.shelf-search-results { display: grid; gap: 6px; margin-top: 11px; }
.shelf-search-result { display: grid; gap: 3px; padding: 9px 10px; background: rgba(255,255,255,.44); border-left: 3px solid var(--accent); }
.shelf-search-result b { color: var(--ink); font: 1rem Georgia, serif; }
.shelf-search-result span, .search-empty { color: var(--muted); font-size: .68rem; line-height: 1.35; }
.search-empty { margin: 0; }
@media (max-width: 700px) { .ravel-endpoints { gap: 7px; } .ravel-endpoint-rule { font-size: .48rem; text-align: center; } .ravel-row { grid-template-columns: 30px minmax(0, 1fr); gap: 7px; } .ravel-row-state { grid-column: 2; text-align: left; } .ravel-current-clue { grid-column: 1 / -1; } .counterpoint-final-board .counterpoint-board { grid-template-columns: 1fr; } .mosaic-tool-help { width: 100%; margin-left: 0; } }