/*
 * Phone client layout. Every colour, radius and line width is a token from theme.css.
 *
 * Three constraints from T-020 and CONTRACTS §12.6 drive most of this file:
 *   - the page must not scroll, bounce or pull-to-refresh
 *   - nothing interactive may sit in the bottom 24 px (the iOS home-indicator gesture)
 *   - portrait, with safe-area padding, and no zoom
 */

html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.play {
  display: flex;
  flex-direction: column;
  /* Fallback first, for browsers without dvh: 100% of a fixed-height html/body. Those that
     understand dvh take the second declaration (T-078; the order used to be reversed, so the
     fallback always won). */
  height: 100%;
  height: 100dvh;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  box-sizing: border-box;
}

.play__main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 20px;
}

/*
 * The dead zone. CONTRACTS §12.6 and T-020: a swipe that starts in the bottom 24 px is the
 * system's home-indicator gesture on iOS, so nothing interactive may live there. The footer
 * reserves it, and is itself not interactive below that line.
 */
.play__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  font-size: 13px;
  color: var(--c-text-dim);
}

.foot__privacy {
  color: var(--c-text-dim);
  text-decoration: underline;
}

.view {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.view[hidden] {
  display: none;
}

.view__title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.05;
  margin: 0;
  text-align: center;
}

.view__lead {
  font-size: 19px;
  line-height: 1.4;
  text-align: center;
  margin: 0;
  color: var(--c-text);
}

/* --- team picker --- */

.teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  background: var(--c-surface);
  border: var(--line-hairline) solid var(--c-border);
  border-radius: var(--radius-l);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  /* A thumb target, not a mouse target. */
  min-height: 150px;
  cursor: pointer;
}

.team:active {
  background: var(--c-surface-raised);
}

.team--chosen {
  border-color: var(--c-accent);
}

.team__logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.team__name {
  font-family: var(--font-display);
  font-size: 24px;
  text-align: center;
}

.team__count {
  font-size: 13px;
  color: var(--c-text-dim);
}

/* --- nickname --- */

.nick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.nick__label {
  font-size: 14px;
  color: var(--c-text-dim);
  text-align: center;
}

.nick__input {
  width: 6ch;
  padding: 10px 8px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 28px;
  text-transform: uppercase;
  color: var(--c-text);
  background: var(--c-surface-raised);
  border: var(--line-hairline) solid var(--c-border);
  border-radius: var(--radius-m);
}

.nick__input:focus {
  outline: var(--line-hairline) solid var(--c-accent);
}

.nick__note {
  font-size: 12px;
  color: var(--c-text-dim);
  margin: 0;
  text-align: center;
}

/* --- waiting and playing --- */

.chosen {
  text-align: center;
  color: var(--c-text-dim);
  font-size: 15px;
  margin: 0;
}

.view--play {
  flex: 1 1 auto;
  justify-content: flex-end;
  /* T-078: allowed to shrink below its content, or a short landscape stage overflows. */
  min-height: 0;
}

.play__hint {
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--c-text-dim);
  margin: 0;
}

.play__stage {
  flex: 1 1 auto;
  min-height: 0;
}

/* --- reconnect overlay --- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c-page) 88%, transparent);
}

.overlay[hidden] {
  display: none;
}

.overlay__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 28px;
  background: var(--c-surface);
  border: var(--line-hairline) solid var(--c-border);
  border-radius: var(--radius-m);
}

.overlay__text {
  margin: 0;
  font-size: 17px;
  color: var(--c-text);
}

.overlay__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-accent);
  border-radius: var(--radius-pill);
  animation: overlay-spin 900ms linear infinite;
}

@keyframes overlay-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .overlay__spinner {
    animation: none;
  }
}

/* --- the goal view and the ball socket (T-022) --- */

.play__stage {
  position: relative;
  /* The swipe surface must own its gestures, not the browser. */
  touch-action: none;
}

.play__canvas {
  /* T-078: out of flow. In flow, the canvas's own pixel height (set from the stage) became the
     stage's content height, so the stage could never shrink after a rotation and pushed the
     counters off the top of a landscape screen. */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* --- the player's own counters (T-023) --- */

.tally {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}

.tally__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.tally__value {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.tally__label {
  font-size: 10px;
  line-height: 1.2;
  color: var(--c-text-dim);
  text-align: center;
  /* "Tolpat ja rimat" is long; let it wrap rather than push the grid out of shape. */
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
 * The personal shot map (T-026, CONTRACTS §9.1).
 *
 * One canvas that fills what the result view has left. Everything inside it is drawn
 * from theme tokens; there is no colour literal here and none in shotmap.js.
 * ------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
 * RESULT: winner, both teams, own counters, then the map (T-024).
 * ------------------------------------------------------------------------ */

.winner {
  margin: 4px 0 10px;
  text-align: center;
}

.winner__label {
  display: block;
  color: var(--c-text-dim);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.winner__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  color: var(--c-accent);
}

.teams-result {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.teamrow {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  background: var(--c-surface);
  border: var(--line-hairline) solid transparent;
}

/* The winning row, not a colour literal away from the accent used everywhere else. */
.teamrow--won {
  border-color: var(--c-accent);
  background: var(--c-surface-raised);
}

.teamrow__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
}

.teamrow__goals {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
}

/* Tehokkuus is what decides the game (§3.3), so it is not the small print. */
.teamrow__eff {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--c-accent);
}

.teamrow__efflabel {
  color: var(--c-text-dim);
  font-size: 12px;
}

.tally--result {
  margin-bottom: 4px;
}

/* Both logos on the waiting screen (LOBBY and IDLE). */
.waitlogos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
}

.waitlogos__logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
}

.view--result {
  display: flex;
  flex-direction: column;
  /* Claim the height the main area has left, so the map is the size of the screen and not
     the size of its own content. Without the grow the canvas collapses to a thumbnail. */
  flex: 1 1 auto;
  min-height: 0;
}

.map {
  flex: 1 1 auto;
  /* A flex child will not shrink below its content without this, and the canvas then
     pushes the footer off a short phone. */
  min-height: 0;
  margin-top: 8px;
}

.map__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* r3.5 (operator, 2026-10-16: "the heatmap was way too small"): the page cannot scroll (swipes
   own the screen), so the map is guaranteed most of the height instead of whatever was left:
   at 56 % of a 375 x 667 phone it is drawn at 80 % of the width. test/shotmap.test.js reads
   this number. */
.view--result .map {
  min-height: var(--result-map-min-height);
}

/* On a short phone, the result view drops what is already on screen elsewhere: the score line
   repeats the team rows, and the winning row is highlighted, so the big winner name goes. */
@media (max-height: 820px) {
  /* The score line repeats the team rows below, so it goes. The winner stays (review r3.5:
     the operator approved it in T-024), compacted onto one line. */
  .view--result .view__lead {
    display: none;
  }
  .view--result .winner {
    margin: 0 0 4px;
  }
  .view--result .winner__label,
  .view--result .winner__name {
    display: inline;
  }
  .view--result .winner__label {
    margin-right: 0.5em;
  }
  .view--result .winner__name {
    font-size: 24px;
  }
  .view--result .view__title {
    font-size: 26px;
  }
  .view--result .teams-result {
    margin-top: 8px;
  }
  .view--result .teamrow {
    padding: 4px 12px;
  }
}

/* --- T-085: change team / nickname while joining is open --- */

.change {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.change[hidden] {
  display: none;
}

.change--play {
  margin-top: 6px;
}

.change__btn {
  min-height: 44px;
  padding: 10px 16px;
  font: inherit;
  font-size: 15px;
  color: var(--c-text);
  background: var(--c-surface);
  border: var(--line-hairline) solid var(--c-border);
  border-radius: var(--radius-m);
}

/* --- T-081: the game in progress, for a phone that has no team --- */

.progress__score {
  margin: 12px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--c-text);
}

.progress__clock {
  margin: 4px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--c-accent);
}

/* --------------------------------------------------------------------------
 * r3.5: the raffle winner's own screen. Big enough to show across a table.
 * ------------------------------------------------------------------------ */

.view--prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex: 1 1 auto;
  text-align: center;
}

.prize__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-prize-title);
  color: var(--c-accent);
}

.prize__who {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-prize-who);
  color: var(--c-text);
}

.prize__code {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-prize-code);
  letter-spacing: 0.08em;
  color: var(--c-accent);
}

.prize__code:empty {
  display: none;
}

/* r3.6: while the draw spins, on every phone's result view. */
.result__raffle {
  margin: 0 0 4px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-raffle-line);
  color: var(--c-accent);
}

.prize__claim {
  margin: 0;
  font-size: var(--type-prize-claim);
  color: var(--c-text-dim);
}