/* ============================================================
   PERSONA 5 — Pause Menu personal site
   Pure CSS recreation. No external image dependencies.
   ============================================================ */

:root {
  --p5-red: #ba0000;      /* matched to the deep red of the base-menu background */
  --p5-red-dark: #8a0008;
  --p5-cyan: #1cfeff;
  --p5-black: #050505;
  --p5-white: #f5f3ee;
  --ease-snap: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--p5-black);
  color: var(--p5-white);
  font-family: 'Oswald', 'Segoe UI', sans-serif;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* ---------- Background video ---------- */

.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  background: var(--p5-red);
}

/* Subtle darkening so menu text stays readable over the art */
.bg-shade {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at 45% 45%,
      transparent 30%,
      rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}

/* ---------- "Take Your Heart" logo (bottom-left) ---------- */

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.take-heart {
  position: fixed;
  left: 1.4rem;
  bottom: 1.3rem;
  width: clamp(96px, 12vw, 158px);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 11;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.45));
  transition: transform 0.14s var(--ease-snap);
}

.take-heart img {
  width: 100%;
  height: auto;
  display: block;
}

.take-heart:hover { transform: scale(1.06) rotate(-2deg); }
.take-heart:active { transform: scale(0.94); }
.take-heart:focus { outline: none; }

/* ---------- Stage ---------- */

.stage {
  position: relative;
  z-index: 10;
  min-height: 100vh;
}

/* ---------- The pause menu (free-floating text on the hand) ---------- */

.menu {
  position: absolute;
  /* nudged toward the hand's centre, upper-middle of the frame */
  left: 43%;
  top: 47%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12em; /* even, compact vertical rhythm */
  opacity: 0; /* hidden until the intro's impact (see script.js) */
}

/* Kill the default blue focus ring on the menu links + ESC button — the
   active-item highlight already shows the current selection. */
.menu-item:focus,
.menu-item:focus-visible,
.panel-close:focus,
.panel-close:focus-visible {
  outline: none;
}

/* Slam in on the impact of the intro shake */
.menu.revealed {
  opacity: 1;
  animation: menu-impact 0.42s var(--ease-snap) both;
}

@keyframes menu-impact {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
  35% { opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(0.93) translateX(10px); }
  68% { transform: translate(-50%, -50%) translateX(-7px); }
  84% { transform: translate(-50%, -50%) translateX(4px); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Each item is just text — random per-line jumble (--jx/--jr) set in script.js. */
.menu-item {
  --jx: 0px;
  --jy: 0px;
  --jr: 0deg;
  --sc: 1;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  transform: translate(var(--jx), var(--jy)) rotate(var(--jr)) scale(var(--sc));
  transform-origin: left center;
  transition: transform 0.16s var(--ease-snap);
}

.menu-label {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  text-transform: uppercase;
  letter-spacing: -0.02em; /* tighter kerning */
  white-space: nowrap;
}

/* P5 "ransom-note" lettering: each glyph is a separate cut-out span,
   styled per-letter in script.js (font, rotation, scale, offset). */
.menu-label .ch {
  display: inline-block;
  position: relative;
  color: var(--p5-white); /* base lettering is black & white only */
  /* Black stroke traces the OUTLINE of each glyph (no box behind it) */
  -webkit-text-stroke: 10px var(--p5-black);
  paint-order: stroke fill;
  text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.55);
  line-height: 0.9;
  /* Constant spacing in every state so hovering never changes an item's
     width — that keeps the centered menu from shifting the other items. */
  padding: 0.04em 0.07em;
  margin: 0 0.01em;
  background: transparent;
  transition: color 0.12s, -webkit-text-stroke-color 0.12s;
}

/* hover / keyboard-active: pop bigger and bring to front, with the
   selected word getting bright cut-out boxes like the title art. */
.menu-item:hover,
.menu-item.is-active {
  --sc: 1.22;
  z-index: 5;
}

/* Selected word: a black ink/paint highlight behind the letters, which take
   their random blue/black/white(/red) fill. A thin white halo keeps every
   letter (including the black ones) legible on the black paint. */
.menu-item:hover .ch,
.menu-item.is-active .ch {
  color: var(--chc, var(--p5-cyan));
  -webkit-text-stroke: 2.5px var(--p5-white);
  /* Splatoon-style ink sheen on the letters */
  text-shadow: 0 0 10px rgba(28, 254, 255, 0.7);
}

/* The ink splat is drawn on a per-letter pseudo-element so it can take the ink
   filter (gloopy Splatoon edges) without distorting the letters, and so its
   size can be tuned via `inset` without ever shifting the layout. It splats in
   with a bouncy pop when the word is selected. */
.menu-item:hover .ch::before,
.menu-item.is-active .ch::before {
  content: "";
  position: absolute;
  inset: -7px -6px -9px -6px; /* gloopy black ink box around each glyph */
  background: var(--p5-black);
  filter: url(#ink-paint);
  z-index: -1;
  transform-origin: center;
  animation: ink-splat 0.3s var(--ease-snap) both;
}

/* Bouncy "ink splat" entrance — energetic, Splatoon-like */
@keyframes ink-splat {
  0% { transform: scale(0.15) rotate(-8deg); opacity: 0; }
  55% { transform: scale(1.18) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------- Fade-to-black (Persona open) ---------- */

.fade-black {
  position: fixed;
  inset: 0;
  z-index: 60; /* above the panel + ESC prompt while it covers */
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* "All-Out Attack" exit clip for the Persona section. mix-blend-mode: screen
   keys out the black (black → transparent) so only the bright splash overlays
   the base-menu transition playing beneath it. */
.transition-out {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 70; /* above everything while it plays */
  opacity: 0; /* stays composited but invisible until revealed after 1st frame */
  pointer-events: none;
  mix-blend-mode: screen;
  /* screen blend washes the clip out — bump contrast/saturation so the reds
     and shards read (contrast also darkens blacks for a cleaner key) */
  filter: contrast(1.6) saturate(1.7) brightness(1.12);
}

/* Green-screen clips: real chroma-key to transparency, composited normally so
   the main menu underneath is left completely unchanged. */
.transition-out.chroma {
  mix-blend-mode: normal;
  filter: url(#chromakey);
}

/* Favorites only: after keying the green out, darken so the baked pure-red
   (#fe0000) reads as the deep base-menu red (~#ba0000): 254 × 0.73 ≈ 186.
   (Education keeps its own colors — plain .chroma above.) */
.transition-out.chroma.darkred {
  filter: url(#chromakey) brightness(0.73);
}

.transition-out.is-playing {
  opacity: 1;
}

/* ---------- Sliding content panel ---------- */

.panel-wrap {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(5, 5, 5, 0.92);
  backdrop-filter: blur(2px);
  padding: clamp(2rem, 8vw, 7rem);
  overflow-y: auto;
  animation: panel-in 0.3s var(--ease-snap);
}

.panel-wrap[hidden] {
  display: none;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
}

/* Bottom-right "ESC  Back" prompt — keycap + label, P5 themed */
.panel-close {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 41;
  transform: skewX(-10deg);
  transition: transform 0.14s var(--ease-snap);
}

.panel-close .key {
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--p5-black);
  background: var(--p5-white);
  padding: 0.35rem 0.85rem 0.45rem;
  box-shadow: 4px 4px 0 var(--p5-red);
}

.panel-close .key-label {
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--p5-white);
  text-shadow: 3px 3px 0 var(--p5-black);
}

.panel-close:hover {
  transform: skewX(-10deg) scale(1.08);
}

.panel-close:hover .key {
  background: var(--p5-red);
  color: var(--p5-white);
  box-shadow: 4px 4px 0 var(--p5-black);
}

/* ---- Tap-to-start gate ---- */
.start-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.start-gate.gone {
  opacity: 0;
  pointer-events: none;
}

.start-gate[hidden] {
  display: none;
}

/* Mid-sting: the gate goes transparent and its backdrop/art/prompt fade out, so
   the menu (slamming in beneath) shows through the still-playing, green-keyed
   sting. The sting itself stays visible and plays out fully. */
.start-gate.revealing {
  background: transparent;
}

.start-gate.revealing .start-gate-video,
.start-gate.revealing .start-gate-art,
.start-gate.revealing .start-gate-text {
  opacity: 0;
}

/* Red-stars clip = the live background of the gate (kept on screen). */
.start-gate-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity 0.3s ease;
}

/* P5 key art (red keyed out) layered on top of the clip — the red-stars loop
   shows through where the red used to be. */
.start-gate-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Start prompt — above the logo's hand, same ransom-note font/colour scheme
   as the base menu labels. */
.start-gate-text {
  position: absolute;
  left: 74%;
  top: 53%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  pointer-events: none;
  animation: start-pulse 1.4s ease-in-out infinite;
}

/* Two fixed lines ("Press Any" / "Button") — each stays on its own row no
   matter the per-letter random sizes, so "Button" never creeps up a line. */
.start-gate-text .menu-label {
  display: block;
  white-space: nowrap;
  line-height: 0.85;
  font-size: clamp(1.4rem, 3vw, 2.3rem);
}

.start-gate-text .ch {
  -webkit-text-stroke-width: 5px;
}

/* Green-screen "LET US START THIS" sting, played on click — its green is keyed
   to transparency so the key art shows through behind it. */
.start-gate-sting {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  filter: url(#chromakey); /* green screen → transparent */
  transition: opacity 0.15s ease;
}

.start-gate.starting .start-gate-sting {
  opacity: 1;
}

/* on click, the prompt clears (the sting plays over the key art) */
.start-gate.starting .start-gate-text {
  opacity: 0;
  animation: none; /* let the fade-out win over the pulse */
}

@keyframes start-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.panel {
  display: none;
  max-width: 760px;
  animation: panel-text 0.4s var(--ease-snap) both;
}

.panel.is-shown {
  display: block;
}

@keyframes panel-text {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

.panel-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.5rem, 7vw, 5rem);
  margin: 0 0 1.5rem;
  text-transform: uppercase;
  transform: skewX(-6deg);
  text-shadow: 4px 4px 0 var(--p5-red);
}

.panel-title small {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.25em;
  text-shadow: none;
  opacity: 0.6;
  margin-top: 0.4rem;
}

.panel p {
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 60ch;
}

.entry-list,
.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.entry-list li {
  border-left: 4px solid var(--p5-red);
  padding: 0.6rem 0 0.6rem 1.2rem;
  margin-bottom: 1.4rem;
}

.entry-role {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

.entry-org {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  opacity: 0.6;
  margin-bottom: 0.4rem;
}

.tag-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.tag-list li {
  background: var(--p5-red);
  padding: 0.5rem 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transform: skewX(-12deg);
}

/* ---------- Full-bleed video sections (Persona, Experience) ---------- */

.panel--media.is-shown {
  display: block;
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  /* No clip-path wipe — the fade-to-black + the video's own transition handle
     it, which keeps it smooth (a clip-path on a full-bleed video was the
     source of the dropped frames). */
  animation: none;
}

/* The looped menu video fills the section */
.section-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0); /* GPU layer — avoids repaint hitches */
}

/* Persona: blurb art pinned flush to the upper-right corner, sliding in from
   the left on open. */
.persona-text {
  position: absolute;
  top: 0;
  /* card spans 0.232–0.783 of the 16:9 frame width; push the element right by
     the green margin (1 − 0.783) so the card sits flush to the screen's right. */
  right: calc(95vh * 1.7778 * -0.217);
  height: 95vh;
  width: calc(95vh * 1.7778); /* full 16:9 frame */
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* hidden until the slide-in runs */
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.persona-text-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pt-base {
  filter: url(#chromakey); /* green screen → transparent */
}

/* Un-keyed copy clipped to just the "18" so its green glitch is preserved
   (the number's green is the same pure green as the screen). The clip stays
   left of the green background, which begins at ~77% width. */
.pt-num {
  clip-path: inset(13% 24% 73% 61%);
}

.persona-text.slide {
  animation: persona-slide 0.34s cubic-bezier(0.15, 0.7, 0.25, 1) both;
}

@keyframes persona-slide {
  0%   { transform: translateX(-80vw); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Camera shake: punches the whole Persona view (video + card + photos) the
   instant the items load in, once the section's transition has settled. JS adds
   .cam-shake to the panel; it self-clears on animationend. */
.panel--media.cam-shake {
  animation: cam-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes cam-shake {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-7px, -5px) rotate(-0.4deg); }
  20%  { transform: translate(8px, 4px) rotate(0.4deg); }
  30%  { transform: translate(-9px, 5px) rotate(-0.3deg); }
  40%  { transform: translate(7px, -4px) rotate(0.3deg); }
  50%  { transform: translate(-6px, 4px) rotate(-0.2deg); }
  60%  { transform: translate(5px, -3px) rotate(0.2deg); }
  70%  { transform: translate(-4px, 2px); }
  80%  { transform: translate(3px, -2px); }
  90%  { transform: translate(-2px, 1px); }
  100% { transform: translate(0, 0); }
}

/* Socials: keyed banner stack pinned to the left, aligned to the section's
   left diagonal. Hidden until the reveal, then slides in from the left (shared
   persona-slide) and rides the panel's camera shake. */
.socials-card {
  position: absolute;
  left: 9%;
  top: 6%;
  height: 56vh;
  width: auto;
  max-width: 62vw;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.55));
  opacity: 0; /* revealed by the .slide animation (fill: both) */
}
.socials-card.slide {
  animation: socials-slide 0.34s cubic-bezier(0.15, 0.7, 0.25, 1) both;
}

@keyframes socials-slide {
  0%   { transform: translateX(90vw); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Favorites: keyed collage spread across the left side (the section's character
   silhouette occupies the right), stretched taller. It drops in from the top and
   dangles (swings from a pin at its top edge) before settling. */
.fav-board {
  position: absolute;
  left: 1%;
  top: 0;
  width: 72vw;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;                       /* hidden until the drop runs */
}
.fav-board.drop {
  animation: favorites-drop 0.8s cubic-bezier(0.3, 0.85, 0.35, 1) both;
}
/* Each split photo, positioned by its centre (inline left/top/width). */
.fav-pc {
  position: absolute;
  height: auto;
  z-index: 1;                        /* above the strings */
  transform: translate(-50%, -50%);
  filter: drop-shadow(2px 5px 7px rgba(0, 0, 0, 0.5));
}
/* Redrawn white strings connecting the photos (behind them). */
.fav-strings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 0;                        /* behind the photos */
}
.fav-strings line {
  stroke: #f3f1ea;
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke; /* constant thickness despite the non-uniform viewBox */
  opacity: 0.8;
}
/* Clean drop from the top with a small settle — no stretch, no swing. */
@keyframes favorites-drop {
  0%   { transform: translateY(-120%); opacity: 0; }
  12%  { opacity: 1; }
  70%  { transform: translateY(1.5%); }  /* tiny overshoot */
  100% { transform: translateY(0); opacity: 1; }
}

/* Minecraft TNT explosion easter egg overlay (green keyed out). */
.explosion-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* scale up to fill the whole screen */
  z-index: 60;            /* above everything except is set below the gate */
  pointer-events: none;
  display: none;
  filter: url(#chromakey); /* green screen → transparent */
}
.explosion-fx.show {
  display: block;
}

/* Persona: two polaroids, centered above the character's gun. */
.persona-photo {
  position: absolute;
  width: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.5));
  opacity: 0; /* held back until the section transition settles (JS) */
  transition: opacity 0.25s ease;
}
/* Revealed together with the blurb card once the transition has played out. */
[data-panel="persona"].items-in .persona-photo {
  opacity: 1;
}
/* bottom (suit) polaroid — sits in the middle, above the gun */
.persona-photo--bottom {
  left: 34%;
  top: 40%;
  height: 40vh;
}
/* top (street) polaroid — moved right and up so it clears the face */
.persona-photo--top {
  left: 23%;
  top: 2%;
  height: 38vh;
}

/* Education: two green-screen clips stacked on the right, keyed transparent. */
.edu-stack {
  position: absolute;
  top: 1.5%;
  right: 11%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.edu-clip {
  /* size by viewport height so the two always fit stacked */
  height: 49vh;
  width: auto;
  max-width: 92vw;
  object-fit: contain;
  filter: url(#chromakey); /* green screen → transparent */
  /* Persona-style dynamic tilt */
  transform: rotate(-4deg);
  transform-origin: center;
  /* keep on its own GPU layer to avoid filter repaint hitches */
  will-change: transform;
  backface-visibility: hidden;
}

/* Each frame has ~6% transparent space above its text and ~8% below; pull the
   second clip up so the visible gap is between the TEXT, evenly, not the video
   boxes. */
.edu-clip + .edu-clip {
  margin-top: -6vh;
}

/* Top clip: a touch bigger and nudged left; bottom clip: nudged right. */
.edu-clip:first-child {
  height: 54vh;
  transform: translateX(-5vw) rotate(-4deg);
}
.edu-clip:last-child {
  transform: translateX(4vw) rotate(-4deg);
}

/* ---------- Guests: interactive guestbook ---------- */

.guest-intro {
  font-size: 1.1rem;
  opacity: 0.85;
  margin: 0 0 1.4rem;
}

.guest-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 560px;
  margin-bottom: 2rem;
}

.guest-name,
.guest-msg {
  width: 100%;
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  color: var(--p5-white);
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--p5-white);
  border-left: 6px solid var(--p5-red);
  padding: 0.6rem 0.9rem;
  outline: none;
  resize: vertical;
}

.guest-name::placeholder,
.guest-msg::placeholder {
  color: rgba(245, 243, 238, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.guest-name:focus,
.guest-msg:focus {
  border-color: var(--p5-cyan);
  border-left-color: var(--p5-red);
}

.guest-submit {
  align-self: flex-start;
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--p5-white);
  background: var(--p5-red);
  border: none;
  padding: 0.5rem 1.6rem 0.6rem;
  transform: skewX(-11deg);
  cursor: pointer;
  transition: transform 0.14s var(--ease-snap), background 0.14s, color 0.14s;
}

.guest-submit:hover {
  background: var(--p5-white);
  color: var(--p5-red);
  transform: skewX(-11deg) scale(1.05);
}

/* Posted comments are layered onto the right side of the screen (the form stays
   on the left). Fixed column with its own scroll; stops above the ESC prompt.
   Shown only while the Guests panel is open. */
.guest-list {
  position: fixed;
  top: clamp(2rem, 8vw, 7rem);
  right: clamp(2rem, 8vw, 7rem);
  bottom: 5.5rem;
  width: min(40vw, 460px);
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  flex-direction: column;
  gap: 0.9rem;
  overflow-y: auto;
  z-index: 42;
}
.panel-wrap.guests-open .guest-list {
  display: flex;
}

.guest-card {
  background: rgba(0, 0, 0, 0.72);
  border-left: 5px solid var(--p5-red);
  padding: 0.7rem 1rem 0.8rem;
  animation: stat-in 0.3s var(--ease-snap) both;
}

.guest-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.guest-card-name {
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--p5-white);
}

.guest-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.guest-card-time {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  opacity: 0.5;
  white-space: nowrap;
}

/* Delete-own-comment control */
.guest-del {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(245, 243, 238, 0.45);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.1rem 0.25rem;
  transition: color 0.12s, transform 0.12s var(--ease-snap);
}
.guest-del:hover {
  color: var(--p5-red);
  transform: scale(1.2);
}

.guest-card-msg {
  font-size: 1.05rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.guest-empty {
  opacity: 0.5;
  font-style: italic;
}

/* Inappropriate-comment warning */
.guest-error {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--p5-red);
}
.guest-error[hidden] { display: none; }

/* ---------- Responsive ---------- */

@media (max-width: 820px) {
  .menu {
    left: 50%;
  }
}