:root{--navy: #181838;--navy-2: #202058;--frame: #f8f8f8;--frame-dark: #7878a8;--text: #f8f8f8;--muted: #b8b8c8;--gold: #f8d830;--side: clamp(280px, 28vw, 420px);color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:#000;color:var(--text);font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overscroll-behavior:none}#app{height:100dvh}canvas.px,.label canvas,.screen,.overlay,.map{image-rendering:pixelated}.label{display:inline-flex;align-items:center;line-height:0}.bind-row>.label{max-width:100%;overflow:hidden}.label canvas{zoom:var(--s, 2)}.panel{background:var(--navy);border:3px solid var(--frame);border-radius:10px;box-shadow:inset 0 0 0 2px var(--navy),inset 0 0 0 4px var(--frame-dark),0 0 0 2px #000;padding:12px}.center{max-width:460px;margin:10vh auto 0;display:flex;flex-direction:column;gap:12px;align-items:stretch;text-align:center}.center h1{margin:0;font-size:20px;color:var(--gold)}.logo{display:flex;justify-content:center}.error{color:#f87878;min-height:1.4em;margin:0}.btn{background:var(--navy-2);color:var(--text);border:2px solid var(--frame);border-radius:6px;padding:8px 12px;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;gap:6px;font:inherit}.btn:hover:not(:disabled),.btn:focus-visible{border-color:var(--gold);outline:none}.btn.primary{background:#384890}.btn:disabled{opacity:.45;cursor:default}.btn.small{padding:3px 6px}input,select{background:#000018;color:var(--text);border:2px solid var(--frame-dark);border-radius:4px;padding:8px;font:inherit;min-width:0}input:focus,select:focus{outline:none;border-color:var(--gold)}.row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.login{display:flex;flex-direction:column;gap:10px}.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mode{background:#000018;border:2px solid var(--frame-dark);border-radius:8px;padding:10px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font:inherit}.mode.on{border-color:var(--gold);background:var(--navy-2);color:var(--text)}.progress{height:12px;border:2px solid var(--frame);border-radius:6px;overflow:hidden}.bar{height:100%;width:0;background:var(--gold);transition:width .2s}.game{display:flex;height:100dvh;width:100vw;overflow:hidden}.stage{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000}.screen-wrap{position:relative;aspect-ratio:4 / 3;width:min(100%,calc(100dvh * 4 / 3))}.screen,.overlay{position:absolute;inset:0;width:100%;height:100%}.overlay{pointer-events:none}.toasts{position:absolute;top:24%;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}.toast{background:#181838d9;border:2px solid var(--frame);border-radius:6px;padding:4px 8px;animation:fade 2.5s forwards}@keyframes fade{80%{opacity:1}to{opacity:0}}.side{flex:0 0 var(--side);display:flex;flex-direction:column;gap:8px;padding:8px;background:#080818;min-height:0}.side header{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:space-between;align-items:center;padding:0 4px;min-height:24px}.side .panel{display:flex;flex-direction:column;gap:8px;padding:8px 10px}.near{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:22dvh;overflow:auto}.near li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.near li.ghost{opacity:.6}.near li .btn{margin-left:auto}.hearts{display:inline-flex;gap:1px;flex-wrap:wrap;max-width:120px}.hearts canvas{width:12px;height:12px}.tabs{display:flex;gap:4px}.tab{flex:1;min-width:0;overflow:hidden;background:#000018;border:2px solid var(--frame-dark);border-radius:4px;padding:4px;cursor:pointer}.tab.on{border-color:var(--gold)}.map{width:100%;max-height:26dvh;aspect-ratio:1;object-fit:contain;border-radius:4px}.chat{flex:1 1 auto;min-height:140px}.chat-log{list-style:none;margin:0;padding:0;flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.chat-log li{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}.chat-log li .label{flex-wrap:wrap}.chat-form{display:flex}.chat-input{flex:1}.dialog{position:fixed;inset:0;background:#0000008c;display:grid;place-items:center;padding:16px;z-index:10}.dialog .box{display:flex;flex-direction:column;gap:12px;max-width:min(560px,100%)}.cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}fieldset{border:2px solid var(--frame-dark);border-radius:6px;margin:0;display:flex;flex-direction:column;gap:6px;padding:8px}.line{display:flex;align-items:center;gap:6px}.line canvas.icon{height:16px;width:auto}.line input{width:72px;margin-left:auto}.line select{margin-left:auto}.lines{display:flex;flex-direction:column;gap:4px}.side header .btn{margin-left:auto}.saves{align-items:center}.controls{display:flex;flex-direction:column;gap:10px;max-height:calc(100dvh - 64px);overflow-y:auto}.controls>.row{position:sticky;bottom:-1px;padding:8px 0 2px;background:var(--navy)}.controls .hint{margin:0;color:var(--muted)}.binds{display:grid;gap:4px}.bind-row{display:grid;grid-template-columns:44px minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}.bind-row.head{font-size:11px;color:var(--muted)}.snes{display:inline-grid;place-items:center;min-width:36px;height:22px;padding:0 4px;border-radius:4px;background:#383858;color:#fff;font-size:11px;font-weight:700}.snes.round{width:24px;min-width:24px;height:24px;border-radius:50%}.bind{background:#000018;color:var(--text);border:2px solid var(--frame-dark);border-radius:4px;padding:4px 6px;font:inherit;font-size:12px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bind:hover,.bind:focus-visible{border-color:var(--gold);outline:none}.bind.waiting{border-color:var(--gold);color:var(--gold);animation:pulse 1s infinite alternate}@keyframes pulse{to{background:#202058}}.extras{margin:0;padding:0;list-style:none;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 16px}kbd{display:inline-block;border:1px solid var(--frame-dark);border-bottom-width:2px;border-radius:3px;padding:0 5px;color:var(--text);font:inherit}.touch-settings .line{justify-content:space-between}@media(max-width:560px){.dialog .box{width:100%}.controls>.title canvas{zoom:1.25}.bind-row{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr);row-gap:2px}.bind-row.head{display:none}.bind-row .snes{grid-row:span 2}.bind-row>.label{grid-column:2 / 4}}.touch,.drawer-toggle{display:none}.touch-mode .touch{--t: calc(min(52px, 13vw) * var(--tscale, 1));display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"pad metas faces";align-items:center;width:100%;padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:8px;user-select:none;-webkit-user-select:none;touch-action:none}.tpad{grid-area:pad;position:relative;width:calc(var(--t) * 2.6);height:calc(var(--t) * 2.6);border-radius:50%;background:#2020408c;border:2px solid var(--frame-dark);touch-action:none}.tpad:before,.tpad:after{position:absolute;background:#303058;border:2px solid #8888b8;border-radius:6px;content:""}.tpad:before{inset:35% 8%}.tpad:after{inset:8% 35%}.tpad[data-dir~=UP]{box-shadow:inset 0 calc(var(--t) * .5) 0 -12px #f8d83059}.tpad[data-dir~=DOWN]{box-shadow:inset 0 calc(var(--t) * -.5) 0 -12px #f8d83059}.tpad[data-dir~=LEFT]{box-shadow:inset calc(var(--t) * .5) 0 0 -12px #f8d83059}.tpad[data-dir~=RIGHT]{box-shadow:inset calc(var(--t) * -.5) 0 0 -12px #f8d83059}.tfaces{grid-area:faces;display:grid;grid-template-columns:repeat(3,var(--t));grid-template-rows:repeat(3,var(--t));touch-action:none}.tface{display:grid;place-items:center;border-radius:50%;color:#fff;font:700 calc(var(--t) * .34) / 1 system-ui,sans-serif;border:2px solid rgba(255,255,255,.35);opacity:.85}.tface.on{opacity:1;transform:scale(.92);border-color:#fff}.tface.x{grid-area:1 / 2;background:#4878e0}.tface.y{grid-area:2 / 1;background:#40a860}.tface.a{grid-area:2 / 3;background:#e04848}.tface.b{grid-area:3 / 2;background:#e8c020;color:#202020}.tmetas{grid-area:metas;display:flex;justify-content:center;gap:10px}.tmeta{background:#303050;color:var(--text);border:2px solid var(--frame-dark);border-radius:14px;height:28px;padding:0 12px;font:600 11px/1 system-ui,sans-serif;touch-action:none}@media(max-aspect-ratio:1 / 1){.game{flex-direction:column;overflow-y:auto}.stage{flex:0 0 auto}.screen-wrap{width:100vw}.touch-mode .touch{grid-template-areas:"pad . faces" "metas metas metas";row-gap:4px}.side{flex:1 0 auto}.chat{min-height:220px}}@media(min-aspect-ratio:1 / 1){.touch-mode .stage{position:relative}.touch-mode .touch{position:absolute;inset:auto 0 0;padding:0 calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));align-items:end;pointer-events:none}.touch-mode .touch>*{pointer-events:auto}.touch-mode .tpad,.touch-mode .tfaces{opacity:.8}.touch-mode .tmetas{align-self:end}.touch-mode .side{position:fixed;inset:0 0 0 auto;width:min(var(--side),85vw);z-index:5;transform:translate(100%);transition:transform .2s;box-shadow:-4px 0 16px #0009}.touch-mode.drawer-open .side{transform:none}.touch-mode .drawer-toggle{display:grid;place-items:center;position:absolute;top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));z-index:6;width:40px;height:40px;border-radius:8px;border:2px solid var(--frame);background:#181838d9;color:var(--text);font-size:20px}.touch-mode.drawer-open .drawer-toggle{right:calc(min(var(--side),85vw) + 8px)}}.badge{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:#f84848}.hidden,.dialog.hidden{display:none}.connect-dialog{display:flex;flex-direction:column;gap:10px;max-height:calc(100dvh - 64px);overflow-y:auto;width:min(520px,100%)}.connect-dialog p{margin:0}.invites{display:flex;flex-direction:column;gap:12px}.invite{display:flex;flex-direction:column;gap:6px;border:2px solid var(--frame-dark);border-radius:6px;padding:8px}textarea.code{width:100%;resize:vertical;background:#000018;color:var(--text);border:2px solid var(--frame-dark);border-radius:4px;padding:6px;font:11px/1.3 ui-monospace,Menlo,Consolas,monospace;word-break:break-all}textarea.code:focus{outline:none;border-color:var(--gold)}.address-field{display:flex;flex-direction:column;gap:4px}.appearance{display:flex;flex-direction:column;gap:12px;width:min(460px,100%)}.appearance p{margin:0}.look-row{display:flex;flex-direction:column;gap:6px}.swatches{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.swatches input[type=color]{width:40px;height:32px;padding:2px}.swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--frame-dark);cursor:pointer}.swatch.on{border-color:var(--gold);transform:scale(1.1)}.look-row.default input[type=color]{opacity:.5}