/* ═══════════════════════════════════════════════════════════════════════════
   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');

/* ── 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-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;
}

/* ── 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: 'Manrope', 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: 100px 0 32px;
}

/* 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 {
    /* 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;
  }
}
.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;
}
.regluvordur-field__input::placeholder { color: rgba(255,255,255,0.4); }

/* ── 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; }

/* ── 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. */
.regluvordur-game--host-x .regluvordur-question-card {
  top: 80px;
  bottom: 50px;
  min-height: 480px;
  max-height: 640px;
  display: flex;
  flex-direction: column;
}
.regluvordur-game--host-x .regluvordur-question-card__badge {
  margin-top: auto;
}
/* Desktop: once max-height kicks in the top:80/bottom:50 anchoring
   leaves a lopsided gap below the card. Span the full wrapper and
   let margin-block:auto distribute the slack equally above and below
   so the card sits in the visual centre. (Layout-based centering —
   not transform — so card.offsetTop in the shadow-stack JS still
   tracks the card's true vertical position.) */
@media (min-width: 431px) {
  .regluvordur-game--host-x .regluvordur-question-card {
    top: 0;
    bottom: 0;
    margin-block: auto;
  }
}
/* 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;
}
.regluvordur-question-card__timer-label {
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-13);
  color: var(--rv-text-muted);
  transition: opacity 0.3s;
  opacity: 0;
}
.regluvordur-question-card__timer-label--visible {
  opacity: 1;
}
.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;
}

.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;
}
.regluvordur-answer--selected {
  background: var(--rv-gold);
  border-color: transparent;
}
.regluvordur-answer--correct {
  background: var(--rv-teal);
  border: none;
  color: #fff;
  padding: 15px 15px;
}
.regluvordur-answer--wrong {
  background: var(--rv-red);
  border: none;
  color: #fff;
}
.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;
}

/* ── 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 as a sibling of the host
   page's <canvas class="avista-fx-canvas"> rather than inside the
   game card, so the video shares one full-viewport stage with the
   page's effects canvas. Cleared on every screen change via
   clearResultBg(). The class .rv-has-bg-video / .rv-has-bg-image
   below switches on the darkening gradients. */
.rv-result-bg {
  /* `fixed` rather than `absolute` so the bg covers the full viewport on
     desktop too — the fx container is sized by whatever Breakdance section
     hosts the weather shortcode, which on desktop is narrower than the
     viewport. Viewport-anchored sizing dodges the container constraint. */
  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: 0;
  pointer-events: none;
}
.rv-result-bg--video {
  object-fit: cover;
}
/* Image fallback uses background-image on a <div> rather than <img> —
   intrinsic aspect ratio on <img> overrides height:100%, so a non-square
   source would clip to the top portion of the stage. */
.rv-result-bg--image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Top/bottom darkening gradients sit on the fx container as ::before
   / ::after — no extra DOM nodes for text-legibility overlays. The
   .rv-has-bg-* class is toggled by mountResultBg / clearResultBg so
   the gradients only appear while a result screen is active. The
   `position: relative` line is defensive — Breakdance's wrapper is
   usually already positioned, but we don't want to assume. */
.rv-has-bg-video,
.rv-has-bg-image {
  position: relative;
}
.rv-has-bg-video::before,
.rv-has-bg-image::before,
.rv-has-bg-video::after,
.rv-has-bg-image::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
}
.rv-has-bg-video::before,
.rv-has-bg-image::before {
  top: 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(57,49,34,0.85), rgba(57,49,34,0));
}
.rv-has-bg-video::after,
.rv-has-bg-image::after {
  bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(57,49,34,0.95), rgba(57,49,34,0));
}

/* 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;
}
/* 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;
}

.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);
}

/* Secondary CTA modifier — visually identical to the primary today
   (Figma shows both as gold pills) but kept as a hook so we can tone
   the second button down later (e.g. ghost variant) without touching
   the JS. */
.regluvordur-result__cta--secondary {
  /* Reserved. */
}

/* 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__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);
}

/* ── 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`. */
  padding: 72px 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);
}

.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;
}
.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);
  padding: var(--rv-space-22) var(--rv-space-22) var(--rv-space-18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rv-space-12);
  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. */
.regluvordur-game-card__badge-svg {
  width: 97px;
  height: 94px;
  flex-shrink: 0;
  display: block;
  margin-top: var(--rv-space-8);
}

.regluvordur-game-card__eyebrow {
  align-self: stretch;
  font-weight: var(--rv-fw-medium);
  font-size: 20px;
  color: var(--rv-accent);
  letter-spacing: -0.01em;
  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. */
.regluvordur-game-card__headline {
  align-self: stretch;
  min-width: 0;
  font-weight: var(--rv-fw-bold);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--rv-white);
  margin: 0;
  text-align: center;
  /* Only break as a last resort on extreme narrow viewports. */
  overflow-wrap: break-word;
}

.regluvordur-game-card__body {
  align-self: stretch;
  min-width: 0;
  font-weight: var(--rv-fw-medium);
  font-size: 20px;
  line-height: 1.3;
  color: var(--rv-white);
  letter-spacing: -0.01em;
  margin: 0;
  padding: 0 4px;
  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-bold);
  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;
}

/* 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) {
  .regluvordur-screen--flex {
    padding: 60px 0 0;
    gap: var(--rv-space-10);
  }

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

  /* 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 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;
}

/* ── In-game leaderboard screen (SCREENS.leaderboard) ─────────────────────── */

.regluvordur-leader-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 0 var(--rv-space-24);
}

.regluvordur-leader-listwrap {
  flex: 1;
  min-height: 0;
  margin: 0 var(--rv-space-24);
}

.regluvordur-leader-footer {
  margin: 0 var(--rv-space-24);
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-12);
}

.regluvordur-leader-nav-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.regluvordur-leader-navbtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.regluvordur-leader-status {
  margin: var(--rv-space-24) 0;
  text-align: center;
  color: rgba(255,255,255,0.65);
  font-size: var(--rv-fs-13);
}

.regluvordur-leader-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.regluvordur-leader-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}

.regluvordur-leader-row--hot {
  background: linear-gradient(90deg,
    rgba(255,189,0,0.18) 0%,
    rgba(255,189,0,0.04) 100%);
  border-bottom-color: rgba(255,189,0,0.18);
}

.regluvordur-leader-row--me {
  background: rgba(255,189,0,0.12);
  border-bottom-color: transparent;
  border-radius: 10px;
}

/* When the current user is also in the hot seat, prefer the
   "me" highlight (more saturated) — keeps rank focus on them. */
.regluvordur-leader-row--hot.regluvordur-leader-row--me {
  background: rgba(255,189,0,0.22);
}

.regluvordur-leader-rank {
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-13);
  text-align: right;
  color: rgba(255,255,255,0.55);
}
.regluvordur-leader-rank--gold   { color: var(--rv-gold); }
.regluvordur-leader-rank--silver { color: rgb(192,192,192); }
.regluvordur-leader-rank--bronze { color: rgb(205,127,50); }

.regluvordur-leader-name-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.regluvordur-leader-name {
  font-weight: var(--rv-fw-semibold);
  font-size: var(--rv-fs-13);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.regluvordur-leader-club {
  font-size: var(--rv-fs-12);
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.regluvordur-leader-score {
  font-weight: var(--rv-fw-bold);
  font-size: var(--rv-fs-16);
  color: var(--rv-gold);
  text-align: right;
  min-width: 64px;
}

/* ── 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;
  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;
}
.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 {
  position: absolute;
  inset: 0;
  z-index: 50;
  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: 'Manrope', 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);
}