:root{color-scheme:dark;background:#030b21;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--storage-height:0px}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 30%,#122b54,#030b21 75%);font-family:"Trebuchet MS",Verdana,sans-serif;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#gameShell{position:absolute;top:calc(var(--safe-top) + var(--storage-height));bottom:var(--safe-bottom);left:var(--safe-left);right:var(--safe-right);max-width:760px;margin:0 auto;touch-action:none;overscroll-behavior:none;opacity:0;transition:opacity .2s ease}
#c{display:block;width:100%;height:100%;touch-action:none;outline:none}
body.game-ready #gameShell{opacity:1}
#nameModal,#friendModal{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:rgba(2,8,35,.82);padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));overflow:auto;overscroll-behavior:contain}
#nameModal.show,#friendModal.show{display:flex}
.nameCard{width:min(360px,100%);max-height:100%;overflow:auto;background:#0b2368;border:2px solid #35d8ff;border-radius:22px;padding:22px;box-shadow:0 0 32px rgba(53,216,255,.25);color:#fff;text-align:center}
.nameCard h2{margin:0 0 10px;font-size:28px}.nameCard p{margin:0 0 18px;color:#ccecff;line-height:1.35}
.nameCard input{width:100%;border:2px solid #35d8ff;background:#061640;color:#fff;border-radius:14px;padding:14px 16px;font-size:20px;text-align:center;outline:none;user-select:text;-webkit-user-select:text;touch-action:manipulation}
.nameActions{display:flex;gap:10px;margin-top:16px}.nameActions button{flex:1;border:0;border-radius:14px;padding:13px;font-size:17px;font-weight:800;background:#fff;color:#153a9c;touch-action:manipulation}.nameActions .primary{background:#ffb000;color:#081641}
#loadingScreen{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px;text-align:center;background:#030b21;color:#c4edff;transition:opacity .2s ease}
#loadingScreen img{width:min(58vw,246px);height:auto;max-height:40vh;object-fit:contain}#loadingScreen h1{margin:0;color:#8cecff;letter-spacing:4px}#loadingLabel{font-size:14px}
.loading-dot{width:22px;height:22px;border:2px solid #21435a;border-top-color:#55e4ff;border-radius:50%;animation:loading-spin .8s linear infinite}body.game-ready #loadingScreen{opacity:0;pointer-events:none}
[hidden],#loadingScreen[hidden]{display:none!important}
#retryLoading{padding:12px 18px;border-radius:12px;border:1px solid #55e4ff;background:#123254;color:#fff;font-size:16px}
#storageNotice{position:fixed;top:var(--safe-top);left:var(--safe-left);right:var(--safe-right);z-index:40;margin:0;height:34px;padding:5px 10px;text-align:center;background:#3f3316;color:#ffedb6;font-size:11px;line-height:12px}
body.storage-fallback{--storage-height:34px}
@keyframes loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#gameShell,#loadingScreen{transition:none}.loading-dot{animation:none}}

.swipi-secret-unlock{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(2,8,25,.72);box-sizing:border-box;touch-action:none}
.swipi-secret-unlock-card{position:relative;box-sizing:border-box;width:min(280px,86vw);padding:36px 24px;text-align:center;border:1px solid rgba(255,173,208,.65);border-radius:26px;color:#fff;background:linear-gradient(145deg,#112451,#241538);box-shadow:0 0 38px rgba(255,112,178,.18);font-family:"Trebuchet MS",Verdana,sans-serif;animation:swipi-secret-reveal 1.3s ease both}
.swipi-secret-unlock-heart{display:block;color:#ffadd0;font-size:64px;line-height:1.2;text-shadow:0 0 22px rgba(255,126,181,.4)}
.swipi-secret-unlock-card p{margin:16px 0 0;font-size:23px;font-weight:700;letter-spacing:.04em}
@keyframes swipi-secret-reveal{0%{opacity:0;transform:translateY(12px) scale(.94)}20%,80%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-4px) scale(1.02)}}
@media(prefers-reduced-motion:reduce){.swipi-secret-unlock-card{animation:none}}
.swipi-secret-level-note{position:fixed;left:50%;z-index:12;width:max-content;max-width:min(330px,84vw);box-sizing:border-box;padding:11px 17px;transform:translateX(-50%);border:1px solid rgba(255,173,208,.3);border-radius:17px;background:rgba(8,17,40,.82);color:#ffe4ef;text-align:center;font:700 14px/1.45 "Trebuchet MS",Verdana,sans-serif;pointer-events:none;animation:swipi-secret-note 3.1s ease both}
.swipi-secret-unlock-card-stars{border-color:rgba(136,218,255,.6);background:linear-gradient(145deg,#102947,#221f48);box-shadow:0 0 38px rgba(112,192,255,.2)}
.swipi-secret-unlock-star{color:#ffe1a3;text-shadow:0 0 22px rgba(255,210,120,.4)}
.swipi-secret-level-note-stars{border-color:rgba(136,218,255,.35);color:#e6f5ff}
@keyframes swipi-secret-note{0%,100%{opacity:0}12%,82%{opacity:1}}
@media(prefers-reduced-motion:reduce){.swipi-secret-level-note{animation:none}}

#accountModal{position:fixed;inset:0;z-index:24;display:none;align-items:center;justify-content:center;background:rgba(2,8,35,.88);padding:18px;box-sizing:border-box}
#accountModal.show{display:flex}
.accountCard{max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);overflow-y:auto;width:min(100%,390px);overscroll-behavior:contain;text-align:left;touch-action:pan-y}
.accountCard input{user-select:text;-webkit-user-select:text}
.accountCard h2{text-align:center}
.accountCard label{display:block;color:#c3dafa;font-size:13px;margin:12px 0 6px}
.accountCard input,.accountCard select{box-sizing:border-box;width:100%;font:inherit;color:#fff;background:#101d3b;border:1px solid #59749a;border-radius:10px;padding:12px}
.accountCard button{display:block;width:100%;min-height:43px;margin-top:9px;border-radius:10px;border:1px solid rgba(156,236,255,.35);background:#152d52;color:#fff;font:700 14px "Trebuchet MS",Verdana,sans-serif;padding:9px;cursor:pointer}
.accountCard button.primary{background:linear-gradient(135deg,#21728c,#5543a4)}
.accountCard button:disabled{opacity:.55;cursor:wait}
#accountStatus,#nameStatus{min-height:20px;color:#a8e9ff;font-size:14px;line-height:1.45}
#accountModal [hidden]{display:none!important}
#accountDeleteControls{border-top:1px solid #59749a;margin-top:24px;padding-top:12px}
#accountDeleteControls p{font-size:13px;line-height:1.5;color:#c3dafa}
.accountCard button.danger{background:#661f36;border-color:#ffa3b5}
.accountCard a{color:#9cecff;overflow-wrap:anywhere}
.accountLegal{font-size:13px;margin-top:20px;line-height:1.5}
.accountCard :focus-visible,#nameModal :focus-visible{outline:2px solid #9cecff;outline-offset:3px}