/* =========================================================
   Premium UI redesign layer
   Dark gambling/economy dashboard style.
   This file intentionally overrides the older Tailwind-heavy
   styling without renaming/removing JS IDs or event hooks.
   ========================================================= */
:root {
  --bg-0: #08090f;
  --bg-1: #0e111a;
  --bg-2: #151925;
  --bg-3: #1d2332;
  --surface: rgba(18, 21, 32, .88);
  --surface-strong: rgba(22, 26, 39, .96);
  --surface-soft: rgba(255,255,255,.052);
  --surface-hover: rgba(255,255,255,.078);
  --line: rgba(255,255,255,.105);
  --line-strong: rgba(255,255,255,.16);
  --text: #f6f7fb;
  --text-soft: #d9deea;
  --muted: #a7adbd;
  --muted-2: #777f91;
  --accent: #e11d48;
  --accent-2: #fb7185;
  --accent-deep: #9f1239;
  --accent-soft: rgba(225, 29, 72, .15);
  --good: #10b981;
  --warn: #f59e0b;
  --blue: #3b82f6;
  --shadow-soft: 0 18px 55px rgba(0,0,0,.32);
  --shadow-card: 0 14px 38px rgba(0,0,0,.28);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --font-main: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg-0); color-scheme: dark; }
body {
  min-height: 100vh;
  color: var(--text) !important;
  font-family: var(--font-main) !important;
  background:
    radial-gradient(circle at 18% 4%, rgba(225,29,72,.15), transparent 34%),
    radial-gradient(circle at 82% 12%, rgba(124,58,237,.10), transparent 34%),
    linear-gradient(180deg, #090a10 0%, #0d1018 48%, #08090f 100%) !important;
  letter-spacing: -0.011em;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 72%);
  z-index: 0;
}
main { position: relative; z-index: 1; padding: 22px !important; }
.glass {
  max-width: 1440px !important;
  background: rgba(10,12,19,.72) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 28px 100px rgba(0,0,0,.42) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  border-radius: 28px !important;
  padding: 18px !important;
}

/* Header */
.app-header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(24,28,42,.90), rgba(14,17,26,.90)) !important;
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  box-shadow: var(--shadow-card) !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
}
.app-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(225,29,72,.13), transparent 40%, rgba(255,255,255,.03));
  pointer-events: none;
}
.app-header > * { position: relative; z-index: 1; }
.app-header h1, #header-title {
  color: var(--text) !important;
  font-size: clamp(28px, 3.2vw, 46px) !important;
  line-height: .96 !important;
  letter-spacing: -.06em !important;
  font-weight: 950 !important;
  text-shadow: none !important;
}
#top-status { color: var(--muted) !important; font-size: 14px !important; font-weight: 750 !important; }
.eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  background: rgba(225,29,72,.12) !important;
  border: 1px solid rgba(244,63,94,.28) !important;
  color: #fecdd3 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  padding: 6px 11px !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  font-weight: 900 !important;
}
.stat-pill {
  min-width: 112px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
}
.stat-pill span { color: var(--muted-2) !important; font-size: 10px !important; letter-spacing: .12em !important; font-weight: 850 !important; }
.stat-pill strong { color: var(--text) !important; font-size: 15px !important; font-weight: 900 !important; }
.header-room-actions { gap: 8px !important; }

/* Buttons */
button, .btn, .choice-btn, .auth-mini, .auth-secondary, #refresh-lobbies, #close-code-join {
  appearance: none !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease !important;
  font-weight: 850 !important;
  letter-spacing: -.01em !important;
}
button:hover:not(:disabled), .btn:hover:not(:disabled), .choice-btn:hover:not(:disabled), .auth-mini:hover:not(:disabled), .auth-secondary:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.22) !important;
  border-color: rgba(255,255,255,.18) !important;
}
button:active:not(:disabled), .btn:active:not(:disabled), .choice-btn:active:not(:disabled) { transform: translateY(0) !important; }
button:disabled, .btn:disabled, .choice-btn:disabled { opacity: .45 !important; cursor: not-allowed !important; transform: none !important; }
.btn, #auth-login, #join-code-submit, #open-code-join, #lobby-chat-send {
  background: linear-gradient(180deg, var(--accent-2), var(--accent)) !important;
  color: #fff !important;
}
#auth-register, #create-lobby { background: linear-gradient(180deg, #fb7185, #e11d48) !important; color: #fff !important; }
#refresh-lobbies, #copy-lobby, #leave-lobby, #close-code-join, #auth-logout, #reset-match {
  background: rgba(255,255,255,.075) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Inputs */
input, select {
  border-radius: 13px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.07) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  outline: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}
input::placeholder { color: rgba(245,245,245,.38) !important; }
input:focus, select:focus {
  border-color: rgba(244,63,94,.58) !important;
  box-shadow: 0 0 0 4px rgba(225,29,72,.14) !important;
  background: rgba(255,255,255,.095) !important;
}
option { background: #11131d; color: var(--text); }

/* Landing / auth */
.landing-wrap { grid-template-columns: minmax(340px, 430px) 1fr !important; gap: 16px !important; align-items: stretch !important; }
.landing-auth {
  background: linear-gradient(180deg, rgba(24,28,42,.96), rgba(14,17,26,.94)) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: 24px !important;
  padding: 22px !important;
}
.landing-title { color: var(--text) !important; font-size: clamp(34px, 4.8vw, 58px) !important; letter-spacing: -.065em !important; font-weight: 950 !important; }
.landing-copy { color: var(--muted) !important; font-size: 14px !important; line-height: 1.55 !important; max-width: 32rem; }
.auth-box {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 13px !important;
  color: var(--text) !important;
}
.auth-box input { background: rgba(255,255,255,.07) !important; color: var(--text) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: none !important; }
.auth-actions { grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
.auth-status {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--muted) !important;
  border-radius: 13px !important;
  padding: 9px 10px !important;
  font-size: 12px !important;
}
.auth-status.logged-in { background: rgba(16,185,129,.10) !important; color: #bbf7d0 !important; border-color: rgba(16,185,129,.25) !important; }
.auth-secondary { background: rgba(225,29,72,.12) !important; color: #fecdd3 !important; border-color: rgba(225,29,72,.26) !important; }
.game-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
.game-card {
  min-height: 0 !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(24,28,42,.94), rgba(15,18,29,.92)) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 15px !important;
  color: var(--text) !important;
}
.game-card::after { width: 120px !important; height: 120px !important; right: -46px !important; top: -46px !important; background: rgba(225,29,72,.14) !important; filter: blur(0) !important; }
.game-card h3 { color: var(--text) !important; font-size: 22px !important; letter-spacing: -.04em !important; }
.game-card p { color: var(--muted) !important; font-size: 12px !important; }
.stat-grid { gap: 8px !important; }
.stat-box { background: rgba(255,255,255,.052) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 15px !important; padding: 10px !important; }
.stat-card .stat-number { color: var(--text) !important; font-size: 30px !important; letter-spacing: -.055em !important; }
.stat-card .stat-label { color: var(--muted-2) !important; font-size: 9px !important; }
.stat-box strong { color: var(--text) !important; font-size: 13px !important; }
.stat-empty { background: rgba(255,255,255,.045) !important; color: var(--muted) !important; border: 1px solid rgba(255,255,255,.075) !important; }

/* Lobby */
#lobby-screen > div, #join-modal > div {
  background: rgba(18,21,32,.92) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: 22px !important;
}
#lobby-screen label, #join-modal label { color: var(--muted) !important; font-size: 12px !important; }
#lobby-screen h2, #join-modal h2 { color: var(--text) !important; letter-spacing: -.04em !important; }
.lobby-account-bar { background: rgba(255,255,255,.055) !important; border: 1px solid var(--line) !important; border-radius: 17px !important; box-shadow: none !important; }
#lobby-list > div {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--text) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease !important;
}
#lobby-list > div:hover { transform: translateY(-1px); background: rgba(255,255,255,.075) !important; border-color: rgba(244,63,94,.24) !important; }
#lobby-list .text-slate-900, #lobby-list .text-slate-700, #lobby-list .text-slate-600, #lobby-list .text-slate-500 { color: var(--text) !important; }
#lobby-list .text-slate-600, #lobby-list .text-slate-500 { color: var(--muted) !important; }

/* Game */
#game-screen > .grid { gap: 14px !important; }
#game-screen aside.side-card, #game-screen section.side-card, #middle-chat-card, .chat-card {
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(23,27,40,.94), rgba(14,17,26,.92)) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text) !important;
}
#game-screen section.side-card { padding: 14px !important; }
#game-screen aside.side-card { padding: 10px !important; }
#game-screen aside.side-card > div, #red-options-section, #blue-options-section, #red-panel .rounded-2xl, #blue-panel .rounded-2xl {
  background: rgba(255,255,255,.052) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 17px !important;
  color: var(--text) !important;
}
.player-panel.is-mine {
  background: linear-gradient(180deg, rgba(25,31,47,.96), rgba(15,18,29,.94)) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: var(--shadow-card), inset 4px 0 0 rgba(59,130,246,.75) !important;
}
.player-panel.is-opponent {
  background: linear-gradient(180deg, rgba(25,31,47,.96), rgba(15,18,29,.94)) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: var(--shadow-card), inset 4px 0 0 rgba(225,29,72,.78) !important;
}
.player-panel h2 { color: var(--text) !important; font-size: 20px !important; letter-spacing: -.04em !important; }
.player-panel p, .player-panel .text-blue-50\/90, .player-panel .text-red-50\/90, .player-panel .text-blue-50\/70, .player-panel .text-red-50\/70 { color: var(--muted) !important; }
.bet-badge { background: rgba(255,255,255,.065) !important; border: 1px solid rgba(255,255,255,.10) !important; color: var(--text) !important; border-radius: 14px !important; box-shadow: none !important; }
.bet-badge-label { color: var(--muted-2) !important; }
.bet-badge-value { color: var(--text) !important; }
#winner { color: var(--text) !important; font-size: 25px !important; letter-spacing: -.055em !important; }
#winner-detail, #decision-detail, #summary-red, #summary-blue, #red-values, #blue-values { color: var(--muted) !important; }
#decision-title { color: var(--text) !important; }
#summary-red-choice, #summary-blue-choice, #summary-streak, #red-streak, #blue-streak { background: rgba(255,255,255,.06) !important; color: var(--text) !important; border: 1px solid rgba(255,255,255,.08) !important; }
.choice-btn.bg-emerald-500 { background: linear-gradient(180deg, #34d399, #059669) !important; box-shadow: none !important; }
.choice-btn.bg-slate-950, #red-end, #blue-end { background: rgba(255,255,255,.075) !important; color: var(--text) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: none !important; }
.dice-shell { filter: drop-shadow(0 14px 20px rgba(0,0,0,.32)); }
.dice-value-pill { background: rgba(10,12,19,.82) !important; border: 1px solid rgba(255,255,255,.12) !important; color: var(--text) !important; box-shadow: none !important; }
.dice-shell.can-roll .dice-value-pill { color: #fecdd3 !important; border-color: rgba(244,63,94,.38) !important; background: rgba(225,29,72,.12) !important; }

/* Chat */
#middle-chat-card { background: rgba(255,255,255,.052) !important; box-shadow: none !important; padding: 11px !important; }
.chat-head h3 { color: var(--text) !important; font-size: 16px !important; }
.chat-pill { background: rgba(225,29,72,.12) !important; color: #fecdd3 !important; border: 1px solid rgba(225,29,72,.22) !important; }
#lobby-chat-messages { scrollbar-color: rgba(244,63,94,.45) transparent; }
.chat-empty, .chat-msg { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.08) !important; color: var(--muted) !important; }
.chat-msg.mine { background: rgba(59,130,246,.13) !important; border-color: rgba(59,130,246,.22) !important; }
.chat-msg.opponent { background: rgba(225,29,72,.12) !important; border-color: rgba(225,29,72,.24) !important; }
.chat-meta { color: var(--muted-2) !important; }
.chat-text { color: var(--text) !important; }

/* Modal */
#join-modal { backdrop-filter: blur(10px); background: rgba(0,0,0,.58) !important; }
#join-code-input { font-size: 28px !important; letter-spacing: .22em !important; }

/* Utility overrides from Tailwind-heavy markup */
.bg-white\/75, .bg-white\/70, .bg-slate-100, .bg-slate-200 { background-color: rgba(255,255,255,.06) !important; }
.text-slate-950, .text-slate-900, .text-slate-800, .text-slate-700 { color: var(--text) !important; }
.text-slate-600, .text-slate-500 { color: var(--muted) !important; }
.border-slate-300 { border-color: rgba(255,255,255,.12) !important; }

@media (min-width: 1101px) {
  #game-screen > .grid { grid-template-columns: minmax(340px,1fr) 330px minmax(340px,1fr) !important; }
}
@media (max-width: 1180px) {
  .game-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  main { padding: 12px !important; }
  .glass { padding: 12px !important; border-radius: 22px !important; }
  .app-header { padding: 14px !important; }
  .landing-wrap { grid-template-columns: 1fr !important; }
  .game-showcase { grid-template-columns: 1fr !important; }
  #lobby-screen { grid-template-columns: 1fr !important; }
  .header-stats { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid !important; }
  .stat-pill { width: 100% !important; min-width: 0 !important; }
  .header-room-actions { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; }
  #game-screen section.side-card { padding: 12px !important; }
}