/* Hit Miss Maybe: shared look, carried over from the original ABTWW ladder artifact */
:root {
  --bg: #eef1f4;
  --surface: #ffffff;
  --ink: #15202b;
  --muted: #5d6b79;
  --line: #d3dae2;
  --accent: #1d4f91;      /* sunburst blue */
  --accent-ink: #ffffff;
  --lume: #b9862f;        /* aged tritium */
  --good: #2f7a4f;
  --danger: #c0392b;
  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f151c; --surface: #18212b; --ink: #e6ebf0; --muted: #94a3b2; --line: #2a3644;
  --accent: #6f9fe0; --accent-ink: #0b1220; --lume: #d9b06a; --good: #6cc394; --danger: #ef7d6f; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0f151c; --surface: #18212b; --ink: #e6ebf0; --muted: #94a3b2; --line: #2a3644;
  --accent: #6f9fe0; --accent-ink: #0b1220; --lume: #d9b06a; --good: #6cc394; --danger: #ef7d6f; color-scheme: dark }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body); }
a { color: var(--accent); }
.wrap { max-width: 760px; margin: 0 auto; padding-block: 28px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; gap: 36px; }

header { display: grid; gap: 6px; }
.eyebrow { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lume); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
h1 { font: 700 clamp(30px, 7vw, 46px)/1.05 var(--display); margin: 0; text-wrap: balance; }
.lede { color: var(--muted); margin: 0; max-width: 60ch; }
h2 { font: 500 22px/1.2 var(--display); margin: 0; }
.sectionhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.meta { font: 400 12px/1.4 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
section { display: grid; gap: 14px; }

/* Duel */
.pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.vs { align-self: center; font: italic 500 18px var(--display); color: var(--muted); }
.pick { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 14px; padding: 20px 14px 18px; display: grid; justify-items: center; align-content: start; gap: 12px; text-align: center;
  cursor: pointer; font: inherit; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; min-width: 0; }
.pick:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 22px -14px var(--accent); }
.pick:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pick:disabled { cursor: default; opacity: .6; transform: none; box-shadow: none; }
.pick.won { border-color: var(--good); box-shadow: 0 0 0 2px var(--good) inset; opacity: 1; }
.brand { font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.model { font: 500 19px/1.2 var(--display); text-wrap: balance; overflow-wrap: anywhere; }
.ref { font: 400 12px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.duelbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ghost { appearance: none; background: none; border: 1px solid var(--line); color: var(--ink); font: 500 13px var(--body);
  padding: 8px 14px; border-radius: 999px; cursor: pointer; text-decoration: none; }
.ghost:hover { border-color: var(--accent); color: var(--accent); }
.ghost:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ghost:disabled { opacity: .5; cursor: default; }
.notice { font-size: 13px; color: var(--muted); }
.human { display: flex; justify-content: center; min-height: 0; }
.human[hidden] { display: none; }

/* Dial (drawn stand-in until a photo is added) */
.dial { width: 96px; height: 96px; border-radius: 50%; position: relative; flex: none;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), transparent 55%), var(--d, #223);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--line), inset 0 2px 6px rgba(0,0,0,.35); }
.dial::before { content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background: repeating-conic-gradient(from -1.5deg, var(--m, #eee) 0 3deg, transparent 3deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%); }
.dial::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 34%; background: var(--m, #eee);
  transform-origin: 50% 100%; transform: translate(-50%, -100%) rotate(var(--h, 60deg)); border-radius: 2px; }
.dial.sm { width: 30px; height: 30px; box-shadow: 0 0 0 1px var(--line), inset 0 1px 3px rgba(0,0,0,.35); }
.dial.sm::before { inset: 3px; }
/* brand images are product shots on transparent/white backgrounds, so show the whole watch */
.shotbox { width: 100%; max-width: 180px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; display: block; flex: none; }
.shotbox.sm { width: 30px; height: 30px; max-width: 30px; border-radius: 6px; background: #fff; }
.shot { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Ladder */
.ladder { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 2.2em 30px minmax(0,1fr) auto; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.rank { font: 500 14px var(--mono); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.ladder:not(.admin):not(.later) .row:nth-child(-n+3) .rank { color: var(--lume); }
.who { min-width: 0; }
.who b { font-weight: 600; }
.who span { color: var(--muted); }
.who .line1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .line2 { font: 400 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.score { text-align: right; font: 500 17px var(--mono); font-variant-numeric: tabular-nums; }
.prov { display: block; font: 400 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.empty { padding: 28px 0; color: var(--muted); border-bottom: 1px solid var(--line); }
.how { font-size: 13px; color: var(--muted); margin: 0; max-width: 62ch; }

.credit { font: 400 10px var(--mono); color: var(--muted); }
.side { display: grid; grid-template-rows: 1fr auto; gap: 6px; min-width: 0; }
.side .credit { justify-self: center; text-align: center; }
a.credit[href] { text-decoration: underline; text-underline-offset: 2px; }
a.credit[href]:hover { color: var(--accent); }

/* Round tabs + level switch */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 13px var(--body);
  padding: 8px 14px; border-radius: 999px; cursor: pointer; display: grid; gap: 1px; text-align: left; }
.tab small { font: 400 11px var(--mono); color: var(--muted); }
.tab:hover { border-color: var(--accent); }
.tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tab[aria-selected="true"] small { color: inherit; opacity: .8; }
.tab:focus-visible, .seg button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tabs-sm { align-items: center; gap: 6px; }
.tabs-sm .tab { padding: 5px 11px; font-size: 12px; }
.tabs-sm .meta { margin-right: 4px; color: var(--lume); }
.gphg-section { border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: var(--surface); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { appearance: none; border: 0; background: none; color: var(--muted); font: 500 12px var(--mono); padding: 6px 12px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.closed { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 20px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.past { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.past li { border-bottom: 1px solid var(--line); }
.past button { appearance: none; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px 0; }
.past button:hover .line1 b { color: var(--accent); }
.past .when { font: 400 12px var(--mono); color: var(--muted); text-align: right; }

/* Forms (admin) */
.bench { border: 1px dashed var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 12px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; align-items: end; }
.fields label { display: grid; gap: 4px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fields input { font: 400 14px var(--body); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); min-width: 0; width: 100%; }
.fields input[type=color] { padding: 2px; height: 38px; }
.fields input[type=file] { padding: 6px; font-size: 12px; }
.primary { appearance: none; border: 0; background: var(--accent); color: var(--accent-ink); font: 600 14px var(--body); padding: 10px 16px; border-radius: 8px; cursor: pointer; }
.primary:disabled { opacity: .6; cursor: default; }
.primary:focus-visible, .fields input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; margin-top: 2px; }
.act { appearance: none; border: 0; background: none; color: var(--accent); cursor: pointer; font: 400 12px var(--mono); padding: 2px 0; }
.act:hover { text-decoration: underline; }
.act.danger { color: var(--muted); }
.act.danger:hover, .act.danger[data-armed="1"] { color: var(--danger); }
.row.removed { opacity: .6; }
.row.editing { grid-template-columns: 1fr; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Home */
.tools { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tool { display: grid; gap: 8px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.tool:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 22px -14px var(--accent); }
.tool:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tool p { margin: 0; color: var(--muted); font-size: 14px; }
.tool.soon { opacity: .6; pointer-events: none; }

@media (max-width: 460px) {
  .pair { grid-template-columns: 1fr 1fr; }
  .vs { display: none; }
  .dial { width: 72px; height: 72px; }
  .model { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pick, .tool { transition: none; } .pick:hover, .tool:hover { transform: none; } }
.framing { display: grid; grid-template-columns: 120px repeat(3, minmax(110px, 1fr)); gap: 10px; align-items: end; }
.framepreview .shotbox { width: 120px; border: 1px solid var(--line); background: #fff; }
@media (max-width: 560px) { .framing { grid-template-columns: 1fr 1fr; } }

/* page buttons under long lists */
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 14px 0 4px; }
.pager:empty { display: none; }
.pager .ghost { min-width: 34px; padding: 5px 9px; }
.pager .ghost.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
/* admin lists: thumbnails fill the row height */
.ladder.admin .row { grid-template-columns: 2.2em 52px minmax(0,1fr) auto; padding: 5px 0; }
.ladder.admin .shotbox.sm, .ladder.admin .dial.sm { width: 52px; height: 52px; max-width: 52px; }
.ladder.admin .dial.sm::before { inset: 5px; }
/* admin: click a thumbnail to re-frame the photo */
.thumb { appearance: none; border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: 6px; display: block; }
.thumb:hover .shotbox, .thumb:focus-visible .shotbox { outline: 2px solid var(--accent); outline-offset: 1px; }
#framer { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); padding: 18px; width: min(340px, calc(100vw - 32px)); }
#framer::backdrop { background: rgba(0, 0, 0, .45); }
#framer h3 { margin: 0 0 6px; font-size: 16px; }
#framer .hint { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.framebox { width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #fff; border: 1px solid var(--line); cursor: grab; touch-action: none; user-select: none; }
.framebox:active { cursor: grabbing; }
.framebox img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.zoomrow { display: flex; align-items: center; gap: 10px; margin: 12px 0; font: 500 12px var(--mono); color: var(--muted); }
.zoomrow input { flex: 1; }
#framer .toolbar { display: flex; gap: 8px; }
/* admin page: wider so long names, ladders and actions fit */
.wrap.wide { max-width: 1240px; }
.ladder.admin .who .line1 { white-space: normal; }
.where { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.where .badge { margin-left: 0; }
/* New arrivals: one header row per brand */
.row.brandhead { background: var(--surface); border-top: 2px solid var(--line); }
.row.brandhead .who b { font-size: 15px; }
/* promotion / relegation: two lists side by side */
.promo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.promo h3 { font-size: 14px; margin: 6px 0; color: var(--muted); }
@media (max-width: 760px) { .promo { grid-template-columns: 1fr; } }
.brandladder select { font: inherit; font-size: 12px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); margin-left: 4px; }
/* catalogue: search + By brand / All watches switch */
.catbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.catbar .search { flex: 1; min-width: 220px; }
.row.brandrow .who b { font-size: 15px; }
/* ladder rows that link to the photo source */
.row.linked { position: relative; }
.row.linked .rowlink { position: absolute; inset: 0; z-index: 1; border-radius: 8px; }
.row.linked:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.row.linked .rowlink:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }
.row.linked .via { text-decoration: underline; text-underline-offset: 2px; }
/* "Got an opinion to share?" box on the voting page */
.opinion { margin-top: 14px; border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px; }
.opinion summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.opinion form { display: grid; gap: 10px; margin-top: 10px; }
.opinion label { display: grid; gap: 4px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.opinion textarea, .opinion input, .opinion select { font: 400 15px var(--body); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-transform: none; letter-spacing: 0; }
.opinion .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.opinionbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.opinionbar .hint { font-size: 13px; color: var(--muted); }
/* admin: opinions inbox */
.opinionrow .optext { white-space: pre-wrap; margin: 4px 0; font-size: 14px; }
/* admin forms: rarely used fields tucked away */
.fields .more { grid-column: 1 / -1; }
.fields .more summary { cursor: pointer; font: 500 12px var(--mono); color: var(--muted); }
.fields .more .fields { margin-top: 8px; }
/* games and taste report shown between votes */
.interlude { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 18px 14px; margin-bottom: 12px; }
.game { display: grid; justify-items: center; gap: 10px; text-align: center; }
.game .gametitle { font: 600 clamp(20px, 4vw, 26px) var(--display); margin: 0; }
.game .pair { width: 100%; }
.gamebtns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.gamebtns button { min-width: 92px; }
.gameresult { margin: 4px 0 0; font-size: 15px; }
.gameresult .ghost { margin-top: 10px; }
.game .price { font: 600 16px var(--mono); color: var(--ink); min-height: 1.2em; }
.pick.lost { border-color: #c0392b; box-shadow: 0 0 0 2px #c0392b inset; opacity: 1; }
.game.taste { justify-items: start; text-align: left; max-width: 520px; margin: 0 auto; }
.game.taste .big { font: 600 34px var(--display); margin: 0; }
.game.taste p { margin: 0; }
.linkish { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }
.guestbar { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 14px; }
/* games: centre the single-watch photo; make the blind taste test obvious */
.game .shotbox { margin: 0 auto; width: min(240px, 70vw); max-width: 240px; }
#duel.blinded { position: relative; padding-top: 34px; }
#duel.blinded::before { content: "Blind taste test: brands hidden"; position: absolute; top: 0; left: 50%; transform: translateX(-50%); font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--surface); background: var(--ink); padding: 6px 12px; border-radius: 999px; }
#duel.blinded .pick { border: 2px dashed var(--accent); }
.game.taste .since { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* games: a centred card over a dimmed page */
/* a game sits where the head to head was; the head to head is hidden until the game is closed */
.interlude { display: grid; place-items: center; padding: 22px 18px; min-height: 360px; }
.interlude[hidden] { display: none; }
.interlude > .game { width: min(620px, 100%); }
.gaming #duel, .gaming .duelbar, .gaming #opinionBox, .gaming #human, .gaming #closedBox, .gaming #guestBar, .gaming #closes { display: none !important; }
/* Guess the price of the Seiko */
.seikoform { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.seikoform .pound { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--surface); }
.seikoform .pound span { font: 600 18px var(--mono); color: var(--muted); }
.seikoform input { border: 0; outline: 0; font: 500 18px var(--mono); width: 9ch; padding: 9px 6px; background: transparent; color: var(--ink); }
.game.seiko .gameresult .big { font: 600 26px var(--display); }

/* admin: inline edit boxes (Seiko catalogue) */
input.inline { font: inherit; border: 1px solid transparent; border-radius: 6px; padding: 2px 4px; background: transparent; color: var(--ink); width: 100%; }
input.inline:hover, input.inline:focus { border-color: var(--line); background: var(--surface); }
input.inline.price { width: 8ch; font-family: var(--mono); }
.line1 input.inline { font-weight: 600; }

/* admin: wheel tallies */
.tablewrap { overflow-x: auto; }
table.tally { border-collapse: collapse; width: 100%; font-size: 14px; }
table.tally th, table.tally td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); }
table.tally td:not(:first-child), table.tally th:not(:first-child) { text-align: right; font-family: var(--mono); }
.badge.v-keep { background: #2f6b3a; color: #fff; } .badge.v-kill { background: #9b2222; color: #fff; } .badge.v-sleep { background: #4a4f8a; color: #fff; }
/* Picker Wheel of Death */
.showlink a { font-weight: 600; }
.wheelbox { position: relative; width: min(560px, 100%); margin: 8px auto 0; aspect-ratio: 1; }
.wheelbox canvas { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55); }
.wheelbox .pointer { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); width: 0; height: 0; z-index: 2;
  border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 30px solid var(--lume); filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.spinresult { text-align: center; font-size: 18px; min-height: 1.6em; margin: 14px 0 6px; }
.spinbar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
button.big { font-size: 18px; padding: 12px 34px; }
.wheelopts { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--surface); margin-bottom: 12px; }
.wheelopts summary { cursor: pointer; font-weight: 600; }
.optgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 12px 0; }
.optgrid fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.optgrid textarea { width: 100%; font: inherit; box-sizing: border-box; }
#verdictForm { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 16px; display: grid; gap: 12px; }
#verdictForm h3 { margin: 0; font: 600 22px var(--display); }
.verdicts { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.verdicts li { display: grid; gap: 8px; }
.vbrand { font: 600 20px var(--display); }
.vseg button[aria-pressed="true"].v-keep { background: #2f6b3a; color: #fff; }
.vseg button[aria-pressed="true"].v-kill { background: #9b2222; color: #fff; }
.vseg button[aria-pressed="true"].v-sleep { background: #4a4f8a; color: #fff; }
.verdicts .reason { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.resgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.rescol { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 12px 14px; }
.rescol h3 { margin: 0 0 6px; font: 600 18px var(--display); }
.rescol h3.v-keep { color: var(--good); } .rescol h3.v-kill { color: var(--danger); } .rescol h3.v-sleep { color: #6b70b8; }
.rescol ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.reasons { list-style: none; padding: 0; display: grid; gap: 8px; }
/* the wheel's centre (HMM logo) is a spin button: a round, invisible button over the hub (hub = 88 of 720 px radius) */
.hubbtn { position: absolute; left: 50%; top: 50%; width: 24.4%; height: 24.4%; transform: translate(-50%, -50%); border-radius: 50%; z-index: 2;
  border: 0; padding: 0; background: transparent; cursor: pointer; transition: box-shadow .15s; }
.hubbtn:focus-visible { box-shadow: 0 0 0 4px var(--lume); outline: none; }
.hubbtn:disabled { cursor: default; }
.hubbtn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* a soft gold pulse round the centre while it is waiting to be pressed */
.hubbtn:not(:disabled):not(:hover) { animation: hubpulse 2.4s ease-in-out infinite; }
@keyframes hubpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 176, 106, 0); } 50% { box-shadow: 0 0 0 7px rgba(217, 176, 106, .45); } }
@media (prefers-reduced-motion: reduce) { .hubbtn { animation: none !important; } }

/* wheel extras: sound/show/share row, results card, show mode, brand pages */
.spinbar.small { margin-top: 10px; gap: 8px; }
.spinbar.small button { font-size: 13px; padding: 6px 12px; }
.spinbar .hint { align-self: center; font-size: 13px; color: var(--muted); }
.sharecard { margin-top: 18px; display: grid; gap: 10px; justify-items: center; }
.sharecard canvas { width: min(380px, 100%); height: auto; border-radius: 12px; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55); }
button.brandlink { all: unset; cursor: pointer; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
button.brandlink:hover, button.brandlink:focus-visible { text-decoration-color: currentColor; }
.brandpanel { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px 16px; margin-bottom: 14px; display: grid; gap: 10px; }
.brandpanel h3 { margin: 0; font: 600 24px var(--display); }
.brandpanel h4 { margin: 6px 0 0; font: 600 16px var(--body); }
.splitbar { display: flex; height: 30px; border-radius: 8px; overflow: hidden; font: 500 13px/30px var(--mono); color: #fff; }
.splitbar span { text-align: center; min-width: 2.6em; }
.splitbar .v-keep { background: #2f6b3a; } .splitbar .v-kill { background: #9b2222; } .splitbar .v-sleep { background: #4a4f8a; }
.brandwatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.brandwatches .bw { display: grid; gap: 4px; justify-items: center; text-align: center; color: var(--ink); text-decoration: none; font-size: 13px; }
.brandwatches .bw .model { font: 600 13px/1.3 var(--body); }
.exitshow { display: none; }
body.showmode { background: #0b1118; color: #f4efe4; }
body.showmode .wrap { max-width: none; }
body.showmode header, body.showmode #opts, body.showmode #play > .sectionhead, body.showmode section[aria-labelledby="resh"], body.showmode .spinbar.small, body.showmode #offBox { display: none !important; }
body.showmode .wheelbox { width: min(84vh, 94vw); }
body.showmode .spinresult { font-size: clamp(22px, 3.4vw, 40px); color: #f4efe4; }
body.showmode .spinresult b { color: #d9b06a; }
body.showmode .exitshow { display: block; position: fixed; top: 12px; right: 12px; z-index: 5; background: rgba(255,255,255,.08); color: #f4efe4; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 6px 14px; font: 500 13px var(--body); cursor: pointer; }
body.showmode #verdictForm, body.showmode .sharecard { color: var(--ink); max-width: 620px; margin-left: auto; margin-right: auto; }
body.showmode .spinbar .ghost { color: #f4efe4; border-color: rgba(255,255,255,.35); background: transparent; }

/* home page with more than one game: two live halves */
.wrap.wide { max-width: 1180px; }
.homehead { text-align: center; }
.wordmark { font: 700 clamp(40px, 8vw, 76px)/1 var(--display); margin: 6px 0 10px; }
.wordmark em { font-style: italic; font-weight: 500; color: var(--lume); }
.halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
@media (max-width: 760px) { .halves { grid-template-columns: minmax(0, 1fr); } }
.half { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 20px 18px; display: grid; gap: 10px; align-content: start; }
.half h2 { margin: 0; font: 600 clamp(26px, 3.4vw, 34px) var(--display); }
.half .how { margin: 0; }
.half.dark { background: #15202b; color: #f4efe4; border-color: #15202b; }
.half.dark .how, .half.dark .meta { color: #b7c0c9; }
.half.dark .eyebrow { color: #d9b06a; }
.teaser { display: block; color: inherit; text-decoration: none; border-radius: 14px; }
.teaser:focus-visible { outline: 3px solid var(--lume); outline-offset: 3px; }
.pair.mini { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.pair.mini .side { display: grid; justify-items: center; gap: 4px; text-align: center; background: var(--bg); border-radius: 14px; padding: 10px 8px; min-height: 180px; transition: transform .2s; }
.teaser:hover .pair.mini .side { transform: translateY(-2px); }
.pair.mini .shotbox, .pair.mini .dial { width: 100%; max-width: 170px; aspect-ratio: 1; }
.pair.mini .brand { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pair.mini .model { font: 600 16px/1.2 var(--display); }
.tease-q { display: block; text-align: center; margin-top: 8px; font-weight: 600; }
.minihead { margin: 6px 0 0; font: 600 16px var(--body); }
.minitop { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.minitop li { display: grid; grid-template-columns: 22px 44px 1fr auto; gap: 10px; align-items: center; }
.minitop .rk { font: 600 18px var(--display); color: var(--lume); text-align: center; }
.minitop .shotbox.sm, .minitop .dial.sm { width: 44px; height: 44px; }
.minitop .rt { font: 500 13px var(--mono); color: var(--muted); }
.half canvas { display: block; width: min(420px, 100%); height: auto; margin: 4px auto; border-radius: 50%; }
.miniverdicts { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
a.gobtn { justify-self: start; text-decoration: none; display: inline-block; margin-top: 4px; }
.half.dark a.gobtn { background: #d9b06a; color: #15202b; border-color: #d9b06a; }
.homehead .lede { margin-left: auto; margin-right: auto; }

/* home titles: "aBlogtoWatch Weekly presents" · Hit Miss Maybe · tagline */
.homehead { text-align: center; padding-top: 8px; }
.presents { display: inline-flex; align-items: center; gap: 10px; }
.presentsmark { font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 6px; padding: 5px 9px; }
.presentsmark img { display: block; height: 34px; width: auto; }
.presentsword { font: 500 12px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--lume); }
.wordmark a { color: inherit; text-decoration: none; }
.tagline { max-width: 640px; margin: 0 auto; font-size: clamp(16px, 2.2vw, 19px); color: var(--muted); }
.tagline b { color: var(--ink); }
.wheellink { margin: 10px 0 0; font-weight: 600; }
.gamehead { margin-top: 26px; }
.gametitle-lg { font: 600 clamp(24px, 4vw, 32px) var(--display); margin: 0 0 4px; }

/* the ABTWW logo (inline SVG): aBlogtoWatch + "WEEKLY" in a date window under a cyclops lens */
.presentsmark:has(svg) { border: 0; padding: 0; text-transform: none; letter-spacing: normal; }
.abtwwlogo { display: block; height: 84px; width: auto; }
@media (max-width: 420px) { .abtwwlogo { height: 68px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.homehead .presents { margin-bottom: 12px; }

/* podcast logo colours (red stays red; the greys lighten in dark mode) */
:root { --lg-ink: #3b3f43; --lg-grey: #6b7075; --lg-red: #d7262e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lg-ink: #e6ebf0; --lg-grey: #aab2ba; --lg-red: #ef3b42; } }
:root[data-theme="dark"] { --lg-ink: #e6ebf0; --lg-grey: #aab2ba; --lg-red: #ef3b42; }
.abtwwlogo .lg-ink { fill: var(--lg-ink); } .abtwwlogo .lg-red { fill: var(--lg-red); } .abtwwlogo .lg-grey { fill: var(--lg-grey); }
.presents { align-items: flex-end; }
.presents .presentsword { padding-bottom: 8px; }
.homehead .presents { display: flex; justify-content: center; }
.homehead .tagline { font-size: clamp(18px, 2.6vw, 22px); color: var(--ink); padding-top: 6px; }

/* admin: site safety */
.guardbox p { margin: 4px 0; }
.guardok { color: var(--good); font-weight: 600; }
.guardoff { color: var(--danger); font-weight: 600; }
body.site-offline #guard { border: 2px solid var(--danger); border-radius: 14px; padding: 12px; }
/* "More info: <site> ↗" under the head-to-head cards: bigger and clearer (Richard, 23 Oct 2026) */
.side a.credit[href] { font: 600 14px var(--body); color: var(--accent); text-decoration: none; border: 1.5px solid var(--accent); border-radius: 999px; padding: 6px 14px; margin-top: 8px; display: inline-block; }
.side a.credit[href]:hover, .side a.credit[href]:focus-visible { background: var(--accent); color: var(--accent-ink); }
/* admin: sections folded away until needed */
details.collapsible > summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 6px 0; }
details.collapsible[open] > summary { margin-bottom: 8px; }

/* admin: watches on the bench (in the catalogue, off the ladders) */
.row.benched { opacity: .72; }
.row.benched:hover { opacity: 1; }

/* published opinions under the duel */
.saidbox { margin: 14px 0 4px; display: grid; gap: 8px; }
.saidhead { margin: 0; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lume); }
.saidbox blockquote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--lume); background: var(--surface); border-radius: 0 10px 10px 0; }
.saidbox blockquote p { margin: 0 0 4px; font: italic 500 16px/1.45 var(--display); }
.saidbox footer { font-size: 13px; color: var(--muted); }
.gaming #saidBox { display: none !important; }

/* admin catalogue: A–Z bar */
.azbar { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 10px; }
.azbar button { font: 600 13px var(--mono); min-width: 30px; padding: 6px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; }
.azbar button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.azbar button:disabled { opacity: .3; cursor: default; }
.badge.benchbadge { color: var(--danger); border: 1.5px solid var(--danger); background: transparent; font-weight: 600; }

.badge.suggestbadge { color: var(--accent); border: 1.5px solid var(--accent); background: transparent; font-weight: 600; }
.suggestcount { color: var(--accent); }

/* admin: group headings inside an opened brand */
.groupline { list-style: none; margin: 10px 0 2px; padding: 4px 8px; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }

/* admin: Claude proposes removing this ladder watch */
.badge.removebadge { color: var(--danger); border: 2px solid var(--danger); background: transparent; font-weight: 700; letter-spacing: .2em; }
.removecount { color: var(--danger); }

.azbar button[data-candletter=""] { min-width: 44px; }
/* admin: website buttons on brands */
a.act.weblink { text-decoration: none; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 2px 8px; }
a.act.weblink:hover { background: var(--accent); color: var(--accent-ink); }

/* Watch Risk admin */
.subhead { font: 600 15px var(--body); margin: 18px 0 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip { appearance: none; font: 500 12px var(--mono); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; background: var(--surface); color: var(--ink); cursor: pointer; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip.warn { border-color: var(--danger); color: var(--danger); }
.chip.warn.on { background: var(--danger); color: var(--bg); }
.btnlink { display: inline-flex; align-items: center; text-decoration: none; }
form.riskhome { margin-top: 8px; }

/* Phones (Richard, 26 Oct 2026): get the head-to-head onto the first screen and keep ladder rows to two lines */
@media (max-width: 560px) {
  .wrap { gap: 24px; padding-block: 14px 48px; }
  .homehead .tagline { font-size: 16px; padding-top: 0; }
  .gamehead { margin-top: 0; }
  .gametitle-lg { font-size: 24px; }
  .gamehead .lede { font-size: 13px; }
  #tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  #tabs::-webkit-scrollbar { display: none; }
  #tabs .tab { flex: 0 0 auto; }
  .side a.credit[href] { font-size: 13px; padding: 5px 12px; }
  .side a.credit .host { display: none; }
  .line2 .refno, .line2 .via { display: none; }
}

/* Instagram approvals (admin) */
.igposts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 18px; }
.igpost { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--surface); }
.igpost.rejected, .igpost.posted { opacity: .8; }
.igslides { display: flex; gap: 8px; overflow-x: auto; }
.igslides img { width: 120px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.igbody { display: grid; gap: 8px; min-width: 0; }
.igcaption { width: 100%; font: 14px/1.45 var(--body); padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); resize: vertical; box-sizing: border-box; }
.igtext { white-space: pre-line; font-size: 13px; color: var(--muted); margin: 0; max-height: 8.5em; overflow: hidden; }