:root{color-scheme:dark;font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:#f3f0e7;background:#171d1b}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}#lobby{position:fixed;inset:0}canvas{display:block;width:100%;height:100%}
header{position:absolute;top:30px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{font-size:16px;font-weight:650;letter-spacing:2px}.brand i{font-style:normal;color:#b3a984;margin:0 12px}.edition{font-size:10px;letter-spacing:2px;color:#a9b6ac}
.heading{position:absolute;top:10%;left:0;right:0;text-align:center;pointer-events:none}.heading p{font-size:12px;letter-spacing:5px;color:#c1cabb;margin:0 0 10px}.heading h1{font-size:clamp(24px,3vw,42px);font-weight:600;letter-spacing:7px;margin:0;text-shadow:0 2px 24px #101a14}
.gate-label{position:absolute;transform:translate(-50%,-100%);text-decoration:none;display:flex;flex-direction:column;align-items:center;min-width:170px;padding:14px 20px;color:var(--accent);text-shadow:0 2px 12px #101916;background:linear-gradient(0deg,#151c1bef, #151c1b00);border-bottom:2px solid var(--accent);transition:filter .2s,background .2s}.survival{--accent:#ffd18a;left:24%;top:52%}.racing{--accent:#92efff;left:76%;top:52%}.gate-label small{font-size:10px;letter-spacing:2px}.gate-label strong{font-size:36px;letter-spacing:5px;margin:6px 0}.gate-label strong span{font-size:20px;letter-spacing:0}.gate-label em{font-style:normal;font-size:11px;color:#d9e1d8}.gate-label:hover,.gate-label:focus-visible{filter:brightness(1.25);background:#1b2424dd;outline:2px solid var(--accent);outline-offset:4px}
footer{position:absolute;bottom:26px;left:36px;right:36px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#b5c0b6}kbd{display:inline-block;padding:4px 7px;margin-right:3px;border:1px solid #6a756666;border-radius:3px;color:#f2efdf;font:11px inherit}button{font:inherit;cursor:pointer;color:inherit;background:#202a23;border:1px solid #68736166;border-radius:4px;padding:9px 12px}button:hover{color:white;border-color:#b8c5ae}#hint{color:#dadac5}#touchPad{position:absolute;bottom:80px;left:20px;display:grid;grid-template-columns:repeat(3,42px);gap:5px;touch-action:none}#touchPad[hidden]{display:none}#touchPad button:first-child{grid-column:2}#touchPad button:nth-child(2){grid-column:1}
@media(max-width:700px){header{top:20px;left:20px;right:20px}.edition{display:none}.brand{font-size:13px}.heading{top:12%}.heading p{letter-spacing:3px}.gate-label{min-width:120px;padding:10px 8px}.gate-label strong{font-size:27px}.gate-label small{font-size:9px;letter-spacing:1px}.gate-label em{font-size:9px}footer{left:20px;right:20px;bottom:18px;flex-wrap:wrap}footer>span:first-child{display:none}#hint{font-size:11px}}
@media(max-height:550px){.heading{top:12%}.heading p{display:none}.heading h1{font-size:22px}.gate-label{padding:5px 10px}.gate-label strong{font-size:26px;margin:3px}header{top:14px}footer{bottom:12px}}