/* Resets? */

*, *::before, *::after {
    box-sizing: border-box;
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
}

/* General */

div {
    /* border: 1px dotted black; */
    /* padding: 4px; */
}

body {
    background-image: linear-gradient(123deg, #6f6feb, #3cbffc);
    font-family: Lato, Verdana, Geneva, Tahoma, sans-serif;
    height: 100vh;
}

/* input {
    min-width: 300px;
    padding: auto;
} */

/* .expandable {
    display: none;
} */

.expandable:not(.expanded) {
    display: none !important;
}

.footnote {
    font-size: 0.6em;
    font-style: italic;
}

.header {
    display: flex;
    font-weight: 800;
    font-family: "Lato", "Helvetica Neue", "Arial";
}

@media (max-width: 500px)  {
    .header {
        overflow-x: scroll;
    }
}

.section-header {
    display: flex;
    cursor: pointer;
}

.section-header>h4 {
    margin: 2px;
}

.section-expander {
    margin: auto;
    padding: 0px 2px;
    position: relative;
    right: 0px;
    user-select: none;
}

.section-expander.expanded>span {
    rotate: 90deg;
    margin: 4px 2px;
}

.section-expander>span {
    justify-content: center;
    align-items: center;
    margin: 0px 2px;
    rotate: 0deg;
    transition: linear 0.1s;
    display: block;
}

.header div {
    border-radius: 3px;
    margin: 3px 5px;
    padding: 3px 5px;
    background: rgba(1, 1, 1, 0.212);
    cursor: pointer;
}

.header div:hover {
    background: rgba(1, 1, 1, 0.377);
}

.header>a {
    text-decoration: none;
}

#settings-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 0.7em;
    justify-content: center;
    /* text-align: center; */
    align-items: center;
}

#settings-content.hidden {
    height: 0px;
    display: none;
}

#settings-sort {
    display: flex;
    /* margin: 2px auto; */
}

#settings-toggles {
    display: grid;
}

#settings-toggles>div {
    align-items: center;
    margin: 2px 2px;
}

#settings-toggles>div>input{
    margin: 0 4px;
}

#settings-toggles>div select {
    margin: 0 4px;
}

.settings-types {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 3fr;
    align-items: center;
}

.settings-types-header {
    grid-column: 1 / 5;
    margin: 1px auto;
}

#input-modes {
    display: flex;
}

#input-modes > div {
    padding: 2px 4px;
    margin: 2px 4px;
    background: rgba(1, 1, 1, 0.212);
    border-radius: 3px;
    font-size: 0.9em;
}

#input-modes > div:hover {
    background: rgba(1, 1, 1, 0.377);
    cursor: pointer;
}

#input-modes > div.active {
    background: rgba(124, 8, 118, 0.377);
}

.input-container {
    padding: 4px 4px;
    /* display: flex; */
    display: grid;
    grid-template-columns: 2fr 8fr;
}

.input-container input[type="submit"] {
    /* width: 80%; */
    display: inline-flex;
    margin: 2px auto;
    right: 0;
}

#input-link {
    display: grid;
    grid-template-columns: 2fr 8fr;
}

#card-results {
    /* display: flex; */
    height: 100%;
    width: 100%;
}

#results-progress {
    margin: 40px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-style: italic;
}

#results {
    /* display: flex; */
    height: 100%;
    overflow-y: scroll;
    /* border: 4px solid rgba(189, 60, 167, 0.404) */
}

.set-title-bar {
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.336));
    display: grid;
    grid-template-columns: 1fr 19fr 1fr;
    cursor: pointer;
}

.set-title-bar>.set-info {
    padding: 6px 4px;
}

.set-title-bar>.set-icon {
    max-height: 30px;
    max-width: 30px;
    margin: auto;
}

.set-cards {
    background: rgba(255, 255, 255, 0.336);
    display: flex;
    flex-wrap: wrap;
}

.card-small {
    /* border: 2px solid blue; */
    border-radius: 7px;
    margin: 1px;
}

.cardbox {
    position: relative;
    /* border: 2px solid red; */
}

/* .cardbox-card:hover {
    position:relative;
} */

.cardbox-card:nth-child(1){
    position: relative;
    min-width: 110%;
    z-index: 2;
}

.cardbox-card ~ .cardbox-card {
    position: absolute;
    transform: scale(90%) translate(calc(15px - 2px * var(--td-card-index)), 0px) rotate(calc(5deg * var(--td-card-index)));
    left: 0px;
    transition: .1s;
}

.cardbox:hover>.cardbox-card~.cardbox-card {
    /* position: relative; */
    /* transform: rotate(0deg); */
    /* transform: translateX(100%) !important; */
    transform: translateX(calc(100% * var(--td-card-index))) !important;
}

.cardbox:hover>.card-placeholder {
    display: inline;
    visibility: hidden;
    margin: 1px;
}

.card-placeholder {
    display: none;
}

.cardbox-spacer {
    display: inline-block;
    width: 20px;
}

.cardbox:hover>.cardbox-spacer {
    display: inline;
    visibility: hidden;
}

.mtg-card {
    /* border: 2px solid black; */
    border-radius: 16px;

    height: 400px;
    width: 286px;
    margin: 40px auto;

    background: url("https://cards.scryfall.io/large/front/0/7/070ff479-9d87-4ab6-aaaa-e96b9df0bac4.jpg?1572491113");
    background-size: cover;

    animation-name: rotateCard;
    animation-play-state: running;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    animation: bobCard 4s linear infinite, rotateCard 4s ease-in-out infinite;

    /* transform: perspective(800px); */
    --mc-tilt-x: 0deg;
    --mc-tilt-y: 0deg;
    --mc-rotate-y-offset: 0deg;

    --mc-translate-y-offset: 0px;
    transform: perspective(800px) rotateY(var(--mc-tilt-y)) rotateX(var(--mc-tilt-x));
    transition: 6s;

    backface-visibility: hidden;
}

.mtg-card-back {
    background: url("https://files.mtg.wiki/thumb/Magic_card_back.jpg/429px-Magic_card_back.jpg?20250120070248");
    background-size: cover;
    /* animation-name: rotateCardBack; */
    --mc-rotate-y-offset: 180deg;
    --mc-translate-y-offset: -440px;
    transform: translateY(-440px);
    /* z-index: -4; */
}

.mtg-card-shadow {
    height: 40px;
    width: 200px;
    background: radial-gradient(#00000096, #00000000 60%);
    border: none;
    /* border-radius: 50%; */
    margin: 40px auto;
    transform: translateY(-400px);
    --mc-tilt-x: 0deg;
    --mc-tilt-y: 0deg;
    --mc-rotate-y-offset: 0deg;

    --mc-translate-y-offset: -400px;
    animation: bobCard 4s linear infinite, shadow 4s ease-in-out infinite;
}

@keyframes rotateCard {
    0% {
        transform: translateY(var(--mc-translate-y-offset)) perspective(800px) rotateY(calc(-40deg + var(--mc-rotate-y-offset) + var(--mc-tilt-y))) rotateX(var(--mc-tilt-x));
    }
    50% {
        transform: translateY(calc(var(--mc-translate-y-offset) + 20px)) perspective(800px) rotateY(calc(-10deg + var(--mc-rotate-y-offset) + var(--mc-tilt-y))) rotateX(var(--mc-tilt-x));
    }
    100%{
        transform: translateY(var(--mc-translate-y-offset)) perspective(800px) rotateY(calc(-40deg + var(--mc-rotate-y-offset) + var(--mc-tilt-y))) rotateX(var(--mc-tilt-x));
    }
}

@keyframes shadow {
    0% {
        transform: translateY(var(--mc-translate-y-offset)) perspective(800px) rotateY(calc(-40deg + var(--mc-rotate-y-offset) + var(--mc-tilt-y))) rotateX(var(--mc-tilt-x));
        opacity: 0.8;
        height: 40px;
    }
    50% {
        transform: translateY(calc(var(--mc-translate-y-offset) + 10px)) perspective(800px) rotateY(calc(-10deg + var(--mc-rotate-y-offset) + var(--mc-tilt-y))) rotateX(var(--mc-tilt-x));
        opacity: 1;
        height: 30px;
    }
    100%{
        transform: translateY(var(--mc-translate-y-offset)) perspective(800px) rotateY(calc(-40deg + var(--mc-rotate-y-offset) + var(--mc-tilt-y))) rotateX(var(--mc-tilt-x));
        opacity: 0.8;
        height: 40px;
    }
}

@keyframes rotateCardBack {
    0% {
        transform: translateY(-440px) translateZ(-20px) perspective(800px) rotateY(180deg);
        
        opacity: 0;
    }
    24% {
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    50% {
        transform: translateY(-440px) translateZ(0px) perspective(800px) rotateY(360deg);
    }
    74%{
        opacity: 1;
    }
    75%{
        opacity: 0;
    }
    100%{
        transform: translateY(-440px) translateZ(-20px) perspective(800px) rotateY(540deg);
        
        opacity: 0;
    }
}

.event-settings {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.event-settings>div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 4px;
    /* vertical-align: center; */
}

.event-settings input {
    width: auto;
}

.rounds-header {
    justify-content: center;
    text-align: center;
    font-size: large;
    font-weight: 700;
    padding: 2px 6px;
    background: linear-gradient(rgba(255, 169, 169, 0.199), rgba(141, 20, 255, 0.199));
    border-radius: 8px 8px 0 0;
}

@keyframes round-fadein{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.event-round{
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 2fr;
    border: 2px solid rgba(165, 165, 165, 0.356);
    border-radius: 5px;
    padding: 2px;
    margin: 3px;
    animation: round-fadein .5s linear 0s 1;
}

.picker-holder {
    display: flex;
    justify-content: space-evenly;
    align-content: stretch;
    /* flex-direction: row; */
}

.event-round>div{
    align-items: center;
    display:flex;
}

.round-title{
    font-weight: 700;
    margin: 5px;
}

.picker {
    /* padding: auto; */
    flex-grow: 1;
    /* justify-content: space-evenly; */
    align-items: center;
    vertical-align: center;
    text-align: center;
    user-select: none;
    padding: 10px 2px;
    opacity: 1;
    transition: .4s;
}

.picker:hover {
    background: rgba(255, 255, 255, 0.336);
    cursor:pointer;
}

.mtg-color-picker.unpicked {
    opacity: .2; 
}

.mtg-color-picker.half {
    opacity: .5; 
}

.mtg-color-picker.picked {
    opacity: 1; 
}

.deck-root.blurred img{
}

.deck-root {
    display: grid;
    grid-template-columns: 70fr 30fr;
}

.deck-card {
    position: relative;
    height: 20px;
    width: 140px;
}

.deck-card>img {
    position: relative;
    width: 100%;
    transition: .5s;
}

.deck-card>img:hover{
    z-index: 1000;
    transform: scale(103%) translateX(1px) translateY(-2px) rotateZ(1deg);
}

#card-grid{
    /* display:inline-flex; */
}

.auction-card {
    border-radius: 1em;
    border: 3px solid grey;
    background: rgba(0, 0, 0, 0.404);
    width: 25%;
    aspect-ratio: 1/1.4;
    min-width: 40px;
    min-height: 40px;
    margin: 6px;
}

.swu-card {
    width: 160px;
}

.swu-cardlist-entry:hover {
    background-color: #63636396;
}

#card-tooltip {
    display: none;
    position: absolute;
}

#card-tooltip-img {
    width: 200px;
}

.card.main{
    height: 400px;
    margin: auto;
}

.card.main>img{
    margin: auto;
    height: 100%;
    border-radius: 1.2em;
}

/* #card-list {
    width: 40vw;
    height: 400px;
    padding: 20px;
    display: flex;
    gap: 4vw;
} */

/* card counter stuff */

.card-carousel {
    width: 100vw;
}

.card-carousel>ul {
    gap: 4vw;
    
    width: 80%;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

.card-carousel>ul>li {
    position: relative;

    list-style-type: none;
    background-color: rgba(255, 255, 255, 0.192);
    border: 1px solid #962929;
    padding: 20px;
    /* flex: 0 0 100%; */

    scroll-snap-align: center;
}

.card-carousel>ul>li>img{
    height: 400px;
    margin: auto;
    border-radius: 1.2em;
}

/* Dungeon tracker */

.dungeon-tracker {
    display: flex;
    flex-direction: row;
}

@media (max-width: 641px) {
    .dungeon-tracker {
        flex-direction: column;
    }
}

#dungeon-holder{
    margin: 0px auto;
    width: 80%;
    /* aspect-ratio: 63 / 88; */
    max-width: 80vw;
    max-height: 80vh;
}

#dungeon-buttons {
    display: block;
    position: relative;
    margin: 0 auto;
    aspect-ratio: 63 / 88;
    max-height: 100%;
    /* z-index: 10; */
    /* padding: 20% 8% 12%; */
}

.dungeon-spec {
    /* position: relative; */
    display: none;
    /* height: 100%; */
    max-height: 100%;
    aspect-ratio: 63 / 88;
    margin: 0 auto;
    /* padding-bottom: 8.5%; */
    padding-top: 19.5%;
    padding-bottom: 17.3%;
    padding-left: 7.7%;
    padding-right: 7.7%;
}

.dungeon-spec > img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    margin: 0px auto;
    /* max-width: 80vw;
    max-height: 60vh; */
    /* height: 100%; */
    aspect-ratio: 63 / 88;
    z-index: -10;
    left: 50%;
    transform: translate(-50%, 0);
    top:0;
}

.dungeon-undercity {
    padding-top: 27.0%;
    padding-bottom: 11.2%;
    padding-left: 7.7%;
    padding-right: 7.0%;
    /* margin-top: 8.5%;
    margin-bottom: 1%;
    padding-bottom: 0%; */
    grid-template: 
    "a a a a a a" 120fr
    "b b b c c c" 118fr
    "d d e e f f" 158fr
    "g g g h h h" 159fr
    "i i i i i i" 199fr / 200fr 40fr 80fr 80fr 40fr 200fr;
}

.dungeon-annihilation {
    grid-template:
    "a a" 0.8fr
    "b c" 1.0fr
    "d c" 1.0fr
    "e e" 1.0fr / 1fr 1fr;
}

.dungeon-mad-mage {
    grid-template:
    "a a" 1fr
    "b b" 1fr
    "c d" 2fr
    "e e" 1fr
    "f g" 2fr
    "h h" 1fr
    "i i" 1.5fr / 1fr 1fr;
}

.dungeon-phandelver {
    grid-template:
    "a a a a a a" 160fr
    "b b b c c c" 200fr
    "d d e e f f" 240fr
    "g g g g g g" 160fr / 1fr .7fr 1fr 1fr .7fr 1fr;
}

.dungeon-button {
    /* display: inline; */
    /* background: rgba(129, 129, 129, 0.644); */
    border: 2px solid rgba(0, 0, 0, 0);
    border-image-slice: 1;
    border-width: 5px;
    /* vertical-align: top; */
    align-content: center;
    text-align: center;
    font-size: 0.75em;
    font-weight: 600;
    user-select: none;
    font-size:0;
}

.dungeon-button:active {
    background: rgba(240, 240, 240, 0.062);
}

.dungeon-button>div {
    font-size: 0.55em;
}

.dungeon-settings {
    max-width: 80%;
    position: relative;
    margin: 5px auto;
}

#dungeon-selectors {
    display: flex;
    flex-direction: column;
    margin: 10px 10px;
    justify-content: center;
    align-items: center;
}

.dungeon-selector {
    display: grid;
    grid-template-columns: 1fr 10fr 1fr;
    grid-template-areas: '. button locator';
}

.dungeon-selector>img{
    cursor: pointer;
    grid-area: 'button';
}

.dungeon-selector.disabled{
    opacity: .5;
    cursor: default;
}

#dungeon-selector>img {
    margin: 1px 0px;
    width: 80%;

    /* filter: drop-shadow(1px 1px 0 white)
            drop-shadow(-1px 1px 0 white)
            drop-shadow(1px -1px 0 white)
            drop-shadow(-1px -1px 0 white); */
}

.dungeon-locator {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-area: 'locator';
}

.dungeon-locator>div {
    min-width: 4px;
    min-height: 4px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.432);
    margin: auto;
    padding: 4px;
    opacity: 0;
}

.dungeon-locator>div.active {
    opacity: 1;
}

#player-tracker {
    display: grid;
    grid-template-rows: 2fr 1fr 1fr;
    justify-content: center;
}

#player-list {
    display: flex;
    justify-content: center;
}

.player-setting-button {
    border: 2px solid rgba(13, 73, 141, 0.699);
    border-radius: 4px;
    background: rgb(204, 204, 204);
    padding: 4px 6px;
    user-select: none;
    cursor: pointer;
}

#player-list>div {
    position: relative;
    display: flex;
    border: 3px solid rgba(51, 51, 51, 0.116);
    border-radius: 4px;
    margin: 3px;
    aspect-ratio: 1;
    color: grey;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2em;
    user-select: none;
}

#player-list>div.active{
    color:black;
    font-size: 2em;
}

/* #player-list>div.first{
    &::before {
        box-sizing: unset;
        --angle: 0deg;
        content: '';
        position: absolute;
        opacity: 1;
        top: -4px;
        left: -4px;
        height: 100%;
        width: 100%;
        transform: scale(1.3);
        border-radius: unset;
        border: 5px solid pink;
        border-width: 4px;
        border-image-slice: 1;
        border-image-source: linear-gradient(
            var(--angle),
            rgba(0, 0, 255, 1) 0%,
            rgba(255, 255, 0, 1) 20%,
            rgba(0, 255, 255, 1) 40%,
            rgba(255, 0, 0, 1) 60%,
            rgba(255, 0, 255, 1) 80%,
            rgba(0, 255, 0, 1) 100%
        );
        animation: rotate 4s linear infinite;
    }
} */

#player-list>div.first>.player-selector-text {
    background-image: linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange, red);
    background-clip: text;
    color: transparent;
    animation: translate 6s ease-in-out infinite;
    background-size: 400% 100%;
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes translate {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 0%;
    }
}

#player-list>div.initiative::after{
    content: url("/assets/images/initiative-marker.png");
    position:absolute;
    top:-60px;
    left:-60px;
    transform: scale(.2) rotate(-40deg);
    box-sizing: unset;
}

#player-list>div.monarch::before{
    content: url("/assets/images/monarch-marker.png");
    position:absolute;
    top:-133px;
    left:-100px;
    transform: scale(.1) rotate(40deg);
    box-sizing: unset;
}

#player-list>div:nth-child(1),
.dungeon-locator>.dl-p1
{
    background-color: rgba(0, 0, 255, 1);
}
#player-list>div:nth-child(2),
.dungeon-locator>.dl-p2{
    background-color: rgba(255, 255, 0, 1);
}
#player-list>div:nth-child(3),
.dungeon-locator>.dl-p3{
    background-color: rgba(0, 255, 255, 1);
}
#player-list>div:nth-child(4),
.dungeon-locator>.dl-p4{
    background-color: rgba(255, 0, 0, 1);
}
#player-list>div:nth-child(5),
.dungeon-locator>.dl-p5{
    background-color: rgba(255, 0, 255, 1);
}
#player-list>div:nth-child(6),
.dungeon-locator>.dl-p6{
    background-color: rgba(0, 255, 0, 1);
}