.card-shadowy-border { z-index: 10; }
.evil-ears, .good-halo, #teamDeco {z-index: 11;}
.night-indicator {z-index: 11;}

.position-on-card { z-index: 20; }
.moon, .good-halo, .evil-ears { z-index: 21; }
.play-button { z-index: 22; }

.loading-indicator {
    z-index: 100;
}

/* Loader-indikator */
.loading-indicator {
    display: block;
    width: 100vw;
    height: 50vh;
    background: url('SVG/loader-icon.svg') no-repeat center;
    background-size: 50px 50px;
    animation: spin 1s linear infinite;
    top: 100px;
    left: 0;
    opacity: 1;
    position:absolute;
    transition: opacity 0.3s ease 0s;
    pointer-events: none;
}

.loading-indicator.hidden {
    opacity: 0;
    pointer-events: none;
}

#cardsContainer {
    opacity: 0.3; /* Skjult som standard */
    transition: opacity 0.3s ease 0s; /* opacity varighed hvordan ventetid*/
    }
    

#mainContent.cards-loaded #cardsContainer {
    opacity: 1; /* Viser kortene jævnt */
}

/* Animation for loader-ikon */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Kortcontainer */

#cardsContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
    box-sizing: border-box;
    gap: calc(var(--mainpadding)*8) calc(var(--mainpadding)*2);
    padding-bottom: calc(var(--mainpadding)*5);
    position: relative;
}

.evil .good-halo, .good .evil-ears {display: none;}
/* 🎴 GENEREL KORT STYLING */
.flex-column {
    position: relative;
    display: flex;
    flex-direction: column;
    width:100%;
    box-sizing: border-box; 
    height:100%;
}

.card-shadowy-border {
    border-radius: var(--radius);
    text-align: center;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
}


/* KORT INDHOLD: */

.top-card {
    border-width: 1px 1px 0px 1px;
    padding:var(--mainpadding);
    gap: var(--mainpadding);
    border-radius: var(--radius) var(--radius) 0px 0px;
}

.evil .top-card{
    border-radius: 0px;
}


/* 🌟 GLORIE & ØRER */

.evil-ears, .good-halo, #teamDeco{
    display: flex;
    position: absolute;
    top: -35px;
    justify-content: space-between;
    height:30px;
    width:100%;
    left:0px;
}

.evil-ears {
    top:-43.5px;
}

.top-card svg {
    display: block;
    position: relative;
}

/* Glorie */
.good-halo {
    background-image: url('SVG/good-halo.svg');
    background-repeat: no-repeat;
    background-position: center;
    justify-content: center;
}

.good-halo span {
    height: 7px;
    width:50%;
    max-width:50px;
    bottom: -34px;
    position: relative;
    background-image: url('SVG/halo-glow-on-card.svg');
    background-repeat: no-repeat;
    background-position:left;
    opacity: 50%;
}

span.right-glow {
    background-position: right;
}

/* Ører */

/* Ører – venstre og højre */
.left-ear, .evil #leftDeco{  left:-1.5px; }
.right-ear, .evil #rightDeco{ right:-1.5px;}

.mirrorX {
    transform: scaleX(-1);
}


/* 📸 HOVEDBILLEDE */

.card-image {
    height:var(--image-height);
    width: 100%;
    overflow: hidden;
    object-fit: cover;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: inherit;
}

/* 🏷️ ROLLENS NAVN */
.card-name {
    height:min-content;
    max-height: 100%;
    text-align: center;
    padding: var(--mainpadding);
    overflow:scroll;
}


.bottom-card {
display: grid;
grid-template-columns: auto 100px auto;
width: 100%;
box-sizing: border-box;
position: relative;
top:-1px;
}

.bottom-card-left {
    border-width: 0px 0px 1px 1px;
    border-radius: 0 0 0 var(--radius);
}

.bottom-card-right {
    border-width: 0px 1px 1px 0px;
    border-radius: 0px 0px 10px 0px;
}
/* 🌙 NATTEINDIKATOR */
.night-indicator {
    bottom: 0px;
    width: 100px;
    background-position: center bottom;
    height:52px;
}

.card .shape{
    fill: var(--dark-rgb);
    stroke: var(--middle-rgb);
    stroke-width: 1px;
}

.position-on-card {
    width:100px;
    height:52px;
    margin: auto;
    bottom:50px;
    position: relative;
}

/* Måneikon */
.moon {
    width: 20px;
    height:20px;
    background: url('SVG/moon.svg') no-repeat center;
    position: absolute;
    border-radius: 50%;
    background-color: var(--light-rgb);
    filter: drop-shadow(0 0 5px rgba(var(--light)));
}

/* Opvågnings-måne-placering */
.early-night.moon {top:42px; left:2px}
.mid-night.moon { top:4px; right:40px;}
.late-night.moon {top:42px; right:2px;}
.nowake-night.moon { display:none; }

@keyframes pulse-glow {
    0% { box-shadow: 0 0 1px 1px rgba(var(--light), 0); }
    50% { box-shadow: 0 0 4px 4px rgba(var(--light), 0.4); }
    100% { box-shadow: 0 0 1px 1px rgba(var(--light), 0); }
}

.moon {
    animation: pulse-glow infinite ease-in-out; /* Ingen fast varighed – det styres af JS */
}

/* ▶ PLAY-KNAP */
.play-button {
    position: absolute;
    top:36px;
    left:34px;
    background-color: var(--accent-rgb);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2);
    padding: 0px;
}

.play-button:hover {
    filter: brightness(110%) contrast(110%);
}
.play-button.playing {
   box-shadow: 0 0 50px 20px rgba(var(--accent), 0.9);
   filter: hue-rotate(-10deg) brightness(120%); 
}

.play-triangle, .play-graphic {
    background-image: url('SVG/play-triangle.svg');
    background-position: center;
    width: 30px;
    height: 30px;
    border-radius: inherit;
}

.play-button.playing .play-triangle {
    background-image: url('SVG/stop-square.svg');
}

.night-indicator,
.card-name,
.card-image img,
.position-on-card {
    pointer-events: none;
}

.play-button{
    pointer-events: all;
}


/* EFFEKTER VED TOUCH, CLICK, HOVER, ACTIVE og .SELECTED */

/* Skaler hele kortet */
.card-shadowy-border.active {
    transform: scale(1.02);
}

/* SELECTED */

.card.good.selected .card-settings {
    background-color: var(--good-dark-rgb);
    border-color: var(--good-middle-rgb);
}

.card.good.selected .boxed-in {
    /*outline-color: var(--good-middle-rgb);*/
    border-color:  var(--good-darkest-rgb);

}

.card.good.selected .shape {
    fill: var(--good-dark-rgb);
    stroke: var(--good-middle-rgb);
    stroke-width: 1px;
}

.card.evil.selected .card-settings {
    background-color: var(--evil-dark-rgb);
    border-color: var(--evil-middle-rgb);

}

.card.evil.selected .boxed-in {
   /* outline-color: var(--evil-middle-rgb);*/
    border-color:  var(--evil-darkest-rgb);

}

.card.evil.selected .shape {
    fill: var(--evil-dark-rgb);
    stroke: var(--evil-middle-rgb);
    stroke-width: 1px;
}