:root {
  color-scheme: light;
  --bg: #f3ead3;
  --surface: #fffaf0;
  --surface-raised: #ffffff;
  --surface-soft: #e4f3ef;
  --line: #bcd8d2;
  --line-bright: #84b9b3;
  --text: #153f45;
  --muted: #5c7678;
  --violet: #087f8c;
  --violet-bright: #079ba1;
  --lime: #ffc857;
  --red: #ee6c4d;
  --green: #22c55e;
  --yellow: #eab308;
  --gray-tile: #596275;
  --keyboard-gray: #40515a;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 11px;
  --shadow: 0 24px 60px rgba(30, 90, 88, 0.12);
  --header-bg: rgba(255, 250, 240, 0.88);
  --message-error-bg: #fff0eb;
  --message-success-bg: #ecfff5;
  --message-info-bg: #e8fbfa;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101a1e;
  --surface: #16262b;
  --surface-raised: #1c3036;
  --surface-soft: #1f3b3d;
  --line: #34565b;
  --line-bright: #4b7c81;
  --text: #e6f4f1;
  --muted: #adc4c4;
  --violet: #58cbc7;
  --violet-bright: #86e4df;
  --lime: #f7c765;
  --red: #f08468;
  --green: #51d687;
  --yellow: #f0c945;
  --gray-tile: #53666d;
  --keyboard-gray: #10282d;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  --header-bg: rgba(22, 38, 43, 0.9);
  --message-error-bg: #42231f;
  --message-success-bg: #193a2a;
  --message-info-bg: #17383b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #101a1e;
    --surface: #16262b;
    --surface-raised: #1c3036;
    --surface-soft: #1f3b3d;
    --line: #34565b;
    --line-bright: #4b7c81;
    --text: #e6f4f1;
    --muted: #adc4c4;
    --violet: #58cbc7;
    --violet-bright: #86e4df;
    --lime: #f7c765;
    --red: #f08468;
    --green: #51d687;
    --yellow: #f0c945;
    --gray-tile: #53666d;
    --keyboard-gray: #10282d;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    --header-bg: rgba(22, 38, 43, 0.9);
    --message-error-bg: #42231f;
    --message-success-bg: #193a2a;
    --message-info-bg: #17383b;
  }
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

button, input, textarea { font: inherit; }

a { color: inherit; }

.ambient {
  position: fixed;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.12;
  pointer-events: none;
}

.ambient-one { top: -180px; right: -100px; background: var(--violet-bright); opacity: 0.16; }
.ambient-two { bottom: -260px; left: -160px; background: var(--lime); opacity: 0.16; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 76px;
  padding: 0 5vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  font-weight: 850;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #ff7f50;
  color: #fffaf0;
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: -0.05em;
  box-shadow: 4px 4px 0 var(--lime);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.site-nav a {
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 750;
  text-decoration: none;
  transition: color 160ms ease, background 160ms ease;
}

.site-nav a:hover { color: var(--text); }
.site-nav a.active { background: var(--surface-soft); color: var(--violet); }

.account-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.theme-toggle {
  min-height: 34px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 800;
}

.theme-toggle:hover { background: var(--surface-soft); color: var(--text); box-shadow: none; }
.theme-toggle [data-theme-icon] { font-size: 1rem; line-height: 1; }
.auth-theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 30; }

.user-chip, .logout-link {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.user-chip {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.user-chip:hover, .logout-link:hover { color: var(--text); border-color: var(--line-bright); }

.site-main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 58px 0 80px;
}

.page-shell { display: grid; gap: 24px; }

.page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 8px;
}

.eyebrow {
  margin: 0 0 10px;
  color: #cf563c;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 12px;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

h2 { margin-bottom: 18px; font-size: clamp(1.35rem, 2vw, 1.8rem); letter-spacing: -0.035em; }
h3 { margin-bottom: 6px; font-size: 1.05rem; letter-spacing: -0.02em; }
p { color: var(--muted); }

.lede { max-width: 620px; margin-bottom: 0; font-size: 1.05rem; }
.muted { color: var(--muted); }

.panel {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.hero-panel {
  position: relative;
  min-height: 250px;
  display: flex;
  align-items: end;
  overflow: hidden;
  background: var(--surface-soft);
}

.hero-panel::after {
  content: "";
  position: absolute;
  top: -62px;
  right: -35px;
  width: 230px;
  height: 230px;
  border: 36px solid var(--lime);
  border-radius: 50%;
  opacity: 0.72;
}

.hero-copy { position: relative; z-index: 1; max-width: 720px; }

.discord-status { padding: 15px 18px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.discord-status-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-soft); color: var(--muted); font-weight: 950; }
.discord-status > span:nth-child(2) { display: grid; }
.discord-status strong { font-size: 0.9rem; }
.discord-status small { color: var(--muted); font-size: 0.77rem; }
.discord-actions { display: flex; align-items: center; gap: 14px; }
.discord-test-form { display: block; }
.discord-test-form button { min-height: 34px; padding: 7px 11px; border: 1px solid var(--line-bright); background: var(--surface-soft); color: var(--violet); font-size: 0.76rem; }
.discord-test-form button:hover { background: var(--surface-raised); box-shadow: none; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #a3a9b2; box-shadow: 0 0 0 5px rgba(163, 169, 178, 0.13); }
.discord-status.connected { border-color: var(--line-bright); background: var(--surface-soft); }
.discord-status.connected .discord-status-mark { background: #5865f2; color: white; }
.discord-status.connected .status-dot { background: #22a06b; box-shadow: 0 0 0 5px rgba(34, 160, 107, 0.13); }

.quick-grid, .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

.feature-card {
  min-height: 210px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.feature-card:hover { transform: translateY(-4px); border-color: var(--violet); background: var(--surface-raised); }
.feature-card:nth-child(2):hover { border-color: var(--lime); }
.feature-card:nth-child(3):hover { border-color: var(--violet-bright); }

.feature-number {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 34px;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  color: var(--violet);
  font-size: 0.72rem;
  font-weight: 900;
}

.feature-card h2 { margin-bottom: 6px; }
.feature-card p { margin-bottom: 20px; font-size: 0.92rem; }
.feature-arrow { margin-top: auto; color: var(--violet-bright); font-weight: 900; }

.utility-row { display: flex; justify-content: flex-end; }
.text-link { color: var(--muted); font-size: 0.9rem; font-weight: 750; text-decoration: none; }
.text-link:hover { color: var(--violet); }

.content-grid { display: grid; grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.4fr); gap: 24px; align-items: start; }
.game-layout { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr); }
.stack { display: grid; gap: 16px; }

form { display: grid; gap: 13px; }
label { color: var(--text); font-size: 0.84rem; font-weight: 800; }

input, textarea {
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--surface-raised);
  color: var(--text);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus { border-color: var(--violet-bright); box-shadow: 0 0 0 3px rgba(8, 127, 140, 0.16); }
textarea { min-height: 112px; resize: vertical; }

button, .button {
  min-height: 45px;
  padding: 11px 17px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--violet);
  color: white;
  cursor: pointer;
  font-weight: 850;
  text-decoration: none;
  transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

button:hover, .button:hover { transform: translateY(-1px); background: var(--violet-bright); box-shadow: 0 10px 28px rgba(8, 127, 140, 0.2); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.button-lime { background: var(--lime); color: #5d4100; }
.button-lime:hover { background: #ffd873; box-shadow: 0 10px 28px rgba(255, 200, 87, 0.22); }
.button-secondary { border: 1px solid var(--line-bright); background: var(--surface-soft); }

.delete-btn { min-height: 36px; padding: 8px 12px; background: transparent; border: 1px solid var(--red); color: var(--red); font-size: 0.8rem; }
.delete-btn:hover { background: var(--message-error-bg); box-shadow: none; }

.message {
  padding: 13px 16px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 700;
}

.flash-stack { display: grid; gap: 10px; margin-bottom: 22px; }
.message.error { border-color: var(--red); background: var(--message-error-bg); color: var(--text); }
.message.success { border-color: var(--green); background: var(--message-success-bg); color: var(--text); }
.message.info { border-color: var(--violet-bright); background: var(--message-info-bg); color: var(--text); }

.game-list, .leaderboard, .guess-list, .plan-list { display: grid; gap: 12px; }
.result-list, .activity-feed { display: grid; gap: 12px; }

.game-item, .plan-item, .leaderboard-item, .user-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.game-item { padding: 18px; display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.game-item p { margin-bottom: 10px; }
.meta { color: var(--muted); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

.empty-state { padding: 36px 20px; border: 1px dashed var(--line-bright); border-radius: var(--radius-md); text-align: center; color: var(--muted); }

.wordle-form { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.wordle-form input { min-height: 52px; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.guess-grid { display: grid; gap: 9px; margin-top: 24px; }
.guess-row { display: flex; gap: 7px; align-items: center; }

.tile {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: white;
  font-weight: 950;
  text-transform: uppercase;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.tile.green { background: var(--green); color: #073e22; }
.tile.yellow { background: var(--yellow); color: #493700; }
.tile.gray { background: var(--gray-tile); }
.empty-guess .tile { border: 2px solid var(--line); background: var(--surface-soft); box-shadow: none; }

.wordle-keyboard { display: grid; gap: 7px; margin-top: 24px; }
.wordle-keyboard-row { display: flex; justify-content: center; gap: 5px; }
.wordle-key {
  width: 34px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14);
}
.wordle-key.green { background: var(--green); color: #073e22; }
.wordle-key.yellow { background: var(--yellow); color: #493700; }
.wordle-key.gray { background: var(--keyboard-gray); color: white; }

.leaderboard-item { padding: 15px 17px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.leaderboard-item span:first-child { font-weight: 850; }
.leaderboard-item span:last-child { color: var(--muted); font-size: 0.9rem; }

.activity-panel { box-shadow: none; }
.activity-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
.activity-item { padding: 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); text-decoration: none; transition: transform 160ms ease, border-color 160ms ease; }
.activity-item:hover { transform: translateY(-2px); border-color: var(--violet); }
.activity-avatar, .comment-avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--surface-soft); color: var(--violet); font-size: 0.8rem; font-weight: 950; }
.activity-copy { display: grid; color: var(--muted); font-size: 0.9rem; }
.activity-copy strong { color: var(--text); }
.activity-copy small { margin-top: 3px; color: #829997; font-size: 0.72rem; }
.activity-arrow { color: #cf563c; font-weight: 950; }

.result-block { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.result-block .leaderboard-item { border: 0; border-radius: 0; background: transparent; }
.comment-thread { padding: 4px 16px 16px; border-top: 1px solid var(--line); background: var(--surface-raised); }
.comment { padding: 14px 0; display: flex; align-items: start; gap: 11px; border-bottom: 1px solid var(--line); }
.comment > div:last-child { min-width: 0; flex: 1; }
.comment-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--text); font-size: 0.8rem; }
.comment-meta span { color: #829997; font-size: 0.7rem; }
.comment p { margin: 3px 0 0; color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.no-comments { margin: 13px 0; font-size: 0.85rem; }
.comment-form { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 13px; }
.comment-form input { min-height: 42px; padding: 9px 12px; }
.comment-form button { min-height: 42px; padding: 8px 14px; }
.comment-lock { margin: 14px 2px 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--violet); font-size: 0.84rem; font-weight: 750; }

.stats { margin: 0; }
.stat { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--muted); }
.stat strong { display: block; margin-bottom: 6px; color: var(--violet); font-size: 2rem; line-height: 1; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.topbar h2 { margin-bottom: 0; }
.filter-form { display: flex; align-items: end; gap: 9px; }
.filter-form label { display: grid; gap: 5px; }
.filter-form input { min-width: 170px; }
.filter-form button { min-height: 47px; }

.user-card { padding: 18px; }
.user-card + .user-card { margin-top: 12px; }
.history-row { padding: 8px 0; border-top: 1px solid var(--line); }
.history-row:first-child { border-top: 0; }
.guess-number { width: 30px; color: var(--muted); font-size: 0.8rem; }
.spoiler-letter { visibility: hidden; }
.letters-revealed .spoiler-letter { visibility: visible; }
.guess-word { margin-left: 8px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.count-pill { padding: 6px 10px; border-radius: 999px; background: var(--surface-soft); color: var(--violet); font-size: 0.78rem; font-weight: 850; }
.round-complete { padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--violet); font-weight: 800; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.plan-item { padding: 18px; }

.casino-body { background: #080b0e; color: #f7f0dc; }
.casino-body::before { content: ""; position: fixed; inset: 76px 0 0; z-index: -2; background: radial-gradient(circle at 18% 22%, rgba(255, 46, 83, .16), transparent 30%), radial-gradient(circle at 82% 35%, rgba(245, 188, 65, .12), transparent 29%), linear-gradient(145deg, #10151a, #050708 72%); }
.casino-body .ambient-one { background: #ff284f; opacity: .18; }
.casino-body .ambient-two { background: #ffc857; opacity: .13; }
.casino-body .site-header { background: rgba(8, 11, 14, .9); border-color: rgba(255, 255, 255, .09); }
.casino-body .site-nav, .casino-body .theme-toggle, .casino-body .user-chip { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.1); }
.casino-body .site-nav a.active { background: #f7c765; color: #19140a; }
.casino-body .site-main { width: min(1380px, calc(100% - 36px)); padding-top: 36px; }
.casino-page { --casino-gold: #f6c453; --casino-red: #ef3151; --casino-ink: #080b0e; --casino-panel: rgba(17, 22, 27, .94); display: grid; gap: 22px; }
.casino-masthead { min-height: 150px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 16px 4px 12px; }
.casino-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; color: var(--casino-gold); font-size: .72rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; }
.casino-kicker span { width: 30px; height: 2px; background: var(--casino-red); box-shadow: 0 0 16px var(--casino-red); }
.casino-masthead h1 { margin: 0; color: #fff8e8; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.1rem, 7vw, 6.4rem); font-style: italic; font-weight: 700; letter-spacing: -.075em; line-height: .85; text-shadow: 0 4px 35px rgba(246,196,83,.15); }
.casino-masthead p:last-child { margin: 14px 0 0; color: #87939b; font-size: .93rem; letter-spacing: .03em; }
.casino-wallet { min-width: 250px; padding: 17px 20px; border: 1px solid rgba(246,196,83,.28); border-radius: 14px; background: linear-gradient(145deg, rgba(246,196,83,.12), rgba(255,255,255,.025)); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 16px 40px rgba(0,0,0,.24); }
.wallet-label, .casino-wallet small { display: block; color: #8d969b; font-size: .62rem; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.casino-wallet strong { display: flex; align-items: center; gap: 9px; margin: 3px 0 5px; color: #fff6d9; font-size: 2.2rem; line-height: 1; letter-spacing: -.05em; }
.casino-wallet strong i { color: var(--casino-gold); font-size: 1.2rem; font-style: normal; filter: drop-shadow(0 0 8px rgba(246,196,83,.65)); }
.casino-stage { min-height: 650px; display: grid; grid-template-columns: minmax(580px, 1.25fr) minmax(360px, .75fr); overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: #0e1216; box-shadow: 0 40px 100px rgba(0,0,0,.48); }
.wheel-arena { position: relative; min-height: 650px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 46%, #263039 0, #151b20 35%, #090c0f 72%); }
.wheel-arena::before { content: ""; position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle, #000 10%, transparent 72%); }
.arena-glow { position: absolute; width: 560px; height: 560px; border-radius: 50%; background: rgba(239,49,81,.09); filter: blur(45px); animation: casinoPulse 3.6s ease-in-out infinite; }
.roulette-machine { position: relative; width: min(72%, 470px); aspect-ratio: 1; z-index: 2; filter: drop-shadow(0 34px 30px rgba(0,0,0,.58)); transform: perspective(900px) rotateX(8deg) translateY(-30px); }
.roulette-rim { position: absolute; inset: 0; padding: 16px; border: 2px solid #ffe39a; border-radius: 50%; background: linear-gradient(135deg, #4b3310, #f9d873 23%, #6a4512 49%, #ffe9a8 68%, #5a3a0d); box-shadow: inset 0 0 0 6px #17100a, inset 0 0 0 10px #d5a944, 0 0 0 3px #221809, 0 0 48px rgba(246,196,83,.2); }
.roulette-track { position: relative; width: 100%; height: 100%; border: 5px solid #111518; border-radius: 50%; background: conic-gradient(from -4.865deg, #17784e 0deg 9.729729deg, transparent 9.729729deg 360deg), repeating-conic-gradient(from -4.865deg, #12181d 0deg 9.729729deg, #d92b48 9.729729deg 19.459458deg); transition: transform 4.55s cubic-bezier(.12,.58,.08,1); box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), inset 0 0 40px #000; }
.roulette-track::before { content: ""; position: absolute; inset: 22%; z-index: 1; border: 3px solid #d8a941; border-radius: 50%; background: radial-gradient(circle, #7e101f 0 22%, #250b0d 23% 39%, #b98025 40% 43%, #11161a 44% 100%); box-shadow: 0 0 0 9px #0c0f12, 0 0 0 11px #f1cc6e, inset 0 0 28px #000; }
.roulette-labels { position: absolute; inset: 0; z-index: 3; }
.roulette-labels span { --angle: calc(var(--slot) * 9.729729deg); position: absolute; top: 50%; left: 50%; width: 22px; height: 50%; display: block; margin-left: -11px; margin-top: -50%; padding-top: 10px; color: #fff4d5; font-size: clamp(.55rem, 1vw, .72rem); font-weight: 950; text-align: center; text-shadow: 0 1px 2px #000; transform: rotate(var(--angle)); transform-origin: 50% 100%; }
.roulette-bowl { position: absolute; inset: 31%; z-index: 4; display: grid; place-items: center; border: 2px solid #ffd978; border-radius: 50%; background: repeating-conic-gradient(#9b6e1c 0 12deg, #e1b852 12deg 24deg); box-shadow: 0 0 0 6px #31200a, inset 0 0 24px rgba(0,0,0,.8); }
.roulette-spindle { width: 54%; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid #fff0b6; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff1a8, #ba8123 32%, #422805 80%); box-shadow: 0 8px 13px rgba(0,0,0,.58); }
.roulette-spindle span { color: #271703; font-family: Georgia, serif; font-size: clamp(1.2rem, 3vw, 2rem); font-style: italic; font-weight: 950; }
.roulette-ball { position: absolute; inset: 10%; z-index: 5; border-radius: 50%; pointer-events: none; transition: transform 4.25s cubic-bezier(.08,.64,.08,1); }
.roulette-ball::after { content: ""; position: absolute; top: -4px; left: calc(50% - 6px); width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #fff, #e7d7b6 56%, #897d69); box-shadow: 0 2px 7px #000, 0 0 7px rgba(255,255,255,.6); }
.wheel-status { position: absolute; z-index: 8; right: 24px; bottom: 22px; left: 24px; display: grid; justify-items: center; pointer-events: none; text-align: center; }
.wheel-status span { color: var(--casino-gold); font-size: .62rem; font-weight: 950; letter-spacing: .2em; text-transform: uppercase; }
.wheel-status strong { margin: 2px 0; color: #fff8e7; font-family: Georgia, serif; font-size: clamp(1.35rem, 3vw, 2.2rem); font-style: italic; letter-spacing: -.03em; }
.wheel-status small { color: #839098; font-size: .72rem; font-weight: 750; }
.bet-console { padding: 28px; border-left: 1px solid rgba(255,255,255,.1); background: linear-gradient(160deg, rgba(24,30,36,.98), rgba(10,13,16,.98)); }
.console-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 23px; color: #9ba5ab; font-size: .65rem; font-weight: 950; letter-spacing: .19em; }
.live-badge { display: flex; align-items: center; gap: 7px; color: #54dc91; }
.live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #54dc91; box-shadow: 0 0 0 5px rgba(84,220,145,.1), 0 0 13px #54dc91; animation: livePulse 1.4s ease infinite; }
.roulette-form { gap: 19px; }
.bet-picker { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; padding: 0; border: 0; }
.bet-option { position: relative; min-height: 84px; display: flex; align-items: center; gap: 10px; padding: 11px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.025); color: #f6f2e7; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.bet-option:hover { transform: translateY(-2px); border-color: rgba(246,196,83,.35); }
.bet-option:has(input:checked) { border-color: var(--casino-gold); background: rgba(246,196,83,.09); box-shadow: inset 0 0 22px rgba(246,196,83,.04); }
.bet-option input, .color-pick input, .number-pick input { position: absolute; opacity: 0; pointer-events: none; }
.bet-option > span:last-child { display: grid; min-width: 0; }
.bet-option strong { font-size: .7rem; letter-spacing: .05em; }
.bet-option small { margin-top: 3px; color: #7c878e; font-size: .5rem; font-weight: 800; letter-spacing: .08em; }
.bet-icon { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; background: #252b30; color: #fff; font-size: .72rem; font-weight: 950; }
.red-bet .bet-icon { background: var(--casino-red); box-shadow: 0 0 17px rgba(239,49,81,.2); }
.number-bet .bet-icon { background: #0a0d10; border-color: #a57927; color: var(--casino-gold); }
.bet-section { min-width: 0; }
.bet-label { display: block; margin-bottom: 8px; color: #8d989f; font-size: .6rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.color-picks { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.color-pick { position: relative; }
.color-pick span { min-height: 55px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.025); color: #dfe5e4; font-size: .73rem; font-weight: 950; letter-spacing: .08em; cursor: pointer; transition: transform .2s, border-color .2s, background .2s; }
.color-pick span:hover { transform: translateY(-2px); }
.color-pick i { width: 13px; height: 13px; border-radius: 50%; }
.red-pick i { background: var(--casino-red); box-shadow: 0 0 10px rgba(239,49,81,.55); }
.black-pick i { background: #080a0c; border: 1px solid #6d767b; }
.red-pick:has(input:checked) span { border-color: var(--casino-red); background: rgba(239,49,81,.11); }
.black-pick:has(input:checked) span { border-color: #aeb8bd; background: rgba(255,255,255,.08); }
.number-grid { display: grid; grid-template-columns: repeat(10,1fr); gap: 4px; }
.number-pick { position: relative; }
.number-pick span { min-height: 25px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; color: #eef0eb; font-size: .55rem; font-weight: 900; cursor: pointer; }
.number-pick.red span { background: #a52137; }
.number-pick.black span { background: #090c0f; }
.number-pick.green span { background: #117046; }
.number-pick:has(input:checked) span { outline: 2px solid var(--casino-gold); outline-offset: 1px; color: #fff8c8; transform: scale(1.09); }
.wager-section { padding-top: 2px; }
.wager-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.wager-heading label { color: #8d989f; font-size: .6rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.wager-heading span { color: #6f7a80; font-size: .56rem; font-weight: 800; }
.chip-rack { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.bet-chip { position: relative; width: 43px; height: 43px; min-height: 0; padding: 0; border: 3px dashed rgba(255,255,255,.7); border-radius: 50%; background: #c62c48; box-shadow: inset 0 0 0 3px #c62c48, inset 0 0 0 5px rgba(255,255,255,.28), 0 4px 9px rgba(0,0,0,.45); color: white; font-size: .62rem; transition: transform .18s, filter .18s; }
.bet-chip:hover { transform: translateY(-5px) rotate(7deg); filter: brightness(1.18); box-shadow: inset 0 0 0 3px currentColor, inset 0 0 0 5px rgba(255,255,255,.25), 0 8px 16px rgba(0,0,0,.5); }
.bet-chip span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: rgba(0,0,0,.14); font-weight: 950; }
.chip-25 { background: #237a58; box-shadow: inset 0 0 0 3px #237a58, inset 0 0 0 5px rgba(255,255,255,.28), 0 4px 9px rgba(0,0,0,.45); }
.chip-50 { background: #2759a4; box-shadow: inset 0 0 0 3px #2759a4, inset 0 0 0 5px rgba(255,255,255,.28), 0 4px 9px rgba(0,0,0,.45); }
.chip-100 { background: #181b1e; box-shadow: inset 0 0 0 3px #181b1e, inset 0 0 0 5px rgba(255,255,255,.28), 0 4px 9px rgba(0,0,0,.45); }
.chip-max { background: #9b6a18; color: #fff1b4; box-shadow: inset 0 0 0 3px #9b6a18, inset 0 0 0 5px rgba(255,255,255,.28), 0 4px 9px rgba(0,0,0,.45); }
.wager-input-wrap { position: relative; display: flex; align-items: center; }
.wager-input-wrap > span { position: absolute; left: 14px; z-index: 1; color: var(--casino-gold); font-size: .85rem; }
.wager-input-wrap input { min-height: 55px; padding-left: 40px; border-color: rgba(246,196,83,.28); background: rgba(0,0,0,.25); color: #fff5d8; font-size: 1.35rem; font-weight: 900; }
.wager-input-wrap input:focus { border-color: var(--casino-gold); box-shadow: 0 0 0 3px rgba(246,196,83,.09); }
.wager-input-wrap input.chip-pop { animation: chipPop .3s ease; }
.spin-button { min-height: 61px; display: flex; align-items: center; justify-content: space-between; padding: 0 21px; border: 1px solid #ffe59a; border-radius: 9px; background: linear-gradient(100deg, #c8922d, #f6d46f 48%, #bc8121); color: #1b1204; box-shadow: inset 0 1px rgba(255,255,255,.7), 0 9px 28px rgba(246,196,83,.17); font-size: .78rem; font-weight: 950; letter-spacing: .12em; }
.spin-button:hover { background: linear-gradient(100deg, #e0a83e, #ffe58b 48%, #d5962b); box-shadow: inset 0 1px rgba(255,255,255,.8), 0 13px 35px rgba(246,196,83,.3); transform: translateY(-3px); }
.spin-button i { font-size: 1.35rem; font-style: normal; }
.spin-button:disabled { cursor: not-allowed; filter: grayscale(.75); opacity: .55; transform: none; }
.roulette-form.is-submitting { opacity: .6; pointer-events: none; }
.casino-history { padding: 25px 27px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(15,19,23,.82); box-shadow: 0 20px 60px rgba(0,0,0,.24); }
.history-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.history-heading span { color: var(--casino-gold); font-size: .57rem; font-weight: 950; letter-spacing: .2em; }
.history-heading h2 { margin: 3px 0 0; color: #f6f2e7; font-family: Georgia, serif; font-size: 1.5rem; font-style: italic; }
.history-heading p { margin: 0; color: #707c83; font-size: .7rem; }
.round-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.round-card { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(255,255,255,.075); border-radius: 9px; background: rgba(255,255,255,.025); }
.round-card > div { display: grid; min-width: 0; }
.round-card small { overflow: hidden; color: #737e84; font-size: .5rem; font-weight: 800; letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }
.round-card strong { color: #e8e9e2; font-size: .9rem; }
.round-card.won strong, .round-card.won .round-result { color: #55da91; }
.round-card.lost strong, .round-card.lost .round-result { color: #ed647b; }
.round-result { font-size: .52rem; font-weight: 950; letter-spacing: .08em; }
.roulette-number { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.15); border-radius: 50%; color: white; font-size: .72rem; font-weight: 950; box-shadow: inset 0 0 8px rgba(0,0,0,.4); }
.roulette-number.red { background: #c62542; }
.roulette-number.black { background: #101419; }
.roulette-number.green { background: #17784e; }
.casino-empty { padding: 25px; border: 1px dashed rgba(255,255,255,.14); border-radius: 10px; color: #707c83; text-align: center; font-size: .8rem; }
.casino-page.is-spinning .roulette-machine { animation: wheelRumble .18s linear infinite; }
.casino-page.is-spinning .wheel-status strong { animation: suspenseFlash .8s ease infinite; }
.casino-page.is-spinning .arena-glow { background: rgba(246,196,83,.14); animation-duration: .65s; }
.casino-page.is-winner .wheel-arena { animation: winnerGlow 1.2s ease 2; }
.casino-page.is-winner .wheel-status strong { color: #ffe178; text-shadow: 0 0 22px rgba(246,196,83,.75); animation: winnerHit .62s cubic-bezier(.2,.9,.2,1); }
.casino-page.is-loser .wheel-status strong { color: #ed647b; animation: loserHit .45s ease; }
.win-burst { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.win-burst i { position: absolute; top: -25px; left: var(--x); width: 9px; height: 17px; background: var(--casino-gold); animation: confettiFall 2.8s var(--delay) cubic-bezier(.16,.78,.2,1) both; transform: rotate(var(--spin)); }
.win-burst i:nth-child(3n) { background: var(--casino-red); }
.win-burst i:nth-child(4n) { border-radius: 50%; background: #f8f0db; }

@keyframes casinoPulse { 0%,100% { transform: scale(.9); opacity: .45; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes livePulse { 50% { opacity: .4; transform: scale(.8); } }
@keyframes chipPop { 50% { transform: scale(1.06); color: var(--casino-gold); } }
@keyframes wheelRumble { 50% { transform: perspective(900px) rotateX(8deg) translate(.5px,-30.5px); } }
@keyframes suspenseFlash { 50% { opacity: .45; } }
@keyframes winnerGlow { 50% { box-shadow: inset 0 0 100px rgba(246,196,83,.2); } }
@keyframes winnerHit { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.22); } 100% { transform: scale(1); opacity: 1; } }
@keyframes loserHit { 25% { transform: translateX(-7px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@keyframes confettiFall { 0% { opacity: 0; transform: translateY(-20px) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(110vh) rotate(var(--spin)); } }

.auth-page .site-main { min-height: 100vh; display: grid; place-items: center; padding: 30px 0; }
.auth-shell { width: min(100%, 980px); display: grid; grid-template-columns: 1.05fr 0.95fr; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.auth-intro { position: relative; min-height: 560px; padding: clamp(34px, 6vw, 68px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: var(--violet); color: white; }
.auth-intro::after { content: ""; position: absolute; right: -75px; bottom: -90px; width: 230px; height: 230px; border: 34px solid var(--lime); border-radius: 50%; opacity: 0.34; }
.auth-intro > * { position: relative; z-index: 1; }
.auth-intro .brand { color: white; }
.auth-intro .brand-mark { background: #ff7f50; box-shadow: 4px 4px 0 var(--lime); }
.auth-intro h1 { max-width: 480px; margin-bottom: 18px; }
.auth-intro p { max-width: 430px; color: #d9f5f2; }
.auth-kicker { color: var(--lime); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
.auth-card { padding: clamp(34px, 6vw, 68px); display: flex; flex-direction: column; justify-content: center; }
.auth-card h2 { margin-bottom: 8px; }
.auth-card form { margin-top: 26px; }
.hint { margin: 18px 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.auth-page .flash-stack { position: fixed; top: 18px; left: 50%; z-index: 20; width: min(92vw, 520px); transform: translateX(-50%); }

.settings-shell { width: min(100%, 560px); margin: 20px auto 0; }
.back-link { display: inline-block; margin-bottom: 18px; color: var(--muted); font-weight: 750; text-decoration: none; }
.back-link:hover { color: var(--violet); }

.admin-users-page { gap: 24px; }
.admin-users-grid { grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr); }
.panel-heading-row { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.admin-user-list { display: grid; gap: 12px; margin-top: 22px; }
.admin-user-row { display: grid; gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.admin-user-details { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-user-details strong { font-size: 1rem; }
.admin-user-details span { color: var(--muted); font-size: 0.78rem; font-weight: 750; }
.admin-user-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.inline-form { display: flex; align-items: center; gap: 7px; }
.inline-form input { width: min(190px, 40vw); min-height: 36px; padding: 8px 10px; }
.inline-form button { min-height: 36px; padding: 8px 12px; font-size: 0.78rem; }
.form-help { margin-top: -6px; color: var(--muted); font-size: 0.76rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 860px) {
  .site-header { grid-template-columns: 1fr auto; padding: 12px 18px; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; order: 3; }
  .account-nav .user-chip { display: none; }
  .site-main { padding-top: 38px; }
  .quick-grid, .stats { grid-template-columns: 1fr; }
  .activity-feed { grid-template-columns: 1fr; }
  .content-grid, .game-layout, .auth-shell { grid-template-columns: 1fr; }
  .admin-users-grid { grid-template-columns: 1fr; }
  .auth-intro { min-height: 310px; }
}

@media (max-width: 1050px) {
  .casino-stage { grid-template-columns: 1fr; }
  .wheel-arena { min-height: 640px; }
  .bet-console { border-top: 1px solid rgba(255,255,255,.1); border-left: 0; }
  .round-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .site-main { width: min(100% - 22px, 1180px); padding-top: 26px; }
  .site-header { gap: 10px; }
  .brand > span:last-child { display: none; }
  .discord-status { grid-template-columns: auto 1fr; }
  .discord-actions { grid-column: 1 / -1; justify-content: space-between; }
  .site-nav { width: 100%; justify-content: center; }
  .site-nav a { flex: 1; padding-inline: 8px; text-align: center; }
  .panel { padding: 20px; border-radius: 18px; }
  .hero-panel { min-height: 290px; }
  .hero-panel::after { width: 150px; height: 150px; border-width: 24px; opacity: 0.4; }
  .page-heading { align-items: start; flex-direction: column; }
  .wordle-form { grid-template-columns: 1fr; }
  .tile { width: 43px; height: 43px; }
  .wordle-key { width: calc((100% - 45px) / 10); height: 42px; }
  .filter-form { width: 100%; display: grid; grid-template-columns: 1fr auto; }
  .filter-form label { min-width: 0; }
  .filter-form input { min-width: 0; }
  .game-item { flex-direction: column; }
  .casino-body .site-main { width: min(100% - 18px, 1380px); }
  .casino-masthead { align-items: stretch; flex-direction: column; }
  .casino-masthead h1 { font-size: clamp(2.8rem, 16vw, 4.5rem); }
  .casino-wallet { min-width: 0; }
  .casino-stage { min-height: 0; border-radius: 15px; }
  .wheel-arena { min-height: 430px; }
  .roulette-machine { width: min(86%, 340px); transform: perspective(900px) rotateX(8deg) translateY(-26px); }
  .roulette-rim { padding: 11px; }
  .roulette-labels span { width: 16px; margin-left: -8px; padding-top: 7px; font-size: .48rem; }
  .bet-console { padding: 20px 16px; }
  .bet-picker { grid-template-columns: 1fr; }
  .number-grid { grid-template-columns: repeat(8,1fr); }
  .round-strip { grid-template-columns: 1fr; }
  .history-heading { align-items: start; flex-direction: column; }
  .casino-history { padding: 20px 16px; }
  .comment-meta { flex-direction: column; gap: 1px; }
  .auth-intro, .auth-card { padding: 30px 24px; }
}

@media (max-width: 720px) {
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .casino-page.is-spinning .roulette-machine, .casino-page.is-spinning .wheel-status strong, .arena-glow, .live-badge i { animation: none !important; }
}