:root{--blue: #3fd4ff;--blue-dim: rgba(63, 212, 255, .35);--red: #ff4d5c;--red-dim: rgba(255, 77, 92, .35);--panel: rgba(10, 15, 26, .86);--panel-border: rgba(110, 170, 240, .22);--text: #dbe7f7;--text-dim: #8fa5c5;--warn: #ffb020}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:#04060a;font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:var(--text);-webkit-user-select:none;user-select:none;overscroll-behavior:none}#app{position:fixed;inset:0}#game-canvas{position:absolute;top:0;left:0;display:block;cursor:crosshair}#ui-root{position:absolute;top:0;left:0;width:1280px;height:720px;transform-origin:top left;pointer-events:none}#ui-root .screen,#ui-root .modal-backdrop{pointer-events:auto}.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px}.screen.active{display:flex;animation:screenIn .28s ease-out}@keyframes screenIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;padding:26px 34px;box-shadow:0 18px 60px #0000008c,0 0 0 1px #0006;backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;gap:14px;max-width:900px}.logo{font-size:74px;font-weight:900;font-style:italic;letter-spacing:4px;line-height:1;background:linear-gradient(100deg,#bdf3ff 15%,var(--blue) 40%,#ffffff 52%,var(--red) 66%,#ffd9cf 88%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(63,212,255,.35)) drop-shadow(0 4px 0 rgba(0,0,0,.6))}.logo-img{max-width:480px;max-height:160px;width:auto;height:auto;filter:drop-shadow(0 0 18px rgba(63,212,255,.35)) drop-shadow(0 4px 0 rgba(0,0,0,.6))}.tagline{color:var(--text-dim);font-size:14px;letter-spacing:3px;text-transform:uppercase;margin-top:-8px}h2{font-size:26px;font-weight:800;font-style:italic;letter-spacing:2px;text-transform:uppercase}h2 .accent{color:var(--blue)}.sub{color:var(--text-dim);font-size:13.5px;text-align:center;line-height:1.5;max-width:560px}.btn{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:250px;padding:12px 26px;font:700 16px Segoe UI,system-ui,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--text);background:linear-gradient(180deg,#26344ee6,#141c2ce6);border:1px solid rgba(120,175,240,.35);border-radius:10px;cursor:pointer;transition:transform .08s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease}.btn:hover:not(:disabled){border-color:var(--blue);box-shadow:0 0 18px #3fd4ff40,inset 0 0 12px #3fd4ff14;transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(1px) scale(.99)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:linear-gradient(180deg,#1f78bed9,#0e3e78e6);border-color:var(--blue)}.btn.danger{border-color:#ff646e80}.btn.danger:hover:not(:disabled){border-color:var(--red);box-shadow:0 0 18px #ff4d5c40}.btn.small{min-width:0;padding:8px 16px;font-size:13px}.btn.ghost{background:transparent;border-color:#7896c840}.menu-buttons{display:flex;flex-direction:column;gap:12px;margin-top:10px}.row{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.howto-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 34px;font-size:13.5px;line-height:1.5}.howto-grid .k{color:var(--blue);font-weight:700}.howto-grid h3{grid-column:1 / -1;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--warn);margin-top:8px}kbd{display:inline-block;min-width:26px;padding:2px 7px;text-align:center;font:700 12px Consolas,monospace;color:#eaf4ff;background:#3c507873;border:1px solid rgba(140,180,240,.4);border-bottom-width:3px;border-radius:6px}.card-row{display:flex;gap:16px}.pick-card{pointer-events:auto;width:200px;padding:18px 16px;background:linear-gradient(180deg,#1a2438e6,#0e1422eb);border:1px solid rgba(120,160,220,.25);border-radius:12px;text-align:center;cursor:pointer;transition:transform .1s ease,border-color .12s ease,box-shadow .12s ease}.pick-card:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 10px 26px #00000080,0 0 16px #3fd4ff2e}.pick-card.selected{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-dim),0 0 22px #3fd4ff40}.pick-card h3{font-size:18px;font-weight:800;font-style:italic;letter-spacing:1px;margin-bottom:6px}.pick-card p{font-size:12.5px;color:var(--text-dim);line-height:1.45}.pick-card .cd{margin-top:8px;font-size:11px;letter-spacing:1px;color:var(--warn);text-transform:uppercase}.pick-card canvas{display:block;margin:8px auto 2px;border-radius:8px;background:#060a12cc}.code-box{display:flex;align-items:center;gap:14px}.code-display{font:900 46px Consolas,Segoe UI,monospace;letter-spacing:12px;padding:10px 18px 10px 30px;color:#eaffff;background:#080e1ae6;border:1px solid var(--blue-dim);border-radius:12px;text-shadow:0 0 14px rgba(63,212,255,.6)}.waiting{color:var(--text-dim);font-size:14px;letter-spacing:1px}.waiting .dots:after{content:"";animation:dots 1.4s steps(4,end) infinite}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}input.code-input{pointer-events:auto;width:300px;padding:12px 16px;font:900 34px Consolas,monospace;letter-spacing:10px;text-align:center;text-transform:uppercase;color:#eaffff;background:#080e1ae6;border:1px solid rgba(120,175,240,.4);border-radius:12px;outline:none;caret-color:var(--blue);-webkit-user-select:text;user-select:text}input.code-input:focus{border-color:var(--blue);box-shadow:0 0 16px #3fd4ff4d}input[type=range]{pointer-events:auto;width:220px;accent-color:var(--blue);cursor:pointer}select,input[type=checkbox]{pointer-events:auto;accent-color:var(--blue);cursor:pointer}select{padding:6px 10px;font:600 13px Segoe UI,system-ui,sans-serif;color:var(--text);background:#141e30f2;border:1px solid rgba(120,175,240,.35);border-radius:8px}.status{min-height:20px;font-size:13.5px;color:var(--text-dim)}.status.error{color:#ff8484}.status.good{color:#57e389}.loadout-cards{display:flex;gap:16px}.loadout-cards .pick-card{width:226px}.ready-state{display:flex;gap:26px;font-size:13px;letter-spacing:1px}.ready-state .you{color:var(--blue)}.ready-state .them{color:var(--red)}.tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:#5a78aa40}.tag.ok{background:#3cbe6e40;color:#7dffab}.settings-grid{display:grid;grid-template-columns:auto auto;gap:14px 22px;align-items:center;font-size:14px}.settings-grid label{color:var(--text-dim);letter-spacing:.5px}.settings-divider{width:100%;border:none;border-top:1px solid var(--panel-border);margin:4px 0}.support-block{display:flex;flex-direction:column;align-items:center;gap:8px}.support-text{color:var(--text-dim);font-size:14px;letter-spacing:.5px}.kofi-widget{display:flex;justify-content:center}.modal-backdrop{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#03050a99;backdrop-filter:blur(2px);z-index:30}.modal-backdrop.active{display:flex;animation:screenIn .2s ease-out}#toast{position:absolute;left:50%;bottom:110px;transform:translate(-50%) translateY(20px);padding:10px 22px;font-size:14px;font-weight:600;letter-spacing:.5px;color:#eaffff;background:#0a1220eb;border:1px solid var(--blue-dim);border-radius:24px;opacity:0;transition:opacity .25s ease,transform .25s ease;pointer-events:none;z-index:60}#toast.show{opacity:1;transform:translate(-50%) translateY(0)}.load-bar{width:340px;height:8px;background:#ffffff14;border-radius:6px;overflow:hidden}.load-bar>div{height:100%;width:0%;border-radius:6px;background:linear-gradient(90deg,var(--blue),#9be8ff);box-shadow:0 0 12px #3fd4ff99;transition:width .15s ease}.result-buttons{position:absolute;left:50%;top:58%;transform:translate(-50%);display:flex;flex-direction:column;gap:12px;align-items:center}.footer-note{position:absolute;bottom:16px;width:100%;text-align:center;font-size:11.5px;letter-spacing:1px;color:#8ca5c88c;pointer-events:none}