:root{--achter:#2b2420;--vlak:#3a312b;--tekst:#f3ebe0;--zacht:#c9b9a6;--accent:#f2c14e;--kaart:#fffdf8;color:var(--tekst);background:var(--achter);-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html{touch-action:pan-x pan-y}body{background:var(--achter);min-height:100dvh;margin:0}h1,h2{margin:0 0 .4em;font-weight:650}h1{letter-spacing:.04em;font-size:2.6rem}h2{font-size:1.25rem}.knop{font:inherit;cursor:pointer;background:var(--accent);color:#2b2420;border:0;border-radius:10px;min-height:44px;padding:.7em 1.2em;font-weight:600}.knop:disabled{opacity:.45;cursor:default}.knop.klein{background:var(--vlak);color:var(--tekst);min-height:36px;padding:.45em .9em;font-weight:500}.start{text-align:center;gap:16px;max-width:460px;margin:0 auto;padding:32px 16px;display:grid}.venster{background:var(--vlak);text-align:left;border-radius:16px;gap:12px;padding:20px;display:grid}fieldset{border:1px solid #fff2;border-radius:12px;gap:8px;margin:0;padding:10px 12px;display:grid}legend{color:var(--zacht);padding:0 6px}.naam{align-items:center;gap:10px;display:flex}.naam .bol{background:var(--kleur);border-radius:50%;flex:none;width:22px;height:22px}.naam input{font:inherit;color:var(--tekst);background:#0002;border:1px solid #fff3;border-radius:8px;flex:1;padding:.55em .7em}.vink{color:var(--zacht);align-items:center;gap:8px;display:flex}.later{color:var(--zacht);font-size:.9rem}.veld{color:var(--zacht);gap:4px;display:grid}.veld input,.veld select,.veld textarea,.naam select{font:inherit;color:var(--tekst);background:#0002;border:1px solid #fff3;border-radius:8px;width:100%;padding:.55em .7em}.veld option,.naam option{color:#1d1d1d}.fout{color:#ff8a80;margin:0}.zacht{color:var(--zacht)}.link{color:var(--accent);text-decoration:none}a{color:var(--accent)}.knop.gevaar{background:#7a2620}.deler{flex:none;font-size:1.05em;line-height:1}.zacht.klein,p.klein{font-size:.85rem}.jouwbeurt{color:var(--accent);font-weight:700}.melding-aan{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.melding-aan p{flex:200px;margin:0}.kleuren{gap:8px;display:grid}.kleurknop{font:inherit;color:var(--tekst);cursor:pointer;text-align:left;background:#0002;border:2px solid #0000;border-radius:10px;align-items:center;gap:10px;width:100%;min-height:48px;padding:8px 12px;display:flex}.kleurknop .bol{background:var(--kleur);border-radius:50%;flex:none;width:22px;height:22px}.kleurknop small{color:var(--zacht)}.kleurknop.gekozen{border-color:var(--kleur);background:color-mix(in srgb, var(--kleur) 25%, transparent)}.kleurknop:disabled{opacity:.5;cursor:default}.uitnodiging{text-align:center;justify-items:center}.qr{width:220px;height:220px;image-rendering:pixelated;border-radius:12px}.pin{letter-spacing:.2em;color:var(--accent);font-variant-numeric:tabular-nums;margin:0;font-size:2.6rem;font-weight:800}.breek{word-break:break-all}.stoel{border-radius:10px;min-height:44px;padding:2px 4px}.stoel.gekozen{outline:2px solid var(--kleur);background:color-mix(in srgb, var(--kleur) 20%, transparent)}.stoelnaam{flex:1}.speler.ik{outline:2px solid var(--kleur);outline-offset:1px}.installeren{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:20;background:var(--vlak);border:1px solid #fff2;border-radius:16px;grid-template-columns:auto 1fr;align-items:center;gap:10px 12px;max-width:520px;margin:0 auto;padding:14px;display:grid;position:fixed;box-shadow:0 10px 30px #000a}.installeren img{border-radius:10px}.installeren p{color:var(--zacht);margin:2px 0 0;font-size:.92rem}.installeren .knoppen{grid-column:1/-1;justify-content:flex-end;margin:0}.pagina{gap:16px;max-width:860px;margin:0 auto;padding:20px 16px 40px;display:grid}.balk{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.balk h2{margin:0}.raster{gap:10px;display:grid}.code{letter-spacing:.15em;color:var(--accent);font-size:1.3rem}.tabel{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}.tabel th,.tabel td{text-align:right;border-bottom:1px solid #ffffff1a;padding:6px 8px}.tabel th:nth-child(2),.tabel td:nth-child(2){text-align:left}.tabel th{color:var(--zacht);font-weight:500}.uitslagen{gap:6px;margin:0;padding:0;list-style:none;display:grid}.uitslagen li{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.uitslagen .winst{font-weight:700}.uitslagen .winst:after{content:" 🏆"}.tafel{grid-template-rows:auto 1fr;min-height:100dvh;display:grid}.kop{flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 12px;display:flex}.kopknoppen{flex:none;gap:8px;display:flex}.teams{flex-wrap:nowrap;flex:320px;gap:8px;min-width:0;display:flex}.team{background:#0003;border-radius:999px;flex:1 1 0;gap:4px;min-width:0;padding:3px;display:flex}.team .speler{flex:1 1 0;min-width:0}.spelernaam{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.team.winnaar{outline:2px solid var(--accent)}.speler{border-radius:999px;align-items:center;gap:5px;padding:3px 8px 3px 5px;font-size:.95rem;display:inline-flex}.speler:before{content:"";background:var(--kleur);border-radius:50%;flex:none;width:14px;height:14px}.speler small{flex:none}.speler,.stoel .stoelnaam,.naamkleur{color:color-mix(in srgb, var(--kleur) 72%, #fff);font-weight:600}.stoel .stoelnaam small,.stoel .stoelnaam .zacht{color:var(--zacht);font-weight:400}.speler small{color:var(--zacht)}.speler.actief{background:var(--kleur);color:#fff}.speler.actief:before{background:#fff}.speler.actief small{color:#fffc}.speelveld{grid-template-columns:minmax(0,1fr);align-content:start;gap:12px;padding:0 12px 16px;display:grid}@media (width<=760px){.speelveld{gap:8px;padding:0 0 16px}.paneel{padding:0 10px}.bord{filter:none}.kop{padding:6px 8px}.teams{flex-basis:100%}.speler{font-size:.85rem}}@media (aspect-ratio>=5/4){.speelveld{grid-template-columns:minmax(0,calc(100dvh - 70px)) minmax(300px,1fr);align-items:start}}.bordvak{width:100%;max-width:calc(100dvh - 70px);margin:0 auto;position:relative}.bord{filter:drop-shadow(0 10px 18px #0007);touch-action:manipulation;width:100%;height:auto;display:block}.gat{stroke:#0003;stroke-width:.004px}.pion{transition:transform .45s}.zoom{transition:transform .4s}.zoom.gebaar{transition:none}.bordhouder{position:relative}.loep{color:#fff;cursor:pointer;background:#2b2420cc;border:0;border-radius:50%;place-items:center;width:36px;height:36px;display:grid;position:absolute;top:58.8%;left:58.8%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #0006}.pion.klikbaar{cursor:pointer}.pion .ring{fill:#fff3;stroke:#fff;stroke-width:.006px;animation:1.1s ease-in-out infinite puls}.pion.gekozen .ring{fill:#f2c14e66;stroke:var(--accent);stroke-width:.01px;animation:none}.doel{cursor:pointer}.doel .raak{fill:#0000}.doel .ring{fill:#f2c14e55;stroke:var(--accent);stroke-width:.009px;animation:.9s ease-in-out infinite puls}@keyframes puls{50%{opacity:.45}}.stapel .nieuw{transform-box:fill-box;transform-origin:50%;animation:.45s ease-out opleggen}@keyframes opleggen{0%{opacity:0;transform:translateY(.5px)scale(1.35)}to{opacity:1;transform:none}}.stapel g g:last-child{filter:drop-shadow(0 .006px .008px #0006)}.toc{pointer-events:none;color:#fff;text-shadow:0 4px #b3261e,0 8px 24px #000a;place-items:center;font-size:clamp(3rem,14vw,8rem);font-weight:900;animation:1.4s ease-out forwards toc;display:grid;position:absolute;inset:0}@keyframes toc{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.1)}80%{opacity:1}to{opacity:0;transform:scale(1)}}.paneel{align-content:start;gap:12px;display:grid}.melding,.hand-vak{background:var(--vlak);border-top:6px solid var(--kleur,var(--accent));border-radius:16px;padding:16px}.melding.groot{text-align:center;justify-items:center;gap:8px;display:grid}.melding p,.hand-vak p{color:var(--zacht);margin:0 0 8px}.wie{color:var(--tekst)}.tip{color:var(--accent)!important}.uitleg{color:var(--tekst)!important}.knoppen{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.hand{flex-wrap:wrap;gap:8px;margin:8px 0 12px;display:flex}.kaart{background:var(--kaart);color:#1d1d1d;width:64px;height:92px;font:inherit;cursor:pointer;border:1px solid #0003;border-radius:8px;padding:0;font-weight:700;transition:transform .15s,box-shadow .15s;position:relative;box-shadow:0 3px 6px #0005}.kaart.rood{color:#c0262d}.kaart .hoek{text-align:center;font-size:.95rem;line-height:1.05;position:absolute;top:5px;left:7px}.kaart .midden{place-items:center;padding-top:10px;font-size:1.9rem;display:grid;position:absolute;inset:0}.kaart.isjoker{background:#fff4d6}.kaart .midden.joker{flex-direction:column;justify-content:center;align-items:center;gap:2px;padding-top:8px;display:flex}.kaart .jokerster{font-size:1.6rem;line-height:1}.kaart .jokertekst{letter-spacing:.06em;font-size:.68rem;font-weight:800}.hand.klein .kaart .jokerster{font-size:.9rem}.hand.klein .kaart .jokertekst{font-size:.42rem}.kaart.gekozen{box-shadow:0 0 0 3px var(--accent), 0 8px 14px #0006;transform:translateY(-10px)}.kaart.uit{opacity:.45}.hand.klein{flex:1;justify-content:flex-end;gap:4px;margin:4px 0}.hand.klein .kaart{cursor:default;width:38px;height:54px;font-size:.7rem}.hand.klein .kaart .midden{padding-top:8px;font-size:1.1rem}.hand.klein .kaart .hoek{font-size:.7rem;top:3px;left:4px}.kaart.dicht{cursor:default;background:repeating-linear-gradient(45deg,#8b3a2f 0 6px,#a2493c 6px 12px)}.logboek{color:var(--zacht);background:#0002;border-radius:12px;gap:3px;margin:0;padding:12px 12px 12px 32px;font-size:.9rem;display:grid}.scherm{z-index:10;background:#000a;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.scherm .venster{max-width:560px;max-height:90dvh;overflow:auto}.kaartwaarden{border-collapse:collapse;width:100%}.kaartwaarden th,.kaartwaarden td{text-align:left;vertical-align:top;border-bottom:1px solid #ffffff1a;padding:4px 8px}.kaartwaarden th{white-space:nowrap}