/* ═══════════════════════════════════════════════════════════════════════════
   Regluvörður — game SPA + leaderboard
   Phone-frame layout (393×852) ported from the design repo's shared.css.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Barlow:wght@400;500;600&display=swap');

@font-face {
  font-family: 'Suisse Intl';
  src: url('../fonts/SuisseIntl-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Suisse Intl';
  src: url('../fonts/SuisseIntl-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ────────────────────────────────────────────────────────── */
.regluvordur-game-wrapper {
  /* Colors */
  --rv-bg1: rgb(71,61,45);
  --rv-bg2: rgb(56,48,33);
  --rv-accent: rgb(177,141,88);
  --rv-gold: rgb(255,189,0);
  --rv-gold-soft: rgb(255,213,97);
  --rv-card: rgb(246,247,246);
  --rv-teal: rgb(94,156,146);
  --rv-teal-dark: rgb(72,130,120);
  --rv-red: rgb(193,77,77);
  --rv-green: rgb(74,156,86); /* golf-fairway green — accumulated-score roll-up */
  --rv-text: rgb(51,43,31);
  --rv-text-dark: rgb(16,16,16);
  --rv-text-muted: rgba(51,43,31,0.5);
  --rv-option-bg: rgb(245,245,244);
  --rv-option-border: rgb(211,183,139);
  --rv-white: #fff;
  --rv-white-50: rgba(255,255,255,0.5);
  --rv-white-60: rgba(255,255,255,0.6);
  --rv-error-light: #ffb4b4;

  /* Spacing — value-keyed (irregular scale, see TOKEN-INVENTORY.md) */
  --rv-space-8: 8px;
  --rv-space-10: 10px;
  --rv-space-12: 12px;
  --rv-space-14: 14px;
  --rv-space-16: 16px;
  --rv-space-18: 18px;
  --rv-space-20: 20px;
  --rv-space-22: 22px;
  --rv-space-24: 24px;
  --rv-space-30: 30px;

  /* Radius */
  --rv-radius-full: 50%;
  --rv-radius-button: 22px;

  /* Typography */
  --rv-fw-medium: 500;
  --rv-fw-semibold: 600;
  --rv-fw-bold: 700;
  --rv-fs-12: 12px;
  --rv-fs-13: 13px;
  --rv-fs-16: 16px;
  --rv-fs-18: 18px;
  --rv-fs-22: 22px;
  --rv-fs-32: 32px;

  /* Motion */
  --rv-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rv-dur-md: 0.4s;
  --rv-dur-lg: 0.5s;
  --rv-dur-xl: 0.6s;

  /* Screen padding tokens — every screen-level rule references these so
     a single change here re-aligns every hero/avatar at once. Mobile and
     short-viewport overrides live below. Bottom-pinned screens (ad,
     result) are exempt from these by design. */
  --rv-screen-pad-top:    100px;
  --rv-screen-pad-x:      20px;
  --rv-screen-pad-bottom: 32px;
}

/* Short-viewport override: shrinks the top padding for every screen at
   once. Replaces the per-class @media block that used to live on
   .regluvordur-screen--flex only. */
@media (max-height: 700px) {
  .regluvordur-game-wrapper {
    --rv-screen-pad-top: 60px;
  }
}

/* ── Phone frame wrapper ──────────────────────────────────────────────────── */

.regluvordur-game-wrapper {
  /* Reserve viewport space for the [avista_weather] sibling that
     renders below the wrapper. The global page header above the
     wrapper is already accounted for by document flow — no need to
     subtract it here. Override on the host page to match the theme. */
  --rv-weather-reserve: 96px;

  position: relative;
  display: block;
  width: 393px;
  max-width: 100%;
  height: 852px;
  max-height: calc(100svh - var(--rv-weather-reserve));
  margin: 40px auto 0;
  background: transparent;
  border-radius: 28px;
  overflow: visible;
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #fff;
  isolation: isolate;
}

.regluvordur-suisse {
  font-family: 'Suisse Intl', system-ui, sans-serif;
  letter-spacing: -0.03em;
  text-align: left;
}

.regluvordur-screen {
  position: absolute;
  inset: 0;
  overflow: visible;
}

/* Opt-in flex column layout. Screens still using absolute-positioned
   children stay on the base class above; converted screens add this
   modifier and inline their header rows. */
.regluvordur-screen--flex {
  display: flex;
  flex-direction: column;
  /* Desktop: stack content in the centre of the wrapper. Mobile
     overrides this to space-evenly (see the @media block below) so
     a viewport-tall wrapper distributes the slack instead of leaving
     a big gap below the bottom item. */
  justify-content: center;
  gap: var(--rv-space-20);
  padding: var(--rv-screen-pad-top) 0 var(--rv-screen-pad-bottom);
}

/* Result-screen layout (Correct / Wrong / Tíminn úti). Pin header to the
   top, CTA to the bottom, distribute icon between them — same on mobile
   and desktop so the wrapper height is fully used and the [avista_weather]
   strip below is never pushed out of view. Compound selector trumps the
   mobile-only `.regluvordur-screen--flex { space-evenly }` rule below.
   Extra bottom padding clears the primary button's gold glow shadow
   (`0 10px 30px`) inside the wrapper's `overflow: hidden` clip. */
.regluvordur-screen--flex.regluvordur-screen--flex-fill {
  justify-content: space-between;
  padding-bottom: 50px;
}

/* Mobile overrides — kept after the desktop base rules above so the
   cascade lets the @media-scoped properties win when the breakpoint
   matches. */
@media (max-width: 430px) {
  .regluvordur-game-wrapper {
    /* Trim the screen's top padding on mobile — 100 px chewed enough
       of the wrapper's vertical slack that `space-evenly` squeezed the
       online pill flush against the host page-header. */
    --rv-screen-pad-top: 80px;
    /* Reserve more space below the wrapper on mobile so the
       [avista_weather] strip has breathing room above the viewport
       bottom — 50px crammed the strip flush against the screen edge. */
    --rv-weather-reserve: 70px;
    width: 100vw;
    height: calc(100svh - var(--rv-weather-reserve));
    max-height: calc(100svh - var(--rv-weather-reserve));
    border-radius: 0;
    margin-top: 0;
    /* Full-bleed viewport on mobile — clip overflow so a too-tall
       screen can never bleed into the [avista_weather] strip. On
       wider viewports the wrapper is a centered phone frame on the
       page background; overflow there is harmless and stays visible. */
    overflow: hidden;
  }


  /* Same logic as the wrapper: on mobile the screen is bounded by
     the viewport, so let it scroll its own content if it can't
     shrink to fit. On wider viewports the screen overflows visibly
     into the page background. */
  .regluvordur-screen {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }
  .regluvordur-screen::-webkit-scrollbar { display: none; }

  /* Distribute slack vertically on the full-bleed mobile wrapper —
     desktop centers content instead. */
  .regluvordur-screen--flex {
    justify-content: space-evenly;
  }
}

/* Hide the [avista_weather] stats strip when the SPA is on a screen that
   doesn't show weather. Designer decision (2026-05-19): the weather BAR
   lives only on home, in-game, and final outcome screens. The atmospheric
   FX canvas keeps painting on all screens so the page background stays
   visually consistent. */
html.rv-no-weather .avista-weather { display: none; }

/* With the weather strip hidden, reclaim the 96 px reserve the wrapper was
   leaving below itself for the strip — otherwise the wrapper is capped at
   `viewport - 96` and any content close to 852 px overflows on shorter
   monitors. Reserve goes to 0; the existing `height: 852px` still caps the
   wrapper at the design height on tall viewports. */
html.rv-no-weather .regluvordur-game-wrapper {
  --rv-weather-reserve: 0px;
  /* Clip any content overflow inside the wrapper so the page itself never
     scrolls — if content is taller than the available viewport the screen
     (inside) scrolls internally instead. */
  overflow: hidden;
}
html.rv-no-weather .regluvordur-screen {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
html.rv-no-weather .regluvordur-screen::-webkit-scrollbar { display: none; }

/* ── Breakdance header capsule ────────────────────────────────────────────
   The Breakdance template provides a `#user-capsule` slot; the SPA fills
   it with the user's avatar overlapping the club logo's white ring.
   Spec: Figma `regluvordur-2026-spurning` (profile pill 65 × 40, 20 px
   radius, 1 px white@30% border, two 36 × 36 circles, avatar overlaps
   club by 11 px). The club logo (≈ 31.6 × 31.6) sits inside a white-47
   circle backing (`profile-pill-ellipse.svg`). */

/* Breakdance ships #user-capsule with its own default chrome (a small
   round container). When the SPA empties the slot we strip our pill
   classes — without this rule the Breakdance chrome would still paint
   as a tiny circle in the header. Hiding the bare slot keeps the
   middle of the header truly empty on pill-hidden screens. */
#user-capsule:not(.rv-user-capsule) {
  display: none;
}

/* Equalise the left (V logo) and right (hamburger / X) header columns
   so the centred #user-capsule pill sits in the actual middle of the
   header. The slots must also be square (aspect-ratio: 1) — Breakdance
   paints a circular background behind the hamburger / X, which renders
   as an ellipse if width and height differ. */
#header-logo,
#header-menu {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* #header-logo doubles as a "home" affordance — bound by the SPA in
   updateHeaderLogo(). The cursor + focus ring mirror the .rv-user-capsule
   treatment so the two clickable header slots feel consistent. */
#header-logo {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#header-logo:focus-visible {
  outline: 2px solid var(--rv-gold, #ffbd00);
  outline-offset: 2px;
  border-radius: 8px;
}

.rv-user-capsule {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  width: max-content;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rv-user-capsule:focus-visible {
  outline: 2px solid var(--rv-gold, #ffbd00);
  outline-offset: 2px;
}
/* Bumped specificity to win against Breakdance's `.bde-div img { height: auto }`
   which otherwise stretches/shrinks the avatar to its intrinsic aspect ratio. */
.rv-user-capsule img.rv-user-capsule__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  /* Pulls the avatar's right edge under the club ring (the club is the
     next sibling and paints on top per default DOM stacking). */
  margin-right: -11px;
  flex-shrink: 0;
}
.rv-user-capsule__club-ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.47);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Sit on top of the avatar's overlapping right edge. */
  position: relative;
  z-index: 1;
}
.rv-user-capsule__club-ring img.rv-user-capsule__club {
  width: 31.6px;
  height: 31.6px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Pre-intro state — the capsule looks like just the club circle. The
   avatar is fully removed from layout (display: none) so the pill is
   symmetrical with 2 px padding on each side of the club ring. JS swaps
   `--pre-intro` for `--intro` once Breakdance's header entrance has
   finished — the animation then re-shows the avatar from width 0. */
.rv-user-capsule--pre-intro img.rv-user-capsule__avatar {
  display: none;
}

/* Intro animation — expands the avatar from collapsed to full, the
   pill border auto-grows because the wrapper is `inline-flex`. Runs
   once per page load, controlled by the `--intro` modifier (JS
   removes it after the animation finishes). */
.rv-user-capsule--intro img.rv-user-capsule__avatar {
  animation: rv-capsule-avatar-in 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rv-capsule-avatar-in {
  from {
    width: 0;
    margin-right: 0;
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    width: 36px;
    margin-right: -11px;
    opacity: 1;
    transform: scale(1);
  }
}

/* Solo variant — user has no club. Just the avatar as a free-standing
   circle, no pill border, no overlap, no intro animation. */
.rv-user-capsule--solo {
  border: none;
  padding: 0;
  background: transparent;
}
.rv-user-capsule--solo img.rv-user-capsule__avatar {
  margin-right: 0;
}
.regluvordur-scrollable {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.regluvordur-scrollable::-webkit-scrollbar { display: none; }

/* ── Common controls ──────────────────────────────────────────────────────── */

.regluvordur-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 70px;
  border-radius: var(--rv-radius-button);
  border: none;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-18);
  letter-spacing: -0.03em;
  transition: all 0.25s ease;
}
.regluvordur-btn--primary {
  background: var(--rv-gold);
  color: var(--rv-text-dark);
}
.regluvordur-btn--primary:disabled,
.regluvordur-btn--disabled {
  background: rgba(255,189,0,0.35);
  color: rgba(57,49,34,0.6);
  cursor: not-allowed;
  box-shadow: none;
}
.regluvordur-btn--ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.regluvordur-btn--busy {
  cursor: progress;
}
.regluvordur-btn--busy::before {
  content: '';
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: regluvordur-btn-spin 0.7s linear infinite;
}
@keyframes regluvordur-btn-spin {
  to { transform: rotate(360deg); }
}

.regluvordur-icon-btn {
  width: 40px; height: 40px;
  border-radius: 20px;
  border: none;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.regluvordur-header-row {
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  padding: var(--rv-space-10) var(--rv-space-20);
  display: flex; align-items: center; justify-content: space-between;
}
.regluvordur-header-row--close-only {
  top: 54px;
  justify-content: flex-end;
}
.regluvordur-header-row--close-with-content {
  top: var(--rv-space-12);
  justify-content: flex-end;
}

.regluvordur-header__subtitle {
  font-weight: var(--rv-fw-medium);
  font-size: var(--rv-fs-18);
  color: var(--rv-gold);
  line-height: 1;
}

.regluvordur-header__title-row {
  /* Match the horizontal padding of the bottom-form / reg-info elements
     below, so reg-screen header content aligns with everything else.
     Home overrides this to align with its 353px card positioner. */
  padding: 0 var(--rv-space-24);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rv-space-16);
}
.regluvordur-header__title-row--card-aligned {
  /* Opt-in modifier: align horizontally with the 353px-wide
     .regluvordur-home-card-positioner so the title content lines up
     with the card. Used by the home screen; reg screens keep the
     base form-aligned padding. */
  padding: 0 calc((100% - 353px) / 2);
}
.regluvordur-header__title-row--abs {
  position: absolute;
  top: 80px;
  left: 0; right: 0;
}
.regluvordur-header__title {
  flex: 1;
  min-width: 0;
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-32);
  color: var(--rv-white);
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: pre-line;
}
.regluvordur-header__title-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-4);
  text-align: left;
}
.regluvordur-header__badge {
  width: 72px;
  height: 69px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rv-radius-full);
  background: radial-gradient(circle at 35% 35%, var(--rv-accent), rgba(0,0,0,0.2));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--rv-accent) 40%, transparent);
  animation: regluvordur-badge-in var(--rv-dur-xl) var(--rv-ease-out);
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */

.regluvordur-field {
  padding: 14px 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  border-radius: 21px;
}
.regluvordur-field__label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  line-height: 1;
  font-family: 'Manrope', sans-serif;
  letter-spacing: -0.03em;
}
.regluvordur-field__input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 0;
  height: 24px;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  /* Override the UA/normalize reset's 1.15, which clips descenders. */
  line-height: 1.25;
}
.regluvordur-field__input::placeholder { color: rgba(255,255,255,0.4); }

/* ── Auth flow (2026 Figma: regEmail / regCreate) ─────────────────────────
   Hero block is crest-on-top, centered text below. Field and screen
   modifiers are opt-in so the original .regluvordur-field / regProfile
   pattern keeps working unchanged. Reference designs:
     references/figma/regluvordur-2026-registration-login/
     references/figma/regluvordur-2026-registration/                       */

.regluvordur-screen--flex.regluvordur-screen--auth {
  /* Hero pinned near the top, form pinned near the bottom — slack between
     the two grows on tall viewports. Overrides --flex's `center` default
     and the mobile `space-evenly` override (compound selector outranks
     both). */
  justify-content: space-between;
  gap: 0;
}

.regluvordur-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 10px 20px;
  text-align: center;
}
img.regluvordur-hero__crest {
  width: 66px;
  height: 64px;
  min-width: 66px;
  max-width: 66px;
  min-height: 64px;
  max-height: 64px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.regluvordur-hero__text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 100%;
}
.regluvordur-hero__eyebrow {
  font-family: 'Suisse Intl', system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rv-gold);
  text-align: center;
}
.regluvordur-hero__title {
  font-family: 'Suisse Intl', system-ui, sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  white-space: pre-line;
  text-align: center;
}

/* Auth-flow input variant: 24px radius, transparent fill, white@24% border,
   20px padding all sides, 12px label + 20px value (matches Figma). */
.regluvordur-field--auth {
  padding: 20px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 24px;
  backdrop-filter: none;
}
.regluvordur-field--auth .regluvordur-field__label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.regluvordur-field--auth .regluvordur-field__input {
  margin-top: 5px;
  height: auto;
  font-size: 20px;
  font-weight: 600;
}

/* When the auth-style wrapper hosts the 6-digit code grid the inside of the
   box is the grid itself — strip the padding that the field defaults add. */
.regluvordur-field--auth.regluvordur-field--code {
  padding: 10px 20px;
  border-radius: 24px;
}

/* Terms-acceptance row on the regEmail screen: custom checkbox + label. */
.regluvordur-terms {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
  font-size: 14px;
  line-height: 1.2;
  color: rgba(255,255,255,0.7);
}
.regluvordur-terms__check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.regluvordur-terms__checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  flex-shrink: 0;
}
.regluvordur-terms__checkbox:checked {
  background: var(--rv-gold);
  border-color: var(--rv-gold);
}
.regluvordur-terms__checkbox:checked::after {
  content: '';
  width: 13px;
  height: 7px;
  border-left: 2.5px solid var(--rv-text-dark);
  border-bottom: 2.5px solid var(--rv-text-dark);
  transform: rotate(-45deg) translate(1px, -1px);
}
.regluvordur-terms__checkbox:focus-visible {
  outline: 2px solid var(--rv-gold, #ffbd00);
  outline-offset: 2px;
}

/* OTP screen helper text — small floating label above a 20px body line
   that retains the email reference. Sits in the bottom-form, above the
   code-grid field. */
.regluvordur-verify-helper {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 4px;
  margin: 0;
}
.regluvordur-verify-helper__label {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.5);
}
.regluvordur-verify-helper__body {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #fff;
}
.regluvordur-verify-helper__body strong {
  font-weight: 700;
}

/* Resend link on the code-entry screen — revealed after a failed/expired
   code attempt. Text-link treatment matching .regluvordur-profile__edit-link;
   --disabled covers the 30s cooldown after a send. */
.regluvordur-verify-resend {
  appearance: none;
  background: transparent;
  border: 0;
  margin-top: var(--rv-space-8);
  padding: var(--rv-space-12) 0;
  width: 100%;
  text-align: center;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-18);
  color: var(--rv-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.regluvordur-verify-resend:hover {
  color: var(--rv-gold);
}
.regluvordur-verify-resend--disabled {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  pointer-events: none;
}

/* When the club-select combobox is hosted inside .regluvordur-field--auth
   (regCreate screen), make its label and input visually match the sibling
   Nafn text field — small floating label top-left, 20px value below.
   These rules win over the .regluvordur-field--combobox defaults at line
   ~1785 because they're more specific (two classes vs. one). */
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__label {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  line-height: 1;
}
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select {
  margin-top: 5px;
}
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__input {
  text-align: left;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  height: auto;
}

/* Three-phase animation of the Nafn field + Halda áfram button while
   the club picker is active. Each phase is 300ms with iOS-style decel
   easing (cubic-bezier(0.32, 0.72, 0, 1)).
   • Forward (click into club field):
     phase 1 (0–300ms):   Nafn fades out (opacity 1→0)
     phase 2 (300–600ms): form layout shifts — Nafn collapses, form
                          glides up via FLIP transform (game.js)
     phase 3 (600–900ms): dropdown list fades in (CSS on the list)
   • Reverse (blur or select): the same three phases in opposite order. */
.regluvordur-bottom-form .regluvordur-field--auth:not(.regluvordur-field--combobox),
.regluvordur-bottom-form--gap-8 .regluvordur-btn {
  max-height: 240px;
  overflow: hidden;
  transition:
    max-height 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    margin 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    padding 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    border-color 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 600ms;
}
.regluvordur-bottom-form--club-active .regluvordur-field--auth:not(.regluvordur-field--combobox),
.regluvordur-bottom-form--club-active .regluvordur-btn {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  pointer-events: none;
  transition:
    opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 0ms,
    max-height 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    margin 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    padding 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    border-color 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms;
}

/* When the club search is active, drop the screen's space-between
   justification so the hero stays at the top and the bottom-form
   slides up right beneath it. The gap matches the Figma's hero→form
   spacing (~25px). Uses :has() — Safari 15.4+ / Chrome 105+. */
.regluvordur-screen--flex.regluvordur-screen--auth:has(.regluvordur-bottom-form--club-active) {
  justify-content: flex-start;
  gap: 25px;
}

/* ── Edit-profile screen (2026 Figma: regluvordur-2026-edit-profile) ──────
   Logged-in user editing their own profile. Avatar + name heading at top,
   four form fields, single CTA. No hero crest. Reuses .regluvordur-field--auth
   for the four inputs. */

.regluvordur-edit-profile {
  /* Fill the screen and stack content from the top. `justify-content`
     stays at its default (flex-start) so content anchors to the top —
     if the form is taller than the viewport, the screen scrolls
     internally starting from the avatar, never clipping it. Top
     padding comes from the shared --rv-screen-pad-top token so this
     screen's avatar lines up with profile / dream-team / club-ranking. */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--rv-screen-pad-top) var(--rv-screen-pad-x) 20px;
}
/* Keep flex children at their intrinsic dimensions — without this, the
   avatar squashes into an oval whenever content is slightly taller than
   the available space. The screen has `overflow-y: auto` for that case. */
.regluvordur-edit-profile > * { flex-shrink: 0; }

.regluvordur-edit-profile__avatar {
  position: relative;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
.regluvordur-edit-profile__avatar > img:first-of-type {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.regluvordur-edit-profile__avatar--empty > img:first-of-type { display: none; }
.regluvordur-edit-profile__avatar > img.regluvordur-edit-profile__avatar-overlay {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: block;
  pointer-events: none;
}
.regluvordur-edit-profile__avatar-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
/* Upload-in-flight state — a gold comet sweeps around the inside ring
   of the avatar circle. inset:0 keeps the pseudo-element within the
   parent's overflow:hidden clip; the radial-mask carves it down to a
   thin annulus so only the ring shows. The plus overlay is hidden
   while uploading because picking another file is locked. */
.regluvordur-edit-profile__avatar--uploading { cursor: progress; }
.regluvordur-edit-profile__avatar--uploading .regluvordur-edit-profile__avatar-overlay {
  opacity: 0;
}
.regluvordur-edit-profile__avatar--uploading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255,189,0,0) 0deg,
    rgba(255,189,0,0) 200deg,
    var(--rv-gold) 360deg
  );
  /* closest-side anchors 100% to half the box side (the inscribed circle),
     not the far-corner diagonal — without it the mask boundary lands
     outside the parent's overflow:hidden clip and nothing paints. */
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
          mask: radial-gradient(circle closest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  animation: regluvordur-avatar-sweep 1.1s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes regluvordur-avatar-sweep {
  to { transform: rotate(360deg); }
}
.regluvordur-edit-profile__name {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  text-align: center;
  margin: 0;
}
.regluvordur-edit-profile__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Extra breathing room between the avatar/name heading group and the
     form fields — the parent's `gap: 10px` handles spacing within each
     group; this margin makes the visual separation between them clear. */
  margin-top: 20px;
}

/* While the club-search is active, fade out the non-combobox rows + CTA so
   the dropdown has the form region to itself. Mirrors the
   `.regluvordur-bottom-form--club-active` rules used on the registration
   screen, scoped to this form. */
.regluvordur-edit-profile__form .regluvordur-field--auth:not(.regluvordur-field--combobox),
.regluvordur-edit-profile__form .regluvordur-btn,
.regluvordur-edit-profile__form .regluvordur-profile__edit-link {
  max-height: 240px;
  overflow: hidden;
  transition:
    max-height 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    margin 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    padding 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    border-color 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 600ms;
}
.regluvordur-edit-profile__form--club-active .regluvordur-field--auth:not(.regluvordur-field--combobox),
.regluvordur-edit-profile__form--club-active .regluvordur-btn,
.regluvordur-edit-profile__form--club-active .regluvordur-profile__edit-link {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  pointer-events: none;
  transition:
    opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 0ms,
    max-height 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    margin 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    padding 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    border-color 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms;
}


/* ── Club-select list (2026 Figma redesign) ───────────────────────────────
   Each row: 36×36 numbered badge, two-line text column (short name on
   top, full name below), selected row swaps to a teal check badge and
   a gold title. Only applies inside .regluvordur-field--auth so the
   legacy regProfile screen keeps its old combobox visuals. */

/* List is positioned absolutely below the field so the field border
   wraps only the input + label (matching Figma). The list extends to
   the field's outer edge so item dividers run full-width.

   Visibility is animated as phase 3 of the open/close sequence:
   • Open: opacity 0→1 starts at 600ms (waits for phases 1 + 2)
   • Close: opacity 1→0 starts at 0ms (fades out first, before the
            layout shifts back in phases 2 + 3)
   The [hidden] attribute's native display:none is overridden so opacity
   can transition — visibility/pointer-events keep ARIA + click
   semantics correct. */
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__list {
  position: absolute;
  top: calc(100% + 6px);
  left: -1px;
  right: -1px;
  /* Clamp so the list never extends past the wrapper's bottom edge —
     on desktop the viewport is tall and an unclamped list would
     overlap the [avista_weather] strip below the wrapper. */
  max-height: min(60svh, 420px);
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  z-index: 50;
  scrollbar-width: none;
  -ms-overflow-style: none;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 600ms,
    visibility 0s linear 600ms;
}
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__list[hidden] {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 0ms,
    visibility 0s linear 300ms;
}
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__list::-webkit-scrollbar {
  display: none;
}
/* Keep the open field transparent so the list area sits directly on the
   screen bg — the legacy rule (line ~1951) adds a darker card fill that
   doesn't match Figma. The thin auth border stays around just the input.
   Also restore the full 24px corner radius (legacy rule at line ~2006
   squares off the bottom corners when the list is open). */
.regluvordur-field--auth.regluvordur-field--combobox:has(.regluvordur-club-select__list:not([hidden])) {
  background: transparent;
  border-radius: 24px;
}
/* Fade overlay at the bottom of the visible list — pinned via sticky
   ::after. Hidden once the user has scrolled all the way down (the
   .is-at-end class is toggled by club-select.js) so the fade doesn't
   imply there's more content below when there isn't. Fade target
   #393122 from Figma node 165:4677. */
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__list::after {
  content: '';
  display: block;
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  margin-top: -90px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 200ms ease;
  background: linear-gradient(to bottom, rgba(56,48,33,0) 0%, #393122 100%);
}
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__list.is-at-end::after {
  opacity: 0;
}
/* Top fade overlay — mirrors the bottom one but only appears once the
   user has scrolled down (toggled by club-select.js). Without the
   .is-scrolled gate the fade would imply scrollable content above when
   there isn't any. */
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__list::before {
  content: '';
  display: block;
  position: sticky;
  left: 0;
  right: 0;
  top: 0;
  height: 90px;
  margin-bottom: -90px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  background: linear-gradient(to bottom, #393122 0%, rgba(56,48,33,0) 100%);
  z-index: 1;
}
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__list.is-scrolled::before {
  opacity: 1;
}

.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 10px 17px;
  min-height: 69px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__item:last-child {
  border-bottom: none;
}
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__item:hover,
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__item.is-active {
  background: rgba(255,255,255,0.04);
}

.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__item-badge {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,189,0,0.12);
  border: 1px solid rgba(255,189,0,0.25);
  color: var(--rv-gold);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
}
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__item.is-selected .regluvordur-club-select__item-badge {
  background: rgba(94,156,146,0.12);
  border-color: rgba(94,156,146,0.25);
  color: var(--rv-teal);
}

.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__item-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__item-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 17.6px;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__item.is-selected .regluvordur-club-select__item-title {
  color: var(--rv-gold);
}
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__item-sub {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: normal;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The no-club row gets the same shape as the rest — drop the legacy
   top-border separator since each row now has its own underline. */
.regluvordur-field--auth.regluvordur-field--combobox .regluvordur-club-select__item--no-club {
  border-top: none;
  margin: 0;
}

/* ── 6-digit code grid ────────────────────────────────────────────────────── */

.regluvordur-code {
  display: flex;
  gap: 6px;
  justify-content: space-between;
}
.regluvordur-code__digit {
  flex: 1;
  min-width: 0;
  height: 40px;
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(255,255,255,0.2);
  outline: none;
  transition: border-color 0.2s;
  letter-spacing: -0.02em;
}
.regluvordur-code__digit--filled { border-bottom-color: var(--rv-gold); }

/* ── Animations ───────────────────────────────────────────────────────────── */

@keyframes regluvordur-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes regluvordur-pop-in {
  0% { opacity: 0; transform: scale(0.7); }
  70% { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes regluvordur-timer-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes regluvordur-slide-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes regluvordur-shimmer {
  0%   { background-position: -200% 0; opacity: 1; }
  95%  { opacity: 1; }
  100% { background-position: 200% 0;  opacity: 0; }
}
@keyframes regluvordur-badge-in {
  0% { opacity: 0; transform: scale(0.4) rotate(-18deg); }
  60% { transform: scale(1.08) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes regluvordur-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes regluvordur-sun-glow {
  0%,100% { opacity: 0.7; filter: blur(30px); }
  50% { opacity: 0.95; filter: blur(22px); }
}

.regluvordur-fade-up { animation: regluvordur-fade-up 0.4s ease; }
.regluvordur-pop-in { animation: regluvordur-pop-in 0.5s ease both; }
.regluvordur-slide-up { animation: regluvordur-slide-up 0.4s ease both; }

/* ── Post-answer choreography ─────────────────────────────────────────────
   Card exit (fade the question card down before the result screen takes
   over), the wrong-answer shake, the correct-answer button glow, the
   check/cross pop, and the grounded result-icon settle. Declared AFTER
   .regluvordur-fade-up so .regluvordur-screen--exit wins the cascade on the
   same element. */
@keyframes regluvordur-fade-down {
  to { opacity: 0; transform: translateY(8px) scale(0.985); }
}
.regluvordur-screen--exit { animation: regluvordur-fade-down 0.25s var(--rv-ease-out) both; }

@keyframes regluvordur-answer-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
/* Keeps the translateY(-50%) centring while it pops (a bare scale() would
   knock the pill off-centre). */
@keyframes regluvordur-check-pop {
  0% { opacity: 0; transform: translateY(-50%) scale(0.7); }
  70% { transform: translateY(-50%) scale(1.08); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
/* Gold halo that spreads and fades — no element scaling, so it reads well
   on a full-width button (online-pulse's 2.2x scale would balloon it). */
@keyframes regluvordur-answer-glow {
  0% { opacity: 0; box-shadow: 0 0 0 0 rgba(255,189,0,0.55); }
  30% { opacity: 1; }
  100% { opacity: 0; box-shadow: 0 0 0 10px rgba(255,189,0,0); }
}
/* Grounded result icon: rises and settles, no overshoot or rotation (the
   celebratory badge-in is reserved for the correct icon). */
@keyframes regluvordur-icon-settle {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .regluvordur-answer--wrong,
  .regluvordur-answer__check,
  .regluvordur-answer__glow,
  .regluvordur-result__glow,
  .regluvordur-screen--exit,
  .regluvordur-result__icon--right,
  .regluvordur-result__icon--wrong,
  .regluvordur-result__content--stagger .regluvordur-result__eyebrow,
  .regluvordur-result__content--stagger .regluvordur-result__headline,
  .regluvordur-result__content--stagger .regluvordur-result__score,
  .regluvordur-result__content--stagger .regluvordur-result__cta {
    animation: none !important;
  }
  .regluvordur-answer--faded { transform: none; }
}

/* ── Question card ────────────────────────────────────────────────────────── */

.regluvordur-question-card {
  position: absolute;
  left: 50%;
  top: 167px;
  width: 328px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: var(--rv-card);
  box-shadow: 0 4px 50px rgba(157,149,149,0.15);
  padding: 19px 11px 24px;
}
/* When the host header swap moves the X out of the screen, the 167px
   top reservation for the in-flow close-row becomes dead space. Pull
   the card near the top and stretch it to the bottom so it spans the
   available height. bottom:50px reserves room for the deeper shadow
   peek (37px) plus a small gap to the wrapper edge. The card becomes
   a flex column so the badge can be pinned to the bottom edge with
   margin-top:auto — otherwise the extra height pools below the badge.
   min/max-height clamp the stretch: on the 852px desktop wrapper the
   raw stretch produces a 722px card (huge dead space inside), so
   max-height caps it; min-height keeps the answers from crowding if
   the viewport ever shrinks below typical phone height. */
/* Close mode: hide the hamburger link (visibility:hidden keeps its
   layout slot so Breakdance still sizes the cell) and stack a sibling
   overlay button on top. The cell is the <a>'s immediate parent, which
   varies by Breakdance config — JS tags it with .regluvordur-host-x-cell
   so we don't have to guess its tag in CSS. Clicks on the overlay never
   reach the <a>, so Breakdance's hamburger-toggle listener doesn't fire. */
.regluvordur-host-x-cell {
  position: relative;
}
.regluvordur-host-x-cell > a {
  visibility: hidden;
}
.regluvordur-host-x-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 10;
}
.regluvordur-host-x-overlay svg { width: 24px; height: 24px; }

/* The card sits at top:80 and grows with its content. No max-height
   cap and no bottom anchor — both used to force the card to a fixed
   ~640px box, which pushed the badge OUTSIDE the rounded surface as
   soon as a long Icelandic question + 3 answers stacked beyond that
   height. min-height keeps very short questions from looking
   anaemic; the badge's margin-top:auto still pins it to the bottom
   inside that minimum, and on taller content it simply follows the
   answers. Page scrolls if the card ever outgrows the viewport — an
   acceptable degradation for the 4-answer / very-long-question
   edge cases. */
.regluvordur-game--host-x .regluvordur-question-card {
  top: 80px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
.regluvordur-game--host-x .regluvordur-question-card__badge {
  margin-top: auto;
}
/* margin-top:auto on the badge collapses to 0 once the answers fill the
   card, leaving the crest jammed against the last answer. Guarantee a
   minimum gap by pushing the answers block away from whatever follows. */
.regluvordur-game--host-x .regluvordur-answers {
  margin-bottom: 32px;
}
/* Stack-back cards. `top` and `height` are set dynamically in JS so each
   one aligns with the active card's top edge and peeks a fixed amount past
   its bottom — the deeper-indented one peeking further. */
.regluvordur-question-card__badge {
  width: 50px;
  height: 48px;
  margin: 4px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.regluvordur-question-card__badge svg {
  width: 100%;
  height: 100%;
  display: block;
}
.regluvordur-question-card__loading {
  text-align: center;
  padding: 60px 0;
  color: var(--rv-text-muted);
}
.regluvordur-question-card__error {
  padding: 40px var(--rv-space-20);
  text-align: center;
  color: var(--rv-red);
}
.regluvordur-question-card__timer-row {
  display: flex;
  gap: 6px;
  align-items: center;
  transition: opacity 0.3s ease;
}
.regluvordur-question-card__timer-label {
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-13);
  color: var(--rv-text-muted);
  transition: color 0.3s;
}
.regluvordur-question-card__timer-label--critical {
  color: var(--rv-red);
  animation: regluvordur-timer-pulse 0.8s infinite;
}
.regluvordur-question-card__timer-ring--critical {
  animation: regluvordur-timer-pulse 0.8s infinite;
}
.regluvordur-answer__text {
  flex: 1;
  text-align: center;
}

.regluvordur-question-card__shadow1 {
  position: absolute;
  left: 50%;
  width: 270px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: rgba(246,247,246,0.8);
  pointer-events: none;
}
.regluvordur-question-card__shadow2 {
  position: absolute;
  left: 50%;
  width: 240px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: rgba(246,247,246,0.5);
  pointer-events: none;
}

/* Question-stack entrance, staged in two beats so the stack assembles
   front-to-back. (1) The top card is built behind an opacity:0 veil (the
   screen carries .regluvordur-question-prep) while the question is fetched
   and laid out, so its height settles off-screen and never visibly jumps;
   removing the prep class fades the top card in at full size. (2) JS then
   adds .regluvordur-question--stacked and the two shadow cards — which until
   now sat tucked directly behind the top card (translateY:0, no peek) —
   fade in and slide DOWN into their peek positions. The timer entrance is
   kicked off in the same JS step. See SCREENS.question / startTimer(). */
.regluvordur-question-card {
  transition: opacity 0.25s ease;
}
.regluvordur-question-prep .regluvordur-question-card {
  opacity: 0;
}
/* Shadow cards: hidden and flush behind the top card by default; the peek is
   the translateY they slide to once stacked (20px / 37px mirror the
   front-to-back stair-step the card box no longer encodes in its height). */
.regluvordur-question-card__shadow1,
.regluvordur-question-card__shadow2 {
  opacity: 0;
  transform: translateX(-50%) translateY(0);
  /* Opacity snaps in fast so the card reads as a solid object sliding, not a
     fade-in-in-place; the transform runs longer with a slight overshoot so
     the travel registers as a deliberate slide-and-settle. Both cards start
     tucked behind the top card and slide together — the deeper one travels
     farther (37px vs 20px), so it fans out last on its own for a natural
     cascade, no artificial delay needed. */
  transition: transform 0.4s cubic-bezier(0.34, 1.45, 0.6, 1), opacity 0.12s ease;
}
.regluvordur-question--stacked .regluvordur-question-card__shadow1 {
  opacity: 1;
  transform: translateX(-50%) translateY(20px);
}
.regluvordur-question--stacked .regluvordur-question-card__shadow2 {
  opacity: 1;
  transform: translateX(-50%) translateY(37px);
}

.regluvordur-progress-row {
  padding: 0 8px;
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
}
.regluvordur-progress-pip {
  flex: 1;
  height: 7px;
  border-radius: 2px;
  background: #fff;
  transition: background-color 0.3s;
}
.regluvordur-progress-pip--current { background: var(--rv-gold); }
.regluvordur-progress-pip--correct { background: var(--rv-teal); }
.regluvordur-progress-pip--wrong   { background: var(--rv-red); }

.regluvordur-question-meta {
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: rgba(51,43,31,0.5);
}
.regluvordur-question-text {
  padding: 0 8px;
  margin-bottom: 24px;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--rv-text);
  font-family: 'Manrope', sans-serif;
  letter-spacing: -0.03em;
}

.regluvordur-answers {
  padding: 0 2px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.regluvordur-answer {
  width: 100%;
  border-radius: 14px;
  padding: 21px 18px;
  background: var(--rv-option-bg);
  border: 0.5px solid var(--rv-option-border);
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: rgb(1,22,39);
  line-height: 1.32;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  transition: all 0.25s ease;
  position: relative;
}
/* Reading grace: buttons are disabled (and visibly dimmed) until the
   countdown starts, then transition back to full strength — the player
   sees them "come alive". Scoped with :not(...) so the post-answer
   disabled states (selected / correct / wrong / faded) are untouched. */
.regluvordur-answer:disabled:not(.regluvordur-answer--selected):not(.regluvordur-answer--correct):not(.regluvordur-answer--wrong):not(.regluvordur-answer--faded) {
  opacity: 0.4;
  cursor: default;
}
.regluvordur-answer--selected {
  background: var(--rv-gold);
  border-color: transparent;
}
.regluvordur-answer--correct {
  background: var(--rv-teal);
  border-color: transparent;
  color: #fff;
}
.regluvordur-answer--wrong {
  background: var(--rv-red);
  border-color: transparent;
  color: #fff;
  /* Delayed so the X pops in first, then the button shakes. */
  animation: regluvordur-answer-shake 0.36s ease 0.34s both;
}
/* Non-picked answers recede so focus lands on the player's choice. */
.regluvordur-answer--faded {
  opacity: 0.45;
  transform: scale(0.98);
}
.regluvordur-answer__check {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: regluvordur-check-pop 0.32s var(--rv-ease-out) both;
}
/* One-shot gold halo on the correct pick. Delayed so the check pops in
   first, then the halo pulses out from the settled icon. */
.regluvordur-answer__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: regluvordur-answer-glow 0.55s var(--rv-ease-out) 0.34s both;
}

/* ── Result icons (correct/wrong centerpiece) ─────────────────────────────── */

/* ── Result screens (correct / wrong / timeout) ──────────────────────────────
   Figma redesign: background video or fallback image fills the wrapper,
   a content block (eyebrow + headline + small status icon + CTA) sits
   pinned to the bottom over dark gradient overlays for legibility.
   Per-outcome accent (teal for right, terracotta for wrong) flows in
   via --rv-accent set inline on the screen. */
.regluvordur-screen--result {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--rv-space-20) var(--rv-space-30);
}

/* Result-screen backdrop. Inserted by JS into the host page's fx
   container (the Breakdance section identified by the weather
   shortcode's background_container_id) rather than inside the game
   card, so the video shares one full-viewport stage with the page's
   effects canvas. The container is resolved via .avista-weather's
   data-avista-weather-container attribute, so the bg still mounts
   when the user has paused weather effects (canvas removed). Cleared
   on every screen change via clearResultBg(). z-index: -1 keeps the
   weather canvas (z:auto) painting over the video. */
.rv-result-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  /* svh fallback for browsers that support dynamic viewport units — keeps
     the bg pinned through Safari's URL-bar shrink/grow without jumpiness. */
  height: 100dvh;
  z-index: -1;
  pointer-events: none;
  /* Dim the stage so the result-screen copy reads cleanly over busy
     media. Applies to both video and image variants — replaces the
     prior per-variant 0.8 on the <video> child. */
  opacity: 0.7;
}
/* The bg is a stage <div> containing either a child <video> (video
   variant) or a background-image on the stage itself (image fallback).
   The gradients live as the stage's own ::before/::after, so they
   naturally follow the stage's bounds — including the rounded media
   card on desktop. */
.rv-result-bg__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rv-result-bg--image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* The stage fades the video / image itself to transparent at the top
   and bottom edges via a CSS mask, so whatever sits behind the card
   (the page's dark Breakdance section + the weather canvas) shows
   through the faded regions instead of being covered by an opaque
   gradient overlay. */
.rv-result-bg {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, transparent 7.5%, black 22.5%, black 55%, transparent 80%);
          mask-image: linear-gradient(to bottom,
    transparent 0%, transparent 7.5%, black 22.5%, black 55%, transparent 80%);
}

/* Desktop bg-card cap — full-viewport fill on mobile becomes a centered
   media card on >=431px. overflow:hidden + border-radius clip the
   video AND the gradient pseudos together. */
@media (min-width: 431px) {
  .rv-result-bg {
    inset: auto;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: min(1100px, calc(100vw - 80px));
    height: calc(100svh - var(--rv-weather-reserve, 96px));
    border-radius: 28px;
    overflow: hidden;
    /* Desktop-only: composite the base top/bottom fade with a horizontal
       one so the wider card's left/right edges feather into the page
       background too (intersect = visible only where BOTH gradients are
       opaque). Mobile keeps the single vertical mask from the base rule. */
    -webkit-mask-image:
      linear-gradient(to bottom,
        transparent 0%, transparent 7.5%, black 22.5%, black 55%, transparent 80%),
      linear-gradient(to right,
        transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(to bottom,
        transparent 0%, transparent 7.5%, black 22.5%, black 55%, transparent 80%),
      linear-gradient(to right,
        transparent 0%, black 10%, black 90%, transparent 100%);
            mask-composite: intersect;
  }
}

/* Lift the host containers that hold the game wrapper / weather strip
   above the fx layer (and its result-screen gradients) so the buttons
   and weather stats stay clickable and legible. `:has(> X)` targets the
   immediate parent of each shortcode root — narrow on purpose so we
   don't recursively bump every ancestor up the tree. */
:has(> .regluvordur-game-wrapper),
:has(> .avista-weather) {
  position: relative;
  z-index: 1;
}

.regluvordur-result__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-22);
}

.regluvordur-result__heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rv-space-16);
  padding: 0 var(--rv-space-10);
}
.regluvordur-result__heading-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-8);
}
.regluvordur-result__eyebrow {
  margin: 0;
  font-weight: var(--rv-fw-medium);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--rv-accent);
  text-align: left;
}
/* Soft self-coloured glow on the outcome eyebrow (right / wrong / timeout),
   echoing the per-outcome background tone (--rv-accent: teal / terracotta).
   Scoped via data-rv-outcome so the gold winner/looser eyebrow is untouched. */
.regluvordur-screen--result[data-rv-outcome] .regluvordur-result__eyebrow {
  text-shadow: 0 0 18px color-mix(in srgb, var(--rv-accent) 55%, transparent);
}
/* Winner-variant eyebrow — uses brand gold rather than the per-outcome
   --rv-accent (right=teal / wrong=terracotta). */
.regluvordur-result__eyebrow--gold {
  color: var(--rv-gold);
}
.regluvordur-result__headline {
  font-weight: var(--rv-fw-semibold);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--rv-white);
  text-align: left;
}
.regluvordur-result__icon {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  display: block;
}
/* Correct: celebratory stamp. Wrong: grounded settle. */
.regluvordur-result__icon--right { animation: regluvordur-badge-in var(--rv-dur-xl) var(--rv-ease-out) both; }
.regluvordur-result__icon--wrong { animation: regluvordur-icon-settle var(--rv-dur-md) var(--rv-ease-out) both; }
/* Coloured halo behind the status icon — gold for right, terracotta for
   wrong. perspective lets the Motion-driven vertical-axis spin read as 3D. */
.regluvordur-result__icon-holder {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  perspective: 600px;
}
.regluvordur-result__glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 24px 6px var(--rv-gold);
  pointer-events: none;
  /* CSS fallback (no Motion / reduced motion): delayed so the icon stamps
     in first, then the halo pulses out. Motion suppresses this and drives
     the halo itself once the strokes finish drawing. */
  animation: regluvordur-online-pulse 1.2s var(--rv-ease-out) 0.3s 2 both;
}
.regluvordur-result__glow--wrong { box-shadow: 0 0 24px 6px var(--rv-red); }
/* When Motion owns the entrance, silence the CSS spin/settle + halo so the
   two can't double up. */
.regluvordur-result__icon-holder--motion .regluvordur-result__icon,
.regluvordur-result__icon-holder--motion .regluvordur-result__glow {
  animation: none !important;
}
/* Cascade the eyebrow → headline → CTA in after the screen lands. */
.regluvordur-result__content--stagger .regluvordur-result__eyebrow,
.regluvordur-result__content--stagger .regluvordur-result__headline,
.regluvordur-result__content--stagger .regluvordur-result__score,
.regluvordur-result__content--stagger .regluvordur-result__cta {
  animation: regluvordur-slide-up var(--rv-dur-md) var(--rv-ease-out) both;
}
/* Top-to-bottom cascade — the score is the top line of the heading column, so
   it leads, then the eyebrow → headline → CTA. */
.regluvordur-result__content--stagger .regluvordur-result__score { animation-delay: 0.08s; }
.regluvordur-result__content--stagger .regluvordur-result__eyebrow { animation-delay: 0.14s; }
.regluvordur-result__content--stagger .regluvordur-result__headline { animation-delay: 0.20s; }
.regluvordur-result__content--stagger .regluvordur-result__cta { animation-delay: 0.30s; }

/* Accumulated-score roll-up. The bare .regluvordur-score-roll inherits its
   colour + font from context (gold, inside the end-game eyebrow). The
   per-correct result screen wraps it in .regluvordur-result__score to paint a
   golf-green celebratory line with the "+N stig" chip alongside. The number
   tween + chip pop are driven by scoreCounter().play() in JS — these rules are
   just the rest state and the chip styling. */
.regluvordur-score-roll {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: var(--rv-space-12);
  color: inherit;
}
.regluvordur-score-roll__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* Matches .regluvordur-result__eyebrow--gold exactly (24px / medium / gold /
   left) so the correct-answer total reads as the same line as the end-game
   eyebrow. The "stig" unit inherits the number's size — one uniform string. */
.regluvordur-result__score {
  font-weight: var(--rv-fw-medium);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--rv-score-accent, var(--rv-gold));
}
.regluvordur-result__score .regluvordur-score-roll {
  align-items: baseline;
}
.regluvordur-result__score .regluvordur-score-roll__value {
  color: inherit;
}

/* "+N stig" chip — golf-green pill with a little white golf-ball dot. Starts
   hidden (opacity:0) so it doesn't flash before Motion drives the pop; the
   reduced-motion / no-Motion path hides it outright via display:none. */
.regluvordur-score-roll__chip {
  /* Floated out of flow, anchored just above the number — so it doesn't push
     the counter to the right and instead reads as a "+N" popup rising off the
     total (the Motion y tween lifts it further up as it fades). */
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  display: inline-flex;
  align-items: center;
  gap: var(--rv-space-8);
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  background: var(--rv-score-accent, var(--rv-green));
  color: var(--rv-white);
  font-size: 15px;
  font-weight: var(--rv-fw-semibold);
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--rv-score-accent, var(--rv-green)) 40%, transparent);
  will-change: transform, opacity;
}
.regluvordur-score-roll__ball {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff 0%, #fff 55%, rgb(231,233,230) 100%);
  box-shadow: inset -2px -2px 3px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.25);
}

.regluvordur-result__cta {
  /* Inherits .regluvordur-btn--primary (flat gold pill). Extra rules for
     the chevron at the right edge. */
  padding: 0 var(--rv-space-22);
}
.regluvordur-result__cta-text {
  flex: 1;
  text-align: center;
}
.regluvordur-result__cta-chevron {
  margin-left: var(--rv-space-12);
  color: var(--rv-text-dark);
}

/* Two-CTA stack — used by the looser screen for 'Spila aftur' +
   'Sjá tölfræði'. Just a vertical column with consistent gap; each
   button keeps its own .regluvordur-result__cta sizing. */
.regluvordur-result__cta-stack {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-12);
}

.regluvordur-result__cta--secondary {
  background: var(--rv-white);
}

/* Winner-form medal — sits as a row-sibling of .regluvordur-result__heading-col
   in the heading row. Matches the laurel-wreath asset at its native
   66×64 viewBox. */
.regluvordur-result__medal {
  flex-shrink: 0;
  width: 66px;
  height: 64px;
  display: block;
}

/* "Ekki í þetta skiptið" skip control — plain text link rendered as a
   button so screen readers announce its actionable role. */
.regluvordur-result__skip {
  background: transparent;
  border: 0;
  padding: var(--rv-space-12) var(--rv-space-10);
  font-family: 'Manrope', sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--rv-white);
  text-align: center;
  cursor: pointer;
}

/* ── Winner-form screen ────────────────────────────────────────────────────
   Desktop centers the stack vertically so the form lands in the middle
   of the wrapper rather than pinning to the top with empty space below.
   Mobile keeps the top-aligned stack so the heading clears the
   Breakdance header chrome and the form has predictable scroll behavior
   when the keyboard pops up. */
.regluvordur-screen--flex.regluvordur-screen--winner-form {
  justify-content: center;
  gap: var(--rv-space-20);
  padding: 80px var(--rv-space-20) var(--rv-space-30);
}
@media (max-width: 430px) {
  .regluvordur-screen--flex.regluvordur-screen--winner-form {
    justify-content: flex-start;
    padding: 80px var(--rv-space-20) var(--rv-space-30);
  }
}

/* Already-claimed inline state — used when the user has already
   submitted their prize address for the current season. Sits between
   the heading row and a single "Halda áfram" primary CTA. */
.regluvordur-result__claim-note {
  margin: 0;
  padding: 0 var(--rv-space-10);
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--rv-white);
  text-align: left;
}

/* Inline form error — sits below the submit button, gold-on-brown so
   it reads but doesn't fight the gold CTA right above. */
.regluvordur-bottom-form__error {
  margin: 0;
  padding: var(--rv-space-8) var(--rv-space-10) 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: var(--rv-gold);
  text-align: center;
}

/* Match the edit-profile form width — drop the 24px horizontal padding
   the shared .regluvordur-bottom-form base applies, so the winner-form
   fields span the same width as the screen's title text and other
   profile-style forms (e.g. .regluvordur-edit-profile__form). */
.regluvordur-screen--winner-form .regluvordur-bottom-form {
  padding-left: 0;
  padding-right: 0;
}

/* Picker-active collapse — winner-form's two-combobox flow. When
   either picker is open (postnumer or baejarfelag), siblings without
   .is-active collapse smoothly so the dropdown has the whole bottom
   region. Mirrors the .regluvordur-bottom-form--club-active rules
   used by registration screens, but our trigger is .is-active on the
   active field rather than :not(.regluvordur-field--combobox) — that
   way it works for any-combobox-active state and includes the
   non-combobox heimilisfang text input as a collapse target.
   Scoped to .regluvordur-screen--winner-form so the auth-screen
   --club-active pattern isn't affected. */
.regluvordur-screen--winner-form .regluvordur-bottom-form .regluvordur-field--auth,
.regluvordur-screen--winner-form .regluvordur-bottom-form .regluvordur-btn,
.regluvordur-screen--winner-form .regluvordur-bottom-form .regluvordur-result__skip {
  max-height: 400px;
  /* overflow:visible by default so a combobox field's dropdown panel
     (position:absolute, anchored just below the input) can escape the
     card bounds. The collapsing siblings flip to overflow:hidden in
     the --picker-active rule below so their content clips cleanly
     during the height-to-0 animation. */
  overflow: visible;
  transition:
    max-height 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    margin 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    padding 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    border-color 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 600ms;
}
.regluvordur-screen--winner-form .regluvordur-bottom-form--picker-active .regluvordur-field--auth:not(.is-active),
.regluvordur-screen--winner-form .regluvordur-bottom-form--picker-active .regluvordur-btn,
.regluvordur-screen--winner-form .regluvordur-bottom-form--picker-active .regluvordur-result__skip {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  pointer-events: none;
  transition:
    opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 0ms,
    max-height 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    margin 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    padding 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    border-color 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms;
}


/* Short viewports — drop type sizes so the heading still fits over the
   bottom gradient without crowding the CTA. */
@media (max-height: 700px) {
  .regluvordur-result__eyebrow { font-size: 18px; }
  .regluvordur-result__headline { font-size: 22px; }
  .regluvordur-result__icon { width: 48px; height: 48px; }
  .regluvordur-result__medal { width: 52px; height: 50px; }
  .regluvordur-result__content { gap: var(--rv-space-16); }
}


/* ── Dev menu (localhost only) ────────────────────────────────────────────── */

/* Dev menu lives at document.body, outside .regluvordur-game-wrapper, so it
   cannot inherit the wrapper-scoped --rv-* tokens. Values hardcoded on
   purpose. */
.regluvordur-dev-menu {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 99999;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
}
.regluvordur-dev-menu__list {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: rgba(20,18,12,0.96);
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,189,0,0.4);
  margin-bottom: 6px;
  max-height: 70vh;
  overflow-y: auto;
  min-width: 210px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.regluvordur-dev-menu__list--open {
  display: flex;
}
.regluvordur-dev-menu__list-item {
  text-align: left;
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}
.regluvordur-dev-menu__toggle {
  background: rgb(255,189,0);
  color: rgb(51,43,31);
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  font: inherit;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
/* When devSynthetic is active the SPA's /quizzes (and other game-loop)
   endpoints are routed through devMockApi — turn the toggle red so it's
   unmistakable. Use the "reset · dev state" item to clear. */
.regluvordur-dev-menu__toggle--synthetic {
  background: rgb(220,55,55);
  color: #fff;
  animation: regluvordur-dev-pulse 1.6s ease-in-out infinite;
}
@keyframes regluvordur-dev-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 0 rgba(220,55,55,0.6); }
  50%      { box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 8px rgba(220,55,55,0); }
}

/* ── Ad screen ────────────────────────────────────────────────────────────── */
/* Sponsor ad shown between questions. Background = featured image of an
   rv_ad post (admin uploads via the standard WP post editor). Same shell
   as the result screens — full-frame bg + gradient overlays + bottom-pinned
   heading row + CTA. Heading row is asymmetric: text-col on the left,
   large vörður V on the right. */

.regluvordur-screen--ad {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--rv-space-20) var(--rv-space-30);
}

/* Ad-screen background + darkening gradients live on the host fx layer
   (same as result/winner screens) — see mountResultBg in game.js and the
   .rv-result-bg + .rv-has-bg-* rules above. The .regluvordur-ad__bg /
   __gradient rules were removed when the ad screen joined that pattern. */

.regluvordur-ad__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-22);
}

.regluvordur-ad__heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rv-space-16);
  padding: 0 var(--rv-space-10);
}
.regluvordur-ad__heading-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-8);
}
.regluvordur-ad__eyebrow {
  margin: 0;
  font-weight: var(--rv-fw-medium);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--rv-gold);
  text-align: left;
}
.regluvordur-ad__headline {
  font-weight: var(--rv-fw-semibold);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--rv-white);
  text-align: left;
}
.regluvordur-ad__symbol {
  flex-shrink: 0;
  width: 60px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.regluvordur-ad__symbol svg {
  width: 100%;
  height: 100%;
}

.regluvordur-ad-countdown {
  margin-left: var(--rv-space-12);
  font-variant-numeric: tabular-nums;
  font-size: var(--rv-fs-16);
  color: var(--rv-white-60);
}

@media (max-height: 700px) {
  .regluvordur-ad__eyebrow { font-size: 18px; }
  .regluvordur-ad__headline { font-size: 22px; }
  .regluvordur-ad__symbol { width: 48px; height: 52px; }
  .regluvordur-ad__content { gap: var(--rv-space-16); }
}

/* ── Final summary ────────────────────────────────────────────────────────── */

.regluvordur-final-screen {
  display: flex;
  flex-direction: column;
  /* Bottom padding clears the primary CTA's gold glow shadow inside the
     wrapper's mobile `overflow: hidden` clip — same reasoning as
     `.regluvordur-screen--flex-fill`. Top uses the shared screen-pad
     token so the title block lines up with the other top-anchored
     screens. */
  padding: var(--rv-screen-pad-top) var(--rv-space-24) 50px;
  gap: var(--rv-space-20);
}
.regluvordur-final-screen__title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  flex-shrink: 0;
}
.regluvordur-final-screen__kicker {
  font-weight: var(--rv-fw-medium);
  font-size: var(--rv-fs-18);
  color: var(--rv-gold);
  line-height: 1;
}
.regluvordur-final-screen__title {
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-32);
  color: var(--rv-white);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.regluvordur-final-screen__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Stats row gets `margin-top: auto` so it sits flush above the
     button stack regardless of how many buttons render — matches the
     design where stats live just above the CTAs, not in the middle. */
  justify-content: flex-start;
  gap: var(--rv-space-12);
  animation: regluvordur-fade-up var(--rv-dur-lg) ease;
}
.regluvordur-final-screen__inner-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rv-space-16);
  width: 100%;
}
.regluvordur-final-screen__footer-block {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-10);
  width: 100%;
  animation: regluvordur-slide-up var(--rv-dur-md) ease 0.5s both;
}
.regluvordur-final-screen__stats-row {
  display: flex;
  gap: var(--rv-space-10);
  width: 100%;
  animation-delay: 0.25s;
  /* Push the row to sit just above the footer button stack — the slack
     between inner-stack and stats absorbs all the empty space, so stats
     don't drift up when the footer is short. */
  margin-top: auto;
}
.regluvordur-final-badge {
  width: 120px;
  height: 120px;
  border-radius: var(--rv-radius-full);
  background: radial-gradient(circle at 35% 35%, var(--rv-accent), rgb(130,100,60));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  border: 3px solid rgba(255,255,255,0.3);
  animation: regluvordur-pop-in var(--rv-dur-xl) ease both;
  flex-shrink: 0;
}
.regluvordur-final-badge--winner {
  background: radial-gradient(circle at 35% 35%,
    var(--rv-gold-soft), var(--rv-gold), rgb(200,140,0));
  box-shadow: 0 12px 40px color-mix(in srgb, var(--rv-gold) 40%, transparent);
}

.regluvordur-final-score-pill {
  padding: var(--rv-space-14) 32px;
  border-radius: var(--rv-space-24);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  color: var(--rv-text);
  animation-delay: 0.15s;
}
.regluvordur-final-score-pill__count {
  font-weight: var(--rv-fw-bold);
  font-size: 44px;
  line-height: 1;
}
.regluvordur-final-score-pill__label {
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-12);
  color: var(--rv-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.regluvordur-stat-tile {
  flex: 1;
  padding: var(--rv-space-10) var(--rv-space-16);
  border-radius: var(--rv-space-16);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  text-align: left;
  /* Stack label / value as flex children so their gap is explicit and
     the user-agent default `<p>` margin (~1em top/bottom) doesn't inflate
     the tile height. */
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.regluvordur-stat-tile__label {
  margin: 0;
  font-weight: var(--rv-fw-semibold);
  font-size: 11px;
  color: var(--rv-white-60);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.regluvordur-stat-tile__value {
  margin: 0;
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-22);
  color: var(--rv-gold);
}

/* ── Bottom-anchored form layouts (registration screens) ─────────────────── */

.regluvordur-bottom-form {
  padding: 0 var(--rv-space-24);
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-12);
}
.regluvordur-bottom-form--gap-8 {
  gap: var(--rv-space-8);
}
/* regEmail screen (the only bottom-form with a terms row): give the
   input → checkbox → button stack a bit more breathing room. */
.regluvordur-bottom-form:has(.regluvordur-terms) {
  gap: var(--rv-space-20);
}

.regluvordur-form-error {
  color: var(--rv-error-light);
  font-size: var(--rv-fs-12);
  text-align: center;
}
.regluvordur-form-error--with-margin {
  margin-top: var(--rv-space-8);
}
.regluvordur-form-error--reserved {
  min-height: 14px;
}

.regluvordur-reg-info {
  padding: 0 var(--rv-space-24);
  text-align: center;
  color: rgba(255,255,255,0.65);
  font-size: var(--rv-fs-13);
  line-height: 1.4;
}

.regluvordur-field--code {
  padding: var(--rv-space-12) var(--rv-space-16);
  border-radius: var(--rv-radius-button);
}

/* ── Home carousel ────────────────────────────────────────────────────────── */

/* Page-header row above the carousel: V brand mark left, leaderboard
   icon right. Lives in the flex flow so it never overlaps the host
   page's header in letterbox mode. */
.regluvordur-home-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--rv-space-22);
  /* Negative margin counteracts the parent's flex gap so this thin
     utility row doesn't push the online pill down too far. */
  margin-bottom: calc(-1 * var(--rv-space-12));
}
.regluvordur-home-page-header__brand {
  width: 32px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rv-gold);
}
.regluvordur-home-page-header__brand svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* "X að spila núna" online-player pill. Gold pulse dot + label.
   Sits centered between the page-header and the card stage.
   Accent is set inline per active card so the dot tints with the
   carousel. */
.regluvordur-online-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--rv-space-8);
  padding: 6px var(--rv-space-12);
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  --rv-accent: var(--rv-gold);
}
.regluvordur-online-pill__dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-accent);
  flex-shrink: 0;
}
.regluvordur-online-pill__dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-accent);
  opacity: 0.3;
  animation: regluvordur-online-pulse 1.8s var(--rv-ease-out) infinite;
}
.regluvordur-online-pill__label {
  font-weight: var(--rv-fw-medium);
  font-size: var(--rv-fs-13);
  color: var(--rv-white-60);
  letter-spacing: -0.01em;
  line-height: 1;
}
@keyframes regluvordur-online-pulse {
  0%   { transform: scale(1);   opacity: 0.35; }
  70%  { transform: scale(2.2); opacity: 0;    }
  100% { transform: scale(2.2); opacity: 0;    }
}

.regluvordur-home-stage {
  flex: 1;
  position: relative;
  min-height: 0;
  perspective: 1200px;
  overflow: visible;
  touch-action: pan-y;
}
/* Mobile: cap the stage so the card doesn't stretch into the dots row
   at the bottom — the screen's space-evenly then redistributes the
   freed slack as breathing room above and below the card. Figma node
   1:4061 specs the card at 509 px tall on iPhone 14 Pro; clamp lets it
   shrink on shorter phones (iPhone SE) and never exceed the Figma cap.
   Block is placed here, after the base rule above, so the override
   actually wins in source order. */
@media (max-width: 430px) {
  .regluvordur-home-stage {
    flex: 0 1 clamp(380px, 60vh, 509px);
  }
}
.regluvordur-home-card-positioner {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 353px;
  margin-left: -176.5px;
  transition: transform var(--rv-dur-lg) var(--rv-ease-out), opacity var(--rv-dur-md);
}


.regluvordur-game-card {
  width: 100%;
  height: 100%;
  border-radius: var(--rv-radius-button);
  background: rgba(255,255,255,0.13);
  /* Figma node 1:4061 — uniform 15 px on all sides. */
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rv-space-10);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.regluvordur-game-card--active {
  border: 1px solid color-mix(in srgb, var(--rv-accent) 33%, transparent);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}
.regluvordur-game-card--disabled {
  opacity: 0.6;
}

/* Hero badge — the crown-and-laurel V shield. Inherits white from the SVG's
   var(--fill-0, white) default; no override needed. Figma node 65:2953. */
.regluvordur-game-card__badge-svg {
  width: 97px;
  height: 94px;
  flex-shrink: 0;
  display: block;
  /* Figma puts py-10 on the Screen-Heading group (65:2949); pre-badge
     room reads as an extra 10 px above the shield. */
  margin-top: 10px;
  /* Figma's Screen-Heading group has a 28 px gap between the badge and
     the text column. Card-level gap is 10 px, so add 18 to land on 28. */
  margin-bottom: 18px;
}

.regluvordur-game-card__eyebrow {
  align-self: stretch;
  font-weight: var(--rv-fw-medium);
  font-size: 20px;
  color: var(--rv-accent);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  /* Override .regluvordur-suisse's text-align: left. */
  text-align: center;
}

/* Plain class selector — the headline is a <div> (not <h2>) on purpose
   so we don't have to fight Breakdance's heading rules. Figma node
   65:2952: Suisse Int'l Semi Bold, 32 px, line-height 1, -0.03em. */
.regluvordur-game-card__headline {
  align-self: stretch;
  min-width: 0;
  font-weight: var(--rv-fw-semibold);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rv-white);
  margin: 0;
  text-align: center;
  /* Only break as a last resort on extreme narrow viewports. */
  overflow-wrap: break-word;
}

/* Figma node 65:2995: Suisse Int'l Regular, 20 px, line-height 24 px. */
.regluvordur-game-card__body {
  align-self: stretch;
  min-width: 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: var(--rv-white);
  letter-spacing: 0;
  margin: 0;
  text-align: center;
}

.regluvordur-game-card__cta {
  width: 100%;
  height: 70px;
  margin-top: auto;
  flex-shrink: 0;
  border-radius: var(--rv-radius-button);
  background: var(--rv-accent);
  border: none;
  cursor: pointer;
  position: relative;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-18);
  color: var(--rv-white);
  letter-spacing: -0.03em;
  overflow: hidden;
}
/* Gold-accented Regluvörður card needs dark CTA text for contrast;
   terracotta / teal cards keep white text. */
.regluvordur-game-card--cta-dark .regluvordur-game-card__cta {
  color: var(--rv-text-dark);
}
.regluvordur-game-card__cta:disabled {
  background: rgba(255,255,255,0.12);
  cursor: not-allowed;
  color: var(--rv-white-50);
  box-shadow: none;
}
.regluvordur-game-card__cta-text {
  position: relative;
}

.regluvordur-game-card__leaderboard-link {
  width: 100%;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-18);
  line-height: 24px;
  color: var(--rv-white);
  text-align: center;
  letter-spacing: -0.03em;
  -webkit-tap-highlight-color: transparent;
  /* Figma CTA group (1:4088) uses gap 12; card-level gap is 10, add 2. */
  margin-top: 2px;
}
.regluvordur-game-card__leaderboard-link:active {
  opacity: 0.65;
}

/* Short viewports (iPhone SE, small Androids, Safari with URL bar visible
   on iPhone 12/13/14) — tighten everything so the full body copy fits
   without scrolling or truncation. The Figma frame is 393×852 but iPhone
   SE is 375×667 and Safari with URL bar steals ~80px more. This rule is
   the *floor*; larger phones see the base Figma-leaning values above. */
@media (max-height: 700px) {
  /* Top padding shrink for every screen lives on .regluvordur-game-wrapper
     via --rv-screen-pad-top (see the top of this file). This block only
     keeps the per-screen tweaks that aren't covered by the token. */
  .regluvordur-screen--flex {
    gap: var(--rv-space-10);
  }

  .regluvordur-header__title {
    font-size: 22px;
  }
  .regluvordur-game-card {
    padding: 12px;
    gap: var(--rv-space-8);
  }
  .regluvordur-game-card__badge-svg {
    width: 64px;
    height: 62px;
    margin-top: 0;
    margin-bottom: 12px;
  }
  .regluvordur-game-card__eyebrow {
    font-size: 14px;
  }
  .regluvordur-game-card__headline {
    font-size: 22px;
    line-height: 1.05;
  }
  .regluvordur-game-card__body {
    font-size: 14px;
    line-height: 18px;
  }
  .regluvordur-game-card__cta {
    height: 56px;
  }
  .regluvordur-game-card__leaderboard-link {
    font-size: var(--rv-fs-16);
    margin-top: 0;
  }

  /* Registration flow */
  .regluvordur-header__subtitle {
    font-size: var(--rv-fs-15);
  }
  .regluvordur-reg-info {
    font-size: var(--rv-fs-12);
  }
  .regluvordur-bottom-form {
    gap: var(--rv-space-10);
  }
  .regluvordur-field--code {
    padding: var(--rv-space-8) var(--rv-space-12);
  }
  .regluvordur-code__digit {
    height: 32px;
    font-size: 18px;
  }
}

.regluvordur-shimmer-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
  opacity: 0;
  pointer-events: none;
}
.regluvordur-shimmer-overlay--play {
  animation: regluvordur-shimmer 2.6s linear 1 forwards;
}

.regluvordur-dot-row {
  display: flex;
  justify-content: center;
  gap: var(--rv-space-10);
  align-items: center;
}
.regluvordur-dot {
  width: 15px;
  height: 15px;
  border-radius: var(--rv-space-10);
  background-color: rgb(109,103,91);
  border: none;
  cursor: pointer;
  transition: all var(--rv-dur-md) var(--rv-ease-out);
}
.regluvordur-dot--active {
  width: 45px;
  background-color: var(--rv-accent);
}

/* ── Club selector (chips on RegProfile) ──────────────────────────────────── */

.regluvordur-chip {
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  transition: all 0.2s ease;
}
.regluvordur-chip--active {
  background: var(--rv-gold);
  color: var(--rv-text-dark);
}

/* ── Leaderboard score-mode toggle (Samtals / Besti leikur) ────────────────
   Segmented pill above the leaderboard list on both the global ranking and
   the club views. Active segment filled gold; mounted centered above the
   list by renderScoreToggle(). */
.regluvordur-score-toggle {
  display: inline-flex;
  align-self: center;
  gap: 4px;
  padding: 4px;
  margin: 0 auto var(--rv-space-12);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.regluvordur-score-toggle__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  color: var(--rv-white-60);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-13);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background var(--rv-dur-md) var(--rv-ease-out),
              color var(--rv-dur-md) var(--rv-ease-out);
}
.regluvordur-score-toggle__btn--active {
  background: var(--rv-gold);
  color: var(--rv-text-dark);
}

/* Set by the ranking screen when the selected period has no rows: nothing to
   sort, so dim the toggle and swallow clicks. */
.regluvordur-score-toggle--disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* On the club screen the toggle belongs to the ranking view: hidden in menu
   mode, fades in with the leaderboard (mirrors the list's --ranking fade).
   The standalone clubRanking + global ranking screens have no .regluvordur-
   club wrapper, so it just shows there. */
.regluvordur-club .regluvordur-score-toggle {
  opacity: 0;
  max-height: 0;
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 0ms;
}
.regluvordur-club--ranking .regluvordur-score-toggle {
  opacity: 1;
  max-height: 60px;
  margin: 0 auto var(--rv-space-12);
  overflow: visible;
  pointer-events: auto;
  transition: opacity 600ms cubic-bezier(0.32, 0.72, 0, 1) 300ms;
}

/* Time-window segmented control (Tímabil / Í dag / Vika / Mánuður), mounted by
   renderPeriodToggle() below the score toggle on the ranking screen. Same
   visual language as .regluvordur-score-toggle; spans the list width (so the
   four segments split evenly and the longer Icelandic labels fit on a phone)
   and left-aligns to the list edge via the --rv-screen-pad-x margins. */
.regluvordur-period-toggle {
  display: flex;
  max-width: 360px;
  gap: 4px;
  padding: 4px;
  /* No bottom margin — the parent .regluvordur-ranking flex `gap` spaces the
     toggles and list uniformly; an extra margin here double-spaced them. */
  margin: 0 var(--rv-screen-pad-x);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.regluvordur-period-toggle__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 999px;
  background: transparent;
  color: var(--rv-white-60);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-13);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background var(--rv-dur-md) var(--rv-ease-out),
              color var(--rv-dur-md) var(--rv-ease-out);
}
.regluvordur-period-toggle__btn--active {
  background: var(--rv-gold);
  color: var(--rv-text-dark);
}

/* Score-toggle layout when the period filter is present: left-aligned to the
   list edge (matching the period toggle) with slimmer 4px button padding.
   Gated on .regluvordur-ranking--periods so that hiding the period filter (or
   the club view, which never adds the class) keeps the centered, taller
   default form. */
.regluvordur-ranking--periods > .regluvordur-score-toggle {
  align-self: flex-start;
  /* Bottom margin zeroed — rely on the parent flex `gap` (see period toggle). */
  margin: 0 var(--rv-screen-pad-x);
}
.regluvordur-ranking--periods > .regluvordur-score-toggle .regluvordur-score-toggle__btn {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ── Leaderboard split-flap flip + reshuffle (Samtals ↔ Besti leikur) ──────
   Generic scaffolding shared by both leaderboards. A flip card stacks two
   REAL rows (front = old mode, back = new mode). Three nested layers keep the
   travel and the flip from fighting:
     .rv-lb-mover  — the flex slot; gets translateY (travel to its new spot).
     .rv-lb-flip   — perspective container; NEVER transformed, so the child's
                     3D never flattens (transforming it kills the visible
                     flip). Its perspective travels with the mover.
     .rv-lb-flipper— rotateX (the flip); the two faces live inside it.
   flex-shrink:0 on the mover is essential: its descendants are absolute (0
   min-content) so the flex column would otherwise collapse it to 0. */
/* A flipping slot stays in flex flow (in place) at its fixed height. */
.rv-lb-mover {
  position: relative;
  flex-shrink: 0;
}
.rv-lb-flip {
  position: absolute;
  inset: 0;
  perspective: 600px;
}
.rv-lb-flipper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.rv-lb-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.rv-lb-face--back { transform: rotateX(180deg); }

/* The flip and the settle-wag are no longer CSS keyframes — each row is driven
   as a torsional spring-damper in game.js (Motion's spring() generator), with
   the row's mass derived from its name length. The flipper's rotateX and the
   settled row's perspective(600px) rotateX are written inline per animation
   frame; nothing further is needed here. Reduced motion is honoured in JS
   (RV_REDUCED_MOTION): the toggle paints instantly and no spring runs. */

/* ── Leaderboard table (existing shortcode) ───────────────────────────────── */

.regluvordur-leaderboard table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Manrope', sans-serif;
}
.regluvordur-leaderboard th,
.regluvordur-leaderboard td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.regluvordur-leaderboard th {
  text-align: left;
  font-weight: 600;
  color: #4b5563;
  font-size: 0.875rem;
}
.regluvordur-rank--gold   { color: #d97706; font-weight: 700; }
.regluvordur-rank--silver { color: #9ca3af; font-weight: 700; }
.regluvordur-rank--bronze { color: #b45309; font-weight: 700; }
.regluvordur-leaderboard__score {
  font-weight: 700;
  color: #111827;
  text-align: right;
}

/* Anchored bottom-button row used by the stats screen. */
.regluvordur-leader-footer {
  margin: 0 var(--rv-space-24);
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-12);
}

/* ── Club select (combobox) ─────────────────────────────────────────────── */

.regluvordur-club-select__label {
  display: block;
  font-weight: 600;
  margin: 0.5rem 0;
}
.regluvordur-club-select { position: relative; display: block; }
.regluvordur-club-select__input {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-size: 1rem;
  line-height: 1.25;
  box-sizing: border-box;
}
.regluvordur-club-select__input:focus { outline: 2px solid #2563eb; outline-offset: 1px; }
.regluvordur-club-select__clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px;
  border: none; background: #e5e7eb;
  border-radius: 50%; cursor: pointer;
  font-size: 1rem; line-height: 1; color: #374151;
}
.regluvordur-club-select__list {
  position: absolute; z-index: 50;
  left: 0; right: 0; top: calc(100% + 4px);
  max-height: 260px; overflow-y: auto;
  margin: 0; padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.regluvordur-club-select__item {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: #111827;
}
.regluvordur-club-select__item:hover,
.regluvordur-club-select__item.is-active { background: #eff6ff; }
.regluvordur-club-select__item-short { margin-left: 0.5rem; color: #6b7280; font-size: 0.85rem; }
.regluvordur-club-select__item--no-club {
  border-top: 1px solid #e5e7eb;
  font-style: italic; color: #4b5563;
  margin-top: 4px;
}

/* Combobox styled to match the game's glass input fields. */
.regluvordur-field--combobox {
  padding: 14px 22px;
  position: relative;
}
.regluvordur-field--combobox:has(.regluvordur-club-select__list:not([hidden])) {
  z-index: 100;
  background: rgb(28, 26, 24);
  backdrop-filter: none;
  border-color: rgba(255,255,255,0.18);
}
.regluvordur-field--combobox .regluvordur-club-select__label {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  line-height: 1;
  font-family: 'Manrope', sans-serif;
  letter-spacing: -0.03em;
}
.regluvordur-field--combobox .regluvordur-club-select {
  position: static;
  margin-top: 4px;
}
.regluvordur-field--combobox .regluvordur-club-select__input {
  width: 100%;
  padding: 0;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.regluvordur-field--combobox .regluvordur-club-select__input::placeholder { color: rgba(255,255,255,0.4); }
.regluvordur-field--combobox .regluvordur-club-select__input:focus { outline: none; }
.regluvordur-field--combobox .regluvordur-club-select__clear {
  right: 16px;
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.regluvordur-field--combobox .regluvordur-club-select__list {
  top: 100%;
  left: -1px;
  right: -1px;
  margin-top: -1px;
  z-index: 100;
  background: rgb(28, 26, 24);
  border: 1px solid rgba(255,255,255,0.18);
  border-top: none;
  border-radius: 0 0 21px 21px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  backdrop-filter: none;
  padding: 4px 0 8px;
}
.regluvordur-field--combobox:has(.regluvordur-club-select__list:not([hidden])) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.regluvordur-field--combobox .regluvordur-club-select__item {
  color: #fff;
  padding: 0.55rem 22px;
}
.regluvordur-field--combobox .regluvordur-club-select__item:hover,
.regluvordur-field--combobox .regluvordur-club-select__item.is-active {
  background: rgba(255,255,255,0.08);
}
.regluvordur-field--combobox .regluvordur-club-select__item-short { color: rgba(255,255,255,0.55); }
.regluvordur-field--combobox .regluvordur-club-select__item--no-club {
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  margin: 4px 0 0;
}

/* ── Modal (confirm / alert) ─────────────────────────────────────────────────
   Canonical dialog shown above any screen in the wrapper. Use for
   confirmations (Halda áfram / Hætta) and one-button alerts (errors).
   Tokens lifted from Figma frame `25:1639` (the quit-quiz frame): brown-
   gold gradient card with a thin gold border, on a dark blurred backdrop. */

.regluvordur-modal-backdrop {
  /* Mounted on document.body (not inside the wrapper) so the dark overlay
     covers the full viewport on desktop — the wrapper is a centred 393px
     phone frame there. Matches the viewport-anchored escape pattern used
     by .rv-result-bg and the weather FX canvas. z-index high enough to
     top both the wrapper's and the weather strip's z:1 parent sections. */
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 9999;

  /* Tokens scoped here because the backdrop lives outside the wrapper's
     --rv-* scope. Kept to the subset the modal actually consumes — keep
     in sync with the wrapper token block at the top of this file. */
  --rv-gold: rgb(255,189,0);
  --rv-white: #fff;
  --rv-text-dark: rgb(16,16,16);
  --rv-fw-medium: 500;
  --rv-fw-semibold: 600;
  --rv-fw-bold: 700;
  --rv-fs-13: 13px;
  --rv-space-10: 10px;
  --rv-space-12: 12px;
  --rv-space-14: 14px;
  --rv-space-24: 24px;
  --rv-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rv-dur-md: 0.4s;

  background: rgba(10,8,4,0.7);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rv-space-24);
  animation: regluvordur-modal-fade-in var(--rv-dur-md) var(--rv-ease-out);
}
@keyframes regluvordur-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.regluvordur-modal {
  width: 100%;
  max-width: 320px;
  padding: 29px 25px 21px;
  border-radius: 22px;
  background: linear-gradient(180deg, #403622, #282216);
  border: 1px solid rgba(255,189,0,0.2);
  box-shadow: 0 20px 30px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  color: var(--rv-white);
  animation: regluvordur-modal-pop var(--rv-dur-md) var(--rv-ease-out);
}
@keyframes regluvordur-modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.regluvordur-modal__kicker {
  font-family: 'Suisse Intl', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-13);
  color: var(--rv-gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 6px;
}

.regluvordur-modal__title {
  font-weight: var(--rv-fw-bold);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--rv-white);
  margin: 0;
}

.regluvordur-modal__body {
  margin: 4px 0 0;
  font-family: 'Manrope', sans-serif;
  font-weight: var(--rv-fw-medium);
  font-size: var(--rv-fs-13);
  line-height: 1.45;
  color: rgba(255,255,255,0.65);
}

.regluvordur-modal__buttons {
  display: flex;
  gap: var(--rv-space-10);
  padding-top: var(--rv-space-12);
}

.regluvordur-modal__btn {
  flex: 1;
  height: 48px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-space-14);
  letter-spacing: -0.01em;
  transition: filter 0.2s ease;
}
.regluvordur-modal__btn:focus-visible {
  outline: 2px solid rgba(255,189,0,0.6);
  outline-offset: 2px;
}
.regluvordur-modal__btn:hover {
  filter: brightness(1.08);
}
.regluvordur-modal__btn--cancel {
  background: rgba(255,255,255,0.08);
  color: var(--rv-white);
}
.regluvordur-modal__btn--confirm {
  background: var(--rv-gold);
  color: var(--rv-text-dark);
}
.regluvordur-modal__btn:disabled {
  filter: grayscale(0.5);
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Avatar crop modal — circular drag-and-zoom before upload ────────────── */

.regluvordur-avatar-crop__stage {
  width: 256px;
  height: 256px;
  margin: 12px auto 8px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: rgba(0,0,0,0.4);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.regluvordur-avatar-crop__stage:active { cursor: grabbing; }
.regluvordur-avatar-crop__img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  /* !important overrides the Breakdance / WordPress global img reset
     (img { max-width: 100%; height: auto }) — without it the image is
     capped to the stage width and the JS scale renders it tiny. JS
     transform handles all sizing. */
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}
.regluvordur-avatar-crop__hint {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  text-align: center;
  margin: 4px 0 2px;
}
.regluvordur-avatar-crop__zoom {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.regluvordur-avatar-crop__zoom:focus-visible {
  outline: 2px solid rgba(255,189,0,0.6);
  outline-offset: 4px;
  border-radius: 6px;
}
.regluvordur-avatar-crop__zoom::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
}
.regluvordur-avatar-crop__zoom::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
}
.regluvordur-avatar-crop__zoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rv-gold);
  border: none;
  margin-top: -7px;
  cursor: pointer;
}
.regluvordur-avatar-crop__zoom::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rv-gold);
  border: none;
  cursor: pointer;
}
.regluvordur-avatar-crop__error {
  margin: 6px 0 0;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  color: #ff8a8a;
  text-align: center;
  min-height: 16px;
}

/* ── Profile screen (regluvordur-2026-profile) ───────────────────────────── */

.regluvordur-profile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--rv-screen-pad-top) 17px var(--rv-screen-pad-bottom);
  gap: var(--rv-space-16);
}

.regluvordur-profile__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rv-space-12);
}

.regluvordur-profile__avatar {
  width: 175px;
  height: 175px;
  border-radius: var(--rv-radius-full);
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.regluvordur-profile__avatar--empty {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%),
    rgba(255,255,255,0.06);
}

.regluvordur-profile__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.regluvordur-profile__name {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-32);
  line-height: 1.1;
  color: var(--rv-white);
  text-align: center;
  letter-spacing: -0.01em;
}

.regluvordur-profile__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--rv-gold);
  color: var(--rv-text-dark);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-12);
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
}

.regluvordur-profile__badge-star {
  font-size: var(--rv-fs-12);
  line-height: 1;
}

.regluvordur-profile__list {
  list-style: none;
  margin: var(--rv-space-8) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.regluvordur-profile__list > li + li .regluvordur-profile__row {
  border-top: 1px solid rgba(255,255,255,0.1);
}

.regluvordur-profile__row {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--rv-space-12);
  padding: var(--rv-space-12) 0;
  min-height: 69px;
  color: var(--rv-white);
  text-align: left;
  cursor: pointer;
  font-family: 'Manrope', system-ui, sans-serif;
}

.regluvordur-profile__row:focus-visible {
  outline: 2px solid rgba(255,189,0,0.6);
  outline-offset: 2px;
  border-radius: 8px;
}

.regluvordur-profile__row-num {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--rv-bg2);
  color: var(--rv-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-13);
  letter-spacing: 0.04em;
}

.regluvordur-profile__row-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.regluvordur-profile__row-title {
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-18);
  color: var(--rv-white);
  line-height: 1.2;
}

.regluvordur-profile__row-sub {
  font-weight: var(--rv-fw-medium);
  font-size: 15px;
  color: var(--rv-white-60);
  line-height: 1.3;
}

.regluvordur-profile__row-chevron {
  flex: 0 0 18px;
  font-size: 22px;
  line-height: 1;
  color: var(--rv-white-60);
  transform: translateY(-1px);
}

.regluvordur-profile__edit-link {
  appearance: none;
  background: transparent;
  border: 0;
  margin-top: var(--rv-space-8);
  padding: var(--rv-space-18) 0;
  width: 100%;
  text-align: center;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-18);
  color: var(--rv-white);
  cursor: pointer;
}

.regluvordur-profile__edit-link:hover {
  color: var(--rv-gold);
}

.regluvordur-profile__actions {
  display: flex;
  gap: var(--rv-space-12);
  margin-top: var(--rv-space-8);
}

.regluvordur-profile__actions .regluvordur-profile__edit-link {
  flex: 1;
  width: auto;
  margin-top: 0;
}

.regluvordur-profile__back {
  margin: var(--rv-space-16) 0 0;
  text-align: center;
}

.regluvordur-profile__back .regluvordur-profile__edit-link {
  display: inline-block;
  width: auto;
  margin-top: 0;
  text-decoration: none;
}

.regluvordur-back-link {
  appearance: none;
  background: transparent;
  border: 0;
  margin-top: var(--rv-space-8);
  padding: 0;
  align-self: flex-start;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-14);
  color: var(--rv-white-60);
  cursor: pointer;
}

.regluvordur-back-link:hover {
  color: var(--rv-gold);
}

/* ── Stats stub screen ───────────────────────────────────────────────────── */

.regluvordur-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rv-space-12);
  padding: 0 17px;
}

.regluvordur-stats-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--rv-space-16);
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

.regluvordur-stats-tile__value {
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-32);
  line-height: 1;
  color: var(--rv-gold);
}

.regluvordur-stats-tile__label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-medium);
  font-size: var(--rv-fs-13);
  color: var(--rv-white-60);
  line-height: 1.3;
}

.regluvordur-stats-note {
  margin: var(--rv-space-8) 17px 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--rv-fs-13);
  color: var(--rv-white-60);
  text-align: center;
  font-style: italic;
}

/* ── Stats dashboard (player + club) ─────────────────────────────────────── */

.regluvordur-stats2 {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-16);
  /* Full screen padding so content clears the top bar and breathes, matching
     the flex screens (var(--rv-screen-pad-top) is responsive: 100/80/60). */
  padding: var(--rv-screen-pad-top) var(--rv-screen-pad-x) var(--rv-screen-pad-bottom);
  /* Soften the scroll clip: content dissolves at the top and bottom edges of
     the scroll container instead of being hard-cut. The 56px fade zones sit
     within the top/bottom padding, so the heading and the final button stay
     fully opaque at rest — only mid-scroll content feathers out. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
/* The header title-row carries its own 24px gutter for the absolute-layout
   screens; here the wrapper already pads, so zero it to align the title with
   the cards/gauge below. */
.regluvordur-stats2 .regluvordur-header__title-row,
.regluvordur-share .regluvordur-header__title-row {
  padding-left: 0;
  padding-right: 0;
}

/* Radial gauge */
.regluvordur-stats2 .rv-stats-gauge-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--rv-space-8);
}
.rv-stats-gauge {
  position: relative;
  width: 220px;
  height: 220px;
}
.rv-stats-gauge__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.rv-stats-gauge .rv-gauge-val {
  transition: none;
}
.rv-stats-gauge__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}
.rv-stats-gauge__value {
  font-weight: var(--rv-fw-bold);
  font-size: 44px;
  line-height: 1;
  color: var(--rv-gold);
}
.rv-stats-gauge__caption {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.rv-stats-gauge__label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-12);
  letter-spacing: 0.12em;
  color: var(--rv-white-60);
  text-transform: uppercase;
}
.rv-stats-gauge__sub {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--rv-fs-12);
  color: var(--rv-white-50);
}

/* Headline (percentile / club standing) */
.rv-stats-headline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-16);
  color: var(--rv-white);
  text-align: center;
}
.rv-stats-headline__star { color: var(--rv-gold); }

/* Cards */
.rv-stats-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: var(--rv-space-16);
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-12);
}
.rv-stats-card__head { display: flex; flex-direction: column; gap: 2px; }
.rv-stats-card__head--row {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}
.rv-stats-card__head-col { display: flex; flex-direction: column; gap: 2px; }
.rv-stats-card__eyebrow {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-12);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rv-white-50);
}
.rv-stats-card__title {
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-18);
  color: var(--rv-white);
}
.rv-stats-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--rv-fs-13);
  color: var(--rv-white-60);
}

/* Club-rank progress card */
.rv-stats-card--rank .rv-stats-rank__row {
  display: flex;
  align-items: center;
  gap: var(--rv-space-14);
}
.rv-stats-rank__badge {
  flex: 0 0 auto;
  min-width: 64px;
  padding: var(--rv-space-12) var(--rv-space-14);
  border-radius: 14px;
  background: var(--rv-gold);
  color: var(--rv-text-dark);
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-22);
  text-align: center;
}
.rv-stats-rank__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.rv-stats-rank__label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--rv-fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rv-white-50);
}
.rv-stats-rank__title { font-weight: var(--rv-fw-semibold); font-size: var(--rv-fs-16); color: var(--rv-white); }
.rv-stats-rank__bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
.rv-stats-rank__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rv-gold), var(--rv-gold-soft));
}

/* Charts */
.rv-stats-chart { width: 100%; }
.rv-stats-chart__svg { width: 100%; height: 110px; display: block; overflow: visible; }

/* Activity bars — count above, bar, week label below */
.rv-stats-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--rv-space-10);
  width: 100%;
}
.rv-stats-bars__col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.rv-stats-bars__count {
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-13);
  color: var(--rv-white);
  line-height: 1;
}
.rv-stats-bars__track {
  width: 100%;
  height: 92px;
  display: flex;
  align-items: flex-end;
  border-radius: 8px;
}
.rv-stats-bars__fill {
  width: 100%;
  height: 0;
  min-height: 4px;
  /* Rounded top, flush baseline — the bar grows up from the bottom. */
  border-radius: 8px 8px 0 0;
  background: var(--rv-gold);
  /* Soft gold fading smoothly to transparent at the baseline — echoes the
     score-evolution line chart's gold area tint. A mask gives a true alpha
     fade (a background gradient can't reach 0 cleanly). */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}
.rv-stats-bars__fill--empty {
  background: rgba(255,255,255,0.10);
  -webkit-mask-image: none;
          mask-image: none;
}
.rv-stats-bars__label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--rv-fs-12);
  color: var(--rv-white-50);
  line-height: 1;
}

/* Streak pill */
.rv-stats-streak-pill {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,189,0,0.16);
  border: 1px solid rgba(255,189,0,0.30);
  color: var(--rv-gold-soft);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-12);
  white-space: nowrap;
}

.rv-stats-minlabel { color: var(--rv-white-50); }
.rv-stats-delta { font-weight: var(--rv-fw-semibold); }
.rv-stats-delta--up { color: var(--rv-green); }
.rv-stats-delta--down { color: var(--rv-red); }

.rv-stats-grid--3 { grid-template-columns: 1fr 1fr 1fr; padding: 0; }
.rv-stats-grid--3 .regluvordur-stats-tile { align-items: center; text-align: center; }

/* Share button — canonical primary button (.regluvordur-btn--primary) plus
   the icon/text gap and press feedback the base button doesn't carry.
   flex:none keeps its 70px height from collapsing in the stats flex column. */
.rv-stats-share { flex: none; gap: 8px; }
.rv-stats-share:active { transform: translateY(1px); }

.rv-stats-empty {
  margin: 0;
  text-align: center;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--rv-fs-13);
  color: var(--rv-white-60);
}

/* Prominent consecutive-day streak — full-width row */
.rv-stats-streak {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--rv-space-14);
  padding: var(--rv-space-14) var(--rv-space-16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,189,0,0.18), rgba(255,189,0,0.06));
  border: 1px solid rgba(255,189,0,0.35);
}
.rv-stats-streak__flame { font-size: 34px; line-height: 1; flex: 0 0 auto; }
.rv-stats-streak__text { display: flex; flex-direction: column; gap: 1px; }
.rv-stats-streak__cap {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--rv-fs-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rv-white-60);
}
.rv-stats-streak__main {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.rv-stats-streak__num {
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-32);
  color: var(--rv-gold);
  line-height: 1;
}
.rv-stats-streak__unit {
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-16);
  color: var(--rv-white);
}

/* Line-chart point markers + latest-value label (overlaid in HTML so they
   don't distort under the chart's non-uniform SVG scaling). */
.rv-stats-chart--line { position: relative; }
.rv-stats-trend-overlay { position: absolute; inset: 0; pointer-events: none; }
.rv-stats-trend-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rv-gold);
  box-shadow: 0 0 0 2px rgba(40,32,16,0.7);
  transform: translate(-50%, -50%);
}
.rv-stats-trend-dot--last {
  width: 10px;
  height: 10px;
  background: var(--rv-gold-soft);
}
.rv-stats-trend-val {
  position: absolute;
  transform: translateY(-160%);
  font-family: 'Suisse Intl', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-13);
  color: var(--rv-gold-soft);
  white-space: nowrap;
}

/* ── Share sheet ─────────────────────────────────────────────────────────── */

.regluvordur-share {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-16);
  padding: var(--rv-screen-pad-top) var(--rv-screen-pad-x) var(--rv-screen-pad-bottom);
}

.rv-share-tabs {
  display: flex;
  gap: var(--rv-space-8);
  justify-content: center;
  flex-wrap: wrap;
}
.rv-share-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: var(--rv-white-60);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-medium);
  font-size: var(--rv-fs-13);
  cursor: pointer;
}
.rv-share-tab--active {
  background: var(--rv-gold);
  border-color: var(--rv-gold);
  color: var(--rv-text-dark);
  font-weight: var(--rv-fw-semibold);
}

/* Take the slack between the tabs and the action buttons; the canvas scales
   to fit this box (both dimensions) so the 9:16 card never overflows onto the
   buttons on tall/narrow phones. */
.rv-share-preview {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.rv-share-canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}

.rv-share-actions {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-10);
}
.rv-share-actions__row {
  display: flex;
  gap: var(--rv-space-10);
}
.rv-share-primary { width: 100%; }
.rv-share-platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rv-space-8);
}
.rv-share-platform {
  padding: var(--rv-space-12) var(--rv-space-8);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: var(--rv-white);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-13);
  cursor: pointer;
  text-align: center;
}
.rv-share-platform:active { transform: translateY(1px); }
.rv-share-secondary {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--rv-space-14);
  border-radius: var(--rv-radius-button);
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: var(--rv-white);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-13);
  cursor: pointer;
}
.rv-share-secondary:active { transform: translateY(1px); }
.rv-share-status {
  margin: 0;
  min-height: 1.2em;
  text-align: center;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--rv-fs-13);
  color: var(--rv-gold-soft);
}

/* Desktop: a 3-column grid. The top chrome (title, tabs), the action buttons
   and the back link, plus the tall previews (9:16 story, 1:1 post), all live
   in the centre column — so the screen reads as centred, not sprawled. Only
   the landscape 16:9 preview breaks out across all three columns, and it's
   height-capped so it never gets too tall. Stats keeps the 393px phone frame.
   Phones keep the flex-column stack from the base rules above. */
@media (min-width: 820px) {
  .regluvordur-game-wrapper.regluvordur-game--screen-share { width: 760px; }
  .regluvordur-share {
    display: grid;
    grid-template-columns: 1fr minmax(0, 360px) 1fr;
    /* title, tabs, preview(flex), actions, status, back. The preview row is
       1fr so it absorbs the leftover height and the canvas fits inside it —
       same auto-fit the mobile flex column gives, but grid lets 16:9 break
       out of the centre column. */
    grid-template-rows: auto auto 1fr auto auto auto;
    column-gap: var(--rv-space-20);
    row-gap: var(--rv-space-12);
    height: 100%;
    padding-top: var(--rv-space-30);
  }
  .regluvordur-share > * { grid-column: 2; min-width: 0; }
  .regluvordur-share > .regluvordur-header__title-row { grid-row: 1; }
  .regluvordur-share > .rv-share-tabs { grid-row: 2; }
  .regluvordur-share > .rv-share-preview { grid-row: 3; min-height: 0; }
  .regluvordur-share > .rv-share-actions { grid-row: 4; }
  .regluvordur-share > .rv-share-status { grid-row: 5; }
  .regluvordur-share > .regluvordur-profile__edit-link { grid-row: 6; }
  /* Only 16:9 breaks into the side columns; the 1fr row still caps its
     height so it widens without towering. */
  .regluvordur-share.rv-share--wide > .rv-share-preview { grid-column: 1 / -1; }
}

/* ── Coming soon (beta gate) ─────────────────────────────────────────────── */

.regluvordur-coming-soon__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--rv-space-12);
  margin: auto;
  max-width: 320px;
  padding: var(--rv-space-30) var(--rv-space-24);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,189,0,0.08), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,189,0,0.25);
}
.regluvordur-coming-soon__icon {
  font-size: 30px;
  line-height: 1;
  color: var(--rv-gold);
}
.regluvordur-coming-soon__title {
  margin: 0;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-22);
  letter-spacing: 0.01em;
  color: var(--rv-gold);
}
.regluvordur-coming-soon__body {
  margin: 0;
  max-width: 240px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--rv-fs-13);
  color: var(--rv-white-60);
  line-height: 1.5;
}

/* ── Dream team (regluvordur-2026-dream-team) ────────────────────────────── */

.regluvordur-dream-team {
  display: flex;
  flex-direction: column;
  padding: var(--rv-screen-pad-top) 0 var(--rv-screen-pad-bottom);
  gap: var(--rv-space-12);
}

.regluvordur-dream-team__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rv-space-12);
  padding: 10px 20px;
}

.regluvordur-dream-team__hero-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.regluvordur-dream-team__eyebrow {
  font-weight: var(--rv-fw-medium);
  font-size: var(--rv-fs-18);
  letter-spacing: -0.03em;
  color: var(--rv-gold);
}

.regluvordur-dream-team__title {
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-32);
  letter-spacing: -0.03em;
  color: var(--rv-white);
  line-height: 1.05;
}

.regluvordur-dream-team__crest {
  /* Source SVG ships with preserveAspectRatio="none" + width/height="100%",
   * which leaves it at the mercy of whatever flex height the hero gives
   * it. Lock the box to the Figma intrinsic 66×64 and let object-fit
   * keep the artwork's ratio honest. */
  flex: 0 0 66px;
  align-self: center;
  width: 66px;
  height: 64px;
  aspect-ratio: 66 / 64;
  object-fit: contain;
  display: block;
}

.regluvordur-dream-team__body {
  margin: 0 20px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-medium);
  font-size: var(--rv-fs-13);
  line-height: 1.4;
  color: var(--rv-white-60);
  text-align: left;
}

.regluvordur-dream-team__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--rv-space-8) 20px 0;
}

.regluvordur-dream-team__status {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--rv-fs-13);
  color: var(--rv-white-60);
  text-align: center;
}

.regluvordur-dream-team__slot {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  /* Use min-height + max-height (not a fixed height) so the
   * --hidden state's max-height: 0 can actually collapse the card.
   * A fixed `height: 90px` would keep the box rigid against the
   * max-height transition. */
  min-height: 90px;
  border-radius: 24px;
  padding: 15px;
  display: grid;
  grid-template-columns: 22px 60px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  /* Vertical gap between the status pill (row 1) and the club badge
   * (row 2), which are the only items stacked in column 4. */
  row-gap: 7px;
  background: var(--rv-white);
  color: var(--rv-text-dark);
  border: 0;
  text-align: left;
  font-family: 'Manrope', system-ui, sans-serif;
}

.regluvordur-dream-team__slot--leader {
  background: var(--rv-gold);
}

.regluvordur-dream-team__slot--member {
  background: var(--rv-white);
}

.regluvordur-dream-team__slot-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-18);
  color: var(--rv-text-dark);
}

.regluvordur-dream-team__avatar {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  /* Explicit flex-basis + aspect-ratio so the grid cell can't stretch the
   * avatar into an ellipse if the rows around it grow taller than 60px. */
  flex: 0 0 60px;
  flex-shrink: 0;
  align-self: center;
  justify-self: start;
  width: 60px;
  height: 60px;
  aspect-ratio: 1 / 1;
  border-radius: var(--rv-radius-full);
  background: rgba(16,16,16,0.08);
  /* overflow: visible so the absolutely-positioned crown can sit above
   * the avatar; the img inside clips itself via border-radius. */
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.regluvordur-dream-team__avatar-img {
  /* Pin explicit pixels (not 100%) so the img can't be re-sized by a
   * parent that gets stretched. object-fit handles the crop. */
  width: 60px;
  height: 60px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--rv-radius-full);
  display: block;
  flex-shrink: 0;
}

.regluvordur-dream-team__avatar--pending {
  background: transparent;
  border: 1px dashed rgba(16,16,16,0.4);
  color: var(--rv-text-dark);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-22);
}

.regluvordur-dream-team__avatar--empty {
  background: rgba(16,16,16,0.06);
}

.regluvordur-dream-team__crown {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 14px;
  pointer-events: none;
}

.regluvordur-dream-team__name {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-18);
  line-height: 1.15;
  color: var(--rv-text-dark);
  letter-spacing: -0.02em;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.regluvordur-dream-team__pill {
  grid-column: 4;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 16px;
  border: 1px solid rgba(16,16,16,0.2);
  background: transparent;
  color: var(--rv-text-dark);
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-12);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.regluvordur-dream-team__pill--pending {
  color: rgba(16,16,16,0.55);
  border-color: rgba(16,16,16,0.15);
}

.regluvordur-dream-team__club {
  grid-column: 4;
  grid-row: 2;
  justify-self: end;
  /* Figma calls the tile 26×28 but the image fill behind it is a circle
   * — match that, keep it square so border-radius: 50% is a real ring. */
  width: 28px;
  height: 28px;
  border-radius: var(--rv-radius-full);
  overflow: hidden;
  background: rgba(16,16,16,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.regluvordur-dream-team__club-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.regluvordur-dream-team__slot--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  border: 1px dashed rgba(255,255,255,0.3);
  color: var(--rv-white);
  cursor: pointer;
}

.regluvordur-dream-team__slot--empty:focus-visible {
  outline: 2px solid rgba(255,189,0,0.6);
  outline-offset: 2px;
}

.regluvordur-dream-team__plus {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-18);
  line-height: 1;
}

/* Slot card transition — same three-phase 300ms iOS-decel choreography
 * the registration form uses for its club-picker (see the
 * .regluvordur-bottom-form--club-active block above). Each state owns
 * the transition timing for *entering* it, so a single class
 * add/remove drives the sequenced motion in either direction.
 *
 *   Forward (default → --hidden):  fade out 0–300, collapse 300–600,
 *                                  then panel fades in 600–900.
 *   Reverse (--hidden → default):  panel fades out 0–300, slot expands
 *                                  300–600, slot fades in 600–900. */
/* Four-phase 1200ms morph. Each phase owns one beat so each element
 * finishes its motion before the next begins:
 *   open : other-fade(1) → other-collapse(2) → chrome-fade-out(3) → content-fade-in(4)
 *   close: content-fade-out(1) → +-glyph-back(2) → chrome-fade-in + other-expand(3) → other-fade-in(4)
 *
 * Tapped slot keeps a rigid 90px height throughout — no max-height
 * change. The "movement" of the tapped slot toward the top of the
 * card list is the natural reflow effect of the sibling slots
 * collapsing to 0 height above it. Padding stays at 15px in both
 * states so content doesn't slide horizontally during the transition.
 *
 * The reverse direction comes from the default rule's delays below;
 * the forward direction's delays live on the --inviter / --hidden rules. */
.regluvordur-dream-team__slot {
  max-height: 90px;
  opacity: 1;
  /* position: relative is the positioning anchor for the inviter
   * content (which is absolutely positioned inside the slot during
   * invite mode). Must live on the BASE rule, not just on --inviter,
   * otherwise removing --inviter on close snaps position back to
   * static instantly — the inviter would orphan up to the nearest
   * positioned ancestor (.regluvordur-screen) and reflow to the top
   * of the screen for one frame before fading out from there. */
  position: relative;
  transition:
    /* phase 2 reverse — + glyph and its grey/dashed chrome land
     * together on the tapped slot. Same delay as the .__plus rule
     * so they appear simultaneously. */
    background-color 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    border-color     300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    /* phase 3 reverse — other slots expand back to 90px */
    min-height       300ms cubic-bezier(0.32, 0.72, 0, 1) 600ms,
    max-height       300ms cubic-bezier(0.32, 0.72, 0, 1) 600ms,
    margin           300ms cubic-bezier(0.32, 0.72, 0, 1) 600ms,
    /* phase 4 reverse — other slots' content fades back in */
    opacity          300ms cubic-bezier(0.32, 0.72, 0, 1) 900ms;
}

.regluvordur-dream-team__slot--hidden {
  opacity: 0;
  /* min-height must also be 0 here — the base rule's `min-height: 90px`
   * would otherwise keep the card 90px tall regardless of max-height. */
  min-height: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-color: transparent;
  pointer-events: none;
  transition:
    /* phase 1 forward — other slots fade out first */
    opacity      300ms cubic-bezier(0.32, 0.72, 0, 1) 0ms,
    /* phase 2 forward — they collapse after fading */
    min-height   300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    max-height   300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    margin       300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    padding      300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    border-color 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms;
}

/* Populated non-owner slots get a button role so a click opens the
 * remove-confirm overlay. Subtle hover/active feedback signals the
 * affordance without adding chrome to the card. */
.regluvordur-dream-team__slot--clickable {
  cursor: pointer;
}

.regluvordur-dream-team__slot--clickable:hover {
  filter: brightness(0.97);
}

.regluvordur-dream-team__slot--clickable:active {
  transform: scale(0.985);
}

.regluvordur-dream-team__slot--clickable:focus-visible {
  outline: 2px solid rgba(255,189,0,0.55);
  outline-offset: 2px;
}

/* Inviter section — slides into the same vertical band as the slot
 * list when + is tapped. The cards transition out simultaneously via
 * .regluvordur-dream-team__slot--hidden above; this panel transitions
 * in from --collapsed to its natural height. Matches references/
 * figma/regluvordur-2026-dream-team-invite/. */
/* Inviter content lives inside the tapped + slot itself, absolutely
 * positioned so it can extend below the 90px chrome into the space
 * the collapsed sibling slots have vacated — no height transition
 * required on the slot itself. The tapped slot stays a perfect
 * 90px box throughout; only its CHROME (bg + border + glyph) and
 * the inviter content cross-fade. */
.regluvordur-dream-team__inviter {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  color: var(--rv-white);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Close is INSTANT — when the user taps Til baka the input + back
   * link should be gone the moment they click. A 300ms fade-out
   * reads as a visible "flicker" because of the :focus-within
   * border-color flip on the input wrapper and the browser-default
   * focus ring on the button — both pop at t=0 and would otherwise
   * be visible during the fade. */
  transition:
    opacity 0s 0ms,
    visibility 0s 0ms;
}

.regluvordur-dream-team__slot--inviter .regluvordur-dream-team__inviter {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Open is the smooth phase-4 fade — visibility flips visible just
   * before the opacity transition starts (at 900ms) so the inviter
   * can't catch tab focus while it's still invisible. */
  transition:
    opacity    300ms cubic-bezier(0.32, 0.72, 0, 1) 900ms,
    visibility 0s linear 900ms;
}

/* --inviter strips just the chrome (bg + border) — height, position
 * and padding are intentionally NOT touched so the tapped slot stays
 * exactly where it was, exactly the size it was. Only its contents
 * morph. */
.regluvordur-dream-team__slot--inviter {
  background-color: transparent;
  border-color: transparent;
  cursor: default;
  /* position: relative already on the base rule — see comment there. */
  transition:
    /* phase 3 forward — chrome dissolves after other slots collapsed */
    background-color 300ms cubic-bezier(0.32, 0.72, 0, 1) 600ms,
    border-color     300ms cubic-bezier(0.32, 0.72, 0, 1) 600ms;
}

/* + glyph cross-fade — fades out at phase 3 on open, back in at
 * phase 2 on close (so on the close the + lands BEFORE the grey
 * bg + dashed border return around it — see __slot default rule
 * timing for the bg / border at phase 3 reverse). */
.regluvordur-dream-team__slot--empty .regluvordur-dream-team__plus {
  transition: opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms; /* phase 2 reverse */
}

.regluvordur-dream-team__slot--inviter .regluvordur-dream-team__plus {
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 600ms; /* phase 3 forward */
}

/* Floating-label input: muted top label + large white value below,
 * inside a rounded outlined container. */
.regluvordur-dream-team__inviter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 20px 16px;
  border-radius: var(--rv-radius-button, 22px);
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
}

.regluvordur-dream-team__inviter-field:focus-within {
  border-color: rgba(255,189,0,0.55);
}

.regluvordur-dream-team__inviter-field-label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-medium);
  font-size: var(--rv-fs-12);
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.55);
}

.regluvordur-dream-team__inviter-field-input {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--rv-white);
  caret-color: var(--rv-gold);
  outline: none;
  width: 100%;
}

.regluvordur-dream-team__inviter-field-input::placeholder {
  color: rgba(255,255,255,0.35);
}

/* Results list — full-width rows separated by hairline dividers. */
.regluvordur-dream-team__inviter-results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.regluvordur-dream-team__inviter-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 10px 17px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  background: transparent;
}

.regluvordur-dream-team__inviter-row:focus-visible {
  outline: 2px solid rgba(255,189,0,0.45);
  outline-offset: -2px;
  border-radius: 8px;
}

/* Leading tile — numbered (default) or teal-check (unique match). */
.regluvordur-dream-team__inviter-tile {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-13);
  flex-shrink: 0;
}

.regluvordur-dream-team__inviter-tile--num {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.08);
}

.regluvordur-dream-team__inviter-tile--check {
  background: rgba(94,156,146,0.12);
  border: 1px solid rgba(94,156,146,0.25);
  color: rgb(94,156,146);
}

.regluvordur-dream-team__inviter-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.regluvordur-dream-team__inviter-row-name {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-16);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--rv-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.regluvordur-dream-team__inviter-row--unique .regluvordur-dream-team__inviter-row-name {
  color: var(--rv-gold);
}

.regluvordur-dream-team__inviter-row-club {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-medium);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}

/* CTA — only rendered when no subscriber matches but a valid email
 * was typed. Gold pill, dark text, chevron at the right edge. */
.regluvordur-dream-team__inviter-cta-slot {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.regluvordur-dream-team__inviter-cta {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 70px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--rv-radius-button, 22px);
  background: var(--rv-gold);
  color: var(--rv-text-dark);
  cursor: pointer;
}

.regluvordur-dream-team__inviter-cta-label {
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-18);
  letter-spacing: -0.02em;
  color: var(--rv-text-dark);
}

.regluvordur-dream-team__inviter-cta-chevron {
  position: absolute;
  right: 24px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: 28px;
  line-height: 1;
  color: var(--rv-text-dark);
}

.regluvordur-dream-team__inviter-back {
  appearance: none;
  background: transparent;
  border: 0;
  align-self: center;
  padding: 12px 24px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-18);
  color: var(--rv-white);
  cursor: pointer;
}

.regluvordur-dream-team__inviter-error {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--rv-fs-12);
  color: rgb(193,77,77);
}

/* Inline confirm-remove dialog — visual language lifted from
 * .regluvordur-modal (the canonical dialog used by showConfirm) so
 * destructive actions feel consistent across the app. Mounted INSIDE
 * the tapped member slot as an absolute overlay so the slot itself
 * stays put and only its chrome/content cross-fades — same morph
 * pattern as the empty + slot's inviter. */
.regluvordur-dream-team__confirm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 22px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, #403622, #282216);
  border: 1px solid rgba(255,189,0,0.2);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  color: var(--rv-white);
  text-align: left;

  /* Absolute inside the tapped slot, so it extends below the 90px
   * chrome into the space the collapsed siblings have vacated. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  /* Same instant-close + smooth phase-4 open as the inviter dialog. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0s 0ms,
    visibility 0s 0ms;
}

.regluvordur-dream-team__slot--confirming .regluvordur-dream-team__confirm {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity    300ms cubic-bezier(0.32, 0.72, 0, 1) 900ms,
    visibility 0s linear 900ms;
}

/* --confirming strips the member card's chrome (white or gold bg
 * + transparent border) at phase 3 forward so the confirm dialog's
 * darker gradient + gold border take over the visible chrome.
 * When --confirming is removed, the default slot rule's transitions
 * (300ms delay, phase 2 reverse) bring bg + border back together
 * with the slot content's opacity restore. */
.regluvordur-dream-team__slot--confirming {
  background-color: transparent;
  border-color: transparent;
  cursor: default;
  transition:
    background-color 300ms cubic-bezier(0.32, 0.72, 0, 1) 600ms,
    border-color     300ms cubic-bezier(0.32, 0.72, 0, 1) 600ms;
}

/* Member-card content (slot-num + avatar + name + pill + club) fades
 * out at phase 3 forward, back in at phase 2 reverse — matches the
 * timing of the slot's chrome so the whole member visual recedes
 * and returns as one. */
.regluvordur-dream-team__slot-num,
.regluvordur-dream-team__avatar,
.regluvordur-dream-team__name,
.regluvordur-dream-team__pill,
.regluvordur-dream-team__club {
  transition: opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 300ms; /* phase 2 reverse */
}

.regluvordur-dream-team__slot--confirming > .regluvordur-dream-team__slot-num,
.regluvordur-dream-team__slot--confirming > .regluvordur-dream-team__avatar,
.regluvordur-dream-team__slot--confirming > .regluvordur-dream-team__name,
.regluvordur-dream-team__slot--confirming > .regluvordur-dream-team__pill,
.regluvordur-dream-team__slot--confirming > .regluvordur-dream-team__club {
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 600ms; /* phase 3 forward */
}

.regluvordur-dream-team__confirm-kicker {
  font-family: 'Suisse Intl', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-13);
  color: var(--rv-gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 6px;
}

.regluvordur-dream-team__confirm-title {
  font-weight: var(--rv-fw-bold);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--rv-white);
  margin: 0;
}

.regluvordur-dream-team__confirm-body {
  margin: 4px 0 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-medium);
  font-size: var(--rv-fs-13);
  line-height: 1.45;
  color: rgba(255,255,255,0.65);
}

.regluvordur-dream-team__confirm-actions {
  display: flex;
  gap: 10px;
  padding-top: 12px;
  width: 100%;
}

.regluvordur-dream-team__confirm-btn {
  /* Explicit `1 1 0` (not the `flex: 1` shorthand) so both buttons
   * grow from a zero basis and split the row 50/50. `min-width: 0`
   * lets them shrink past their intrinsic text width; `white-space:
   * nowrap` keeps `Hætta við` on a single line. */
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-bold);
  font-size: 14px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.regluvordur-dream-team__confirm-btn:hover {
  filter: brightness(1.08);
}

.regluvordur-dream-team__confirm-btn:focus-visible {
  outline: 2px solid rgba(255,189,0,0.6);
  outline-offset: 2px;
}

.regluvordur-dream-team__confirm-btn--cancel {
  background: rgba(255,255,255,0.08);
  color: var(--rv-white);
}

.regluvordur-dream-team__confirm-btn--go {
  background: var(--rv-gold);
  color: var(--rv-text-dark);
}

/* ── Club ranking (regluvordur-2026-club-ranking) ────────────────────────── */

.regluvordur-club-ranking {
  display: flex;
  flex-direction: column;
  /* Top padding from the shared --rv-screen-pad-top token so the hero
     block aligns with every other top-anchored screen. Bottom stays at
     12px — the ranking list owns its own scroll, doesn't need CTA glow
     clearance. */
  padding: var(--rv-screen-pad-top) 0 12px;
  gap: var(--rv-space-12);
}

.regluvordur-club-ranking__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rv-space-12);
  padding: 10px 20px;
}

.regluvordur-club-ranking__hero-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.regluvordur-club-ranking__eyebrow {
  font-weight: var(--rv-fw-medium);
  font-size: var(--rv-fs-18);
  letter-spacing: -0.03em;
  color: var(--rv-gold);
}

.regluvordur-club-ranking__title {
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-32);
  letter-spacing: -0.03em;
  color: var(--rv-white);
  line-height: 1;
}

.regluvordur-club-ranking__crest {
  flex: 0 0 65px;
  width: 65px;
  height: 65px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-white);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.regluvordur-club-ranking__crest-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.regluvordur-club-ranking__crest-placeholder {
  color: var(--rv-gold);
  font-size: var(--rv-fs-32);
  line-height: 1;
}

.regluvordur-club-ranking__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 20px;
  flex: 1;
  overflow-y: auto;
  /* Don't let the browser auto-adjust scrollTop when the flip toggle moves
     rows into flippers — that adjustment is the pre-flip "hop". */
  overflow-anchor: none;
  scrollbar-width: none;
}

.regluvordur-club-ranking__list::-webkit-scrollbar { display: none; }

.regluvordur-club-ranking__status {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--rv-fs-13);
  color: var(--rv-white-60);
  text-align: center;
}

.regluvordur-club-ranking__row {
  display: grid;
  align-items: center;
  background: var(--rv-white);
  color: var(--rv-text-dark);
  border-radius: 24px;
}

.regluvordur-club-ranking__row--expanded {
  grid-template-columns: auto 60px 1fr auto;
  grid-template-rows: auto;
  column-gap: 12px;
  padding: 15px;
  min-height: 90px;
}

.regluvordur-club-ranking__row--compact {
  grid-template-columns: auto 1fr auto;
  column-gap: 10px;
  padding: 13px 15px;
  min-height: 56px;
  border-radius: 14px;
}

.regluvordur-club-ranking__row--winner {
  background: var(--rv-gold);
}

.regluvordur-club-ranking__row--me {
  outline: 2px solid var(--rv-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255,189,0,0.18);
}

/* Winner already wears the gold card; the --me outline on top of that
   reads as a redundant double border (and the top of it gets clipped by
   the list's overflow when row 01 sits at the very top of the list). */
.regluvordur-club-ranking__row--winner.regluvordur-club-ranking__row--me {
  outline: 0;
  box-shadow: none;
}

.regluvordur-club-ranking__num {
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-18);
  letter-spacing: -0.03em;
  color: var(--rv-text-dark);
}

.regluvordur-club-ranking__avatar {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: var(--rv-radius-full);
  background: rgba(16,16,16,0.08);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.regluvordur-club-ranking__avatar--empty {
  background:
    radial-gradient(circle at 50% 35%, rgba(16,16,16,0.08), rgba(16,16,16,0) 60%),
    rgba(16,16,16,0.04);
}

.regluvordur-club-ranking__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rv-radius-full);
}

.regluvordur-club-ranking__crown {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 14px;
  pointer-events: none;
}

.regluvordur-club-ranking__name {
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-18);
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.regluvordur-club-ranking__row--compact .regluvordur-club-ranking__name {
  font-size: var(--rv-fs-16);
}

.regluvordur-club-ranking__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid rgba(16,16,16,0.2);
  background: transparent;
  color: var(--rv-text-dark);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-12);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.regluvordur-club-ranking__row--expanded .regluvordur-club-ranking__pill {
  align-self: flex-start;
}

/* Scroll affordances — mirror SCREENS.ranking. Top/bottom fade masks
   the list edges into the page background so "more above / more below"
   reads without a hard cutoff against the page chrome. The FAB
   bottom-right toggles between "scroll to my row" and "scroll back to
   top" — only mounted when the user's row is past the visible top-4. */
.regluvordur-club-ranking__list--fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 60px), transparent 100%);
}

.regluvordur-club-ranking__list--fade.regluvordur-club-ranking__list--fade-top {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.regluvordur-club-ranking__fab {
  position: absolute;
  right: var(--rv-screen-pad-x);
  bottom: 24px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: var(--rv-radius-full);
  border: none;
  background: var(--rv-gold);
  color: var(--rv-text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: transform var(--rv-dur-md) var(--rv-ease-out),
              background var(--rv-dur-md) var(--rv-ease-out);
}

.regluvordur-club-ranking__fab:active {
  transform: scale(0.94);
}

.regluvordur-club-ranking__fab svg {
  transition: transform var(--rv-dur-md) var(--rv-ease-out);
}

.regluvordur-club-ranking__fab--up svg {
  transform: rotate(180deg);
}

/* ── Ranking screen (regluvordur-2026-ranking) ───────────────────────────── */

.regluvordur-ranking {
  display: flex;
  flex-direction: column;
  /* Top padding from the shared --rv-screen-pad-top token; bottom keeps
     the Heim button breathing room above the Breakdance bottom nav. */
  padding: var(--rv-screen-pad-top) 0 var(--rv-space-12);
  gap: var(--rv-space-12);
}

.regluvordur-ranking__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rv-space-12);
  padding: 10px var(--rv-screen-pad-x);
}

.regluvordur-ranking__hero-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.regluvordur-ranking__eyebrow {
  font-weight: var(--rv-fw-medium);
  font-size: var(--rv-fs-18);
  letter-spacing: -0.03em;
  color: var(--rv-gold);
}

.regluvordur-ranking__title {
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-32);
  letter-spacing: -0.03em;
  color: var(--rv-white);
  line-height: 1;
}

.regluvordur-ranking__crest {
  flex: 0 0 65px;
  width: 65px;
  height: 65px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-white);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.regluvordur-ranking__crest-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.regluvordur-ranking__body {
  margin: 0;
  padding: 0 var(--rv-screen-pad-x);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--rv-fs-16);
  line-height: 21.7px;
  color: rgba(255,255,255,0.82);
  /* Explicit — the host Breakdance container sets text-align: center
     on descendants and Manrope copy doesn't ride the .regluvordur-suisse
     left-align reset. */
  text-align: left;
}

.regluvordur-ranking__body:empty {
  display: none;
}

.regluvordur-ranking__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 var(--rv-screen-pad-x);
  flex: 1;
  overflow-y: auto;
  /* See club-ranking__list — disable scroll anchoring so the flip toggle's
     row→flipper moves don't nudge the scroll (the pre-flip "hop"). */
  overflow-anchor: none;
  scrollbar-width: none;
}

.regluvordur-ranking__list::-webkit-scrollbar { display: none; }

/* Bottom fade — masks the last visible row into the page background so
   the scroll affordance reads as "more below" without a hard cutoff
   against the Breakdance bottom nav. Implemented as a mask-image on
   the list itself so it tracks the actual scroll viewport.

   `--fade-top` is layered on by the scroll listener once the list is
   scrolled away from the top, fading the leading row out symmetrically
   so the affordance reads as "more above" too. */
.regluvordur-ranking__list--fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 60px), transparent 100%);
}

.regluvordur-ranking__list--fade.regluvordur-ranking__list--fade-top {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.regluvordur-ranking__status {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--rv-fs-13);
  color: var(--rv-white-60);
  text-align: center;
}

.regluvordur-ranking__row {
  display: grid;
  align-items: center;
  background: var(--rv-white);
  color: var(--rv-text-dark);
  border-radius: 24px;
}

.regluvordur-ranking__row--expanded {
  grid-template-columns: auto 60px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 7px;
  padding: 15px;
  min-height: 90px;
}

.regluvordur-ranking__row--compact {
  grid-template-columns: auto 1fr auto;
  column-gap: 10px;
  padding: 13px 15px;
  min-height: 56px;
  border-radius: 18px;
}

.regluvordur-ranking__row--winner {
  background: var(--rv-gold);
}

.regluvordur-ranking__row--me {
  outline: 2px solid var(--rv-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255,189,0,0.18);
}

.regluvordur-ranking__row--winner.regluvordur-ranking__row--me {
  outline: 0;
  box-shadow: none;
}

.regluvordur-ranking__num {
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-18);
  letter-spacing: -0.03em;
  color: var(--rv-text-dark);
}

.regluvordur-ranking__avatar {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: var(--rv-radius-full);
  background: rgba(16,16,16,0.08);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.regluvordur-ranking__avatar--empty {
  background:
    radial-gradient(circle at 50% 35%, rgba(16,16,16,0.08), rgba(16,16,16,0) 60%),
    rgba(16,16,16,0.04);
}

.regluvordur-ranking__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rv-radius-full);
}

.regluvordur-ranking__crown {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 14px;
  pointer-events: none;
}

.regluvordur-ranking__name {
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-18);
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.regluvordur-ranking__row--compact .regluvordur-ranking__name {
  font-size: var(--rv-fs-16);
}

.regluvordur-ranking__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid rgba(16,16,16,0.2);
  background: transparent;
  color: var(--rv-text-dark);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-12);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.regluvordur-ranking__row--expanded .regluvordur-ranking__num,
.regluvordur-ranking__row--expanded .regluvordur-ranking__avatar,
.regluvordur-ranking__row--expanded .regluvordur-ranking__name {
  grid-row: 1 / span 2;
}

.regluvordur-ranking__row--expanded .regluvordur-ranking__pill {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  align-self: end;
}

.regluvordur-ranking__row--expanded .regluvordur-ranking__club {
  grid-column: 4;
  grid-row: 2;
  justify-self: end;
  align-self: start;
}

.regluvordur-ranking__club {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--rv-radius-full);
  overflow: hidden;
  background: rgba(16,16,16,0.08);
}

.regluvordur-ranking__club-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.regluvordur-ranking__club--empty {
  visibility: hidden;
}

/* Floating action button — anchored to the bottom-right of the screen
   wrap. Visible only when the logged-in user has a row past rank 4
   (otherwise their row is already in the initial viewport). Chevron
   rotates 180° between the two modes:
     --down : currently at top → click animates to user's row
     --up   : currently at user's row → click animates back to top */
.regluvordur-ranking__fab {
  position: absolute;
  right: var(--rv-screen-pad-x);
  bottom: 24px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: var(--rv-radius-full);
  border: none;
  background: var(--rv-gold);
  color: var(--rv-text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: transform var(--rv-dur-md) var(--rv-ease-out),
              background var(--rv-dur-md) var(--rv-ease-out);
}

.regluvordur-ranking__fab:active {
  transform: scale(0.94);
}

.regluvordur-ranking__fab svg {
  transition: transform var(--rv-dur-md) var(--rv-ease-out);
}

.regluvordur-ranking__fab--up svg {
  transform: rotate(180deg);
}

/* ── Club / Golfklúbburinn (SCREENS.club) ───────────────────────────────
   Landing screen for the player's selected club. Hero photo at the top
   with name + member count + crest, then a numbered action list. The
   action rows reuse the .regluvordur-profile__row* widget so visual
   parity with the profile screen is automatic.
*/
.regluvordur-club {
  display: flex;
  flex-direction: column;
  padding: 0 17px var(--rv-screen-pad-bottom);
  gap: var(--rv-space-16);
  background: var(--rv-bg2);
}

.regluvordur-club__hero {
  position: relative;
  margin: 0 -17px;
  min-height: 525px;
  padding: var(--rv-screen-pad-top) 30px var(--rv-space-20);
  background-color: var(--rv-bg2);
  background-size: cover;
  background-position: 59% center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.regluvordur-club__hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(56,48,33,0.85) 0%, rgba(56,48,33,0) 134px),
    linear-gradient(rgba(59,51,36,0.1) 58.65%, var(--rv-bg2) 100%),
    linear-gradient(90deg, rgba(60,51,36,0.44), rgba(60,51,36,0.44));
}

.regluvordur-club__hero-content {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rv-space-12);
}

.regluvordur-club__hero-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  max-width: 261px;
}

.regluvordur-club__count {
  display: inline-flex;
  align-items: center;
  gap: var(--rv-space-10);
  line-height: 28px;
}

.regluvordur-club__count .regluvordur-club__count-icon {
  width: 19px;
  height: 19px;
  display: block;
  flex-shrink: 0;
}

.regluvordur-club__count-label {
  font-weight: var(--rv-fw-medium);
  font-size: var(--rv-fs-12);
  color: var(--rv-white);
  white-space: nowrap;
}

.regluvordur-club__title {
  display: block;
  margin: 0;
  font-weight: var(--rv-fw-semibold);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rv-white);
  word-break: break-word;
}

.regluvordur-club__crest {
  flex: 0 0 65px;
  width: 65px;
  height: 65px;
  border-radius: var(--rv-radius-full);
  background: var(--rv-white);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.regluvordur-club__crest-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.regluvordur-club__crest-placeholder {
  color: var(--rv-gold);
  font-size: var(--rv-fs-32);
  line-height: 1;
}

/* ── In-place ranking morph (Animations.md Pattern B) ──────────────────────
   Tapping "Stöðutafla klúbbsins" adds .regluvordur-club--ranking to the
   screen wrap. One class toggle drives a three-phase open and its reverse:
   the menu list fades (phase 1) then collapses (phase 2), the hero shrinks
   up while the "Stöðutafla" label and the leaderboard fade in (phase 3).
   Each state owns its own transition-delays — the default rule sequences
   the *close*, the --ranking rule the *open*. The phases OVERLAP into one
   continuous cross-fade (no dead gap, no start-hitch):
     open   hero shrink 0–900 · menu fade-out + collapse 0–300 ·
            leaderboard/label fade-in 300–900
     close  leaderboard + label fade-out 0–300 · hero expand 0–900 ·
            menu expand + fade-in 300–900
   Hero motion starts on frame 1 (no delay). The menu fully clears (fades
   AND collapses) by 300ms so the leaderboard then fades in at its settled
   position — only the hero's gentle rise moves under it, never an abrupt
   menu-collapse shift. No empty void between menu leaving and list arriving. The hero shrinks to a value just above its content
   height so the rendered height tracks the whole easing curve instead of
   flooring out and snapping. flex-shrink:0 keeps the height-capped flex
   column from compressing the hero when the leaderboard becomes flex:1.
   iOS decel curve; durations are multiples of 300 per Animations.md. */

.regluvordur-club__hero {
  flex-shrink: 0;
  transition: min-height 900ms cubic-bezier(0.32, 0.72, 0, 1) 0ms;
}
.regluvordur-club--ranking .regluvordur-club__hero {
  min-height: 280px;
}

/* "Stöðutafla" eyebrow — collapsed + transparent in menu view, fades in as
   the leaderboard arrives (and out first on close). */
.regluvordur-club__ranking-label {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  font-weight: var(--rv-fw-medium);
  font-size: var(--rv-fs-18);
  letter-spacing: -0.03em;
  color: var(--rv-gold);
  transition:
    opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 0ms,
    max-height 300ms cubic-bezier(0.32, 0.72, 0, 1) 0ms;
}
.regluvordur-club--ranking .regluvordur-club__ranking-label {
  max-height: 40px;
  margin-top: 4px;
  opacity: 1;
  transition:
    opacity 600ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    max-height 600ms cubic-bezier(0.32, 0.72, 0, 1) 300ms;
}

/* Til baka pinned under the hero. */
.regluvordur-club__back {
  align-self: flex-start;
  padding: var(--rv-space-8) 0;
}

/* Menu list — fades out first, then collapses (overlapping the leaderboard
   fade-in) on open; reverse on close. overflow:hidden so the max-height
   collapse clips cleanly. */
.regluvordur-club__list {
  margin-top: 0;
  overflow: hidden;
  max-height: 320px;
  opacity: 1;
  transition:
    opacity 600ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    max-height 600ms cubic-bezier(0.32, 0.72, 0, 1) 300ms;
}
.regluvordur-club--ranking .regluvordur-club__list {
  max-height: 0;
  opacity: 0;
  transition:
    opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 0ms,
    max-height 300ms cubic-bezier(0.32, 0.72, 0, 1) 0ms;
}

/* Leaderboard — collapsed + transparent in menu view; becomes the internal
   flex scroller and fades in as the menu collapses under --ranking. Scoped
   to .club so the standalone clubRanking screen's own list rule is left
   untouched. The --fade mask + FAB styling are reused from clubRanking. */
.regluvordur-club .regluvordur-club-ranking__list {
  flex: 0 0 auto;
  min-height: 0;
  max-height: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 300ms cubic-bezier(0.32, 0.72, 0, 1) 0ms;
}
.regluvordur-club--ranking .regluvordur-club-ranking__list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  opacity: 1;
  overflow-y: auto;
  /* Breathing room so the current-user row's gold outline (extends ~4px
     beyond the card) isn't clipped by the list's overflow. Negative margin
     widens the list by the same amount so the rows keep their width. */
  padding: 2px 8px;
  margin: 0 -8px;
  transition: opacity 600ms cubic-bezier(0.32, 0.72, 0, 1) 300ms;
}

/* Desktop full-bleed club hero. The photo is mounted on the host fx layer
   (the weather container) by SCREENS.club via mountResultBg(…, {stageClass:
   'rv-result-bg--club'}) so it fills the viewport behind the centered game
   column instead of being clipped to the 393 px card. Mobile keeps the
   in-card .regluvordur-club__hero photo, so the fx copy is hidden there. */
.rv-result-bg--club {
  display: none;
}

@media (min-width: 431px) {
  /* Override the result-screen 640 px card cap — the club backdrop fills
     the whole viewport, top-anchored, behind everything (z-index:-1 from
     the .rv-result-bg base keeps it under the lifted game column). */
  .rv-result-bg--club {
    display: block;
    inset: 0;
    left: 0;
    top: 0;
    transform: none;
    width: 100vw;
    height: 100svh;
    height: 100dvh;
    border-radius: 0;
    /* Fade the photo itself to transparent toward the middle (same
       technique as the result/video screens' .rv-result-bg mask) so the
       dark page section shows through the lower half while the top stays
       fully visible. Replaces the old darkening ::after overlay. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 50%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 50%);
  }

  /* Let the full-bleed fx photo show through the column, and drop the
     in-card photo + shade so they don't double up. Title / crest / count
     and the menu list keep their current positions in the column. */
  .regluvordur-club {
    background: transparent;
  }
  /* The 525px mobile hero height only exists to make the in-card photo a
     tall banner. On desktop the photo is full-bleed behind everything, so
     that height is dead space that pushes the menu list down into the
     weather strip. Size the hero to ~40% of the viewport instead — enough
     to sit the title/crest over the lower part of the visible photo while
     keeping the list inside the wrapper (100svh - weather reserve). */
  .regluvordur-club__hero {
    background-image: none !important;
    background-color: transparent;
    min-height: 40dvh;
  }
  .regluvordur-club__hero-shade {
    display: none;
  }
}