/* Evening table theme. Presentation only; collection data and rules are unchanged. */
:root {
  --panel: #10292d;
  --gold: #ecc16e;
  --muted: #a1b4b1;
  --line: #30494b;
  --cream: #f4f0e6;
  color: var(--cream);
  background: #081b1f;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body {
  color: var(--cream);
  background: radial-gradient(ellipse at 85% 0, #274137 0, transparent 42%),
    radial-gradient(ellipse at 15% 90%, #112d30 0, transparent 45%), #081b1f;
}
body::before { opacity: .035; z-index: 0; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea { transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
header {
  height: 80px;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(110deg, #0a1c20fa, #0b2023f7 58%, #192824f5);
  border-bottom: 1px solid #b4944c48;
  box-shadow: 0 5px 24px #020f1360;
}
.brand { gap: 14px; font: 600 34px/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.035em; color: #f4cf82; }
.brandmark { display: grid; place-items: center; font-size: 39px; color: #efbb61; filter: drop-shadow(0 0 10px #e5a44840); }
.brandmark .icon { width: 42px; height: 42px; stroke-width: 1.5; }
.source { font-size: 14px; color: #b6c6c1; display: inline-flex; align-items: center; gap: 8px; }
.source:hover { color: var(--gold); }
main { grid-template-columns: 354px minmax(0, 1fr); max-width: 1760px; min-height: calc(100vh - 80px); position: relative; }
aside {
  padding: 20px 16px 14px;
  background: linear-gradient(100deg, #071c20f7, #0b2226f5);
  border-right: 1px solid #8e84503b;
  box-shadow: 10px 0 30px #03121622;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.shelfhead { padding: 0 5px; flex-shrink: 0; }
.eyebrow { font-size: 12px; letter-spacing: .16em; color: #c1a56d; }
h1 { font: 500 25px/1.2 Georgia, serif; color: #eee8d9; margin: 4px 0 5px; }
.shelfhead p { margin: 0 0 10px; font-size: 12px; line-height: 1.5; }
.search-field { position: relative; flex-shrink: 0; }
.search-field > .icon { position: absolute; top: 17px; left: 13px; width: 19px; height: 19px; color: #b6c5bf; pointer-events: none; }
#search { margin: 3px 0 12px; padding: 12px 12px 12px 40px; border-radius: 8px; border-color: #50696a; background: #071b1fd9; color: var(--cream); font-size: 16px; box-shadow: inset 0 2px 6px #0002; }
#search::placeholder { color: #a0b0ab; }
#search:focus { border-color: var(--gold); box-shadow: 0 0 0 2px #e5b65e17; }
.filter-head { margin: 0 2px 8px; font-size: 14px; flex-shrink: 0; }
.filter-head strong { font-size: 14px; font-weight: 500; color: #b8c7c0; }
.filter-head button { font-size: 12px; color: #ccad72; padding: 4px 0 4px 8px; text-decoration: none; }
.filter-head button:hover { color: #f8d391; text-decoration: underline; }
.filter-grid { gap: 8px 9px; flex-shrink: 0; }
.filter-grid label { font-size: 14px; gap: 4px; color: #a2b5b0; }
.filter-grid select { padding: 8px 25px 8px 10px; height: 36px; font-size: 14px; border-radius: 7px; color: #e6e9df; background: #0c252a; border: 1px solid #3b5558; cursor: pointer; }
.filter-grid label:has(option:checked:not([value=""])) { color: #edc275; }
.filter-grid select:has(option:checked:not([value=""])) { background-color: #26382e; background-image: none; border-color: #c99e55; color: #ffe0a0; box-shadow: inset 0 0 12px #dc9e2810, 0 0 9px #d2a34814; }
.guide-filter { grid-column: 1 / -1; justify-self: start; min-height: 32px; gap: 7px!important; font-size: 14px!important; padding: 5px 10px; background: #10272a; border-color: #385256; }
.guide-filter:has(input:checked) { border-color: #c6a15b; background: #343624; color: #f9d390!important; }
.guide-filter input { margin: 0; width: 16px; height: 16px; }
#results { flex-shrink: 0; font-size: 12px; margin: 10px 4px 8px; color: #9eb2ad; }
#games { display: flex; flex-direction: column; gap: 7px; max-height: none; flex: 1; min-height: 180px; overflow: auto; padding: 2px 5px 7px 0; scrollbar-width: thin; scrollbar-color: #526c66 transparent; }
.game { position: relative; flex-shrink: 0; border: 1px solid #314c4b78; background: linear-gradient(105deg, #132d31ce, #0c2327c9); border-radius: 8px; padding: 7px 9px; gap: 12px; min-height: 104px; box-shadow: 0 3px 9px #02101228; }
.game:hover { background: linear-gradient(105deg, #19383b, #102b2e); border-color: #6e797058; }
.game[aria-current=true] { background: linear-gradient(105deg, #2f342a, #142d30 48%, #182b28); border-color: #e5b75d; box-shadow: inset 0 0 0 1px #e2b25d26, inset 0 0 21px #e6ba6320, 0 0 10px #ddb05a20; }
.game strong { font: 600 16px/1.26 Georgia, "Times New Roman", serif; color: #f4efe4; overflow-wrap: anywhere; }
.game-copy { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.game-copy small { margin: 0; font-size: 12px; line-height: 1.3; color: #829e98; }
.game-copy small.ready { color: #d7bc7d; }
.list-meta { display: flex; flex-wrap: wrap; gap: 4px 11px; color: #b4c4be; font-size: 12px; line-height: 1.45; }
.list-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.list-meta .icon { width: 13px; height: 13px; opacity: .85; }
.cover-small { width: 64px; height: 86px; border-radius: 4px; }
.cover-small > span { font-size: 12px; }
.cover-small small { font-size: 9px; }
.cover { border-color: #d6c49a66; box-shadow: 2px 5px 12px #020b1180; }
.cover-image { background: #0b1c20; }
.cover-image img { object-fit: contain; }
.cover-large { width: 184px; height: 252px; border-radius: 7px; padding: 18px 16px; border-color: #d8bd7d88; box-shadow: 7px 13px 26px #020b13aa, -1px 0 0 #ffebbf24; }
.cover-large > span { font-size: 24px; }
.cover-large.cover-image { padding: 0; }
.cover-image.image-error .cover-fallback { padding: 9px; font-size: 12px; }
.cover-large.image-error .cover-fallback { padding: 18px; font-size: 24px; }
.import-note { flex-shrink: 0; margin: 8px 4px 0; font-size: 12px; line-height: 1.4; color: #7e9791; }
article { max-width: none; padding: 26px 30px 50px; }
.game-hero {
  position: relative;
  isolation: isolate;
  align-items: center;
  gap: 28px;
  min-height: 304px;
  padding: 24px 26px;
  margin: 0 0 22px;
  border: 1px solid #a398664d;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(90deg, #092128b8, #092128a6 48%, #0b242e60), url("assets/table-atmosphere.webp") center 54% / cover;
  box-shadow: 0 16px 35px #020e164a, inset 0 1px 0 #fff3d40a;
}
.game-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #071b20b8, transparent 70%); pointer-events: none; }
.hero-copy { align-self: center; }
.detail-top { justify-content: flex-start; flex-wrap: wrap; gap: 9px 12px; }
.pill { font-size: 12px; font-weight: 500; padding: 5px 8px; color: #e4c992; background: #333622c9; border-color: #b29a574f; border-radius: 5px; }
.pill.pending { color: #b5c5be; background: #0c2428ca; border-color: #50665b70; }
.edition { text-align: left; font-size: 13px; line-height: 1.4; color: #b6c4b8; }
h2 { font: 500 clamp(32px, 3.5vw, 54px)/1.06 Georgia, "Times New Roman", serif; letter-spacing: -.025em; margin: 15px 0 18px; color: #fcf7e9; text-shadow: 0 2px 9px #001019; overflow-wrap: anywhere; }
.meta { gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.meta .meta-chip { gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid #59716b8a; border-radius: 7px; background: #0a2028e8; box-shadow: 0 3px 9px #0002; }
.meta-chip > .icon { width: 23px; height: 23px; color: #edc069; }
.meta .meta-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 14px; padding: 0; border: 0; background: transparent; border-radius: 0; }
.meta .meta-text b { color: #a9bbb1; font-size: 12px; font-weight: 400; margin: 0; }
.source-game { color: #efc76e; font-size: 14px; margin: 0; text-decoration: none; background: #092127b5; border-bottom: 1px solid #cba65a45; padding: 5px 0; }
.source-game:hover { color: #ffe4a5; border-color: #edc16e; text-decoration: none; }
.sections { margin: 0 0 19px; border-color: #6680764f; border-radius: 7px; background: #0c2327; }
.sections a { display: flex; justify-content: center; align-items: center; gap: 7px; background: #0d2428b0; color: #d1d8cb; border-right-color: #6680763d; padding: 12px 5px; font-size: 14px; font-weight: 500; }
.sections a .icon { color: #d9b66e; width: 17px; height: 17px; }
.sections a:hover { background: #253a31; color: #f1cb7c; }
.guide-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 20px; }
.panel { background: linear-gradient(120deg, #153035ed, #0d252bed); border: 1px solid #7582738a; border-radius: 10px; padding: 23px 24px; margin-bottom: 19px; box-shadow: 0 9px 25px #020c134a, inset 0 1px 0 #f8dfa906; scroll-margin-top: 98px; }
.guide-grid > .panel { margin: 0; height: 100%; min-width: 0; }
.guide-grid > .panel:target { border-color: #e3b965; box-shadow: 0 0 0 1px #d3b15b26, 0 8px 25px #0003; }
h3 { font: 600 25px/1.18 Georgia, "Times New Roman", serif; color: #ecc273; margin: 0 0 19px; display: flex; align-items: center; gap: 13px; }
h3 > .icon { width: 28px; height: 28px; color: #efc16a; flex-shrink: 0; stroke-width: 1.8; }
.panel-title { flex-wrap: wrap; gap: 10px; align-items: center; }
.panel-title h3 { margin: 0; }
.reset { font-size: 12px; line-height: 1.4; color: #b5bfa7; text-underline-offset: 3px; padding: 4px 0; }
.reset:hover { color: #f0cc85; }
.setup-options { margin: 19px 0 13px; font-size: 14px; color: #c8d1c7; }
.setup-options select { padding: 6px 10px; min-width: 56px; background: #0a2026; border-color: #82927b9c; color: #f1d394; }
.progress { height: 3px; background: #385049; margin-top: 15px; }
.progress div { background: linear-gradient(90deg, #b88c42, #f0cc81); transition: width .2s ease; }
#progress-label { margin: 8px 0 3px; font-size: 12px; color: #a8b9b0; }
.checkrow { gap: 11px; padding: 10px 0; border-bottom-color: #6380752c; font-size: 16px; line-height: 1.6; }
.checkrow input { flex: 0 0 18px; width: 18px; height: 18px; margin: 4px 0 0; cursor: pointer; accent-color: #e3b66a; }
.checkrow span { min-width: 0; }
.checkrow:has(input:checked) span { color: #8da298; }
.steps { padding: 0; margin: 0; list-style: none; counter-reset: turn; }
.steps li { position: relative; padding: 0 0 0 33px; font-size: 16px; line-height: 1.63; margin: 0 0 13px; counter-increment: turn; }
.steps li:last-child { margin-bottom: 0; }
.steps li::before { content: counter(turn); position: absolute; top: 4px; left: 0; border: 1px solid #d8b56c; color: #efd48d; border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; font: 500 12px/1 Georgia, serif; }
#remember .steps li, #end .steps li { padding-left: 23px; }
#remember .steps li::before, #end .steps li::before { content: ""; top: 10px; width: 7px; height: 7px; background: #eac06e; border: none; }
.reminders { background: linear-gradient(125deg, #1b3230f2, #0d2529ef); border-color: #9086608c; }
.note-banner { font-size: 14px; line-height: 1.6; border-left: 2px solid #d9af60; background: #b6974912; color: #e0d1ae; padding: 10px 12px; margin: 0 0 16px; }
.references { margin: 8px 3px 23px; }
.references a { font-size: 14px; color: #bdbd9d; }
.references a:hover { color: #efc274; }
.references p { font-size: 12px; line-height: 1.5; max-width: 760px; color: #91a79d; }
.notes { background: #102a2dcc; border-color: #5872676e; }
.notes h3 { font-size: 22px; }
.notes textarea { background: #0a2126d9; border-color: #516b64; color: #f1eee3; min-height: 116px; font-size: 16px; line-height: 1.6; }
.notes textarea::placeholder { color: #92a69d; }
.notes p { font-size: 12px; line-height: 1.6; }
.no-guide { padding: 50px 28px; text-align: center; background: linear-gradient(130deg, #153035, #10292b); }
.no-guide > .icon { display: block; width: 36px; height: 36px; color: #bda169; margin: 0 auto 17px; }
.no-guide h3 { justify-content: center; margin: 0; color: #d8d9c9; font-size: 24px; }
.empty-list { line-height: 1.6; }
:focus-visible { outline: 2px solid #f4cd82; outline-offset: 4px; }
@media (min-width: 901px) {
  aside { position: sticky; top: 80px; height: calc(100vh - 80px); height: calc(100dvh - 80px); overflow: auto; }
}
@media (min-width: 1600px) {
  main { grid-template-columns: 382px minmax(0, 1fr); }
  article { padding: 30px 38px 60px; }
  .game-hero { gap: 36px; padding: 26px 32px; }
  .cover-large { width: 200px; height: 268px; }
}
@media (max-width: 1199px) {
  main { grid-template-columns: 310px minmax(0, 1fr); }
  article { padding: 22px 22px 40px; }
  .game-hero { gap: 20px; padding: 22px; }
  .cover-large { width: 140px; height: 195px; }
  .meta .meta-chip { padding: 7px 9px; gap: 7px; }
  .meta-chip > .icon { width: 20px; height: 20px; }
  .guide-grid { grid-template-columns: minmax(0, 1fr); }
  .game { gap: 10px; padding: 7px; }
  .cover-small { width: 58px; height: 80px; }
  .sections a { font-size: 13px; gap: 5px; }
}
@media (max-width: 900px) and (min-width: 701px) {
  main { grid-template-columns: 284px minmax(0, 1fr); }
  aside { padding: 18px 12px; position: sticky; top: 80px; height: calc(100dvh - 80px); overflow: auto; }
  article { padding: 18px 16px 40px; }
  .game-hero { align-items: flex-start; flex-wrap: wrap; gap: 16px; padding: 20px; }
  .cover-large { width: 108px; height: 144px; }
  .hero-copy { flex-basis: 170px; }
  h2 { font-size: 34px; }
  .sections { grid-template-columns: repeat(2, 1fr); }
  .sections a { font-size: 14px; }
  .panel { padding: 22px 20px; }
}
@media (max-width: 700px) {
  header { height: 70px; padding: 0 17px; gap: 12px; }
  .brand { font-size: 26px; gap: 9px; }
  .brandmark .icon { width: 32px; height: 32px; }
  .source { font-size: 12px; max-width: 105px; text-align: right; line-height: 1.4; }
  main { display: block; min-height: calc(100dvh - 70px); }
  aside { padding: 22px 16px; height: auto; overflow: visible; border: 0; }
  .shelfhead p { font-size: 13px; }
  .filter-grid { gap: 10px; }
  .filter-grid select { height: 40px; }
  #games { display: flex; max-height: none; min-height: 0; overflow: visible; padding-right: 0; }
  .game { padding: 8px 10px; gap: 14px; }
  .game strong { font-size: 17px; }
  .cover-small { width: 65px; height: 88px; }
  .game-copy small, .list-meta { font-size: 13px; }
  article { padding: 18px 14px 35px; }
  .mobile-back { display: block; color: #e5c27d; font-size: 14px; padding: 0 0 16px; }
  .game-hero { gap: 17px; min-height: 0; padding: 20px 17px; align-items: center; border-radius: 10px; margin-bottom: 17px; }
  .cover-large { width: 104px; height: 144px; }
  .cover-large > span { font-size: 19px; }
  .detail-top { display: flex; gap: 8px; }
  .edition { margin: 0; font-size: 12px; }
  .pill { font-size: 12px; padding: 4px 6px; }
  h2 { font-size: 31px; margin: 12px 0 14px; }
  .meta { gap: 6px; margin-bottom: 12px; }
  .meta .meta-chip { padding: 6px 7px; gap: 6px; }
  .meta .meta-text { font-size: 13px; }
  .meta .meta-text b { font-size: 12px; }
  .meta-chip > .icon { width: 18px; height: 18px; }
  .source-game { font-size: 13px; }
  .sections { grid-template-columns: repeat(2, 1fr); margin-bottom: 17px; }
  .sections a { font-size: 14px; padding: 11px 5px; }
  .guide-grid { gap: 16px; }
  .panel { padding: 22px 19px; scroll-margin-top: 87px; }
  h3 { font-size: 24px; }
  .notes h3 { font-size: 22px; }
  .steps li, .checkrow { font-size: 16px; }
  body:not(.show-detail) article { display: none; }
  body.show-detail aside { display: none; }
}
@media (max-width: 380px) {
  .brand { font-size: 23px; }
  .source { max-width: 95px; }
  .game-hero { flex-wrap: wrap; align-items: flex-start; }
  .hero-copy { flex-basis: 160px; }
  .cover-large { width: 94px; height: 130px; }
  h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none!important; }
}
@media print {
  header, aside, .sections, .notes, .reset, .mobile-back { display: none!important; }
  body, main, article { background: white!important; color: black!important; }
  body::before, .game-hero::after { display: none; }
  article { display: block!important; padding: 0; }
  .game-hero, .panel { background: white!important; color: black; box-shadow: none; border-color: #bbb; }
  .guide-grid { display: block; }
  .guide-grid .panel { margin-bottom: 15px; height: auto; }
  h2, h3, .meta, .pill, .edition, .source-game, .steps li::before { color: black!important; text-shadow: none; }
  .meta .meta-chip { background: white; }
}
/* Native popups must keep their own opaque colors after an active filter changes. */
select { color-scheme: dark; }
select option, select optgroup {
  color: #f2f0e7;
  background-color: #102b30;
}
select option:checked, select option:hover, select option:focus {
  color: #ffe0a0;
  background-color: #344538;
}
select:focus-visible {
  outline: 2px solid #edc275;
  outline-offset: 2px;
}
.filter-grid .ownership-filter { grid-column: 1 / -1; }
.ownership-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
}
.ownership-control label { color: #b8c8c4; font-size: 13px; }
.ownership-control select {
  min-width: 130px;
  padding: 8px 12px;
  border: 1px solid #52634e;
  border-radius: 8px;
  color: #f2f0e7;
  background-color: #0c252a;
  font: inherit;
  font-size: 14px;
}
.ownership-control p {
  flex-basis: 100%;
  margin: 0;
  color: #b8c8c4;
  font-size: 12px;
  line-height: 1.5;
}
.dropdown-control {
  position: relative;
  min-width: 56px;
  padding: 7px 29px 7px 10px;
  border: 1px solid #3b5558;
  border-radius: 7px;
  color: #e6e9df;
  background: #0c252a;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}
.dropdown-control::after {
  content: '';
  position: absolute;
  right: 12px;
  top: calc(50% - 4px);
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.filter-grid .dropdown-control { display: block; width: 100%; height: 36px; }
.filter-grid .dropdown-control.is-active {
  color: #ffe0a0;
  background: #26382e;
  border-color: #c99e55;
  box-shadow: inset 0 0 12px #dc9e2810, 0 0 9px #d2a34814;
}
.dropdown-control:focus-visible, .dropdown-control[aria-expanded="true"] {
  outline: 2px solid #edc275;
  outline-offset: 2px;
}
.dropdown-menu {
  position: fixed;
  z-index: 1000;
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  border: 1px solid #a58a55;
  border-radius: 8px;
  color: #f2f0e7;
  background: #102b30;
  box-shadow: 0 10px 28px #06171ccc;
  font: 14px/1.4 system-ui, sans-serif;
}
.dropdown-menu [role="option"] {
  padding: 9px 12px;
  border-radius: 4px;
  cursor: pointer;
  color: #f2f0e7;
  background: #102b30;
}
.dropdown-menu [role="option"][aria-selected="true"] {
  color: #ffe0a0;
  background: #344538;
  box-shadow: inset 3px 0 #edc275;
}
.dropdown-menu [role="option"]:hover,
.dropdown-menu [role="option"].is-focused {
  color: #fff2d8;
  background: #435847;
}
.ownership-control .dropdown-control { min-width: 130px; }
.setup-options .dropdown-control { color: #f1d394; background: #0a2026; }
@media (max-width: 720px) {
  .filter-grid .dropdown-control { height: 40px; }
  .dropdown-menu [role="option"] { padding-block: 11px; }
}