/* Standardverdier – endre disse for å styre logostørrelser og farger */
:root {
  --app-bg: #008ab1;        /* bakgrunnsfarge */
  --logo-top-max: 500px;    /* topp-logo bredde */
  --logo-bottom-max: 180px; /* bunn-logo bredde */
}

body.app-body {
  background: var(--app-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main.container { flex: 1 0 auto; }
.app-footer   { flex-shrink: 0; background: transparent; }

.brand-top  { background: transparent; }
.brand-logo { display: block; height: auto; }

/* Størrelser styres KUN fra CSS */
.brand-logo-top {
  width: min(100%, var(--logo-top-max));
  max-width: var(--logo-top-max);
}

.brand-logo-bottom {
  width: min(100%, var(--logo-bottom-max));
  max-width: var(--logo-bottom-max);
  opacity: 0.9;
}

.brand-logo {
  display: block;
  height: auto;
  margin-inline: auto;   /* midtstiller horisontalt */
}

/* Overlay for "trekker..."-animasjon */
.draw-card { position: relative; }
.draw-wait-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Split-flap number styling */
.splitflap-wrap {
  display: inline-block;
  perspective: 900px;
}

.splitflap {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  /* Big, responsive size: ~double of before */
  font-size: clamp(3rem, 12vw, 7rem);
  line-height: 1.05;
  letter-spacing: 0.02em;

  padding: 0.1em 0.25em;
  color: #f2f2f2;
  background: #111;
  border-radius: 8px;
  box-shadow:
    inset 0 -3px 0 rgba(255,255,255,0.05),
    0 10px 22px rgba(0,0,0,0.25);

  position: relative;
  transform-style: preserve-3d;
}

/* The “split” line across the flap */
.splitflap::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.18), transparent);
  pointer-events: none;
}

/* Flip animation when changing digits */
.splitflap.flip {
  animation: flap-rotate 220ms ease-in-out;
}

@keyframes flap-rotate {
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(-90deg); }
  100% { transform: rotateX(0deg); }
}


@media (max-width: 576px) {
  .brand-logo-top    { width: min(100%, calc(var(--logo-top-max) * 0.8));    max-width: calc(var(--logo-top-max) * 0.8); }
  .brand-logo-bottom { width: min(100%, calc(var(--logo-bottom-max) * 0.8)); max-width: calc(var(--logo-bottom-max) * 0.8); }
}

/* Eksisterende */
.drawn-list { min-height: 40px; }