/* ============================================================
   BeatBetGames — arcade / ticket-booth HUD
   A full identity swap from the previous violet-gradient pass:
   condensed marquee display type + monospace LED numerals,
   acid-lime / hot-magenta duotone on near-black eggplant,
   ticket-notched cards, scanline atmosphere. The equalizer
   meter is functional (active-state indicator), not decoration.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=JetBrains+Mono:wght@500;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --void:    #0c0710;
  --panel:   #170f1e;
  --panel2:  #211532;
  --line:    rgba(255,255,255,0.09);
  --line2:   rgba(255,255,255,0.18);
  --paper:   #f6f2ff;
  --dim:     #948aad;

  --lime:    #d4ff3f;
  --hot:     #ff2e6b;

  --win:     #3dffb0;
  --lose:    #ff4d6d;
  --amber:   #ffb238;

  --radius:  4px;
  --font-display: 'Bebas Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
button {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: none; border: none; margin: 0; font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
html { background: var(--void); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; position: relative;
  background:
    radial-gradient(900px 420px at 8% -6%, rgba(212,255,63,0.10), transparent 58%),
    radial-gradient(820px 460px at 104% 4%, rgba(255,46,107,0.14), transparent 55%),
    var(--void);
  color: var(--paper);
  font-family: var(--font-body);
}
a { color: var(--lime); -webkit-tap-highlight-color: transparent; }

/* faint CRT scanline overlay — atmosphere, not a functional element */
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(
    to bottom, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px
  );
  mix-blend-mode: overlay; opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) { .scanlines { display: none; } }

/* ---------------- wordmark (shared by all three layouts) ---------------- */
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-mark { width: 24px; height: 18px; overflow: visible; }
.brand-mark .bar { fill: var(--lime); transform-origin: bottom center; animation: eq 1.15s ease-in-out infinite; }
.brand-mark .b1 { fill: var(--hot); animation-delay: -0.9s; }
.brand-mark .b2 { animation-delay: -0.5s; }
.brand-mark .b3 { fill: var(--hot); animation-delay: -1.1s; }
.brand-mark .b4 { animation-delay: -0.2s; }
.brand-mark .b5 { fill: var(--hot); animation-delay: -0.7s; }
@keyframes eq {
  0%, 100% { transform: scaleY(0.45); }
  50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .brand-mark .bar { animation: none; } }
.brand-word {
  font-family: var(--font-display); font-size: 22px; letter-spacing: 0.03em;
  color: var(--paper); line-height: 1; padding-top: 2px;
}

.topnav-link {
  color: var(--dim); text-decoration: none; text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600; font-size: 12px; transition: color .15s ease;
}
.topnav-link:hover { color: var(--lime); }
.lang-switch { display: flex; gap: 2px; flex-wrap: wrap; }
.lang-switch a {
  padding: 3px 8px; font-size: 11px; text-decoration: none; color: var(--dim);
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid transparent;
}
.lang-switch a.lang-active { color: var(--paper); border-bottom-color: var(--hot); font-weight: 700; }

html[dir="rtl"] .provider-dock { text-align: right; }
html[dir="rtl"] .dock-item { border-left: none; border-right: 2px solid transparent; border-radius: var(--radius) 0 0 var(--radius); }
html[dir="rtl"] .dock-active { border-right-color: var(--lime); }
html[dir="rtl"] .game-grid { direction: rtl; }

/* ---------------- shell layout (sidebar + main) ---------------- */
.shell {
  display: grid; grid-template-columns: 240px 1fr; min-height: 100vh;
}
.sidebar {
  background: var(--panel); border-right: 1px solid var(--line);
  padding: 22px 18px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand { margin-bottom: 26px; }

.provider-dock { display: flex; flex-direction: column; gap: 3px; }
.dock-item-form { display: block; margin: 0; padding: 0; }
.dock-item-form .dock-item {
  display: block; width: 100%; text-align: inherit; background: none; border: none;
  border-left: 2px solid transparent; font-family: inherit; cursor: pointer;
}
.dock-label {
  font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 700; margin: 4px 2px 8px;
}
.dock-item {
  padding: 9px 11px; color: var(--dim); text-decoration: none; font-size: 13px; font-weight: 600;
  border-left: 2px solid transparent; border-radius: 0 var(--radius) var(--radius) 0;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.dock-item:hover { color: var(--paper); background: var(--panel2); }
.dock-active { color: var(--lime); border-left-color: var(--lime); background: var(--panel2); }

.sidebar-spacer { flex: 1; }
.sidebar-footer { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.sidebar-footer .balance-pill { align-self: flex-start; }

.main { padding: 30px 34px 60px; min-width: 0; }

/* ---------------- full-bleed layout (game player) ---------------- */
.topbar-mini {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 20px; background: rgba(12,7,16,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10;
}
.brand-sm .brand-mark { width: 20px; height: 15px; }
.content-bleed { padding: 16px 20px 20px; }

/* ---------------- auth-split layout ---------------- */
.auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth-visual {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background:
    radial-gradient(700px 380px at 30% 20%, rgba(212,255,63,0.14), transparent 60%),
    radial-gradient(600px 420px at 90% 90%, rgba(255,46,107,0.16), transparent 55%),
    var(--panel);
  border-right: 1px solid var(--line);
}
.auth-mark .brand-mark { width: 64px; height: 46px; }
.auth-word { font-family: var(--font-display); font-size: 44px; letter-spacing: 0.04em; }
.auth-tagline { color: var(--dim); font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; }
.content-plain { display: flex; align-items: center; justify-content: center; padding: 30px 20px; }

.balance-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel2); border: 1px solid var(--line2);
  padding: 5px 12px 5px 10px; font-family: var(--font-mono); font-weight: 700;
  font-size: 13px; letter-spacing: 0.02em; color: var(--lime);
}
.balance-led {
  width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 6px 1px var(--lime); animation: led-blink 1.6s steps(1) infinite;
}
@keyframes led-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }

h1, h2 { font-family: var(--font-display); letter-spacing: 0.02em; font-weight: 400; }
h1 { font-size: 34px; margin: 0 0 6px; }
h2 { font-size: 24px; }

.flash { padding: 11px 15px; margin-bottom: 20px; font-size: 13px; border-left: 3px solid; background: var(--panel); }
.flash-success { border-color: var(--win); color: var(--win); }
.flash-error   { border-color: var(--lose); color: var(--lose); }
.flash-info    { border-color: var(--lime); color: var(--lime); }

.error { color: var(--lose); font-size: 14px; }
.muted { color: var(--dim); font-size: 13px; }

/* ---------------- auth "ticket" card ---------------- */
.auth-card {
  max-width: 380px; margin: 52px auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px;
  position: relative;
  background-image: radial-gradient(circle at 0 50%, var(--void) 8px, transparent 8.5px),
                     radial-gradient(circle at 100% 50%, var(--void) 8px, transparent 8.5px);
  background-position: left center, right center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
}
.auth-card::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 0;
  border-top: 1px dashed var(--line2);
}
.auth-card h1 { margin-top: 0; font-size: 30px; }
.auth-card label { display: block; font-size: 11px; color: var(--dim); margin: 14px 0 5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.auth-card input {
  width: 100%; padding: 11px 13px; background: var(--void); border: 1px solid var(--line2);
  border-radius: var(--radius); color: var(--paper); font-size: 16px; font-family: var(--font-body);
}
.auth-card input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(212,255,63,0.18); }

.btn {
  width: 100%; margin-top: 20px; padding: 13px; color: var(--void);
  background: var(--lime); border: none; border-radius: var(--radius);
  font-family: var(--font-display); font-size: 18px; letter-spacing: 0.05em; cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}
.btn:hover { background: var(--hot); color: var(--paper); }
.btn:active { transform: translateY(1px); }

.btn-sm {
  display: inline-block; padding: 7px 13px; background: var(--panel2); border: 1px solid var(--line2);
  border-radius: var(--radius); color: var(--paper); text-decoration: none; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; font-family: inherit; cursor: pointer;
}
.btn-sm:hover { border-color: var(--lime); color: var(--lime); }
.back-form { display: inline-block; margin: 0; }

.test-mode-banner {
  background: var(--panel); border-left: 3px solid var(--lime); color: var(--dim);
  padding: 14px 16px; font-size: 13px; line-height: 1.55; margin-bottom: 22px;
}

.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.game-card-form { margin: 0; padding: 0; }
.game-card {
  display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--paper);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  width: 100%; padding: 0; font-family: inherit; cursor: pointer; text-align: inherit;
}
.game-card:hover {
  border-color: var(--hot); transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(255,46,107,0.22);
}
.game-card:active { transform: translateY(0); border-color: var(--hot); }
.dock-item:active { color: var(--paper); background: var(--panel2); }
.btn-sm:active { border-color: var(--lime); color: var(--lime); }
.game-card-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--panel2); color: var(--dim);
}
.game-card-mark.brand-mark { width: 40%; max-width: 56px; height: auto; }
.game-card-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 10px 8px;
  font-size: 12px; font-weight: 700; line-height: 1.3;
  background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0));
  color: #fff;
}

.game-frame-wrap {
  display: flex; flex-direction: column;
  height: calc(100vh - 130px);
  height: calc(100dvh - 130px);
}
.game-frame-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.game-frame { flex: 1; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: black; }

/* ============================================================
   Responsive overrides — MUST stay last in the file. Any base
   rule added above this point will win the cascade over these
   on equal specificity if it comes later in source order, even
   inside a matching @media block, so don't insert new rules
   below this comment.
   ============================================================ */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
  .sidebar .brand { margin-bottom: 0; }
  .provider-dock { flex-direction: row; flex-wrap: wrap; }
  .dock-item { border-left: none; border-bottom: 2px solid transparent; border-radius: var(--radius); }
  .dock-active { border-left: none; border-bottom-color: var(--lime); }
  .sidebar-spacer { display: none; }
  .sidebar-footer { flex-direction: row; flex-wrap: wrap; border-top: none; padding-top: 0; }
  .main { padding: 22px 18px 44px; }
  .auth-split { grid-template-columns: 1fr; }
  .auth-visual { padding: 34px 20px; border-right: none; border-bottom: 1px solid var(--line); }
}

@media (max-width: 480px) {
  html, body { overflow-x: hidden; }
  .sidebar { padding: 16px 14px; gap: 10px; }
  .topbar-mini { padding: 8px 14px; flex-wrap: wrap; gap: 8px; }
  h1 { font-size: 26px; }
  h2 { font-size: 19px; }
  .main { padding: 18px 14px 36px; }
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .auth-card { margin: 30px auto; padding: 22px 18px; max-width: 100%; }
  .auth-word { font-size: 32px; }
  .balance-pill { font-size: 12px; padding: 5px 10px 5px 8px; }
  .game-frame-wrap { height: calc(100vh - 110px); height: calc(100dvh - 110px); }
  .game-frame-bar { flex-wrap: wrap; gap: 8px; }
}