:root{--ink:#3b2f63;--btn:#fff;--glow:#ffd166}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#efeaff;--btn:#4a3d7a}}
:root[data-theme="dark"]{--ink:#efeaff;--btn:#4a3d7a}
html,body{height:100%;margin:0;overflow:hidden;background:#cfc4ff;font-family:"Baloo 2",system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}
canvas{display:block;width:100%;height:100%;touch-action:none}
.b{position:fixed;border:0;border-radius:50%;background:var(--btn);color:var(--ink);font:800 15px "Baloo 2",system-ui,sans-serif;box-shadow:0 5px 0 rgba(59,47,99,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;line-height:1}
.b:active{transform:translateY(3px)}
.b span{font-size:28px}
#jump{width:84px;height:84px;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px))}
#plant{width:72px;height:72px;right:calc(112px + env(safe-area-inset-right,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));background:var(--glow);color:#3b2f63}
#kind{width:52px;height:52px;right:calc(124px + env(safe-area-inset-right,0px));bottom:calc(106px + env(safe-area-inset-bottom,0px))}
#fire{width:72px;height:72px;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(116px + env(safe-area-inset-bottom,0px));background:var(--glow);color:#3b2f63}
#dash{width:60px;height:60px;right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(198px + env(safe-area-inset-bottom,0px))}
#top{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
#score{background:var(--btn);color:var(--ink);font-weight:800;font-size:22px;padding:2px 16px;border-radius:99px;box-shadow:0 4px 0 rgba(59,47,99,.3)}
#cols{display:flex}
.t{width:48px;height:48px;border:0;border-radius:50%;background:var(--btn);font-size:24px;box-shadow:0 4px 0 rgba(59,47,99,.3);pointer-events:auto;margin-left:8px}
#pn{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(40,30,80,.5);z-index:9}
#pc{background:var(--btn);color:var(--ink);border-radius:20px;padding:16px 18px;max-width:90vw;max-height:80vh;overflow:auto;box-shadow:0 6px 0 rgba(59,47,99,.35)}
#pc h3{margin:0 0 8px;font-size:24px}.r{margin:8px 0}
.o{font:800 17px "Baloo 2",system-ui,sans-serif;color:var(--ink);background:rgba(127,110,200,.2);border:3px solid transparent;border-radius:12px;padding:4px 12px;margin:3px;cursor:pointer}
.o.on{border-color:#ffb703}
#hint{position:fixed;left:50%;top:80px;transform:translateX(-50%);background:var(--btn);color:var(--ink);padding:6px 16px;border-radius:99px;font-size:16px;text-align:center;transition:opacity 1s;pointer-events:none;width:max-content;max-width:88vw}
#st{position:fixed;display:none;width:110px;height:110px;margin:-55px;border-radius:50%;background:rgba(255,255,255,.35);pointer-events:none}
#kn{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px;border-radius:50%;background:rgba(255,255,255,.9)}

/* ЛОББИ */
body.lobby .b,body.lobby #top{display:none}
#lb{position:fixed;inset:0;z-index:8;pointer-events:none;font-family:"Baloo 2",system-ui,sans-serif;color:#fff;--o:#1a1040;text-shadow:-2px -2px 0 var(--o),2px -2px 0 var(--o),-2px 2px 0 var(--o),2px 2px 0 var(--o),0 3px 0 var(--o)}
#lb[hidden],#go[hidden]{display:none}
#lb *{box-sizing:border-box}
#lb:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,transparent 35%,rgba(10,6,40,.65) 100%)}
#lb button{pointer-events:auto;cursor:pointer}
.chip{position:relative;background:rgba(20,12,70,.78);border:2px solid #7f8cff;border-radius:99px;padding:0 14px;font-weight:800;font-size:19px}
#lbtop{position:absolute;left:calc(12px + env(safe-area-inset-left,0px));right:calc(12px + env(safe-area-inset-right,0px));top:calc(10px + env(safe-area-inset-top,0px));display:flex;justify-content:space-between;gap:8px}
#lbside{position:absolute;left:calc(10px + env(safe-area-inset-left,0px));top:calc(54px + env(safe-area-inset-top,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:104px;display:flex;flex-direction:column;gap:8px}
#lbtiles{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;pointer-events:auto;scrollbar-width:none;padding:3px}
.tile{position:relative;flex:none;height:88px;border-radius:10px;border:3px solid #a6c8ff;background:radial-gradient(circle at 50% 35%,var(--c),#2a3bc4 125%);color:#fff;font:800 13px "Baloo 2",system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;text-shadow:-1.5px -1.5px 0 var(--o),1.5px -1.5px 0 var(--o),-1.5px 1.5px 0 var(--o),1.5px 1.5px 0 var(--o)}
.tile .em{font-size:38px;line-height:1.1;text-shadow:none}
.tile.on{border-color:#fff;box-shadow:0 0 0 3px #ffd93f,0 0 18px var(--c)}
.tile.on:after{content:"✔";position:absolute;right:4px;top:0;color:#3fe06a;font-size:18px}
#lbrnd{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:12px;line-height:1.1;background:rgba(20,12,70,.85);border:2px solid #7f8cff;border-radius:12px;padding:5px;flex:none}
#rndon{font:800 14px "Baloo 2",system-ui,sans-serif;border:3px solid #1a1040;border-radius:8px;background:#e23b4a;color:#fff;padding:0 7px;text-shadow:none}
#rndon.on{background:#2fbf5a}
#lbtitle{position:absolute;left:50%;top:calc(46px + env(safe-area-inset-top,0px));transform:translateX(-50%);text-align:center;width:min(56vw,420px)}
#lbt{display:block;font-size:34px;line-height:1.05;text-transform:uppercase}
#lbd{display:block;font-size:14px;line-height:1.15;margin-top:4px}
#lbright{position:absolute;right:calc(12px + env(safe-area-inset-right,0px));top:calc(54px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:10px}
.sq{width:66px;height:66px;border-radius:12px;border:3px solid #a6c8ff;background:linear-gradient(#4f78ff,#2a3bc4);color:#fff;font-size:26px;line-height:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-shadow:none}
.sq small{font:800 11px "Baloo 2",system-ui,sans-serif;margin-top:2px;text-shadow:-1px -1px 0 var(--o),1px 1px 0 var(--o),1px -1px 0 var(--o),-1px 1px 0 var(--o)}
#lbbot{position:absolute;left:calc(126px + env(safe-area-inset-left,0px));right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;align-items:stretch;justify-content:flex-end}
#lbmode{display:flex;align-items:center;gap:8px;background:linear-gradient(#2b3fc9,#1d2a8f);border:3px solid #a6c8ff;border-radius:12px;padding:4px 8px}
#lbmode small{display:block;font-size:11px;line-height:1}
#lbmode b{display:block;font-size:19px;line-height:1.15;min-width:120px;text-align:center}
#lbmode button{font:800 26px/1 "Baloo 2",system-ui,sans-serif;background:rgba(255,255,255,.2);color:#fff;border:0;border-radius:8px;width:36px;height:44px;text-shadow:none}
#lbplay{font:800 34px/1 "Baloo 2",system-ui,sans-serif;color:#fff;background:linear-gradient(#ffd93f,#ff9d00);border:4px solid #1a1040;border-radius:12px;padding:6px 34px;text-shadow:-2px -2px 0 var(--o),2px -2px 0 var(--o),-2px 2px 0 var(--o),2px 2px 0 var(--o);box-shadow:0 5px 0 #8a4f00}
#lbplay:active{transform:translateY(3px);box-shadow:0 2px 0 #8a4f00}
#go{position:fixed;left:0;right:0;top:36%;text-align:center;font:800 64px "Baloo 2",system-ui,sans-serif;color:#ffd93f;z-index:10;pointer-events:none;animation:pop .5s ease-out;text-shadow:-3px -3px 0 #1a1040,3px -3px 0 #1a1040,-3px 3px 0 #1a1040,3px 3px 0 #1a1040,0 6px 0 #1a1040}
@keyframes pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@media (max-height:420px){#lbt{font-size:26px}#lbd{font-size:12px}.tile{height:76px}.sq{width:58px;height:58px}#lbplay{font-size:28px;padding:4px 26px}}

#zin,#zout{width:46px;height:46px;left:calc(12px + env(safe-area-inset-left,0px))}
#zin{top:calc(120px + env(safe-area-inset-top,0px))}#zout{top:calc(176px + env(safe-area-inset-top,0px))}
#ride{width:64px;height:64px;right:calc(196px + env(safe-area-inset-right,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));background:#7ae0ff;color:#12303a}
#home{width:46px;height:46px;right:calc(12px + env(safe-area-inset-right,0px));top:calc(58px + env(safe-area-inset-top,0px))}
#snd{position:fixed;z-index:9;width:46px;height:46px;border-radius:50%;border:0;background:var(--btn);color:var(--ink);font-size:22px;box-shadow:0 5px 0 rgba(59,47,99,.35);right:calc(12px + env(safe-area-inset-right,0px));top:calc(112px + env(safe-area-inset-top,0px));touch-action:none}
body.lobby #snd{right:calc(90px + env(safe-area-inset-right,0px));top:calc(54px + env(safe-area-inset-top,0px))}
#pc{max-height:88vh;overflow-y:auto}.r{flex-wrap:wrap}