/* The "Online Worms" look (onlineworms theme: ?theme=online, or the sidebar's switch; kept in the
   browser): the site on the logo's own sky, dressed as the old Online Worms lobby. The sky
   (league/online/sky.jpg: the banner with its logo painted out) is the page, fixed behind
   everything; the logo (league/online/logo.png) heads the sidebar. Content sits on the lobby's
   panels: deep blue, a light cyan bevelled rim inside a navy outline, a lit top edge, a mint
   rivet in each corner, and a lighter title bar. White type, headings with the lobby's chunky navy
   outline; its yellow for figures and the data accent, its green (PLAYING) for the good, its
   orange-red (FULL) for the bad. Buttons are the lobby's (SINGLE, CREATE): dark blue, cyan rim,
   outlined white label; Find opponent keeps the logo's orange lettering. Fredoka for headings and
   buttons, Nunito for text. */
:root[data-theme="online"] {
  --ground: #0d3f8c; --surface: #1b5cb8; --raised: #2a6fd0; --active: #3a82e0;
  --border: #0b2c6b; --rule: rgba(255, 255, 255, 0.16); --control: #7cc4ff;
  --text: #ffffff; --muted: #d2e8ff; --faint: #b8dbfa;
  --accent: #ffd23a;
  --gold: #ffd23a;
  --primary: #2f74d8; --primary-ink: #ffffff;
  --positive: #6dff4a; --negative: #ff8a6a; --warning: #ffd23a;
  --pill-positive-bg: rgba(109, 255, 74, 0.16); --pill-positive-ink: #8dff70;
  --pill-negative-bg: rgba(255, 110, 80, 0.18); --pill-negative-ink: #ffa08a;
  --pill-warning-bg: rgba(255, 210, 58, 0.18); --pill-warning-ink: #ffe07a;
  --pill-neutral-bg: rgba(255, 255, 255, 0.14); --pill-neutral-ink: #ffffff;
  --chart-1: var(--accent); --chart-muted: #4f8fdc; --grid: rgba(255, 255, 255, 0.15); --axis-ink: var(--faint);
  --chart-span: 0.16;
  --navy: #0b2c6b; --rim: #8fd6ff; --bar: #3f86df; --rivet: #8ef0b8;
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --radius-card: 14px; --radius-control: 10px;
  --sidebar-width: 236px;
  /* the lobby's chunky label: white with a navy outline */
  --outline: 0 2px 0 var(--navy), 2px 0 0 var(--navy), -2px 0 0 var(--navy), 0 -1px 0 var(--navy);
  color-scheme: dark;
}

/* ---------- the sky ---------- */
[data-theme="online"] body { background: #2f9bf0 url("online/sky.jpg") center top / cover fixed; }
[data-theme="online"] .logo-classic { display: none; }
[data-theme="online"] .logo-online { display: block; }
.logo-online { display: none; }

/* ---------- the lobby's panel ---------- */
[data-theme="online"] .panel, [data-theme="online"] .kpis, [data-theme="online"] a.account, [data-theme="online"] .sidebar {
  border: 2px solid var(--rim); border-radius: var(--radius-card); background-color: var(--surface);
  box-shadow: 0 0 0 3px var(--navy), inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 20, 70, 0.35); } /* taste-skill-ignore: the lobby's bevelled panel (the user's reference) */
[data-theme="online"] .panel, [data-theme="online"] .kpis {
  background-image: radial-gradient(circle at 9px 9px, var(--rivet) 0 3px, var(--navy) 3px 4.5px, transparent 5px), /* taste-skill-ignore: the lobby reference (bevels, rivets, outlined labels) */
    radial-gradient(circle at calc(100% - 9px) 9px, var(--rivet) 0 3px, var(--navy) 3px 4.5px, transparent 5px), /* taste-skill-ignore: the lobby reference (bevels, rivets, outlined labels) */
    radial-gradient(circle at 9px calc(100% - 9px), var(--rivet) 0 3px, var(--navy) 3px 4.5px, transparent 5px), /* taste-skill-ignore: the lobby reference (bevels, rivets, outlined labels) */
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--rivet) 0 3px, var(--navy) 3px 4.5px, transparent 5px); } /* taste-skill-ignore: the lobby panels' corner rivets */
/* its title bar: the lighter strip the lobby's rooms are named on */
[data-theme="online"] .panel > header { margin: -6px 4px 16px; padding: 4px 14px; border-radius: 999px; background: var(--bar);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 0 0 2px var(--navy); } /* taste-skill-ignore: the lobby's title bar */
[data-theme="online"] .panel h2 { font-family: var(--display); font-weight: 600; font-size: 17px; text-shadow: var(--outline); } /* taste-skill-ignore: the lobby's label */
[data-theme="online"] .kpi-value { font-family: var(--display); font-weight: 600; color: var(--accent); text-shadow: var(--outline); } /* taste-skill-ignore: the lobby's figures */
[data-theme="online"] .kpi + .kpi { border-left: 1px solid var(--rule); }
[data-theme="online"] th { color: var(--muted); border-bottom-color: var(--rule); }

/* ---------- the sidebar: a lobby panel, the logo on top ---------- */
[data-theme="online"] .sidebar { margin: 12px 0 12px 12px; height: calc(100svh - 24px); top: 12px; padding: 16px 12px; }
[data-theme="online"] .brand { padding: 0; margin: 0 0 16px; }
[data-theme="online"] .brand img { width: 100%; }
[data-theme="online"] .nav-item { height: 40px; padding: 0 14px; border-radius: var(--radius-control); color: #ffffff;
  font-family: var(--display); font-size: 17px; font-weight: 600; text-shadow: var(--outline); } /* taste-skill-ignore: the lobby's label */
[data-theme="online"] .nav-item:hover { background: var(--raised); color: #ffffff; }
[data-theme="online"] .nav-item[aria-current="page"] { background: var(--bar); color: #ffffff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 0 0 2px var(--navy); } /* taste-skill-ignore: the lobby's lit bar */
[data-theme="online"] .nav-item.theme-toggle { height: 26px; font-family: var(--font); font-size: 12px; font-weight: 400; text-shadow: none; color: var(--faint); } /* taste-skill-ignore: the lobby reference (bevels, rivets, outlined labels) */

/* ---------- the top bar: on the sky ---------- */
[data-theme="online"] .topbar { border-bottom: 0; }
[data-theme="online"] .season { border-left: 0; color: #ffffff; }
[data-theme="online"] .season b { font-family: var(--display); font-weight: 600; text-shadow: var(--outline); } /* taste-skill-ignore: the lobby's label on the sky */
[data-theme="online"] .season span { color: #ffffff; }
[data-theme="online"] a.account { padding: 4px 14px 4px 4px; }

/* ---------- fields: the lobby's chat line, dark blue in a cyan rim ---------- */
[data-theme="online"] .search input, [data-theme="online"] .input, [data-theme="online"] select.input {
  border: 2px solid var(--rim); border-radius: var(--radius-control); background: var(--ground); color: #ffffff; }
[data-theme="online"] .search svg { stroke: var(--faint); }

/* ---------- headings on the sky ---------- */
[data-theme="online"] .title-row h1, [data-theme="online"] .lg-title h1, [data-theme="online"] .gacha-title { font-family: var(--display); font-size: 32px; font-weight: 700; color: #ffffff;
  text-shadow: 0 3px 0 var(--navy), 3px 0 0 var(--navy), -3px 0 0 var(--navy), 0 -2px 0 var(--navy); } /* taste-skill-ignore: the lobby's chunky label on the sky */
[data-theme="online"] .title-row .sub { color: #ffffff; text-shadow: 0 1px 0 var(--navy); } /* taste-skill-ignore: small type on the sky */

/* the tabs: the lobby's folder tabs, the open one lit */
[data-theme="online"] .tabs { gap: 6px; border-bottom: 3px solid var(--navy); }
[data-theme="online"] .tabs a { padding: 8px 18px; border: 2px solid var(--rim); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--surface);
  font-family: var(--display); font-weight: 600; color: var(--muted); }
[data-theme="online"] .tabs a[aria-selected="true"] { background: var(--bar); color: #ffffff; text-shadow: var(--outline); } /* taste-skill-ignore: the lobby's label */
[data-theme="online"] .tabs a[aria-selected="true"]::after { content: none; }

/* ---------- buttons: the lobby's (dark blue, cyan rim, outlined white label) ---------- */
[data-theme="online"] .btn { height: 40px; padding: 0 18px; border: 2px solid var(--rim); border-radius: var(--radius-control); background: var(--surface); color: #ffffff;
  font-family: var(--display); font-size: 16px; font-weight: 600; text-shadow: var(--outline); /* taste-skill-ignore: the lobby reference (bevels, rivets, outlined labels) */
  box-shadow: 0 0 0 2px var(--navy), inset 0 2px 0 rgba(255, 255, 255, 0.3); } /* taste-skill-ignore: the lobby's buttons (SINGLE, CREATE) */
[data-theme="online"] .btn:hover { background: var(--raised); }
[data-theme="online"] .btn.primary { background: var(--primary); }
[data-theme="online"] .btn.primary:hover { background: #3a82e0; }
[data-theme="online"] .btn:disabled, [data-theme="online"] .btn.primary:disabled { background: #33568c; color: #9fb8d8; text-shadow: none; } /* taste-skill-ignore: the lobby reference (bevels, rivets, outlined labels) */
[data-theme="online"] .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; } /* taste-skill-ignore: the lobby reference (bevels, rivets, outlined labels) */
/* Find opponent: the WORMS lettering, orange to gold with the brown foot */
[data-theme="online"] .play-btn { border-radius: var(--radius-control); font-family: var(--display); font-size: 24px; font-weight: 700; color: #ffffff;
  background: linear-gradient(#ffc04a, #f8891f 50%, #e8590f); /* taste-skill-ignore: the logo's lettering */
  text-shadow: 0 2px 0 #8a3208; /* taste-skill-ignore: the logo's lettering */
  box-shadow: 0 0 0 3px var(--navy), inset 0 -5px 0 #a8400c, inset 0 2px 0 rgba(255, 255, 255, 0.55); } /* taste-skill-ignore: the button with depth the user asked for */
[data-theme="online"] .play-btn:active:not(:disabled) { box-shadow: 0 0 0 3px var(--navy), inset 0 -1px 0 #a8400c, inset 0 2px 0 rgba(255, 255, 255, 0.45); } /* taste-skill-ignore: its pressed state */
[data-theme="online"] .play-side .ai-btn { min-width: 180px; }
[data-theme="online"] .play-side #note { color: #ffffff; text-shadow: 0 1px 0 var(--navy); } /* taste-skill-ignore: small type on the sky */

/* ---------- the gacha's pulls: the lobby's buttons, the ten in its yellow ---------- */
[data-theme="online"] .gacha-btn { border: 2px solid var(--rim); border-radius: var(--radius-card); background: var(--surface); color: #ffffff; font-family: var(--display);
  box-shadow: 0 0 0 3px var(--navy), inset 0 2px 0 rgba(255, 255, 255, 0.3); } /* taste-skill-ignore: the lobby's buttons */
[data-theme="online"] .gacha-btn b { text-shadow: var(--outline); } /* taste-skill-ignore: the lobby's label */
[data-theme="online"] .gacha-btn.ten { background: var(--accent); color: var(--navy); }
[data-theme="online"] .gacha-btn.ten b { text-shadow: none; } /* taste-skill-ignore: the lobby reference (bevels, rivets, outlined labels) */
[data-theme="online"] .gacha-odds b, [data-theme="online"] .gacha-coins { color: #ffffff; text-shadow: var(--outline); } /* taste-skill-ignore: figures on the sky */

/* ---------- the phone: the menu sheet as one lobby panel ---------- */
@media (max-width: 860px) {
  [data-theme="online"] .sidebar { margin: 0; top: 0; height: 100%; border-radius: 0; }
  [data-theme="online"] .brand img { width: 220px; }
}

/* ---------- the ranks: this theme's own pictures (ranks/online), twice the classic sizes ---------- */
[data-theme="online"] td .rank-cell img, [data-theme="online"] .result-rank img, [data-theme="online"] #gm-table .who img,
[data-theme="online"] #acct-rank img, [data-theme="online"] .rung img { width: 96px; height: 34px; }
[data-theme="online"] .pf-name img, [data-theme="online"] .vs-rank img { width: 288px; height: 102px; }
[data-theme="online"] .play .rank-pick img { width: 144px; height: 50px; }
[data-theme="online"] #chat-log b img { height: 56px; }

/* Play vs Blas: its modes as the lobby's rooms */
[data-theme="online"] .blas-mode { border: 2px solid var(--rim); background-color: var(--surface);
  box-shadow: 0 0 0 3px var(--navy), inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 20, 70, 0.35); } /* taste-skill-ignore: the lobby's bevelled panel */
[data-theme="online"] .blas-mode b { font-family: var(--display); font-size: 26px; font-weight: 700; text-shadow: var(--outline); } /* taste-skill-ignore: the lobby's label */
[data-theme="online"] .blas-mode:hover:not(:disabled) { background-color: var(--raised); }
[data-theme="online"] .blas-mode[aria-pressed="true"] { background-color: var(--bar); }
[data-theme="online"] .blas-mode[aria-pressed="true"]::before { background: var(--bar); }
[data-theme="online"] .blas-map { border: 2px solid var(--rim); background-color: var(--surface);
  box-shadow: 0 0 0 3px var(--navy), inset 0 2px 0 rgba(255, 255, 255, 0.35); } /* taste-skill-ignore: the lobby's bevelled panel */
[data-theme="online"] .blas-map b { font-family: var(--display); font-size: 17px; text-shadow: var(--outline); } /* taste-skill-ignore: the lobby's label */
[data-theme="online"] .blas-note { color: #ffffff; text-shadow: 0 1px 0 var(--navy); } /* taste-skill-ignore: small type on the sky */