:root{--team-two-color: #6a0dad;--team-one-color: #ff9f1c}:root[data-theme=light]{--team-two-color: #7a17c1;--team-one-color: #b66100;--svg-icon-fill: hsl(220 20% 18%);--hp-color: #e55252;--gems-color: #49c485;--cooldown-color: #6cb3ff;--board-tint-strength: 25%}:root[data-theme=dark]{--team-two-color: #bf65ff;--svg-icon-fill: hsl(220 15% 85%);--hp-color: #b60000;--gems-color: #2a9a60;--cooldown-color: #1560bc;--board-tint-strength: 10%}:root{--field-stop-tl: color-mix( in srgb, var(--grid-bg) calc(100% - var(--board-tint-strength)), var(--team-one-color) var(--board-tint-strength) );--field-stop-mid: var(--grid-bg);--field-stop-br: color-mix( in srgb, var(--grid-bg) calc(100% - var(--board-tint-strength)), var(--team-two-color) var(--board-tint-strength) );--field-gradient: linear-gradient( to bottom right, var(--field-stop-tl) 0%, var(--field-stop-mid) 50%, var(--field-stop-br) 100% )}.icon{fill:var(--svg-icon-fill)}.team-0.icon{fill:color-mix(in srgb,var(--team-two-color) 70%,var(--svg-icon-fill) 30%)}.team-1.icon{fill:color-mix(in srgb,var(--team-one-color) 70%,var(--svg-icon-fill) 30%)}:root[data-theme=dark] .team-0.icon{fill:color-mix(in srgb,var(--team-two-color) 70%,var(--svg-icon-fill) 60%)}:root[data-theme=dark] .team-1.icon{fill:color-mix(in srgb,var(--team-one-color) 70%,var(--svg-icon-fill) 60%)}@font-face{font-family:JetBrains Mono;src:url(/assets/fonts/JetBrainsMonoNerdFontMono-Regular.ttf) format("truetype")}:root{--svg-canvas-scale: 100%;--theme-color: #6a0dad;--gridline-color: rgba(127, 127, 127, .5);--control-height: 48px}:root[data-theme=light]{--panel-bg: color-mix(in srgb, var(--theme-color) 7%, white);--panel-outline: color-mix(in srgb, var(--theme-color) 55%, white);--panel-track: color-mix(in srgb, white, black 45%);--panel-thumb: var(--theme-color);--text: #333333;--tooltip-shadow-contrast: #ffffff;--app-bg: color-mix(in srgb, var(--theme-color) 25%, white);--grid-bg: var(--panel-bg);--gridline-color: rgba(0, 0, 0, .12);--corner-buttons-color: var(--theme-color);--fireworks-darkening-layer: rgba(0, 0, 0, .75)}:root[data-theme=dark]{--panel-bg: color-mix( in srgb, color-mix(in srgb, var(--theme-color) 25%, white), black 70% );--panel-outline: color-mix(in srgb, var(--theme-color) 45%, white);--panel-track: color-mix(in srgb, var(--theme-color) 60%, white);--panel-thumb: color-mix(in srgb, var(--theme-color) 30%, white);--text: #e8e8ea;--tooltip-shadow-contrast: #000000;--gridline-color: rgba(0, 0, 0, .28);--app-bg: color-mix(in srgb, var(--theme-color) 40%, black);--grid-bg: color-mix(in srgb, var(--panel-bg) 50%, black);--corner-buttons-color: color-mix(in srgb, var(--theme-color) 35%, white);--fireworks-darkening-layer: rgba(0, 0, 0, .5)}:root[data-theme=light] ::selection{background:color-mix(in srgb,var(--theme-color) 65%,black);color:var(--tooltip-shadow-contrast)}:root[data-theme=light] ::-moz-selection{background:color-mix(in srgb,var(--theme-color) 65%,black);color:var(--tooltip-shadow-contrast)}:root[data-theme=dark] ::selection{background:color-mix(in srgb,var(--theme-color) 65%,white);color:var(--tooltip-shadow-contrast)}:root[data-theme=dark] ::-moz-selection{background:color-mix(in srgb,var(--theme-color) 65%,white);color:var(--tooltip-shadow-contrast)}.grid-cell{fill:var(--grid-bg);pointer-events:none}:root[data-gridlines=off] .grid-cell{display:none}html,body{margin:0;padding:0;height:100%;overflow:hidden;overscroll-behavior:none;font-family:JetBrains Mono,monospace;color:var(--text);background-color:var(--app-bg)}a{color:var(--text)}#svg-canvas{width:var(--svg-canvas-scale);height:var(--svg-canvas-scale);aspect-ratio:1 / 1;outline:2px solid var(--panel-outline);background-color:var(--grid-bg);border-radius:10px;margin:10px 0;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,no-repeat;background-size:auto,auto,100% 100%}:root[data-gridlines=on] #svg-canvas{--cell: calc(var(--svg-canvas-scale) / var(--grid-size));background-image:linear-gradient(to right,var(--gridline-color) 1px,transparent 1px),linear-gradient(to bottom,var(--gridline-color) 1px,transparent 1px),var(--field-gradient);background-size:var(--cell) 100%,100% var(--cell),100% 100%;background-blend-mode:multiply,multiply,normal}:root[data-gridlines=off] #svg-canvas{background-image:var(--field-gradient)}#tooltip{position:fixed;display:none;padding:10px;max-width:30vw;background:var(--panel-bg);border:1px solid var(--panel-outline);border-radius:0 10px 10px;box-shadow:0 0 10px 2px #0000004d;color:var(--text);pointer-events:none}#tooltip span[style*="var(--hp-color)"],#tooltip span[style*="var(--gems-color)"],#tooltip span[style*="var(--cooldown-color)"]{text-shadow:0 0 2px var(--tooltip-shadow-contrast),0 0 4px var(--tooltip-shadow-contrast)}.container{display:grid;grid-template-rows:auto 1fr auto;height:100vh}.game-area{display:grid;grid-template-columns:1fr max-content 1fr;grid-template-rows:1fr max-content 1fr;place-items:center}#team-one-name{place-self:start end}#team-two-name{place-self:end start}.teamName{font-size:1.5rem;font-weight:700;color:var(--text);text-align:center;background-color:var(--panel-bg);outline:2px solid var(--panel-outline);padding:.5rem 1rem;margin:10px;border-radius:10px;box-shadow:0 2px 4px #0000001a}.control-panel{display:flex;align-items:center;justify-content:center;gap:3.5rem;padding:.5rem 1rem;background-color:var(--panel-bg);border-radius:0 0 20px 20px;outline:2px solid var(--panel-outline);width:max-content;margin:0 auto;z-index:5000}.control-row{display:flex;align-items:center;gap:.5rem;margin:0;flex-wrap:nowrap}.control-panel button{background:none;border:none;cursor:pointer;padding:.5rem;border-radius:4px}.icon-button img{width:1.5rem;height:1.5rem;display:block}.icon-button img{filter:var(--svg-icon-filter, none)}.control-panel button img{width:1.5rem;height:auto}:root[data-theme=light] .control-panel button.active,:root[data-theme=light] .control-panel button:active{background-color:color-mix(in srgb,var(--theme-color) 30%,white)}:root[data-theme=dark] .control-panel button.active,:root[data-theme=dark] .control-panel button:active{background-color:color-mix(in srgb,var(--theme-color) 80%,black)}:root[data-theme=light] .icon-button.active,:root[data-theme=light] .icon-button:active{background-color:color-mix(in srgb,var(--theme-color) 30%,white)}:root[data-theme=dark] .icon-button.active,:root[data-theme=dark] .icon-button:active{background-color:color-mix(in srgb,var(--theme-color) 80%,black)}:root[data-theme=light]{--svg-icon-filter: none}:root[data-theme=dark]{--svg-icon-filter: invert(1) brightness(1.1)}.slider-group{display:flex;flex-direction:column;align-items:center;gap:2px;width:7rem;box-sizing:border-box}.slider-group label{width:100%;font-size:.9rem;font-weight:600;text-align:center;line-height:1.1;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.control-panel input[type=number]{width:3.25rem;color:var(--text);background:var(--panel-bg);border:1px solid var(--panel-outline);border-radius:4px;padding:.25rem .35rem}.control-panel input[type=range]{-webkit-appearance:none;appearance:none;width:7rem;height:.5rem;background:var(--panel-track);border-radius:.25rem}.control-panel input[type=range]::-webkit-slider-runnable-track{height:100%;background:var(--panel-track);border-radius:.25rem}.control-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1rem;height:1rem;margin-top:-.25rem;background:var(--panel-thumb);border-radius:50%;cursor:pointer}.control-panel input[type=range]::-moz-range-track{height:.5rem;background:var(--panel-track);border-radius:.25rem}.control-panel input[type=range]::-moz-range-progress{background:var(--panel-thumb);height:.5rem;border-radius:.25rem}.control-panel input[type=range]::-moz-range-thumb{width:1rem;height:1rem;background:var(--panel-thumb);border:none;border-radius:50%;cursor:pointer}.top-bar{display:grid;grid-template-columns:auto max-content auto;align-items:start;justify-content:center;gap:.5rem;padding:0;z-index:5000}.icon-button{padding:.5rem .6rem;background-color:var(--panel-bg);outline:2px solid var(--panel-outline);border:none;border-radius:0 0 12px 12px;cursor:pointer}:root[data-theme=dark] .icon-button img,:root[data-theme=dark] .control-panel button img{filter:invert(1)}.corner-button{position:absolute;width:7rem;height:7rem;background-color:var(--corner-buttons-color);background-size:40%;background-repeat:no-repeat;transition:transform .1s ease-in-out;z-index:7500}.corner-button:hover{transform:scale(1.1)}#corner-bottom-left{bottom:0;left:0;clip-path:polygon(0 100%,0 0,100% 100%);transform-origin:bottom left}#corner-bottom-left:after{content:"";position:absolute;inset:0;background-image:url(/assets/ui-svgs/github-logo.svg);background-size:40%;background-repeat:no-repeat;background-position:17% 83%;pointer-events:none}:root[data-theme=light] #corner-bottom-left:after{filter:invert(1)}#corner-top-right{top:0;right:0;clip-path:polygon(0 0,100% 0,100% 100%);transform-origin:top right}#corner-top-right:after{content:"";position:absolute;inset:0;background-image:url(/assets/ui-svgs/core-logo.svg);background-size:40%;background-repeat:no-repeat;background-position:83% 17%;pointer-events:none}:root[data-theme=light] #corner-top-right:after{filter:invert(1)}#win-display-box{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;padding:20px;border-radius:10px;outline:5px solid color-mix(in srgb,var(--theme-color) 20%,white);text-align:center;z-index:1000;pointer-events:none}#winreason{white-space:pre-line}#background-darkener{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--fireworks-darkening-layer);z-index:500;pointer-events:none}.fireworks{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:600}.popup-modal{border:2px solid var(--panel-outline);color:var(--text);background:var(--panel-bg);border-radius:15px;padding:1.25rem 1.5rem;word-break:break-word;overflow-wrap:break-word;max-width:450px;height:max-content;max-height:75vh}#open-modal{position:absolute;z-index:5001;border-bottom-left-radius:0}#info-icon{width:1.5rem;height:1.5rem;display:block}.popup-modal::backdrop{background:#00000073}.settings-toggle-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 12px}.settings-toggle{display:flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:10px}.settings-toggle img{width:22px;height:22px;filter:var(--svg-icon-filter, none)}kbd{background-color:#eee;border-radius:3px;border:1px solid #b4b4b4;box-shadow:0 1px 1px #0003,0 2px #ffffffb3 inset;color:#333;display:inline-block;font-size:.85em;font-weight:700;line-height:1;padding:2px 4px;white-space:nowrap}#replay_infos{display:grid;grid-template-columns:1fr;gap:.75rem;margin-top:.5rem}#replay_infos a{text-decoration:none}.modal-button{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:.75rem 1rem;border-radius:12px;border:2px solid var(--panel-outline);background:color-mix(in srgb,var(--panel-bg) 85%,transparent);color:var(--text);font-weight:700;letter-spacing:.02em;cursor:pointer;margin-bottom:5px;transition:transform .12s,background-color .12s,box-shadow .12s}.modal-button:hover,.modal-button:active{background:color-mix(in srgb,var(--theme-color) 12%,var(--panel-bg));transform:translateY(-1px)}.modal-button:active{transform:translateY(0)}.modal-button.primary{background:color-mix(in srgb,var(--theme-color) 18%,var(--panel-bg))}:root[data-theme=dark] .modal-button.primary{background:color-mix(in srgb,var(--theme-color) 28%,var(--panel-bg))}.modal-button:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--panel-outline) 50%,transparent)}.settings-toggle-row{--control-height: 48px;gap:10px}.settings-toggle-row .settings-toggle{min-height:var(--control-height)}.settings-color-row{margin-top:12px}.color-picker-label{display:block;font-size:.9rem;margin:0 0 6px;opacity:.85}.color-picker{position:relative;width:100%;height:var(--control-height);border-radius:16px;overflow:clip;isolation:isolate}.color-picker input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0}.color-picker .swatch{position:absolute;inset:0;border-radius:16px;background:var(--theme-color, #5a7cff);box-shadow:0 0 0 1px #00000012 inset,0 6px 18px #0000001f;transition:transform .12s ease,box-shadow .12s ease,background .12s linear;pointer-events:none}.color-picker .swatch-checker{position:absolute;inset:0;border-radius:16px;background:conic-gradient(#0000 90deg,#0003 0) 0 0 / 12px 12px,conic-gradient(#0000 90deg,#0003 0) 6px 6px / 12px 12px;mix-blend-mode:soft-light;opacity:.15;pointer-events:none}.color-picker .swatch-border{position:absolute;inset:0;border-radius:16px;box-shadow:0 0 0 2px color-mix(in oklab,var(--surface, #fff) 70%,#000 30%) inset;pointer-events:none;opacity:.4}.color-picker .color-text{position:absolute;inset:0;display:grid;place-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.95rem;font-weight:600;letter-spacing:.02em;color:color-mix(in oklab,#000 5%,#fff 95%);text-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:none}@media (max-width: 480px){.color-picker .color-text{display:none}}.color-picker:has(input:hover) .swatch,.color-picker:has(input:focus-visible) .swatch{transform:translateY(-1px);box-shadow:0 0 0 1px #00000014 inset,0 10px 24px #0000002e}.color-picker:has(input:focus-visible):after{content:"";position:absolute;inset:-3px;border-radius:18px;outline:3px solid color-mix(in oklab,var(--theme-color, #5a7cff) 70%,#000 30%);outline-offset:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.2));pointer-events:none}:root[data-theme=dark] .color-picker .swatch-border{opacity:.6}.color-picker{height:var(--control-height, 48px)}
