:root{--bg:#0f1222;--panel:#14182cd9;--text:#eef0ff;--muted:#9aa0c7;--x:#ff5d73;--o:#4fc3ff}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);touch-action:none;-webkit-user-select:none;user-select:none;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#scene{width:100%;height:100%;display:block;position:fixed;inset:0}#hud{padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;pointer-events:none;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex;position:fixed;top:0;left:0;right:0}#hud>*{pointer-events:auto}#status{background:var(--panel);border-radius:12px;padding:8px 14px;font-size:1.25rem;font-weight:700}#status.x{color:var(--x)}#status.o{color:var(--o)}#controls{flex-wrap:wrap;gap:6px;display:flex}select,button{font:inherit;color:var(--text);background:var(--panel);border:1px solid #343a66;border-radius:10px;min-height:40px;padding:8px 10px;font-size:.95rem}button{cursor:pointer;font-weight:600}button:active{transform:scale(.97)}#layers{left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 12px);pointer-events:none;justify-content:center;display:flex;position:fixed}#layers label{pointer-events:auto;background:var(--panel);color:var(--muted);border-radius:12px;align-items:center;gap:10px;padding:8px 14px;display:flex}input[type=range]{width:150px}#hud .left{align-items:center;gap:8px;display:flex}#menu{color:var(--text);background:var(--panel);border:1px solid #343a66;border-radius:10px;place-items:center;min-width:40px;height:40px;font-size:1.1rem;text-decoration:none;display:grid}#menu .ic{width:22px;height:22px}:focus-visible{outline-offset:2px;outline:3px solid #ffe066}:root{--display:"Oswald", "Arial Narrow", system-ui, sans-serif;--body:"Inter", system-ui, sans-serif;--accent:#ffe066;--cut:8px}html,body{font-family:var(--body)}#status{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);border-radius:0;font-weight:600}select,button,#menu,#layers label{clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));border:1px solid #eef0ff29;border-radius:0}select{appearance:none;font-family:var(--display);letter-spacing:.04em;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;background-size:16px;padding-right:34px;font-weight:500}select option{color:var(--text);background:#14182c}#restart{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;background:var(--accent);color:#1b1600;border-color:#0000;font-weight:600}#layers label{font-family:var(--display);letter-spacing:.06em;text-transform:uppercase;font-size:.85rem}input[type=range]{accent-color:var(--accent)}
