/* ============================================
   Deli Catcher 3D - Stylesheet
   Brand Colors: Red #E30613, White, Black
   ============================================ */

:root {
  --deli-red: #E60012;
  --deli-red-dark: #B0000E;
  --deli-red-light: #FF2A3C;
  --deli-white: #FFFFFF;
  --deli-black: #1A1A1A;
  --deli-gray: #6B6B6B;
  --deli-gray-light: #F5F5F5;
  --deli-gray-mid: #E0E0E0;

  --bronze: #CD7F32;
  --silver: #C0C0C0;
  --gold: #FFD700;
  --diamond: #B9F2FF;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(227, 6, 19, 0.25);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  /* `clip` keeps the horizontal cut-off without turning <body> into a scroll
     container, which is what would break `position: sticky` on the admin nav.
     Browsers without `clip` keep the `hidden` fallback above. */
  overflow-x: clip;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--deli-white);
  color: var(--deli-black);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ===== Background Pattern ===== */
.bg-pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 10% 20%, rgba(227, 6, 19, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(227, 6, 19, 0.06) 0%, transparent 40%),
    linear-gradient(180deg, #FFF5F6 0%, #FFFFFF 100%);
  z-index: -1;
}

/* ===== Container ===== */
.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ===== Brand Header ===== */
.brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.logo-circle {
  width: 56px;
  height: 56px;
  background: var(--deli-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--deli-white);
}

.logo-text {
  color: var(--deli-white);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.5px;
}

.brand-tagline {
  color: var(--deli-gray);
  font-size: 13px;
  font-weight: 500;
}

/* ===== Hero ===== */
.hero {
  text-align: center;
  padding: 16px 0 8px;
}

.hero-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title-line-1 {
  color: var(--deli-red);
  text-shadow: 2px 2px 0px rgba(227, 6, 19, 0.15);
}

.title-line-2 {
  color: var(--deli-black);
  font-size: 38px;
}

.hero-sub {
  margin-top: 14px;
  color: var(--deli-gray);
  font-size: 15px;
  font-weight: 500;
  padding: 0 16px;
}

/* ===== Cards ===== */
.card {
  background: var(--deli-white);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--deli-gray-mid);
}

.card-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--deli-black);
}

.card-title.small {
  font-size: 16px;
  margin-bottom: 14px;
}

.secondary-card {
  padding: 14px;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ===== Form ===== */
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--deli-black);
}

.optional {
  color: var(--deli-gray);
  font-weight: 400;
  font-size: 12px;
}

.form-group input {
  padding: 14px 16px;
  border: 2px solid var(--deli-gray-mid);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: inherit;
  background: var(--deli-gray-light);
  transition: all 0.2s ease;
  color: var(--deli-black);
}

.form-group input:focus {
  outline: none;
  border-color: var(--deli-red);
  background: var(--deli-white);
  box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.1);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  gap: 8px;
}

.btn-primary {
  background: var(--deli-red);
  color: var(--deli-white);
  box-shadow: var(--shadow-lg);
}

.btn-primary:hover, .btn-primary:active {
  background: var(--deli-red-dark);
  transform: translateY(-1px);
}

.btn-outline {
  background: var(--deli-white);
  color: var(--deli-red);
  border: 2px solid var(--deli-red);
}

.btn-outline:hover, .btn-outline:active {
  background: var(--deli-red);
  color: var(--deli-white);
}

.btn-large {
  padding: 18px 24px;
  font-size: 17px;
  font-weight: 700;
}

.btn-full {
  width: 100%;
}

.btn-small {
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
}

/* ===== Info List ===== */
.info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--deli-black);
}

.dot {
  width: 8px;
  height: 8px;
  background: var(--deli-red);
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}

/* ===== Prize Grid ===== */
.prize-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.prize-tier {
  padding: 14px 10px;
  border-radius: var(--radius-md);
  text-align: center;
  background: var(--deli-gray-light);
  border: 2px solid transparent;
  transition: transform 0.2s ease;
}

.prize-tier:hover {
  transform: translateY(-2px);
}

.prize-tier.bronze { border-color: var(--bronze); }
.prize-tier.silver { border-color: var(--silver); }
.prize-tier.gold { border-color: var(--gold); }
.prize-tier.diamond { border-color: var(--diamond); }

.prize-medal {
  font-size: 28px;
  margin-bottom: 4px;
}

.prize-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--deli-black);
}

.prize-score {
  font-size: 12px;
  color: var(--deli-gray);
  font-weight: 500;
  margin-bottom: 4px;
}

.prize-desc {
  font-size: 11px;
  color: var(--deli-black);
  font-weight: 500;
  line-height: 1.3;
}

/* ===== Footer ===== */
.footer {
  text-align: center;
  padding: 20px 0;
  color: var(--deli-gray);
  font-size: 13px;
}

.footer strong {
  color: var(--deli-red);
  font-weight: 700;
}

.footer-small {
  font-size: 11px;
  margin-top: 4px;
  opacity: 0.7;
}

/* ===== Modal ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--deli-white);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  max-width: 440px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modalSlideUp 0.3s ease;
}

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

.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: var(--deli-gray-light);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deli-black);
  font-weight: 300;
}

.modal-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--deli-black);
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--deli-gray-light);
  border-radius: var(--radius-md);
  transition: background 0.2s ease;
}

.leaderboard-item.top-1 { background: linear-gradient(90deg, #FFD700 0%, #FFEC8B 100%); }
.leaderboard-item.top-2 { background: linear-gradient(90deg, #E0E0E0 0%, #F5F5F5 100%); }
.leaderboard-item.top-3 { background: linear-gradient(90deg, #CD7F32 0%, #E5B17F 100%); }

.lb-rank {
  font-weight: 800;
  font-size: 18px;
  width: 32px;
  text-align: center;
  color: var(--deli-red);
}

.lb-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: var(--deli-black);
}

.lb-score {
  font-weight: 700;
  font-size: 16px;
  color: var(--deli-red);
}

.empty-state {
  text-align: center;
  color: var(--deli-gray);
  padding: 30px 20px;
  font-size: 14px;
}

/* ============================================
   GAME PAGE STYLES
   ============================================ */

body.page-game {
  background: linear-gradient(180deg, #87CEEB 0%, #FFE4B5 100%);
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  touch-action: none;
}

#game-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.game-hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 100%);
}

.hud-panel {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
}

.hud-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--deli-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hud-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--deli-black);
  line-height: 1;
  margin-top: 2px;
}

.hud-value.score {
  color: var(--deli-red);
}

.hud-value.warning {
  color: #FF6B00;
  animation: pulse 0.5s infinite alternate;
}

.hud-value.danger {
  color: var(--deli-red);
  animation: pulse 0.3s infinite alternate;
}

@keyframes pulse {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

.hud-center {
  flex: 1;
  text-align: center;
  pointer-events: none;
}

.hud-lives {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 4px;
}

.life-heart {
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.life-heart.lost {
  opacity: 0.2;
  filter: grayscale(1);
}

/* ===== Countdown Overlay ===== */
.countdown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  backdrop-filter: blur(8px);
}

.countdown-overlay.hidden {
  display: none;
}

.countdown-text {
  font-size: 120px;
  font-weight: 800;
  color: var(--deli-white);
  text-shadow: 0 4px 24px rgba(227, 6, 19, 0.8);
  animation: countdownPop 1s ease-out;
}

@keyframes countdownPop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== Combo Indicator ===== */
.combo-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  font-size: 56px;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 4px 16px rgba(255, 215, 0, 0.8), 0 0 4px rgba(0,0,0,0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.combo-indicator.show {
  animation: comboShow 1s ease-out forwards;
}

@keyframes comboShow {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(1); opacity: 0; }
}

/* ===== Score Popup ===== */
.score-popup {
  position: absolute;
  font-weight: 800;
  font-size: 24px;
  pointer-events: none;
  z-index: 15;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  animation: scorePopup 1s ease-out forwards;
}

.score-popup.positive { color: #00C853; }
.score-popup.negative { color: var(--deli-red); }

@keyframes scorePopup {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  20% { transform: translateY(-20px) scale(1.2); opacity: 1; }
  100% { transform: translateY(-80px) scale(1); opacity: 0; }
}

/* ===== Game Over Overlay ===== */
.game-over-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(8px);
  padding: 20px;
}

.game-over-overlay.hidden {
  display: none;
}

.game-over-card {
  background: var(--deli-white);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: modalSlideUp 0.4s ease;
}

.game-over-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--deli-red);
  margin-bottom: 8px;
}

.game-over-sub {
  color: var(--deli-gray);
  font-size: 14px;
  margin-bottom: 24px;
}

.final-score-display {
  background: linear-gradient(135deg, var(--deli-red) 0%, var(--deli-red-dark) 100%);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
  color: var(--deli-white);
}

.final-score-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
}

.final-score-number {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  margin-top: 4px;
}

.final-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 24px;
  padding: 12px;
  background: var(--deli-gray-light);
  border-radius: var(--radius-md);
}

.stat-item {
  text-align: center;
}

.stat-label {
  font-size: 10px;
  color: var(--deli-gray);
  text-transform: uppercase;
  font-weight: 600;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--deli-black);
  margin-top: 2px;
}

.game-over-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ============================================
   REWARD PAGE STYLES
   ============================================ */

body.page-reward {
  background: linear-gradient(135deg, #FFE4E6 0%, #FFF5F6 100%);
}

.reward-hero {
  text-align: center;
  padding: 24px 20px 16px;
}

.tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-size: 56px;
  margin: 0 auto 16px;
  box-shadow: var(--shadow-lg);
  animation: badgeBounce 0.6s ease-out;
}

.tier-badge.bronze {
  background: linear-gradient(135deg, #CD7F32 0%, #E5B17F 100%);
}
.tier-badge.silver {
  background: linear-gradient(135deg, #C0C0C0 0%, #E8E8E8 100%);
}
.tier-badge.gold {
  background: linear-gradient(135deg, #FFD700 0%, #FFEC8B 100%);
}
.tier-badge.diamond {
  background: linear-gradient(135deg, #B9F2FF 0%, #E0F7FF 100%);
}

@keyframes badgeBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.tier-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--deli-black);
  margin-bottom: 4px;
}

.tier-subtitle {
  font-size: 15px;
  color: var(--deli-gray);
  font-weight: 500;
}

.qr-card {
  text-align: center;
}

.qr-container {
  background: var(--deli-white);
  padding: 16px;
  border-radius: var(--radius-md);
  display: inline-block;
  margin: 16px 0;
  border: 3px dashed var(--deli-red);
}

#qrcode-canvas {
  display: block;
}

.qr-instruction {
  font-size: 13px;
  color: var(--deli-gray);
  margin-top: 8px;
  font-weight: 500;
}

.prize-detail {
  background: linear-gradient(135deg, var(--deli-red) 0%, var(--deli-red-dark) 100%);
  color: var(--deli-white);
  padding: 20px;
  border-radius: var(--radius-md);
  margin: 16px 0;
  text-align: center;
}

.prize-detail-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
}

.prize-detail-name {
  font-size: 20px;
  font-weight: 700;
  margin-top: 4px;
}

.player-info-display {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--deli-gray-light);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.info-row .label {
  color: var(--deli-gray);
  font-weight: 500;
}

.info-row .value {
  color: var(--deli-black);
  font-weight: 600;
  font-family: 'Courier New', monospace;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 360px) {
  .hero-title { font-size: 36px; }
  .title-line-2 { font-size: 32px; }
  .container { padding: 16px 14px 30px; }
  .card { padding: 20px 16px; }
}

@media (min-height: 800px) {
  .hero { padding: 32px 0 16px; }
}

/* ============================================
   GAME PAGE BRAND BAR
   Grid with three tracks: logo | wordmark | audio toggles.
   Both outer tracks are 1fr, so the wordmark stays optically
   centred while the toggles always own their own space and can
   never slide underneath the brand text, whatever their width.
   ============================================ */
.brand-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,0.45) 0%, transparent 100%);
  pointer-events: none;
}
.brand-bar .logo-circle {
  width: 38px;
  height: 38px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  border-width: 2px;
  justify-self: start;
}
.brand-bar .logo-text { font-size: 13px; }
.brand-bar .bar-text {
  grid-column: 2;
  justify-self: center;
  min-width: 0;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   GAME PAGE AUDIO CONTROLS
   Two independent toggles living inside the existing footer bar.
   `.brand-bar` is pointer-events:none, so the buttons opt back in
   and the rest of the bar stays inert.
   ============================================ */
.audio-controls {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 0;
  pointer-events: none;
}

.audio-btn {
  pointer-events: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
  white-space: nowrap;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.2;
  padding: 5px 10px;
  border-radius: 999px;
  border: 2px solid var(--deli-red);
  background: rgba(255, 255, 255, 0.94);
  color: var(--deli-red);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  -webkit-appearance: none;
  appearance: none;
}

.audio-btn:hover { background: #fff; }
.audio-btn:active { transform: translateY(1px); }
.audio-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.audio-btn.off {
  background: rgba(26, 26, 26, 0.72);
  border-color: rgba(255, 255, 255, 0.55);
  color: rgba(255, 255, 255, 0.72);
}
.audio-btn.off:hover { background: rgba(26, 26, 26, 0.88); }

/* Narrow screens: the toggles drop onto their own row inside the same
   footer instead of squeezing the wordmark or hanging off the edge. */
@media (max-width: 719px) {
  .brand-bar {
    display: flex;
    flex-wrap: wrap;
    row-gap: 7px;
    column-gap: 10px;
    justify-content: center;
    padding: 9px 10px 10px;
  }
  .brand-bar .bar-text { font-size: 11px; }
  .audio-controls {
    flex: 1 0 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .audio-btn { font-size: 10.5px; padding: 6px 12px; }
}

@media (max-width: 400px) {
  .audio-btn { font-size: 10px; padding: 6px 10px; }
  .audio-controls { gap: 6px; }
}

/* Landscape phones: one row only, so the footer stays as short as
   possible on a short viewport. Declared after the width rules so it
   wins when a small screen is also short. */
@media (max-height: 480px) {
  .brand-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    flex-wrap: nowrap;
    justify-content: normal;
    padding: 6px 10px;
  }
  .brand-bar .bar-text { font-size: 11px; }
  .audio-controls {
    flex: initial;
    flex-direction: column;
    justify-content: flex-start;
    gap: 3px;
  }
  .audio-btn { font-size: 9px; padding: 4px 8px; }
}

.brand-strip {
  position: absolute;
  top: 76px; left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  background: var(--deli-red);
  color: #fff;
  padding: 4px 14px 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 4px 14px rgba(230, 0, 18, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}
.brand-strip::before {
  content: '';
  width: 14px;
  height: 14px;
  background: #fff;
  color: var(--deli-red);
  border-radius: 50%;
  display: inline-block;
  background-image: radial-gradient(circle, var(--deli-red) 35%, #fff 36%);
}

/* ============================================
   ADMIN PAGE
   ============================================ */
body.page-admin {
  background:
    radial-gradient(circle at 10% 0%, rgba(230,0,18,0.12) 0%, transparent 50%),
    linear-gradient(180deg, #FFF 0%, #FFF5F6 100%);
}

/* Smooth in-page jumps for the admin nav (document scroller lives on <html>) */
html:has(body.page-admin) { scroll-behavior: smooth; }

/* The settings grid needs more room than the public pages, but it must never
   grow wider than the viewport. */
body.page-admin .container {
  max-width: 720px;
  width: 100%;
  gap: 18px;
}

/* ===== Admin login gate ===== */
.admin-login-wrap {
  width: 100%;
  max-width: 380px;
  margin: 40px auto;
  padding: 0 16px;
}

.admin-login {
  background: var(--deli-white);
  border: 1px solid var(--deli-gray-mid);
  border-top: 5px solid var(--deli-red);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 26px 22px 22px;
  text-align: center;
}

.admin-login .logo-mark {
  margin: 0 auto 14px;
}

.admin-login h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--deli-black);
}

.admin-login-sub {
  font-size: 12.5px;
  color: var(--deli-gray);
  margin-bottom: 4px;
}

.admin-login .admin-field {
  text-align: left;
  margin: 18px 0 0;
}

.admin-login .admin-field input {
  text-align: center;
  letter-spacing: 3px;
  font-size: 18px;
}

.admin-login .btn { margin-top: 18px; }

.admin-login-error {
  min-height: 18px;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--deli-red);
}

.admin-login-foot { margin-top: 14px; }

/* ===== Admin nav (sticky section jump + logout) ===== */
.admin-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--deli-gray-mid);
}

.admin-nav a {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--deli-gray-light);
  border: 1px solid var(--deli-gray-mid);
  color: var(--deli-black);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.admin-nav a:hover {
  background: var(--deli-red);
  border-color: var(--deli-red);
  color: var(--deli-white);
}

.admin-nav .btn { flex: 0 0 auto; margin-left: auto; }

.admin-section { scroll-margin-top: 72px; }

.page-admin .brand-tagline { line-height: 1.35; }
.page-admin .brand-tagline small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--deli-gray);
}

.admin-intro { padding: 2px 2px 0; }

.admin-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--deli-black);
  margin-bottom: 4px;
}
.admin-subtitle {
  color: var(--deli-gray);
  font-size: 14px;
  margin-bottom: 8px;
}

.admin-section {
  background: var(--deli-white);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--deli-gray-mid);
}
.admin-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--deli-black);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-section h3 .accent {
  width: 4px; height: 18px;
  background: var(--deli-red);
  border-radius: 2px;
  display: inline-block;
}

/* ===== Field grid =====
   auto-fit + minmax() means the number of columns follows the container
   width, so fields never get squeezed into a fixed-width overflow. */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 14px;
  align-items: start;
}

/* Field that should always use the full row */
.admin-grid > .admin-field.block,
.admin-grid > .admin-switch.block { grid-column: 1 / -1; }

/* ===== Form group =====
   min-width:0 lets the flex/grid child shrink below its content width,
   which is what stops inputs from pushing out of (and over) the card. */
.admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin-bottom: 0;
}

.admin-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--deli-black);
  line-height: 1.35;
}

.hint {
  font-size: 11px;
  line-height: 1.45;
  color: var(--deli-gray);
  font-weight: 400;
}

.hint-block { margin-top: 14px; }

.admin-field input[type="number"],
.admin-field input[type="text"],
.admin-field input[type="password"],
.admin-field input[type="search"],
.admin-field select,
.admin-field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 2px solid var(--deli-gray-mid);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
  background: var(--deli-gray-light);
  color: var(--deli-black);
}

.admin-field textarea {
  min-height: 88px;
  resize: vertical;
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
  outline: none;
  border-color: var(--deli-red);
  background: var(--deli-white);
  box-shadow: 0 0 0 4px rgba(230, 0, 18, 0.1);
}

/* ===== Toggle switch ===== */
.admin-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: var(--deli-gray-light);
  border: 2px solid var(--deli-gray-mid);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.admin-switch input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  transform: scale(1.2);
  accent-color: var(--deli-red);
}

.admin-switch span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--deli-black);
}

.admin-switch small {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--deli-gray);
}

/* ===== Tier editor ===== */
.tier-edit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 12px;
  align-items: start;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--deli-gray-light);
  border: 1px solid var(--deli-gray-mid);
  border-radius: var(--radius-md);
}

.tier-edit:last-child { margin-bottom: 0; }

.tier-edit .tier-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--deli-black);
}

.tier-edit .tier-range {
  font-size: 11px;
  font-weight: 600;
  color: var(--deli-gray);
}

/* ===== Item table ===== */
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.items-table {
  width: 100%;
  min-width: 360px;
  border-collapse: separate;
  border-spacing: 0 6px;
}
.items-table th {
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  color: var(--deli-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 8px 4px;
}
.items-table th.col-num { width: 76px; }
.items-table th.col-toggle { width: 58px; text-align: center; }
.items-table td {
  background: var(--deli-gray-light);
  padding: 8px;
  vertical-align: middle;
}
.items-table td.col-num { padding: 4px 6px; }
.items-table tr td:first-child { border-radius: 10px 0 0 10px; }
.items-table tr td:last-child  { border-radius: 0 10px 10px 0; }
.items-table input[type="number"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--deli-gray-mid);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  text-align: center;
}
.items-table input[type="number"]:focus {
  outline: none;
  border-color: var(--deli-red);
}
.items-table .item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--deli-black);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  overflow-wrap: anywhere;
}
.items-table .item-swatch {
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.bad-pill {
  display: inline-block;
  font-size: 9px;
  background: #FFE5E5;
  color: var(--deli-red);
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 4px;
  font-weight: 700;
}
.items-table .toggle {
  display: flex;
  justify-content: center;
}
.items-table .toggle input { transform: scale(1.3); accent-color: var(--deli-red); }

/* ===== Actions ===== */
.admin-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.admin-actions .btn {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  font-size: 13.5px;
}

.admin-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  max-width: calc(100vw - 32px);
  background: #1A1A1A;
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  transition: transform 0.35s ease;
}
.admin-toast.show {
  transform: translateX(-50%) translateY(0);
}
.admin-toast.success { background: #2E7D32; }
.admin-toast.error { background: var(--deli-red); }

.admin-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--deli-gray);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
}
.admin-link:hover { color: var(--deli-red); }

/* ===== Admin responsive ===== */
@media (max-width: 560px) {
  body.page-admin .container { padding: 16px 14px 30px; }
  .admin-grid { grid-template-columns: 1fr; }
  .tier-edit { grid-template-columns: 1fr 1fr; }
  .tier-edit > .admin-field:last-child { grid-column: 1 / -1; }
  .admin-login-wrap { margin: 24px auto; padding: 0 14px; }

  /* A three row sticky bar would eat the screen on a phone. */
  .admin-nav { position: static; }
  .admin-section { scroll-margin-top: 12px; }

  /* Table rows become stacked cards so nothing scrolls sideways. */
  .items-table { min-width: 0; }
  .items-table thead { display: none; }
  .items-table tbody { display: block; }

  .items-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 10px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--deli-gray-light);
    border: 1px solid var(--deli-gray-mid);
    border-radius: 12px;
  }

  .items-table td {
    display: block;
    background: none;
    padding: 0;
    border-radius: 0 !important;
  }

  .items-table tr td:first-child { grid-column: 1 / -1; }

  .items-table td.col-num {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
  }

  .items-table td.col-num::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--deli-gray);
  }

  .items-table td.col-toggle {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid var(--deli-gray-mid);
  }

  .items-table td.col-toggle::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    color: var(--deli-gray);
  }
}

@media (max-width: 380px) {
  .admin-grid { grid-template-columns: 1fr; }
  .tier-edit { grid-template-columns: 1fr; }
  .tier-edit > .admin-field:last-child { grid-column: auto; }
  .admin-actions { grid-template-columns: 1fr; }
  .admin-nav { gap: 6px; }
  .admin-nav a { padding: 6px 10px; font-size: 11px; }
  .items-table tr { grid-template-columns: 1fr; }
  .items-table td.col-toggle { justify-content: space-between; }
}