/*
 * linsy — Mario-inspired Cartoon White theme
 * 7th revision — full repaint from the warm cream/red-gold "Iron Man" look
 * to a bright, friendly, white/light-blue base with playful primary-color
 * accents (red / blue / yellow / green), in the spirit of classic platformer
 * game UI: rounded cards, soft floating shadows, punchy CTA buttons.
 *
 * Design rule used throughout: 70% white/light surface, 20% neutral gray,
 * 10% saturated accent. Every accent below was chosen (and contrast-checked
 * against WCAG AA, 4.5:1 for normal text / 3:1 for large text & UI graphics)
 * so it reads clearly as BOTH text-on-white and white-text-on-fill:
 *   --theme-gold / -bright   → "Mario Red"   (primary / CTA / active)
 *   --theme-cyan / -bright   → "Mario Blue"  (secondary / link / info)
 *   --theme-amber            → "Coin Yellow" text-safe shade (highlight/badge)
 *   --theme-yellow           → vivid Coin Yellow — BACKGROUND ONLY, always
 *                               paired with --theme-text-on-yellow (dark text;
 *                               pure yellow never has enough contrast for
 *                               white text or as small text on white)
 *   --theme-green / -bright  → "Luigi Green" (success / positive)
 * Variable NAMES are unchanged from the previous revision so every page/
 * partial that reads them through partials/_theme-vars.ejs re-skins
 * automatically; only VALUES (and a few additive tokens) changed.
 */

/* ── CSS VARIABLES / DESIGN TOKENS ── */
:root {
  /* Core backgrounds — white with a whisper of sky-blue */
  --theme-bg-deep:     #ffeeee;                 /* outer/base bg (page base, sidebar) */
  --theme-bg-main:     #fff4f4;                 /* main page bg */
  --theme-bg-card:     #FFFFFF;                 /* card surface */
  --theme-bg-elevated: #FFFFFF;                 /* elevated surface / nav */
  --theme-bg-input:    #F8FAFC;                 /* input field */

  /* Primary accent — Mario Red (พื้น = deep base, หลัก = bright variant) */
  --theme-gold:        #EC314A;                 /* base red (deep, safest for text) */
  --theme-gold-bright: #E52521;                 /* primary red (vivid Mario red) */
  --theme-gold-shine:  #FDECEA;                 /* pale red-tinted surface */
  --theme-gold-dim:    rgba(198, 33, 29, 0.08);
  --theme-gold-border: rgba(198, 33, 29, 0.35);
  --theme-gold-glow:   rgba(229, 37, 33, 0.28);

  /* Secondary accent — Mario Blue (รอง) */
  --theme-cyan:        #026EA1;                 /* deep blue */
  --theme-cyan-bright: #0277A8;                 /* bright blue (still text-safe) */
  --theme-cyan-rgb:    2, 110, 161;
  --theme-cyan-dim:    rgba(2, 110, 161, 0.09);
  --theme-cyan-border: rgba(2, 110, 161, 0.32);
  --theme-cyan-glow:   rgba(4, 156, 216, 0.30);  /* glow may use the vivid blue — decorative, low alpha */

  /* Vivid Mario Blue — background/icon/gradient use only (not safe as small text) */
  --theme-blue-vivid:     #049CD8;
  --theme-blue-vivid-rgb: 4, 156, 216;

  /* Neutral surface tone (hover / alt fill) */
  --theme-blue:        #EEF2F7;                 /* neutral light hover surface */
  --theme-blue-hover:  #E1E8F0;                 /* hover surface */
  --theme-blue-subtle: rgba(198, 33, 29, 0.07);  /* faint red fill (alerts / pills) */

  /* Glossy light buttons — dashboard qcard / cat-tab / lotto pill */
  --theme-navy-rgb:          198, 33, 29;        /* shadow tint mirrors --theme-gold's rgb */
  --theme-btn-blue-top:      #FFFFFF;            /* button gradient — top */
  --theme-btn-blue-bot:      #E8F3FC;            /* button gradient — bottom */
  --theme-btn-blue-top-h:    #F4FAFF;            /* hover — top */
  --theme-btn-blue-bot-h:    #D8ECFA;            /* hover — bottom */
  --theme-btn-blue-border:   rgba(2, 110, 161, 0.28);
  --theme-btn-blue-grad:       linear-gradient(180deg, var(--theme-btn-blue-top) 0%,   var(--theme-btn-blue-bot) 100%);
  --theme-btn-blue-grad-hover: linear-gradient(180deg, var(--theme-btn-blue-top-h) 0%, var(--theme-btn-blue-bot-h) 100%);
  --theme-pill-blue-top:     #E52521;            /* lotto pill gradient — top (vivid red) */
  --theme-pill-blue-bot:     #C6211D;            /* lotto pill gradient — bottom (deep red) */
  --theme-pill-blue-rgb:     198, 33, 29;        /* lotto pill shadow tint */

  /* Active-tab accent — pale Coin-Yellow panel (dark text stays readable) */
  --theme-tab-cream-top:     #FFF6D6;
  --theme-tab-cream-bot:     #FFE99A;
  --theme-tab-cream-border:  #E0A800;
  --theme-tab-cream-rgb:     224, 168, 0;        /* active-tab shadow tint */
  --theme-tab-cream-grad:    linear-gradient(180deg, var(--theme-tab-cream-top) 0%, var(--theme-tab-cream-bot) 100%);

  /* Coin Yellow — highlight / badge / promotion. BACKGROUND ONLY: always pair
     with --theme-text-on-yellow, never with white text or as small text-on-white. */
  --theme-yellow:        #FBD000;
  --theme-yellow-rgb:    251, 208, 0;
  --theme-yellow-dim:    rgba(251, 208, 0, 0.18);
  --theme-yellow-border: rgba(224, 168, 0, 0.45);
  --theme-text-on-yellow:#3D2B00;

  /* Status — semantic tokens (danger / success / warning / info) */
  --theme-red:         #DC2626;                 /* danger / hot */
  --theme-red-rgb:     220, 38, 38;
  --theme-red-subtle:  rgba(220, 38, 38, 0.12);
  --theme-green:       #15803D;                 /* success — "Luigi Green", deepened for text/button safety */
  --theme-green-rgb:   21, 128, 61;
  --theme-green-subtle: rgba(21, 128, 61, 0.12);
  --theme-green-bright: #43B047;                /* vivid Luigi green — decorative / dark-text badges only */
  --theme-green-bright-rgb: 67, 176, 71;
  --theme-amber:        #9A6A00;                /* warning / highlight — Coin-Yellow family, text-safe shade */
  --theme-amber-rgb:    154, 106, 0;
  --theme-amber-subtle: rgba(154, 106, 0, 0.12);
  --theme-info:        #0277A8;                 /* Mario Blue */
  --theme-info-rgb:    2, 119, 168;

  /* Text — dark slate on white; red/blue CTAs keep white text (button stays dark enough) */
  --theme-text-primary:   #1F2937;
  --theme-text-secondary: #4B5563;
  --theme-text-muted:     rgba(31, 41, 55, 0.48);
  --theme-text-white:     #ffffff;              /* text on red/blue CTAs */
  --theme-text-on-gold:   #FFF7F6;              /* light text — paired with --theme-gold (red) across every page */

  /* Borders */
  --theme-border-subtle: rgba(31, 41, 55, 0.10);
  --theme-border-mid:    rgba(31, 41, 55, 0.18);

  /* UI tokens — rounder, game-UI friendly */
  --theme-radius:     16px;
  --theme-radius-sm:  10px;
  --theme-radius-lg:  22px;
  --theme-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --theme-font:       'Kanit', 'Sarabun', sans-serif;
}

html {
  scroll-behavior: auto;
  font-family: 'Kanit', sans-serif;
}

/* ── BODY ── */
body {
  background: linear-gradient(180deg, #EEF7FF 0%, #F4F8FF 45%, #FFFFFF 100%);
  background-attachment: fixed;
  color: var(--theme-text-primary);
  font-family: var(--theme-font);
}

/* ── AMBIENT OVERLAY — faint Mario-palette wash (sky blue / red / coin yellow) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%,   rgba(4, 156, 216, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 85% 85%,  rgba(229, 37, 33, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 8% 100%,  rgba(251, 208, 0, 0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── GLOBAL CARD STYLE — rounded, soft-floating ── */
.theme-card {
  background: var(--theme-bg-card);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius);
  box-shadow: 0 2px 12px rgba(31, 41, 55, 0.08);
  transition: var(--theme-transition);
}
.theme-card:hover {
  border-color: var(--theme-gold-border);
  box-shadow: 0 10px 28px rgba(31, 41, 55, 0.12), 0 0 20px var(--theme-gold-glow);
  transform: translateY(-2px);
}

/* ── RED DIVIDER ── */
.theme-divider-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--theme-gold-border) 30%, var(--theme-gold-bright) 50%, var(--theme-gold-border) 70%, transparent 100%);
  border: none;
  margin: 0;
}

/* ── BUTTONS — rounded, playful, lift on hover ── */
/* Primary CTA — Mario Red, white text */
.theme-btn-gold {
  background: linear-gradient(135deg, #E52521 0%, #C6211D 100%);
  color: var(--theme-text-white);
  border: none;
  padding: 8px 22px;
  border-radius: 50px;
  font-family: var(--theme-font);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--theme-transition);
  box-shadow: 0 4px 14px var(--theme-gold-glow), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  letter-spacing: 0.03em;
}
.theme-btn-gold:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 20px var(--theme-gold-glow);
  transform: translateY(-2px);
}

/* Secondary — Mario Blue, white text */
.theme-btn-cyan {
  background: linear-gradient(135deg, #049CD8 0%, #026EA1 100%);
  color: var(--theme-text-white);
  border: none;
  padding: 8px 22px;
  border-radius: 50px;
  font-family: var(--theme-font);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--theme-transition);
  box-shadow: 0 4px 14px var(--theme-cyan-glow);
}
.theme-btn-cyan:hover {
  box-shadow: 0 8px 18px var(--theme-cyan-glow);
  filter: brightness(1.05);
  transform: translateY(-2px);
}

/* Success — Luigi Green, white text */
.theme-btn-green {
  background: linear-gradient(135deg, #43B047 0%, #15803D 100%);
  color: var(--theme-text-white);
  border: none;
  padding: 8px 22px;
  border-radius: 50px;
  font-family: var(--theme-font);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--theme-transition);
  box-shadow: 0 4px 14px var(--theme-green-subtle);
}
.theme-btn-green:hover {
  filter: brightness(1.06);
  box-shadow: 0 8px 18px rgba(21, 128, 61, 0.35);
  transform: translateY(-2px);
}

/* Promotion / Reward — Coin Yellow, dark text (pure yellow never carries white text) */
.theme-btn-yellow {
  background: linear-gradient(135deg, #FFDE33 0%, #FBD000 100%);
  color: var(--theme-text-on-yellow);
  border: none;
  padding: 8px 22px;
  border-radius: 50px;
  font-family: var(--theme-font);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--theme-transition);
  box-shadow: 0 4px 14px var(--theme-yellow-dim);
}
.theme-btn-yellow:hover {
  filter: brightness(1.04);
  box-shadow: 0 8px 18px rgba(224, 168, 0, 0.35);
  transform: translateY(-2px);
}

.theme-btn-outline {
  background: rgba(31, 41, 55, 0.03);
  color: var(--theme-text-secondary);
  border: 1px solid var(--theme-border-mid);
  padding: 7px 18px;
  border-radius: 50px;
  font-family: var(--theme-font);
  font-size: 0.80rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--theme-transition);
}
.theme-btn-outline:hover {
  border-color: var(--theme-gold-border);
  color: var(--theme-gold);
  background: var(--theme-gold-dim);
}

/* ── BADGE ── */
.theme-badge-hot {
  background: var(--theme-red);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
/* "New" badge rides the Coin-Yellow surface — dark text pairing */
.theme-badge-new {
  background: linear-gradient(135deg, #FFDE33, #FBD000);
  color: var(--theme-text-on-yellow);
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
/* Own dark backing chip — legible regardless of page background */
.theme-badge-live {
  background: rgba(20, 24, 32, 0.78);
  backdrop-filter: blur(6px);
  color: #7DD3FC;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 50px;
  border: 1px solid rgba(125, 211, 252, 0.45);
  letter-spacing: 0.05em;
}

/* ── SPINNER ── */
.theme-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(31, 41, 55, 0.14);
  border-top-color: var(--theme-gold-bright);
  border-radius: 50%;
  animation: theme-spin 0.85s linear infinite;
  flex-shrink: 0;
}
@keyframes theme-spin { to { transform: rotate(360deg); } }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(31, 41, 55, 0.06); }
::-webkit-scrollbar-thumb { background: rgba(198, 33, 29, 0.40); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--theme-gold-bright); }

/* ── UTILITY ── */
.text-gold     { color: var(--theme-gold); }
.text-cyan     { color: var(--theme-cyan); }
.text-dim      { color: var(--theme-text-secondary); }
.text-muted    { color: var(--theme-text-muted); }
.bg-card       { background: var(--theme-bg-card); }
.border-gold   { border-color: var(--theme-gold-border) !important; }
.border-subtle { border-color: var(--theme-border-subtle) !important; }
.glow-gold     { box-shadow: 0 0 18px var(--theme-gold-glow); }
.glow-cyan     { box-shadow: 0 0 16px var(--theme-cyan-glow); }

/* ── TEXT ELEMENT DEFAULTS — dark text on light theme ── */
p   { color: var(--theme-text-secondary); }
li  { color: var(--theme-text-secondary); }
h1, h2, h3, h4, h5, h6 { color: var(--theme-text-primary); }
a:not(.btn):not([class*="text-"]):not([class*="nav-"]):not([class*="cn-"]):not([class*="sp-"]):hover {
  text-decoration: none;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}