:root{font-family:Inter,ui-rounded,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:#f8f1db;background:#15243b;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{display:grid;place-items:center;background:radial-gradient(circle at 50% 15%,#55748b 0,transparent 42%),linear-gradient(155deg,#172a43,#101b30 56%,#281f35)}#app{width:100vw;height:100vh;display:grid;place-items:center;padding:12px}#game{display:block;width:min(calc(100vw - 24px),calc((100vh - 24px) * 16 / 9));height:min(calc(100vh - 24px),calc((100vw - 24px)*.5625));max-width:1280px;max-height:720px;border-radius:20px;border:1px solid rgb(255 240 185 / 28%);background:#20324b;box-shadow:0 28px 80px #0000007a,0 0 0 5px #ffffff08;cursor:default;touch-action:none}#game:focus-visible{outline:3px solid #f9d77c;outline-offset:4px}@media(max-aspect-ratio:4 / 5){#app{padding:4px}#game{width:calc(100vw - 8px);height:auto;border-radius:12px}}.web-chrome{position:fixed;z-index:20;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:flex;align-items:center;gap:8px;pointer-events:none}.account-button,.sync-pill,.setup-warning,.account-panel,.conflict-panel{font:700 12px/1.2 Inter,ui-rounded,Segoe UI,sans-serif;letter-spacing:.06em}.account-button,.sync-pill{border:1px solid rgb(255 236 166 / 35%);border-radius:999px;color:#fff3c4;background:#09192adb;box-shadow:0 8px 24px #00000047;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.account-button{min-height:36px;padding:0 14px;pointer-events:auto;cursor:pointer}.sync-pill{padding:9px 12px;color:#a8ded8}.sync-pill[data-phase=conflict],.sync-pill[data-phase=error]{color:#ffb29d;border-color:#ff7e5e7a}.account-panel,.conflict-panel{position:fixed;z-index:40;display:none;width:min(420px,calc(100vw - 24px));max-height:min(680px,calc(100vh - 24px));overflow:auto;padding:24px;border:1px solid rgb(255 236 166 / 34%);border-radius:22px;color:#f8f1db;background:#0a192af5;box-shadow:0 28px 80px #00000094;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.account-panel.open,.conflict-panel.open{display:block}.account-panel{top:max(58px,calc(env(safe-area-inset-top) + 46px));right:max(14px,env(safe-area-inset-right))}.conflict-panel{top:50%;left:50%;transform:translate(-50%,-50%)}.account-panel h2,.conflict-panel h2{margin:0 0 12px;color:#ffe8a4;font-size:21px}.panel-copy,.save-summary{color:#cbdad6;font-weight:600;line-height:1.5;letter-spacing:0}.account-form{display:grid;gap:9px;margin-top:18px}.account-form input{width:100%;min-height:42px;padding:0 12px;border:1px solid rgb(180 215 213 / 28%);border-radius:10px;color:#f7f3e7;background:#ffffff12;font:600 14px Inter,sans-serif}.gold-button,.neutral-button,.text-button,.panel-close{min-height:38px;border-radius:10px;font:800 11px Inter,sans-serif;letter-spacing:.07em;cursor:pointer}.gold-button{border:1px solid #ffe198;color:#1c2731;background:linear-gradient(#ffe39a,#d9a948)}.neutral-button,.text-button,.panel-close{border:1px solid rgb(199 223 219 / 30%);color:#dce9e5;background:#ffffff12}.text-button{width:100%;margin-top:9px}.panel-close{float:right;min-height:28px;padding:0 10px}.conflict-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.form-error,.form-success{margin:6px 0 0;font-size:11px;letter-spacing:0}.form-error{color:#ffaf9c}.form-success{color:#a9e0c1}.setup-warning{position:fixed;z-index:20;right:14px;bottom:max(14px,env(safe-area-inset-bottom));max-width:min(520px,calc(100vw - 28px));padding:10px 14px;border:1px solid rgb(255 224 135 / 30%);border-radius:12px;color:#ffe4a0;background:#0a192ae5}.mobile-controls{display:none}@media(pointer:coarse)and (orientation:landscape){#app{padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))}#game{width:min(calc(100vw - 8px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100vh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9));height:min(calc(100vh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),calc((100vw - 8px - env(safe-area-inset-left) - env(safe-area-inset-right))*.5625));border-radius:10px}.mobile-controls{position:fixed;z-index:18;inset:0;display:block;pointer-events:none;-webkit-user-select:none;user-select:none;touch-action:none}.virtual-stick,.mobile-action,.mobile-small{pointer-events:auto;border:1px solid rgb(255 239 181 / 40%);color:#fff2bd;background:#08192ab8;box-shadow:0 8px 26px #00000047;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);touch-action:none}.virtual-stick{position:absolute;left:max(22px,calc(env(safe-area-inset-left) + 14px));bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));width:clamp(92px,15vw,132px);aspect-ratio:1;border-radius:50%}.virtual-stick:before,.virtual-stick:after{content:"";position:absolute;background:#bee6de29}.virtual-stick:before{top:49%;left:10%;width:80%;height:2px}.virtual-stick:after{top:10%;left:49%;width:2px;height:80%}.virtual-stick-knob{position:absolute;z-index:1;top:31%;left:31%;width:38%;aspect-ratio:1;border:2px solid rgb(255 232 152 / 72%);border-radius:50%;background:#55aea8d1;box-shadow:0 0 20px #70e0d257}.mobile-action{position:absolute;right:max(24px,calc(env(safe-area-inset-right) + 16px));bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));width:clamp(86px,13vw,116px);aspect-ratio:1;border-color:#ffda7cb3;border-radius:50%;background:#753d33c7;font:900 clamp(9px,1.3vw,12px)/1.1 Inter,sans-serif;letter-spacing:.06em}.mobile-shortcuts{position:absolute;top:max(68px,calc(env(safe-area-inset-top) + 56px));right:max(12px,env(safe-area-inset-right));display:grid;grid-template-columns:repeat(3,minmax(42px,auto));gap:6px;pointer-events:none}.mobile-small{min-width:42px;min-height:34px;padding:0 8px;border-radius:999px;font:850 8px/1 Inter,sans-serif;letter-spacing:.05em}.mobile-wide{min-width:68px}.web-chrome{top:max(7px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}.account-button,.sync-pill{min-height:30px;padding:7px 10px;font-size:9px}}@media(orientation:portrait)and (max-width:700px){body:after{content:"Rotate your device to landscape to play Emberclade";position:fixed;z-index:60;inset:0;display:grid;place-items:center;padding:32px;color:#fff0b2;background:#102139;text-align:center;font:800 20px/1.4 Inter,sans-serif}.mobile-controls,.web-chrome{display:none}}