@font-face { font-family: "PolySans"; src: url("assets/fonts/PolySans-Neutral.otf"); font-weight: 400; }
@font-face { font-family: "PolySans"; src: url("assets/fonts/PolySans-Median.otf"); font-weight: 600; }

:root {
  --green: #AFFF64;
  --black: #000;
  --white: #fff;
  --beige: #F0EBE1;
  --beige-light: #F8F5EE;
  --grey: #E1E1DC;
  --blue-light: #E1EBEB;
  --radius: 14px;
  --gutter: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "PolySans", Arial, sans-serif;
  color: var(--black);
  background: var(--beige-light) url("assets/gradient.png") no-repeat left bottom / cover fixed;
  min-height: 100vh;
  line-height: 1.4;
}
h2 { font-weight: 600; font-size: 16px; margin: 0 0 12px; }
button { font: inherit; cursor: pointer; }
.muted { color: #555; font-size: 13px; }

/* Header */
.top { display: flex; align-items: center; gap: 24px; padding: 18px 28px; }
.logo { height: 30px; width: auto; }
.title-input {
  flex: 1; min-width: 0; font: 600 28px/1.1 "PolySans", Arial, sans-serif;
  background: transparent; border: 0; border-bottom: 2px dashed transparent;
  padding: 4px 0; outline: none; color: var(--black);
}
.title-input:hover, .title-input:focus { border-bottom-color: var(--grey); }
.top-actions { display: flex; gap: 8px; }
.ghost {
  background: var(--white); border: 1px solid var(--grey); border-radius: 999px;
  padding: 8px 16px; font-size: 14px;
}
.ghost:hover { border-color: var(--black); }

/* Layout */
.layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--gutter); padding: 0 28px 40px; align-items: start; }
.card { background: var(--white); border-radius: var(--radius); padding: 18px; margin-bottom: var(--gutter); }

/* Stage */
.stage {
  position: relative; overflow: hidden; background: var(--black); color: var(--white);
  border-radius: var(--radius); min-height: 440px; padding: 36px 32px 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stage-label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-bottom: 18px; }
.reel {
  width: 100%; height: clamp(90px, 14vw, 150px); overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.reel-name {
  display: block; font-weight: 600; font-size: clamp(32px, 6vw, 76px); line-height: 1.05;
  max-width: 100%; overflow-wrap: anywhere; will-change: transform, opacity;
}
.reel-name.tick { animation: tick .09s ease-out; }
.reel-name.blur { filter: blur(1.5px); opacity: .85; }
.reel-name.winner { animation: pop .7s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes tick { from { transform: translateY(-55%); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.stage.won .reel { height: auto; min-height: clamp(90px, 14vw, 150px); }
.stage.won .reel-name { padding-bottom: 14px; box-shadow: 0 6px 0 -0px transparent; }
.stage.won .reel-name::after { content: ""; display: block; height: 6px; width: 90px; background: var(--green); border-radius: 3px; margin: 16px auto 0; }

.stage-sub { margin-top: 12px; opacity: .75; min-height: 22px; }
.draw {
  margin-top: 28px; background: var(--green); color: var(--black); border: 0;
  border-radius: 999px; padding: 16px 38px; font: 600 20px "PolySans", Arial, sans-serif;
  transition: transform .15s, opacity .15s;
}
.draw:hover:not(:disabled) { transform: scale(1.04); }
.draw:disabled { background: #333; color: #888; cursor: not-allowed; }
.hint { margin-top: 12px; font-size: 12px; opacity: .45; }

/* Wall of names */
.wall-head { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; }
.wall-head h2 { margin: 0; }
.pill { background: var(--black); color: var(--white); border-radius: 999px; padding: 2px 10px; font-size: 13px; }
.wall { display: flex; flex-wrap: wrap; gap: 6px; max-height: 300px; overflow: auto; padding: 2px; }
.chip {
  background: var(--white); border-radius: 8px; padding: 6px 12px; font-size: 14px;
  transition: background .06s, color .06s, transform .06s, opacity .3s;
}
.chip.hot { background: var(--black); color: var(--white); transform: scale(1.08); }
.chip.out { opacity: .35; text-decoration: line-through; }
.chip.win { background: var(--black); color: var(--white); }
.wall-more { font-size: 13px; color: #555; padding: 6px 4px; }

/* Side */
.drop {
  display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  padding: 22px 12px; background: var(--beige-light); border: 2px dashed var(--grey);
  border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over { border-color: var(--black); background: var(--blue-light); }
.drop span { font-size: 13px; color: #555; }
#fileInfo { margin-top: 10px; }
#mapping { margin-top: 14px; }
.field { display: block; font-size: 13px; margin-bottom: 10px; }
select {
  display: block; width: 100%; margin-top: 4px; font: inherit; padding: 9px 10px;
  border: 1px solid var(--grey); border-radius: 8px; background: var(--white);
}
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 8px 0; cursor: pointer; }
.check input { accent-color: var(--black); width: 16px; height: 16px; }
.row-between { display: flex; align-items: baseline; justify-content: space-between; }
.link { background: none; border: 0; padding: 0; text-decoration: underline; font-size: 13px; }
.winners { padding-left: 22px; margin: 0 0 8px; }
.winners li { padding: 4px 0; font-weight: 600; }
.winners li small { font-weight: 400; color: #555; margin-left: 6px; }
.privacy { font-size: 12px; color: #555; margin: 6px 4px; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; padding: 0 16px 32px; }
  .top { padding: 14px 16px; flex-wrap: wrap; gap: 12px; }
  .title-input { order: 3; flex-basis: 100%; }
  .stage { min-height: 380px; padding: 28px 16px 22px; }
}

/* Fullscreen: laat alleen de stage zien */
body.presenting .top, body.presenting .side, body.presenting .wall-head { display: none; }
body.presenting .layout { grid-template-columns: 1fr; padding: 16px; }
body.presenting .stage { min-height: calc(100vh - 32px - 160px); }
body.presenting .wall { max-height: 130px; }
body.presenting .hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  .reel-name.tick, .reel-name.winner { animation: none; }
}

/* ---------- Uitzendweergave voor OBS: ?obs (vast 1920x1080, schaalt mee met het venster) ---------- */
body.obs { background: #000; overflow: hidden; }
body.obs.transparent { background: transparent; }
body.obs .top, body.obs .side, body.obs .wall-head, body.obs .hint, body.obs .draw { display: none; }
body.obs .layout { display: block; padding: 0; }
body.obs .stage-col {
  position: fixed; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0;
  display: flex; flex-direction: column; background: #000;
}
body.obs.transparent .stage-col, body.obs.transparent .stage { background: transparent; }
body.obs .stage { flex: 1; min-height: 0; border-radius: 0; padding: 40px 120px; }
body.obs .stage-label { font-size: 30px; margin-bottom: 30px; }
body.obs .reel { height: 260px; }
body.obs .reel-name { font-size: 160px; }
body.obs .stage.won .reel { height: auto; min-height: 260px; }
body.obs .stage.won .reel-name::after { height: 10px; width: 150px; margin-top: 28px; }
body.obs .stage-sub { font-size: 34px; margin-top: 24px; }
body.obs .wall {
  height: 170px; max-height: none; overflow: hidden; align-content: center; justify-content: center;
  padding: 0 60px; gap: 8px;
}
body.obs .wall { display: none; }
body.obs .wall.show { display: flex; }
body.obs .chip { background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px; padding: 7px 14px; }
body.obs .chip.hot { background: #fff; color: #000; }
body.obs .chip.win { background: #fff; color: #000; }
body.obs .wall-more { color: #aaa; font-size: 18px; }

/* ---------- Teams ---------- */
.seg { display: flex; gap: 3px; padding: 3px; margin-bottom: 12px; background: var(--beige-light); border-radius: 999px; }
.seg button { flex: 1; border: 0; background: transparent; border-radius: 999px; padding: 8px 10px; font-size: 14px; }
.seg button.on { background: var(--black); color: var(--white); }
.seg button.on::before { content: "✓ "; }
/* Toon in het bedieningsscherm welke soort loting actief is (niet in de uitzending) */
body:not(.obs) .stage-label::after { content: " · Winnaar trekken"; }
body.mode-teams:not(.obs) .stage-label::after { content: " · Teams verdelen"; }
input[type=number] {
  display: block; width: 100%; margin-top: 4px; font: inherit; padding: 9px 10px;
  border: 1px solid var(--grey); border-radius: 8px; background: var(--white);
}
body.mode-teams .only-winner { display: none; }
body:not(.mode-teams) .only-teams { display: none; }

.teams { display: none; width: 100%; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; text-align: left; --fs: 22px; }
.stage.teams-mode .reel { display: none; }
.stage.teams-mode .teams { display: grid; }
.team { background: rgba(255, 255, 255, .08); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.team h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.team h3 small { background: var(--white); color: var(--black); border-radius: 999px; padding: 0 9px; font-size: 13px; line-height: 22px; }
.team ul { list-style: none; margin: 0; padding: 0; }
.team li { font-size: var(--fs); line-height: 1.25; padding: 2px 0; overflow-wrap: anywhere; }
.team li.new { animation: pop .45s cubic-bezier(.2, 1.4, .4, 1); }
.teams-list { padding-left: 20px; margin: 0 0 8px; font-size: 14px; }
.teams-list li { margin-bottom: 10px; }
.teams-list small { color: #555; }

body.obs .teams { flex: 1; min-height: 0; overflow: hidden; margin: 16px 0; gap: 24px; align-content: center; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
body.obs .team { padding: 22px 26px; border-radius: 18px; }
body.obs .team h3 { font-size: 28px; margin-bottom: 12px; }
body.obs .team h3 small { font-size: 20px; line-height: 32px; padding: 0 14px; }

@media (prefers-reduced-motion: reduce) { .team li.new { animation: none; } }

textarea {
  display: block; width: 100%; margin-top: 4px; font: inherit; padding: 9px 10px; resize: vertical;
  border: 1px solid var(--grey); border-radius: 8px; background: var(--white); line-height: 1.5;
}
#manualBox p { margin: 8px 0 0; }