@import url('data:text/css,');
:root{font-family:Arial,Helvetica,sans-serif;color:#e7c6ff;background:#10091f;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden;touch-action:none;user-select:none}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:#d9c1ee;background:#251537;border:1px solid #784ba455;padding:13px 22px;border-radius:6px;cursor:pointer;transition:.2s}button:hover{background:#462076;border-color:#c58aff;box-shadow:0 0 24px #9250e833}button:focus-visible{outline:2px solid #e7c6ff;outline-offset:4px}[hidden]{display:none!important}#stage{position:fixed;inset:0}canvas{width:100%;height:100%;display:block}.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse,transparent 42%,#090611aa 100%)}header{position:fixed;left:4%;right:4%;top:24px;display:flex;justify-content:space-between;align-items:center;z-index:5}#brand{font-size:24px;font-weight:900;letter-spacing:-2px;text-decoration:none;color:#e7c6ff}#brand span{color:#9250e8;font-size:20px}#brand small{letter-spacing:2px;font-size:9px;margin-left:15px;font-weight:500}.topright{display:flex;align-items:center;gap:10px}.topright button{padding:7px 12px;background:#120d22aa}.live{font-size:9px;letter-spacing:2px;color:#967faa;margin-right:12px}.overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:4;background:radial-gradient(ellipse at center,#10091fce 0%,#10091f88 40%,transparent 75%)}.eyebrow{letter-spacing:4px;color:#b39ac9;font-size:10px;font-weight:600}h1{font-size:clamp(64px,10vw,132px);line-height:.81;letter-spacing:-7px;margin:30px 0 22px;text-align:center;font-weight:900;color:#f0dfff;text-shadow:0 0 50px #9250e855;font-style:italic}h1 span{display:block;color:#b276ff;letter-spacing:13px;padding-left:17px;font-size:1.16em}p.tagline{font-size:15px;letter-spacing:1px;color:#b7a1cd;margin-bottom:30px}em{color:#ead5ff;font-style:normal}.primary{background:linear-gradient(110deg,#9250e8,#6332b7);border:1px solid #c58aff88;color:#fff;padding:19px 30px;min-width:280px;font-size:11px;font-weight:bold;letter-spacing:2px;box-shadow:0 0 34px #9250e82b;display:flex;justify-content:space-between;gap:30px}.primary:hover{background:#a568ef;transform:translateY(-1px)}.instructions{display:flex;gap:50px;margin-top:33px;text-align:center}.instructions div{display:flex;flex-direction:column;gap:8px}.instructions i{font-style:normal;font-size:28px;color:#c58aff;height:30px;text-shadow:0 0 15px #9250e8}.instructions .gateIcon{color:#dc719e;font-size:22px}.instructions b{font-size:9px;letter-spacing:2px}.instructions span{font-size:11px;color:#9582aa}.controls{display:flex;align-items:center;gap:9px;color:#887297;font-size:10px;margin-top:28px}.controls span{margin-left:15px}kbd{font-family:inherit;border:1px solid #79608744;padding:6px;border-radius:4px;color:#c3afd3;font-size:9px}.record{margin-top:22px;font-size:9px;letter-spacing:2px;color:#8f79a2}.record b{color:#d3b7ee;margin-left:12px}footer{position:fixed;bottom:22px;left:4%;right:4%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;color:#716080;pointer-events:none}footer b{color:#9250e8;margin:0 8px}#hud{position:fixed;left:7%;right:7%;top:78px;display:flex;justify-content:space-between;pointer-events:none}label{font-size:9px;letter-spacing:2px;color:#a58cb8}#hud strong{display:block;font-size:30px;font-weight:400;letter-spacing:2px;margin-top:6px;font-variant-numeric:tabular-nums}#hud .multi{text-align:center;color:#c58aff}#hud .right{text-align:right}#bestHud{color:#8d759f;font-size:11px}.panel{background:#10091fdd;backdrop-filter:blur(9px);gap:18px}.panel h2{font-size:clamp(32px,6vw,62px);letter-spacing:-2px;margin:2px 0 10px}.panel h2 span{color:#9250e8}.panel>button:not(.primary){min-width:280px}.bigScore{font-size:64px;letter-spacing:-2px;color:#fff}.results{display:flex;gap:40px;margin:5px 0 20px;text-align:center}.results b{display:block;margin-top:10px;font-size:20px;font-weight:400}.setting{display:flex;align-items:center;justify-content:space-between;width:300px;letter-spacing:0;font-size:14px;padding:15px 0;border-bottom:1px solid #9250e822}input{accent-color:#9250e8}#joystick{display:none;position:fixed;left:35px;bottom:70px;width:112px;height:112px;border:1px solid #c58aff55;background:#9250e80d;border-radius:50%;z-index:3;touch-action:none}#knob{position:absolute;left:36px;top:36px;width:40px;height:40px;border-radius:50%;background:#c58aff44;border:1px solid #c58affaa;box-shadow:0 0 25px #9250e833}#hint{position:fixed;bottom:55px;width:100%;text-align:center;font-size:9px;letter-spacing:3px;color:#ac8dc5;pointer-events:none;display:none}#flash{position:fixed;inset:0;background:#e7c6ff;opacity:0;pointer-events:none;z-index:6}body.playing #hint{display:block}body.playing footer{opacity:.5}@media(pointer:coarse){body.playing #joystick{display:block}}@media(max-height:650px){header{top:12px}h1{font-size:70px;margin:20px 0 10px}.instructions{margin-top:18px;gap:30px}.controls{margin-top:15px}.record{margin-top:12px}p.tagline{margin:8px 0 20px}footer{bottom:12px}.eyebrow{font-size:8px}#hud{top:52px}#hud strong{font-size:23px}}@media(max-width:600px){header{top:18px}#brand small,.live{display:none}h1{font-size:88px}.eyebrow{font-size:8px;letter-spacing:2px}.instructions{gap:18px}.instructions span{max-width:90px;line-height:1.5}.instructions b{font-size:8px;letter-spacing:1px}.controls{flex-wrap:wrap;justify-content:center;max-width:280px}.controls span{width:100%;text-align:center;margin:7px 0 0}footer{font-size:7px;letter-spacing:1px}footer span:last-child{display:none}#hud{top:72px}#hud strong{font-size:23px}#hud label{font-size:7px}.results{gap:22px}#hint{bottom:32px;font-size:7px}.panel{padding:20px}#joystick{bottom:75px}}

/* Landscape touch: keep the fixed arena tall and every gameplay control beside it. */
body.landscape-play header{inset:0;pointer-events:none}
body.landscape-play #brand,body.landscape-play .live,
body.landscape-play footer,body.landscape-play #hint{display:none!important}
body.landscape-play .topright{position:fixed;right:0;bottom:max(12px,env(safe-area-inset-bottom));width:var(--side-rail);display:flex;flex-direction:column;gap:8px;pointer-events:auto;padding-right:env(safe-area-inset-right)}
body.landscape-play .topright button{width:44px;height:42px;padding:8px;font-size:20px}
body.landscape-play #hud{inset:0;display:block}
body.landscape-play #hud>div{position:absolute;width:var(--side-rail);padding:0 8px;text-align:center;overflow:hidden}
body.landscape-play #hud>div:first-child{left:0;top:7%;padding-left:max(8px,env(safe-area-inset-left))}
body.landscape-play #hud>.multi{right:0;top:7%;padding-right:max(8px,env(safe-area-inset-right))}
body.landscape-play #hud>.right{right:0;top:30%;padding-right:max(8px,env(safe-area-inset-right))}
body.landscape-play #hud label{font-size:8px;letter-spacing:1px}
body.landscape-play #hud strong{font-size:clamp(17px,4.5vh,28px);letter-spacing:0;margin-top:5px;overflow-wrap:anywhere}
body.landscape-play #bestHud{display:block;margin-top:4px;font-size:10px}
body.landscape-play #joystick{left:calc((var(--side-rail) - var(--stick-size))/2);bottom:max(18px,env(safe-area-inset-bottom));width:var(--stick-size);height:var(--stick-size)}
body.landscape-play #knob{width:36%;height:36%;left:32%;top:32%}
@media(orientation:landscape) and (max-height:430px){
 .panel{gap:9px}.panel h2{font-size:28px;margin:0}.panel .bigScore{font-size:36px}
 .panel .results{margin:0 0 7px}.panel .primary{padding:13px 20px}.panel>button:not(.primary){padding:9px 18px}
 .panel .setting{padding:8px 0}.panel .results b{margin-top:4px;font-size:17px}
}

/* Thumb preference is shared by portrait and landscape layouts. */
.setting select{font:inherit;color:#e7c6ff;background:#251537;border:1px solid #784ba4;border-radius:5px;padding:7px 12px;min-width:100px;touch-action:manipulation}
body[data-stick-side="right"] #joystick{left:auto;right:max(35px,env(safe-area-inset-right))}
body.landscape-play[data-stick-side="right"] #joystick{left:auto;right:calc((var(--side-rail) - var(--stick-size))/2)}
body.landscape-play[data-stick-side="right"] .topright{right:auto;left:0;padding-right:0;padding-left:env(safe-area-inset-left)}
body.landscape-play[data-stick-side="right"] #hud>div:first-child{left:auto;right:0;padding-left:8px;padding-right:max(8px,env(safe-area-inset-right))}
body.landscape-play[data-stick-side="right"] #hud>.multi,
body.landscape-play[data-stick-side="right"] #hud>.right{right:auto;left:0;padding-right:8px;padding-left:max(8px,env(safe-area-inset-left))}
#settings{overflow-y:auto;padding:18px 0}
@media(orientation:landscape) and (max-height:350px){#settings{justify-content:flex-start;gap:6px}#settings .eyebrow{display:none}#settings h2{font-size:23px}#settings .setting{padding:4px 0}#settings>button{padding:8px 18px}}

/* A single thumb-side panel, with a double-size joystick below the compact HUD. */
body.landscape-play #hud{left:calc(var(--controls-left) + 8px);right:auto;top:8px;bottom:auto;width:calc(var(--controls-width) - 108px);display:flex;gap:4px;align-items:flex-start}
body.landscape-play #hud>div{position:static!important;flex:1;min-width:0;width:auto!important;padding:0!important;text-align:center!important}
body.landscape-play #hud label{font-size:7px;letter-spacing:0}
body.landscape-play #hud strong{font-size:17px;margin-top:5px}
body.landscape-play #bestHud{font-size:9px;margin-top:2px}
body.landscape-play .topright{left:calc(var(--controls-left) + var(--controls-width) - 96px)!important;right:auto!important;top:8px;bottom:auto;width:88px;flex-direction:row;gap:4px;padding:0!important}
body.landscape-play .topright button{width:42px;height:42px}
body.landscape-play #joystick{left:calc(var(--controls-left) + (var(--controls-width) - var(--stick-size))/2)!important;right:auto!important;bottom:8px;width:var(--stick-size);height:var(--stick-size)}
@media(pointer:coarse) and (orientation:portrait){#joystick{width:224px;height:224px;left:18px;bottom:58px}body[data-stick-side="right"] #joystick{right:18px}#knob{width:36%;height:36%;left:32%;top:32%}}