* { box-sizing: border-box; }

:root {
  --bg-deep: #1a0e17;
  --bg-mid: #2c1424;
  --bg-glow: #4a1233;
  --panel-bg: rgba(255, 240, 248, 0.06);
  --panel-border: rgba(255, 92, 154, 0.35);
  --pink: #ff2e7e;
  --pink-bright: #ff5fa2;
  --pink-soft: #ff8fbf;
  --pink-deep: #b8005c;
  --gold: #ffd166;
  --text: #fdeef4;
  --text-muted: #d9a8c0;
  --danger: #ff5470;
  --grass: #3f8a52;
  --epic: #b16cff;
}

* { scrollbar-color: var(--pink-deep) var(--bg-mid); }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 15% 0%, var(--bg-glow) 0%, transparent 45%),
    radial-gradient(circle at 90% 10%, rgba(255,46,126,0.18) 0%, transparent 40%),
    linear-gradient(160deg, var(--bg-deep) 0%, var(--bg-mid) 55%, var(--bg-deep) 100%);
  background-attachment: fixed;
  font-family: "Nunito", "Trebuchet MS", sans-serif;
  color: var(--text);
}

h1, h2, h3, .brand, .pill-btn, .nav-btn, .tab-btn, .coins-pill {
  font-family: "Baloo 2", "Trebuchet MS", sans-serif;
}

.hidden { display: none !important; }

canvas#farm-canvas { image-rendering: auto; }

.glass-panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 40px rgba(255,46,126,0.08);
}

/* ---------------- Auth screen ---------------- */
.screen {
  min-height: 100vh;
  display: flex;
}

#auth-screen {
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 32px 28px;
  text-align: center;
}

.title {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 800;
  background: linear-gradient(90deg, var(--pink-bright), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.5px;
}

.subtitle {
  margin: 0 0 20px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  background: rgba(0,0,0,0.25);
  padding: 5px;
  border-radius: 999px;
}

.tab-btn {
  flex: 1;
  padding: 9px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 700;
  border-radius: 999px;
  transition: all 0.2s ease;
}

.tab-btn.active {
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: #fff;
  box-shadow: 0 2px 10px rgba(255,46,126,0.5);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}

.auth-form input {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  font-size: 14px;
  background: rgba(0,0,0,0.25);
  color: var(--text);
}
.auth-form input::placeholder { color: var(--text-muted); }
.auth-form input:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255,46,126,0.25);
}

.pill-btn {
  border: none;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  padding: 11px 18px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.pill-btn:hover:not(:disabled) { transform: translateY(-1px); }
.pill-btn:active:not(:disabled) { transform: translateY(0); }

.pill-btn.primary {
  background: linear-gradient(135deg, var(--pink-bright), var(--pink-deep));
  color: #fff;
  box-shadow: 0 4px 16px rgba(255,46,126,0.45);
}
.pill-btn.primary:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(255,46,126,0.6); }

.pill-btn.google {
  width: 100%;
  background: rgba(255,255,255,0.9);
  color: #3c2b33;
}

.pill-btn.small { padding: 7px 14px; font-size: 12.5px; }

.pill-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  margin: 16px 0 12px;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px dashed rgba(255,255,255,0.2);
}
.divider span { padding: 0 10px; }

.fine-print {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.5;
}

.auth-error {
  margin-top: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--danger), #b8003f);
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
}

.link-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px;
  margin: 2px auto 0;
  display: block;
  font-family: inherit;
}
.link-btn:hover { color: var(--pink-soft); }

/* ---------------- App shell ---------------- */
#app-screen { flex-direction: column; width: 100%; }

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  margin: 14px;
  flex-wrap: wrap;
}

.brand {
  font-weight: 800;
  font-size: 19px;
  background: linear-gradient(90deg, var(--pink-bright), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tabs { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }

.nav-btn {
  border: 1px solid transparent;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  padding: 9px 16px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.2s ease;
}
.nav-btn:hover { color: var(--text); border-color: var(--panel-border); }
.nav-btn.active {
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: #fff;
  box-shadow: 0 2px 12px rgba(255,46,126,0.45);
}

.me { display: flex; align-items: center; gap: 10px; }
#me-name { font-weight: 700; }

main { padding: 0 14px 40px; }

.view { max-width: 1150px; margin: 0 auto; }

.section-title {
  font-size: 22px;
  font-weight: 800;
  margin: 6px 0 2px;
  color: var(--pink-soft);
}
.section-hint { color: var(--text-muted); margin-top: 2px; font-size: 13.5px; }

/* ---------------- Farm view ---------------- */
.farm-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
  font-weight: 700;
  color: var(--pink-soft);
}

.farm-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.farm-toolbar-actions .pill-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

#throw-feed-btn {
  touch-action: none; /* the button owns pointer gestures for drag-and-drop */
  cursor: grab;
}
#throw-feed-btn:active { cursor: grabbing; }

.feed-drag-hint {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--pink-soft);
  opacity: 0.65;
  font-style: italic;
}

.feed-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  pointer-events: none;
  z-index: 500;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
.feed-drag-ghost.hidden { display: none; }

.farm-toolbar-left {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* "GET HYPNOTIZED" sits on the opposite side of the toolbar from Throw
   Feed, with its own moody purple/pink gradient and a slow pulsing glow
   so it reads as an invitation rather than a routine action button. */
.hypno-btn {
  background: linear-gradient(135deg, #7c3aed, var(--pink-deep));
  color: var(--text);
  border: none;
  animation: hypno-btn-pulse 2.6s ease-in-out infinite;
}
.hypno-btn:disabled {
  animation: none;
  opacity: 0.55;
  cursor: default;
}
@keyframes hypno-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.55); }
  50% { box-shadow: 0 0 14px 4px rgba(168, 85, 247, 0.55); }
}

/* ---------------- Barns -- one per rank tier, see renderBarnTabs() in
   app.js and GET /api/farm's `tiers` list in api.js ---------------- */
.farm-barn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.farm-barn-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  cursor: pointer;
  font-family: "Baloo 2", "Trebuchet MS", sans-serif;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.farm-barn-tab:hover { transform: translateY(-1px); color: var(--text); }
.farm-barn-tab-count {
  background: rgba(0,0,0,0.28);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
}
/* small star on the viewer's own current tier, wherever it lands in the row */
.farm-barn-tab.is-home .farm-barn-tab-label::after {
  content: " ★";
  color: var(--gold);
  font-size: 10px;
}

.farm-barn-tab.active { color: #fff; background: rgba(255,255,255,0.1); }
.farm-barn-tab.barn-stray.active { border-color: #9ca3af; box-shadow: 0 0 0 2px rgba(156,163,175,0.28); }
.farm-barn-tab.barn-bronze.active { border-color: #cd7f32; box-shadow: 0 0 0 2px rgba(205,127,50,0.32); }
.farm-barn-tab.barn-silver.active { border-color: #c7cdd6; box-shadow: 0 0 0 2px rgba(199,205,214,0.32); }
.farm-barn-tab.barn-gold.active { border-color: #f4c430; box-shadow: 0 0 0 2px rgba(244,196,48,0.32); }
.farm-barn-tab.barn-priceless.active {
  border-color: transparent;
  background-image:
    linear-gradient(rgba(30,20,40,0.92), rgba(30,20,40,0.92)),
    conic-gradient(from 0deg, #ff5f6d, #ffc371, #4ade80, #38bdf8, #a78bfa, #ff5f6d);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 12px rgba(255,255,255,0.3);
  animation: barn-tab-rainbow-spin 6s linear infinite;
}
@keyframes barn-tab-rainbow-spin {
  to { filter: hue-rotate(360deg); }
}

.farm-wrap {
  position: relative;
  width: 100%;
  height: 68vh;
  min-height: 420px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--panel-border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 0 60px rgba(0,0,0,0.25);
  background: var(--grass);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Ambient per-barn frame -- the canvas draws its own tint/vignette (see
   BARN_THEMES in app.js) already sized to the field; this border/shadow
   glow is the part of the theme that lives outside the canvas itself, so
   the whole farm-wrap box reads as "this barn" even before the cows load. */
.farm-wrap[data-barn="bronze"] {
  border-color: rgba(205,127,50,0.5);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 0 90px rgba(205,127,50,0.3);
}
.farm-wrap[data-barn="silver"] {
  border-color: rgba(199,205,214,0.55);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 0 90px rgba(199,205,214,0.3);
}
.farm-wrap[data-barn="gold"] {
  border-color: rgba(244,196,48,0.55);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 0 90px rgba(244,196,48,0.3);
}
.farm-wrap[data-barn="priceless"] {
  border-color: rgba(255,255,255,0.55);
  animation: barn-wrap-priceless-glow 6s ease-in-out infinite;
}
@keyframes barn-wrap-priceless-glow {
  0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 0 90px rgba(255,95,109,0.3); }
  33% { box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 0 90px rgba(56,189,248,0.3); }
  66% { box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 0 90px rgba(167,139,250,0.3); }
}

#farm-canvas {
  display: block;
}

/* ---------------- Obedience Training minigame ---------------- */
.obedience-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 15;
  background: linear-gradient(135deg, var(--pink-bright), #ff9fce);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(255,46,126,0.45);
}
.obedience-btn:hover { box-shadow: 0 6px 20px rgba(255,46,126,0.6); }

.obedience-card { max-width: 420px; text-align: center; }
.obedience-status {
  margin: 4px 0 14px;
  font-weight: 700;
  color: var(--pink-soft);
  min-height: 20px;
}

.obedience-round-pips { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.obedience-pip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid var(--panel-border);
}
.obedience-pip.done { background: var(--gold); border-color: var(--gold); }
.obedience-pip.next { background: var(--pink-bright); border-color: var(--pink-bright); box-shadow: 0 0 0 3px rgba(255,46,126,0.25); }

.obedience-pad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 300px;
  margin: 0 auto;
}
.obedience-pad {
  aspect-ratio: 1;
  border-radius: 20px;
  border: 2px solid rgba(255,255,255,0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, filter 120ms ease;
}
.obedience-pad:nth-child(1) { background: linear-gradient(135deg, #ffc7de, #ff8fc2); }
.obedience-pad:nth-child(2) { background: linear-gradient(135deg, #ff5fa2, #d6337f); }
.obedience-pad:nth-child(3) { background: linear-gradient(135deg, #f6a8ff, #c26bff); }
.obedience-pad:nth-child(4) { background: linear-gradient(135deg, #ffd9a8, #ffb36b); }
.obedience-pad-icon { font-size: 2.4rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); pointer-events: none; }
.obedience-pad:disabled { cursor: default; opacity: 0.85; }
.obedience-pad.lit { transform: scale(0.93); filter: brightness(1.55) saturate(1.2); }
.obedience-pad.correct { transform: scale(0.93); filter: brightness(1.3) saturate(1.4); box-shadow: 0 0 0 4px rgba(255,209,102,0.55); }
.obedience-pad.wrong { animation: obedience-shake 400ms ease; box-shadow: 0 0 0 4px rgba(255,59,92,0.55); }
@keyframes obedience-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ---------------- Sound Training minigame ---------------- */
.soundtraining-btn {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 15;
  background: linear-gradient(135deg, var(--pink-bright), #c26bff);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(194,107,255,0.45);
}
.soundtraining-btn:hover { box-shadow: 0 6px 20px rgba(194,107,255,0.6); }

.soundtraining-card { max-width: 500px; text-align: center; }

.soundtraining-scope {
  background: #1a0e17;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: inset 0 0 24px rgba(0,0,0,0.5);
}

/* Cow profile modal -- opened by clicking any cow on the Farm view */
.cow-profile-card { max-width: 460px; }
.cow-profile-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.cow-profile-canvas {
  width: 128px;
  height: 128px;
  flex: none;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
}
.cow-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.cow-profile-stats .profile-stat { min-width: 90px; padding: 8px 12px; }
.cow-profile-acc-row { margin-top: 14px; }
.cow-profile-accessories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  min-height: 34px;
}
.cow-profile-acc {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.cow-profile-acc img { max-width: 100%; max-height: 100%; }
.cow-profile-acc-none { color: var(--text-muted); font-size: 12.5px; }
#soundtraining-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  cursor: crosshair;
  touch-action: none;
}
.soundtraining-hint {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.cow-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(26, 14, 23, 0.92);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  min-width: 160px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  z-index: 10;
  color: var(--text);
  backdrop-filter: blur(6px);
}
.cow-tooltip .ct-name { font-weight: 800; font-size: 13.5px; margin-bottom: 6px; color: var(--pink-soft); }
.cow-tooltip .ct-row { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
.cow-tooltip .ct-tier { text-transform: capitalize; font-weight: 700; color: var(--gold); }

/* ---------------- Tasks ---------------- */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.task-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  backdrop-filter: blur(10px);
}

.task-info { flex: 1 1 320px; min-width: 0; }
.task-info h3 { margin: 0 0 4px; font-size: 16px; color: var(--text); }
.task-info p { margin: 0; font-size: 13px; color: var(--text-muted); }
.task-reward { font-weight: 800; color: var(--gold); font-size: 13px; margin-top: 6px; }
.task-status { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.task-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  background: rgba(255,255,255,0.1);
  color: var(--pink-soft);
  vertical-align: middle;
}

/* ---------------- Shop ---------------- */
.shop-section { margin-top: 22px; }
.shop-section-title { color: var(--pink-soft); font-size: 16px; margin-bottom: 6px; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.shop-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(10px);
}

.shop-sprite-wrap {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-sprite-wrap img { max-height: 72px; max-width: 100%; }

.shop-name { font-weight: 800; color: var(--text); }
.shop-desc { font-size: 12px; color: var(--text-muted); min-height: 32px; }
.shop-cost { font-weight: 800; color: var(--gold); }
.shop-tier { font-size: 11px; color: var(--text-muted); text-transform: capitalize; }
.shop-card.locked { opacity: 0.5; }
.shop-card.equipped { border-color: var(--pink-bright); box-shadow: 0 0 0 2px rgba(255,95,162,0.4); }

/* Glow-effect shop cards show a color swatch instead of a sprite image. */
.shop-glow-swatch {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--swatch-color) 85%, white), var(--swatch-color) 70%);
  box-shadow: 0 0 18px 6px color-mix(in srgb, var(--swatch-color) 55%, transparent);
}

/* ---------------- Profile ---------------- */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.profile-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  backdrop-filter: blur(10px);
}
.profile-icon {
  font-size: 26px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-info { flex: 1; }
.profile-name { font-weight: 800; }
.profile-status { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.profile-status.linked { color: var(--gold); font-weight: 700; }

.profile-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.profile-stat {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 10px 18px;
  text-align: center;
  min-width: 120px;
}
.profile-stat-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.profile-stat-value { display: block; font-weight: 800; font-size: 16px; color: var(--pink-soft); margin-top: 2px; }

.referral-box { margin-top: 20px; padding: 18px 20px; border-radius: 16px; }
.referral-row { display: flex; gap: 10px; margin-top: 10px; }
.referral-row input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 13px;
}

/* ---------------- Streak banner + special task badges ---------------- */
.streak-banner {
  margin: 14px 0 2px;
  padding: 10px 16px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,209,102,0.18), rgba(255,46,126,0.12));
  border: 1px solid rgba(255,209,102,0.4);
  color: var(--gold);
  font-weight: 700;
  font-size: 13.5px;
}
.task-badge.gold { background: rgba(255,209,102,0.22); color: var(--gold); }
.task-card.highlight { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,209,102,0.25); }
.task-card.locked { opacity: 0.55; }

/* "Clock In, Good Cow" weekly reward ladder -- 7 pips, Mon->Sun */
.checkin-ladder-wrap { width: 100%; margin-top: 10px; }
.checkin-ladder {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.checkin-pip {
  flex: 1 1 0;
  min-width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--panel-border);
}
.checkin-pip-day { font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.checkin-pip-reward { font-size: 12px; font-weight: 800; color: var(--text-muted); }
.checkin-pip.done {
  background: rgba(255,209,102,0.16);
  border-color: var(--gold);
}
.checkin-pip.done .checkin-pip-reward { color: var(--gold); }
.checkin-pip.next {
  background: rgba(255,46,126,0.18);
  border-color: var(--pink-bright);
  box-shadow: 0 0 0 2px rgba(255,46,126,0.25);
}
.checkin-pip.next .checkin-pip-day,
.checkin-pip.next .checkin-pip-reward { color: var(--pink-bright); }
.checkin-ladder-hint { font-size: 10.5px; color: var(--text-muted); margin: 6px 0 0; font-style: italic; }

/* ---------------- Milking Drive (week-long cooperative event) ---------------- */
.milking-drive-box { margin-top: 18px; padding: 18px 20px; border-radius: 16px; }

/* ---------------- Rising Star (balancing pass) ---------------- */
.rising-star-box {
  margin-top: 14px;
  padding: 14px 20px;
  border-radius: 16px;
  border-color: var(--gold);
}
.rising-star-box .section-hint { margin: 4px 0 0; }
.rank-pip.claimed {
  background: rgba(255,209,102,0.16);
  border-color: var(--gold);
}
.rank-pip.claimed .rank-pip-label { color: var(--gold); }
.rank-pip.claimable {
  background: rgba(255,46,126,0.18);
  border-color: var(--pink-bright);
  box-shadow: 0 0 0 2px rgba(255,46,126,0.25);
}
.rank-pip.claimable .rank-pip-label,
.rank-pip.claimable .rank-pip-min { color: var(--pink-bright); }

/* ---------------- The Reveal (7-day content-drip gallery) ---------------- */
.revealweek-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.revealweek-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.revealweek-card-day { font-weight: 800; margin-bottom: 8px; }
.revealweek-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.revealweek-thumb-wrap img, .revealweek-thumb-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.revealweek-card.unlocked .revealweek-thumb-wrap { cursor: pointer; }
.revealweek-card.unlocked .revealweek-thumb-wrap:hover { box-shadow: 0 0 0 2px var(--pink-bright) inset; }
.revealweek-lock-icon { font-size: 28px; opacity: 0.7; }
.revealweek-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: var(--gold);
}
.revealweek-caption { font-size: 11px; color: var(--text-muted); margin-top: 8px; min-height: 28px; }
.revealweek-viewer-card { max-width: 640px; text-align: center; }
#revealweek-viewer-media img, #revealweek-viewer-media video {
  width: 100%;
  max-height: 70vh;
  border-radius: 12px;
  object-fit: contain;
}

/* ---------------- Best in Herd (leaderboard) ---------------- */
.leaderboard-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.leaderboard-header-row .section-title { margin: 0; }
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 10px 18px;
  backdrop-filter: blur(10px);
}
.leaderboard-row.me { border-color: var(--pink-bright); box-shadow: 0 0 0 2px rgba(255,95,162,0.35); }
.lb-rank { font-weight: 800; width: 34px; text-align: center; font-size: 15px; }
.lb-name { flex: 1; font-weight: 700; }
.lb-collar { font-size: 11px; color: var(--gold); font-weight: 700; margin-left: 6px; }
.lb-points { font-weight: 800; color: var(--gold); }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--pink-deep), var(--bg-deep));
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  z-index: 100;
  box-shadow: 0 6px 24px rgba(255,46,126,0.4);
  border: 1px solid var(--panel-border);
}

@media (max-width: 640px) {
  .topbar { flex-direction: column; align-items: stretch; }
  .tabs { justify-content: center; }
  .me { justify-content: center; }
}

/* ---------------- Coins (booster pack currency) ---------------- */
.coins-pill {
  background: linear-gradient(135deg, #d9a441, #a97324);
  color: #2a1604;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---------------- Booster packs (Shop) ---------------- */
#shop-packs .shop-section-title { display: flex; align-items: center; gap: 10px; }
.shop-card.pack-card .shop-cost { color: #e6b45c; }

#view-collection-btn { margin-top: 12px; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 4, 8, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.modal-card {
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 22px 24px;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.modal-header h3 { margin: 0; color: var(--pink-soft); }

.collection-grid, .reveal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.collection-item, .reveal-item {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 8px;
  text-align: center;
  font-size: 12px;
}
.collection-item img, .reveal-item img { width: 100%; border-radius: 8px; margin-bottom: 6px; }
/* Card rarity glow -- 5 tiers matching packs.js's RARITIES, common ->
   legendary. Common gets no special treatment (the plain .collection-item/
   .reveal-item panel border is the baseline); everything above it gets a
   progressively stronger border + glow, ending in legendary's animated
   shimmer across gold/pink/violet as the top-tier "you got something
   special" moment. */
.collection-item.rarity-uncommon, .reveal-item.rarity-uncommon { border-color: var(--grass); box-shadow: 0 0 12px rgba(63,138,82,0.35); }
.collection-item.rarity-rare, .reveal-item.rarity-rare { border-color: var(--gold); box-shadow: 0 0 14px rgba(255,209,102,0.4); }
.collection-item.rarity-epic, .reveal-item.rarity-epic { border-color: var(--epic); box-shadow: 0 0 16px rgba(177,108,255,0.45); }
.collection-item.rarity-legendary, .reveal-item.rarity-legendary {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(255,209,102,0.55), 0 0 22px rgba(255,95,162,0.4), 0 0 32px rgba(177,108,255,0.3);
  animation: legendary-shimmer 2.4s ease-in-out infinite;
}
@keyframes legendary-shimmer {
  0%, 100% { border-color: var(--gold); }
  33% { border-color: var(--pink-bright); }
  66% { border-color: var(--epic); }
}
#reveal-modal .modal-card { text-align: center; }
.collection-header-actions { display: flex; align-items: center; gap: 8px; }
.collection-level {
  margin-top: 4px;
  font-weight: 800;
  color: var(--gold);
}
.collection-claim-btn { margin-top: 6px; width: 100%; }
.reveal-badge { margin-top: 6px; font-weight: 700; font-size: 11px; }
.reveal-badge.reveal-levelup { color: var(--gold); }
.reveal-badge.reveal-newcard { color: var(--pink-bright); }
#reveal-close-btn { margin-top: 14px; }

/* ---------------- Gift / admin panel ---------------- */
.gift-box a { color: var(--gold); font-weight: 700; }
.gift-codes-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.gift-code-row {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.gift-code-row .gift-code { font-weight: 800; color: var(--gold); letter-spacing: 1px; }
.gift-code-row.claimed { opacity: 0.55; }

.gift-redeem-row { display: flex; gap: 10px; margin-top: 12px; }
.gift-redeem-row input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
#gift-redeem-result { margin-top: 6px; }

/* ---------------- Rank progress ladder ---------------- */
.rank-ladder {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.rank-pip {
  flex: 1 1 0;
  min-width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--panel-border);
}
.rank-pip-label { font-size: 12px; font-weight: 800; color: var(--text-muted); }
.rank-pip-min { font-size: 10px; color: var(--text-muted); }
.rank-pip.done {
  background: rgba(255,209,102,0.16);
  border-color: var(--gold);
}
.rank-pip.done .rank-pip-label { color: var(--gold); }
.rank-pip.current {
  background: rgba(255,46,126,0.18);
  border-color: var(--pink-bright);
  box-shadow: 0 0 0 2px rgba(255,46,126,0.25);
}
.rank-pip.current .rank-pip-label,
.rank-pip.current .rank-pip-min { color: var(--pink-bright); }
.rank-progress-text { font-size: 11.5px; color: var(--text-muted); margin: 8px 0 0; }

.admin-panel { border-color: var(--gold); }
.admin-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.admin-form input {
  flex: 1;
  min-width: 160px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

/* ================================================================
   CLICK FARM -- bonus minigame behind the barn
   ================================================================ */
#view-clickfarm { max-width: 900px; }

#cf-room {
  position: relative;
  width: 100%;
  height: 74vh;
  min-height: 480px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#cf-bg {
  position: absolute;
  inset: 0;
  /* Book-matched wood-plank panel (from the reference photo) -- a true
     seamless tile (mirrored quadrants), so it repeats with no visible seam
     in either direction. The cow print now lives on the CLICK button itself. */
  background-image: url("/assets/sprites/clickfarm_wood.png");
  background-size: 240px 240px;
  background-repeat: repeat;
  z-index: 0;
}

#cf-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
#cf-overlay.active { opacity: 0.2; }
#cf-overlay video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cf-back {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
}

.cf-title {
  position: relative;
  z-index: 2;
  font-size: 32px;
  color: var(--pink-bright);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  margin: 0;
}
.cf-hint {
  position: relative;
  z-index: 2;
  color: var(--text);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  margin: 2px 0 22px;
  font-weight: 600;
}

.cf-click-btn {
  position: relative;
  z-index: 3;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,0.85);
  /* Cow print texture underneath, a semi-transparent pink glow on top so it
     still reads as "the pink button" at a glance while showing a hint of
     spots through it (the print now lives on the button, wood took over
     the room background). */
  background-image:
    radial-gradient(circle at 35% 30%, rgba(255,105,180,0.6), rgba(184,20,90,0.78) 72%),
    url("/assets/sprites/cowprint_brown.png");
  background-size: cover, 130px 130px;
  background-repeat: no-repeat, repeat;
  background-position: center, center;
  color: #fff;
  font-family: "Baloo 2", "Trebuchet MS", sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(255,46,126,0.55), inset 0 0 30px rgba(255,255,255,0.15);
  transition: transform 60ms ease, filter 200ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cf-click-btn:active { transform: scale(0.93); }
.cf-click-btn:disabled {
  cursor: not-allowed;
  filter: grayscale(0.6) brightness(0.75);
}

.cf-timeout-banner {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(20, 4, 10, 0.6);
  border: 1px solid rgba(255,255,255,0.25);
  color: #ffd166;
  font-weight: 700;
  font-size: 13.5px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.cf-timeout-banner.hidden { display: none; }

.cf-hearts {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.cf-heart {
  position: absolute;
  top: 55%;
  font-size: 26px;
  animation: cf-heart-float 1100ms ease-out forwards;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}
@keyframes cf-heart-float {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15% { opacity: 1; transform: translate(0, -10px) scale(1.1); }
  100% { transform: translate(var(--dx, 0px), -140px) scale(0.8); opacity: 0; }
}

.cf-progress {
  position: relative;
  z-index: 2;
  width: 80%;
  max-width: 360px;
  margin-top: 26px;
}
.cf-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
}
.cf-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--pink-bright));
  transition: width 300ms ease;
}
#cf-progress-label {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* Lifetime click-milestone ladder -- a second, permanent progress bar under
   the daily one. Never resets; just climbs toward the next (bigger) reward
   tier until it maxes out at 50,000 lifetime clicks. */
.cf-milestone {
  position: relative;
  z-index: 2;
  width: 80%;
  max-width: 360px;
  margin-top: 14px;
}
.cf-milestone-track {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
.cf-milestone-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8a5cff, var(--gold));
  transition: width 300ms ease;
}
#cf-milestone-label {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-dim, var(--text));
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

@media (max-width: 640px) {
  .cf-click-btn { width: 130px; height: 130px; font-size: 24px; }
  #cf-room { height: 78vh; }
}

/* ---------------- "GET HYPNOTIZED" full-page overlay ---------------- */
/* Sits outside #app-screen (see index.html) so it can cover every view, not
   just the Farm tab. Invisible and click-through by default; app.js toggles
   .active to fade it in/out (same opacity-transition pattern as #cf-overlay
   above) and drives the text sequence via #hypno-text / #hypno-image-pop. */
.hypno-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(5, 0, 8, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}
.hypno-overlay.active { opacity: 1; pointer-events: auto; }

.hypno-gif {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  opacity: 0.4; /* per spec: the spiral overlays the site at 40% opacity */
  pointer-events: none;
}

.hypno-text {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  padding: 0 24px;
  text-align: center;
  /* A big, bubbly, rounded display face instead of the app's normal body
     text -- playful and soft rather than a plain sans-serif. */
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: clamp(22px, 5vw, 44px);
  line-height: 1.5;
  color: #fff2f8;
  text-shadow: 0 0 18px rgba(255, 95, 162, 0.85), 0 0 40px rgba(168, 85, 247, 0.6), 0 2px 10px rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 500ms ease;
  white-space: pre-line;
}
.hypno-text.line-visible { opacity: 1; }

/* Container that runHypnoSequence() (app.js) fills with randomly-placed,
   randomly-timed .hypno-image-pop elements -- covers the whole overlay so
   each pop-up's own inline top/left (set in JS, as a % of this box) can
   land anywhere on screen. */
.hypno-image-pops {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hypno-image-pop {
  position: absolute;
  /* top/left set inline per pop-up; this just centers the image ON that
     point rather than anchoring its corner there. */
  transform: translate(-50%, -50%);
  max-width: 26vw;
  max-height: 32vh;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
.hypno-image-pop.pop-visible { opacity: 1; }
.hypno-image-pop img { max-width: 100%; max-height: 32vh; border-radius: 12px; box-shadow: 0 0 30px rgba(0,0,0,0.6); display: block; }

@media (max-width: 640px) {
  /* Small screens can't spare 26vw per pop-up the way a desktop can -- let
     them run a bit bigger relative to viewport width instead of shrinking
     to near-illegibility. */
  .hypno-image-pop { max-width: 48vw; max-height: 26vh; }
  .hypno-image-pop img { max-height: 26vh; }
}

.hypno-exit-btn {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.hypno-exit-btn:hover { background: rgba(0,0,0,0.55); }

/* ---------------- Voice Training minigame ---------------- */
.voicetraining-btn {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 15;
  background: linear-gradient(135deg, #ff9fce, var(--gold));
  color: #3c2405;
  border: none;
  box-shadow: 0 4px 16px rgba(255,209,102,0.45);
}
.voicetraining-btn:hover { box-shadow: 0 6px 20px rgba(255,209,102,0.6); }

/* ---------------- Denial Week minigame ---------------- */
.denial-btn {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 15;
  background: linear-gradient(135deg, var(--danger), var(--pink-deep));
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(255,84,112,0.45);
}
.denial-btn:hover { box-shadow: 0 6px 20px rgba(255,84,112,0.6); }

.denial-card { max-width: 420px; text-align: center; }
/* Wrapper exists so the pointer triangle (below) can sit just OUTSIDE the
   track's own box -- .denial-meter-track keeps `overflow: hidden` (via the
   shared .cf-progress-track) to clip the fill bar's corners, which would
   also clip the pointer if it were a child of the track itself instead of
   a sibling positioned against this wrapper. */
.denial-meter-wrap { position: relative; margin: 4px 0 18px; }
.denial-meter-track { height: 14px; }
.denial-meter-fill {
  background: linear-gradient(90deg, var(--gold), var(--pink-bright));
  transition: width 100ms linear;
}
.denial-meter-fill.danger { background: linear-gradient(90deg, var(--pink-bright), var(--danger)); }
/* Points straight up at the fill's leading edge from just below the track
   -- "where you are" while the meter is live, and it simply freezes in
   place the moment the attempt ends (release or overflow), doubling as
   "where it ended" with no second marker needed. Position is driven by
   `left` (a %, matching the fill's own width) from setDenialMeterPosition()
   in app.js; `translateX(-50%)` centers the triangle's point on that exact
   spot instead of its left corner. */
.denial-meter-pointer {
  position: absolute;
  top: 100%;
  left: 0%;
  margin-top: 3px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid var(--pink-bright);
  transform: translateX(-50%);
  transition: left 100ms linear;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255, 95, 162, 0.65));
}
.denial-tease-text {
  min-height: 20px;
  margin: 6px 0 16px;
  font-weight: 700;
  font-style: italic;
  color: var(--pink-soft);
}
.denial-release-btn { width: 100%; }

.voicetraining-card { max-width: 420px; text-align: center; }
.voicetraining-baseline {
  font-weight: 800;
  color: var(--gold);
  margin: 4px 0 14px;
}
/* Today's featured reference clip -- static waveform preview (drawn from
   the clip's own precomputed energy contour, see drawStaticWaveform() in
   app.js) + a play/pause control for listening before attempting to mimic
   it. Sits above the mic controls, visually distinct (pink wave vs. the
   live gold wave drawn during recording, see .voicetraining-visualizer). */
.voicetraining-reference {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--panel-border);
}
.voicetraining-clip-label { font-weight: 700; color: var(--text); margin: 0; }
.voicetraining-reference-canvas { background: rgba(255,143,204,0.08); }
.voicetraining-legend { margin: 0; font-size: 12px; color: var(--text-dim, var(--text)); }

.voicetraining-mic-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.voicetraining-mic-btn {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: none;
  font-size: 32px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--pink-bright), var(--pink-deep));
  color: #fff;
  box-shadow: 0 4px 20px rgba(255,46,126,0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.voicetraining-mic-btn:hover { transform: scale(1.05); }
.voicetraining-mic-btn.listening {
  animation: voicetraining-pulse 1.1s ease-in-out infinite;
}
@keyframes voicetraining-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,46,126,0.55); }
  50% { box-shadow: 0 0 0 14px rgba(255,46,126,0); }
}
/* Base canvas look shared by both waveforms in this modal: the live
   time-domain recording waveform (shown only while actively recording, so
   the player gets visual proof the mic is picking something up instead of
   blankly trusting a pulsing button while nothing happens) and the static
   reference-clip preview above it (.voicetraining-reference-canvas). */
.voicetraining-visualizer {
  width: 100%;
  max-width: 220px;
  height: 48px;
  border-radius: 10px;
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--panel-border);
}
.voicetraining-newbest { animation: voicetraining-newbest-flash 1.5s ease; }
@keyframes voicetraining-newbest-flash {
  0%, 100% { color: var(--gold); }
  30% { color: #fff; text-shadow: 0 0 12px var(--gold); }
}
.voicetraining-result { margin-top: 16px; }
.voicetraining-accuracy-track {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--panel-border);
  overflow: hidden;
}
.voicetraining-accuracy-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--pink-bright), var(--gold));
  transition: width 0.4s ease;
}
.voicetraining-accuracy-text { margin-top: 8px; font-weight: 700; color: var(--text); }

/* ---------------- The Shrine ---------------- */
.shrine-room {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  min-height: 70vh;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,159,206,0.14) 0%, transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(255,209,102,0.12) 0%, transparent 45%),
    linear-gradient(160deg, #2a1108 0%, #1a0e17 55%, #120810 100%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 0 80px rgba(0,0,0,0.35);
}
/* Admin-uploaded daily background image (see shrineImages.js + the "Shrine
   Images" admin tab). Sits underneath .shrine-bg-fade in DOM order so the
   warm vignette still washes over whatever photo is featured today; renders
   as nothing (fully transparent, no background-image set) whenever the pool
   is empty, which is exactly the original CSS-only look below. */
.shrine-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  pointer-events: none;
}
/* Faded backdrop element -- a warm vignette rather than a photo, since the
   character reference the request pointed at wasn't safe to embed here.
   Kept as its own layer so a non-explicit image can drop in behind the
   candles later without touching any of the layout above it. */
.shrine-bg-fade {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,159,206,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(255,209,102,0.14) 0%, transparent 55%);
  pointer-events: none;
}
.shrine-candles {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 60px;
  font-size: 34px;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(255,183,77,0.65));
  animation: shrine-flicker 2.4s ease-in-out infinite;
}
.shrine-candle:nth-child(2) { animation-delay: 0.4s; }
.shrine-candle:nth-child(3) { animation-delay: 0.8s; }
@keyframes shrine-flicker {
  0%, 100% { opacity: 0.85; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
.shrine-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  padding: 90px 20px 40px;
  text-align: center;
}
.shrine-title { color: var(--gold); }
.shrine-hint { margin-bottom: 18px; }
.shrine-donate-box, .shrine-leaderboard-box {
  padding: 18px 20px;
  border-radius: 16px;
  margin-bottom: 20px;
  text-align: left;
}
.shrine-coins-row { font-weight: 800; color: var(--gold); margin-bottom: 10px; }
.shrine-ladder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  font-weight: 700;
}
/* Just "Give It All" now -- the free-text custom-amount input was removed
   so the escalating quick-donate button (.shrine-ladder-row above) is the
   one deliberate way to donate a specific amount each day. */
.shrine-custom-row { display: flex; gap: 8px; flex-wrap: wrap; }
.shrine-ladder-hint { margin-bottom: 12px; }
.shrine-tease-text {
  margin-top: 14px;
  min-height: 20px;
  font-weight: 800;
  font-style: italic;
  color: var(--pink-soft);
}