*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: #1c1c1c;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  font-family: sans-serif;
}

/* Faded bear-head watermark behind everything */
#watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(105vw, 105vh);
  height: auto;
  opacity: 0.06;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* Empty state: shown when no notes are on the wall */
#empty-state {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  pointer-events: none;
}

/* The hidden attribute must beat the display:flex above */
#empty-state[hidden] {
  display: none;
}

.empty-bear {
  width: min(40vw, 40vh);
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
  opacity: 0.95;
}

.empty-msg {
  margin: 0;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 4rem;
  color: #fff120;
  text-align: center;
  text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.5);
}

.empty-sub {
  margin: 0;
  font-family: sans-serif;
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff120;
  opacity: 0.6;
  text-align: center;
}

/*
 * Permanent caption between the two QR codes. Vertically centered
 * with the QR images (160px tall, 1.5rem from the bottom). The box
 * is anchored to the gap *between* the QR codes (each QR is 160px
 * wide + 1.5rem edge inset, plus a 1.5rem breathing gap), and the
 * font-size scales with viewport width via clamp() so the single
 * line of text always fits without overflowing onto the QR codes.
 */
#qr-caption {
  position: fixed;
  bottom: 1.5rem;
  left: calc(200px + 3rem);
  right: calc(200px + 3rem);
  height: 200px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  font-size: clamp(0.5rem, calc((100vw - 26rem) / 26), 3rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff120;
  opacity: 0.6;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}

/*
 * Steampunk QR frame — riveted brass plate with the QR code recessed
 * inside, plus a decorative cog peeking out the top-outer corner.
 *
 *   - Brass plate via diagonal linear-gradient (warm-to-shadow-to-warm
 *     gives a metallic sheen).
 *   - 4 corner rivets via radial-gradients in the background-image
 *     stack (dark dimple + bright catch-light ring).
 *   - QR is inset with an inner shadow to read as recessed below the
 *     surrounding metal.
 *   - SVG cog as ::after background-image, rotated and positioned
 *     so it overhangs the outer corner like a visible mechanism.
 */
.qr-frame {
  position: fixed;
  bottom: 1.5rem;
  width: 200px;
  height: 200px;
  padding: 18px;
  box-sizing: border-box;
  z-index: 100;
  border: 2px solid #2a1a08;
  border-radius: 6px;
  background:
    radial-gradient(circle at 12px 12px,
      #1a0e04 0 3px, #e9c879 4px 5.5px, transparent 7px),
    radial-gradient(circle at calc(100% - 12px) 12px,
      #1a0e04 0 3px, #e9c879 4px 5.5px, transparent 7px),
    radial-gradient(circle at 12px calc(100% - 12px),
      #1a0e04 0 3px, #e9c879 4px 5.5px, transparent 7px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),
      #1a0e04 0 3px, #e9c879 4px 5.5px, transparent 7px),
    linear-gradient(135deg,
      #c89a3f 0%,
      #d8b258 18%,
      #8b5e1f 50%,
      #b07a2e 82%,
      #d8b258 100%);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px #d4a657,
    inset 0 2px 3px rgba(255, 255, 255, 0.25),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}

.qr-frame .qr-corner {
  display: block;
  position: static;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #2a1a08;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.6),
    inset 0 -1px 2px rgba(0, 0, 0, 0.3);
  z-index: auto;
}

/* Decorative cog overhanging the outer-top corner of each frame.
   SVG is a 24-tooth gear in brass, with a darker hub and rivet. */
.qr-frame::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><radialGradient id='g' cx='50%25' cy='40%25'><stop offset='0%25' stop-color='%23e9c879'/><stop offset='55%25' stop-color='%23b07a2e'/><stop offset='100%25' stop-color='%236b4410'/></radialGradient></defs><g fill='url(%23g)' stroke='%232a1a08' stroke-width='1.5'><path d='M50 4 L55 4 L57 14 L63 16 L70 9 L74 13 L67 20 L69 26 L79 28 L79 33 L70 35 L68 41 L75 48 L71 52 L64 45 L58 47 L56 57 L51 57 L49 47 L43 45 L36 52 L32 48 L39 41 L37 35 L28 33 L28 28 L37 26 L39 20 L32 13 L36 9 L43 16 L49 14 Z'/></g><circle cx='50' cy='30' r='12' fill='%236b4410' stroke='%232a1a08' stroke-width='1.5'/><circle cx='50' cy='30' r='3' fill='%231a0e04'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
  pointer-events: none;
  z-index: 99;
}

.qr-frame-left {
  left: 1.5rem;
}
.qr-frame-left::after {
  top: -22px;
  left: -22px;
  transform: rotate(-12deg);
}

.qr-frame-right {
  right: 1.5rem;
}
.qr-frame-right::after {
  top: -22px;
  right: -22px;
  transform: rotate(12deg) scaleX(-1);
}

.postit {
  position: absolute;
  color: #1a1a1a;
  padding: 2.6rem 1.2rem 1.4rem;
  font-family: 'Caveat', cursive;
  font-size: 1.7rem;
  line-height: 1.45;
  max-width: 270px;
  min-width: 190px;
  word-wrap: break-word;
  cursor: default;
  user-select: none;
  z-index: 10;

  /*
   * Paper color + adhesive strip + grain all baked into the
   * postit's background. Grain is a tiled SVG fractal-noise
   * texture with alpha pre-multiplied so we don't need a
   * separate pseudo-element (those are needed for the curls).
   */
  background-color: var(--postit-color, #fff740);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(
      to bottom,
      var(--postit-strip, rgba(0, 0, 0, 0.09)) 0,
      var(--postit-strip, rgba(0, 0, 0, 0.09)) 2.3rem,
      transparent 2.3rem
    );
  background-size: 160px 160px, auto;
  background-repeat: repeat, no-repeat;
  background-position: 0 0, 0 0;

  /* Sharp paper corners (no rounding — corners are bent, not curved). */
  border-radius: 1px;

  /*
   * Stacked box-shadows: contact + ambient + soft cast.
   * Curls are handled by the pseudo-element notches below.
   */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 4px 8px rgba(0, 0, 0, 0.35),
    0 12px 22px rgba(0, 0, 0, 0.25);
}

/*
 * Floating photos from public/img/. Polaroid-ish frame: thin white
 * border, heavier on the bottom, with the same drop-shadow stack as
 * a postit so the two read as living on the same wall.
 *
 * Capped at 540x540 (2x the postit max-width of 270px). object-fit
 * is irrelevant since we let the natural aspect ratio show — the
 * cap is on the bounding box, not the content.
 */
.shoutbox-image {
  position: absolute;
  display: block;
  box-sizing: border-box;
  max-width: 540px;
  max-height: 540px;
  width: auto;
  height: auto;
  background: #f5f1e8;
  padding: 8px 8px 28px 8px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 1px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 4px 8px rgba(0, 0, 0, 0.35),
    0 12px 22px rgba(0, 0, 0, 0.25);
  cursor: default;
  user-select: none;
  -webkit-user-drag: none;
  /* Photos sit BELOW post-its (which are z-index: 10). */
  z-index: 5;
}

.postit .name {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 1.2rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 1rem;
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.postit .msg {
  font-size: 1.7rem;
  line-height: 1.45;
}

@keyframes popin {
  0%   { transform: scale(0.5) rotate(var(--rotation)); }
  70%  { transform: scale(1.1) rotate(var(--rotation)); }
  100% { transform: scale(1.0) rotate(var(--rotation)); }
}

.postit.popin {
  animation: popin 400ms ease-out forwards;
}

.postit-delete {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  background: none;
  border: none;
  padding: 0.2rem 0.4rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.4;
  color: #000;
  z-index: 2;
}

.postit-delete:hover {
  opacity: 1 !important;
}