/* TV / big screen. Sized from the viewport so it fills any TV or laptop. */
body.tv { font-size: 2.2vmin; }
.screen { position: fixed; inset: 0; z-index: 1; display: none; padding: 3vmin 4vmin; }
.screen.active { display: flex; flex-direction: column; animation: fade-in .4s ease both; }
@keyframes fade-in { from { opacity: 0; transform: scale(.98); } }

.icon-btn { width: 7vmin; height: 7vmin; font-size: 3.6vmin; }
.toy-btn { font-size: 2.6vmin; }
.toy-btn.sm { font-size: 2vmin; }
.toy-btn.huge { font-size: 5vmin; }
.toy-btn.on { --c: var(--mint); --d: var(--mint-d); }

/* Start */
#screen-start { align-items: center; justify-content: center; }
.start-card { text-align: center; display: grid; justify-items: center; gap: 2.5vmin; }
.start-card .mascot.big { font-size: 22vmin; }
.start-card .logo { font-size: 17vmin; }
.tagline { font-size: 3.6vmin; margin: 0; font-weight: 500; }
.start-card .small-note { font-size: 2.2vmin; margin: 0; }
#btn-start { animation: pulse 1.6s ease-in-out infinite; }

/* Home */
.home-head { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 2vmin; }
.brand .mascot { font-size: 9vmin; }
.logo.sm { font-size: 9vmin; }
.head-actions { display: flex; gap: 2vmin; align-items: center; }
.home-body { flex: 1; display: grid; grid-template-columns: minmax(0, 34vmin) 1fr; gap: 4vmin; align-items: center; min-height: 0; }
.join-card {
  background: var(--card); border-radius: 4vmin; padding: 3vmin; text-align: center;
  box-shadow: 0 1.2vmin 0 #ead5f5, 0 2vmin 5vmin rgba(80, 30, 120, .18);
  border: .6vmin solid #fff;
}
.join-card h2 { margin: 0 0 1.5vmin; font-size: 3.6vmin; color: var(--purple); }
.qr { width: 100%; aspect-ratio: 1; border-radius: 2vmin; background: #fff; display: block; }
.join-or { margin: 1.2vmin 0 .2vmin; color: var(--ink-soft); font-size: 2.2vmin; }
.join-url { margin: 0; font-weight: 700; font-size: 2.6vmin; word-break: break-all; }
.code { font-size: 10vmin; font-weight: 700; letter-spacing: .12em; color: var(--pink); line-height: 1.1; text-shadow: 0 .6vmin 0 #ffd1e8; }
body.has-players .join-card { transform: scale(.85); transform-origin: left center; transition: transform .5s; }

.home-main { display: grid; gap: 3vmin; align-content: center; min-height: 0; }
.players { display: flex; flex-wrap: wrap; gap: 3vmin; justify-content: center; min-height: 14vmin; align-items: flex-end; }
.player { display: grid; justify-items: center; gap: .6vmin; }
.player .avatar { --av-size: 12vmin !important; animation: bob 3s ease-in-out infinite; }
.player:nth-child(2) .avatar { animation-delay: -1s; } .player:nth-child(3) .avatar { animation-delay: -2s; }
.player-name { font-weight: 700; font-size: 2.8vmin; background: #fff; padding: .3vmin 1.6vmin; border-radius: 999px; box-shadow: 0 .4vmin 0 #ead5f5; }
.home-hint { text-align: center; font-size: 4vmin; font-weight: 600; margin: 0; }
.games { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5vmin; }
.game-tile {
  --tile: var(--pink);
  background: #fff; border-radius: 3.5vmin; padding: 2.4vmin 1vmin 1.8vmin;
  display: grid; justify-items: center; gap: 1vmin;
  box-shadow: 0 1vmin 0 var(--tile), 0 0 0 .6vmin var(--tile) inset, 0 2vmin 4vmin rgba(80, 30, 120, .15);
  transition: transform .15s;
}
.game-tile:hover { transform: translateY(-.6vmin) rotate(-1deg); }
.tile-icon { font-size: 8vmin; line-height: 1; }
.tile-name { font-size: 2.8vmin; font-weight: 700; color: var(--tile); filter: brightness(.85); }

/* Play */
.play-head { display: flex; align-items: center; gap: 2.4vmin; }
.game-title { font-size: 4.2vmin; font-weight: 700; color: var(--game); filter: brightness(.9); white-space: nowrap; }
.progress { flex: 1; display: flex; gap: 1.2vmin; justify-content: center; }
.progress .pip { width: 4.4vmin; height: 4.4vmin; font-size: 3.2vmin; }
.turn { display: flex; align-items: center; gap: 1.2vmin; font-weight: 700; font-size: 3vmin; }
.turn .avatar { --av-size: 7vmin !important; }

.stage { flex: 1; display: grid; grid-template-rows: 1fr auto; gap: 3vmin; min-height: 0; padding: 2vmin 12vmin 2vmin 0; }
.display { display: flex; align-items: center; justify-content: center; gap: 5vmin; min-height: 0; }
.choices { display: grid; gap: 3vmin; justify-content: center; grid-auto-flow: column; grid-auto-columns: 22vmin; }
.choices .choice { height: 22vmin; border-radius: 4vmin; }
.choices .ch-letter, .choices .ch-number { font-size: 14vmin; }
.choices .ch-emoji { font-size: 13vmin; }
.choices .ch-color { width: 13vmin; height: 13vmin; }
.choices .ch-label { font-size: 2.6vmin; }
.choices .choice.chosen:not(.off):not(.right) { transform: scale(.95); }

.pic-card {
  font-size: 30vmin; line-height: 1; width: 40vmin; height: 40vmin; display: grid; place-items: center;
  background: #fff; border-radius: 50%; box-shadow: 0 1.2vmin 0 #ead5f5, 0 3vmin 6vmin rgba(80, 30, 120, .18), inset 0 0 0 1vmin #fff3fa;
}
.bounce-in { animation: pop-in .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.pic-word { font-size: 13vmin; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.pic-word .first { display: inline-block; min-width: .7em; text-align: center; }
.pic-word .blank { color: #fff; background: var(--game); border-radius: 2vmin; padding: 0 .1em; animation: pulse 1.2s ease-in-out infinite; }
.pic-word .lit { color: var(--pink); animation: pop-in .5s both; }

.count-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2vmin 3vmin; max-width: 110vmin; }
.count-item {
  position: relative; font-size: 15vmin; line-height: 1; animation: pop-in .4s cubic-bezier(.3, 1.6, .5, 1) both;
  transition: transform .2s; filter: drop-shadow(0 1vmin 1vmin rgba(80, 30, 120, .2));
}
.count-grid.n7 .count-item, .count-grid.n8 .count-item, .count-grid.n9 .count-item, .count-grid.n10 .count-item { font-size: 11vmin; }
.count-item.lit { transform: scale(1.18); }
.count-item.lit::after {
  content: attr(data-num); position: absolute; left: 50%; top: -1vmin; transform: translateX(-50%);
  background: var(--pink); color: #fff; font-size: 4.5vmin; font-weight: 700; width: 7vmin; height: 7vmin; border-radius: 50%;
  display: grid; place-items: center; box-shadow: 0 .6vmin 0 var(--pink-d); animation: pop-in .3s both;
}
.count-grid.small .count-item { font-size: 7vmin; }
.big-answer { font-size: 22vmin; font-weight: 700; color: var(--pink); text-shadow: 0 1vmin 0 #fff; }
.t-findNumber { flex-direction: column; gap: 3vmin; }

.mystery {
  width: 34vmin; height: 34vmin; border-radius: 5vmin; display: grid; place-items: center;
  font-size: 22vmin; font-weight: 700; color: #fff; background: var(--game);
  box-shadow: 0 1.2vmin 0 rgba(0, 0, 0, .15), inset 0 0 0 1vmin rgba(255, 255, 255, .35);
}
.mystery:not(.solved) { animation: pulse 1.4s ease-in-out infinite; }
.mystery.solved { background: #fff; color: var(--pink); animation: pop-in .5s both; }
.mystery.pic.solved { font-size: 24vmin; }

.splash {
  width: 36vmin; height: 36vmin; display: grid; place-items: center;
  border-radius: 46% 54% 58% 42% / 48% 42% 58% 52%;
  background: repeating-linear-gradient(45deg, #fff, #fff 2vmin, #f4ecfa 2vmin, #f4ecfa 4vmin);
  box-shadow: 0 1.2vmin 0 #ead5f5; border: 1vmin dashed #d9c2ec;
  font-size: 9vmin; font-weight: 700; color: var(--ink-soft);
}
.splash.solved { background: var(--c); border: 1vmin solid #fff; color: #fff; text-shadow: 0 .5vmin 0 rgba(0, 0, 0, .25); animation: pop-in .5s both; }

.shape-big { width: 40vmin; height: 40vmin; }
.shape-big .shape-svg { width: 100%; height: 100%; filter: drop-shadow(0 1vmin 0 rgba(0, 0, 0, .08)); }
.shape-big:not(.solved) { animation: pulse 1.8s ease-in-out infinite; }
.shape-big.solved { animation: pop-in .5s both; }
.shape-name { font-size: 10vmin; font-weight: 700; }
.t-shape { gap: 4vmin; }

.word-row { display: flex; gap: 1.5vmin; }
.w-letter {
  font-size: 20vmin; font-weight: 700; line-height: 1; color: var(--ink);
  background: #fff; border-radius: 3vmin; padding: 1vmin 2.5vmin 2vmin; box-shadow: 0 1vmin 0 #ead5f5;
  transition: transform .3s, color .3s, background .3s;
}
.w-letter.lit { color: #fff; background: var(--game); transform: translateY(-2vmin); }

.sound-wrap { display: grid; justify-items: center; gap: 1vmin; }
.speaker { font-size: 18vmin; animation: wag 0.8s ease-in-out infinite; }
.sound-bubble { font-size: 8vmin; font-weight: 700; color: var(--game); background: #fff; padding: 1vmin 4vmin; border-radius: 6vmin; box-shadow: 0 1vmin 0 #ead5f5; filter: brightness(.95); }

.pattern-row { display: flex; gap: 2vmin; align-items: center; flex-wrap: wrap; justify-content: center; }
.pat-item {
  font-size: 12vmin; line-height: 1; width: 17vmin; height: 17vmin; display: grid; place-items: center;
  background: #fff; border-radius: 3vmin; box-shadow: 0 1vmin 0 #ead5f5; animation: pop-in .4s both;
}
.mystery-sm { background: var(--game); color: #fff; font-weight: 700; font-size: 11vmin; animation: pulse 1.4s ease-in-out infinite; }
.mystery-sm.solved { background: #fff; animation: pop-in .5s both; }

/* Princess Pup and speech bubble */
.buddy { position: fixed; right: 3vmin; bottom: 3vmin; display: flex; align-items: flex-end; gap: 1vmin; z-index: 3; pointer-events: none; }
.buddy .mascot { font-size: 16vmin; }
.bubble {
  max-width: 50vmin; background: #fff; border-radius: 3vmin 3vmin .5vmin 3vmin; padding: 1.6vmin 2.4vmin;
  font-size: 2.6vmin; font-weight: 600; box-shadow: 0 .8vmin 0 #ead5f5, 0 2vmin 4vmin rgba(80, 30, 120, .15);
  opacity: 0; transform: translateY(2vmin) scale(.9); transition: .3s; margin-bottom: 10vmin;
}
.bubble.show { opacity: 1; transform: none; }

.cheer {
  position: fixed; left: 50%; top: 15%; transform: translate(-50%, -50%) scale(0); z-index: 4; pointer-events: none;
  font-size: 8vmin; font-weight: 700; color: #fff; padding: 1vmin 6vmin; border-radius: 999px; white-space: nowrap;
  text-shadow: 0 .6vmin 0 rgba(0, 0, 0, .15);
}
.cheer.good { background: linear-gradient(90deg, #ff6fb5, #a45cff); box-shadow: 0 1.4vmin 0 #b23b84; }
.cheer.bad { background: var(--sky); box-shadow: 0 1.4vmin 0 var(--sky-d); font-size: 7vmin; }
.cheer.show { animation: cheer-in 1.6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes cheer-in { 0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); } 20% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); } 80% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.8); opacity: 0; } }

/* Celebrate */
#screen-celebrate { align-items: center; justify-content: center; }
.celebrate-card { text-align: center; display: grid; justify-items: center; gap: 2vmin; }
.celebrate-card .yay { font-size: 14vmin; }
.celebrate-card .sticker { font-size: 34vmin; }
.celebrate-text { font-size: 5vmin; font-weight: 700; margin: 0; }
.players.dancing .avatar { animation: jump .6s ease-in-out infinite; }
.celebrate-actions { display: flex; gap: 3vmin; margin-top: 1vmin; }
.celebrate-actions .toy-btn { font-size: 3.4vmin; }

/* Settings */
.settings { border: 0; border-radius: 28px; padding: 28px 32px; width: min(520px, 92vw); color: var(--ink); box-shadow: 0 20px 60px rgba(60, 20, 90, .35); font-size: 18px; }
.settings::backdrop { background: rgba(70, 30, 100, .35); backdrop-filter: blur(3px); }
.settings h2 { margin: 0 0 12px; color: var(--purple); }
.settings label { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 12px 0; font-weight: 600; }
.settings label.check { justify-content: flex-start; font-weight: 500; }
.settings select { font: inherit; padding: 6px 10px; border-radius: 12px; border: 2px solid #e2cdee; background: #fff; color: var(--ink); }
.settings input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--pink); }
.dialog-actions { display: flex; justify-content: space-between; margin-top: 18px; }