: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}
}