/* Game Archive — theme for /ai (the user's AI page).
   Part 1: the site nav bar styles (copied verbatim from the inline
   <style id="ga-tabs-css"> used on every page). Part 2: AI re-skin.
   Published by /workspace/gamearchive-publish-ai.sh */
  .ga-tabs {
    position: relative; z-index: 30;
    display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    margin: 12px auto 20px; padding: 8px 10px; max-width: 880px;
    background: rgba(10,10,18,.88); border: 1px solid #34344a; border-radius: 16px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0,0,0,.4);
  }
  @media (min-width: 1060px) { .ga-tabs { justify-content: center; } }
  .ga-tabs a {
    flex-shrink: 0;
    text-decoration: none; color: #c5cde0;
    font: 900 13px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
    font-style: italic;
    padding: 12px 18px; border-radius: 10px; border: 1px solid transparent;
    transform: skewX(-6deg); transition: background .12s, color .12s, transform .12s;
    white-space: nowrap;
  }
  .ga-tabs a > span { display: inline-block; transform: skewX(6deg); }
  .ga-tabs a:hover { color: #fff; background: rgba(126,200,80,.14); transform: skewX(-6deg) translateY(-1px); }
  .ga-tabs a.on {
    color: #0b1206; background: linear-gradient(180deg, #9dff6a, #6fbf3a);
    border-color: #5aa82e; box-shadow: 0 6px 18px rgba(126,200,80,.35);
  }
  .ga-tabs .ga-tabs-xp {
    flex-shrink: 0; margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; border-radius: 999px;
    background: rgba(255,215,0,.1); border: 1px solid rgba(255,215,0,.4);
    color: #ffd700; font: 900 12px/1 system-ui, sans-serif; letter-spacing: .08em;
    white-space: nowrap;
  }
  .ga-tabs .ga-tabs-xp b { font-variant-numeric: tabular-nums; }

/* ===== AI page: re-skin the user's AI to the Game Archive theme =====
   Loaded AFTER the AI's own <style>, so these rules win. The Matrix rain
   background itself comes from /js/mrain.js (same as every other page). */
:root, :root[data-theme], :root:not([data-theme="light"]) {
  --bg: rgba(6,10,6,.85) !important;
  --card: rgba(10,10,18,.88) !important;
  --ink: #ffffff !important;
  --muted: #b9c7b0 !important;
  --line: #34344a !important;
  --bubble-ai: rgba(30,36,40,.92) !important;
  --accent: #7ec850 !important;
  --accent-2: #9dff6a !important;
  --bubble-user: linear-gradient(180deg, #9dff6a, #6fbf3a) !important;
  --danger: #ff6b6b !important;
  --orb-a: #6fbf3a !important;
  --orb-b: #1f5f12 !important;
  --shadow: 0 12px 30px rgba(0,0,0,.4) !important;
  color-scheme: dark;
}
html { background: #000 !important; }
html, body { height: 100%; }
body {
  background: transparent !important;
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; overflow: hidden;
}
body > .ga-tabs { flex: none; width: calc(100% - 4px); margin-bottom: 8px; }
body > .app { flex: 1 1 auto; min-height: 0; height: auto; width: 100%; padding-top: 0; }

/* hero + headings in site style */
.hero h1, .panel h2, .st-title {
  font-family: 'Poppins', system-ui, sans-serif !important;
  letter-spacing: .04em;
}
.hero h1 {
  background: linear-gradient(180deg, #9dff6a, #6fbf3a) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
  text-shadow: none;
}
.orb { box-shadow: 0 0 34px rgba(126,200,80,.55), inset 0 0 14px rgba(255,255,255,.25) !important;
       background: radial-gradient(circle at 32% 28%, #e4ffd4 0%, #6fbf3a 46%, #1f5f12 88%) !important; }
.avatar-dot { background: radial-gradient(circle at 32% 28%, #e4ffd4 0%, #6fbf3a 50%, #1f5f12 90%) !important;
              box-shadow: 0 0 10px rgba(126,200,80,.45) !important; }

/* glassy dark card like the nav bar */
.card, .panel, .studio-bar, .studio-frames {
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.msg.user .bubble { color: #0b1206 !important; font-weight: 700; }
.btn.primary, .btn.primary:hover { color: #0b1206 !important; }
.btn:hover { color: #fff !important; background: rgba(126,200,80,.14); border-color: #7ec850; }
.composer input { background: rgba(0,0,0,.55) !important; color: #fff !important; }
.stat-pill { background: rgba(126,200,80,.12) !important; color: #9dff6a !important; border-color: #5aa82e !important; }
.overlay { background: rgba(0,0,0,.6); }