@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--paper:#faf7f2;--peach:#f6dcd1;--ink:#2d2525;--muted:#8a756b;--red:#d20043;--blue:#00aeff;--green:#067b06;--border:#e6ddd4}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,'PingFang SC',sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #d20043;outline-offset:4px}[hidden]{display:none!important}header,main,footer{max-width:1280px;margin:auto}header{height:106px;display:flex;align-items:center;justify-content:space-between;padding:0 40px}.brand{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;letter-spacing:-2px;text-decoration:none;color:var(--ink);display:flex;align-items:center}.brand span{color:var(--red)}.brand i{width:7px;height:7px;background:var(--red);border-radius:50%;margin:5px 0 0 16px}.header-right{display:flex;gap:28px;align-items:center}.edition,.eyebrow,.index,.arena-label,.micro,kbd,.topline,.hud-right,footer,#room-bar{font-family:'Space Grotesk',system-ui,sans-serif}.edition,.eyebrow,.index{font-size:10px;letter-spacing:2px;font-weight:500}.edition{color:var(--muted)}.icon-button{border:1px solid var(--border);border-radius:50px;background:transparent;padding:9px 13px;min-height:40px;min-width:40px}.icon-button span{font-size:10px;padding-left:5px}main{padding:0 40px}.topline{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);margin:6px 2px 15px}.topline>span:first-child{display:flex;align-items:center;gap:7px}.live-dot{width:5px;height:5px;background:var(--red);border-radius:50%}.topline b{color:var(--ink);font-size:16px;margin:0 5px}#arena{position:relative;width:100%;aspect-ratio:3/2;border:1px solid #e6cfc4;border-radius:4px;background:var(--peach);overflow:hidden;isolation:isolate}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}#arena.playing canvas{cursor:crosshair}.overlay{position:absolute;inset:0;display:grid;place-items:center}.menu-content{text-align:center;padding:35px 20px}.eyebrow{color:var(--muted)}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(70px,10.5vw,140px);line-height:1;letter-spacing:-10px;font-weight:700;margin:25px 0 22px;color:#61473f}h1 span{color:var(--red)}.tagline{font-size:18px;line-height:1.8;color:#7b5c50;font-weight:500;letter-spacing:2px;margin-bottom:29px}.primary{display:flex;justify-content:space-between;align-items:center;gap:40px;background:var(--ink);color:var(--paper);border:0;min-height:54px;padding:16px 24px;border-radius:3px;width:265px;margin:0 auto;text-align:left;font-size:14px}.primary:hover{background:#61473f}.primary span{font-size:22px;line-height:1}.secondary-row{display:flex;justify-content:center;gap:25px;margin:19px 0 22px}.secondary-row button,.text-button{border:0;background:transparent;color:#61473f;font-size:12px;padding:9px 0;min-height:36px}.secondary-row button span{display:block;color:#a18272;font-size:10px;margin-top:4px}.secondary-row button:hover,.text-button:hover{text-decoration:underline}.micro{font-size:10px;letter-spacing:.5px;color:#a18272}.arena-label{position:absolute;bottom:22px;left:28px;font-size:8px;letter-spacing:2px;color:#ad8e7e}#hud{position:absolute;top:28px;left:30px;right:25px;display:flex;justify-content:space-between;pointer-events:none}#hud .eyebrow{font-size:9px;color:#967a6c}#clock{display:block;font-family:'Space Grotesk',sans-serif;font-size:clamp(38px,6vw,72px);letter-spacing:-3px;line-height:1.1;font-weight:500;color:#73544888}#clock small{font-size:18px;letter-spacing:0;margin-left:5px}.hud-right{display:flex;gap:16px;align-items:start;font-size:10px;letter-spacing:1px;color:#967a6c}.hud-right>span{margin-top:15px}.hud-right button{pointer-events:auto;background:#f6dcd1aa;border-color:#c7ac9b}#effect{position:absolute;left:30px;bottom:30px;font-size:13px;background:#faf7f2bb;padding:10px 15px;border-radius:30px;pointer-events:none}.modal{background:#f6dcd1ed;backdrop-filter:blur(9px);z-index:5}.dialog{text-align:center;max-width:390px;padding:25px;width:100%}h2{font-size:32px;line-height:1.5;letter-spacing:-1px;margin:15px 0 25px;color:#61473f;font-weight:600}.dialog p{font-size:12px;line-height:1.8;color:var(--muted)}.dialog .text-button{margin:8px 12px}.result-time{font:600 86px/1.1 'Space Grotesk',sans-serif;letter-spacing:-5px;color:var(--red)}.result-time small{font-size:16px;letter-spacing:0;margin-left:10px}#result-message{margin:22px 0}.dialog label{display:block;text-align:left;font-size:11px;color:var(--muted);margin:12px 0 6px}.dialog input{width:100%;height:44px;border:1px solid #cbb0a0;background:#fff8f2;padding:10px;border-radius:3px;font:14px 'Space Grotesk',sans-serif}.dialog input#room-code{text-transform:uppercase;letter-spacing:4px}.dialog .primary{margin-top:22px;max-width:100%}#room-error{color:var(--red)}#room-bar{position:absolute;bottom:14px;left:20px;right:20px;display:flex;align-items:center;gap:12px;background:#faf7f2d9;padding:8px 12px;border-radius:4px;font-size:10px}#room-bar button{background:none;border:0;color:#61473f;font-size:11px;padding:8px}#room-label{margin-right:auto}#toast{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);padding:10px 18px;color:white;background:var(--ink);font-size:12px;border-radius:30px;white-space:nowrap;z-index:8}#controlbar{display:flex;align-items:center;justify-content:space-between;padding:18px 0 24px;border-bottom:1px solid var(--border)}.legend{display:flex;gap:24px;color:var(--muted);font-size:11px}.legend span{display:flex;gap:7px;align-items:center}.ball{width:8px;height:8px;display:inline-block;border-radius:50%}.player{background:var(--ink)}.enemy{background:var(--red)}.speed{background:var(--blue)}.shrink{background:var(--green)}#shield{display:flex;align-items:center;gap:10px;color:var(--ink);background:transparent;border:1px solid #d3c7bc;border-radius:4px;padding:11px 14px;min-height:44px;font-size:11px}#shield b{font-size:14px}#shield kbd{background:#eee8e1;font-size:8px;border:1px solid #e2d7cc;border-radius:2px;padding:3px 5px}.shield-icon{font-size:20px;color:#967a6c}.guide{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:36px 0 40px}.index{color:#aa9283;font-size:9px;letter-spacing:1px}.guide h3{font-size:15px;font-weight:500;margin:15px 0 9px}.guide p{color:var(--muted);font-size:11px;line-height:1.9;margin:0}#records{border-top:1px solid var(--border);padding:25px 0}#record-list{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}#record-list span{font:13px 'Space Grotesk',sans-serif;padding:9px 14px;border:1px solid var(--border);border-radius:30px}#record-list small{font-size:9px;color:var(--muted);margin-left:9px}footer{display:flex;justify-content:space-between;color:#a28b7b;border-top:1px solid var(--border);padding:24px 40px 35px;font-size:9px;letter-spacing:.3px}footer a{color:var(--muted);text-decoration:none}#arena.playing{box-shadow:0 6px 30px #61473f0b}@media(min-width:1400px){header{height:120px}}@media(max-width:700px){header{height:79px;padding:0 20px}.brand{font-size:27px}.edition{display:none}.header-right{gap:8px}main{padding:0 16px}.topline{font-size:9px;margin-top:0}#arena{aspect-ratio:3/4}.menu-content{padding:20px 12px}h1{font-size:85px;letter-spacing:-6px;margin-top:26px}.eyebrow{font-size:8px;letter-spacing:1.5px}.tagline{font-size:16px}.primary{min-height:50px;width:240px}.arena-label{left:16px;bottom:17px;font-size:6px;letter-spacing:1px}.legend{gap:13px;font-size:9px}.legend span{gap:4px}.ball{width:6px;height:6px}#controlbar{padding:14px 0;gap:6px}#shield{gap:6px;padding:8px 10px;font-size:10px}#shield kbd{display:none}.shield-icon{font-size:17px}.guide{gap:22px;grid-template-columns:1fr;margin:27px 0}.guide>div{position:relative;padding-left:105px;min-height:60px}.guide .index{position:absolute;left:0;top:4px;font-size:8px;letter-spacing:.5px}.guide h3{margin:0 0 5px;font-size:13px}.guide p{font-size:10px}.guide p br{display:none}footer{margin:0 16px;padding:20px 0;font-size:8px;flex-wrap:wrap;gap:12px}footer>span:last-child{display:none}#hud{top:19px;left:18px;right:14px}#clock{font-size:47px}.hud-right{gap:6px;font-size:8px}#effect{left:16px;bottom:20px;font-size:11px}.dialog{padding:20px;max-width:340px}h2{font-size:26px;margin:10px 0 18px}.result-time{font-size:70px}#room-bar{left:8px;right:8px;bottom:8px;padding:4px 6px;gap:5px;font-size:8px}#room-bar button{font-size:10px}.dialog input{height:40px}.dialog p{font-size:11px}.dialog label{margin-top:8px}.dialog .primary{margin-top:16px}.dialog .text-button{margin:2px 8px}#records{padding:20px 0}}@media(max-height:540px) and (orientation:landscape){header{height:55px}#arena{aspect-ratio:2.4}h1{font-size:58px;margin:8px 0}.tagline{font-size:12px;margin:8px}.secondary-row{margin:5px}.micro,.arena-label,.menu-content>.eyebrow{display:none}.menu-content{padding:10px}.primary{min-height:40px;padding:8px 20px}.dialog{padding:10px}h2{font-size:20px;margin:5px}.result-time{font-size:46px}.dialog p{margin:5px}.dialog label{margin:2px}.dialog input{height:32px}#room-panel h2{display:none}#room-panel .dialog{max-width:500px}#room-panel .primary{margin-top:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}