html, body { height: 100%; margin: 0; }
#card {
  box-sizing: border-box; height: 100%; display: flex; flex-direction: column;
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1d2530; background: #fdfbf9; border: 1px solid #d8cfc6; border-radius: 8px; overflow: hidden;
}
#card * { box-sizing: border-box; }
#card header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: #8a3d12; color: #fff; }
#card header .title { font-weight: 700; letter-spacing: .02em; }
#card header .tools { display: flex; align-items: center; gap: 4px; }
#card header .tools button { background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 15px; padding: 2px 5px; line-height: 1; }
#card header .tools .lvl { font-size: 11px; font-weight: 700; border: 1px solid #c77a4a; border-radius: 4px; padding: 2px 7px; letter-spacing: .02em; }
#card header .tools .lvl[data-level="easy"] { background: #2f8f4e; border-color: #6fce8e; }
#card header .tools .lvl[data-level="hard"] { background: #b23b3b; border-color: #e08a8a; }
#card .cattabs { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 3px; padding: 5px 6px; background: #5e2a0c; border-bottom: 1px solid #3f1c07; }
#card .cattabs .cat { flex: 1 1 auto; padding: 3px 4px; border: 1px solid #9a5428; border-radius: 4px; background: transparent; color: #f3dccb;
  font: inherit; font-size: 10px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#card .cattabs .cat:hover { background: #75360f; }
#card .cattabs .cat.active { background: #fff; color: #8a3d12; border-color: #fff; }
#card .sbrow { flex: 0 0 auto; display: flex; align-items: center; background: #f6eee7; border-bottom: 1px solid #e8dccf; }
#card .sb { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 3px 12px; padding: 6px 10px; font-size: 12px; color: #4a3a2e; }
#card .sb b { color: #15110c; }
#card .sb .you b { color: #b8541a; }
#card .records { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1px 16px; padding: 3px 10px;
  background: #fff7e6; border-bottom: 1px solid #f0e2c0; font-size: 11px; color: #7a5b1e; }
#card .records .recrow { display: flex; flex-wrap: nowrap; gap: 2px 7px; align-items: center; padding: 0 2px; border-radius: 4px; }
#card .records .rlabel { font-weight: 700; }
#card .records .rlabel.easy { color: #2f8f4e; }
#card .records .rlabel.hard { color: #b23b3b; }
#card .records b { color: #b8860b; }
#card .records .recrow.flash { animation: recflash .9s ease; }
@keyframes recflash { from { background: #ffe09a; } to { background: #fff7e6; } }
/* the quarter's eight possessions: one pip each, coloured by the result */
.pips { flex: 0 0 auto; display: flex; gap: 3px; margin: 2px 10px; }
.pip { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #c9b8a8; background: transparent; }
.pip.now { border-color: #b8541a; box-shadow: 0 0 0 1px #b8541a; }
.pip.two { background: #2f8f4e; border-color: #2f8f4e; }
.pip.three { background: #2f6fb5; border-color: #2f6fb5; }
.pip.andone { background: #e0a100; border-color: #b8860b; }
.pip.turnover { background: #c0392b; border-color: #c0392b; }
.meta { flex: 0 0 auto; padding: 2px 12px 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8a7a6e; }
.question { flex: 0 0 auto; padding: 4px 12px 8px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.choices { flex: 1 1 auto; overflow: auto; padding: 0 12px; display: flex; flex-direction: column; gap: 5px; }
.choice { text-align: left; padding: 6px 9px; border: 1px solid #d3c9bf; border-radius: 6px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.choice:hover:not(:disabled) { border-color: #c07a4e; background: #fbf4ee; }
.choice.sel { border-color: #b8541a; box-shadow: 0 0 0 2px rgba(184,84,26,.25); }
.choice.correct { background: #e3f5e6; border-color: #1c7d3a; font-weight: 700; }
.choice.wrong { background: #fde7e7; border-color: #b00020; }
.choice:disabled { cursor: default; }
.result { flex: 0 0 auto; min-height: 0; padding: 0 12px; font-size: 13px; }
.result.ok, .result.bad, .result.end { min-height: 18px; padding: 6px 12px; }
.result.ok { color: #1c7d3a; font-weight: 700; }
.result.bad { color: #b00020; font-weight: 700; }
.result .final { display: block; margin-top: 3px; color: #8a3d12; font-weight: 700; }
.result .expl { display: block; color: #5e5750; font-weight: 400; font-size: 12px; margin-top: 2px; }
.result .bio { display: block; color: #736a62; font-weight: 400; font-style: italic; font-size: 11.5px; margin-top: 3px; padding-top: 3px; border-top: 1px solid #eee4da; }
.result .qlink { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; color: #b8541a; text-decoration: none; }
.result .qlink:hover { text-decoration: underline; }
.result .credit { display: block; color: #948a82; font-weight: 400; font-size: 10.5px; margin-top: 4px; font-style: italic; }
.action { flex: 0 0 auto; margin: 4px 12px 8px; padding: 7px; border: 0; border-radius: 6px; background: #b8541a; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.action:disabled { background: #e2c2ab; cursor: default; }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] #card { background: #14191d; color: #e4e7ea; border-color: #333b44; }
:root[data-theme="dark"] .choice { background: #1c2329; color: #e4e7ea; border-color: #333b44; }
:root[data-theme="dark"] .choice:hover { background: #2e2620; }
:root[data-theme="dark"] .choice.correct { background: #173a22; border-color: #2f9e55; }
:root[data-theme="dark"] .choice.wrong { background: #3d1a1c; border-color: #c0392b; }
:root[data-theme="dark"] .result .expl, :root[data-theme="dark"] .result .bio { color: #b6c0c9; }
:root[data-theme="dark"] .result .credit { color: #8a94a0; }
:root[data-theme="dark"] .result .final { color: #f0a070; }
:root[data-theme="dark"] #card .sbrow { background: #2a1f18; border-color: #4a3526; }
:root[data-theme="dark"] #card .sb { color: #c9b8a8; }
:root[data-theme="dark"] #card .sb b { color: #e4e7ea; }
:root[data-theme="dark"] #card .sb .you b { color: #f0a070; }
:root[data-theme="dark"] .pip { border-color: #6a5646; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #card { background: #14191d; color: #e4e7ea; border-color: #333b44; }
  :root:not([data-theme="light"]) .choice { background: #1c2329; color: #e4e7ea; border-color: #333b44; }
  :root:not([data-theme="light"]) .choice:hover { background: #2e2620; }
  :root:not([data-theme="light"]) .choice.correct { background: #173a22; border-color: #2f9e55; }
  :root:not([data-theme="light"]) .choice.wrong { background: #3d1a1c; border-color: #c0392b; }
  :root:not([data-theme="light"]) .result .expl, :root:not([data-theme="light"]) .result .bio { color: #b6c0c9; }
  :root:not([data-theme="light"]) .result .final { color: #f0a070; }
  :root:not([data-theme="light"]) #card .sbrow { background: #2a1f18; border-color: #4a3526; }
  :root:not([data-theme="light"]) #card .sb { color: #c9b8a8; }
  :root:not([data-theme="light"]) #card .sb b { color: #e4e7ea; }
  :root:not([data-theme="light"]) #card .sb .you b { color: #f0a070; }
  :root:not([data-theme="light"]) .pip { border-color: #6a5646; }
}

/* Arcade host: the frame follows the content (index.html reports the card's height) */
html.autosize, html.autosize body { height: auto; background: transparent !important; }
html.autosize #card { height: auto; max-height: 1100px; }