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

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

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

.navbar__item, .navbar__dropdown-label, .navbar__dropdown-entry { color: #ba5a99; font-weight: 500; padding: 17px 19px; transition: 200ms ease all; }

.navbar__item:hover, .navbar__dropdown-label:hover, .navbar__dropdown-entry:hover { color: #2f90eb; }

.navbar__item.highlight, .navbar__dropdown-label.highlight, .navbar__dropdown-entry.highlight { color: #2febb2; }

.navbar__dropdown { position: relative; display: flex; width: max-content; background-color: #222527; }

.navbar__dropdown-content { box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.35); display: none; flex-direction: column; position: absolute; z-index: 9999; width: max-content; top: 54px; background-color: inherit; border-radius: 0 0 4px 4px; }

.navbar__dropdown-content:hover { display: flex; }

.navbar__dropdown-entry { padding: 8px 16px; }

.navbar__dropdown:hover .navbar__dropdown-content { display: flex; }

.navbar__item--menu-foldout { display: none; position: absolute; top: 0; right: 0; cursor: pointer; }

.navbar--foldout { flex-direction: column; }

.navbar--foldout .navbar__dropdown-content { display: flex; position: unset; box-shadow: none; width: 100%; padding-left: 32px; margin-top: -16px; }

.navbar--foldout .navbar__dropdown { flex-direction: column; }

@media (max-width: 800px) { .navbar { flex-direction: column; } .navbar__dropdown { width: 100%; } .navbar__item--menu-foldout { display: flex !important; } .navbar__dropdown { width: 100%; } .navbar:not(.navbar--foldout) > .navbar__dropdown:hover .navbar__dropdown-content { display: none; } .navbar:not(.navbar--foldout) > .navbar__item:not(.highlight), .navbar:not(.navbar--foldout) > .navbar__dropdown:not(.highlight) { display: none; } }

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

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; } }

@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; width: var(--content-width); display: flex; flex-direction: column; gap: 8px; flex-grow: 1; background: rgba(47, 51, 55, 0.95); }

main > * { margin-top: 0; }

main > p { margin-bottom: 0; }

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

.noscript { border-radius: 4px; display: flex; flex-direction: column; justify-content: space-around; }

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; }

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; }

img { max-width: 100%; }

.topping-lists-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.topping-lists-entry { display: flex; align-items: center; gap: 8px; font-size: 1.5em; background-color: #282b2e; border-radius: 4px; overflow: hidden; }

.topping-lists-entry img { width: 60px; height: 60px; border-radius: inherit; }

@media (max-width: 900px) { .topping-lists-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 600px) { .topping-lists-grid { grid-template-columns: repeat(1, 1fr); } }

.card-image { display: flex; align-items: flex-start; }

.card-image__img { width: 100%; }

.card-inline-info { text-decoration: underline dotted #2f90eb; cursor: help; font-weight: 600; }

.card-grid { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; background-color: #222527; gap: 4px; padding: 4px; }

.card-grid__entry { display: flex; align-items: center; flex-direction: column; background-color: #2e3235; }

.card-grid__entry .card-image { margin-top: auto; }

.card-grid__entry-title { font-weight: 500; font-size: 1.2em; }

.card-grid__entry-ratio { color: rgba(255, 255, 255, 0.5); }

.card-grid__entry-title, .card-grid__entry-ratio { padding: 4px; width: 100%; text-align: center; }

@media (max-width: 1200px) { .card-grid { grid-template-columns: repeat(6, 1fr); } }

@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(5, 1fr); } }

@media (max-width: 750px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }

@media (max-width: 600px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 450px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 300px) { .card-grid { grid-template-columns: repeat(1, 1fr); } }

.card-table-entry { width: 100%; display: grid; grid-template-columns: 250px 1fr; border: 1px solid #646464; gap: 0px; }

.card-table-entry__url { display: flex; align-items: center; justify-content: center; border-right: 1px solid #646464; padding: 8px; }

.card-table-entry__info { display: flex; flex-direction: column; }

.card-table-entry__info > * { padding: 8px; }

.card-table-entry__effect { display: flex; flex-direction: column; gap: 4px; }

.card-table-entry__title { font-size: 2em; }

.card-table-entry__stats { color: rgba(255, 255, 255, 0.5); }

.card-table-entry__title, .card-table-entry__effect, .card-table-entry__triggers-lab, .card-table-entry__evaluation, .card-table-entry__stats { border-bottom: 1px solid #646464; }

.card-table-entry__triggers-lab span, .card-table-entry__evaluation span { font-weight: 700; color: rgba(255, 255, 255, 0.5); }

.card-table-entry__list { margin: 0; padding: 0; list-style-type: none; }

.card-table-entry__list-item, .card-table-entry li { position: relative; margin: 0 0 0 24px; }

.card-table-entry__list-item:before, .card-table-entry li:before { width: 20px; font-size: 18px; display: inline-flex; justify-content: center; font-weight: bold; position: absolute; left: -22px; top: -2px; }

.card-table-entry__list-item--up:before, .card-table-entry li--up:before { content: "+"; color: green; }

.card-table-entry__list-item--down:before, .card-table-entry li--down:before { content: "-"; color: crimson; }

.card-table-entry__list-item--tip:before, .card-table-entry li--tip:before { content: "ⓘ"; color: lightskyblue; }

.card-table-entry__list-item p, .card-table-entry li p { margin: 0; }

.card-table-entry .card-image { max-width: 250px; justify-self: center; }

@media (max-width: 600px) { .card-table-entry { grid-template-columns: 1fr; } }

.decklist { display: flex; flex-direction: column; }

.decklist__grid { display: grid; gap: 4px; grid-template-columns: repeat(15, 1fr); background-color: #161819; }

.decklist__label { font-size: 20px; background-color: #3a3f42; border-bottom: 2px solid transparent; display: flex; align-items: center; justify-content: space-between; }

.decklist__label--main { border-color: #2febb2; }

.decklist__label--extra { border-color: #ba5a99; }

.decklist__label--side { border-color: #2f90eb; }

.decklist__download { display: flex; align-items: center; font-size: 12px; gap: 4px; background: #464c50; padding: 4px 4px 4px 8px; border-radius: 2px; }

.decklist__download .icon { height: 24px; width: 24px; }

.decklist__download:hover { background: #52595d; }

.decklist__label, .decklist__grid { box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); padding: 8px; }

@use "sass:color";
.replay { display: grid; grid-template-columns: repeat(2, 1fr); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); background-color: #282b2e; }

.replay__description { padding: 8px; display: flex; flex-direction: column; gap: 4px; }

.replay-player { display: grid; grid-template-columns: 1fr repeat(5, 1.46fr) 1fr; grid-template-rows: repeat(7, max-content); grid-template-areas: "title title title title play next restart" "TEXT TEXT TEXT TEXT TEXT TEXT TEXT" "F  .   E1  .   E2  .   ." ".  M1  M2  M3  M4  M5 ." ".  ST1 ST2 ST3 ST4 ST5 ." ".  H   H   H   H   H   ." ".  GY  GY  GY  GY  GY  ." ".  D   D   D   D   D   ." ".  B   B   B   B   B   ."; max-width: 100%; background-color: #222527; box-shadow: inherit; }

.replay-player__title { grid-area: title; font-size: 1.2em; font-weight: 500; padding: 8px; }

.replay-player__button { display: flex; align-items: center; justify-content: center; appearance: unset; border: none; background-color: unset; color: white; cursor: pointer; padding: 4px; transition: ease all 200ms; }

.replay-player__button:hover { background-color: #2e3235; }

.replay-player__button--restart { grid-area: restart; }

.replay-player__button--play { grid-area: play; }

.replay-player__button--next { grid-area: next; }

.replay-player__button--next svg { rotate: -90deg; }

.replay-player__title, .replay-player__button { border-bottom: 1px solid #2f90eb; margin-bottom: 4px; }

.replay-player .replay-zone { position: relative; display: grid; margin: 10px 2px 2px; background-color: #2e3235; border-radius: 4px; }

.replay-player .replay-zone--E1 { grid-area: E1; grid-template-columns: 1fr; aspect-ratio: 1; }

.replay-player .replay-zone--E1::before { content: "Extra Monster Zone"; }

.replay-player .replay-zone--E2 { grid-area: E2; grid-template-columns: 1fr; aspect-ratio: 1; }

.replay-player .replay-zone--E2::before { content: "Extra Monster Zone"; }

.replay-player .replay-zone--M1 { grid-area: M1; grid-template-columns: 1fr; aspect-ratio: 1; }

.replay-player .replay-zone--M1::before { content: "Main Monster Zone"; }

.replay-player .replay-zone--M2 { grid-area: M2; grid-template-columns: 1fr; aspect-ratio: 1; }

.replay-player .replay-zone--M2::before { content: "Main Monster Zone"; }

.replay-player .replay-zone--M3 { grid-area: M3; grid-template-columns: 1fr; aspect-ratio: 1; }

.replay-player .replay-zone--M3::before { content: "Main Monster Zone"; }

.replay-player .replay-zone--M4 { grid-area: M4; grid-template-columns: 1fr; aspect-ratio: 1; }

.replay-player .replay-zone--M4::before { content: "Main Monster Zone"; }

.replay-player .replay-zone--M5 { grid-area: M5; grid-template-columns: 1fr; aspect-ratio: 1; }

.replay-player .replay-zone--M5::before { content: "Main Monster Zone"; }

.replay-player .replay-zone--ST1 { grid-area: ST1; grid-template-columns: 1fr; aspect-ratio: 1; }

.replay-player .replay-zone--ST1::before { content: "Spell/Trap Zone"; }

.replay-player .replay-zone--ST2 { grid-area: ST2; grid-template-columns: 1fr; aspect-ratio: 1; }

.replay-player .replay-zone--ST2::before { content: "Spell/Trap Zone"; }

.replay-player .replay-zone--ST3 { grid-area: ST3; grid-template-columns: 1fr; aspect-ratio: 1; }

.replay-player .replay-zone--ST3::before { content: "Spell/Trap Zone"; }

.replay-player .replay-zone--ST4 { grid-area: ST4; grid-template-columns: 1fr; aspect-ratio: 1; }

.replay-player .replay-zone--ST4::before { content: "Spell/Trap Zone"; }

.replay-player .replay-zone--ST5 { grid-area: ST5; grid-template-columns: 1fr; aspect-ratio: 1; }

.replay-player .replay-zone--ST5::before { content: "Spell/Trap Zone"; }

.replay-player .replay-zone--F { grid-area: F; grid-template-columns: 1fr; aspect-ratio: 0.69; }

.replay-player .replay-zone--F::before { content: "Field Spell"; }

.replay-player .replay-zone--GY { grid-area: GY; grid-template-columns: repeat(7, 1fr); aspect-ratio: calc(7 * 0.69); }

.replay-player .replay-zone--GY:not(.replay-zone--added) { display: none; }

.replay-player .replay-zone--GY::before { content: "Graveyard"; }

.replay-player .replay-zone--H { grid-area: H; grid-template-columns: repeat(7, 1fr); aspect-ratio: calc(7 * 0.69); }

.replay-player .replay-zone--H:not(.replay-zone--added) { display: none; }

.replay-player .replay-zone--H::before { content: "Hand"; }

.replay-player .replay-zone--D { grid-area: D; grid-template-columns: repeat(7, 1fr); aspect-ratio: calc(7 * 0.69); }

.replay-player .replay-zone--D:not(.replay-zone--added) { display: none; }

.replay-player .replay-zone--D::before { content: "Deck / Extra Deck"; }

.replay-player .replay-zone--B { grid-area: B; grid-template-columns: repeat(7, 1fr); aspect-ratio: calc(7 * 0.69); }

.replay-player .replay-zone--B:not(.replay-zone--added) { display: none; }

.replay-player .replay-zone--B::before { content: "Banishment"; }

.replay-player .replay-zone--TEXT { grid-area: TEXT; margin: 4px; padding: 3px; }

.replay-player .replay-zone--TEXT:not(.replay-zone--added) { display: none; }

.replay-player .replay-zone::before { font-size: 10px; color: rgba(255, 255, 255, 0.5); display: inline-block; position: absolute; bottom: 100%; left: 0; z-index: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }

.replay-player .replay-card { background-image: var(--card-image); background-size: contain; background-repeat: no-repeat; background-position: center; margin: 2px; }

.replay-player .replay-card.activate { animation: activate 500ms; }

.replay-player .replay-card--defense { rotate: -90deg; }

@keyframes activate { 0% { opacity: 100; }
  50% { opacity: 0; }
  100% { opacity: 100; } }

@media (max-width: 800px) { .replay { grid-template-columns: 1fr; } }

.warning { background-color: #282b2e; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; align-items: center; text-align: center; }

.warning > span:not(.card-inline-info) { color: red; font-size: 1.5em; }

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

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

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

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

.home { display: grid; grid-template-areas: "intro discord" "changelog discord"; gap: inherit; grid-template-rows: min-content 1fr; }

.home__discord-embed { max-width: 100%; width: 350px; height: 500px; grid-area: discord; }

.home__changelog { grid-area: changelog; }

.home__changelog table { width: 100%; }

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

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

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

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

.home__description { grid-area: intro; }

@media (max-width: 700px) { .home { flex-direction: column; display: flex; } }

.bg-image { position: fixed; max-height: 100vh; bottom: 0; z-index: -1; }

.bg-image--left { left: 0; }

.bg-image--right { right: 0; }

.bg-image[src*="arianna"] { left: -225px; max-height: 75vh; }

.bg-image[src*="ariane"] { right: -105px; max-height: 72vh; }

.bg-image[src*="cooclock"] { left: -60px; max-height: 65vh; }

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