/* ==========================================================================
   Runden — the photo-pointing game. Full-screen overlay, Plakat furniture.
   Runden owns green; every screen here is ground + line + green.
   ========================================================================== */

.runden-app { min-height: 40vh; }

.runden-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: var(--ground);
  display: flex; flex-direction: column;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.runden-overlay.is-open { opacity: 1; }

.runden-overlay-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: max(0.7rem, env(safe-area-inset-top)) var(--sp-3) 0.7rem;
  border-bottom: var(--line-w) solid var(--line);
  background: var(--accent);
}
.runden-overlay-home {
  font-family: var(--display); font-size: var(--step--1);
  text-decoration: none; color: var(--accent-ink);
  text-transform: uppercase;
}
.runden-overlay-close {
  width: 2.2rem; height: 2.2rem; flex: none;
  background: var(--card); color: var(--ink);
  border: var(--line-w-s) solid var(--line);
  box-shadow: var(--off-s) var(--off-s) 0 var(--line);
  font-family: var(--display); cursor: pointer;
}

.runden-overlay-stage {
  flex: 1; min-height: 0; overflow-y: auto;
  /* Not justify-content:center — with overflow-y:auto that clips the top of
     any screen taller than the stage. Auto margins on the child centre short
     screens and collapse on tall ones. */
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: var(--sp-4) var(--sp-3) max(2rem, env(safe-area-inset-bottom));
  width: min(520px, 100%); margin-inline: auto;
}
.runden-overlay-stage > * { margin-block: auto; width: 100%; }

/* ---------- Shared type ---------- */
.runden-setup h2, .runden-pass h2, .runden-round-done h2,
.runden-reveal-card h2, .runden-reveal-done h2 {
  text-align: center; text-transform: uppercase;
  font-size: var(--step-3);
  margin-bottom: var(--sp-2);
}
.runden-hint {
  text-align: center; color: var(--ink-dim);
  font-size: var(--step--1);
  margin: 0 auto var(--sp-4); max-width: 40ch;
}
.runden-step-label {
  text-align: center;
  font-family: var(--display); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: var(--sp-2);
}
.runden-progress {
  text-align: center;
  font-family: var(--display); font-size: var(--step--1);
  text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink);
  border: var(--line-w-s) solid var(--line);
  padding: 0.25rem 0.7rem;
  width: fit-content; margin: 0 auto var(--sp-3);
}
.runden-count { text-align: center; font-weight: 700; font-size: var(--step--1); margin-bottom: var(--sp-3); }
.runden-warning {
  text-align: center; font-weight: 700; font-size: var(--step--1);
  background: var(--pink); color: #0D0D0D;
  border: var(--line-w-s) solid var(--line);
  padding: 0.4rem; margin-top: var(--sp-2);
}
.runden-preset-badge {
  display: block; width: fit-content; margin: 0 auto var(--sp-3);
  background: var(--accent); color: var(--accent-ink);
  border: var(--line-w-s) solid var(--line);
  font-family: var(--display); font-size: var(--step--1);
  padding: 0.3rem 0.8rem;
}

/* ---------- Buttons ---------- */
.runden-btn {
  display: block; width: 100%;
  font-family: var(--display); font-size: var(--step-1);
  text-align: center; padding: 0.95rem 1.2rem;
  background: var(--card); color: var(--ink);
  border: var(--line-w) solid var(--line);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.runden-btn:active:not(:disabled) { transform: translate(var(--off), var(--off)); box-shadow: 0 0 0 var(--line); }
.runden-btn:disabled { background: var(--ground-alt); color: var(--ink-dim); box-shadow: none; cursor: default; }
.runden-btn-primary { background: var(--accent); color: var(--accent-ink); }
.runden-btn-secondary { background: var(--card); }
.runden-btn + .runden-btn { margin-top: var(--sp-2); }
.runden-btn-text {
  display: block; width: 100%; margin-top: var(--sp-3);
  background: none; border: 0; box-shadow: none;
  color: var(--ink-dim); font-size: var(--step--1); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; padding: 0.4rem;
}

/* ---------- Intro steps ---------- */
.runden-steps-list {
  list-style: none; display: grid; gap: var(--sp-2);
  margin: 0 auto var(--sp-4); max-width: 340px;
}
.runden-steps-list li {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--card);
  border: var(--line-w-s) solid var(--line);
  padding: 0.6rem 0.8rem;
  font-size: var(--step--1); font-weight: 600;
}
.runden-steps-list li span {
  flex: none; width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  border: var(--line-w-s) solid var(--line);
  font-family: var(--display); font-size: 0.8rem;
}

/* ---------- Settings cards ---------- */
.runden-settings-card {
  background: var(--card);
  border: var(--line-w) solid var(--line);
  box-shadow: var(--shadow);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.runden-settings-card h3 {
  font-size: var(--step-0); text-transform: uppercase;
  text-align: center; margin-bottom: var(--sp-3);
}
.runden-range-row { display: flex; align-items: center; gap: var(--sp-2); }
.runden-range-label {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  color: var(--ink-dim); flex: none; width: 3.4rem;
}
.runden-range-label:last-child { text-align: right; }
.runden-range-value {
  text-align: center; margin-top: var(--sp-2);
  font-family: var(--display); font-size: var(--step--1);
  text-transform: uppercase;
}

/* Segmented control (rundelengde / straff) */
.runden-segmented {
  display: flex;
  border: var(--line-w-s) solid var(--line);
}
.runden-seg-btn {
  flex: 1;
  font-family: var(--display); font-size: 0.82rem;
  text-transform: uppercase;
  padding: 0.55rem 0.3rem;
  background: var(--card); color: var(--ink);
  border: 0; cursor: pointer;
}
.runden-seg-btn + .runden-seg-btn { border-left: var(--line-w-s) solid var(--line); }
.runden-seg-btn.is-active { background: var(--accent); color: var(--accent-ink); }

/* Steppers */
.runden-stepper-row { display: flex; gap: var(--sp-3); }
.runden-stepper { flex: 1; }
.runden-stepper-label {
  display: block; text-align: center;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: var(--sp-1);
}
.runden-stepper-controls { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.runden-stepper-btn {
  width: 2.3rem; height: 2.3rem;
  background: var(--card); color: var(--ink);
  border: var(--line-w-s) solid var(--line);
  box-shadow: var(--off-s) var(--off-s) 0 var(--line);
  font-family: var(--display); font-size: var(--step-1);
  cursor: pointer;
}
.runden-stepper-btn:active { transform: translate(var(--off-s), var(--off-s)); box-shadow: 0 0 0 var(--line); }
.runden-stepper-value {
  font-family: var(--display); font-size: var(--step-2);
  min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums;
}
.runden-stepper-wide .runden-stepper-controls { gap: var(--sp-4); }
.runden-count-value { font-size: var(--step-3); }

/* ---------- Player grid ---------- */
.runden-player-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.runden-player-chip { position: relative; aspect-ratio: 1; }
.runden-retake-player {
  display: block; width: 100%; height: 100%;
  padding: 0; background: none; cursor: pointer;
  border: var(--line-w-s) solid var(--line);
  box-shadow: var(--off-s) var(--off-s) 0 var(--line);
  overflow: hidden;
}
.runden-player-chip img { width: 100%; height: 100%; object-fit: contain; background: var(--ground-alt); }
.runden-remove-player {
  position: absolute; top: -6px; right: -6px;
  width: 1.5rem; height: 1.5rem;
  background: var(--pink); color: #0D0D0D;
  border: var(--line-w-s) solid var(--line);
  font-family: var(--display); font-size: 0.7rem;
  cursor: pointer; z-index: 1;
}
.runden-add-player-btn { margin-bottom: var(--sp-3); }

/* Reads like the stepper's number, but it is a fact rather than a control:
   once photos exist the count is however many faces there are. */
.runden-count-static {
  font-family: var(--display); font-size: var(--step-3);
  text-align: center; line-height: 1; margin: var(--sp-1) 0 0;
}

/* Photo progress strip */
.runden-photo-strip {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-1); margin-bottom: var(--sp-3);
}
/* Empty slots were dashed, which at this size rendered as broken columns
   between neighbours and left corners looking open — and a dashed rule was
   the only one on the whole site. Solid rule everywhere; a slot reads as
   filled by gaining the photo and the hard shadow, not by changing border. */
.runden-photo-dot {
  flex: none;
  width: 2.4rem; height: 2.4rem;
  background: var(--ground-alt);
  border: var(--line-w-s) solid var(--line);
  overflow: hidden;
}
.runden-photo-dot.is-done {
  background: var(--ground-alt);
  box-shadow: var(--off-s) var(--off-s) 0 var(--line);
}
.runden-photo-dot img { width: 100%; height: 100%; object-fit: contain; }

/* Settings summary on the ready screen */
.runden-summary {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-1); margin: 0 0 var(--sp-3);
}
.runden-summary span {
  background: var(--card);
  border: var(--line-w-s) solid var(--line);
  padding: 0.3rem 0.6rem;
  font-size: var(--step--1); font-weight: 700;
}

/* ---------- Pass / round screens ---------- */
.runden-pass, .runden-round, .runden-round-done, .runden-reveal-card, .runden-reveal-done { text-align: center; }
.runden-pass-icon { font-size: 2.8rem; line-height: 1; margin-bottom: var(--sp-2); }
/* Whose turn it is has to be unmistakable, so this one is never cropped:
   the photo keeps its own shape inside a fixed box. */
.runden-pass-img {
  display: block;
  max-width: min(11rem, 60vw); max-height: min(11rem, 26vh);
  width: auto; height: auto;
  margin: 0 auto var(--sp-3);
  background: var(--ground-alt);
  border: var(--line-w) solid var(--line);
  box-shadow: var(--shadow);
}
.runden-pass-btn { margin-top: var(--sp-3); }

.runden-holder-card { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.runden-holder-img {
  width: 3rem; height: 3rem; object-fit: contain;
  background: var(--ground-alt);
  border: var(--line-w-s) solid var(--line);
}
.runden-holder-label { font-family: var(--display); font-size: var(--step--1); text-transform: uppercase; }

.runden-question-card {
  background: var(--accent); color: var(--accent-ink);
  border: var(--line-w) solid var(--line);
  box-shadow: var(--shadow);
  padding: var(--sp-4) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.runden-question-card h2 {
  font-family: var(--body); font-weight: 700;
  font-size: clamp(1.3rem, 5.5vw, 1.9rem); line-height: 1.2;
  text-transform: none; margin: 0;
}

.runden-target-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--sp-2);
}
.runden-target-btn {
  aspect-ratio: 1; padding: 0; cursor: pointer;
  background: var(--card);
  border: var(--line-w-s) solid var(--line);
  box-shadow: var(--off-s) var(--off-s) 0 var(--line);
  overflow: hidden;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.runden-target-btn:active { transform: translate(var(--off-s), var(--off-s)); box-shadow: 0 0 0 var(--line); }
.runden-target-btn img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Reveal ---------- */

/* Reveal titles are category names, and a couple of them are single long
   compounds ("Hemmelighetsbæreren"). At the shared heading size that word is
   wider than a phone, and an unbreakable word does not wrap on its own — it
   just runs off the edge. Let the size fall with the viewport and allow the
   break. */
.runden-reveal-card h2 {
  font-size: clamp(1.35rem, 7vw, var(--step-3));
  overflow-wrap: anywhere;
  hyphens: auto;
}


/* The faces are the payoff of a whole round of pointing, so the card leads
   with them at a size you can read across a table, not with a sentence that
   had a stamp-sized photo wedged into it. */
.runden-subject-photos {
  display: flex; justify-content: center; flex-wrap: wrap; align-items: flex-start;
  gap: var(--sp-2); margin: 0 auto var(--sp-3);
}
/* Bounded by viewport height as well as width: the card also has to fit a
   wheel and a button under it on a short phone. Photos keep their own shape
   so nobody is cropped out of their own reveal. */
.runden-subject-photos img {
  width: auto; height: auto;
  max-width: min(9.5rem, 52vw); max-height: min(9.5rem, 22vh);
  background: var(--ground-alt);
  border: var(--line-w) solid var(--line);
  box-shadow: var(--shadow);
}
.runden-subject-photos:has(img + img) img {
  max-width: min(6.5rem, 34vw); max-height: min(6.5rem, 16vh);
}
.runden-subject-photos.is-many img {
  max-width: 4rem; max-height: min(4rem, 11vh);
  box-shadow: var(--shadow-s);
}

.runden-reveal-text {
  margin: 0 auto var(--sp-3); max-width: 30ch;
  font-size: var(--step-0); font-weight: 700;
}

/* What the button is about to decide, said before it is pressed. */
.runden-stake {
  font-family: var(--display); font-size: 0.74rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: var(--sp-2);
}
.runden-task-tease {
  width: 5rem; height: 5rem; margin: 0 auto;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 2.6rem; color: var(--accent-ink);
  background: var(--accent);
  border: var(--line-w) solid var(--line);
  box-shadow: var(--shadow);
}

.runden-spin-stage { display: grid; place-items: center; margin-bottom: var(--sp-3); }
.runden-spin-stage:empty { margin-bottom: 0; }

/* The card can be taller than a phone once a wheel, a photo and a result are
   on it. Let it fill the stage and stick the action to the bottom, so the
   button that moves the game on is never the part you have to scroll for. */
/* The stage centres short screens with auto margins; this one instead fills
   the stage, so "push the action to the bottom" has a bottom to push to. */
.runden-overlay-stage > .runden-reveal-card { margin-block: 0; flex: 1 1 auto; }
.runden-reveal-card {
  display: flex; flex-direction: column;
}
.runden-reveal-card .runden-spin-stage { flex: 1 1 auto; align-content: center; }
.runden-reveal-actions {
  position: sticky; bottom: 0; z-index: 4;
  margin-top: auto;
  padding-top: var(--sp-2);
  padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom));
  background: var(--ground);
}
.runden-reveal-actions .runden-btn { margin: 0; }

.runden-result { text-align: center; }
.runden-result-photos { display: flex; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.runden-result-photos img {
  width: auto; height: auto;
  max-width: 4.5rem; max-height: min(4.5rem, 12vh);
  background: var(--ground-alt);
  border: var(--line-w) solid var(--line);
  box-shadow: var(--shadow-s);
}
.runden-result-amount {
  font-family: var(--display); font-size: var(--step-3);
  text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink);
  border: var(--line-w) solid var(--line);
  padding: 0.4rem 0.8rem; width: fit-content; margin: var(--sp-2) auto 0;
}
.runden-result-label {
  font-family: var(--display); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim); margin-top: var(--sp-2);
}
.runden-result-task {
  font-weight: 700; font-size: var(--step-1); line-height: 1.25;
  max-width: 26ch; margin: var(--sp-1) auto 0;
  background: var(--card);
  border: var(--line-w-s) solid var(--line);
  padding: var(--sp-2);
}

/* ---------- Wheel ----------
   Same poster as everything else: one hard black rule, one hard offset
   shadow, flat palette colour, nothing soft. It is shown standing still
   first — the wedges are the answer to "what am I risking here". */
.runden-wheel-wrap {
  position: relative;
  width: min(15rem, 68vw, 30vh); aspect-ratio: 1;
  margin: 0 auto;
}
.runden-wheel {
  width: 100%; height: 100%; border-radius: 50%;
  border: var(--line-w) solid var(--line);
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
/* A still wheel invites a press; a spinning one must not wobble. */
.runden-wheel-wrap.is-spinning .runden-wheel { box-shadow: none; }

.runden-wheel-pointer {
  position: absolute; top: -0.75rem; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0; z-index: 3;
  border-left: 0.85rem solid transparent;
  border-right: 0.85rem solid transparent;
  border-top: 1.35rem solid var(--line);
}
.runden-wheel-hub {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2.4rem; height: 2.4rem; border-radius: 50%; z-index: 2;
  background: var(--card);
  border: var(--line-w) solid var(--line);
}

.runden-wheel-segment {
  position: absolute; top: 50%; left: 50%;
  transform-origin: 0 0;
  display: grid; place-items: center;
}
.runden-wheel-faces { display: flex; gap: 2px; }
.runden-wheel-segment img {
  width: 2.2rem; height: 2.2rem; object-fit: contain;
  background: #FFFFFF;
  border: var(--line-w-s) solid #0D0D0D;
}
/* Wedge colours are fixed palette values in both themes, so the ink on them
   is always the dark one — never the theme's foreground. */
.runden-wheel-number {
  font-family: var(--display); font-size: 1.3rem; color: #0D0D0D;
}

/* Reassurance on the photo screen — people are pointing a camera at their
   friends, so say plainly where the pictures go. */
.runden-privacy {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--card);
  border: var(--line-w-s) solid var(--line);
  color: var(--ink-dim);
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: center;
}
.runden-privacy strong { color: var(--ink); text-transform: uppercase; }


/* ---------- Short phones ----------
   Must live at the end of the file: a media query adds no specificity, so
   these have to come after the base rules they override.

   Sticky keeps the button reachable, but a button floating over the bottom
   half of the wheel is not the same as a card that fits. On a short screen
   the chrome, the photo and the wheel each give up height until the whole
   card sits inside the viewport with nothing overlapping. */
@media (max-height: 700px) {
  .runden-overlay-stage {
    padding-top: var(--sp-2);
    padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom));
  }
  .runden-reveal-card .runden-progress { margin-bottom: var(--sp-1); }
  .runden-reveal-card h2 { margin-bottom: var(--sp-1); }
  .runden-subject-photos { margin-bottom: var(--sp-2); }
  .runden-subject-photos img { max-height: min(9.5rem, 15vh); }
  .runden-subject-photos:has(img + img) img { max-height: min(6.5rem, 12vh); }
  .runden-subject-photos.is-many img { max-height: min(4rem, 9vh); }
  .runden-reveal-card .runden-reveal-text {
    margin-bottom: var(--sp-2); font-size: var(--step--1);
  }
  .runden-reveal-card .runden-stake { margin-bottom: var(--sp-1); }
  .runden-reveal-card .runden-spin-stage { margin-bottom: var(--sp-2); }
  .runden-wheel-wrap { width: min(15rem, 68vw, 26vh); }
  .runden-task-tease { width: 4rem; height: 4rem; font-size: 2rem; }
}