/* /advent/: Spruce the tree, 24 baubles and the star. Tokens from site.css. */
.adv-night {
  background-color: var(--ink); color: var(--paper);
  background-image: radial-gradient(circle, rgba(255,244,230,.9) 1.4px, transparent 1.6px), radial-gradient(circle, rgba(255,244,230,.7) 1px, transparent 1.2px), radial-gradient(circle, var(--acid) 1.2px, transparent 1.4px);
  background-size: 96px 76px, 150px 120px, 240px 190px;
  animation: adv-drift 14s linear infinite;
  padding: 36px 16px 32px;
}
@keyframes adv-drift { from { background-position: 10px 10px, 60px 40px, 120px 20px; } to { background-position: 10px 86px, 60px 160px, 120px 210px; } }
.adv-inner { max-width: 1216px; margin: 0 auto; }
.adv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.adv-kicker { font-weight: 700; text-transform: uppercase; font-size: .75rem; letter-spacing: .14em; color: var(--acid); }
.adv-head h1 { margin: 8px 0; font-size: clamp(1.9rem, 5vw, 2.75rem); font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--paper); }
.adv-head p { margin: 0; max-width: 620px; color: #D9C8DF; line-height: 1.5; }
.adv-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.adv-stat { background: #30213F; border: 2px solid #8C729B; border-radius: 14px; padding: 10px 16px; min-width: 120px; }
.adv-stat strong { display: block; font-family: 'Space Mono', monospace; font-size: 1.6rem; line-height: 1; }
.adv-stat span { font-size: .75rem; font-weight: 700; color: #D9C8DF; }
.adv-stat--acid { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.adv-stat--acid span { color: var(--ink); }

.adv-scene { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 16px; }
.adv-flank { width: 120px; flex: none; margin-bottom: 30px; }
.adv-flank img { width: 120px; height: auto; display: block; }
.adv-tree { position: relative; width: 100%; max-width: 520px; aspect-ratio: 724 / 1070; flex: 1 1 300px; container-type: inline-size; }
.adv-tree > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.adv-door {
  position: absolute; transform: translate(-50%, -50%); box-sizing: border-box;
  width: clamp(36px, 8.3%, 48px); aspect-ratio: 1 / 1; border-radius: 999px;
  border: clamp(2px, .55cqw, 3px) solid var(--ink); background: var(--card); color: var(--ink);
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: clamp(14px, 3.4cqw, 18px);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  box-shadow: 0 .3cqw 0 var(--ink); transition: transform .15s ease;
}
.adv-door:hover, .adv-door:focus-visible { transform: translate(-50%, -50%) scale(1.08); }
.adv-door[data-state="sealed"] { background: #30213F; border-color: #8C729B; color: var(--acid); box-shadow: none; cursor: default; }
.adv-door[data-state="today"] { background: var(--acid); animation: adv-pulse 1.6s ease-in-out infinite; }
.adv-door[data-kind="buddy"][data-state="opened"] { background: #FFF0C2; }
.adv-door[data-kind="catch"][data-state="opened"] { background: #F0F2D7; }
.adv-door[data-kind="shop"][data-state="opened"] { background: #FFE3ED; }
.adv-door[aria-pressed="true"] { outline: 3px solid var(--hot); outline-offset: 2px; }
@keyframes adv-pulse { 0%, 100% { box-shadow: 0 0 0 .7cqw var(--hot), 0 0 0 1.1cqw var(--ink); } 50% { box-shadow: 0 0 0 1.1cqw var(--hot), 0 0 0 1.5cqw var(--ink); } }
.adv-star {
  position: absolute; left: 63.4%; top: 13.3%; width: 31%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ink);
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: clamp(22px, 6cqw, 34px); padding-top: 2%; box-sizing: border-box;
  animation: adv-twinkle 2.6s ease-in-out infinite;
}
@keyframes adv-twinkle { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.07) rotate(4deg); } }
.adv-bob { animation: adv-bob 3.2s ease-in-out infinite; }
.adv-bob--2 { animation-duration: 3.8s; animation-delay: .6s; }
@keyframes adv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-width: 640px) { .adv-flank { display: none; } }

.adv-panels { max-width: 1216px; margin: 28px auto 0; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 20px; }
.adv-detail { flex: 999 1 420px; min-width: 0; background: var(--card); border: 3px solid var(--ink); border-radius: 18px; padding: 22px; }
.adv-side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.adv-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-family: 'Space Mono', monospace; font-size: .75rem; font-weight: 700; color: var(--muted); }
.adv-detail h2 { margin: 12px 0 14px; font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.adv-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.adv-facts li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.adv-dot { margin-top: 6px; width: 10px; height: 10px; border-radius: 999px; background: var(--out); flex: none; }
.adv-dot--in { background: var(--in); }
.adv-buddy { background: #FFF0F6; border: 3px solid var(--ink); border-radius: 18px; padding: 18px; display: flex; gap: 14px; align-items: center; }
.adv-buddy img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.adv-buddy strong { display: block; margin-bottom: 4px; }
.adv-buddy button { margin-top: 8px; }
.adv-legend { background: var(--card); border: 3px solid var(--ink); border-radius: 18px; padding: 18px; font-size: .9rem; line-height: 1.45; }
.adv-legend ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.adv-legend li { display: flex; gap: 8px; }
.adv-legend .adv-dot { margin-top: 5px; }
.adv-star-panel { max-width: 1216px; margin: 28px auto 0; padding: 0 16px; }
.adv-star-panel > div { border: 3px solid var(--ink); border-radius: 20px; background: var(--ink); color: var(--paper); padding: 26px 28px; }
.adv-star-panel h2 { margin: 10px 0 8px; font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; }
.adv-star-panel p { margin: 0; color: #D9C8DF; line-height: 1.5; }
.adv-lock { max-width: 760px; margin: 28px auto; padding: 0 16px; }
.adv-lock > div { border: 2px solid var(--ink); border-radius: 14px; background: var(--card); padding: 20px; box-shadow: 4px 4px 0 var(--ink); }
.adv-sealed-note { text-align: center; color: #D9C8DF; margin: 18px 0 0; font-size: .95rem; }
.adv-btn { display: inline-block; background: var(--acid); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 10px 18px; font-weight: 800; text-decoration: none; cursor: pointer; font: inherit; font-weight: 800; }
.motion-paused .adv-night, .motion-paused .adv-door, .motion-paused .adv-star, .motion-paused .adv-bob { animation: none; }

/* Locked: the tree still shows, every bauble sealed, the pass card under it. */
.adv-locked .adv-stats, .adv-locked .adv-panels, .adv-locked .adv-star-panel { display: none; }
.adv-locked .adv-lock { margin-top: 20px; }
.adv-locked .adv-sealed-note { color: var(--acid); font-weight: 700; }

/* Free members and the sign-up lock. */
.adv-free .adv-stat--acid { display: none; }
.adv-lock > .capture { display: block; margin: 0; }
.adv-free-tag { display: inline-block; background: var(--in); color: var(--paper); border-radius: 6px; padding: 5px 11px; font-size: 0.8rem; font-weight: 700; }
.adv-lock__title { font-weight: 900; margin: 12px 0 8px; font-size: 1.5rem; }
.adv-lock__lede { margin: 0 0 14px; line-height: 1.6; }
.adv-lock .capture-form { margin: 0 0 6px; }
.adv-lock .capture-done { margin: 0 0 6px; }
.adv-lock__pass { margin: 16px 0 10px; padding-top: 14px; border-top: 2px dashed var(--line, #d9c8df); line-height: 1.6; }
.adv-lock__pass .adv-btn { margin-top: 8px; }
.adv-lock__fine { margin: 0; color: var(--muted); font-size: 14px; }
.adv-offer { background: #FFF6D6; border: 3px solid var(--ink); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 8px; line-height: 1.45; font-size: .92rem; }
.adv-offer .adv-btn { align-self: flex-start; }
.adv-free .adv-legend__catch { display: none; }