/* Rocolex skins.
   Each skin is a set of --sk-* values on html[data-skin="..."]. The rules further down turn those values
   into the look of the page, the Bootstrap parts and the game board, so a new skin only needs a new block here
   (plus an entry in Utils/Skins.cs). Keep the ids in step with Skins.cs. */

/* ---------- shared defaults ---------- */
html {
  --sk-bg: #222; --sk-bg-img: none; --sk-bg-size: auto; --sk-bg-attach: scroll;
  --sk-ink: #fff; --sk-muted: #bbb; --sk-line: rgba(255,255,255,.2); --sk-link: #8cf;
  --sk-panel: rgba(255,255,255,.1); --sk-panel-ink: var(--sk-ink); --sk-input: rgba(255,255,255,.1);
  --sk-p1: #4fd; --sk-p2: #f6a;
  --sk-tile: #333; --sk-tile-ink: #fff; --sk-neg: #f99; --sk-tile-border: 1px solid transparent; --sk-tile-shadow: none;
  --sk-live: #ff0; --sk-live-ink: #000; --sk-glow: none; --sk-token: #f0f; --sk-token-ink: #fff; --sk-btn-border: transparent;
  --sk-empty-border: 1px dashed rgba(255,255,255,.2); --sk-r: 8px;
  --sk-font: system-ui, -apple-system, "Segoe UI", sans-serif; --sk-num-font: var(--sk-font); --sk-num-scale: 1; --sk-scale: 1;
  /* meaning colours stay the same in every skin */
  --sk-ok: #2fb86b; --sk-ok-ink: #04140a; --sk-warn: #f0a500; --sk-warn-ink: #1a1200;
  --sk-bad: #d6333a; --sk-bad-ink: #fff; --sk-info: #3b9eff; --sk-info-ink: #001428;
}

html[data-skin="neon"] {
  --sk-bg: #0d0221;
  --sk-bg-img: radial-gradient(700px 380px at 90% -10%, #3a0ca3 0%, transparent 60%), radial-gradient(600px 360px at 0% 100%, #7209b7 0%, transparent 55%);
  --sk-bg-attach: fixed; --sk-ink: #eaf2ff; --sk-muted: #9fa8da; --sk-line: rgba(255,255,255,.18); --sk-link: #00f0ff;
  --sk-panel: rgba(255,255,255,.08); --sk-input: rgba(255,255,255,.1); --sk-p1: #00f0ff; --sk-p2: #ff2e97;
  --sk-tile: #1c1147; --sk-tile-ink: #eaf2ff; --sk-neg: #ff86b3; --sk-tile-border: 1px solid rgba(255,255,255,.12);
  --sk-live: #00f0ff; --sk-live-ink: #021018; --sk-glow: 0 0 16px rgba(0,240,255,.65); --sk-token: #ff2e97; --sk-token-ink: #fff; --sk-r: 8px;
  --sk-font: "Chakra Petch", system-ui, sans-serif;
}
html[data-skin="mat"] {
  --sk-bg: #1d7a58;
  --sk-bg-img: linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px); --sk-bg-size: 26px 26px;
  --sk-ink: #ffffff; --sk-muted: #e6f8ee; --sk-line: rgba(0,0,0,.22); --sk-link: #fff0a8;
  --sk-panel: #f8f2e2; --sk-panel-ink: #26323a; --sk-input: #fffdf6; --sk-p1: #b87900; --sk-p2: #d6333a;
  --sk-tile: #f8f4e6; --sk-tile-ink: #1f2c36; --sk-neg: #b3261e; --sk-tile-shadow: 0 2px 0 rgba(0,0,0,.28), 1px 4px 7px rgba(0,0,0,.25); --sk-r: 3px;
  --sk-live: #ffd84a; --sk-live-ink: #2b2200; --sk-glow: 0 2px 0 rgba(0,0,0,.28), 0 0 0 3px #fff; --sk-token: #e63946; --sk-token-ink: #fff;
  --sk-empty-border: 1px dashed rgba(255,255,255,.35);
  --sk-font: "Patrick Hand", system-ui, sans-serif; --sk-num-scale: 1.3; --sk-scale: 1.15;
}
html[data-skin="blueprint"] {
  --sk-bg: #0a3a8c;
  --sk-bg-img: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); --sk-bg-size: 22px 22px;
  --sk-ink: #e6f0ff; --sk-muted: #a9c6ff; --sk-line: rgba(255,255,255,.35); --sk-link: #ffd23f;
  --sk-panel: rgba(255,255,255,.1); --sk-input: rgba(255,255,255,.12); --sk-p1: #ffffff; --sk-p2: #ffd23f;
  --sk-tile: transparent; --sk-tile-ink: #e6f0ff; --sk-neg: #ffb3a7; --sk-tile-border: 1.5px solid #cfe1ff;
  --sk-live: #ffffff; --sk-live-ink: #0a3a8c; --sk-glow: 0 0 0 3px rgba(255,255,255,.35); --sk-token: #ffd23f; --sk-token-ink: #0a3a8c; --sk-r: 0px;
  --sk-empty-border: 1px dashed rgba(255,255,255,.3);
  --sk-font: "Space Mono", ui-monospace, monospace; --sk-scale: .95;
}
html[data-skin="candy"] {
  --sk-bg: #fff0f7; --sk-ink: #3b1d4a; --sk-muted: #8a5a9e; --sk-line: rgba(59,29,74,.2); --sk-link: #c4146e;
  --sk-panel: #ffffff; --sk-input: #fff7fb; --sk-p1: #f23c8f; --sk-p2: #5b8cff;
  --sk-tile: #ffe0ef; --sk-tile-ink: #3b1d4a; --sk-neg: #b0003a; --sk-tile-shadow: 0 3px 0 rgba(59,29,74,.15); --sk-r: 18px;
  --sk-live: #ffe14d; --sk-live-ink: #3b1d4a; --sk-glow: 0 0 0 3px #3b1d4a; --sk-token: #3b1d4a; --sk-token-ink: #ffffff;
  --sk-empty-border: 2px dashed rgba(59,29,74,.2); --sk-font: "Fredoka", system-ui, sans-serif;
}
html[data-skin="chalk"] {
  --sk-bg: #22382f; --sk-bg-img: radial-gradient(circle at 30% 15%, rgba(255,255,255,.08), transparent 55%);
  --sk-ink: #f3f1e7; --sk-muted: #bccbc0; --sk-line: rgba(243,241,231,.35); --sk-link: #ffe66d;
  --sk-panel: rgba(255,255,255,.07); --sk-input: rgba(255,255,255,.1); --sk-p1: #ffe66d; --sk-p2: #8de0ff;
  --sk-tile: transparent; --sk-tile-ink: #f3f1e7; --sk-neg: #ffa3a3; --sk-tile-border: 2px solid rgba(243,241,231,.55); --sk-r: 14px 4px 13px 5px / 5px 13px 4px 14px;
  --sk-live: #ffe66d; --sk-live-ink: #22382f; --sk-token: #8de0ff; --sk-token-ink: #22382f; --sk-empty-border: 2px dotted rgba(243,241,231,.25);
  --sk-font: "Caveat", cursive; --sk-num-scale: 1.45; --sk-scale: 1.3;
}
html[data-skin="sunset"] {
  --sk-bg: #2b1055;
  --sk-bg-img: radial-gradient(260px 260px at 50% 82%, #ffd166 0%, #ff8a3d 45%, transparent 46%), linear-gradient(180deg, #2b1055 0%, #7b2ff7 45%, #ff6a3d 100%);
  --sk-bg-attach: fixed; --sk-ink: #fff4e6; --sk-muted: #ffd7b8; --sk-line: rgba(255,255,255,.28); --sk-link: #ffd166;
  --sk-panel: rgba(30,10,60,.55); --sk-input: rgba(255,255,255,.14); --sk-p1: #ffd166; --sk-p2: #4cc9f0;
  --sk-tile: rgba(30,10,60,.55); --sk-tile-ink: #ffffff; --sk-neg: #ffc2d1; --sk-tile-border: 1px solid rgba(255,255,255,.28); --sk-r: 10px;
  --sk-live: #ffd166; --sk-live-ink: #2b1055; --sk-glow: 0 0 18px rgba(255,209,102,.8); --sk-token: #ff3d81; --sk-token-ink: #fff;
  --sk-font: "Bungee", system-ui, sans-serif; --sk-num-font: "Chakra Petch", system-ui, sans-serif; --sk-scale: .85;
}
html[data-skin="felt"] {
  --sk-bg: #0b5d3b; --sk-bg-img: radial-gradient(900px 520px at 50% 0%, #138a57 0%, #0b5d3b 55%, #063a25 100%); --sk-bg-attach: fixed;
  --sk-ink: #fdf6e3; --sk-muted: #bfe0cd; --sk-line: rgba(231,193,90,.4); --sk-link: #e7c15a;
  --sk-panel: rgba(0,0,0,.32); --sk-input: rgba(255,255,255,.1); --sk-p1: #e7c15a; --sk-p2: #f0f0f0;
  --sk-tile: #f7efd9; --sk-tile-ink: #2a2418; --sk-neg: #a4161a; --sk-tile-border: 2px solid #c9a53f; --sk-tile-shadow: 0 2px 4px rgba(0,0,0,.45); --sk-r: 50%;
  --sk-live: #e7c15a; --sk-live-ink: #2a1f00; --sk-glow: 0 0 0 3px #fff, 0 0 14px rgba(231,193,90,.8); --sk-token: #111; --sk-token-ink: #e7c15a;
  --sk-empty-border: 1px dashed rgba(255,255,255,.25);
  --sk-font: "Playfair Display", Georgia, serif;
}
html[data-skin="ocean"] {
  --sk-bg: #03045e; --sk-bg-img: linear-gradient(180deg, #0077b6 0%, #023e8a 40%, #03045e 100%); --sk-bg-attach: fixed;
  --sk-ink: #e8fbff; --sk-muted: #9ad9ea; --sk-line: rgba(255,255,255,.22); --sk-link: #90e0ef;
  --sk-panel: rgba(255,255,255,.12); --sk-input: rgba(255,255,255,.14); --sk-p1: #90e0ef; --sk-p2: #ffb703;
  --sk-tile: #0b4f8a; --sk-tile-ink: #e8fbff; --sk-neg: #ffb4a2; --sk-tile-border: 1px solid rgba(255,255,255,.18); --sk-r: 14px;
  --sk-live: #90e0ef; --sk-live-ink: #03045e; --sk-glow: 0 0 16px rgba(144,224,239,.7); --sk-token: #ffb703; --sk-token-ink: #03045e;
  --sk-font: "Fredoka", system-ui, sans-serif;
}
html[data-skin="heat"] {
  --sk-bg: #10151c; --sk-ink: #e9eef5; --sk-muted: #8fa0b3; --sk-line: rgba(255,255,255,.16); --sk-link: #4dd4ac;
  --sk-panel: #1a222d; --sk-input: #232d3a; --sk-p1: #4dd4ac; --sk-p2: #ffb454;
  --sk-tile: #223; --sk-tile-ink: #ffffff; --sk-neg: #ffffff; --sk-r: 8px; --sk-live: #ffffff; --sk-live-ink: #10151c; --sk-glow: 0 0 0 3px #fff;
  --sk-token: #ffffff; --sk-token-ink: #10151c; --sk-font: "Space Mono", ui-monospace, monospace; --sk-scale: .95;
}
html[data-skin="day"] {
  --sk-bg: #ffffff; --sk-ink: #000000; --sk-muted: #333; --sk-line: #000; --sk-link: #0047cc;
  --sk-panel: #ffffff; --sk-input: #ffffff; --sk-p1: #0057ff; --sk-p2: #e4002b; --sk-btn-border: #000;
  --sk-tile: #ffffff; --sk-tile-ink: #000; --sk-neg: #c00000; --sk-tile-border: 2px solid #000; --sk-r: 6px;
  --sk-live: #ffea00; --sk-live-ink: #000; --sk-glow: 0 0 0 3px #000; --sk-token: #000; --sk-token-ink: #ffea00; --sk-empty-border: 2px dashed #888;
}

/* ---------- page ---------- */
html { background-color: var(--sk-bg); }
body {
  background-color: var(--sk-bg); background-image: var(--sk-bg-img); background-size: var(--sk-bg-size); background-attachment: var(--sk-bg-attach);
  color: var(--sk-ink); font-family: var(--sk-font); font-size: calc(1rem * var(--sk-scale));
  --bs-body-bg: var(--sk-bg); --bs-body-color: var(--sk-ink); --bs-secondary-color: var(--sk-muted); --bs-border-color: var(--sk-line);
  --bs-link-color: var(--sk-link); --bs-link-hover-color: var(--sk-link);
}
a { color: var(--sk-link); }
.footer, .footer a { color: var(--sk-muted); }
.jumbotron { padding: 1.5rem 0; }
hr { border-color: currentColor; }
.text-muted, .form-text { color: var(--bs-secondary-color) !important; }

/* panels: anything that sits on a surface uses the panel colours */
.card, .alert, .modal-content, .list-group-item, .dropdown-menu {
  --bs-body-color: var(--sk-panel-ink); --bs-secondary-color: color-mix(in srgb, var(--sk-panel-ink) 68%, transparent);
  --bs-border-color: var(--sk-line); --bs-link-color: inherit;
  color: var(--sk-panel-ink);
}
.card, .modal-content, .list-group-item, .dropdown-menu { background-color: var(--sk-panel); border: 1px solid var(--sk-line); }
.card, .modal-content, .alert { border-radius: calc(var(--sk-r) + 6px); }
.bg-light, .card.bg-light { background-color: var(--sk-panel) !important; color: var(--sk-panel-ink); }
.card-header, .modal-header, .modal-footer { background: color-mix(in srgb, var(--sk-panel-ink) 8%, transparent); border-color: var(--sk-line); }
.card a:not(.btn), .alert a:not(.btn), .modal-content a:not(.btn) { color: inherit; text-decoration: underline; }
.modal-backdrop { --bs-backdrop-bg: #000; }

/* alerts: one tinted panel per meaning */
.alert { border: 1px solid var(--sk-line); }
.alert-primary   { --tint: var(--sk-p1); }
.alert-secondary { --tint: var(--sk-muted); }
.alert-success   { --tint: var(--sk-ok); }
.alert-warning   { --tint: var(--sk-warn); }
.alert-danger    { --tint: var(--sk-bad); }
.alert-info      { --tint: var(--sk-info); }
.alert[class*="alert-"] {
  background-color: color-mix(in srgb, var(--tint, var(--sk-muted)) 22%, var(--sk-panel));
  border-color: color-mix(in srgb, var(--tint, var(--sk-muted)) 65%, transparent);
  color: var(--sk-panel-ink);
}
.alert-heading { color: inherit; }

/* buttons */
.btn { border-radius: calc(var(--sk-r) + 4px); font-weight: 700; border-width: 2px; }
.btn:focus-visible, a:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 3px solid var(--sk-p1); outline-offset: 2px; }
.btn-primary { --bs-btn-bg: var(--sk-live); --bs-btn-color: var(--sk-live-ink); --bs-btn-border-color: var(--sk-btn-border, transparent);
  --bs-btn-hover-bg: var(--sk-live); --bs-btn-hover-color: var(--sk-live-ink); --bs-btn-hover-border-color: var(--sk-btn-border, transparent);
  --bs-btn-active-bg: var(--sk-live); --bs-btn-active-color: var(--sk-live-ink); --bs-btn-active-border-color: var(--sk-btn-border, transparent);
  --bs-btn-disabled-bg: var(--sk-live); --bs-btn-disabled-color: var(--sk-live-ink); --bs-btn-disabled-border-color: transparent; }
.btn-secondary { --bs-btn-bg: var(--sk-token); --bs-btn-color: var(--sk-token-ink); --bs-btn-border-color: var(--sk-btn-border, transparent);
  --bs-btn-hover-bg: var(--sk-token); --bs-btn-hover-color: var(--sk-token-ink); --bs-btn-hover-border-color: var(--sk-btn-border, transparent);
  --bs-btn-active-bg: var(--sk-token); --bs-btn-active-color: var(--sk-token-ink); --bs-btn-active-border-color: var(--sk-btn-border, transparent);
  --bs-btn-disabled-bg: var(--sk-token); --bs-btn-disabled-color: var(--sk-token-ink); --bs-btn-disabled-border-color: transparent; }
.btn-success { --bs-btn-bg: var(--sk-ok); --bs-btn-color: var(--sk-ok-ink); --bs-btn-border-color: var(--sk-ok); --bs-btn-hover-bg: var(--sk-ok); --bs-btn-hover-color: var(--sk-ok-ink); --bs-btn-hover-border-color: var(--sk-ok); --bs-btn-active-bg: var(--sk-ok); --bs-btn-active-color: var(--sk-ok-ink); --bs-btn-active-border-color: var(--sk-ok); }
.btn-warning { --bs-btn-bg: var(--sk-warn); --bs-btn-color: var(--sk-warn-ink); --bs-btn-border-color: var(--sk-warn); --bs-btn-hover-bg: var(--sk-warn); --bs-btn-hover-color: var(--sk-warn-ink); --bs-btn-hover-border-color: var(--sk-warn); --bs-btn-active-bg: var(--sk-warn); --bs-btn-active-color: var(--sk-warn-ink); --bs-btn-active-border-color: var(--sk-warn); }
.btn-danger { --bs-btn-bg: var(--sk-bad); --bs-btn-color: var(--sk-bad-ink); --bs-btn-border-color: var(--sk-bad); --bs-btn-hover-bg: var(--sk-bad); --bs-btn-hover-color: var(--sk-bad-ink); --bs-btn-hover-border-color: var(--sk-bad); --bs-btn-active-bg: var(--sk-bad); --bs-btn-active-color: var(--sk-bad-ink); --bs-btn-active-border-color: var(--sk-bad); }
.btn-info { --bs-btn-bg: var(--sk-info); --bs-btn-color: var(--sk-info-ink); --bs-btn-border-color: var(--sk-info); --bs-btn-hover-bg: var(--sk-info); --bs-btn-hover-color: var(--sk-info-ink); --bs-btn-hover-border-color: var(--sk-info); --bs-btn-active-bg: var(--sk-info); --bs-btn-active-color: var(--sk-info-ink); --bs-btn-active-border-color: var(--sk-info); }
.btn:hover { filter: brightness(1.08); }

/* badges */
.badge { border-radius: 999px; }
.badge.bg-primary { background-color: var(--sk-live) !important; color: var(--sk-live-ink) !important; }
.badge.bg-secondary { background-color: var(--sk-token) !important; color: var(--sk-token-ink) !important; }
.badge.bg-success { background-color: var(--sk-ok) !important; color: var(--sk-ok-ink) !important; }
.badge.bg-warning { background-color: var(--sk-warn) !important; color: var(--sk-warn-ink) !important; }
.badge.bg-danger { background-color: var(--sk-bad) !important; color: var(--sk-bad-ink) !important; }
.badge.bg-info { background-color: var(--sk-info) !important; color: var(--sk-info-ink) !important; }

/* forms */
.form-control, .form-select, .input-group-text {
  background-color: var(--sk-input); color: var(--sk-panel-ink); border: 1.5px solid var(--sk-line); border-radius: calc(var(--sk-r) + 2px);
}
.form-control::placeholder { color: color-mix(in srgb, var(--sk-panel-ink) 55%, transparent); }
.form-control:focus, .form-select:focus { background-color: var(--sk-input); color: var(--sk-panel-ink); border-color: var(--sk-p1); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--sk-p1) 35%, transparent); }
.form-select option { background: #ffffff; color: #000; }

/* tables and tabs */
.table { --bs-table-bg: transparent; --bs-table-color: var(--sk-ink); --bs-table-border-color: var(--sk-line);
  --bs-table-hover-bg: color-mix(in srgb, currentColor 9%, transparent); --bs-table-hover-color: var(--sk-ink); --bs-table-striped-bg: transparent; }
.card .table, .modal-content .table, .alert .table { --bs-table-color: var(--sk-panel-ink); --bs-table-hover-color: var(--sk-panel-ink); }
.nav-tabs { border-bottom-color: var(--sk-line); }
.nav-tabs .nav-link { color: var(--sk-ink); border-color: transparent; }
.nav-tabs .nav-link.active { background-color: var(--sk-panel); color: var(--sk-panel-ink); border-color: var(--sk-line) var(--sk-line) var(--sk-panel); }
.progress { background-color: var(--sk-panel); }

/* ---------- the rest of the Bootstrap colour classes the pages use ---------- */

/* stat cards on the settings page (bg-primary / bg-success / ... with white text) */
.card.bg-primary, .card.bg-success, .card.bg-warning, .card.bg-info, .card.bg-danger, .card.bg-secondary { color: var(--sk-panel-ink) !important; }
.card.bg-primary   { background-color: color-mix(in srgb, var(--sk-p1) 30%, var(--sk-panel)) !important; }
.card.bg-secondary { background-color: color-mix(in srgb, var(--sk-muted) 25%, var(--sk-panel)) !important; }
.card.bg-success   { background-color: color-mix(in srgb, var(--sk-ok) 30%, var(--sk-panel)) !important; }
.card.bg-warning   { background-color: color-mix(in srgb, var(--sk-warn) 30%, var(--sk-panel)) !important; }
.card.bg-danger    { background-color: color-mix(in srgb, var(--sk-bad) 30%, var(--sk-panel)) !important; }
.card.bg-info      { background-color: color-mix(in srgb, var(--sk-info) 30%, var(--sk-panel)) !important; }
.card.text-white { color: var(--sk-panel-ink) !important; }

/* red text (form errors, error page): a red that still reads on this skin's surface */
.text-danger { color: color-mix(in srgb, var(--sk-bad) 62%, currentcolor) !important; }

/* the All / Humans / Bots switch on the leaderboard */
.btn-outline-secondary {
  --bs-btn-color: var(--sk-panel-ink); --bs-btn-border-color: var(--sk-line);
  --bs-btn-hover-color: var(--sk-panel-ink); --bs-btn-hover-bg: color-mix(in srgb, var(--sk-panel-ink) 12%, transparent); --bs-btn-hover-border-color: var(--sk-line);
  --bs-btn-active-color: var(--sk-live-ink); --bs-btn-active-bg: var(--sk-live); --bs-btn-active-border-color: var(--sk-live);
}

/* tables: gentle stripes, and code that follows the surface */
.table { --bs-table-striped-bg: color-mix(in srgb, currentcolor 6%, transparent); --bs-table-striped-color: currentcolor; }
code, pre { color: inherit; }
code { background: color-mix(in srgb, currentcolor 12%, transparent); padding: .1em .35em; border-radius: 4px; }
pre code { background: none; padding: 0; }
pre { background: color-mix(in srgb, currentcolor 8%, transparent); padding: .75rem; border-radius: calc(var(--sk-r) + 2px); overflow-x: auto; }

/* ticks that mean "yes" */
.tick-ok { color: var(--sk-ok); }

/* full-screen menu follows the skin too */
.full-menu { background: color-mix(in srgb, var(--sk-bg) 95%, black); color: var(--sk-ink); }
.menu-close, .full-menu-list a { color: var(--sk-ink); }
.menu-right, .user-links a, .full-menu-footer { color: var(--sk-muted); }
.full-menu-list a:hover, .user-links a:hover { background: color-mix(in srgb, var(--sk-ink) 10%, transparent); color: var(--sk-ink); }
.full-menu .btn { color: var(--sk-live-ink); }
.menu-right .user-name { color: var(--sk-ink); }