/* game.css: the Moral Preference Test. Uses the site's tokens from ../styles.css. */
/* Newspaper masthead. UnifrakturMaguntia by J. 'Mach' Wust, SIL Open Font License 1.1; Google Fonts' latin woff2, self-hosted. */
@font-face { font-family: "UnifrakturMaguntia"; src: url(fonts/UnifrakturMaguntia.woff2) format("woff2"); font-display: swap; }
:root {
  --paper: #f1ead9; --paper-edge: #d9cfb8; --ink: #2a2622; --ink-soft: #6b6358;
  --ok: #2e7d4f; --bad: #b0281f; --chip: #eef3f7; --chip-text: #1d3b52;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #d9d1bf; --paper-edge: #8a8272; --ok: #6fc193; --bad: #ef7d73; --chip: #24384a; --chip-text: #e3eef6; }
}
:root[data-theme="dark"] { --paper: #d9d1bf; --paper-edge: #8a8272; --ok: #6fc193; --bad: #ef7d73; --chip: #24384a; --chip-text: #e3eef6; }

body { background: var(--color-page-bg); color: var(--color-text); font-family: var(--font-body); margin: 0; }
.gamebar { display: flex; align-items: center; gap: 1rem; max-width: 46rem; margin: 0 auto; padding: .8rem 16px; border-bottom: 1px solid var(--color-rule); font-size: .9rem; }
.gamebar .title { flex: 1; text-align: center; color: var(--color-abstract-text); font-variant: small-caps; letter-spacing: .04em; }
.game { max-width: 46rem; margin: 0 auto; padding: 1rem 16px 3rem; }
.game:focus, .q:focus { outline: none; }

.kicker { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-abstract-text); margin: 1.2rem 0 .3rem; }
.text { font-size: 1.08rem; line-height: 1.6; margin: .6rem 0; }
.villain { font-style: italic; font-size: 1.3rem; text-align: center; margin: 1rem 0 .5rem; }
.q { font-size: 1.3rem; line-height: 1.4; font-weight: normal; margin: 1rem 0; }
.punch { font-weight: bold; }
h3 { margin: 1.8rem 0 .6rem; }

.shot { position: relative; margin: 0 0 1rem; }
.shot img { display: block; width: 100%; height: auto; border-radius: 3px; }
.shot .live { position: absolute; top: 10px; left: 10px; background: #c62a20; color: #fff; font: bold .75rem/1 system-ui, sans-serif; letter-spacing: .1em; padding: 5px 8px 5px 20px; border-radius: 3px; }
.shot .live::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fff; animation: blink 1.4s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .shot .live::before { animation: none; } }
/* motion: cut-out layers over the still, a Skip / Replay button, the impact's flash */
.shot .overlay { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 3px; overflow: hidden; pointer-events: none; }
.shot .overlay img { position: absolute; inset: 0; width: 100%; height: 100%; }
.shot .flash { background: #fffbe8; opacity: 0; }
.shot.playing { cursor: pointer; }
.shot .beatctl { position: absolute; right: 8px; bottom: 8px; z-index: 2; background: rgba(20,16,14,.55); color: #f4efe6; border: 0; border-radius: 3px; padding: 3px 9px; font-size: .75rem; cursor: pointer; opacity: .75; }
.shot .beatctl:hover, .shot .beatctl:focus-visible { opacity: 1; }
.shot figcaption { font-size: .85rem; text-align: center; color: var(--color-abstract-text); margin-top: .3rem; }

/* buttons */
button { font: inherit; }
.options { display: grid; gap: .6rem; margin: 1rem 0; }
.option { text-align: left; padding: .75rem 1rem; border: 1px solid var(--color-rule); border-radius: 6px; background: var(--color-bg); color: var(--color-text); cursor: pointer; font-size: 1.05rem; }
.option:hover, .option:focus-visible { border-color: var(--color-link); }
.option.chosen { border-color: var(--color-link); box-shadow: inset 3px 0 0 var(--color-link); }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.nav .primary { margin-left: auto; }
.primary { background: var(--color-link); color: #fff; border: 0; border-radius: 6px; padding: .6rem 1.3rem; cursor: pointer; }
.primary:disabled { opacity: .4; cursor: default; }
.secondary { background: none; color: var(--color-link); border: 1px solid var(--color-link); border-radius: 6px; padding: .5rem 1rem; cursor: pointer; }
.link { background: none; border: 0; color: var(--color-link); cursor: pointer; padding: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .primary { color: #10161c; } }

/* newspapers */
.papers { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) { .papers { grid-template-columns: 1fr; } }
.paper { background: var(--paper); color: var(--ink); border: 1px solid var(--paper-edge); border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.1); padding: 12px 14px 10px; text-align: left; cursor: pointer; outline: 3px solid transparent; outline-offset: 3px; transition: transform .15s ease; }
.paper:hover { transform: translateY(-2px) rotate(-.3deg); }
.papers .paper { animation: land .5s cubic-bezier(.2,.7,.3,1) backwards; --tilt: -2.5deg; }   /* the morning papers land on the doorstep */
.papers .paper + .paper { animation-delay: .14s; --tilt: 2deg; }
@keyframes land { from { opacity: 0; transform: translateY(-28px) rotate(var(--tilt)); } }
@media (prefers-reduced-motion: reduce) { .papers .paper { animation: none; } }
.paper:focus-visible, .paper[aria-pressed="true"] { outline-color: var(--color-link); }
.masthead { font-family: "UnifrakturMaguntia", "Old English Text MT", Georgia, serif; font-size: clamp(1.5rem, 4vw, 2rem); text-align: center; line-height: 1; margin: 2px 0 6px; }
.dateline { display: flex; justify-content: space-between; gap: .5rem; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink); padding: 3px 0; margin-bottom: 8px; }
.dateline span { white-space: nowrap; }
@media (max-width: 420px) { .dateline span:first-child { display: none; } }
.headline { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.15; margin: 0 0 8px; text-wrap: balance; }
.paper img { display: block; width: 100%; height: auto; border: 1px solid var(--ink-soft); }
.paper .caption { font-size: .7rem; font-style: italic; color: var(--ink-soft); margin: 4px 0 0; }

/* sliders */
.slider { margin: 1rem 0; }
.bars { display: grid; gap: 6px; margin-bottom: .6rem; }
.barrow { display: flex; align-items: center; gap: .6rem; min-height: 22px; }
.bar { display: inline-block; height: 14px; border-radius: 2px; flex: none; min-width: 2px; }
.bar.unit { background: var(--color-link-hover); }
.bar.mine { background: var(--color-link); transition: width .05s linear; }
.barlabel { font-size: .9rem; white-space: nowrap; }
.unitbar { display: flex; align-items: center; gap: .6rem; margin: 1rem 0; }
.unitbar .bar { width: 10%; }
input[type="range"] { width: 100%; accent-color: var(--color-link); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ends { display: flex; justify-content: space-between; font-size: .8rem; color: var(--color-abstract-text); gap: .5rem; }
.ends span:nth-child(2) { text-align: center; } .ends span:last-child { text-align: right; }
.readout { text-align: center; font-size: 1.05rem; }

/* ledger */
.ledger { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 1rem; }
.ledger td { padding: .45rem .3rem; border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.ledger .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger .total td { font-weight: bold; border-bottom: 0; border-top: 2px solid var(--color-text); }

/* the ladder */
.puzzle { display: grid; gap: 0 1.5rem; }
@media (min-width: 700px) { .puzzle { grid-template-columns: 3fr 2fr; align-items: start; } .puzzle .checks { margin-top: 0; } }
.ladder { display: block; width: 100%; max-width: 480px; margin: .5rem auto 0; touch-action: none; user-select: none; }
.ladder .axis { stroke: var(--color-abstract-text); stroke-width: 2; }
.ladder .end { fill: var(--color-abstract-text); font-size: 12px; }
.ladder .yard { fill: none; stroke: var(--color-link-hover); stroke-width: 3; }
.ladder .yardlabel { fill: var(--color-link-hover); font-size: 12px; }
.ladder .gapband { fill: var(--ok); opacity: .55; }
.ladder .gapband.bad { fill: var(--bad); }
.ladder .chip line { stroke: var(--color-abstract-text); stroke-width: 1; stroke-dasharray: 3 3; }
.ladder .chip text { font-size: 12px; fill: var(--color-text); }
.ladder .chip rect { fill: var(--color-sidebar-bg); stroke: var(--color-sidebar-border); }
.ladder .chip circle { fill: var(--color-abstract-text); }
.ladder .chip .tollbar { fill: rgba(20,16,14,.6); stroke: none; }
.ladder .chip .knife .blade { fill: #eeeae2; }
.ladder .chip .knife .hilt { fill: #3a2a20; stroke: none; }
.ladder .chip .knife .drop { fill: #c8281f; }
.ladder .loose { cursor: grab; }
.ladder .loose rect { fill: var(--chip); stroke: var(--color-link); stroke-width: 1.5; }
.ladder .loose text { fill: var(--chip-text); }
.ladder .loose circle { fill: var(--color-link); }
.ladder .loose:focus { outline: none; }
.ladder .loose:focus rect, .ladder .loose.drag rect { stroke-width: 3; }
.ladder .loose.drag { cursor: grabbing; }
.hint { text-align: center; font-size: .8rem; color: var(--color-abstract-text); margin: .2rem 0 1rem; }
.checks { list-style: none; padding: 0; margin: .5rem 0; }
.checks li { padding: .35rem 0 .35rem 1.8rem; position: relative; line-height: 1.4; }
.checks li::before { position: absolute; left: .2rem; font-weight: bold; }
.checks li.ok::before { content: "✓"; color: var(--ok); }
.checks li.bad { color: var(--bad); }
.checks li.bad::before { content: "✗"; color: var(--bad); }
.status { font-style: italic; min-height: 1.5em; }
.puzzle-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .4rem; }
.msg { min-height: 1.2em; }

/* the report */
.tetra { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 520px) { .tetra { grid-template-columns: 1fr; } }
.box { border: 1px solid var(--color-rule); border-radius: 6px; padding: .7rem .9rem; display: grid; gap: .2rem; }
.box .state { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.box.kept { border-color: var(--ok); }
.box.kept .state { color: var(--ok); }
.box.gave { opacity: .6; border-style: dashed; }
.box.gave .state { color: var(--bad); }
.box .desc { font-size: .92rem; color: var(--color-abstract-text); }

/* the livestream: the bridge seen through a camera (grain, scan lines, a vignette, an on-screen time) */
.shot.cam { overflow: hidden; border-radius: 3px; }
.shot.cam img { filter: saturate(.8) contrast(1.06) brightness(.96); }
.shot.cam::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.35) 100%); }
.shot.cam .camid, .shot.cam .camtime { position: absolute; z-index: 1; color: rgba(255,255,255,.9); font: .72rem/1 ui-monospace, Consolas, monospace; letter-spacing: .06em; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.shot.cam .camid { top: 12px; right: 12px; }
.shot.cam .camtime { bottom: 10px; right: 12px; }
.shot.cam .live { z-index: 1; }