/* ===== Return — reunion countdown ===== */
:root {
  --bone: #f3e9d2;
  --crimson: #ff3b53;
  --crimson-deep: #b5121b;
  --violet: #9a6bff;
  --violet-deep: #3a1d5c;
  --ground: 4.5%;        /* feet line, % from scene bottom */
  --char-h: 30%;         /* base character height, % of scene height */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background: #05030a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: "Press Start 2P", ui-monospace, monospace;
  color: var(--bone);
}

/* blurred castle backdrop fills any letterbox area (mobile + ultrawide) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #05030a url("character_images/background.png") center / cover no-repeat;
  filter: blur(28px) brightness(.32) saturate(.85);
  transform: scale(1.12);
  z-index: -1;
  pointer-events: none;
}

/* ===== stage / scene ===== */
.stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene {
  position: relative;
  width: min(100vw, calc(100vh * 1672 / 941));
  aspect-ratio: 1672 / 941;
  background: #05030a url("character_images/background.png") center / cover no-repeat;
  overflow: hidden;
  box-shadow: 0 0 120px rgba(0,0,0,.8) inset;
}

/* ===== atmosphere ===== */
.moon-glow {
  position: absolute;
  top: 4%; left: 17%;
  width: 18%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(220,210,255,.45) 0%, rgba(220,210,255,.12) 40%, transparent 70%);
  pointer-events: none;
  animation: moon-breathe 8s ease-in-out infinite;
}
@keyframes moon-breathe { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

.lamp-glow {
  position: absolute;
  width: 13%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,176,92,.55) 0%, rgba(255,140,60,.18) 38%, transparent 68%);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: lamp-flicker 3.3s steps(1) infinite;
}
.lamp-left  { top: 48%; left: 11%; }
.lamp-right { top: 47%; left: 88.5%; animation-delay: .7s; }
@keyframes lamp-flicker {
  0%,100% { opacity: .9; }
  8%  { opacity: .55; }
  10% { opacity: .95; }
  43% { opacity: .7; }
  46% { opacity: 1; }
  72% { opacity: .6; }
  75% { opacity: .92; }
}

.fog {
  position: absolute;
  left: -20%; right: -20%;
  height: 38%;
  bottom: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(180,170,210,.16), transparent 70%);
  filter: blur(6px);
}
.fog-back  { bottom: 8%;  opacity: .5; animation: drift 26s linear infinite; }
.fog-front { bottom: -4%; opacity: .8; height: 30%; animation: drift 18s linear infinite reverse; }
@keyframes drift { from { transform: translateX(-8%); } to { transform: translateX(8%); } }

.embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ember {
  position: absolute;
  width: 3px; height: 3px;
  background: rgba(255,180,120,.9);
  border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(255,150,80,.6);
  bottom: -2%;
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .8; }
  100% { transform: translateY(-90vh) translateX(var(--drift, 10px)); opacity: 0; }
}

.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 45%, rgba(5,3,10,.55) 100%);
}

/* ===== characters ===== */
.char {
  position: absolute;
  bottom: var(--ground);
  height: var(--char-h);
  width: auto;
  transform: translateX(-50%);
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.55));
  will-change: left, transform;
}
.woman { left: 62%; height: calc(var(--char-h) * 0.98); }
.man   { left: 8%;  }
.hug   { left: 55%; height: calc(var(--char-h) * 1.04); display: none; }

/* ===== HUD ===== */
.hud {
  position: absolute;
  top: 5%; left: 50%;
  transform: translateX(-50%);
  width: min(70%, 720px);
  text-align: center;
  pointer-events: none;
  z-index: 5;
}
.title {
  font-size: clamp(.6rem, 1.6vw, 1.1rem);
  letter-spacing: .12em;
  color: var(--bone);
  text-shadow: 0 0 8px var(--violet), 0 2px 0 #000;
  margin-bottom: 1.1em;
  opacity: .92;
}

.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(.2rem, 1vw, .6rem);
}
.cd-group { display: flex; flex-direction: column; align-items: center; gap: .5em; }
.cd-num {
  font-size: clamp(1rem, 3.4vw, 2.4rem);
  color: var(--crimson);
  text-shadow: 0 0 10px rgba(255,59,83,.85), 0 0 24px rgba(181,18,27,.6), 0 3px 0 #000;
}
.cd-lbl {
  font-size: clamp(.4rem, .9vw, .6rem);
  color: var(--bone);
  opacity: .7;
  letter-spacing: .08em;
}
.cd-sep {
  font-size: clamp(1rem, 3.4vw, 2.4rem);
  color: var(--violet);
  text-shadow: 0 0 10px var(--violet);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: .25; } }

/* closeness line */
.track { margin-top: 1.6em; }
.track-rail {
  position: relative;
  height: 10px;
  background: rgba(10,6,18,.7);
  border: 2px solid rgba(154,107,255,.5);
  box-shadow: 0 0 10px rgba(154,107,255,.35), 0 0 0 2px #000;
}
.track-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--violet-deep), var(--crimson));
  box-shadow: 0 0 8px var(--crimson);
  transition: width .15s linear;
}
.track-heart {
  position: absolute;
  top: 50%; left: 0%;
  transform: translate(-50%, -50%);
  color: var(--crimson);
  font-size: clamp(.7rem, 1.6vw, 1.1rem);
  text-shadow: 0 0 8px var(--crimson);
  transition: left .15s linear;
}
.track-caption {
  margin-top: .9em;
  font-size: clamp(.4rem, .9vw, .62rem);
  color: var(--bone);
  opacity: .75;
  letter-spacing: .06em;
}

/* ===== reunion flourish ===== */
.reunion {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  z-index: 6;
}
.reunion.show { opacity: 1; }
.reunion-text {
  font-size: clamp(1.2rem, 5vw, 3.2rem);
  color: var(--bone);
  text-shadow: 0 0 14px var(--crimson), 0 0 36px var(--violet), 0 4px 0 #000;
  transform: translateY(-30%);
  animation: pop 1.4s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes pop { 0% { transform: translateY(-30%) scale(.4); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(-30%) scale(1); opacity: 1; } }

.hearts { position: absolute; inset: 0; overflow: hidden; }
.float-heart {
  position: absolute;
  bottom: 30%;
  color: var(--crimson);
  text-shadow: 0 0 8px var(--crimson);
  animation: floatup linear forwards;
}
@keyframes floatup {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(-60vh) scale(1.2); opacity: 0; }
}

/* ===== interactive actions ===== */
.actions {
  position: absolute;
  right: 2.5%;
  top: 52%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(.5rem, 1.4vw, 1rem);
  z-index: 7;
  pointer-events: auto;
}
.act-btn {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .5em;
  padding: clamp(.5rem, 1.2vw, .8rem) clamp(.6rem, 1.4vw, 1rem);
  font-family: inherit;
  font-size: clamp(.5rem, 1.1vw, .8rem);
  color: var(--bone);
  background: rgba(10, 6, 18, .78);
  border: 2px solid;
  cursor: pointer;
  text-shadow: 0 2px 0 #000;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-width: clamp(92px, 12vw, 150px);
}
.act-emoji { grid-row: span 2; font-size: 1.5em; line-height: 1; filter: drop-shadow(0 2px 0 #000); }
.act-label { text-align: left; letter-spacing: .06em; }
.act-count {
  grid-column: 2;
  text-align: left;
  font-size: 1.25em;
  line-height: 1;
}
.act-btn.punch {
  border-color: rgba(255, 59, 83, .7);
  box-shadow: 0 0 10px rgba(255, 59, 83, .35), 0 3px 0 #000;
}
.act-btn.punch .act-count { color: var(--crimson); text-shadow: 0 0 8px rgba(255,59,83,.7), 0 2px 0 #000; }
.act-btn.punch:hover { background: rgba(60, 12, 20, .85); box-shadow: 0 0 16px rgba(255, 59, 83, .6), 0 3px 0 #000; }
.act-btn.hug {
  border-color: rgba(154, 107, 255, .7);
  box-shadow: 0 0 10px rgba(154, 107, 255, .35), 0 3px 0 #000;
}
.act-btn.hug .act-count { color: var(--violet); text-shadow: 0 0 8px rgba(154,107,255,.7), 0 2px 0 #000; }
.act-btn.hug:hover { background: rgba(40, 20, 70, .85); box-shadow: 0 0 16px rgba(154, 107, 255, .6), 0 3px 0 #000; }
.act-btn:active { transform: scale(.94); }

/* ===== punch / hug reactions ===== */
@keyframes shake {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  15% { transform: translate(calc(-50% - 7px), 2px) rotate(-4deg); }
  35% { transform: translate(calc(-50% + 7px), -1px) rotate(4deg); }
  55% { transform: translate(calc(-50% - 5px), 1px) rotate(-3deg); }
  75% { transform: translate(calc(-50% + 4px), 0) rotate(2deg); }
}
.char.hit { animation: shake .42s ease-in-out; }

.poptext {
  position: absolute;
  transform: translate(-50%, 0);
  font-family: inherit;
  font-size: clamp(.9rem, 2.4vw, 1.6rem);
  pointer-events: none;
  z-index: 8;
  white-space: nowrap;
  animation: popfloat 1s ease-out forwards;
}
.poptext.pow { color: var(--crimson); text-shadow: 0 0 10px var(--crimson), 0 3px 0 #000; }
.poptext.luv { color: var(--violet); text-shadow: 0 0 10px var(--violet), 0 3px 0 #000; }
@keyframes popfloat {
  0%   { transform: translate(-50%, 0) scale(.5); opacity: 0; }
  25%  { transform: translate(-50%, -10%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -90%) scale(1); opacity: 0; }
}

/* ===== dev scrubber ===== */
.dev {
  position: absolute; bottom: 8px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.7);
  padding: 8px 12px;
  font-size: 10px;
  display: flex; gap: 8px; align-items: center;
  z-index: 10;
  border: 1px solid rgba(154,107,255,.5);
}
.dev input { width: 240px; }
.dev[hidden] { display: none; }

@media (max-aspect-ratio: 1/1) {
  :root { --char-h: 32%; }

  /* countdown floats into the top letterbox area */
  .hud {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 3%);
    left: 50%;
    transform: translateX(-50%);
    width: min(94%, 560px);
  }
  .title { margin-bottom: .7em; font-size: clamp(.7rem, 3.6vw, 1rem); }
  .cd-num,
  .cd-sep { font-size: clamp(1.5rem, 7.5vw, 2.3rem); }
  .cd-lbl { font-size: clamp(.45rem, 2vw, .6rem); }
  .track { margin-top: 1.1em; }
  .track-caption { font-size: clamp(.5rem, 2.4vw, .64rem); }

  /* actions become a thumb-friendly bottom bar */
  .actions {
    position: fixed;
    right: auto;
    top: auto;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 3.5%);
    transform: translateX(-50%);
    flex-direction: row;
    gap: 14px;
  }
  .act-btn {
    font-size: clamp(.65rem, 3.2vw, .85rem);
    padding: .85rem 1rem;
    min-width: 8.5rem;
  }
  .act-emoji { font-size: 1.7em; }
  .act-count { font-size: 1.35em; }
}