/* The results celebration and the pause menu extras (#72 should 14 and 19; Game/Results.cs,
   Game/PauseModel.cs): confetti in the winner's colour, a podium, "Play again ✓" votes, buttons
   locked for 2 s, the pause menu's pages and the hold-to-confirm Quit. Reduced motion: a few
   pieces that fade in place, no bounce. Uses app.css's variables. */

/* ------------------------------------------------------------ confetti */

.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.confetti i {
  position: absolute;
  top: -4vh;
  left: var(--x);
  width: calc(0.5em * var(--s));
  height: calc(0.95em * var(--s));
  border-radius: 0.12em;
  background: var(--c);
  opacity: 0;
  animation: confetti-fall var(--t) cubic-bezier(0.3, 0.1, 0.6, 1) var(--d) 1 forwards;
}

.confetti i:nth-child(3n) {
  border-radius: 50%;
  height: calc(0.5em * var(--s));
}

@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), 108vh) rotate(var(--r));
  }
}

/* Calm: 14 pieces drift a little and fade, no spin. */
.reduced-motion .confetti i:nth-child(n + 15) {
  display: none;
}

.reduced-motion .confetti i {
  top: calc(4vh + var(--s) * 18vh);
  animation: confetti-calm 3.2s ease-out var(--d) 1 forwards;
}

@keyframes confetti-calm {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  25% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(3vh);
  }
}

/* ------------------------------------------------------------ results dialog and podium */

.pg-dialog.results {
  position: relative;
  border-top: 0.3em solid var(--win);
}

/* Low weight (:where): hud-layout.css fits both dialogs into a phone's safe area instead. */
:where(.pg-dialog.results, .pg-dialog.pause) {
  max-height: 94vh;
  overflow-y: auto;
}

.results-title {
  animation: results-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes results-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}

.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5em;
  margin: 0.4em auto 0.9em;
}

.podium .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 8.5em;
  min-width: 0;
}

.podium .step.empty {
  visibility: hidden;
}

.podium .who {
  display: flex;
  gap: 0.15em;
  justify-content: center;
}

.podium .shape {
  display: block;
  filter: drop-shadow(0 0.2em 0.25em rgba(0, 0, 0, 0.45));
  animation: podium-in 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.podium .shape svg {
  display: block;
}

.podium .s3 .shape {
  animation-delay: 0.15s;
}

.podium .s2 .shape {
  animation-delay: 0.3s;
}

.podium .s1 .shape {
  animation:
    podium-in 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) 0.5s both,
    podium-hop 1.1s ease-in-out 1.2s 3;
}

@keyframes podium-in {
  from {
    transform: translateY(-1.5em) scale(0.4);
    opacity: 0;
  }
}

@keyframes podium-hop {
  50% {
    transform: translateY(-0.35em);
  }
}

.podium .names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.25em 0;
  font-size: max(var(--fs-small), 0.85em);
  font-weight: 900;
  line-height: 1.15;
  max-width: 100%;
}

.podium .names span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium .block {
  width: 100%;
  display: grid;
  place-items: center;
  border-radius: 0.5em 0.5em 0 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--c) 55%, transparent),
    color-mix(in srgb, var(--c) 18%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--c) 70%, transparent);
  border-bottom: 0;
  font-size: 1.4em;
  font-weight: 900;
}

.podium .s1 .block {
  height: 3.4em;
}

.podium .s2 .block {
  height: 2.3em;
}

.podium .s3 .block {
  height: 1.5em;
}

/* The buttons' wrapper adds no box, so hud-layout.css's sticky button row sticks to the dialog. */
#results-actions {
  display: contents;
}

.results-table .pg-table {
  margin-bottom: 0.4em;
}

/* "Play again? Ⓐ" with each gamepad player's tick. */
.votes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4em 0.6em;
  min-height: 0;
}

.votes:empty {
  display: none;
}

.votes .pg-why {
  margin: 0.3em 0 0;
}

.votes-label {
  color: var(--ui-dim);
  font-weight: 800;
}

.vote {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.6em;
  border-radius: 0.7em;
  border: 2px solid var(--ui-line);
  font-weight: 800;
}

.vote.on {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 22%, transparent);
}

.vote b {
  min-width: 1em;
  text-align: center;
}

.vote.on b {
  color: var(--c);
}

.votes-count {
  color: var(--ui-dim);
  font-variant-numeric: tabular-nums;
}

/* Locked for 2 s (4 s with Timers Long, none with Off): a bar fills under the buttons, then they wake up. */
/* Low weight: on phones hud-layout.css keeps the buttons sticky at the bottom (also positioned). */
:where(.pg-actions.locked) {
  position: relative;
  padding-bottom: 0.5em;
}

.pg-actions.locked::after {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 0.22em;
  border-radius: 0.2em;
  background: var(--ui-text);
  opacity: 0.5;
  transform-origin: left;
  animation: results-lock var(--lock, 2s) linear both; /* --lock: the Timers setting */
}

@keyframes results-lock {
  from {
    transform: scaleX(0);
  }
}

.reduced-motion .results-title,
.reduced-motion .podium .shape {
  animation: none;
}

.reduced-motion .pg-actions.locked::after {
  animation-timing-function: steps(4);
}

/* ------------------------------------------------------------ pause menu */

/* Nearly opaque: the menu's text must not mix with the board behind it. */
.pg-dialog.pause,
.pg-dialog.results {
  background: rgba(18, 16, 26, 0.97);
}

.high-contrast .pg-dialog.pause,
.high-contrast .pg-dialog.results {
  background: var(--ui);
}

.pg-dialog.pause {
  max-width: min(90vw, 56em);
}

.pause-by {
  margin: 0.1em 0 0.4em;
}

.pause-menu {
  display: grid;
  /* Controls, How to play, Settings, Test controllers: two by two. */
  grid-template-columns: repeat(2, minmax(8em, 1fr));
  gap: 0.6em;
  margin-top: 0.9em;
}

/* Resume, and Use as a controller (a phone playing as its own screen) after the four pages,
   take a whole row: no button is left alone in a row. */
.pause-menu .btn.primary,
.pause-menu [data-act='to-controller'] {
  grid-column: 1 / -1;
}

/* Big enough to tap (#72: at least 44 px). */
.pause-menu .btn,
.pause-quit .btn,
.pg-dialog.pause .pg-actions .btn {
  min-height: 44px;
}

.pause-quit {
  border-top: 1px solid var(--ui-line);
  padding-top: 0.9em;
}

.pause-sub {
  margin: 0.4em 0 0.6em;
  font-size: 1.2em;
  font-weight: 900;
}

.pause-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16em), 1fr));
  gap: 0.7em;
  text-align: left;
}

.ctl-card {
  padding: 0.7em 0.9em;
  border-radius: 0.8em;
  border: 1px solid var(--ui-line);
  border-left: 0.3em solid var(--c);
}

.ctl-card h4 {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0 0.4em;
  font-size: 1em;
  font-weight: 900;
}

.ctl-card h4 em {
  margin-left: auto;
  font-style: normal;
  font-size: max(var(--fs-small), 0.8em);
  color: var(--ui-dim);
}

.ctl-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25em 0.8em;
  margin: 0;
}

.ctl-card dt {
  color: var(--ui-dim);
}

.ctl-card dd {
  margin: 0;
}

.ctl-card kbd,
.ctl-card .pb {
  margin-right: 0.15em;
}

.pause-help {
  max-height: 52vh;
  overflow-y: auto;
  text-align: left;
  padding-right: 0.4em;
}

.pause-settings {
  text-align: left;
}

.pause-settings .row > .label {
  min-width: 7em;
}

.pause-settings .ctl {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
}

.pause-settings .count {
  min-width: 3.2em;
}

/* Hold to confirm: the fill grows with --hold (0…1, set by C# while it is held). */
.btn.hold {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  touch-action: none;
  user-select: none;
}

.btn.hold .hold-fill {
  position: absolute;
  inset: 0;
  background: #f2545b;
  opacity: 0.55;
  transform: scaleX(var(--hold, 0));
  transform-origin: left;
}

.btn.hold .hold-text,
.btn.hold small {
  position: relative;
}

.btn.hold small {
  font-size: max(var(--fs-small), 0.7em);
  color: var(--ui-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Tap twice (Held buttons: Tap on, tap off): "tap twice", then "tap again" while armed. */
.btn.hold.tap .tap-2,
.btn.hold.tap.armed .tap-1 {
  display: none;
}

.btn.hold.tap.armed .tap-2 {
  display: inline;
  color: var(--ui-text);
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 600px), (max-height: 500px) {
  .podium .step {
    width: 6em;
  }

  .podium .s1 .block {
    height: 2.4em;
  }

  .podium .s2 .block {
    height: 1.6em;
  }

  .podium .s3 .block {
    height: 1.1em;
  }

  .podium .shape svg {
    width: 2.2em;
    height: 2.2em;
  }

  .pause-menu {
    grid-template-columns: 1fr;
  }
}

/* Big text (#72: data-fit narrow, under 36 lines of text wide, e.g. 200 % on a tablet): one
   column of pause buttons, and their key labels may wrap, so nothing sticks out sideways. */
:root[data-fit='narrow'] .pause-menu {
  grid-template-columns: 1fr;
}

:root[data-fit='narrow'] .pause-menu .btn {
  flex-wrap: wrap;
  white-space: normal;
  min-width: 0;
}

/* A phone on its side: no room for the podium; the table already shows the order. */
@media (max-height: 500px) {
  .podium {
    display: none;
  }
}

/* Hints only for inputs that are there (Shell/App.InputHints.cs, #70): no gamepad and no phone,
   no Ⓐ / Ⓑ badges; a touch screen or a match of gamepads only, no key labels. */
.no-pad :is(.pg-dialog, .pg-pause-btn) .pb {
  display: none;
}

.no-keys :is(.pg-dialog, .pg-pause-btn) kbd {
  display: none;
}

/* Hold Back to leave (#72 should 23): the line under Quit. */
.pause-hold-hint {
  margin: 0.6em 0 0;
  font-size: max(var(--fs-small), 0.85em);
}

/* "Hold Ⓑ or Esc" (Ui/Html.HoldKeys): only the inputs that are there; neither (a touch screen
   with no gamepad), no hold line at all, since tapping is the way. */
.no-pad :is(.hk-pad, .hk-or),
.no-keys :is(.hk-keys, .hk-or),
.no-pad.no-keys .hk-all {
  display: none;
}