/* Games (M8): hub, shared controls, Trivia */
.gm-head ~ .wrap [hidden], .pd [hidden], .tv [hidden], .hl [hidden] { display: none !important; }
.gm-head { background: var(--ink); color: var(--bone); padding: 34px 0 28px; border-bottom: 4px solid var(--brass-bright); }
.gm-head h1 { font: 800 clamp(32px, 5.6vw, 54px)/1.05 var(--font-display); margin: 10px 0 10px; }
.gm-head p { max-width: 62ch; margin: 0; color: #d9d4c7; }
.gm-head .kicker { color: var(--brass-bright); }
.gm-back { display: inline-block; font: 700 12px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-bright); text-decoration: none; }
.gm-back::before { content: "← "; }
.gm-back:hover { text-decoration: underline; }
.gm-foot { margin: 32px 0 48px; }

.gm-btn { font: 700 15px var(--font-ui); padding: 12px 20px; min-height: 44px; border-radius: 6px; border: 2px solid var(--ink); background: var(--ink); color: var(--bone); cursor: pointer; }
.gm-btn:hover { background: #2b2e34; }
.gm-btn:disabled { opacity: .45; cursor: not-allowed; }
.gm-btn.ghost { background: transparent; color: var(--ink); }
.gm-btn.ghost:hover { background: var(--paper); }
.gm-btn:focus-visible, .tv-choice:focus-visible, .gm-card:focus-visible, .gm-link:focus-visible { outline: 3px solid var(--brass-bright); outline-offset: 2px; }
.gm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 18px 0 6px; }
.gm-link { background: none; border: 0; padding: 0; font: inherit; color: var(--brass); text-decoration: underline; cursor: pointer; }

.gm-chip { display: inline-block; font: 700 11px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: var(--ink); color: #fff; }
.gm-chip[data-cat="CLEV"] { background: #024731; }
.gm-chip[data-cat="OHIO"] { background: #00694e; }
.gm-chip[data-cat="M-OH"] { background: #b61e2e; }
.gm-chip.ghost { background: transparent; color: var(--muted); border: 1px solid var(--rule); }

/* Hub */
.gm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.gm-stats .stat .n { color: var(--ink); font-family: var(--font-display); }
.gm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gm-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--paper); border: 1px solid var(--rule); border-top: 4px solid var(--ink); border-radius: 8px; text-decoration: none; color: var(--ink); min-height: 170px; }
a.gm-card:hover { border-color: var(--ink); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.gm-card-kicker { font: 700 11px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.gm-card-title { font: 800 26px/1.1 var(--font-display); }
.gm-card-text { color: var(--ink-2); font-size: 15px; }
.gm-card-meta { margin-top: auto; font: 600 13px var(--font-ui); color: var(--muted); }
.gm-card.is-soon { opacity: .62; border-top-color: var(--rule); }

/* Trivia */
.tv { margin: 28px 0 0; }
.tv-setup, .tv-play, .tv-done { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: clamp(18px, 3vw, 30px); }
.tv-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tv-fields label { display: grid; gap: 6px; font: 700 12px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tv-fields select { font: 500 16px var(--font-ui); padding: 10px 12px; min-height: 44px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; color: var(--ink); text-transform: none; letter-spacing: 0; }
.tv-count { font: 600 15px var(--font-ui); margin: 16px 0 0; }

.tv-head { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.tv-progress { font: 700 13px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; margin-right: auto; }
.tv-bar { height: 6px; background: var(--bone); border-radius: 999px; overflow: hidden; margin: 14px 0 6px; }
.tv-bar span { display: block; height: 100%; background: var(--brass-bright); transition: width .25s ease; }
.tv-q { font: 700 clamp(21px, 3vw, 28px)/1.3 var(--font-display); margin: 18px 0 18px; outline: none; }
.tv-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .tv-choices { grid-template-columns: 1fr; } }
.tv-choice { display: flex; align-items: center; gap: 12px; text-align: left; font: 600 16px/1.3 var(--font-ui); padding: 14px 16px; min-height: 56px; border: 2px solid var(--rule); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; }
.tv-choice:hover:not(:disabled) { border-color: var(--ink); }
.tv-choice .k { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bone); font: 700 13px var(--font-ui); flex-shrink: 0; }
.tv-choice:disabled { cursor: default; }
.tv-choice.is-right { border-color: var(--win); background: #e8f4ec; }
.tv-choice.is-right .k { background: var(--win); color: #fff; }
.tv-choice.is-wrong { border-color: var(--loss); background: #fbeaec; }
.tv-choice.is-wrong .k { background: var(--loss); color: #fff; }
.tv-feedback { margin-top: 16px; min-height: 8px; }
.tv-verdict { font: 800 18px var(--font-ui); margin: 0 0 4px; }
.tv-verdict.ok { color: var(--win); }
.tv-verdict.no { color: var(--loss); }
.tv-why { margin: 0 0 16px; color: var(--ink-2); }

.tv-score { text-align: center; outline: none; }
.tv-score .n { font-family: var(--font-display); }
.tv-score .n b { font-size: clamp(64px, 12vw, 104px); line-height: 1; }
.tv-score .n span { font-size: 28px; color: var(--muted); margin-left: 6px; }
.tv-score .line { font: 700 20px var(--font-display); margin: 6px 0; }
.tv-done .gm-actions { justify-content: center; }
.tv-review { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: q; }
.tv-review li { border: 1px solid var(--rule); border-left: 5px solid var(--win); border-radius: 6px; padding: 12px 14px; background: #fff; }
.tv-review li.no { border-left-color: var(--loss); }
.tv-review p { margin: 0; }
.tv-review .q { font-weight: 600; }
.tv-review .a { margin-top: 4px; }
.tv-review .why { font-size: 14px; margin-top: 2px; }

/* Higher or Lower */
.hl { margin: 28px 0 0; }
.hl-decks { border: 0; padding: 0; margin: 0; }
.hl-decks legend { font: 700 12px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.hl-deck-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.hl-deck { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; padding: 12px 14px; border: 2px solid var(--rule); border-radius: 8px; background: #fff; cursor: pointer; }
.hl-deck:has(input:checked) { border-color: var(--ink); background: var(--bone); }
.hl-deck input { grid-row: 1 / span 3; margin-top: 4px; width: 18px; height: 18px; accent-color: var(--ink); }
.hl-deck .nm { font: 700 16px var(--font-ui); }
.hl-deck .sc { font-size: 13px; color: var(--muted); }
.hl-deck .bs { font: 600 12px var(--font-ui); color: var(--brass); }
.hl-deck .bs:empty { display: none; }
.hl-bar { display: flex; align-items: center; gap: 10px; }
.hl-streak { margin-left: auto; font: 600 14px var(--font-ui); }
.hl-streak b { font: 800 22px var(--font-display); margin-left: 4px; }
.hl-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; margin-top: 16px; }
@media (max-width: 640px) { .hl-pair { grid-template-columns: 1fr; gap: 8px; } }
.hl-vs { align-self: center; justify-self: center; font: 800 14px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hl-card { display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 2px solid var(--rule); border-top: 6px solid var(--ink); border-radius: 10px; background: #fff; text-align: center; min-height: 230px; transition: border-color .2s, background .2s; }
.hl-card[data-prog="CLEV"] { border-top-color: #024731; }
.hl-card[data-prog="OHIO"] { border-top-color: #00694e; }
.hl-card[data-prog="M-OH"] { border-top-color: #b61e2e; }
@media (max-width: 640px) { .hl-card { min-height: 0; padding: 14px; } }
.hl-top { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hl-top img { width: 28px; height: 28px; object-fit: contain; }
.hl-name { font: 800 clamp(20px, 2.6vw, 26px)/1.15 var(--font-display); margin-top: 6px; }
.hl-sub { font-size: 14px; color: var(--muted); }
.hl-val { margin-top: auto; padding-top: 8px; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.hl-val b { font-size: clamp(40px, 6vw, 56px); line-height: 1; }
.hl-val .q { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--bone); font: 800 34px var(--font-display); color: var(--muted); }
.hl-unit { font: 700 12px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hl-rev { font: 600 13px var(--font-ui); color: var(--ink-2); min-height: 1em; }
.hl-card.is-right { border-color: var(--win); background: #f1f8f3; }
.hl-card.is-wrong { border-color: var(--loss); background: #fcf0f1; }
.hl-ask { font: 600 17px/1.4 var(--font-ui); text-align: center; margin: 18px auto 10px; max-width: 60ch; }
.hl-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hl-btns .gm-btn { min-width: 150px; font-size: 17px; }
.hl-btns .hl-hi { background: var(--win); border-color: var(--win); }
.hl-btns .hl-lo { background: var(--loss); border-color: var(--loss); }
.hl-btns .gm-btn:disabled { opacity: .35; }
.hl-msg { text-align: center; min-height: 1.5em; margin: 14px 0 0; font-weight: 600; }
.tv-score .n span { white-space: nowrap; }

/* Playerdle */
.pd { margin: 28px 0 0; }
.pd-top { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; margin-bottom: 14px; }
.pd-tabs { display: inline-flex; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.pd-tabs button { font: 700 15px var(--font-ui); padding: 10px 20px; min-height: 44px; border: 0; background: #fff; color: var(--ink); cursor: pointer; }
.pd-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bone); }
.pd-tabs button:focus-visible { outline: 3px solid var(--brass-bright); outline-offset: -3px; }
.pd-filter { display: grid; gap: 4px; font: 700 12px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pd-filter select { font: 500 16px var(--font-ui); padding: 9px 12px; min-height: 44px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; text-transform: none; letter-spacing: 0; }
.pd-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.pd-head h2 { font: 800 24px var(--font-display); margin: 0; }
.pd-head .muted { margin-left: auto; font: 600 14px var(--font-ui); }
.pd-lab { font: 700 12px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pd-combo { position: relative; margin-top: 6px; }
.pd-combo input { width: 100%; font: 500 18px var(--font-ui); padding: 12px 14px; min-height: 50px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; box-sizing: border-box; }
.pd-combo input:focus { outline: 3px solid var(--brass-bright); outline-offset: 1px; }
.pd-list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 4px; background: #fff; border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.14); max-height: 320px; overflow: auto; }
.pd-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.pd-list li.on, .pd-list li:hover { background: var(--bone); }
.pd-list li.empty { color: var(--muted); font-weight: 500; cursor: default; }
.sr-status { min-height: 1.4em; margin: 10px 0 0; font: 600 14px var(--font-ui); color: var(--ink-2); }
.pd-board { display: grid; gap: 10px; margin-top: 12px; }
.pd-row { display: grid; grid-template-columns: minmax(130px, 1.4fr) repeat(8, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.pd-name { display: flex; align-items: center; font: 700 15px/1.2 var(--font-ui); padding: 8px 4px; }
.pd-row.is-win .pd-name { color: var(--win); }
.pd-tile { display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 2px; padding: 8px 4px; border-radius: 6px; min-height: 58px; background: #e9e6df; color: var(--ink); border: 1px solid transparent; }
.pd-tile .lab { font: 700 9px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.pd-tile .val { font: 700 14px/1.2 var(--font-ui); overflow-wrap: normal; }
.pd-tile.hit { background: #1d6b3a; color: #fff; }
.pd-tile.near { background: #e7c24a; color: #2a2208; }
.pd-tile.miss { background: #3b3f46; color: #f2efe8; }
.pd-tile.na { background: #fff; color: var(--muted); border: 1px dashed var(--rule); }
@media (max-width: 760px) {
  .pd-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd-name { grid-column: 1 / -1; padding: 2px 0; font-size: 16px; }
  .pd-tile { min-height: 52px; }
}
.pd-end { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 16px; }
.pd-verdict { font: 800 22px var(--font-display); margin: 0 0 10px; }
.pd-verdict.ok { color: var(--win); }
.pd-verdict.no { color: var(--loss); }
.pd-reveal { display: grid; gap: 4px; justify-items: start; }
.pd-ans { font: 800 28px/1.1 var(--font-display); color: var(--ink); }
.pd-meta { color: var(--muted); }
.pd-hl { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
.pd-daily-stats { margin: 12px 0 0; }
.pd-help { margin: 18px 0 0; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 16px; }
.pd-help summary { font: 700 15px var(--font-ui); cursor: pointer; }
.pd-help ul { margin: 10px 0 4px; padding-left: 18px; }
.pd-help li { margin: 4px 0; }
.pd-key { display: inline-block; padding: 1px 7px; border-radius: 4px; font: 700 13px var(--font-ui); }
.pd-key.hit { background: #1d6b3a; color: #fff; }
.pd-key.near { background: #e7c24a; color: #2a2208; }
.pd-key.na { background: #fff; border: 1px dashed var(--rule); color: var(--muted); }

/* The Grid */
.gr-board { display: grid; grid-template-columns: minmax(90px, 1fr) repeat(3, minmax(0, 1.4fr)); gap: 8px; max-width: 600px; margin: 6px auto 0; }
.gr-corner { display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.gr-corner b { font: 800 34px var(--font-display); color: var(--ink); line-height: 1; }
.gr-corner span { font: 700 10px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.gr-head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 8px 4px; font: 700 14px/1.2 var(--font-ui); }
.gr-head.row { align-items: flex-end; text-align: right; padding-right: 6px; }
.gr-head img { width: 34px; height: 34px; object-fit: contain; }
.gr-head.row img { align-self: flex-end; }
.gr-head[data-prog] span { font-weight: 800; }
.gr-cell { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; border: 2px solid var(--rule); border-radius: 8px; background: #fff; cursor: pointer; font: 700 14px/1.2 var(--font-ui); color: var(--ink); text-align: center; }
.gr-cell:hover:not(:disabled) { border-color: var(--ink); }
.gr-cell:focus-visible { outline: 3px solid var(--brass-bright); outline-offset: 2px; }
.gr-cell .plus { font: 300 30px var(--font-ui); color: var(--rule); }
.gr-cell.is-sel { border-color: var(--brass-bright); box-shadow: 0 0 0 3px rgba(196,163,90,.35); }
.gr-cell.is-filled { background: #1d6b3a; border-color: #1d6b3a; color: #fff; cursor: default; }
.gr-cell .rar { font: 600 11px var(--font-ui); opacity: .85; }
.gr-cell:disabled:not(.is-filled) { background: #f1eee7; cursor: default; }
.gr-guess { max-width: 760px; margin: 16px auto 0; padding: 14px; background: var(--bone); border-radius: 8px; }
.gr-guess .gm-link { margin-top: 8px; }
.gr-guess [data-prompt] { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 14px; }
@media (max-width: 560px) {
  .gr-board { grid-template-columns: 64px repeat(3, minmax(0, 1fr)); gap: 5px; }
  .gr-head { font-size: 11px; padding: 4px 2px; }
  .gr-head img { width: 24px; height: 24px; }
  .gr-cell { font-size: 11px; padding: 3px; }
  .gr-cell .rar { font-size: 9px; }
  .gr-corner b { font-size: 24px; }
  .gr-corner span { font-size: 8px; }
}
.gr-answers { margin-top: 16px; }
.gr-answers summary { font: 700 15px var(--font-ui); cursor: pointer; }
.gr-ans-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.gr-ans h3 { font: 700 14px var(--font-ui); margin: 0 0 4px; }
.gr-ans p { margin: 0; font-size: 14px; line-height: 1.5; }
.gr-ans a { color: var(--ink-2); }
.gr-ans a.mine { color: var(--win); font-weight: 700; }

/* Word Search */
.ws { margin: 28px 0 0; }
.ws-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 22px; margin-bottom: 14px; }
.ws-diff { border: 0; margin: 0; padding: 0; display: flex; gap: 14px; align-items: center; }
.ws-diff legend { font: 700 12px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ws-diff label { display: inline-flex; gap: 6px; align-items: center; font: 600 15px var(--font-ui); min-height: 44px; }
.ws-diff input, .ws-keytoggle input { width: 18px; height: 18px; accent-color: var(--ink); }
.ws-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ws-keytoggle { display: inline-flex; gap: 6px; align-items: center; font: 600 14px var(--font-ui); color: var(--ink-2); }
.ws-titlebar { display: flex; align-items: flex-start; gap: 12px; }
.ws-titlebar h2 { font: 800 26px var(--font-display); margin: 0; }
.ws-blurb { margin: 4px 0 0; font-size: 14px; max-width: 70ch; }
.ws-clock { margin-left: auto; font: 800 22px var(--font-display); font-variant-numeric: tabular-nums; }
.ws-layout { display: grid; grid-template-columns: minmax(0, 540px) minmax(240px, 1fr); gap: 24px; align-items: start; margin-top: 14px; }
@media (max-width: 860px) { .ws-layout { grid-template-columns: 1fr; } }
.ws-grid { --n: 14; display: grid; grid-template-rows: repeat(var(--n), 1fr); width: 100%; max-width: 540px; aspect-ratio: 1 / 1; user-select: none; -webkit-user-select: none; touch-action: none; border: 2px solid var(--ink); border-radius: 6px; background: #fff; }
.ws-row { display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.ws-cell { display: grid; place-items: center; font: 700 clamp(13px, 2.4vw, 18px) var(--font-ui); color: var(--ink); cursor: pointer; border-radius: 4px; }
.ws-cell:focus-visible { outline: 3px solid var(--brass-bright); outline-offset: -2px; }
.ws-cell.is-found { background: var(--hl); }
.ws-cell.is-sel { background: var(--ink); color: var(--bone); }
.ws-side h3 { font: 700 13px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.ws-words { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.ws-words li { display: grid; gap: 0; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--rule); background: #fff; }
.ws-words .w { font: 800 15px var(--font-ui); letter-spacing: .06em; }
.ws-words .lab { font-size: 13px; color: var(--muted); }
.ws-words li.is-found { background: var(--hl); border-color: transparent; }
.ws-words li.is-found .w { text-decoration: line-through; }
@media (max-width: 860px) { .ws-words { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .ws-words .lab { display: none; } }
.ws.is-done .ws-clock { color: var(--win); }
.ws-key { display: none; }

@media print {
  .banner, .site-header, .site-footer, .skip, .ws-screen, .pd-help { display: none !important; }
  body { background: #fff; }
  .ws { margin: 0; }
  .ws-board { border: 0; padding: 0; background: #fff; }
  .ws-layout { grid-template-columns: 1fr; gap: 14px; }
  .ws-grid { width: 100%; max-width: 6.8in; border: 2px solid #000; margin: 0 auto; }
  .ws-cell { font-size: 15pt; color: #000; }
  .ws-cell.is-found, .ws-cell.is-sel { background: none; color: #000; }
  .ws-words { grid-template-columns: repeat(3, 1fr); }
  .ws-words li { border: 0; padding: 2px 0; background: none !important; }
  .ws-words li.is-found .w { text-decoration: none; }
  .ws-words .lab { display: block; font-size: 9pt; }
  .ws.print-key .ws-key { display: block; break-before: page; page-break-before: always; }
  .ws-key h2 { font: 700 16pt var(--font-display); margin: 0 0 10px; }
  .ws-keygrid { --n: 14; display: grid; grid-template-columns: repeat(var(--n), 1fr); max-width: 6.8in; border: 2px solid #000; }
  .ws-keygrid span { display: grid; place-items: center; aspect-ratio: 1 / 1; font: 400 13pt var(--font-ui); color: #999; }
  .ws-keygrid span.on { color: #000; font-weight: 800; }
}