/* app/themes/thema.css - huisstijlen eaw/emagine, overgenomen uit eaw-lms
   (CSS-variabelen-patroon, ONTWERP §7). 'eaw' = licht, slate-blauw #5E8E9E +
   terracotta #B05D35 (P3-340, 24-09: was #D28C6A, 2,7:1 met witte knoptekst;
   #B05D35 haalt AA 4,5:1); 'emagine' = felgroen #D3FF50 op antraciet #222322.
   Thema is per sessie: <body class="stijl-{{ thema }}">. Game-eigen kleuren
   (ticketklassen, CFD-banden) staan hier bewust los van. */
:root { /* eaw (standaard) */
  --accent:#5E8E9E; --accent2:#B05D35; --knoptekst:#fff;
  --bg:#f7f5f2; --card:#fff; --text:#2a3439; --muted:#74828a; --border:#e0dcd6;
  --kop:#fff; --koptekst:#5E8E9E; --eigenbg:#eaf1f4; --eigenrand:#cfe0e6;
}
body.stijl-emagine {
  --accent:#D3FF50; --accent2:#D3FF50; --knoptekst:#222322;
  --bg:#222322; --card:#2b2c2b; --text:#f2f4f2; --muted:#9aa29a; --border:#3a3b3a;
  --kop:#1b1c1b; --koptekst:#D3FF50; --eigenbg:#31381f; --eigenrand:#55621f;
}
* { box-sizing:border-box }
body { margin:0; font-family:'Segoe UI',system-ui,sans-serif; background:var(--bg); color:var(--text) }
header { background:var(--kop); border-bottom:2px solid var(--accent); padding:10px 20px;
         display:flex; justify-content:space-between; align-items:center }
header img { height:38px; display:block }
header a { color:var(--koptekst); text-decoration:none; font-size:14px; margin-left:14px }
main { max-width:860px; margin:24px auto; padding:0 16px }
main a { color:var(--accent) }
.kaart { background:var(--card); border:1px solid var(--border); border-radius:12px;
         padding:18px; margin-bottom:16px }
h1 { font-size:22px; color:var(--accent); margin:0 0 14px }
h2 { font-size:16px; color:var(--accent); margin:0 0 12px }
label { display:block; font-size:13px; color:var(--muted); margin:10px 0 3px }
input, select { width:100%; padding:9px 12px; border:1px solid var(--border);
         border-radius:8px; font-size:14px; margin-bottom:10px; font-family:inherit;
         background:var(--card); color:var(--text) }
.check { display:flex; align-items:center; gap:8px }
.check input { width:auto; margin:0 }
button { background:var(--accent2); color:var(--knoptekst); border:none; border-radius:8px;
         padding:9px 16px; font-size:14px; cursor:pointer; font-weight:600 }
.muted { color:var(--muted); font-size:13px }
.fout { background:#e05c4a; color:#fff; border-radius:8px; padding:8px 12px; margin-bottom:12px; font-size:14px }
.rij { display:flex; justify-content:space-between; align-items:center;
       padding:8px 0; border-bottom:1px solid var(--border); font-size:14px }
.rij:last-child { border-bottom:none }
.teamnaam { display:inline-block; background:var(--eigenbg); border:1px solid var(--eigenrand);
            border-radius:999px; padding:4px 12px; margin:4px 6px 4px 0; font-size:14px }
code.code { font-family:'Consolas',monospace; background:var(--eigenbg); border:1px solid var(--eigenrand);
            border-radius:6px; padding:2px 8px; letter-spacing:2px; font-weight:700 }

/* ---- beamer: publiek scherm, alles fors ---- */
body.beamer { display:flex; flex-direction:column; min-height:100vh }
.beamer-kop { text-align:center; padding:24px 16px 8px }
.beamer-code { font-family:'Consolas',monospace; font-size:12vw; font-weight:800; letter-spacing:.12em;
               color:var(--accent); line-height:1 }
.beamer-sub { font-size:2vw; color:var(--muted); margin-top:6px }
.beamer-main { flex:1; display:flex; gap:24px; padding:16px 4vw 32px; align-items:flex-start }
.beamer-kol { flex:1; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px 24px }
.beamer-kol h2 { font-size:1.6vw }
.score-rij { display:flex; justify-content:space-between; align-items:center; font-size:1.8vw;
             padding:10px 0; border-bottom:1px solid var(--border) }
.score-rij:last-child { border-bottom:none }
.score-naam { display:flex; align-items:center; gap:14px }
.score-rang { color:var(--muted); font-variant-numeric:tabular-nums; min-width:1.6em }
.score-getal { font-weight:800; color:var(--accent2); font-variant-numeric:tabular-nums }
.lobby-team { font-size:1.8vw; padding:8px 0; border-bottom:1px solid var(--border) }
.lobby-team:last-child { border-bottom:none }