/* BIBLE GAMES (games/games.js): the window, in the shared frame (nav/ui.css); the games as cards, a game's choices, and a
   question at a time, its four answers big enough for a thumb, right in green and wrong in a quiet red (the game's own) */
.gm { position: fixed; inset: 0; z-index: 2147483000; background: var(--bg); color: var(--ink); overflow: hidden; opacity: 0; transition: opacity 0.18s ease;
  --gm-ok: var(--good, #3E7A4C); --gm-no: #B5533F; }
body.site-dark .gm { --gm-no: #E48C78; }
.gm[hidden] { display: none; }
.gm.open { opacity: 1; }
.gm-box { position: absolute; inset: 0; display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; }
.gm .ui-head { padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 8px calc(14px + env(safe-area-inset-left)); }
.gm-top { flex: none; border-bottom: 1px solid var(--rule); background: var(--bg); }
.gm-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.gm-col { max-width: 620px; margin: 0 auto; padding: 16px calc(16px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
.gm-lede { margin: 0 0 14px; font: 500 15.5px/1.55 var(--sans); color: var(--muted); }

/* (the games: a card each) */
.gm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.gm-card { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.gm-card:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.gm-card:active { transform: scale(0.985); }
.gm-card > i, .gm-hero > i { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: color-mix(in srgb, var(--door, var(--door-live)) 12%, transparent); color: var(--door, var(--door-live)); }
.gm-card > i svg, .gm-hero > i svg { width: 25px; height: 25px; }
.gm-card > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gm-card b { font: italic 600 18px/1.25 var(--serif); }
.gm-card small { font: 13.5px/1.4 var(--sans); color: var(--muted); }
.gm-card em { margin-top: 3px; font: 700 12px var(--sans); font-style: normal; color: var(--ink); opacity: 0.75; }

/* (a game's choices) */
.gm-hero { display: flex; align-items: flex-start; gap: 13px; margin: 2px 0 18px; }
.gm-hero p { margin: 0; font: 15.5px/1.55 var(--sans); }
.gm-set { margin: 0 0 16px; }
.gm-set > .ui-label { display: block; margin: 0 0 8px; }
.gm-filters, .gm-books { display: flex; flex-wrap: wrap; gap: 7px; }
.gm-books + .gm-books { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.gm-book { display: inline-flex; align-items: center; gap: 6px; }
.gm-book small { font: 700 11px var(--sans); color: var(--muted); }
.gm-book.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--bg-raised)); }
.gm-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 7px; }
.gm-time { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.gm-time b { font: 700 14.5px/1.3 var(--sans); }
.gm-time small { font: 12.5px/1.35 var(--sans); color: var(--muted); }
.gm-time.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--bg-raised)); }
.gm-time:disabled { opacity: 0.45; cursor: default; }
.gm-meta { margin: 4px 0 16px; font: 500 14px/1.5 var(--sans); color: var(--muted); }
.gm-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.gm-go .ui-btn { min-width: 150px; }
.gm-go .ui-btn:disabled { opacity: 0.45; cursor: default; }
.gm-foot { position: sticky; bottom: 0; margin: 8px -16px 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--bg) 14px); text-align: center; }
.gm-foot .gm-meta { margin: 0 0 8px; }
.gm-foot .gm-go { margin: 0; }
.gm-loading { margin: 40px 0; text-align: center; font: 600 15px var(--sans); color: var(--muted); }

/* (a question at a time) */
.gm-prog { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 12.5px var(--sans); color: var(--muted); }
.gm-prog i { flex: 1; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; position: relative; }
.gm-prog i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--gold); transition: width 0.3s ease; }
.gm-prog b { color: var(--ink); }
.gm-q { margin: 0 0 16px; font: italic 500 21px/1.38 var(--serif); }
.gm-q .gm-who { display: block; font: italic 600 27px/1.2 var(--serif); }
.gm-q .gm-sub { display: block; margin-top: 8px; font: 700 13px/1.4 var(--sans); font-style: normal; color: var(--muted); letter-spacing: 0.02em; }
.gm-quote { font-style: italic; }
.gm-quote.is-big { display: block; padding: 2px 0 2px 14px; border-left: 3px solid color-mix(in srgb, var(--gold) 60%, var(--rule)); font: italic 500 20px/1.5 var(--serif); }
.gm-quote.is-big + .gm-ask, .gm-who + .gm-ask { display: block; margin-top: 10px; }
.gm-blank { display: inline-block; width: 2.4em; height: 0.9em; margin: 0 1px; border-bottom: 2px solid color-mix(in srgb, var(--gold) 75%, var(--rule)); vertical-align: baseline; }
.gm-opts { display: grid; gap: 8px; }
.gm-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px 14px; border: 1.5px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); text-align: left; font: 600 15.5px/1.4 var(--sans); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease; }
.gm-opt em { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent); font: 800 12px var(--sans); font-style: normal; color: var(--muted); }
.gm-opt:not(:disabled):hover { border-color: color-mix(in srgb, var(--gold) 60%, var(--rule)); }
.gm-opt:not(:disabled):active { transform: scale(0.985); }
.gm-opt:disabled { cursor: default; opacity: 0.6; }
.gm-opt.is-ok { opacity: 1; border-color: var(--gm-ok); background: color-mix(in srgb, var(--gm-ok) 13%, var(--bg-raised)); }
.gm-opt.is-ok em { background: var(--gm-ok); color: #fff; }
.gm-opt.is-no { opacity: 1; border-color: var(--gm-no); background: color-mix(in srgb, var(--gm-no) 11%, var(--bg-raised)); }
.gm-opt.is-no em { background: var(--gm-no); color: #fff; }
.gm-after { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.gm-said { margin: 0; font: 800 16px var(--sans); }
.gm-said.is-ok { color: var(--gm-ok); }
.gm-said.is-no { color: var(--gm-no); }
.gm-where { margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font: 600 13.5px var(--sans); color: var(--muted); }
.gm-whole { margin: 0; font: italic 500 16.5px/1.5 var(--serif); }
.gm-refs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.gm-ref { font-weight: 700; }
.gm-after .ui-btn { min-width: 170px; margin-top: 4px; }
/* (Two truths and a tale: each of the three, said so, and where) */
.gm-tale { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; text-align: left; }
.gm-tale li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--rule); background: var(--bg-raised); }
.gm-tale li b { font: 800 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.gm-tale li.is-ok b { color: var(--gm-ok); }
.gm-tale li.is-no { border-color: color-mix(in srgb, var(--gm-no) 50%, var(--rule)); }
.gm-tale li.is-no b { color: var(--gm-no); }
.gm-tale li span { font: 600 14.5px/1.4 var(--sans); }
.gm-tale li small { font: 13.5px/1.45 var(--sans); color: var(--muted); }
.gm-iref { display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: 700 13.5px var(--sans); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 70%, transparent); text-underline-offset: 3px; cursor: pointer; }
/* (Books in order: four, two by two, each numbered as it's put in its place) */
.gm-bks { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.gm-bk { position: relative; display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 10px 30px; border: 1.5px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); font: italic 600 18px/1.25 var(--serif); text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.gm-bk em { position: absolute; left: 8px; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--on-gold, #221E19); font: 800 12.5px var(--sans); font-style: normal; }
.gm-bk.is-set { border-color: color-mix(in srgb, var(--gold) 70%, var(--rule)); background: color-mix(in srgb, var(--gold) 10%, var(--bg-raised)); }
.gm-bk.is-no { border-color: var(--gm-no); background: color-mix(in srgb, var(--gm-no) 11%, var(--bg-raised)); animation: gm-shake 0.35s ease; }
.gm-bk:disabled { cursor: default; }
@keyframes gm-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .gm-bk.is-no { animation: none; } .gm-prog i::after { transition: none; } }

/* (how it went) */
.gm-end { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 0 22px; text-align: center; }
.gm-score { display: flex; align-items: baseline; gap: 8px; }
.gm-score b { font: italic 600 64px/1 var(--serif); color: var(--gold); }
.gm-score span { font: 700 18px var(--sans); color: var(--muted); }
.gm-word { margin: 0 0 10px; font: 600 16px/1.45 var(--sans); }
.gm-mlist, .ui-list > ul.gm-mlist { list-style: none; margin: 0; padding: 4px 14px 14px; display: grid; gap: 10px; }
.gm-mlist li { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px 0 0; border-top: 1px solid var(--rule); font: 14.5px/1.45 var(--sans); }
.gm-mlist li:first-child { border-top: 0; padding-top: 2px; }
.gm-mlist li b { font-weight: 700; color: var(--gm-ok); }
.gm-mlist .gm-quote.is-big { font-size: 15.5px; padding-left: 10px; }
.gm-toast { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 2; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; max-width: calc(100% - 32px); }
.gm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.gm-toast.is-page { position: fixed; z-index: 2147483400; bottom: calc(var(--bnav-h, 0px) + 22px + env(safe-area-inset-bottom)); }

@media (max-width: 430px) {
  .gm-q { font-size: 19.5px; }
  .gm-q .gm-who { font-size: 24px; }
  .gm-quote.is-big { font-size: 18px; }
  .gm-cards { grid-template-columns: 1fr; }
}
/* (on its side, on a phone: the four answers two by two, so they all fit) */
@media (orientation: landscape) and (max-height: 500px) {
  .gm-opts { grid-template-columns: 1fr 1fr; }
  .gm-opt { min-height: 46px; padding: 8px 12px; }
  .gm-q { font-size: 18px; margin-bottom: 12px; }
  .gm-prog { margin-bottom: 10px; }
  .gm-bk { min-height: 56px; }
}

/* (a game going on, from the games: back to it; and joining someone's) */
.gm-livebar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); border-radius: 16px; background: color-mix(in srgb, var(--gold) 9%, var(--bg-raised)); }
.gm-livebar > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gm-livebar b { font: 700 14.5px var(--sans); }
.gm-livebar small { font: 13px var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-livebar .ui-btn { min-height: 38px; padding: 0 14px; font-size: 14px; }
.gm-livebar .lt-pulse { flex: none; background: var(--gold); box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 50%, transparent); }
.gm-join { margin: 0 0 16px; padding: 14px; border: 1.5px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); border-radius: 16px; background: color-mix(in srgb, var(--gold) 7%, var(--bg-raised)); }
.gm-join > .ui-label { display: block; margin: 0 0 8px; }
.gm-joinrow { display: flex; gap: 8px; }
.gm-joinrow .ui-field { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.gm-joinrow .ui-btn { flex: none; }

/* (playing together, games/together.js: the lobby, a question against the clock, the answer and the scores, who won) */
.gx-top { margin: 0 0 14px; }
.gx-h { margin: 4px 0 6px; font: italic 600 25px/1.2 var(--serif); }
.gx-p { margin: 6px 0 14px; font: 15.5px/1.5 var(--sans); }
.gx-sw { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); }
.gx-sw > span { flex: 1; display: flex; flex-direction: column; }
.gx-sw b { font: 700 14.5px var(--sans); }
.gx-sw small { font: 13px var(--sans); color: var(--muted); }
.gx-invite .lt-h { margin-top: 2px; }
.gx-invite .gm-set { margin: 12px 0 12px; }
.gx-how { margin-top: 0; }
.gx .gx-how { margin-bottom: 14px; }
.gx-foot .gm-meta { font-weight: 700; }
.gx-wait { text-align: center; padding-top: 34px; }
.gx-big { display: block; font: italic 600 30px/1.2 var(--serif); }
.gx-names { margin: 16px auto 0; max-width: 460px; }
.gx-names p { margin: 6px 0 0; font: 15px/1.6 var(--sans); }
.gx-leave { display: block; margin: 26px auto 0; padding: 6px 10px; border: 0; background: none; color: var(--muted); font: 600 13.5px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* (out of a game: Leave, Back to the gathering, and End, plain to see. From the owner: "The end and leave game buttons need
   to be a little more noticeable") */
.gx-out { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px auto 0; min-height: 42px; padding: 0 18px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 14.5px var(--sans); cursor: pointer; }
.gx-out svg { width: 18px; height: 18px; flex: none; }
.gx-out:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--rule)); }
.gx-out:active { transform: scale(0.97); }
.gx-out.is-end { border-color: color-mix(in srgb, var(--gm-no) 50%, var(--rule)); background: color-mix(in srgb, var(--gm-no) 8%, var(--bg-raised)); color: var(--gm-no); }
.gx-out.is-end:hover { border-color: var(--gm-no); }
.gm-go + .gx-out, .gx-status + .gx-out { margin-top: 16px; }
html.gm-tv .gx-out { display: none; }
.gx-joinf { max-width: 340px; margin: 16px auto 0; text-align: left; }
.gx-joinf .ui-label { display: block; margin: 0 0 6px; }
.gx-joinf .ui-field { width: 100%; }
.gx-joinf .gm-go { margin-top: 14px; }
.gx-clock { height: 8px; margin: -8px 0 16px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.gx-clock i { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--gold); transition: width 0.2s linear; }
.gm-opt.is-mine { opacity: 1; border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--bg-raised)); }
.gm-opt.is-mine em { background: var(--gold); color: var(--on-gold, #221E19); }
.gm-opt.is-static { cursor: default; opacity: 0.6; }
.gm-opt.is-static.is-ok, .gm-opt.is-static.is-no { opacity: 1; }
.gm-opt > span { flex: 1; }
.gx-count { flex: none; min-width: 28px; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 7%, transparent); font: 800 13px var(--sans); text-align: center; }
.gx-status { margin: 14px 0 0; text-align: center; font: 600 14px/1.45 var(--sans); color: var(--muted); }
.gx-place { margin: 0; font: 700 14px var(--sans); color: var(--muted); }
.gx-boardwrap { margin: 18px 0 4px; }
.gx-boardwrap > .ui-label { display: block; margin: 0 0 8px; }
.gx-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gx-board li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg-raised); font: 15px var(--sans); }
.gx-board li.is-me { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--bg-raised)); }
.gx-board em { flex: none; width: 22px; font: 800 13px var(--sans); font-style: normal; color: var(--muted); }
.gx-board b { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-board b small { font-weight: 600; color: var(--muted); }
.gx-board .gx-gain { flex: none; font: 800 12.5px var(--sans); color: var(--gm-ok); }
.gx-board span { flex: none; font: 800 15px var(--sans); font-variant-numeric: tabular-nums; }
.gx-podium { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; }
.gx-podium.is-n2 { grid-template-columns: 1fr 1.15fr; max-width: 360px; margin-inline: auto; }
.gx-podium.is-n1 { grid-template-columns: minmax(0, 220px); justify-content: center; }
.gx-pod { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px; border-radius: 16px 16px 6px 6px; background: color-mix(in srgb, var(--gold) 12%, var(--bg-raised)); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--rule)); text-align: center; min-width: 0; }
.gx-pod.is-1 { order: 2; padding-top: 22px; padding-bottom: 26px; background: color-mix(in srgb, var(--gold) 24%, var(--bg-raised)); }
.gx-pod.is-2 { order: 1; padding-bottom: 16px; }
.gx-pod.is-3 { order: 3; }
.gx-pod em { font: 800 12px var(--sans); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.gx-pod b { max-width: 100%; font: italic 600 18px/1.2 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-pod.is-1 b { font-size: 22px; }
.gx-pod span { font: 700 13.5px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }

/* (on a TV: big, from across the room) */
html.gm-tv .gm .ui-head { display: none; }
html.gm-tv .gm-box { max-width: none; }
html.gm-tv .gm-col { max-width: 1100px; padding-top: 34px; }
html.gm-tv .gm-q { font-size: 40px; }
html.gm-tv .gm-quote.is-big { font-size: 36px; }
html.gm-tv .gm-q .gm-who { font-size: 52px; }
html.gm-tv .gm-q .gm-sub { font-size: 20px; }
html.gm-tv .gm-opts { grid-template-columns: 1fr 1fr; gap: 14px; }
html.gm-tv .gm-opt { min-height: 86px; font-size: 26px; }
html.gm-tv .gm-opt em { width: 40px; height: 40px; font-size: 18px; }
html.gm-tv .gm-prog, html.gm-tv .gx-status { font-size: 20px; }
html.gm-tv .gx-clock { height: 14px; }
html.gm-tv .gx-board li { font-size: 22px; padding: 12px 18px; }
html.gm-tv .gm-said { font-size: 26px; }
.gx-tv { display: grid; grid-template-columns: minmax(280px, 1fr) 1.3fr; gap: 40px; align-items: center; min-height: 100%; max-width: 1200px; margin: 0 auto; padding: 40px; box-sizing: border-box; }
.gx-tvjoin { text-align: center; }
.gx-tvjoin .lt-bigcode { font-size: 64px; }
.gx-tvwho .gx-h { font-size: 44px; }
.gx-tvwho .gx-names { margin: 18px 0 0; max-width: none; }
.gx-tvwho .gx-names p { font-size: 26px; }
@media (max-width: 700px) { .gx-tv { grid-template-columns: 1fr; gap: 20px; padding: 20px; } }
@media (prefers-reduced-motion: reduce) { .gx-clock i { transition: none; } }

/* (the games for a room: their section on the games page) */
.gm-sec { display: block; margin: 22px 0 10px; }
.gm-card.is-room > i { background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); }

/* (written in: a bluff, a guess) */
.gx-write { display: flex; gap: 8px; margin: 12px 0 4px; }
.gx-write .ui-field { flex: 1; min-width: 0; font-size: 16px; }
.gx-write .ui-btn { flex: none; }
.gx-mine { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 10%, var(--bg-raised)); font: 15px/1.45 var(--sans); }
.gx-word { margin: 4px 0 10px; font: 15px/1.4 var(--sans); }
.gx-word b { font: italic 600 20px/1.25 var(--serif); }
.gx-word small { display: block; margin-top: 2px; color: var(--muted); font: 600 13px var(--sans); }
.gx-mask { font: 700 22px/1.3 ui-monospace, Menlo, monospace; letter-spacing: 0.18em; }
.gm-opt.is-own { opacity: 0.45; }
.gm-opt small { flex: none; font: 700 11.5px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.gx-blist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.gx-blist li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg-raised); }
.gx-blist li b { font: 700 15px/1.35 var(--sans); }
.gx-blist li small { font: 700 11.5px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.gx-blist li span { font: 13.5px/1.4 var(--sans); color: var(--muted); }
.gx-blist li.is-ok { border-color: var(--gm-ok); background: color-mix(in srgb, var(--gm-ok) 10%, var(--bg-raised)); }
.gx-blist li.is-ok small { color: var(--gm-ok); }
.gx-blist.is-heads li { flex-direction: row; align-items: center; justify-content: space-between; }

/* (Draw it: the pad, the pen, and the guesses as they come) */
.gx-pad { position: relative; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--rule); border-radius: 14px; background: #FFFDF7; overflow: hidden; }
/* (never bigger than the screen has room for, with what's over it and the guess under it: on a computer, the window wide or
   full screen, it filled the width and ran off the bottom. From the owner: "the drawing canvas is way too big on desktop") */
.gx.is-draw { --gx-pad: max(300px, min(760px, calc((100vh - 290px) * 4 / 3))); --gx-pad: max(300px, min(760px, calc((100dvh - 290px) * 4 / 3))); }
html.gm-tv .gx.is-draw { --gx-pad: max(300px, min(1200px, calc((100vh - 220px) * 4 / 3))); }
/* (Draw it on the TV, games/draw.js: the drawing on the left as big as the screen lets it be, and beside it, in type to be
   read across a room, the word's blanks and who's drawing, the guesses as they come, then the answer and the scores) */
html.gm-tv .gm-col.gx.is-draw.is-tv { --gx-pad: 100%; --gx-side: clamp(300px, 30vw, 560px); --gx-tvpad: max(320px, min(calc(100vw - var(--gx-side) - 112px), calc((100vh - 118px) * 4 / 3))); max-width: none; padding: 20px 36px 24px; }
.gx.is-draw.is-tv > .gx-tvrow { max-width: none; display: flex; align-items: flex-start; justify-content: center; gap: 36px; }
.gx.is-tv .gx-pad { flex: none; width: var(--gx-tvpad); border-width: 2px; border-radius: 18px; }
.gx-tvside { flex: 0 1 var(--gx-side); min-width: 0; max-height: calc(100vh - 118px); overflow: hidden; display: flex; flex-direction: column; gap: 20px; }
.gx.is-tv .gx-word { margin: 0; font-size: clamp(22px, 2vw, 32px); }
.gx.is-tv .gx-mask { display: block; font-size: clamp(36px, 3.6vw, 60px); line-height: 1.3; letter-spacing: 0.16em; word-spacing: 0.3em; } /* (a word's blanks kept together, the line broken between words) */
.gx.is-tv .gx-word small { margin-top: 10px; font-size: clamp(20px, 1.8vw, 30px); }
.gx.is-tv .gx-word b { display: block; margin-top: 4px; font-size: clamp(40px, 4vw, 68px); line-height: 1.15; }
.gx.is-tv .gx-feed { max-height: none; margin: 0; gap: 10px; }
.gx.is-tv .gx-feed li { font-size: clamp(20px, 1.9vw, 32px); line-height: 1.3; color: color-mix(in srgb, var(--ink) 72%, transparent); } /* (darker than a phone's: read across a room) */
.gx.is-tv .gm-after { margin: 0; align-items: flex-start; text-align: left; }
.gx.is-tv .gm-where { font-size: clamp(18px, 1.6vw, 26px); }
.gx.is-tv .gx-boardwrap { margin: 0; }
.gx.is-tv .gm-where .gm-ref { min-height: 0; padding: 6px 16px; font-size: inherit; }
.gx.is-tv .gx-boardwrap > .ui-label { font-size: clamp(14px, 1.2vw, 20px); }
.gx.is-tv .gx-board li { font-size: clamp(20px, 1.8vw, 30px); }
html.gm-tv .gx-wait .gx-big { padding-top: 10vh; font-size: clamp(40px, 4.4vw, 72px); } /* (whose turn it is, and starting soon, big on the TV, every game's)*/
.gx.is-draw > :not(.gm-prog):not(.gx-clock) { max-width: var(--gx-pad); margin-inline: auto; } /* (the word, the pen, the guess, and the guesses, as wide as the pad) */
.gx-pad canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.gx-pad.is-mine { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 30%, transparent); cursor: crosshair; }
.gx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 10px 0 0; }
.gx-sw-c { width: 30px; height: 30px; padding: 0; border: 2px solid var(--bg); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--rule); cursor: pointer; }
.gx-sw-c.is-on { box-shadow: 0 0 0 2.5px var(--gold); }
.gx-tool { min-height: 32px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
.gx-tool.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--bg-raised)); }
.gx-feed { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; max-height: 168px; overflow: hidden; }
.gx-feed li { font: 14px/1.4 var(--sans); color: var(--muted); }
.gx-feed li b { color: var(--ink); }
.gx-feed li.is-ok { color: var(--gm-ok); font-weight: 700; }
.gx-feed li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* (the drawer's ✓ on a typed guess, and Who got it?: everyone guessing, a tap each) */
.gx-okit { margin-left: auto; min-height: 30px; padding: 0 11px; border: 1.5px solid color-mix(in srgb, var(--gm-ok) 55%, var(--rule)); border-radius: 999px; background: color-mix(in srgb, var(--gm-ok) 9%, var(--bg-raised)); color: var(--gm-ok); font: 800 12.5px var(--sans); cursor: pointer; }
.gx-okit:disabled, .gx-gotn:disabled { opacity: 0.5; }
.gx-gotrow:empty { display: none; }
.gx-gotrow { margin: 12px 0 2px; }
.gx-gotrow > .ui-label { display: block; margin: 0 0 6px; }
.gx-gotp { display: flex; flex-wrap: wrap; gap: 7px; }
.gx-gotn { min-height: 36px; padding: 0 14px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 14px var(--sans); cursor: pointer; }
.gx-gotn:not(:disabled):not(.is-ok):hover { border-color: var(--gm-ok); }
span.gx-gotn.is-ok { display: inline-flex; align-items: center; border-color: var(--gm-ok); background: color-mix(in srgb, var(--gm-ok) 12%, var(--bg-raised)); color: var(--gm-ok); }

/* (Where in the world?: the map, the pins, and how far each was) */
.gx-map { position: relative; height: min(52vh, 420px); min-height: 240px; border-radius: 14px; overflow: hidden; background: #1c2a33; }
.gx-map .gm-loading { color: #fff; margin: 0; padding-top: 30%; }
.gx-cred { position: absolute; right: 6px; bottom: 4px; z-index: 1; margin: 0; font: 9.5px var(--sans); color: rgba(255, 255, 255, 0.75); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); pointer-events: none; }
.gx-cred a { color: inherit; }
.gx-pin { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.gx-pin i { width: 16px; height: 16px; border: 2.5px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--gold); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
.gx-pin span { order: -1; margin-bottom: 4px; padding: 2px 7px; border-radius: 99px; background: rgba(20, 18, 15, 0.78); color: #fff; font: 700 11.5px var(--sans); white-space: nowrap; }
.gx-pin.is-them i { background: #7EA8D8; }
.gx-pin.is-it i { width: 20px; height: 20px; background: #E5484D; }
.gx-pin.is-it span { background: #E5484D; }
.gx-dist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.gx-dist li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg-raised); font: 14.5px var(--sans); }
.gx-dist li.is-me { border-color: var(--gold); }
.gx-dist li b { flex: 1; }
.gx-dist li small { min-width: 56px; text-align: right; font-weight: 800; color: var(--gm-ok); }

/* (Timeline: the card to place, and the line, a "Here" between each) */
.gx-card { margin: 0 0 12px; padding: 14px 16px; border: 1.5px solid var(--gold); border-radius: 16px; background: color-mix(in srgb, var(--gold) 9%, var(--bg-raised)); text-align: center; }
.gx-card b { display: block; margin-top: 4px; font: italic 600 21px/1.3 var(--serif); }
.gx-ends { margin: 8px 0; text-align: center; font: 800 10.5px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.gx-line { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; display: grid; gap: 6px; }
.gx-line::before { content: ''; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: color-mix(in srgb, var(--gold) 40%, var(--rule)); }
.gx-ev { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg-raised); }
.gx-ev::before { content: ''; position: absolute; left: -17px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid color-mix(in srgb, var(--gold) 70%, var(--rule)); }
.gx-ev b { font: 600 14.5px/1.35 var(--sans); }
.gx-ev small { font: 12.5px var(--sans); color: var(--muted); }
.gx-ev small .gm-ref { min-height: 26px; padding: 0 9px; font-size: 12px; }
.gx-ev.is-new { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--bg-raised)); }
.gx-slot { list-style: none; }
.gx-here { width: 100%; min-height: 34px; border: 1.5px dashed color-mix(in srgb, var(--gold) 55%, var(--rule)); border-radius: 10px; background: transparent; color: var(--gold); font: 700 13px var(--sans); cursor: pointer; }
.gx-here:not(:disabled):hover { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.gx-here:disabled { opacity: 0.4; cursor: default; }
.gx-here.is-mine { opacity: 1; border-style: solid; background: color-mix(in srgb, var(--gold) 18%, var(--bg-raised)); color: var(--ink); }

/* (Heads up: the one guessing holds it to their forehead: the name, big, and the two halves to tap) */
html.gx-hfull .gm .gm-top { display: none; }
.gx-hup { position: fixed; inset: 0; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); }
.gx-hz { display: flex; align-items: flex-end; justify-content: center; padding: 0 0 calc(18px + env(safe-area-inset-bottom)); border: 0; background: transparent; color: var(--muted); font: 800 14px var(--sans); text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gx-hz.is-got { color: var(--gm-ok); }
.gx-hz:active { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.gx-hw { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 24px; text-align: center; pointer-events: none; }
.gx-hw b { font: italic 700 min(15vw, 30vh, 150px)/1.05 var(--serif); }
.gx-hw small { font: 800 18px var(--sans); color: var(--muted); }
.gx-hbig { margin: 6px 0 12px; padding: 22px 16px; border-radius: 18px; background: color-mix(in srgb, var(--gold) 12%, var(--bg-raised)); text-align: center; font: italic 700 30px/1.2 var(--serif); }
.gx-hcount { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 6px 0 4px; }
.gx-hcount b { font: italic 600 44px/1 var(--serif); color: var(--gold); }
.gx-hcount span { font: 700 15px var(--sans); color: var(--muted); }

/* (Bible Jeopardy: the board, the clue, and the buzzer) */
.gx-jb { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 5px; margin: 6px 0 4px; }
.gx-jh { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 4px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 82%, var(--bg)); color: var(--bg); font: 800 10.5px/1.2 var(--sans); text-align: center; letter-spacing: 0.02em; }
.gx-jc { min-height: 44px; padding: 0; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--gold) 22%, var(--bg-raised)); color: var(--ink); font: 800 15px var(--sans); cursor: pointer; }
.gx-jc:not(:disabled):hover { background: color-mix(in srgb, var(--gold) 34%, var(--bg-raised)); }
.gx-jc:disabled { cursor: default; color: var(--muted); }
.gx-jc.is-used { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.gx-jc.is-on { box-shadow: 0 0 0 2px var(--gold); }
.gx-jq { margin: 4px 0 12px; }
.gx-buzz { display: block; width: 100%; min-height: 84px; margin: 4px 0 14px; border: 0; border-radius: 22px; background: var(--gold); color: var(--on-gold, #221E19); font: 800 28px var(--sans); letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--gold) 80%, transparent); }
.gx-buzz:active { transform: scale(0.98); }
.gx-buzz:disabled { opacity: 0.55; }
@media (orientation: landscape) and (max-height: 500px) {
  .gx-map { height: 62vh; }
  .gx-jh { min-height: 36px; font-size: 10px; }
  .gx-jc { min-height: 34px; font-size: 13.5px; }
  .gx-buzz { min-height: 60px; font-size: 22px; }
}
html.gm-tv .gx-jh { font-size: 18px; min-height: 80px; }
html.gm-tv .gx-jc { font-size: 30px; min-height: 80px; }
html.gm-tv .gx-hbig, html.gm-tv .gx-card b { font-size: 40px; }
html.gm-tv .gx-ev b { font-size: 22px; }
html.gm-tv .gx-map { height: 70vh; }
html.gm-tv .gx-feed li { font-size: 22px; }