: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, body { overflow-x: hidden; }
[hidden] { display: none !important; }
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; }
.button:focus-visible, .file-button:focus-within { outline: 3px solid var(--brass); outline-offset: 3px; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 50%; font-size: 1.5rem; line-height: 1; }
.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; }
.local-tools { gap: 10px; }
.local-tools > p:not(.eyebrow), .feedback-details p { line-height: 1.5; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.file-button { position: relative; overflow: hidden; cursor: pointer; }
.local-tools .small-note { margin-bottom: 0; }
.feedback-details { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); }
.feedback-details summary { color: var(--accent); cursor: pointer; font-size: .76rem; font-weight: 800; }
.feedback-details form { display: grid; gap: 7px; margin-top: 13px; }
.feedback-details label:not(.checkbox-label) { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.feedback-details select, .feedback-details textarea { width: 100%; padding: 9px 10px; color: var(--ink); background: rgba(255,255,255,.62); border: 1px solid var(--line); border-radius: 3px; }
.feedback-details textarea { min-height: 104px; resize: vertical; line-height: 1.45; }
.checkbox-label { display: flex; align-items: start; gap: 7px; color: var(--muted); font-size: .7rem; line-height: 1.35; }
.checkbox-label input { margin-top: 2px; accent-color: var(--accent); }
.support-cta { width: 100%; margin-top: 14px; }
.tutorial-dialog { width: min(560px, calc(100% - 28px)); padding: 0; color: var(--ink); background: transparent; border: 0; }
.tutorial-dialog::backdrop { background: rgba(32, 24, 20, .58); backdrop-filter: blur(2px); }
.tutorial-card { padding: clamp(22px, 4vw, 36px); background: linear-gradient(145deg, #fff8eb, #ead7b8); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(34,24,18,.25); }
.tutorial-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.tutorial-heading h2 { margin-top: 5px; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.tutorial-progress { display: flex; gap: 6px; margin: 20px 0 22px; }
.tutorial-progress span { display: grid; place-items: center; width: 28px; height: 28px; color: var(--muted); border: 1px solid var(--line); border-radius: 50%; font-size: .7rem; font-weight: 800; }
.tutorial-progress span[aria-current="step"] { color: #fff9ef; background: var(--accent); border-color: var(--accent); }
.tutorial-card h3 { margin-bottom: 9px; font-size: 1.5rem; }
.tutorial-card [data-tutorial-slide] p { max-width: 47ch; color: var(--muted); line-height: 1.65; }
.tutorial-actions { display: flex; justify-content: end; gap: 8px; margin-top: 26px; }
.tutorial-actions [disabled] { visibility: hidden; }
@media (max-width: 700px) {
  .game-topline { align-items: start; flex-wrap: wrap; }
  .room-layout { padding-bottom: 44px; }
  .room-aside { padding-top: 0; }
  .tutorial-actions { justify-content: stretch; }
  .tutorial-actions .button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !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(var(--thread-size, 6), 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,.86); stroke-width: .62; filter: drop-shadow(0 0 .1px #f8d46e); }
.thread-trace.hint { stroke: #d5a3df; stroke-dasharray: .2 .12; stroke-width: .52; opacity: .94; }
.thread-trace.active { stroke: rgba(244,181,73,.98); stroke-width: .6; filter: drop-shadow(0 0 .16px #fff); }
.thread-trace.replay { stroke-width: .88; opacity: .96; filter: drop-shadow(0 0 .12px rgba(255,255,255,.85)); }
.thread-trace.replay-trace-0 { stroke: #f39b62; }
.thread-trace.replay-trace-1 { stroke: #78d6c5; }
.thread-trace.replay-trace-2 { stroke: #d88be4; }
.thread-trace.replay-trace-3 { stroke: #f2cf69; }
.thread-trace.replay-trace-4 { stroke: #83b8f1; }
.thread-trace.replay-trace-5 { stroke: #ec7691; }
.thread-trace.replay-trace-6 { stroke: #b7df70; }
.thread-trace.replay-trace-7 { stroke: #c9a2f0; }
.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(var(--thread-size, 6), 1fr); gap: 5px; max-width: 430px; 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; }
.replay-cell { cursor: default; }
.replay-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; max-width: 620px; margin: 15px auto 23px; padding: 0; list-style: none; }
.replay-legend li { display: grid; grid-template-columns: 16px 1fr; column-gap: 8px; align-items: center; padding: 7px 9px; color: var(--ink); background: rgba(255,255,255,.48); border-bottom: 1px solid var(--line); }
.replay-legend b { font: 700 1rem Georgia, serif; }
.replay-legend small { grid-column: 2; color: var(--muted); font-size: .68rem; }
.replay-swatch { grid-row: 1 / span 2; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.75); }
.replay-swatch-0 { background: #f39b62; }.replay-swatch-1 { background: #78d6c5; }.replay-swatch-2 { background: #d88be4; }.replay-swatch-3 { background: #f2cf69; }.replay-swatch-4 { background: #83b8f1; }.replay-swatch-5 { background: #ec7691; }.replay-swatch-6 { background: #b7df70; }.replay-swatch-7 { background: #c9a2f0; }

.tideglass-panel { --water: #3b8190; --shore: #dfbc71; }
.tide-optimal { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 3px 12px; margin: 18px auto 10px; max-width: 620px; padding: 12px 16px; color: #f4e8c9; background: #243f4a; border: 2px solid #83b8ad; border-radius: 6px; box-shadow: 0 5px 0 rgba(22,37,41,.16); }
.tide-optimal span { color: #b8ddd3; font-size: .64rem; font-weight: 800; letter-spacing: .14em; }
.tide-optimal b { color: #f6d27f; font: 700 1.25rem Georgia, serif; }
.tide-optimal small { grid-column: 1 / -1; color: rgba(244,232,201,.75); font-size: .68rem; }
.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(var(--tide-size, 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 { display: grid; place-items: center; 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; line-height: 1; 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 { width: min(100%, 620px); box-sizing: border-box; margin: 24px auto 20px; padding: 42px; 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; width: 100%; min-height: 0; aspect-ratio: 1; 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 { display: none; }
.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.is-filled { cursor: pointer; }
.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, .dinner-seat .dinner-art { width: 76px; height: 76px; border-radius: 12px; }
.dinner-seat .dinner-badge, .dinner-seat .portrait-prop, .dinner-seat .seat-caption { display: none; }
.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; }
.dinner-art { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #d4c0a8; }
.dinner-portrait-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.dinner-art-fallback { display: none; position: absolute; inset: 0; }
.dinner-art.is-fallback .dinner-portrait-image { display: none; }
.dinner-art.is-fallback .dinner-art-fallback { display: block; }
.dinner-art-fallback .portrait-prop { display: none; }
.dinner-badge { position: absolute; bottom: 8px; z-index: 2; display: grid; place-items: center; width: 31px; height: 31px; color: #4a3424; background: #f6e5bf; border: 2px solid rgba(118,91,63,.9); border-radius: 50%; box-shadow: 0 2px 5px rgba(40,26,19,.28); }
.dinner-badge-item { left: 8px; }
.dinner-badge-drink { right: 8px; }
.dinner-badge svg { width: 19px; height: 19px; }
.dinner-atlas-mark { display: block; width: 23px; height: 23px; background-repeat: no-repeat; background-size: 400% 400%; background-position: var(--icon-x) var(--icon-y); image-rendering: auto; }
.prop-mark { background-image: url('/assets/dinner/icons/items-atlas.jpg'); }
.drink-mark { background-image: url('/assets/dinner/icons/drinks-atlas.jpg'); }
.dinner-scoreboard { display: flex; align-items: center; gap: 18px; }
.dinner-clock { display: grid; gap: 1px; padding-left: 15px; border-left: 1px solid var(--line); color: var(--accent); }
.dinner-clock small { font: 700 .58rem/1.1 Arial, sans-serif; letter-spacing: .12em; }
.dinner-clock b { font: 700 1.16rem/1 Georgia, serif; }
.score-breakdown { display: flex; justify-content: center; gap: 10px; margin: 18px auto; }
.score-breakdown span { min-width: 92px; padding: 9px 8px; background: rgba(255,255,255,.48); border: 1px solid var(--line); text-align: center; }
.score-breakdown b, .score-breakdown small { display: block; }
.score-breakdown b { color: var(--accent); font: 700 1.25rem/1 Georgia, serif; }
.score-breakdown small { margin-top: 4px; font: 700 .58rem/1.2 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.dinner-badge:focus-visible { outline: 3px solid #f4d37f; outline-offset: 2px; }
.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; }
.shelf-page { max-width: 1120px; margin: 0 auto; padding: clamp(28px, 5vw, 62px) clamp(18px, 5vw, 70px) 80px; }
.shelf-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.shelf-heading h1 { margin-bottom: 12px; font-size: clamp(3.2rem, 7vw, 6rem); letter-spacing: -.06em; }
.shelf-heading p:last-child { max-width: 620px; color: var(--muted); line-height: 1.6; }
.shelf-count { display: grid; place-items: center; flex: 0 0 auto; 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; }
.shelf-count b { color: var(--brass-light); font: 700 2.8rem Georgia, serif; }
.shelf-count span { color: #d9c2a6; font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; }
.shelf-panel { padding: clamp(18px, 3vw, 32px); background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(239,224,204,.68)); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.shelf-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3px 16px; max-width: 760px; margin-bottom: 24px; }
.shelf-toolbar .answer-label { grid-column: 1 / -1; }
.shelf-toolbar .answer-input { margin: 0; }
.shelf-search-count { margin: 0; color: var(--muted); font-size: .7rem; }
.book-shelf-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; max-height: min(62vh, 620px); overflow-y: auto; padding: 4px 8px 10px 4px; }
.book-shelf-book { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 14px; min-height: 106px; padding: 14px 16px; background: linear-gradient(145deg, #f5ead4, #dfc6a3); border: 1px solid #a37a4e; box-shadow: 0 5px 0 #8a5d3b, inset 0 0 0 4px rgba(255,255,255,.24); }
.book-spine-mark, .shelf-empty-mark { display: grid; place-items: center; color: var(--accent); background: rgba(255,255,255,.45); border: 1px solid #bd9360; }
.book-spine-mark { width: 48px; height: 70px; }
.book-spine-mark .room-mark { width: 27px; height: 27px; }
.book-shelf-copy { min-width: 0; }
.book-shelf-copy h2 { margin: 0 0 7px; color: #4b2f26; font: 700 clamp(1.05rem, 2vw, 1.4rem) Georgia, serif; overflow-wrap: anywhere; }
.book-shelf-copy p { margin: 0; color: #795a45; font-size: .72rem; }
.shelf-empty { display: grid; justify-items: center; min-height: 260px; padding: 36px 18px; border: 1px dashed var(--accent); background: rgba(255,255,255,.35); text-align: center; }
.shelf-empty-mark { width: 64px; height: 78px; margin-bottom: 18px; }
.shelf-empty-mark .room-mark { width: 32px; height: 32px; }
.shelf-empty h2 { margin-bottom: 8px; }
.shelf-empty p { max-width: 430px; margin: 0; color: var(--muted); line-height: 1.55; }
.shelf-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 35px; }
.shelf-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-wrap { width: 100%; max-width: 100%; box-sizing: border-box; padding: 8px; border-width: 4px; overflow: hidden; } .dinner-table { width: 100%; min-width: 0; min-height: 0; aspect-ratio: 1; } .dinner-seat { width: clamp(48px, 16vw, 61px); min-height: 62px; padding: 3px; } .dinner-seat .dinner-portrait, .dinner-seat .dinner-art { width: 43px; height: 43px; } .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; } }

.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; }
.marginalia-guessing-desk { display: grid; gap: 8px; margin-top: 22px; padding: 17px; background: rgba(247,241,226,.72); border: 1px solid rgba(101,74,125,.28); box-shadow: inset 0 0 0 3px rgba(255,255,255,.32); }
.marginalia-guessing-title { display: grid; gap: 3px; margin-bottom: 4px; }
.marginalia-guessing-title h3 { margin: 0; color: #4d3863; font: 700 1.25rem Georgia, serif; }
.marginalia-guessing-title p:last-child { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.marginalia-guessing-desk .control-row { margin-top: 4px; }
.shelf-search-results { display: grid; gap: 6px; margin-top: 11px; }
.shelf-search-result { display: grid; width: 100%; gap: 3px; padding: 9px 10px; color: inherit; background: rgba(255,255,255,.44); border: 0; border-left: 3px solid var(--accent); text-align: left; }
.shelf-search-result:hover, .shelf-search-result:focus-visible { background: rgba(255,255,255,.78); }
.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; } }

body[data-room-theme="threadlight"] { --accent: #82c7c4; --accent-soft: #c6e5e1; --room-wash: #dce9ea; }
body[data-room-theme="threadlight"] .loom-stage { background: linear-gradient(145deg, #1f3142, #314f67 58%, #20333f); border-color: #16232f; box-shadow: inset 0 0 0 2px #78b5bb, 0 14px 28px rgba(23,42,54,.22); }
body[data-room-theme="threadlight"] .loom-label { color: #b9e3df; }
body[data-room-theme="threadlight"] .loom-cell { background: #e7f1ef; color: #274256; border-color: #91b5b7; }
body[data-room-theme="threadlight"] .loom-cell.is-warmed { color: #173a42; background: #a8d8cc; border-color: #d2f2e4; }
body[data-room-theme="threadlight"] .loom-cell.is-selected { outline-color: #f3d58e; }
body[data-room-theme="threadlight"] .loom-trace-path { stroke: #d8f1de; }

.ravel-focus-note { min-height: 76px; margin-top: 22px; background: #f7ead2; box-shadow: inset 0 0 0 1px rgba(183,138,85,.2); }
.ravel-ladder { position: relative; gap: 0; max-width: 720px; margin: 0 auto 22px; padding: 10px 0; }
.ravel-ladder::before { content: ""; position: absolute; z-index: 0; top: 36px; bottom: 36px; left: 39px; width: 2px; background: #b78a55; opacity: .55; }
.ravel-row { position: relative; z-index: 1; grid-template-columns: 78px minmax(0, 1fr) 102px; min-height: 72px; margin: 0; padding: 10px 15px; border-width: 1px 1px 1px 4px; border-radius: 0; }
.ravel-row + .ravel-row { border-top-color: rgba(183,138,85,.18); }
.ravel-row-number { align-self: center; text-align: center; }
.ravel-row-word { display: grid; justify-items: center; }
.ravel-input, .ravel-fixed-word { width: min(100%, 232px); text-align: center; font-family: "Courier New", monospace; font-size: 1.1rem; font-weight: 800; letter-spacing: .22em; }
.ravel-fixed-word { display: block; padding: 11px 10px; color: var(--accent); background: rgba(255,255,255,.48); border: 1px solid #b78a55; }
.ravel-fixed-row { background: #ead5ae; border-left-color: #b78a55; }
.ravel-fixed-row .ravel-row-state { color: #8a633b; }
.ravel-end-row { background: #e0e8dc; border-left-color: #5c896e; }
.ravel-end-row .ravel-fixed-word { color: #356d56; border-color: #7da58d; }
.ravel-row-state { white-space: nowrap; }
.ravel-current-clue { display: none; }

.mosaic-rows { touch-action: none; user-select: none; }
.mosaic-cell { cursor: crosshair; }
.mosaic-cell.is-filled { box-shadow: inset 0 0 0 2px rgba(255,245,201,.45); }
.mosaic-cell.is-empty { text-shadow: 0 1px 0 #fff8e9; }
.mosaic-replay .mosaic-cell { cursor: default; }
.tide-cell.is-inactive, .tide-chart-cell.is-inactive { visibility: hidden; pointer-events: none; background: transparent; border-color: transparent; }
.tideglass-replay .tide-cell, .tideglass-replay .tide-chart-cell { cursor: default; }
@media (max-width: 700px) { .nonogram-frame { overflow-x: hidden; } .mosaic-column-clues, .mosaic-row { grid-template-columns: 43px repeat(9, minmax(0, 1fr)); min-width: 0; gap: 3px; } .mosaic-row-cells { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; } .mosaic-row-clue { gap: 3px; padding-right: 3px; font-size: .59rem; } .mosaic-column-clue { font-size: .59rem; } }

.tide-clock, .mosaic-clock { grid-column: 1 / -1; color: #f6d27f; font: 700 1.05rem Georgia, serif; letter-spacing: .04em; }
.mosaic-clock { display: block; margin: 0 0 8px; color: var(--accent); font-size: 1rem; }

.character-card .portrait-frame { padding: 4px; background: #efe3cb; border-color: #b69268; box-shadow: 0 4px 0 rgba(91,58,35,.12); }
.dinner-portrait { display: block; width: 100%; height: auto; }
.is-replay-seat { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 5px; background: transparent; border: 0; box-shadow: none; cursor: default; }
.is-replay-seat .portrait-frame { display: block; width: 68px; padding: 2px; background: #f0e3c9; }
.is-replay-seat .dinner-portrait { width: 100%; height: auto; }
.is-replay-seat .dinner-art { width: 100%; }
.dinner-replay .dinner-table { min-height: 540px; }
.dinner-replay .seat-caption { max-width: 105px; overflow: hidden; color: #f2dfb5; font-size: .53rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 700px) {
  .ravel-row { grid-template-columns: 50px minmax(0, 1fr) 66px; min-height: 66px; gap: 6px; padding: 8px 8px; }
  .ravel-ladder::before { left: 25px; }
  .ravel-row-state { grid-column: auto; text-align: right; font-size: .5rem; }
  .ravel-input, .ravel-fixed-word { width: 100%; font-size: .88rem; letter-spacing: .13em; }
  .dinner-replay .dinner-table { min-height: 350px; }
  .is-replay-seat .portrait-frame { width: 48px; }
  .dinner-replay .seat-caption { max-width: 64px; font-size: .43rem; }
  .dinner-badge { bottom: 5px; width: 24px; height: 24px; border-width: 1px; }
  .dinner-badge-item { left: 5px; }
  .dinner-badge-drink { right: 5px; }
  .dinner-badge svg { width: 15px; height: 15px; }
  .dinner-atlas-mark { width: 18px; height: 18px; }
}

.archive-page { max-width: 1120px; margin: 0 auto; padding: clamp(34px, 6vw, 75px) clamp(18px, 5vw, 70px) 80px; }
.archive-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.archive-heading h1 { margin-bottom: 12px; font-size: clamp(3.1rem, 7vw, 5.8rem); letter-spacing: -.06em; }
.archive-heading p:last-child { max-width: 640px; color: var(--muted); line-height: 1.6; }
.archive-entitlement { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.archive-entitlement p:last-child { max-width: 740px; margin-bottom: 0; color: var(--muted); line-height: 1.55; }
.archive-lock { display: grid; place-items: center; flex: 0 0 auto; width: 64px; height: 64px; color: var(--accent); background: rgba(255,255,255,.46); border: 1px solid var(--line); font-size: 1.7rem; }
.archive-history { margin-top: 42px; }
.archive-history .section-heading { margin-bottom: 14px; }
.archive-count { color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.archive-day-card { margin: 10px 0; padding: 17px 18px; background: linear-gradient(145deg, #f4e8d1, #e1c9a9); border: 1px solid #a37a4e; box-shadow: 0 6px 0 #8a5d3b; }
.archive-day-heading { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.archive-day-heading b { color: #4b2f26; font: 1.18rem Georgia, serif; }
.archive-day-heading span { color: #795a45; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.archive-room-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 13px; }
.archive-room-list span { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 8px; color: #4b2f26; background: rgba(255,255,255,.4); border-left: 3px solid var(--accent); }
.archive-room-list .room-mark { width: 18px; height: 18px; }
.archive-room-list b { font-size: .67rem; }
.archive-empty { padding: 24px; background: rgba(255,255,255,.35); border: 1px dashed var(--accent); }
.archive-empty h2 { margin-bottom: 8px; }
.archive-empty p:last-child, .archive-note { color: var(--muted); line-height: 1.55; }
.archive-note { margin: 28px 0 0; font-size: .72rem; }
@media (max-width: 700px) { .archive-heading { align-items: start; flex-direction: column; } .archive-entitlement { align-items: start; } .archive-room-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .archive-day-heading { align-items: start; flex-direction: column; gap: 5px; } }
.dinner-replay .dinner-table { min-height: 0; }
.dinner-table-wrap { width: min(100%, 560px); padding: 28px; overflow: visible; }
.dinner-badge { overflow: hidden; isolation: isolate; }
.dinner-atlas-mark { border-radius: 50%; overflow: hidden; }
.dinner-seat { width: clamp(58px, 12vw, 88px); min-height: 0; padding: 5px 4px 6px; }
.dinner-seat .seat-number { display: block; min-height: 1em; }
.seat-note { display: block; width: 100%; min-height: 1em; overflow: hidden; color: #5c4836; font-size: .54rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.seat-empty { color: #8b693c; font-size: .52rem; font-weight: 700; text-transform: uppercase; }
.seat-portrait { display: block; width: 100%; }
.dinner-seat .dinner-portrait, .dinner-seat .dinner-art { width: 100%; height: auto; border-radius: 10px; }
.dinner-clue-row { display: block !important; padding: 0 !important; }
.dinner-clue-toggle { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; width: 100%; padding: 10px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(76,45,28,.1); text-align: left; cursor: pointer; }
.dinner-clue-toggle:hover { background: rgba(166,207,191,.12); }
.dinner-clue-toggle:focus-visible { outline: 3px solid #f4d37f; outline-offset: 2px; }
.clue-copy { color: var(--ink); font-size: .75rem; line-height: 1.45; }
.dinner-clue-row.is-crossed .clue-copy { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.dinner-clue-row.is-crossed .clue-scope { opacity: .6; }
.dinner-clue-row.is-hint .clue-scope { color: #805b25; background: rgba(235,196,113,.35); }
.dinner-replay .dinner-seat { width: clamp(58px, 12vw, 88px); }
.dinner-replay .seat-note { color: #f2dfb5; }
@media (max-width: 700px) {
  .dinner-table-wrap { padding: 22px; }
  .dinner-seat, .dinner-replay .dinner-seat { width: clamp(48px, 14vw, 62px); padding: 4px 3px 5px; }
  .seat-note { font-size: .44rem; }
  .seat-empty { font-size: .43rem; }
}
@media (max-width: 700px) {
  .dinner-table-wrap { width: 100%; padding: 34px 30px; overflow: visible; }
  .dinner-table { width: 100%; }
  .dinner-seat { width: clamp(48px, 16vw, 61px); min-height: 62px; }
  .dinner-seat .dinner-portrait, .dinner-seat .dinner-art { width: 43px; height: 43px; }
  .shelf-page { padding-left: 16px; padding-right: 16px; }
  .shelf-heading { align-items: start; flex-direction: column; }
  .shelf-count { align-self: center; min-width: 120px; }
  .shelf-toolbar { grid-template-columns: 1fr; }
  .shelf-search-count { margin-top: 5px; }
  .book-shelf-list { grid-template-columns: 1fr; max-height: none; padding-right: 4px; }
  .shelf-footer { align-items: start; flex-direction: column; }
}
@media (max-width: 700px) {
  .dinner-table-wrap { width: 100%; padding: 22px; overflow: visible; }
  .dinner-seat, .dinner-replay .dinner-seat { width: clamp(48px, 14vw, 62px); min-height: 0; padding: 4px 3px 5px; }
  .dinner-seat .dinner-portrait, .dinner-seat .dinner-art { width: 100%; height: auto; }
}

.trophy-case { max-width: 1180px; margin: 0 auto; padding: clamp(30px, 6vw, 76px) clamp(18px, 5vw, 70px) 80px; }
.trophy-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; margin-bottom: 18px; padding: clamp(25px, 5vw, 52px); color: #f8e9ce; background: radial-gradient(circle at 84% 15%, rgba(230,201,137,.2), transparent 13rem), linear-gradient(135deg, #2b1916, #523326 60%, #2a1716); border: 1px solid #a17243; box-shadow: 0 12px 0 rgba(65,38,24,.18), inset 0 0 0 7px rgba(230,201,137,.08); }
.trophy-hero .eyebrow { color: var(--brass-light); }
.trophy-hero h1 { margin-bottom: 9px; color: #fff5e6; font-size: clamp(2.7rem, 7vw, 5.4rem); letter-spacing: -.055em; }
.trophy-hero p:last-child { margin: 0; color: #dbc6a7; line-height: 1.5; }
.trophy-total { display: grid; justify-items: end; align-content: end; min-width: 170px; }
.trophy-total b { color: var(--brass-light); font: 700 clamp(3rem, 7vw, 5.7rem)/.8 Georgia, serif; }
.trophy-total span { margin-top: 10px; color: #dbc6a7; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.featured-achievement { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 19px; margin: 25px 0 26px; padding: 20px 22px; background: linear-gradient(135deg, #f5e5bd, #ead0a4); border: 1px solid #b0834d; box-shadow: 0 6px 0 rgba(120,77,42,.2); }
.featured-icon { display: grid; place-items: center; width: 70px; height: 70px; color: #6e421f; background: rgba(255,249,225,.55); border: 1px solid #b0834d; border-radius: 50%; box-shadow: inset 0 0 0 6px rgba(255,255,255,.24); }
.featured-icon .achievement-icon { width: 36px; height: 36px; }
.featured-copy .eyebrow { margin-bottom: 4px; color: #8b5428; }
.featured-copy h2 { margin-bottom: 5px; color: #3c271c; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.featured-copy p:not(.eyebrow) { margin-bottom: 13px; color: #6d5138; line-height: 1.4; }
.featured-copy small { display: block; margin-top: 7px; color: #795a3d; font-weight: 800; }
.featured-progress, .achievement-card-progress { height: 7px; overflow: hidden; background: rgba(97,58,28,.16); border-radius: 999px; }
.featured-progress span, .achievement-card-progress span { display: block; height: 100%; background: #936026; border-radius: inherit; }
.featured-achievement > .button { white-space: nowrap; }
.trophy-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.trophy-filters .button.quiet { color: #65452f; background: rgba(255,255,255,.42); }
.trophy-filters .button.quiet.is-active { color: #fff8eb; background: var(--wood); border-color: var(--wood); }
.achievement-shelves { display: grid; gap: 34px; }
.achievement-shelf-section { position: relative; }
.achievement-shelf-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 11px; padding: 0 4px; }
.achievement-shelf-heading .eyebrow { margin-bottom: 4px; color: var(--accent); }
.achievement-shelf-heading h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.35rem); }
.achievement-shelf-heading > span { color: var(--accent); font: 700 1.2rem Georgia, serif; }
.achievement-shelf-section .shelf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 15px; background: linear-gradient(180deg, #4a2e24, #2b1b18); border: 7px solid #2a1917; border-top-color: #7f5835; border-bottom-color: #6c462c; box-shadow: 0 8px 0 rgba(56,32,22,.17), inset 0 0 0 1px #b27d48; }
.achievement-shelf-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; min-height: 196px; padding: 16px; color: var(--ink); background: linear-gradient(145deg, #fbf2df, #ead7b8); border: 1px solid #c19a67; box-shadow: 0 4px 0 rgba(107,68,38,.22); }
.achievement-shelf-card.is-earned { background: linear-gradient(145deg, #fff7e6, #e8d0a7); }
.achievement-shelf-card.is-locked { background: linear-gradient(145deg, #eee4d2, #d6c7b1); }
.achievement-card-top, .achievement-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.achievement-card-top .eyebrow { margin: 0; color: var(--accent); font-size: .59rem; }
.achievement-card-count { color: #7b5a3b; font-size: .7rem; font-weight: 800; }
.achievement-card-body { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 11px; min-width: 0; margin: 16px 0 14px; }
.achievement-card-icon { display: grid; place-items: center; width: 48px; height: 48px; color: #8c5b2b; background: rgba(255,255,255,.55); border: 1px solid #c19a67; border-radius: 50%; }
.achievement-shelf-card.is-locked .achievement-card-icon { color: #8a8379; filter: saturate(.35); }
.achievement-card-icon .achievement-icon { width: 25px; height: 25px; }
.achievement-card-body h3 { margin-bottom: 6px; font-size: 1.18rem; }
.achievement-card-body p { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.38; }
.achievement-card-body > div:last-child { min-width: 0; }
.achievement-card-progress { align-self: end; }
.achievement-card-foot { align-self: end; margin-top: 10px; color: #806448; font-size: .66rem; }
.achievement-card-foot a { color: var(--accent); font-weight: 800; text-decoration: none; white-space: nowrap; }
.achievement-card-foot a:hover { text-decoration: underline; }
.trophy-archive { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 38px; }
.trophy-archive .archive-panel-mark { display: grid; place-items: center; width: 52px; height: 52px; color: var(--accent); background: rgba(255,255,255,.38); border: 1px solid var(--line); border-radius: 50%; }
.trophy-archive h2 { margin-bottom: 4px; font-size: 1.6rem; }
.trophy-archive .eyebrow { margin-bottom: 4px; }
.trophy-archive p:last-child { margin: 0; color: var(--muted); font-size: .8rem; }
.trophy-archive .text-link { white-space: nowrap; }
.trophy-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 19px; border-top: 1px solid var(--line); }
.trophy-footer p { margin: 0; color: var(--muted); font-size: .72rem; }
.achievement-shelf-card[hidden] { display: none; }
@media (max-width: 700px) {
  .trophy-case { padding-top: 26px; }
  .trophy-hero { grid-template-columns: 1fr; align-items: start; }
  .trophy-total { justify-items: start; min-width: 0; }
  .trophy-total b { font-size: 3.7rem; }
  .featured-achievement { grid-template-columns: auto minmax(0, 1fr); }
  .featured-achievement > .button { grid-column: 1 / -1; width: 100%; }
  .achievement-shelf-section .shelf-grid { grid-template-columns: 1fr; padding: 10px; }
  .achievement-shelf-card { min-height: 184px; }
  .trophy-archive { grid-template-columns: auto minmax(0, 1fr); }
  .trophy-archive .text-link { grid-column: 1 / -1; }
  .trophy-footer { align-items: start; flex-direction: column; }
}