*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:#202024;color:#ffffff;font-family:Arial,Helvetica,sans-serif;touch-action:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;color:inherit;background:transparent;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #b883ff;outline-offset:5px}button:hover{opacity:.72}[hidden]{display:none!important}#shell{height:100dvh;max-width:1240px;margin:auto;padding:0 36px;display:flex;flex-direction:column}header{height:76px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.wordmark{color:inherit;text-decoration:none;font-size:11px;letter-spacing:2px;font-weight:bold}.wordmark span{color:#a68ac5;margin:0 10px}.tools{display:flex;gap:20px;font-size:12px}.tools span{margin-left:8px}#stage{position:relative;flex:1;min-height:0;border:1px solid #695278;background:#241334;overflow:hidden}canvas{display:block;width:100%;height:100%}#hud{position:absolute;inset:25px 30px auto;display:flex;gap:30px;pointer-events:none}small{display:block;font-size:9px;letter-spacing:2px;font-weight:bold;color:#c1b3d0}#hud strong{font-size:34px;font-weight:400;line-height:1.3;font-variant-numeric:tabular-nums}#hud .best strong{font-size:22px;color:#c1b3d0}#pace{margin-left:auto;font-size:11px;color:#af97c6}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#201927ed;transition:opacity .12s}#overlay.menu-mode{justify-content:flex-start;background:transparent;padding-left:8%}.panel{max-width:540px;text-align:center;padding:24px}.menu-mode .panel{text-align:left;padding:0}h1{font-size:clamp(38px,5.8vw,76px);line-height:.92;letter-spacing:-4px;margin:25px 0;font-weight:900;position:relative}h1 span{font-weight:400}h1 sup{font-size:60px;color:#bc8df5;position:absolute;right:-45px;top:-9px}.eyebrow{font-size:9px;font-weight:bold;letter-spacing:2px;color:#bf91f5}p{font-size:14px;line-height:1.8;color:#c1b3d0}.intro{font-size:16px;line-height:1.6;margin:24px 0}.primary{display:flex;justify-content:space-between;align-items:center;min-width:210px;gap:50px;background:#8046b5;color:#ffffff;padding:16px 22px;font-size:15px;margin:24px auto 10px}.menu-mode .primary{margin-left:0}.text{display:block;margin:12px auto;font-size:12px;padding:6px}.menu-mode .text{margin-left:0;padding-left:0}.keyhint{font-size:8px;letter-spacing:1.4px;margin-top:28px;color:#aa91bf}h2{font-weight:400;font-size:46px;letter-spacing:-2px;margin:15px 0}.result{display:flex;justify-content:center;gap:52px;margin:28px 0}.result strong{font-size:60px;font-weight:400}.result small{margin-top:7px}footer{height:48px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1.6px;color:#aa91bf}#touchbar{display:none;flex-shrink:0;align-items:center;gap:25px;justify-content:center;height:126px}#pad{width:108px;height:108px;background:#dedfd7;border:1px solid #b9bdb0;border-radius:50%;position:relative;touch-action:none}#pad span{position:absolute;color:#777d6e;font-size:16px}.north{top:4px;left:47px}.south{bottom:4px;left:47px}.west{left:7px;top:44px}.east{right:7px;top:44px}#thumb{position:absolute;left:35px;top:35px;width:36px;height:36px;border-radius:50%;background:#626b52;pointer-events:none}#touchbar p{font-size:10px;letter-spacing:1px}#touchbar p span{font-size:8px}#fatal{position:absolute;inset:20px;background:#fff;padding:30px;z-index:10}@media(pointer:coarse){#touchbar{display:flex}footer{height:28px}.keyhint{display:none}#shell{padding:0 16px}header{height:48px}}@media(max-height:550px) and (pointer:coarse){#shell{padding-right:145px;padding-left:18px}#touchbar{position:absolute;right:15px;top:50%;transform:translateY(-35%);width:120px;flex-direction:column;gap:5px}#touchbar p{font-size:8px;text-align:center}#touchbar p span{display:none}header{height:38px}footer{height:24px}h1{font-size:42px;letter-spacing:-2px;margin:16px 0}.intro{font-size:12px;margin:15px 0}.primary{padding:12px 20px;margin-top:15px}.eyebrow{font-size:8px}h2{font-size:34px;margin:5px}p{font-size:12px;line-height:1.5}.panel{padding:12px}.result{margin:12px;gap:35px}.result strong{font-size:40px}.text{margin:5px auto}#hud{inset:12px 18px auto}#pace{display:none}}@media(max-width:600px){h1{font-size:40px;letter-spacing:-2px}h1 sup{font-size:40px;right:-28px}.wordmark{font-size:8px;letter-spacing:1px}.tools{gap:8px;font-size:10px}#hud{inset:18px}#pace{display:none}footer{font-size:6px;letter-spacing:1px}.eyebrow{font-size:7px}.menu-mode .panel{max-width:90%}#overlay.menu-mode{padding-left:7%}h2{font-size:36px}}
/* Direct head dragging uses the whole arena on mouse and touch. */
canvas{touch-action:none;cursor:grab}canvas.dragging{cursor:grabbing}#touchbar{display:none!important}#fatal{background:#202024;color:white}.primary{background:#8046b5}.tools button{background:#302839;border-radius:5px;padding:8px 12px}@media(max-height:550px) and (pointer:coarse){#shell{padding:0 18px}}
/* Letterboxing and page chrome stay charcoal; purple belongs to the arena. */
html,body,#shell,header,footer,#stage{background:#202024}#stage{border-color:#202024}
/* The joystick occupies its own charcoal rail, never the arena. */
#shell{position:relative}.control-toggle{display:flex;gap:2px;padding:3px;background:#151518;border-radius:7px}.tools{align-items:center;gap:12px}.tools .control-toggle button{background:transparent;color:#b8a7c8;padding:8px 12px}.tools .control-toggle button[aria-pressed="true"]{background:#8046b5;color:#fff}.joystick-mode{padding-right:174px!important}.joystick-mode canvas{cursor:default}#joystick-dock{position:absolute;right:20px;top:50%;transform:translateY(-25%);width:128px;text-align:center}#joystick{width:120px;height:120px;margin:auto;border:2px solid #775992;border-radius:50%;background:#2c2434;position:relative;touch-action:none;user-select:none;cursor:grab}#joystick:active{cursor:grabbing}.joystick-arrows{position:absolute;inset:0;display:grid;place-items:center;font-size:108px;line-height:1;color:#735783;pointer-events:none}.joystick-knob{position:absolute;left:calc(50% - 21px);top:calc(50% - 21px);width:42px;height:42px;border-radius:50%;background:#aa73df;border:2px solid #d5b6f2;pointer-events:none;box-shadow:0 3px 10px #0005}#joystick-dock p{font-size:9px;letter-spacing:1.5px;margin:14px 0;color:#d5b6f2}#joystick-dock p span{display:block;font-size:7px;letter-spacing:.5px;margin-top:6px}.joystick-mode header{gap:12px}.joystick-mode .wordmark{letter-spacing:1px;font-size:9px}
@media(max-width:600px) and (orientation:portrait){header{height:78px;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px}.wordmark{width:100%;text-align:center}.joystick-mode{padding-right:16px!important;padding-bottom:152px!important}#joystick-dock{top:auto;bottom:9px;right:auto;left:50%;transform:translateX(-50%)}#joystick{width:106px;height:106px}#joystick-dock p{margin:6px 0}#joystick-dock p span{display:none}.tools{gap:10px}}
@media(max-height:550px) and (orientation:landscape){.joystick-mode{padding-right:148px!important}#joystick-dock{right:10px;width:120px}.joystick-mode .wordmark{font-size:8px}.tools{gap:7px}.tools button,.tools .control-toggle button{padding:6px 8px}.joystick-mode header{gap:6px}}
#death-retry{position:absolute;right:20px;bottom:20px;padding:12px 20px;background:#8046b5;color:white;border-radius:5px;z-index:4}