.match-hud{position:fixed;top:0;left:0;right:0;z-index:12;pointer-events:none;-webkit-user-select:none;user-select:none}.match-prep{position:fixed;left:0;right:0;bottom:0;z-index:12;width:100%;height:6px;margin:0;padding:0;pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden}.match-prep-fill{height:100%;background:linear-gradient(90deg,#5aa7ff,#2f6fb5);transition:width 50ms linear}.start-menu{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;pointer-events:auto;-webkit-user-select:none;user-select:none;background:radial-gradient(ellipse at 30% 20%,#d7e7f7 0%,transparent 55%),radial-gradient(ellipse at 70% 80%,#9bb8d4 0%,transparent 50%),linear-gradient(160deg,#b8cfe8,#8eacc8)}.start-menu--split{place-items:stretch;align-content:center;justify-content:center;grid-template-columns:minmax(280px,420px) minmax(260px,480px);grid-template-rows:auto minmax(0,1fr);column-gap:28px;row-gap:20px;box-sizing:border-box}.start-menu-brand{grid-column:1 / -1;margin:0;font-size:clamp(40px,6vw,56px);font-weight:900;letter-spacing:.02em;text-align:center;color:#1a2430;text-shadow:0 2px 0 rgba(255,255,255,.35)}.start-menu-card-title{margin:0;font-size:26px;font-weight:900;letter-spacing:.02em;text-align:center}.start-menu-left,.start-menu-right{padding:28px 26px 24px;border-radius:18px;border:2px solid #3d4f63;background:#f5fafff0;box-shadow:0 12px 40px #00000047;color:#1a2430;display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 140px);overflow:auto}.start-menu-right{align-items:stretch;justify-content:center;min-height:420px}.start-menu-panel{width:min(420px,100%);padding:28px 26px 24px;border-radius:18px;border:2px solid #3d4f63;background:#f5fafff0;box-shadow:0 12px 40px #00000047;color:#1a2430;display:flex;flex-direction:column;gap:16px}.start-menu-text{width:100%;box-sizing:border-box;height:42px;padding:0 12px;border:2px solid #3d4f63;border-radius:10px;background:#f5faff;color:#1a2430;font-size:15px;font-weight:600}.start-menu-hint{font-size:12px;font-weight:600;color:#a04545}.start-menu-error{margin:0;font-size:13px;font-weight:700;color:#a04545}.start-menu-actions{display:flex;flex-direction:column;gap:10px}.start-menu-start--secondary{background:#5a6d82;box-shadow:0 4px #3d4f63}.start-menu-start--secondary:hover:not(:disabled){background:#6a7d92}.start-menu-lobby{display:flex;flex-direction:column;gap:10px;font-size:14px;font-weight:600}.penguin-preview-wrap{flex:1;min-height:280px;display:flex;flex-direction:column;gap:8px}.penguin-preview-canvas{width:100%;flex:1;min-height:260px;border-radius:14px;background:radial-gradient(ellipse at 50% 30%,#dceaf8 0%,transparent 60%),linear-gradient(180deg,#c5d8ec,#9bb4cc);cursor:grab;touch-action:none}.penguin-preview-canvas:active{cursor:grabbing}.penguin-preview-hint{margin:0;text-align:center;font-size:12px;font-weight:600;color:#5a6d82}@media(max-width:840px){.start-menu--split{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:start;overflow:auto}.start-menu-brand{font-size:40px}.start-menu-left,.start-menu-right{max-height:none}.start-menu-right{min-height:320px}}.start-menu-title{margin:0;font-size:34px;font-weight:900;letter-spacing:.02em;text-align:center}.start-menu-subtitle{margin:-8px 0 4px;text-align:center;font-size:14px;font-weight:600;color:#5a6d82}.start-menu-field{display:flex;flex-direction:column;gap:8px}.start-menu-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;font-weight:700}.start-menu-label strong{font-size:16px;font-variant-numeric:tabular-nums}.start-menu-range{--range-fill: 0%;width:100%;height:10px;margin:0;cursor:pointer;appearance:none;-webkit-appearance:none;border-radius:999px;background:linear-gradient(to right,#2f6fb5 0%,#2f6fb5 var(--range-fill),#c5d4e4 var(--range-fill),#c5d4e4 100%)}.start-menu-range::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:transparent}.start-menu-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-5px;border-radius:50%;border:2px solid #1f4f86;background:#f5faff;box-shadow:0 2px #1a243040}.start-menu-range::-moz-range-track{height:10px;border-radius:999px;background:transparent}.start-menu-range::-moz-range-progress{height:10px;border-radius:999px;background:transparent}.start-menu-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:2px solid #1f4f86;background:#f5faff;box-shadow:0 2px #1a243040}.start-menu-check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;cursor:pointer}.start-menu-check input{width:18px;height:18px;margin:0;accent-color:#2f6fb5;cursor:pointer}.start-menu-tip{position:relative;border-bottom:1px dotted rgba(26,36,48,.45)}.start-menu-tip:after,.start-menu-rare-pick:after{content:attr(data-tooltip);position:absolute;left:0;bottom:calc(100% + 8px);z-index:5;width:max-content;max-width:240px;padding:8px 10px;border-radius:8px;background:#1a2430;color:#f4f7fb;font-size:12px;font-weight:600;line-height:1.35;text-align:left;white-space:normal;box-shadow:0 6px 16px #1a243059;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}.start-menu-rare-pick:after{left:50%;z-index:100;max-width:200px;text-align:center;transform:translate(-50%,4px)}.start-menu-rare-pick:hover,.start-menu-rare-pick:focus-visible{z-index:99}.start-menu-tip:hover:after{opacity:1;transform:translateY(0)}.start-menu-rare-pick:hover:after,.start-menu-rare-pick:focus-visible:after{opacity:1;transform:translate(-50%)}.start-menu-swatches{display:flex;gap:8px;width:100%}.start-menu-swatch{flex:1 1 0;aspect-ratio:1;min-width:0;height:auto;border-radius:10px;border:2px solid rgba(26,36,48,.35);cursor:pointer;box-shadow:0 3px #1a243040;padding:0}.start-menu-swatch.is-selected{outline:3px solid #1a2430;outline-offset:1px}.start-menu-swatch.is-disabled{opacity:.28;cursor:default;box-shadow:none}.start-menu-rare-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%}.start-menu-rare-column{display:flex;flex-direction:column;gap:10px;min-width:0}.start-menu-rare-column-label{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:center;color:#3d4f63}.start-menu-rare-column-label svg{width:14px;height:14px}.start-menu-rare-picks .start-menu-rare-pick.action-btn{width:auto;min-width:0}.start-menu-rare-pick.action-btn:not(.is-selected){--ability-accent: #5a6d82;--ability-accent-deep: #3d4f63;--ability-bg: #eef2f6}.start-menu-start{margin-top:6px;height:52px;border:2px solid #2a3848;border-radius:14px;background:#2f6fb5;color:#f5faff;font-size:16px;font-weight:800;letter-spacing:.02em;cursor:pointer;box-shadow:0 4px #1f4f86}.start-menu-start:hover:not(:disabled){background:#3a7fc9}.start-menu-start:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #1f4f86}.start-menu-start:disabled{opacity:.55;cursor:default;box-shadow:none}.settings-toggle{position:fixed;bottom:12px;right:12px;z-index:40;width:44px;height:44px;border:2px solid #2a3848;border-radius:12px;background:#f5fafff0;color:#1a2430;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 4px #2a3848;pointer-events:auto;-webkit-user-select:none;user-select:none}.settings-toggle:hover{background:#fff}.settings-toggle:active{transform:translateY(2px);box-shadow:0 2px #2a3848}.settings-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:#10162073;pointer-events:auto;-webkit-user-select:none;user-select:none}.settings-panel{width:min(320px,100%);padding:20px 22px 22px;border-radius:16px;border:2px solid #3d4f63;background:#f5fafff5;box-shadow:0 12px 40px #00000047;color:#1a2430;display:flex;flex-direction:column;gap:16px}.settings-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-title{margin:0;font-size:20px;font-weight:900;letter-spacing:.02em}.settings-surrender{margin-top:8px;height:42px;border:2px solid #8a3a3a;border-radius:12px;background:#c44536;color:#f5faff;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 3px #8a2e24}.settings-surrender:hover{background:#d45546}.settings-surrender:active{transform:translateY(2px);box-shadow:0 1px #8a2e24}.settings-match-actions{display:flex;flex-direction:column;gap:8px;margin-top:8px}.settings-action{height:42px;border:2px solid #2a3848;border-radius:12px;background:#f5faff;color:#1a2430;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 3px #2a3848}.settings-action:hover{background:#fff}.settings-action:active{transform:translateY(2px);box-shadow:0 1px #2a3848}.settings-action--primary{background:#1a2430;color:#f5faff;border-color:#0f161f;box-shadow:0 3px #0f161f}.settings-action--primary:hover{background:#2a3848;color:#fff}.settings-action--primary:active{box-shadow:0 1px #0f161f}.settings-clear{margin-top:8px;height:42px;border:2px solid #8a3a3a;border-radius:12px;background:#f5e8e8;color:#6a2424;font-size:14px;font-weight:800;cursor:pointer}.settings-clear:hover{background:#f0d4d4}.settings-close{width:36px;height:36px;border:2px solid #2a3848;border-radius:10px;background:#f5fafff0;color:#1a2430;font-size:16px;cursor:pointer;box-shadow:0 3px #2a3848;display:grid;place-items:center}.settings-close:hover{background:#fff}.settings-close:active{transform:translateY(2px);box-shadow:0 1px #2a3848}.match-teams{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 16px 0;gap:16px}.match-team{--team-accent-deep: color-mix(in srgb, var(--team-accent, #3d4f63) 72%, #1a2430);display:flex;flex-direction:column;justify-content:center;gap:10px;width:300px;height:76px;box-sizing:border-box;padding:8px 12px 10px;border:2px solid var(--team-accent, #3d4f63);border-radius:14px;background:color-mix(in srgb,var(--team-accent, #3d4f63) 10%,rgba(245,250,255,.94));color:var(--team-accent, #243041);box-shadow:0 4px 0 var(--team-accent-deep, #2a3848)}.match-team--player{align-items:flex-start}.match-team--enemy{align-items:flex-end}.match-name{max-width:100%;font-size:18px;font-weight:800;letter-spacing:.02em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.match-resources{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;line-height:1}.match-team--enemy .match-resources{flex-direction:row-reverse}.match-hearts{display:inline-flex;align-items:center;gap:4px;line-height:1}.match-heart{display:grid;place-items:center;width:18px;height:18px;font-size:16px;box-sizing:border-box}.match-extras{display:inline-flex;align-items:center;gap:14px;line-height:1}.match-team--enemy .match-extras{flex-direction:row-reverse}.match-rares{display:inline-flex;align-items:center;gap:6px;line-height:1}.match-stat{display:inline-flex;align-items:center;gap:5px;margin:0;padding:0;line-height:1}.match-stat-icon{display:grid;place-items:center;width:18px;height:18px;font-size:16px;box-sizing:border-box}.match-stat-count{font-size:16px;font-weight:800;line-height:1;letter-spacing:.02em}.match-rare{display:inline-flex;align-items:center;line-height:1}.match-rare.is-spent,.match-heart.is-spent{opacity:.3333}.match-rare-icon{display:grid;place-items:center;width:18px;height:18px;font-size:16px;box-sizing:border-box}.spy-blink{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}.spy-blink-lid{position:absolute;left:0;right:0;height:52%;background:#05070a;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}.spy-blink-lid--top{top:0;animation-name:spy-blink-top}.spy-blink-lid--bottom{bottom:0;animation-name:spy-blink-bottom}@keyframes spy-blink-top{0%,to{transform:translateY(-104%);-webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 130%,transparent 68%,#000 69%);mask-image:radial-gradient(ellipse 85% 75% at 50% 130%,transparent 68%,#000 69%)}45%,55%{transform:translateY(0);-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}}@keyframes spy-blink-bottom{0%,to{transform:translateY(104%);-webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% -30%,transparent 68%,#000 69%);mask-image:radial-gradient(ellipse 85% 75% at 50% -30%,transparent 68%,#000 69%)}45%,55%{transform:translateY(0);-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}}.match-banner{position:fixed;left:0;right:0;top:42%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;padding:12px 24px;box-sizing:border-box;background:transparent;pointer-events:none;opacity:0;transition:opacity .5s ease}.match-banner.is-visible{opacity:1}.match-banner.is-fading{opacity:0}.match-banner-title{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:52px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#ffd400;text-align:center;-webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.match-banner-subtitle{font-size:22px;font-weight:800;letter-spacing:.14em;color:inherit;text-transform:uppercase;-webkit-text-stroke:2px #000;paint-order:stroke fill}.match-banner-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;pointer-events:auto}.match-menu-btn{height:44px;padding:0 22px;border:2px solid #2a3848;border-radius:12px;background:#f5fafff0;color:#1a2430;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 4px #2a3848}.match-menu-btn--primary{background:#1a2430;color:#f5faff;border-color:#0f161f;box-shadow:0 4px #0f161f}.match-menu-btn:hover{background:#fff}.match-menu-btn--primary:hover{background:#2a3848;color:#fff}.match-menu-btn:active{transform:translateY(2px);box-shadow:0 2px #2a3848}.match-menu-btn--primary:active{box-shadow:0 2px #0f161f}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#b8cfe8;touch-action:none;overscroll-behavior:none;font-family:Segoe UI,Trebuchet MS,sans-serif}canvas{display:block;touch-action:none}.action-bar{position:fixed;left:50%;bottom:28px;transform:translate(-50%);display:flex;gap:14px;z-index:10;pointer-events:none;-webkit-user-select:none;user-select:none}.action-bar[hidden]{display:none}.action-btn{position:relative;width:88px;height:96px;padding:18px 8px 8px;border:2px solid var(--ability-accent, #3d4f63);border-radius:14px;background:var(--ability-bg, rgba(245, 250, 255, .92));color:var(--ability-accent, #243041);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;pointer-events:auto;box-shadow:0 4px 0 var(--ability-accent-deep, #2a3848)}.action-btn--defense{--ability-accent: #1f6feb;--ability-accent-deep: #184fad;--ability-bg: #eef5ff}.action-btn--attack{--ability-accent: #d9382b;--ability-accent-deep: #a5281f;--ability-bg: #ffefed}.action-btn--strategy{--ability-accent: #2f9e44;--ability-accent-deep: #237a34;--ability-bg: #eefaf0}.action-btn--cancel{--ability-accent: #5a6d82;--ability-accent-deep: #3d4f63;--ability-bg: #eef2f6;margin-left:18px}.action-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ability-accent-deep, #2a3848)}.action-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ability-accent-deep, #2a3848)}.action-btn.is-ammo-locked:hover,.action-btn.is-ammo-locked:active{transform:none;box-shadow:0 4px 0 var(--ability-accent-deep, #2a3848)}.action-btn.is-ammo-locked{opacity:.3;cursor:default}.action-btn.is-aim-hidden{opacity:0;pointer-events:none}.action-btn.is-aim-selected{pointer-events:none}.action-top{position:absolute;top:5px;left:8px;right:8px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.action-top-badges{display:flex;align-items:center;gap:3px}.action-top-icon{display:block;width:13px;height:13px;color:inherit}.action-ammo-cost{display:flex;justify-content:flex-end;align-items:center;gap:0;min-height:20px;margin-right:-7.5px;pointer-events:none}.ammo-flake--thin{display:block;width:20px;height:20px;color:inherit}.action-ammo-cost .ammo-flake--thin+.ammo-flake--thin{margin-left:-11px}.action-icon{display:grid;place-items:center;width:44px;height:44px;font-size:28px;color:inherit}.action-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:none}