/* The Console layout (November 2026), over the Pixel Edition's look
   (field.css). field.css draws the frames, keys, colours and the night; this
   file moves things: the site's rail and tab bar (shell.js), a game's
   periwinkle bar, the rules and results as windows with a title strip, and
   type in sentence case throughout.

   No small spaced capitals anywhere, no date line, no breadcrumb strip, and
   games are chosen from a list with a preview. */

:root {
  --shell: #8f9bf2;
  --shell-hover: #a9b2f6;
  --shell-ink: #1d1838;
  --shell-w: 84px;
}
:root[data-theme="dark"] {
  --shell: #2b2458;
  --shell-hover: #3a3172;
  --shell-ink: #ece9ff;
}

/* ---------- type ----------
   Labels, chips, tallies and keys read as sentences: no capitals by
   transform and no letter spacing. The pixel faces carry the game feel. */
:root body *:not(code, kbd),
:root body *::before, :root body *::after {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ---------- the frame (shell.js) ----------
   A periwinkle bar along the top (the wordmark at its left, the page's
   tools at its right) and a rail down the left edge with the site's links:
   one L-shaped frame round the page. A phone moves the links to a tab bar. */
:root { --shell-top: 58px; }
.shell-rail, .shell-top { display: none; }
body.has-shell { padding: calc(var(--shell-top) + 4px) 0 0 calc(var(--shell-w) + 4px); }
body.has-shell .shell-top {
  position: fixed; inset: 0 0 auto 0; z-index: 61;
  display: flex; align-items: center; gap: 12px;
  height: var(--shell-top); padding: 0 16px 0 14px;
  background: var(--shell); color: var(--shell-ink);
  box-shadow: 0 4px 0 var(--f-ink, #1d1838);
}
body.has-shell .shell-rail {
  position: fixed; inset: calc(var(--shell-top) + 4px) auto 0 0; z-index: 60;
  width: var(--shell-w);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 12px;
  background: var(--shell); color: var(--shell-ink);
  box-shadow: 4px 0 0 var(--f-ink, #1d1838);
}
.shell-mark, .hud-home {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  color: var(--shell-ink); text-decoration: none;
  font: 400 32px/1 var(--pixel-title); text-shadow: 2px 2px 0 var(--gold);
}
:root[data-theme="dark"] :is(.shell-mark, .hud-home) { text-shadow: 2px 2px 0 #5a3fd0; }
.shell-globe {
  display: block; flex: none; width: 36px; height: 36px;
  background: url("/assets/9758712b58379f4965c8280cbdb907fd5c8fef98dd6a6605c5403ddb3e33b75f/pixel-globe.png") 0 0 / 3600% 100% no-repeat;
  image-rendering: pixelated;
}
@media (prefers-reduced-motion: no-preference) {
  :is(.shell-mark, .hud-home):hover .shell-globe { animation: px-spin 3s steps(36, jump-none) infinite; }
}
.shell-items { display: flex; flex-direction: column; gap: 6px; }
.shell-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 68px; min-height: 60px; padding: 6px 2px;
  color: var(--shell-ink); text-decoration: none;
  font: 400 15px/1 var(--pixel);
}
.shell-item:hover, .shell-item:focus-visible { background: var(--shell-hover); outline: none; }
.shell-item[aria-current="page"] {
  background: var(--gold); color: #1d1838;
  box-shadow: 0 0 0 2px #1d1838, 3px 3px 0 2px #1d1838;
}
.shell-label { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-you.signed-in .shell-icon { display: none; }
.shell-account { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.shell-account .country-avatar.mini { width: 22px; height: 24px; }
.shell-account .chip-name { max-width: 64px; overflow: hidden; text-overflow: ellipsis; }

/* The page's tools at the right of the top bar. */
.shell-tools { margin-left: auto; }
.shell-tools .shell-tools-host { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.shell-tools .shell-tools-host > :is(button, a), .shell-tools #menu-settings-btn, .shell-tools #solo-share {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0;
  display: grid; place-items: center;
}
/* The party room's worded keys (its code, Players, Leave) take their words' width. */
.shell-tools .party-top-tools.shell-tools-host > .small-button { width: auto; min-width: 0; padding: 0 12px; white-space: nowrap; }
@media (max-width: 760px) { .shell-tools .party-top-tools.shell-tools-host > .small-button { padding: 0 8px; font-size: 13px; } }
.shell-tools #menu-settings-ctl { position: relative; }
.shell-tools #menu-settings-pop { position: absolute; left: auto; right: 0; top: calc(100% + 12px); bottom: auto; }
.shell-tools .menu-solo, .shell-tools .site-links, .shell-tools #menu-more-btn, .shell-tools #menu-more { display: none !important; }
@media (max-width: 640px) {
  :root .shell-tools [data-menu-tools] > :not(.menu-solo, .menu-more-btn, .menu-more, .site-links) { display: grid; }
}

/* The page's own brand, links and Menu are the frame's now. */
body.has-shell :is(.record-nav, header.masthead .brand-stack, .welcome-top .brand-stack) .site-brand,
body.has-shell .site-links,
body.has-shell .party-top > .site-brand,
body.has-shell #menu-more-btn { display: none !important; }
body.has-shell .record-nav:not(:has(> :not(.site-brand, .site-links, .record-tools))) { display: none; }

/* In a party's room the room is the page: the links step aside and the top
   bar keeps the wordmark and the room's tools (Leave among them). */
body.has-shell:has(:is(#room-screen, #play-screen):not([hidden])) { padding-left: 0; }
body.has-shell:has(:is(#room-screen, #play-screen):not([hidden])) .shell-rail { display: none; }

/* ---------- a phone: the top bar and a tab bar ---------- */
@media (max-width: 760px) {
  :root { --shell-top: 54px; }
  body.has-shell { padding: 0 0 calc(66px + env(safe-area-inset-bottom)); }
  body.has-shell .shell-top { position: static; margin: 0 0 4px; padding: 0 10px 0 12px; }
  .shell-mark { font-size: 27px; gap: 7px; }
  .shell-mark .shell-globe { width: 30px; height: 30px; }
  body.has-shell .shell-rail {
    inset: auto 0 0 0; width: auto; height: calc(62px + env(safe-area-inset-bottom));
    flex-direction: row; justify-content: center; padding: 0 4px env(safe-area-inset-bottom);
    box-shadow: 0 -4px 0 var(--f-ink, #1d1838);
  }
  .shell-items { flex-direction: row; width: 100%; max-width: 520px; justify-content: space-between; gap: 2px; }
  .shell-item { flex: 1 1 0; width: auto; min-height: 54px; font-size: 14px; }
  .shell-item[aria-current="page"] { box-shadow: 0 0 0 2px #1d1838; }
  .shell-tools .shell-tools-host { gap: 6px; }
  .shell-tools .shell-tools-host > :is(button, a), .shell-tools #menu-settings-btn, .shell-tools #solo-share { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
  body.has-shell:has(:is(#room-screen, #play-screen):not([hidden])) { padding-bottom: 0; }
}
@media (max-width: 380px) {
  .shell-mark { font-size: 23px; }
  .shell-tools .shell-tools-host > :is(button, a), .shell-tools #menu-settings-btn, .shell-tools #solo-share { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
}

/* ---------- a game's bar ----------
   One periwinkle strip: the way back to the games and the title on the left,
   the game's status beside the title, the round, the tools and the Menu on
   the right. No breadcrumb strip above it and no rule under it. */
:root:not(.party-game) #topbar {
  max-width: none; margin: 0 0 6px;
  padding: 9px max(14px, calc((100% - 1320px) / 2 + 20px));
  gap: 12px;
  background: var(--shell); background-image: none; color: var(--shell-ink);
  border-bottom: 0; box-shadow: 0 4px 0 var(--f-ink);
  position: relative; z-index: 30;
}
:root:not(.party-game) #topbar h1 { font-family: var(--pixel-title); font-weight: 400; font-size: 30px; line-height: 1; text-shadow: 2px 2px 0 var(--gold); }
:root[data-theme="dark"]:not(.party-game) #topbar h1 { text-shadow: 2px 2px 0 #5a3fd0; }
/* The wordmark leads the bar, as on every page, and a pixel rule parts it
   from the game's title. */
:root:not(.party-game) #topbar .hud-home { font-size: 28px; }
:root:not(.party-game) #topbar .hud-home .shell-globe { width: 32px; height: 32px; }
:root:not(.party-game) #topbar > h1 { display: flex; align-items: center; gap: 12px; }
:root:not(.party-game) #topbar > h1::before { content: ""; width: 4px; height: 30px; background: var(--f-ink); opacity: .55; flex: none; }
:root #topbar #crumbs { padding: 0; border: 0; background: none; font-family: var(--pixel); font-size: 17px; color: var(--shell-ink); }
.hud-status { display: flex; align-items: center; gap: 10px; min-width: 0; font: 400 17px/1 var(--pixel); color: var(--shell-ink); }
.hud-status:empty { display: none; }
.hud-status > * { white-space: nowrap; }
.hud-status #solo-allowance { padding: 4px 8px 3px; background: rgba(255, 255, 255, .5); }
:root[data-theme="dark"] .hud-status #solo-allowance { background: rgba(255, 255, 255, .1); }
:root:not(.party-game) #topbar .topbar-right { gap: 10px; }
:root:not(.party-game) #topbar .solo-time-setting { color: var(--shell-ink); }

/* The Menu at every width: the page links and the settings. */
:root:not(.party-game) #topbar .topbar-right > #settings-ctl { display: none; }
:root:not(.party-game) #topbar #game-menu-btn {
  order: 1; display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 12px;
  border: 0; background: var(--text); color: var(--panel); cursor: pointer;
  font: 400 19px/1 var(--pixel-key);
  box-shadow: 3px 3px 0 0 rgba(29, 24, 56, .45);
}
:root:not(.party-game) #topbar #game-menu-btn::after { content: "Menu"; }
:root:not(.party-game) #topbar #game-menu-btn:hover,
:root:not(.party-game) #topbar #game-menu-btn[aria-expanded="true"] { background: #5b3ff0; color: #fff; }
:root[data-theme="dark"]:not(.party-game) #topbar #game-menu-btn { background: var(--panel); color: var(--text); }
:root:not(.party-game) #topbar .game-menu:not([hidden]) {
  position: absolute; z-index: 1250; top: calc(100% + 10px); right: max(14px, calc((100% - 1320px) / 2 + 20px)); width: min(300px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 10px; padding: 12px; text-align: left;
  border: 0; background: var(--panel); box-shadow: var(--f-bevel-lg); color: var(--text);
}
.game-menu .site-links { display: flex; flex-direction: column; gap: 6px; margin: 0; align-self: stretch; }
:root .game-menu .nav-box {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px;
  border: 0; box-shadow: inset 0 0 0 2px var(--border); color: var(--text); text-decoration: none;
  font: 500 15px/1 var(--display);
}
:root .game-menu .nav-box:hover, :root .game-menu .nav-box:focus-visible { box-shadow: inset 0 0 0 2px var(--text); background: var(--accent-soft); outline: none; }
.game-menu .account-chip .country-avatar.mini { width: 18px; height: 20px; filter: none; }
.game-menu-tools { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 2px solid var(--wash); }
.game-menu-tools:empty { display: none; }
.game-menu #settings-ctl { display: contents; }
:root:not(.party-game) #topbar #game-menu #settings-btn {
  flex: 1 1 0; width: auto; height: 42px; min-height: 0; margin: 0; padding: 0 12px;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px;
  color: var(--text); line-height: 1; cursor: pointer;
}
.game-menu-tools [data-menu-name]::after { content: attr(data-menu-name); font: 500 15px/1 var(--display); color: var(--text); }
:root:not(.party-game) #topbar #game-menu #settings-pop {
  position: static; order: 9; flex: 1 0 100%; width: auto; margin-top: 4px; padding: 10px 0 0;
  border: 0; border-top: 2px solid var(--wash); box-shadow: none; background: none;
}
/* A phone's bar is two rows: the wordmark and the tools, then the game's
   title with its round count, clock or time setting. */
@media (max-width: 640px) {
  :root:not(.party-game) #topbar { padding: 7px 10px 8px; column-gap: 6px; row-gap: 6px; }
  :root:not(.party-game) #topbar .hud-home { order: 0; margin-right: auto; font-size: 25px; gap: 7px; }
  :root:not(.party-game) #topbar .hud-home .shell-globe { width: 28px; height: 28px; }
  :root:not(.party-game) #topbar > h1 { order: 3; flex: 1 1 auto; font-size: clamp(20px, 6.2vw, 26px); }
  :root:not(.party-game) #topbar > h1::before { content: none; }
  :root:not(.party-game) #topbar :is(.round-chip, .solo-time-setting, #solo-clock, .hunt-clock) { order: 4; margin: 0 0 0 auto; }
  :root:not(.party-game) #topbar .topbar-right > #help-btn { display: grid; place-items: center; padding: 0; }
  :root:not(.party-game) #topbar :is(.icon-btn, #settings-btn) { width: 40px; height: 40px; }
  :root:not(.party-game) #topbar #game-menu-btn { width: auto; height: 40px; padding: 0 10px; }
  :root:not(.party-game) #topbar #game-menu-btn::after { content: none; }
  .hud-status { font-size: 15px; }
}
@media (max-width: 370px) {
  :root:not(.party-game) #topbar .hud-home .hud-name { display: none; }
}

/* ---------- the prompt ----------
   The question first, then what it is about, as a tag under it. */
.prompt .kicker {
  order: 2; align-self: flex-start;
  padding: 3px 8px 2px; background: var(--accent-soft); color: var(--accent);
  font: 400 16px/1 var(--pixel) !important;
}
:root[data-theme="dark"] .prompt .kicker { background: rgba(178, 164, 255, .14); color: var(--accent-line); }

/* ---------- windows: the rules, results and About ----------
   A window with a violet title strip, like a dialog in a game. */
#briefing .kicker, #menu-info > .kicker { display: none; }
#briefing .sheet {
  gap: 14px; padding: 0 22px 22px;
  background: var(--panel); box-shadow: var(--f-bevel-lg);
}
#briefing .sheet > h2 {
  margin: 0 -22px 4px; padding: 11px 22px 9px;
  background: #5b3ff0; color: #fff;
  font-size: 30px; line-height: 1; text-shadow: 2px 2px 0 rgba(29, 24, 56, .35);
}
.modal { padding-top: 0; border: 0; }
.modal > h2:first-child {
  margin: 0 -28px 14px; padding: 12px 28px 10px;
  background: #5b3ff0; color: #fff; text-shadow: 2px 2px 0 rgba(29, 24, 56, .35);
  position: sticky; top: 0; z-index: 2;
}
#menu-info { padding-top: 0; }
#menu-info > h2 { margin-top: 0; padding: 12px 24px 10px; margin-inline: -24px; background: #5b3ff0; color: #fff; }
/* While the "?" says where the rules are, the Menu keeps its own colours. */
:root:not(.party-game) #topbar:has(#help-btn.hint) #game-menu-btn[aria-expanded="false"] { color: var(--panel); }
:root[data-theme="dark"]:not(.party-game) #topbar:has(#help-btn.hint) #game-menu-btn[aria-expanded="false"] { color: var(--text); }

/* The party page: its heading (the room's name) sits in the top bar beside
   the wordmark, its tools at the bar's right; its own header keeps only the
   notices. */
.shell-top .shell-context {
  margin: 0 0 0 6px; padding: 5px 10px 4px; align-self: center;
  background: rgba(255, 255, 255, .5); color: var(--shell-ink) !important;
  font: 400 18px/1 var(--pixel) !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
:root[data-theme="dark"] .shell-top .shell-context { background: rgba(255, 255, 255, .1); }
.shell-top .shell-context:empty { display: none; }
body.has-shell .party-top { min-height: 0; padding-top: 0; padding-bottom: 0; border: 0; background-image: none; box-shadow: none; }
body.has-shell .party-top:not(:has(:is(#party-notice, #party-error):not([hidden]))) { display: none; }
.shell-tools .party-top-tools { display: flex; align-items: center; gap: 8px; }
.shell-tools .party-top-tools .small-button { height: 40px; }
@media (max-width: 760px) {
  .shell-top .shell-context { display: none; }
  .shell-tools .party-top-tools .small-button { height: 38px; padding: 0 8px; }
}

/* City Limits writes its own bar: its title sits in a .brand box. */
:root:not(.party-game) #topbar > .brand > h1 { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--pixel-title); font-weight: 400; font-size: 30px; line-height: 1; text-shadow: 2px 2px 0 var(--gold); }
:root:not(.party-game) #topbar > .brand > h1::before { content: ""; width: 4px; height: 30px; background: var(--f-ink); opacity: .55; flex: none; }
@media (max-width: 640px) {
  /* On a phone the city track names the game's difficulty and progress, so
     the title gives its row to the map. */
  :root:not(.party-game) #topbar > .brand { display: none; }
  :root:not(.party-game) #topbar > #city-track { order: 5; }
  :root:not(.party-game) #topbar > .brand > h1 { font-size: clamp(20px, 6.2vw, 26px); }
  :root:not(.party-game) #topbar > .brand > h1::before { content: none; }
}
/* While a party plays, the top bar is slimmer, as the room's bar was. */
body.has-shell:has(#play-screen:not([hidden])) { --shell-top: 44px; }
body.has-shell:has(#play-screen:not([hidden])) .shell-mark { font-size: 24px; }
body.has-shell:has(#play-screen:not([hidden])) .shell-mark .shell-globe { width: 26px; height: 26px; }
body.has-shell:has(#play-screen:not([hidden])) .shell-tools .small-button { height: 34px; }

/* Record pages fill the room the frame leaves them. */
body.has-shell .record-page { min-height: calc(100svh - var(--shell-top) - 4px); }
@media (min-width: 761px) and (min-height: 660px) {
  body.has-shell .leaderboard-page { height: calc(100svh - var(--shell-top) - 4px); }
}

/* A phone on its side: one slim row. The wordmark is the globe alone, the
   titles step down and the status waits. */
@media (max-height: 500px) {
  :root:not(.party-game) #topbar { padding-top: 4px; padding-bottom: 4px; row-gap: 4px; margin-bottom: 4px; }
  :root:not(.party-game) #topbar .hud-home .hud-name { display: none; }
  :root:not(.party-game) #topbar .hud-home .shell-globe { width: 26px; height: 26px; }
  :root:not(.party-game) #topbar > h1, :root:not(.party-game) #topbar > .brand > h1 { font-size: 20px; }
  :root:not(.party-game) #topbar > h1::before, :root:not(.party-game) #topbar > .brand > h1::before { height: 22px; }
  :root:not(.party-game) #topbar :is(.icon-btn, #settings-btn, #game-menu-btn) { height: 34px; }
  :root:not(.party-game) #topbar .icon-btn { width: 34px; }
  :root:not(.party-game) #topbar .round-info { display: none; }
}

/* A narrow phone in a party room: the room's buttons wrap under the
   wordmark rather than push the page sideways. */
@media (max-width: 760px) {
  body.has-shell .shell-top { flex-wrap: wrap; height: auto; min-height: var(--shell-top); row-gap: 6px; padding-block: 8px; }
  .shell-tools { min-width: 0; max-width: 100%; }
  .shell-tools .party-top-tools { flex-wrap: wrap; justify-content: flex-end; }
}

/* The party page is one screen: the frame, then the party's app in the room
   that is left, however tall the top bar grew. */
body.party-page.has-shell { display: flex; flex-direction: column; height: 100dvh; }
body.party-page.has-shell #party-app { flex: 1 1 0; min-height: 0; height: auto; }

/* ---------- fewer frames ----------
   A frame only where it means something: a key you press, a field you type
   into, a tile you pick or drag, a flag's edge, a meter, a window. Boards,
   maps, charts and cards that only hold content sit on the page with no ink
   ring and no drop. Each keeps its border's width, now clear, so nothing on
   the board moves. */
:root :is(.map-panel, #map-slot, #pad-wrap, #board-wrap, .chart-layout, #map-wrap, .guess-map-frame,
  div.place, .lingocation-quote, .ow-secret, .ow-bans, main .card-panel, .filter-note, .answer-wait) {
  border-color: transparent;
  box-shadow: none;
}
:root main .card-panel, :root .ow-bans { background: transparent; }
:root .answer-wait { background: var(--panel-2); }
/* Oracle 1's clues: words on a soft violet, not boxes. */
:root .ow-clue { border-color: transparent; box-shadow: none; background: var(--accent-soft); }
:root[data-theme="dark"] .ow-clue { background: rgba(178, 164, 255, .16); }

/* The second keys: a soft fill, no ring and no drop. The gold key stays
   the one raised key on a screen. */
:root :is(.btn.ghost, .btn.quiet, .skip-btn, .reveal-btn, #giveup-btn, #round-actions button, .report-button) {
  border-color: transparent;
  background: var(--wash);
  color: var(--text);
  box-shadow: none;
}
:root :is(.btn.ghost, .btn.quiet, .skip-btn, .reveal-btn, #giveup-btn, #round-actions button, .report-button):hover:not(:disabled) {
  background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent);
}
:root :is(.btn.ghost, .btn.quiet, .skip-btn, .reveal-btn, #giveup-btn, #round-actions button, .report-button):active:not(:disabled) {
  translate: 0 1px; box-shadow: inset 0 0 0 2px var(--accent);
}
/* A key that cannot be pressed yet is a faint fill, not a dashed box. */
:root :is(.btn, .skip-btn, .reveal-btn, #giveup-btn, #round-actions button):disabled {
  border-color: transparent; border-style: solid; background: var(--panel-2); color: var(--faint); box-shadow: none;
}
:root[data-theme="dark"] :is(.btn.ghost, .btn.quiet, .skip-btn, .reveal-btn, #giveup-btn, #round-actions button, .report-button) { background: var(--panel-2); }
/* A flat map with no frame needs no box behind it either: the projection's
   own sea marks its edge, as on Population Hunt. */
:root :is(.map-panel, #map-slot) { background: transparent; }

/* ---------- gold ----------
   A little more gold through the pages: a dashed gold trim along the bars, a gold
   drop under each game's question, gold brackets at the corners of the white
   boards and cards, and the tag under a question on pale gold. */
/* The ground is map paper: dashed pixel lines of latitude and longitude
   every 48px, faint violet. */
body { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' shape-rendering='crispEdges'%3E%3Crect x='0' y='23' width='4' height='2' fill='%235b3ff0' fill-opacity='.10'/%3E%3Crect x='8' y='23' width='4' height='2' fill='%235b3ff0' fill-opacity='.10'/%3E%3Crect x='16' y='23' width='4' height='2' fill='%235b3ff0' fill-opacity='.10'/%3E%3Crect x='24' y='23' width='4' height='2' fill='%235b3ff0' fill-opacity='.10'/%3E%3Crect x='32' y='23' width='4' height='2' fill='%235b3ff0' fill-opacity='.10'/%3E%3Crect x='40' y='23' width='4' height='2' fill='%235b3ff0' fill-opacity='.10'/%3E%3Crect x='23' y='0' width='2' height='4' fill='%235b3ff0' fill-opacity='.10'/%3E%3Crect x='23' y='8' width='2' height='4' fill='%235b3ff0' fill-opacity='.10'/%3E%3Crect x='23' y='16' width='2' height='4' fill='%235b3ff0' fill-opacity='.10'/%3E%3Crect x='23' y='32' width='2' height='4' fill='%235b3ff0' fill-opacity='.10'/%3E%3Crect x='23' y='40' width='2' height='4' fill='%235b3ff0' fill-opacity='.10'/%3E%3C/svg%3E"); background-size: 48px 48px; }
:root[data-theme="dark"] body {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' shape-rendering='crispEdges'%3E%3Crect x='0' y='23' width='4' height='2' fill='%23b09bff' fill-opacity='.10'/%3E%3Crect x='8' y='23' width='4' height='2' fill='%23b09bff' fill-opacity='.10'/%3E%3Crect x='16' y='23' width='4' height='2' fill='%23b09bff' fill-opacity='.10'/%3E%3Crect x='24' y='23' width='4' height='2' fill='%23b09bff' fill-opacity='.10'/%3E%3Crect x='32' y='23' width='4' height='2' fill='%23b09bff' fill-opacity='.10'/%3E%3Crect x='40' y='23' width='4' height='2' fill='%23b09bff' fill-opacity='.10'/%3E%3Crect x='23' y='0' width='2' height='4' fill='%23b09bff' fill-opacity='.10'/%3E%3Crect x='23' y='8' width='2' height='4' fill='%23b09bff' fill-opacity='.10'/%3E%3Crect x='23' y='16' width='2' height='4' fill='%23b09bff' fill-opacity='.10'/%3E%3Crect x='23' y='32' width='2' height='4' fill='%23b09bff' fill-opacity='.10'/%3E%3Crect x='23' y='40' width='2' height='4' fill='%23b09bff' fill-opacity='.10'/%3E%3C/svg%3E"), linear-gradient(180deg, #1a1236 0%, #130e26 45%, #0e0a1e 100%);
  background-size: 48px 48px, 100% 100%;
}
:root {
  --gold-trim: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px) left bottom / 100% 3px no-repeat;
  --gold-corners:
    linear-gradient(var(--gold), var(--gold)) left top / 14px 3px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left top / 3px 14px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top / 14px 3px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top / 3px 14px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left bottom / 14px 3px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left bottom / 3px 14px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 14px 3px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 3px 14px no-repeat;
}
body.has-shell .shell-top, :root:not(.party-game) #topbar { background: var(--gold-trim), var(--shell); }
:root:not(.party-game) .prompt h2 { text-shadow: 2px 2px 0 var(--gold); }
:root[data-theme="dark"]:not(.party-game) .prompt h2 { text-shadow: 2px 2px 0 #9a6a00; }

:root .prompt .kicker { background: #fff0c2; color: #1d1838; }
:root[data-theme="dark"] .prompt .kicker { background: rgba(255, 197, 61, .16); color: var(--gold); }

/* A finger's 44px for the bar buttons on a touch screen. */
@media (pointer: coarse) and (max-width: 640px) {
  :root:not(.party-game) #topbar :is(.icon-btn, #settings-btn, #game-menu-btn) { width: 44px; height: 44px; }
  :root:not(.party-game) #topbar #game-menu-btn { width: auto; min-width: 44px; }
}
@media (pointer: coarse) and (max-width: 760px) {
  .shell-tools .shell-tools-host > :is(button, a), .shell-tools #menu-settings-btn, .shell-tools #solo-share { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
}
@media (pointer: coarse) and (max-width: 380px) {
  .shell-mark { font-size: 21px; gap: 6px; }
  .shell-mark .shell-globe { width: 26px; height: 26px; }
  .shell-tools .shell-tools-host { gap: 4px; }
}

/* A phone's game bar stays as short as the old one (83px): tight rows, the
   wordmark and keys on one, the title on the next, and no gap under it. */
@media (max-width: 640px) {
  :root:not(.party-game) #topbar { padding-top: 4px; padding-bottom: 5px; row-gap: 3px; margin-bottom: 2px; }
  :root:not(.party-game) #topbar .hud-home { font-size: 23px; }
  :root:not(.party-game) #topbar .hud-home .shell-globe { width: 26px; height: 26px; }
  :root:not(.party-game) #topbar > h1 { font-size: clamp(19px, 5.6vw, 23px); line-height: 1; }
  :root:not(.party-game) #topbar > .brand > h1 { font-size: clamp(19px, 5.6vw, 23px); }
}
/* The title's row holds the title and the round: a long title ends in an
   ellipsis rather than push the round onto a row of its own, and the round
   is its squares alone (the words stay for screen readers). */
@media (max-width: 640px) {
  :root:not(.party-game) #topbar > h1 { display: block; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root:not(.party-game) #topbar :is(.round-chip, .solo-time-setting, #solo-clock, .hunt-clock, .ow-solo-side) { flex: none; }
  :root:not(.party-game) #topbar .round-chip.has-steps .step-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* Room in the rail for "Leaderboard". */
.shell-item { font-size: 14px; }
.shell-label { max-width: 76px; }
body.has-shell .shell-rail .shell-item { width: 76px; }
:root { --shell-w: 88px; }
@media (max-width: 760px) {
  .shell-item { font-size: 13px; }
  .shell-label { max-width: none; }
}

/* A phone's long record pages scroll clear of the tab bar: the body is one
   screen tall there (kit.css, records.css), so the room goes on the page. */
@media (max-width: 760px) {
  body.has-shell .record-page { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
/* A phone's settings open under the top bar, inside the screen. */
@media (max-width: 760px) {
  .shell-tools #menu-settings-ctl { position: static; }
  .shell-tools #menu-settings-pop { position: fixed; top: calc(var(--shell-top) + 10px); right: 8px; left: auto; width: min(300px, calc(100vw - 16px)); z-index: 70; }
}

/* ---------- the leaderboard ----------
   Laid out like the picker: the daily games down the left in a window of
   their own (the one shown marked with the gold arrow), the standings in the
   middle and where everyone finished on the right, each under a violet strip. */
body.has-shell .record-page.leaderboard-page { max-width: none; padding: 16px 22px 14px; }
.leaderboard-page > h1 { margin: 0 0 12px; font: 400 32px/1 var(--pixel-title); text-shadow: 2px 2px 0 var(--gold); }
:root[data-theme="dark"] .leaderboard-page > h1 { text-shadow: 2px 2px 0 #5a3fd0; }
.leaderboard-page .board-chips {
  max-width: none !important; margin: 0 0 14px; padding: 0 6px 6px;
  background: var(--panel); box-shadow: var(--f-bevel);
}
.leaderboard-page .board-chips::before {
  content: "Daily games"; display: block; flex: 0 0 100%;
  margin: 0 -6px 6px; padding: 8px 12px 7px; background: #5b3ff0; color: #fff; font: 400 21px/1 var(--pixel-title);
}
.record-page.leaderboard-page .board-chips button {
  position: relative; min-height: 38px; padding: 6px 10px 6px 28px; text-align: left;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  font: 600 15px/1.2 var(--display); color: var(--text);
}
.record-page.leaderboard-page .board-chips button:hover { background: var(--accent-soft) !important; }
.record-page.leaderboard-page .board-chips button[aria-pressed="true"] { background: var(--accent-soft) !important; box-shadow: inset 0 0 0 2px var(--text) !important; color: var(--text); }
.record-page.leaderboard-page .board-chips button[aria-pressed="true"]::before {
  content: ""; position: absolute; left: 8px; top: 50%; width: 12px; height: 14px; translate: 0 -50%;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 7' shape-rendering='crispEdges'%3E%3Cpath fill='%231d1838' d='M0 0h2v1h2v1h2v3H4v1H2v1H0z'/%3E%3Cpath fill='%23ffc53d' d='M1 1h1v1h2v1h1v1H4v1H2v1H1z'/%3E%3C/svg%3E") center / contain no-repeat;
  image-rendering: pixelated;
}
.leaderboard-page .day-nav { margin: 0 0 12px; gap: 10px; }
.leaderboard-page .day-nav strong { font: 400 24px/1 var(--pixel-title); min-width: 0; }
.leaderboard-page .daily-layout section { border: 0; padding: 0 16px 16px; background: var(--panel); box-shadow: var(--f-bevel); }
.leaderboard-page .daily-layout .board-head,
.leaderboard-page .daily-side section > h2,
.leaderboard-page .daily-side .side-head {
  margin: 0 -16px 12px; padding: 9px 16px 8px; background: #5b3ff0; color: #fff;
}
.leaderboard-page .daily-layout h2 { font: 400 21px/1.1 var(--pixel-title); color: #fff; margin: 0; }
.leaderboard-page .daily-side .side-head h2 { margin: 0 0 2px; }
.leaderboard-page .daily-side .side-head p, .leaderboard-page .guest-filter, .leaderboard-page .guest-filter span { color: rgba(255, 255, 255, .85); }
.leaderboard-page .guest-filter .segmented { border-color: rgba(255, 255, 255, .6); }
/* On the violet header the chosen side is the gold key; the other is only an outline. */
.leaderboard-page .guest-filter .segmented button { background: transparent; color: rgba(255, 255, 255, .85); font-weight: 500; }
.leaderboard-page .guest-filter .segmented button[aria-pressed="true"] { background: var(--gold, #ffc53d); color: #1d1838; font-weight: 700; }
.leaderboard-page .guest-filter .segmented button:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .14); color: #fff; }
.leaderboard-page .record-table-wrap { border: 0; }
.leaderboard-page .board-table { border-collapse: collapse; }
/* The standings fit their panel at every width and zoom, as on a phone: the
   place, the score and the time keep set widths, a name shortens, and a score
   too long for its column breaks before its out-of rather than being cut. */
.leaderboard-page .daily-layout .board-table { table-layout: fixed; width: 100%; }
.leaderboard-page .daily-layout .board-table th:nth-child(1) { width: 40px; }
.leaderboard-page .daily-layout .board-table.with-medals th:nth-child(1) { width: 56px; }
.leaderboard-page .daily-layout .board-table th:nth-child(3) { width: 96px; }
.leaderboard-page .daily-layout .board-table th:nth-child(4) { width: 76px; }
.leaderboard-page .daily-layout .board-table td.num .score { white-space: normal; }
.leaderboard-page .daily-layout .board-table .who-user, .leaderboard-page .daily-layout .board-table .who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.leaderboard-page .board-table thead th { background: var(--panel-2); border: 0; font: 400 16px/1 var(--pixel); color: var(--muted); }
.leaderboard-page .board-table tbody td { border: 0; }
.leaderboard-page .board-table tbody tr + tr { box-shadow: 0 -1px 0 var(--wash); }
.leaderboard-page .board-table tbody td.num:first-child { font: 400 22px/1 var(--pixel); color: var(--text); }
.leaderboard-page .board-table tbody tr.you { background: #fff0c2; }
:root[data-theme="dark"] .leaderboard-page .board-table tbody tr.you { background: rgba(255, 197, 61, .14); }
.leaderboard-page details { margin-top: 12px; }
@media (min-width: 1000px) {
  .leaderboard-page #daily-view {
    display: grid; grid-template-columns: minmax(240px, 290px) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "chips nav" "chips notice" "chips layout" "chips details";
    column-gap: 22px; align-items: start;
  }
  .leaderboard-page .board-chips { grid-area: chips; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; margin: 0; align-self: start; }
  .leaderboard-page .day-nav { grid-area: nav; }
  .leaderboard-page #notice { grid-area: notice; }
  .leaderboard-page .daily-layout { grid-area: layout; align-self: stretch; }
  .leaderboard-page details { grid-area: details; }
}
@media (max-width: 999px) {
  .leaderboard-page .board-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 6px; }
  .leaderboard-page .board-chips::before { content: none; }
  .record-page.leaderboard-page .board-chips button { flex: none; white-space: nowrap; padding-right: 12px; }
}
.record-page.leaderboard-page .board-chips button { display: block; width: 100%; text-align: left; }
@media (max-width: 999px) {
  .record-page.leaderboard-page .board-chips button { width: auto; }
}
@media (max-width: 640px) {
  .leaderboard-page > h1 { font-size: 26px; }
  .leaderboard-page .day-nav strong { font-size: 19px; white-space: nowrap; }
}

/* The day in numbers, beside the standings: six figures in a grid, then
   where the signed-in players come from. */
.leaderboard-page .daily-side > section:has(#day-stats) { flex: none; }
.day-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.day-number { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.day-number span { font-size: 12px; color: var(--muted); }
.day-number b { font: 400 22px/1.05 var(--figure); color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 420px) { .day-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .leaderboard-page .day-nav { gap: 8px; }
  .leaderboard-page .day-nav strong { order: -1; flex: 0 0 100%; text-align: left; }
}
/* The day picker above both; the games and the standings start and end
   together, the games' rows sharing the height. */
@media (min-width: 1000px) {
  .leaderboard-page #daily-view {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "nav nav" "notice notice" "chips layout" "details details";
  }
  .leaderboard-page .board-chips { align-self: stretch; min-height: 0; }
  .record-page.leaderboard-page .board-chips button { flex: 1 1 0; min-height: 34px; }
}
@media (min-width: 1000px) {
  .leaderboard-page .board-chips::before { flex: none; }
}
/* A game you finished today, on today's boards: a pale gold row with a pixel
   tick at its end (the standings mark your own row in the same gold). */
.record-page.leaderboard-page .board-chips.on-today button.done { background: #fff0c2 !important; padding-right: 30px; }
.record-page.leaderboard-page .board-chips.on-today button.done[aria-pressed="true"] { background: #ffe39a !important; }
.record-page.leaderboard-page .board-chips.on-today button.done::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 14px; height: 12px; translate: 0 -50%;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath fill='%231d1838' d='M6 0h1v2H6v1H5v1H4v1H3v1H2V5H1V4H0V2h1v1h1v1h1V3h1V2h1V1h1z'/%3E%3C/svg%3E") center / contain no-repeat;
  image-rendering: pixelated;
}
:root[data-theme="dark"] .record-page.leaderboard-page .board-chips.on-today button.done { background: rgba(255, 197, 61, .16) !important; }
:root[data-theme="dark"] .record-page.leaderboard-page .board-chips.on-today button.done::after { filter: invert(1); }

/* ---------- game screens: floating on the ground ----------
   No panel, strip or white board behind a game: its heading (in the pixel
   title face, with its gold drop) and its board sit on the dashed grid, as
   maps and globes do. Keys, fields and the map's own controls keep theirs. */
:root:not(.party-game) main > .stage { box-shadow: none; background: none; }

/* No "● Daily · 5 rounds" pill in a game's bar: the mark stays for screen
   readers only. */
:root #topbar #solo-allowance {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- the wordmark in a game's bar is the menu's ----------
   The same left edge, size, globe and gold drop as the top bar on every
   other page, at every width; never cut to the globe alone. */
:root:not(.party-game) #topbar { padding-left: 14px; padding-right: 16px; }
:root:not(.party-game) #topbar .hud-home { font-size: 32px; gap: 9px; line-height: 1; }
:root:not(.party-game) #topbar .hud-home .shell-globe { width: 36px; height: 36px; }
:root:not(.party-game) #topbar .hud-home .hud-name { display: inline; }
@media (max-width: 760px) {
  :root:not(.party-game) #topbar { padding-left: 12px; padding-right: 10px; }
  :root:not(.party-game) #topbar .hud-home { font-size: 27px; gap: 7px; }
  :root:not(.party-game) #topbar .hud-home .shell-globe { width: 30px; height: 30px; }
}
@media (max-width: 380px) {
  :root:not(.party-game) #topbar .hud-home { font-size: 23px; }
}
@media (pointer: coarse) and (max-width: 380px) {
  :root:not(.party-game) #topbar .hud-home { font-size: 21px; gap: 6px; }
  :root:not(.party-game) #topbar .hud-home .shell-globe { width: 26px; height: 26px; }
}
/* A phone on its side and the narrowest phones take a smaller wordmark, on
   the menu's bar and a game's alike, so each stays one row. */
@media (max-height: 500px) {
  .shell-mark, :root:not(.party-game) #topbar .hud-home { font-size: 27px; gap: 7px; }
  :is(.shell-mark, :root:not(.party-game) #topbar .hud-home) .shell-globe { width: 30px; height: 30px; }
  :root:not(.party-game) #topbar .round-chip.has-steps .step-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  :root:not(.party-game) #topbar > .brand { display: none; }
}
@media (max-width: 340px) {
  .shell-mark, :root:not(.party-game) #topbar .hud-home { font-size: 19px; gap: 5px; }
  :is(.shell-mark, :root:not(.party-game) #topbar .hud-home) .shell-globe { width: 24px; height: 24px; }
}
@media (max-width: 760px) {
  body.has-shell .record-page.leaderboard-page { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* The bar's keys, in the order the site has always had them: the main menu
   (the gold one), settings, share, the rules, the leagues, this game's
   leaderboard and the account, all in one style. A phone (640px and under)
   folds them into the Menu. */
.hud-main, .hud-links { display: none; }
@media (min-width: 641px) {
  /* (A phone's bar keeps its own order: the wordmark and the tools on the
     first row, the title and its round count on the second.) */
  :root:not(.party-game) #topbar .topbar-right > .hud-main { order: 1; }
  :root:not(.party-game) #topbar .topbar-right > #settings-ctl { order: 2; }
  :root:not(.party-game) #topbar .topbar-right > #solo-share { order: 3; }
  :root:not(.party-game) #topbar .topbar-right > #help-btn { order: 4; }
  :root:not(.party-game) #topbar .topbar-right > .hud-links { order: 5; }
  :root:not(.party-game) #topbar .topbar-right > #game-menu-btn { order: 6; }
  :root:not(.party-game) #topbar .topbar-right > #settings-ctl { display: block; position: relative; }
  :root:not(.party-game) #topbar .topbar-right > #help-btn { display: grid; }
  :root:not(.party-game) #topbar #game-menu-btn { display: none; }
  :root:not(.party-game) #topbar .topbar-right { gap: 8px; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  :root:not(.party-game) #topbar .round-chip { white-space: nowrap; }
  :root:not(.party-game) #topbar .hud-links { display: flex; align-items: center; gap: 8px; margin: 0; }
  :root:not(.party-game) #topbar :is(.hud-main, .hud-links a, #settings-btn, #solo-share, #help-btn) {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; min-height: 0; margin: 0; padding: 0 12px; border: 0; border-radius: 0; white-space: nowrap;
    color: var(--text); background: var(--panel); text-decoration: none; cursor: pointer;
    font: 400 18px/1 var(--pixel-key); box-shadow: var(--plain-face), var(--f-bevel-sm);
  }
  :root:not(.party-game) #topbar :is(#settings-btn, #solo-share, #help-btn) { width: 40px; min-width: 40px; padding: 0; }
  :root:not(.party-game) #topbar :is(.hud-links a, #settings-btn, #solo-share, #help-btn):hover { background: var(--wash); }
  /* (:is with an id matches the shared rule's weight, so the gold wins.) */
  :root:not(.party-game) #topbar :is(.hud-main, #hud-main) { display: inline-flex; background: var(--key); color: #1d1838; box-shadow: var(--key-face), var(--f-bevel-sm); }
  :root:not(.party-game) #topbar :is(.hud-main, #hud-main):hover { background: var(--key-hover); }
  :root:not(.party-game) #topbar :is(.hud-main, .hud-links a, #settings-btn, #solo-share, #help-btn):active { translate: 2px 2px; box-shadow: var(--f-bevel-down); }
  :root:not(.party-game) #topbar .hud-links .account-chip .country-avatar.mini { width: 18px; height: 20px; filter: none; }
  :root:not(.party-game) #topbar #settings-pop { position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 1250; }
}
/* One row at every desktop width and zoom (game-menu.js fitBar folds the keys
   that don't fit into the Menu): nothing wraps under the title. */
@media (min-width: 641px) {
  html:root:not(.party-game) #topbar { flex-wrap: nowrap; }
  html:root:not(.party-game) #topbar .topbar-right { flex-wrap: nowrap; flex: none; }
  html:root:not(.party-game) #topbar > :is(h1, .brand) { min-width: 0; }
  html:root:not(.party-game) #topbar > h1, html:root:not(.party-game) #topbar > .brand > h1 { white-space: nowrap; }
  html:root:not(.party-game) #topbar > h1, html:root:not(.party-game) #topbar > .brand > h1 { min-width: 0; overflow: hidden; }
  html:root:not(.party-game) #topbar > .hud-home { flex: none; }
  html:root:not(.party-game) #topbar.hud-fold-links .topbar-right > .hud-links { display: none; }
  html:root:not(.party-game) #topbar.hud-fold-main .topbar-right > :is(.hud-main, #hud-main) { display: none; }
  /* The Menu key, once it holds something, in the bar's own key style. */
  html:root:not(.party-game) #topbar.hud-fold-links #game-menu-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0; padding: 0 10px;
    color: var(--text); background: var(--panel); box-shadow: var(--plain-face), var(--f-bevel-sm);
    font: 400 13px/1 var(--pixel-title);
  }
  html:root:not(.party-game) #topbar.hud-fold-links #game-menu-btn svg { width: 15px; height: 15px; }
  html:root:not(.party-game) #topbar.hud-fold-links #game-menu-btn:hover { background: var(--wash); }
  /* (The first visit's "?" hint recolours a phone's Menu, which holds the "?";
     here the "?" stays in the bar.) */
  html:root:not(.party-game) #topbar.hud-fold-links:has(#help-btn) #game-menu-btn[aria-expanded="false"] { color: var(--text); animation: none; }
  html:root:not(.party-game) #topbar.hud-fold-links #game-menu-btn[aria-expanded="true"] { background: var(--accent); color: #fff; }
  html:root:not(.party-game) #topbar.hud-fold-name .hud-home .hud-name { display: none; }
}
/* Narrower desktops: shorter key padding before anything wraps. */
@media (min-width: 641px) and (max-width: 1180px) {
  :root:not(.party-game) #topbar :is(.hud-main, .hud-links a) { padding: 0 8px; font-size: 16px; }
  :root:not(.party-game) #topbar .topbar-right, :root:not(.party-game) #topbar .hud-links { gap: 6px; }
}

/* The bar and the rail are one periwinkle L: the bar's ink rule and gold
   dashes start where the rail ends, not across the rail's top. (A phone's
   links sit in a tab bar, so its top bar keeps its rule full width.) */
@media (min-width: 761px) {
  body.has-shell .shell-top {
    box-shadow: none;
    background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px) var(--shell-w) bottom / calc(100% - var(--shell-w)) 3px no-repeat, var(--shell);
  }
  body.has-shell .shell-top::after {
    content: ""; position: absolute; left: var(--shell-w); right: 0; bottom: -4px; height: 4px;
    background: var(--f-ink, #1d1838); pointer-events: none;
  }
  body.has-shell .shell-rail { top: var(--shell-top); padding-top: 18px; }
}

/* Boards float too: a game's board, chart, pad, quote or card has no white
   box or frame of its own. */
:root:not(.party-game) :is(#board-wrap, .chart-layout, .lingocation-quote, .ow-secret, div.place, #pad-wrap) {
  background: none; border-color: transparent; box-shadow: none;
}

/* No pale gold tag under or beside a game's heading ("Today's puzzle · four
   countries", "You guess"): its words are a plain line in the muted ink.
   (Lingocation's tag is its question, styled in console-words.css.) */
:root:not(.party-game) :is(main, #app) :is(.kicker, #cx .kicker):not(.lingo-stage .kicker) {
  padding: 0; background: none; box-shadow: none; border: 0; color: var(--muted);
}

/* Tags that only repeat what the heading, its note or the bar already say
   are not shown ("You guess" over "Guess the country from the words",
   "Today's puzzle · four countries" under a bar that reads "0 of 4 found").
   The ones that add something stay: Lingocation's question, Distance
   Guessr's "As the crow flies", Border Chain's route count, and the
   Countries game's count. */
:root:not(.party-game) :is(
  #solo.ow-stage #s-kicker, #cx-kicker,
  .cm-warp #kicker, .cm-blind #kicker, .cm-mine #kicker,
  .cb-sort #kicker, .cb-trend #kicker, .cb-size #kicker, .cb-flag #kicker, .cb-border #kicker,
  .cm-warp main .prompt .kicker, .cb-trend main .prompt .kicker, .cb-flag main .prompt .kicker
) { display: none; }

/* The bar's keys at the live site's size: 30px tall, 13px words, 30px
   square icon keys. */
@media (min-width: 641px) {
  :root:not(.party-game) #topbar :is(.hud-main, .hud-links a, #settings-btn, #solo-share, #help-btn) {
    height: 30px; padding: 0 12px; font: 400 13px/1 var(--pixel-title);
  }
  :root:not(.party-game) #topbar :is(#settings-btn, #solo-share, #help-btn) { width: 30px; min-width: 30px; padding: 0; }
  :root:not(.party-game) #topbar :is(#settings-btn, #solo-share, #help-btn) svg { width: 15px; height: 15px; }
  :root:not(.party-game) #topbar .topbar-right, :root:not(.party-game) #topbar .hud-links { gap: 6px; }
}

/* The game's title beside the wordmark, a little smaller than the wordmark. */
@media (min-width: 641px) {
  :root:not(.party-game) #topbar > h1, :root:not(.party-game) #topbar > .brand > h1 { font-size: 24px; }
  :root:not(.party-game) #topbar > h1::before, :root:not(.party-game) #topbar > .brand > h1::before { height: 24px; }
}
/* The results' rounds bar ("Explore the Rounds", the round, Summary) has no
   rule under it. */
:root:not(.party-game) .solo-review-nav { border-bottom: 0; }

/* The gold dashes turn the corner and run down the rail's edge too. */
@media (min-width: 761px) {
  body.has-shell .shell-rail {
    background: repeating-linear-gradient(180deg, var(--gold) 0 8px, transparent 8px 16px) right top / 3px 100% no-repeat, var(--shell);
  }
}

/* Room between the rail's links and its gold edge: the chosen link's drop
   shadow stops short of the dashes. */
@media (min-width: 761px) {
  body.has-shell .shell-rail { padding-right: 3px; }
  body.has-shell .shell-rail .shell-item { width: 76px; }
  .shell-label { max-width: 76px; }
}

/* The main menu is busy enough: a plain ground, no pattern. */
body.picker-page { background-image: none; }
:root[data-theme="dark"] body.picker-page { background-image: linear-gradient(180deg, #1a1236 0%, #130e26 45%, #0e0a1e 100%); }

/* ---------- the games' ground ----------
   A game page opens on one of three faint pixel grounds, chosen at random
   each visit (loading.js marks <html data-ground>): stars, clouds or waves.
   The main menu keeps its plain ground. */
:root[data-ground="stars"] body:not(.picker-page) { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' shape-rendering='crispEdges'%3E%3Crect x='16' y='12' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='16' y='15' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='10' y='18' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='13' y='18' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='16' y='18' width='3' height='3' fill='%23ffc53d' fill-opacity='0.6'/%3E%3Crect x='19' y='18' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='22' y='18' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='16' y='21' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='16' y='24' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='73' y='40' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='70' y='43' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='73' y='43' width='3' height='3' fill='%23ffc53d' fill-opacity='0.6'/%3E%3Crect x='76' y='43' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='73' y='46' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='44' y='80' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='102' y='90' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='102' y='93' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='96' y='96' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='99' y='96' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='102' y='96' width='3' height='3' fill='%23ffc53d' fill-opacity='0.6'/%3E%3Crect x='105' y='96' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='108' y='96' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='102' y='99' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='102' y='102' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='120' y='20' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='32' y='120' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='30' y='122' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='32' y='122' width='2' height='2' fill='%23ffc53d' fill-opacity='0.6'/%3E%3Crect x='34' y='122' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='32' y='124' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='140' y='130' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='8' y='70' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3C/svg%3E"); background-size: 160px 160px; }
:root[data-theme="dark"][data-ground="stars"] body:not(.picker-page) { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' shape-rendering='crispEdges'%3E%3Crect x='16' y='12' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='16' y='15' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='10' y='18' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='13' y='18' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='16' y='18' width='3' height='3' fill='%23ffc53d' fill-opacity='0.55'/%3E%3Crect x='19' y='18' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='22' y='18' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='16' y='21' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='16' y='24' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='73' y='40' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='70' y='43' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='73' y='43' width='3' height='3' fill='%23ffc53d' fill-opacity='0.55'/%3E%3Crect x='76' y='43' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='73' y='46' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='44' y='80' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='102' y='90' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='102' y='93' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='96' y='96' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='99' y='96' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='102' y='96' width='3' height='3' fill='%23ffc53d' fill-opacity='0.55'/%3E%3Crect x='105' y='96' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='108' y='96' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='102' y='99' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='102' y='102' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='120' y='20' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='32' y='120' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='30' y='122' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='32' y='122' width='2' height='2' fill='%23ffc53d' fill-opacity='0.55'/%3E%3Crect x='34' y='122' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='32' y='124' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='140' y='130' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='8' y='70' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3C/svg%3E"), linear-gradient(180deg, #1a1236 0%, #130e26 45%, #0e0a1e 100%); background-size: 160px 160px, 100% 100%; }
:root[data-ground="clouds"] body:not(.picker-page) { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='170' shape-rendering='crispEdges'%3E%3Crect x='24' y='20' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='27' y='20' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='30' y='20' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='33' y='20' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='18' y='23' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='21' y='23' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='24' y='23' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='27' y='23' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='30' y='23' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='33' y='23' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='36' y='23' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='39' y='23' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='45' y='23' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='48' y='23' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='15' y='26' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='18' y='26' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='21' y='26' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='24' y='26' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='27' y='26' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='30' y='26' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='33' y='26' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='36' y='26' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='39' y='26' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='42' y='26' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='45' y='26' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='48' y='26' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='51' y='26' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='12' y='29' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='15' y='29' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='18' y='29' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='21' y='29' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='24' y='29' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='27' y='29' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='30' y='29' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='33' y='29' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='36' y='29' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='39' y='29' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='42' y='29' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='45' y='29' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='48' y='29' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='51' y='29' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='54' y='29' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='12' y='32' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='15' y='32' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='18' y='32' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='21' y='32' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='24' y='32' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='27' y='32' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='30' y='32' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='33' y='32' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='36' y='32' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='39' y='32' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='42' y='32' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='45' y='32' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='48' y='32' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='51' y='32' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='54' y='32' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='15' y='35' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='18' y='35' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='21' y='35' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='24' y='35' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='27' y='35' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='30' y='35' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='33' y='35' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='36' y='35' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='39' y='35' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='42' y='35' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='45' y='35' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='48' y='35' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='51' y='35' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='132' y='96' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='135' y='96' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='138' y='96' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='141' y='96' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='126' y='99' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='129' y='99' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='132' y='99' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='135' y='99' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='138' y='99' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='141' y='99' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='144' y='99' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='147' y='99' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='153' y='99' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='156' y='99' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='123' y='102' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='126' y='102' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='129' y='102' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='132' y='102' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='135' y='102' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='138' y='102' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='141' y='102' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='144' y='102' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='147' y='102' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='150' y='102' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='153' y='102' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='156' y='102' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='159' y='102' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='120' y='105' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='123' y='105' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='126' y='105' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='129' y='105' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='132' y='105' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='135' y='105' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='138' y='105' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='141' y='105' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='144' y='105' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='147' y='105' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='150' y='105' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='153' y='105' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='156' y='105' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='159' y='105' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='162' y='105' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='120' y='108' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='123' y='108' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='126' y='108' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='129' y='108' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='132' y='108' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='135' y='108' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='138' y='108' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='141' y='108' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='144' y='108' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='147' y='108' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='150' y='108' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='153' y='108' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='156' y='108' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='159' y='108' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='162' y='108' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='123' y='111' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='126' y='111' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='129' y='111' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='132' y='111' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='135' y='111' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='138' y='111' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='141' y='111' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='144' y='111' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='147' y='111' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='150' y='111' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='153' y='111' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='156' y='111' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='159' y='111' width='3' height='3' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='103' y='30' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='106' y='30' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='100' y='33' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='103' y='33' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='106' y='33' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3Crect x='109' y='33' width='3' height='3' fill='%23ffffff' fill-opacity='0.85'/%3E%3C/svg%3E"); background-size: 200px 170px; }
:root[data-theme="dark"][data-ground="clouds"] body:not(.picker-page) { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='170' shape-rendering='crispEdges'%3E%3Crect x='24' y='20' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='27' y='20' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='30' y='20' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='33' y='20' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='18' y='23' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='21' y='23' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='24' y='23' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='27' y='23' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='30' y='23' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='33' y='23' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='36' y='23' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='39' y='23' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='45' y='23' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='48' y='23' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='15' y='26' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='18' y='26' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='21' y='26' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='24' y='26' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='27' y='26' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='30' y='26' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='33' y='26' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='36' y='26' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='39' y='26' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='42' y='26' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='45' y='26' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='48' y='26' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='51' y='26' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='12' y='29' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='15' y='29' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='18' y='29' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='21' y='29' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='24' y='29' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='27' y='29' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='30' y='29' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='33' y='29' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='36' y='29' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='39' y='29' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='42' y='29' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='45' y='29' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='48' y='29' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='51' y='29' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='54' y='29' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='12' y='32' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='15' y='32' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='18' y='32' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='21' y='32' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='24' y='32' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='27' y='32' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='30' y='32' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='33' y='32' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='36' y='32' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='39' y='32' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='42' y='32' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='45' y='32' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='48' y='32' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='51' y='32' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='54' y='32' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='15' y='35' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='18' y='35' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='21' y='35' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='24' y='35' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='27' y='35' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='30' y='35' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='33' y='35' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='36' y='35' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='39' y='35' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='42' y='35' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='45' y='35' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='48' y='35' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='51' y='35' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='132' y='96' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='135' y='96' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='138' y='96' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='141' y='96' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='126' y='99' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='129' y='99' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='132' y='99' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='135' y='99' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='138' y='99' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='141' y='99' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='144' y='99' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='147' y='99' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='153' y='99' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='156' y='99' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='123' y='102' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='126' y='102' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='129' y='102' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='132' y='102' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='135' y='102' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='138' y='102' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='141' y='102' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='144' y='102' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='147' y='102' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='150' y='102' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='153' y='102' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='156' y='102' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='159' y='102' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='120' y='105' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='123' y='105' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='126' y='105' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='129' y='105' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='132' y='105' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='135' y='105' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='138' y='105' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='141' y='105' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='144' y='105' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='147' y='105' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='150' y='105' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='153' y='105' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='156' y='105' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='159' y='105' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='162' y='105' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='120' y='108' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='123' y='108' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='126' y='108' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='129' y='108' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='132' y='108' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='135' y='108' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='138' y='108' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='141' y='108' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='144' y='108' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='147' y='108' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='150' y='108' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='153' y='108' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='156' y='108' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='159' y='108' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='162' y='108' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='123' y='111' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='126' y='111' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='129' y='111' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='132' y='111' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='135' y='111' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='138' y='111' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='141' y='111' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='144' y='111' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='147' y='111' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='150' y='111' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='153' y='111' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='156' y='111' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='159' y='111' width='3' height='3' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='103' y='30' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='106' y='30' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='100' y='33' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='103' y='33' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='106' y='33' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3Crect x='109' y='33' width='3' height='3' fill='%238a7cd6' fill-opacity='0.22'/%3E%3C/svg%3E"), linear-gradient(180deg, #1a1236 0%, #130e26 45%, #0e0a1e 100%); background-size: 200px 170px, 100% 100%; }
:root[data-ground="waves"] body:not(.picker-page) { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='44' shape-rendering='crispEdges'%3E%3Crect x='0' y='6' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='2' y='6' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='16' y='6' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='18' y='6' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='4' y='8' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='14' y='8' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='20' y='8' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='30' y='8' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='6' y='10' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='8' y='10' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='10' y='10' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='12' y='10' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='22' y='10' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='24' y='10' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='26' y='10' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='28' y='10' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='16' y='26' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='18' y='26' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='32' y='26' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='34' y='26' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='20' y='28' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='30' y='28' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='36' y='28' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='46' y='28' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='22' y='30' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='24' y='30' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='26' y='30' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='28' y='30' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='38' y='30' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='40' y='30' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='42' y='30' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3Crect x='44' y='30' width='2' height='2' fill='%235b3ff0' fill-opacity='0.16'/%3E%3C/svg%3E"); background-size: 64px 44px; }
:root[data-theme="dark"][data-ground="waves"] body:not(.picker-page) { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='44' shape-rendering='crispEdges'%3E%3Crect x='0' y='6' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='2' y='6' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='16' y='6' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='18' y='6' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='4' y='8' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='14' y='8' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='20' y='8' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='30' y='8' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='6' y='10' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='8' y='10' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='10' y='10' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='12' y='10' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='22' y='10' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='24' y='10' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='26' y='10' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='28' y='10' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='16' y='26' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='18' y='26' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='32' y='26' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='34' y='26' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='20' y='28' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='30' y='28' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='36' y='28' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='46' y='28' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='22' y='30' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='24' y='30' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='26' y='30' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='28' y='30' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='38' y='30' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='40' y='30' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='42' y='30' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3Crect x='44' y='30' width='2' height='2' fill='%23b09bff' fill-opacity='0.28'/%3E%3C/svg%3E"), linear-gradient(180deg, #1a1236 0%, #130e26 45%, #0e0a1e 100%); background-size: 64px 44px, 100% 100%; }

/* No "Globe" written in a globe's corner: the word stays for screen readers.
   (A loading or unavailable note, alone in the panel, still shows.) */
:root .hunt-view-title:not(:only-child) { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the round and score under the bar, wider than a phone ----------
   As on a phone: the bar holds the wordmark, the title and the keys; the
   round's squares sit on the page just under it at the left, and the clock,
   time setting or score at the right. The bar keeps its own height (its keys
   may wrap on a narrow window) and the page leaves a row for them. */
@media (min-width: 641px) and (hover: hover), (min-width: 641px) and (min-height: 501px) {
  :root { --under-bar: 38px; }
  html:root:not(.party-game) #topbar { position: relative; }
  /* Only a game with a round or a score gets the row: one with only a time
     setting or a clock (Minefield, Flag Sprint) keeps it in the bar, and its
     board keeps the room (Minefield's map shrank until Brazil's tap area
     covered Uruguay). */
  html:root:not(.party-game) #topbar:has(.round-chip:not(:empty), .round-score:not(:empty), .ow-solo-side, #city-track:not([hidden])) :is(.round-chip, .solo-time-setting, #solo-clock, .hunt-clock, .ow-solo-side, .round-score, #city-track) {
    position: absolute; top: calc(100% + 10px); margin: 0; color: var(--text); z-index: 2;
  }
  /* --row-left / --row-right: the game's column (pixel-fx.js), else the bar's edges. */
  html:root:not(.party-game) #topbar:has(.round-chip:not(:empty), .round-score:not(:empty), .ow-solo-side, #city-track:not([hidden])) :is(.round-chip, #city-track) { left: var(--row-left, 14px); }
  html:root:not(.party-game) #topbar:has(.round-chip:not(:empty), .round-score:not(:empty), .ow-solo-side, #city-track:not([hidden])) :is(.solo-time-setting, #solo-clock, .hunt-clock, .ow-solo-side, .round-score) { right: var(--row-right, 16px); }
  html:root:not(.party-game) #topbar:has(.round-chip:not(:empty), .round-score:not(:empty), .ow-solo-side, #city-track:not([hidden])) {
    margin-bottom: calc(6px + var(--under-bar));
  }
  html:root:not(.party-game) body #topbar :is(.round-score, .ow-total) { font: 700 26px/1 var(--pixel); color: var(--text); }
  /* A game with both (Border Draw): the score keeps the corner and the time setting sits left of it. */
  html:root:not(.party-game) #topbar:has(.round-score:not(:empty)) .solo-time-setting { right: calc(var(--row-right, 16px) + 140px) !important; }
  /* The squares say which round it is; the words stay for screen readers. */
  :root:not(.party-game) #topbar .round-chip.has-steps .step-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* The score's gain (pixel-fx.js ScoreTicker): the figure counts up over the
   element's own (final) text, and "+70" shows under it and fades. */
.score-rising { position: relative; color: transparent !important; }
html body .score-rising[data-shown][data-gain]::before { content: attr(data-shown); position: absolute; right: 0; top: 0; width: auto; height: auto; background: none; border-radius: 0; opacity: 1; display: block; color: var(--text); white-space: nowrap; animation: score-pop .45s steps(3, jump-none) .45s; }
html body .score-rising[data-shown][data-gain]::after {
  content: attr(data-gain); position: absolute; right: 0; top: 100%; z-index: 5; pointer-events: none;
  font: 700 18px/1 var(--pixel, monospace); color: #1f7a3e; white-space: nowrap;
  text-shadow: 1px 1px 0 var(--panel, #fff);
  animation: score-gain 1.6s steps(8, jump-none) forwards;
}
html[data-theme="dark"] body .score-rising[data-shown][data-gain]::after { color: #7ed29a; }
@keyframes score-gain { 0% { opacity: 0; translate: 0 6px; } 15% { opacity: 1; translate: 0 0; } 75% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -3px; } }
@keyframes score-pop { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }

/* A phone's keyboard: iOS keeps fixed bars on screen and lifts them onto the
   keyboard, where the tab bar covered the box being typed in and jumped as the
   keyboard rose. While a text box has the focus on a touch screen it steps aside. */
@media (pointer: coarse) {
  body.has-shell:has(:is(input:not([type=checkbox], [type=radio], [type=range], [type=button], [type=submit], [type=reset], [type=color], [type=file]), textarea, [contenteditable="true"]):focus) .shell-rail { display: none; }
}

/* Pulling past the top or bottom of a page: no rubber band. It stretched the
   page and showed its pale base as bars above the header and under the tab bar. */
html, body { overscroll-behavior-y: none; }