*{box-sizing:border-box}body{margin:0;background:#090d18;color:#fff;font:14px system-ui,sans-serif;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding: max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.canvas-wrapper{width:min(100%,960px)}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}header strong{letter-spacing:2px}button{font:700 15px system-ui;color:white;background:#253550;border:1px solid #627089;border-radius:12px;min-height:44px;padding:8px 16px;cursor:pointer}button:disabled{opacity:.5}button:focus-visible{outline:3px solid #fff;outline-offset:3px}[hidden]{display:none!important}.stage{width:100%;line-height:0;border:1px solid #35415a;border-radius:10px;overflow:hidden}canvas{display:block;width:100%;height:auto;aspect-ratio:711/400}.keyboard,footer,#status{text-align:center;color:#bbc6da;font-size:12px;margin:8px 0}.touch-controls{display:none;justify-content:space-between;gap:12px;margin-top:12px;touch-action:none;user-select:none;-webkit-user-select:none}.touch-controls>div{display:flex;gap:10px}.touch-controls button{min-width:64px;min-height:60px;touch-action:none;-webkit-touch-callout:none}.touch-controls button.pressed{background:#6a85ad;transform:scale(.96)}.touch-controls .shoot{background:#b51226}.spiderman-game-menu-container{position:fixed!important;z-index:5;background:rgba(5,10,20,.94);border-radius:12px;max-width:95vw;width:300px;padding:8px}.spiderman-game-menu-button{min-height:44px;cursor:pointer!important}.spiderman-game-menu-title{line-height:36px!important}@media(any-pointer:coarse){.touch-controls{display:flex}.keyboard{display:none}}@media(max-width:600px){.touch-controls{display:flex}.keyboard{display:none}header strong{font-size:14px}}@media(orientation:landscape) and (max-height:540px){.canvas-wrapper{width:min(100%,calc((100dvh - 128px)*711/400))}footer,#status{display:none}.touch-controls{margin-top:6px}.touch-controls button{min-height:48px}header{margin-bottom:4px}}

/* Thumb controls sit below the view so they never cover the action. */
.touch-controls{align-items:center}.touch-controls>.joystick-group{display:flex;flex-direction:column;align-items:center;gap:4px}#joystick{position:relative;width:124px;height:124px;border:2px solid #637b9d;border-radius:50%;background:radial-gradient(circle,#263e60,#111c31);touch-action:none;cursor:grab}#joystick-knob{position:absolute;left:50%;top:50%;width:50px;height:50px;border-radius:50%;border:2px solid #a6bedf;background:#4b6a95;box-shadow:0 3px 12px #0008;transform:translate(-50%,-50%);pointer-events:none}.joystick-arrows{position:absolute;inset:10px 0;text-align:center;font-size:20px;line-height:40px;color:#b9cce7;pointer-events:none}.control-hint{font-size:11px;color:#bbc6da}.touch-controls .shoot{width:88px;height:88px;border-radius:50%;font-size:18px;border:2px solid #f56b7d;box-shadow:0 4px 18px #b5122640}.shoot-group{align-items:center}@media(orientation:landscape) and (max-height:540px){.canvas-wrapper{width:min(100%,calc((100dvh - 172px)*711/400))}#joystick{width:104px;height:104px}.touch-controls .shoot{width:78px;height:78px}.control-hint{display:none}}

#joystick{border:3px solid #91a4be;background:#101a2c;overflow:hidden}#joystick .pad-cross{position:absolute;inset:12%;background:#425772;clip-path:polygon(34% 0,66% 0,66% 34%,100% 34%,100% 66%,66% 66%,66% 100%,34% 100%,34% 66%,0 66%,0 34%,34% 34%);pointer-events:none}#joystick>span{pointer-events:none}.pad-up,.pad-left,.pad-right,.pad-down{position:absolute;font:18px system-ui;color:#fff;z-index:1}.pad-up{top:15%;left:50%;transform:translateX(-50%)}.pad-down{bottom:15%;left:50%;transform:translateX(-50%)}.pad-left{left:15%;top:50%;transform:translateY(-50%)}.pad-right{right:15%;top:50%;transform:translateY(-50%)}#joystick-knob{width:32px;height:32px;z-index:2;background:#8ba9d0cc;border:2px solid #c6daf5}.touch-controls{display:flex}.spiderman-game-menu-button{display:block;width:100%;border:0;background:transparent;border-radius:6px}.spiderman-game-menu-title{font-size:16px!important}.spiderman-game-menu-container{max-height:90dvh;overflow:auto}

.player-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0;font-size:13px}.player-bar button{font-size:12px;padding:6px 10px}dialog{width:min(94vw,480px);max-height:90dvh;overflow:auto;background:#111c31;color:#fff;border:1px solid #637b9d;border-radius:16px;padding:20px;font:14px system-ui}dialog::backdrop{background:#000b}.account-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.account-heading h2{margin:0;font-size:20px}dialog label{display:block;margin:12px 0}dialog input{display:block;width:100%;margin-top:5px;padding:12px;background:#080e1a;color:white;border:1px solid #637b9d;border-radius:8px;font:16px system-ui}.account-actions{display:flex;gap:8px;flex-wrap:wrap}.privacy-note{color:#bbc6da;font-size:12px}#account-feedback{color:#ffcf87}#leaderboard{padding-left:28px}#leaderboard li{padding:8px}#leaderboard li span{float:right;font-weight:bold}@media(orientation:landscape) and (max-height:540px){.canvas-wrapper{width:min(100%,calc((100dvh - 220px)*711/400))}.player-bar{margin:4px 0}}