/* Gabi's Rainbow Castle — styles. Landscape-first, works in portrait. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

body {
  font-family: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  background: linear-gradient(180deg, #FFE9F5 0%, #E8F1FF 55%, #FFF6DE 100%);
  color: #6A4A7A;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

button {
  appearance: none;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

#screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  flex: 0 0 auto;
}

.topbar-title {
  flex: 1;
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.topbar-right { min-width: 56px; display: flex; justify-content: flex-end; }

.round-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 10px rgba(120, 90, 140, 0.18);
  font-size: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease;
}

.round-btn:active { transform: scale(0.9); }

.star-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 24px;
  font-weight: 800;
  color: #9A6B12;
  box-shadow: 0 3px 10px rgba(120, 90, 140, 0.18);
}

/* ---------- home ---------- */

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  flex: 0 0 auto;
}

.home-greeting { font-size: 44px; font-weight: 800; }

.home-controls { display: flex; align-items: center; gap: 14px; }

.home-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 18px;
  padding: 10px;
}

.home-tile {
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 6px 16px rgba(120, 90, 140, 0.14);
  transition: transform 0.12s ease;
}

.home-tile:active { transform: scale(0.94); }

.home-tile-emoji { font-size: clamp(52px, 9vh, 84px); }

.home-tile-label { font-size: clamp(22px, 4vh, 32px); font-weight: 800; }

.tint-0 { background: #FFE0E6; color: #C2405E; }
.tint-1 { background: #E6E0FF; color: #5F4AB8; }
.tint-2 { background: #DFF5E6; color: #2E7D57; }
.tint-3 { background: #FFF3C9; color: #9A6B12; }
.tint-4 { background: #E0F1FF; color: #2C6BA8; }
.tint-5 { background: #FFE8F7; color: #B0459A; }

/* ---------- generic menus ---------- */

.menu-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  padding: 12px;
  align-content: center;
}

.menu-tile {
  border-radius: 28px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 5px 14px rgba(120, 90, 140, 0.14);
  transition: transform 0.12s ease;
}

.menu-tile:active { transform: scale(0.94); }
.menu-tile-big { font-size: 54px; font-weight: 800; }
.menu-tile-label { font-size: 24px; font-weight: 800; }
.menu-tile-sub { font-size: 18px; font-weight: 700; opacity: 0.75; }

/* ---------- letter / name pickers ---------- */

.letter-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}

.letter-tile {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 22px;
  min-height: 104px;
  box-shadow: 0 4px 10px rgba(120, 90, 140, 0.12);
  transition: transform 0.1s ease;
}

.letter-tile:active { transform: scale(0.92); }
.letter-tile-glyph { font-size: 52px; font-weight: 800; }

.letter-tile-star {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 20px;
}

.names-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}

.name-tile {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 22px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(120, 90, 140, 0.12);
  transition: transform 0.1s ease;
}

.name-tile:active { transform: scale(0.94); }
.name-tile-emoji { font-size: 44px; }
.name-tile-label { font-size: 24px; font-weight: 800; letter-spacing: 2px; }

/* ---------- tracing ---------- */

.trace-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.tracer-box {
  height: 100%;
  max-height: 62vh;
  aspect-ratio: 100 / 140;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 28px;
  box-shadow: 0 6px 18px rgba(120, 90, 140, 0.14);
  padding: 12px;
}

.tracer-svg { width: 100%; height: 100%; touch-action: none; }

.tracer-svg.dance { animation: dance 0.7s ease; }

@keyframes dance {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.12) rotate(-5deg); }
  50% { transform: scale(1.15) rotate(5deg); }
  75% { transform: scale(1.08) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.start-dot.pulse { animation: pulse 0.5s ease 2; transform-origin: center; transform-box: fill-box; }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.45); }
}

.name-chips {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 8px;
  flex: 0 0 auto;
}

.name-chip {
  min-width: 46px;
  height: 46px;
  padding: 0 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: #B8A8C8;
  box-shadow: 0 3px 8px rgba(120, 90, 140, 0.12);
}

.name-chip.chip-done { background: #DFF5E6; color: #2E7D57; }

.name-chip.chip-now {
  color: #6A4A7A;
  outline: 3px solid #C7A6E8;
  animation: chipnow 1.2s ease infinite;
}

@keyframes chipnow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.crayon-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  padding: 10px 0 4px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.crayon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 3px 8px rgba(120, 90, 140, 0.22);
  transition: transform 0.12s ease;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crayon:active { transform: scale(0.9); }

.crayon.picked {
  transform: scale(1.22);
  outline: 4px solid #6A4A7A;
  outline-offset: 2px;
}

.crayon-rainbow { background: conic-gradient(#FF5A5F, #FF9838, #FFD52E, #6BCB4F, #3FA7E8, #9B6BE8, #FF5A5F); }

.crayon-white { border-color: #D8CCE4; }

/* ---------- crossword ---------- */

.puzzle-list-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  padding: 12px;
  align-content: center;
  -webkit-overflow-scrolling: touch;
}

.puzzle-tile {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 22px;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(120, 90, 140, 0.12);
  transition: transform 0.1s ease;
}

.puzzle-tile:active { transform: scale(0.94); }

.puzzle-tile-emoji { font-size: 46px; letter-spacing: 6px; }

.clue-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 6px 0;
  flex: 0 0 auto;
}

.clue-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: 0 3px 10px rgba(120, 90, 140, 0.14);
  transition: transform 0.12s ease;
}

.clue-chip:active { transform: scale(0.94); }
.clue-emoji { font-size: 34px; }
.clue-len { font-size: 26px; font-weight: 800; letter-spacing: 4px; color: #C4B4D4; }

.clue-chip.clue-done { background: #DFF5E6; }
.clue-chip.clue-done .clue-len { color: #2E7D57; }

.puzzle-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.puzzle-grid { display: grid; gap: 8px; }

.pcell {
  position: relative;
  width: var(--cell, 90px);
  height: var(--cell, 90px);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(120, 90, 140, 0.13);
}

.pcell.empty { background: none; box-shadow: none; pointer-events: none; }

.pcell .cell-glyph { position: absolute; inset: 8%; width: 84%; height: 84%; }

.pcell.filled { background: #FFFDF2; animation: cellpop 0.45s ease; }

@keyframes cellpop {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.pcell-clue {
  position: absolute;
  font-size: 17px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  padding: 3px 8px;
  box-shadow: 0 2px 6px rgba(120, 90, 140, 0.2);
  z-index: 2;
  white-space: nowrap;
}

.pcell-clue.clue-a { left: -12px; top: -16px; }
.pcell-clue.clue-d { left: -12px; top: -16px; }
.pcell-clue.clue-a + .pcell-clue.clue-d { top: auto; bottom: -16px; }

.trace-overlay {
  position: fixed;
  inset: 0;
  background: rgba(90, 74, 106, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
}

.trace-overlay-box {
  position: relative;
  background: #FFFDF8;
  border-radius: 32px;
  padding: 22px;
  box-shadow: 0 14px 40px rgba(60, 40, 80, 0.3);
}

.overlay-tracer { height: min(64vh, 460px); background: rgba(245, 240, 250, 0.7); }

.overlay-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 48px;
  height: 48px;
  font-size: 20px;
  z-index: 2;
}

/* ---------- find it ---------- */

.findit-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 8px 8px;
  flex: 0 0 auto;
}

.findit-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 22px;
  padding: 6px 20px;
  box-shadow: 0 4px 12px rgba(120, 90, 140, 0.18);
  transition: transform 0.12s ease;
}

.findit-prompt:active { transform: scale(0.95); }
.findit-prompt-glyph { font-size: 52px; font-weight: 800; }
.findit-prompt-hint { font-size: 24px; }

.findit-stars { display: flex; gap: 6px; font-size: 30px; }
.findit-star { filter: grayscale(1); opacity: 0.45; transition: all 0.3s ease; }
.findit-star.lit { filter: none; opacity: 1; transform: scale(1.15); }

.findit-stage {
  flex: 1;
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.55);
  min-height: 0;
}

.scene-meadow { background: linear-gradient(180deg, #C9E8FF 0%, #E8F6FF 45%, #CDEFC4 46%, #B4E3A6 100%); }
.scene-night { background: linear-gradient(180deg, #3D3A6E 0%, #5A4E92 55%, #40597A 56%, #2E4258 100%); }

.findit-decor {
  position: absolute;
  font-size: 42px;
  opacity: 0.85;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.findit-bubble {
  position: absolute;
  width: clamp(66px, 10vw, 92px);
  height: clamp(66px, 10vw, 92px);
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 800;
  color: #5A4A6A;
  box-shadow: 0 4px 12px rgba(60, 50, 90, 0.25), inset 0 -4px 0 rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease;
}

.findit-bubble.popped { animation: bubblepop 0.5s ease forwards; pointer-events: none; }

@keyframes bubblepop {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

.findit-bubble.wobble { animation: wobble 0.5s ease; }

@keyframes wobble {
  0%, 100% { margin-left: -6px; }
  25% { margin-left: -14px; }
  50% { margin-left: 2px; }
  75% { margin-left: -10px; }
}

/* ---------- match ---------- */

.match-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 12px;
  align-content: center;
  min-height: 0;
}

.match-card {
  perspective: 700px;
  aspect-ratio: 3 / 3.6;
  max-height: 24vh;
  margin: 0 auto;
  width: 100%;
  max-width: 170px;
}

.match-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.4, 1.4, 0.6, 1);
}

.match-card.flipped .match-card-inner { transform: rotateY(180deg); }

.match-face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 5px 12px rgba(120, 90, 140, 0.18);
}

.match-back {
  background: linear-gradient(135deg, #C7A6E8, #F5A9D0);
  font-size: 40px;
}

.match-front {
  background: #FFFFFF;
  transform: rotateY(180deg);
  font-size: 54px;
}

.match-front.match-letter { font-size: 62px; font-weight: 800; color: #6A4A7A; }

.match-card.won .match-face { box-shadow: 0 0 0 5px #8FDC7A, 0 5px 12px rgba(120, 90, 140, 0.18); }
.match-card.won { animation: cardwon 0.6s ease; }

@keyframes cardwon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1) rotate(3deg); }
}

/* ---------- coloring ---------- */

.color-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 6px;
}

.color-frame {
  background: #FFFFFF;
  border-radius: 26px;
  box-shadow: 0 6px 18px rgba(120, 90, 140, 0.16);
  padding: 14px;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
}

.color-svg { width: 100%; height: 100%; touch-action: manipulation; }

.color-svg .fillable { transition: fill 0.15s ease; }
.color-svg .just-filled { animation: fillflash 0.35s ease; }

@keyframes fillflash {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* ---------- stickers ---------- */

.sticker-scene {
  flex: 1;
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, #BFE3FF 0%, #E6F4FF 50%, #C4ECB4 51%, #A9DE96 100%);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.55);
  min-height: 0;
}

.sticker-scene-decor { position: absolute; pointer-events: none; }
.decor-0 { font-size: 110px; left: 50%; bottom: 4%; transform: translateX(-50%); }
.decor-1 { font-size: 74px; left: 8%; top: 8%; }
.decor-2 { font-size: 54px; right: 10%; top: 6%; }
.decor-3 { font-size: 60px; right: 5%; bottom: 6%; }
.decor-4 { font-size: 44px; left: 6%; bottom: 8%; }

.sticker-tray {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 22px;
  margin-top: 10px;
  padding: 8px 14px 10px;
  box-shadow: 0 4px 12px rgba(120, 90, 140, 0.14);
}

.sticker-tray-label { font-size: 17px; font-weight: 800; opacity: 0.7; padding-bottom: 4px; }

.sticker-tray-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  min-height: 62px;
  align-items: center;
  -webkit-overflow-scrolling: touch;
}

.sticker-item {
  font-size: 46px;
  line-height: 1;
  transition: transform 0.12s ease;
  flex: 0 0 auto;
}

.sticker-item:active { transform: scale(1.2); }
.sticker-item.dragging { opacity: 0.25; }

.sticker-placed {
  position: absolute;
  font-size: 52px;
  transform: none;
}

.sticker-ghost {
  position: fixed;
  font-size: 62px;
  transform: translate(-50%, -55%);
  pointer-events: none;
  z-index: 96;
  filter: drop-shadow(0 6px 8px rgba(60, 40, 80, 0.35));
}

.sticker-empty { font-size: 22px; font-weight: 700; opacity: 0.65; padding: 8px; }

/* ---------- celebrations ---------- */

.celebrate-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.94), rgba(255, 233, 245, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  transition: opacity 0.35s ease;
}

.celebrate-overlay.fade { opacity: 0; }

.celebrate-inner { text-align: center; animation: bouncein 0.55s cubic-bezier(0.3, 1.6, 0.5, 1); }

@keyframes bouncein {
  0% { transform: scale(0.2); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.celebrate-emoji { font-size: clamp(90px, 20vh, 150px); line-height: 1.15; }

.celebrate-caption { font-size: clamp(30px, 6vh, 46px); font-weight: 800; margin-top: 10px; }

.count-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 80vw;
  min-height: 80px;
}

.count-emoji { font-size: 64px; opacity: 0; transform: scale(0.2); transition: all 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.count-emoji.show { opacity: 1; transform: scale(1); }

.sticker-toast {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: 18px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 22px;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(60, 40, 80, 0.25);
  z-index: 95;
  animation: toastin 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
  transition: all 0.5s ease;
}

@keyframes toastin {
  0% { transform: translateY(-70px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.sticker-toast.fly { transform: translateY(-90px) scale(0.4); opacity: 0; }
.sticker-toast-emoji { font-size: 40px; }
.sticker-toast-text { font-size: 22px; font-weight: 800; }

.confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}

/* ---------- debug ---------- */

.debug-glyphs {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  padding: 10px;
}

.debug-glyph {
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.debug-glyph-key { font-size: 22px; font-weight: 800; width: 26px; text-align: center; }
.debug-glyph-svg { width: 52px; height: 72px; }
.debug-glyph-svg .cell-glyph { width: 100%; height: 100%; }

/* ---------- portrait tweaks ---------- */

@media (orientation: portrait) {
  .home-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .home-greeting { font-size: 34px; }
  .match-grid { grid-template-columns: repeat(3, 1fr); }
  .match-card { max-height: 20vh; }
  .color-frame { aspect-ratio: auto; width: 100%; height: auto; }
  .topbar-title { font-size: 24px; }
}