/* Baca: pale-blue table surface, white consonant tiles, red vowel tiles, green for real words */
:root {
  --canvas: #E6EEF6;
  --dot: #C3D1E2;
  --ink: #1D2B4F;
  --ink-soft: #4A5878;
  --card: #FFFFFF;
  --card-edge: #C3CEDD;
  --vowel: #D83636;
  --vowel-edge: #A3282B;
  --word: #1E9E57;
  --word-bg: #E3F5EA;
  --sun: #FFC83D;
  --sun-edge: #D9A21F;
  --muted: #7D8BA6;
  --danger-bg: #FDE4E4;
  --dock-h: 104px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  background: var(--canvas); color: var(--ink);
  font-family: "Andika", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; }
button:focus-visible, .card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- Infinite canvas ---------- */
.stage {
  position: fixed; inset: 0; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
  background-color: var(--canvas);
  background-image: radial-gradient(var(--dot) 1.6px, transparent 1.8px);
  background-size: 28px 28px;
  cursor: grab;
}
.stage.panning { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.drag-layer { z-index: 8; }

.empty-hint {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); margin: 0;
  color: var(--ink-soft); font-size: 20px; font-weight: 700; text-align: center; pointer-events: none;
}

/* ---------- Letter cards ---------- */
.card {
  width: 64px; height: 64px; border-radius: 14px;
  background: var(--card); color: var(--ink);
  box-shadow: 0 5px 0 var(--card-edge), 0 9px 16px rgba(29, 43, 79, .13);
  display: grid; place-items: center;
  font-weight: 700; font-size: 42px; line-height: 1; padding: 0 0 2px; border: 0;
  cursor: pointer;
}
.card.vowel { background: var(--vowel); color: #FFFFFF; box-shadow: 0 5px 0 var(--vowel-edge), 0 9px 16px rgba(163, 40, 43, .22); }

.group { position: absolute; left: 0; top: 0; border-radius: 20px; cursor: pointer; }
.group .card { position: absolute; }
.group.loose { border-radius: 14px; }

/* Snapped together: one tray with a handle underneath */
.group.readable, .group.bad { background: rgba(29, 43, 79, .08); }
.group.bad { background: transparent; outline: 2.5px dashed var(--muted); outline-offset: -2px; }
.rail {
  position: absolute; left: 6px; right: 6px; bottom: 0; height: 28px; cursor: grab;
}
.rail::after {
  content: ""; position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
  width: min(56px, 60%); height: 6px; border-radius: 3px; background: rgba(29, 43, 79, .22);
}

/* Real word: tiles fuse into one green-ringed block */
.group.word { background: var(--word-bg); box-shadow: 0 0 0 4px var(--word), 0 0 0 11px rgba(30, 158, 87, .14); }
.group.word .card { border-radius: 0; }
.group.word .card.first { border-radius: 14px 0 0 14px; }
.group.word .card.last { border-radius: 0 14px 14px 0; }
.group.word .rail::after { background: rgba(30, 158, 87, .45); }

.pic {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 62px; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.say {
  position: absolute; right: -15px; top: -15px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--sun); color: var(--ink); border: 0; box-shadow: 0 3px 0 var(--sun-edge);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}

/* Interaction states */
.group.dragging { cursor: grabbing; }
.group.dragging .card { box-shadow: 0 5px 0 var(--card-edge), 0 18px 28px rgba(29, 43, 79, .24); }
.group.dragging .card.vowel { box-shadow: 0 5px 0 var(--vowel-edge), 0 18px 28px rgba(163, 40, 43, .3); }
.group.snap-target { outline: 3px solid var(--sun); outline-offset: 4px; }
.group .card { transition: translate .14s ease-out; }
.group.dragging .card { opacity: .92; }
/* Where the dragged card will land */
.drop-slot {
  position: absolute; border-radius: 14px; pointer-events: none;
  background: rgba(255, 200, 61, .28); outline: 3px dashed var(--sun-edge); outline-offset: -3px;
}
.group.pop { animation: pop .28s ease-out; }
.group.word.pop .pic { animation: rise .4s ease-out; }
@keyframes pop { 0% { scale: 1.06; } 100% { scale: 1; } }
@keyframes rise { 0% { opacity: 0; translate: 0 12px; } 100% { opacity: 1; translate: 0 0; } }

/* ---------- Toolbar ---------- */
.controls { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 6; }
.ctl {
  width: 48px; height: 48px; border-radius: 16px; border: 0; padding: 0;
  background: #FFFFFF; color: var(--ink); box-shadow: 0 3px 0 var(--card-edge), 0 6px 12px rgba(29, 43, 79, .1);
  display: grid; place-items: center; cursor: pointer;
}
/* Speaking speed menu (for parents) */
.speed-menu {
  position: absolute; top: 16px; right: 76px; z-index: 7; width: 200px;
  background: #FFFFFF; border-radius: 18px; padding: 12px; display: grid; gap: 6px;
  box-shadow: 0 12px 30px rgba(29, 43, 79, .18), 0 0 0 1px rgba(29, 43, 79, .05);
}
.speed-menu p { margin: 0 4px 4px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.speed-menu button {
  height: 44px; border: 0; border-radius: 12px; background: #EEF2F7; color: var(--ink);
  font-size: 17px; font-weight: 700; text-align: left; padding: 0 14px; cursor: pointer;
}
.speed-menu button[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }
.ctl[aria-expanded="true"] { background: var(--ink); color: #FFFFFF; }

/* Capitals / lowercase switch, at the start of the dock */
.case-toggle {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; padding: 4px;
  background: #EEF2F7; border-radius: 16px;
}
.case-toggle button {
  width: 58px; height: 34px; border: 0; border-radius: 12px; background: transparent; padding: 0;
  font-size: 19px; font-weight: 700; color: var(--ink-soft); cursor: pointer;
}
.case-toggle button[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }

.voice-banner {
  position: absolute; left: 50%; bottom: calc(var(--dock-h) + 30px); transform: translateX(-50%); z-index: 7;
  width: min(560px, calc(100% - 28px)); display: flex; gap: 10px; align-items: flex-start;
  background: #FFF1C7; color: var(--ink); border-radius: 16px; padding: 12px 12px 12px 16px;
  box-shadow: 0 8px 22px rgba(29, 43, 79, .14);
}
.voice-banner p { margin: 0; font-size: 15px; line-height: 1.45; }
.voice-banner button { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(29, 43, 79, .08); display: grid; place-items: center; cursor: pointer; padding: 0; }

/* ---------- Dock ---------- */
.dock {
  position: absolute; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); height: var(--dock-h); z-index: 5;
  background: #FFFFFF; border-radius: 26px;
  box-shadow: 0 12px 32px rgba(29, 43, 79, .16), 0 0 0 1px rgba(29, 43, 79, .05);
  display: flex; align-items: center; gap: 12px; padding: 0 14px 0 12px;
}
.tray {
  flex: 1; min-width: 0; display: flex; gap: 9px; overflow-x: auto; overflow-y: hidden;
  padding: 12px 8px 16px; touch-action: pan-x; scrollbar-width: thin;
}
.tile { flex: 0 0 auto; width: 56px; height: 56px; font-size: 36px; border-radius: 13px; box-shadow: 0 4px 0 var(--card-edge), 0 4px 10px rgba(29, 43, 79, .08); }
.tile.vowel { box-shadow: 0 4px 0 var(--vowel-edge), 0 4px 10px rgba(163, 40, 43, .15); }
.tile:active { translate: 0 3px; }
.trash {
  flex: 0 0 auto; width: 66px; height: 66px; border-radius: 20px;
  border: 2.5px dashed var(--card-edge); background: #F4F7FB; color: var(--ink-soft);
  display: grid; place-items: center; align-content: center; gap: 2px; font-size: 12px; font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}
.trash.hot { background: var(--danger-bg); border-color: var(--vowel); color: var(--vowel-edge); }

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  :root { --dock-h: 86px; }
  .controls { flex-direction: row; top: 14px; right: 14px; gap: 8px; }
  .ctl { width: 44px; height: 44px; border-radius: 14px; }
  .speed-menu { top: 66px; right: 14px; }
  .case-toggle { border-radius: 14px; }
  .case-toggle button { width: 46px; height: 30px; font-size: 16px; border-radius: 10px; }
  .dock { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); border-radius: 22px; padding: 0 10px 0 6px; gap: 8px; }
  .tray { gap: 8px; padding: 10px 6px 14px; scrollbar-width: none; }
  .tray::-webkit-scrollbar { display: none; }
  .tile { width: 50px; height: 50px; font-size: 32px; border-radius: 12px; }
  .trash { width: 56px; height: 56px; border-radius: 16px; font-size: 11px; }
}
@media (max-width: 380px) {
  #zoomIn, #zoomOut { display: none; } /* pinch to zoom instead */
}

@media (prefers-reduced-motion: reduce) {
  .group .card { transition: none; }
  .group.pop, .group.word.pop .pic { animation: none; }
  .trash { transition: none; }
}