@charset "UTF-8";
@font-face { font-family: "Inter", sans-serif; src: url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); }

@use "sass:color";
* { box-sizing: border-box; }

body { background-color: #2F3337; font-family: "Inter", sans-serif; font-size: 14px; color: rgba(255, 255, 255, 0.85); margin: 0px; width: 100%; display: flex; flex-direction: column; min-height: 100vh; overflow-y: scroll; }

a { color: #ba5a99; text-decoration: none; transition: 100ms ease all; }

a:hover { color: #2febb2; }

main { margin: 0px auto 8px; width: var(--content-width); display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }

main > * { margin-top: 0; }

main > p { margin-bottom: 0; }

main > *:first-child { margin-top: 0; }

.noscript { display: flex; align-items: center; justify-content: center; border-radius: 4px; width: 100%; background-color: #3a3f42; padding: 16px; font-weight: 700; font-size: 20px; }

ul { list-style-type: disc; margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; }

p { margin-top: 0; margin-bottom: 8px; }

strong { font-weight: 800; }

code { background-color: #222527; padding: 1px 2px; border-radius: 2px; }

h1, h2, h3 { margin: 8px 0; border-left: 2px solid transparent; padding: 4px 4px 4px 20px; background-color: #222527; border-radius: 0 4px 4px 0; }

h1 { font-size: 3em; border-color: #2febb2; }

h2 { font-size: 2em; border-color: #ba5a99; }

h3 { font-size: 1.5em; border-color: #2f90eb; }

table { border-collapse: collapse; width: 100%; }

table thead tr { border-bottom: 4px solid #5d666b; }

table td { min-width: 50px; padding: 4px; }

table tbody tr { border-top: 2px solid #3a3f42; }

blockquote { position: relative; margin: 0; padding: 16px 4px 4px 4px; display: flex; flex-direction: column; gap: 2px; border-left: 4px solid #5d666b; }

blockquote:before { content: "Quote:"; position: absolute; left: 4px; top: 2px; font-size: 12px; color: rgba(255, 255, 255, 0.5); }

blockquote > * { margin: 0; }

input[type="checkbox"] { accent-color: #ba5a99; filter: brightness(0.3); }

input[type="checkbox"]:checked { filter: brightness(1); }

input[type=text] { background-color: #222527; border: none; border-bottom: 1px solid #2febb2; padding: 4px; color: rgba(255, 255, 255, 0.5); }

input[type=text]:focus { color: rgba(255, 255, 255, 0.85); outline: none; }

summary { border-radius: 4px; color: rgba(255, 255, 255, 0.5); transition: all 250ms ease; cursor: pointer; user-select: none; margin-bottom: 8px; }

summary:hover { color: rgba(255, 255, 255, 0.85); }

details summary { padding: 8px; width: max-content; background: linear-gradient(135deg, #ba5a99 0%, #2f90eb 100%); }

details summary:hover { background: linear-gradient(135deg, #c26ca4 0%, #469ced 100%); }

details summary:before { content: "Expand "; }

details[open] summary:before { content: "Hide "; }

details > div { display: flex; flex-direction: column; margin: 8px 0; gap: 8px; }

details > div > img { align-self: center; }

button { padding: 8px; width: max-content; background: linear-gradient(135deg, #ba5a99 0%, #2f90eb 100%); transition: 250ms ease all; color: rgba(255, 255, 255, 0.5); cursor: pointer; outline: 1px solid transparent; font-size: 12px; border: none; font-weight: 600; border-radius: 2px; }

button:hover { outline: 1px solid #2febb2; background: linear-gradient(135deg, #c26ca4 0%, #469ced 100%); color: rgba(255, 255, 255, 0.85); }

img { max-width: 100%; }

header { transition: 200ms ease all; position: sticky; top: 0; z-index: 10000; font-size: 16px; width: 100%; }

header .navbar { width: var(--content-width); margin: 0 auto 16px; background-color: #222527; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.35); border-radius: 0 0 4px 4px; display: flex; }

header .navbar__item { font-weight: 500; padding: 17px 19px; transition: 200ms ease all; }

header .navbar__item:hover { color: #2f90eb; }

footer { display: flex; align-items: center; justify-content: center; margin-top: auto; padding: 16px; background-color: #1c1f20; }

footer a { transition: 200ms ease all; display: flex; align-items: center; margin: 0px 16px; gap: 4px; color: rgba(255, 255, 255, 0.5); fill: rgba(255, 255, 255, 0.5); }

footer a:hover { color: rgba(255, 255, 255, 0.85); fill: rgba(255, 255, 255, 0.85); }

footer .icon { width: 20px; height: 20px; }

footer .icon.github, footer .icon.gitlab { padding: 1px; }

@media (max-width: 600px) { footer { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0px auto 16px; gap: 4px; } }

.main--home .home__changelog { grid-area: changelog; }

.main--home .home__changelog table { width: 100%; }

.main--home .home__changelog table td.date { color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; white-space: nowrap; }

.main--home .home__changelog table td.title { width: 100%; }

.main--home .home__changelog table th { text-align: left; }

.main--home .home__changelog table td.date, .main--home .home__changelog table th.date { padding-left: 0; }

.main--404 .error { font-size: 48px; margin: auto; }

.main--primite .primite-chart { display: grid; gap: 8px; grid-template-areas: "filter filter" "grid list"; grid-template-columns: 1fr 1fr; }

.main--primite .primite-filters { grid-area: filter; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; background-color: #3a3f42; padding: 4px; }

.main--primite .primite-filters > * { width: 100%; height: 100%; background-color: #52595d; }

.main--primite .primite-filters__label { display: flex; align-items: center; padding: 4px; justify-content: space-between; user-select: none; }

.main--primite .primite-filters__label select { cursor: pointer; min-width: 200px; }

.main--primite .primite-grid { grid-area: grid; display: grid; align-items: center; justify-content: center; grid-template-columns: max-content repeat(6, 1fr); background-color: #3a3f42; height: max-content; }

.main--primite .primite-grid__cell { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; font-size: 14px; user-select: none; cursor: pointer; }

.main--primite .primite-grid__cell--header-row { padding: 4px; border-right: 1px solid #2f90eb; }

.main--primite .primite-grid__cell--header-col { padding: 4px; border-bottom: 1px solid #2f90eb; }

.main--primite .primite-grid__cell--card { background-color: #008100; }

.main--primite .primite-grid__cell--card-0 { background-color: #5b0000; }

.main--primite .primite-grid__cell--card-1 { background-color: #8c0000; }

.main--primite .primite-grid__cell--card-5 { background-color: #b45400; }

.main--primite .primite-display-list { grid-area: list; display: flex; flex-direction: column; gap: 4px; background-color: #3a3f42; }

.main--primite .primite-display-list__status { padding: 4px 8px; border-bottom: 1px solid #2f90eb; }

.main--primite .primite-display-list__header { display: grid; align-items: center; justify-content: center; grid-template-columns: 1fr 75px 75px 120px; background-color: #52595d; padding: 4px; }

.main--primite .primite-display-list__header-cell { cursor: pointer; user-select: none; }

.main--primite .primite-display-list__header-cell:nth-child(2), .main--primite .primite-display-list__header-cell:nth-child(3), .main--primite .primite-display-list__header-cell:nth-child(4) { text-align: end; }

.main--primite .primite-display-list__list { display: flex; flex-direction: column; }

.main--primite .primite-display-list__entry { width: 100%; display: grid; align-items: center; justify-content: center; grid-template-columns: 1fr 75px 75px 120px; position: relative; font-size: 14px; }

.main--primite .primite-display-list__entry--pendulum:before, .main--primite .primite-display-list__entry--tuner:before { position: absolute; left: 8px; font-weight: 700; }

.main--primite .primite-display-list__entry--pendulum:before { content: "♢"; }

.main--primite .primite-display-list__entry--tuner:before { content: "⑂"; }

.main--primite .primite-display-list__entry--tuner.primite-display-list__entry--pendulum:before { content: "♢⑂"; left: 2px; }

.main--primite .primite-display-list__entry-label--name { padding-left: 24px; }

.main--primite .primite-display-list__entry-label--atk, .main--primite .primite-display-list__entry-label--def, .main--primite .primite-display-list__entry-label--level { font-family: monospace, monospace; text-align: end; padding: 0 4px; }

@media (max-width: 1000px) { .primite { grid-template-areas: "filter" "grid" "list"; grid-template-columns: 1fr; } }

.main--barian .barian-root { display: flex; gap: 8px; flex-direction: column; }

.main--barian .barian__results { display: flex; flex-direction: column; background-color: #3a3f42; }

.main--barian .barian__results-section { display: flex; flex-direction: column; }

.main--barian .barian__results-section-label { border-left: #2febb2 1px solid; font-size: 16px; padding: 4px 8px; background-color: #222527; }

.main--barian .barian__results-section-results { display: grid; gap: 4px; grid-template-columns: repeat(6, 1fr); padding: 8px; }

.main--barian .barian__results-section-results span { font-size: 12px; font-weight: 700; padding: 4px; background-color: #52595d; display: flex; align-items: center; justify-content: center; text-align: center; }

.main--sec .effect { background-color: #222527; padding: 8px; }

.main--sec .sec-root { display: flex; flex-direction: column; gap: 8px; }

.main--sec .sec-grid { display: grid; grid-template-columns: repeat(calc(var(--highest-solvable) + 1), 1fr); position: relative; margin-top: 16px; }

.main--sec .sec-grid:before { position: absolute; content: "Opponents Monsters Level/Rank"; rotate: -90deg; height: 100%; }

.main--sec .sec-grid:after { position: absolute; content: "Cards in Play"; bottom: 100%; left: 0; right: 0; width: 100%; text-align: center; }

.main--sec .sec-cell { user-select: none; border: 1px solid black; display: grid; grid-template-columns: 1fr 1fr; }

.main--sec .sec-cell--invalid * { background-color: darkred !important; }

.main--sec .sec-cell--compatible { border-color: chartreuse; }

.main--sec .sec-cell:not(.sec-cell--compatible):not(.sec-cell--invalid):not(.sec-cell--row):not(.sec-cell--header) { filter: brightness(0.4); }

.main--sec .sec-cell--header, .main--sec .sec-cell--row { display: flex; justify-content: center; }

.main--sec .sec-cell__xyz { background-color: black; }

.main--sec .sec-cell__fusion { background-color: blueviolet; }

.main--sec .sec-cell__xyz, .main--sec .sec-cell__fusion { display: flex; align-items: center; justify-content: center; }

.main--sec .sec-selector { display: flex; align-items: center; gap: 4px; background-color: #3a3f42; padding: 4px; user-select: none; padding: 16px; }

.main--sec .sec-selector > span { margin-right: auto; }

.main--sec .sec-selector > label { display: flex; align-items: center; padding: 4px; cursor: pointer; transition: ease all 200ms; background-color: #2e3235; font-size: 14px; width: 40px; justify-content: space-between; }

.main--sec .sec-selector > label:hover { background-color: #52595d; }

.main--sec .sec-selector > label > input { cursor: inherit; }

.tools-list { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); background-color: #1d2022; padding: 4px; }

.tools-list-item { display: flex; flex-direction: column; gap: 4px; background-color: #3a3f42; padding: 8px; }

.tools-list-item__title { font-weight: 700; font-size: 16px; }

.tools-list-item__description { font-size: 12px; color: rgba(255, 255, 255, 0.5); padding-left: 4px; }

.tools-list-item:hover { background-color: #52595d; }

.deck-input { display: flex; gap: 8px; flex-direction: column; }

.deck-input > label { display: flex; justify-content: space-between; align-items: center; padding: 16px; background-color: #3a3f42; width: 100%; cursor: pointer; filter: brightness(1); transition: ease all 200ms; }

.deck-input > label input { cursor: pointer; }

.deck-input > label:hover { filter: brightness(1.1); }

:root { --content-width: 1320px; }

.icon { user-select: none; width: 20px; height: 20px; }

@media (max-width: 1320px) { :root { --content-width: 100vw; } main { padding: 0px 16px; } }

/*# sourceMappingURL=main.css.map */