/* Colours shared by the player page and the admin page, and the open / close animation of pop-ups.
   <html data-theme="dark | light | calm"> picks a theme; without it the page follows the device's light / dark setting.
   Every text colour clears 4.5:1 on every surface of its theme. Status colours always come with an icon and words,
   so they never carry meaning by colour alone (colour-blind friendly). "Calm" is warm and low-glare, with muted
   colours, for eyes that tire easily or are sensitive to strong colours. Chart colours are validated for colour blindness. */
:root {
  color-scheme: dark;
  --bg:#12151f; --card:#1b2030; --card2:#242a3d; --line:#30374d;
  --text:#e6e8ef; --muted:#a3a9bd; --accent:#4a6cc9; --accent-ink:#8fa8ec; --on-accent:#fff;
  --good:#3fb59a; --warn:#d9a441; --danger:#e07b53; --gold:#d8b45a;
  --good-bg:rgba(63,181,154,.14); --warn-bg:rgba(217,164,65,.13); --danger-bg:rgba(224,123,83,.13); --accent-bg:rgba(74,108,201,.2);
  --hover:rgba(255,255,255,.05); --backdrop:rgba(6,8,14,.62); --shadow:0 8px 28px rgba(0,0,0,.3);
  --icon-a:#4a6cc9; --icon-b:#7a6bc4;
  --series-1:#3987e5; --series-2:#d95926; --grid:#272d40; --axis:#3a4258;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg:#f3f5f9; --card:#ffffff; --card2:#eef1f6; --line:#d9dde7;
    --text:#1d2130; --muted:#555c70; --accent:#3d5fc4; --accent-ink:#3554b5; --on-accent:#fff;
    --good:#1c7968; --warn:#8a5f00; --danger:#b5492a; --gold:#846900;
    --good-bg:rgba(28,121,104,.1); --warn-bg:rgba(138,95,0,.09); --danger-bg:rgba(181,73,42,.08); --accent-bg:rgba(61,95,196,.1);
    --hover:rgba(20,30,60,.04); --backdrop:rgba(20,26,40,.38); --shadow:0 6px 20px rgba(20,30,60,.08);
    --icon-a:#4a6cc9; --icon-b:#7a6bc4;
    --series-1:#2a78d6; --series-2:#eb6834; --grid:#e6e9f0; --axis:#c5cad6;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#f3f5f9; --card:#ffffff; --card2:#eef1f6; --line:#d9dde7;
  --text:#1d2130; --muted:#555c70; --accent:#3d5fc4; --accent-ink:#3554b5; --on-accent:#fff;
  --good:#1c7968; --warn:#8a5f00; --danger:#b5492a; --gold:#846900;
  --good-bg:rgba(28,121,104,.1); --warn-bg:rgba(138,95,0,.09); --danger-bg:rgba(181,73,42,.08); --accent-bg:rgba(61,95,196,.1);
  --hover:rgba(20,30,60,.04); --backdrop:rgba(20,26,40,.38); --shadow:0 6px 20px rgba(20,30,60,.08);
  --icon-a:#4a6cc9; --icon-b:#7a6bc4;
  --series-1:#2a78d6; --series-2:#eb6834; --grid:#e6e9f0; --axis:#c5cad6;
}
:root[data-theme="calm"] {
  color-scheme: light;
  --bg:#f2ede3; --card:#faf6ee; --card2:#efe8da; --line:#ddd3c1;
  --text:#3a352d; --muted:#6b6252; --accent:#5c6f8a; --accent-ink:#4e6180; --on-accent:#fff;
  --good:#466f64; --warn:#7f6329; --danger:#94574a; --gold:#7a6530;
  --good-bg:rgba(70,111,100,.1); --warn-bg:rgba(127,99,41,.09); --danger-bg:rgba(148,87,74,.08); --accent-bg:rgba(92,111,138,.12);
  --hover:rgba(80,60,30,.04); --backdrop:rgba(58,53,45,.3); --shadow:0 6px 20px rgba(80,60,30,.07);
  --icon-a:#7d8aa3; --icon-b:#9a8fa8;
  --series-1:#2a78d6; --series-2:#d95926; --grid:#e8dfcf; --axis:#cfc3ad;
}

/* Pop-ups fade and grow in, and fade out (theme.js adds .closing before closing them).
   Phones show the big sheets sliding up instead. Nothing moves when the device asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: ui-pop-in .22s cubic-bezier(.2, .8, .25, 1); }
  dialog[open]::backdrop { animation: ui-fade-in .22s ease-out; }
  dialog.closing { animation: ui-pop-out .16s ease-in forwards; }
  dialog.closing::backdrop { animation: ui-fade-out .16s ease-in forwards; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 699px) {
  dialog.sheet-dlg[open] { animation: ui-sheet-in .28s cubic-bezier(.2, .8, .25, 1); }
  dialog.sheet-dlg.closing { animation: ui-sheet-out .2s ease-in forwards; }
}
@keyframes ui-pop-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes ui-pop-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes ui-sheet-in { from { opacity: 0; transform: translateY(40px); } }
@keyframes ui-sheet-out { to { opacity: 0; transform: translateY(40px); } }
@keyframes ui-fade-in { from { opacity: 0; } }
@keyframes ui-fade-out { to { opacity: 0; } }
dialog::backdrop { background: var(--backdrop); }

/* The theme picker (built by theme.js) */
.ui-theme { width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; box-sizing: border-box; margin: auto;
            border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--card); color: var(--text);
            font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: var(--shadow); }
.ui-theme-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-theme h2 { margin: 0; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--text); }
.ui-theme .ui-x { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--card2); color: var(--text); font: inherit; cursor: pointer; }
.ui-theme .ui-sub { margin: 4px 0 14px; color: var(--muted); font-size: 13px; }
.ui-opts { display: grid; gap: 8px; }
.ui-opt { display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 10px 12px;
          border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.ui-opt:hover { background: var(--hover); }
.ui-opt:has(input:checked) { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); background: var(--accent-bg); }
.ui-opt.plain { grid-template-columns: minmax(0, 1fr) 20px; padding: 9px 12px; }
.ui-opt b { display: block; font-size: 15px; }
.ui-opt small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.ui-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.ui-opt input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.ui-sw { width: 56px; height: 40px; border-radius: 9px; overflow: hidden; position: relative; border: 1px solid rgba(128, 128, 128, .35); }
.ui-sw i { position: absolute; display: block; }
.ui-theme .ui-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.ui-theme .ui-done { display: block; width: 100%; margin-top: 14px; min-height: 44px; border: 0; border-radius: 10px; font: inherit;
                     font-weight: 600; cursor: pointer; background: var(--accent); color: var(--on-accent); }