/* ==========================================================================
   Keep It Up — styles. Theme tokens and shared components come from
   shared/style.css.

   A game is drawn full-screen on a canvas, with the score and hearts on top
   (and online, the others in a strip under them). The menu and the online
   results are ordinary page sections.
   ========================================================================== */

.ku { display: grid; gap: .7rem; max-width: 30rem; margin-inline: auto; padding-block: .5rem 2rem; }
.ku-title { font-size: clamp(1.6rem, 7vw, 2.2rem); text-align: center; }
.ku-center { text-align: center; }
.ku-center-btn { justify-self: center; }
.ku-note { font-size: 1.05rem; font-weight: 700; text-align: center; }
.ku-top { display: flex; align-items: center; gap: .6rem; }

/* ---------- Menu ---------- */

.ku-menu { display: grid; gap: .7rem; }
.ku-things { font-size: 2rem; letter-spacing: .15em; text-align: center; }
.ku-tagline { font-size: 1.1rem; font-weight: 700; text-align: center; }
.ku-best { font-weight: 900; text-align: center; }
.howto { max-width: 30rem; margin: 1.5rem auto 0; padding: .25rem 1rem; }
.howto summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.howto ol { display: grid; gap: .5rem; padding: 0 0 1rem; padding-inline-start: 1.4rem; list-style: decimal; }

/* ---------- Playing ---------- */

html.is-playing, html.is-playing body { overflow: hidden; overscroll-behavior: none; }

.ku-play {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: linear-gradient(#8fd3f4 0%, #c7ecff 60%, #ffe8c2 100%);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ku-play { background: linear-gradient(#0e2a3d 0%, #1b4560 60%, #3b3249 100%); }
}
.ku-field { flex: 1; min-height: 0; width: 100%; display: block; }
.ku-hud {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: max(.5rem, env(safe-area-inset-top)) max(.6rem, env(safe-area-inset-right)) .3rem max(.6rem, env(safe-area-inset-left));
}
.ku-hud__box, .ku-hud__count, .ku-hud__hearts {
  padding: .2rem .6rem;
  font-weight: 900;
  color: var(--ink);
  background: rgb(255 250 240 / .92);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
}
.ku-hud__box { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ku-hud__hearts { margin-inline-start: auto; font-size: .85rem; letter-spacing: .05em; }
.ku-exit {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font: inherit;
  font-weight: 900;
  color: var(--ink);
  background: rgb(255 250 240 / .92);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
}

/* The others, online: a strip under the score. */
.ku-chips { display: flex; gap: .35rem; padding: 0 .6rem .3rem; overflow-x: auto; scrollbar-width: none; }
.ku-play .ku-chips { flex: none; }
.ku-chip { flex: none; display: flex; align-items: center; gap: .3rem; padding: .15rem .55rem; font-size: .8rem; font-weight: 800; color: var(--ink); background: rgb(255 250 240 / .9); border: 2px solid var(--ink); border-radius: 999px; }
.ku-chip.is-you { background: #ffe9a8; }
.ku-chip.is-done { opacity: .5; }
.ku-chip__name { max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ku-chip__hearts { font-size: .7rem; }
.ku .ku-chips { flex-wrap: wrap; padding: 0; }

/* The end of a game alone: a card over the field. */
.ku-over {
  position: absolute;
  padding: 1.2rem 1.1rem 1.3rem;
  top: 50%;
  left: 50%;
  display: grid;
  gap: .6rem;
  width: min(26rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow: auto;
  transform: translate(-50%, -50%);
  user-select: text;
  -webkit-user-select: text;
  animation: ku-pop .35s cubic-bezier(.2, 1.4, .5, 1) both;
}
@keyframes ku-pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ku-over { animation: none; } }
.ku-bigscore { font-size: clamp(2.6rem, 14vw, 3.6rem); font-weight: 900; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.ku-newbest { font-weight: 900; text-align: center; color: var(--tomato); }

/* ---------- Online results ---------- */

.ku-board { display: grid; gap: .4rem; }
.ku-board__row { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; background: var(--surface); border: 2.5px solid var(--line); border-radius: 14px; }
.ku-board__row.is-you { box-shadow: 3px 3px 0 var(--sea); }
.ku-board__row.is-winner { background: #fff3bf; color: var(--ink); }
.ku-board__place { width: 1.4rem; text-align: center; }
.ku-board__face { font-size: 1.5rem; }
.ku-board__who { flex: 1; min-width: 0; display: grid; font-weight: 800; }
.ku-board__who bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ku-board__who small { font-weight: 700; color: var(--muted); }
.ku-board__row.is-winner .ku-board__who small { color: inherit; opacity: .7; }
.ku-board__wins { font-size: .85rem; font-weight: 800; }
.ku-board__score { font-variant-numeric: tabular-nums; white-space: nowrap; }