/* games-c: Parrot Says, Tic-Tac-Word, Word Train and Word Race (see styles.css for the shared tokens and components). */

/* Parrot Says */

/* Sizes in the perch scale with --perch (bigger in a desktop's side panel). */
.parrot-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(132px * var(--perch, 1));
  height: calc(132px * var(--perch, 1));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  transform: translate(-50%, -50%);
}
/* A sound ring: a 4px stroke growing from the halo's edge (radius 66) to 90 as it fades. */
.parrot-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(136px * var(--perch, 1));
  height: calc(136px * var(--perch, 1));
  border: 4px solid;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  animation-fill-mode: forwards;
}
.parrot-ring-a { animation-name: parrot-ring-a; }
.parrot-ring-b { animation-name: parrot-ring-b; }
/* The second ring follows a little behind the first. */
.parrot-ring-late-a { animation-name: parrot-ring-a; animation-delay: 0.1s; animation-duration: 0.9s; }
.parrot-ring-late-b { animation-name: parrot-ring-b; animation-delay: 0.1s; animation-duration: 0.9s; }
@keyframes parrot-ring-a {
  from { width: calc(136px * var(--perch, 1)); height: calc(136px * var(--perch, 1)); opacity: 0.75; }
  to { width: calc(184px * var(--perch, 1)); height: calc(184px * var(--perch, 1)); opacity: 0; }
}
@keyframes parrot-ring-b {
  from { width: calc(136px * var(--perch, 1)); height: calc(136px * var(--perch, 1)); opacity: 0.75; }
  to { width: calc(184px * var(--perch, 1)); height: calc(184px * var(--perch, 1)); opacity: 0; }
}
.parrot-hop-a { animation: parrot-hop-a 0.48s linear; }
.parrot-hop-b { animation: parrot-hop-b 0.48s linear; }
@keyframes parrot-hop-a {
  0% { transform: translateY(0); }
  25% { transform: translateY(-14px); }
  62.5% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}
@keyframes parrot-hop-b {
  0% { transform: translateY(0); }
  25% { transform: translateY(-14px); }
  62.5% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}
.parrot-bird { display: block; position: relative; }
.parrot-bird:disabled { cursor: default; }
.parrot-pills { animation: parrot-pills-in 0.32s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes parrot-pills-in { from { opacity: 0; transform: scale(0.7); } }
.parrot-pill { white-space: nowrap; }
.parrot-pill:disabled { cursor: default; }

/* The cards are dealt in one after another (the delay is set per card). */
.parrot-deal { animation: parrot-deal 0.42s cubic-bezier(0.3, 1.45, 0.5, 1) both; }
@keyframes parrot-deal { from { opacity: 0; transform: scale(0); } }
.parrot-shake { animation: parrot-shake 0.38s linear; }
@keyframes parrot-shake {
  0% { transform: translateX(0); }
  13% { transform: translateX(-10px); }
  29% { transform: translateX(10px); }
  45% { transform: translateX(-8px); }
  61% { transform: translateX(8px); }
  76% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}
.parrot-bounce { animation: parrot-bounce 0.5s cubic-bezier(0.3, 1.8, 0.5, 1); }
@keyframes parrot-bounce { from { transform: scale(1.08); } }
.parrot-card { display: block; padding: 0; transition: background-color 0.3s ease; }
.parrot-card:disabled { cursor: default; }
.parrot-face { position: absolute; inset: 10px; transition: opacity 0.25s ease; }
/* The word nobody got glows green so it is learned. */
.parrot-learn {
  position: absolute;
  inset: 0;
  border: 3px solid var(--success);
  border-radius: 22px;
  pointer-events: none;
  animation: parrot-glow 0.6s ease-in-out infinite alternate;
}
@keyframes parrot-glow { from { opacity: 0.4; } to { opacity: 1; } }
.parrot-badge { position: absolute; top: 10px; right: 10px; border-radius: 50%; }
.parrot-points {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: grid;
  justify-items: center;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--gold);
  pointer-events: none;
  animation: parrot-rise 1.1s cubic-bezier(0, 0, 0.2, 1) both;
}
.parrot-points > span { grid-area: 1 / 1; }
.parrot-points-rim { color: var(--gold-ledge); -webkit-text-stroke: 5px var(--gold-ledge); }
@keyframes parrot-rise {
  0% { transform: translateY(0); opacity: 1; }
  37% { opacity: 1; }
  100% { transform: translateY(-46px); opacity: 0; }
}

/* Tic-Tac-Word */

.tic-banner { animation: tic-banner-in 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes tic-banner-in { from { opacity: 0; transform: scale(0.7); } }
.tic-dot-pop { animation: tic-dot-pop 0.5s cubic-bezier(0.3, 1.8, 0.5, 1); }
@keyframes tic-dot-pop { from { transform: scale(1.6); } }
.tic-board { display: grid; flex-shrink: 0; animation: tic-board-in 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes tic-board-in { from { transform: scale(0.85); } }
.tic-enter { animation: tic-enter 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes tic-enter { from { transform: scale(0.6); } }
.tic-square { display: flex; transition: background-color 0.3s ease; }
.tic-square:disabled { cursor: default; }
.tic-term { display: block; max-width: 100%; font-weight: 800; line-height: 1.2; }
.tic-lines { max-width: 100%; }
/* The board's room: on a phone the board sits near the top, above where the question slides up. */
.tic-room { padding: 16px 20px 12px; }
.tic-room-duel { padding-top: 14px; }
/* Stella's eye on a square: a gold outline that pulses with it. */
.tic-eyed { animation: tic-eye 0.42s ease-in-out infinite alternate; }
@keyframes tic-eye {
  from { transform: scale(1); box-shadow: inset 0 0 0 3px rgba(255, 200, 61, 0.5), var(--card-shadow); }
  to { transform: scale(1.05); box-shadow: inset 0 0 0 3px rgba(255, 200, 61, 1), var(--card-shadow); }
}
.tic-mark { animation: tic-mark-pop 0.5s cubic-bezier(0.3, 1.7, 0.5, 1) both; }
/* The mark about to go breathes, faint. */
.tic-mark.tic-fading {
  animation: tic-mark-pop 0.5s cubic-bezier(0.3, 1.7, 0.5, 1) both, tic-fade 0.42s ease-in-out infinite alternate;
}
@keyframes tic-mark-pop { from { transform: scale(0); } }
@keyframes tic-fade { from { opacity: 0.285; } to { opacity: 0.38; } }
.tic-stroke { position: absolute; pointer-events: none; animation: tic-stroke 0.45s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes tic-stroke { from { width: var(--cap); } }
.tic-dim-in { animation: fadeIn 0.2s ease both; }
.tic-dim-out { animation: tic-fade-out 0.25s ease both; }
@keyframes tic-fade-out { to { opacity: 0; } }
.tic-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 10px 10px; }
.tic-sheet-in { animation: tic-sheet-in 0.42s cubic-bezier(0.25, 1.15, 0.4, 1) both; }
.tic-sheet-out { animation: tic-sheet-out 0.26s ease-in both; }
@keyframes tic-sheet-in { from { transform: translateY(100%); opacity: 0; } }
@keyframes tic-sheet-out { to { transform: translateY(100%); opacity: 0; } }

/* A wide chunky answer: a face on a ledge that it drops onto while pressed. */
.tic-option, .race-answer {
  --face: #fff;
  --ledge: var(--line);
  --rim: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  border-radius: 18px;
  background: var(--face);
  box-shadow: 0 5px 0 var(--ledge), inset 0 0 0 1px var(--rim);
  transition: background-color 0.3s ease, transform 0.08s ease, box-shadow 0.08s ease;
}
.tic-option { width: 100%; height: 52px; padding: 0 16px; }
.race-answer { height: 62px; padding: 0 10px; }
.tic-option:disabled, .race-answer:disabled { cursor: default; }
.tic-option.live:active, .race-answer.live:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ledge), inset 0 0 0 1px var(--rim);
}

/* Word Train */

.train-clue-done { animation: train-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes train-pop { from { transform: scale(0.92); } }
/*
 * The sky strip: rails drawn on a canvas, the cars placed over them each frame from TrainMotion.
 * Car and wagon sizes are the phone's times --tk (bigger on a desktop; see TrainGame's trainScale).
 */
.train-strip {
  align-self: stretch;
  margin: 0 16px;
  padding-top: 12px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(to bottom, #DDF1FF, #F4FAFF);
}
.train-sun {
  position: absolute;
  top: 0;
  right: 18px;
  width: calc(34px * var(--tk, 1));
  height: calc(34px * var(--tk, 1));
  border-radius: 50%;
  background: #FFD45C;
}
.train-rails { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.train-shaker { padding: 0 8px calc(20px * var(--tk, 1)); }
.train-shake-a { animation: train-shake-a 0.42s linear; }
.train-shake-b { animation: train-shake-b 0.42s linear; }
@keyframes train-shake-a {
  0% { transform: translateX(0); }
  14% { transform: translateX(-12px); }
  31% { transform: translateX(12px); }
  48% { transform: translateX(-8px); }
  64% { transform: translateX(6px); }
  100% { transform: translateX(0); }
}
@keyframes train-shake-b {
  0% { transform: translateX(0); }
  14% { transform: translateX(-12px); }
  31% { transform: translateX(12px); }
  48% { transform: translateX(-8px); }
  64% { transform: translateX(6px); }
  100% { transform: translateX(0); }
}
.train-cars { position: relative; height: calc(55px * var(--tk, 1)); }
/* Every car is placed by its transform alone (set each frame from the plan). */
.train-cars > * { position: absolute; left: 0; top: 0; will-change: transform; }
.train-engine { width: calc(65px * var(--tk, 1)); height: calc(55px * var(--tk, 1)); padding-right: calc(3px * var(--tk, 1)); }
.train-engine > img { position: absolute; left: 0; }
.train-wagon { flex-shrink: 0; }
.train-wagon-in { position: relative; display: flex; flex-direction: column; align-items: center; height: calc(55px * var(--tk, 1)); }
.train-wagon-in:disabled { cursor: default; }
.train-body {
  position: relative;
  min-width: calc(46px * var(--tk, 1));
  height: calc(44px * var(--tk, 1));
  padding: 0 calc(10px * var(--tk, 1));
  border-radius: calc(10px * var(--tk, 1)) calc(10px * var(--tk, 1)) calc(6px * var(--tk, 1)) calc(6px * var(--tk, 1));
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.train-dash { position: absolute; inset: 0; border: 2px dashed; border-radius: 8px; pointer-events: none; }
.train-wheels { position: absolute; bottom: 0; left: 50%; gap: calc(14px * var(--tk, 1)); transform: translateX(-50%); }
.train-wheel {
  width: calc(14px * var(--tk, 1));
  height: calc(14px * var(--tk, 1));
  border-radius: 50%;
  border: calc(3px * var(--tk, 1)) solid #9CA3AF;
  background: #3B2C63;
}
.train-yard {
  align-content: flex-start;
  gap: calc(10px * var(--tk, 1)) calc(6px * var(--tk, 1));
  padding: 0 16px;
  min-height: 0;
  overflow-y: auto;
}

/* Word Race */

/* Sizes in a lane (the flag's, the runner's place, the count's) are set by RaceGame's Lane. */
.race-flag {
  position: absolute;
  right: 2px;
  top: 2px;
  background: repeating-conic-gradient(#1E1B4B 0 25%, #fff 0 50%);
}
/* A runner springs to its new place along the lane. */
.race-runner { position: absolute; transition: left 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }
.race-runner > div { position: relative; }
.race-medal { position: absolute; top: -2px; right: -6px; }
.race-count { position: absolute; top: 50%; transform: translateY(-50%); }
.race-hop-a { animation: race-hop-a 0.38s linear; }
.race-hop-b { animation: race-hop-b 0.38s linear; }
@keyframes race-hop-a { 0%, 100% { transform: translateY(0); } 31.6% { transform: translateY(-8px); } }
@keyframes race-hop-b { 0%, 100% { transform: translateY(0); } 31.6% { transform: translateY(-8px); } }
.race-shake-a { animation: race-shake-a 0.4s linear; }
.race-shake-b { animation: race-shake-b 0.4s linear; }
@keyframes race-shake-a {
  0% { transform: translateX(0); }
  15% { transform: translateX(-10px); }
  32.5% { transform: translateX(10px); }
  50% { transform: translateX(-6px); }
  67.5% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
@keyframes race-shake-b {
  0% { transform: translateX(0); }
  15% { transform: translateX(-10px); }
  32.5% { transform: translateX(10px); }
  50% { transform: translateX(-6px); }
  67.5% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
.race-clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (hover: hover) {
  .tic-option.live:hover, .race-answer.live:hover { filter: brightness(1.03); }
  .tic-square.tappable:hover { box-shadow: inset 0 0 0 2px var(--line), var(--card-shadow); }
  .parrot-card.tappable:hover { filter: brightness(1.02); box-shadow: 0 8px 22px rgba(30, 27, 75, 0.14); }
  .parrot-bird:not(:disabled):hover { filter: brightness(1.04); }
}

@media (min-width: 900px) {
  /* Tic-Tac-Word: the board centred in all the room beside the side panel. */
  .tic-room, .tic-room-duel { display: flex; flex-direction: column; justify-content: center; padding: 4px 0 0; }
  /* The question slides up in the side panel, beside the board, so the board stays in view. */
  .tic-sheet { right: auto; width: var(--tic-side, 360px); padding: 0 0 16px; }
  /* Word Train: the yard's wagons centred under the track. */
  .train-yard { justify-content: center; }
}