/* Jurassic Land - two servers on one site (2026-10-10).
   The chooser, the switch pill, and the PvP colours. PvP = black and red: every theme token the site paints with is
   restated under html[data-jl-server="pvp"], which outranks :root, so no page needs its own rule. */

html[data-jl-server="pvp"] {
  --bg: #050505;
  --bg-2: #0e0b0b;
  --bg-deep: #020101;
  --surface: #131010;
  --surface-2: #1b1515;
  --surface-3: #241b1b;
  --surface-sink: #030202;
  --surface-hover: rgba(211,47,47,0.10);
  --scrim-nav: rgba(5,5,5,.80);
  --scrim-nav-mobile: rgba(4,3,3,0.98);
  --scrim-panel: rgba(19,16,16,0.76);
  --scrim-modal: rgba(3,2,2,0.82);
  --fg: #eee6e6;
  --fg-dim: #c2b5b5;
  --fg-mute: #a89b9b;
  --on-primary: #ffffff;
  --border: #2e1d1d;
  --border-2: #432626;
  --edge: #6a3333;
  --edge-lit: #b47c7c;
  --accent: #d32f2f;
  --accent-hi: #ff5252;
  --accent-rgb: 211, 47, 47;
  --accent-wash: rgba(211,47,47,0.10);
  --accent-wash-2: rgba(211,47,47,0.16);
  --accent-glow: rgba(211,47,47,0.34);
  --grad-hero-text: linear-gradient(174deg, #ffffff 6%, var(--fg) 34%, var(--fg-dim) 68%, #8f2f2f 100%);
  --grad-btn-primary: linear-gradient(180deg, #e53935, #b71c1c);
  --grad-btn-primary-hover: linear-gradient(180deg, #ff5252, #c62828);
  --grad-cta: linear-gradient(180deg, #241b1b, #1b1515);
  --grad-card: linear-gradient(180deg, #131010, #030202);
  --grad-status: linear-gradient(180deg, #1a1414, #030202);
  --grad-icon-well: linear-gradient(180deg, #221919, #110d0d);
  --grad-notice: linear-gradient(180deg, #181313, #0e0b0b);
  --grad-foot: linear-gradient(180deg, rgba(14,11,11,0.6), rgba(2,1,1,0.92));
  --grad-shimmer: linear-gradient(90deg, rgba(211,47,47,0), rgba(255,82,82,0.85), rgba(255,255,255,0.35), rgba(211,47,47,0.6), rgba(211,47,47,0));
  --backdrop-layers: radial-gradient(820px 560px at 6% -10%, rgba(var(--accent-rgb), .20), transparent 62%), radial-gradient(1120px 400px at 50% 112%, rgba(var(--accent-rgb), .16), transparent 68%), radial-gradient(64% 60% at 50% 32%, rgba(5,5,5,.42), rgba(5,5,5,.22) 66%, rgba(5,5,5,0) 100%), linear-gradient(180deg, rgba(5,5,5,.90) 0%, rgba(5,5,5,.86) 26%, rgba(5,5,5,.86) 58%, rgba(5,5,5,.90) 84%, rgba(2,1,1,.95) 100%), var(--art-background) center top / cover no-repeat, linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  --backdrop-drift: radial-gradient(44% 30% at 22% 26%, rgba(238,230,230,.03), transparent 72%), radial-gradient(38% 24% at 74% 16%, rgba(var(--accent-rgb), .07), transparent 74%), radial-gradient(56% 26% at 46% 74%, rgba(238,230,230,.02), transparent 76%);
  --stage-floor: radial-gradient(75% 60% at 50% 82%, rgba(120,18,18,0.34), transparent 70%), radial-gradient(50% 34% at 76% 6%, rgba(211,47,47,0.15), transparent 65%), linear-gradient(180deg, #0e0b0b 0%, #020101 88%);
  --shadow-text: 0 1px 3px rgba(2,1,1,0.88), 0 0 8px rgba(2,1,1,0.72);
  --mv-plate: rgba(2,1,1,0.78);
}
html[data-jl-server="pvp"] body { background-color: var(--bg); }
/* Supporter packs are not sold on the PvP server yet (its bot runs no supporter-role sync): no menu door to them. */
html[data-jl-server="pvp"] a[href="/support.html"], html[data-jl-server="pvp"] a[href="/support"] { display: none !important; }
.jls-notice {
  position: fixed; left: 50%; top: 84px; transform: translateX(-50%); z-index: 960;
  max-width: min(92vw, 640px); padding: 14px 18px; border-radius: 10px; text-align: center;
  background: rgba(12, 6, 6, .96); color: #f1eaea; border: 1px solid #d32f2f;
  box-shadow: 0 12px 34px -12px rgba(0,0,0,.95); font: 500 14px/1.5 var(--font-ui, system-ui, sans-serif);
}
.jls-notice button { margin-top: 10px; padding: 7px 14px; border-radius: 999px; border: 1px solid #c96b3f;
  background: #1a120e; color: #f0c2a8; font: 600 13px/1 var(--font-ui, system-ui, sans-serif); cursor: pointer; }

/* ---- the switch pill ------------------------------------------------------------------------------------------- */
.jls-pill {
  position: fixed; left: 14px; bottom: 58px; z-index: 950;   /* above the site's bottom live bar */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  background: rgba(10, 10, 10, .88); color: #f2eeee;
  border: 1px solid var(--accent, #c96b3f);
  box-shadow: 0 6px 22px -8px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04) inset;
  font: 600 13px/1 var(--font-ui, system-ui, sans-serif); letter-spacing: .02em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.jls-pill:hover, .jls-pill:focus-visible { background: rgba(24, 20, 20, .95); outline: none; }
.jls-pill .jls-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent, #c96b3f); box-shadow: 0 0 10px var(--accent, #c96b3f); }
.jls-pill .jls-swap { opacity: .7; font-weight: 500; }

/* ---- the chooser ----------------------------------------------------------------------------------------------- */
.jls-gate {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(3, 3, 3, .86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow-y: auto;
}
.jls-box {
  width: 100%; max-width: 760px; color: #eeeaea;
  font-family: var(--font-ui, system-ui, sans-serif);
}
.jls-title { margin: 0 0 4px; text-align: center; font: 700 26px/1.2 var(--font-display, Georgia, serif); }
.jls-sub { margin: 0 0 18px; text-align: center; color: #b9b2b2; font-size: 14px; }
.jls-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .jls-cards { grid-template-columns: 1fr; } .jls-title { font-size: 22px; } }
.jls-card {
  display: flex; flex-direction: column; gap: 10px; text-align: left;
  padding: 18px; border-radius: 10px; cursor: pointer; color: inherit;
  font: inherit; border: 1px solid #333; background: #111;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.jls-card:hover, .jls-card:focus-visible { transform: translateY(-2px); outline: none; }
.jls-card.jls-pve { background: linear-gradient(180deg, #171513, #0b0a09); border-color: #5e3a26; }
.jls-card.jls-pve:hover, .jls-card.jls-pve:focus-visible { border-color: #c96b3f; box-shadow: 0 0 0 1px #c96b3f, 0 10px 30px -12px rgba(201,107,63,.55); }
.jls-card.jls-pvp { background: linear-gradient(180deg, #160c0c, #050303); border-color: #5a1a1a; }
.jls-card.jls-pvp:hover, .jls-card.jls-pvp:focus-visible { border-color: #d32f2f; box-shadow: 0 0 0 1px #d32f2f, 0 10px 30px -12px rgba(211,47,47,.6); }
.jls-name { font: 700 22px/1.1 var(--font-display, Georgia, serif); }
.jls-pve .jls-name { color: #e7a07d; }
.jls-pvp .jls-name { color: #ff5a5a; }
.jls-line { color: #c9c1c1; font-size: 14px; line-height: 1.45; }
.jls-live { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #d8d2d2; }
.jls-live i { width: 8px; height: 8px; border-radius: 50%; background: #666; display: inline-block; }
.jls-live.on i { background: #37d67a; box-shadow: 0 0 8px #37d67a; }
.jls-live.off i { background: #e35a72; }
.jls-cta { margin-top: 2px; font-weight: 700; font-size: 14px; }
.jls-pve .jls-cta { color: #e7a07d; }
.jls-pvp .jls-cta { color: #ff5a5a; }
.jls-note { margin: 16px 0 0; text-align: center; color: #a9a1a1; font-size: 13px; line-height: 1.5; }
.jls-close { display: block; margin: 12px auto 0; background: none; border: 0; color: #9a9393; cursor: pointer; font: inherit; font-size: 13px; text-decoration: underline; }

/* ==== 2026-10-10 web move: the PvP colours on the NEW design ====
   APPENDED BLOCK. Everything above this line is the live file, byte for byte (sha256 f307239d...); to re-merge,
   take the live file again and append this block unchanged.

   The new theme sheet (css/theme.css, generated) paints with 103 colour-bearing role tokens. The block at the top
   of this file restates 41 of them. Of the other 62:
     restated here (1)   --primary: the new design's committing colour - the wash and hairline of every primary
                         button, the console's primary button, the life-stat fill, the wheel's member ring. It is
                         the copper #c96b3f in :root, the same colour as --accent there, so it is the same red here.
     follow by themselves (5)  --chisel, --glow, --grad-hero-halo, --grad-poster, --shadow: theme.css declares them
                         from var(--accent-rgb) on the same element this file restates --accent-rgb on.
     left on purpose (56)  signals and gameplay readings, which must read the same on both servers and are not the
                         brand: --ok*, --warn*, --bad* and --on-bad (the ink on the danger plate), the 20 --lvc-*
                         live-card vitals, 19 --mv-* map colours, the white --qr-plate / --art-plate, --shadow-panel.
   No other sheet of the new design holds a brand colour literal - they all consume these tokens - so no page needs
   a rule of its own. */
html[data-jl-server="pvp"] {
  --primary: #d32f2f;
}
/* The new staff console has a side rail down the whole left edge (css/adminkit.css, --ak-rail-w, a column above
   1180px wide). The switch pill sits just right of it there instead of on top of its last entries; narrower, the
   rail is a drawer with its own 104px foot and the pill keeps its place. Both servers. */
@media (min-width: 1181px) {
  body.ak-console .jls-pill { left: calc(var(--ak-rail-w, 268px) + 14px); }
}
/* The new skin studio is one fixed screen with its own controls along the bottom-left edge, exactly where the pill
   sits everywhere else. Wide (the studio's stage layout, css/studiostage.css): the pill goes just right of the
   "View settings" box (16px in, 420px wide, scaled by the studio's own --sd-z) - clear of it whichever side the
   editor panel is docked. Narrow: it is lifted above the studio's foot bar, dock and view buttons, by the heights
   the studio itself publishes on <body> (--lab-bar, --lab-dock-h). Both servers. */
@media (min-width: 901px) {
  body.studiolab .jls-pill { left: calc(30px + 420px * var(--sd-z, 1)); }
}
@media (max-width: 900px) {
  body.studiolab .jls-pill { bottom: calc(var(--lab-bar, 0px) + var(--lab-dock-h, 52px) + 56px); }
}