/* =========================================================
   MURRAY GAMING — Design System
   ========================================================= */

/* ---------------------------------------------------------
   CSS Custom Properties
   --------------------------------------------------------- */
:root {
  /* Backgrounds */
  --bg:        #0d0d14;
  --surface:   #161622;
  --surface2:  #1e1e2e;
  --surface3:  #26263a;
  --border:    #2c2c42;
  --border2:   #38384e;

  /* Brand */
  --primary:   #7c6ff7;
  --primary-h: #9a8fff;
  --secondary: #f06292;
  --accent:    #43dea0;
  --accent2:   #43b8de;

  /* Text */
  --text:      #e8e8f2;
  --text2:     #a8a8c0;
  --text3:     #68687e;

  /* Status */
  --success:   #43ef8c;
  --error:     #ff5070;
  --warning:   #ffc847;
  --info:      #43b8de;

  /* Layout */
  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* Shadows */
  --shadow:    0 8px 24px rgba(0,0,0,.45);
  --shadow-sm: 0 4px 12px rgba(0,0,0,.3);
  --glow:      0 0 24px rgba(124,111,247,.35);

  /* Transitions */
  --t: .18s ease;

  /* Nav height */
  --nav-h: 62px;
}

/* ---------------------------------------------------------
   Reset
   --------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--t);
}

a:hover {
  color: var(--primary-h);
}

img, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

ul, ol {
  list-style: none;
}

/* ---------------------------------------------------------
   Scrollbar
   --------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

/* ---------------------------------------------------------
   Typography
   --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }

.text-muted   { color: var(--text2); }
.text-faint   { color: var(--text3); }
.text-sm      { font-size: .85rem; }
.text-xs      { font-size: .75rem; }
.text-lg      { font-size: 1.15rem; }
.text-xl      { font-size: 1.4rem; }
.text-2xl     { font-size: 1.8rem; }
.text-3xl     { font-size: 2.4rem; }
.font-bold    { font-weight: 700; }
.font-black   { font-weight: 900; }
.text-center  { text-align: center; }
.text-success { color: var(--success); }
.text-error   { color: var(--error); }
.text-warning { color: var(--warning); }
.text-primary { color: var(--primary); }
.text-accent  { color: var(--accent); }

/* ---------------------------------------------------------
   Layout
   --------------------------------------------------------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-sm {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-xs {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 20px;
}

.page {
  padding-top: calc(var(--nav-h) + 28px);
  padding-bottom: 60px;
  min-height: 100vh;
}

/* flex helpers */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.gap-1  { gap: 6px; }
.gap-2  { gap: 12px; }
.gap-3  { gap: 18px; }
.gap-4  { gap: 24px; }
.gap-6  { gap: 36px; }

/* grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }

@media (max-width: 640px) {
  html:not(.force-desktop) .grid-2,
  html:not(.force-desktop) .grid-3,
  html:not(.force-desktop) .grid-4 { grid-template-columns: 1fr; }
}

/* spacing helpers */
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 18px; }
.mt-4 { margin-top: 24px; }
.mt-6 { margin-top: 36px; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 18px; }
.mb-4 { margin-bottom: 24px; }
.mb-6 { margin-bottom: 36px; }

/* ---------------------------------------------------------
   Navigation
   --------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: rgba(13,13,20,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  display: flex;
  align-items: center;
}

.nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  /* 3-column grid — not flex+space-between, which redistributed leftover
     space unevenly across every gap (search position depended on icon
     count) — .nav__left and .nav__user size to content, the middle 1fr
     column is the actual gap between them, and the search box is
     center-locked inside that gap via justify-self on .jump-wrap. */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}

.nav__left {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.nav__logo {
  font-size: 1.25rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  text-decoration: none;
}

.nav__link {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--text2);
  font-size: .84rem;
  font-weight: 600;
  transition: color var(--t), background var(--t);
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover {
  color: var(--text);
  background: var(--surface2);
}

.nav__link.active {
  color: var(--primary);
  background: rgba(124,111,247,.12);
}

/* Admin-note button — app.js inserts it only while a note is active.
   It carries the banner's amber so it reads as the same notice, and it is
   deliberately not a .nav__lb-icon: that class is hidden under 700px, and a
   phone is exactly where the banner is most likely to have been dismissed. */
.nav__note-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  border: 1px solid rgba(217,119,6,.55);
  background: rgba(217,119,6,.16);
  animation: noteNudge 3.2s ease-in-out infinite;
}
.nav__note-icon:hover { background: rgba(217,119,6,.3); }

@keyframes noteNudge {
  0%, 88%, 100% { transform: none; }
  92%           { transform: rotate(-9deg); }
  96%           { transform: rotate(7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__note-icon { animation: none; }
}

.nav__user {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- Avatar button ---- */
.nav__avatar-wrap {
  position: relative;
}

.nav__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: border-color var(--t), box-shadow var(--t);
  user-select: none;
}

.nav__avatar:hover,
.nav__avatar-wrap.open .nav__avatar {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,111,247,.2);
}

/* ---- Dropdown panel ---- */
.nav__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 6px;
  min-width: 186px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(.97);
  transform-origin: top right;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 200;
}

.nav__avatar-wrap.open .nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.nav__dropdown-header {
  padding: 9px 12px 11px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.nav__dropdown-username {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
}

.nav__dropdown-role {
  font-size: .75rem;
  color: var(--text3);
  margin-top: 2px;
}

.nav__dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
  transition: background var(--t), color var(--t);
  font-family: inherit;
}

.nav__dropdown-item:hover {
  background: var(--surface2);
  color: var(--text);
}

.nav__dropdown-item--danger { color: var(--text3); }
.nav__dropdown-item--danger:hover {
  background: rgba(255,80,112,.1);
  color: var(--error);
}

/* Bug tracker notification badge — nav dropdown item + drawer link (see
   js/app.js _bugNotifBadgeHtml()). Empty when there's nothing new, so it
   never reserves layout space unless a count is actually showing. Pulses
   (like .nav__weekly-pill above) so it reads as "new" rather than just
   another static label. */
.nav__notif-badge {
  margin-left: auto;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 99px;
  background: #ef4444;
  color: #fff;
  font-size: .76rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(239,68,68,.25);
  animation: notifBadgePulse 1.8s ease-in-out infinite;
}
@keyframes notifBadgePulse {
  0%, 70%, 100% { box-shadow: 0 0 0 2px rgba(239,68,68,.25); }
  35%           { box-shadow: 0 0 0 5px rgba(239,68,68,.4); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__notif-badge { animation: none; }
}

.nav__dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}

/* ---- Nav Mockup B: icon rail + jump search (admin-mockups/nav-v2.html) ----
   Up to 5 icon-only game links plus a "Jump to game…" search — the navbar
   never gets wider no matter how many games get added. A hamburger opens
   the left drawer (below) for the full list + account actions. */
.nav__hamburger {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text2);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.nav__hamburger:hover { color: var(--text); background: var(--surface3); border-color: var(--border); }

.irail {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  /* Fixed width reserves room for the full 6-icon rail even when a user has
     fewer favorites — so nothing to its right (the search box) shifts
     position depending on how many icons are actually showing. */
  width: 240px;
  justify-content: flex-start;
}
.irail__icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--text2);
  text-decoration: none;
  transition: background var(--t), color var(--t);
}
.irail__icon:hover { background: var(--surface2); color: var(--text); }
.irail__icon.active { color: var(--primary); background: rgba(124,111,247,.12); }

/* Groups the search box with anything else that belongs in the nav's center
   gap (currently just the WEEKLY pill) so the grid's middle 1fr column keeps
   exactly one centered child, same reasoning as the comment on .nav__inner. */
.nav__center { display: flex; align-items: center; gap: 12px; justify-self: center; }

/* Fixed width (not flex:1) — a growing search box was itself the source of
   the "search moves around" bug, since its width and start position both
   depended on how much space the rail happened to leave behind. */
.jump-wrap { position: relative; width: 240px; }

/* Weekly has one compact navigation entry. Per-game settings decide whether
   it asks for attention, but it never expands into several nav buttons. */
.nav__weekly-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 99px;
  font-size: .78rem; font-weight: 800; letter-spacing: .04em;
  color: var(--text2); text-decoration: none; white-space: nowrap;
  background: var(--surface2); border: 1px solid var(--border2);
  transition: transform var(--t), box-shadow var(--t);
}
.nav__weekly-pill.is-open {
  color: #241a00; border: 1px solid transparent;
  background: linear-gradient(135deg, #fde047, #f59e0b);
  box-shadow: 0 2px 8px rgba(245,158,11,.4);
  animation: weeklyPillPulse 2.6s ease-in-out infinite;
}
.nav__weekly-pill:hover { transform: translateY(-1px) scale(1.04); }
.nav__weekly-pill.is-open:hover { box-shadow: 0 4px 14px rgba(245,158,11,.55); }
@keyframes weeklyPillPulse {
  0%, 80%, 100% { box-shadow: 0 2px 8px rgba(245,158,11,.4); }
  90%           { box-shadow: 0 2px 14px rgba(245,158,11,.75); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__weekly-pill { animation: none; }
}
.jump-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 99px;
  padding: 6px 14px;
}
.jump-box input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: .84rem;
  font-family: inherit;
  flex: 1;
  min-width: 0;
}
.jump-box input::placeholder { color: var(--text3); }

.jump-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-y: auto;
  max-height: 320px;
  z-index: 150;
}
.jump-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  color: var(--text2);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 600;
}
.jump-result:hover, .jump-result.hl { background: var(--surface3); color: var(--text); }
.jump-result mark { background: rgba(124,111,247,.35); color: var(--text); border-radius: 3px; }
.jump-empty { padding: 12px 14px; color: var(--text3); font-size: .82rem; }

@media (max-width: 700px) {
  html:not(.force-desktop) .nav__inner { gap: 6px; padding: 0 12px; }
  html:not(.force-desktop) .nav__left { gap: 6px; }
  html:not(.force-desktop) .nav__logo { font-size: 1rem; }
  html:not(.force-desktop) .nav__lb-label { display: none; }
  html:not(.force-desktop) .nav__user { gap: 6px; }
  html:not(.force-desktop) .nav__hamburger { width: 32px; height: 32px; }
  /* The drawer already contains the searchable game list. Keeping a second
     search field in the narrow top bar made it overlap the avatar/menu.
     The WEEKLY pill shares .nav__center's space with the search box, so it
     drops out with it -- the drawer/homepage tile remain the mobile entry
     points into the umbrella. */
  html:not(.force-desktop) .nav__center { display: none; }
  /* Mobile drops the icon rail and the standalone leaderboard icon entirely
     (no room, and the drawer already covers both). */
  html:not(.force-desktop) .irail { display: none; }
  html:not(.force-desktop) .nav__lb-icon { display: none; }
}

/* ---------------------------------------------------------
   Left drawer — a second, always-available way to jump between
   games/account pages without touching the top nav. Two triggers open
   it: the nav-bar hamburger (.nav__hamburger) and this floating edge
   tab, vertically centered on the left edge of the viewport.
   --------------------------------------------------------- */
.drawer-toggle {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 250;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text2);
  font-size: 1.15rem;
  line-height: 1;
  padding: 12px 8px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color var(--t), background var(--t);
}
.drawer-toggle:hover { color: var(--text); background: var(--surface2); }

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 290;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 82vw;
  background: var(--surface);
  border-right: 1px solid var(--border2);
  box-shadow: var(--shadow);
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.drawer.open { transform: translateX(0); }

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex: none;
}

.drawer__logo {
  font-size: 1.1rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
}

.drawer__close {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: color var(--t), background var(--t);
}
.drawer__close:hover { color: var(--text); background: var(--surface2); }

.drawer__section { padding: 10px; }
.drawer__section + .drawer__section { border-top: 1px solid var(--border); }
.drawer__account { margin-top: auto; }

.drawer__section-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--text3);
  padding: 6px 10px 8px;
}

.drawer__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer__section-header .drawer__section-label { padding-right: 4px; }

.drawer__edit-btn {
  flex: none;
  background: none;
  border: 1px solid var(--border2);
  color: var(--text2);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 10px;
  margin: 0 8px 6px 0;
  border-radius: 99px;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.drawer__edit-btn:hover { color: var(--text); background: var(--surface2); }
.drawer__edit-btn.active { color: var(--primary); border-color: var(--primary); background: rgba(124,111,247,.12); }

.drawer__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text2);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--t), background var(--t);
}
.drawer__link:hover { color: var(--text); background: var(--surface2); }
.drawer__link.active { color: var(--primary); background: rgba(124,111,247,.12); }
.drawer__link--danger:hover { color: var(--error); background: rgba(255,80,112,.1); }

.drawer__icon { font-size: 1.05rem; flex: none; width: 20px; text-align: center; line-height: 1; }

/* One row per game: an optional favorite star (logged-in only) beside the link. */
.drawer__game-row { display: flex; align-items: center; gap: 2px; }
.drawer__game-link { width: auto; flex: 1; min-width: 0; }

.drawer__fav {
  flex: none;
  width: 32px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text3);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--t), background var(--t), transform .1s ease;
}
.drawer__fav:hover { color: var(--warning); background: var(--surface2); }
.drawer__fav.active { color: var(--warning); }
.drawer__fav:active { transform: scale(.85); }

/* Edit mode: the star swaps for a drag handle, and the row's own link stops
   navigating (a pointerup on it mid-drag shouldn't fire a click-through). */
.drawer.editing-order .drawer__game-link { pointer-events: none; color: var(--text2); }

.drawer__handle {
  flex: none;
  width: 32px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text3);
  font-size: 1.2rem;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  border-radius: var(--radius-sm);
}
.drawer__handle:hover { color: var(--text); background: var(--surface2); }

.drawer__game-row.dragging {
  position: relative;
  z-index: 5;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.drawer__game-row.drag-target { background: rgba(124,111,247,.12); border-radius: var(--radius-sm); }

.drawer__signin { display: block; text-align: center; margin: 6px 4px 2px; }


/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.card-sm {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.card-elevated {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.card-glow {
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--glow);
}

/* game card on home page */
.game-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
  cursor: pointer;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
  text-decoration: none;
  display: block;
  color: inherit;
  position: relative;
  overflow: hidden;
}

.game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t);
}

.game-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--glow), var(--shadow);
}

.game-card:hover::before {
  opacity: 1;
}

.game-card__icon {
  font-size: 2.8rem;
  margin-bottom: 14px;
}

.game-card__title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.game-card__desc {
  font-size: .9rem;
  color: var(--text2);
  line-height: 1.6;
}

.game-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius);
  border: none;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t), opacity var(--t);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--primary), #5c50d9);
  color: white;
  box-shadow: 0 4px 16px rgba(124,111,247,.4);
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 6px 24px rgba(124,111,247,.55); }

.btn-secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
}
.btn-secondary:hover:not(:disabled) { background: var(--surface3); }

.btn-danger {
  background: rgba(255,80,112,.18);
  color: var(--error);
  border: 1px solid rgba(255,80,112,.3);
}
.btn-danger:hover:not(:disabled) { background: rgba(255,80,112,.28); }

.btn-success {
  background: rgba(67,239,140,.18);
  color: var(--success);
  border: 1px solid rgba(67,239,140,.3);
}

.btn-ghost {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border);
}
.btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--surface2); }

.btn-sm { padding: 7px 14px; font-size: .85rem; border-radius: var(--radius-sm); }
.btn-lg { padding: 14px 30px; font-size: 1.05rem; border-radius: var(--radius); }
.btn-block { width: 100%; }

/* icon button */
.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.btn-icon:hover { background: var(--surface3); color: var(--text); }

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.form-label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text2);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .95rem;
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
  appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,111,247,.18);
}

.form-input::placeholder { color: var(--text3); }

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a8a8c0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.form-select option { background: var(--surface2); color: var(--text); }

.form-error {
  font-size: .82rem;
  color: var(--error);
}

.form-hint {
  font-size: .82rem;
  color: var(--text3);
}

/* Checkbox */
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: .9rem;
  color: var(--text2);
  user-select: none;
}

.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* ---------------------------------------------------------
   Tags / Badges
   --------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 600;
  background: var(--surface3);
  color: var(--text2);
  border: 1px solid var(--border);
}

.tag-primary { background: rgba(124,111,247,.16); color: var(--primary); border-color: rgba(124,111,247,.3); }
.tag-success { background: rgba(67,239,140,.14); color: var(--success); border-color: rgba(67,239,140,.28); }
.tag-error   { background: rgba(255,80,112,.14);  color: var(--error);   border-color: rgba(255,80,112,.28); }
.tag-warning { background: rgba(255,200,71,.14); color: var(--warning); border-color: rgba(255,200,71,.28); }
.tag-accent  { background: rgba(67,222,160,.14); color: var(--accent);  border-color: rgba(67,222,160,.28); }

/* ---------------------------------------------------------
   Stat blocks
   --------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.stat-block {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}

.stat-block__value {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-block__label {
  font-size: .78rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------------------------------------------------------
   Progress bar
   --------------------------------------------------------- */
.progress-bar {
  height: 8px;
  background: var(--surface3);
  border-radius: 99px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .4s ease;
}

/* ---------------------------------------------------------
   Modal / Overlay
   --------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.overlay.hidden { display: none; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  padding: 32px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.modal__title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 22px;
}

.modal__row {
  margin-bottom: 18px;
}

.modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

/* ---------------------------------------------------------
   Toast notifications
   --------------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 300;
}

.toast {
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  min-width: 220px;
  max-width: 360px;
  box-shadow: var(--shadow);
  animation: toastIn .22s ease forwards;
  border: 1px solid var(--border);
}

.toast.toast-success { background: rgba(67,239,140,.15); border-color: rgba(67,239,140,.4); color: var(--success); }
.toast.toast-error   { background: rgba(255,80,112,.15);  border-color: rgba(255,80,112,.4);  color: var(--error); }
.toast.toast-info    { background: rgba(67,184,222,.15);  border-color: rgba(67,184,222,.4);  color: var(--info); }

.toast.toast-sticky {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.toast-sticky .toast-text { flex: 1; }
.toast-sticky .toast-close {
  flex-shrink: 0;
  border: none;
  background: none;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
  padding: 0;
}
.toast-sticky .toast-close:hover { opacity: 1; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---------------------------------------------------------
   Leaderboard table
   --------------------------------------------------------- */
.lb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
}

.lb-table th {
  font-size: .78rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 8px 14px;
  text-align: left;
}

.lb-row {
  background: var(--surface2);
  transition: background var(--t);
}
.lb-row:hover { background: var(--surface3); }

.lb-row td {
  padding: 12px 14px;
  font-size: .92rem;
}

.lb-row td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.lb-row td:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.lb-rank {
  font-weight: 900;
  color: var(--text3);
  width: 40px;
}

.lb-rank.gold   { color: #ffd700; }
.lb-rank.silver { color: #c0c0c0; }
.lb-rank.bronze { color: #cd7f32; }

.lb-name { font-weight: 700; }

.lb-score {
  font-weight: 900;
  color: var(--primary);
  text-align: right;
}

/* ---------------------------------------------------------
   Hero / Page headers
   --------------------------------------------------------- */
.page-header {
  text-align: center;
  padding: 36px 0 28px;
}

.page-header__eyebrow {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--primary);
  margin-bottom: 10px;
}

.page-header__title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  margin-bottom: 12px;
}

.page-header__sub {
  font-size: 1.05rem;
  color: var(--text2);
  max-width: 560px;
  margin: 0 auto;
}

/* ---------------------------------------------------------
   Tabs
   --------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 4px;
  background: var(--surface2);
  padding: 4px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: fit-content;
  flex-wrap: wrap;
}

.tab {
  padding: 8px 18px;
  border-radius: calc(var(--radius) - 4px);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  transition: background var(--t), color var(--t);
  border: none;
  background: transparent;
  user-select: none;
}

.tab:hover { color: var(--text); }

.tab.active {
  background: var(--primary);
  color: white;
}

/* pill tabs */
.tabs-pill {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tab-pill {
  padding: 8px 16px;
  border-radius: 99px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface2);
  transition: background var(--t), color var(--t), border-color var(--t);
  user-select: none;
}

.tab-pill:hover { color: var(--text); border-color: var(--border2); }

.tab-pill.active {
  background: linear-gradient(135deg, var(--primary), var(--accent2));
  color: white;
  border-color: transparent;
}

.tab-pill.tab-daily-done {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Divider
   --------------------------------------------------------- */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

/* ---------------------------------------------------------
   Auth / Login page
   --------------------------------------------------------- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(124,111,247,.15), transparent);
}

.auth-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow);
}

.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}

.auth-logo__brand {
  font-size: 1.6rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.auth-logo__sub {
  font-size: .85rem;
  color: var(--text3);
  margin-top: 4px;
}

.auth-tabs {
  display: flex;
  gap: 0;
  background: var(--surface2);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid var(--border);
}

.auth-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text2);
  transition: background var(--t), color var(--t);
  user-select: none;
}

.auth-tab.active {
  background: var(--primary);
  color: white;
}

/* ---------------------------------------------------------
   Utility
   --------------------------------------------------------- */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.rounded { border-radius: var(--radius); }
.rounded-full { border-radius: 99px; }
.overflow-hidden { overflow: hidden; }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow accent */
.glow-primary { box-shadow: 0 0 20px rgba(124,111,247,.4); }
.glow-accent  { box-shadow: 0 0 20px rgba(67,222,160,.4); }

/* Loading spinner */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------
   Shared account-aware screen states
   --------------------------------------------------------- */
.account-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 180px;
  padding: 32px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text2);
  text-align: left;
}
.account-state__icon {
  flex: 0 0 auto;
  font-size: 2rem;
  line-height: 1;
}
.account-state__body { max-width: 520px; }
.account-state__title {
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
}
.account-state__detail {
  margin-top: 4px;
  color: var(--text3);
  font-size: .84rem;
  line-height: 1.45;
}
.account-state__action { flex: 0 0 auto; margin-left: 4px; }
.account-state--compact {
  justify-content: flex-start;
  min-height: 0;
  padding: 11px 14px;
  margin-bottom: 14px;
  background: var(--surface2);
}
.account-state--compact .account-state__icon { font-size: 1.15rem; }
.account-state--compact .account-state__title { font-size: .84rem; }
.account-state--compact .account-state__detail { font-size: .75rem; }
.account-state--error { border-color: color-mix(in srgb, var(--error) 40%, var(--border)); }
.account-state--offline { border-color: color-mix(in srgb, var(--warning) 38%, var(--border)); }
.account-state--completed { border-color: color-mix(in srgb, var(--success) 38%, var(--border)); }
.account-state--locked,
.account-state--unavailable { opacity: .82; }
.account-state--legacy {
  flex-direction: column;
  gap: 0;
  text-align: center;
}
.account-state--legacy .account-state__icon { margin-bottom: 10px; }
.account-state--legacy .account-state__detail { margin-top: 6px; }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 480px) {
  html:not(.force-desktop) .container,
  html:not(.force-desktop) .container-sm { padding: 0 14px; }
  html:not(.force-desktop) .card,
  html:not(.force-desktop) .card-elevated { padding: 18px; }
  html:not(.force-desktop) .modal { padding: 22px; }
  html:not(.force-desktop) .account-state {
    align-items: flex-start;
    flex-wrap: wrap;
    min-height: 0;
    padding: 24px 18px;
  }
  html:not(.force-desktop) .account-state__body { flex: 1; min-width: 180px; }
  html:not(.force-desktop) .account-state__action { width: 100%; margin-left: 0; }
  html:not(.force-desktop) .account-state__action .btn { width: 100%; }
}