/* ==========================================================
   KiddiesTV game kit styles: the start card on each game page,
   the full-screen play layer, the "Time's up!" screen and the
   high score tables. Loaded after assets/style.css, so the site
   colours (--c1/--c2, .pill, .c-green ...) all work here.
   ========================================================== */

/* ---------- the start card on the page ---------- */
.kg-card {
  position: relative; max-width: 780px; margin-inline: auto; text-align: center;
  background: #fff; border: 5px solid var(--c1); border-radius: var(--round);
  padding: clamp(1rem, 3vw, 2rem); box-shadow: var(--shadow-m);
}
.kg-card-body h2 { margin: 0 0 .9rem; font-size: clamp(1.3rem, 2.6vw, 1.8rem); }

.kg-name { display: grid; justify-items: center; gap: .35rem; margin-bottom: 1.1rem; font-weight: 900; }
.kg-name span { font-size: 1.05rem; }
.kg-name input {
  font: inherit; font-weight: 800; font-size: 1.25rem; color: var(--ink);
  padding: .7rem 1.1rem; border-radius: var(--pill);
  border: 4px solid var(--c2); background: var(--cream); width: min(100%, 22rem);
}
.kg-name input:focus { outline: none; border-color: var(--c1); background: #fff; }
.kg-name-hint { display: none; font-weight: 800; font-size: .9rem; color: var(--pink-1); }
.kg-needs-name .kg-name-hint { display: block; }
.kg-needs-name .kg-name input { border-color: var(--pink-1); animation: kgShake .45s; }
@keyframes kgShake { 25% { translate: -6px 0; } 50% { translate: 6px 0; } 75% { translate: -3px 0; } }

.kg-pick { margin: 0 0 .6rem; font-weight: 900; font-size: 1.05rem; }
.kg-levels { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.kg-level {
  font: inherit; color: var(--ink); cursor: pointer; text-align: center;
  display: grid; justify-items: center; gap: .1rem;
  padding: .9rem .7rem 1rem; border-radius: 26px;
  background: var(--c2); border: 4px solid var(--c1);
  box-shadow: 0 6px 0 rgba(42,46,67,.16);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
  touch-action: manipulation;
}
.kg-level:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 10px 0 rgba(42,46,67,.16); }
.kg-level:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(42,46,67,.16); }
.kg-level-ico { font-size: 2.2rem; line-height: 1.1; }
.kg-level b { font-size: 1.3rem; font-weight: 900; }
.kg-level small { font-weight: 800; font-size: .85rem; color: #3D4260; }   /* darker than --ink-soft so it reads on every level colour */
.kg-level em { font-style: normal; font-weight: 700; font-size: .85rem; }
.kg-note { margin: 1rem 0 0; font-size: .85rem; color: var(--ink-soft); }

/* ---------- high score tables ---------- */
.kg-scores { max-width: 640px; margin-inline: auto; }
.kg-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: 0 0 .7rem; }
.kg-tabs button {
  font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer;
  padding: .45rem 1rem; border-radius: var(--pill); border: 3px solid var(--ink);
  background: #fff; color: var(--ink); touch-action: manipulation;
}
.kg-tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.kg-tabs-who button { border-color: var(--purple-1); color: var(--purple-1); }
.kg-tabs-who button[aria-pressed="true"] { background: var(--purple-1); color: #fff; }

.kg-table { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; text-align: left; }
.kg-table li {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .6rem;
  background: #fff; border-radius: 18px; padding: .45rem .9rem;
  border: 3px solid #EEE7DA; font-weight: 800;
}
.kg-table li:nth-child(1) { border-color: #F5C528; background: #FFF8DA; }
.kg-table li:nth-child(2) { border-color: #C9CFDA; }
.kg-table li:nth-child(3) { border-color: #E9B27C; }
.kg-table li.is-new { border-color: var(--green-1); background: #E9FBEF; animation: kgGlow 1.2s ease 2; }
@keyframes kgGlow { 50% { box-shadow: 0 0 0 6px rgba(63,168,91,.25); } }
.kg-rank { font-size: 1.15rem; text-align: center; font-weight: 900; }
.kg-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kg-pts { font-weight: 900; font-variant-numeric: tabular-nums; }
.kg-pts small { font-weight: 700; color: var(--ink-soft); font-size: .75em; }
.kg-empty { text-align: center; color: var(--ink-soft); font-weight: 700; margin: .8rem 0; }

/* ---------- the play layer: covers the whole screen while a round is on ---------- */
html.kg-lock, html.kg-lock body { overflow: hidden; }
.kg-overlay {
  position: fixed; inset: 0; z-index: 2147483000;
  display: none; flex-direction: column;
  background: #8BDDF8; color: var(--ink);
  font-family: var(--font);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.kg-overlay.is-open { display: flex; }

.kg-bar {
  flex: none; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(.5rem, 2vw, 1rem);
  padding: .55rem clamp(.6rem, 2vw, 1.2rem);
  padding-top: max(.55rem, env(safe-area-inset-top));
  background: #fff; box-shadow: 0 4px 0 rgba(42,46,67,.12); position: relative; z-index: 3;
}
.kg-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 3px solid #E4DCCB; background: var(--cream);
  font-size: 1.35rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  color: var(--ink); touch-action: manipulation; padding: 0;
}
.kg-stop { font-size: 1.15rem; font-weight: 900; }
.kg-score { display: grid; line-height: 1; text-align: center; min-width: 5.5rem; }
.kg-score span { font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.kg-score b { font-size: clamp(1.7rem, 4.5vw, 2.3rem); font-weight: 900; font-variant-numeric: tabular-nums; color: var(--pink-1); }
.kg-score b.is-bump { animation: kgBump .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes kgBump { 40% { transform: scale(1.3); } }
.kg-time { height: 18px; border-radius: 99px; background: #EEE7DA; overflow: hidden; }
.kg-time span { display: block; height: 100%; background: var(--green-1); border-radius: 99px; transform-origin: left center; }
.kg-hurry .kg-time span { background: var(--red-1); }

.kg-stage { position: relative; flex: 1; min-height: 0; }
.kg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }

.kg-prompt {
  position: absolute; z-index: 2; top: .7rem; left: 50%; translate: -50% 0;
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  font: inherit; font-weight: 900; font-size: clamp(1.05rem, 3.6vw, 1.6rem); color: var(--ink);
  background: #fff; border: 4px solid var(--ink); border-radius: var(--pill);
  padding: .35rem 1.1rem; box-shadow: 0 5px 0 rgba(42,46,67,.18); cursor: pointer;
  touch-action: manipulation;
}
.kg-prompt.is-new { animation: kgPrompt .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes kgPrompt { 0% { transform: scale(.6); } 70% { transform: scale(1.08); } }
.kg-swatch { width: 1.2em; height: 1.45em; border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%; display: inline-block; border: 3px solid rgba(42,46,67,.25); }
.kg-target {
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .25em;
  border-radius: 12px; background: var(--purple-1); color: #fff; font-size: 1.15em;
}

.kg-count {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none;
  font-weight: 900; font-size: clamp(3.5rem, 16vw, 8rem); color: #fff;
  text-shadow: 0 6px 0 rgba(42,46,67,.25); opacity: 0;
}
.kg-count.is-on { opacity: 1; }
.kg-count.is-pulse { animation: kgCount .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes kgCount { 0% { transform: scale(.3); } 60% { transform: scale(1.1); } }

/* ---------- panels: stop?, paused, time's up ---------- */
.kg-panel {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  padding: clamp(.6rem, 3vw, 1.5rem); background: rgba(16,40,70,.45);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.kg-panel[hidden] { display: none; }
.kg-sheet {
  width: min(100%, 620px); max-height: 100%; overflow-y: auto;
  background: var(--cream); border-radius: var(--round); border: 5px solid #fff;
  padding: clamp(1rem, 3.5vw, 2rem); text-align: center; box-shadow: var(--shadow-l);
  -webkit-user-select: text; user-select: text;
}
.kg-sheet h2 { margin: 0 0 .6rem; }
.kg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.1rem; }
.kg-actions .pill { touch-action: manipulation; }

.kg-over { margin: 0; font-weight: 900; color: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; }
.kg-cheer { font-size: clamp(1.5rem, 5vw, 2.2rem); color: var(--purple-1); }
.kg-points { margin: 0; font-weight: 900; font-size: 1.2rem; }
.kg-points b { font-size: clamp(2.8rem, 10vw, 4rem); color: var(--pink-1); line-height: 1; margin-right: .15em; }
.kg-sub { margin: .2rem 0 .4rem; color: var(--ink-soft); font-weight: 700; }
.kg-stars { margin: .2rem 0 .6rem; font-size: clamp(2.4rem, 9vw, 3.2rem); line-height: 1; letter-spacing: .1em; }
.kg-stars span { color: #E4DCCB; display: inline-block; }
.kg-stars span.is-on { color: #FFC72C; text-shadow: 0 3px 0 #E0A000; animation: kgStar .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes kgStar { 0% { transform: scale(0) rotate(-40deg); } }
.kg-flag { font-weight: 900; color: var(--green-1); margin: .2rem 0 .8rem; }
.kg-end-tables { margin-top: .9rem; }

/* "You made the Everyone top 10!" */
.kg-join { background: #fff; border-radius: 24px; border: 4px solid #FFC72C; padding: 1rem; margin: .4rem 0 .6rem; }
.kg-join h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
.kg-join p { margin: 0 0 .6rem; font-size: .92rem; font-weight: 700; color: var(--ink-soft); }
.kg-colours, .kg-animals { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-bottom: .6rem; }
.kg-colours button {
  width: 40px; height: 40px; border-radius: 50%; border: 4px solid #fff; background: var(--sw);
  box-shadow: 0 0 0 2px #E4DCCB; cursor: pointer; padding: 0; touch-action: manipulation;
}
.kg-animals button {
  width: 48px; height: 48px; border-radius: 14px; border: 3px solid #EEE7DA; background: var(--cream);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0; touch-action: manipulation;
}
.kg-colours button[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--ink); transform: scale(1.1); }
.kg-animals button[aria-pressed="true"] { border-color: var(--ink); background: #FFF4C2; transform: scale(1.1); }
.kg-join-name { font-size: 1.3rem !important; color: var(--ink) !important; font-weight: 900 !important; }
.kg-join-msg { color: var(--red-1) !important; }
.kg-join .kg-actions { margin-top: .3rem; }

@media (prefers-reduced-motion: reduce) {
  .kg-level, .kg-prompt.is-new, .kg-count.is-pulse, .kg-stars span.is-on, .kg-score b.is-bump, .kg-table li.is-new { animation: none !important; transition: none !important; }
}

/* ---------- the game page hero: the game's picture beside its name ---------- */
.game-hero-art {
  width: clamp(200px, 34vw, 420px); height: auto; border-radius: 28px;
  border: 6px solid #fff; background: #fff; rotate: -3deg;
  box-shadow: 0 10px 0 rgba(6,58,84,.18), 0 18px 32px rgba(6,58,84,.18);
}
@media (max-width: 640px) { .game-hero-art { width: min(100%, 340px); } }

/* anything the kit hides must stay hidden, whatever display a rule above gives it */
.kg-overlay [hidden], .kg-card [hidden] { display: none !important; }

/* picture credits at the foot of a game page (e.g. Twemoji animals) */
.game-credits { margin: 0; font-size: .8rem; color: var(--ink-soft); text-align: center; }
.game-credits a { color: inherit; }