:root {
  --ink:#292e49;
  --muted:#5c6275;
  --accent:#c53420;
  --line:#d9dce3;
  --soft:#f2f3f7;
  --warm:#fff3ed;
  --radius:8px;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#fff;
  font-size:16px;
  line-height:1.45;
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input {
  font:inherit;
}
a {
  color:inherit;
  text-underline-offset:4px;
}
button,.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 16px;
  border:1px solid var(--accent);
  border-radius:5px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  line-height:1.25;
  text-decoration:none;
  cursor:pointer;
}
button:hover,.button:hover {
  background:#a42c1d;
  border-color:#a42c1d;
}
button.secondary,.button.secondary {
  color:var(--ink);
  background:#fff;
  border-color:#b7bccb;
}
button.secondary:hover,.button.secondary:hover {
  background:var(--soft);
}
button:disabled {
  opacity:.55;
  cursor:default;
}
button[hidden],[hidden] {
  display:none!important;
}
:focus-visible {
  outline:3px solid #4257bf;
  outline-offset:4px;
}
h1,h2,h3,p {
  margin:0;
}
h1 {
  font-size:clamp(26px,3vw,38px);
  line-height:1.15;
  letter-spacing:-1px;
}
h2 {
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.5px;
}
h3 {
  font-size:18px;
  line-height:1.25;
}
h1,h2,h3,a,button,p {
  overflow-wrap:anywhere;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
main,.site-footer,.header-inner {
  width:min(1120px,calc(100% - 48px));
  margin-inline:auto;
}
.site-header {
  border-bottom:1px solid var(--line);
}
.header-inner {
  min-height:84px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:23px;
  letter-spacing:-.6px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.brand-mark {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  background:var(--accent);
  color:#fff;
  border-radius:50%;
  font-size:29px;
  font-weight:400;
  line-height:1;
}
.site-header nav {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.site-header nav a {
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 13px;
  text-decoration:none;
  border-bottom:3px solid transparent;
}
.site-header nav a[aria-current] {
  border-color:var(--accent);
  font-weight:700;
}
.site-header nav a:hover {
  background:var(--soft);
}
main {
  padding-block:24px 16px;
  min-height:45vh;
}
.page-heading {
  margin-bottom:22px;
}
.page-heading p {
  margin-top:7px;
  color:var(--muted);
}
.content-block {
  position:relative;
  margin-block:0 22px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
}
.content-block+.content-block {
  margin-top:22px;
}
.content-block h2+p {
  margin-top:12px;
}
.content-block p+p {
  margin-top:12px;
}
.content-block .actions {
  margin-top:16px;
}
.prose {
  max-width:850px;
  border-left:4px solid var(--ink);
}
.prose h2 {
  font-size:22px;
}
.prose p {
  max-width:72ch;
}
.prose>a:not(.button) {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-block:4px;
}
.recovery h1+p {
  margin-top:12px;
}
.recovery .button {
  margin-top:16px;
}
.actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.actions>a:not(.button) {
  min-height:44px;
  display:flex;
  align-items:center;
  font-weight:700;
}
.current-pick {
  display:grid;
  grid-template-columns:320px 1fr;
  align-items:center;
  gap:30px;
  border:none;
  border-radius:10px;
  background:var(--warm);
  padding:22px;
}
.current-image {
  display:block;
}
.picture {
  position:relative;
  display:grid;
  place-items:center;
  background:var(--soft);
  border-radius:4px;
  min-width:0;
}
.picture img {
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:4px;
}
.image-fallback {
  font-size:16px;
  padding:12px;
  color:var(--muted);
}
.current-pick .picture {
  background:#f6e4da;
}
.current-copy h2 {
  font-size:30px;
  margin:8px 0 10px;
}
.eyebrow,.category {
  font-size:16px;
  font-weight:700;
  color:var(--muted);
}
.eyebrow {
  letter-spacing:.5px;
}
.eyebrow span[aria-hidden] {
  margin-inline:6px;
  color:var(--accent);
}
.listed-input {
  font-size:16px;
  color:var(--muted);
  margin-top:12px;
}
.section-label {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:26px 0 16px;
}
.section-label h2 {
  font-size:23px;
}
.section-label>span {
  color:var(--muted);
  font-size:16px;
}
.game-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.batch {
  padding:18px;
  border-top:3px solid var(--ink);
}
.batch-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:14px;
}
.batch-heading h2 {
  font-size:18px;
}
.batch-heading span {
  font-size:16px;
  color:var(--muted);
}
.game-card {
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  align-items:start;
  gap:12px;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:5px;
  padding:10px;
  min-width:0;
  align-content:stretch;
}
.game-card:hover {
  border-color:var(--accent);
  background:#fffbf8;
}
.game-card .picture {
  width:96px;
  min-height:72px;
}
.game-card h3 {
  margin-top:5px;
  font-size:17px;
}
.category {
  font-size:16px;
  color:var(--muted);
  font-weight:400;
}
.card-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  align-self:stretch;
  flex:1;
}
.card-cue {
  display:block;
  color:var(--accent);
  margin-top:auto;
  padding-top:8px;
  font-size:16px;
}
.batch-footer {
  margin-top:16px;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.batch-footer p {
  font-size:16px;
  color:var(--muted);
}
.replacement-item {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.replacement-item .game-card {
  flex:1;
}
.use-pick {
  width:100%;
  font-weight:400;
}
.choice-number {
  font-size:16px;
  color:var(--muted);
}
.site-footer {
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-block:24px 28px;
}
.site-footer p {
  font-weight:700;
  margin-bottom:12px;
}
.site-footer nav {
  display:flex;
  gap:6px 24px;
  flex-wrap:wrap;
}
.site-footer nav a {
  display:flex;
  align-items:center;
  min-height:44px;
  color:var(--muted);
}
.search-region {
  padding:4px 0;
  margin-bottom:0;
}
.search-line {
  display:flex;
  gap:10px;
}
.search-line form {
  display:flex;
  gap:8px;
  flex:1;
  min-width:0;
}
.search-line input {
  border:1px solid #a9afbd;
  border-radius:5px;
  padding:9px 12px;
  min-width:0;
  flex:1;
  width:100%;
  min-height:44px;
  font-size:16px;
  color:var(--ink);
  background:#fff;
}
.search-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:44px;
  margin-top:4px;
  font-size:16px;
}
.search-meta button {
  background:none;
  border:none;
  color:var(--accent);
  padding:0 8px;
  min-height:44px;
  font-weight:400;
}
.search-meta p {
  color:var(--muted);
}
.empty-state {
  background:var(--soft);
}
.empty-state h2 {
  margin-bottom:12px;
}
.empty-state button {
  margin-top:16px;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
  border:0;
}
.skip {
  position:fixed;
  left:16px;
  top:-200px;
  z-index:20;
  background:var(--ink);
  color:white;
  padding:12px;
}
.skip:focus {
  top:12px;
}
dialog {
  border:1px solid var(--line);
  border-radius:10px;
  padding:0;
  color:var(--ink);
  width:min(500px,calc(100% - 24px));
  max-width:calc(100% - 24px);
  max-height:calc(100dvh - 24px);
  margin:auto;
}
dialog::backdrop {
  background:rgb(27 30 46 / .55);
}
.dialog-shell {
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - 26px);
}
.dialog-head {
  padding:16px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line);
  flex:none;
}
.dialog-head h2 {
  font-size:23px;
  flex:1;
  min-width:min(7em,100%);
}
.dialog-head button {
  flex:none;
  margin-left:auto;
  white-space:nowrap;
  background:#fff;
  color:var(--ink);
  border-color:var(--line);
  font-weight:400;
}
.dialog-content {
  padding:16px;
  overflow-y:auto;
  overscroll-behavior:contain;
  min-height:0;
}
.dialog-content>p {
  color:var(--muted);
  margin-bottom:18px;
}
.dialog-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px max(12px,env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:white;
  flex:none;
}
.dialog-actions button {
  flex:0 0 auto;
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
}
.dialog-actions #filter-done {
  margin-left:auto;
}
.filter-group {
  border-top:1px solid var(--line);
}
summary {
  cursor:pointer;
  min-height:48px;
  padding:12px 4px;
  font-weight:700;
}
summary span {
  font-weight:400;
  color:var(--muted);
  margin-left:12px;
}
fieldset {
  border:0;
  padding:0;
  margin:0;
}
.radio-row {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:10px 12px;
  border-radius:4px;
  font-size:16px;
}
.radio-row:has(input:checked) {
  background:var(--warm);
  color:var(--accent);
}
.radio-row input {
  accent-color:var(--accent);
  width:20px;
  height:20px;
  flex:none;
  margin:0;
}
.radio-row .count {
  margin-left:auto;
  color:var(--muted);
}
.set-intro {
  display:grid;
  grid-template-columns:1fr 240px;
  gap:14px 32px;
  align-items:start;
  border-left:4px solid var(--accent);
}
.set-copy {
  min-width:0;
}
.set-intro h2 {
  grid-column:1;
}
.set-intro p {
  grid-column:1;
  align-self:start;
}
.set-preview {
  grid-column:2;
  grid-row:1;
}
.set-preview>a {
  display:block;
  text-decoration:none;
}
.set-preview .picture {
  max-width:180px;
  margin-inline:auto;
}
.set-preview .button {
  margin-top:12px;
  width:100%;
}
.game-breadcrumb {
  margin-bottom:12px;
  display:flex;
  align-items:center;
  min-height:44px;
}
.game-heading {
  margin-bottom:18px;
}
.game-heading h1 {
  margin-block:5px;
}
.content-block.stage {
  padding:0;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:clip;
  background:#202337;
}
.stage-toolbar {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:10px;
  background:var(--soft);
}
.stage-toolbar button {
  font-weight:400;
}
.stage-screen {
  display:grid;
  place-items:center;
  aspect-ratio:16/9;
  min-height:240px;
  position:relative;
  width:100%;
}
.stage-screen .picture {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  background:#202337;
}
.stage-screen .picture img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  opacity:.7;
}
.preview-prompt {
  position:relative;
  background:white;
  padding:12px 20px;
  border-radius:6px;
  text-align:center;
  max-width:calc(100% - 24px);
}
.preview-prompt p {
  margin-top:5px;
  color:var(--muted);
}
.stage-screen iframe {
  width:100%;
  height:100%;
  border:0;
  position:absolute;
  inset:0;
  background:white;
}
.stage-status {
  padding:10px 14px;
  background:var(--soft);
  min-height:44px;
  color:var(--ink);
  font-size:16px;
}
.stage:fullscreen,.stage.is-fullscreen {
  display:flex;
  flex-direction:column;
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
  min-height:0;
  margin:0;
  border:0;
  border-radius:0;
  padding:0;
  aspect-ratio:auto;
}
.stage:fullscreen .stage-toolbar,.stage.is-fullscreen .stage-toolbar {
  flex:none;
  padding:5px max(8px,env(safe-area-inset-right)) 5px max(8px,env(safe-area-inset-left));
  gap:6px;
}
.stage:fullscreen .stage-screen,.stage.is-fullscreen .stage-screen {
  flex:1;
  min-height:0;
  max-height:none;
  aspect-ratio:auto;
  width:100%;
}
.stage:fullscreen iframe,.stage.is-fullscreen iframe {
  width:100%;
  height:100%;
  max-height:none;
  max-width:none;
  aspect-ratio:auto;
  min-height:0;
}
.stage:fullscreen .stage-status,.stage.is-fullscreen .stage-status {
  min-height:0;
  padding:5px 10px max(5px,env(safe-area-inset-bottom));
  flex:none;
}
.game-help {
  padding:0 18px;
}
.game-help summary {
  font-size:18px;
}
.game-help .help-content {
  padding:0 0 18px;
}
.game-help h2 {
  font-size:20px;
  margin-bottom:10px;
}
.game-help p+p {
  margin-top:10px;
}
.related .game-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.related h2 {
  margin-bottom:16px;
}
.plain-index ul {
  padding-left:20px;
}
.plain-index li a {
  display:inline-flex;
  min-height:44px;
  align-items:center;
}
@media(max-width:1000px) {
  .game-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .current-pick {
    grid-template-columns:260px 1fr;
    gap:22px;
  }
  .game-card {
    grid-template-columns:90px minmax(0,1fr);
  }
  .game-card .picture {
    width:90px;
  }
  .header-inner {
    gap:12px;
  }
  .site-header nav a {
    padding-inline:10px;
  }
}
@media(max-width:650px) {
  main,.site-footer,.header-inner {
    width:calc(100% - 32px);
  }
  .header-inner {
    min-height:0;
    display:block;
    padding-top:14px;
  }
  .brand {
    font-size:22px;
    min-height:36px;
  }
  .site-header nav {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-top:8px;
    gap:2px;
    justify-content:space-between;
  }
  .site-header nav a {
    justify-content:center;
    text-align:center;
    font-size:16px;
    padding:10px 8px;
    white-space:normal;
  }
  .page-heading {
    margin-bottom:18px;
  }
  .page-heading p {
    font-size:16px;
  }
  main {
    padding-top:20px;
  }
  .current-pick {
    grid-template-columns:110px minmax(0,1fr);
    gap:16px;
    padding:16px;
    align-items:start;
  }
  .current-pick .current-image {
    margin-top:4px;
  }
  .current-copy h2 {
    font-size:23px;
    margin-top:8px;
  }
  .current-copy .eyebrow {
    font-size:16px;
    letter-spacing:0;
  }
  .current-copy #pick-cue {
    display:none;
  }
  .current-copy .listed-input {
    grid-column:1/-1;
    font-size:16px;
    margin-top:8px;
  }
  .current-copy .actions {
    margin-top:14px;
    gap:8px;
  }
  .current-copy .actions>* {
    width:100%;
    padding-inline:10px;
  }
  .content-block {
    padding:16px;
    margin-bottom:20px;
  }
  .current-pick {
    padding:16px;
  }
  .section-label {
    display:block;
    margin:24px 0 14px;
  }
  .section-label>span {
    display:block;
    margin-top:5px;
  }
  .game-grid {
    gap:12px;
  }
  .game-card {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:8px;
  }
  .game-card .picture {
    width:100%;
    min-height:0;
    height:76px;
  }
  .game-card .picture img {
    height:auto;
    width:auto;
    max-height:76px;
    max-width:100%;
  }
  .game-card h3 {
    font-size:16px;
    line-height:1.25;
    margin-top:4px;
  }
  .game-card .category {
    font-size:16px;
  }
  .card-cue {
    font-size:16px;
    padding-top:6px;
  }
  .batch {
    padding:14px;
    margin-bottom:16px;
  }
  .batch+.batch {
    margin-top:8px;
  }
  .batch-heading {
    margin-bottom:8px;
  }
  .batch-heading h2 {
    font-size:17px;
  }
  .batch-heading span {
    font-size:16px;
  }
  .batch-footer {
    margin-top:8px;
  }
  .batch-footer button {
    width:100%;
  }
  .replacement-item .game-card .picture {
    height:56px;
  }
  .replacement-item .game-card .picture img {
    max-height:56px;
  }
  .replacement-item .card-cue {
    display:none;
  }
  .use-pick {
    padding:9px 7px;
    font-size:16px;
    min-height:44px;
  }
  .set-intro {
    grid-template-columns:1fr 110px;
    gap:12px;
  }
  .set-copy {
    display:contents;
  }
  .set-intro .set-copy p {
    margin-top:0;
  }
  .set-intro h2 {
    font-size:22px;
    grid-column:1/-1;
  }
  .set-intro p {
    grid-column:1;
  }
  .set-preview {
    grid-column:2;
    grid-row:2;
  }
  .set-preview .button {
    padding:8px;
    font-size:16px;
  }
  .prose h2 {
    font-size:21px;
  }
  .search-line {
    gap:6px;
  }
  .search-line form {
    gap:6px;
  }
  .search-line button {
    padding-inline:10px;
  }
  .search-line input {
    padding-inline:9px;
  }
  .search-meta {
    font-size:16px;
  }
  .search-meta p {
    max-width:calc(100% - 50px);
  }
  .search-meta button {
    padding-inline:3px;
  }
  .dialog-head {
    padding:12px;
  }
  .dialog-head h2 {
    font-size:21px;
  }
  .dialog-content {
    padding:12px;
  }
  .game-heading h1 {
    font-size:27px;
  }
  .stage-screen {
    aspect-ratio:4/3;
    min-height:220px;
  }
  .stage-toolbar {
    gap:6px;
    padding:8px;
  }
  .stage-toolbar button {
    padding-inline:10px;
  }
  .stage-status {
    padding:10px;
  }
  .game-help {
    padding:0 16px;
  }
  .related .game-grid {
    gap:12px;
  }
  .site-footer {
    padding-block:20px;
  }
  .site-footer nav {
    gap:4px 16px;
  }
}
@media(max-width:350px) {
  .current-pick {
    grid-template-columns:86px minmax(0,1fr);
    gap:12px;
  }
  .current-copy h2 {
    font-size:22px;
  }
  .game-card .picture {
    height:74px;
  }
  .game-card .picture img {
    max-height:74px;
  }
  .batch {
    padding:12px;
  }
  .game-grid {
    gap:10px;
  }
  .card-cue {
    display:none;
  }
  .search-line button {
    padding-inline:8px;
  }
  .search-meta {
    line-height:1.2;
  }
  .site-header nav a {
    padding-inline:6px;
  }
}
@media(max-height:450px) {
  dialog {
    max-height:calc(100dvh - 12px);
  }
  .dialog-shell {
    max-height:calc(100dvh - 14px);
  }
  .dialog-head {
    padding-block:6px;
  }
  .dialog-actions {
    padding-block:6px;
  }
  .stage:fullscreen .stage-toolbar button {
    min-height:44px;
    padding-block:6px;
  }
  .stage:fullscreen .stage-status {
    font-size:16px;
    line-height:1.15;
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
  }
}

/* Filled preview cells and native links for complete game cards. */
.current-block { padding: 0; }
.current-pick { color: inherit; text-decoration: none; }
.current-pick:hover h2 { text-decoration: underline; }
#next-pick { margin-top: 10px; }
.game-card .picture { position: relative; }
.game-card .picture img, .replacement-item .game-card .picture img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }