:root{--bg:#f7f9fb;--fg:#16202e;--muted:#5d6b7c;--card:#ffffff;--line:#b9c3cf;--accent:#1c3a6b;--accent-fg:#ffffff;--black:#16202e;--same:#d5e3f7;--word:#f2b800;--sel:#ffe066;--bad:#c23b3b;--ok:#2c8a5a;--cs:38px;--display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;--body:'Source Sans 3','Segoe UI',system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f151d;--fg:#e6ebf1;--muted:#93a1b3;--card:#1a222d;--line:#3a4656;--accent:#8fb4f2;--accent-fg:#0f151d;--black:#000;--same:#243a5c;--word:#ffd21f;--sel:#7a6514;--bad:#ff7a7a;--ok:#5fd097;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0f151d;--fg:#e6ebf1;--muted:#93a1b3;--card:#1a222d;--line:#3a4656;--accent:#8fb4f2;--accent-fg:#0f151d;--black:#000;--same:#243a5c;--word:#ffd21f;--sel:#7a6514;--bad:#ff7a7a;--ok:#5fd097;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 var(--body)}
header.top{display:flex;align-items:center;gap:12px;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--card)}
header.top h1{font:800 20px var(--display);letter-spacing:-.01em;color:var(--accent);margin:0;flex:1}
header.top h1 a{color:inherit}
button.theme{font-size:13px;padding:4px 10px}
main{max-width:1000px;margin:0 auto;padding:10px 16px 16px}
button,.btn{font:inherit;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
button.danger{color:var(--bad)}
input[type=text],input[type=email],input[type=password],input[type=file]{font:inherit;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);width:100%}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.list{display:grid;gap:10px}
.item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit}
.item:hover{border-color:var(--accent)}
.item .t{flex:1;font-weight:600}.item small{color:var(--muted)}
.bar{width:90px;height:8px;border-radius:4px;background:var(--line);overflow:hidden}.bar>i{display:block;height:100%;background:var(--ok)}
.muted{color:var(--muted)}
#status{font-size:13px;color:var(--muted)}
/* speelveld */
.play{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.gridwrap{overflow:auto;max-width:100%;padding:2px;display:flex}
.grid{display:grid;gap:0;width:max-content;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.cell{width:var(--cs);height:var(--cs);border:1px solid var(--line);border-radius:8px;background:var(--card);position:relative;display:flex;align-items:center;justify-content:center;font:800 calc(var(--cs)*.56) var(--display);cursor:pointer}
.cell.b{background:var(--black);cursor:default}
.cell.x{background:transparent;border-color:transparent;cursor:default}
.rowl{width:var(--rlw,26px);height:var(--cs);display:flex;align-items:center;font:600 12px var(--display);color:var(--muted)}
.rowl.cur{color:var(--accent)}
.clue{padding:6px 12px;margin:0 0 6px;border-radius:10px;background:var(--same);min-height:2.6em;font-size:15px}
.clues{margin:0;padding:0;list-style:none;font-size:14px}.clues li{padding:2px 0;cursor:pointer}.clues li.cur{font-weight:600;color:var(--accent)}.clues b{display:inline-block;width:1.6em}
.cell .n{position:absolute;top:1px;right:3px;font:600 calc(var(--cs)*.29) var(--body);color:var(--muted);line-height:1}
.cell.same{background:var(--same)}
.cell.sel{background:var(--sel);outline:2px solid var(--accent);outline-offset:-2px;z-index:1}
.cell.lock{color:var(--muted)}
.cell.bad{color:var(--bad);box-shadow:inset 0 0 0 2px var(--bad)}
.side{flex:1;min-width:260px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;gap:4px;align-items:center;padding:3px 8px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px;cursor:pointer}
.chip b{min-width:1em;text-align:center;color:var(--accent)}.chip.done{background:var(--same)}.chip.bad{border-color:var(--bad);color:var(--bad)}
.hidden-input{position:fixed;left:-100px;top:0;width:1px;height:1px;opacity:0}
h2{font:600 13px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
/* dialogs */
dialog{border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--fg);padding:0;max-width:min(860px,94vw);width:100%}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog form{padding:18px;display:grid;gap:12px}
dialog h3{margin:0}
.actions{display:flex;justify-content:flex-end;gap:8px}
label.f{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.err{color:var(--bad)}
table.dataTable{width:100%!important}

.solgrid{display:grid;border:1px solid var(--fg);width:max-content}
.solgrid div{width:24px;height:24px;border:.5px solid var(--line);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;background:#fff;color:#000;position:relative}
.solgrid div.x{background:transparent;border-color:transparent}
.solgrid div small{position:absolute;top:0;left:1px;font-size:7px;font-weight:400;color:#555}
.solgrid div.sel{background:#ffe27a}
.solgrid div.e{cursor:pointer;background:#eef4ff}
.solnums{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.solnums label{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--muted)}
.solnums input{width:2.2em;text-align:center;text-transform:uppercase;padding:4px}
.solnums input.dup{border-color:var(--bad);color:var(--bad)}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;border:1px solid var(--line)}
.tag.ver{background:#dff5e8;border-color:#2e9d5b;color:#17603a}.tag.con{background:#fff4c2;border-color:#c9a400;color:#6b5600}
.solgrid div.same{background:#d5e3f7}

.grid,.solgrid{position:relative}
.mark{position:absolute;border:3px solid var(--word);border-radius:6px;pointer-events:none;z-index:2;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.legend{font-size:13px;color:var(--muted);margin:6px 0 0}.legend i{display:inline-block;width:14px;height:10px;border:2px solid var(--word);border-radius:3px;vertical-align:-1px;margin-right:6px}

.cell.lock{color:var(--muted)}
.phead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 8px}
.ptitle{font:800 clamp(20px,3.5vw,26px) var(--display);text-transform:none;letter-spacing:-.02em;color:var(--accent);margin:0}
@media (min-width:800px){.side{overflow:auto}}
.authcard{max-width:420px;margin:24px auto}
.solgrid div.mark{background:transparent;border:3px solid var(--word);border-radius:6px;position:absolute;pointer-events:none;z-index:2}

.cell.ij .l{font-size:.8em;letter-spacing:-.06em}
.ijbtn{padding:2px 10px;font-weight:700;border-radius:999px}

/* ---- speelveld: basis (desktop) ---- */
.mob{display:none}
.pbar{display:none}
.backdrop{display:none}
.pct{font:700 13px var(--body);color:var(--muted)}
.sv{font-size:12px;color:var(--muted)}
.cell.rowhl:not(.same):not(.sel){background:color-mix(in srgb,var(--same) 42%,var(--card))}
.cell.pop{animation:cellpop .22s ease-out}
@keyframes cellpop{0%{transform:scale(.55)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
.ptoast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:600;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:92vw;text-align:center}
.ptoast.on{opacity:1;transform:translate(-50%,0)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70}
.win{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;z-index:80;animation:fadein .2s}
.wincard{background:var(--card);border-radius:24px;padding:26px 28px;text-align:center;max-width:320px;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:winpop .4s cubic-bezier(.2,1.4,.4,1)}
.wincard .big{font-size:56px;line-height:1}.wincard h3{font:800 26px var(--display);margin:8px 0 4px;color:var(--accent)}.wincard p{margin:0 0 16px}
.wincard .acts{display:grid;gap:8px}.wincard .btn{text-decoration:none;text-align:center}
@keyframes fadein{from{opacity:0}}
@keyframes winpop{from{transform:scale(.6);opacity:0}}

/* ---- compact: telefoon (portret en landschap) ---- */
@media (max-width:760px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  body.pz{height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
  body.pz header.top{display:none}
  body.pz main{padding:0;max-width:none;margin:0}
  .pzv{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  .phead{flex:none;margin:0;padding:6px 8px 5px;gap:8px;flex-wrap:nowrap;align-items:center}
  .pzv .phead .back{font-size:24px;line-height:1;padding:4px 8px}.phead .bt{display:none}
  .ptitle{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
  .pct{margin-left:0;color:var(--accent)}
  .hbtn.mob,.nb.mob{display:inline-flex;align-items:center;justify-content:center}
  .hbtn{width:38px;height:34px;padding:0;border-radius:10px;font-size:18px}
  .pbar{display:block;flex:none;height:3px;background:var(--line)}
  .pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6d4aff,#2f7bff,#30a46c);transition:width .35s}
  .play,.left{display:contents}
  .cluebar{flex:none;display:flex;gap:6px;align-items:center;padding:6px 8px}
  .clue{flex:1;min-width:0;margin:0;min-height:44px;display:flex;align-items:center;padding:6px 12px;font-size:16px;line-height:1.25;overflow:hidden}
  .nb{width:40px;height:44px;padding:0;border-radius:12px;font-size:20px;flex:none;touch-action:manipulation}
  .gridarea{flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;padding:2px}
  .gridwrap{overflow:visible;padding:0}
  .legend{display:none}
  .rowl{font-size:10px}
  .cell{border-radius:calc(var(--cs)*.2)}
  .cell .n{font-size:max(8px,calc(var(--cs)*.34));top:0;right:2px}
  .kbd.mob{display:grid;flex:none;gap:6px;padding:8px 4px calc(8px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);touch-action:manipulation;user-select:none;-webkit-user-select:none}
  .krow{display:flex;gap:5px;justify-content:center}
  .key{flex:1;max-width:42px;height:clamp(38px,6.2dvh,48px);padding:0;border-radius:9px;font:700 18px var(--display);background:var(--bg);box-shadow:0 2px 0 var(--line);border:1px solid var(--line);touch-action:manipulation}
  .key.wide{flex:1.55;max-width:64px}
  .key.down{transform:translateY(2px);box-shadow:none;background:var(--same)}
  .key.used{opacity:.3}
  .key.mine{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);opacity:1}
  .ptoast{bottom:calc(200px + env(safe-area-inset-bottom))}
  /* uitschuifpaneel met omschrijvingen en cijfers */
  .side{position:fixed;left:0;right:0;bottom:0;flex:none;min-width:0;max-height:82vh;max-height:82dvh;overflow:auto;background:var(--card);border-radius:22px 22px 0 0;padding:12px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.28);transform:translateY(106%);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:40;visibility:hidden}
  body.sheet .side{transform:none;visibility:visible}
  .grip.mob{display:block;width:42px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 12px}
  .backdrop.mob{display:block;position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:opacity .25s;z-index:39}
  body.sheet .backdrop{opacity:1;pointer-events:auto}
  .clues li{padding:7px 0;font-size:15px}
  .chip{font-size:15px;padding:5px 10px}
}
@media (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .pzv{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"head head" "bar bar" "grid clue" "grid kbd";column-gap:8px}
  .pzv{overflow:hidden}.phead{grid-area:head;padding-top:2px;padding-bottom:2px}.pbar{grid-area:bar}.gridarea{grid-area:grid}.cluebar{grid-area:clue}.kbd.mob{grid-area:kbd;align-self:start}
  .key{height:36px}.ptoast{bottom:16px}
  .side{max-height:92dvh;left:auto;width:min(420px,60vw);border-radius:22px 0 0 22px;top:0;bottom:0;transform:translateX(106%)}
}
.wincard .btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);padding:10px 14px;border-radius:8px;font-weight:600}
.sheetx{display:none}
@media (max-width:760px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){.sheetx.mob{display:block;position:absolute;top:8px;right:10px;border:0;background:transparent;font-size:20px;padding:6px 10px;color:var(--muted)}}

.midline{margin:0 0 10px;font-weight:600;color:#8a6500}.midline:empty{display:none}
.wincard .wmid{margin:-8px 0 14px;color:#8a6500}
.midbanner{position:fixed;left:50%;top:16%;transform:translateX(-50%);z-index:75;text-align:center;max-width:94vw;padding:14px 18px;border-radius:20px;background:var(--card);box-shadow:0 14px 50px rgba(0,0,0,.35),0 0 0 3px #f2b800;animation:bannerin .5s cubic-bezier(.2,1.4,.4,1)}
.mb-title{font:800 18px var(--display);color:#8a6500;margin-bottom:8px}
.mb-word{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.mb-word span{display:inline-block;min-width:1.5em;padding:5px 9px;border-radius:9px;background:linear-gradient(135deg,#ffe27a,#f2b800);color:#3a2a00;font:800 26px var(--display);box-shadow:0 3px 0 #b88a00;animation:tilein .55s cubic-bezier(.2,1.6,.4,1) both}
@keyframes bannerin{from{transform:translate(-50%,-30px) scale(.8);opacity:0}}
@keyframes tilein{from{transform:translateY(-28px) rotateX(90deg) scale(.6);opacity:0}}
.grid.glow .mark{animation:glowpulse .85s ease-in-out 4}
@keyframes glowpulse{50%{box-shadow:0 0 0 4px rgba(242,184,0,.5),0 0 30px 8px rgba(242,184,0,.85)}}