/* ============================================================
   EU RUINS — shared design system (v1)
   Drop-in visual upgrade layer. Loaded on every page AFTER the
   page's own <style> and after site-nav.css, so it refines the
   existing look without needing to rewrite each page's markup.

   It keys off html[data-game="rust"|"isle"] (set by site-nav.js)
   so Rust stays ember/crimson and Isle goes cyan/teal cleanly,
   with NO theme bleed between the two.
   ============================================================ */

:root {
  /* Rust identity (default) */
  --eu-accent:        #ff3b6b;
  --eu-accent-2:      #ff7a2f;
  --eu-accent-soft:   rgba(255, 59, 107, 0.14);
  --eu-accent-line:   rgba(255, 59, 107, 0.30);
  --eu-accent-glow:   rgba(255, 59, 107, 0.34);
  --eu-gold:          #ffd54a;
  --eu-good:          #33d17a;
  --eu-bad:           #ff4d5e;

  /* Neutral surface ramp */
  --eu-bg-0:          #08050a;
  --eu-bg-1:          #0d0910;
  --eu-surface:       #150d16;
  --eu-surface-2:     #1c1220;
  --eu-hairline:      rgba(255, 255, 255, 0.08);
  --eu-hairline-2:    rgba(255, 255, 255, 0.14);
  --eu-text:          #f7f2f5;
  --eu-text-dim:      #c7aebb;
  --eu-text-mute:     #8f7684;

  --eu-radius:        14px;
  --eu-radius-sm:     9px;
  --eu-shadow:        0 22px 60px rgba(0, 0, 0, 0.45);
  --eu-shadow-sm:     0 10px 26px rgba(0, 0, 0, 0.34);
  --eu-ease:          cubic-bezier(0.22, 0.85, 0.28, 1);
}

html[data-game="isle"] {
  --eu-accent:        #16dcf2;
  --eu-accent-2:      #38e8b6;
  --eu-accent-soft:   rgba(22, 220, 242, 0.14);
  --eu-accent-line:   rgba(22, 220, 242, 0.30);
  --eu-accent-glow:   rgba(22, 220, 242, 0.34);
  --eu-gold:          #c9f76d;

  --eu-bg-0:          #04090d;
  --eu-bg-1:          #06121a;
  --eu-surface:       #08202b;
  --eu-surface-2:     #0a2a38;
  --eu-text-dim:      #a7cdd8;
  --eu-text-mute:     #6f97a3;
}

/* ---- Ambient background wash (subtle, non-intrusive) ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1100px 700px at 82% -10%, var(--eu-accent-soft), transparent 60%),
    radial-gradient(900px 620px at -8% 8%, rgba(255, 122, 47, 0.06), transparent 62%);
  opacity: 0.9;
}
html[data-game="isle"] body::before {
  background:
    radial-gradient(1100px 720px at 82% -10%, var(--eu-accent-soft), transparent 60%),
    radial-gradient(920px 640px at -8% 10%, rgba(56, 232, 182, 0.06), transparent 62%);
}

/* Faint moving grain so flat panels feel less dead */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Header refinement (applies over site-nav.css + inline headers) ---- */
.header,
header.header {
  background: linear-gradient(180deg, rgba(10, 6, 10, 0.92), rgba(10, 6, 10, 0.72)) !important;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--eu-hairline) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 34px rgba(0, 0, 0, 0.32);
}
.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--eu-accent-line), transparent);
  opacity: 0.75;
}

.logo span,
.logo-text span { color: var(--eu-accent) !important; }

/* ---- Card / panel unification ----
   Targets the common class names used across the casino + hub pages.
   NOTE: bare `.card` is deliberately NOT in this list — blackjack/hilo use
   `.card` for actual playing cards, and theming them as panels destroys them.
   Pages that want the panel look use .panel/.admin-card/.game-card etc. */
.panel,
.status-card,
.wallet-card,
.game,
.game-card,
.connect-panel,
.info-card,
.stat-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)) ,
    var(--eu-surface) !important;
  border: 1px solid var(--eu-hairline) !important;
  border-radius: var(--eu-radius) !important;
  box-shadow: var(--eu-shadow-sm);
  transition: border-color 200ms var(--eu-ease), box-shadow 200ms var(--eu-ease), transform 200ms var(--eu-ease);
}
.panel:hover,
.game:hover,
.game-card:hover {
  border-color: var(--eu-accent-line) !important;
  box-shadow: var(--eu-shadow-sm), 0 0 0 1px var(--eu-accent-line) inset;
}

/* Section headings get a small accent tick */
.panel h3 {
  position: relative;
  padding-left: 12px;
}
.panel h3::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0.9em;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--eu-accent), var(--eu-accent-2));
  box-shadow: 0 0 10px var(--eu-accent-glow);
}

/* ---- Page titles: crisper, with a gradient underline ---- */
.page-title,
.hero-title {
  background: linear-gradient(180deg, #fff, var(--eu-text-dim));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

/* ---- Buttons: consistent, tactile, glowy on hover ---- */
.btn,
.btn-primary,
.btn-cashout,
button.btn {
  position: relative;
  border-radius: 11px !important;
  transition: transform 160ms var(--eu-ease), box-shadow 200ms var(--eu-ease), filter 160ms var(--eu-ease) !important;
  overflow: hidden;
}
.btn:not(:disabled):hover,
button.btn:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn:not(:disabled):active,
button.btn:not(:disabled):active { transform: translateY(0); filter: brightness(0.97); }
/* sheen sweep on primary actions */
.btn-primary::after,
.btn-cashout::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transition: left 550ms var(--eu-ease);
}
.btn-primary:hover::after,
.btn-cashout:hover::after { left: 130%; }

/* ---- Inputs: focus ring matches game accent ---- */
.input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--eu-accent) !important;
  box-shadow: 0 0 0 3px var(--eu-accent-soft) !important;
  outline: none !important;
}

/* ---- History pills / chips get subtle depth ---- */
.h-pill,
.pill,
.tag,
.badge {
  border: 1px solid var(--eu-hairline);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---- Range sliders: themed, chunky, usable (fixes patreon feel) ---- */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--eu-accent), var(--eu-accent-2)) no-repeat,
              rgba(255, 255, 255, 0.10);
  background-size: var(--eu-range-fill, 50%) 100%;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--eu-accent);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 0 0 4px var(--eu-accent-soft);
  transition: transform 120ms var(--eu-ease), box-shadow 120ms var(--eu-ease);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-webkit-slider-thumb:active { transform: scale(0.96); }
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--eu-accent);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}
input[type="range"]::-moz-range-progress {
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--eu-accent), var(--eu-accent-2));
}

/* ---- Scrollbar accents ---- */
::-webkit-scrollbar-thumb { background: var(--eu-accent) !important; }

/* ---- Toast polish ---- */
.toast {
  border-radius: 12px !important;
  box-shadow: var(--eu-shadow) !important;
  backdrop-filter: blur(8px);
}

/* ---- Nav active underline glow (works with both nav variants) ---- */
.nav .nl.active,
.nav .site-nav-link.active,
.nav .nav-link.active {
  position: relative;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  .btn-primary::after,
  .btn-cashout::after { display: none; }
}

/* Gentle fade-in for main content so pages feel composed, not popped */
.main, main.main {
  animation: euFadeUp 480ms var(--eu-ease) both;
}
@keyframes euFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ISLE THEME BLEED FIX
   The shared casino/hub pages hardcode a Rust palette in their
   own inline <style> (:root{--red:#ff3366; --card:#1a0f15; ...}).
   When those pages are viewed in Isle context, site-nav.js sets
   html[data-game="isle"] — which has higher specificity than the
   page's :root — so remapping the same variable names here recolours
   the WHOLE page to Isle cyan with no per-page edits and no bleed.
   ============================================================ */
html[data-game="isle"] {
  --bg:    #04090d;
  --bg2:   #06131c;
  --card:  #08202b;
  --card2: #0a2a38;
  --hdr:   rgba(4, 12, 16, 0.98);
  --bdr:   #17384a;
  --bdr2:  #1c4257;
  --red:   #16dcf2;   /* primary accent used as "red" on casino pages */
  --glow:  rgba(22, 220, 242, 0.30);
  --gold:  #c9f76d;
  --green: #33d17a;
  --ok:    #33d17a;
  --purple:#38e8b6;
  --pink:  #7fe9ff;
  --ruby:  #ff5f8f;
  --blue:  #38bdf8;
  --txt:   #f2fbff;
  --txt2:  #a7cdd8;
  --muted: #6f97a3;
}
/* Keep genuine win/loss semantics readable on Isle (green stays green,
   but the crash "red" danger states should read as a warm alert, not cyan) */
html[data-game="isle"] .display.crashed,
html[data-game="isle"] .multiplier-display.crashed,
html[data-game="isle"] .crash-text {
  --red: #ff5f6e;
  color: #ff5f6e;
}