/* Stijl A (sinds v18). Actief via <html data-theme="a">; ?theme=off toont de oude stijl.
   Idee: een echt kaartspel op tafel. Platte, gedrukte kleuren (één per soort spel), geen verlopen,
   geen gloed, geen stippen; één lettertype (Archivo) met brede, vette titels; witte speelkaarten. */
@font-face{font-family:Archivo;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/fonts/archivo-var.woff2) format('woff2')}

/* ---------- A: donker (speelavond) ---------- */
html[data-theme]{--ink:#1e1b22;--paper:#ffffff;--r:26px}
html[data-theme="a"]{--bg:#2d2836;--panel:#3a3443;--panel2:#473f51;--line:#594f64;--text:#fdfaf6;--muted:#c6bfd0;--accent:#f2a516;--pink:#e8453c;--good:#16a37a;--bad:#e8453c}
html[data-theme] body{font-family:Archivo,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);font-stretch:100%}
html[data-theme] .logo,html[data-theme] h1,html[data-theme] h2,html[data-theme] .gcard b,html[data-theme] .card .word,html[data-theme] .sect,html[data-theme] .top h1,html[data-theme] .mode b{font-stretch:115%;letter-spacing:-.2px}
html[data-theme] .btn,html[data-theme] .tabs button{font-stretch:108%}

/* hoofdscherm: geen geel blok meer, gewoon het spel */
html[data-theme] .hero{background:transparent;box-shadow:none;padding:6px 2px 4px;color:var(--text);overflow:visible}
html[data-theme] .hero .floaters{display:none}
html[data-theme] .logo{color:var(--text);font-size:clamp(26px,8vw,34px);font-weight:900;letter-spacing:-.6px}
html[data-theme] .logo span{background:var(--pink);color:#fff;border-radius:8px;padding:0 7px 1px;margin-left:6px;font-size:.62em;vertical-align:.32em;box-shadow:none;transform:none;letter-spacing:0}
html[data-theme] .hero-sub{color:var(--muted);font-weight:500}
html[data-theme] .hero-sub b{color:var(--text)}
html[data-theme] .hero .icon-btn{background:var(--panel)}
html[data-theme] .hero .pl span{color:var(--text);font-weight:600}
html[data-theme] .hero .pl.add,html[data-theme] .strip .pl.add{background:var(--panel2);color:var(--text)}
html[data-theme] .hero .noplayers{background:var(--panel);color:var(--text)}
html[data-theme] .warm{background:var(--panel);color:var(--text);box-shadow:none;border:1.5px solid var(--line)}
html[data-theme] .warm small{color:var(--muted)}
html[data-theme] .tabs{background:var(--panel);border-radius:16px}
html[data-theme] .tabs .ink{background:var(--text);border-radius:12px}
html[data-theme] .tabs button.on{color:var(--ink)}
html[data-theme] .sub{color:var(--muted)}
html[data-theme] .sect{font-size:20px;font-weight:800}
html[data-theme] .sect .tdot{width:10px;height:10px;border-radius:3px;box-shadow:none}

/* tegels: vlak, één kleur, titel groot */
html[data-theme] .gcard{background:var(--c)!important;background-image:none!important;box-shadow:inset 0 -5px 0 rgba(0,0,0,.16);border-radius:var(--r)}
html[data-theme] .gcard::before{display:none}
html[data-theme] .gcard b{color:var(--on-c,#fff);font-weight:800;font-size:19px;line-height:1.05}
html[data-theme] .gcard.big b{font-size:30px}
html[data-theme] .gcard .ginfo{background:transparent;color:var(--on-c,#fff);box-shadow:inset 0 0 0 2px currentColor;opacity:.85;width:26px;height:26px}
html[data-theme] .gcard .pc,html[data-theme] .gcard .needb{background:rgba(0,0,0,.18)}
html[data-theme] .rchip{background:var(--panel)!important;color:var(--text)!important;border:1.5px solid var(--c)}

/* knoppen: plat, met een klein drukrandje */
html[data-theme] .btn{background:var(--accent);color:var(--ink);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18);border-radius:16px;font-weight:800}
html[data-theme] .btn.c{background:var(--c);color:var(--on-c,#fff);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
html[data-theme] .btn.sec{background:var(--panel2);color:var(--text);box-shadow:inset 0 -4px 0 rgba(0,0,0,.22)}
html[data-theme] .btn:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
html[data-theme] .icon-btn{background:var(--panel)}

/* labels: gewone schrijfwijze, geen hoofdletters */
html[data-theme] .lbl2{text-transform:none;letter-spacing:0;font-size:15px;font-weight:700;color:var(--muted)}
html[data-theme] .card .lbl{text-transform:none;letter-spacing:0;font-size:16px;font-weight:700}
html[data-theme] .cnt{letter-spacing:0}

/* keuzescherm */
html[data-theme] .sheet{background:var(--panel);border-top:0;border-radius:24px 24px 0 0}
html[data-theme] .mode{background:var(--panel2);border:2px solid transparent;border-radius:16px}
html[data-theme] .mode.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 18%,var(--panel2))}
html[data-theme] .mode.on b::after{color:var(--c)}
html[data-theme] .m-halloween{background:var(--panel2)}
html[data-theme] .seg{background:var(--panel2)}
html[data-theme] .seg button.on{background:var(--text);color:var(--ink)}
html[data-theme] .howto{color:var(--c)}
html[data-theme] .howto.hl{background:var(--c);color:var(--on-c,#fff)}
html[data-theme] .sw.on{background:var(--good)}

/* speelkaart: wit papier, één gekleurde rand onder (de stapel) */
html[data-theme] .card{background:var(--paper);color:var(--ink);border:0;border-radius:24px;box-shadow:0 7px 0 var(--c)}
html[data-theme] .card .lbl{color:color-mix(in srgb,var(--c) 85%,#000)}
html[data-theme] .card .q,html[data-theme] .card .word,html[data-theme] .card .rules,html[data-theme] .card b{color:var(--ink)}
html[data-theme] .card .q{font-weight:800;font-stretch:104%;letter-spacing:-.2px}
html[data-theme] .card .how{background:#f1f0ee;color:#5a5560}
html[data-theme] .card .hint{color:#6b6672}
html[data-theme] .card .pav{background:#f1f0ee}
html[data-theme] .card .pav.on{background:var(--ink)}
html[data-theme] .top h1{font-weight:800}
html[data-theme] .toast{background:var(--paper);color:var(--ink)}
html[data-theme] .card .aitag{background:var(--ink);color:#fff}

/* labels in gewone schrijfwijze (geen HOOFDLETTERS met spatiëring) */
html[data-theme] .match small,html[data-theme] .opt small,html[data-theme] .who small,html[data-theme] .unlucky small,html[data-theme] .gcard .gtype{text-transform:none;letter-spacing:0}
html[data-theme] .opt small{font-size:14px;opacity:.85}
/* Zou je liever: twee vlakke kaarten in de kleuren van het spel */
html[data-theme] .ab .opt{box-shadow:inset 0 -5px 0 rgba(0,0,0,.18);border-radius:24px}
html[data-theme] .ab .opt.oa{background:#e8453c!important;color:#fff}
html[data-theme] .ab .opt.ob{background:#4263eb!important;color:#fff}
html[data-theme] .ab .or,html[data-theme] .q .or{color:var(--text)}
html[data-theme] .unlucky small{color:#ff8f86}
html[data-theme] .card .word.red{color:#d6322a}
html[data-theme] .card .word.green{color:#0c8a5f}

/* v18.1: zachter en ronder (Mike: "minder donker, rond alles af") */
html[data-theme] .gcard{border-radius:26px}
html[data-theme] .gcard.big{border-radius:30px}
html[data-theme] .card{border-radius:32px}
html[data-theme] .btn,html[data-theme] .btn.c,html[data-theme] .btn.sec{border-radius:999px}
html[data-theme] .icon-btn{border-radius:50%}
html[data-theme] .tabs{border-radius:999px;padding:5px}
html[data-theme] .tabs .ink{border-radius:999px}
html[data-theme] .seg{border-radius:999px;padding:5px}
html[data-theme] .seg button{border-radius:999px}
html[data-theme] .chips button,html[data-theme] .rchip,html[data-theme] .howto.hl,html[data-theme] .duohint{border-radius:999px}
html[data-theme] .mode{border-radius:22px}
html[data-theme] .toggle,html[data-theme] .warm,html[data-theme] .noplayers{border-radius:22px}
html[data-theme] .sheet{border-radius:32px 32px 0 0}
html[data-theme] .opts button{border-radius:22px}
html[data-theme] .pav{border-radius:18px}
html[data-theme] .toast{border-radius:22px}
html[data-theme] .ab .opt{border-radius:30px}
html[data-theme] .card .how,html[data-theme] .card .timer{border-radius:999px}
html[data-theme] input[type=text],html[data-theme] input:not([type]){border-radius:18px}
html[data-theme] .scores > div,html[data-theme] .tscores .sc,html[data-theme] .sbr,html[data-theme] .rank button{border-radius:20px}
html[data-theme] .logo span{border-radius:10px}
html[data-theme] .welcome .btn.big{border-radius:999px}

/* v18.2: rustiger en afgewerkter (13 okt) */
/* (v18.5: de om-en-om-tint is vervallen; elk spel heeft nu een eigen kleur) */
/* info-knopje rustiger; het tikvlak blijft even groot */
html[data-theme] .gcard .ginfo{opacity:.55;width:24px;height:24px}
html[data-theme] .gcard .ginfo:hover,html[data-theme] .gcard .ginfo:focus-visible{opacity:1}
/* opwarmronde als echte knop met pijl */
html[data-theme] .warm{padding:12px 56px 12px 18px;border:0;background:var(--panel)}
html[data-theme] .warm::after{content:"›";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;font-size:24px;font-weight:800;line-height:1;padding-bottom:3px}

/* v18.3 */
/* hulpjes (grijs): de hoofdknop wordt geel, want een grijze knop lijkt uitgeschakeld */
html[data-theme] .btn.c:not([style*="--c"]):not([data-g]){background:var(--btn,var(--c));color:var(--on-btn,var(--on-c,#fff))}
html[data-theme] .btn.c[style*="6b6f7b" i]{background:var(--accent);color:var(--ink)}
/* "Laatst gespeeld": rij loopt zacht uit in plaats van hard afgeknipt */
html[data-theme] .recent.more{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
/* podium in de kleuren van de app */
html[data-theme] .pd.p1 .blk{background:var(--accent)}
html[data-theme] .pd.p2 .blk{background:#e7e3ee}
html[data-theme] .pd.p3 .blk{background:#e9a06a}
html[data-theme] .pd .blk{border-radius:22px 22px 10px 10px}

/* v18.4: jongen/meisje duidelijk blauw en roze (Mike), niet in de spelkleur */
html[data-theme] .cam-g .btn[data-g="m"],html[data-theme] .pl-g.g-m{background:#4263eb;color:#fff}
html[data-theme] .cam-g .btn[data-g="f"],html[data-theme] .pl-g.g-f{background:#d9408a;color:#fff}
/* v18.5: de kleur zegt niet meer welk soort spel het is, dus een neutraal bolletje bij de kopjes */
html[data-theme] .sect .tdot{background:var(--accent)!important}
/* v18.6: logo en knoppen passen ook op smalle schermen (320 pt: iPhone met Zoomweergave, oude SE); eerder viel de instellingenknop eraf */
html[data-theme] .hero-top{gap:8px}
html[data-theme] .hero-top .logo{min-width:0;white-space:nowrap}
html[data-theme] .hero-top>div{flex:none}
html[data-theme] .hero-top .logo{font-size:clamp(18px,calc((100vw - 142px) / 9),34px)}
@media (max-width:360px){html[data-theme] .hero-top .icon-btn{width:38px;height:38px}}
/* v18.7: kruisje rechtsboven in het spelvenster, favoriet als klein knopje onder de uitleg */
html[data-theme] .mhead{align-items:flex-start}
html[data-theme] .mhead .shx{flex:none;width:40px;height:40px;border-radius:50%;background:var(--panel2);color:var(--text);display:grid;place-items:center;margin:-4px -4px 0 0}
html[data-theme] .favpill{width:auto;height:auto;border-radius:999px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;margin-top:8px;font:inherit;font-size:14px;font-weight:700;align-self:flex-start;border-width:1.5px}
html[data-theme] .favpill.on{color:#f2a516;border-color:#f2a516;background:rgba(242,165,22,.14)}