:root{--clr-white: #ffffff;--clr-black: #000000;--clr-primary: #3498db;--clr-primary-rgb: 52, 152, 219;--clr-accent: #e67e22;--clr-card-background-1: #001431;--clr-card-background-2: #000b11;--clr-card-border-1: #001b44;--clr-card-border-2: #001217;--clr-input-border-focus: #002f80;--font-base: "Roboto Flex", sans-serif;--border-radius: 1rem}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}ul[role=list],ol[role=list],ul,ol{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;background:none;border:none;outline:none}html{line-height:1.5;-webkit-text-size-adjust:100%}body{min-height:100vh;text-rendering:optimizeSpeed;background-color:#fff;color:#000}a:not([class]){text-decoration-skip-ink:auto}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:focus{outline:none}:focus-visible{outline:2px solid Highlight;outline-offset:2px}}@layer base{@font-face{font-display:swap;font-family:Roboto Flex;font-style:normal;font-weight:400;src:url(/assets/roboto-flex-fym6pXp8.woff2) format("woff2")}}@layer base{body{font-family:var(--font-base);font-size:16px;font-weight:300;line-height:1.2}h1{margin-bottom:.5rem}h2{margin-bottom:1rem;line-height:1.5;font-weight:400}}.btn{display:inline-block;padding:.75rem 1rem .9rem;line-height:1.2}.btn[disabled]{opacity:.5}.btn:not([disabled]){cursor:pointer}.btn-primary{background-color:#add8e6}.btn-secondary{color:var(--clr-white);border:1px solid lightblue;transition:all .2s ease-in-out}.btn-secondary:hover{background-color:rgb(var(--clr-primary-rgb),.1);border-color:#001b44}.game-start-button,.game-reset-button{margin-top:2rem}@layer base{@property --x1{syntax: "<percentage>"; inherits: false; initial-value: 15%;}@property --x2{syntax: "<percentage>"; inherits: false; initial-value: 85%;}@property --x3{syntax: "<percentage>"; inherits: false; initial-value: 45%;}@property --x4{syntax: "<percentage>"; inherits: false; initial-value: 35%;}@property --y1{syntax: "<percentage>"; inherits: false; initial-value: 10%;}@property --y2{syntax: "<percentage>"; inherits: false; initial-value: 20%;}@property --y3{syntax: "<percentage>"; inherits: false; initial-value: 70%;}@property --y4{syntax: "<percentage>"; inherits: false; initial-value: 75%;}@property --a1{syntax: "<number>"; inherits: false; initial-value: .25;}@property --a2{syntax: "<number>"; inherits: false; initial-value: .22;}@property --a3{syntax: "<number>"; inherits: false; initial-value: .2;}@property --a4{syntax: "<number>"; inherits: false; initial-value: .18;}body{display:grid;align-content:center;justify-content:center;padding:1.5rem;text-align:center;background-color:#00030a;color:var(--clr-white);background-image:radial-gradient(circle at var(--x1, 20%) var(--y1, 15%),rgba(0,18,30,var(--a1, .2)) 0%,transparent 20%),radial-gradient(circle at var(--x2, 80%) var(--y2, 25%),rgba(0,18,30,var(--a2, .2)) 0%,transparent 45%),radial-gradient(circle at var(--x3, 50%) var(--y3, 65%),rgba(0,18,30,var(--a3, .2)) 0%,transparent 40%),radial-gradient(circle at var(--x4, 30%) var(--y4, 80%),rgba(0,18,30,var(--a4, .2)) 0%,transparent 50%);background-position:20% 15%,80% 25%,50% 65%,30% 80%;background-repeat:no-repeat;background-size:cover;background-blend-mode:screen;animation:moveGradient 20s ease-in-out infinite alternate,pulseAlphas 4s ease-in-out infinite alternate}@keyframes moveGradient{0%{--x1: 15%;--y1: 10%;--x2: 85%;--y2: 20%;--x3: 45%;--y3: 70%;--x4: 35%;--y4: 75%}25%{--x1: -10%;--y1: 40%;--x2: 110%;--y2: -20%;--x3: 120%;--y3: 90%;--x4: -20%;--y4: 110%}50%{--x1: 40%;--y1: -10%;--x2: 90%;--y2: 110%;--x3: -10%;--y3: 40%;--x4: 110%;--y4: -20%}75%{--x1: 20%;--y1: 80%;--x2: 80%;--y2: 90%;--x3: 110%;--y3: 120%;--x4: -10%;--y4: 20%}to{--x1: 15%;--y1: 10%;--x2: 85%;--y2: 20%;--x3: 45%;--y3: 70%;--x4: 35%;--y4: 75%}}@keyframes pulseAlphas{0%{--a1: .25;--a2: .22;--a3: .2;--a4: .18}50%{--a1: .18;--a2: .16;--a3: .14;--a4: .12}to{--a1: .25;--a2: .22;--a3: .2;--a4: .18}}}@layer (reset,base,components);@layer components{.mage-input{padding-inline:2rem}.knight-input-item:not(:last-child){margin-bottom:2rem}.knight-input{max-height:50vh;padding:2rem 2rem 1rem;margin-block:2rem;overflow-y:auto;scrollbar-width:none}.player-actions{display:flex;flex-direction:column;gap:1.5rem;width:fit-content;margin-inline:auto}}@layer components{.player{position:relative;padding:1rem;background:radial-gradient(circle at 50% 250%,var(--clr-card-background-1),var(--clr-card-background-2)) padding-box,linear-gradient(var(--clr-card-border-1),var(--clr-card-border-2)) border-box;border:transparent 1px solid;box-shadow:0 0 25px 3px var(--clr-black)}.player label{display:block;margin-bottom:.75rem;font-size:1.5rem;text-align:left}.player input{padding:.5rem .75rem;width:100%;max-width:250px;height:50px;font-size:1.25rem;color:#fff;background-color:transparent;border:1px solid var(--clr-white);transition:all .2s ease-in-out}.player input:focus{background-color:rgb(var(--clr-primary-rgb),.1);border-color:var(--clr-input-border-focus);outline:none}.player .remove-player{position:absolute;top:0;right:0;width:40px;height:40px;cursor:pointer;background-color:var(--clr-card-border-1);border-radius:50%;translate:50% -50%}.player .remove-player:before,.player .remove-player:after{position:absolute;inset:auto;width:20px;height:2px;background-color:var(--clr-white);content:"";translate:-50% -50%}.player .remove-player:before{transform:rotate(45deg)}.player .remove-player:after{transform:rotate(-45deg)}}@layer components{.game-board{display:grid;grid-template:repeat(4,1fr)/repeat(3,1fr);gap:1rem;width:fit-content;margin-inline:auto}@media screen and (min-width: 768px){.game-board{grid-template:repeat(3,1fr)/repeat(4,1fr);gap:1.5rem}}.mage{font-weight:700;color:var(--clr-accent)}.knight{font-weight:700;color:var(--clr-primary)}}@layer components{.card-color{position:relative;padding:.5rem;aspect-ratio:1;width:calc(33vw - 1.5rem);max-width:150px;cursor:pointer;background:radial-gradient(circle at 50% 250%,var(--clr-card-background-1),var(--clr-card-background-2)) padding-box,linear-gradient(var(--clr-card-border-1),var(--clr-card-border-2)) border-box;border:transparent 1px solid}@media screen and (min-width: 768px){.card-color{padding:.75rem;width:25vw}}.card-color[disabled]{opacity:.5;cursor:not-allowed}.card-color--color{width:100%;height:100%}.card-color--title{display:inline-block;width:100%;margin-top:.5rem;color:var(--clr-white);text-transform:uppercase}}