/* =====================================================================
   APRÈS-SKI THEMA  ⛷️🍻
   Dit bestand legt een après-ski-jasje over alle pagina's.
   Terug naar de rustige stijl? Haal de regel met apresski.css weg uit de html-bestanden.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Titan+One&family=Nunito:wght@600;700;800;900&display=swap');

:root {
  --bg: #0b1d3a;
  --panel: #6b3e22;
  --panel2: #5a321b;
  --line: #8a5a36;
  --fg: #fff8ec;
  --muted: #f0d7b5;
  --red: #d7182a;
  --green: #22a052;
  --amber: #ffd23f;
  --a: #d7182a; --b: #1e6fd9; --c: #f2a900; --d: #22a052;
  --wood: repeating-linear-gradient(180deg, #7b4a28 0, #6e4022 22px, #4a2a15 22px, #4a2a15 24px),
          linear-gradient(90deg, rgba(0,0,0,.08), rgba(255,255,255,.04), rgba(0,0,0,.1));
  --check: repeating-linear-gradient(90deg, #d7182a 0 16px, #fff 16px 32px);
  --title: 'Titan One', 'Arial Rounded MT Bold', system-ui, sans-serif;
}

/* ---------- hemel, bergen, sneeuw en feestverlichting ---------- */
html {
  background: #0b1d3a linear-gradient(180deg, #050d22 0%, #0b1d3a 45%, #1f3f73 100%) fixed !important;
  min-height: 100%;
}
body {
  background: transparent !important;
  font-family: 'Nunito', system-ui, sans-serif !important;
  position: relative;
}
body::before {               /* besneeuwde bergen */
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 38vh; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 300 L0 170 L140 80 L230 140 L360 25 L480 120 L590 60 L710 160 L840 40 L970 125 L1070 75 L1200 150 L1200 300 Z' fill='%232a4f86'/%3E%3Cpath d='M140 80 L197 118 L171 115 L140 101 L107 118 L81 118 Z' fill='%23eef6ff'/%3E%3Cpath d='M360 25 L408 63 L386 60 L360 46 L336 63 L317 63 Z' fill='%23eef6ff'/%3E%3Cpath d='M590 60 L636 98 L615 95 L590 81 L552 98 L520 98 Z' fill='%23eef6ff'/%3E%3Cpath d='M840 40 L898 78 L872 75 L840 61 L817 78 L799 78 Z' fill='%23eef6ff'/%3E%3Cpath d='M1070 75 L1136 113 L1106 110 L1070 96 L1028 113 L994 113 Z' fill='%23eef6ff'/%3E%3Cpath d='M0 300 L0 230 L180 150 L320 215 L480 120 L630 210 L800 130 L950 205 L1070 160 L1200 215 L1200 300 Z' fill='%23173763'/%3E%3Cpath d='M180 150 L245 180 L216 179 L180 166 L143 182 L112 180 Z' fill='%23dfeefe'/%3E%3Cpath d='M480 120 L530 150 L508 149 L480 136 L452 152 L429 150 Z' fill='%23dfeefe'/%3E%3Cpath d='M800 130 L860 160 L833 159 L800 146 L765 162 L736 160 Z' fill='%23dfeefe'/%3E%3Cpath d='M1070 160 L1141 190 L1109 189 L1070 176 L1026 192 L990 190 Z' fill='%23dfeefe'/%3E%3C/svg%3E")
    bottom center / cover no-repeat;
}
body::after {                /* vallende sneeuw */
  content: ''; position: fixed; inset: -300px 0 0 0; z-index: 1; pointer-events: none; opacity: .75;
  background-image:
    radial-gradient(2.5px 2.5px at 20px 30px, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 80px 120px, #fff 50%, transparent 52%),
    radial-gradient(3px 3px at 150px 60px, #fff 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 200px 180px, #fff 50%, transparent 52%),
    radial-gradient(2.4px 2.4px at 260px 90px, #fff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 40px 220px, #fff 50%, transparent 52%);
  background-size: 300px 300px;
  animation: sneeuw 14s linear infinite;
}
@keyframes sneeuw { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-60px, 300px, 0); } }

html::before, html::after {  /* lampjesslinger */
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: 30px; z-index: 30; pointer-events: none;
  background:
    radial-gradient(ellipse 7px 9px at 50% 20px, var(--l1) 0 95%, transparent 100%) 0 0 / 120px 30px repeat-x,
    radial-gradient(ellipse 7px 9px at 50% 20px, var(--l2) 0 95%, transparent 100%) 60px 0 / 120px 30px repeat-x;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.55));
  animation: lampjes 1.6s steps(1) infinite;
}
html::before { --l1: #ff3b4e; --l2: #ffd23f; }
html::after  { --l1: #34d17a; --l2: #49a6ff; top: 0; animation-delay: .8s;
  background:
    linear-gradient(#2b1a0e, #2b1a0e) 0 8px / 100% 2px no-repeat,
    radial-gradient(ellipse 7px 9px at 50% 20px, var(--l1) 0 95%, transparent 100%) 30px 0 / 120px 30px repeat-x,
    radial-gradient(ellipse 7px 9px at 50% 20px, var(--l2) 0 95%, transparent 100%) 90px 0 / 120px 30px repeat-x; }
@keyframes lampjes { 0% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- algemene onderdelen ---------- */
h1, h2, .btn, button.btn, .chip, .pill, .badge, .tb, .tile, .mcb, #buzz, .letter, .l {
  font-family: var(--title) !important; font-weight: 400 !important; letter-spacing: .02em;
}
h1 { text-shadow: 0 3px 0 #7a0d16, 0 0 18px rgba(255,210,63,.35); }

/* houten panelen met Tiroler randje */
.panel, .card, .cat, .sheet, #qbox, .mbox, .mediarow, .empty, .tile, #ownrec, .scroll {
  background: var(--wood) !important;
  border: 0 !important;
  border-top: 8px solid transparent !important;
  border-image: var(--check) 8 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  color: var(--fg);
}
.tile { border-top-width: 5px !important; border-image: var(--check) 5 !important; }
.tile.sel, #ownrec.sel { outline: 4px solid var(--amber); outline-offset: -2px; }

/* knoppen: rood-wit, als een skipiste-paaltje */
.btn { background: #fff8ec; color: #7a0d16; border-radius: 14px; box-shadow: 0 4px 0 #b9a68c; }
.btn.primary, #reset { background: var(--red) !important; color: #fff !important; box-shadow: 0 5px 0 #7a0d16, 0 0 0 3px #fff inset !important; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn.primary.green { background: var(--green) !important; box-shadow: 0 5px 0 #0f5c2d, 0 0 0 3px #fff inset !important; }
.btn.ghost { background: rgba(0,0,0,.25) !important; color: var(--fg) !important; border: 2px solid rgba(255,248,236,.5) !important; box-shadow: none; }
.btn:active { transform: translateY(3px); }

input[type=text], input[type=number], input[type=password], textarea, select, input:not([type]) {
  background: rgba(255,248,236,.95) !important; color: #3b2312 !important; border: 2px solid #e9cfa9 !important; border-radius: 12px !important;
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 700;
}
::placeholder { color: #a88b6b !important; }

.muted, .optlabel, .hint, .sub, #qmeta, .where { color: var(--muted) !important; }
.chip, .pill { border-radius: 999px; }

/* ===================================================== SCHERM (beamer) */
#stage { padding-top: calc(3vh + 26px) !important; z-index: 2; }
.top .pill { background: var(--red) !important; color: #fff !important; box-shadow: 0 0 0 3px #fff inset; padding: .4em 1em !important; }
.top { color: var(--muted) !important; font-weight: 800; }

/* welkom */
.lobby h1 { font-family: var(--title); font-size: clamp(36px, 9vh, 120px) !important; color: #fff; line-height: 1 !important;
  text-shadow: 0 6px 0 #7a0d16, 0 0 30px rgba(255,210,63,.6); transform: rotate(-3deg); }
.lobby h1::before { content: '⛷️ '; }
.lobby h1::after { content: 'Après-ski editie 🍻'; display: block; font-size: .32em; color: var(--amber); text-shadow: 0 3px 0 #7a0d16; margin-top: .5em; transform: rotate(2deg); }
.lobby .sub { color: var(--fg) !important; font-weight: 800; }
.qrbox { border: 1.2vh solid transparent !important; border-image: var(--check) 12 !important; box-shadow: 0 1.5vh 4vh rgba(0,0,0,.6); }
#stage .chips .chip { background: #fff8ec !important; color: #7a0d16 !important; border-left: 1.2vh solid var(--red); box-shadow: 0 .6vh 0 #b9a68c, 0 1vh 2vh rgba(0,0,0,.4); border-radius: 1.2vh !important; }
#stage .chips .chip:nth-child(3n+1) { transform: rotate(-2deg); }
#stage .chips .chip:nth-child(3n+2) { transform: rotate(1.5deg); }
#stage .chips .chip.done { background: var(--green) !important; color: #fff !important; border-left-color: #fff; }
#stage .chips .chip.no { background: #5a1d17 !important; color: #ffc9c9 !important; }

/* categorie */
.intro .k { font-family: var(--title); color: var(--amber) !important; text-shadow: 0 3px 0 #7a0d16; }
.intro .k::before { content: '🎿 '; } .intro .k::after { content: ' 🎿'; }
.intro .n { font-family: var(--title); color: #fff; text-shadow: 0 1vh 0 #7a0d16, 0 0 4vh rgba(255,210,63,.55); transform: rotate(-2deg); }

/* vraag */
.qmain .qt { font-family: var(--title); font-weight: 400 !important; text-shadow: 0 4px 0 rgba(0,0,0,.45); }
.opts .opt { border: .5vh solid #fff; box-shadow: 0 .8vh 0 rgba(0,0,0,.35); font-family: var(--title); font-weight: 400 !important; }
.opts .opt .l { background: #fff !important; color: #222; }
.banner, .answer { border: .6vh solid #fff; box-shadow: 0 1vh 0 rgba(0,0,0,.35), 0 0 4vh rgba(255,210,63,.35); }
.banner .l2, .answer .l2 { font-family: var(--title); font-weight: 400 !important; text-shadow: 0 4px 0 rgba(0,0,0,.3); }
.banner.go { background: repeating-linear-gradient(45deg, #d7182a 0 3vh, #e8303f 3vh 6vh) !important; }
.banner.win, .answer { background: repeating-linear-gradient(45deg, #1f9d55 0 3vh, #26b061 3vh 6vh) !important; }
.status .info { color: var(--fg) !important; font-weight: 800; }
.progress .bar div { background: repeating-linear-gradient(45deg, #d7182a 0 14px, #fff 14px 28px) !important; }

/* aftellen */
#count { background: radial-gradient(circle, rgba(11,29,58,.75), rgba(5,13,34,.95)) !important; }
#count .n { font-family: var(--title); color: var(--amber) !important; text-shadow: 0 2.5vh 0 #7a0d16, 0 0 8vh rgba(255,210,63,.7); }
#count .l { font-family: var(--title); color: #fff !important; }
#count .l::after { content: ' 🍻'; }

/* tussenstand: rood-wit gestreepte palen */
.scores h1::before { content: '🏔️ '; }
.srow { text-shadow: 0 3px 0 rgba(0,0,0,.4); }
.srow .b { background: rgba(0,0,0,.35) !important; border: 2px solid rgba(255,255,255,.35); }
.srow .b div { background: repeating-linear-gradient(45deg, #d7182a 0 2.2vh, #fff 2.2vh 4.4vh) !important; }
.srow.top1 .b div { background: repeating-linear-gradient(45deg, #ffd23f 0 2.2vh, #fff 2.2vh 4.4vh) !important; }

/* eindstand: houten podium met sneeuw */
.final h1 { font-size: clamp(36px, 9vh, 120px) !important; }
.pod .blk { background: var(--wood) !important; color: #fff; text-shadow: 0 4px 0 #2b1a0e; border-top: 2.4vh solid #fff;
  border-radius: 2.5vh 2.5vh 0 0; box-shadow: inset 0 0 0 .5vh rgba(0,0,0,.25), 0 -.5vh 2vh rgba(255,255,255,.35); }
.pod.p1 .nm { color: var(--amber); }
.pod.p1 .nm::before { content: '🥇 '; }
.pod .nm { font-family: var(--title); font-weight: 400 !important; }

/* medialaag */
#ytcover, #audbox { background: var(--wood) !important; font-family: var(--title); font-weight: 400 !important; }
#unlock { font-family: var(--title); font-weight: 400 !important; background: var(--amber) !important; box-shadow: 0 5px 0 #a8820d; }

/* ===================================================== TELEFOON */
#section-join h1, #section-sound h1 { font-size: 2.1rem !important; color: #fff; }
#section-join h1::before { content: '⛷️ '; }
#section-join h1::after { content: 'Après-ski editie 🍻'; display: block; font-size: .55em; color: var(--amber); margin-top: 4px; }
body > section { position: relative; z-index: 2; }
body { padding-top: 40px !important; }
.phead #team { font-family: var(--title); font-weight: 400; font-size: 1.3rem; text-shadow: 0 2px 0 #7a0d16; }
.phead #score { background: var(--red) !important; color: #fff; box-shadow: 0 0 0 3px #fff inset; font-weight: 900; }
#qtext { font-family: var(--title); font-weight: 400 !important; }
#wait { font-family: var(--title); font-weight: 400 !important; text-shadow: 0 3px 0 #7a0d16; }
#wait small { font-family: 'Nunito', sans-serif; text-shadow: none; }
#buzz:not(.wait) { background: radial-gradient(circle at 35% 30%, #ff6a6f, #d7182a 55%, #8f0d18) !important;
  border: 10px solid #fff !important; box-shadow: 0 14px 0 #7a0d16, 0 0 0 10px #d7182a, 0 0 40px rgba(255,210,63,.45) !important;
  text-shadow: 0 4px 0 rgba(0,0,0,.3); }
#buzz:disabled:not(.wait) { filter: grayscale(.7) brightness(.6); }
.mcb { border: 4px solid #fff !important; box-shadow: 0 5px 0 rgba(0,0,0,.35); font-weight: 400 !important; }
.mcb .l { background: #fff !important; color: #222; }
#status { font-family: var(--title); font-weight: 400 !important; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
body.won { background: transparent !important; }
body.won::before { background: repeating-linear-gradient(45deg, #1f9d55 0 40px, #26b061 40px 80px) !important; height: 100vh; z-index: -1; }
#cd { background: rgba(5,13,34,.92) !important; }
#cdn { font-family: var(--title); color: var(--amber) !important; text-shadow: 0 14px 0 #7a0d16; }
.tile span:last-child { font-family: 'Nunito', sans-serif; font-weight: 800; }
.link { color: var(--fg) !important; font-weight: 800; }
#conn { z-index: 40; }

/* ===================================================== REGIE & BEHEER */
header h1, #app header h1 { font-size: 1.35rem !important; }
header a { background: rgba(0,0,0,.3); color: var(--fg) !important; border-color: rgba(255,248,236,.4) !important; font-weight: 800; }
.chip { background: var(--red) !important; color: #fff !important; }
.answer { color: #fff !important; }
.rows li, .q { border-top-color: rgba(255,255,255,.12) !important; }
.badge.buzzer, .tb.buzzer { background: var(--red) !important; color: #fff !important; }
.badge.mc, .tb.mc { background: #1e6fd9 !important; color: #fff !important; }
.badge.open, .tb.open { background: var(--amber) !important; color: #3b2312 !important; }
.outline .cat button { background: rgba(0,0,0,.28) !important; color: var(--fg); font-family: var(--title); font-weight: 400 !important; }
.outline .cur { background: var(--amber) !important; color: #3b2312 !important; }
.judge { background: rgba(0,0,0,.25) !important; border-color: rgba(255,255,255,.5) !important; color: #fff; }
.judge.ok.on { background: var(--green) !important; }
.judge.no.on { background: var(--red) !important; }
.mini { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.4) !important; color: var(--fg); }
.qtext { font-family: var(--title); font-weight: 400 !important; }
.seg button { background: rgba(0,0,0,.28) !important; color: var(--fg); }
.seg button.on { background: var(--red) !important; border-color: #fff !important; }
.cathead input { background: transparent !important; color: #fff !important; border-color: transparent !important; font-family: var(--title); font-weight: 400 !important; font-size: 1.25rem !important; }
.cathead input:hover, .cathead input:focus { background: rgba(0,0,0,.25) !important; }
.icon { color: var(--fg) !important; }
#editor { background: rgba(5,13,34,.8) !important; }
#login h1 { font-size: 2.4rem; }
#login h1::before { content: '🏔️ '; }
.wrap, #app { position: relative; z-index: 2; }