@font-face {
    font-family: "Fracturized-Biolinum";
    src: url(./FracturizedBiolinum.woff) format("woff");
}
@font-face {
    font-family: "Adobe Garamod Pro Semibold";
    src: url(./AGaramondPro-Semibold.otf);
}
body {
    background: url("tile2.png") #c7c6c1;
    color: black;
    font-family: "Fracturized-Biolinum";
    font-size: 1.2rem;
    line-height: 1.4rem;
    padding: 20px;
    margin: 0;
}

h1, h2, h3, h4, h5 {
    font-family: "Adobe Garamod Pro Semibold";
    margin-top: 1.5em;
    margin-bottom: .5em;
}

button {
    font-size: 14px;
}

.flavor {
    display: block;
    font-size: 14px;
    font-family: "Fracturized-Biolinum";
    font-style: italic;
    line-height: 14px;
    font-weight: normal;
    margin-top: 6px;
    margin-bottom: -4px;
}

.collapse {
    display: none !important;
}

section {
    margin-bottom: 50px;
}
section > button {
    margin-bottom: 25px;
}
section > button + h3,
section > button + p {
    margin-top: 0;
}

form > fieldset {
    margin-bottom: 25px;
}

.battlechart {
    background: #dedede;
    background: linear-gradient(135deg, rgba(222, 222, 222, 1) 0%, rgba(224, 230, 211, 0.31) 85%, rgba(199, 189, 189, 1) 100%);
    border: 1px solid #333;
}
.battlechart td, .battlechart th {
    border: 1px solid #333;
}

.battlechart thead th {
    font-size: 15px;
    position: sticky;
    top: 0;
}
.battlechart thead th:first-child {
    z-index: 3;
    top: 0;
    left: 0;
}

.battlechart tbody th {
    min-width: 100px;
    position: sticky;
    left: 0;
}

.battlechart button {
    font-size: 12px;
    margin-top: 4px;
}

.battlechart tr.oddrow {
    background: #c0c0c0;
}
tr.subtype {
    background: #707070;
}

.bc-inner {
    width: 75px;
    margin: 5px 5px 7px 3px;
    border-radius: 5px;
    box-shadow: rgba(20,20,20,0.5) 3px 2px 0px;
    padding: 12px 8px;
    text-align: center;
}

.favored .bc-inner,
.conversion-rate-table .rate-good {
    background-color: #68935B;
    color: white;
    background-image: url(swirl.svg);
    background-repeat: repeat-y;
    background-position: right;
}
.unfavored .bc-inner,
.conversion-rate-table .rate-bad {
    background-color: #FDA0A0;
    background-image: url(jaggy.svg);
    background-repeat: repeat-y;
    background-position: right;
}
.even .bc-inner,
.conversion-rate-table .rate-even {
    background-color: #F0F0F0;
    background-image: url(zag.svg);
    background-repeat: repeat-y;
    background-position: right;
}
.slight-favored .bc-inner {
    background-color: #F0F0F0;
    background: url(swirl.svg), linear-gradient(90deg,rgba(240, 240, 240, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(104, 147, 91, 1) 95%);
    background-repeat: repeat-y;
    background-position: right;
}
.slight-unfavored .bc-inner {
    background-color: #F0F0F0;
    background: url(jaggy.svg), linear-gradient(90deg,rgba(240, 240, 240, 1) 0%, rgba(240, 240, 240, 1) 85%, rgba(253, 160, 160, 1) 95%);
    background-repeat: repeat-y;
    background-position: right;
}
.no_data .bc-inner {
    background-color: #343434;
    font-size: 15px;
    color: white;
    padding: 14px 8px;
}

#head-to-head td a,
#head-to-head td a:visited {
    color: inherit;
}
.matchcount {
    font-size: 14px;
    line-height: 12px;
}
.arche-overall {
    font-size: 16px;
    line-height: 14px;
    font-weight: normal;
}
table, th, td {
    border: 3px ridge #bbb;
    border-collapse: collapse;
    padding: 5px;
}
table {
    padding: 0;
}

th {
    background: var(--ui-bg);
}
.element-table td {
    background: white;
}
.element-table tbody th {
    text-align: left;
}
.subtype td, .subtype th {
    padding: 2px 5px;
}
.subtype th {
    background: var(--ui-bg-sub);
}
.st-name {
    font-size: 14px;
    line-height: 14px;
    font-weight: bold;
}
.st-name::before {
    content: "↳ ";
}
.subtype .arche-overall {
    font-size: 13px;
    line-height: 12px;
    font-weight: normal;
}

table {
    background: var(--ui-bg-2);
}

#players > table, #players > table th, #players > table td, table.archetypes, .archetypes th, .archetypes td {
    border: none;
}
.banned .playername {
    text-decoration: line-through;
}

/*
.playername:active::after {
    content: attr(title);
    position: absolute;
    border: 1px solid black;
    padding: 5px;
    background-color: white;
    box-shadow: var(--main-shadow);
} */

.seat-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-auto-flow: column;
}

.seat-cell {
    padding: 10px;
    align-content: end;
}
.seat-cell:nth-child(-n + 3) {
    border-right: 1px dotted black;
    padding-left: 0;
}
.seat-cell:nth-child(n + 7) {
    border-left: 1px dotted black;
    padding-right: 0;
}

.p-row, .team-member {
    position: relative;
    transform:scale(1,1);
    overflow: hidden;
    height: 55px;
    margin-bottom: 5px;
}
.conversion-rate-table {
    margin-top: 5px;
}
.cr-row {
    position: relative;
    height: 50px;
}
.cr-element-row td:first-child {
    background-color: white;
}
.cr-inner {
    margin: 5px 5px 7px 3px;
    border-radius: 5px;
    box-shadow: rgba(20,20,20,0.5) 3px 2px 0px;
    padding: 6px 4px;
    text-align: center;
}
.cr-quants {
    font-size: 14px;
    line-height: 12px;
}

.p-row a,
.p-row a:visited,
.p-row a:active,
.p-row a:hover,
.team-member a,
.team-member a:visited,
.team-member a:active,
.team-member a:hover {
    color: black;
}

.p-row td, .team-member, .cr-row td:first-child, .cr-row td:nth-child(2) {
    font-size: 23px;
    padding: 5px;
    text-shadow: white 1px 1px 2px,
                  white -1px -1px 2px,
                  white 1px -1px 2px,
                  white -1px 1px 2px;
}

.p-row td[rowspan="2"] {
    vertical-align: top;
    padding-top: 15px;
}

.deck-bgs {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
    z-index: -1;
    overflow: hidden;
    display: flex;
}

.deck-bg {
    height: fit-content;
    position: relative;
    top: -100%;
    filter: contrast(50%) brightness(120%);
    mask-image: linear-gradient(to right, transparent, black 10%, transparent 90%);
    margin-left: -10%;
    margin-right: -10%;
    animation: 4s infinite alternate bgimgmover;
    animation-play-state: paused;
}
.p-row:hover .deck-bg,
.cr-row:hover .deck-bg {
    animation-play-state: running;
}

.team-member .p_deck {
    margin-top: 5px;
}

.team-member .deck-bg {
    animation: unset;
    top: 0;
}

@keyframes bgimgmover {
    0% {
        top: -100%;
    }
    50% {
        top: -150%;
    }
    100% {
        top: -50%;
    }
}

.n-styles-1 .deck-bg {
    width: 120%;
}
.n-styles-2 .deck-bg {
    width: calc(100% / 2 + 20%);
}
.n-styles-3 .deck-bg {
    width: calc(100% / 3 + 20%);
}
.n-styles-4 .deck-bg {
    width: calc(100% / 4 + 20%);
}
.n-styles-5 .deck-bg {
    width: calc(100% / 5 + 20%);
}
.n-styles-6 .deck-bg {
    width: calc(100% / 6 + 20%);
}
.n-styles-7 .deck-bg {
    width: calc(100% / 7 + 20%);
}
.n-styles-8 .deck-bg {
    width: calc(100% / 8 + 20%);
}

.decklist {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    padding: 10vh 10vw;
    font-size: 14px;
    z-index: 3;
    display: flex;
}

.prev-deck-btn, .next-deck-btn {
    height: 80vh;
}

.deck_gfx {
    font-size: 0;
    line-height: 0;
    margin-bottom: 5px;
}
.deck_gfx * {
    font-size: 16px;
    line-height: 16px;
}

.quant {
    font-size: 14px;
    line-height: 22.4px;
}

.decklist-inner {
    background-color: white;
    width: calc(80vw - 40px);
    height: calc(80vh - 40px);
    padding: 20px;
}

.decklist-viewbox {
    width: calc(80vw - 40px);
    height: calc(80vh - 100px);
    overflow: auto;
}

.decklist .cardimg,
.top-cards .cardimg,
#delta-view .cardimg {
    display: inline-block;
    position: relative;
    width: 125px;
    height: 175px;
}
.decklist .cardimg > img,
.top-cards .cardimg > img,
#delta-view .cardimg > img {
    display: inline-block;
    width: 125px;
    height: 175px;
    border-radius: 3%;
    box-shadow: var(--lesser-shadow);
}

.top-cards {
    padding: 5px;
    background: var(--ui-bg-2);
}

.top-cards h4 {
    margin-top: 10px;
    margin-bottom: 0;
}
.top-cards > p {
    margin: 2px 0 4px 0;
}

.cardimg.banned::after {
	content: "BANNED";
	color: red;
	position: absolute;
	z-index: 5;
	left: 5%;
	top: 40%;
	backdrop-filter: blur(5px) grayscale(0.5);
	font-weight: bold;
	transform: rotate(45deg);
	padding: 10px;
	border-radius: 50%;
	font-size: 25px;
    text-shadow: 2px 2px 3px black;
}
.cardimg.removed::after {
	content: "REMOVED";
	color: #404040;
	position: absolute;
	z-index: 5;
	left: -5%;
	top: 30%;
	backdrop-filter: blur(5px) grayscale(0.5);
	font-weight: bold;
	transform: rotate(45deg);
	padding: 10px;
	border-radius: 50%;
	font-size: 25px;
    text-shadow: 2px 2px 3px black;
}
.cardimg.dblclicked:not(.banned):not(.removed) {
    z-index: 6;
}

.decklist .cardimg.dblclicked > img {
	position: absolute;
	width: 250px;
	height: 350px;
	top: 0;
	left: 0;
    z-index: 4;
}

.decklist .cardimg:active::after,
.decklist .cardimg.dblclicked::after {
    display: none;
}

fieldset label {
    margin-right: 10px;
}

.decklist .cardimg .quant,
.top-cards .cardimg .quant,
#delta-view .cardimg .quant {
    position: absolute;
    left: 0;
    bottom: 5px;
    padding: 5px;
    margin-left: 25%;
    margin-right: 25%;
    min-width: calc(50% - 16px);
    background: #333;
    color: white;
    font-weight: bold;
    border-radius: 3px;
    border: 2px solid white;
    text-align: center;
    z-index: 3;
}

.cardimg.minus {
	filter: grayscale(0.6) brightness(0.6);
}

.decklist-delta {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.decklist-delta label {
    display: block;
}
#delta-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
#delta-go {
    grid-column: 1 / 3;
    width: 50%;
    margin: auto;
}
.error {
    background-color: #f08080;
    font-weight: bold;
    font-style: italic;
    border: 1px solid red;
    border-radius: 5px;
    padding: 4px;
    margin: 2px;
}
.d1 {
    grid-column: 1;
}
.d2 {
    grid-column: 2;
}
.delta-button {
	text-decoration: none;
	border: 1px solid black;
	border-radius: 2px;
	padding: 2px 4px;
	color: black;
	background-color: #dedede;
	font-size: 14px;
	line-height: 10px;
    margin-left: 5px;
}
.delta-button:hover {
	background-color: #c0c0c0;
    box-shadow: var(--lesser-shadow);
}

.subquant {
    display: block;
    font-size: 13px;
}

.decklist .cardimg .flipper {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 5px;
    background: #333;
    color: white;
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    border-radius: 3px;
    border: 2px solid white;
    text-align: center;
    z-index: 4;
    cursor: alias;
}
.decklist .cardimg.dblclicked .flipper {
    right: -15px;
    bottom: -170px;
}

.cardback {
    transition: transform .5s;
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
}
.cardfront {
    transition: transform .5s;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
.flipped {
    transform: rotateY(180deg);
}
.deck_gfx .carddeets {
    z-index: 5;
    position: absolute;
    bottom: calc(-100% - 18px);
    left: 75px;
    width: 80px;
    background: white;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
}

.decklist .permalink {
    float: right;
    padding: 7px 5px;
    text-decoration: none;
    font-size: 20px;
}

.tabs > button {
    padding: 5px;
    border-radius: 8px 8px 0 0;
    border-style: outset;
    border-width: 3px;
    border-color: black;
    background-color: #ccc;
}

.tabs > .activetab, .tabs > button:active {
    background-color: white;
    border-bottom-color: white;
    border-style: inset;
}

.tabs > button:hover {
    border-bottom-color: #ddd;
}

.permalink:hover {
    text-shadow: #77a 1px 2px 5px
}

.closeX {
    padding: 5px;
    float:right;
    font-size: 20px;
}
.toggle_gfx_btn {
    margin-right: 5px;
    padding: 5px;
    float:right;
    font-size: 20px;
}
.omniexport_btn {
    margin-right: 5px;
    padding: 5px;
    float: right;
    font-size: 20px;
}
.omniexport_btn > img {
    vertical-align: bottom;
}
.omniexport {
    display: none;
}
.cardcount {
    font-size: 12px;
    font-weight: lighter;
    margin-left: 20px;
}

.lineage-display {
    display: flex;
    overflow-x: auto;
    padding-bottom: 1px;
}

.match {
    display: inline-block;
    width: 220px;
    margin: 5px;
    border: 2px solid #555;
    border-radius: 3px;
    position: relative;
}

.team-match {
    width: 600px;
}

.match .player,
.team-match .team {
    display: flex;
    background: var(--ui-bg);
}

.playername, .bye {
    flex: 1;
    padding: 5px;
}

.match .bye {
    background: var(--ui-bg-vis);
}

.matchscore {
    flex: 0;
    padding: 5px;
    color: white;
}

.matchscore.winner {
    background-color: #070;
}
.matchscore.loser {
    background-color: #900;
}
.matchscore.tied {
    background-color: #03B;
}

.match .player:first-child {
    border-bottom: 1px solid black;
}

.evt-judges {
    padding-left: 38px;
}

.upset {
    padding: 5px;
}

.elodiff {
    text-align: right;
}

.match.hasvideo {
    position: relative;
    padding-left: 20px;
    width: 200px;
}

.matchvid {
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    font-size: 15px;
    height: 100%;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.match-badges {
    position: absolute;
    top: 0;
    right: -50px;
    width: 50px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.match-badges .champbadge img {
    height: 30px;
    width: 30px;
    position: absolute;
    left: 3px;
}

.p1-badge, .p2-badge {
    height: 32px;
    width: 32px;
}

.vidcol {
    text-align: center;
}
.vidcol a {
    font-size: 18px;
    padding: 2px;
}

.archetype {
    position: relative;
    display: inline-flex;
    width: 115px;
    flex-direction: column;
    justify-content: end;
    vertical-align: bottom;
}
.arche-bar {
    display: inline-block;
    width: 30%;
    border: 2px solid black;
    vertical-align: bottom;
    margin-left: auto;
    margin-right: auto;
}
.archetype h4 {
    margin: 0;
    text-align: center;
}
.el-pct,
.el-quant {
	text-align: center;
	font-size: 16px;
    line-height: 16px;
}

.element-meta, .deck-card-counts {
    display: flex;
    margin-bottom: 40px;
}

.el-indicator {
    padding: 0 2px;
}

.counts-by-type {
    flex-grow: 1;
}
.counts-by-element {
    flex-grow: 2;
}

.element-table {
    width: 200px;
    margin-right: 0;
}

.tabwrapper .element-bars {
    padding-top: 5px;
}

.tabcontent {
    background: var(--ui-bg-2);
    padding: 10px;
    border: 1px dotted #a0a0a0;
    border-radius: 5px;
    border-top-left-radius: 0;
}

.tabcontent > p {
    margin: 0;
    padding: 2px 0 4px 0;
}

.pie-chart {
    width: 200px;
    height: 200px;
    margin: 20px;
    border-radius: 50%;
    margin-left: 0;
    border: 1px solid black;
}

.el-bar.fire {
    background-color: #b30;
}
.el-bar.wind {
    background-color: #6c3;
}
.el-bar.water {
    background-color: #03d;
}
.el-bar.norm {
    background-color: #ba9;
}
.evt {
    border: 2px solid black;
    border-radius: 3px;
    padding: 5px;
    text-decoration: none;
    box-shadow: var(--main-shadow);
    background: var(--ui-bg);
    display: flex;
    position: relative;
    padding-right: 25px;
    min-height: 100px;
    color: black;
}
.evt:hover {
    box-shadow: none;
}
.evt:visited {
    background: var(--ui-bg-vis);
    border-color: #666;
}
.evt:hover::after {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    background: linear-gradient(0deg, #6e498e, #fefefe);
    background-size: 200% 200%;
    filter: blur(5px);
    transform: scale(1.05);
    animation: rotateglow 2s ease infinite;
}

.evt h3 {
    margin-top: 0;
    margin-right: 5px;
    padding-bottom: 2px;
    border-bottom: 1px solid #333;
}

.evt-mainbox {
    flex-grow: 1;
}

.event-category {
    width: 20px;
    height: calc(100% - 8px);
    writing-mode: vertical-rl;
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 2px 4px 3px;
    color: white;
    background-color: #333;
    font-size: 14px;
}

.evt .champbadge {
    float: right;
    height: 50px;
    width: 50px;
}

.champbadge img {
    height: 50px;
    width: 50px;
    position: absolute;
    right: 35px;
}
@media (min-width: 1300px) {
    .evt .champbadge img {
        float: none;
        display: block;
        position: absolute;
        height: 100px;
        width: 100px;
        bottom: 3px;
        top: auto;
    }
}

.player-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 5px;
}

.pprofile {
    position: relative;
    padding: 5px 5px 5px 90px;
    border: 1.5px groove #777;
    border-radius: 2px;
    background: var(--ui-bg-vis);
    min-height: 71px;
}
.pprofile p {
    margin: 0;
    font-size: 16px;
    line-height: 15px;
}

.pprofile .last-seen a {
	font-size: 14px;
	line-height: 12px;
}

.p-avatar img {
    display: block;
    position: absolute;
    left: 3px;
    top: 3px;
    height: 75px;
    width: 75px;
}

.p-region {
    position: absolute;
    left: 50px;
    top: 55px;
}

.explanation {
    font-size: 13px;
    font-style: italic;
}

.scooped-corners .explanation {
    display: block;
    padding-left: 20px;
    line-height: 14px;
    margin: 3px 0 3px 18px;
}

.noem {
    font-style: normal;
}

.player-regions .tabs {
    margin-top: 25px;
}

.regular .event-category {
    color: black;
    background-color: #ccc;
}
.regionals .event-category {
    background-color: #03B;
}
.store-champs .event-category {
    background-color: #135D48;
}
.nationals .event-category {
    background-color: #811;
}
.worlds .event-category {
    background-color: #6B5213;
}

.season {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    margin-bottom: 100px;
}

.recent-majors {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
}

.h-link {
    font-family: "Fracturized Biolinum";
    font-size: 16px;
    font-weight: normal;
    margin-left: 20px;
}

.season-chunk {
    border-bottom: 3px groove black;
    padding: 0 0 20px 0;
    margin: 0 0 20px 0;
}

.season h2,
#past-seasons h3 {
    text-align: center;
    position: relative;
    margin: 0;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.season h2 a img,
.season h3 a img {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    transition: transform 0.5s ease;
    max-width: 100%;
    max-height: 100%;
}

.season h2 a:hover img,
.season h3 a:hover img {
    transform: scale(1.1);
}

h1 {
    background: var(--ui-bg);
    padding: 15px;
    margin-right: 20%;
    margin-top: 10px;
    position: relative;
    clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
    font-size: 32px;
    line-height: 30px;
}

#evt-info h1 img,
#szn-info h1 img {
    vertical-align: bottom;
}

h1::before {
    content: "";
    background-color: black;
    clip-path: polygon(0 0,
                       0 100%,
                       2px 100%,
                       2px 2px,
                       calc(100% - 21.5px) 2px,
                       calc(100% - 2.5px) 50%,
                       calc(100% - 21.5px) calc(100% - 2px),
                       2px calc(100% - 2px),
                       2px 100%,
                       calc(100% - 20px) 100%,
                       100% 50%,
                       calc(100% - 20px) 0,
                       0 0);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

ul.scooped-corners {
    list-style-type: none;
    margin: 0;
    --scoop-radius: 10px;
    --border-width: 2px;
    --border-color: black;
    --background: var(--ui-bg);
    display: inline-block;
    filter: drop-shadow(var(--main-shadow));
}

#main-nav {
    margin: 5px 0 15px 0;
}

.nav-item {
    padding: 5px 15px 5px 0;
}

.nav-item img {
    vertical-align: text-bottom;
}

.pagination-nav {
    padding: 1.5rem 0;
}

.flag {
    text-shadow: var(--main-shadow);
}

footer {
    border-top: 1px solid #aaa;
    padding-top: 5px;
    font-size: 13px;
    margin-top: 50px;
}

.cardimg img {
    border-radius: 4.75% / 3.5%
}

/*#card-info .cardimg img {
    border-radius: 10px;
}*/

#card-info .cardimg {
    display: inline-block;
    width: 300px;
    height: 440px;
}

#card-info .cardside-front,
#card-info .cardside-back {
    display: block;
    text-align: center;
}

@keyframes rotateglow {
    0% {
        background-position: 10% 0%;
    }
    50% {
        background-position: 51% 100%;
    }
    to {
        background-position: 10% 0%;
    }
}

.achievementlist {
    font-size: 0;
}

.achievement {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 125px;
    height: 125px;
    margin: 5px;
    padding: 8px;
    border: 1px solid black;
    border-radius: 4px;
    text-align: center;
    overflow: hidden;
    background: rgb(221,213,193);
    background: radial-gradient(circle, rgba(221,213,193,1) 0%, rgba(166,158,137,1) 75%, rgba(138,113,158,1) 100%);
    background-position: top left;
}
.refracted.achievement {
    background: #6081cd;
    background: radial-gradient(circle, #b5d6f3 0%, #6081cd 75%, #1d274d 100%);
}
a.achievement {
    text-decoration: none;
    color: black;
    box-shadow: var(--main-shadow);
}
.achievement.unachieved {
    opacity: 0.5;
    border-style: dotted;
    filter: sepia(100%);
}
.refracted.achievement.unachieved {
    filter: grayscale(75%);
}
.achievement.refracted.unachieved:hover {
    filter: unset;
    box-shadow: 0px 0px 20px 6px rgba(0,113,253,0.75);
}
.achievement.achieved {
    border-style: double;
    border-width: 4px;
    margin: 2px;
    text-shadow: var(--main-shadow);
}
.achievement h4 {
    font-size: 18px;
    margin: 0;
    line-height: 16px;
}
.achievement-emoji {
    font-family: "Noto Color Emoji", sans-serif;
    font-size: 48px;
    font-weight: 400;
    font-style: normal;
    line-height: 48px;
    margin-top: -4px; /* Compensate for emojis' bottom-heaviness */
}
.achievement-img {
    display: inline-block;
    width: 125px;
    height: 75px;
    overflow: hidden;
    border-radius: 4px;
}
.refracted .achievement-img {
    width: 100%;
    height: 100%;
}
.achievement-img img {
    width: 150px;
    height: 75px;
    object-fit: cover;
    object-position: 0 22%;
    margin-left: -10px;
}
.refracted .achievement-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	margin-left: 0;
}
.achievement-desc {
    padding: 0;
    margin: 0;
    text-indent: 0;
    font-size: 13px;
    line-height: 10px;
}
.achievement-stats {
    font-size: 12px;
    line-height: 10px;
    font-style: italic;
    margin: 0;
    padding: 5px;
    padding-top: 0;
    text-align: center;
}
.achievement-wrapper {
    display: inline-block;
    width: 155px;
    height: 185px;
    margin: 3px;
    vertical-align: top;
}

.event-filtering label,
.subtypes-radios label {
    white-space: nowrap;
    line-height: 30px;
}

.searchbox, .smartsearch {
	margin-bottom: 5px;
	width: 350px;
}

.reset-button {
    margin-bottom: 5px;
}

.vodgrid {
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
    grid-template-columns: repeat(auto-fill, minmax(min(575px, 100%), 1fr));
    grid-gap: 10px;
}
.vodgrid .vod {
    padding: 5px;
    border: 1.5px groove #777;
    border-radius: 2px;
    display: grid;
    grid-template-columns: [p1] 5fr [vs] 2fr [p2] 5fr;
    background: var(--ui-bg);
}
.vod .p1 {
    grid-column: p1;
    position: relative;
    padding-left: 85px;
}
.vod .p2 {
    grid-column: p2;
    position: relative;
    padding-right: 85px;
    text-align: right;
}
.vod .p2 .p-avatar img {
    left: auto;
    right: 3px;
}
.vod .p2 .p-region {
    left: auto;
    right: 5px;
}
.vod .p-name {
    display: block;
    font-weight: bold;
}
.vod .vid {
    grid-column: vs;
    justify-content: center;
    text-align: center;
}
.vod .vid a:hover img {
    filter: drop-shadow(#63498e 0 0 10px);
}
.vod .event-of-vid {
    grid-column: 1 / 4;
    text-align: center;
    font-size: 16px;   
}

#champdisplay {
    display: grid;
    grid-gap: 10px 13px;
    grid-template-columns: repeat(auto-fit, 197px);
}

.champslice {
    width: 200px;
    height: 500px;
    border: 2px solid #222;
    box-shadow: var(--main-shadow);
    background-size: cover;
    text-decoration: none;
    color: white;
    text-shadow: 0 1px 2px black, 0 1px 2px black, 0 1px 2px black, 0 1px 2px black;
    border-radius: 0 20px / 35px;
}

.champslice .champ-name {
	/* background: var(--ui-bg); */
	padding: 7px 0 10px 0;
	/* clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%); */
	font-size: 38px;
	line-height: 20px;
	margin-bottom: 5px;
	text-shadow: 0 1px 2px black, 0 1px 2px black, 0 1px 2px black, 0 1px 2px black;
	color: #ccc;
}

/* .champslice .champ-name::before {
	content: "";
	background-color: black;
	clip-path: polygon(0 0, 0 100%, 2px 100%, 2px 2px, calc(100% - 21.5px) 2px, calc(100% - 2.5px) 50%, calc(100% - 21.5px) calc(100% - 2px), 2px calc(100% - 2px), 2px 100%, calc(100% - 20px) 100%, 100% 50%, calc(100% - 20px) 0, 0 0);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}*/

.champdisplay-inner {
	display: flex;
	flex-direction: column;
	justify-content: end;
	height: calc(100% - 20px);
	padding: 10px;
	text-align: center;
    border-radius: 0 20px / 35px;
    background-size: cover;
    backdrop-filter: blur(5px);
    overflow: hidden;
}

.champdisplay-inner b {
    display: block;
	color: black;
	text-shadow: 0 1px 2px white, 0 1px 2px white, 0 -1px 2px white, 0 -1px 2px white;
	font-weight: 800;
	font-size: 18px;
}

.champslice:hover .champdisplay-inner {
	backdrop-filter: blur(5px) brightness(150%) saturate(150%);
}

.champslice.el-fire {
    background-color: rgba(175, 81, 49, 0.5);
}
.champslice.el-water {
    background-color: rgba(32, 49, 104, 0.5);
}
.champslice.el-wind {
    background-color: rgba(123, 185, 91, 0.5);
}

.champslice.champ-alice .champdisplay-inner {
    background-image: url("champ/alice.png");
}
.champslice.champ-allen .champdisplay-inner {
    background-image: url("champ/allen.png");
}
.champslice.champ-arisanna .champdisplay-inner {
    background-image: url("champ/arisanna.png");
}
.champslice.champ-ciel .champdisplay-inner {
    background-image: url("champ/ciel.png");
}
.champslice.champ-diana .champdisplay-inner {
    background-image: url("champ/diana.png");
}
.champslice.champ-diana-dtr .champdisplay-inner {
    background-image: url("champ/diana-dtr.png");
}
.champslice.champ-diao-chan .champdisplay-inner {
    background-image: url("champ/diao-chan.png");
}
.champslice.champ-guo-jia .champdisplay-inner {
    background-image: url("champ/guo-jia.png");
}
.champslice.champ-jin .champdisplay-inner {
    background-image: url("champ/jin.png");
}
.champslice.champ-kongming .champdisplay-inner {
    background-image: url("champ/kongming.png");
}
.champslice.champ-lorraine .champdisplay-inner {
    background-image: url("champ/lorraine.png");
}
.champslice.champ-merlin .champdisplay-inner {
    background-image: url("champ/merlin.png");
}
.champslice.champ-merlin-ptm .champdisplay-inner {
    background-image: url("champ/merlin-ptm.png");
}
.champslice.champ-mordred .champdisplay-inner {
    background-image: url("champ/mordred.png");
}
.champslice.champ-nico .champdisplay-inner {
    background-image: url("champ/nico.png");
}
.champslice.champ-polkhawk .champdisplay-inner {
    background-image: url("champ/polkhawk.png");
}
.champslice.champ-rai .champdisplay-inner {
    background-image: url("champ/rai.png");
}
.champslice.champ-silvie .champdisplay-inner {
    background-image: url("champ/silvie.png");
}
.champslice.champ-tonoris .champdisplay-inner {
    background-image: url("champ/tonoris.png");
}
.champslice.champ-tristan .champdisplay-inner {
    background-image: url("champ/tristan.png");
}
.champslice.champ-vanitas .champdisplay-inner {
    background-image: url("champ/vanitas.png");
}
.champslice.champ-zander .champdisplay-inner {
    background-image: url("champ/zander.png");
}
.arche-rile {
    background-image: url("bg/rile.jpg");
}
.arche-water-allies {
    background-image: url("bg/water-allies.jpg");
}
.arche-wind-allies {
    background-image: url("bg/wind-allies.jpg");
}
.arche-fire-aggro {
    background-image: url("bg/fire-aggro.jpg");
}
.arche-cinderbloom-combo {
    background-image: url("bg/cinderbloom-combo.jpg");
}
.arche-astra-cleric {
    background-image: url("bg/astra-cleric.jpg");
}
.arche-umbra-ranger {
    background-image: url("bg/umbra-ranger.jpg");
}
.arche-luxem-assassin {
    background-image: url("bg/luxem-assassin.jpg");
}
.arche-erupting {
    background-image: url("bg/erupting.jpg");
}
.arche-ravishing-mill {
    background-image: url("bg/ravishing-mill.jpg");
}
.arche-penguin-mill {
    background-image: url("bg/penguin-mill.jpg");
}
.arche-arcane {
    background-image: url("bg/arcane.jpg");
}
.arche-slimes {
    background-image: url("bg/slimes.jpg");
}
.arche-slice-dice {
    background-image: url("bg/slice-dice.jpg");
}
.arche-crux-lorraine {
    background-image: url("bg/crux-lorraine.jpg");
}
.arche-crux-mage {
    background-image: url("bg/crux-mage.jpg");
}
.arche-crux-assassin {
    background-image: url("bg/crux-assassin.jpg");
}
.arche-shadowstrike {
    background-image: url("bg/shadowstrike.jpg");
}
.arche-neos {
    background-image: url("bg/neos.jpg");
}
.arche-beast {
    background-image: url("bg/beast.jpg");
}
.arche-tera-tamer {
    background-image: url("bg/tera-tamer.jpg");
}
.arche-overlord {
    background-image: url("bg/overlord.jpg");
}
.arche-domains {
    background-image: url("bg/domains.jpg");
}
.arche-exia {
    background-image: url("bg/exia.jpg");
}
.arche-tera-mage {
    background-image: url("bg/tera-mage.jpg");
}
.arche-razorgale {
    background-image: url("bg/razorgale.jpg");
}
.arche-cats {
    background-image: url("bg/cats.jpg");
}
.arche-fractal {
    background-image: url("bg/fractal.jpg");
}
.arche-luxem-tamer {
    background-image: url("bg/luxem-tamer.jpg");
}
.arche-seiryuu {
    background-image: url("bg/seiryuu.jpg");
}
.arche-genbu {
    background-image: url("bg/genbu.jpg");
}
.arche-byakko {
    background-image: url("bg/byakko.jpg");
}
.arche-suzaku {
    background-image: url("bg/suzaku.jpg");
}
.arche-tera-cleric {
    background-image: url("bg/tera-cleric.jpg");
}
.arche-firebloom-burn {
    background-image: url("bg/firebloom-burn.jpg");
}
.arche-dawn-of-ashes {
    background-image: url("bg/dawn-of-ashes.jpg");
}
.arche-suited {
    background-image: url("bg/suited.jpg");
}
.arche-oblation {
    background-image: url("bg/oblation.jpg");
}
.arche-umbra-guardian {
    background-image: url("bg/umbra-guardian.jpg");
}
.arche-astra-ranger {
    background-image: url("bg/astra-ranger.jpg");
}
.arche-water-aetherwing {
    background-image: url("bg/water-aetherwing.jpg");
}
.arche-fire-aetherwing {
    background-image: url("bg/fire-aetherwing.jpg");
}
.arche-wakeup-combo {
    background-image: url("bg/wakeup-combo.jpg");
}
.arche-horse-and-taxes {
    background-image: url("bg/horse-and-taxes.jpg");
}
.arche-triskit {
    background-image: url("bg/triskit.jpg");
}
.arche-chess {
    background-image: url("bg/chess.jpg");
}
.arche-umbra-alice {
    background-image: url("bg/umbra-alice.jpg");
}
.arche-luxem-mordred {
    background-image: url("bg/luxem-mordred.jpg");
}

.notif-banner {
    padding: 10px;
    background: var(--ui-bg);
    box-shadow: var(--main-shadow);
    margin: 10px 0;
}

.holo::after {
    content: "";
    background-image: repeating-linear-gradient( 110deg, var(--violet), var(--blue), var(--green), var(--yellow), var(--red), var(--violet), var(--blue), var(--green), var(--yellow), var(--red), var(--violet), var(--blue), var(--green), var(--yellow), var(--red) );

	background-position: calc(((50% - var(--background-x)) * 2.6) + 50%) calc(((50% - var(--background-y)) * 3.5) + 50%), center center;
	background-size: 400% 400%, cover;
	background-blend-mode: overlay;
	filter: brightness(1.1) contrast(1.1) saturate(1.2);
	mix-blend-mode: color-dodge;
}

:root {
    --ui-bg: linear-gradient(0deg, #e1e0db, #f2efe5);
    --ui-bg-sub: linear-gradient(0deg, #cbcac6, #e1e0db);
    --ui-bg-2: linear-gradient(180deg, #c7c6c1 0%, #c7c6c1 95%, #aba6a5 100%);
    --ui-bg-vis: #cccbc6;
    --main-shadow: 3px 3px 5px #55504d;
    --lesser-shadow: 2px 2px 4px #65606d;

    /* vars for holo overlay. https://poke-holo.simey.me/ */
    --clip: inset( 9.85% 8% 52.85% 8% );
    --red: #f80e35;
    --yellow: #eedf10;
    --green: #21e985;
    --blue: #0dbde9;
    --violet: #c929f1;
}


.scooped-corners {
    /* https://codepen.io/MisterCurtis/pen/ExKPOYZ */
    --scoop-radius: 20px;
    --border-width: 2px;
    --border-color: #000000;
    --background-color: #ffffff;

    --border-stop: calc(var(--scoop-radius) + var(--border-width));

    --scoop-gradient: rgba(255, 255, 255, 0) var(--scoop-radius),
        var(--border-color) calc(var(--scoop-radius) + 1px),
        var(--border-color) var(--border-stop),
        var(--background-color) calc(var(--border-stop) + 1px);

    padding: var(--border-stop);

    background: var(--background-color);
    background: radial-gradient(circle at 0 0, var(--scoop-gradient)) top left,
        radial-gradient(circle at 100% 0, var(--scoop-gradient)) top right,
        radial-gradient(circle at 100% 100%, var(--scoop-gradient)) bottom right,
        radial-gradient(circle at 0 100%, var(--scoop-gradient)) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

    background-image: linear-gradient(
            to bottom,
            var(--border-color) 0,
            var(--border-color) var(--border-width)
        ),
        linear-gradient(
            to left,
            var(--border-color) 0,
            var(--border-color) var(--border-width)
        ),
        linear-gradient(
            to top,
            var(--border-color) 0,
            var(--border-color) var(--border-width)
        ),
        linear-gradient(
            to right,
            var(--border-color) 0,
            var(--border-color) var(--border-width)
        ),
        radial-gradient(circle at 0 0, var(--scoop-gradient)),
        radial-gradient(circle at 100% 0, var(--scoop-gradient)),
        radial-gradient(circle at 100% 100%, var(--scoop-gradient)),
        radial-gradient(circle at 0 100%, var(--scoop-gradient)),
        linear-gradient(
            to right,
            var(--background-color) 0,
            var(--background-color) 1px
        ),
        linear-gradient(
            to right,
            var(--background-color) 0,
            var(--background-color) 1px
        );

    background-position: top center, right center, bottom center, left center,
        top left, top right, bottom right, bottom left, top center, left center;

    background-size: calc(100% - (var(--scoop-radius) + 1px) * 2)
            var(--border-width),
        var(--border-width) calc(100% - (var(--scoop-radius) + 1px) * 2),
        calc(100% - (var(--scoop-radius) + 1px) * 2) var(--border-width),
        var(--border-width) calc(100% - (var(--scoop-radius) + 1px) * 2),
        var(--border-stop) var(--border-stop),
        var(--border-stop) var(--border-stop),
        var(--border-stop) var(--border-stop),
        var(--border-stop) var(--border-stop),
        calc(100% - var(--border-stop) * 2) 100%,
        100% calc(100% - var(--border-stop) * 2);
}

@media screen and (max-width: 1199.98px) {
    .player-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.mobile-only {
    display: none;
}

@media screen and (max-width: 575.98px) {
    .mobile-only {
        display: block;
    }
    body {
        padding: 10px;
    }

    h1 {
        margin-right: 0;
    }

    .nav-item {
        display: inline-block;
        padding: 10px;
        margin: 4px;
        border: 1.5px solid transparent;
    }
    a.nav-item {
        border: 1.5px groove #777;
        border-radius: 2px;
        background-color: #d5d5d5;
    }

    .season {
        grid-template-columns: 1fr;
    }

    .recent-majors {
        grid-template-columns: 1fr;
    }

    .searchbox, .smartsearch {
        margin-bottom: 5px;
        width: calc(100% - 50px);
    }

    .player-grid {
        grid-template-columns: 1fr;
    }

    .element-meta {
        flex-direction: column;
        align-items: center;
    }

    .el-pct {
        margin-top: 20px;
    }
    .showmatches button {
        font-size: 14px;
        line-height: 14px;
    }

    .top-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 3px;
    }
    .top-cards .cardimg,
    .top-cards .cardimg img {
        width: 100%;
        height: 100%;
    }

    #all-cards th:nth-child(2) {
        font-size: 10px;
    }
    #all-cards th:nth-child(3) {
        font-size: 12px;
    }
    #all-cards td:first-child {
        font-size: 16px;
    }

    #champdisplay {
        grid-template-columns: repeat(auto-fit, 115px);
    }
    .champslice {
        width: 113px;
        height: 250px;
        border-radius: 0 10px / 15px;
    }
    .champslice .champ-name {
        font-size: 25px
    }
    .champslice b {
        display: none;
    }
    .champslice .champ-detail {
        backdrop-filter: blur(5px) grayscale(80%) brightness(1.2);
        font-size: 14px;
        padding-bottom: 7px;
        text-shadow: none;
        color: black;
    }
    .champdisplay-inner {
        padding: 0;
        height: 100%;
        border-radius: 0 10px;
    }
    .champslice .champ-detail .top-wielder {
        font-size: 12px;
    }
    .top-archetype::before {
        content: "📊";
    }

    .deck-bg {
        animation: unset;
        top: 0;
    }

    .decklist h3 {
        margin-top: 0;
    }
    .decklist-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: calc(100vw - 10px);
        height: calc(100vh - 10px);
        padding: 5px;
    }
    .decklist-inner button {
        margin-bottom: 5px;
    }
    .decklist-viewbox {
        width: calc(100vw - 10px);
        height: calc(90vh - 10px);
    }
    .decklist .cardimg, .decklist .cardimg img {
        width: 120px;
        height: 168px;
    }
    .deck-card-counts {
        display: block;
    }
    .decklist p {
        margin: 0;
    }

    .deck-card-counts ul,
    .similar-decks ul {
        padding-inline-start: 15px;
    }

    #players th, #conversion-rate th {
        font-size: 16px;
    }
    #players th:first-child {
        font-size: 14px;
    }
    .showmatches {
        display: none;
    }
    .p_record button {
        font-size: 10px;
    }
    .p-row td, 
    .cr-row td, .cr-row td:first-child, .cr-row td:nth-child(2),
    .cr-element-row td {
        font-size: 16px;
        padding: 3px;
    }
    table .playername {
        word-break: break-word;
    }

    .achievement {
        width: 95px;
        height: 95px;
        padding: 5px;
    }
    .achievement-emoji {
        font-size: 34px;
        line-height: 34px;
    }
    .achievement-img {
        width: 95px;
        height: 57px;
    }
    .achievement-img img {
        width: 114px;
        height: 57px;
    }
    .achievement h4 {
        font-size: 15px;
    }

    .cr-inner {
        line-height: 14px;
    }

    .cr-row .deck-bg {
        top: -80%;
    }

    .prev-deck-btn, .next-deck-btn {
        display: none;
    }
}

.player-omni-avatar {
    position: relative;
    height: 88px;
    width: 88px;
}

#player-info .player-omni-avatar {
    float: right;
}

.avatar-image {
    position: absolute;
    top: 14px;
    left: 12px;
    width: 64px;
    height: 64px;
}
.avatar-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 88px;
    height: 88px;
}

#add-achievement-popup {
    position: fixed;
    left: 0;
    top: 0;
    border-width: 10vh 10vw 10vh 10vw;
    border-color: rgba(0,0,0,0.75);
    border-style: solid;
    width: 75vw;
    height: 75vh;
    padding: 2.5vh 2.5vw 2.5vh 2.5vw;
    background-color: var(--ui-bg-2);
}
#add-achievement-popup > * {
    display: block;
    padding: 5px;
    margin: 10px;
}

#achievement-preview {
    display: flex;
    justify-content: center;
}

#achievement-selector {
    font-size: 0;
}

#achievement-selector .achievement-wrapper {
    height: 155px;
}

@media screen and (max-width: 575.98px) {
    #achievement-selector .achievement-wrapper {
        height: unset;
        width: unset;
        margin: 0;
    }
    #achievement-selector h4 {
        font-size: 13px;
    }
    #achievement-selector .achievement-desc {
        font-size: 11px;
    }
}

#copy-evt {
    display: block;
}

#trailblazer-dl {
    display: block;
    width: 90%;
    height: 300px;
}

.sortable th {
    cursor: pointer;
}

/* FAQ styles */
.q {
    font-size: 20px;
    font-weight: bolder;
    font-style: italic;
}
.a {
    padding-left: 20px;
}