/* Eduplay live: gedeelde onderdelen van de live spellen (digibord en tablets).
   Laad na /huisstijl.css en eduplay.css. Grote raakvlakken, geen hover nodig, staand en liggend. */

/* ---------- Verbinding ---------- */
.verbinding { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30; background: var(--inkt); color: var(--wit); border-radius: var(--pil); padding: 10px 20px; font-weight: 800; font-size: 16px; box-shadow: 3px 3px 0 var(--oranje); max-width: calc(100vw - 32px); text-align: center; }

/* ---------- Digibord: wachtkamer ---------- */
.lv-stage { min-height: 0; display: grid; padding: 18px max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); overflow: hidden; }
.lv-lobby { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.6fr); gap: 22px; }
.lv-join { background: var(--ink); color: #fff; border-radius: 28px; padding: clamp(18px, 2.4vw, 32px); display: grid; align-content: center; justify-items: center; gap: 12px; text-align: center; box-shadow: var(--sh-3); min-height: 0; }
.lv-join .how { font-size: clamp(15px, 1.6vw, 20px); opacity: .85; margin: 0; }
.lv-join .url { font-family: var(--head); font-weight: 800; font-size: clamp(18px, 2.2vw, 30px); overflow-wrap: anywhere; }
.lv-join .code { font-family: var(--display); font-weight: 700; font-size: clamp(56px, 8vw, 120px); letter-spacing: .12em; line-height: 1; background: rgba(255,255,255,.1); border-radius: 22px; padding: 6px 16px 6px 30px; }
.lv-join .qr { width: clamp(120px, 13vw, 190px); background: #fff; border-radius: 16px; padding: 8px; }
.lv-join .qr svg { width: 100%; height: auto; display: block; }
.lv-rechts { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; min-height: 0; }
.lv-acties { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; background: var(--wit); border: var(--lijn); border-radius: var(--rond-l); box-shadow: var(--plak); padding: 12px 16px; }
.lv-acties .hint { margin: 0; font-weight: 700; color: var(--inkt-zacht); }

/* ---------- Teams indelen (teams.js) ---------- */
.ti { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
.ti-balk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ti-balk .knop { min-height: 48px; }
.ti-teams { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 12px; min-height: 0; }
.ti-team { --team: var(--a); border: var(--lijn); border-radius: 22px; background: color-mix(in srgb, var(--team) 14%, #fff); display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.ti-team.doel { box-shadow: 0 0 0 5px var(--team); transform: scale(1.01); }
.ti-kop { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--team); color: #fff; }
.ti-kop input { flex: 1; min-width: 0; border: 0; background: rgba(255,255,255,.18); color: #fff; font: 800 clamp(16px, 1.6vw, 22px) var(--kop); border-radius: 10px; padding: 6px 10px; }
.ti-kop input:focus { outline: 3px solid #fff; }
.ti-kop .n { font-family: var(--speels); font-weight: 700; font-size: 24px; min-width: 1.5em; text-align: center; }
.ti-kleur { width: 40px; height: 40px; border-radius: 12px; border: 3px solid #fff; background: var(--team); padding: 0; flex: none; }
.ti-lijst { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; padding: 12px; overflow-y: auto; min-height: 60px; }
.ti-naam { touch-action: none; user-select: none; -webkit-user-select: none; background: var(--wit); border: var(--lijn-dun); border-radius: var(--pil); padding: 10px 16px; font-weight: 800; font-size: clamp(16px, 1.5vw, 20px); box-shadow: 2px 2px 0 var(--inkt); cursor: grab; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; animation: ep-pop .4s; }
.ti-naam small { font-weight: 700; font-size: 12px; color: var(--inkt-licht); }
.ti-naam.sleept { opacity: .35; }
.ti-spook { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, -50%) rotate(-3deg) scale(1.08); box-shadow: 5px 5px 0 var(--inkt); cursor: grabbing; }
.ti-wacht { border: 2.5px dashed var(--inkt); border-radius: 22px; background: var(--papier-2); }
.ti-wacht .ti-kop { background: var(--inkt-zacht); }
.ti-wacht .ti-kop b { font: 800 18px var(--kop); flex: 1; }
.ti-opties { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-weight: 700; }
.ti-opties label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.ti-opties input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--inkt); }
.ti-opties select { font: 700 16px var(--ui); border: var(--lijn-dun); border-radius: 12px; padding: 8px 10px; background: var(--wit); min-height: 44px; }
.ti.vast .ti-naam { cursor: default; }
.ti-palet { display: grid; grid-template-columns: repeat(6, 44px); gap: 8px; justify-content: center; }
.ti-palet button { width: 44px; height: 44px; border-radius: 12px; border: 3px solid var(--inkt); }
.ti-menu { display: grid; gap: 8px; }
.ti-menu .knop { justify-content: flex-start; }

/* ---------- Klaskanaal op het bord (klaskanaal.js) ---------- */
.kk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kk-stip { width: 14px; height: 14px; border-radius: 50%; background: var(--goed); border: 2px solid var(--inkt); flex: none; }
.kk-stip.uit { background: var(--inkt-licht); }
.kk b { font-family: var(--speels); font-weight: 700; }

/* ---------- Tablet: algemeen ---------- */
.lv-scherm { height: 100%; box-sizing: border-box; display: grid; padding: max(14px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); gap: 12px; }
.lv-midden { place-content: center; justify-items: center; text-align: center; gap: 16px; }
.lv-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lv-team { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--pil); padding: 8px 16px; color: #fff; font-weight: 800; font-size: 17px; border: var(--lijn-dun); }
.lv-chip { background: var(--wit); border: var(--lijn-dun); border-radius: var(--pil); padding: 8px 16px; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.lv-groot { font-family: var(--kop); font-weight: 800; letter-spacing: -.03em; font-size: clamp(30px, 7vw, 52px); line-height: 1.05; margin: 0; text-wrap: balance; }
.lv-zacht { color: var(--inkt-zacht); font-weight: 600; font-size: clamp(16px, 3.6vw, 20px); line-height: 1.45; margin: 0; max-width: 32ch; }
.lv-vraag { background: var(--wit); border: var(--lijn); border-radius: 22px; box-shadow: var(--plak); padding: 14px 18px; font-family: var(--kop); font-weight: 800; letter-spacing: -.01em; font-size: clamp(22px, 5.2vw, 38px); line-height: 1.15; text-align: center; overflow-wrap: anywhere; text-wrap: balance; }
.lv-opties { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(76px, 1fr); gap: 12px; min-height: 0; }
.lv-optie { border: var(--lijn); border-radius: 22px; color: #fff; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 10px 14px; text-align: left; font: 800 clamp(18px, 4.4vw, 28px)/1.15 var(--ui); touch-action: manipulation; min-height: 0; transition: transform .08s, opacity .2s; box-shadow: 4px 4px 0 var(--inkt); }
.lv-optie .l { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.25); display: grid; place-items: center; font: 700 24px var(--speels); }
.lv-optie .t { overflow-wrap: anywhere; }
.lv-optie:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--inkt); }
.lv-optie[disabled] { opacity: .45; }
.lv-optie.gekozen { opacity: 1; outline: 5px solid var(--inkt); outline-offset: 3px; }
.lv-optie.goed { background: var(--goed) !important; opacity: 1; }
.lv-optie.fout { background: var(--bad) !important; opacity: 1; }
.lv-optie.o0 { background: var(--a); } .lv-optie.o1 { background: var(--b); } .lv-optie.o2 { background: var(--c); } .lv-optie.o3 { background: var(--d); }
@media (orientation: landscape) and (min-width: 700px) { .lv-opties { grid-template-columns: repeat(var(--k, 2), 1fr); } }
@media (max-width: 360px) { .lv-opties { grid-template-columns: 1fr; } }
.lv-flits { position: fixed; inset: 0; pointer-events: none; z-index: 15; opacity: 0; }
.lv-flits.goed { background: radial-gradient(circle, transparent 40%, rgba(35, 133, 90, .55)); animation: flits .5s; }
.lv-flits.fout { background: radial-gradient(circle, transparent 40%, rgba(210, 63, 63, .5)); animation: flits .5s; }
@keyframes flits { 30% { opacity: 1; } }
.lv-teller { font-family: var(--speels); font-weight: 700; font-size: clamp(90px, 30vw, 200px); color: var(--oranje); -webkit-text-stroke: 5px var(--inkt); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--inkt); line-height: 1; }
.lv-balk { height: 12px; border-radius: 999px; background: var(--rand-zacht); overflow: hidden; border: 2px solid var(--inkt); }
.lv-balk div { height: 100%; background: var(--inkt); transform-origin: left; }
.lv-pauze { position: fixed; inset: 0; z-index: 25; background: rgba(29, 36, 51, .8); color: #fff; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 20px; }
.lv-pauze b { font: 800 clamp(34px, 8vw, 60px) var(--kop); }
.lv-knop-groot { min-height: 60px; font-size: 20px; }
.lv-avatar { width: 112px; height: 112px; border-radius: 34px; display: grid; place-items: center; color: #fff; font: 700 56px var(--speels); border: var(--lijn); box-shadow: var(--plak); animation: ep-pop .6s; }
.lv-uitslag { width: 128px; height: 128px; border-radius: 40px; display: grid; place-items: center; border: var(--lijn); box-shadow: var(--plak); animation: ep-pop .5s; }
.lv-uitslag svg { width: 74px; height: 74px; }
.lv-uitslag.y { background: var(--goed); } .lv-uitslag.n { background: var(--bad); } .lv-uitslag.g { background: var(--inkt-zacht); }

/* Wachtscherm van een gekoppeld apparaat */
.lv-wacht { background: var(--papier); }
.lv-wacht .wacht-label { font: 700 clamp(48px, 14vw, 110px)/1 var(--speels); }
.lv-wacht .klas { font: 800 clamp(20px, 4.4vw, 28px) var(--kop); }
.lv-wacht form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lv-wacht input { border: var(--lijn); border-radius: 16px; padding: 12px 14px; font: 700 20px var(--ui); text-align: center; width: min(260px, 70vw); }
.lv-adem { animation: adem 3.2s ease-in-out infinite; }
@keyframes adem { 50% { transform: scale(1.04); } }
.lv-klein { font-size: 14px; color: var(--inkt-licht); font-weight: 700; }
.lv-link { background: none; border: 0; font: 800 15px var(--ui); color: var(--inkt-zacht); text-decoration: underline; text-underline-offset: 3px; padding: 10px; min-height: 44px; }

/* Touw op de tablet */
.lv-touw { position: relative; height: 28px; border-radius: 999px; border: var(--lijn-dun); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.lv-touw i { position: absolute; top: 3px; bottom: 3px; width: 12px; border-radius: 5px; background: var(--inkt); left: 50%; transform: translateX(-50%); transition: left .4s cubic-bezier(.3, 1.4, .5, 1); }
/* Torens op de tablet */
.lv-torens { display: flex; gap: 8px; align-items: flex-end; height: 64px; }
.lv-torens span { flex: 1; border: 2px solid var(--inkt); border-radius: 8px 8px 2px 2px; transition: height .5s; min-height: 6px; }

/* Vier op een rij */
.v4 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(4px, 1.1vw, 14px); padding: clamp(6px, 1.4vw, 18px); background: #1C4E9F; border: var(--lijn); border-radius: 18px; box-shadow: var(--plak); box-sizing: border-box; }
.v4 i { border-radius: 50%; background: var(--papier); box-shadow: inset 3px 3px 0 rgba(0,0,0,.25); aspect-ratio: 1; }
.v4 i.t0, .v4 i.t1 { border: 3px solid var(--inkt); box-sizing: border-box; }
.v4 i.nieuw { animation: val .55s cubic-bezier(.4, 0, .6, 1.4); }
.v4 i.rij4 { outline: 5px solid #fff; outline-offset: -2px; animation: knip 1s infinite; }
@keyframes val { from { transform: translateY(-500%); } }
@keyframes knip { 50% { filter: brightness(1.3); } }
.v4-kies { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(4px, 1.1vw, 14px); padding: 0 clamp(6px, 1.4vw, 18px); }
.v4-kies button { min-height: 64px; border: var(--lijn); border-radius: 14px; font: 700 28px var(--speels); color: #fff; box-shadow: 3px 3px 0 var(--inkt); touch-action: manipulation; }
.v4-kies button:disabled { opacity: .25; }

/* Duel: voortgang van de ander */
.duel-vs { display: grid; gap: 8px; }
.duel-rij { display: grid; grid-template-columns: minmax(70px, auto) 1fr auto; align-items: center; gap: 10px; font-weight: 800; }
.duel-rij .bol { display: flex; gap: 5px; flex-wrap: wrap; }
.duel-rij .bol i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--inkt); background: var(--wit); }
.duel-rij .bol i.j { background: var(--goed); } .duel-rij .bol i.n { background: var(--bad); } .duel-rij .bol i.x { background: var(--inkt-licht); }

@media (max-width: 860px) { .lv-lobby { grid-template-columns: 1fr; overflow-y: auto; } .lv-stage { overflow-y: auto; } .ti-teams { grid-template-columns: 1fr; } }