/* Mawble stylesheet. Mobile-first: base styles target a portrait phone;
   min-width media queries progressively enhance for tablet and desktop. */

:root {
  --bg-0: #14100b;
  --bg-1: #1c1811;
  --dirt-0: #8b6a3d;
  --dirt-1: #6d5029;
  --dirt-2: #4c3819;
  --accent: #f6c343;
  --accent-2: #2ea043;
  --danger: #e5484d;
  --text: #f2ead8;
  --text-dim: #c7bfa8;
  --border: #2c2418;
  --touch: 44px;               /* minimum touch target */
  --header-h: 96px;            /* topbar + hud on mobile */
  --footer-h: 34px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: linear-gradient(180deg, var(--bg-0), var(--bg-1));
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;
  /* Respect notch/home indicator on iOS */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============ TOPBAR ============ */
/* Mobile: two rows. Row 1 = title + menu. Row 2 = HUD (horizontally
   scrollable if it overflows). */
.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "title  title  menu"
    "hud    hud    hud";
  gap: 6px 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.5);
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.title { grid-area: title; }
.title h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--accent);
  line-height: 1.1;
}
.title .sub {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 400;
  margin-left: 4px;
  display: none;              /* subtitle hidden on tightest screens */
}

.hud {
  grid-area: hud;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.hud::-webkit-scrollbar { display: none; }
.hud-cell {
  flex: 0 0 auto;
  min-width: 54px;
  padding: 3px 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hud-cell.wide { min-width: 76px; }
.hud-cell .label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  line-height: 1.1;
}
.hud-cell .value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

/* Menu button — always visible on mobile, opens the actions drawer */
.menu-btn {
  grid-area: menu;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  background: var(--accent);
  color: #241a04;
  border: none;
  border-radius: 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

/* ============ BUTTONS ============ */
button {
  background: var(--accent);
  color: #241a04;
  border: none;
  padding: 0 14px;
  min-height: var(--touch);
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 0.2px;
  touch-action: manipulation;
}
button:hover { filter: brightness(1.1); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.btn-secondary {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border: 1px solid var(--border);
}
button.btn-secondary:hover { background: rgba(255,255,255,0.15); }
button.btn-danger {
  background: var(--danger);
  color: #fff;
}
button.hidden { display: none !important; }

/* ============ ACTIONS DRAWER ============ */
/* Mobile: drawer slides in from the right, dark backdrop, closes on
   backdrop tap. Desktop: drawer is always inline in the header. */
.actions {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 82vw);
  background: linear-gradient(180deg, #221a0f, #14100b);
  border-left: 1px solid var(--border);
  padding: 16px 14px;
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  z-index: 90;
  overflow-y: auto;
  box-shadow: -8px 0 24px rgba(0,0,0,0.5);
}
.actions.open { transform: translateX(0); }
.actions button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  padding: 0 14px;
}
.actions-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 89;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.actions-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ============ MAIN + CANVAS ============ */
main {
  display: flex;
  height: calc(100dvh - var(--header-h) - var(--footer-h));
  min-height: 0;
}

.stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  overflow: hidden;
  min-height: 0;
}

canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  background: transparent;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
  touch-action: none;
}

.banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  background: rgba(0,0,0,0.7);
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--border);
  pointer-events: none;
  transition: opacity 0.3s ease;
  max-width: 90%;
  text-align: center;
}
.banner.hidden { opacity: 0; }

/* ============ TUNING PANEL ============ */
/* Mobile: bottom sheet slides up. Desktop: side panel. */
.tune {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 75vh;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #221a0f, #14100b);
  border-top: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  overflow-y: auto;
  z-index: 88;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  box-shadow: 0 -12px 28px rgba(0,0,0,0.5);
}
.tune:not(.hidden) { transform: translateY(0); }
.tune-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 50%;
  font-size: 16px;
}
.tune h2 {
  margin: 0 0 4px 0;
  font-size: 15px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.tune .note {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 14px 0;
}
.tune fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px 12px;
  margin: 0 0 12px 0;
}
.tune legend {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 4px;
  letter-spacing: 0.5px;
}
.tune label {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin: 10px 0 4px 0;
  line-height: 1.3;
}
.tune label output {
  float: right;
  color: var(--accent);
  font-family: monospace;
}
.tune input[type="range"] {
  width: 100%;
  height: var(--touch);         /* bigger touch target */
}
.tune select {
  width: 100%;
  min-height: var(--touch);
  padding: 8px 10px;
  background: var(--bg-1);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 4px;
  font-size: 15px;              /* iOS won't auto-zoom at 15px+ */
}
.tune input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-right: 8px;
  vertical-align: middle;
}

/* ============ FOOTER ============ */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: rgba(0,0,0,0.5);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
  height: var(--footer-h);
  gap: 10px;
}
.footer > span:first-child {
  display: none;                /* hint hidden on mobile — footer shows current message */
}
.message {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: right;
}

/* ============ MODALS ============ */
/* Mobile: bottom sheet. Desktop: centered dialog. */
.modal, .results {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(3px);
}
.modal.hidden, .results.hidden { display: none; }
.modal-inner, .results-inner {
  background: linear-gradient(180deg, #251c10, #17110a);
  border: 1px solid var(--border);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.7);
}
.modal-inner.wide-modal { max-width: 100%; }
.modal-inner h2, .results-inner h2 {
  margin: 0 0 12px 0;
  color: var(--accent);
  font-size: 20px;
  letter-spacing: 0.5px;
}
.modal-inner h3 {
  margin: 20px 0 10px 0;
  color: var(--text);
  font-size: 14px;
}
.modal-inner label {
  display: block;
  color: var(--text-dim);
  font-size: 13px;
  margin: 10px 0 4px;
}
.modal-inner input[type="text"],
.modal-inner input[type="email"],
.modal-inner input[type="password"] {
  width: 100%;
  min-height: var(--touch);
  padding: 8px 12px;
  background: var(--bg-1);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 16px;              /* prevent iOS zoom on focus */
  margin-top: 2px;
}
.modal-actions {
  display: flex;
  justify-content: stretch;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.modal-actions button {
  flex: 1 1 auto;
  min-width: 120px;
}

/* Tutorial */
.tutorial-steps {
  margin: 0 0 12px 0;
  padding-left: 20px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
.tutorial-steps li { margin: 8px 0; }
.tutorial-steps strong { color: var(--accent); }
.tutorial-steps em { color: var(--text-dim); font-style: italic; }
.tut-lead { color: var(--text); font-size: 14px; margin: 0 0 14px; line-height: 1.5; }
.tut-lead strong { color: var(--accent); }
.tut-note {
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(0,0,0,0.35);
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  margin: 0 0 16px;
  line-height: 1.5;
}
.tut-note strong { color: var(--accent); }

/* Ready prompt */
.ready-lede { color: var(--text); font-size: 15px; margin: 0 0 16px; line-height: 1.5; }
.ready-summary {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 18px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}
.ready-summary strong { color: var(--accent); font-weight: 700; }
.ready-summary .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}
.ready-summary .row .label { color: var(--text-dim); }

/* Lockout */
.lockout-note { color: var(--text-dim); font-size: 13px; margin: 8px 0 14px 0; }
#lockout .modal-inner p { color: var(--text); margin: 6px 0; }
#lockout .modal-inner strong { color: var(--accent); }
.results-economy { color: var(--text); margin: -8px 0 14px 0; font-size: 14px; }
.results-economy .delta-up { color: var(--accent-2); font-weight: 700; }
.results-economy .delta-down { color: var(--danger); font-weight: 700; }

/* Pack grid — 2 per row on mobile, more on wider */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.pack-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.1s ease;
  color: var(--text);
  min-height: var(--touch);
}
.pack-card:hover, .pack-card:active {
  transform: translateY(-1px);
  border-color: var(--accent);
}
.pack-card .size {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
}
.pack-card .label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.pack-card .price {
  font-size: 14px;
  color: var(--text);
  margin-top: 4px;
  font-weight: 600;
}
.pack-card .bonus {
  font-size: 10px;
  color: var(--accent-2);
  margin-top: 4px;
  line-height: 1.2;
}

/* Marble collection — 3 per row on mobile */
.marble-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.marble-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 6px 8px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.1s ease;
}
.marble-card:hover, .marble-card:active {
  transform: translateY(-1px);
  border-color: var(--accent);
}
.marble-card.equipped {
  border-color: var(--accent);
  background: rgba(246,195,67,0.12);
}
.marble-card.locked {
  opacity: 0.5;
  cursor: default;
}
.marble-card canvas {
  display: block;
  margin: 0 auto 4px;
  width: 100%;
  height: auto;
  box-shadow: none;
  border-radius: 0;
}
.marble-card .name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
  line-height: 1.2;
}
.marble-card .rarity {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.marble-card .rarity.common { color: #9ca3af; }
.marble-card .rarity.uncommon { color: #22c55e; }
.marble-card .rarity.rare { color: #06b6d4; }
.marble-card .rarity.epic { color: #a855f7; }
.marble-card .rarity.legendary { color: #f97316; }
.marble-card .status-tag {
  font-size: 9px;
  margin-top: 4px;
  color: var(--accent);
  font-weight: 700;
}
.collection-summary {
  color: var(--text);
  font-size: 14px;
  margin: 0 0 4px;
}
.collection-summary strong { color: var(--accent); }
.collection-heading {
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.collection-note {
  color: var(--text-dim);
  font-size: 12px;
  margin: 10px 0 6px;
  line-height: 1.4;
}

/* Auth modal */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 10px 0 14px;
}
.tab {
  background: transparent;
  color: var(--text-dim);
  border: none;
  padding: 8px 12px;
  border-radius: 6px 6px 0 0;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  min-height: 36px;
  flex: 1 1 auto;
}
.tab.active {
  background: rgba(246,195,67,0.15);
  color: var(--accent);
}
.tab-panel.hidden { display: none; }
.account-status { color: var(--text-dim); font-size: 13px; margin: 0 0 12px; line-height: 1.5; }
.forgot-row { margin: 8px 0 0; text-align: right; }
.forgot-row a { color: var(--dim); font-size: 12px; text-decoration: underline; }
.forgot-row a:hover { color: var(--accent); }
.profile-header {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.profile-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff2cc, var(--accent) 65%, #5a3e00);
  color: #241a04;
  font-weight: 900;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 -6px 12px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.profile-idents { min-width: 0; }
.profile-name {
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  word-break: break-word;
}
.profile-email {
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 2px;
  word-break: break-all;
}
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}
.stat-value {
  color: var(--accent);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}
.stat-label {
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.account-note { color: var(--text-dim); font-size: 12px; }
.account-msg {
  color: var(--danger);
  font-size: 13px;
  margin: 12px 0 0;
  min-height: 18px;
}
.account-msg.ok { color: var(--accent-2); }

/* Leaderboard */
#leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 13px;
}
#leaderboard-table th, #leaderboard-table td {
  padding: 8px 6px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}
#leaderboard-table th:first-child,
#leaderboard-table td:first-child,
#leaderboard-table th:nth-child(2),
#leaderboard-table td:nth-child(2) { text-align: left; }
#leaderboard-table th {
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.7px;
}
#leaderboard-table tr.me { background: rgba(246,195,67,0.08); }
#leaderboard-table td.rank { color: var(--text-dim); font-family: monospace; }
.leaderboard-note { color: var(--text-dim); font-size: 13px; margin: 0 0 12px; }

/* Invite */
.invite-link {
  display: flex;
  gap: 8px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.invite-link input {
  flex: 1 1 200px;
  min-height: var(--touch);
  padding: 8px 10px;
  background: var(--bg-1);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: monospace;
}
.invite-note {
  color: var(--text-dim);
  font-size: 12px;
  margin: 14px 0 0;
  line-height: 1.5;
}

/* Results table */
#results-winner {
  font-size: 15px;
  margin-bottom: 16px;
  color: var(--text);
  line-height: 1.4;
}
#results-winner .winner-name {
  font-size: 20px;
  font-weight: 800;
}

/* Emotive win/lose headline. Sits above the smaller "Match over" title.
   Two variants (result-win / result-lose) tint it and pick the animation. */
.result-headline {
  text-align: center;
  margin: -6px 0 14px;
  padding: 14px 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
}
.result-headline .result-emoji {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 4px;
  display: block;
}
.result-headline .result-headline-text {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.result-headline.result-win {
  background: radial-gradient(ellipse at center, rgba(246,195,67,0.22), rgba(246,195,67,0.04) 70%);
  border-color: rgba(246,195,67,0.5);
  box-shadow: 0 0 30px rgba(246,195,67,0.25);
  animation: result-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.result-headline.result-win .result-headline-text {
  color: var(--accent);
  text-shadow: 0 0 18px rgba(246,195,67,0.6);
}
.result-headline.result-win .result-emoji {
  animation: result-emoji-cheer 1.2s ease-in-out infinite;
  transform-origin: 50% 80%;
}
.result-headline.result-lose {
  background: radial-gradient(ellipse at center, rgba(229,72,77,0.14), rgba(229,72,77,0.03) 70%);
  border-color: rgba(229,72,77,0.35);
  animation: result-pop-soft 0.55s ease-out both;
}
.result-headline.result-lose .result-headline-text {
  color: #ffb4b6;
}
.result-headline.result-lose .result-emoji {
  animation: result-emoji-slump 1.6s ease-in-out infinite;
}
@keyframes result-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes result-pop-soft {
  0%   { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes result-emoji-cheer {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(8deg)  scale(1.12); }
}
@keyframes result-emoji-slump {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(4px); opacity: 0.75; }
}

/* Rematch prompt when the OTHER player initiated — different color so the
   local user notices the ask. */
.rematch-prompt.rematch-incoming {
  background: rgba(246,195,67,0.10);
  border: 1px solid rgba(246,195,67,0.35);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 12px;
}
.rematch-prompt.rematch-incoming .rematch-question {
  color: var(--accent);
}
#results-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 12px;
}
#results-table th, #results-table td {
  padding: 6px 4px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}
#results-table th:first-child,
#results-table td:first-child { text-align: left; }
#results-table th {
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.6px;
}
#results-table td.player-name { font-weight: 700; }
#results-table tr.eliminated td { opacity: 0.5; }
.results-actions {
  display: flex;
  justify-content: stretch;
  gap: 8px;
  flex-wrap: wrap;
}
.results-actions button {
  flex: 1 1 auto;
  min-width: 120px;
}
.rematch-prompt {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.rematch-question {
  color: var(--text);
  font-size: 14px;
  margin: 0 0 6px;
  font-weight: 600;
}
.rematch-votes {
  color: var(--text-dim);
  font-size: 12px;
  margin: 0 0 10px;
  min-height: 16px;
}

/* ============ AGE GATE ============ */
.age-lead {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0 0 16px;
  line-height: 1.5;
}
.age-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  line-height: 1.4;
}
.age-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}
.age-check a { color: var(--accent); }
.age-msg {
  color: var(--danger);
  font-size: 13px;
  margin: 8px 0 0;
  min-height: 18px;
}
.age-blocked-msg {
  color: var(--text);
  font-size: 15px;
  padding: 12px 0;
  line-height: 1.5;
}
.age-panel.hidden { display: none; }
.legal-links {
  color: var(--text-dim);
  font-size: 11px;
}
.legal-links a {
  color: var(--text-dim);
  text-decoration: none;
  padding: 0 2px;
}
.legal-links a:hover { color: var(--accent); }

/* ============ MULTIPLAYER ============ */
.mp-status {
  color: var(--text-dim);
  font-size: 13px;
  margin: 0 0 12px;
}
.mp-status.ok    { color: var(--accent-2); }
.mp-status.error { color: var(--danger); }
.mp-option {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin: 12px 0;
}
.mp-option h3 {
  margin: 0 0 6px !important;
  color: var(--accent);
  font-size: 15px;
}
.mp-option p {
  color: var(--text-dim);
  font-size: 13px;
  margin: 0 0 10px;
  line-height: 1.4;
}
.mp-code {
  font-family: monospace;
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 3px;
  background: rgba(0,0,0,0.35);
  padding: 4px 10px;
  border-radius: 6px;
}
.mp-player-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.mp-player-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--text);
}
.mp-player-list li:last-child { border-bottom: none; }
.mp-player-list li.me { background: rgba(246,195,67,0.08); }
.mp-player-list .name { font-weight: 600; }
.mp-player-list .badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.mp-player-list .badge.ready       { background: var(--accent-2); color: #062512; }
.mp-player-list .badge.not-ready   { background: rgba(255,255,255,0.08); color: var(--text-dim); }
.mp-player-list .badge.disconnected { background: var(--danger); color: #fff; }
.mp-lobby-list { max-height: 260px; overflow-y: auto; margin-top: 8px; }
.mp-lobby-list li { gap: 10px; }
.mp-lobby-list .meta { color: var(--text-dim); font-size: 12px; }
.mp-lobby-list .name-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mp-lobby-list .name-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-lobby-list button.challenge-btn { padding: 6px 12px; font-size: 12px; }
.mp-lobby-list .empty { color: var(--text-dim); font-style: italic; text-align: center; padding: 18px 14px; background: rgba(255,255,255,0.02); }
.lobby-me { margin-top: 8px; padding: 8px 12px; background: rgba(0,0,0,0.25); border-radius: 6px; font-size: 12px; color: var(--text-dim); }
.lobby-me.visible { background: rgba(46,160,67,0.12); color: var(--accent-2); }
.mp-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: mp-spin 0.9s linear infinite;
  margin: 20px auto;
}
@keyframes mp-spin { to { transform: rotate(360deg); } }

/* AI thinking indicator */
.value.ai-thinking::after {
  content: ' •••';
  color: var(--text-dim);
  font-weight: 400;
  font-size: 11px;
}

/* ============ TABLET (≥600px) ============ */
@media (min-width: 600px) {
  :root { --header-h: 76px; }
  .title h1 { font-size: 18px; }
  .title .sub { display: inline; font-size: 12px; margin-left: 6px; }
  .topbar {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "title hud menu";
    padding: 10px 16px;
  }
  .hud-cell { min-width: 62px; padding: 4px 10px; }
  .hud-cell .label { font-size: 10px; }
  .hud-cell .value { font-size: 16px; }
  .pack-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .marble-grid { grid-template-columns: repeat(4, 1fr); }
  .modal, .results { align-items: center; padding: 20px; }
  .modal-inner, .results-inner {
    max-width: 600px;
    border-radius: 14px;
    padding: 24px 28px;
  }
  .modal-inner.wide-modal { max-width: 720px; }
  .modal-actions, .results-actions {
    justify-content: flex-end;
  }
  .modal-actions button, .results-actions button { flex: 0 0 auto; }
  .footer > span:first-child { display: inline; }
}

/* ============ DESKTOP (≥1000px) ============ */
@media (min-width: 1000px) {
  :root { --header-h: 72px; }
  /* Topbar stays the same 3-cell grid as mobile — title, HUD, menu button.
     The drawer holds ALL secondary actions on every screen size so nothing
     ever gets clipped, wrapped, or hidden behind an overflow edge on wider
     monitors. Menu button works identically for mouse + touch. */
  .topbar {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "title hud menu";
    gap: 16px;
  }
  .hud { justify-content: center; }
  .hud-cell { min-width: 68px; }
  .hud-cell .value { font-size: 17px; }
  /* Drawer becomes a bit wider on desktop so labels breathe */
  .actions { width: min(360px, 90vw); }

  /* Tuning becomes a side panel on desktop */
  main { display: flex; }
  .tune {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    max-height: none;
    width: 300px;
    background: rgba(0,0,0,0.4);
    border-top: none;
    border-left: 1px solid var(--border);
    border-radius: 0;
    transform: none;
    box-shadow: none;
    z-index: auto;
    padding: 14px 16px;
  }
  .tune.hidden {
    width: 0;
    padding: 14px 0;
    overflow: hidden;
    border-left: none;
  }
  .tune input[type="range"] { height: auto; }
  .tune select { min-height: 34px; font-size: 13px; padding: 4px; }
  .tune-close { display: none; }

  .marble-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}