/* One Word is refereed by the room: this page only shows a player their own
   side of the match and sends words, votes and guesses back through the
   party frame. Red and Blue are cartographic tints, not status colours. */
:root { --team-a: var(--map-red); --team-b: var(--map-blue); --team-a-soft: #f3e1dc; --team-b-soft: #dde8f0; }
/* The stage grows with its rows and the page scrolls; eight stacked clues and
   the oracle's ranking are taller than a short window, and a stage pinned to
   the window's height let them run over the rows beneath. */
.ow-stage { max-width: 760px; gap: 10px; flex: 0 0 auto; min-height: min-content; }
/* On a phone the page itself scrolls, not `main` inside the kit's one-screen
   shell. Eight clues and the oracle's ranking make a long page, and iOS
   Safari handles a scroller nested in a fixed-height page badly: a flick up
   from the bottom stopped halfway and took a second swipe to reach the rules. */
@media (max-width: 650px), (pointer: coarse) {
  #app { height: auto; min-height: 100dvh; overflow: visible; }
  #app > main { flex: 1 0 auto; overflow: visible; }
}
.ow-loading { display: none; }
html[data-oracle-loading] #solo { position: relative; }
html[data-oracle-loading] #solo > :not(.ow-loading) { visibility: hidden; }
/* The stage stays blank until the first round is on it; an opening that takes
   a few hundred milliseconds must not flash a "Loading" screen in between, so
   the line waits before it appears. It is not an animation to reduce: the
   delay is the point, and the fade is the only motion. */
html[data-oracle-loading] #solo > .ow-loading { display: block; position: absolute; top: 18px; left: 18px; margin: 0; color: var(--muted); opacity: 0; animation: ow-loading-in .3s ease .45s forwards; }
@keyframes ow-loading-in { to { opacity: 1; } }
.ow-stage > * { flex-shrink: 0; }
.ow-scoreboard { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; gap: 8px; }
.ow-team { border: 1px solid var(--border); padding: 8px 10px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ow-team.team-a { border-top: 3px solid var(--team-a); } .ow-team.team-b { border-top: 3px solid var(--team-b); }
.ow-team.mine { background: var(--panel); }
.ow-team.active { box-shadow: inset 0 0 0 1px var(--text); }
.ow-team h3 { margin: 0; font: 700 14px var(--display); display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.ow-team h3 small { font: 10px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.ow-team ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 12px; color: var(--muted); }
.ow-team li.you { color: var(--text); font-weight: 600; }
.ow-team li .role { font: 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 1px 4px; border: 1px solid var(--border); margin-left: 4px; vertical-align: 1px; }
.ow-team li.offline { text-decoration: line-through; }
.ow-score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 6px; font: 600 30px var(--mono); }
.ow-score .team-a { color: var(--team-a); } .ow-score .team-b { color: var(--team-b); }
.ow-score small { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 400; }
.ow-status { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 14px; align-items: end; }
.ow-status .kicker { font: 10px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.ow-status h2 { margin: 0; font: 700 clamp(20px, 3.2vw, 28px)/1.15 var(--display); letter-spacing: -.02em; }
.ow-status h2.team-a { color: var(--team-a); } .ow-status h2.team-b { color: var(--team-b); }
.ow-clock { font: 600 22px var(--mono); text-align: right; min-width: 64px; }
.ow-clock.low { color: var(--red); }
.ow-meter { grid-column: 1 / -1; height: 4px; background: var(--wash); }
.ow-meter > span { display: block; height: 100%; background: var(--text); transition: width .25s linear; }
.ow-meter.low > span { background: var(--red); }
.ow-clues { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 34px; }
.ow-clues .empty { font-size: 12px; color: var(--faint); }
.ow-clue { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--border); font: 600 15px var(--display); background: var(--panel); }
.ow-clue::before { content: attr(data-team); font: 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 1px 4px; color: var(--bg); }
.ow-clue.team-a::before { background: var(--team-a); } .ow-clue.team-b::before { background: var(--team-b); }
/* The guess: the flag, the country's name in the display face, the mark, and the heat. */
/* A revealed round's clue words are searches: the link wears the chip's ink with a light underline. */
.ow-clue b a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.ow-clue b a:hover { text-decoration-color: currentColor; }
/* A clue's ⓘ (shared/word-info.css), after the word: hover it (tap it on a phone) for what the word means.
   Its definition opens over the round, which places it. */
.ow-stage { position: relative; }
.ow-clue .cx-info { margin-left: -2px; }
.ow-clue .cx-info:hover, .ow-clue:focus-within .cx-info { opacity: 1; }
/* The clues a finished round never showed, after the ones it did. */
.ow-unseen-label { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.ow-clue .guess { display: inline-flex; align-items: center; gap: 7px; font: 600 15px var(--display); color: var(--muted); }
.ow-clue .guess img { width: 26px; height: 18px; object-fit: cover; border: 1px solid var(--border); flex: none; }
.ow-clue .guess .mark { font: 700 13px var(--mono); }
.ow-clue .guess.right { color: var(--accent); } .ow-clue .guess.wrong { color: var(--red); }
.ow-clue .guess .heat { margin-left: 2px; }
/* Which way the country lies from a miss: a pixel arrow pointing toward it
   and its initials ("↖ NW"), on a chip framed like the page's own (its night
   look is in theme.css). */
.ow-clue .guess .way { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 3px; font: 700 15px var(--mono); line-height: 1; letter-spacing: .04em; color: var(--text); background: var(--f-field, var(--panel)); border: 1px solid var(--f-ink, var(--text)); box-shadow: var(--f-bevel-sm, none); white-space: nowrap; flex: none; }
.ow-clue .guess .way .way-arrow { width: 18px; height: 18px; flex: none; fill: currentColor; }
.ow-clue .guess .way b { font-weight: inherit; }
.ow-clue.pending { border-style: dashed; }
.ow-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.ow-secret { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); background: var(--panel); }
.ow-secret img { width: 54px; height: 36px; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
.ow-heading-flag { display: inline-block; width: 34px; height: 23px; object-fit: cover; border: 1px solid var(--border); vertical-align: -3px; margin-right: 10px; }
.ow-secret strong { font: 700 22px var(--display); letter-spacing: -.02em; display: block; }
.ow-secret small { display: block; color: var(--muted); font-size: 11px; line-height: 1.35; }
.ow-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: start; }
.ow-form input[type="text"] { padding: 11px 12px; }
.ow-form .btn { align-self: stretch; }
.ow-verdicts { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; margin-top: -4px; }
.ow-error { margin: 0; color: var(--red); font-size: 13px; min-height: 18px; }
.ow-report { margin-left: 6px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.ow-report:hover, .ow-report:focus-visible { background: var(--wash); color: var(--text); }
.ow-report:disabled { opacity: .6; cursor: default; }
.ow-report-done { margin-left: 6px; color: var(--muted); font-size: 12px; }
@media (pointer: coarse) { .ow-report { min-height: 32px; padding: 4px 12px; } }
/* On a touch screen Oracle 2's refusal stands between the country and the box
   (above the keyboard); with nothing to say it takes no room there. */
.ow-master .ow-secret + .ow-error:empty { min-height: 0; margin-bottom: -10px; }
.ow-verdict-line { margin: 0; font: 11px var(--mono); color: var(--faint); min-height: 15px; }
.ow-verdict-line.ok { color: var(--accent); } .ow-verdict-line.bad { color: var(--red); }
.ow-verdict-line.checking::after { content: '…'; animation: ow-dots 1s steps(3) infinite; }
.ow-hint { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ow-hint b { color: var(--text); }
.ow-wait { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--muted); }
.ow-wait .btn { padding: 7px 10px; font-size: 10px; }
.ow-ballot { display: flex; flex-wrap: wrap; gap: 8px; }
.ow-vote { padding: 12px 16px; border: 1px solid var(--border); background: var(--panel); font: 600 17px var(--display); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.ow-vote:hover { border-color: var(--text); background: var(--wash); }
.ow-vote[aria-pressed="true"] { border-color: var(--accent-bright); background: var(--accent-soft); }
.ow-vote:disabled { cursor: default; }
.ow-vote .count { font: 11px var(--mono); color: var(--muted); }
.ow-guess { position: relative; }
.ow-guess-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
#ow-suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: min(260px, 40dvh); overflow-y: auto; background: var(--panel-2); border: 1px solid var(--border); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
#ow-suggestions[hidden] { display: none; }
.ow-suggestion { padding: 9px 12px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ow-suggestion img { width: 22px; height: 15px; object-fit: cover; border: 1px solid var(--border); }
.ow-suggestion:hover, .ow-suggestion.active { background: #e5e0da; }
.ow-suggestion small { margin-left: auto; color: var(--muted); font: 11px var(--mono); }
.ow-suggestion-head { position: sticky; top: 0; padding: 7px 12px; background: var(--panel-2); border-bottom: 1px solid var(--border); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ow-lookaway { padding: 14px 16px; border: 1px dashed var(--border); text-align: center; }
.ow-lookaway strong { display: block; font: 700 18px var(--display); margin-bottom: 4px; }
.ow-lookaway p { margin: 0; color: var(--muted); font-size: 13px; }
.ow-verdict { padding: 14px 16px; border-left: 4px solid var(--text); background: var(--panel); }
.ow-verdict.team-a { border-color: var(--team-a); } .ow-verdict.team-b { border-color: var(--team-b); }
.ow-verdict strong { display: block; font: 700 20px var(--display); letter-spacing: -.02em; }
.ow-verdict p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ow-games { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ow-games li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ow-games li b { font: 600 11px var(--mono); }
.ow-games .team-a { color: var(--team-a); } .ow-games .team-b { color: var(--team-b); }
.ow-solo-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 16px; align-items: start; }
.ow-solo-head .prompt h2 { font-size: clamp(22px, 3.2vw, 30px); }
.ow-solo-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ow-solo-side .ow-clock:empty { display: none; }
.ow-total { font: 600 24px var(--mono); white-space: nowrap; }
.ow-seats { display: inline-flex; border: 1px solid var(--border); }
.ow-seats button { padding: 7px 11px; border: 0; background: transparent; color: var(--muted); font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.ow-seats button + button { border-left: 1px solid var(--border); }
.ow-seats button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.ow-seats button:disabled { cursor: default; opacity: .55; }
.ow-clue.by-you::before { background: var(--text); } .ow-clue.by-jev::before { background: var(--map-green); }
/* A clue and its guess take a row of their own, in a party and when writing for
   the oracle, so each word and where it led read as one line. */
.ow-master .ow-clues, #clues.ow-clues { flex-direction: column; flex-wrap: nowrap; flex-shrink: 0; align-items: stretch; }
#clues .ow-clue { width: 100%; box-sizing: border-box; flex-wrap: wrap; row-gap: 2px; }
#clues .ow-clue .guess { margin-left: auto; }
#clues .ow-clue { padding: 4px 8px 4px 9px; }
/* Oracle 1: every clue is the oracle's, so the chips carry no label. */
.ow-guesser .ow-clue::before { content: none; }
/* A clue and a long guess with its heat ("Saint Vincent and the Grenadines",
   HOT) that do not fit one row take two, the guess under the word, rather
   than running out of the chip where the row is narrow (a 320px results page,
   between its arrows). */
.ow-guesser .ow-clue { flex-wrap: wrap; row-gap: 3px; }
/* Oracle 2's row: the word and its runners-up at the left (one line, cut short
   before they push anything), the guess in the middle, the × at the right. */
.ow-master .ow-clue { flex-wrap: nowrap; align-items: center; width: 100%; box-sizing: border-box; padding: 4px 6px 4px 9px; gap: 8px; }
.ow-master .ow-clue > b { white-space: nowrap; order: 1; }
/* The ranking snippet takes whatever room the word leaves; the guess sits at
   the right edge, so the flags line up in one column down the chips rather
   than drifting with the length of the text before them. */
.ow-master .ow-clue .top { order: 2; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ow-master .ow-clue .guess { order: 3; margin-left: auto; white-space: nowrap; flex: none; }
/* Name and mark first, then the flag: the flag ends every chip at the same
   spot, next to the ×, whatever the length of the country's name. */
.ow-master .ow-clue .guess .name { order: 1; } .ow-master .ow-clue .guess .mark { order: 2; } .ow-master .ow-clue .guess .heat { order: 3; } .ow-master .ow-clue .guess img { order: 4; }
.ow-master .ow-clue .guess .heat { flex: none; }
.ow-master .ow-clue .drop { order: 9; flex: none; margin: 0; }
.ow-clue .top { font: 10px var(--mono); color: var(--faint); }
/* Taking a word back (Oracle 2): the × on each of your words, grey once used. */
.ow-clue .drop { margin-left: 6px; padding: 0 6px; min-width: 22px; height: 22px; border: 1px solid var(--border); background: transparent; color: var(--muted); font: 600 13px/1 var(--mono); cursor: pointer; }
.ow-clue .drop:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.ow-clue .drop:disabled { cursor: default; opacity: .38; }
@media (pointer: coarse) { .ow-clue .drop { min-width: 34px; height: 34px; font-size: 16px; } }
.ow-clue.removed { border-style: dashed; opacity: .62; }
.ow-clue.removed b { text-decoration: line-through; }
.ow-clue.removed .drop { font: 600 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.ow-takeback { font: 11px var(--mono); color: var(--faint); padding: 2px 0 0; }
/* Oracle 2's banned categories for the day, under the prompt. */
.ow-bans { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 6px 0 0; padding: 7px 10px; border: 1px dashed var(--border); font: 600 14px var(--display); }
.ow-bans .k { font: 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ow-bans .sep { color: var(--muted); }
.ow-bans .why { flex-basis: 100%; font: 11px var(--mono); color: var(--muted); }
.ow-continent { display: inline-flex; align-items: center; gap: 8px; padding: 5px 9px; border: 1px dashed var(--border); font: 600 14px var(--display); background: none; color: inherit; }
button.ow-continent { cursor: pointer; }
button.ow-continent:hover, button.ow-continent:focus-visible { border-style: solid; background: #e5e0da; }
.ow-continent .k { font: 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ow-takeback.used { color: var(--muted); }
.ow-clue .heat { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 2px 6px; border: 1px solid; white-space: nowrap; }
.ow-clue .heat.hot { color: #b0342c; border-color: #e3a69f; background: #fbe9e6; }
.ow-clue .heat.warm { color: #9a5b12; border-color: #e4bf8a; background: #fdf1de; }
.ow-clue .heat.cold { color: #2f5d8a; border-color: #a9c3dc; background: #e8f0f8; }
.ow-jev { margin: 0; font: 11px var(--mono); color: var(--faint); min-height: 15px; }
.ow-dist { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 3px 10px; align-items: center; margin: 0; padding: 10px 12px; border: 1px solid var(--border); font-size: 12px; }
.ow-dist h4 { grid-column: 1 / -1; margin: 0 0 3px; font: 10px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.ow-dist .name { white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.ow-dist .name img { width: 18px; height: 12px; object-fit: cover; border: 1px solid var(--border); }
.ow-dist .bar { height: 8px; background: var(--wash); } .ow-dist .bar > span { display: block; height: 100%; background: var(--border); }
.ow-dist .p { font: 11px var(--mono); color: var(--muted); text-align: right; }
.ow-dist .name.pick { font-weight: 700; } .ow-dist .bar.pick > span { background: var(--accent-bright); } .ow-dist .p.pick { color: var(--text); }
.ow-dist .name.target { color: #18743b; font-weight: 800; }
.ow-dist .bar.pick.right > span { background: var(--accent); } .ow-dist .bar.pick.wrong > span { background: var(--red); }
.ow-jev.thinking::after { content: '…'; animation: ow-dots 1s steps(3) infinite; }
@keyframes ow-dots { to { content: ''; } }
.ow-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ow-actions-tight { margin-top: -2px; }
.ow-actions .btn { padding: 9px 12px; font-size: 11px; }
.ow-solo-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
@media (max-width: 650px) { .ow-solo-head { grid-template-columns: 1fr; } .ow-solo-side { flex-direction: row; align-items: center; justify-content: space-between; } .ow-total { font-size: 18px; } }
@media (max-width: 650px) {
  .ow-stage { gap: 8px; }
  .ow-scoreboard { gap: 5px; }
  .ow-team { padding: 6px 8px; } .ow-team h3 { font-size: 12px; } .ow-team ul { font-size: 11px; }
  .ow-score { font-size: 22px; padding: 0 2px; }
  .ow-status h2 { font-size: 18px; } .ow-clock { font-size: 18px; min-width: 48px; }
  .ow-form { grid-template-columns: 1fr; } .ow-form .btn { grid-column: 1 / -1; }
  .ow-secret strong { font-size: 18px; } .ow-secret img { width: 44px; height: 30px; }
  .ow-clue { font-size: 13px; padding: 4px 7px; }
  .ow-vote { padding: 9px 12px; font-size: 15px; }
}
/* Oracle 2 on a phone, a phone on its side or a short window: the country and
   the clue box stay above the oracle's ranking, so the next word can be
   written, and the oracle's answer to it read, without scrolling past eight
   rows of probabilities each turn. */
@media (max-width: 650px), (pointer: coarse), (max-height: 500px) {
  .ow-master #s-dist { order: 1; } .ow-master #s-jev, .ow-master .solo-no-inline-results { order: 2; }
}
@media (max-width: 650px), (pointer: coarse) {
  /* Full probabilities get their own line, rather than an ellipsis between
     the clue, the oracle's guess and the take-back button. */
  .ow-master .ow-clue { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; }
  .ow-master .ow-clue::before { content: none; }
  .ow-master .ow-clue > b { grid-column: 1; grid-row: 1; white-space: normal; overflow-wrap: anywhere; }
  .ow-master .ow-clue .drop { grid-column: 2; grid-row: 1; }
  .ow-master .ow-clue .guess { grid-column: 1 / -1; grid-row: 2; margin-left: 0; white-space: normal; flex-wrap: wrap; }
  .ow-master .ow-clue .top { grid-column: 1 / -1; grid-row: 3; white-space: normal; overflow: visible; text-overflow: clip; font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
  .ow-dist { grid-template-columns: minmax(0, 1fr) minmax(24px, .4fr) auto; }
  .ow-dist .name { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  .ow-dist .name img { flex: none; }
}
@media (max-height: 600px) and (min-width: 651px) {
  .ow-stage { gap: 6px; } .ow-team ul { display: none; } .ow-status h2 { font-size: 18px; }
}
@keyframes ow-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.shake { animation: ow-shake .3s; }
/* The oracle said no: the box recoils and flushes red, the verdict stamps in under it. */
@keyframes ow-reject { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-8px); } 30% { transform: translateX(7px); } 45% { transform: translateX(-5px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-1px); } }
@keyframes ow-reject-flush { 0% { background: #f6dedc; box-shadow: 0 0 0 0 rgba(173,82,77,.45); } 100% { box-shadow: 0 0 0 12px rgba(173,82,77,0); } }
input.ow-rejected { animation: ow-reject .45s cubic-bezier(.36,.07,.19,.97), ow-reject-flush .9s ease-out; border-color: var(--red); }
@keyframes ow-stamp { 0% { opacity: 0; transform: scale(1.4) rotate(-2deg); } 55% { opacity: 1; transform: scale(.96) rotate(0); } 100% { transform: scale(1); } }
.ow-verdict-line.bad.ow-rejected, .ow-error.ow-rejected { animation: ow-stamp .38s cubic-bezier(.2,.9,.3,1.25); transform-origin: left center; }
@media (prefers-reduced-motion: reduce) { .ow-meter > span { transition: none; } .shake { animation: none; } .ow-rejected, .ow-verdict-line.bad.ow-rejected, .ow-error.ow-rejected { animation: none; } input.ow-rejected { background: #f6dedc; } }
/* Oracle 1 at a party: the race. A lane per racer, a step per clue, the
   finish line at the right. A miss walks a runner one step on; the right country sprints it to the line and turns it green, without
   naming the country. The runner is the lobby's avatar, small. */
.ow-race .ow-status h2.solved { color: var(--accent); }
.ow-track { list-style: none; margin: 0; padding: 6px 10px 4px; border: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; --runner: 36px; }
.ow-lane + .ow-lane { border-top: 1px dashed var(--wash); }
.ow-lane { display: grid; grid-template-columns: minmax(56px, 128px) minmax(0, 1fr) 64px; align-items: end; gap: 10px; }
.ow-lane-name { font: 600 13px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 6px; }
.ow-lane-state { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-bottom: 7px; text-align: right; white-space: nowrap; }
.ow-lane.you .ow-lane-name::after { content: ' · you'; font: 10px var(--mono); color: var(--muted); }
.ow-rail { position: relative; height: 46px; border-bottom: 2px solid var(--wash); }
/* A tick for each clue, spaced as the runner's steps are, and the chequered line. */
.ow-rail::before { content: ''; position: absolute; left: calc(var(--runner) / 2); right: calc(var(--runner) / 2); bottom: 0; height: 7px; background: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px calc(100% / var(--steps, 8))); }
.ow-finish { position: absolute; right: calc(var(--runner) / 2 - 4px); bottom: -2px; top: 6px; width: 8px; background: repeating-conic-gradient(var(--text) 0 25%, var(--panel) 0 50%) 0 0 / 8px 8px; opacity: .8; }
.ow-runner { position: absolute; bottom: 1px; left: calc(var(--at, 0) * (100% - var(--runner))); width: var(--runner); height: 40px; transition: left .45s cubic-bezier(.3, 1.3, .5, 1); z-index: 1; }
.ow-runner img { position: absolute; left: 8%; top: 4%; width: 84%; height: 72%; object-fit: cover; border-radius: 43% 43% 35% 35%; border: 1.5px solid var(--text); background: var(--panel); box-sizing: border-box; }
.ow-runner::before, .ow-runner::after { content: ''; position: absolute; bottom: 0; width: 18%; height: 22%; background: var(--text); border-radius: 0 0 40% 40%; transform-origin: top center; }
.ow-runner::before { left: 23%; transform: rotate(8deg); } .ow-runner::after { right: 23%; transform: rotate(-8deg); }
.ow-runner i { position: absolute; left: 24%; top: 28%; height: 26%; width: 52%; background: #fffdf5; border: 1.5px solid var(--text); border-radius: 36%; box-sizing: border-box; }
.ow-runner i::before, .ow-runner i::after { content: ''; position: absolute; top: 22%; height: 45%; width: 13%; border-radius: 40%; background: var(--text); }
.ow-runner i::before { left: 24%; } .ow-runner i::after { right: 24%; }
.ow-runner b { display: none; }
.ow-runner.stepping { animation: ow-hop .45s ease-out; }
.ow-runner.stepping::before { animation: ow-leg .45s ease-in-out; } .ow-runner.stepping::after { animation: ow-leg .45s ease-in-out reverse; }
@keyframes ow-hop { 35% { translate: 0 -6px; } }
@keyframes ow-leg { 25% { transform: rotate(-28deg); } 75% { transform: rotate(28deg); } }
.ow-lane.solved .ow-runner { transition: left .8s cubic-bezier(.55, 0, .15, 1); }
.ow-runner.sprinting { animation: ow-sprint .8s ease-in-out; }
.ow-runner.sprinting::before { animation: ow-leg .2s linear 4; } .ow-runner.sprinting::after { animation: ow-leg .2s linear 4 reverse; }
@keyframes ow-sprint { 20%, 80% { rotate: 10deg; } }
.ow-lane.solved .ow-runner img { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bright); }
.ow-lane.solved .ow-runner::before, .ow-lane.solved .ow-runner::after { background: var(--accent); }
.ow-lane.solved .ow-rail { border-bottom-color: var(--accent-bright); }
.ow-lane.solved .ow-lane-name, .ow-lane.solved .ow-lane-state { color: var(--accent); }
.ow-lane.out .ow-runner { opacity: .45; filter: grayscale(1); }
.ow-lane.out .ow-lane-state { color: var(--red); }
/* Everyone's misses, one chip each: the country, how near it was, and who tried it. */
.ow-ruled { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 30px; }
.ow-ruled .k { font: 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ow-ruled .empty { font-size: 12px; color: var(--faint); }
.ow-ruled .ow-clue { padding: 3px 8px; font-size: 14px; }
.ow-ruled .guess { font-size: 14px; }
.ow-ruled .by { font: 10px var(--mono); color: var(--faint); }
.ow-ruled .fresh { animation: ow-stamp .38s cubic-bezier(.2, .9, .3, 1.25); }
.ow-clue.unseen { border-style: dashed; color: var(--muted); }
.ow-race .ow-verdict strong { display: flex; align-items: center; }
.ow-race .ow-verdict.solved { border-color: var(--accent-bright); background: var(--accent-soft); }
@media (max-width: 650px) {
  .ow-track { padding: 4px 8px 2px; --runner: 30px; }
  .ow-lane { grid-template-columns: minmax(44px, 72px) minmax(0, 1fr) 48px; gap: 6px; }
  .ow-lane-name { font-size: 12px; } .ow-lane.you .ow-lane-name::after { content: none; }
  .ow-rail { height: 38px; } .ow-runner { height: 33px; }
}
@media (prefers-reduced-motion: reduce) { .ow-runner, .ow-lane.solved .ow-runner { transition: none; } .ow-runner.stepping, .ow-runner.sprinting, .ow-runner.stepping::before, .ow-runner.stepping::after, .ow-runner.sprinting::before, .ow-runner.sprinting::after, .ow-ruled .fresh { animation: none; } }
/* From round two a phone gives the rules' paragraph back to the board; they stay under ?. */
.ow-note-more { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* On a touch screen the suggestions open above the box: below it they would be under the keyboard. */
@media (pointer: coarse) { #ow-suggestions { top: auto; bottom: calc(100% + 4px); box-shadow: 0 -8px 20px rgba(0,0,0,.12); } }
/* The day's summary (at the finish and on the results): a card a country, its
   clues in order, each with the guess it brought; one screen to keep or send. */
.ow-day-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px; }
.modal .ow-day-head h2 { margin: 0; font-size: 22px; }
.modal .ow-day-date { margin: 0; font: 11px var(--mono); color: var(--muted); }
.modal .ow-day-found { margin: 0; color: var(--text); font-weight: 600; }
.modal .ow-day-key { margin: 10px 0 6px; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.modal ol.ow-day { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.modal .ow-day > li { margin: 0; padding: 5px 8px 6px; border: 1px solid var(--border); border-left: 4px solid var(--red); background: var(--bg); }
.modal .ow-day > li.solved { border-left-color: var(--accent); }
.ow-day-country { display: flex; align-items: center; gap: 7px; min-width: 0; font: 700 14.5px/1.2 var(--display); color: var(--text); }
.ow-day-country .n { font: 11px var(--mono); color: var(--muted); width: 10px; flex: none; }
.ow-day-country img { width: 24px; height: 16px; object-fit: cover; border: 1px solid var(--border); flex: none; }
.ow-day-country b { min-width: 0; }
.ow-day-country .pts { margin-left: auto; flex: none; font: 600 12px var(--mono); color: var(--red); font-variant-numeric: tabular-nums; }
.ow-day li.solved .ow-day-country .pts { color: var(--accent); }
.modal ol.ow-day-clues { list-style: none; margin: 4px 0 0 17px; padding: 0; display: flex; flex-wrap: wrap; gap: 3px; }
.modal .ow-day-clues li { margin: 0; display: inline-flex; align-items: center; gap: 4px; padding: 1px 5px; border: 1px solid var(--border); background: var(--panel); font-size: 12px; line-height: 1.35; color: var(--text); }
.ow-day-clues b { font-weight: 700; }
.ow-day-clues li.removed b { text-decoration: line-through; color: var(--muted); }
.ow-day-clues .arrow { color: var(--muted); font-size: 11px; }
.ow-day-clues .guess { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.ow-day-clues .guess img { width: 17px; height: 12px; object-fit: cover; border: 1px solid var(--border); }
.ow-day-clues .guess.right { color: var(--accent); font-weight: 700; }
.ow-day-clues .heat { font: 600 8.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 0 4px; border: 1px solid; }
.ow-day-clues .heat.hot { color: #b0342c; border-color: #e3a69f; background: #fbe9e6; }
.ow-day-clues .heat.warm { color: #9a5b12; border-color: #e4bf8a; background: #fdf1de; }
.ow-day-clues .heat.cold { color: #2f5d8a; border-color: #a9c3dc; background: #e8f0f8; }
.modal .ow-day-site { margin: 8px 0 0; text-align: right; font: 10px var(--mono); letter-spacing: .06em; color: var(--muted); }
@media (max-width: 520px) { .backdrop:has(.ow-day) { padding: 10px; } .modal:has(.ow-day) { padding: 14px 12px; } .modal ol.ow-day-clues { margin-left: 0; } }

/* ---------- Oracle 2's two columns ----------
   The guessing area (the banned categories, your country, the clue box) on the
   left and the oracle's output (your clues with its answers, then its ranking)
   on the right. A narrower screen has one column: the columns' contents flow as
   one, in the order they always had (the clues above the clue box). */
.ow-master .ow-col { display: contents; }
.ow-col > * { flex-shrink: 0; }
.ow-master > :is(.ow-loading, .ow-solo-head, .ow-bans) { order: -2; }
.ow-master #s-clues, .ow-master #s-dist { order: -1; }
/* A phone keeps the country and the clue box above the ranking (as above). */
@media (max-width: 650px), (pointer: coarse), (max-height: 500px) { .ow-master #s-dist { order: 1; } }
@media (min-width: 1000px) {
  #solo.ow-master { display: grid; max-width: min(1180px, 100%); grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-areas: "head head" "play out"; column-gap: 24px; row-gap: 10px; align-items: start; }
  #solo.ow-master > .ow-solo-head { grid-area: head; }
  #solo.ow-master > .ow-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  #solo.ow-master > .ow-col-play { grid-area: play; }
  #solo.ow-master > .ow-col-out { grid-area: out; }
  #solo.ow-master > :is(.ow-loading, .solo-no-inline-results, .cx-tip) { grid-column: 1 / -1; }
  #solo.ow-master .ow-col-play > .ow-bans { margin: 0; }
}

/* ---------- The banned categories, plainly ----------
   Each a chip of its own, its little picture and its name, with the label and
   the rule round them; they wrap rather than run out of the box. */
.ow-bans { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; box-sizing: border-box; max-width: 100%; }
.ow-bans .k { flex: 0 0 auto; color: var(--red); }
.ow-bans .why { flex: 1 0 100%; }
.ow-ban { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 9px 3px 5px; border: 1px solid var(--red);
  background: color-mix(in srgb, var(--red) 9%, transparent); font: 600 14px var(--display); }
.ow-ban b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ow-ban-icon { width: 20px; height: 20px; flex: none; image-rendering: pixelated; }

/* ---------- Your country, near ----------
   A clue whose answer has your country in the oracle's top three glows the
   colour of your country's flag, and so does the card with your flag on it. */
.ow-master .ow-clue.near { border-color: var(--flag, var(--accent)); animation: ow-near 1.1s steps(4) infinite alternate; }
#solo.ow-master:has(.ow-clue.near) .ow-secret { border-color: var(--flag, var(--accent)); animation: ow-near 1.1s steps(4) infinite alternate; }
#solo.ow-master:has(.ow-clue.near) .ow-secret img { box-shadow: 0 0 0 2px var(--flag, var(--accent)), 0 0 12px var(--flag, var(--accent)); }
@keyframes ow-near {
  from { box-shadow: 0 0 0 1px var(--flag, var(--accent)), 0 0 4px var(--flag, var(--accent)); }
  to { box-shadow: 0 0 0 2px var(--flag, var(--accent)), 0 0 18px var(--flag, var(--accent)); }
}
@media (prefers-reduced-motion: reduce) {
  .ow-master .ow-clue.near, #solo.ow-master:has(.ow-clue.near) .ow-secret { animation: none; box-shadow: 0 0 0 2px var(--flag, var(--accent)), 0 0 10px var(--flag, var(--accent)); }
}