:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f9fff4;background:#071f19;color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
button,a{font:inherit;touch-action:manipulation}button{cursor:pointer}a{text-decoration:none;color:inherit}
#app{position:relative;width:100%;height:100svh;min-height:490px;overflow:hidden;touch-action:none;background:#86c97a;isolation:isolate}
#scene{position:absolute;inset:0;width:100%;height:100%;outline:0;touch-action:none}
.top{position:absolute;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:8px}
.top>a,.top-button{background:#164637ee;color:#f6fff2;border:1px solid #d2f0c79c;border-radius:12px;height:35px;box-shadow:0 3px 15px #22452b47}
.top>a{display:flex;align-items:center;padding:0 10px;gap:5px;font-size:12px;font-weight:950;letter-spacing:.06em;white-space:nowrap}
.top>a span{font-size:24px;line-height:1;margin-right:3px}.top>a em{font-size:10px;color:#ace8c3;font-style:normal}
.top strong{font-size:clamp(13px,3.8vw,19px);color:white;letter-spacing:-.04em;text-shadow:0 2px 12px #1635269a;white-space:nowrap}
.top strong span{color:#ffe3a1}.top-button{width:37px;font-size:21px}
.balances{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 44px);left:9px;right:9px;display:grid;grid-template-columns:1.02fr 1fr .91fr;gap:6px;z-index:3}
.balances>div{min-width:0;border:1px solid #fff1c296;border-radius:13px;padding:10px 10px 9px;background:linear-gradient(155deg,#19513edf,#1c4c3ddd);box-shadow:0 6px 18px #15352e52,inset 0 1px #eaffcb27}
.balances span{display:block;font-size:9px;font-weight:900;letter-spacing:.085em;color:#bce0cc}.balances strong{display:block;font-size:clamp(13px,3.6vw,19px);font-weight:1000;color:#ffe096;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px;font-variant-numeric:tabular-nums}.balances>div:last-child strong{color:#d7edff}
.objective{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 119px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:min(calc(100% - 20px),430px);padding:10px;border:2px solid #fff4d8;background:#fffdf2f5;color:#24583d;border-radius:15px;z-index:2;box-shadow:0 8px 24px #27513b48}
.step{flex:0 0 36px;height:39px;border-radius:11px;display:grid;place-items:center;background:#34a779;color:white;font-size:18px;font-weight:1000}.objective>div{flex:1;min-width:0}.objective strong{font-size:12px;font-weight:950;letter-spacing:.005em;display:block}.objective small{font-size:10px;color:#718872;display:block;line-height:1.4;margin-top:3px;font-weight:700}.direction{font-weight:950;font-size:27px;color:#248953;display:inline-block;line-height:1}
.queue-panel{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 192px);left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:8px;align-items:center;white-space:nowrap;border:1px solid #d9f6ce7a;background:#1e573fa6;color:#ecffe8;border-radius:30px;padding:6px 12px;font-size:11px;backdrop-filter:blur(4px);box-shadow:0 4px 10px #23503136}.queue-panel>span:nth-child(3){height:14px;width:1px;background:#d2ebbf7a}.queue-led{height:8px;width:8px;border-radius:50%;background:#e6f57a;box-shadow:0 0 9px #e6f57a}
.joystick{position:absolute;bottom:max(57px,calc(env(safe-area-inset-bottom) + 44px));left:19px;z-index:5;width:146px;height:146px;border:3px solid #f4ffddcf;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 37% 23%,#ffffff58,#46987b99 68%,#1b6259b0);box-shadow:inset 0 0 0 17px #b7f2b722,0 9px 32px #13402a77;touch-action:none}
.joystick:before{content:"";position:absolute;inset:20px;border:2px dashed #f4ffdb94;border-radius:50%;pointer-events:none}.joystick-arrows{position:absolute;color:#e9ffe7;font-size:67px;opacity:.22;pointer-events:none}.knob{height:64px;width:64px;border:4px solid #fffdf3;border-radius:50%;background:radial-gradient(circle at 30% 21%,#f9fff3,#b9ebd0 67%,#5db68e);box-shadow:0 5px 18px #245a45b1,inset 0 4px 11px #fff8efaa;pointer-events:none;will-change:transform}.joystick.active{box-shadow:0 0 0 6px #e4ffb936,0 9px 32px #13402a77}
.touchpad{position:absolute;z-index:4;width:110px;height:110px;border:2px solid #fff8cfbb;background:#49ae7833;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}.touchpad>div{width:40px;height:40px;background:#c4f5d0;border:3px solid #fff;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);will-change:transform}
.tools{position:absolute;right:16px;bottom:max(71px,calc(env(safe-area-inset-bottom) + 62px));display:grid;justify-items:center;gap:14px;z-index:5}.shop{height:92px;width:92px;border-radius:50%;border:4px solid #fff4c0;background:radial-gradient(circle at 32% 25%,#ffeca8,#efbd53 71%,#d38d30);color:#6d4b1a;font-weight:1000;display:grid;place-items:center;align-content:center;box-shadow:0 9px 24px #3b36177d,inset 0 3px 11px #fff9e4}.shop span{font-size:32px;line-height:1}.shop small{font-size:10px;letter-spacing:.02em;margin-top:3px}.expand{width:39px;height:39px;background:#1c513bda;border:1px solid #effbe3a4;border-radius:12px;font-size:23px;color:white}
.helptext{position:absolute;left:10px;bottom:max(208px,calc(env(safe-area-inset-bottom) + 198px));width:165px;text-align:center;font-size:10px;font-weight:900;color:white;text-shadow:0 2px 6px #183a2e;pointer-events:none;z-index:2}.footer{position:absolute;left:0;right:0;bottom:max(9px,env(safe-area-inset-bottom));font-size:9px;letter-spacing:.13em;text-align:center;font-weight:850;color:#e7ffe4;text-shadow:0 1px 4px #1b643a;pointer-events:none;z-index:2}
.toast{position:absolute;z-index:7;top:47%;left:50%;transform:translate(-50%,-50%);color:#fffdf3;background:#175641ed;border:2px solid #ebffc5;border-radius:20px;font-weight:900;font-size:15px;padding:12px 18px;text-align:center;box-shadow:0 10px 25px #193b318c;pointer-events:none;white-space:nowrap}
.hold{position:absolute;z-index:6;bottom:30%;left:50%;transform:translateX(-50%);width:190px;display:grid;gap:5px;text-align:center;background:#20513fe8;border:1px solid #e2fac2;border-radius:12px;padding:10px;font-size:10px;font-weight:900;letter-spacing:.05em}.hold>span{height:9px;border-radius:30px;background:#6c8e67;overflow:hidden}.hold i{height:100%;background:#ffdf75;display:block;width:0;border-radius:20px}
.modal-backdrop{position:fixed;inset:0;background:#061c17d9;backdrop-filter:blur(6px);z-index:25;display:grid;place-items:center;padding:12px;touch-action:pan-y}[hidden]{display:none!important}
.modal{width:min(100%,480px);max-height:93dvh;overflow:auto;background:linear-gradient(148deg,#275744,#112e26);border:2px solid #a3cf9e;border-radius:21px;padding:18px;color:#f7fff4;box-shadow:0 30px 90px #010d09b0}
.modal-header{display:flex;justify-content:space-between;align-items:start;gap:12px}.modal-header>div>span{font-weight:950;letter-spacing:.12em;font-size:10px;color:#cbe9ab}.modal-header h2{margin:4px 0 0;font-size:25px}.modal-header button{background:#3b6b55;border:1px solid #9aca97;border-radius:10px;color:white;font-size:27px;width:39px;height:39px}.modal>p{color:#c2d8cb;line-height:1.5;font-size:12px}
.upgrades{display:grid;grid-template-columns:1fr 1fr;gap:9px}.upgrade{color:white;min-height:118px;border:1px solid #589277;border-radius:13px;text-align:left;padding:10px;background:#1b4638;display:flex;flex-direction:column;align-items:flex-start;gap:3px}.upgrade:not(:disabled):active{transform:scale(.97)}.upgrade:disabled{opacity:.52;cursor:not-allowed}.upgrade .emoji{font-size:21px}.upgrade strong{font-size:12px;font-weight:900}.upgrade small{font-size:10px;color:#b8d0bd;line-height:1.3}.upgrade em{font-size:12px;font-weight:950;font-style:normal;color:#ffe49f;margin-top:auto}
.modal-bottom{display:flex;gap:9px;flex-wrap:wrap;align-items:center;border-top:1px solid #b8d5b44d;margin-top:13px;padding-top:13px}.modal-bottom>b{flex:1;color:#ffe4a1;font-size:13px}.modal-bottom button{font-size:10px;color:#ecffef;border:1px solid #8cbd9f;background:#24563f;border-radius:8px;padding:9px}.modal-bottom #restart{color:#ffcebb}
@media(min-width:800px){#app{max-width:610px;margin:auto;height:min(95vh,960px);min-height:650px;border-radius:25px;border:2px solid #92c59c;box-shadow:0 12px 65px #0009;top:2.5vh}.top{top:14px}.balances{top:59px}.objective{top:137px}.queue-panel{top:210px}}
@media(max-width:380px){.top{left:7px;right:7px}.balances{left:6px;right:6px;gap:4px}.balances>div{padding:9px 6px}.balances span{font-size:7.5px}.balances strong{font-size:12px}.objective small{font-size:9px}.joystick{height:125px;width:125px;left:12px}.tools{right:9px}.shop{height:81px;width:81px}.helptext{bottom:193px}.objective{top:calc(max(10px,env(safe-area-inset-top)) + 111px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Dynamic touch only: no fixed thumbpad covers the gameplay. */
.joystick,.joystick-arrows,.knob{display:none!important}
.touchpad{width:116px;height:116px;background:#72c99533;border:2px solid #f8ffd6cc;box-shadow:0 0 0 1px #215f416a,inset 0 0 0 15px #d9ffd817}
.touchpad>div{width:46px;height:46px;box-shadow:0 4px 13px #25664b9c}
.helptext{left:50%;transform:translateX(-50%);bottom:max(35px,calc(env(safe-area-inset-bottom) + 24px));width:210px;font-size:11px}
.footer{opacity:.63;font-size:8px}
.level-panel{position:absolute;z-index:3;top:calc(max(10px,env(safe-area-inset-top)) + 235px);left:50%;transform:translateX(-50%);background:#174b37dc;border:1px solid #d5efbf9e;box-shadow:0 5px 16px #29473266;border-radius:12px;padding:7px 10px 8px;width:min(210px,54vw)}
.level-panel>div:first-child{display:flex;justify-content:space-between;gap:8px;align-items:center}
.level-panel span{font-size:9px;font-weight:950;letter-spacing:.04em;color:#cde9c6}
.level-panel b{font-size:12px;color:#ffe3a3;font-variant-numeric:tabular-nums}
.level-track{height:5px;background:#508b6b;border-radius:99px;margin-top:5px;overflow:hidden}
.level-track i{display:block;height:100%;width:0;background:#f5dc76;border-radius:99px}
.cloud-state{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 286px);left:50%;transform:translateX(-50%);z-index:2;color:#fff7e0;background:#1b5545c7;padding:4px 9px;border-radius:20px;font-size:10px;white-space:nowrap}
.account-form{display:grid;gap:9px;margin-top:17px}
.account-form label{font-size:12px;font-weight:850;color:#e8ffdb}
.account-form input{width:100%;padding:13px 12px;color:#102c26;font-size:16px;border:2px solid #a3d6b1;border-radius:10px;background:#fafff7;outline:0}
.account-form input:focus{border-color:#ffd781;box-shadow:0 0 0 3px #f8d88842}
.primary-action{padding:12px 15px;border:1px solid #fff1ab;border-radius:10px;color:#23472b;background:#f6cc72;font-weight:900}
.primary-action:disabled{opacity:.55}
.sub-btn{margin-top:10px;padding:10px 11px;border:1px solid #add1a7;border-radius:9px;color:white;background:#285744;font-size:12px}
.form-feedback{font-size:12px!important;font-weight:800;min-height:17px;color:#ffe5a2!important}
#accountIdentity{display:grid;gap:5px;background:#235842;padding:12px;border:1px solid #7cae8a;border-radius:12px}
#accountIdentity strong{color:#ffe4a0;font-size:18px}
#accountIdentity small{color:#c6e5cb}
#cloudUpdated{font-size:12px;color:#c6e5cb}
.inline-form{display:flex;gap:7px}.inline-form input{flex:1;min-width:0}.inline-form button{font-size:11px}
.board-list{display:grid;gap:5px;max-height:60vh;overflow-y:auto}
.board-entry{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;background:#1b4939;padding:10px;border:1px solid #669a79;border-radius:10px}
.board-entry .rank{color:#ffe3a2;font-weight:950}.board-entry strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-entry small{display:block;color:#b4d4c1;font-size:10px;margin-top:3px}
.board-entry b{color:#ffe2a3;white-space:nowrap;font-size:12px}
.board-entry.mine{border-color:#ffe4a0;background:#37654c}
@media(max-height:650px){.level-panel{top:calc(max(10px,env(safe-area-inset-top)) + 205px)}.cloud-state{display:none!important}.helptext{display:none}}