/* ---------- DGA Vending huisstijl ---------- */
@font-face { font-family: 'Saira Condensed'; src: url('/fonts/SairaCondensed-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Fustat'; src: url('/fonts/Fustat-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fustat'; src: url('/fonts/Fustat-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Fustat'; src: url('/fonts/Fustat-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fustat'; src: url('/fonts/Fustat-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Fustat'; src: url('/fonts/Fustat-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

:root {
  /* merkkleuren */
  --dga-blauw: #0060d8;
  --dga-lichtblauw: #3a86e5;
  --dga-navy: #151820;
  --dga-sinas: #ff9748;
  --dga-groen: #a5be6b;
  --dga-grijs: #eeecea;

  /* rollen */
  --bg: var(--dga-blauw);
  --bg2: #0a4fae;
  --panel: rgba(21, 24, 32, .32);
  --line: rgba(255, 255, 255, .2);
  --chalk: #ffffff;
  --muted: rgba(255, 255, 255, .78);
  --amber: var(--dga-sinas);
  --amber-d: #d26f26;
  --good: var(--dga-groen);
  --bad: #ff5f4a;
  --a0: var(--dga-sinas); --a1: var(--dga-groen); --a2: var(--dga-grijs); --a3: var(--dga-navy);
  --display: 'Saira Condensed', 'Arial Narrow', Impact, sans-serif;
  --body: 'Fustat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --r: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--chalk);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
/* DGA-fragment als rustige decoratie rechtsonder */
body.deco::before {
  content: ''; position: fixed; z-index: 0; pointer-events: none;
  width: min(75vw, 900px); aspect-ratio: 1400 / 957; right: -18vw; bottom: -14vh;
  background: url('/img/dga-fragment-blauw.png') center / contain no-repeat;
  opacity: .55;
}
:where(body.deco > *) { position: relative; z-index: 1; }

h1, h2, h3, .display { font-family: var(--display); font-weight: 800; letter-spacing: .01em; text-transform: uppercase; margin: 0; line-height: 1; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

.brandmark { display: inline-flex; align-items: center; gap: .7em; }
.brandmark img { display: block; height: 1.5em; width: auto; }
.brandmark span { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding-left: .7em; border-left: 2px solid rgba(255,255,255,.45); line-height: 1.1; }

.chip {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .3em .85em; border-radius: 999px; font-weight: 700;
  background: var(--panel); border: 1px solid var(--line); color: var(--chalk);
}
.dot { width: .75em; height: .75em; border-radius: 50%; display: inline-block; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }

.btn {
  border: 0; border-radius: 10px; padding: .8em 1.2em; font-weight: 800;
  background: var(--amber); color: var(--dga-navy); box-shadow: 0 4px 0 var(--amber-d);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--amber-d); }
.btn:disabled { filter: grayscale(1) brightness(.8); cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--chalk); border: 1px solid var(--line); box-shadow: none; }
.btn.small { padding: .45em .8em; font-size: .9em; border-radius: 8px; }
.btn.danger { background: var(--bad); color: #fff; box-shadow: 0 4px 0 #b13a2a; }

.ans-letter {
  font-family: var(--display); font-weight: 800; display: inline-grid; place-items: center;
  width: 1.9em; height: 1.9em; border-radius: 8px; background: rgba(21,24,32,.14); flex: none;
}
.a0 { background: var(--a0); color: var(--dga-navy); }
.a1 { background: var(--a1); color: var(--dga-navy); }
.a2 { background: var(--a2); color: var(--dga-navy); }
.a3 { background: var(--a3); color: #fff; }
.a3 .ans-letter, .ans-letter.a3 { background: rgba(255,255,255,.16); }

@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wobble { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.pop { animation: pop .35s cubic-bezier(.2,1.4,.4,1) both; }
.rise { animation: rise .45s ease-out both; }

.timerbar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; }
.timerbar > i { display: block; height: 100%; background: var(--amber); border-radius: 99px; transition: width .1s linear; }
.timerbar.low > i { background: var(--bad); }