:root {
  --blue-gray-500: #353e4d;
  --blue-gray-400: #515e74;
  --blue-gray-200: #d5dcec;
  --blue-gray-100: #f7f9fe;
  --purple-500: #5f4686;
  --purple-000: #ece3fb;
  --teal: #8abfbd;
  --teal-dark: #6f9796;
  --orange: #f48b32;
  --green: #82c24a;
  --dc-blue: #07baef;
  --dc-blue-light: #b1e4f4;
  --green-collab: #54a40f;
  --cyan-glow: #90fbff;
  --white: #ffffff;
  --gray-600: #454545;
  --gray-400: #929292;
  --gray-100: #eeeeee;
  --navy-dark: #002d5d;
  --toggle-blue: #008ab3;

  /* Figma's new designs use "Nulshock" (commercial, unlicensed here) for
     all big display headings — substituting Orbitron (Google Fonts) as a
     freely-licensed stand-in with a similar bold/futuristic feel. */
  --font-display: "Orbitron", "Inter", -apple-system, sans-serif;

  --canvas-w: 1920px;
  --canvas-h: 1080px;
  --scale: 1;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #1c2129;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sized explicitly (not 100%) by updateScale() in script.js — always kept
   at a fixed 3:2 ratio regardless of the actual window/monitor shape, so
   the presentation never reflows or "jumps" on resize. */
.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.kiosk {
  position: relative;
  width: var(--canvas-w);
  height: var(--canvas-h);
  flex: none;
  transform: scale(var(--scale));
  background: var(--blue-gray-500);
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5);
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  background-image: url("assets/bg-pattern-v2.png");
  background-size: cover;
  background-position: center;
}

.kiosk[data-screen="landing"] .screen-landing {
  display: flex;
}

.kiosk[data-screen="checkin"] .screen-checkin {
  display: block;
}

.kiosk[data-screen="enter"] .screen-enter {
  display: flex;
}

.tint-overlay {
  position: absolute;
  inset: 0;
  background: white;
  opacity: var(--tint-opacity, 0);
  pointer-events: none;
}

/* ---------- Screen 0: Landing / attract screen ---------- */

.screen-landing {
  align-items: stretch;
  justify-content: flex-start;
}

.landing-language-toggle {
  position: absolute;
  right: 40px;
  top: 40px;
}

.landing-content {
  position: absolute;
  left: 50%;
  top: calc(50% + 70px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.landing-firefly {
  position: absolute;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(144, 251, 255, 0.9) 0%, rgba(144, 251, 255, 0.35) 45%, rgba(144, 251, 255, 0) 72%);
  filter: blur(8px);
  pointer-events: none;
  left: 26%;
  top: 30%;
  animation: firefly-drift 28s ease-in-out infinite, firefly-pulse 3.5s ease-in-out infinite;
}

@keyframes firefly-drift {
  0%   { transform: translate(0, 0); }
  18%  { transform: translate(490px, -115px); }
  38%  { transform: translate(806px, 187px); }
  58%  { transform: translate(403px, 374px); }
  78%  { transform: translate(-115px, 158px); }
  100% { transform: translate(0, 0); }
}

@keyframes firefly-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

.landing-title-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 1050px;
  height: 214px;
  border: 7px solid var(--cyan-glow);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
}

.landing-title-bracket {
  position: absolute;
  left: -4px;
  top: -3.5px;
  width: calc(100% + 8px);
  height: calc(100% + 7px);
  pointer-events: none;
}

.landing-leaf {
  width: 100px;
  height: 100px;
  flex: none;
  transform: scaleX(-1);
}

.landing-title-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 700;
  color: var(--white);
  text-transform: capitalize;
  white-space: nowrap;
  line-height: 1;
}

.wristband-button {
  position: relative;
  width: 590px;
  height: 590px;
  flex: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.sunburst-wrap {
  position: absolute;
  inset: 0;
  animation: sunburst-breathe 7s ease-in-out infinite;
}

.sunburst-graphic {
  width: 100%;
  height: 100%;
  display: block;
  animation: sunburst-spin 55s linear infinite;
}

@keyframes sunburst-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes sunburst-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Sized to fully cover the sunburst artwork's own baked-in ~362px backing
   ellipse (see sunburst.svg) rather than sit near it — a near-matching
   diameter let that ellipse's edge peek out as a second, fainter ring. */
.wristband-circle {
  position: relative;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: var(--navy-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: wristband-pulse 8s ease-in-out infinite;
}

@keyframes wristband-pulse {
  0%, 100% {
    box-shadow: 0 0 40px 6px var(--cyan-glow);
  }
  50% {
    box-shadow: 0 0 85px 22px #eafeff;
  }
}

.wristband-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.wristband-icon {
  width: 135px;
  height: 133px;
}

.wristband-label {
  width: 312px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
}

/* ---------- Title / category row (absolute, overlays top nav) ---------- */

.top-row {
  position: absolute;
  left: 66px;
  top: 49px;
  display: flex;
  align-items: center;
  gap: 74px;
}

.title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 116px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}

.category-icons {
  display: flex;
  align-items: center;
  gap: 13px;
}

.category-icon {
  width: 137.88px;
  height: 137.88px;
  border-radius: 50%;
  background: var(--blue-gray-500);
  border: 2px solid var(--white);
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.9));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
}

.category-icon img {
  width: 75px;
  height: 75px;
  filter: brightness(0) invert(1);
}

.category-icon span {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.16px;
  text-transform: uppercase;
  color: var(--white);
}

/* ---------- Top nav toggles ---------- */

/* Both toggle pills (language + Junior Mode) share one size in the new
   design — previously a two-tier full/compact system, unified here since
   Figma's own measurements for the two instances are now nearly identical
   (a few px apart, which reads as autolayout imprecision rather than an
   intentional size difference). */
.toggle-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7.5px;
  padding: 6.3px;
  border-radius: 100px;
  background: var(--toggle-blue);
  width: 176px;
  touch-action: none;
  user-select: none;
  filter: drop-shadow(3px 2.5px 2.5px #322a57);
  --toggle-gap: 7.5px;
}

.checkin-language-toggle,
.landing-language-toggle {
  position: absolute;
  right: 40px;
  top: 40px;
}

.jr-toggle-row {
  position: absolute;
  left: 1434px;
  top: 148px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.toggle-thumb {
  position: absolute;
  top: 6.3px;
  left: 6.3px;
  width: calc(50% - 10px);
  height: calc(100% - 12.6px);
  background: var(--white);
  border-radius: 300px;
  z-index: 1;
  cursor: grab;
  transform: translateX(calc(var(--thumb-pos, 0) * (100% + var(--toggle-gap, 7.5px))));
  transition: transform 0.2s ease;
}

.toggle-thumb.dragging {
  cursor: grabbing;
  transition: none;
}

.toggle-pill[data-state="esp"] .toggle-thumb,
.toggle-pill[data-state="off"] .toggle-thumb {
  --thumb-pos: 1;
}

.toggle-option {
  position: relative;
  z-index: 2;
  flex: 1;
  border: none;
  cursor: pointer;
  padding: 12.5px 17.5px;
  border-radius: 300px;
  font-family: inherit;
  font-size: 22.6px;
  line-height: 1.5;
  background: transparent;
  color: var(--white);
  pointer-events: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.toggle-pill[data-state="eng"] .toggle-option[data-value="eng"],
.toggle-pill[data-state="esp"] .toggle-option[data-value="esp"],
.toggle-pill[data-state="on"] .toggle-option[data-value="on"],
.toggle-pill[data-state="off"] .toggle-option[data-value="off"] {
  color: var(--toggle-blue);
}

.jr-toggle-label {
  display: flex;
  align-items: center;
  gap: 16px;
}

.jr-icon {
  width: 61px;
  height: 60px;
  flex: none;
}

.jr-toggle-text {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.9px;
  color: var(--blue-gray-100);
  white-space: nowrap;
}

/* ---------- Status bar ---------- */

.status-bar {
  position: absolute;
  left: 0;
  top: 256px;
  width: 1920px;
  height: 114px;
  background: var(--dc-blue);
  display: flex;
  align-items: center;
  gap: 36.6px;
  padding: 12px 36.6px;
  overflow: visible;
}

.status-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 114px;
  width: 100%;
  background: var(--dc-blue-light);
  border-radius: 0 12px 12px 12px;
  box-shadow: 3px 0 24px 0 var(--cyan-glow);
  transition: width 0.2s linear;
}

.status-bar.entered {
  background: var(--green);
}

.status-bar.entered .status-bar-fill,
.status-bar.entered .scan-icon {
  display: none;
}

.scan-icon {
  position: relative;
  flex: none;
  width: 91px;
  height: 90px;
  border-radius: 194px;
  background: linear-gradient(180deg, #fdad3d 0%, #9747ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.scan-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.status-text {
  position: relative;
  margin: 0;
  font-size: 46.6px;
  font-weight: 700;
  color: var(--blue-gray-500);
  white-space: nowrap;
}

.status-bar.entered .status-text {
  width: 100%;
  text-align: center;
  font-size: 60px;
  letter-spacing: 3px;
}

/* ---------- Profile grid ---------- */

.profile-grid {
  position: absolute;
  left: 0;
  top: 370px;
  width: 1920px;
  height: 384px;
  background: var(--dc-blue-light);
  border: 6px solid var(--dc-blue);
  padding: 6px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  overflow: hidden;
}

.empty-state {
  width: 100%;
  text-align: center;
  align-self: center;
  margin: 0;
  font-size: 23px;
  font-weight: 600;
  color: var(--blue-gray-400);
}

.profile-slot {
  position: relative;
  background: var(--blue-gray-400);
  border: 1px solid var(--gray-100);
  height: 372px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 16px;
  flex: 1 1 0;
  min-width: 0;
}

.profile-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  opacity: 0.85;
}

.profile-close img {
  width: 100%;
  height: 100%;
}

.profile-close:hover {
  opacity: 1;
}

.profile-avatar {
  border-radius: 50%;
  overflow: hidden;
  flex: none;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  display: block;
}

.profile-badges {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
}

.profile-badge {
  display: flex;
  align-items: center;
  padding: 7px 6px;
  /* Flex items default to min-height:auto, which lets content (the badge
     icon) impose a minimum size that fights flex:1's equal distribution —
     this resets that so all badges split the column height evenly. */
  min-height: 0;
}

.profile-badge img {
  height: 85%;
  width: auto;
  object-fit: contain;
}

.badge-dynamic { background: var(--purple-500); }
.badge-curiosity { background: var(--orange); }
.badge-collaboration { background: var(--green-collab); }
.badge-tenacious { background: var(--dc-blue); }

/* solo: 1 player, full-width slot, horizontal layout.
   Badge width ratios (49.1/30.8/37.8/27.1%) confirmed accurate against
   Figma in round 7 and unaffected by the 1920x1080 resize; avatar/gap/
   padding scaled by ~0.572x, the confirmed ratio between the old and new
   profile-grid dimensions. */
.variant-solo .profile-slot-body {
  display: flex;
  gap: 23px;
  align-items: stretch;
  width: 100%;
  height: 100%;
}
.variant-solo .profile-avatar {
  width: 336px;
  height: 336px;
}
.variant-solo .profile-badges {
  flex: 1;
  height: 100%;
}
.variant-solo .profile-badge { flex: 1; padding: 9px 6px; }
.variant-solo .badge-dynamic { width: 49.1%; }
.variant-solo .badge-curiosity { width: 30.8%; }
.variant-solo .badge-collaboration { width: 37.8%; }
.variant-solo .badge-tenacious { width: 27.1%; }

/* four: 2-4 players, auto-width slot (always fills the row), horizontal layout.
   Avatar 213px and gap 22.876px confirmed directly against the new Figma
   file's own 4-player example; badge ratios (84.7/53.1/65.3/46.7%) unchanged. */
.variant-four .profile-slot-body {
  display: flex;
  gap: 23px;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}
.variant-four .profile-avatar {
  width: 213px;
  height: 213px;
  flex: none;
}
.variant-four .profile-badges {
  flex: 1;
  height: 100%;
  min-width: 0;
}
.variant-four .profile-badge { flex: 1; padding: 9px 6px; }
.variant-four .badge-dynamic { width: 84.7%; }
.variant-four .badge-curiosity { width: 53.1%; }
.variant-four .badge-collaboration { width: 65.3%; }
.variant-four .badge-tenacious { width: 46.7%; }

/* eight: 5-8 players, auto-width slot (always fills the row), avatar over badges.
   Scaled by the same ~0.572x factor; badge ratios (62.7/76.9/55%) unchanged. */
.variant-eight .profile-slot-body {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: center;
  width: 100%;
  height: 100%;
}
.variant-eight .profile-avatar {
  width: 126px;
  height: 126px;
  flex: none;
}
.variant-eight .profile-badges {
  width: 100%;
  flex: 1;
  min-height: 0;
}
.variant-eight .profile-badge { padding: 1px 6px; flex: 1; }
.variant-eight .badge-dynamic { width: 100%; }
.variant-eight .badge-curiosity { width: 62.7%; }
.variant-eight .badge-collaboration { width: 76.9%; }
.variant-eight .badge-tenacious { width: 55%; }

/* ---------- Facts section ---------- */

.facts-section {
  position: absolute;
  left: 0;
  top: 754px;
  width: 1920px;
  height: 326px;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 26px 41.6px;
}

.facts-heading-wrap {
  width: 509px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.facts-heading {
  margin: 0;
  width: 321px;
  font-size: 59px;
  font-weight: 700;
  line-height: 67px;
  color: var(--white);
}

.facts-cards {
  flex: 1;
  display: flex;
  gap: 26px;
  height: 100%;
  align-items: center;
}

.flip-card {
  width: 413.9px;
  height: 242px;
  flex: none;
  cursor: pointer;
  -webkit-perspective: 1600px;
  perspective: 1600px;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-4deg); }
  40% { transform: rotate(3.5deg); }
  60% { transform: rotate(-2.5deg); }
  80% { transform: rotate(1.5deg); }
}

.flip-card.wiggle {
  animation: wiggle 0.5s ease-in-out;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 12px;
  border: 2.3px solid var(--cyan-glow);
  /* Flat, mostly-opaque tinted fill rather than a true layered-glass
     translucency — a genuinely see-through face lets the opposite face's
     content bleed through on iOS Safari (backface-visibility support there
     is unreliable), so opacity here is a deliberate safety margin, not
     just a style choice. */
  background: rgba(53, 62, 77, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7.6px;
  padding: 7.6px;
  overflow: hidden;
  text-align: center;
  color: var(--white);
}

.flip-face-back {
  transform: rotateY(180deg);
}

.face-content {
  position: relative;
  z-index: 1;
}

.fact-card-bracket {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 96.4%;
  height: 93.7%;
  object-fit: contain;
  pointer-events: none;
}

.fact-number {
  margin: 0;
  font-size: 36.5px;
  font-weight: 700;
  line-height: 44px;
}

.fact-icon {
  height: 81.5px;
  width: 111px;
  object-fit: contain;
}

.fact-hint {
  margin: 0;
  font-size: 21.3px;
  font-weight: 500;
  line-height: 32px;
}

.fact-back-text {
  margin: 0;
  width: 330px;
  font-size: 21.3px;
  font-weight: 500;
  line-height: 32px;
}

.fact-photo {
  width: 157px;
  height: 115px;
  object-fit: cover;
  border-radius: 4px;
}

/* ---------- Screen 2: Enter Now! fuse countdown ---------- */

.screen-enter {
  align-items: center;
  justify-content: center;
}

.fuse-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fuse-track {
  fill: none;
  stroke: rgba(177, 228, 244, 0.25);
  stroke-width: 64px;
}

.fuse-progress {
  fill: none;
  stroke: var(--dc-blue-light);
  stroke-width: 64px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 20px var(--cyan-glow)) drop-shadow(0 0 46px var(--cyan-glow));
}

.enter-copy {
  position: absolute;
  left: calc(50% - 186.5px);
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.enter-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 700;
  line-height: 116px;
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Fixed width sized to fit the widest possible countdown text ("20 SECONDS",
   measured at ~1136px including padding) plus margin, so the box never
   visibly resizes as the digit count / singular-plural text changes each
   second — only the text re-centers within it. */
.enter-seconds-box {
  width: 1180px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 7px solid var(--white);
  border-radius: 40px;
  padding: 20px 60px;
}

.enter-seconds {
  margin: 0;
  font-family: var(--font-display);
  font-size: 130px;
  font-weight: 700;
  line-height: 188px;
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
}

.enter-arrow {
  position: absolute;
  left: 1464px;
  top: 396px;
  width: 287px;
  height: 287px;
  animation: arrow-bounce 2.2s ease-in-out infinite;
}

@keyframes arrow-bounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(18px); }
}

/* ---------- Demo control panel (outside the kiosk design) ---------- */

.demo-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: rgba(20, 24, 31, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 16px 18px;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 220px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease, min-width 0.2s ease;
}

.demo-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.demo-panel-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.6;
  cursor: grab;
  touch-action: none;
  user-select: none;
  white-space: nowrap;
}

.demo-panel-title.dragging {
  cursor: grabbing;
}

.demo-panel-fold-btn {
  flex: none;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.demo-panel-fold-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Collapsed: shrink to a small glass pill, matching the fact-card glass
   language — just the draggable title and the un-fold toggle remain. */
.demo-panel.collapsed {
  min-width: 0;
  padding: 10px 12px;
  background: rgba(81, 94, 116, 0.35);
  border-color: var(--cyan-glow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border-radius: 100px;
}

.demo-panel.collapsed .demo-panel-header {
  gap: 8px;
}

.demo-panel.collapsed .demo-panel-title,
.demo-panel.collapsed .demo-panel-fold-btn {
  margin-bottom: 0;
}

.demo-panel.collapsed .demo-panel-buttons,
.demo-panel.collapsed .demo-panel-count {
  display: none;
}

.demo-panel-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demo-btn {
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #3a4356;
  color: #fff;
  transition: filter 0.15s ease;
}

.demo-btn:hover {
  filter: brightness(1.15);
}

.demo-btn-primary {
  background: #82c24a;
  color: #1c2129;
}

.demo-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.demo-panel-count {
  margin: 12px 0 0;
  font-size: 13px;
  opacity: 0.75;
  text-align: center;
}