/* ==========================================================
   Quest for Cupcake's Heart — global pixel UI
   ========================================================== */

:root {
  /* Warm mystical night palette */
  --night-deep: #150c28;
  --night: #241540;
  --night-soft: #362258;
  --purple-mid: #4e2f74;
  --gold: #f0b860;
  --gold-bright: #ffd98a;
  --gold-dim: #a87c3a;
  --pink: #f2a0c0;
  --pink-soft: #ffc9dd;
  --torch: #e8863c;
  --parchment: #e8d5a8;
  --parchment-dark: #c9ab6e;
  --parchment-edge: #8a6a38;
  --ink: #46311c;

  --font-pixel: "Press Start 2P", "Courier New", monospace;
  --px: 4px; /* base pixel unit for chunky borders */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 45%, #0c0816 0%, #000000 75%);
  color: var(--gold-bright);
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}

/* ---------- The simulator window ---------- */

#frame-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2vmin;
}

#game-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(94vw, calc(88dvh * 16 / 9));
  max-height: 88dvh;
  background: var(--night-deep);
  border: 6px solid #1a1424;
  outline: 2px solid #060409;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(240, 184, 96, 0.18),
    0 0 34px rgba(78, 47, 116, 0.55),
    0 0 90px rgba(240, 184, 96, 0.08),
    inset 0 0 40px rgba(0, 0, 0, 0.5);
  isolation: isolate;
  container-type: size; /* lets scenes size themselves in cqw/cqh units */
}

#frame-label {
  font-size: clamp(6px, 1.3vmin, 10px);
  color: rgba(240, 184, 96, 0.5);
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  gap: 1vmin;
}

#frame-label .led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f2a0c0;
  box-shadow: 0 0 6px #f2a0c0;
  animation: led-breathe 2.4s ease-in-out infinite;
}

@keyframes led-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* CRT scanlines + vignette over the whole window */
#crt-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(6, 4, 12, 0.42) 100%),
    repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.16) 0 1px,
      transparent 1px 3px
    );
}

/* Faint refresh line sweeping down the screen, like an old CRT */
#crt-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.035) 45%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.035) 55%,
    transparent 100%
  );
  animation: crt-sweep 6s linear infinite;
}

@keyframes crt-sweep {
  from { top: -16%; }
  to   { top: 112%; }
}

/* ---------- CRT power on / off ---------- */

#boot-screen {
  position: absolute;
  inset: 0;
  z-index: 70;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vmin;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

#boot-screen.off {
  opacity: 0;
  pointer-events: none;
}

#boot-text {
  font-size: clamp(14px, 3.4vmin, 28px);
  color: var(--pink-soft);
  text-shadow: 0 0 14px rgba(242, 160, 192, 0.7), 2px 2px 0 #000;
  min-height: 1.4em;
}

#boot-hint {
  font-size: clamp(8px, 1.7vmin, 12px);
  color: rgba(240, 184, 96, 0.6);
  animation: caret-blink 1.4s steps(1) infinite;
}

/* The picture expanding from a thin bright line, old-TV style */
#game-frame.crt-opening #stage,
#game-frame.crt-opening #particle-layer,
#game-frame.crt-opening #hud {
  animation: crt-open 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes crt-open {
  0%   { transform: scale(1, 0.004); filter: brightness(7) saturate(0.2); }
  35%  { transform: scale(1, 0.012); filter: brightness(9) saturate(0.2); }
  60%  { transform: scale(1, 0.5); filter: brightness(2.4); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}

/* …and collapsing back to a dot on power-off */
#game-frame.crt-off #stage,
#game-frame.crt-off #particle-layer,
#game-frame.crt-off #hud,
#game-frame.crt-off #mute-btn {
  animation: crt-close 0.7s cubic-bezier(0.6, 0, 0.8, 0.4) both;
}

@keyframes crt-close {
  0%   { transform: scale(1, 1); filter: brightness(1); }
  55%  { transform: scale(1, 0.006); filter: brightness(5); }
  80%  { transform: scale(0.4, 0.004); filter: brightness(7); }
  100% { transform: scale(0.002, 0.002); filter: brightness(0); opacity: 0; }
}

#game-frame.crt-off {
  background: #000;
}

/* Star-shaped glow flash at the center of the tube */
#crt-flash {
  position: absolute;
  inset: 0;
  z-index: 72;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 217, 138, 0.5) 6%, transparent 16%),
    linear-gradient(180deg, transparent 48.6%, rgba(255, 255, 255, 0.85) 49.6%, rgba(255, 255, 255, 0.85) 50.4%, transparent 51.4%),
    linear-gradient(90deg, transparent 49.1%, rgba(255, 255, 255, 0.7) 49.8%, rgba(255, 255, 255, 0.7) 50.2%, transparent 50.9%);
  animation: crt-flash 0.85s ease-out both;
}

@keyframes crt-flash {
  0%   { opacity: 0; transform: scale(0.05); }
  25%  { opacity: 1; transform: scale(0.5); }
  60%  { opacity: 0.8; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* ---------- Mute toggle ---------- */

#mute-btn {
  position: absolute;
  top: 2vmin;
  left: 2.5vmin;
  z-index: 65;
  width: clamp(26px, 5.5cqh, 40px);
  height: clamp(26px, 5.5cqh, 40px);
  font-family: var(--font-pixel);
  font-size: clamp(11px, 2.4cqh, 17px);
  color: var(--gold-bright);
  background: rgba(21, 12, 40, 0.75);
  border: 2px solid var(--gold-dim);
  cursor: pointer;
  transition: filter 0.15s ease;
}

#mute-btn:hover {
  filter: brightness(1.3);
}

#mute-btn.muted {
  color: rgba(240, 184, 96, 0.35);
  text-decoration: line-through;
}

/* No scrollbars inside the simulator window — scroll still works */
.screen,
.scroll-body,
.parchment {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.screen::-webkit-scrollbar,
.scroll-body::-webkit-scrollbar,
.parchment::-webkit-scrollbar {
  display: none;
}

img,
canvas {
  image-rendering: pixelated;
}

.hidden {
  display: none !important;
}

/* ---------- Ambient particle layer ---------- */

#particle-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Stage & screens ---------- */

#stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4vmin 6vmin;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.4s ease, transform 0.45s ease;
  overflow-y: auto;
  isolation: isolate; /* keeps .scene-decor (z-index:-1) above the sky, below content */
}

.screen.visible {
  transform: scale(1);
}

/* On short landscape screens (phones): start content near the top with
   breathing room, and shrink the UI so nothing clips at the bottom. */
@media (max-height: 480px) {
  .screen {
    justify-content: flex-start;
    padding: 5vmin 5vmin 9vmin;
  }

  .level-header { margin-bottom: 1.2vmin; }
  .level-name { font-size: clamp(10px, 2.6vmin, 16px); margin-bottom: 1vmin; }
  .level-subtitle { font-size: clamp(7px, 1.5vmin, 11px); margin-bottom: 1.6vmin; }
  .flavor-text { font-size: clamp(7px, 1.6vmin, 11px); line-height: 1.8; margin-bottom: 1.6vmin; }
  .challenge-area { gap: 1.6vmin; }
  .stack { gap: 2vmin; }

  .dialogue-box {
    padding: 2vmin 3vmin;
    font-size: clamp(8px, 1.7vmin, 12px);
    line-height: 1.8;
  }

  .game-title { font-size: clamp(15px, 4vmin, 30px); }
  .intro-line { font-size: clamp(8px, 1.7vmin, 12px); line-height: 1.9; }

  /* Scenes take less of the frame so header + tray + hints all fit */
  .road-scene,
  .beach-scene,
  .villain-arena,
  .sky-scene,
  .valley-scene {
    height: min(48cqh, 420px);
  }

  .map-board { height: min(52cqh, 430px); }

  .memory-card {
    width: clamp(36px, 9.5vmin, 92px);
    height: clamp(42px, 11.5vmin, 108px);
  }
  .table3d { padding: 1.6vmin 2vmin; }

  .tome-art svg { width: clamp(32px, 8cqh, 70px); }
  .tome-label { font-size: clamp(7px, 1.6vmin, 11px); }

  /* Finale screens (and the date picker) hold little content —
     keep them vertically centered instead of pinned to the top */
  .screen.bg-finale,
  .screen:has(.game-title),
  .screen:has(.date-panel) {
    justify-content: center;
    padding-bottom: 6vmin;
  }
}

.screen.visible {
  opacity: 1;
}

/* Per-realm skies (the floor + silhouettes come from .scene-decor below) */
.bg-title   { background: linear-gradient(180deg, #150c28 0%, #2a1a4a 48%, #4e2f74 62%, #2a1a4a 100%); }
.bg-level1  { background: linear-gradient(180deg, #1c1030 0%, #33204e 50%, #543a2a 62%, #2a1a30 100%); }
.bg-level2  { background: linear-gradient(180deg, #241540 0%, #46285a 48%, #6e4632 62%, #33203a 100%); }
.bg-level3  { background: linear-gradient(180deg, #0e0a24 0%, #241540 52%, #3a2a5e 62%, #1c1430 100%); }
.bg-level4  { background: linear-gradient(180deg, #101a34 0%, #22315c 48%, #3a5578 62%, #1c2844 100%); }
.bg-level5  { background: linear-gradient(180deg, #1e1030 0%, #3c1e4e 50%, #5e2a4a 62%, #2a142e 100%); }
.bg-scroll  { background: linear-gradient(180deg, #1a1030 0%, #302048 62%, #241838 100%); }
.bg-finale  { background: linear-gradient(180deg, #241540 0%, #4e2f74 50%, #8a4a6a 62%, #3a2050 100%); }

/* ---------- Scene depth: perspective floor + horizon silhouettes ----------
   .scene-decor is injected by UI.createScreen into every screen.
   z-index: -1 + .screen { isolation } keeps it above the sky gradient
   but below all content, with zero changes to level code. */

.scene-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

/* Tiled floor, tilted back like a retro RPG ground plane */
.scene-floor {
  --fa: #3a2a5e;
  --fb: #332452;
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: -16%;
  height: 62%;
  background: repeating-conic-gradient(var(--fa) 0 25%, var(--fb) 0 50%) 0 0 / 52px 52px;
  transform: perspective(340px) rotateX(56deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 48%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 48%);
}

/* Horizon band: glow + parallax silhouettes, bottom-anchored at ~62% */
.scene-back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 62%;
  background-repeat: no-repeat;
}

/* Warm glow where sky meets floor (default for every realm) */
.scene-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 30% at 50% 100%, rgba(240, 184, 96, 0.16), transparent 75%);
}

/* --- Title & finale: starlit village skyline with lit windows --- */
.bg-title .scene-floor,
.bg-finale .scene-floor { --fa: #3a2a5e; --fb: #322350; }

.bg-title .scene-back,
.bg-finale .scene-back {
  background-image:
    linear-gradient(#f0b860, #f0b860),
    linear-gradient(#f0b860, #f0b860),
    linear-gradient(#e8863c, #e8863c),
    linear-gradient(#1c1236, #1c1236),
    linear-gradient(#231744, #231744),
    linear-gradient(#1c1236, #1c1236),
    linear-gradient(#231744, #231744),
    linear-gradient(#1c1236, #1c1236);
  background-size:
    1.4% 4%, 1.4% 4%, 1.4% 5%,
    9% 30%, 7% 44%, 12% 24%, 10% 36%, 13% 27%;
  background-position:
    7.5% 82%, 79% 76%, 91.5% 86%,
    6% 100%, 17% 100%, 31% 100%, 78% 100%, 90% 100%;
}

/* --- Level 1: towering bookshelf silhouettes --- */
.bg-level1 .scene-floor { --fa: #4e3826; --fb: #443022; }

.bg-level1 .scene-back {
  background-image:
    repeating-linear-gradient(180deg, #241634 0 14%, #2e1c42 14% 17%),
    repeating-linear-gradient(180deg, #241634 0 14%, #2e1c42 14% 17%),
    repeating-linear-gradient(180deg, #241634 0 14%, #2e1c42 14% 17%);
  background-size: 13% 66%, 10% 52%, 14% 72%;
  background-position: 5% 100%, 22% 100%, 88% 100%;
}

/* --- Level 2: cafe window glow + string of fairy lights --- */
.bg-level2 .scene-floor { --fa: #5e4226; --fb: #533a20; }

.bg-level2 .scene-back {
  background-image:
    radial-gradient(circle, #ffd98a 2.5px, rgba(255, 217, 138, 0.35) 4px, transparent 5px),
    linear-gradient(180deg, rgba(255, 217, 138, 0.5), rgba(232, 134, 60, 0.25)),
    linear-gradient(180deg, rgba(255, 217, 138, 0.5), rgba(232, 134, 60, 0.25)),
    linear-gradient(#33203a, #33203a);
  background-size: 44px 26px, 9% 34%, 9% 34%, 100% 12%;
  background-position: 0 12%, 16% 88%, 74% 88%, 0 100%;
  background-repeat: repeat-x, no-repeat, no-repeat, no-repeat;
}

/* --- Level 3: distant hill silhouettes (the road scene sits on top) --- */
.bg-level3 .scene-floor { --fa: #2a2138; --fb: #241c30; }

.bg-level3 .scene-back {
  background-image:
    radial-gradient(60% 120% at 20% 100%, #1a1230 0%, transparent 60%),
    radial-gradient(60% 100% at 85% 100%, #1a1230 0%, transparent 55%);
  background-size: 100% 100%, 100% 100%;
}

/* --- Level 4: sandy shore floor, sea handled by the beach scene --- */
.bg-level4 .scene-floor { --fa: #c9ab6e; --fb: #bda05f; opacity: 0.5; }

.bg-level4 .scene-back::after {
  background: radial-gradient(55% 30% at 50% 100%, rgba(200, 220, 255, 0.14), transparent 75%);
}

/* --- Level 5: jagged dark lair --- */
.bg-level5 .scene-floor { --fa: #3c2a44; --fb: #33233a; }

.bg-level5 .scene-back {
  background-image:
    linear-gradient(#22132e, #22132e),
    linear-gradient(#2a1838, #2a1838),
    linear-gradient(#22132e, #22132e);
  background-size: 11% 58%, 8% 40%, 12% 66%;
  background-position: 4% 100%, 14% 100%, 92% 100%;
}

/* Scroll-reading screens stay calm: dim floor, no silhouettes */
.bg-scroll .scene-floor { --fa: #2c1e44; --fb: #271a3c; opacity: 0.6; }

/* ---------- Typography ---------- */

.game-title {
  font-size: clamp(18px, 4.5vmin, 40px);
  line-height: 1.6;
  color: var(--gold-bright);
  text-shadow:
    0 0 12px rgba(240, 184, 96, 0.55),
    3px 3px 0 var(--night-deep);
  margin-bottom: 2vmin;
}

.game-subtitle {
  font-size: clamp(9px, 2vmin, 16px);
  color: var(--pink);
  text-shadow: 2px 2px 0 var(--night-deep);
  margin-bottom: 5vmin;
}

.intro-line {
  font-size: clamp(9px, 2vmin, 15px);
  line-height: 2.1;
  color: var(--pink-soft);
  text-shadow: 2px 2px 0 var(--night-deep);
  max-width: 68ch;
}

.level-name {
  font-size: clamp(14px, 3.4vmin, 30px);
  color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(240, 184, 96, 0.5), 3px 3px 0 var(--night-deep);
  margin-bottom: 1.5vmin;
}

.level-subtitle {
  font-size: clamp(8px, 1.8vmin, 14px);
  color: var(--pink);
  margin-bottom: 4vmin;
}

.flavor-text {
  font-size: clamp(9px, 1.9vmin, 15px);
  line-height: 2;
  color: var(--pink-soft);
  max-width: 60ch;
  margin-bottom: 4vmin;
}

/* ---------- Pixel buttons ---------- */

.pixel-btn {
  font-family: var(--font-pixel);
  font-size: clamp(10px, 2.2vmin, 16px);
  color: var(--night-deep);
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-dim) 100%);
  border: none;
  padding: 2.2vmin 4vmin;
  cursor: pointer;
  position: relative;
  box-shadow:
    0 var(--px) 0 var(--gold-dim),
    0 calc(var(--px) * 2) 0 rgba(0, 0, 0, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.45);
  outline: calc(var(--px) / 2) solid var(--night-deep);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}

.pixel-btn:hover {
  filter: brightness(1.08);
}

.pixel-btn:active {
  transform: translateY(var(--px));
  box-shadow:
    0 0 0 var(--gold-dim),
    0 var(--px) 0 rgba(0, 0, 0, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.45);
}

.pixel-btn.btn-pink {
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--pink) 55%, #b56a8c 100%);
  box-shadow:
    0 var(--px) 0 #b56a8c,
    0 calc(var(--px) * 2) 0 rgba(0, 0, 0, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.45);
}

.pixel-btn.btn-ghost {
  background: linear-gradient(180deg, var(--night-soft) 0%, var(--night) 100%);
  color: var(--gold-bright);
  box-shadow:
    0 var(--px) 0 var(--night-deep),
    0 calc(var(--px) * 2) 0 rgba(0, 0, 0, 0.45);
  outline-color: var(--gold-dim);
}

/* ---------- Dialogue box ---------- */

.dialogue-box {
  background: var(--night);
  border: var(--px) solid var(--gold);
  outline: calc(var(--px) / 2) solid var(--night-deep);
  box-shadow:
    0 0 18px rgba(240, 184, 96, 0.25),
    inset 0 0 0 calc(var(--px) / 2) var(--night-deep);
  padding: 3vmin 4vmin;
  font-size: clamp(9px, 2vmin, 15px);
  line-height: 2;
  color: var(--pink-soft);
  max-width: min(70ch, 84cqw);
  text-align: left;
}

/* ---------- Parchment scroll panel ---------- */

.parchment {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255, 244, 214, 0.55) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 80%, rgba(138, 106, 56, 0.28) 0%, transparent 50%),
    linear-gradient(180deg, var(--parchment) 0%, var(--parchment-dark) 100%);
  border: var(--px) solid var(--parchment-edge);
  outline: calc(var(--px) / 2) solid var(--night-deep);
  box-shadow:
    0 0 26px rgba(240, 184, 96, 0.35),
    0 calc(var(--px) * 2) 0 rgba(0, 0, 0, 0.4);
  color: var(--ink);
  padding: 5vmin 6vmin;
  max-width: min(72ch, 86cqw);
  max-height: 76cqh;
  overflow-y: auto;
  text-align: left;
  font-size: clamp(9px, 2.1vmin, 15px);
  line-height: 2.2;
  animation: parchment-unroll 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

/* Torn top & bottom edges */
.parchment::before,
.parchment::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--px);
  background: var(--parchment-edge);
}
.parchment::before { top: calc(var(--px) * -2); }
.parchment::after  { bottom: calc(var(--px) * -2); }

@keyframes parchment-unroll {
  from {
    transform: scaleY(0.1);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

.scroll-heading {
  font-size: clamp(10px, 2.4vmin, 18px);
  color: #7a4a1c;
  text-align: center;
  margin-bottom: 3vmin;
}

/* ---------- HUD scroll meter ---------- */

#hud {
  position: absolute;
  top: 2vmin;
  right: 2.5vmin;
  z-index: 5;
  pointer-events: none;
}

#scroll-meter {
  display: flex;
  gap: 1.2vmin;
}

.scroll-slot {
  width: clamp(18px, 4vmin, 30px);
  height: clamp(22px, 5vmin, 38px);
  background: var(--night);
  border: 2px solid var(--gold-dim);
  opacity: 0.55;
  position: relative;
}

.scroll-slot.filled {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-dark) 100%);
  border-color: var(--gold);
  opacity: 1;
  box-shadow: 0 0 8px rgba(240, 184, 96, 0.6);
}

.scroll-slot.filled::after {
  content: "";
  position: absolute;
  inset: 25% 30%;
  background:
    linear-gradient(var(--parchment-edge) 0 0) 0 0 / 100% 2px,
    linear-gradient(var(--parchment-edge) 0 0) 0 40% / 100% 2px,
    linear-gradient(var(--parchment-edge) 0 0) 0 80% / 70% 2px;
  background-repeat: no-repeat;
}

/* ---------- Rotate gate ---------- */

#rotate-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--night-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6vmin;
  text-align: center;
  font-size: clamp(10px, 3vmin, 16px);
  line-height: 2;
  color: var(--pink-soft);
  padding: 8vmin;
}

.rotate-phone {
  width: 64px;
  height: 100px;
  animation: rotate-hint 2.2s ease-in-out infinite;
}

.rotate-phone-body {
  width: 100%;
  height: 100%;
  border: 5px solid var(--gold);
  border-radius: 8px;
  position: relative;
  background: var(--night);
  box-shadow: 0 0 16px rgba(240, 184, 96, 0.4);
}

.rotate-phone-body::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 4px;
  background: var(--gold);
}

@keyframes rotate-hint {
  0%, 20%  { transform: rotate(0deg); }
  55%, 80% { transform: rotate(90deg); }
  100%     { transform: rotate(90deg); }
}

/* ---------- Typewriter caret ---------- */

.typing::after {
  content: "▌";
  animation: caret-blink 0.7s steps(1) infinite;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

/* ---------- Utility ---------- */

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vmin;
}

.dev-note {
  position: absolute;
  bottom: 2vmin;
  left: 0;
  right: 0;
  font-size: clamp(7px, 1.4vmin, 11px);
  color: rgba(242, 160, 192, 0.45);
}