:root {
  --ink: #2c2318;
  --paper: #f4ecdc;
  --warm: #e8b64c;
  --gold: #f0c45d;
  --rose: #c8544a;
  --moss: #6f8f4e;
  --shade: rgba(32, 25, 17, 0.42);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #1a1612;
  color: var(--paper);
  font-family: var(--serif);
  cursor: default;
  -webkit-font-smoothing: antialiased;
}

#scene, #scene canvas { display: block; width: 100%; height: 100%; }

/* ---- soft lens feel over the whole frame ---- */
#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background:
    radial-gradient(130% 100% at 50% 45%, rgba(0,0,0,0) 46%, rgba(26,18,10,0.30) 82%, rgba(20,13,7,0.52) 100%),
    linear-gradient(180deg, rgba(255,214,150,0.07), rgba(255,214,150,0) 35%);
  mix-blend-mode: multiply;
  opacity: 0.95;
}

/* ---- the arrow cam: letterbox bars, and the HUD steps aside ---- */
#bars::before, #bars::after {
  content: ''; position: fixed; left: 0; right: 0; height: 0; z-index: 8;
  background: #0d0a07; transition: height 380ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
#bars::before { top: 0; }
#bars::after { bottom: 0; }
body.cine #bars::before, body.cine #bars::after { height: 7vh; }
body.cine #hud .ribbon, body.cine #hud .prompt { opacity: 0 !important; }
body.cine #vignette { opacity: 1; }
body.cine #hud .pop { font-size: 46px; margin-top: -54px; }
body.cine #hud .pop small { font-size: 14px; }

/* ---- HUD ---- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }


/* score ribbon, bottom-centre */
#hud .ribbon {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 22px;
  padding: 9px 22px 10px;
  background: rgba(28, 21, 14, 0.30);
  border: 1px solid rgba(244, 236, 220, 0.13);
  border-radius: 999px;
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.20);
  opacity: 0; transition: opacity 700ms ease;
}
#hud .ribbon.on { opacity: 1; }
#hud .ribbon .cell { display: flex; align-items: baseline; gap: 7px; letter-spacing: 0.02em; }
#hud .ribbon .num { font-size: 21px; color: var(--paper); font-variant-numeric: tabular-nums; }
#hud .ribbon .lab { font-size: 11px; text-transform: lowercase; letter-spacing: 0.13em; color: rgba(244,236,220,0.55); white-space: nowrap; }
#hud .ribbon .sep { width: 1px; height: 20px; background: rgba(244,236,220,0.15); }

/* quiver pips */
#hud .quiver { display: flex; gap: 4px; align-items: flex-end; height: 20px; }
#hud .quiver i {
  display: block; width: 3px; height: 17px; border-radius: 2px;
  background: linear-gradient(180deg, var(--paper), #b9a582);
  transition: opacity 260ms ease, transform 260ms ease;
}
#hud .quiver i.spent { opacity: 0.18; transform: scaleY(0.45); }

/* floating score numbers at the hit point */
#hud .pop {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 30px; line-height: 1; color: var(--paper);
  /* A tight dark edge as well as the soft shadow, so it reads even over the gold. */
  text-shadow: 0 0 2px rgba(20,12,6,0.9), 0 0 6px rgba(20,12,6,0.6), 0 2px 12px rgba(0,0,0,0.5);
  animation: pop 1500ms cubic-bezier(.17,.84,.44,1) forwards;
  font-variant-numeric: tabular-nums;
}
#hud .pop small { display: block; font-size: 11px; letter-spacing: 0.16em; opacity: 0.8; margin-top: 3px; text-transform: lowercase; }
#hud .pop.gold { color: var(--gold); }
@keyframes pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  14%  { opacity: 1; transform: translate(-50%, -62%) scale(1.06); }
  60%  { opacity: 1; transform: translate(-50%, -104%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(0.97); }
}

/* gentle word, centre-low */
#hud .murmur {
  position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%);
  font-size: 17px; letter-spacing: 0.06em; color: rgba(244,236,220,0.92);
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
  opacity: 0; white-space: nowrap;
}
#hud .murmur.show { animation: murmur 3400ms ease forwards; }
@keyframes murmur {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  12% { opacity: 1; transform: translate(-50%, 0); }
  74% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}

/* contextual prompt ("press E to gather") */
#hud .prompt {
  position: absolute; left: 50%; top: 58%; transform: translateX(-50%);
  font-size: 14px; letter-spacing: 0.08em; color: rgba(244,236,220,0.85);
  padding: 6px 14px; border-radius: 999px;
  background: rgba(28, 21, 14, 0.34); border: 1px solid rgba(244,236,220,0.12);
  opacity: 0; transition: opacity 300ms ease;
}
#hud .prompt.on { opacity: 1; }
#hud .prompt b { color: var(--gold); font-weight: 400; }


/* ---- title plate ---- */
#title {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  /* The glade stays visible behind the plate, softened. */
  background: radial-gradient(120% 90% at 50% 40%, rgba(34,25,16,0.45), rgba(14,10,7,0.82));
  backdrop-filter: blur(3px);
  transition: opacity 900ms ease;
}
#title.gone { opacity: 0; pointer-events: none; }
#title .plate { text-align: center; max-width: 430px; padding: 0 24px; }
#title h1 {
  margin: 0; font-size: 74px; font-weight: 400; letter-spacing: 0.1em;
  color: var(--paper); text-shadow: 0 6px 30px rgba(0,0,0,0.5);
}
#title .tag { margin: 2px 0 30px; font-size: 15px; letter-spacing: 0.18em; color: rgba(244,236,220,0.6); font-style: italic; }
#title .hand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 22px; font-size: 12px; letter-spacing: 0.1em;
  color: rgba(244,236,220,0.5);
}
#title .hand button {
  font-size: 12px; letter-spacing: 0.08em; padding: 6px 13px;
  background: rgba(244,236,220,0.07); color: rgba(244,236,220,0.6);
  box-shadow: none; border: 1px solid rgba(244,236,220,0.16);
}
#title .hand button:hover { transform: none; background: rgba(244,236,220,0.13); }
#title .hand button.on {
  background: rgba(240,196,93,0.9); color: #2b2217; border-color: transparent;
}

#title button {
  font-family: var(--serif); font-size: 16px; letter-spacing: 0.08em;
  color: #2b2217; background: linear-gradient(180deg, #f3e3bd, #ddc08a);
  border: 0; border-radius: 999px; padding: 12px 28px; cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
#title button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.6); }
#title .keys {
  list-style: none; margin: 32px 0 20px; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 7px;
  font-size: 13px; color: rgba(244,236,220,0.62); letter-spacing: 0.04em;
}
#title .keys li { display: flex; justify-content: space-between; border-bottom: 1px dotted rgba(244,236,220,0.14); padding-bottom: 5px; }
#title .keys b { font-weight: 400; color: rgba(244,236,220,0.9); }
#title .note { font-size: 12px; font-style: italic; color: rgba(244,236,220,0.42); letter-spacing: 0.05em; }

/* ---- loading ---- */
#loading {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: #14100b; color: rgba(244,236,220,0.5);
  font-size: 14px; letter-spacing: 0.16em; font-style: italic;
  transition: opacity 600ms ease;
}
#loading.gone { opacity: 0; pointer-events: none; }