:root{--op-scale: 1;--op-bg: #0b0917;--op-panel: rgba(16, 13, 32, .92);--op-line: rgba(255, 255, 255, .12);--op-text: #e8eefc;--op-dim: #9aa4c2;--op-cyan: #3ec9ff;--op-gold: #ffd23e;--op-red: #ff5d6c}html,body{margin:0;padding:0;height:100%;background:var(--op-bg);overflow:hidden}.op-body{font-family:Avenir Next,Segoe UI,system-ui,sans-serif;color:var(--op-text);font-size:calc(15px * var(--op-scale))}#op-root{position:fixed;inset:0}#op-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#op-ui{position:absolute;inset:0;pointer-events:none}#op-ui>*{pointer-events:auto}#op-boot{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#1d1233,#0b0917 70%);z-index:50}.op-boot-logo{font-size:44px;font-weight:900;letter-spacing:4px;color:var(--op-gold);text-align:center}.op-boot-logo span{display:block;color:var(--op-cyan);letter-spacing:14px;font-size:30px}.op-boot-hint{margin-top:14px;text-align:center;color:var(--op-dim)}.op-noscript{position:absolute;inset:auto 0 20px;text-align:center;color:var(--op-red)}.op-screen,.op-screen-holder{position:absolute;inset:0;overflow-y:auto;padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 34px max(22px,env(safe-area-inset-left));background:linear-gradient(180deg,#0a0816d1,#0a0816eb);backdrop-filter:blur(3px)}.op-h1{font-size:calc(30px * var(--op-scale));font-weight:900;letter-spacing:1.5px;margin:6px 0 14px;color:var(--op-gold);text-transform:uppercase}.op-h2{font-size:calc(24px * var(--op-scale));font-weight:900;margin:4px 0 12px;color:var(--op-gold)}.op-h3{font-size:calc(17px * var(--op-scale));font-weight:800;margin:20px 0 8px;color:var(--op-cyan);letter-spacing:.6px;text-transform:uppercase}.op-note{color:var(--op-text);background:var(--op-panel);border:1px solid var(--op-line);border-radius:12px;padding:12px 14px;line-height:1.55;max-width:900px;margin:8px 0}.op-hint{color:var(--op-dim);font-size:calc(13px * var(--op-scale));margin:6px 0 10px;max-width:760px;line-height:1.5}.op-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.op-btnrow{margin-top:18px}.op-btn{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 20px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;font-weight:800;font-size:calc(14.5px * var(--op-scale));letter-spacing:.4px;background:#ffffff14;border:1.5px solid var(--op-line);color:var(--op-text);transition:background .12s ease,transform .08s ease,border-color .12s ease}.op-btn:hover{background:#ffffff29}.op-btn:active{transform:translateY(1px)}.op-btn:focus-visible{outline:2px solid var(--op-cyan);outline-offset:2px}.op-btn.primary{background:#3ec9ff29;border-color:#3ec9ff99;color:#bdefff}.op-btn.primary:hover{background:#3ec9ff4d}.op-btn.big{font-size:calc(18px * var(--op-scale));padding:14px 30px}.op-btn.small{padding:6px 12px;min-height:32px;font-size:calc(12.5px * var(--op-scale))}.op-btn.ghost{background:transparent}.op-btn.danger{border-color:#ff5d6c99;color:#ffc9c9;background:#ff5d6c1f}.op-home{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.op-logo-top{font-size:calc(64px * var(--op-scale));font-weight:900;letter-spacing:8px;color:var(--op-gold);text-shadow:0 4px 0 #7c5810,0 8px 30px rgba(255,210,62,.3)}.op-logo-bottom{font-size:calc(40px * var(--op-scale));font-weight:900;letter-spacing:26px;margin-left:13px;color:var(--op-cyan);text-shadow:0 3px 0 #14536b,0 8px 30px rgba(62,201,255,.35)}.op-tagline{color:var(--op-dim);margin-bottom:10px}.op-home-menu{display:flex;flex-direction:column;gap:10px;width:min(360px,86vw)}.op-home-menu .op-btn{width:100%}.op-home-foot{margin-top:20px;display:flex;flex-direction:column;gap:6px;align-items:center}.op-backlink{color:var(--op-cyan);font-weight:700;text-decoration:none;border-bottom:1px dashed rgba(62,201,255,.5)}.op-pads-note{color:var(--op-dim);font-size:calc(12.5px * var(--op-scale))}.op-format-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;max-width:1000px}.op-format-card{all:unset;box-sizing:border-box;cursor:pointer;background:var(--op-panel);border:1.5px solid var(--op-line);border-radius:14px;padding:16px;transition:border-color .12s ease,transform .1s ease}.op-format-card:hover{border-color:var(--op-cyan);transform:translateY(-2px)}.op-format-card:focus-visible{outline:2px solid var(--op-cyan)}.op-format-name{font-weight:900;font-size:calc(18px * var(--op-scale));color:var(--op-gold);margin-bottom:6px}.op-format-desc{color:var(--op-dim);line-height:1.45;font-size:calc(13px * var(--op-scale))}.op-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;max-width:1100px}.op-slot{background:var(--op-panel);border:2px solid var(--op-line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:7px;align-items:stretch}.op-slot.inactive{opacity:.65}.op-slot-head{display:flex;justify-content:space-between;align-items:center}.op-slot-title{font-weight:900;font-size:calc(17px * var(--op-scale))}.op-slot-label{color:var(--op-dim);font-size:calc(11.5px * var(--op-scale));text-transform:uppercase;letter-spacing:.8px;margin-top:2px}.op-slot-char{text-align:center;font-weight:800}.op-portrait{align-self:center;image-rendering:auto}.op-colors{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.op-colordot{all:unset;cursor:pointer;width:22px;height:22px;border-radius:50%;border:2px solid transparent;box-sizing:border-box}.op-colordot.on{border-color:#fff}.op-cycler{display:flex;align-items:center;gap:6px;justify-content:center}.op-cyc-btn{all:unset;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;background:#ffffff1a;border-radius:8px;font-weight:900}.op-cyc-btn:hover{background:#fff3}.op-cyc-label{min-width:110px;text-align:center;font-weight:700;font-size:calc(13.5px * var(--op-scale))}.op-kbwarn{border-color:#ff9a3e80}.op-kbwarn .op-btn{margin-top:8px}.op-opts{max-width:760px;margin-top:14px;display:flex;flex-direction:column;gap:8px}.op-opt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--op-panel);border:1px solid var(--op-line);border-radius:11px;padding:8px 12px}.op-opt-label{font-weight:800}.op-seg{display:flex;gap:4px;flex-wrap:wrap}.op-seg-btn{all:unset;cursor:pointer;padding:6px 12px;border-radius:8px;background:#ffffff12;font-weight:700;font-size:calc(12.5px * var(--op-scale));border:1px solid transparent}.op-seg-btn.on{background:#3ec9ff33;border-color:#3ec9ff99;color:#bdefff}.op-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--op-panel);border:1px solid var(--op-line);border-radius:11px;padding:8px 12px;max-width:760px;margin:4px 0}.op-toggle-label{font-weight:800}.op-toggle{all:unset;cursor:pointer;width:52px;height:28px;border-radius:16px;background:#ffffff1f;position:relative;transition:background .15s ease;flex:none}.op-toggle.on{background:#3ec9ff8c}.op-toggle-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s ease}.op-toggle.on .op-toggle-knob{left:27px}.op-slider{display:flex;align-items:center;gap:12px;max-width:760px;background:var(--op-panel);border:1px solid var(--op-line);border-radius:11px;padding:8px 12px;margin:4px 0}.op-slider-label{width:90px;font-weight:800}.op-slider input{flex:1;accent-color:var(--op-cyan)}.op-pool-grid,.op-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;max-width:1200px}.op-pool-card,.op-gallery-card{all:unset;box-sizing:border-box;cursor:pointer;background:var(--op-panel);border:1.5px solid var(--op-line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-width:0;text-align:left;opacity:.55;transition:border-color .1s ease,opacity .1s ease,transform .1s ease,box-shadow .1s ease}.op-gallery-card{opacity:1}.op-pool-card.on{opacity:1;border-color:#5dff8ab3;box-shadow:inset 0 0 0 1px #5dff8a38}.op-pool-card:hover,.op-gallery-card:hover{border-color:var(--op-cyan);transform:translateY(-1px)}.op-pool-card:focus-visible,.op-gallery-card:focus-visible{outline:2px solid var(--op-cyan);outline-offset:2px}.op-gallery-card.disabled{opacity:.4;cursor:default}.op-gallery-card.disabled:hover{border-color:var(--op-line);transform:none}.op-minigame-cover{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;background:#070917;border-bottom:1px solid var(--op-line)}.op-minigame-copy{display:flex;flex-direction:column;gap:4px;min-width:0;padding:10px 12px 12px}.op-minigame-title{display:flex;align-items:center;gap:8px;min-width:0}.op-pool-icon{font-size:22px;font-weight:900;color:var(--op-gold);width:40px;height:40px;display:grid;place-items:center;background:#ffd23e1f;border-radius:10px}.op-minigame-title .op-pool-icon{width:34px;height:34px;font-size:18px;flex:none}.op-pool-name,.op-gallery-name{font-weight:800;line-height:1.2}.op-gallery-sub{color:var(--op-dim);font-size:calc(12px * var(--op-scale));line-height:1.35}.op-gallery-rec{color:var(--op-cyan);font-size:calc(12px * var(--op-scale));line-height:1.35}.op-launch-cover{display:block;width:min(900px,100%);aspect-ratio:16 / 9;object-fit:cover;background:#070917;border:1.5px solid rgba(62,201,255,.36);border-radius:16px;box-shadow:0 18px 55px #0000006b;margin:2px 0 12px}.op-profile-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;max-width:1000px}.op-profile-card{display:flex;gap:12px;align-items:center;background:var(--op-panel);border:2px solid var(--op-line);border-radius:14px;padding:12px}.op-profile-info{flex:1}.op-profile-name{font-weight:900;font-size:calc(17px * var(--op-scale))}.op-profile-stats{color:var(--op-dim);font-size:calc(12.5px * var(--op-scale))}.op-profile-btns{display:flex;flex-direction:column;gap:6px}.op-edit{display:flex;flex-direction:column;gap:8px;max-width:560px}.op-input,.op-textarea{background:#ffffff14;border:1.5px solid var(--op-line);color:var(--op-text);border-radius:9px;padding:8px 12px;font-family:inherit;font-size:calc(15px * var(--op-scale));font-weight:700}.op-textarea{width:min(700px,90vw);min-height:180px}.op-keytest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;max-width:1100px;margin:12px 0}.op-keytest-card{background:var(--op-panel);border:2px solid var(--op-line);border-radius:14px;padding:12px}.op-keytest-head{font-weight:900;margin-bottom:8px}.op-keytest-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.op-keytest-key{text-align:center}.op-keytest-keylabel{color:var(--op-dim);font-size:calc(11px * var(--op-scale));text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px}.op-keycap{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:34px;padding:4px 10px;background:linear-gradient(180deg,#2b3152,#1d2238);border:1.5px solid rgba(255,255,255,.2);border-bottom-width:3.5px;border-radius:8px;font-weight:800;font-size:calc(13px * var(--op-scale));transition:background .06s ease,transform .06s ease}.op-keycap.lit{background:linear-gradient(180deg,#3ec9ff,#1b7fb0);color:#06222e;transform:translateY(1.5px);border-bottom-width:2px}.op-keycap.clickable{cursor:pointer}.op-keycap.clickable:hover{border-color:var(--op-cyan)}.op-keycap.capturing{border-color:var(--op-gold);color:var(--op-gold)}.op-keycap.conflict{border-color:var(--op-red);color:var(--op-red)}.op-keytest-max{font-weight:900;color:var(--op-cyan);margin:8px 0}.op-keytest-step{font-size:calc(18px * var(--op-scale));font-weight:900;color:var(--op-gold);margin:8px 0 4px}.op-keytest-status{color:var(--op-dim)}.op-keytest-results{margin:10px 0;display:flex;flex-direction:column;gap:4px;max-width:860px}.op-keytest-pass{color:#5dff8a;font-weight:700}.op-keytest-flag,.op-keytest-flagline{color:#ff9a3e;font-weight:700}.op-remap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;max-width:1100px}.op-remap-card{background:var(--op-panel);border:1.5px solid var(--op-line);border-radius:14px;padding:12px}.op-remap-title{font-weight:900;color:var(--op-cyan);margin-bottom:8px}.op-remap-row{display:flex;justify-content:space-between;align-items:center;margin:6px 0}.op-remap-label{color:var(--op-dim);font-weight:700}.op-unlock-list,.op-records-table{display:flex;flex-direction:column;gap:4px;max-width:860px}.op-unlock-line,.op-record-line{display:flex;justify-content:space-between;gap:14px;background:var(--op-panel);border:1px solid var(--op-line);border-radius:9px;padding:7px 12px}.op-unlock-line.got .op-unlock-name{color:#5dff8a}.op-unlock-desc,.op-record-val{color:var(--op-dim)}.op-record-name,.op-unlock-name{font-weight:800}#op-ui>.op-match-overlay{position:absolute;inset:0;pointer-events:none;z-index:20}.op-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#06050ead;pointer-events:auto;animation:op-fade .16s ease-out;overflow-y:auto;padding:20px}@keyframes op-fade{0%{opacity:0}to{opacity:1}}.op-card{background:var(--op-panel);border:2px solid rgba(62,201,255,.4);border-radius:18px;box-shadow:0 20px 70px #000000b3;padding:22px 26px;width:min(640px,calc(100vw - 40px));max-height:calc(100vh - 60px);overflow-y:auto;animation:op-pop .18s ease-out}.op-intro{width:min(760px,calc(100vw - 40px))}.op-intro-cover{display:block;width:100%;aspect-ratio:16 / 9;max-height:300px;object-fit:cover;background:#070917;border:1px solid rgba(62,201,255,.35);border-radius:13px;margin:0 0 18px}@keyframes op-pop{0%{transform:translateY(12px) scale(.97);opacity:.5}to{transform:none;opacity:1}}.op-intro-head{display:flex;gap:14px;align-items:center}.op-intro-icon{width:62px;height:62px;flex:none;display:grid;place-items:center;font-size:32px;font-weight:900;color:var(--op-gold);background:#ffd23e1f;border:2px solid rgba(255,210,62,.5);border-radius:14px}.op-intro-round{color:var(--op-dim);text-transform:uppercase;letter-spacing:1.4px;font-size:calc(12px * var(--op-scale));font-weight:800}.op-intro-name{margin:2px 0 0;font-size:calc(28px * var(--op-scale));font-weight:900;color:var(--op-gold)}.op-intro-blurb{color:var(--op-dim);line-height:1.5}.op-intro-obj{background:#3ec9ff1a;border:1px solid rgba(62,201,255,.35);border-radius:10px;padding:9px 12px;margin:8px 0}.op-intro-controls{display:flex;flex-direction:column;gap:5px;margin:10px 0}.op-intro-ctrl{font-size:calc(13.5px * var(--op-scale));color:var(--op-text)}.op-intro-dev{color:var(--op-dim);font-weight:700}.op-intro-finale{color:var(--op-gold);font-weight:900;font-size:calc(17px * var(--op-scale));margin:6px 0}.op-chip{display:inline-block;color:#0b0f1c;font-weight:900;border-radius:7px;padding:2px 9px;font-size:calc(12.5px * var(--op-scale))}.op-results-list{display:flex;flex-direction:column;gap:6px;margin:10px 0}.op-result-line{display:flex;align-items:center;gap:10px;background:#ffffff0d;border-radius:10px;padding:8px 12px}.op-result-pos{font-weight:900;color:var(--op-gold);width:42px}.op-result-pts{margin-left:auto;font-weight:800;color:#5dff8a}.op-result-total{font-weight:900;color:var(--op-text);width:84px;text-align:right}.op-result-tag{color:var(--op-red);font-weight:800;font-size:calc(11.5px * var(--op-scale))}.op-lives{font-size:calc(19px * var(--op-scale));color:var(--op-red);font-weight:900;margin:6px 0}.op-ceremony{text-align:center}.op-podium{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:14px 0 48px;flex-wrap:wrap}.op-podium-spot{background:#ffffff0d;border:1.5px solid var(--op-line);border-radius:12px;padding:8px;width:150px}.op-podium-spot.pos1{border-color:var(--op-gold);box-shadow:0 0 24px #ffd23e40;order:2}.op-podium-spot.pos2{order:1;transform:translateY(14px)}.op-podium-spot.pos3{order:3;transform:translateY(22px)}.op-podium-spot.pos4{order:4;transform:translateY(30px)}.op-podium-name{font-weight:900;font-size:calc(13px * var(--op-scale));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.op-podium-pts{color:var(--op-dim);font-size:calc(12px * var(--op-scale))}.op-newbest{color:var(--op-gold);font-weight:900;font-size:calc(20px * var(--op-scale));margin:8px 0}.op-unlock{background:#5dff8a1a;border:1px solid rgba(93,255,138,.45);color:#5dff8a;font-weight:800;border-radius:9px;padding:7px 12px;margin:5px 0}.op-details{text-align:left;margin:8px 0;color:var(--op-dim)}.op-details summary{cursor:pointer;font-weight:800;color:var(--op-text)}.op-recap-line{padding:3px 0 3px 14px;font-size:calc(13px * var(--op-scale))}.op-pause{text-align:center;display:flex;flex-direction:column;gap:10px;width:min(360px,84vw)}.op-h1{text-wrap:balance}.op-touchpad{position:absolute;inset:0;pointer-events:none;z-index:30}.op-stick-zone{position:absolute;left:0;bottom:0;width:46%;height:62%;pointer-events:auto;touch-action:none}.op-stick-base{position:absolute;left:120px;bottom:120px;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);background:#14142866;display:grid;place-items:center;opacity:.5}.op-stick-base.live{opacity:.9}.op-stick-nub{width:48px;height:48px;border-radius:50%;background:#3ec9ffbf;border:2px solid #fff}.op-touch-btns{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(26px,env(safe-area-inset-bottom));display:flex;gap:16px;pointer-events:auto}.op-touch-a,.op-touch-b{all:unset;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:900;touch-action:none}.op-touch-a{background:#3ec9ff66;border:2.5px solid rgba(62,201,255,.9);color:#dff6ff}.op-touch-b{background:#ffd23e59;border:2.5px solid rgba(255,210,62,.9);color:#fff3c9;transform:translateY(-34px)}.op-touch-a.down,.op-touch-b.down{filter:brightness(1.5)}.op-touch-pause{all:unset;position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#1414288c;border:2px solid rgba(255,255,255,.35);color:#e8eefc;font-weight:900;pointer-events:auto}@media(max-width:700px){.op-logo-top{font-size:calc(42px * var(--op-scale));letter-spacing:5px}.op-logo-bottom{font-size:calc(26px * var(--op-scale));letter-spacing:14px}.op-card{padding:16px}.op-keytest-keys{grid-template-columns:repeat(3,1fr)}}@media(orientation:portrait)and (max-width:900px){.op-home:after{content:"Tip: rotate to landscape for the best arena view.";color:var(--op-dim);font-size:12px;margin-top:10px}}