:root{--p:#6c5ce7;--ok:#00b894;--bad:#e17055;--warn:#fdcb6e;--ink:#2d3436;--muted:#8a86a8;--bg:#f4f1ff;--card:#fff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:linear-gradient(#efeaff,#fdf1f7);background-attachment:fixed;color:var(--ink);font-size:18px;-webkit-user-select:none;user-select:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
#app{max-width:560px;margin:0 auto;min-height:100vh;padding:calc(10px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom))}
h1{font-size:1.5em;margin:.4em 0}h2{margin:0;font-size:1.3em}h3{margin:.2em 0 .4em}
small,.muted{color:var(--muted);font-size:.8em}
.grow{flex:1}.center{text-align:center}.row{display:flex;gap:10px;margin-top:12px}.row>*{flex:1}
.col{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.hide{visibility:hidden}
.card{background:var(--card);border-radius:22px;padding:16px;box-shadow:0 4px 0 #e2dcfb;margin:12px 0}
.btn{border:0;border-radius:16px;padding:14px 16px;font:inherit;font-weight:700;color:#fff;background:var(--p);box-shadow:0 4px 0 rgba(0,0,0,.22);cursor:pointer;display:block;text-align:center}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.22)}
.btn.ok{background:var(--ok)}.btn.bad{background:var(--bad)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 4px 0 #ddd6f7}
.btn.opt{background:#fff;color:var(--ink);box-shadow:0 4px 0 #ddd6f7;font-size:1.05em}
.btn.opt.ok{background:var(--ok);color:#fff}.btn.opt.bad{background:var(--bad);color:#fff}
.btn:disabled{opacity:.5}
.link{background:none;border:0;color:var(--p);font:inherit;font-weight:600;padding:12px;width:100%;cursor:pointer}
.top{display:flex;align-items:center;gap:10px}
@keyframes bob{50%{transform:translateY(-8px)}}
.bar{height:12px;background:#e2dcfb;border-radius:8px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#a29bfe,var(--p));border-radius:8px;transition:width .3s}
.chips{display:flex;gap:6px}
.chip{background:#fff;border:0;border-radius:20px;padding:8px 12px;font:inherit;font-weight:700;box-shadow:0 2px 0 #ddd6f7;cursor:pointer}
.goal{display:flex;align-items:center;gap:14px}
.ring{width:72px;height:72px;border-radius:50%;background:conic-gradient(var(--ok) calc(var(--pc)*1%),#e6e2ff 0);display:grid;place-items:center;flex:none}
.ring span{background:#fff;border-radius:50%;width:56px;height:56px;display:grid;place-items:center;font-size:.8em;font-weight:800}
.deckpill{width:100%;text-align:left;background:#fff;border:0;border-radius:18px;padding:12px 14px;font:inherit;box-shadow:0 3px 0 #ddd6f7;cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.tile{border:0;border-radius:22px;padding:16px 8px;color:#fff;background:var(--c);box-shadow:0 5px 0 rgba(0,0,0,.2);font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.tile:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.tile b{font-size:1.05em}.tile span{font-size:2.2em}.tile small{color:rgba(255,255,255,.85);font-size:.72em}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{width:76px;text-align:center;cursor:pointer}.badge span{font-size:2em;display:block}.badge small{font-size:.65em;line-height:1.1;display:block}
.badge.lock{filter:grayscale(1);opacity:.35}
.ghead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.x{border:0;background:#fff;border-radius:50%;width:40px;height:40px;font-size:1.1em;box-shadow:0 2px 0 #ddd6f7;cursor:pointer}
.combo{min-width:48px;font-weight:800;color:var(--bad)}
.big{font-size:clamp(28px,8vw,42px);font-weight:800;line-height:1.15;word-break:break-word}
.tag{color:var(--muted);font-size:.85em;margin-bottom:6px}
.ex{margin-top:10px;font-style:italic;color:var(--muted);font-size:.85em}
.spk{border:0;background:#efeaff;border-radius:50%;width:44px;height:44px;font-size:1.3em;margin:8px 0 0;cursor:pointer}
.flip{perspective:900px;height:280px;margin:12px 0;cursor:pointer}
.inner{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.flip.on .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;margin:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.face.back{transform:rotateY(180deg);background:#f3fffb}
.inp{width:100%;font:inherit;font-size:1.3em;padding:14px;border-radius:16px;border:3px solid #ddd6f7;text-align:center;outline:none;margin-top:6px}
.inp:focus{border-color:var(--p)}
.blanks{font-family:ui-monospace,Menlo,monospace;letter-spacing:.15em;font-size:1.4em;margin-top:10px;color:var(--p);white-space:pre-wrap}
.fb{border-radius:16px;padding:12px;margin:10px 0;text-align:center;font-weight:700}
.fb.good{background:#d9f7ee;color:#007a62}.fb.badf{background:#ffe6df;color:#b0391b}.fb.near{background:#fff3d0;color:#8a6200}
.gal{width:62%;max-width:220px;height:auto}
.lives{letter-spacing:2px;font-size:.9em}
.word{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
.ch{width:30px;height:40px;border-bottom:4px solid var(--p);font-size:1.7em;font-weight:800;text-transform:uppercase;line-height:40px}
.ch.sp{border:0;width:16px}.ch.rev{color:var(--bad)}
.keys{margin-top:8px}.krow{display:flex;justify-content:center;gap:5px;margin-bottom:6px}
.key{flex:1;max-width:44px;height:48px;border:0;border-radius:10px;background:#fff;font:inherit;font-weight:800;text-transform:uppercase;box-shadow:0 3px 0 #ddd6f7;cursor:pointer;padding:0}
.key.hit{background:var(--ok);color:#fff;box-shadow:none}.key.miss{background:#ddd;color:#999;box-shadow:none}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.mc{min-height:92px;border:0;border-radius:16px;background:var(--p);color:#fff;font:inherit;font-weight:700;font-size:.95em;padding:6px;box-shadow:0 4px 0 rgba(0,0,0,.2);cursor:pointer;word-break:break-word}
.mc.open{background:#fff;color:var(--ink);box-shadow:0 4px 0 #ddd6f7}.mc.done{background:#d9f7ee;color:#007a62;box-shadow:none}
.stars{font-size:2.6em;letter-spacing:4px}
.pbar{position:relative;height:16px;border-radius:9px;background:#e9e5fb;overflow:hidden;margin:6px 0 3px}.pbar i{display:block;height:100%;background:linear-gradient(90deg,#a29bfe,#6c5ce7);border-radius:9px}.pbar b{position:absolute;inset:0;text-align:center;font-size:.72em;line-height:16px;color:#2d3436}
.sks{display:flex;gap:10px;flex-wrap:wrap;font-size:.76em;color:#636e72}.lft small.muted{display:block}
mark{background:#ffe066;border-radius:4px;padding:0 2px}.diff{font-size:.9em}
.ch2{display:inline-block;padding:8px 14px;margin:4px;border-radius:12px;background:#ede9ff;font-size:1.7em;font-weight:700;border:0;color:var(--ink)}.ch2.pt{background:#ffe066}.ch2.sp{background:none;padding:8px 4px}.btnp{cursor:pointer;box-shadow:0 3px 0 #cfc8f5}
.asm{min-height:64px;border:3px dashed #cfc8f5;border-radius:16px;margin:10px 0;padding:4px}.parts{margin:8px 0}.dots{display:flex;gap:6px;justify-content:center;margin:6px 0 12px}.dots i{width:10px;height:10px;border-radius:50%;background:#e2dcfb}.dots i.on{background:var(--p)}
.rbar{display:flex;align-items:flex-end;gap:6px;height:70px;margin:8px 0}.rbar div{flex:1;text-align:center;font-size:.7em}.rbar i{display:block;background:linear-gradient(#a29bfe,#6c5ce7);border-radius:6px 6px 0 0;min-height:3px;margin:0 auto 2px;width:70%}
.gblock{margin-bottom:6px}.ghd{display:flex;align-items:center;gap:6px;padding:8px;background:#f3f0ff}.gbody{margin-left:14px;border-left:3px solid #e2dcfb;padding-left:8px}
.deck{display:flex;align-items:center;gap:6px;padding:8px}
.deck.sel{outline:3px solid var(--p)}
.lft{text-align:left;background:none;border:0;font:inherit;padding:8px;cursor:pointer;display:flex;flex-direction:column}
.mini{border:0;background:#efeaff;border-radius:12px;width:42px;height:42px;font-size:1.1em;cursor:pointer}
textarea,select,.txt{width:100%;font:inherit;font-size:.9em;padding:10px;border-radius:12px;border:2px solid #ddd6f7;margin:6px 0}
textarea{min-height:70px}
.wrow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #eee;font-size:.9em}
.wrow span{flex:1}.wrow b{color:var(--p)}
.seg{display:flex;gap:6px;margin:6px 0}.seg .chip{flex:1;font-size:.8em}.seg .on{background:var(--p);color:#fff}
#toast{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translate(-50%,30px);background:#2d3436;color:#fff;padding:12px 18px;border-radius:20px;opacity:0;transition:.25s;pointer-events:none;z-index:60;max-width:90%;text-align:center;font-size:.9em}
#toast.show{opacity:1;transform:translate(-50%,0)}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.confetti span{position:absolute;top:-40px;animation:fall 2.6s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg)}}
.shake{animation:shake .35s}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.brand{font-size:2.2em;font-weight:900;color:var(--p);text-align:center;letter-spacing:1px}
.pet{width:100%;height:auto;display:block;animation:bob 2.4s ease-in-out infinite;transform-origin:50% 100%}
.blink{transform-box:fill-box;transform-origin:center;animation:blink 4s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.petcard{display:flex;align-items:center;gap:12px;width:100%;border:0;font:inherit;text-align:left;cursor:pointer;color:inherit}
.petcard .pw{width:100px;flex:none}.bub{margin-top:6px;background:#f3f0ff;border-radius:12px;padding:6px 10px;font-size:.78em}
.scene{container-type:inline-size;position:relative;height:300px;border-radius:24px;overflow:hidden;box-shadow:0 4px 0 #e2dcfb;margin:10px 0}
.scene .wall{position:absolute;inset:0 0 30% 0}.scene .flr{position:absolute;inset:70% 0 0 0}
.fi{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;margin:0;line-height:1;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;color:#000}.fi:active{cursor:grabbing}
.fi.r-on{animation:var(--ra) .9s ease-out}.fi[data-r=bounce]{--ra:r-bounce}.fi[data-r=wiggle]{--ra:r-wiggle}.fi[data-r=swing]{--ra:r-swing}.fi[data-r=spin]{--ra:r-spin}.fi[data-r=flick]{--ra:r-flick}.fi[data-r=glow]{--ra:r-glow}.fi[data-r=fly]{--ra:r-fly}.fi[data-r=shake]{--ra:r-shake}
@keyframes r-bounce{30%{translate:0 -16px}55%{translate:0 0}75%{translate:0 -6px}}@keyframes r-wiggle{20%{rotate:-14deg}40%{rotate:12deg}60%{rotate:-8deg}80%{rotate:5deg}}@keyframes r-swing{25%{rotate:20deg}75%{rotate:-20deg}}@keyframes r-spin{to{rotate:360deg}}
@keyframes r-flick{0%,50%,100%{opacity:1;scale:1}25%,75%{opacity:.3;scale:1.2}}@keyframes r-glow{50%{scale:1.4;filter:drop-shadow(0 0 10px gold)}}@keyframes r-fly{40%{translate:0 -44px;scale:1.25}100%{translate:0 0}}@keyframes r-shake{25%{translate:-7px 0}75%{translate:7px 0}}
.part{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:4;font-size:20px;animation:partup 1.1s ease-out forwards}@keyframes partup{to{translate:var(--dx,0) -52px;opacity:0}}
.reveal{height:210px;position:relative;overflow:hidden}.eg1,.eg2{position:absolute;left:50%;top:18px;font-size:84px;transform:translateX(-50%)}.eg1{animation:egshake 1.3s forwards}.eg2{opacity:0;animation:egpop .6s 1.3s forwards}.eg3{position:absolute;left:0;right:0;bottom:12px;opacity:0;animation:egfade .5s 1.7s forwards}
@keyframes egshake{0%,100%{transform:translateX(-50%) rotate(0)}10%{transform:translateX(-50%) rotate(-14deg)}20%{transform:translateX(-50%) rotate(14deg)}30%{transform:translateX(-50%) rotate(-18deg)}40%{transform:translateX(-50%) rotate(18deg)}60%{transform:translateX(-50%) scale(1.15)}85%{transform:translateX(-50%) scale(1.3);opacity:1}100%{transform:translateX(-50%) scale(1.6);opacity:0}}
@keyframes egpop{from{opacity:0;transform:translateX(-50%) scale(.2)}to{opacity:1;transform:translateX(-50%) scale(1)}}@keyframes egfade{to{opacity:1}}
.coll{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;margin-top:10px}.cc{border:3px solid;border-radius:14px;padding:6px 2px;text-align:center;background:#fff}.cc span{font-size:30px;display:block}.cc.no{opacity:.55;background:#f1f3f5}.cc small{font-size:.66em}
.rw{display:inline-block;margin:2px 4px 2px 0;padding:4px 8px;border-radius:12px;background:#f1f3f5;font-size:.82em}.rw.got{background:#e9fbf3}
.surp{background:#fff9db;border-radius:12px;padding:8px;margin-bottom:8px;animation:egpop .4s}
.fi.look{outline:3px solid var(--p);outline-offset:3px;border-radius:12px}.fi.drag{cursor:grabbing;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3))}

.rooms{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 4px;margin-top:6px}.rooms .chip{flex:1 1 auto;font-size:.78em;padding:8px 10px}.rooms .on{background:var(--p);color:#fff}.rooms .locked{opacity:.75}
.food{position:absolute;left:50%;top:-22%;font-size:38px;pointer-events:none;animation:eat .9s ease-in forwards}@keyframes eat{0%{transform:translate(-50%,-30px) scale(1);opacity:1}70%{transform:translate(-50%,40px) scale(.9);opacity:1}100%{transform:translate(-50%,58px) scale(0);opacity:0}}
.pet.chomp{animation:chomp .45s 2}@keyframes chomp{50%{transform:scale(1.07,.93)}}
.petwrap{position:absolute;left:50%;bottom:5%;width:40%;transform:translateX(-50%);cursor:pointer;z-index:80}
.pet.wobble{animation:wob .7s}@keyframes wob{0%,100%{transform:rotate(0)}15%{transform:rotate(-10deg)}35%{transform:rotate(9deg)}55%{transform:rotate(-6deg)}75%{transform:rotate(4deg)}}
.jump{animation:jump .5s}@keyframes jump{40%{transform:translateX(-50%) translateY(-24px)}}
.tabs{display:flex;gap:6px}.tabs .chip{flex:1;font-size:.64em;padding:8px 1px}.tabs .on,.seg .on{background:var(--p);color:#fff}
.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.it{background:#fff;border:0;border-radius:16px;padding:8px 4px;box-shadow:0 3px 0 #ddd6f7;font:inherit;font-size:.72em;cursor:pointer;text-align:center;color:inherit}
.it span{display:block;font-size:2.4em;line-height:1.2}.it.own{opacity:.5}.it.on{outline:3px solid var(--p)}
.sw{display:block;width:44px;height:34px;border-radius:10px;margin:0 auto 4px;border:1px solid #0002}
#upd{position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:70;border:0;border-radius:20px;background:var(--p);color:#fff;font:inherit;font-weight:700;font-size:.8em;padding:10px 16px;box-shadow:0 4px 0 rgba(0,0,0,.25);cursor:pointer}
.users{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}
.user{border:0;background:#fff;border-radius:18px;padding:12px 4px;box-shadow:0 3px 0 #ddd6f7;font:inherit;cursor:pointer;color:inherit;overflow:hidden}
.user span{display:block;font-size:2.4em;line-height:1.2}.user b{font-size:.8em;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user.on{outline:3px solid var(--p)}
#offb{position:fixed;left:0;right:0;top:0;z-index:80;background:#fff3cd;color:#8a6200;text-align:center;font-weight:700;font-size:.8em;padding:8px 12px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.qline{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #eee;font-size:.85em}
.play{border:0;background:var(--ok);color:#fff;border-radius:12px;padding:8px 12px;font:inherit;font-weight:700;font-size:.8em;cursor:pointer;white-space:nowrap;box-shadow:0 3px 0 rgba(0,0,0,.2);margin-top:6px}
.qrow{margin:12px 0}.qrow .bar{margin:4px 0 2px}.coin{font-weight:800}
.exb{display:block;margin-top:4px;color:#636e72}.exb.ok{color:#00875a;font-weight:700}
/* display settings (0.31): text size, spacing, font, contrast, calm mode */
html.fs1 body{font-size:21px}html.fs2 body{font-size:24px}
html.sp1 body{letter-spacing:.06em;word-spacing:.14em;line-height:1.65}
html.ff-v body{font-family:Verdana,Geneva,sans-serif}html.ff-a body{font-family:Arial,Helvetica,sans-serif}
html.hc{--ink:#000;--muted:#3b3b4f}html.hc .card{border:2px solid #343a40}html.hc .btn.ghost,html.hc .chip{border:2px solid #343a40}
html.calm *,html.calm *::before,html.calm *::after{animation:none!important;transition:none!important}
html.calm .confetti{display:none}
html.calm .fb.badf,html.calm .btn.bad{background:#eef0f2;color:#343a40}
html.calm .btn.opt.bad{background:#fff4e0;color:#7a5200}
.bigplay{width:100%;font-size:1.25em;padding:20px 16px;margin:12px 0;background:linear-gradient(135deg,#6c5ce7,#a29bfe)}.bigplay small{display:block;font-weight:600;color:#fff;font-size:.7em;margin-top:2px}
.dots2{display:flex;justify-content:center;gap:8px;margin:10px 0}.dots2 i{width:14px;height:14px;border-radius:50%;background:#ddd6f7}.dots2 i.on{background:var(--ok)}
.gap{display:inline-block;min-width:1.4em;border-bottom:4px solid var(--p);color:var(--p);margin:0 2px}
.tilekb{margin-top:8px}.key.big{height:56px;max-width:none;font-size:1.15em}.key.wide{flex:3}
mark{background:#ffe066;border-radius:6px;padding:0 3px}
[data-act=dsay],[data-act=dslow],[data-act=exsay],[data-act=exslow],[data-act=fixsay],[data-act=fixslow]{display:inline-block}