:root{--sky:#3aa8ff;--grass:#3ccf4e;--lava:#ff5a1f;--sun:#ffd23f;--ink:#1b1f3b;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;font-family:'Chakra Petch',monospace;color:var(--ink);background:#7cc8ff;user-select:none;touch-action:none}
#scene-container{position:fixed;inset:0}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;z-index:5}
.screen.dim{background:rgba(20,30,60,.45);backdrop-filter:blur(3px)}
.screen.side{align-items:flex-end}
.logo{font-family:'Lilita One';font-size:clamp(70px,15vw,150px);line-height:.85;margin:0;color:var(--sun);text-align:center;
 -webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 10px 0 var(--ink);transform:rotate(-6deg);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:rotate(-3deg) translateY(-10px)}}
.menu{display:flex;flex-direction:column;gap:10px;width:min(320px,90vw)}
.btn{font-family:'Lilita One';font-size:20px;letter-spacing:.5px;padding:12px 18px;border:4px solid var(--ink);border-bottom-width:9px;border-radius:16px;cursor:pointer;
 color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);text-align:center;text-decoration:none;transition:transform .12s;display:block;width:100%}
.btn:hover{transform:scale(1.04) rotate(-1deg)}
.btn:active{transform:translateY(4px);border-bottom-width:5px}
.btn.big{font-size:34px}
.green{background:var(--grass)}.blue{background:var(--sky)}.yellow{background:var(--sun);color:var(--ink);text-shadow:none}
.white{background:#fff;color:var(--ink);text-shadow:none}.red{background:var(--lava)}
.btn.mini{width:auto;padding:4px 12px;font-size:16px;border-bottom-width:6px;background:#fff;color:var(--ink);text-shadow:none}
.tip{background:var(--ink);color:#fff;padding:6px 14px;border-radius:10px;font-size:14px}
footer{position:fixed;bottom:8px;font-size:12px;color:var(--ink);background:rgba(255,255,255,.7);padding:3px 10px;border-radius:8px}
footer a{color:var(--ink);font-weight:700}
#auth-status{position:fixed;top:10px;right:10px;font-size:12px;background:#fff;border:3px solid var(--ink);border-radius:10px;padding:4px 10px}
#auth-status a{color:var(--ink)}
.head{font-family:'Lilita One';font-size:40px;margin:0;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
.panel{background:#fff;border:5px solid var(--ink);border-radius:22px;padding:20px;box-shadow:0 10px 0 var(--ink);width:min(360px,92vw);display:flex;flex-direction:column;gap:10px;max-height:90vh;overflow:auto}
.panel.wide{width:min(560px,94vw)}
.panel .head{text-align:center}
.worldList{display:flex;gap:16px;overflow-x:auto;max-width:96vw;padding:10px 6px 20px}
.wcard{flex:0 0 190px;background:#fff;border:5px solid var(--ink);border-radius:18px;box-shadow:0 8px 0 var(--ink);overflow:hidden;cursor:pointer;transition:transform .15s}
.wcard:hover{transform:translateY(-6px) rotate(-1.5deg)}
.wcard .ban{height:100px;display:flex;align-items:center;justify-content:center;font-family:'Lilita One';font-size:46px;color:#fff;-webkit-text-stroke:2px var(--ink);
 background-image:radial-gradient(circle at 25% 25%,rgba(255,255,255,.35) 18%,transparent 19%);background-size:28px 28px}
.wcard .inf{padding:10px}.wcard b{font-family:'Lilita One';font-size:18px;display:block}
.wcard.locked{filter:grayscale(1) opacity(.7);cursor:not-allowed}
.lbl{display:flex;flex-direction:column;font-weight:700;font-size:14px;gap:4px}
.lbl input[type=text],.lbl input:not([type]){font-family:inherit;font-size:18px;padding:8px;border:3px solid var(--ink);border-radius:10px}
.chk{flex-direction:row;align-items:center}
.row{display:flex;gap:8px;flex-wrap:wrap}
.sw{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.sw span{width:60px}
.dot{width:24px;height:24px;border-radius:6px;border:3px solid var(--ink);cursor:pointer}
.dot.on{outline:3px solid var(--sun);transform:scale(1.15)}
.chip{padding:6px 12px;border:3px solid var(--ink);border-radius:10px;cursor:pointer;font-weight:700;background:#eee}
.chip.on{background:var(--sun)}
.lbBody{font-size:15px;min-height:120px}
.lbRow{display:grid;grid-template-columns:30px 1fr 90px 50px;padding:5px 8px;border-bottom:2px dashed #ccd}
.lbRow.me{background:var(--sun);border-radius:8px}
#hud{position:fixed;inset:0;pointer-events:none;z-index:4}
.hudL{position:absolute;top:12px;left:12px;font-family:'Lilita One';color:#fff;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;font-size:22px}
#hStage{font-size:18px}
.pill{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:rgba(20,25,50,.75);color:#fff;padding:6px 18px;border-radius:30px;font-size:24px;font-weight:700}
.hudR{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;pointer-events:auto;
 color:#fff;font-family:'Lilita One';font-size:22px;-webkit-text-stroke:1px var(--ink);paint-order:stroke fill}
.hudR small{font-size:11px;font-family:'Chakra Petch';-webkit-text-stroke:0;background:rgba(0,0,0,.4);padding:1px 6px;border-radius:5px}
#chat{position:absolute;left:12px;bottom:140px;width:min(340px,70vw);display:flex;flex-direction:column;gap:3px}
#chat div{background:rgba(20,25,50,.6);color:#fff;font-size:13px;padding:3px 8px;border-radius:6px;animation:fadeC 6s forwards}
@keyframes fadeC{0%{opacity:0;transform:translateX(-10px)}8%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
#pop{position:absolute;top:28%;width:100%;text-align:center;font-family:'Lilita One';font-size:56px;color:var(--grass);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;opacity:0}
#pop.go{animation:popA 1.3s ease-out}
@keyframes popA{0%{opacity:0;transform:scale(.3)}20%{opacity:1;transform:scale(1.2)}35%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}
#seed{position:absolute;bottom:8px;right:12px;font-size:12px;color:#fff;background:rgba(0,0,0,.4);padding:2px 8px;border-radius:6px}
#joy{position:absolute;left:24px;bottom:24px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.25);border:4px solid rgba(27,31,59,.5);pointer-events:auto;display:none}
#knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:#fff;border:4px solid var(--ink)}
#jumpBtn{position:absolute;right:24px;bottom:30px;width:100px;height:100px;border-radius:50%;font-family:'Lilita One';font-size:22px;background:var(--grass);color:#fff;border:5px solid var(--ink);border-bottom-width:10px;pointer-events:auto;display:none}
body.touch #joy,body.touch #jumpBtn{display:block}
.stars{font-size:52px;text-align:center;color:var(--sun);-webkit-text-stroke:2px var(--ink)}
.fStats{text-align:center;font-size:18px;font-weight:700}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--sun);border:4px solid var(--ink);border-radius:14px;padding:10px 18px;font-family:'Lilita One';font-size:20px;z-index:20;transition:transform .4s}
#toast.show{transform:translateX(-50%) translateY(0)}