/* =========================================================
   KAYLEE'S JUNK DRAWER
   Same dark dotted background + thin gold seam as the site.
   ========================================================= */
#junk-drawer {
  position: relative;
  width: 100%;
  margin: 0;
  padding: clamp(28px, 4vw, 52px) clamp(14px, 3vw, 24px) clamp(40px, 5vw, 56px);
  overflow: hidden;
  border-top: 1px solid rgba(176, 143, 77, 0.65);
  background:
    radial-gradient(circle at 14% 22%, rgba(199, 225, 221, .045) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 65%, rgba(213, 190, 229, .05) 0 2px, transparent 3px),
    #15110f;
  background-size: 68px 68px, 83px 83px;
  background-repeat: repeat;
}

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

#junk-drawer .junk-inner {
  width: min(1100px, 100%);
  margin: 0 auto;
}

#junk-drawer .junk-title {
  margin: 0 0 22px;
  color: #efe3d1;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  text-transform: lowercase;
  text-shadow: 0 1px 0 rgba(0,0,0,.34);
}

#junk-drawer .junk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}

#junk-drawer .junk-card {
  position: relative;
  color: #2f241f;
}

#junk-drawer .window-card {
  border: 1px solid rgba(62, 49, 41, .9);
  background: linear-gradient(180deg, rgba(221, 209, 190, .98), rgba(199, 185, 165, .98));
  box-shadow:
    inset 1px 1px 0 rgba(255, 245, 230, .7),
    inset -1px -1px 0 rgba(96, 74, 63, .16),
    3px 4px 0 rgba(0, 0, 0, .28);
}

#junk-drawer .window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  padding: 5px 9px;
  color: #f6eee1;
  font: 700 12px/1 "Courier New", Courier, monospace;
  text-transform: lowercase;
  background: linear-gradient(180deg, rgba(87, 68, 59, .98), rgba(60, 47, 42, .99));
  border-bottom: 1px solid rgba(42, 31, 27, .92);
}

#junk-drawer .window-dots {
  display: inline-flex;
  gap: 4px;
}
#junk-drawer .window-dots span {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(240, 215, 200, .85);
}

#junk-drawer .window-body {
  padding: 10px;
}

#junk-drawer .cam-view {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(84, 67, 57, .9);
  background: #201916;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

#junk-drawer .cam-view img,
#junk-drawer .cam-view video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #201916;
}

#junk-drawer .cam-live {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 4px 7px;
  color: #f8efe2;
  font: 700 11px/1 "Courier New", Courier, monospace;
  background: rgba(40, 28, 24, .75);
  border: 1px solid rgba(252, 240, 227, .16);
}
#junk-drawer .cam-live::before {
  content: "●";
  color: #d58a98;
  margin-right: 5px;
}

#junk-drawer .cam-status,
#junk-drawer .capsule-caption,
#junk-drawer .eight-answer {
  margin: 10px 0 0;
  color: #46352d;
  font: 700 12px/1.35 "Courier New", Courier, monospace;
  text-transform: lowercase;
}

#junk-drawer .small-button {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 11px;
  color: #382822;
  font: 700 12px/1 "Courier New", Courier, monospace;
  text-transform: lowercase;
  border: 1px solid #7a6759;
  background: linear-gradient(#efe4d4, #d3c2ab);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.65), 1px 2px 0 rgba(0,0,0,.18);
  cursor: pointer;
}
#junk-drawer .small-button:active {
  transform: translateY(1px);
}

#junk-drawer .capsule-card {
  transform: rotate(-1deg);
}

#junk-drawer .capsule-box {
  position: relative;
  width: min(100%, 420px);
  margin: 0 auto 14px;
  padding: 32px 18px 26px;
  border: 2px solid #8f745d;
  border-radius: 4px;
  background: linear-gradient(180deg, #c6a17b 0%, #b78f68 52%, #a77f59 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,238,210,.16),
    4px 5px 0 rgba(0,0,0,.22);
}

#junk-drawer .capsule-box::before,
#junk-drawer .capsule-box::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 88px;
  height: 18px;
  background: rgba(220, 205, 176, .48);
  border: 1px solid rgba(155, 129, 103, .45);
  transform: rotate(-2deg);
}
#junk-drawer .capsule-box::before { left: 18px; }
#junk-drawer .capsule-box::after { right: 18px; transform: rotate(2deg); }

#junk-drawer .capsule-label {
  display: block;
  margin: 0 auto 16px;
  color: #513e33;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  text-align: center;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#junk-drawer .capsule-photo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 320px;
}

#junk-drawer .capsule-photo {
  width: min(100%, 300px);
  padding: 12px 12px 30px;
  border: 1px solid rgba(220, 204, 184, .95);
  background: #faf5ef;
  box-shadow: 3px 4px 0 rgba(0,0,0,.18);
  transform: rotate(1.2deg);
}

#junk-drawer .capsule-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  background: #e9dfd2;
}

#junk-drawer .capsule-caption {
  text-align: center;
}

#junk-drawer .eight-card {
  padding: 4px 0 0;
  text-align: center;
}

#junk-drawer .eight-prompt {
  margin: 0 0 10px;
  color: #eee1cf;
  font: 700 16px/1.1 "Courier New", Courier, monospace;
  text-transform: lowercase;
  text-align: center;
}

#junk-drawer .eight-form {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

#junk-drawer .eight-form input {
  width: min(100%, 320px);
  min-height: 36px;
  padding: 8px 10px;
  color: #f3eadb;
  font: 700 12px/1 "Courier New", Courier, monospace;
  border: 1px solid rgba(141, 114, 94, .85);
  background: rgba(36, 28, 24, .7);
}

#junk-drawer .eight-ball-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(170px, 23vw, 240px);
  aspect-ratio: 1 / 1;
  margin: 8px auto 12px;
}

#junk-drawer .eight-ball {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4443 0%, #151313 28%, #050404 72%, #000 100%);
  box-shadow: inset -14px -20px 30px rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.45);
}

#junk-drawer .eight-ball::before {
  content: "8";
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  color: #171616;
  font: 700 clamp(28px, 4vw, 40px)/1 "Georgia", serif;
  border-radius: 50%;
  background: #fff;
}

#junk-drawer .eight-window {
  position: absolute;
  left: 50%;
  bottom: 15%;
  transform: translateX(-50%);
  width: 42%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 12px;
  clip-path: polygon(50% 0%, 100% 86%, 0% 86%);
  color: #dbe7ff;
  font: 700 clamp(10px, 1.4vw, 12px)/1.15 "Courier New", Courier, monospace;
  text-transform: lowercase;
  background: radial-gradient(circle at 50% 40%, #385b93 0%, #243f67 50%, #0e1a2b 100%);
  text-align: center;
}

#junk-drawer .sticker-shell {
  border: 1px solid rgba(62, 49, 41, .9);
  background: linear-gradient(180deg, rgba(218, 205, 188, .98), rgba(201, 185, 166, .98));
  box-shadow:
    inset 1px 1px 0 rgba(255, 245, 230, .7),
    inset -1px -1px 0 rgba(96, 74, 63, .16),
    3px 4px 0 rgba(0, 0, 0, .28);
  transform: rotate(.7deg);
}

#junk-drawer .sticker-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 150px;
  margin: 0 0 16px;
  padding: 3px 5px 6px 3px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #9b7b6d #d7c8b5;
}

#junk-drawer .sticker-tray::-webkit-scrollbar {
  width: 9px;
}

#junk-drawer .sticker-tray::-webkit-scrollbar-track {
  background: #d7c8b5;
  border: 1px solid #9a8170;
}

#junk-drawer .sticker-tray::-webkit-scrollbar-thumb {
  background: #9b7b6d;
  border: 1px solid #6f554a;
}

#junk-drawer .sticker-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 4px;
  border: 1px solid #847064;
  background: linear-gradient(#f3ebdf, #dbcdb8);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.68);
  cursor: pointer;
}
#junk-drawer .sticker-choice img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#junk-drawer .sticker-choice.active {
  outline: 2px solid rgba(215, 167, 176, .9);
  outline-offset: 1px;
}

#junk-drawer .notebook {
  position: relative;
  min-height: 360px;
  padding: 18px 18px 18px 34px;
  overflow: hidden;
  border: 1px solid rgba(193, 174, 155, .9);
  background:
    linear-gradient(90deg, rgba(207, 185, 170, .65) 0 12px, transparent 12px),
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(120, 101, 90, .14) 30px 31px),
    #faf6f0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  cursor: crosshair;
}
#junk-drawer .notebook::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(205, 142, 149, .35);
}
#junk-drawer .notebook-note {
  position: absolute;
  right: 16px;
  bottom: 12px;
  color: #7b6658;
  font: 700 11px/1 "Courier New", Courier, monospace;
  text-transform: lowercase;
}

#junk-drawer .placed-sticker {
  position: absolute;
  width: 72px;
  height: 72px;
  object-fit: contain;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

#junk-drawer .reset-stickers {
  margin-top: 12px;
}

#junk-drawer .junk-card[data-kind="ball"] {
  align-self: center;
}

@media (max-width: 820px) {
  #junk-drawer .junk-grid {
    grid-template-columns: 1fr;
  }
  #junk-drawer .capsule-photo-wrap {
    min-height: 260px;
  }
}

@media (max-width: 560px) {
  #junk-drawer {
    padding: 24px 12px 34px;
  }

  #junk-drawer .junk-title {
    margin-bottom: 18px;
    font-size: clamp(22px, 7vw, 30px);
  }

  #junk-drawer .window-bar {
    min-height: 25px;
    padding: 4px 8px;
    font-size: 11px;
  }

  #junk-drawer .window-body {
    padding: 8px;
  }

  #junk-drawer .capsule-box {
    padding: 28px 12px 20px;
  }

  #junk-drawer .capsule-label {
    font-size: clamp(18px, 5vw, 24px);
  }

  #junk-drawer .sticker-tray {
    flex-wrap: nowrap;
    max-height: none;
    padding: 4px 4px 9px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  #junk-drawer .sticker-choice {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    scroll-snap-align: start;
  }

  #junk-drawer .placed-sticker {
    width: 64px;
    height: 64px;
  }

  #junk-drawer .notebook {
    min-height: 300px;
  }
}


/* =========================================================
   v3 — MORE REALISTIC / SKEUOMORPHIC JUNK DRAWER
   Keeps the site background + gold seam.
   ========================================================= */

#junk-drawer {
  padding-top: clamp(34px, 4vw, 54px);
}

#junk-drawer .junk-inner {
  width: min(1040px, 100%);
}

#junk-drawer .junk-title {
  margin-bottom: clamp(28px, 4vw, 48px);
  color: #eadfcd;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 400;
  letter-spacing: .015em;
  text-transform: none;
  text-shadow:
    0 1px 0 #000,
    0 3px 10px rgba(0,0,0,.34);
}

#junk-drawer .junk-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 64px) clamp(30px, 5vw, 58px);
  align-items: center;
}

/* ---------- BUNNY CAM: old beige computer / webcam window ---------- */

#junk-drawer .window-card[data-kind="cam"] {
  padding: 12px 12px 16px;
  border: 1px solid #5e5047;
  border-radius: 13px 13px 18px 18px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.33), transparent 30%),
    linear-gradient(180deg, #cfc4ad 0%, #afa48f 52%, #9c907c 100%);
  box-shadow:
    inset 2px 2px 1px rgba(255,255,255,.48),
    inset -3px -4px 7px rgba(55,43,35,.25),
    0 12px 25px rgba(0,0,0,.42),
    0 2px 0 rgba(239,218,185,.08);
  transform: rotate(-.55deg);
}

#junk-drawer .window-card[data-kind="cam"] .window-bar {
  min-height: 25px;
  margin: -4px -4px 8px;
  border: 1px solid #54463f;
  border-radius: 5px 5px 2px 2px;
  color: #eadfce;
  background:
    linear-gradient(180deg, #695950 0%, #403631 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.16),
    0 1px 0 rgba(255,255,255,.18);
}

#junk-drawer .window-card[data-kind="cam"] .window-body {
  padding: 0 2px;
}

#junk-drawer .cam-view {
  border: 8px solid #5d554b;
  border-radius: 18px / 12px;
  background:
    radial-gradient(ellipse at center, #1c2220 0%, #111513 68%, #080a09 100%);
  box-shadow:
    inset 0 0 0 2px #25211e,
    inset 0 0 24px rgba(0,0,0,.92),
    0 2px 0 rgba(255,255,255,.24);
}

#junk-drawer .cam-view::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 10px / 8px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.11), transparent 24%),
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.025) 0 1px,
      transparent 1px 3px
    );
  mix-blend-mode: screen;
}

#junk-drawer .cam-live {
  top: 12px;
  left: 13px;
  border-radius: 2px;
  background: rgba(22,17,15,.74);
  box-shadow: 0 1px 4px rgba(0,0,0,.42);
}

#junk-drawer .cam-status {
  margin: 10px 4px 0;
  color: #493c34;
}

#junk-drawer .window-card[data-kind="cam"] .small-button {
  margin-left: 4px;
}

/* ---------- TIME CAPSULE: more believable cardboard box ---------- */

#junk-drawer .capsule-card {
  transform: rotate(.7deg);
}

#junk-drawer .capsule-box {
  width: min(100%, 430px);
  min-height: 430px;
  padding: 52px 22px 28px;
  border: 1px solid #775b42;
  border-radius: 2px;
  background:
    linear-gradient(90deg,
      transparent 0 47%,
      rgba(98,70,46,.12) 47% 47.7%,
      rgba(242,211,161,.13) 47.7% 52.5%,
      rgba(89,62,41,.12) 52.5% 53.1%,
      transparent 53.1%),
    repeating-linear-gradient(
      7deg,
      rgba(255,255,255,.022) 0 2px,
      rgba(92,64,43,.018) 2px 4px
    ),
    linear-gradient(180deg, #b98d5d 0%, #a7774b 48%, #986a43 100%);
  box-shadow:
    inset 1px 1px rgba(255,236,203,.22),
    inset -10px -8px 18px rgba(80,52,32,.12),
    0 15px 28px rgba(0,0,0,.40);
}

/* lid edge */
#junk-drawer .capsule-box::before {
  content: "";
  display: block;
  position: absolute;
  left: -5px;
  right: -5px;
  top: 23px;
  width: auto;
  height: 42px;
  border: 1px solid rgba(100,72,48,.62);
  background:
    linear-gradient(180deg, rgba(205,163,112,.95), rgba(159,113,72,.95));
  box-shadow:
    inset 0 2px rgba(255,233,198,.16),
    0 5px 7px rgba(69,43,27,.18);
  transform: rotate(-.25deg);
}

/* tape */
#junk-drawer .capsule-box::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 50%;
  width: 70px;
  height: 58px;
  border: 0;
  background:
    linear-gradient(90deg, rgba(211,194,157,.75), rgba(232,216,177,.66), rgba(196,174,137,.72));
  box-shadow:
    inset 1px 0 rgba(255,255,255,.16),
    inset -1px 0 rgba(79,61,42,.12);
  transform: translateX(-50%) rotate(.35deg);
}

#junk-drawer .capsule-label {
  position: relative;
  z-index: 2;
  display: inline-block;
  left: 50%;
  margin: 12px 0 20px;
  padding: 5px 9px 4px;
  transform: translateX(-50%) rotate(-1.2deg);
  color: #443124;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: .045em;
  background: rgba(231,213,175,.48);
  border: 1px solid rgba(103,75,49,.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.16);
}

#junk-drawer .capsule-photo-wrap {
  position: relative;
  z-index: 2;
  min-height: 280px;
}

#junk-drawer .capsule-photo {
  width: min(92%, 285px);
  padding: 11px 11px 29px;
  border: 0;
  border-radius: 1px;
  background: #eee8dd;
  box-shadow:
    0 7px 12px rgba(50,33,23,.36),
    inset 0 0 0 1px rgba(107,88,75,.12);
  transform: rotate(1.7deg);
}

#junk-drawer .capsule-photo img {
  filter: saturate(.92) contrast(.96);
}

/* ---------- MAGIC 8 BALL: FIX ALIGNMENT + more physical ---------- */

#junk-drawer .junk-card[data-kind="ball"] {
  width: 100%;
  align-self: center;
  justify-self: center;
  text-align: center;
  transform: rotate(-.25deg);
}

#junk-drawer .eight-card {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

#junk-drawer .eight-prompt {
  width: 100%;
  margin: 0 auto 12px;
  text-align: center;
  color: #ede1cf;
  font-family: "Courier New", Courier, monospace;
}

#junk-drawer .eight-form {
  width: min(100%, 390px);
  margin: 0 auto 20px;
}

#junk-drawer .eight-form input {
  flex: 1 1 240px;
}

#junk-drawer .eight-ball-wrap {
  display: flex;
  width: clamp(200px, 25vw, 265px);
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto 12px;
  align-items: center;
  justify-content: center;
}

#junk-drawer .eight-ball {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 1px solid rgba(255,255,255,.05);
  background:
    radial-gradient(circle at 30% 23%, rgba(255,255,255,.28) 0 2%, rgba(255,255,255,.08) 7%, transparent 18%),
    radial-gradient(circle at 36% 31%, #3d3a39 0%, #171515 22%, #080707 58%, #020202 100%);
  box-shadow:
    inset -23px -30px 46px rgba(0,0,0,.78),
    inset 14px 14px 26px rgba(255,255,255,.035),
    0 16px 24px rgba(0,0,0,.48);
}

#junk-drawer .eight-ball::before {
  top: 12%;
  width: 31%;
  border: 1px solid rgba(30,30,30,.28);
  box-shadow:
    inset 0 0 7px rgba(0,0,0,.12),
    0 1px 4px rgba(0,0,0,.65);
}

#junk-drawer .eight-window {
  left: 50%;
  bottom: 12.5%;
  width: 43%;
  padding: 15px 10px 18px;
  transform: translateX(-50%);
  color: #cbd6ff;
  background:
    radial-gradient(circle at 50% 38%, #334b87 0%, #1e315d 48%, #0a1229 100%);
  filter: drop-shadow(0 2px 4px #000);
}

#junk-drawer .eight-answer {
  width: min(100%, 390px);
  min-height: 34px;
  margin: 10px auto 0;
  color: #cbbdad;
  text-align: center;
}

/* ---------- STICKER BOOK: actual notebook feel ---------- */

#junk-drawer .sticker-shell {
  padding: 12px 12px 16px;
  border: 1px solid #6d5d50;
  border-radius: 4px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.28), transparent 25%),
    linear-gradient(180deg, #b9aa96, #9d8e7b);
  box-shadow:
    inset 1px 1px rgba(255,255,255,.42),
    0 13px 25px rgba(0,0,0,.40);
  transform: rotate(.8deg);
}

#junk-drawer .sticker-shell .window-bar {
  margin: -4px -4px 10px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg,#705e55,#443832);
}

#junk-drawer .sticker-shell .window-body {
  padding: 0 2px;
}

#junk-drawer .sticker-tray {
  padding: 8px;
  border: 1px solid rgba(92,72,61,.52);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 4px, transparent 4px 8px),
    rgba(94,75,65,.15);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.12);
}

#junk-drawer .sticker-choice {
  border: 0;
  border-radius: 2px;
  background: #eee6d8;
  box-shadow:
    0 2px 4px rgba(55,39,30,.28),
    inset 0 0 0 1px rgba(106,86,72,.16);
  transform: rotate(-1deg);
}

#junk-drawer .sticker-choice:nth-child(2n) { transform: rotate(1.5deg); }
#junk-drawer .sticker-choice:nth-child(3n) { transform: rotate(-2deg); }

#junk-drawer .notebook {
  min-height: 390px;
  padding: 22px 20px 22px 46px;
  border: 1px solid #b9a995;
  border-radius: 2px 7px 7px 2px;
  background:
    linear-gradient(90deg, rgba(194,112,121,.20) 0 1px, transparent 1px) 42px 0 / 1px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(90,120,148,.13) 30px 31px),
    radial-gradient(circle at 20% 18%, rgba(150,124,91,.035) 0 1px, transparent 2px),
    #f3ede2;
  box-shadow:
    inset 8px 0 14px rgba(92,76,62,.08),
    inset -1px 0 rgba(255,255,255,.65),
    0 6px 12px rgba(61,42,31,.24);
}

#junk-drawer .notebook::before {
  left: 18px;
  width: 10px;
  top: 10px;
  bottom: 10px;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 7px,
      #7e746b 7px 11px,
      transparent 11px 22px
    );
  border: 0;
  opacity: .9;
}

#junk-drawer .notebook::after {
  content:"";
  position:absolute;
  left: 27px;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(108,80,70,.18);
}

#junk-drawer .notebook-note {
  right: 14px;
  bottom: 10px;
  color: #8d7b6d;
  font-size: 10px;
}

#junk-drawer .placed-sticker {
  filter: drop-shadow(0 2px 2px rgba(74,54,43,.22));
}

@media (max-width: 820px) {
  #junk-drawer .junk-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  #junk-drawer .window-card[data-kind="cam"],
  #junk-drawer .capsule-card,
  #junk-drawer .junk-card[data-kind="ball"],
  #junk-drawer .sticker-shell {
    width: min(100%, 520px);
    margin-inline: auto;
  }

  #junk-drawer .eight-ball-wrap {
    width: min(65vw, 250px);
  }
}

@media (max-width: 560px) {
  #junk-drawer .junk-title {
    margin-bottom: 28px;
  }

  #junk-drawer .junk-grid {
    gap: 38px;
  }

  #junk-drawer .capsule-box {
    min-height: 0;
    padding-inline: 14px;
  }

  #junk-drawer .notebook {
    min-height: 320px;
    padding-left: 40px;
  }

  #junk-drawer .eight-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
  }

  #junk-drawer .eight-form input {
    min-width: 0;
    width: 100%;
  }

  #junk-drawer .eight-form .small-button {
    margin-top: 0;
    align-self: stretch;
  }
}


/* =========================================================
   v4 — REALISTIC TIME CAPSULE + MAGIC 8 BALL ALIGNMENT
   ========================================================= */

/* ---------- TIME CAPSULE ---------- */

#junk-drawer .capsule-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  transform:none;
}

#junk-drawer .capsule-box{
  position:relative;
  width:min(100%, 430px);
  min-height:430px;
  padding:108px 24px 28px;
  overflow:visible;
  cursor:pointer;
  border:1px solid #765235;
  border-radius:3px;
  background:
    linear-gradient(90deg,
      transparent 0 47.3%,
      rgba(74,48,28,.12) 47.3% 48%,
      rgba(226,198,151,.13) 48% 52%,
      rgba(74,48,28,.11) 52% 52.7%,
      transparent 52.7%),
    repeating-linear-gradient(
      3deg,
      rgba(255,255,255,.022) 0 2px,
      rgba(79,51,29,.018) 2px 4px
    ),
    linear-gradient(180deg,#bd8a56 0%,#ad7747 49%,#97623b 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255,239,209,.22),
    inset -14px -14px 24px rgba(68,43,25,.10),
    0 16px 28px rgba(0,0,0,.40);
}

/* darker rear lip */
#junk-drawer .capsule-box > .capsule-photo-wrap::before{
  content:"";
  position:absolute;
  left:-19px;
  right:-19px;
  top:-34px;
  height:27px;
  z-index:-1;
  border:1px solid rgba(92,61,36,.72);
  background:linear-gradient(180deg,#8c5f38,#774c2d);
  box-shadow:0 5px 7px rgba(38,22,12,.20);
}

/* lid */
#junk-drawer .capsule-box::before{
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  top:-4px;
  height:91px;
  z-index:5;
  border:1px solid #765235;
  border-radius:4px 4px 2px 2px;
  transform-origin:50% 0%;
  transform:perspective(900px) rotateX(0deg);
  transition:
    transform .58s cubic-bezier(.2,.72,.18,1),
    box-shadow .58s ease;
  background:
    linear-gradient(90deg,
      transparent 0 46%,
      rgba(93,63,39,.10) 46% 47%,
      rgba(230,203,157,.13) 47% 53%,
      rgba(93,63,39,.09) 53% 54%,
      transparent 54%),
    repeating-linear-gradient(
      2deg,
      rgba(255,255,255,.025) 0 2px,
      rgba(72,47,28,.018) 2px 4px
    ),
    linear-gradient(180deg,#cc9961 0%,#b77f4d 56%,#9f693f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,242,217,.24),
    0 8px 10px rgba(45,27,15,.18);
}

/* vertical packing tape on lid */
#junk-drawer .capsule-box::after{
  content:"";
  position:absolute;
  z-index:6;
  top:4px;
  left:50%;
  width:70px;
  height:79px;
  transform:translateX(-50%);
  transform-origin:50% 0%;
  transition:transform .58s cubic-bezier(.2,.72,.18,1);
  background:
    linear-gradient(90deg,
      rgba(195,176,138,.66),
      rgba(231,215,177,.74) 48%,
      rgba(190,170,132,.66));
  border-left:1px solid rgba(112,87,57,.12);
  border-right:1px solid rgba(112,87,57,.10);
  box-shadow:
    inset 1px 0 rgba(255,255,255,.15),
    inset -1px 0 rgba(75,57,38,.10);
  pointer-events:none;
}

/* handwritten title sits ON the lid */
#junk-drawer .capsule-label{
  position:absolute;
  z-index:7;
  top:26px;
  left:50%;
  margin:0;
  padding:2px 9px 1px;
  transform:translateX(-50%) rotate(-1.4deg);
  transform-origin:50% -26px;
  transition:transform .58s cubic-bezier(.2,.72,.18,1);
  white-space:nowrap;
  color:#553820;
  font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;
  font-size:clamp(26px,2.7vw,34px);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1;
  text-transform:none;
  background:rgba(229,206,164,.26);
  border:0;
  box-shadow:none;
  pointer-events:none;
}

/* contents hidden while box is closed */
#junk-drawer .capsule-photo-wrap{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:280px;
  opacity:0;
  transform:translateY(18px) scale(.965);
  transition:
    opacity .34s ease .08s,
    transform .42s cubic-bezier(.2,.7,.2,1) .06s;
}

#junk-drawer .capsule-photo{
  width:min(92%,285px);
  padding:11px 11px 32px;
  border:0;
  border-radius:1px;
  background:#efe8dd;
  box-shadow:
    0 11px 18px rgba(48,29,17,.37),
    inset 0 0 0 1px rgba(111,87,70,.11);
  transform:rotate(1.8deg);
}

#junk-drawer .capsule-photo img{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border:1px solid rgba(0,0,0,.07);
  background:#ded7cc;
}

#junk-drawer #capsule-next{
  opacity:.72;
  transition:opacity .25s ease, transform .25s ease;
}

/* open on hover/focus/click state */
#junk-drawer .capsule-card:hover .capsule-box::before,
#junk-drawer .capsule-card.is-open .capsule-box::before,
#junk-drawer .capsule-box:focus::before{
  transform:perspective(900px) rotateX(-74deg) translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,242,217,.20),
    0 17px 15px rgba(38,22,12,.18);
}

#junk-drawer .capsule-card:hover .capsule-box::after,
#junk-drawer .capsule-card.is-open .capsule-box::after,
#junk-drawer .capsule-box:focus::after{
  transform:translateX(-50%) perspective(900px) rotateX(-74deg) translateY(-4px);
}

#junk-drawer .capsule-card:hover .capsule-label,
#junk-drawer .capsule-card.is-open .capsule-label,
#junk-drawer .capsule-box:focus .capsule-label{
  transform:translateX(-50%) perspective(900px) rotateX(-74deg) translateY(-4px) rotate(-1.4deg);
}

#junk-drawer .capsule-card:hover .capsule-photo-wrap,
#junk-drawer .capsule-card.is-open .capsule-photo-wrap,
#junk-drawer .capsule-box:focus .capsule-photo-wrap{
  opacity:1;
  transform:translateY(0) scale(1);
}

#junk-drawer .capsule-card:hover #capsule-next,
#junk-drawer .capsule-card.is-open #capsule-next{
  opacity:1;
}

/* ---------- MAGIC 8 BALL: TRUE CENTER AXIS ---------- */

#junk-drawer .junk-card[data-kind="ball"]{
  width:min(100%,470px);
  margin:0 auto;
  place-self:center;
  align-self:center;
  justify-self:center;
  transform:none;
}

#junk-drawer .eight-card{
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  align-items:start;
  width:100%;
  margin:0 auto;
  padding:0;
  text-align:center;
}

#junk-drawer .eight-prompt{
  width:100%;
  margin:0 auto 12px;
  text-align:center;
}

#junk-drawer .eight-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  gap:8px;
  width:min(100%,390px);
  margin:0 auto 20px;
}

#junk-drawer .eight-form input{
  width:100%;
  min-width:0;
  margin:0;
}

#junk-drawer .eight-form .small-button{
  margin:0;
}

#junk-drawer .eight-ball-wrap{
  display:block;
  position:relative;
  width:clamp(210px,25vw,270px);
  height:auto;
  aspect-ratio:1 / 1;
  margin:0 auto 12px;
}

#junk-drawer .eight-ball{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  transform:none;
}

#junk-drawer .eight-ball::before{
  left:50%;
  transform:translateX(-50%);
}

#junk-drawer .eight-window{
  left:50%;
  transform:translateX(-50%);
  text-align:center;
}

#junk-drawer .eight-answer{
  width:min(100%,390px);
  margin:8px auto 0;
  text-align:center;
}

@media(max-width:560px){
  #junk-drawer .capsule-box{
    min-height:390px;
    padding:101px 16px 24px;
  }

  #junk-drawer .capsule-label{
    top:27px;
    font-size:clamp(24px,7vw,30px);
  }

  #junk-drawer .eight-form{
    width:100%;
  }

  #junk-drawer .eight-ball-wrap{
    width:min(68vw,250px);
  }
}


/* =========================================================
   v5 — TOP-DOWN REALISTIC TIME CAPSULE + TRUE 8-BALL AXIS
   ========================================================= */

/* Kill the older pseudo-element box/lid pieces. */
#junk-drawer .capsule-box::before,
#junk-drawer .capsule-box::after,
#junk-drawer .capsule-photo-wrap::before,
#junk-drawer .capsule-photo-wrap::after {
  content: none !important;
  display: none !important;
}

/* ---------- TOP-DOWN CARDBOARD BOX ---------- */

#junk-drawer .capsule-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  transform: none !important;
  perspective: 1200px;
}

#junk-drawer .capsule-box {
  position: relative;
  isolation: isolate;
  width: min(100%, 455px);
  min-height: 0 !important;
  aspect-ratio: 1.16 / 1;
  margin: 0 auto;
  padding: 30px !important;
  overflow: visible !important;
  cursor: pointer;
  border: 1px solid #6e492d !important;
  border-radius: 5px !important;

  /* Interior of an open cardboard box viewed from above */
  background:
    linear-gradient(90deg,
      rgba(68,42,23,.18) 0 7%,
      transparent 7% 93%,
      rgba(68,42,23,.18) 93% 100%),
    linear-gradient(180deg,
      rgba(68,42,23,.18) 0 8%,
      transparent 8% 92%,
      rgba(68,42,23,.20) 92% 100%),
    repeating-linear-gradient(
      2deg,
      rgba(255,255,255,.018) 0 2px,
      rgba(67,41,22,.018) 2px 4px
    ),
    linear-gradient(135deg, #9a673d 0%, #ad7748 48%, #8a5834 100%) !important;

  box-shadow:
    inset 0 0 0 13px #b27d4b,
    inset 0 0 0 15px rgba(94,58,31,.42),
    inset 0 0 34px rgba(40,22,11,.48),
    0 18px 30px rgba(0,0,0,.42) !important;

  transform: rotate(.35deg) !important;
}

/* Little corner depth so it reads as a real box from above. */
#junk-drawer .capsule-inside {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 310px;
  padding: 20px 24px 18px;
  overflow: hidden;
  border: 1px solid rgba(74,44,23,.58);
  border-radius: 2px;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(61,35,18,.12), transparent 64%),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.015) 0 2px,
      rgba(55,32,17,.02) 2px 4px
    ),
    linear-gradient(180deg,#a56e41,#8f5b36);
  box-shadow:
    inset 0 15px 24px rgba(54,31,16,.24),
    inset 0 -10px 20px rgba(39,23,13,.24);
}

/* The lid is a separate full-size cardboard panel lying flat on top. */
#junk-drawer .capsule-lid {
  position: absolute;
  z-index: 20;
  left: -1px;
  right: -1px;
  top: -1px;
  height: calc(100% + 2px);
  border: 1px solid #6f492c;
  border-radius: 5px;
  transform-origin: 50% 0%;
  transform: perspective(1200px) rotateX(0deg);
  transition:
    transform .62s cubic-bezier(.18,.72,.18,1),
    filter .4s ease,
    box-shadow .45s ease;
  backface-visibility: visible;

  background:
    /* vertical packing tape */
    linear-gradient(90deg,
      transparent 0 43%,
      rgba(219,197,157,.46) 43% 57%,
      transparent 57% 100%),
    /* corrugation / paper grain */
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.026) 0 2px,
      rgba(76,47,27,.022) 2px 4px
    ),
    linear-gradient(180deg,#c59058 0%,#b77d49 52%,#a66d40 100%);

  box-shadow:
    inset 1px 1px 0 rgba(255,238,204,.24),
    inset -12px -12px 20px rgba(74,45,25,.08),
    0 7px 12px rgba(47,27,14,.25);
}

/* subtle realistic seams on lid */
#junk-drawer .capsule-lid::before,
#junk-drawer .capsule-lid::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

#junk-drawer .capsule-lid::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(92,58,34,.20);
  box-shadow:
    1px 0 rgba(244,211,165,.10),
    -1px 0 rgba(79,49,29,.08);
}

#junk-drawer .capsule-lid::after {
  left: 0;
  right: 0;
  top: 14%;
  height: 1px;
  background: rgba(90,55,31,.13);
  box-shadow: 0 1px rgba(243,207,157,.08);
}

/* Handwritten directly on the lid. */
#junk-drawer .capsule-label {
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  top: 50% !important;
  width: max-content;
  max-width: 84%;
  margin: 0 !important;
  padding: 3px 10px 4px !important;
  transform: translate(-50%,-50%) rotate(-2deg) !important;
  color: #51331f !important;
  font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive !important;
  font-size: clamp(30px, 3.3vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  white-space: nowrap;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: 0 1px rgba(255,226,186,.14);
}

/* Photo stack inside the open box. */
#junk-drawer .capsule-photo-wrap {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: min(86%, 300px);
  min-height: 0 !important;
  margin: 0 auto;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

#junk-drawer .capsule-photo {
  position: relative;
  z-index: 3;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 10px 30px !important;
  transform: rotate(1.4deg) !important;
  border: 0 !important;
  border-radius: 1px !important;
  background: #efe9df !important;
  box-shadow:
    0 9px 15px rgba(45,26,14,.34),
    inset 0 0 0 1px rgba(103,80,63,.11) !important;
}

/* Two fake photo backs underneath so it looks like a pile of memories. */
#junk-drawer .capsule-photo::before,
#junk-drawer .capsule-photo::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #e8e0d4;
  box-shadow: 0 4px 8px rgba(43,25,14,.22);
}

#junk-drawer .capsule-photo::before {
  transform: rotate(-5deg) translate(-8px,5px);
}

#junk-drawer .capsule-photo::after {
  transform: rotate(4deg) translate(8px,5px);
}

#junk-drawer .capsule-photo img {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border: 1px solid rgba(66,48,37,.12);
  background: #d5cec3;
}

#junk-drawer .capsule-caption {
  margin: 8px 2px -1px !important;
  color: #55463c !important;
  font-size: 11px !important;
  text-align: center !important;
}

#junk-drawer .capsule-next {
  position: absolute;
  z-index: 6;
  right: 12px;
  bottom: 11px;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Open the lid AWAY from us, like a hinged box seen from above. */
#junk-drawer .capsule-card:hover .capsule-lid,
#junk-drawer .capsule-card.is-open .capsule-lid,
#junk-drawer .capsule-box:focus .capsule-lid {
  transform: perspective(1200px) rotateX(104deg) translateY(-8px) !important;
  box-shadow:
    inset 1px 1px 0 rgba(255,238,204,.20),
    0 -10px 18px rgba(29,17,9,.20);
  filter: brightness(.94);
}

/* ---------- MAGIC 8 BALL: ALIGN TO THE INPUT, NOT THE BUTTON ---------- */

#junk-drawer .junk-card[data-kind="ball"] {
  width: min(100%, 470px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
  place-self: center !important;
}

#junk-drawer .eight-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

#junk-drawer .eight-prompt {
  width: min(100%, 390px) !important;
  margin: 0 auto 12px !important;
  text-align: center !important;
}

/*
  Equal blank space on the LEFT balances the ask button on the RIGHT.
  This keeps the actual question field, title, ball and answer on one axis.
*/
#junk-drawer .eight-form {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) 54px !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: min(100%, 500px) !important;
  margin: 0 auto 20px !important;
}

#junk-drawer .eight-form::before {
  content: "";
  grid-column: 1;
}

#junk-drawer .eight-form input {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#junk-drawer .eight-form .small-button {
  grid-column: 3 !important;
  width: 54px !important;
  margin: 0 !important;
  padding-inline: 5px !important;
}

#junk-drawer .eight-ball-wrap {
  position: relative !important;
  left: 0 !important;
  width: clamp(210px,25vw,270px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto 12px !important;
  transform: none !important;
}

#junk-drawer .eight-ball {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

#junk-drawer .eight-ball::before,
#junk-drawer .eight-window {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

#junk-drawer .eight-answer {
  width: min(100%,390px) !important;
  margin: 8px auto 0 !important;
  text-align: center !important;
}

/* Mobile: keep the top-down box shape and centered 8-ball axis. */
@media (max-width: 560px) {
  #junk-drawer .capsule-box {
    width: min(92vw, 430px) !important;
    aspect-ratio: 1.08 / 1 !important;
    padding: 24px !important;
  }

  #junk-drawer .capsule-inside {
    min-height: 280px;
    padding: 18px 15px 44px;
  }

  #junk-drawer .capsule-label {
    font-size: clamp(27px, 8vw, 36px) !important;
  }

  #junk-drawer .eight-form {
    grid-template-columns: 48px minmax(0,1fr) 48px !important;
    width: 100% !important;
  }

  #junk-drawer .eight-form .small-button {
    width: 48px !important;
  }

  #junk-drawer .eight-ball-wrap {
    width: min(68vw,250px) !important;
  }
}


/* =========================================================
   v6 — REAL MAGIC 8 BALL WINDOW + SHAKE + CAPSULE CLOSE
   ========================================================= */

/* ---------- MAGIC 8 BALL ---------- */

/* Keep every part of the 8-ball on one exact center axis. */
#junk-drawer .junk-card[data-kind="ball"],
#junk-drawer .eight-card,
#junk-drawer .eight-ball-wrap {
  box-sizing: border-box !important;
}

#junk-drawer .junk-card[data-kind="ball"] {
  width: min(100%, 470px) !important;
  margin-inline: auto !important;
  justify-self: center !important;
  align-self: center !important;
}

#junk-drawer .eight-card {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

#junk-drawer .eight-prompt,
#junk-drawer .eight-answer {
  width: min(100%, 390px) !important;
  margin-inline: auto !important;
  text-align: center !important;
}

#junk-drawer .eight-ball-wrap {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  display: block !important;
  width: clamp(225px, 26vw, 285px) !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto 12px !important;
  transform: none !important;
}

#junk-drawer .eight-ball {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: translate3d(0,0,0);
  border-radius: 50% !important;
  overflow: visible;

  /* Glassier/plastic 8-ball finish. */
  background:
    radial-gradient(circle at 29% 22%, rgba(255,255,255,.40) 0 2.4%, rgba(255,255,255,.14) 5%, transparent 14%),
    radial-gradient(circle at 35% 31%, #3d3b3d 0%, #181719 21%, #090909 58%, #010101 100%) !important;

  box-shadow:
    inset -30px -34px 48px rgba(0,0,0,.70),
    inset 13px 13px 24px rgba(255,255,255,.035),
    0 17px 27px rgba(0,0,0,.52) !important;
}

/* White number circle near the top/front, like a real Magic 8 Ball. */
#junk-drawer .eight-ball::before {
  content: "8" !important;
  position: absolute !important;
  z-index: 4 !important;
  top: 10.5% !important;
  left: 50% !important;
  width: 31% !important;
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  transform: translateX(-50%) !important;
  color: #151515 !important;
  font: 700 clamp(32px,4vw,43px)/1 Georgia, serif !important;
  border: 1px solid rgba(20,20,20,.25) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 35% 28%, #fff 0%, #f3f3f2 63%, #d7d7d5 100%) !important;
  box-shadow:
    inset 0 -5px 9px rgba(0,0,0,.10),
    0 3px 7px rgba(0,0,0,.65) !important;
}

/* Circular recessed answer chamber on the lower/back side. */
#junk-drawer .eight-recess {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 9.5%;
  width: 48%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  border: 4px solid #18191c;
  border-radius: 50%;
  background:
    radial-gradient(circle at 44% 38%, #303138 0%, #15171b 56%, #07080a 100%);
  box-shadow:
    inset 0 0 0 3px rgba(102,106,116,.15),
    inset 0 7px 13px rgba(255,255,255,.035),
    0 2px 5px rgba(0,0,0,.74);
}

/* Blue answer triangle contained INSIDE the circular recess. */
#junk-drawer .eight-triangle {
  position: relative;
  width: 78%;
  aspect-ratio: 1.05 / 1;
  display: grid;
  place-items: center;
  padding: 25% 18% 17%;
  clip-path: polygon(50% 3%, 96% 91%, 4% 91%);
  background:
    radial-gradient(circle at 50% 35%, #4464a1 0%, #263f78 47%, #13254f 100%);
  filter:
    drop-shadow(0 1px 1px rgba(100,145,255,.20))
    drop-shadow(0 2px 4px rgba(0,0,0,.65));
}

/* This is ONLY the text now — not the triangle itself. */
#junk-drawer .eight-window {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  clip-path: none !important;
  transform: none !important;
  color: #d8e2ff !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 10px;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em;
  text-align: center !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
  background: transparent !important;
  filter: none !important;
  opacity: 0;
  transition: opacity .48s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
}

#junk-drawer .eight-window.is-visible {
  opacity: 1;
}

#junk-drawer .eight-answer {
  min-height: 28px;
  opacity: 0;
  transition: opacity .5s ease .08s;
}

#junk-drawer .eight-answer.is-visible {
  opacity: 1;
}

/* A quick physical-looking wobble, then settle. */
@keyframes junkEightBallShake {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  12%  { transform: translate3d(-7px,-2px,0) rotate(-3deg); }
  25%  { transform: translate3d(8px,1px,0) rotate(3.2deg); }
  38%  { transform: translate3d(-6px,3px,0) rotate(-2.4deg); }
  51%  { transform: translate3d(6px,-2px,0) rotate(2deg); }
  64%  { transform: translate3d(-4px,1px,0) rotate(-1.4deg); }
  78%  { transform: translate3d(3px,-1px,0) rotate(.9deg); }
  90%  { transform: translate3d(-1px,0,0) rotate(-.3deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}

#junk-drawer .eight-ball.is-shaking {
  animation: junkEightBallShake .68s cubic-bezier(.36,.07,.19,.97);
}

/* ---------- TIME CAPSULE CLOSE BEHAVIOR ---------- */

/* Clicking the box gives it focus; don't let old :focus rules leave it open forever. */
#junk-drawer .capsule-card:not(:hover):not(.is-open) .capsule-box:focus .capsule-lid {
  transform: perspective(1200px) rotateX(0deg) !important;
  filter: none !important;
  box-shadow:
    inset 1px 1px 0 rgba(255,238,204,.24),
    inset -12px -12px 20px rgba(74,45,25,.08),
    0 7px 12px rgba(47,27,14,.25) !important;
}

/* On touch screens, avoid sticky browser :hover keeping the lid open. */
@media (hover: none) {
  #junk-drawer .capsule-card:not(.is-open):hover .capsule-lid,
  #junk-drawer .capsule-box:focus .capsule-lid {
    transform: perspective(1200px) rotateX(0deg) !important;
  }

  #junk-drawer .capsule-card.is-open .capsule-lid {
    transform: perspective(1200px) rotateX(104deg) translateY(-8px) !important;
  }
}

@media (max-width: 560px) {
  #junk-drawer .eight-ball-wrap {
    width: min(72vw, 265px) !important;
  }

  #junk-drawer .eight-recess {
    width: 49%;
  }

  #junk-drawer .eight-window {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #junk-drawer .eight-ball.is-shaking {
    animation: none;
  }

  #junk-drawer .eight-window,
  #junk-drawer .eight-answer {
    transition-duration: .01ms;
  }
}


/* =========================================================
   v7 — MAGIC 8 BALL TRIANGLE TEXT FIT
   Keeps words centered and prevents ugly mid-word breaks.
   ========================================================= */

#junk-drawer .eight-triangle {
  position: relative !important;
  display: block !important;
  width: 82% !important;
  aspect-ratio: 1.05 / 1 !important;
  padding: 0 !important;
}

/* Put the words in the visually widest part of the triangle. */
#junk-drawer .eight-window {
  position: absolute !important;
  left: 50% !important;
  top: 58% !important;
  width: 82% !important;
  max-width: 82% !important;
  min-width: 0 !important;
  transform: translate(-50%, -50%) !important;

  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  line-height: 1.02 !important;
  text-align: center !important;
  white-space: normal !important;

  /* Only wrap between words — never split "unfortunately" in half. */
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;

  text-wrap: balance;
}

@media (max-width: 560px) {
  #junk-drawer .eight-triangle {
    width: 84% !important;
  }

  #junk-drawer .eight-window {
    width: 84% !important;
    max-width: 84% !important;
  }
}


/* =========================================================
   v8 — MOBILE TOUCH / TAP RELIABILITY
   ========================================================= */

/* Keep the whole section above decorative site layers and accept touch input. */
#junk-drawer {
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
}

#junk-drawer button,
#junk-drawer input,
#junk-drawer .capsule-box,
#junk-drawer .notebook,
#junk-drawer .sticker-choice,
#junk-drawer .placed-sticker {
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
}

#junk-drawer button,
#junk-drawer .capsule-box,
#junk-drawer .sticker-choice {
  touch-action: manipulation;
}

/* Decorative layers should never steal taps. */
#junk-drawer .capsule-lid,
#junk-drawer .capsule-label,
#junk-drawer .eight-recess,
#junk-drawer .eight-triangle,
#junk-drawer .eight-ball::before {
  pointer-events: none !important;
}

@media (max-width: 820px) {
  /* Prevent accidental invisible desktop hover states from interfering on touch. */
  #junk-drawer .junk-card {
    position: relative;
    z-index: 1;
  }

  #junk-drawer .small-button,
  #junk-drawer .eight-form button {
    min-height: 40px;
    min-width: 44px;
  }

  #junk-drawer .eight-form input {
    min-height: 42px;
    font-size: 16px; /* prevents iOS from zooming the whole page on focus */
  }

  #junk-drawer .sticker-tray {
    position: relative;
    z-index: 4;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  #junk-drawer .sticker-choice {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
  }

  /* Tap the notebook to place; drag an existing sticker to move it. */
  #junk-drawer .notebook {
    position: relative;
    z-index: 2;
    touch-action: manipulation;
  }

  #junk-drawer .placed-sticker {
    touch-action: none !important;
  }

  #junk-drawer .capsule-box {
    touch-action: manipulation;
  }
}

/* On true touch devices, ONLY the JS .is-open class opens the lid.
   This avoids iOS's sticky :hover behavior. */
@media (hover: none), (pointer: coarse) {
  #junk-drawer .capsule-card:hover .capsule-lid,
  #junk-drawer .capsule-box:focus .capsule-lid {
    transform: perspective(1200px) rotateX(0deg) !important;
  }

  #junk-drawer .capsule-card.is-open .capsule-lid {
    transform: perspective(1200px) rotateX(104deg) translateY(-8px) !important;
  }
}


/* =========================================================
   v9 — HARD MOBILE VISIBILITY RESET
   The main site has a lot of older mobile styling. These rules
   deliberately isolate Junk Drawer so its cards cannot disappear.
   ========================================================= */

@media (max-width: 820px) {
  #junk-drawer {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    contain: none !important;
  }

  #junk-drawer .junk-inner {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #junk-drawer .junk-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #junk-drawer .junk-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    gap: 38px !important;
    overflow: visible !important;
  }

  #junk-drawer .junk-grid > .junk-card {
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    inset: auto !important;
    float: none !important;
    width: min(100%, 520px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 2 !important;
  }

  #junk-drawer .window-card[data-kind="cam"] {
    display: block !important;
  }

  #junk-drawer .capsule-card {
    display: flex !important;
    flex-direction: column !important;
  }

  #junk-drawer .junk-card[data-kind="ball"] {
    display: block !important;
  }

  #junk-drawer .sticker-shell {
    display: block !important;
  }

  #junk-drawer .window-body,
  #junk-drawer .cam-view,
  #junk-drawer .capsule-box,
  #junk-drawer .capsule-inside,
  #junk-drawer .eight-card,
  #junk-drawer .eight-ball-wrap,
  #junk-drawer .sticker-tray,
  #junk-drawer .notebook {
    visibility: visible !important;
    max-height: none;
  }

  #junk-drawer .window-body,
  #junk-drawer .capsule-box,
  #junk-drawer .capsule-inside,
  #junk-drawer .eight-card,
  #junk-drawer .eight-ball-wrap,
  #junk-drawer .notebook {
    opacity: 1 !important;
  }
}


/* =========================================================
   v10 — 8 BALL: FIRST-ASK SHAKE + SIMPLE TRIANGLE ARROW
   ========================================================= */

/* The blue triangle no longer has to hold words. */
#junk-drawer .eight-triangle {
  display: grid !important;
  place-items: center !important;
  width: 80% !important;
  aspect-ratio: 1.05 / 1 !important;
  padding: 0 !important;
}

/* A single arrow sits dead-center in the blue triangle. */
#junk-drawer .eight-window {
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 5px !important;
  transform: none !important;

  color: #e8eeff !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(23px, 3.5vw, 32px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;

  opacity: 0;
  text-shadow:
    0 0 5px rgba(154, 184, 255, .65),
    0 1px 2px rgba(0,0,0,.8);
  transition: opacity .34s ease;
}

#junk-drawer .eight-window.is-visible {
  opacity: 1;
}

/* The actual answer is meant to be read below the ball. */
#junk-drawer .eight-answer {
  min-height: 32px !important;
  width: min(100%, 420px) !important;
  margin: 10px auto 0 !important;
  text-align: center !important;
  line-height: 1.35 !important;
}

/* Keep the old CSS animation only as a fallback. */
@keyframes junkEightBallShakeV10 {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  12%  { transform: translate3d(-8px,-2px,0) rotate(-3.5deg); }
  25%  { transform: translate3d(9px,2px,0) rotate(3.7deg); }
  38%  { transform: translate3d(-7px,3px,0) rotate(-2.8deg); }
  51%  { transform: translate3d(7px,-2px,0) rotate(2.4deg); }
  64%  { transform: translate3d(-5px,1px,0) rotate(-1.7deg); }
  78%  { transform: translate3d(4px,-1px,0) rotate(1.1deg); }
  90%  { transform: translate3d(-2px,0,0) rotate(-.5deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}

#junk-drawer .eight-ball.is-shaking {
  animation: junkEightBallShakeV10 .76s cubic-bezier(.36,.07,.19,.97) !important;
}

@media (max-width: 560px) {
  #junk-drawer .eight-window {
    font-size: 26px !important;
  }
}


/* =========================================================
   v12 — BIGGER MAGIC 8 BALL WITH ANSWER INSIDE TRIANGLE
   ========================================================= */

/* Make the physical ball substantially larger so the answer window
   has room to behave like a real Magic 8 Ball. */
#junk-drawer .junk-card[data-kind="ball"] {
  width: min(100%, 560px) !important;
}

#junk-drawer .eight-card {
  width: 100% !important;
}

#junk-drawer .eight-ball-wrap {
  width: clamp(300px, 34vw, 390px) !important;
  max-width: 92% !important;
  margin: 2px auto 14px !important;
}

/* Larger recessed viewing window. */
#junk-drawer .eight-recess {
  left: 50% !important;
  bottom: 7.5% !important;
  width: 57% !important;
  transform: translateX(-50%) !important;
  border-width: 5px !important;
}

/* Larger blue triangle inside the viewing window. */
#junk-drawer .eight-triangle {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 88% !important;
  aspect-ratio: 1.08 / 1 !important;
  padding: 0 !important;
}

/* Put the answer in the broad center/lower-center of the triangle.
   No mid-word breaking. */
#junk-drawer .eight-window {
  position: absolute !important;
  left: 50% !important;
  top: 59% !important;
  width: 72% !important;
  max-width: 72% !important;
  transform: translate(-50%, -50%) !important;

  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #dce6ff !important;
  font-family: "Courier New", Courier, monospace !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-wrap: balance;

  opacity: 0;
  transition: opacity .42s ease;
  text-shadow:
    0 0 5px rgba(148,178,255,.36),
    0 1px 2px rgba(0,0,0,.78);
}

#junk-drawer .eight-window.is-visible {
  opacity: 1;
}

/* The text under the ball only reminds you what question you asked. */
#junk-drawer .eight-answer {
  min-height: 22px !important;
  width: min(100%, 440px) !important;
  margin: 6px auto 0 !important;
  color: #9f9082 !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  opacity: 0;
  transition: opacity .45s ease;
}

#junk-drawer .eight-answer.is-visible {
  opacity: 1;
}

@media (max-width: 820px) {
  #junk-drawer .junk-card[data-kind="ball"] {
    width: min(100%, 520px) !important;
  }

  #junk-drawer .eight-ball-wrap {
    width: min(82vw, 350px) !important;
    max-width: 350px !important;
  }

  #junk-drawer .eight-recess {
    width: 58% !important;
  }

  #junk-drawer .eight-triangle {
    width: 89% !important;
  }

  #junk-drawer .eight-window {
    width: 73% !important;
    max-width: 73% !important;
  }
}

@media (max-width: 560px) {
  #junk-drawer .eight-ball-wrap {
    width: min(86vw, 330px) !important;
    max-width: 330px !important;
  }

  #junk-drawer .eight-window {
    width: 74% !important;
    max-width: 74% !important;
  }
}


/* =========================================================
   v13 — SMALLER 8-BALL ANSWER TEXT
   ========================================================= */

#junk-drawer .eight-window {
  font-size: 9px !important;
  line-height: 1.05 !important;
  width: 70% !important;
  max-width: 70% !important;
}

@media (max-width: 820px) {
  #junk-drawer .eight-window {
    font-size: 8.5px !important;
    width: 71% !important;
    max-width: 71% !important;
  }
}

@media (max-width: 560px) {
  #junk-drawer .eight-window {
    font-size: 8px !important;
    width: 72% !important;
    max-width: 72% !important;
  }
}


/* =========================================================
   v14 — TIME CAPSULE CHILDLIKE CRAYON LID
   ========================================================= */

/* Make the lid feel more playful and handmade. */
#junk-drawer .capsule-lid {
  overflow: visible;
}

/* Pink crayon handwritten title */
#junk-drawer .capsule-label {
  color: #d86f9c !important;
  font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive !important;
  font-size: clamp(31px, 3.35vw, 43px) !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  transform: translate(-50%, -50%) rotate(-4deg) !important;
  text-shadow:
    0.6px 0 #cc5c8d,
    -0.6px 0 #ea95b8,
    0 0.6px #ea95b8,
    0 -0.6px #cc5c8d,
    0 1px 0 rgba(255,255,255,.08);
  filter: saturate(1.05);
}

/* Doodles on the box lid — childlike hearts/stars/flowers */
#junk-drawer .capsule-lid::after {
  content: "★  ♡   ✿    ♡  ★";
  position: absolute;
  left: 50%;
  bottom: 13%;
  transform: translateX(-50%) rotate(-3deg);
  white-space: nowrap;
  pointer-events: none;

  color: #ea94bc;
  font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: .28em;
  text-shadow:
    0.5px 0 #d86f9c,
    -0.5px 0 #f4b6d0,
    0 0.5px #f4b6d0;
  opacity: .95;
}

/* A few more little doodles tucked around the title */
#junk-drawer .capsule-lid::before {
  content: "♡     ✦      ♡";
  position: absolute;
  left: 50%;
  top: 24%;
  transform: translateX(-50%) rotate(2deg);
  white-space: nowrap;
  pointer-events: none;

  color: #f0a5c5;
  font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(16px, 1.8vw, 22px);
  letter-spacing: .9em;
  text-shadow:
    0.4px 0 #d86f9c,
    -0.4px 0 #f6bfd7;
  opacity: .92;
}

/* Keep the vertical tape visible under the crayon doodles. */
#junk-drawer .capsule-lid {
  background:
    linear-gradient(90deg,
      transparent 0 43%,
      rgba(219,197,157,.46) 43% 57%,
      transparent 57% 100%),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.026) 0 2px,
      rgba(76,47,27,.022) 2px 4px
    ),
    linear-gradient(180deg,#c59058 0%,#b77d49 52%,#a66d40 100%) !important;
}

@media (max-width: 560px) {
  #junk-drawer .capsule-label {
    font-size: clamp(28px, 8.2vw, 38px) !important;
  }

  #junk-drawer .capsule-lid::before {
    top: 22%;
    font-size: 17px;
    letter-spacing: .7em;
  }

  #junk-drawer .capsule-lid::after {
    bottom: 12%;
    font-size: 18px;
    letter-spacing: .18em;
  }
}


/* =========================================================
   v15 — TIME CAPSULE USING KAYLEE'S HAND-DRAWN LID ART
   ========================================================= */

/* Remove older generated lid doodles/text so the uploaded art is the only lid design. */
#junk-drawer .capsule-lid::before,
#junk-drawer .capsule-lid::after,
#junk-drawer .capsule-label {
  display: none !important;
}

/* Top-down box stays dimensional underneath. */
#junk-drawer .capsule-box {
  width: min(100%, 455px) !important;
  aspect-ratio: 1 / 1 !important;
  padding: 30px !important;
  border-radius: 6px !important;
  background:
    linear-gradient(90deg,
      rgba(68,42,23,.18) 0 7%,
      transparent 7% 93%,
      rgba(68,42,23,.18) 93% 100%),
    linear-gradient(180deg,
      rgba(68,42,23,.18) 0 8%,
      transparent 8% 92%,
      rgba(68,42,23,.20) 92% 100%),
    repeating-linear-gradient(
      2deg,
      rgba(255,255,255,.018) 0 2px,
      rgba(67,41,22,.018) 2px 4px
    ),
    linear-gradient(135deg, #9a673d 0%, #ad7748 48%, #8a5834 100%) !important;
  box-shadow:
    inset 0 0 0 13px #b27d4b,
    inset 0 0 0 15px rgba(94,58,31,.42),
    inset 0 0 34px rgba(40,22,11,.48),
    0 18px 30px rgba(0,0,0,.42) !important;
}

/* The entire hand-drawn image is printed on the lid. */
#junk-drawer .capsule-lid {
  position: absolute !important;
  z-index: 20 !important;
  left: -1px !important;
  right: -1px !important;
  top: -1px !important;
  height: calc(100% + 2px) !important;

  border: 1px solid #6f492c !important;
  border-radius: 6px !important;
  transform-origin: 50% 0% !important;
  transform: perspective(1200px) rotateX(0deg) !important;

  background:
    url("junk-drawer/time-capsule/time-capsule-lid-art.PNG")
    center / cover no-repeat !important;

  box-shadow:
    inset 1px 1px 0 rgba(255,238,204,.18),
    inset -10px -10px 18px rgba(74,45,25,.08),
    0 8px 13px rgba(47,27,14,.27) !important;

  transition:
    transform .62s cubic-bezier(.18,.72,.18,1),
    filter .4s ease,
    box-shadow .45s ease !important;
}

/* Open away from the viewer like a real hinged lid. */
#junk-drawer .capsule-card:hover .capsule-lid,
#junk-drawer .capsule-card.is-open .capsule-lid,
#junk-drawer .capsule-box:focus .capsule-lid {
  transform: perspective(1200px) rotateX(104deg) translateY(-8px) !important;
  filter: brightness(.93);
  box-shadow:
    inset 1px 1px 0 rgba(255,238,204,.16),
    0 -10px 18px rgba(29,17,9,.20) !important;
}

/* Photo stack inside. */
#junk-drawer .capsule-inside {
  min-height: 315px !important;
  padding: 20px 24px 18px !important;
}

#junk-drawer .capsule-photo-wrap {
  width: min(86%, 300px) !important;
}

#junk-drawer .capsule-photo {
  width: 100% !important;
  padding: 10px 10px 30px !important;
  transform: rotate(1.4deg) !important;
}

#junk-drawer .capsule-photo img {
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

#junk-drawer .capsule-photo-fade {
  animation: capsulePhotoFade .26s ease;
}

@keyframes capsulePhotoFade {
  from { opacity: .25; transform: scale(.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* No button. Tap the open box for next; swipe left/right on touch screens. */
#junk-drawer #capsule-next,
#junk-drawer .capsule-next {
  display: none !important;
}

#junk-drawer .capsule-box {
  touch-action: pan-y !important;
}

@media (hover: none), (pointer: coarse) {
  #junk-drawer .capsule-card:hover .capsule-lid,
  #junk-drawer .capsule-box:focus .capsule-lid {
    transform: perspective(1200px) rotateX(0deg) !important;
  }

  #junk-drawer .capsule-card.is-open .capsule-lid {
    transform: perspective(1200px) rotateX(104deg) translateY(-8px) !important;
  }
}

@media (max-width: 560px) {
  #junk-drawer .capsule-box {
    width: min(92vw, 430px) !important;
    aspect-ratio: 1 / 1 !important;
    padding: 24px !important;
  }

  #junk-drawer .capsule-inside {
    min-height: 275px !important;
    padding: 18px 15px !important;
  }
}


/* =========================================================
   v16 — MOBILE MAGIC 8 BALL TEXT FIT
   ========================================================= */

@media (max-width: 560px) {
  /* Give the words a little more horizontal room inside the blue triangle. */
  #junk-drawer .eight-triangle {
    width: 92% !important;
  }

  #junk-drawer .eight-window {
    width: 80% !important;
    max-width: 80% !important;
    top: 59% !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;

    /* JS can shrink this further for longer answers. */
    font-size: 7px !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-wrap: balance;
  }
}


/* =========================================================
   v17 — MAGIC 8 BALL CLICK SAFEGUARD
   ========================================================= */

#junk-drawer .eight-form,
#junk-drawer #eight-ask-button,
#junk-drawer #eight-input {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}

#junk-drawer #eight-ask-button {
  cursor: pointer !important;
  touch-action: manipulation !important;
}


/* =========================================================
   v18 — MAGIC 8 BALL WIGGLE + ANSWER BELOW
   ========================================================= */

#junk-drawer #eight-answer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  width: min(92%, 440px) !important;
  margin: 10px auto 0 !important;
  text-align: center !important;
  line-height: 1.25 !important;
}

#junk-drawer #eight-answer .eight-you-asked {
  display: block !important;
  opacity: .72 !important;
  font-size: .9em !important;
}

#junk-drawer #eight-answer .eight-under-answer {
  display: block !important;
  font-weight: 700 !important;
}

@media (max-width: 560px) {
  #junk-drawer #eight-answer {
    width: 94% !important;
    margin-top: 8px !important;
    font-size: 12px !important;
  }
}
/* FIX TIME CAPSULE INTERIOR OVERHANG */
#junk-drawer .capsule-inside {
  position: absolute !important;
  inset: 30px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
}

@media (max-width: 560px) {
  #junk-drawer .capsule-inside {
    inset: 24px !important;
  }
}
/* MAGIC 8 BALL — automatically wrap long answers */
#junk-drawer .eight-window {
  width: 66% !important;
  max-width: 66% !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;

  text-align: center !important;
  text-wrap: balance;
  line-height: 1.05 !important;
}

@media (max-width: 560px) {
  #junk-drawer .eight-window {
    width: 64% !important;
    max-width: 64% !important;
    white-space: normal !important;
    line-height: 1.05 !important;
  }
}

/* =========================================================
   v19 — CABOODLE LAUNCHER + SCROLLABLE POPUP
   The existing Junk Drawer cards stay intact inside the modal.
   ========================================================= */

#junk-drawer {
  --caboodle-pink: #df9d9f;
  --caboodle-pink-light: #f0c3c5;
  --caboodle-pink-deep: #b96f76;
  --caboodle-ink: #4b302e;
  overflow: visible !important;
}

#junk-drawer.junk-modal-active {
  z-index: 100000 !important;
}

html.junk-modal-open,
body.junk-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

#junk-drawer .junk-caboodle-zone {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(280px, 46vw, 510px);
  padding: clamp(18px, 3vw, 34px) 12px;
}

#junk-drawer .junk-caboodle-button {
  display: block;
  width: min(680px, 92vw);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#junk-drawer .junk-caboodle-button:focus-visible {
  outline: 2px dotted rgba(240, 195, 197, .96);
  outline-offset: 5px;
}

#junk-drawer .junk-caboodle-stack {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform-origin: 50% 58%;
  will-change: transform;
}

#junk-drawer .junk-caboodle-case,
#junk-drawer .junk-caboodle-charms {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-drag: none;
}

#junk-drawer .junk-caboodle-case {
  z-index: 1;
}

#junk-drawer .junk-caboodle-charms {
  z-index: 2;
  transform-origin: 66% 30%;
  will-change: transform;
}

#junk-drawer .junk-caboodle-stack.is-jiggling {
  animation: junk-caboodle-jiggle .42s cubic-bezier(.32, .72, .22, 1);
}

#junk-drawer .junk-caboodle-charms.is-swinging {
  animation: junk-caboodle-charm-swing .78s cubic-bezier(.34, .67, .24, 1);
}

@keyframes junk-caboodle-jiggle {
  0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
  18% { transform: translateX(-3px) rotate(-2.2deg) scale(1.012); }
  37% { transform: translateX(3px) rotate(2.4deg) scale(1.015); }
  56% { transform: translateX(-2px) rotate(-1.55deg) scale(1.009); }
  76% { transform: translateX(1px) rotate(.9deg) scale(1.004); }
}

@keyframes junk-caboodle-charm-swing {
  0%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(18deg); }
  40% { transform: rotate(-13deg); }
  60% { transform: rotate(8deg); }
  78% { transform: rotate(-4deg); }
  91% { transform: rotate(1.5deg); }
}

#junk-drawer .junk-modal[hidden] {
  display: none !important;
}

#junk-drawer .junk-modal {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.4vw, 24px);
  opacity: 0;
  transition: opacity .18s ease;
}

#junk-drawer .junk-modal.is-open {
  opacity: 1;
}

#junk-drawer .junk-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 12, 11, .74);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

#junk-drawer .junk-modal-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(940px, calc(100vw - 28px));
  height: min(86dvh, 860px);
  max-height: calc(100dvh - 28px);
  min-height: 0;
  overflow: hidden;
  color: var(--caboodle-ink);
  border: 2px solid rgba(112, 67, 68, .66);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(145deg, #e7aaad 0%, var(--caboodle-pink) 48%, #d58f94 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(117,66,70,.22),
    0 24px 70px rgba(0,0,0,.48);
  transform: translateY(10px) scale(.985);
  transition: transform .18s ease;
}

#junk-drawer .junk-modal.is-open .junk-modal-panel {
  transform: translateY(0) scale(1);
}

#junk-drawer .junk-modal-panel::before {
  content: "";
  position: absolute;
  inset: 5px 14px auto;
  z-index: 5;
  height: 1px;
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  pointer-events: none;
}

#junk-drawer .junk-modal-header {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 11px 12px 10px 22px;
  color: var(--caboodle-ink);
  border-bottom: 1px solid rgba(106, 64, 64, .36);
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.03)),
    rgba(232, 169, 173, .86);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.22);
}

#junk-drawer .junk-modal-title {
  margin: 0;
  color: #4b302e;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(18px, 2.8vw, 26px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: lowercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.34);
}

#junk-drawer .junk-modal-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0 0 3px;
  color: #573532;
  font: 400 30px/1 Georgia, serif;
  border: 1px solid rgba(101, 58, 59, .58);
  border-radius: 50%;
  background:
    linear-gradient(180deg, #f4c5c7, #cf858b);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.62),
    1px 2px 0 rgba(87,49,52,.24);
  cursor: pointer;
  touch-action: manipulation;
}

#junk-drawer .junk-modal-close:active {
  transform: translateY(1px);
}

#junk-drawer .junk-modal-close:focus-visible {
  outline: 2px dotted #5b3634;
  outline-offset: 3px;
}

#junk-drawer .junk-modal-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(18px, 3vw, 32px);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--caboodle-pink-deep) var(--caboodle-pink-light);
  scrollbar-width: thin;
  background:
    radial-gradient(circle at 14% 22%, rgba(255,255,255,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 65%, rgba(104,62,64,.055) 0 2px, transparent 3px),
    rgba(229, 164, 168, .72);
  background-size: 68px 68px, 83px 83px;
}

#junk-drawer .junk-modal-scroll::-webkit-scrollbar {
  width: 10px;
}

#junk-drawer .junk-modal-scroll::-webkit-scrollbar-track {
  background: var(--caboodle-pink-light);
}

#junk-drawer .junk-modal-scroll::-webkit-scrollbar-thumb {
  border: 2px solid var(--caboodle-pink-light);
  border-radius: 999px;
  background: var(--caboodle-pink-deep);
}

#junk-drawer .junk-modal-scroll .junk-inner {
  width: min(1100px, 100%);
  height: auto !important;
  max-height: none !important;
  margin: 0 auto;
  overflow: visible !important;
}

#junk-drawer .junk-modal-scroll .junk-grid {
  margin: 0;
}

@media (max-width: 820px) {
  #junk-drawer .junk-caboodle-zone {
    min-height: clamp(230px, 74vw, 410px);
    padding: 10px 0 18px;
  }

  #junk-drawer .junk-caboodle-button {
    width: min(760px, 108vw);
    max-width: none;
  }

  #junk-drawer .junk-modal {
    padding: 10px;
  }

  #junk-drawer .junk-modal-panel {
    width: calc(100vw - 20px);
    height: 86dvh;
    max-height: calc(100dvh - 20px);
    border-radius: 22px;
  }

  #junk-drawer .junk-modal-header {
    min-height: 54px;
    padding-left: 16px;
  }

  #junk-drawer .junk-modal-scroll {
    padding: 18px 15px 28px;
  }

  #junk-drawer .junk-modal-scroll .junk-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 38px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #junk-drawer .junk-modal-scroll .junk-grid > .junk-card {
    width: min(100%, 520px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 560px) {
  #junk-drawer .junk-caboodle-button {
    width: 116vw;
    transform: translateX(-8vw);
  }

  #junk-drawer .junk-modal-panel {
    height: 88dvh;
  }

  #junk-drawer .junk-modal-title {
    font-size: 17px;
  }

  #junk-drawer .junk-modal-close {
    width: 36px;
    height: 36px;
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #junk-drawer .junk-caboodle-stack,
  #junk-drawer .junk-caboodle-charms,
  #junk-drawer .junk-modal,
  #junk-drawer .junk-modal-panel {
    animation: none !important;
    transition: none !important;
  }
}


/* =========================================================
   v20 — BAGGED BETTA
   Lives after the sticker book inside the Caboodle popup.
   ========================================================= */

#junk-drawer .fish-card {
  grid-column: 1 / -1;
  width: min(100%, 640px);
  margin: 4px auto 6px;
  text-align: center;
}

#junk-drawer .fish-bag-button {
  display: block;
  width: min(100%, 470px);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#junk-drawer .fish-bag-button:focus-visible {
  outline: 2px dotted rgba(83, 49, 48, .88);
  outline-offset: 5px;
  border-radius: 24px;
}

#junk-drawer .fish-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1086 / 1448;
  overflow: visible;
  filter: drop-shadow(0 10px 12px rgba(86, 49, 51, .16));
  isolation: isolate;
}

#junk-drawer .fish-layer,
#junk-drawer .fish-swimmer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#junk-drawer .fish-layer {
  object-fit: contain;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-drag: none;
}

#junk-drawer .fish-swimmer {
  z-index: 2;
  transform-origin: 58% 59%;
  animation: junk-fish-drift 5.8s ease-in-out infinite alternate;
  will-change: transform;
}

#junk-drawer .fish-body {
  z-index: 2;
}

#junk-drawer .fish-tail {
  z-index: 3;
  transform-origin: 56% 59%;
  animation: junk-fish-tail 1.28s ease-in-out infinite alternate;
  will-change: transform;
}

#junk-drawer .fish-top-fin {
  z-index: 4;
  transform-origin: 55% 59%;
  animation: junk-fish-top-fin 1.72s ease-in-out infinite alternate;
  will-change: transform;
}

#junk-drawer .fish-bottom-fin {
  z-index: 4;
  transform-origin: 54% 58%;
  animation: junk-fish-bottom-fin 1.48s ease-in-out infinite alternate;
  will-change: transform;
}

#junk-drawer .fish-bag {
  z-index: 8;
}

#junk-drawer .fish-hint {
  margin: -8px auto 0;
  color: rgba(75, 48, 46, .75);
  font: 700 11px/1.2 "Courier New", Courier, monospace;
  letter-spacing: .02em;
  text-align: center;
  text-transform: lowercase;
}

#junk-drawer .fish-bubbles {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

#junk-drawer .fish-bubbles i {
  position: absolute;
  left: 52%;
  top: 58%;
  width: 9px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.65),
    0 1px 2px rgba(75, 62, 68, .10);
  opacity: 0;
}

#junk-drawer .fish-bubbles i:nth-child(2) {
  width: 6px;
  left: 54%;
  top: 60%;
}

#junk-drawer .fish-bubbles i:nth-child(3) {
  width: 12px;
  left: 50%;
  top: 61%;
}

#junk-drawer .fish-bubbles i:nth-child(4) {
  width: 7px;
  left: 55%;
  top: 57%;
}

#junk-drawer .fish-stage.is-startled .fish-bubbles i {
  animation: junk-fish-bubble .92s ease-out both;
}

#junk-drawer .fish-stage.is-startled .fish-bubbles i:nth-child(2) {
  animation-delay: .08s;
}

#junk-drawer .fish-stage.is-startled .fish-bubbles i:nth-child(3) {
  animation-delay: .14s;
}

#junk-drawer .fish-stage.is-startled .fish-bubbles i:nth-child(4) {
  animation-delay: .20s;
}

#junk-drawer .fish-swimmer.is-startled {
  animation: junk-fish-dart .92s cubic-bezier(.18,.72,.24,1) both;
}

@keyframes junk-fish-drift {
  0% {
    transform: translate3d(-1.1%, .7%, 0) rotate(-.45deg);
  }
  35% {
    transform: translate3d(.7%, -.5%, 0) rotate(.28deg);
  }
  70% {
    transform: translate3d(1.4%, .3%, 0) rotate(.48deg);
  }
  100% {
    transform: translate3d(-.3%, -.9%, 0) rotate(-.18deg);
  }
}

@keyframes junk-fish-tail {
  from { transform: rotate(-1.6deg) scaleX(.985); }
  to   { transform: rotate(1.9deg) scaleX(1.015); }
}

@keyframes junk-fish-top-fin {
  from { transform: rotate(-.8deg) scaleY(.985); }
  to   { transform: rotate(1.1deg) scaleY(1.018); }
}

@keyframes junk-fish-bottom-fin {
  from { transform: rotate(.9deg) scaleY(1.012); }
  to   { transform: rotate(-1deg) scaleY(.985); }
}

@keyframes junk-fish-dart {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  18% {
    transform: translate3d(-6%, -1.3%, 0) rotate(-2.4deg) scale(.985);
  }
  42% {
    transform: translate3d(5.2%, .8%, 0) rotate(2.1deg) scale(1.015);
  }
  66% {
    transform: translate3d(1.5%, -.9%, 0) rotate(.7deg) scale(1);
  }
  84% {
    transform: translate3d(-1%, .35%, 0) rotate(-.35deg) scale(1);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes junk-fish-bubble {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.55);
  }
  18% {
    opacity: .92;
  }
  100% {
    opacity: 0;
    transform: translate3d(18px, -68px, 0) scale(1.2);
  }
}

@media (max-width: 820px) {
  #junk-drawer .fish-card {
    display: block !important;
    width: min(100%, 520px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #junk-drawer .fish-bag-button {
    width: min(100%, 430px);
  }

  #junk-drawer .fish-hint {
    margin-top: -5px;
  }
}

@media (max-width: 560px) {
  #junk-drawer .fish-bag-button {
    width: min(112%, 430px);
    transform: translateX(-5.35%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #junk-drawer .fish-swimmer,
  #junk-drawer .fish-tail,
  #junk-drawer .fish-top-fin,
  #junk-drawer .fish-bottom-fin,
  #junk-drawer .fish-stage.is-startled .fish-bubbles i {
    animation: none !important;
  }

  #junk-drawer .fish-swimmer.is-startled {
    transform: translateX(-2%);
  }
}


/* =========================================================
   v21 — BETTA ALIGNMENT + MORE VISIBLE SWIMMING
   Uses the original 1200x1600 fish pieces, which share one
   coordinate system. Fins stay BEHIND the body at their roots.
   ========================================================= */

#junk-drawer .fish-stage {
  aspect-ratio: 3 / 4 !important;
}

/* Correct stacking: hide the fin roots beneath the body. */
#junk-drawer .fish-tail,
#junk-drawer .fish-top-fin,
#junk-drawer .fish-bottom-fin {
  z-index: 1 !important;
}

#junk-drawer .fish-body {
  z-index: 2 !important;
}

/* Give the entire fish a larger, slow path inside the bag. */
#junk-drawer .fish-swimmer {
  transform-origin: 61% 59% !important;
  animation: junk-fish-drift-v21 7.2s ease-in-out infinite !important;
}

/* Attachment points measured from the shared 1200x1600 canvas. */
#junk-drawer .fish-tail {
  transform-origin: 62.6% 58.3% !important;
  animation: junk-fish-tail-v21 1.05s ease-in-out infinite alternate !important;
}

#junk-drawer .fish-top-fin {
  transform-origin: 60.6% 57.5% !important;
  animation: junk-fish-top-fin-v21 1.32s ease-in-out infinite alternate !important;
}

#junk-drawer .fish-bottom-fin {
  transform-origin: 55.8% 58.8% !important;
  animation: junk-fish-bottom-fin-v21 1.18s ease-in-out infinite alternate !important;
}

/* The click/tap dart is deliberately more obvious than before. */
#junk-drawer .fish-swimmer.is-startled {
  animation: junk-fish-dart-v21 1s cubic-bezier(.16,.72,.22,1) both !important;
}

@keyframes junk-fish-drift-v21 {
  0% {
    transform: translate3d(-7.5%, 1.8%, 0) rotate(-1.2deg);
  }
  22% {
    transform: translate3d(-2%, -1.2%, 0) rotate(.3deg);
  }
  48% {
    transform: translate3d(6.5%, -2.2%, 0) rotate(1.25deg);
  }
  72% {
    transform: translate3d(3%, 1.4%, 0) rotate(.35deg);
  }
  100% {
    transform: translate3d(-7.5%, 1.8%, 0) rotate(-1.2deg);
  }
}

@keyframes junk-fish-tail-v21 {
  from {
    transform: rotate(-3.2deg) scaleX(.985);
  }
  to {
    transform: rotate(3.3deg) scaleX(1.015);
  }
}

@keyframes junk-fish-top-fin-v21 {
  from {
    transform: rotate(-2deg) scaleY(.985);
  }
  to {
    transform: rotate(2.2deg) scaleY(1.018);
  }
}

@keyframes junk-fish-bottom-fin-v21 {
  from {
    transform: rotate(2.3deg) scaleY(1.016);
  }
  to {
    transform: rotate(-2.1deg) scaleY(.986);
  }
}

@keyframes junk-fish-dart-v21 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  16% {
    transform: translate3d(-12%, -3.2%, 0) rotate(-3deg) scale(.98);
  }
  38% {
    transform: translate3d(10%, 1.5%, 0) rotate(2.5deg) scale(1.02);
  }
  62% {
    transform: translate3d(4%, -1.2%, 0) rotate(.8deg) scale(1);
  }
  82% {
    transform: translate3d(-2.2%, .7%, 0) rotate(-.5deg) scale(1);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #junk-drawer .fish-swimmer,
  #junk-drawer .fish-tail,
  #junk-drawer .fish-top-fin,
  #junk-drawer .fish-bottom-fin {
    animation: none !important;
  }
}


/* =========================================================
   v22 — MOBILE WIDTH FIX
   Keeps the Caboodle large without letting it become wider
   than the viewport, which can make iOS/in-app browsers look
   cropped or shifted to one side.
   ========================================================= */

#junk-drawer .junk-caboodle-zone {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 820px) {
  #junk-drawer .junk-caboodle-button {
    width: min(680px, 100%) !important;
    max-width: 100% !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 560px) {
  #junk-drawer .junk-caboodle-button {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }
}


/* =========================================================
   v23 — CABOODLE PAGE TITLE + GOLD BOTTOM DIVIDER
   + CALMER, ROOMIER BETTA INTERACTION
   ========================================================= */

/* Match the thin gold dividers used between the other site sections. */
#junk-drawer {
  border-bottom: 1px solid rgba(176, 143, 77, 0.65) !important;
}

/* Give the closed Caboodle section the same title treatment as the
   recipe / turntable-style sections on the site. */
#junk-drawer .junk-caboodle-zone {
  grid-template-rows: auto 1fr;
  gap: clamp(2px, 1vw, 10px);
  padding-top: clamp(30px, 4vw, 48px);
}

#junk-drawer .junk-caboodle-heading {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 16px;
  text-align: center;
  pointer-events: none;
}

#junk-drawer .junk-caboodle-heading h2 {
  margin: 0;
  color: #f3e7d2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 4vw, 2.35rem);
  font-weight: normal;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}

/* The fish was visually filling too much of the bag. Scale the whole
   assembled fish down so it has room to actually travel. */
#junk-drawer .fish-swimmer {
  transform-origin: 61% 59% !important;
  animation: junk-fish-drift-v23 9.4s ease-in-out infinite !important;
}

/* A slower normal swim with more distance but no sudden direction changes. */
@keyframes junk-fish-drift-v23 {
  0% {
    transform: translate3d(-10%, 1.5%, 0) rotate(-.8deg) scale(.82);
  }
  25% {
    transform: translate3d(-3%, -1.5%, 0) rotate(-.15deg) scale(.82);
  }
  52% {
    transform: translate3d(9%, -2.1%, 0) rotate(.75deg) scale(.82);
  }
  76% {
    transform: translate3d(4%, 1.4%, 0) rotate(.2deg) scale(.82);
  }
  100% {
    transform: translate3d(-10%, 1.5%, 0) rotate(-.8deg) scale(.82);
  }
}

/* On tap, instead of "darting," the fish does a gentle curious swim:
   glide away, coast across the bag, bob once, then settle. */
#junk-drawer .fish-swimmer.is-startled {
  animation: junk-fish-curious-swim-v23 2.45s cubic-bezier(.37,.05,.19,.98) both !important;
}

@keyframes junk-fish-curious-swim-v23 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(.82);
  }
  18% {
    transform: translate3d(-8%, -1.2%, 0) rotate(-1.2deg) scale(.82);
  }
  43% {
    transform: translate3d(10%, -2.3%, 0) rotate(.9deg) scale(.82);
  }
  62% {
    transform: translate3d(12%, .4%, 0) rotate(.35deg) scale(.82);
  }
  79% {
    transform: translate3d(3%, 1.5%, 0) rotate(-.25deg) scale(.82);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(.82);
  }
}

/* The fins flutter a little faster while the fish is responding to a tap,
   while the body movement itself stays slow and fluid. */
#junk-drawer .fish-stage.is-startled .fish-tail {
  animation-duration: .62s !important;
}

#junk-drawer .fish-stage.is-startled .fish-top-fin {
  animation-duration: .78s !important;
}

#junk-drawer .fish-stage.is-startled .fish-bottom-fin {
  animation-duration: .72s !important;
}

/* Let the bubbles trail the slower motion instead of popping instantly. */
#junk-drawer .fish-stage.is-startled .fish-bubbles i {
  animation-duration: 1.7s !important;
}

@keyframes junk-fish-bubble-v23 {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.55);
  }
  15% {
    opacity: .82;
  }
  100% {
    opacity: 0;
    transform: translate3d(12px, -58px, 0) scale(1.15);
  }
}

#junk-drawer .fish-stage.is-startled .fish-bubbles i {
  animation-name: junk-fish-bubble-v23 !important;
}

@media (max-width: 820px) {
  #junk-drawer .junk-caboodle-zone {
    padding-top: 28px;
  }

  #junk-drawer .junk-caboodle-heading h2 {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  #junk-drawer .fish-swimmer {
    animation: none !important;
    transform: scale(.82) !important;
  }

  #junk-drawer .fish-swimmer.is-startled {
    transform: translateX(2%) scale(.82) !important;
  }
}


/* =========================================================
   v24 — RANDOMIZED BETTA WANDER
   JS now chooses new waypoints instead of replaying one CSS loop.
   This prevents the end-of-animation jump and lets the fish use
   the upper AND lower halves of the bag.
   ========================================================= */

#junk-drawer .fish-swimmer {
  animation: none !important;
  transform-origin: 61% 59% !important;
  will-change: transform;
}

/* Keep only the fins animated continuously. */
#junk-drawer .fish-tail {
  animation: junk-fish-tail-v21 1.12s ease-in-out infinite alternate !important;
}

#junk-drawer .fish-top-fin {
  animation: junk-fish-top-fin-v21 1.42s ease-in-out infinite alternate !important;
}

#junk-drawer .fish-bottom-fin {
  animation: junk-fish-bottom-fin-v21 1.26s ease-in-out infinite alternate !important;
}

/* Tapping no longer replaces the swimmer's transform with a canned
   keyframe animation. JS glides to two randomized destinations and
   leaves the fish at the final one. */
#junk-drawer .fish-swimmer.is-startled {
  animation: none !important;
}

/* During a tap response, only the fins get a little more energetic. */
#junk-drawer .fish-stage.is-startled .fish-tail {
  animation-duration: .58s !important;
}

#junk-drawer .fish-stage.is-startled .fish-top-fin {
  animation-duration: .72s !important;
}

#junk-drawer .fish-stage.is-startled .fish-bottom-fin {
  animation-duration: .66s !important;
}

/* Slower bubbles to match the fluid glide instead of a "startle dart." */
#junk-drawer .fish-stage.is-startled .fish-bubbles i {
  animation-name: junk-fish-bubble-v23 !important;
  animation-duration: 1.85s !important;
}

@media (prefers-reduced-motion: reduce) {
  #junk-drawer .fish-swimmer {
    animation: none !important;
    transition: none !important;
  }
}


/* =========================================================
   v25 — NATURAL BETTA SWIMMING
   Fixes the "floating sticker" look seen in the screen recording:
   - fish turns to face the direction it is swimming
   - paths curve instead of sliding in straight lines
   - much more of the upper half of the bag is used
   - every route, pause, arc, and speed varies
   - tap does not interrupt or snap the fish anymore
   ========================================================= */

/* JS owns the travel path. Scale/turning live on a separate inner wrapper. */
#junk-drawer .fish-swimmer {
  animation: none !important;
  transform-origin: 61% 59% !important;
  will-change: transform;
}

#junk-drawer .fish-assembly {
  --fish-facing: 1;
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(.66) scaleX(var(--fish-facing));
  transform-origin: 60.5% 58.7%;
  transition: transform .34s ease-in-out;
  will-change: transform;
}

/* The individual full-canvas layers still share the exact same coordinates. */
#junk-drawer .fish-assembly .fish-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Fin roots remain behind the body. */
#junk-drawer .fish-tail,
#junk-drawer .fish-top-fin,
#junk-drawer .fish-bottom-fin {
  z-index: 1 !important;
}

#junk-drawer .fish-body {
  z-index: 2 !important;
}

/* Calm movement at rest. */
#junk-drawer .fish-tail {
  transform-origin: 62.6% 58.3% !important;
  animation: junk-fish-tail-v25 1.18s ease-in-out infinite alternate !important;
}

#junk-drawer .fish-top-fin {
  transform-origin: 60.6% 57.5% !important;
  animation: junk-fish-top-fin-v25 1.48s ease-in-out infinite alternate !important;
}

#junk-drawer .fish-bottom-fin {
  transform-origin: 55.8% 58.8% !important;
  animation: junk-fish-bottom-fin-v25 1.34s ease-in-out infinite alternate !important;
}

@keyframes junk-fish-tail-v25 {
  from { transform: rotate(-3deg) scaleX(.987); }
  to   { transform: rotate(3.1deg) scaleX(1.013); }
}

@keyframes junk-fish-top-fin-v25 {
  from { transform: rotate(-1.7deg) scaleY(.986); }
  to   { transform: rotate(1.9deg) scaleY(1.016); }
}

@keyframes junk-fish-bottom-fin-v25 {
  from { transform: rotate(2deg) scaleY(1.014); }
  to   { transform: rotate(-1.9deg) scaleY(.987); }
}

/* Tap response: fish keeps its current route; only fins perk up + bubbles rise. */
#junk-drawer .fish-stage.is-startled .fish-tail {
  animation-duration: .48s !important;
}

#junk-drawer .fish-stage.is-startled .fish-top-fin {
  animation-duration: .62s !important;
}

#junk-drawer .fish-stage.is-startled .fish-bottom-fin {
  animation-duration: .56s !important;
}

#junk-drawer .fish-stage.is-startled .fish-bubbles i {
  animation-name: junk-fish-bubble-v25 !important;
  animation-duration: 1.55s !important;
}

@keyframes junk-fish-bubble-v25 {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.5);
  }
  16% {
    opacity: .86;
  }
  100% {
    opacity: 0;
    transform: translate3d(10px, -64px, 0) scale(1.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  #junk-drawer .fish-swimmer {
    animation: none !important;
    transition: none !important;
  }

  #junk-drawer .fish-assembly {
    transition: none !important;
  }
}


/* =========================================================
   v26 — TAP-AWARE BETTA
   ========================================================= */

/* Hide the old instruction line completely. */
#junk-drawer .fish-hint {
  display: none !important;
}

/* Bubble origin is now set by JS to the actual tap location. */
#junk-drawer .fish-bubbles i {
  left: var(--bubble-x, 50%) !important;
  top: var(--bubble-y, 58%) !important;
}

#junk-drawer .fish-bubbles i:nth-child(2) {
  left: calc(var(--bubble-x, 50%) + 8px) !important;
  top: calc(var(--bubble-y, 58%) + 3px) !important;
}

#junk-drawer .fish-bubbles i:nth-child(3) {
  left: calc(var(--bubble-x, 50%) - 7px) !important;
  top: calc(var(--bubble-y, 58%) + 7px) !important;
}

#junk-drawer .fish-bubbles i:nth-child(4) {
  left: calc(var(--bubble-x, 50%) + 13px) !important;
  top: calc(var(--bubble-y, 58%) - 3px) !important;
}

/* A small physical flinch makes every tap visibly register immediately,
   while JS simultaneously sends the fish away from the tapped side. */
#junk-drawer .fish-assembly.is-tap-reacting {
  animation: junk-fish-tap-flinch-v26 .58s ease-out 1 !important;
}

@keyframes junk-fish-tap-flinch-v26 {
  0% {
    translate: 0 0;
    filter: brightness(1);
  }
  22% {
    translate: -4px 1px;
    filter: brightness(1.06);
  }
  48% {
    translate: 3px -2px;
    filter: brightness(1.02);
  }
  72% {
    translate: -1px 1px;
    filter: brightness(1);
  }
  100% {
    translate: 0 0;
    filter: brightness(1);
  }
}

/* Give the fish a touch more room so the expanded left/right zones read clearly. */
#junk-drawer .fish-assembly {
  transform: scale(.62) scaleX(var(--fish-facing)) !important;
}

/* More energetic fins during a tap response. */
#junk-drawer .fish-stage.is-startled .fish-tail {
  animation-duration: .42s !important;
}

#junk-drawer .fish-stage.is-startled .fish-top-fin {
  animation-duration: .54s !important;
}

#junk-drawer .fish-stage.is-startled .fish-bottom-fin {
  animation-duration: .49s !important;
}

/* Let tap-position bubbles spread slightly instead of rising as one stack. */
#junk-drawer .fish-stage.is-startled .fish-bubbles i {
  animation-name: junk-fish-bubble-v26 !important;
  animation-duration: 1.55s !important;
}

#junk-drawer .fish-stage.is-startled .fish-bubbles i:nth-child(2) {
  --bubble-drift-x: -8px;
  animation-delay: .07s !important;
}

#junk-drawer .fish-stage.is-startled .fish-bubbles i:nth-child(3) {
  --bubble-drift-x: 13px;
  animation-delay: .13s !important;
}

#junk-drawer .fish-stage.is-startled .fish-bubbles i:nth-child(4) {
  --bubble-drift-x: 5px;
  animation-delay: .19s !important;
}

@keyframes junk-fish-bubble-v26 {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.48);
  }
  14% {
    opacity: .9;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--bubble-drift-x, 8px), -66px, 0) scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  #junk-drawer .fish-assembly.is-tap-reacting {
    animation: none !important;
  }
}


/* =========================================================
   v27 — KEEP THE BETTA INSIDE THE BAG
   A fixed water-window clips only the moving fish, while the
   transparent bag artwork remains completely untouched.
   ========================================================= */

#junk-drawer .fish-water-window {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;

  /*
    Approximate the usable water/body silhouette of the bag.
    The upper half is narrower where the plastic slopes toward the tie.
  */
  clip-path: polygon(
    31% 31%,
    69% 31%,
    79% 38%,
    87% 49%,
    92% 64%,
    94% 87%,
    90% 92%,
    10% 92%,
    6% 87%,
    8% 64%,
    13% 49%,
    21% 38%
  );
  -webkit-clip-path: polygon(
    31% 31%,
    69% 31%,
    79% 38%,
    87% 49%,
    92% 64%,
    94% 87%,
    90% 92%,
    10% 92%,
    6% 87%,
    8% 64%,
    13% 49%,
    21% 38%
  );
}

#junk-drawer .fish-water-window .fish-swimmer {
  z-index: 1;
}

/* Keep the bag artwork above the clipped swimming layer. */
#junk-drawer .fish-bag {
  z-index: 8 !important;
}


/* =========================================================
   v28 — SLIGHTLY BIGGER FISH + MORE LEFT-SIDE SWIMMING
   ========================================================= */

/* A little bigger than v27, but still small enough to travel safely. */
#junk-drawer .fish-assembly {
  transform: scale(.80) scaleX(var(--fish-facing)) !important;
}

/*
  Open up the MIDDLE/LOWER left side of the invisible water window.
  The upper taper stays conservative so the fins cannot poke through
  the plastic near the knot.
*/
#junk-drawer .fish-water-window {
  clip-path: polygon(
    31% 31%,
    69% 31%,
    79% 38%,
    87% 49%,
    92% 64%,
    94% 87%,
    90% 92%,
    8% 92%,
    4.5% 87%,
    5.5% 64%,
    10.5% 49%,
    21% 38%
  ) !important;

  -webkit-clip-path: polygon(
    31% 31%,
    69% 31%,
    79% 38%,
    87% 49%,
    92% 64%,
    94% 87%,
    90% 92%,
    8% 92%,
    4.5% 87%,
    5.5% 64%,
    10.5% 49%,
    21% 38%
  ) !important;
}

/* =========================================================
   PASSED NOTE — IN-PLACE UNFOLD
   The folded PNG opens into the note in the SAME spot.
   ========================================================= */

#junk-drawer .note-card {
  grid-column: 1 / -1;
  width: min(100%, 640px);
  margin: 0 auto;
  text-align: center;
}

/* This is one physical "space" for both the closed and open note. */
#junk-drawer .note-unfold-stage {
  position: relative;
  width: min(100%, 560px);
  height: clamp(285px, 31vw, 330px);
  margin: 0 auto;
  perspective: 1400px;
  transition: height .62s cubic-bezier(.2,.78,.2,1);
}

#junk-drawer .note-card.is-note-open .note-unfold-stage {
  height: 430px;
}

/* ---------- CLOSED NOTE ---------- */
#junk-drawer .folded-note-button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: block;
  width: min(82%, 430px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity .24s ease .18s,
    visibility 0s linear .44s;
}

#junk-drawer .folded-note-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 9px 8px rgba(52, 35, 27, .22));
  transform: rotate(-1.4deg) rotateX(0deg) scale(1);
  transform-origin: 50% 45%;
  backface-visibility: hidden;
  transition:
    transform .46s cubic-bezier(.4,0,.2,1),
    filter .22s ease,
    opacity .24s ease .12s;
  user-select: none;
  -webkit-user-drag: none;
}

#junk-drawer .folded-note-button:hover .folded-note-image {
  transform: rotate(.4deg) translateY(-4px) scale(1.015);
  filter: drop-shadow(0 13px 10px rgba(52, 35, 27, .26));
}

#junk-drawer .folded-note-button:active .folded-note-image {
  transform: rotate(-.4deg) translateY(1px) scale(.985);
}

#junk-drawer .folded-note-button:focus-visible {
  outline: 2px dotted rgba(83, 49, 48, .88);
  outline-offset: 7px;
  border-radius: 8px;
}

/* First part of the illusion: the closed bundle tips backward and collapses. */
#junk-drawer .note-card.is-note-open .folded-note-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .18s ease,
    visibility 0s linear .28s;
}

#junk-drawer .note-card.is-note-open .folded-note-image {
  transform: rotate(-1deg) rotateX(76deg) scale(.76, .58);
  opacity: 0;
  filter: drop-shadow(0 2px 2px rgba(52, 35, 27, .12));
}

/* ---------- THE SAME NOTE UNFOLDING OPEN ---------- */
#junk-drawer .passed-note-open {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(100%, 560px);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Starts as a compact folded packet at the exact center of the PNG. */
  clip-path: inset(35% 10% 35% 10% round 2px);
  transform:
    translate(-50%, -50%)
    rotateX(-64deg)
    rotateZ(-1.1deg)
    scale(.76, .42);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;

  transition:
    transform .62s cubic-bezier(.2,.8,.18,1) .10s,
    clip-path .62s cubic-bezier(.2,.8,.18,1) .10s,
    opacity .18s ease .08s,
    visibility 0s linear .08s;
}

#junk-drawer .note-card.is-note-open .passed-note-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0 0 round 1px);
  transform:
    translate(-50%, -50%)
    rotateX(0deg)
    rotateZ(-1deg)
    scale(1, 1);
  transition:
    transform .68s cubic-bezier(.2,.8,.18,1) .08s,
    clip-path .68s cubic-bezier(.2,.8,.18,1) .08s,
    opacity .22s ease .08s,
    visibility 0s linear 0s;
}

#junk-drawer .passed-note-paper {
  position: relative;
  min-height: 390px;
  height: 390px;
  padding: 54px 32px 24px 58px;
  overflow: hidden;
  border: 1px solid rgba(119, 98, 79, .32);
  background:
    /* faint vertical fold crease */
    linear-gradient(
      90deg,
      transparent 0 49.65%,
      rgba(104, 84, 68, .10) 49.8% 50.1%,
      rgba(255,255,255,.24) 50.2% 50.5%,
      transparent 50.7%
    ),
    /* faint horizontal fold crease */
    linear-gradient(
      180deg,
      transparent 0 49.3%,
      rgba(104, 84, 68, .09) 49.5% 49.8%,
      rgba(255,255,255,.22) 50% 50.3%,
      transparent 50.5%
    ),
    /* red notebook margin */
    linear-gradient(
      90deg,
      transparent 0 42px,
      rgba(213, 116, 132, .34) 42px 44px,
      transparent 44px
    ),
    /* blue notebook lines */
    repeating-linear-gradient(
      180deg,
      transparent 0 30px,
      rgba(98, 138, 172, .24) 30px 31px
    ),
    #f5efe4;
  box-shadow:
    0 12px 22px rgba(46, 30, 22, .24),
    inset 0 0 22px rgba(112, 84, 57, .06);
}

/* A soft moving shadow makes the center fold read while it opens. */
#junk-drawer .passed-note-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 38%, rgba(62,42,30,.10) 50%, transparent 62%);
  opacity: .72;
  transition: opacity .48s ease .24s;
}

#junk-drawer .note-card.is-note-open .passed-note-paper::after {
  opacity: 0;
}

#junk-drawer .passed-note-writing {
  position: relative;
  z-index: 2;
  height: 100%;
  max-height: 312px;
  padding-right: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  color: #3048b6;
  font-family: "Bradley Hand", "Comic Sans MS", cursive;
  font-size: clamp(18px, 2.4vw, 25px);
  line-height: 31px;
  text-align: left;
  opacity: 0;
  transform: translateY(5px);
  scrollbar-width: thin;
  scrollbar-color: rgba(48, 72, 182, .45) rgba(255,255,255,.14);
  transition:
    opacity .28s ease,
    transform .28s ease;
}

#junk-drawer .note-card.is-note-open .passed-note-writing {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .48s;
}

#junk-drawer .passed-note-writing p {
  margin: 0;
}

#junk-drawer .passed-note-writing p + p {
  margin-top: 18px;
}

#junk-drawer .passed-note-writing::-webkit-scrollbar {
  width: 8px;
}

#junk-drawer .passed-note-writing::-webkit-scrollbar-track {
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}

#junk-drawer .passed-note-writing::-webkit-scrollbar-thumb {
  background: rgba(48, 72, 182, .42);
  border-radius: 999px;
}

#junk-drawer .passed-note-writing::-webkit-scrollbar-thumb:hover {
  background: rgba(48, 72, 182, .58);
}

#junk-drawer .passed-note-close {
  position: absolute;
  top: 10px;
  right: 13px;
  z-index: 5;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #59493f;
  font: 24px/30px Georgia, serif;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  transition: opacity .2s ease;
}

#junk-drawer .note-card.is-note-open .passed-note-close {
  opacity: 1;
  transition-delay: .48s;
}
/* Little instruction underneath the folded note */
#junk-drawer .folded-note-hint {
  margin-top: 5px;
  text-align: center;
  font-family: "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 13px;
  line-height: 1.2;
  color: #8b6670;
  opacity: .8;
  pointer-events: none;
  user-select: none;
  transition: opacity .2s ease;
}

/* Hide the instruction while the note is unfolded */
#junk-drawer .note-card.is-note-open .folded-note-hint {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 820px) {
  #junk-drawer .note-card {
    display: block !important;
    width: min(100%, 520px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #junk-drawer .note-unfold-stage {
    width: min(100%, 520px);
  }
}

@media (max-width: 560px) {
  #junk-drawer .note-unfold-stage {
    height: 285px;
  }

  #junk-drawer .note-card.is-note-open .note-unfold-stage {
    height: 388px;
  }

  #junk-drawer .folded-note-button {
    width: min(92%, 390px);
  }

  #junk-drawer .passed-note-open {
    width: min(96%, 430px);
  }

  #junk-drawer .passed-note-paper {
    min-height: 348px;
    height: 348px;
    padding: 50px 20px 22px 48px;
  }

  #junk-drawer .passed-note-writing {
    max-height: 276px;
    padding-right: 10px;
    font-size: 18px;
    line-height: 31px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #junk-drawer .note-unfold-stage,
  #junk-drawer .folded-note-button,
  #junk-drawer .folded-note-image,
  #junk-drawer .passed-note-open,
  #junk-drawer .passed-note-writing,
  #junk-drawer .passed-note-close,
  #junk-drawer .passed-note-paper::after {
    transition: none !important;
  }
}