/* Yabbaroo! KIDS — friendlier skin layered over styles.css.
   Reuses .board/.tile/.rail/.vote-item/.btn/.roundbar; overrides layout + adds
   the animal picker, bigger tap targets, and the star celebration. */

/* Single column on every screen */
#app.kids { grid-template-columns: 1fr; max-width: 600px; }
#app.kids.lobby-mode { max-width: 600px; }

/* Lock the page — only inner areas (the board) may scroll, never the whole page */
html, body { overflow: hidden; overscroll-behavior: none; }
.kids .board-words, .kids .rail, .kids .left-panel > * { overscroll-behavior: contain; touch-action: pan-y; }

/* ===== KID LOGO ===== */
.kid-logo {
  font-size: 52px; font-weight: 900; letter-spacing: -1px; line-height: 1;
  color: var(--mint); -webkit-text-stroke: 5px #0a0a12; paint-order: stroke fill;
  text-shadow: 0 4px 16px rgba(0,245,160,0.22);
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.kid-logo.small { font-size: 26px; -webkit-text-stroke: 3px #0a0a12; }
/* Matches the home page's solid-pink "Kids Mode" button */
.kid-badge {
  -webkit-text-stroke: 0; text-shadow: none;
  font-size: .4em; font-weight: 900; letter-spacing: .06em;
  color: #fff; background: var(--pink);
  border-radius: 50px; padding: 3px 12px;
}

/* ===== ANIMAL PICKER ===== */
.animal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  width: min(440px, 100%);
}
.animal-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 16px; padding: 10px 4px; cursor: pointer;
  font-family: inherit; transition: transform .1s, border-color .1s, background .1s;
}
.animal-btn .animal-emoji { font-size: 34px; line-height: 1; }
.animal-btn .animal-name { font-size: 10px; font-weight: 800; color: var(--muted); text-align: center; }
.animal-btn:hover:not(.taken) { transform: translateY(-2px); }
.animal-btn.selected { border-color: var(--mint); background: var(--mint-dim); transform: translateY(-2px); }
.animal-btn.selected .animal-name { color: var(--mint); }
.animal-btn.taken { opacity: .3; pointer-events: none; filter: grayscale(.7); }

/* ===== ANIMAL LIST (lobby + waiting) ===== */
.animal-list {
  display: flex; flex-direction: column; gap: 6px;
  width: min(440px, 100%);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 10px 14px;
}
.animal-row { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; padding: 4px 0; }
.animal-row .animal-emoji { font-size: 26px; }
.animal-row .tick { margin-left: auto; color: var(--mint); font-weight: 900; }
.animal-row .you-tag {
  font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bg); background: var(--muted); border-radius: 5px; padding: 1px 5px;
}

/* ===== BUTTONS / TILES (chunky but compact — fit with minimal scrolling) ===== */
.btn.big { font-size: 20px; padding: 14px 32px; border-radius: 14px; }
.kids .tile {
  font-size: 18px; padding: 9px 14px; border-radius: 11px;
  border-bottom-width: 4px; font-weight: 800;
}
.kids .board-words { gap: 9px; padding: 6px 4px 14px; }
.kids .rail { min-height: 64px; gap: 8px; padding: 10px 14px; }
.kids .vote-item .text { font-size: 20px; }

/* ===== LOBBY MODE TOGGLE ===== */
.kid-mode-toggle { display: flex; gap: 8px; width: min(440px, 100%); }
.kid-mode-btn {
  flex: 1; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  padding: 12px 8px; border-radius: 14px;
  background: var(--surface); border: 2px solid var(--border); color: var(--muted);
  transition: border-color .1s, color .1s, background .1s;
}
.kid-mode-btn.selected { border-color: var(--mint); background: var(--mint-dim); color: var(--mint); }

/* ===== GUIDED BUILD (fill the blanks) ===== */
.kids .rail.guided { align-items: center; gap: 6px; font-size: 20px; font-weight: 800; line-height: 1.7; }
.g-word { color: var(--text); }
.g-slot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; min-height: 40px; padding: 4px 12px; cursor: pointer;
  border-radius: 10px; border: 2px dashed var(--muted); color: var(--muted);
  font-size: 13px; font-weight: 800;
}
.g-slot.filled { border-style: solid; font-size: 19px; }
.g-slot.active { border-color: var(--mint); color: var(--mint); box-shadow: 0 0 12px rgba(0,245,160,.4); }
.g-slot.s-noun.filled { border-color: var(--cyan);   color: var(--cyan); }
.g-slot.s-verb.filled { border-color: var(--pink);   color: var(--pink); }
.g-slot.s-adj.filled  { border-color: var(--yellow); color: var(--yellow); }
.g-slot.s-adv.filled  { border-color: var(--purple); color: var(--purple); }

/* POS tinting + dim non-matching tiles while a slot is active */
.kids .tile.pos-noun { box-shadow: inset 0 0 0 2px var(--cyan); }
.kids .tile.pos-verb { box-shadow: inset 0 0 0 2px var(--pink); }
.kids .tile.pos-adj  { box-shadow: inset 0 0 0 2px var(--yellow); }
.kids .tile.pos-adv  { box-shadow: inset 0 0 0 2px var(--purple); }
.kids .tile.dim { opacity: .28; pointer-events: none; }
.kids .tile.match { transform: scale(1.05); }
.kid-guided-hint { font-size: 12px; font-weight: 800; color: var(--cyan); text-align: center; }

/* ===== HEADER STARS + HOME ===== */
.kid-header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.kid-stars { font-size: 20px; letter-spacing: 1px; }
#homeBtn .icon { width: 20px; height: 20px; }

/* ===== YOUR SENTENCE (waiting) ===== */
.kid-your-sentence {
  background: var(--mint-dim); border: 2px solid var(--mint-dark);
  border-radius: 16px; padding: 16px 18px;
  font-size: 19px; font-weight: 800; color: var(--mint);
  text-align: center; width: min(440px, 100%);
}

/* ===== VOTE ===== */
.kid-vote-head { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-bottom: 6px; }
.kid-vote-title { flex: 1; font-size: 16px; font-weight: 900; color: var(--cyan); }
.kids .vote-item { padding: 16px; border-width: 3px; }
.kids .vote-item .who-emoji { font-size: 24px; }

/* ===== RESULTS stars/crowns ===== */
.kids .result-meta .stars { font-size: 16px; margin-left: auto; }
.kids .result-item .who-emoji { font-size: 22px; }

/* ===== CELEBRATION ===== */
.kid-celebrate { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; align-items: center; }
.kid-celebrate-title { font-size: 26px; font-weight: 900; color: var(--mint); text-align: center; }
.kid-star-board { display: flex; flex-direction: column; gap: 8px; width: min(440px, 100%); }
.kid-star-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 16px; padding: 12px 16px; font-size: 18px; font-weight: 800;
}
.kid-star-row .animal-emoji { font-size: 30px; }
.kid-star-row .tally { margin-left: auto; font-size: 18px; letter-spacing: 1px; }
/* Animals bounce in on the celebration + when joining the lobby */
.kid-star-row, .animal-row { animation: kid-pop-in .4s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes kid-pop-in { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.kid-back { font-size: 12px; font-weight: 700; color: var(--muted); text-decoration: none; margin-top: 4px; }
.kid-back:hover { color: var(--mint); }

/* ===== STICKERS (earn per star, side tray, drag to decorate) ===== */
.sticker-layer { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.placed-sticker {
  position: fixed; font-size: 38px; line-height: 1; cursor: grab; pointer-events: auto;
  user-select: none; -webkit-user-select: none; touch-action: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
  transform: translate(-50%, -50%);
}
.placed-sticker.dragging { cursor: grabbing; transform: translate(-50%, -50%) scale(1.2); }
/* A fused combo sticker — sparkly glow so it reads as something special */
.placed-sticker.combo {
  filter: drop-shadow(0 0 6px var(--mint)) drop-shadow(0 0 10px var(--pink));
  letter-spacing: -8px; /* overlap the fused emojis a little */
}

.sticker-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 160;
  width: 44px; height: 52px; border: none; cursor: pointer;
  background: var(--pink); color: #fff; font-size: 24px;
  border-radius: 14px 0 0 14px; box-shadow: -2px 2px 10px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.sticker-tab.hidden { display: none; }
.sticker-tab.bump { animation: kid-pop-in .4s cubic-bezier(.2,1.6,.4,1); }
.sticker-count {
  position: absolute; top: -6px; left: -6px;
  background: var(--mint); color: var(--bg); font-size: 11px; font-weight: 900;
  min-width: 18px; height: 18px; line-height: 18px; border-radius: 9px; text-align: center; padding: 0 4px;
}

.sticker-tray {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 170;
  width: min(130px, 44vw);
  background: var(--surface); border-left: 2px solid var(--pink);
  box-shadow: -4px 0 16px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; padding: 10px;
}
.sticker-tray.hidden { display: none; }
.sticker-tray-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 900; color: var(--pink); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.sticker-tray-items { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.tray-sticker { font-size: 32px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; line-height: 1; }
.tray-sticker.dragging { opacity: .4; }
.sticker-tray-hint { font-size: 10px; font-weight: 700; color: var(--muted); text-align: center; margin-top: 8px; }
.sticker-ghost { position: fixed; z-index: 999; font-size: 40px; pointer-events: none; transform: translate(-50%, -50%) scale(1.15); filter: drop-shadow(0 3px 5px rgba(0,0,0,0.5)); }

/* Mobile: kids-specific phases need the same top offset as the others */
@media (max-width: 680px) {
  .kids.left-panel { } /* no-op anchor */
  .left-panel > #waitingPhase,
  .left-panel > #votePhase { top: 110px; }
  .animal-grid { grid-template-columns: repeat(4, 1fr); }
  .kid-logo { font-size: 44px; }
}