/* ENCHANTED GROVE: moonlit fey forest. Moonbeams, pine silhouettes, mossy glowing panels, fireflies. */
[data-theme="grove"] {
  --bg: #05130d;
  --bg-2: #0a2316;
  --surface: #0d2a1d;
  --surface-2: #143a28;
  --text: #e3f6df;
  --text-dim: #9fc8a6;
  --accent: #9be37a;
  --accent-2: #f4d06f;
  --accent-3: #4fc2a8;
  --border: #2f7a56;
  --shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(155,227,122,.12), inset 0 0 30px rgba(79,194,168,.06);
  --radius: 14px;
  --font-display: 'Uncial Antiqua','Cinzel Decorative',Georgia,serif;
  --font-body: 'Cormorant Garamond','IM Fell English',Georgia,serif;
  --title-glow: 0 0 8px rgba(155,227,122,.7), 0 0 26px rgba(79,194,168,.5), 0 2px 0 #000;
  --btn-bg: linear-gradient(180deg,#8ee07a,#46b672);
  --btn-text: #04170d;
  --card-bg-fact: linear-gradient(160deg, #123d33, #0c2a22);
  --card-bg-topic: linear-gradient(160deg, #173f25, #0e2a1a);
  --top-label: "\2726  Fae favourite";
}
[data-theme="grove"] body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1.15rem; }

/* moonlight, drifting light shafts, two layers of pine silhouettes */
[data-theme="grove"] .backdrop {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(180,255,210,.22), transparent 55%),
    linear-gradient(105deg, transparent 18%, rgba(190,255,220,.05) 22%, transparent 30%),
    linear-gradient(100deg, transparent 52%, rgba(190,255,220,.045) 57%, transparent 66%),
    linear-gradient(112deg, transparent 72%, rgba(190,255,220,.05) 76%, transparent 84%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='300' viewBox='0 0 640 300'%3E%3Cg fill='%230a2519'%3E%3Cpath d='M90 90 L122 160 H106 L134 230 H104 L140 300 H40 L76 230 H46 L74 160 H58Z'/%3E%3Cpath d='M330 60 L366 140 H348 L380 220 H346 L388 300 H272 L314 220 H280 L312 140 H294Z'/%3E%3Cpath d='M560 100 L590 164 H574 L600 232 H572 L606 300 H514 L548 232 H520 L546 164 H530Z'/%3E%3C/g%3E%3Cg fill='%2304100b'%3E%3Cpath d='M200 150 L226 206 H212 L236 262 H210 L242 300 H158 L190 262 H164 L188 206 H174Z'/%3E%3Cpath d='M450 170 L474 218 H462 L484 266 H460 L488 300 H412 L440 266 H416 L438 218 H426Z'/%3E%3Cpath d='M20 190 L42 232 H32 L52 272 H30 L56 300 H-14 L12 272 H-10 L12 232 H2Z'/%3E%3Crect x='0' y='286' width='640' height='14'/%3E%3C/g%3E%3C/svg%3E") bottom center / 640px 300px repeat-x,
    linear-gradient(180deg, #0a2418 0%, #05130d 100%);
  animation: gr-moon 9s ease-in-out infinite;
  overflow: hidden;
}
@keyframes gr-moon { 0%,100% { filter: brightness(1) } 50% { filter: brightness(1.12) } }
/* two drifting firefly layers on co-prime tiles so the pattern never visibly repeats; they pulse out of phase */
[data-theme="grove"] .backdrop::before,
[data-theme="grove"] .backdrop::after {
  content: ""; position: absolute; inset: -80px; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(234,255,154,.95) 0 1.5px, rgba(234,255,154,.3) 2.5px, transparent 7px),
    radial-gradient(circle, rgba(190,255,160,.9) 0 1.2px, rgba(190,255,160,.25) 2px, transparent 6px),
    radial-gradient(circle, rgba(255,230,140,.9) 0 1.5px, rgba(255,230,140,.3) 2.5px, transparent 7px);
  background-size: 331px 283px, 419px 367px, 523px 449px;
  background-position: 37px 61px, 211px 157px, 401px 23px;
  animation: gr-drift-a 17s ease-in-out infinite alternate, gr-pulse 3.4s ease-in-out infinite;
}
[data-theme="grove"] .backdrop::after {
  background-size: 293px 389px, 467px 311px, 359px 503px;
  background-position: 151px 13px, 29px 233px, 263px 341px;
  animation: gr-drift-b 23s ease-in-out infinite alternate, gr-pulse 4.6s ease-in-out -2.1s infinite;
}
@keyframes gr-drift-a { from { transform: translate(0, 0) } to { transform: translate(38px, -52px) } }
@keyframes gr-drift-b { from { transform: translate(0, 0) } to { transform: translate(-44px, -30px) } }
@keyframes gr-pulse { 0%,100% { opacity: .2 } 50% { opacity: 1 } }

/* title: moonlit lettering */
[data-theme="grove"] #group-name {
  font-family: var(--font-display); letter-spacing: .04em;
  background: linear-gradient(180deg,#f2ffe6 10%,#b6f08c 48%,#4fc2a8 80%,#e8e090 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 16px rgba(120,240,170,.5));
}
[data-theme="grove"] .hero-art svg { filter: drop-shadow(0 0 16px rgba(110,224,160,.35)); }
[data-theme="grove"] .hero-art .float { animation: gr-float 4.5s ease-in-out infinite; }
@keyframes gr-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
[data-theme="grove"] .hero-art .ff { filter: drop-shadow(0 0 4px #eaff9a); animation: gr-ff 3.2s ease-in-out infinite; }
@keyframes gr-ff { 0%,100% { opacity: .15 } 50% { opacity: 1 } }
[data-theme="grove"] .hero-art .glow { filter: drop-shadow(0 0 5px rgba(160,255,220,.8)); }

/* mossy glowing panels with leaf ornaments in the corners */
[data-theme="grove"] .gathering,
[data-theme="grove"] #add-form {
  position: relative;
  background: linear-gradient(180deg, rgba(22,62,42,.92), rgba(8,28,19,.95));
  border: 2px solid var(--border); border-radius: 20px;
  box-shadow: 0 0 0 1px #0a2418, 0 0 26px rgba(79,194,168,.18), 0 14px 30px rgba(0,0,0,.6), inset 0 0 34px rgba(155,227,122,.07);
}
[data-theme="grove"] .gathering::before,
[data-theme="grove"] .gathering::after,
[data-theme="grove"] #add-form::before,
[data-theme="grove"] #add-form::after {
  content: "\2767"; position: absolute; top: 6px; font-size: 1.3rem; line-height: 1; color: var(--accent);
  text-shadow: 0 0 8px rgba(155,227,122,.7); pointer-events: none;
}
[data-theme="grove"] .gathering::before, [data-theme="grove"] #add-form::before { left: 14px; transform: scaleX(-1); }
[data-theme="grove"] .gathering::after, [data-theme="grove"] #add-form::after { right: 14px; }
[data-theme="grove"] .gathering .label {
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .28em; color: var(--accent);
}
[data-theme="grove"] .agenda h2 {
  font-family: var(--font-display); text-align: center; letter-spacing: .06em; color: var(--accent);
  text-shadow: 0 0 14px rgba(155,227,122,.5), 0 2px 0 #000;
}
[data-theme="grove"] .agenda h2::after {
  content: "\2014\2003\273F\2003\2014"; display: block; font-size: .9rem; letter-spacing: .2em; color: var(--border); margin-top: 2px;
}
[data-theme="grove"] #next-date { font-family: var(--font-display); color: var(--accent-2); text-shadow: 0 0 14px rgba(244,208,111,.5), 0 2px 0 #000; }
[data-theme="grove"] #countdown .unit {
  background: radial-gradient(ellipse at 50% 30%, #1d5a3c, #0b2a1c); border: 2px solid var(--border);
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; padding: .8rem .25rem .6rem;
  box-shadow: 0 0 16px rgba(79,194,168,.25), inset 0 0 14px rgba(155,227,122,.12);
}
[data-theme="grove"] #countdown .num { font-family: var(--font-display); color: var(--accent-2); text-shadow: 0 0 12px rgba(244,208,111,.6); }
[data-theme="grove"] #countdown .lbl { font-family: var(--font-display); font-size: .6rem; letter-spacing: .12em; color: var(--text-dim); }
[data-theme="grove"] .badge {
  background: linear-gradient(180deg,#6fd8c0,#3aa88e); color: #04170d; font-family: var(--font-display); letter-spacing: .06em; font-weight: 400;
  box-shadow: 0 0 14px rgba(79,194,168,.55);
}
[data-theme="grove"] #location { color: var(--accent-2); }
[data-theme="grove"] #location::before { content: "\2756  "; color: var(--accent); }

/* leaf-shaped type tabs */
[data-theme="grove"] .type-opt span {
  background: #0a2418; color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 999px 6px 999px 6px; font-family: var(--font-display); letter-spacing: .06em; font-weight: 400;
}
[data-theme="grove"] .type-opt input:checked + span {
  background: linear-gradient(180deg,#8ee07a,#46b672); color: #04170d; border-color: #c8ffb0;
  box-shadow: 0 0 16px rgba(155,227,122,.5);
}
[data-theme="grove"] #add-text {
  background: #06160e; color: var(--text); border: 2px solid var(--border); border-radius: 12px;
  font-family: var(--font-body); font-size: 1.25rem; box-shadow: inset 0 2px 14px rgba(0,0,0,.6), 0 0 14px rgba(79,194,168,.1);
}
[data-theme="grove"] #add-text::placeholder { color: #7fa88a; opacity: 1; }
[data-theme="grove"] #form-msg { color: #8cf0a8; }
[data-theme="grove"] #form-msg.error { color: #ffb4a0; }

/* agenda: leaf tablets with a living vine down the edge */
[data-theme="grove"] #agenda-list { gap: 1rem; }
[data-theme="grove"] .card {
  border: 1px solid var(--border); border-radius: 22px 6px 22px 6px; padding-left: 1.4rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.5), inset 0 0 22px rgba(155,227,122,.05);
  transition: transform .25s, box-shadow .25s;
}
[data-theme="grove"] .card::before {
  content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, transparent, var(--accent-3), var(--accent), transparent); opacity: .8;
}
[data-theme="grove"] .card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(0,0,0,.55), 0 0 22px rgba(79,194,168,.25); }
[data-theme="grove"] .card-type { font-family: var(--font-display); font-size: .68rem; letter-spacing: .16em; font-weight: 400; }
[data-theme="grove"] .card-topic .card-type::before { content: "\2726  "; }
[data-theme="grove"] .card-fact .card-type::before { content: "\273F  "; }
[data-theme="grove"] .card-fact .card-type { color: var(--accent-2); }
[data-theme="grove"] .card-text { font-size: 1.3rem; line-height: 1.35; }
[data-theme="grove"] .card-top { box-shadow: 0 0 0 2px var(--accent-2), 0 0 30px rgba(244,208,111,.4), 0 8px 20px rgba(0,0,0,.5); }
[data-theme="grove"] .top-tag { color: #2a1f00; background: var(--accent-2); padding: 0 .6em; border-radius: 999px; letter-spacing: .08em; }
/* the vote is a firefly in a jar of light */
[data-theme="grove"] .card .vote {
  border-radius: 50%; width: 58px; height: 58px; min-width: 58px; padding: 0;
  background: radial-gradient(circle at 40% 35%, #1f5a3e, #0b2a1c); color: var(--accent);
  border: 2px solid var(--accent-3); font-family: var(--font-display);
  box-shadow: 0 0 14px rgba(79,194,168,.5), inset 0 0 10px rgba(79,194,168,.25);
}
[data-theme="grove"] .card .vote:hover { transform: scale(1.07); }
[data-theme="grove"] .card .vote[aria-pressed="true"] {
  background: radial-gradient(circle at 40% 35%, #fffbc0, #f4d06f 55%, #c8962a); color: #2a1f00; border-color: #fff3a8;
  box-shadow: 0 0 22px rgba(244,208,111,.85), 0 0 44px rgba(244,208,111,.35);
}
[data-theme="grove"] #empty-msg { font-style: italic; }

/* buttons */
[data-theme="grove"] button { font-family: var(--font-display); letter-spacing: .06em; }
[data-theme="grove"] .btn-primary,
[data-theme="grove"] #reroll-theme,
[data-theme="grove"] #sound-toggle {
  background: var(--btn-bg); color: var(--btn-text); border: 2px solid #1e5a3a; border-radius: 999px;
  box-shadow: 0 3px 0 #123b26, 0 0 16px rgba(120,230,150,.3);
}
[data-theme="grove"] #sound-toggle[aria-pressed="false"] { background: linear-gradient(180deg,#1d4a34,#12301f); color: var(--text-dim); }
[data-theme="grove"] .btn-primary:hover,
[data-theme="grove"] #reroll-theme:hover,
[data-theme="grove"] #sound-toggle:hover { filter: brightness(1.12); box-shadow: 0 3px 0 #123b26, 0 0 24px rgba(120,230,150,.6); }
[data-theme="grove"] button:active { transform: translateY(2px); }
[data-theme="grove"] :focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
[data-theme="grove"] a { color: var(--accent); }
[data-theme="grove"] ::selection { background: var(--accent); color: #04170d; }

[data-theme="grove"] .rolling { animation: gr-roll .8s cubic-bezier(.3,1.4,.5,1); }
@keyframes gr-roll {
  0% { transform: rotate(0) scale(1); filter: brightness(1) }
  30% { transform: rotate(-6deg) scale(1.05); filter: brightness(1.4) drop-shadow(0 0 14px #9be37a) }
  60% { transform: rotate(5deg) scale(.98) }
  100% { transform: rotate(0) scale(1); filter: brightness(1) }
}
/* flavor text */
[data-theme="grove"] .flavor blockquote { color: #d2f0cc; font-size: 1.4rem; text-shadow: 0 1px 0 #000, 0 0 14px rgba(0,0,0,.8); }
@media (prefers-reduced-motion: reduce) {
  [data-theme="grove"] .backdrop, [data-theme="grove"] .backdrop::before, [data-theme="grove"] .backdrop::after, [data-theme="grove"] .hero-art .float, [data-theme="grove"] .hero-art .ff, [data-theme="grove"] .rolling { animation: none; }
  [data-theme="grove"] .card { transition: none; }
}