/* ==========================================================================
   DISPUTT DESIGN SYSTEM — screens
   Layout and mood per screen.
   ========================================================================== */

.screen { gap: var(--s-4); }
.screen > .grow { min-height: 0; }

/* ---- Home ------------------------------------------------------------------- */
.home { overflow: hidden; overflow: clip; } /* clip (no scroll container) where supported, so the sticky dock keeps working */
.home__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  padding: var(--s-6) 0 var(--s-5);
  text-align: center;
}
.home__tagline { font-size: clamp(2.1rem, 10vw, 2.9rem); text-shadow: 3px 4px 0 var(--edge); }
.home__notice { color: var(--ink); font-weight: 700; }
.decor--home-a { top: 1rem; left: -1.5rem; --size: 6.5rem; }
.decor--home-b { top: 4.4rem; right: -1.8rem; --size: 6rem; }
.decor--home-c { bottom: 15.2rem; left: -0.9rem; --size: 4.4rem; }
.decor--home-d { bottom: 14rem; right: -0.7rem; --size: 4.2rem; }
@media (max-height: 740px) { .decor--home-c, .decor--home-d { display: none; } }

/* ---- Lobby ------------------------------------------------------------------ */
.qr { width: min(62vw, 14rem); aspect-ratio: 1; margin-inline: auto; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 3px var(--ink); }
.qr svg { width: 100%; height: 100%; }
.lobby__qr { align-items: center; }
.lobby__qr { gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-5); }
.lobby__code {
  margin: 0;
  padding: 0.12em 0.45em 0.2em 0.6em;
  font-size: 2.3rem;
  letter-spacing: 0.16em;
  color: var(--ink);
  background: var(--tex-grain), var(--tex-light), var(--yellow);
  border-radius: 46% 54% 49% 51% / 58% 46% 54% 42%;
  box-shadow: 0 5px 0 var(--yellow-deep);
  transform: rotate(-2deg);
}
/* ---- The packages (the paywall) ------------------------------------------------------------------------------------
   Shown when the host presses "Neste runde" after the free rounds, or from "Min tilgang" and "Logg inn". */
.paywall { gap: var(--s-3); }
.paywall__top { display: flex; align-items: center; min-height: 2.1rem; }
.paywall__top .btn--text { min-height: 2.1rem; margin-left: -0.6rem; }
.paywall__have { align-self: flex-start; }
.plans__detail { margin: 0; min-height: 2.4em; }
.paywall__fine { margin: 0; line-height: 1.35; }
.paywall__fine a { color: inherit; }
.accesscode { gap: var(--s-2); }
.accesscode .eyebrow { margin: 0; color: var(--ink); opacity: 0.78; } /* (on the paper card: the usual cream would not show) */

/* ---- The host's set-up: three steps -------------------------------------------------
   1 who you are, 2 how long to play, 3 the invitation. A bar of three segments and "Steg 2 av 3" tell where you are. */
.setup { gap: var(--s-3); }
.steps { display: grid; gap: 0.1rem; }
.steps__bar { display: flex; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.steps__seg { flex: 1; height: 0.5rem; border-radius: var(--r-pill); background: rgb(var(--cream-rgb) / 0.2); }
.steps__seg--done { background: var(--yellow); box-shadow: 0 2px 0 var(--yellow-deep); }
.steps__row { display: flex; align-items: center; justify-content: space-between; min-height: 2.1rem; }
.steps__row .btn--text { min-height: 2.1rem; margin-left: -0.6rem; }
.steps__row .eyebrow { margin: 0 0 0 auto; }
.setup__title { font-size: clamp(1.9rem, 8.6vw, 2.3rem); line-height: 1.05; }

/* step 2: the number, big, on a paper card */
.setup__points { align-items: stretch; gap: var(--s-1); padding: var(--s-5) var(--s-4); }
.setup__points .stepper .input { font-size: 4.2rem; line-height: 1; padding: 0.05em 0 0.1em; background: none; box-shadow: none; color: var(--ink); }
.setup__points .stepper .input:focus { box-shadow: 0 0 0 4px var(--yellow); }
.setup__unit { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; }
.setup__time { margin: var(--s-2) 0 0; font-weight: 700; }

/* step 3: the QR code beside the code, and how to join under them */
.invite { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-4); align-items: center; padding: var(--s-4); }
.invite__qr { display: grid; justify-items: center; gap: 0.3rem; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.invite__qr .qr { width: 8.5rem; margin: 0; }
.invite__zoom { font-size: 0.75rem; font-weight: 700; opacity: 0.7; }
.invite__side { display: grid; justify-items: center; gap: var(--s-2); }
.invite__label { margin: 0; font-size: 0.85rem; font-weight: 700; opacity: 0.75; }
.invite__code { font-size: 1.9rem; }
.lobby__players { font-size: 1.25rem; }
.lobby__rules { gap: 0 var(--s-2); }
.lobby__rules p { margin: 0; }
.lobby__rules .btn--text { min-height: 1.9rem; padding-block: 0.1rem; }
/* the bar at the bottom: who is in, and what is set, above the Start button */
.dock__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-1) var(--s-3); min-height: 2rem; }
.dock__status p { margin: 0; text-align: left; line-height: 1.25; }
.facepile { display: flex; flex: none; padding-left: 0.55rem; }
.facepile__face { margin-left: -0.55rem; box-shadow: 0 0 0 2px var(--burgundy-700); animation: pop 0.55s var(--ease-bounce) both; }
.facepile__more { display: grid; place-items: center; min-width: 2rem; height: 2rem; margin-left: -0.55rem; padding-inline: 0.3rem; border-radius: var(--r-pill); font-size: 0.8rem; font-weight: 800; color: var(--ink); background: var(--cream); box-shadow: 0 0 0 2px var(--burgundy-700); }
.player-grid--compact { gap: var(--s-3) var(--s-2); }
.player-grid--compact .player { width: 3.9rem; gap: 0.2rem; }
.player-grid--compact .player__name { max-width: 3.9rem; font-size: 0.8rem; }

.player { position: relative; }
.player__kick {
  position: absolute;
  top: -0.35rem;
  right: 0.1rem;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--cream);
  background: var(--burgundy-900);
  box-shadow: 0 2px 0 var(--edge);
  cursor: pointer;
}
.player__kick svg { width: 0.85rem; height: 0.85rem; }
.player__kick--armed { width: auto; padding: 0 0.6rem; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 700; color: var(--cream); background: var(--red); }

/* ---- In-round header ---------------------------------------------------------- */
.gamebar { gap: var(--s-3); }
.gamebar__actions { gap: var(--s-2); }

/* ---- Role reveal ----------------------------------------------------------------
   Nothing about the role is on the screen until a finger holds the button. The rest of the time the screen looks the same on
   every phone (an empty, dashed place for the card), so a glance at someone else's phone tells you nothing. The card that
   appears has the same size for both roles. */
.role { text-align: center; }
.role__eyebrow { padding-top: var(--s-5); }
/* the card's place takes whatever height is left and centres the card in it, so a card that is a little taller (a long answer)
   never pushes the button away from under the finger that is holding it */
.role__mid { flex: 1 1 0; min-height: 0; display: grid; place-items: center; }
.role__hold { display: grid; gap: var(--s-3); }
.role__hint { margin: 0; min-height: 2.9em; font-size: var(--fs-small); color: var(--fg-muted); }
.role__next { margin: 0; font-size: var(--fs-small); color: var(--fg-muted); }
.role__bar { padding: var(--s-4) 0 var(--page-bottom); }
.role .bar { height: 1.1rem; background: rgb(var(--shadow-rgb) / 0.3); }

.slot { display: grid; width: min(17.5rem, 100%); min-height: 9.2rem; transform: rotate(-1.6deg); }
.slot > * { grid-area: 1 / 1; min-width: 0; }
.slot__closed {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.35rem;
  border: 3px dashed rgb(var(--cream-rgb) / 0.42);
  border-radius: var(--r-card);
  font-size: var(--fs-small);
  color: var(--fg-muted);
}
.slot__closed p { margin: 0; }
.slot__eye { width: 4.4rem; height: auto; opacity: 0.85; }

.hold-btn {
  --tilt: 0deg;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.hold-btn.is-held { transform: translateY(4px); box-shadow: 0 1px 0 var(--btn-edge), 0 1px 0 1px var(--edge); }

.rolecard {
  display: grid;
  align-content: space-between;
  gap: 0.6rem;
  padding: 0.8rem 1rem 0.95rem;
  border-radius: var(--r-card);
  color: var(--ink);
  background: var(--tex-grain), var(--cream);
  box-shadow: var(--shadow-2);
  text-align: left;
}
.rolecard__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.75rem; }
.rolecard__eye { flex: none; width: 3.1rem; height: auto; }
.rolecard__word { min-width: 0; font-size: 2.1rem; line-height: 1; letter-spacing: 0.005em; }
.rolecard__word--impostor { color: var(--red); }
.rolecard__word--loyal { color: var(--blue); }
.rolecard__answer { display: grid; gap: 0.25rem; padding-top: 0.55rem; border-top: 2px dashed rgb(var(--ink-rgb) / 0.28); }
.rolecard__label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; color: rgb(var(--ink-rgb) / 0.75); }
.rolecard__pill {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.rolecard__dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50% 46% 54% 48% / 48% 52% 48% 52%;
  background: var(--tex-grain), var(--tex-light), var(--lime);
  box-shadow: 0 3px 0 rgb(var(--ink-rgb) / 0.25);
}

/* two impostors: the card gets a third part, so it is a little tighter */
.rolecard--duo { gap: 0.45rem; padding-block: 0.7rem 0.8rem; }
.rolecard--duo .rolecard__pill { font-size: 1.3rem; }
.rolecard__mate { --size: 1.5em; flex: none; box-shadow: 0 3px 0 rgb(var(--ink-rgb) / 0.25); }

/* the verdict screen shows the right answer the same way */
.role__answer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 9vw, 2.5rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.role__answer span {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50% 46% 54% 48% / 48% 52% 48% 52%;
  background: var(--tex-grain), var(--tex-light), var(--lime);
  box-shadow: 0 3px 0 rgb(var(--ink-rgb) / 0.25);
}

/* ---- Question / discussion -------------------------------------------------- */
.timer-block { padding: var(--s-2) 0; }
.timer-controls { display: flex; align-items: center; justify-content: center; gap: var(--s-3); width: 100%; }
.timer-controls .segmented { flex: 1; max-width: 17rem; }
/* the asker's screen is dense: everything about time sits on one row */
.question { gap: var(--s-3); }
.timebar { display: flex; align-items: center; gap: var(--s-3); }
.timebar .timer { flex: none; font-size: 2.35rem; text-shadow: 2px 3px 0 var(--edge); }
.timebar .segmented { flex: 1; min-width: 0; }
.timebar .btn { flex: none; padding-inline: 0.8rem; }
.question .timeup { text-align: center; }
.question__card { padding: var(--s-3) var(--s-4) var(--s-4); }
.question .option { min-height: 3.6rem; padding-block: 0.45rem; }
.question .option__letter { width: 2.6rem; height: 2.6rem; font-size: 1.5rem; }
.question .option__text { font-size: 1.15rem; }
.question .options { gap: var(--s-2); }
.dock--compact { padding-top: var(--s-3); }
.timeup { margin: 0; font-weight: 700; font-size: var(--fs-lead); color: var(--yellow); animation: pulse 1s ease-in-out infinite; }
.question__text { font-family: var(--font-text); font-weight: 700; font-size: clamp(1.45rem, 7vw, 1.8rem); line-height: 1.2; letter-spacing: 0; color: var(--ink); text-wrap: pretty; }
.discussion__tip { font-style: italic; font-size: var(--fs-small); }

/* ---- Countdown ------------------------------------------------------------------ */
.countdown__body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4); text-align: center; }
.countdown__n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: min(58vw, 15rem);
  line-height: 0.85;
  color: var(--yellow);
  text-shadow: 8px 10px 0 var(--edge);
  animation: pop 0.65s var(--ease-bounce) both;
}

/* ---- The reveal stage ------------------------------------------------------------------
   Nothing is revealed on a screen: the impostors say it out loud, and every phone looks the same meanwhile. */
.stage__body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4); text-align: center; }
.stage__art { width: min(50vw, 12rem, 26vh, 26dvh); height: auto; animation: wobble 3.5s ease-in-out infinite; }
.stage__title { font-size: clamp(2.1rem, 10vw, 2.8rem); line-height: 1.05; text-shadow: 3px 4px 0 var(--edge); }
.stage .lead { max-width: 20rem; }

/* ---- Summary ------------------------------------------------------------------------- */
.summary__head h1 { font-size: clamp(2.2rem, 10.5vw, 3.2rem); }
.impostor-card { gap: var(--s-4); align-items: center; }
.impostor-card__name { margin: 0; font-size: 2rem; line-height: 1.05; overflow-wrap: anywhere; }
.impostor-card__name--duo { font-size: 1.6rem; }
.impostor-card__faces { display: flex; flex: none; }
.impostor-card__faces > * + * { margin-left: -0.9rem; }

/* the answer key sheet ("Se fasit") */
.fasit { gap: var(--s-4); }
.fasit__row { display: grid; gap: 0.15rem; }
.fasit .eyebrow { margin: 0; color: var(--ink); opacity: 0.78; }
.fasit .role__answer { justify-content: flex-start; font-size: 1.9rem; }
.fasit__locked { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; line-height: 1.15; overflow-wrap: anywhere; }
.fasit__row--who { display: flex; align-items: center; gap: var(--s-4); }
.fasit__row--who .eyebrow { margin-bottom: 0.1rem; }

/* ---- Finale -------------------------------------------------------------------------------- */
.finale { position: relative; z-index: 0; isolation: isolate; }
.finale__hero { justify-content: center; align-items: center; padding-top: var(--s-6); }
.finale__hero .avatar--xl { margin-top: 3.2rem; }

/* ---- Rules ------------------------------------------------------------------------------------ */
.rules { display: flex; flex-direction: column; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.rules li { display: flex; align-items: flex-start; gap: var(--s-4); }
.rules__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50% 46% 54% 48% / 48% 52% 48% 52%;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--ink);
  background: var(--tex-grain), var(--tex-light), var(--yellow);
  box-shadow: 0 3px 0 var(--edge);
}
.rules h3 { margin-bottom: 0.15rem; }
.rules p { font-size: var(--fs-small); line-height: 1.4; }

/* ---- Wider screens: keep the phone-shaped column, add a little air ---------------------------- */
@media (min-width: 640px) {
  #app { box-shadow: 0 0 0 3px rgb(var(--cream-rgb) / 0.08), 0 0 80px rgb(var(--shadow-rgb) / 0.35); }
}
@media (max-height: 640px) {
  .home__hero { padding: var(--s-4) 0; gap: var(--s-4); }
}
/* Short screens: a browser's toolbars can leave only ~550 px. Trade air for room instead of pushing text under the button.
   (`node tools/qa/fit.mjs` checks that the at-a-glance screens fit.) */
@media (max-height: 700px) {
  /* the asker's screen is the densest one: question, four options and the lock button */
  .question { gap: var(--s-2); }
  .question .option { min-height: 3.25rem; }
  .question .option__letter { width: 2.35rem; height: 2.35rem; font-size: 1.4rem; }
}
@media (max-height: 660px) {
  .discussion .avatar--lg { --size: 4.75rem; }
  .discussion .timer { font-size: clamp(3.4rem, 17vw, 4.6rem); }
}
@media (max-height: 620px) {
  .stage__body { gap: var(--s-3); }
  .stage__title { font-size: clamp(1.9rem, 9vw, 2.4rem); }
}
@media (max-height: 580px) {
  .discussion__hint { display: none; } /* "who has the question" already says it; the sentence under it is the first thing to go */
}
/* The packages on a short screen: the three cards and the buttons are the screen. The sentence under the title goes first, then air. */
@media (max-height: 650px) {
  .paywall { gap: var(--s-2); }
  .paywall .lead { display: none; }
  .paywall .plans { gap: var(--s-2); }
  .plan { padding-block: 0.5rem; }
}