/* Trunk-or-Treat palette. Loaded after /shared/css/base.css, whose fallbacks
   sit at zero specificity, so these values win and this file may also override
   base.css component rules. */
:root {
  --bg-deep: #1a0d2e;
  --bg: #2d1b4e;
  --surface: #4a2f7a;
  --accent: #ff7518;
  --accent-light: #ffa34d;
  --accent-glow: #ff9500;
  --cream: #fff3e0;
  --text: #f5ecff;
  --text-dim: #c9b8e8;
  --danger: #ff4d4d;
  --success: #2ecc71;
  --confetti-colors: #ff7518, #ffa34d, #ffe066, #a970ff, #ff4d4d, #ffffff;
  --tallying-glyph: '🎃';

  --accent-dark: #cc4e00;
  --accent-shadow: rgba(255, 117, 24, 0.35);
  --surface-deep: #241242;
  --surface-shadow: rgba(74, 47, 122, 0.5);
  --title-glow: rgba(255, 149, 0, 0.45);
  --placeholder: rgba(245, 236, 255, 0.4);
  --card-bg: rgba(45, 27, 78, 0.55);
  --card-border: rgba(255, 165, 77, 0.18);
  --tile-bg: rgba(45, 27, 78, 0.6);
  --tile-border: rgba(255, 165, 77, 0.15);
  --chip-border: rgba(255, 165, 77, 0.2);
  --ghost-border: rgba(255, 165, 77, 0.5);
  --dialog-border: rgba(255, 165, 77, 0.3);
  --info-bg: rgba(255, 165, 77, 0.14);
  --info-border: rgba(255, 165, 77, 0.35);
  --badge-bg: rgba(255, 165, 77, 0.18);
  --badge-border: rgba(255, 165, 77, 0.35);
  --danger-bg: rgba(255, 77, 77, 0.18);
  --danger-border: rgba(255, 77, 77, 0.4);
  --danger-text: #ffd0d0;
  --success-bg: rgba(46, 204, 113, 0.18);
  --success-border: rgba(46, 204, 113, 0.4);
  --success-text: #d0ffe4;
  --pill-active-bg: rgba(46, 204, 113, 0.2);
  --pill-active-text: #7dffb0;
  --pill-closed-bg: rgba(255, 77, 77, 0.2);
  --pill-closed-text: #ffb0b0;
  --pill-complete-bg: rgba(255, 117, 24, 0.25);
  --votes-pill-bg: rgba(255, 117, 24, 0.18);
  --emoji-selected-bg: rgba(255, 117, 24, 0.2);
  --link: #9b6dff;
  --link-dark: #6d3fd4;
  --link-shadow: rgba(122, 74, 226, 0.35);
  --qr-text: #1a0d2e;
  --qr-hint: #6b5b8a;
}

.admin-or {
  align-self: center;
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* Keep the datetime control from stretching the button grid past a phone. */
#timer-at {
  width: 100%;
  min-width: 0;
}