/* ============================================
   CLOUD KINGDOM — Level 4 Styles
   Memory match, sound match, fragment assembly
   ============================================ */

/* ── Nimbus name colour ── */
.name-nimbus {
  color: #b4d8f0 !important;
  text-shadow: 0 0 8px rgba(180, 216, 240, 0.6);
}

.name-witch {
  color: #9a5abf !important;
  text-shadow: 0 0 8px rgba(154, 90, 191, 0.6);
}

/* ══════════════════════════════════════════
   ISLAND HUD (floating island navigation)
   ══════════════════════════════════════════ */

.cloud-island-hud {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(1rem, 4vw, 2.5rem);
  z-index: 15;
  pointer-events: none;
}

.island-icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.island-icon-wrapper:hover {
  transform: scale(1.1);
}

.island-icon {
  width: clamp(40px, 8vw, 64px);
  height: clamp(40px, 8vw, 64px);
  image-rendering: pixelated;
  transition: filter 0.5s ease, opacity 0.5s ease;
}

.island-icon.dimmed {
  filter: grayscale(1) brightness(0.4);
  opacity: 0.5;
}

.island-complete .island-icon {
  filter: none;
  opacity: 1;
  animation: island-glow 2s ease-in-out infinite;
}

.island-label {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.3rem, 0.8vw, 0.45rem);
  color: var(--text-light, #eae4d4);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

@keyframes island-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255,230,150,0.3)); }
  50% { filter: drop-shadow(0 0 12px rgba(255,230,150,0.7)); }
}

/* ══════════════════════════════════════════
   SWOOP TRANSITION
   ══════════════════════════════════════════ */

.swoop-silhouette {
  position: absolute;
  width: 80px;
  height: auto;
  top: 40%;
  left: -100px;
  z-index: 50;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px rgba(255,230,150,0.5));
  opacity: 0;
}

.swoop-silhouette.swoop-fly {
  animation: swoop-across 1.2s ease-in-out forwards;
}

@keyframes swoop-across {
  0%   { left: -100px; top: 50%; opacity: 0; transform: rotate(-10deg); }
  15%  { opacity: 1; }
  50%  { top: 30%; transform: rotate(5deg); }
  85%  { opacity: 1; }
  100% { left: calc(100% + 100px); top: 45%; opacity: 0; transform: rotate(-5deg); }
}

.swoop-cloud {
  position: absolute;
  width: 60px;
  height: 30px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.6) 0%, transparent 70%);
  border-radius: 50%;
  left: 110%;
  z-index: 49;
  animation: cloud-swoosh 1s ease-out forwards;
}

@keyframes cloud-swoosh {
  0%   { left: 110%; opacity: 0.8; }
  100% { left: -20%; opacity: 0; }
}

/* ══════════════════════════════════════════
   MEMORY MATCH SCREEN
   ══════════════════════════════════════════ */

#screen-cloud-memory {
  display: flex;
  align-items: center;
  justify-content: center;
}

#screen-cloud-memory .scene-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.cloud-memory-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2% 3%;
}

/* Pairs tracker chip — small gold-framed plaque echoing the dialogue frame */
.cloud-memory-tracker {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.4rem, 1.2vw, 0.6rem);
  color: var(--text-light, #eae4d4);
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  margin-bottom: 1%;
  z-index: 10;
  padding: 0.7em 1.3em;
  background: rgba(12, 16, 22, 0.88);
  border: 2px solid #c5952e;
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px rgba(8, 10, 16, 0.8),
    inset 0 0 0 2px #8a6518,
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 0 8px rgba(160, 120, 40, 0.15);
}

.cloud-memory-tracker .tracker-icon {
  font-size: 1.2em;
}

/* ── Card Grid ── */

/* Card table — dark gold-framed panel so the grid reads as an in-world object */
.cloud-memory-grid {
  display: grid;
  gap: clamp(4px, 0.8vw, 8px);
  width: 90%;
  max-width: 560px;
  margin: 0 auto;
  perspective: 800px;
  padding: clamp(6px, 1.2vw, 12px);
  background: rgba(12, 16, 22, 0.88);
  border: 3px solid #c5952e;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(8, 10, 16, 0.8),
    inset 0 0 0 2px #8a6518,
    inset 0 0 18px rgba(120, 160, 220, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 0 12px rgba(160, 120, 40, 0.15),
    0 6px 18px rgba(0, 0, 0, 0.45);
}

/* ── Card ── */

.memory-card {
  position: relative;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  perspective: 600px;
  -webkit-tap-highlight-color: transparent;
}

/* Idle-hint attention flash (Level 4 Tier-2 hint): pulses an unmatched card to
   draw Eva's eye without revealing its face or touching the flip state machine. */
.memory-card.hint-flash {
  animation: card-hint-flash 0.6s ease-in-out 2;
  z-index: 5;
}

@keyframes card-hint-flash {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 235, 130, 0); }
  50%      { transform: scale(1.06); box-shadow: 0 0 18px 6px rgba(255, 235, 130, 0.9); }
}

.memory-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

.memory-card.flipped .memory-card-inner,
.memory-card.matched .memory-card-inner {
  transform: rotateY(180deg);
}

.memory-card-front,
.memory-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: clamp(3px, 0.5vw, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Card back (face-down) */
.memory-card-front {
  background: linear-gradient(135deg, #4a3a6a 0%, #2a1a4a 100%);
  border: 2px solid rgba(180, 216, 240, 0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
}

.card-back-icon {
  font-size: clamp(1rem, 3vw, 1.8rem);
  color: rgba(180, 216, 240, 0.4);
}

/* Pixel-art card icons (cloud on the backs, note on the sound cards) */
.card-back-icon-img {
  width: clamp(22px, 4.5vw, 38px);
  height: auto;
  image-rendering: pixelated;
  opacity: 0.65;
}

/* Card front (face-up) */
.memory-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #f8f0ff 0%, #e8d8f4 100%);
  border: 2px solid rgba(200, 180, 230, 0.5);
}

.memory-card-back img {
  width: 85%;
  height: 85%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* ── Theme Variations ── */

.theme-pink .memory-card-front {
  background: linear-gradient(135deg, #6a4a5a 0%, #4a2a3a 100%);
  border-color: rgba(240, 180, 200, 0.3);
}

.theme-pink .memory-card-back {
  background: linear-gradient(135deg, #fff0f4 0%, #f4d8e0 100%);
  border-color: rgba(230, 180, 200, 0.5);
}

.theme-blue .memory-card-front {
  background: linear-gradient(135deg, #3a4a6a 0%, #1a2a4a 100%);
  border-color: rgba(150, 200, 240, 0.3);
}

.theme-blue .memory-card-back {
  background: linear-gradient(135deg, #f0f4ff 0%, #d8e4f4 100%);
  border-color: rgba(150, 200, 240, 0.5);
}

.theme-purple .memory-card-front {
  background: linear-gradient(135deg, #5a3a6a 0%, #3a1a4a 100%);
  border-color: rgba(200, 160, 240, 0.3);
}

.theme-purple .memory-card-back {
  background: linear-gradient(135deg, #f4f0ff 0%, #e0d4f4 100%);
  border-color: rgba(200, 160, 240, 0.5);
}

/* ── Card States ── */

.memory-card.matched {
  pointer-events: none;
}

.memory-card.matched .memory-card-back {
  border-color: var(--gold-bright, #ffe888);
  box-shadow: 0 0 12px rgba(255, 232, 136, 0.4);
}

.memory-card.witch-shuffle {
  animation: witch-shake 0.4s ease;
}

.memory-card.witch-gone {
  animation: witch-poof 0.3s ease forwards;
}

@keyframes witch-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px) rotate(-2deg); }
  75% { transform: translateX(5px) rotate(2deg); }
}

@keyframes witch-poof {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.5; }
  100% { transform: scale(0); opacity: 0; }
}

/* Match sparkle */
.match-sparkle {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle, rgba(255,232,136,0.6) 0%, transparent 70%);
  pointer-events: none;
  animation: sparkle-burst 1s ease-out forwards;
  z-index: 10;
}

@keyframes sparkle-burst {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* ── Sound Cards ── */

.sound-card .memory-card-front.sound-front {
  background: linear-gradient(135deg, #4a3a5a 0%, #2a1a3a 100%);
}

.sound-card .memory-card-back.sound-back {
  background: linear-gradient(135deg, #e8e0f4 0%, #d4c8e8 100%);
  transition: background-color 0.3s ease;
}

.sound-wave {
  font-size: clamp(1.2rem, 4vw, 2rem);
  color: #6a4a8a;
  /* ~1.4s so the pulse spans the full instrument tone (1-1.5s) */
  animation: sound-pulse 1.4s ease;
}

@keyframes sound-pulse {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.3); }   /* quick attack to match the note onset */
  100% { transform: scale(1); }     /* slow decay alongside the tone's tail */
}

/* ══════════════════════════════════════════
   FRAGMENT ASSEMBLY SCREEN
   ══════════════════════════════════════════ */

#screen-cloud-assembly {
  display: flex;
  align-items: center;
  justify-content: center;
}

#screen-cloud-assembly .scene-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.cloud-assembly-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fragment-assembly-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.5rem);
  padding: 2rem;
}

/* Drop slots */
.fragment-slots {
  display: flex;
  gap: clamp(0.5rem, 2vw, 1rem);
}

/* Glowing cloud pedestal — soft rounded recess with a pale sky-blue inner glow */
.fragment-slot {
  width: clamp(70px, 15vw, 120px);
  height: clamp(70px, 15vw, 120px);
  border: 3px dashed rgba(168, 205, 235, 0.55);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(170, 215, 250, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse at 50% 115%, rgba(255, 255, 255, 0.14) 0%, transparent 60%),
    rgba(14, 22, 36, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.45),
    inset 0 -4px 10px rgba(180, 216, 240, 0.18),
    0 0 12px rgba(150, 200, 240, 0.3),
    0 0 0 1px rgba(10, 14, 22, 0.6);
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.fragment-slot:hover {
  border-color: rgba(190, 225, 250, 0.85);
  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.45),
    inset 0 -4px 10px rgba(180, 216, 240, 0.25),
    0 0 18px rgba(170, 215, 250, 0.5),
    0 0 0 1px rgba(10, 14, 22, 0.6);
}

/* Placed: pedestal warms to gold */
.fragment-slot.filled {
  border-style: solid;
  border-color: var(--gold, #daba6a);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 232, 136, 0.2) 0%, transparent 70%),
    rgba(30, 24, 14, 0.55);
  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.4),
    inset 0 -4px 10px rgba(255, 232, 136, 0.15),
    0 0 16px rgba(255, 232, 136, 0.35),
    0 0 0 1px rgba(10, 14, 22, 0.6);
}

.slot-text {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.8rem, 2.5vw, 1.4rem);
  color: var(--gold-bright, #ffe888);
  text-shadow: 0 0 8px rgba(255, 232, 136, 0.5);
}

/* Preview text */
.fragment-preview-text {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.7rem, 2vw, 1.2rem);
  color: var(--text-light, #eae4d4);
  letter-spacing: 0.2em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  min-height: 2em;
  transition: all 0.3s ease;
}

.fragment-preview-text.glow-text {
  color: var(--gold-bright, #ffe888);
  text-shadow: 0 0 12px rgba(255, 232, 136, 0.8), 0 0 24px rgba(255, 232, 136, 0.4);
  animation: glow-pulse 1s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { text-shadow: 0 0 12px rgba(255,232,136,0.8), 0 0 24px rgba(255,232,136,0.4); }
  50% { text-shadow: 0 0 20px rgba(255,232,136,1), 0 0 40px rgba(255,232,136,0.6); }
}

/* Draggable pieces */
.fragment-pieces {
  display: flex;
  gap: clamp(0.5rem, 2vw, 1.2rem);
  margin-top: 0.5rem;
}

/* Dreamy cloud tablet — soft white-blue stone with a gentle halo */
.fragment-piece {
  width: clamp(70px, 15vw, 120px);
  height: clamp(70px, 15vw, 120px);
  background: linear-gradient(160deg, #f6fbff 0%, #dceaf8 45%, #b8d2ec 100%);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: grab;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -5px 10px rgba(130, 165, 210, 0.45),
    0 0 14px rgba(190, 225, 255, 0.45),
    0 4px 10px rgba(20, 40, 70, 0.4);
  transition: transform 0.2s ease, opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.fragment-piece:hover {
  transform: scale(1.05);
  border-color: rgba(210, 235, 255, 1);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -5px 10px rgba(130, 165, 210, 0.45),
    0 0 20px rgba(200, 230, 255, 0.65),
    0 4px 10px rgba(20, 40, 70, 0.4);
}

.fragment-piece.selected {
  border-color: var(--gold-bright, #ffe888);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -5px 10px rgba(170, 150, 90, 0.35),
    0 0 16px rgba(255, 232, 136, 0.6),
    0 4px 10px rgba(20, 40, 70, 0.4);
  transform: scale(1.08);
}

.fragment-piece.placed {
  opacity: 0.3;
  pointer-events: auto;
  cursor: pointer;
}

.fragment-piece.dragging {
  opacity: 0.5;
  transform: scale(1.1);
}

.fragment-piece img {
  width: 70%;
  height: 50%;
  object-fit: contain;
  image-rendering: pixelated;
}

.fragment-label {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.5rem, 1.5vw, 0.8rem);
  color: #2c3e5c; /* deep slate so it reads on the pale cloud tablet */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  margin-top: 0.3rem;
}

/* Submit button */
.fragment-submit-btn {
  margin-top: 1rem;
}

/* Assembly correct */
.fragment-slots.assembly-correct .fragment-slot {
  border-color: var(--success-green, #58a248);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(120, 210, 110, 0.22) 0%, transparent 70%),
    rgba(14, 28, 16, 0.55);
  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.4),
    inset 0 -4px 10px rgba(120, 210, 110, 0.2),
    0 0 16px rgba(88, 162, 72, 0.45),
    0 0 0 1px rgba(10, 14, 22, 0.6);
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

/* Portrait mode — stack grids taller */
@media (max-aspect-ratio: 4/3) {
  .cloud-memory-grid {
    max-width: 95%;
  }

  .fragment-assembly-area {
    padding: 1rem;
  }
}

/* Small screens */
@media (max-width: 600px) {
  .memory-card-back img {
    width: 90%;
    height: 90%;
  }

  .fragment-slot,
  .fragment-piece {
    width: 60px;
    height: 60px;
  }
}