@font-face {
  font-family: 'Geomanist';
  src: url('../fonts/Geomanist-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Geomanist';
  src: url('../fonts/Geomanist-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Geomanist';
  src: url('../fonts/Geomanist-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Geomanist';
  src: url('../fonts/Geomanist-Black.otf') format('opentype');
  font-weight: 900;
  font-display: swap;
}

body.smuk-app {
  --smuk-forest: #0d7f51;
  --smuk-forest-deep: #074734;
  --smuk-pine: #1d3e32;
  --smuk-sand: #f5dfd5;
  --smuk-cream: #fffaf4;
  --smuk-paper: #fffdf8;
  --smuk-gold: #f4bf2a;
  --smuk-sky: #acd2f4;
  --smuk-lilac: #9d82c5;
  --smuk-coral: #ff5a3f;
  --smuk-ink: #1e2f28;
  --smuk-line: rgba(29, 62, 50, 0.09);
  font-family: 'Geomanist', sans-serif;
  color: var(--smuk-ink);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.84), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.15)),
    var(--smuk-sand);
  position: relative;
  overflow-x: hidden;
}

body.smuk-app::before,
body.smuk-app::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
}

body.smuk-app::before {
  top: 0;
  left: 0;
  width: min(24vw, 180px);
  height: min(20vw, 150px);
  background-image: url('./Gode hjørner-03.webp');
  background-position: top left;
  opacity: 0.42;
}

body.smuk-app::after {
  right: 0;
  bottom: 0;
  width: min(28vw, 240px);
  height: min(18vw, 140px);
  background-image: url('./Gode_bunde_med_illustration_15.png');
  background-position: bottom right;
  opacity: 0.18;
}

body.smuk-app.smuk-landing::after,
body.smuk-app.smuk-poster::after {
  background-image: url('./Gode_bunde_med_illustration_05.webp');
  width: min(38vw, 380px);
  height: min(20vw, 170px);
  opacity: 0.22;
}

body.smuk-app.smuk-form::after {
  background-image: url('./Gode_bunde_med_illustration_02.png');
  left: 50%;
  right: auto;
  bottom: 0;
  width: 100vw;
  height: max(135px, 35.88vw);
  background-position: bottom center;
  background-size: 100% 100%;
  transform: translateX(-50%);
  opacity: 0.18;
}

body.smuk-app.smuk-display::after {
  background-image: url('./Gode_bunde_med_illustration_15.png');
  width: min(28vw, 240px);
  height: min(18vw, 140px);
}

body.smuk-app.smuk-admin::after {
  background-image: url('./Gode_bunde_08.png');
  width: min(30vw, 260px);
  height: min(18vw, 140px);
  opacity: 0.16;
}

body.smuk-app.smuk-legal::after {
  background-image: url('./Gode_bunde_08.png');
  width: min(28vw, 220px);
  height: min(16vw, 120px);
  opacity: 0.14;
}

body.smuk-app.smuk-admin::before {
  background-image: url('./Gode hjørner-05.png');
}

body.smuk-app.smuk-display::before {
  background-image: url('./Gode hjørner-05.png');
  opacity: 0.36;
}

body.smuk-app > * {
  position: relative;
  z-index: 1;
}

body.smuk-app h1,
body.smuk-app h2,
body.smuk-app h3 {
  color: var(--smuk-forest-deep);
}

body.smuk-app h1 {
  letter-spacing: -0.04em;
  line-height: 0.94;
}

body.smuk-app input,
body.smuk-app textarea,
body.smuk-app select,
body.smuk-app button {
  font: inherit;
}

body.smuk-app input,
body.smuk-app textarea,
body.smuk-app select {
  border-radius: 16px;
  border: 1px solid rgba(29, 62, 50, 0.14);
  background: rgba(255, 255, 255, 0.96);
  color: var(--smuk-ink);
}

body.smuk-app input:focus,
body.smuk-app textarea:focus,
body.smuk-app select:focus {
  outline: none;
  border-color: rgba(13, 127, 81, 0.5);
  box-shadow: 0 0 0 4px rgba(13, 127, 81, 0.12);
}

body.smuk-app button,
body.smuk-app .back-link,
body.smuk-app a.button,
body.smuk-app .admin-card a,
body.smuk-app .event-card a,
body.smuk-app .song-card a,
body.smuk-app.smuk-form p > a,
body.smuk-app .footer a,
body.smuk-app .links a {
  border-radius: 999px;
  background: linear-gradient(135deg, var(--smuk-forest), var(--smuk-forest-deep));
  color: white;
  border: none;
  box-shadow: 0 16px 34px rgba(7, 71, 52, 0.18);
}

body.smuk-app .back-link,
body.smuk-app a.button,
body.smuk-app .admin-card a,
body.smuk-app .event-card a,
body.smuk-app .song-card a,
body.smuk-app.smuk-form p > a,
body.smuk-app .footer a,
body.smuk-app .links a {
  text-decoration: none;
}

body.smuk-app .back-link:hover,
body.smuk-app a.button:hover,
body.smuk-app .admin-card a:hover,
body.smuk-app .event-card a:hover,
body.smuk-app .song-card a:hover,
body.smuk-app.smuk-form p > a:hover,
body.smuk-app .footer a:hover,
body.smuk-app .links a:hover,
body.smuk-app button:hover:not(:disabled) {
  filter: brightness(0.98);
  transform: translateY(-1px);
}

body.smuk-app button.secondary,
body.smuk-app a.button.secondary,
body.smuk-app .secondary-button {
  background: white;
  color: var(--smuk-forest);
  border: 1px solid rgba(29, 62, 50, 0.14);
  box-shadow: none;
}

body.smuk-app .content,
body.smuk-app .container,
body.smuk-app main,
body.smuk-app .card,
body.smuk-app .panel,
body.smuk-app .form-container,
body.smuk-app .search-container,
body.smuk-app .table-container,
body.smuk-app .search-card,
body.smuk-app .winners-list,
body.smuk-app .hero,
body.smuk-app .latest-card,
body.smuk-app .success,
body.smuk-app .success-message,
body.smuk-app .error-message,
body.smuk-app .admin-card,
body.smuk-app .toggle-item,
body.smuk-app .status-card,
body.smuk-app .winner-card,
body.smuk-app .song-card,
body.smuk-app .event-card,
body.smuk-app .stat,
body.smuk-app .round,
body.smuk-app .round-panel,
body.smuk-app .picker-card,
body.smuk-app .modal-card,
body.smuk-app .qr-panel {
  border-radius: 24px;
  border: 1px solid var(--smuk-line);
  box-shadow: 0 20px 56px rgba(29, 62, 50, 0.1);
}

body.smuk-app .card,
body.smuk-app .panel,
body.smuk-app .form-container,
body.smuk-app .search-container,
body.smuk-app .table-container,
body.smuk-app .search-card,
body.smuk-app .winners-list,
body.smuk-app .hero,
body.smuk-app .latest-card,
body.smuk-app .success,
body.smuk-app .admin-card,
body.smuk-app .toggle-item,
body.smuk-app .status-card,
body.smuk-app .winner-card,
body.smuk-app .song-card,
body.smuk-app .event-card,
body.smuk-app .stat,
body.smuk-app .round,
body.smuk-app .round-panel,
body.smuk-app .picker-card,
body.smuk-app .modal-card,
body.smuk-app .qr-panel,
body.smuk-app main {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 250, 244, 0.98));
}

body.smuk-app.smuk-landing,
body.smuk-app.smuk-form,
body.smuk-app.smuk-legal,
body.smuk-app.smuk-admin,
body.smuk-app.smuk-display {
  padding-inline: 1rem;
}

body.smuk-app.smuk-landing .content,
body.smuk-app.smuk-form .content,
body.smuk-app.smuk-admin .container,
body.smuk-app.smuk-landing .container,
body.smuk-app.smuk-display .container {
  max-width: 1100px;
  margin-inline: auto;
}

body.smuk-app.smuk-form {
  display: flex;
  justify-content: center;
  padding-block: 1.5rem 2rem;
}

body.smuk-app.smuk-form .content,
body.smuk-app.smuk-form main,
body.smuk-app.smuk-form .card {
  width: min(100%, 640px);
  margin-inline: auto;
  padding: 1.2rem;
}

body.smuk-app.smuk-form .content::before,
body.smuk-app.smuk-form main::before,
body.smuk-app.smuk-form .card::before {
  content: '';
  display: block;
  height: auto;
  aspect-ratio: 2500 / 742;
  border-radius: 22px;
  margin-bottom: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    url('./Gode_bunde_med_illustration_05.webp') center center / 100% 100% no-repeat,
    linear-gradient(135deg, var(--smuk-forest), var(--smuk-forest-deep));
}

body.smuk-app.smuk-form h1,
body.smuk-app.smuk-legal h1,
body.smuk-app.smuk-admin h1,
body.smuk-app.smuk-landing h1 {
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  margin-bottom: 0.7rem;
}

body.smuk-app.smuk-form form,
body.smuk-app.smuk-admin form {
  display: grid;
  gap: 0.95rem;
}

body.smuk-app.smuk-form .content,
body.smuk-app.smuk-form main,
body.smuk-app.smuk-form .card {
  text-align: center;
}

body.smuk-app.smuk-form form,
body.smuk-app.smuk-form ul,
body.smuk-app.smuk-form ol,
body.smuk-app.smuk-form .anonymous-notice,
body.smuk-app.smuk-form .success-message,
body.smuk-app.smuk-form .error-message,
body.smuk-app.smuk-form .privacy-check {
  text-align: left;
}

body.smuk-app.smuk-form h2,
body.smuk-app.smuk-form .intro,
body.smuk-app.smuk-form > p,
body.smuk-app.smuk-form .content > p,
body.smuk-app.smuk-form main > p,
body.smuk-app.smuk-form .card > p {
  margin-left: auto;
  margin-right: auto;
}

body.smuk-app.smuk-form p > a,
body.smuk-app.smuk-form .back-link,
body.smuk-app .footer a,
body.smuk-app .links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.smuk-app .site-legal-footer a,
body.smuk-app .privacy-check a,
body.smuk-app .site-inline-legal-link,
body.smuk-app .site-cookie-meta a,
body.smuk-app.smuk-legal main a,
body.smuk-app.smuk-admin .muted a,
body.smuk-app p a:not(.back-link):not(.button),
body.smuk-app li a:not(.back-link):not(.button) {
  color: var(--smuk-forest);
}

body.smuk-app.smuk-form label,
body.smuk-app.smuk-admin label {
  display: grid;
  gap: 0.45rem;
  color: var(--smuk-forest-deep);
  font-weight: 700;
}

body.smuk-app.smuk-form .privacy-check,
body.smuk-app.smuk-admin .privacy-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 1rem;
  border-radius: 18px;
  background: rgba(13, 127, 81, 0.07);
  border: 1px solid rgba(13, 127, 81, 0.08);
}

body.smuk-app.smuk-form .privacy-check input,
body.smuk-app.smuk-admin .privacy-check input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
}

body.smuk-app.smuk-landing .content,
body.smuk-app.smuk-landing .container {
  padding-block: 1rem 2rem;
}

body.smuk-app.smuk-landing .event-card,
body.smuk-app.smuk-landing .song-card,
body.smuk-app.smuk-admin .admin-card {
  padding: 1.25rem;
  border-left: none;
}

body.smuk-app.smuk-landing .event-card:nth-child(3n + 1),
body.smuk-app.smuk-landing .song-card:nth-child(3n + 1) {
  background: linear-gradient(180deg, rgba(244, 191, 42, 0.22), rgba(255, 250, 244, 0.98));
}

body.smuk-app.smuk-landing .event-card:nth-child(3n + 2),
body.smuk-app.smuk-landing .song-card:nth-child(3n + 2) {
  background: linear-gradient(180deg, rgba(172, 210, 244, 0.24), rgba(255, 250, 244, 0.98));
}

body.smuk-app.smuk-landing .event-card:nth-child(3n),
body.smuk-app.smuk-landing .song-card:nth-child(3n) {
  background: linear-gradient(180deg, rgba(157, 130, 197, 0.16), rgba(255, 250, 244, 0.98));
}

body.smuk-app.smuk-landing .search-input,
body.smuk-app.smuk-form input,
body.smuk-app.smuk-form textarea,
body.smuk-app.smuk-form select,
body.smuk-app.smuk-admin input,
body.smuk-app.smuk-admin select {
  padding: 0.95rem 1rem;
}

body.smuk-app.smuk-landing .intro,
body.smuk-app.smuk-form .intro,
body.smuk-app.smuk-legal p,
body.smuk-app.smuk-admin .intro {
  color: rgba(30, 47, 40, 0.8);
}

body.smuk-app.smuk-legal {
  padding-block: 1.25rem 2rem;
}

body.smuk-app.smuk-legal main {
  width: min(100%, 920px);
  margin-inline: auto;
  padding: 1.35rem 1.4rem 1.7rem;
}

body.smuk-app.smuk-legal main::before {
  content: '';
  display: block;
  height: 92px;
  border-radius: 22px;
  margin-bottom: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    url('./Gode_bunde_med_illustration_05.webp') center bottom / cover no-repeat,
    linear-gradient(135deg, var(--smuk-forest), var(--smuk-forest-deep));
}

body.smuk-app.smuk-legal table,
body.smuk-app.smuk-admin table,
body.smuk-app.smuk-display table,
body.smuk-app.smuk-board table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 22px;
  background: white;
}

body.smuk-app.smuk-legal th,
body.smuk-app.smuk-legal td,
body.smuk-app.smuk-admin th,
body.smuk-app.smuk-admin td,
body.smuk-app.smuk-display th,
body.smuk-app.smuk-display td,
body.smuk-app.smuk-board th,
body.smuk-app.smuk-board td {
  padding: 0.85rem;
  border-bottom: 1px solid rgba(29, 62, 50, 0.08);
  text-align: left;
  vertical-align: top;
}

body.smuk-app.smuk-legal th,
body.smuk-app.smuk-admin th,
body.smuk-app.smuk-display th,
body.smuk-app.smuk-board th {
  background: rgba(13, 127, 81, 0.06);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.82rem;
}

body.smuk-app.smuk-admin {
  padding-block: 1rem 1.6rem;
}

body.smuk-app.smuk-admin .container,
body.smuk-app.smuk-admin .page {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 0.5rem;
}

body.smuk-app.smuk-display {
  padding-block: 1rem 1.6rem;
}

body.smuk-app.smuk-display .content,
body.smuk-app.smuk-display .container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 0.5rem;
}

body.smuk-app.smuk-display .bingo-board,
body.smuk-app.smuk-display .grid {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 250, 244, 0.96));
  padding: 1rem;
  border-radius: 28px;
  border: 1px solid var(--smuk-line);
  box-shadow: 0 20px 56px rgba(29, 62, 50, 0.1);
}

body.smuk-app.smuk-display .cell {
  border-radius: 16px;
  border-width: 1px;
  border-color: rgba(29, 62, 50, 0.08);
}

body.smuk-app.smuk-display .cell.marked,
body.smuk-app.smuk-display .marked {
  color: white;
  background: linear-gradient(135deg, var(--smuk-forest), var(--smuk-forest-deep));
  border-color: var(--smuk-forest-deep);
  text-decoration: none;
}

body.smuk-app.smuk-display .hero,
body.smuk-app.smuk-display .panel {
  border-radius: 28px;
}

body.smuk-app.smuk-poster .container,
body.smuk-app.smuk-poster .content {
  max-width: 1200px;
  margin-inline: auto;
  text-align: center;
}

body.smuk-app.smuk-poster img {
  border-radius: 28px;
  border: 1px solid var(--smuk-line);
  box-shadow: 0 24px 70px rgba(29, 62, 50, 0.16);
}

body.smuk-app .success-message,
body.smuk-app .success,
body.smuk-app .live-status,
body.smuk-app .status,
body.smuk-app .scan-feedback {
  border-radius: 18px;
}

@media (max-width: 920px) {
  body.smuk-app::before {
    width: 140px;
    height: 110px;
    opacity: 0.32;
  }

  body.smuk-app::after {
    width: 150px;
    height: 100px;
    opacity: 0.12;
  }

  body.smuk-app.smuk-form .content,
  body.smuk-app.smuk-form main,
  body.smuk-app.smuk-form .card,
  body.smuk-app.smuk-legal main {
    width: 100%;
  }
}

@media (max-width: 700px) {
  body.smuk-app.smuk-form .content,
  body.smuk-app.smuk-form main,
  body.smuk-app.smuk-form .card,
  body.smuk-app.smuk-legal main {
    padding: 0.95rem;
    border-radius: 28px;
  }

  body.smuk-app.smuk-form .content::before,
  body.smuk-app.smuk-form main::before,
  body.smuk-app.smuk-form .card::before,
  body.smuk-app.smuk-legal main::before {
    height: 84px;
  }

  body.smuk-app.smuk-display .bingo-board,
  body.smuk-app.smuk-display .grid {
    padding: 0.7rem;
    border-radius: 22px;
  }
}