:root{--d0:#0b1a13;--d1:#122a1d;--d2:#1b3f2b;--d3:#2f6b4a;--cream:#f3ead2;--mut:#9dbba6;--gold:#ecb94b;--red:#e2584d;--grn:#35c27a;--ink:#3f2631}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--d0);overscroll-behavior:none}
body{font:400 18px/1.35 "Pixelify Sans",ui-monospace,monospace;color:var(--cream);user-select:none;-webkit-user-select:none}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
canvas,.spr{image-rendering:pixelated}
#cv{position:fixed;left:0;top:0;touch-action:none;cursor:pointer}
.spr{display:inline-block;flex:none}

#hud{position:fixed;top:max(10px,env(safe-area-inset-top));left:10px;right:10px;display:flex;gap:8px;align-items:center;z-index:5;pointer-events:none}
#hud>*{background:var(--d1);border:3px solid var(--d0);box-shadow:inset 0 0 0 2px var(--d3);padding:5px 10px;display:flex;align-items:center;gap:6px}
#hud b{color:var(--gold)}
#hud button{pointer-events:auto;cursor:pointer;color:var(--gold)}
#hm{margin-left:auto;opacity:.5}
#hm.on{opacity:1}
.dot{width:10px;height:10px;background:var(--gold);box-shadow:inset -2px -2px 0 #a87a1e}

#say{position:fixed;left:10px;right:10px;bottom:max(14px,env(safe-area-inset-bottom));max-width:560px;margin:0 auto;z-index:6;background:var(--d1);border:4px solid var(--d0);box-shadow:inset 0 0 0 3px var(--d3),0 6px 0 #0006;padding:14px 16px 18px;min-height:96px;cursor:pointer}
#say b{color:var(--gold);display:block;margin-bottom:4px;font-size:15px;letter-spacing:1px}
#say i{position:absolute;right:12px;bottom:6px;font-style:normal;font-size:12px;color:var(--gold);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

#title{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at 50% 45%,#0b1a13cc,#0b1a13f2 70%);cursor:pointer;text-align:center;padding:20px;transition:opacity .5s,visibility .5s}
#title.off{opacity:0;visibility:hidden}
#title h1{font-size:clamp(46px,15vw,120px);line-height:.9;font-weight:700;color:var(--cream);text-shadow:4px 4px 0 var(--d3),8px 8px 0 #0008;letter-spacing:2px}
#title h1 span{color:var(--gold)}
.tday{color:var(--gold);letter-spacing:4px;font-size:16px}
.tsub{color:var(--mut)}
.tgo{margin-top:30px;animation:blink 1.1s steps(2) infinite;letter-spacing:2px}

#win{position:fixed;inset:0;z-index:8;background:#0b1a13d9;display:flex;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
.frame{width:min(100%,520px);max-height:100%;display:flex;flex-direction:column;background:var(--d1);border:4px solid var(--d0);box-shadow:inset 0 0 0 3px var(--d3),0 10px 0 #0007;animation:popin .18s steps(3)}
@keyframes popin{from{transform:scale(.92)}}
.frame header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:3px solid var(--d3);background:var(--d2)}
.frame h2{flex:1;text-align:center;font-size:20px;font-weight:700;letter-spacing:2px;color:var(--gold)}
.frame header button{width:36px;height:36px;border:0;background:var(--d0);cursor:pointer;color:var(--cream);box-shadow:inset 0 0 0 2px var(--d3)}
#wbody{padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;user-select:text;-webkit-user-select:text}
#wbody>*{max-width:100%}

.b{border:0;cursor:pointer;background:var(--gold);color:#2a1c05;padding:10px 18px;font-weight:700;box-shadow:0 4px 0 #a87a1e,0 0 0 3px var(--d0);text-decoration:none;display:inline-block;letter-spacing:1px}
.b:active{transform:translateY(4px);box-shadow:0 0 0 #a87a1e,0 0 0 3px var(--d0)}
.b.ghost{background:var(--d2);color:var(--cream);box-shadow:0 4px 0 var(--d0),0 0 0 3px var(--d0)}
.mi{width:100%;text-align:left;border:0;cursor:pointer;background:var(--d2);box-shadow:inset 0 0 0 2px var(--d3),0 4px 0 var(--d0);padding:12px 40px 12px 12px;display:flex;align-items:center;gap:14px;position:relative;transition:transform .08s}
.mi:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px var(--gold),0 1px 0 var(--d0)}
.mi div{display:grid;gap:2px}
.mi .spr{background-color:var(--d0);outline:3px solid var(--d0)}
.mi:hover,.mi:active{background:var(--d3)}
.mi b{color:var(--gold);letter-spacing:1px}
.mi span{color:var(--mut);font-size:15px}
.mi.on::after{content:"✓";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--grn);font-size:22px}
.hint{color:var(--mut);font-size:15px}
.gmsg{min-height:24px;color:var(--gold)}
.big{font-size:54px;font-weight:700;color:var(--gold);line-height:1}
.qq{font-size:20px}
.row{display:flex;gap:10px;justify-content:center;align-items:center}
.row.wrap{flex-wrap:wrap}
input{background:var(--d0);border:0;box-shadow:inset 0 0 0 2px var(--d3);padding:10px 12px;width:150px;text-align:center;outline:0;user-select:text;-webkit-user-select:text}
input:focus{box-shadow:inset 0 0 0 2px var(--gold)}
.code{font-size:30px;letter-spacing:10px;width:190px}
.glist{list-style:none;padding:0;width:100%;display:grid;gap:5px}
.glist li{background:var(--d2);padding:7px 10px;display:flex;justify-content:space-between;gap:8px}
.glist a{color:var(--gold)}
.stat{width:100%;background:var(--d2);padding:10px;box-shadow:inset 0 0 0 2px var(--d3)}
.gcv{width:100%;max-width:480px;touch-action:none;box-shadow:0 0 0 3px var(--d0);cursor:pointer}

.wgrid{display:grid;grid-template-columns:repeat(5,48px);gap:5px}
.wgrid i,.lrow i{width:48px;height:48px;background:var(--d0);box-shadow:inset 0 0 0 2px var(--d3);display:grid;place-items:center;font-size:26px;font-weight:700;font-style:normal}
.hit{background:var(--grn)!important;color:#06261a!important;box-shadow:none!important}
.near{background:var(--gold)!important;color:#2a1c05!important;box-shadow:none!important}
.miss{background:#26332c!important;color:#6f8578!important;box-shadow:none!important}
.wkb{display:grid;gap:5px;width:100%}
.wkb div{display:flex;gap:4px;justify-content:center}
.wkb button{border:0;cursor:pointer;flex:1;max-width:40px;height:46px;background:var(--d2);padding:0;font-size:16px}
.lad{display:grid;gap:5px;justify-items:center}
.lrow{display:flex;gap:5px}
.lrow.goal i{box-shadow:inset 0 0 0 2px var(--gold);color:var(--gold)}
.dots{color:var(--mut)}

.asvg{width:210px;background:var(--d0);box-shadow:inset 0 0 0 2px var(--d3)}
.opt{width:100%;border:0;cursor:pointer;background:var(--d2);box-shadow:inset 0 0 0 2px var(--d3);padding:12px}
.opt.ok{background:var(--grn);color:#06261a}
.opt.no{background:var(--red)}
.pads{display:flex;gap:8px}
.pad{width:52px;height:84px;border:0;cursor:pointer;opacity:.55;box-shadow:inset -5px -5px 0 #0003;transition:transform .08s}
.pad.lit{opacity:1;transform:translateY(-8px)}

.clock{font-size:72px;font-weight:700;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.paper{width:100%;background:var(--cream);color:var(--ink);padding:18px;text-align:left;box-shadow:6px 6px 0 var(--d0);font-size:19px}
.paper ul{padding-left:20px;margin-top:8px;display:grid;gap:6px}
.paper .sign{text-align:right;margin-top:12px;opacity:.7}
.pre{white-space:pre-wrap}
.bubble{background:var(--cream);color:var(--ink);padding:8px 14px;min-height:40px}
.pet{margin:6px 0;animation:breathe 1s steps(2) infinite}
.pet.sad{filter:saturate(.35)}
.pet.hop{animation:hop .4s steps(4)}
@keyframes breathe{50%{transform:translateY(-4px)}}
@keyframes hop{50%{transform:translateY(-28px)}}
.bars{display:grid;gap:8px;width:100%}
.bars label{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:8px;text-align:left;color:var(--mut);font-size:15px}
.bars i{height:14px;background:var(--d0);box-shadow:inset 0 0 0 2px var(--d3)}
.bars u{display:block;height:100%;background:var(--gold);transition:width .3s steps(5)}
.keys{display:flex;gap:4px;width:100%;justify-content:center}
.keys button{flex:1;max-width:48px;height:130px;border:0;cursor:pointer;background:var(--cream);box-shadow:inset 0 -10px 0 #cfc4a4}
.keys button:active{background:var(--gold);box-shadow:none}
.drow{display:flex;gap:10px;width:100%;align-items:center}
.drow .b{flex:1}
.tick{width:44px;height:44px;border:0;cursor:pointer;background:var(--d0);box-shadow:inset 0 0 0 2px var(--d3);color:transparent;font-size:22px}
.tick.on{color:var(--grn);box-shadow:inset 0 0 0 2px var(--grn)}
div.tick{width:100%;height:auto;background:none;box-shadow:none;color:inherit;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;cursor:default}
div.tick div{background:var(--d2);padding:10px 2px;box-shadow:inset 0 0 0 2px var(--d3)}
div.tick b{display:block;font-size:30px;color:var(--gold);font-variant-numeric:tabular-nums}
div.tick span{font-size:13px;color:var(--mut)}
.qrow{width:100%;display:flex;gap:10px;align-items:center;background:var(--d2);padding:12px;text-align:left;box-shadow:inset 0 0 0 2px var(--d3)}
.qrow b{flex:1;font-weight:400}
.qrow span{color:var(--gold)}
.qrow.on{opacity:.6}
.qrow.on b{text-decoration:line-through}
.qrow.on span:first-child{color:var(--grn)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;cursor:pointer;box-shadow:0 0 0 3px var(--d0)}
.full{width:100%;box-shadow:0 0 0 3px var(--d0)}

#toast{position:fixed;left:50%;top:max(62px,calc(env(safe-area-inset-top) + 52px));transform:translate(-50%,-140px);background:var(--gold);color:#2a1c05;padding:8px 16px;font-weight:700;z-index:20;box-shadow:0 0 0 3px var(--d0),0 6px 0 #0006;transition:transform .2s steps(4);white-space:nowrap;max-width:94vw}
#toast.on{transform:translate(-50%,0)}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}

.sd{display:grid;grid-template-columns:repeat(9,1fr);width:min(100%,414px);background:var(--d3);gap:1px;border:3px solid var(--gold)}
.sdc{aspect-ratio:1;border:0;cursor:pointer;background:var(--d0);font-size:22px;padding:0;color:var(--cream)}
.sdc:nth-child(3n):not(:nth-child(9n)){margin-right:3px}
.sdc:nth-child(n+19):nth-child(-n+27),.sdc:nth-child(n+46):nth-child(-n+54){margin-bottom:3px}
.sdc.fx{color:var(--gold);font-weight:700}
.sdc.peer{background:#132e20}
.sdc.same{background:#2a5c40}
.sdc.sel{background:var(--gold);color:#2a1c05}
.sdc.bad{color:var(--red)}
.sdp .dim{opacity:.3}
.sdp{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:min(100%,396px)}
.sdp .b{padding:10px 0}
.vio{display:grid;grid-template-columns:repeat(4,1fr);gap:0 14px;width:min(100%,300px);background:#6b3f24;padding:10px 16px;box-shadow:0 0 0 3px var(--d0)}
.vk{height:54px;border:0;cursor:pointer;background:linear-gradient(90deg,#0000 calc(50% - 2px),#e9dfc4 calc(50% - 2px),#e9dfc4 calc(50% + 2px),#0000 calc(50% + 2px));border-bottom:2px solid #4d2c18;color:var(--gold);font-weight:700;touch-action:none;text-shadow:0 0 4px #000,0 0 4px #000}
.vk.open{background-color:#4d2c18}
.vk.on{background-color:#ecb94b55}
.fits{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.fit{border:0;cursor:pointer;background:var(--d2);box-shadow:inset 0 0 0 2px var(--d3);padding:8px 2px;display:grid;justify-items:center;gap:4px;font-size:13px;color:var(--mut)}
.fit.on{box-shadow:inset 0 0 0 3px var(--gold);color:var(--gold)}
.gar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.plot{border:0;cursor:pointer;background:#7a5230;box-shadow:inset 0 0 0 3px #5a3a20;padding:8px 2px;display:grid;justify-items:center;gap:4px;font-size:13px;color:var(--cream)}
textarea{font:inherit;color:inherit;width:100%;background:var(--d0);border:0;box-shadow:inset 0 0 0 2px var(--d3);padding:10px;outline:0;resize:none;user-select:text;-webkit-user-select:text}
@media (max-width:400px){#hud{gap:5px;font-size:15px}#hud>*{padding:5px 7px}}
.wgrid i.fill{box-shadow:inset 0 0 0 2px var(--mut);animation:pop .08s steps(2)}
.flip{animation:flip .34s steps(6)}
.shake{animation:shake .3s steps(6)}
@keyframes pop{50%{transform:scale(1.12)}}
@keyframes flip{0%{transform:scaleY(1)}50%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.wkb button.wide{max-width:58px;flex:1.6;font-size:20px}
.wstat{width:100%;display:grid;gap:10px;justify-items:center}
.wstat:empty{display:none}
.dist{width:100%;display:grid;gap:4px}
.dist div{display:flex;gap:8px;align-items:center}
.dist span{width:14px;color:var(--mut)}
.dist u{background:var(--d3);text-decoration:none;text-align:right;padding:1px 6px;min-width:22px;font-size:14px}
.glist li .sw{width:14px;height:14px;flex:none;align-self:center}
.glist li span:first-of-type{margin-right:auto}
.glist .g{color:var(--grn)}
.asvg{width:230px}
.lrow i{animation:pop .1s steps(2)}
.fit>span:only-child{font-size:22px;color:var(--d3);padding:12px 0}
div.fit{cursor:default}
.jl{width:100%;display:grid;gap:6px}
.jt{padding:10px 12px;justify-content:space-between;box-shadow:inset 0 0 0 2px var(--d3)}
.jt b{font-weight:400;color:var(--cream)}
.jbar{width:100%;height:14px;background:var(--d0);box-shadow:inset 0 0 0 2px var(--d3);cursor:pointer}
.jbar i{display:block;height:100%;background:var(--gold)}
.sect{width:100%;text-align:left;color:var(--gold);letter-spacing:2px;border-bottom:2px solid var(--d3);padding-bottom:2px;margin-top:6px}
.upl{width:100%;display:grid;gap:8px;justify-items:center}
.file{width:100%;font-size:14px}