/* Strategy Arena global UI CSS. Extracted from shared partials for cacheable delivery. */
:root {
    --sa-bg-deep: #020208;
    --sa-bg-mid: rgb(15 23 42);
    --sa-text-main: rgb(226 232 240);
    --sa-text-mute: rgb(148 163 184);
    --sa-cyan: #22d3ee;
    --sa-violet: #a78bfa;
    --sa-green: #10b981;
    --sa-red: #ef4444;
    --sa-amber: #fbbf24;
    --sa-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --sa-font-display: 'Orbitron', sans-serif;
    --sa-font-mono: 'JetBrains Mono', 'Menlo', 'Monaco', monospace;
  }

/* 1. Touch targets: min 44px on mobile */
@media(max-width:768px){
  a, button, .ctrl-btn, .nav-dd button, [onclick] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Nav buttons keep compact but tappable */
  nav a, nav button { min-height: 38px; min-width: 38px; }
}

/* 2. Contrast fix: keep muted text on official palette */
@media(prefers-color-scheme:dark){
  body { color: var(--sa-text-main); }
}

/* 3. Reduced motion: respect user preference */
@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;
  }
  canvas { display: none; } /* Hide particle/DNA backgrounds */
}

/* 4. Min font size 16px on mobile (prevents iOS zoom on focus) */
@media(max-width:768px){
  input, select, textarea { font-size: 16px !important; }
  body { font-size: 16px; }
  .sub, .lbl, .meta, .ttime, [style*="font-size:.6"], [style*="font-size:.65"], [style*="font-size:.7"] {
    font-size: 0.82rem !important;
  }
}

/* 5. Neon glow on Orbitron headings */
h1, h2, h3 {
  text-rendering: optimizeLegibility;
}
.neon-title, h1 .g, h1 .gradient, .hero h1 {
  text-shadow: 0 0 10px rgba(34,211,238,0.3), 0 0 30px rgba(34,211,238,0.1);
}

/* Bonus: smooth hover transitions globally */
a, button { transition: all 0.2s ease; }

/* Bonus: better scrollbar on dark theme */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--sa-bg-deep); }
::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.5); }
html { scrollbar-width: thin; scrollbar-color: rgba(167,139,250,0.3) var(--sa-bg-deep); }

/* RGPD Cookie banner + Trading disclaimer (deployed 2026-04-30) */
#sa-cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:99998;background:rgba(10,15,31,.96);border-top:1px solid rgba(167,139,250,.35);padding:8px 12px;color:var(--sa-text-main);font-family:var(--sa-font-body);font-size:.76em;display:block;visibility:hidden;opacity:0;transform:translateY(100%);transition:opacity .16s ease,transform .16s ease,visibility .16s ease;box-shadow:0 -3px 18px rgba(0,0,0,.48);contain:layout paint}
#sa-cookie-banner.show{visibility:visible;opacity:1;transform:translateY(0)}
#sa-cookie-banner .inner{max-width:1040px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between}
#sa-cookie-banner .txt{flex:1;min-width:220px;line-height:1.25}
#sa-cookie-banner .txt strong{color:var(--sa-amber)}
#sa-cookie-banner .txt a{color:var(--sa-cyan);text-decoration:underline}
#sa-cookie-banner .actions{display:flex;gap:8px;flex-wrap:wrap}
#sa-cookie-banner button{padding:6px 10px;border-radius:6px;border:1px solid rgba(167,139,250,.4);background:var(--sa-bg-deep);color:var(--sa-text-main);font-family:var(--sa-font-display);font-size:.7em;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:all .2s}
#sa-cookie-banner button.accept{background:linear-gradient(135deg,var(--sa-cyan),var(--sa-violet));color:var(--sa-bg-deep);border:none}
#sa-cookie-banner button:hover{transform:translateY(-1px);filter:brightness(1.1)}

#sa-trading-disclaimer{background:linear-gradient(90deg,rgba(251,191,36,.08),rgba(239,68,68,.06));border-bottom:1px solid rgba(251,191,36,.4);padding:6px 16px;color:var(--sa-amber);font-family:var(--sa-font-body);font-size:.78em;text-align:center;line-height:1.4;letter-spacing:.02em}
#sa-trading-disclaimer strong{color:var(--sa-red)}
@media(max-width:640px){ #sa-trading-disclaimer{font-size:.72em;padding:5px 10px}}

/* Hamburger menu mobile (≤768px) — drawer rendered as fixed overlay by JS */
  .nav-hamburger { display:none; background:none; border:none; color:var(--sa-text-main); padding:10px; cursor:pointer; font-size:1.4em; line-height:1; min-width:44px; min-height:44px; flex-shrink:0; transition:transform .15s }
  .nav-hamburger:focus { outline:2px solid var(--sa-cyan) }
  .nav-hamburger:hover { transform:scale(1.05) }
  body.mobile-nav-open { overflow:hidden }
  #sa-mobile-drawer a:hover { background:rgba(139,92,246,.1) }
  @media (min-width: 769px) {
    .nav-hamburger { display:none !important }
    #sa-mobile-drawer { display:none !important }
  }
  #sa-float { bottom:88px !important; left:18px !important }
  #sa-dropdown { bottom:136px !important; left:18px !important }
  @media (max-width: 768px) {
    .nav-hamburger { display:inline-flex; align-items:center; justify-content:center }
    .nav-quick-links { display:none !important }
    #sa-float { bottom:78px !important; left:14px !important; transform:scale(.92); transform-origin:left bottom }
    #sa-dropdown { bottom:126px !important; left:14px !important; max-width:calc(100vw - 28px) }
  }

  /* Mobile hotfix : hide quick-links shortcuts on narrow phones (accessible via dropdowns anyway) */
  @media (max-width: 540px) {
    .nav-quick-links { display: none !important; }
  }

  /* Sub-header divider inside dropdowns (Research → Experiments etc.) */
  .dd-subhead { color:var(--sa-violet); font-size:.62em; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; padding:8px 12px 4px; margin-top:6px; border-top:1px dashed rgba(139,92,246,.18) }

.nav-dd .dd-menu a:hover{background:rgba(139,92,246,.08)}
@media(max-width:768px){
  .nav-dd button{font-size:.65em!important;padding:3px 5px!important}
  .nav-dd .dd-menu{right:0;left:auto}
}

.sa-footer{background:#070812;border-top:1px solid rgba(100,116,139,.18);padding:24px 20px 18px;font-family:'Rajdhani',sans-serif;color:#94a3b8;font-size:.88em}
.sa-footer-inner{max-width:1180px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.sa-footer-brand{min-width:260px;max-width:520px}
.sa-footer-brand a{color:#e2e8f0;text-decoration:none;font-weight:800;font-size:1.05rem}
.sa-footer-brand p{margin:6px 0 0;line-height:1.45;color:#94a3b8}
.sa-footer-links{display:flex;align-items:center;justify-content:flex-end;gap:10px 16px;flex-wrap:wrap;max-width:620px}
.sa-footer-links a{color:#94a3b8;text-decoration:none;white-space:nowrap}
.sa-footer-links a:hover{color:#67e8f9}
.sa-footer-sep{max-width:1180px;margin:16px auto 0;border-top:1px solid rgba(100,116,139,.12);padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#64748b;font-size:.78em;line-height:1.45}
.sa-footer-disclaimer{max-width:760px}
.sa-footer-lang{border:1px solid rgba(100,116,139,.28);border-radius:6px;padding:3px 9px;color:#94a3b8;text-decoration:none}
.sa-footer-lang:hover{border-color:#67e8f9;color:#e2e8f0}
@media(max-width:720px){
  .sa-footer{padding:20px 16px 16px}
  .sa-footer-inner,.sa-footer-sep{display:block}
  .sa-footer-links{justify-content:flex-start;margin-top:12px;gap:8px 14px}
  .sa-footer-sep>*{display:block;margin-top:8px}
}