:root{--bg: #07080f;--glass: rgb(255 255 255 / .08);--glass-hi: rgb(255 255 255 / .18);--line: rgb(255 255 255 / .14);--a: #ff5f7e;--b: #4f8cff}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:#f6f1e6;font-family:ui-sans-serif,system-ui,sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}#shell{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(80% 60% at 50% 40%,#1a2040 0%,transparent 70%),radial-gradient(60% 50% at 80% 100%,#2a1838 0%,transparent 70%),var(--bg)}#bezel{position:relative;line-height:0;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #ffffff0f,0 24px 80px #0009,0 0 120px #506eff14}#game{display:block;image-rendering:auto;background:#07080f}#bezel input{position:absolute;font:600 16px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#f6f1e6;background:#0c0e1ef0;border:1px solid #ffc84a;border-radius:8px;padding:0 .6em;outline:none;line-height:normal}#bezel input::placeholder{color:#f6f1e673}#key-entry{left:7%;top:50%;width:86%;height:9.6%;font-size:11px}#name-entry{left:20.3%;top:50.4%;width:59.4%;height:9.6%}#chat{display:none;left:1.6%;bottom:3%;width:72%;height:9%}#chat.open{display:block}#touch{display:none;width:100%;max-width:520px;padding:18px 22px calc(18px + env(safe-area-inset-bottom));grid-template-columns:auto 1fr auto;align-items:center;gap:10px}#touch button{appearance:none;border:1px solid var(--line);color:#f6f1e6;background:linear-gradient(180deg,var(--glass-hi),var(--glass));backdrop-filter:blur(8px);font:800 16px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.04em;cursor:pointer;box-shadow:0 6px 16px #00000059,inset 0 1px #ffffff2e;transition:transform 80ms ease,filter 80ms ease}#touch button:active{transform:scale(.94);filter:brightness(1.3)}#touch .pad{position:relative;width:150px;height:150px}#touch .d{position:absolute;width:52px;height:52px;border-radius:14px}#touch .d span{display:block;width:0;height:0;margin:auto;border:8px solid transparent}#touch .up{top:0;left:49px}#touch .down{bottom:0;left:49px}#touch .left{top:49px;left:0}#touch .right{top:49px;right:0}#touch .up span{border-bottom-color:#f6f1e6;margin-top:-4px}#touch .down span{border-top-color:#f6f1e6;margin-top:4px}#touch .left span{border-right-color:#f6f1e6;margin-left:10px}#touch .right span{border-left-color:#f6f1e6;margin-left:18px}#touch .hub{position:absolute;left:57px;top:57px;width:36px;height:36px;border-radius:50%;background:#ffffff0d}#touch .mid{display:flex;flex-direction:column;gap:10px;align-items:center}#touch .pill{font-size:11px;padding:8px 14px;border-radius:999px}#touch .ab{position:relative;width:150px;height:130px}#touch .a,#touch .b{position:absolute;width:66px;height:66px;border-radius:50%;font-size:22px}#touch .a{right:0;top:8px;background:linear-gradient(180deg,#ff8aa0,var(--a))}#touch .b{left:0;bottom:8px;background:linear-gradient(180deg,#86b2ff,var(--b))}@media(max-width:820px),(pointer:coarse){#touch{display:grid}#shell{justify-content:flex-start;padding-top:env(safe-area-inset-top)}#bezel{border-radius:0;box-shadow:none}}@media(max-width:440px){#touch{padding:14px 12px calc(14px + env(safe-area-inset-bottom));gap:6px}#touch .pad{width:132px;height:132px}#touch .d{width:46px;height:46px;border-radius:12px}#touch .up,#touch .down{left:43px}#touch .left,#touch .right{top:43px}#touch .hub{left:48px;top:48px}#touch .pill{padding:8px 10px}#touch .ab{width:124px;height:120px}#touch .a,#touch .b{width:58px;height:58px;font-size:20px}}@media(pointer:coarse)and (orientation:landscape){#shell{justify-content:center}#touch{position:fixed;inset:auto 0 0;max-width:none;pointer-events:none;opacity:.55}#touch button{pointer-events:auto}}@media(prefers-reduced-motion:reduce){#touch button{transition:none}#touch button:active{transform:none}}