/* ==========================================================
   rooms.css — everything the dream grew in its second night:
   the new things floating in the sky, a world of its own behind
   every room, the games, the guitar, the cards, the wish jar,
   the strange modes (lucid, void). memory.css is the room itself.
   Loaded after dream.css and built on its tokens.
   ========================================================== */

/* ---------- layers ---------- */
.fx {
  position: fixed;
  inset: 0;
  z-index: 45;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wish-label {
  position: fixed;
  z-index: 46;
  max-width: 260px;
  padding: 6px 12px 7px;
  border-radius: 10px;
  font: 600 1.2rem/1.2 var(--hand);
  color: var(--ink);
  background: rgb(255 249 240 / 0.92);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
  translate: -50% calc(-100% - 16px);
  pointer-events: none;
}

.dream-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 60;
  max-width: min(92vw, 520px);
  padding: 10px 18px 11px;
  border-radius: 14px;
  font: 600 1.3rem/1.25 var(--hand);
  text-align: center;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.45);
  translate: -50% 30px;
  rotate: -1deg;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, translate 0.6s var(--spring);
}

.dream-toast.is-in {
  opacity: 1;
  translate: -50% 0;
  pointer-events: auto;
}

.dream-toast .hand-link { color: #7a3f6a; font-size: 1.3rem; }
.has-walkman .dream-toast { bottom: 170px; }

/* ---------- corner ---------- */
.keys-btn {
  width: 28px;
  justify-content: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
  padding: 2px 0 4px;
}

.keys-btn::after { display: none; }

#lucidBtn[aria-pressed="true"] {
  color: #fff;
  text-shadow: 0 0 10px #ff9ef0, 0 0 22px #8fe8ff;
  animation: lucid-text 3s linear infinite;
}

@keyframes lucid-text { to { filter: hue-rotate(360deg); } }

/* ---------- the scene's new lines ---------- */
.dream-clock {
  margin-top: 10px;
  font: 500 1.05rem/1.3 var(--hand);
  color: rgb(255 249 240 / 0.55);
  letter-spacing: 0.01em;
}

.t-name span.is-playable,
.t-rest.is-playable {
  pointer-events: auto;
  cursor: pointer;
  transition: translate 0.5s var(--spring), color 0.3s ease;
}

.t-name span.is-playable:hover { translate: 0 -0.1em; }

.is-rung { animation: rung 0.9s var(--ease-out) !important; }

@keyframes rung {
  0%   { translate: 0 0; text-shadow: 0 0 0 transparent; }
  25%  { translate: 0 -0.22em; color: #fff; text-shadow: 0 0 30px rgb(var(--glow)), 0 0 70px rgb(var(--accent)); }
  100% { translate: 0 0; }
}

/* ---------- new things in the sky ---------- */
.mini-guitar svg {
  display: block;
  width: 92px;
  height: 116px;
  filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.45));
}

.obj-guitar:hover .mini-guitar svg { animation: strum-shake 0.35s ease-in-out 2; }

@keyframes strum-shake {
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

.mini-tarot { perspective: 500px; }

.mt-card {
  position: relative;
  display: block;
  width: 78px;
  height: 120px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgb(255 236 180 / 0.95) 0 10px, transparent 11px),
    radial-gradient(circle at 50% 42%, transparent 0 20px, rgb(255 236 180 / 0.5) 21px 22px, transparent 23px),
    repeating-conic-gradient(from 0deg at 50% 42%, rgb(255 236 180 / 0.18) 0 6deg, transparent 6deg 18deg),
    linear-gradient(160deg, #3b1d5c, #170b2a);
  box-shadow: inset 0 0 0 3px #1a0d2e, inset 0 0 0 5px rgb(255 220 150 / 0.7), 0 14px 26px rgb(0 0 0 / 0.5);
  animation: card-turn 9s ease-in-out infinite;
  transform-style: preserve-3d;
}

.mt-card i {
  position: absolute;
  inset: auto 0 12px;
  height: 14px;
  background: radial-gradient(circle, rgb(255 236 180 / 0.9) 0 2px, transparent 3px) center / 14px 14px repeat-x;
}

@keyframes card-turn {
  0%, 100% { transform: rotateY(-18deg); }
  50%      { transform: rotateY(18deg); }
}

.handheld {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  width: 92px;
  height: 128px;
  padding: 10px 10px 12px;
  border-radius: 12px 12px 26px 12px;
  background: linear-gradient(160deg, #eee7da, #cfc5b2);
  box-shadow: inset -3px -4px 0 rgb(0 0 0 / 0.12), 0 14px 26px rgb(0 0 0 / 0.5);
}

.hh-screen {
  position: relative;
  height: 56px;
  border-radius: 4px 4px 10px 4px;
  overflow: hidden;
  background: linear-gradient(180deg, rgb(var(--sky)), rgb(var(--horizon)));
  box-shadow: inset 0 0 0 4px #5b5566, inset 0 0 12px rgb(0 0 0 / 0.6);
}

.hh-star {
  position: absolute;
  left: 30px;
  top: 4px;
  width: 7px;
  height: 7px;
  background: #fff6c8;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: hh-fall 1.8s linear infinite;
}

.hh-boat {
  position: absolute;
  left: 26px;
  bottom: 8px;
  width: 16px;
  height: 7px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  animation: hh-boat 1.8s ease-in-out infinite alternate;
}

@keyframes hh-fall { to { translate: 0 44px; } }
@keyframes hh-boat { from { translate: -10px 0; } to { translate: 12px 0; } }

.hh-pad {
  position: absolute;
  left: 14px;
  bottom: 22px;
  width: 22px;
  height: 22px;
  background:
    linear-gradient(#3a3640, #3a3640) center / 22px 7px no-repeat,
    linear-gradient(#3a3640, #3a3640) center / 7px 22px no-repeat;
}

.hh-ab {
  position: absolute;
  right: 12px;
  bottom: 22px;
  display: flex;
  gap: 5px;
  rotate: -25deg;
}

.hh-ab i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(var(--accent));
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.25);
}

.jar {
  position: relative;
  display: block;
  width: 78px;
  height: 104px;
}

.jar-lid {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(180deg, #d8b27a, #9c7440);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.2);
}

.jar-glass {
  position: absolute;
  inset: 12px 4px 0;
  border-radius: 18px 18px 22px 22px;
  background:
    linear-gradient(100deg, rgb(255 255 255 / 0.4) 0 8%, transparent 14% 80%, rgb(255 255 255 / 0.15) 86%),
    radial-gradient(circle at 50% 70%, rgb(var(--glow) / 0.5), rgb(var(--accent) / 0.12) 70%);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.45), 0 0 40px rgb(var(--glow) / 0.35), 0 14px 22px rgb(0 0 0 / 0.35);
}

.jar-glass i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fffbe6;
  box-shadow: 0 0 10px 3px rgb(255 240 190 / 0.9);
  animation: firefly 3.2s ease-in-out infinite alternate;
}

.jar-glass i:nth-child(1) { left: 20%; top: 50%; }
.jar-glass i:nth-child(2) { left: 60%; top: 30%; animation-delay: -1s; }
.jar-glass i:nth-child(3) { left: 44%; top: 70%; animation-delay: -2s; }
.jar-glass i:nth-child(4) { left: 72%; top: 62%; animation-delay: -0.4s; }
.jar-glass i:nth-child(5) { left: 30%; top: 22%; animation-delay: -1.6s; }

@keyframes firefly {
  from { translate: 0 0; opacity: 0.4; }
  to   { translate: 6px -10px; opacity: 1; }
}

/* ==========================================================
   GAMES
   ========================================================== */
.carts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 132px;
  padding: 10px 10px 8px;
  border-radius: 8px 8px 4px 4px;
  color: var(--ink);
  background: linear-gradient(180deg, #d9d4ca, #b9b2a4);
  box-shadow: inset 0 -6px 0 rgb(0 0 0 / 0.15), 0 10px 20px rgb(0 0 0 / 0.4);
  transition: translate 0.4s var(--spring), box-shadow 0.3s ease;
}

.cart:hover { translate: 0 -4px; }

.cart[aria-selected="true"] {
  translate: 0 -8px;
  box-shadow: inset 0 -6px 0 rgb(0 0 0 / 0.15), 0 0 0 3px #ff3cc8, 0 0 30px rgb(255 60 200 / 0.6);
}

.cart-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 8px 6px;
  border-radius: 4px;
  background: #fbf6ec;
}

.cart-art {
  width: 100%;
  height: 50px;
  border-radius: 3px;
  background-size: cover;
}

.cart-catcher .cart-art { background: radial-gradient(circle at 70% 30%, #fff6c8 0 5%, transparent 6%), radial-gradient(circle at 30% 20%, #fff6c8 0 4%, transparent 5%), linear-gradient(180deg, #14234a, #3a5a8c 70%, #0d1a33 70%); }
.cart-memory .cart-art { background: conic-gradient(#f29fc0 0 25%, #9bb3d6 0 50%, #f0b43a 0 75%, #3f8f86 0); background-size: 25px 25px; }
.cart-quiz .cart-art { background: linear-gradient(45deg, #e0314a 25%, #5a4b82 0 50%, #27b6e6 0 75%, #f2c14b 0) 0 0 / 16px 16px; filter: blur(0.6px); }
.cart-lanterns .cart-art { background: radial-gradient(circle, #ffcf6b 0 30%, transparent 32%) 0 0 / 16px 16px, #2a1a3a; }

.cart-name { margin-top: 4px; font: 700 1.2rem/1 var(--hand); }
.cart-best { min-height: 1em; font: 600 0.95rem/1 var(--hand); color: #5a4d5e; }

.arcade {
  width: 100%;
  max-width: 820px;
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(180deg, #2b2536, #17131f);
  box-shadow: inset 0 0 0 2px #3f3650, 0 30px 70px rgb(0 0 0 / 0.6), 0 0 60px rgb(255 60 200 / 0.18);
}

.arcade-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 6px 10px;
  font: 600 1.3rem/1 var(--hand);
  color: #ffd1f5;
  text-shadow: 0 0 8px #ff3cc8;
}

.arcade-stage {
  position: relative;
  min-height: 380px;
  border-radius: 14px;
  overflow: hidden;
  background: #0c0a12;
  box-shadow: inset 0 0 0 3px #0a0810, inset 0 0 40px rgb(0 0 0 / 0.8);
}

.arcade-how {
  margin-top: 10px;
  font: 500 1.1rem/1.3 var(--hand);
  text-align: center;
  color: rgb(255 249 240 / 0.7);
}

.go-big { font: italic 400 2.2rem/1.1 var(--serif); color: #fff; }

/* star catcher */
.game-canvas-wrap { position: relative; height: min(62vh, 460px); }
.game-canvas { display: block; width: 100%; height: 100%; cursor: none; touch-action: none; outline: none; }

.game-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 600 1.35rem/1.3 var(--hand);
  text-align: center;
  color: rgb(255 249 240 / 0.9);
  background: rgb(8 6 14 / 0.55);
  backdrop-filter: blur(3px);
}

.game-go { margin-top: 8px; }

/* cover memory */
.memory {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
  padding: 16px;
  perspective: 900px;
}

.mem-card { aspect-ratio: 1; padding: 0; }

.mem-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s var(--spring);
}

.mem-card.is-up .mem-inner { transform: rotateY(180deg); }

.mem-back,
.mem-face {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  backface-visibility: hidden;
  overflow: hidden;
}

.mem-back {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--shell) 60%, #1a1424), #1a1424);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.18);
}

.mem-back i {
  width: 40%;
  height: 40%;
  background: rgb(255 249 240 / 0.5);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.mem-card:hover:not(.is-up) .mem-back { box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.5), 0 0 16px rgb(var(--glow) / 0.5); }
.mem-face { transform: rotateY(180deg); }
.mem-face img { width: 100%; height: 100%; object-fit: cover; }
.mem-card.is-matched .mem-face { box-shadow: 0 0 0 3px #7dffb2, 0 0 22px #7dffb2; animation: matched 0.6s var(--spring); }

@keyframes matched { 50% { scale: 1.1; } }

.memory.is-won .mem-card { animation: wave 1s ease-in-out calc(var(--i) * 0.04s); }

@keyframes wave { 50% { translate: 0 -12px; } }

.memory-after {
  padding: 0 16px 18px;
  font: 600 1.3rem/1.3 var(--hand);
  text-align: center;
  color: rgb(255 249 240 / 0.9);
}

.memory-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 10px; }

/* blurry covers */
.quiz {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px;
  padding: 22px;
}

.quiz-frame {
  position: relative;
  width: min(300px, 70vw);
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 4px #0a0810, 0 0 40px rgb(var(--glow) / 0.3);
}

.quiz-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

.quiz-timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: rgb(0 0 0 / 0.5);
}

.quiz-timer i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff3cc8, #ffd319);
  transform-origin: 0 50%;
}

.quiz-side { display: flex; flex-direction: column; gap: 10px; width: min(320px, 100%); }
.quiz-round { font: 600 1.2rem/1 var(--hand); color: #ffd1f5; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; }

.quiz-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 9px 14px;
  border-radius: 10px;
  text-align: left;
  color: #fff;
  background: rgb(255 255 255 / 0.07);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.15);
  transition: background-color 0.2s ease, translate 0.3s var(--spring);
}

.quiz-opt:hover:not(:disabled) { background: rgb(255 255 255 / 0.14); translate: 4px 0; }
.qo-title { font: italic 400 1.1rem/1.2 var(--serif); }
.qo-artist { font: 500 1rem/1.2 var(--hand); opacity: 0.7; }
.quiz-opt.is-right { background: rgb(125 255 178 / 0.25); box-shadow: inset 0 0 0 2px #7dffb2; }
.quiz-opt.is-wrong { background: rgb(255 80 100 / 0.25); box-shadow: inset 0 0 0 2px #ff5064; animation: nope 0.4s ease; }

@keyframes nope { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }

.quiz-said { min-height: 1.4em; font: 600 1.3rem/1.2 var(--hand); color: rgb(255 249 240 / 0.9); }

/* lanterns */
.lanterns { padding: 20px 16px 16px; }

.lantern-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px 10px;
  max-width: 380px;
  margin: 0 auto;
}

.lantern {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 68px;
  padding: 0;
  transform-origin: 50% 0;
  animation: lantern-sway 4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.37s);
}

@keyframes lantern-sway { from { rotate: calc(var(--sway) - 2deg); } to { rotate: calc(var(--sway) + 2deg); } }

.l-string { width: 1px; height: 12px; background: rgb(255 249 240 / 0.4); }

.l-body {
  position: relative;
  width: 40px;
  height: 48px;
  border-radius: 45% 45% 40% 40%;
  background: repeating-linear-gradient(90deg, #3a2a3e 0 5px, #33243a 5px 8px);
  box-shadow: inset 0 0 0 2px #241a2a;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.l-body::before,
.l-body::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 5px;
  border-radius: 2px;
  background: #1a1220;
}

.l-body::before { top: -2px; }
.l-body::after { bottom: -2px; }

.lantern.is-lit .l-body {
  background: repeating-linear-gradient(90deg, #ffcf6b 0 5px, #ffb347 5px 8px);
  box-shadow: inset 0 0 12px #fff2c4, 0 0 22px 6px rgb(255 190 90 / 0.55);
}

.lantern.is-touched .l-body { animation: bump 0.4s var(--spring); }

@keyframes bump { 50% { scale: 1.15; } }

.lantern-grid.is-free .lantern { animation: float-away 3s ease-in calc(var(--i) * 0.05s) forwards; }

@keyframes float-away {
  to { translate: 0 -120vh; opacity: 0; rotate: 6deg; }
}

.lantern-foot {
  margin-top: 14px;
  font: 600 1.25rem/1.3 var(--hand);
  text-align: center;
  color: rgb(255 249 240 / 0.85);
}

.lantern-hint { opacity: 0.7; font-size: 1.1rem; }
.lantern-foot .send-btn { margin-top: 10px; }

/* ==========================================================
   GUITAR
   ========================================================== */
.guitar-rig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 900px;
}

.chords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.chord {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 78px;
  padding: 8px 6px 10px;
  border-radius: 10px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.4);
  transition: translate 0.35s var(--spring), box-shadow 0.3s ease;
}

.chord:hover { translate: 0 -3px; }
.chord[aria-pressed="true"] { translate: 0 -6px; box-shadow: 0 0 0 3px rgb(var(--accent)), 0 0 26px rgb(var(--glow) / 0.6); }
.chord-name { font: italic 600 1.15rem/1 var(--serif); }

.chord-grid {
  position: relative;
  width: 50px;
  height: 58px;
  margin-top: 8px;
  background:
    linear-gradient(90deg, #2b2233 1px, transparent 1px) 0 0 / 10px 100%,
    linear-gradient(#2b2233 1px, transparent 1px) 0 0 / 100% 14.5px;
  border-top: 3px solid #2b2233;
  width: 51px;
}

.chord-grid i {
  position: absolute;
  top: -16px;
  left: calc(var(--s) * 10px - 4px);
  font: 700 9px/1 system-ui, sans-serif;
  font-style: normal;
  color: #6b5d6e;
}

.chord-grid b {
  position: absolute;
  left: calc(var(--s) * 10px - 4px);
  top: calc((var(--f) - 1) * 14.5px + 3px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7a3f6a;
}

.c-fr {
  position: absolute;
  left: -13px;
  top: 2px;
  font: 600 8px/1 system-ui, sans-serif;
  font-style: normal;
  color: #7a3f6a;
}

.chord kbd {
  position: absolute;
  top: 4px;
  right: 6px;
  font: 600 0.8rem/1 var(--hand);
  color: #9a8c9c;
}

.neck {
  position: relative;
  width: 100%;
  height: clamp(220px, 34vh, 320px);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 78% 50%, rgb(0 0 0 / 0.25), transparent 30%),
    repeating-linear-gradient(95deg, rgb(255 255 255 / 0.03) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, #c98a4f, #a8683a 50%, #8a5230);
  box-shadow: inset 0 0 0 6px #5b3520, inset 0 0 40px rgb(0 0 0 / 0.4), 0 30px 60px rgb(0 0 0 / 0.55);
}

.guitar-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }

.now-chord {
  position: absolute;
  left: 14px;
  bottom: 8px;
  font: italic 400 2.2rem/1 var(--serif);
  color: rgb(255 245 225 / 0.8);
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.5);
  pointer-events: none;
}

.guitar-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }

.pill-btn {
  padding: 8px 16px 9px;
  border-radius: 999px;
  font: 700 1.2rem/1 var(--hand);
  color: rgb(255 249 240 / 0.9);
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.25);
  transition: background-color 0.2s ease;
}

.pill-btn:hover { background: rgb(255 255 255 / 0.16); }
.pill-btn[aria-pressed="true"] { color: var(--ink); background: rgb(var(--glow)); }
.send-btn[aria-pressed="true"] { animation: breathe 1.6s ease-in-out infinite; }

/* ==========================================================
   FORTUNE
   ========================================================== */
.oracle-table {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 330px;
  perspective: 1200px;
}

.tarot-pile { position: relative; width: 150px; height: 240px; }

.pile-card {
  position: absolute;
  inset: 0;
  animation: riffle 1.3s ease-in-out both;
  animation-delay: calc(var(--i) * 0.03s);
}

@keyframes riffle {
  0%   { transform: none; }
  40%  { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); }
  100% { transform: none; }
}

.tarot-back {
  display: block;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 236 180 / 0.9) 0 8px, transparent 9px),
    radial-gradient(circle at 50% 50%, transparent 0 26px, rgb(255 236 180 / 0.5) 27px 28px, transparent 29px),
    repeating-conic-gradient(from 0deg at 50% 50%, rgb(255 236 180 / 0.16) 0 5deg, transparent 5deg 15deg),
    linear-gradient(160deg, #3b1d5c, #170b2a);
  box-shadow: inset 0 0 0 4px #1a0d2e, inset 0 0 0 6px rgb(255 220 150 / 0.75), 0 16px 30px rgb(0 0 0 / 0.55);
}

.tarot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 3vw, 36px);
}

.tarot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
  animation: deal 0.8s var(--ease-out) both;
  animation-delay: calc(var(--i) * 0.18s);
}

@keyframes deal {
  from { opacity: 0; transform: translateY(-80px) rotate(-12deg) scale(0.8); }
}

.tarot-inner {
  position: relative;
  display: block;
  width: 160px;
  height: 250px;
  transform-style: preserve-3d;
  transition: transform 1s var(--spring);
}

.tarot:hover:not(.is-turned) .tarot-inner { transform: translateY(-8px) rotateY(-10deg); }
.tarot.is-turned .tarot-inner { transform: rotateY(180deg); }

.tarot-inner > .tarot-back,
.tarot-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.tarot-face {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  transform: rotateY(180deg);
  box-shadow: inset 0 0 0 4px #f4e6c4, inset 0 0 0 6px #6b4a2e, 0 16px 40px rgb(0 0 0 / 0.55), 0 0 40px rgb(var(--glow) / 0.35);
}

.tarot-face canvas { display: block; width: 100%; height: 100%; }

.tarot-num,
.tarot-name {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff8e6;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.8);
}

.tarot-num { top: 12px; font: 600 1rem/1 var(--serif); letter-spacing: 0.1em; }
.tarot-name { bottom: 14px; font: italic 400 1.15rem/1 var(--serif); }
.tarot-place { font: 600 1.25rem/1 var(--hand); color: rgb(255 249 240 / 0.8); }

.reading {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 620px;
}

.reading-line {
  padding: 16px 20px;
  border-radius: 6px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 14px 30px rgb(0 0 0 / 0.4);
  rotate: calc((var(--i) - 1) * 0.8deg);
  animation: ink 0.9s var(--ease-out) both;
}

.reading-line .tuned { margin-top: 8px; color: #6b3d6a; background: rgb(107 61 106 / 0.08); box-shadow: inset 0 0 0 1px rgb(107 61 106 / 0.3); }
.reading-head { font: 700 1.35rem/1.1 var(--hand); color: #6b3d6a; }
.reading-text { margin-top: 4px; font: 400 1.05rem/1.5 var(--pencil); }

/* ==========================================================
   WISHES
   ========================================================== */
.wish-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 620px;
}

.wish-form input {
  flex: 1 1 280px;
  height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font: 600 1.35rem/1 var(--hand);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.4), inset 0 0 0 2px rgb(var(--glow) / 0.4);
}

.wish-form input:focus { outline: none; box-shadow: 0 10px 30px rgb(0 0 0 / 0.4), 0 0 0 3px rgb(var(--glow)); }

.wish-words {
  position: fixed;
  z-index: 47;
  font: 600 1.35rem/1 var(--hand);
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 0 12px rgb(var(--glow));
  translate: 0 -50%;
  pointer-events: none;
  animation: fold-up 0.9s cubic-bezier(0.6, 0, 0.3, 1) forwards;
}

@keyframes fold-up {
  40%  { letter-spacing: -0.05em; filter: blur(0); }
  100% { letter-spacing: -0.6em; scale: 0.1; opacity: 0; filter: blur(6px); translate: 40px -50%; }
}

.sky-map {
  position: relative;
  width: 100%;
  max-width: 900px;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 100%, rgb(var(--glow) / 0.08), transparent 60%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}

.constellation { display: block; width: 100%; height: auto; overflow: visible; }

.wish-line {
  fill: none;
  stroke: rgb(var(--glow) / 0.35);
  stroke-width: 1.2;
  stroke-dasharray: 3 5;
  animation: dash 30s linear infinite;
}

@keyframes dash { to { stroke-dashoffset: -400; } }

.wish-star { cursor: pointer; outline: none; }
.wish-halo { fill: rgb(var(--glow) / 0.18); animation: halo 3s ease-in-out infinite alternate; animation-delay: var(--d); }
.wish-core { fill: #fffbe8; filter: drop-shadow(0 0 6px rgb(var(--glow))); transition: transform 0.3s var(--spring); transform-box: fill-box; transform-origin: center; }
.wish-star:hover .wish-core,
.wish-star:focus-visible .wish-core { transform: scale(1.6); }

@keyframes halo { to { fill: rgb(var(--glow) / 0.4); } }

.wish-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 600 1.3rem/1 var(--hand);
  color: rgb(255 249 240 / 0.5);
}

.wish-said {
  min-height: 1.6em;
  max-width: 34ch;
  font: italic 400 1.4rem/1.3 var(--serif);
  text-align: center;
  color: rgb(255 249 240 / 0.95);
  text-shadow: 0 0 20px rgb(var(--glow) / 0.6);
}

.wish-said.is-new { animation: ink 0.8s var(--ease-out); }

/* ==========================================================
   THE KEYS
   ========================================================== */
.keys-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  font: 400 1rem/1.35 var(--pencil);
}

.keys-list dt { font-weight: 600; white-space: nowrap; }

.keys-list kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px 2px;
  border-radius: 5px;
  font: 600 0.9rem/1.3 system-ui, sans-serif;
  text-align: center;
  background: #fff;
  box-shadow: 0 2px 0 #cbbfae, inset 0 0 0 1px #d8cdbd;
}

/* ==========================================================
   STRANGE MODES
   ========================================================== */
html.is-lucid .scene { animation: lucid-hue 16s linear infinite; }
html.is-lucid .t-name span { animation: lucid-letter 2.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.5s); }
html.is-lucid .obj { animation-duration: calc(var(--bob, 7s) * 0.35); }
html.is-lucid .jellyish,
html.is-lucid .life { filter: hue-rotate(120deg) saturate(1.6); }

@keyframes lucid-hue { to { filter: hue-rotate(360deg); } }

@keyframes lucid-letter {
  from { transform: translateY(0.08em) rotate(-8deg) scale(0.92); }
  to   { transform: translateY(-0.18em) rotate(8deg) scale(1.12); }
}

/* "void": everything falls into the middle, then back out */
html.is-voiding body::after {
  content: '';
  position: fixed;
  left: 50%;
  top: 42%;
  z-index: 44;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  translate: -50% -50%;
  background: #000;
  box-shadow: 0 0 0 3px rgb(var(--glow) / 0.8), 0 0 60px 20px rgb(var(--accent) / 0.8);
  animation: void-hole 2s ease-in-out both;
}

@keyframes void-hole {
  0%   { scale: 0; }
  45%  { scale: 6; }
  55%  { scale: 7; }
  70%  { scale: 0; }
  100% { scale: 0; }
}

/* ==========================================================
   SMALL SCREENS, LESS MOTION
   ========================================================== */
@media (max-width: 760px), (max-height: 540px) {
  .mini-guitar svg { width: 76px; height: 96px; }
  .mt-card { width: 66px; height: 102px; }
  .handheld { width: 80px; height: 112px; }
  .hh-screen { height: 46px; }
  .jar { width: 66px; height: 90px; }
  .wish-label { display: none; }
}

@media (max-width: 560px) {
  .corner-right .long { display: none; }
  .keys-btn { display: none; }
  .dream-clock { max-width: 30ch; margin-inline: auto; }
  .tarot-inner { width: 104px; height: 163px; }
  .tarot-name { font-size: 0.85rem; bottom: 8px; }
  .tarot-num { font-size: 0.8rem; top: 8px; }
  .memory { gap: 7px; padding: 10px; }
  .arcade { padding: 10px; border-radius: 16px; }
  .cart { width: 100px; }
  .chord { width: 68px; }
  .lantern { height: 58px; }
  .l-body { width: 34px; height: 40px; }
}

.reduce-motion .fx { display: none; }

.view-games .view-lede,
.view-games .view-title { position: relative; }
.view-games .view-lede { padding: 4px 14px; border-radius: 12px; background: rgb(13 2 33 / 0.55); }