/* ─── Root variables ───────────────────────────────────────────────── */
:root {
  --bg:                 #09000d;

  /* Anchor position — overridden by forest.js once stage is known */
  --anchor-x:           50vw;
  --anchor-y:           50vh;

  /* Stage bounds — set by forest.js; fallback = full viewport */
  --stage-x:            0px;
  --stage-y:            0px;
  --stage-w:            100vw;
  --stage-h:            100vh;

  /* Welcome words — all overridden per style set in JS via data-set attr */
  --ww-font:            'Nunito', cursive;
  --ww-size:            clamp(3rem, 9vw, 7.5rem);
  --ww-color:           #fff8f0;
  --ww-weight:          700;
  --ww-style:           normal;
  --ww-spacing:         0.02em;
  /* Orbit / scene palette */
  --orbit-color:        rgba(160, 80, 255, 0.22);
  --anchor-glow:        rgba(200, 120, 255, 0.8);
  --trail-color:        rgba(180, 100, 255, 0.55);
}

/* ─── Reset / base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* ─── Renderer mounts ──────────────────────────────────────────────── */
#renderer-mount {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

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

/* ─── Stage clip (clips edge-wrap preview to stage bounds) ─────────── */
#stage-clip {
  position: fixed;
  left:   var(--stage-x);
  top:    var(--stage-y);
  width:  var(--stage-w);
  height: var(--stage-h);
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

/* ─── Forest silhouette overlay ────────────────────────────────────── */
#forest-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

#forest-frame svg {
  width: 100%;
  height: 100%;
  display: block;
}

#renderer-mount canvas {
  display: block;
  pointer-events: none;   /* WebGL canvas never captures input */
}

/* Three.js CSS2DRenderer appends a <div> into #css2d-mount */
#css2d-mount > div {
  pointer-events: none;   /* container is transparent; only #welcome-card captures */
}

/* ─── Welcome card (CSS2DObject target) ────────────────────────────── */
#welcome-card {
  pointer-events: auto;
  cursor: grab;
  white-space: nowrap;
  padding: 0 30px;

  font-family:      var(--ww-font);
  font-size:        var(--ww-size);
  font-weight:      var(--ww-weight);
  font-style:       var(--ww-style);
  letter-spacing:   var(--ww-spacing);
  color:            var(--ww-color);

  /* Keep card centred on its own origin (CSS2D places it at world pos) */
  transform: translate(-50%, -50%);
  transition: font-family 0.4s ease, color 0.4s ease;
}

#welcome-card.grabbing { cursor: grabbing; }

/* Load jiggle */
@keyframes jiggle {
  0%   { transform: translate(-50%, -50%) rotate(0deg)    translateX(0px); }
  12%  { transform: translate(-50%, -50%) rotate(-4deg)   translateX(-8px); }
  25%  { transform: translate(-50%, -50%) rotate(4deg)    translateX(8px); }
  38%  { transform: translate(-50%, -50%) rotate(-3deg)   translateX(-5px); }
  52%  { transform: translate(-50%, -50%) rotate(3deg)    translateX(5px); }
  65%  { transform: translate(-50%, -50%) rotate(-1.5deg) translateX(-3px); }
  78%  { transform: translate(-50%, -50%) rotate(1.5deg)  translateX(3px); }
  90%  { transform: translate(-50%, -50%) rotate(-0.5deg) translateX(-1px); }
  100% { transform: translate(-50%, -50%) rotate(0deg)    translateX(0px); }
}

#welcome-card.jiggle {
  animation: jiggle 1.1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Double-click pulse */
@keyframes pulse-pop {
  0%   { scale: 1; }
  12%  { scale: 1.2; }
  30%  { scale: 0.92; }
  50%  { scale: 1.08; }
  70%  { scale: 0.97; }
  100% { scale: 1; }
}

#welcome-card.pulse-pop {
  animation: pulse-pop 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── Style set overrides ──────────────────────────────────────────── */

/* Set 1 — Bubbly / welcoming */
#welcome-card[data-set="1"] {
  --ww-font:    'Nunito', cursive;
  --ww-weight:  700;
  --ww-style:   normal;
  --ww-color:   #fff8f0;
}

/* Set 2 — Alluring / intriguing */
#welcome-card[data-set="2"] {
  --ww-font:    'Cormorant Garamond', serif;
  --ww-weight:  300;
  --ww-style:   italic;
  --ww-color:   #e4e0f8;
}

/* Set 3 — Sparkling / exciting — shimmer pulses the color between white and pale violet */
#welcome-card[data-set="3"] {
  --ww-font:    'Dela Gothic One', sans-serif;
  --ww-weight:  400;
  --ww-style:   normal;
  --ww-color:   #ffffff;
  font-size:    calc(var(--ww-size) * 0.75);
}

@keyframes shimmer {
  0%, 100% { color: #ffffff; }
  50%       { color: #d8b4fe; }
}

#welcome-card[data-set="3"]:not(.jiggle) {
  animation: shimmer 2.4s ease-in-out infinite;
}

/* ─── Welcome-next (edge peek card) ───────────────────────────────── */
#welcome-next {
  position: absolute;   /* relative to #stage-clip; overflow:hidden clips it */
  pointer-events: none;
  white-space: nowrap;

  font-family:    var(--ww-font);
  font-size:      var(--ww-size);
  font-weight:    var(--ww-weight);
  font-style:     var(--ww-style);
  letter-spacing: var(--ww-spacing);
  color:          var(--ww-color);

  /* position set entirely by JS */
  opacity: 0;
  transform: translateY(-50%);
}

body[data-mode="light"] #welcome-card[data-set="2"],
body[data-mode="light"] #welcome-next[data-set="2"] {
  --ww-color: #4a30a8;
  color: #4a30a8;
}

/* ── Briiland HUD ───────────────────────────────────────────────────── */
#game-hud {
  position: fixed;
  bottom: calc(100vh - var(--stage-y) - var(--stage-h));
  left: var(--stage-x);
  width: var(--stage-w);
  height: 56px;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-family: 'Nunito', cursive;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #e0d4f8;
  background: rgba(9, 0, 13, 0.80);
  z-index: 100;
  pointer-events: none;
}

@keyframes hud-shimmer {
  0%, 100% { color: #ffffff; }
  50%       { color: #c4b5fd; }
}

#game-hud.active #game-score {
  animation: hud-shimmer 2.6s ease-in-out infinite;
}

#game-hud.active #game-timer {
  animation: hud-shimmer 1.9s ease-in-out infinite;
}

/* display and opacity are set directly by BriilAndGame._renderHUD() */

/* ── Briiland end-game overlay ──────────────────────────────────────── */
#game-end {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}

#game-end.visible {
  visibility: visible;
}

#game-end-score {
  font-family: 'Dela Gothic One', sans-serif;
  font-size: clamp(64px, 13vw, 132px);
  line-height: 1;
  color: #ffffff;
  opacity: 0;
  transform: scale(0.2);
}

#game-end.visible #game-end-score {
  animation: briiland-pop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.05s forwards;
}

@keyframes briiland-pop {
  to { opacity: 1; transform: scale(1); }
}

/* ── Score submit form ──────────────────────────────────────────────── */
#game-score-form {
  display: flex;
  gap: 10px;
  opacity: 0;
  pointer-events: auto;
  animation: briiland-fade 0.4s ease 0.4s forwards;
}

#game-score-form.hidden {
  display: none;
}

#game-name-input {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  width: 8em;
  padding: 10px 14px;
  color: #f3ecff;
  background: rgba(9, 0, 13, 0.7);
  border: 2px solid #6d5a9c;
  border-radius: 10px;
  outline: none;
}

#game-name-input:focus {
  border-color: #c4b5fd;
}

#game-score-submit {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 10px 20px;
  color: #09000d;
  background: #c4b5fd;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

#game-score-submit:hover:not(:disabled) {
  background: #d8b4fe;
}

#game-score-submit:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Leaderboard ────────────────────────────────────────────────────── */
#game-leaderboard {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(360px, 80vw);
  font-family: 'Nunito', sans-serif;
  font-size: clamp(15px, 2vw, 20px);
  color: #e0d4f8;
  counter-reset: rank;
  opacity: 0;
  transition: opacity 0.35s ease;
}

#game-leaderboard.visible {
  opacity: 1;
}

#game-leaderboard li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(196, 181, 253, 0.18);
}

#game-leaderboard li .lb-name {
  counter-increment: rank;
}

#game-leaderboard li .lb-name::before {
  content: counter(rank) ". ";
  color: #a99bd6;
}

#game-leaderboard li .lb-score {
  font-weight: 700;
  color: #ffffff;
}

#game-leaderboard li.lb-empty {
  justify-content: center;
  color: #a99bd6;
  border-bottom: none;
}

@keyframes briiland-fade {
  to { opacity: 1; }
}