:root{--accent:#0E5A73;--tint-l:#E3EEF1;--bg:var(--tint-l);--card:#fff;--ink:#0B1D5C;--mut:#3F527A;--line:#C9D7EA;--ok:#2E7D4F}

#app{max-width:34rem;margin:0 auto;padding:1.5rem 1rem 3rem}
#app h1,#app h2,.gaade,.got-letter,.tile,.letter,.dots span,.tiles-l span{font-family:Fredoka,system-ui,sans-serif}
#app h1,#app .h1{font-family:Fredoka,sans-serif;font-size:2.1rem;line-height:1.05;margin:.2rem 0 .5rem}#app h2{font-size:1.3rem;margin:.2rem 0 .5rem}
.hero{padding:1.25rem 0 .75rem}.hero p{color:var(--mut);margin:0}.hero.small h1{font-size:1.8rem}
.kicker{color:var(--accent);font-weight:700;font-size:.9rem;margin:0 0 .35rem}
.card{background:var(--card);border-radius:18px;padding:1.1rem;margin:0 0 .9rem;border:1px solid var(--line)}
.form label{display:block;font-weight:600;font-size:.95rem;margin:.8rem 0 0}
input,select{display:block;width:100%;margin-top:.35rem;font:inherit;padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--accent)}
fieldset{border:0;padding:0;margin:.9rem 0 0}legend{font-weight:600;font-size:.95rem;margin-bottom:.4rem}
.row{display:flex;gap:.6rem;align-items:flex-end}.row>*{flex:1}.row>.primary{flex:0 0 auto;margin-top:0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.tile{border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;padding:.6rem .3rem;font-size:1rem;font-weight:600;cursor:pointer}
.tile span{display:block;font-size:1.7rem;line-height:1.2}.tile.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.seg{display:flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}.seg label{flex:1;margin:0!important}
.seg input{position:absolute;opacity:0;width:1px;height:1px}.seg span{display:block;text-align:center;padding:.6rem .2rem;font-weight:600;font-size:.9rem;cursor:pointer}
.seg input:checked+span{background:var(--accent);color:#fff}.seg input:focus-visible+span{outline:3px solid var(--accent);outline-offset:-3px}
.check{display:flex!important;gap:.7rem;align-items:flex-start;font-weight:400!important}.check input{width:1.3rem;height:1.3rem;margin:.2rem 0 0;flex:none;accent-color:var(--accent)}
details{margin-top:1rem}summary{font-weight:600;cursor:pointer;color:var(--accent)}
button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.primary{display:block;width:100%;margin-top:1.1rem;background:var(--accent);color:#fff;border:0;border-radius:14px;padding:.95rem 1.2rem;font-weight:700;font-size:1.05rem}
.row .primary{width:auto}
.ghost{display:block;width:100%;background:transparent;color:var(--ink);border:1.5px solid var(--line);border-radius:14px;padding:.8rem 1rem;font-weight:600}
.ghost.small{display:inline-block;width:auto;padding:.4rem .8rem;font-size:.9rem;margin-top:.6rem}
.link{background:none;border:0;color:var(--mut);text-decoration:underline;padding:.5rem 0;font-size:.9rem;display:block;margin:0 auto}
.stack{display:grid;gap:.6rem}.stack .primary{margin-top:0}
.err,.msg{color:#B3362B;font-weight:600;min-height:1.2em;margin:.5rem 0 0}
.hidelist{list-style:none;padding:0;margin:0 0 .9rem;display:grid;gap:.5rem}
.hidelist li{display:flex;gap:.9rem;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.6rem .9rem}
.letter{flex:none;width:2.8rem;height:2.8rem;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:1.6rem;font-weight:700}
.hidelist small{color:var(--mut)}
.dots{display:flex;gap:.4rem;justify-content:center;margin:.4rem 0 1rem;flex-wrap:wrap}
.dots span{width:2.2rem;height:2.2rem;border-radius:50%;border:2px dashed var(--line);display:grid;place-items:center;font-weight:700;font-size:1.1rem}
.dots .got{background:var(--accent);border:2px solid var(--accent);color:#fff}.dots .now{border:2px solid var(--accent)}
.riddle{border:2px dashed var(--accent)}.lead{color:var(--mut);margin:.2rem 0}
.gaade{font-size:1.55rem;line-height:1.3;font-weight:600;margin:.5rem 0}
.big{font-size:1.15rem}
.bonus{border-top:1px solid var(--line);padding-top:.6rem}
.unlock label{display:block;text-align:center;font-weight:600}.letterbox{width:4.5rem!important;height:4.5rem;margin:.8rem auto 0!important;text-align:center;font-size:2.4rem;font-weight:700;text-transform:uppercase;border-width:2px!important;border-style:dashed!important;border-color:var(--accent)!important;padding:0!important}.letterbox::placeholder{color:var(--line)}.unlock .msg{text-align:center}
.unlock #w{text-transform:uppercase;font-weight:700;letter-spacing:.1em}
.got-letter{font-size:3.4rem;line-height:1;margin:.2rem 0;color:var(--accent);text-align:center}.found{text-align:center}
.tiles-l{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center;margin:.8rem 0}
.tiles-l span{width:2.3rem;height:2.7rem;background:var(--accent);color:#fff;border-radius:8px;display:grid;place-items:center;font-size:1.5rem;font-weight:700}
.diplom{border:3px double var(--accent);text-align:center}
.reveal{animation:pop .45s ease-out}@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none}body{transition:none}}

.note{color:var(--mut);font-size:.9rem;margin:.2rem 0 .4rem}
.places{display:grid;grid-template-columns:1fr 1fr;gap:.2rem .6rem;margin-top:.4rem}.pl-opt{display:flex!important;gap:.4rem;align-items:center;font-weight:400!important;margin:.2rem 0!important;font-size:.9rem}
.pl-opt input{width:1.1rem!important;height:1.1rem;margin:0!important;flex:none;accent-color:var(--accent)}.tip{color:#9A5B00}
#print{display:none;color:#111}
@page{size:A4;margin:12mm}
#print .page{page-break-after:always;break-after:page;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
#print .page:last-child{page-break-after:auto;break-after:auto}
#print .ph{font:700 26pt/1.1 Fredoka,system-ui,sans-serif;color:var(--accent);margin:0 0 2mm}#print .psub{color:#555;margin:0 0 6mm}
#print .ph2{font:700 14pt Fredoka,system-ui,sans-serif;margin:7mm 0 2mm}
#print .ptab{width:100%;border-collapse:collapse}#print .ptab th,.ptab td{border-bottom:1px solid #ccc;padding:2.5mm 2mm;text-align:left}
#print .ptab .tl{font:700 18pt Fredoka,system-ui,sans-serif;color:var(--accent)}#print .ptab .tb{width:10mm}#print .ptab .tb:after{content:"";display:inline-block;width:6mm;height:6mm;border:1.5px solid #999;border-radius:1mm}
#print .halves{height:271mm;display:flex;flex-direction:column}
#print .seddel{flex:1;border:2px dashed #999;border-radius:4mm;padding:7mm 8mm;margin-bottom:4mm;display:flex;flex-direction:column;overflow:hidden}
#print .seddel:last-child{margin-bottom:0}
#print .pk{color:var(--accent);font-weight:700;font-size:10.5pt;margin:3mm 0 1mm}
#print .pintro{font-size:13pt;margin:0 0 2mm}#print .plead{color:#555;margin:0}
#print .pg{font:600 17pt/1.25 Fredoka,system-ui,sans-serif;margin:1mm 0}#print .po{font-size:13pt;margin:0}
#print .pb{font-size:10pt;color:#444;border-top:1px solid #ddd;padding-top:2mm;margin-top:3mm}
#print .ptop{display:flex;gap:5mm;align-items:center}#print .ptop>div:nth-child(2){flex:1}
#print .pl{width:28mm;height:28mm;border-radius:4mm;background:var(--accent);color:#fff;display:grid;place-items:center;font:700 44pt/1 Fredoka,system-ui,sans-serif}
#print .psmall{font-size:10pt;color:#555;margin:0}
#print .pqr{width:26mm;text-align:center}#print .pqr svg{width:26mm;height:26mm;display:block}#print .pqr small{font-size:7pt;color:#666}
#print .pfoot{margin-top:auto;font-size:9pt;color:#777;padding-top:3mm}
#print .boxes{display:flex;gap:2mm;margin-top:3mm}#print .boxes span{width:14mm;height:16mm;border:2px solid var(--accent);border-radius:2mm}
#print .diplomp{height:271mm;display:flex}
#print .dframe{flex:1;border:4mm double var(--accent);border-radius:6mm;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:15mm}
#print .demoji{font-size:48pt;margin:0}#print .dframe h1{font:700 48pt Fredoka,system-ui,sans-serif;color:var(--accent);margin:4mm 0}
#print .dtext{font-size:16pt;max-width:140mm}#print .dword{font:700 28pt Fredoka,system-ui,sans-serif;letter-spacing:.15em;margin:8mm 0}
#print .dsign{border-top:1px solid #999;padding-top:2mm;min-width:70mm;margin-top:10mm;color:#555}
body.pv #print{display:block}
@media screen{
 body.pv{background:#9aa3a9} body.pv #print{padding:0 .75rem 2rem}
 body.pv #print .page{background:#fff;color:#111;border-radius:6px;padding:1rem;margin:0 auto 1rem;max-width:210mm;box-shadow:0 2px 10px rgba(0,0,0,.25);overflow-x:auto}
 body.pv .pvbar{background:var(--card);border-radius:14px;padding:.8rem;margin:.5rem 0 1rem}
 #print .halves,#print .diplomp{height:auto} #print .seddel{min-height:110mm;margin-bottom:1rem} #print .dframe{min-height:160mm}
 #print .ptab th,#print .ptab td{padding:2mm 1.5mm}}
@media print{
 body{background:#fff!important;color:#111;font-size:12pt}
 #app{display:none!important} #print{display:block!important}
 *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 #print .page{padding:0;margin:0;box-shadow:none;border-radius:0}
}


/* ---------- v3: posttyper, kode, kuvert ---------- */
.center{text-align:center}
.post-no{text-align:center;color:var(--mut);font-weight:700;font-size:.9rem;margin:-.4rem 0 .6rem}
.twist{background:#FFF1C2;border:2px solid #E0A800;border-radius:14px;padding:.8rem 1rem;margin:0 0 .9rem;font-weight:600}
.twist strong{color:#8A5A00}
.ikon{width:3rem;height:3rem;display:inline-block;vertical-align:middle}
.ikon.stor{width:9rem;height:9rem}
.mini{width:2rem;height:2rem;flex:none}
.billede{text-align:center;margin:.4rem 0}
.kodetal{font-family:Fredoka,sans-serif;font-weight:700;font-size:1.7rem;letter-spacing:.04em;text-align:center;color:var(--accent);margin:.6rem 0;word-break:break-word}
.hjul summary{color:var(--accent)}
.kodehjul{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.6rem,1fr));gap:.3rem;margin-top:.6rem}
.kodehjul span{border:1.5px solid var(--line);border-radius:8px;text-align:center;padding:.2rem 0;font-size:.85rem;line-height:1.2}
.kodehjul b{display:block;font-family:Fredoka,sans-serif;font-size:1.1rem;color:var(--ink)}
.spejl{transform:scaleX(-1);display:block}
.spejl.vendt{transform:none}
.brikker{display:grid;gap:.5rem;margin:.6rem 0}
.brikker.bild{grid-template-columns:repeat(3,1fr)}
.brik{border:2px dashed var(--accent);background:var(--bg);border-radius:12px;padding:.7rem;font:600 1.05rem/1.35 Fredoka,sans-serif;color:var(--ink);cursor:pointer;min-height:3rem;text-align:left}
.brikker.bild .brik{padding:.3rem;display:flex;justify-content:center;overflow:hidden}
.brik.ok{background:var(--accent);color:#fff;border-style:solid;opacity:.85}
.brik.nej{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.slice{display:block;width:3.2rem;height:9.6rem;overflow:hidden;position:relative}
.slice svg{position:absolute;top:0;width:9.6rem;height:9.6rem}
.slice.s0 svg{left:0}.slice.s1 svg{left:-3.2rem}.slice.s2 svg{left:-6.4rem}
.skrab{position:relative;height:6rem;border-radius:14px;overflow:hidden;background:#fff;border:2px dashed var(--accent);margin:.6rem 0;touch-action:none}
.skrab-ord{position:absolute;inset:0;display:grid;place-items:center;font:700 2.2rem Fredoka,sans-serif;letter-spacing:.12em;color:var(--accent)}
.skrab canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.cifre-row{display:flex;gap:.4rem;justify-content:center;margin:-.4rem 0 1rem}
.cifre-row span{min-width:2.2rem;height:2.2rem;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;font:700 1.1rem Fredoka,sans-serif;background:var(--card)}
.cifre-row .got{background:#FFC700;border-color:#0B1D5C;color:#0B1D5C}
.kuvert-card,.nogle{display:flex;gap:.9rem;align-items:flex-start}
.nogle{font-size:1.4rem}.nogle div{font-size:1rem}
.kodeopg .letterbox{margin-top:.6rem!important}
.stjerner{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin:.6rem 0}
.kode-in{display:flex;gap:.6rem;justify-content:center}
.kode-in .letterbox{margin:0!important}
.kuvert-open{text-align:center;border:3px double var(--accent)}
.rules{margin:.4rem 0 0;padding-left:1.2rem}.rules li{margin:.25rem 0}
.mat,.prep{margin:.3rem 0 0;padding-left:1.2rem}.mat li,.prep li{margin:.3rem 0}
.list-h{font-size:1.15rem;margin:1rem 0 .5rem}
.skat-li{border:2px solid #0B1D5C!important}.skat-li .letter{background:#FFC700}
.facit{text-align:center}
@media (prefers-reduced-motion:reduce){.brik.nej{animation:none}}

/* Print v3 */
#print .ptwist{background:#FFF1C2;border:1.5px solid #E0A800;border-radius:2mm;padding:2mm 3mm;margin:2mm 0;font-size:11pt}
#print .pbillede{text-align:center}
#print .pikon{width:32mm;height:32mm}
#print .pikon.stor{width:45mm;height:45mm}
#print .pmini{width:7mm;height:7mm}
#print .pkode{font:700 20pt Fredoka,sans-serif;letter-spacing:.06em;color:var(--accent);margin:2mm 0}
#print .pspejl{transform:scaleX(-1)}
#print .pusynlig{height:22mm;border:2px dashed #999;border-radius:3mm;margin-top:2mm}
#print .ppuslespil{display:grid;gap:2mm;margin-top:2mm}
#print .ppuslespil.bild{grid-template-columns:repeat(3,1fr)}
#print .pbrik{border:2px dashed #999;padding:3mm;font:600 13pt/1.3 Fredoka,sans-serif}
#print .ppuslespil.bild .pbrik{padding:1mm;display:flex;justify-content:center;overflow:hidden}
#print .ppuslespil .slice{width:15mm;height:45mm}
#print .ppuslespil .slice svg{width:45mm;height:45mm}
#print .ppuslespil .slice.s1 svg{left:-15mm}#print .ppuslespil .slice.s2 svg{left:-30mm}
#print .pkodehjul{display:grid;grid-template-columns:repeat(15,1fr);gap:1mm;margin-top:3mm;font-size:8pt;text-align:center}
#print .pkodehjul span{border:1px solid #bbb;border-radius:1mm;padding:.5mm 0}
#print .pkodehjul b{display:block;font:700 11pt Fredoka,sans-serif}
#print .pnogle{font-weight:700;font-size:12pt;margin:2mm 0}
#print .pkodeopg{border:2px solid var(--accent);border-radius:3mm;padding:2mm 3mm;margin:3mm 0 1mm}
#print .pkodeopg p{margin:0 0 1mm}
#print .pstjerner{display:flex;gap:2mm;flex-wrap:wrap}
#print .boxes.inline{display:inline-flex;margin:0 2mm 0 0;vertical-align:middle}
#print .boxes.inline span{width:7mm;height:8mm}
#print .boxes.kode span{border-color:#E0A800}
#print .kuvert-ud{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4mm}
#print .pkuvert{font:700 30pt Fredoka,sans-serif;color:var(--accent);margin:0;letter-spacing:.05em}
#print .center{text-align:center}
#print .boxes.center{justify-content:center}
/* Print v3: kompakte sedler, så alt kan være på en halv side */
#print .seddel{padding:5mm 7mm}
#print .pl{width:20mm;height:20mm;font-size:32pt}
#print .pqr{width:20mm}#print .pqr svg{width:20mm;height:20mm}
#print .pk{margin:2mm 0 .5mm}
#print .pikon{width:24mm;height:24mm}
#print .pikon.stor{width:40mm;height:40mm}
#print .pbillede .plead{margin:0}
#print .ppuslespil .slice{width:12mm;height:36mm}
#print .ppuslespil .slice svg{width:36mm;height:36mm;position:absolute;top:0}
#print .ppuslespil .slice.s0 svg{left:0}#print .ppuslespil .slice.s1 svg{left:-12mm}#print .ppuslespil .slice.s2 svg{left:-24mm}
#print .pbrik{padding:2mm 3mm;font-size:12pt}
#print .pg{font-size:15pt}
#print .pkodeopg{margin:2mm 0 1mm;padding:1.5mm 3mm}
#print .pmini{width:6mm;height:6mm}
#print .pusynlig{height:16mm}
#print .full .seddel{flex:1}
#print .full .ppuslespil .slice{width:20mm;height:60mm}
#print .full .ppuslespil .slice svg{width:60mm;height:60mm}
#print .full .ppuslespil .slice.s1 svg{left:-20mm}#print .full .ppuslespil .slice.s2 svg{left:-40mm}
#print .full .pbrik{padding:5mm;font-size:15pt}
.slice svg,#print .slice svg{max-width:none!important}
/* Print v3.1: kompakt voksenark på én side + mærkede felter */
#print .psaml{display:flex;align-items:center;gap:2mm;flex-wrap:wrap;margin:1mm 0 2mm;font-size:9pt;font-weight:700}
#print .page:first-child ul,#print .page:first-child ol{margin:1mm 0 2mm;font-size:10pt}
#print .page:first-child li{margin:.5mm 0}
#print .page:first-child .ph2{margin:3mm 0 1mm;font-size:12pt}
#print .page:first-child .ptab th,#print .page:first-child .ptab td{padding:1.4mm 2mm;font-size:10pt}
#print .page:first-child .ptab small{font-size:8pt}