/* ==========================================================================
   STICK ARENA RESKIN — CORE
   Foundation for the Stick Arena: Ballistick aesthetic clone.
   Loads AFTER styles.css / prestige.css: equal-specificity rules here win.
   Screen-specific skins live in sa-title.css, sa-lobby.css, sa-profile.css,
   sa-game.css, sa-ranks.css, sa-dialogs.css, sa-flow.css, sa-editor.css.
   ========================================================================== */

/* --- Local fonts (vendored, PWA-safe) ------------------------------------ */
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/silkscreen-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/silkscreen-400-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/silkscreen-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/silkscreen-700-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/baloo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/baloo2-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Stick Arena design tokens ------------------------------------------- */
:root {
  /* Steel-blue chrome (lobby panels, plate) */
  --sa-steel-900: #1a2330;
  --sa-steel-800: #232f3f;
  --sa-steel-700: #2e3d50;
  --sa-steel-600: #3b4d64;
  --sa-steel-500: #4b5f78;
  --sa-steel-400: #61748c;
  --sa-steel-300: #8296ac;
  --sa-steel-200: #a9b8c9;
  --sa-steel-100: #cdd8e4;

  /* Dark inset wells (chat, game list) */
  --sa-well: #131a24;
  --sa-well-deep: #0b0f16;
  --sa-well-line: #05070b;

  /* Header bars on wells (games list header blue) */
  --sa-bar-hi: #7ea6d4;
  --sa-bar-lo: #4a6f9c;
  --sa-bar-ink: #0e1a2a;

  /* 3D button gradient + border */
  --sa-btn-hi: #eef2f7;
  --sa-btn-mid: #c9d3df;
  --sa-btn-lo: #9fadc0;
  --sa-btn-border: #16222f;
  --sa-btn-ink: #16222f;
  --sa-btn-hover-hi: #ffffff;
  --sa-btn-hover-mid: #d7dfe9;

  /* Selected row (games list) */
  --sa-sel-bg: #aecbe9;
  --sa-sel-ink: #12283f;

  /* Gold (ranks, credits, highlights) */
  --sa-gold: #ffd23f;
  --sa-gold-hi: #fff3b0;
  --sa-gold-dark: #b98a12;
  --sa-gold-outline: #5c4304;

  /* Chat / feed text colors */
  --sa-chat-text: #8fd0f2;
  --sa-chat-dim: #5d89b0;
  --sa-chat-sys: #f2e14f;
  --sa-chat-mod: #ff8ad8;
  --sa-chat-red: #ff7f8a;
  --sa-chat-green: #8ce08a;

  /* Player-row pastels (lobby players list) */
  --sa-row-yellow: #fdf38a;
  --sa-row-cream: #f5edd8;
  --sa-row-salmon: #f6a58e;
  --sa-row-cyan: #a8e6f0;
  --sa-row-blue: #a8c8f0;
  --sa-row-purple: #d3aef0;

  /* Fonts */
  --sa-pixel: 'Silkscreen', 'Courier New', monospace;
  --sa-chunky: 'Baloo 2', Verdana, sans-serif;

  /* Reusable effects */
  --sa-bevel-panel:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(0, 0, 0, 0.18);
  --sa-bevel-well:
    inset 0 2px 5px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  --sa-frame: 2px solid #0d141d;
  --sa-radius: 6px;
}

/* --- Global backdrop: darker SA desktop blue ------------------------------ */
body {
  background:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(180deg, #263447 0%, #1b2636 52%, #131c29 100%);
  background-attachment: fixed;
  background-size: 64px 64px, 64px 64px, auto;
}

/* --- Panels → SA beveled steel ------------------------------------------- */
.panel {
  border: var(--sa-frame);
  border-radius: var(--sa-radius);
  background: linear-gradient(180deg, var(--sa-steel-600) 0%, var(--sa-steel-700) 55%, var(--sa-steel-800) 100%);
  box-shadow: var(--sa-bevel-panel), 0 3px 8px rgba(0, 0, 0, 0.4);
  color: #e8eef5;
}
.panel-kicker {
  color: var(--sa-gold);
  font-family: var(--sa-pixel);
  font-size: 9px;
  letter-spacing: 0.14em;
}

/* --- Buttons → SA chunky 3D ---------------------------------------------- */
.button {
  border: 2px solid var(--sa-btn-border);
  border-radius: 7px;
  background: linear-gradient(180deg, var(--sa-btn-hi) 0%, var(--sa-btn-mid) 52%, var(--sa-btn-lo) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -3px 0 rgba(70, 88, 110, 0.5),
    0 2px 0 rgba(0, 0, 0, 0.45);
  color: var(--sa-btn-ink);
  font-family: var(--sa-chunky);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: filter 80ms ease, transform 60ms ease, box-shadow 60ms ease;
}
.button:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--sa-btn-hover-hi) 0%, var(--sa-btn-hover-mid) 55%, var(--sa-btn-lo) 100%);
  filter: brightness(1.05);
}
.button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(30, 45, 62, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 rgba(0, 0, 0, 0);
}
.button-primary {
  background: linear-gradient(180deg, #fdf6c8 0%, #f3d65a 48%, #d8ab22 100%);
  border-color: #4d3a05;
  color: #3a2c04;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    inset 0 -3px 0 rgba(140, 100, 10, 0.55),
    0 2px 0 rgba(0, 0, 0, 0.45);
}
.button-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #fffbe0 0%, #ffe97e 50%, #e4b92e 100%);
}
.button-secondary {
  background: linear-gradient(180deg, #dde8f4 0%, #b4c6dc 52%, #8ba0ba 100%);
}
.button-ghost {
  background: linear-gradient(180deg, var(--sa-steel-400) 0%, var(--sa-steel-500) 55%, var(--sa-steel-600) 100%);
  color: #eef4fa;
  border-color: var(--sa-btn-border);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 2px 0 rgba(0, 0, 0, 0.4);
}
.button.danger, .button-danger {
  background: linear-gradient(180deg, #f6b8ae 0%, #d96a58 55%, #a83f30 100%);
  border-color: #3d1109;
  color: #2c0c05;
}

/* --- Inputs → SA inset wells ---------------------------------------------- */
.text-input, .select-input {
  border: 2px solid var(--sa-well-line);
  border-radius: 5px;
  background: var(--sa-well);
  box-shadow: var(--sa-bevel-well);
  color: #dce8f4;
}
.text-input:focus, .select-input:focus {
  outline: none;
  border-color: var(--sa-bar-lo);
  box-shadow: var(--sa-bevel-well), 0 0 0 2px rgba(126, 166, 212, 0.35);
}
.text-input::placeholder { color: #5a7189; }

/* --- Header / nav tabs → SA look ------------------------------------------ */
.plate-top {
  border-bottom: 2px solid #0d141d;
}
.main-nav button {
  border: 2px solid var(--sa-btn-border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--sa-steel-400) 0%, var(--sa-steel-500) 60%, var(--sa-steel-600) 100%);
  color: #e6edf5;
  font-family: var(--sa-chunky);
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -5px 8px rgba(0, 0, 0, 0.25);
}
.main-nav button:hover {
  background: linear-gradient(180deg, var(--sa-steel-300) 0%, var(--sa-steel-400) 60%, var(--sa-steel-500) 100%);
}
.main-nav button.active {
  background: linear-gradient(180deg, var(--sa-btn-hi) 0%, var(--sa-btn-mid) 60%, var(--sa-btn-lo) 100%);
  color: var(--sa-btn-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), inset 0 -4px 6px rgba(70, 88, 110, 0.35);
}
.brand-copy strong {
  font-family: var(--sa-pixel);
  font-size: 10px;
  letter-spacing: 0.12em;
}

/* Hide the site chrome on the title screen: SA boots straight into the logo. */
body[data-screen="title"] #site-header { display: none; }
body[data-screen="title"] .settings-fab { display: none; }

/* Mobile (≤900px): styles.css flattens the nav into a fixed bottom bar — the
   desktop 3D tabs above must not leak into it. Mirrors styles.css @900px. */
@media (max-width: 900px) {
  .main-nav button, .main-nav button.active {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    text-shadow: none;
  }
  .main-nav button.active {
    background: linear-gradient(180deg, #e5edf4, #c8d6e3);
    box-shadow: inset 0 3px 0 var(--yellow);
  }
}

/* --- SA chunky scrollbars -------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--sa-steel-400) var(--sa-well); }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track {
  background: var(--sa-well);
  border-left: 1px solid var(--sa-well-line);
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--sa-steel-300), var(--sa-steel-500));
  border: 2px solid var(--sa-well);
  border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--sa-steel-200), var(--sa-steel-400)); }
*::-webkit-scrollbar-button { display: none; }

/* --- Shared SA utility classes (used by screen skins + new markup) -------- */
.sa-pixel { font-family: var(--sa-pixel); }
.sa-gold-text {
  color: var(--sa-gold);
  text-shadow:
    1px 1px 0 var(--sa-gold-outline),
    -1px 1px 0 var(--sa-gold-outline),
    1px -1px 0 var(--sa-gold-outline),
    -1px -1px 0 var(--sa-gold-outline),
    0 2px 2px rgba(0, 0, 0, 0.6);
}

/* Reduced motion: kill SA decorative animation globally when user opts out. */
@media (prefers-reduced-motion: reduce) {
  .sa-anim, .sa-anim * { animation: none !important; transition: none !important; }
}