/* RESET */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@font-face {
	font-family: "one";
	src: url("../assets/fonts/ChelaOne-Regular.ttf");
}
@font-face {
	font-family: "glo";
	src: url("../assets/fonts/Gloria.ttf");
}
@font-face {
	font-family: "cd";
	src: url("../assets/fonts/Christopher Done.ttf");
}
@font-face {
	font-family: "tos";
	src: url("../assets/fonts/The Oriental Silence.ttf");
}
@font-face {
	font-family: "ch";
	src: url("../assets/fonts/Chlora.ttf");
}
@font-face {
	font-family: "corn";
	src: url("../assets/fonts/ExtraCorn-m2ooP.otf");
}
@font-face {
	font-family: "cb";
	src: url("../assets/fonts/ChargerBold-gXaY.otf");
}

/* ---------- */
html {
	height: 100%;
	min-height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}


body {
	height: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: rgb(0, 13, 69);
	background-image: url("../assets/bgs/big-bg2.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.backBtn {
	position: absolute;
	top: 15px;
	left: 18px;
	font-family: "cd";
	font-size: 25px;
	text-decoration: none;
	border: 2px solid;
	padding: 10px 15px;
	background-color: rgb(27, 27, 27);
	color: rgb(219, 219, 219);
}

.container {
	background-color: rgba(0, 0, 0, 0.666);
	width: 75%;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 160vh;
	height: auto;
}

.title {
	margin-top: 40px;
	font-size: 100px;
	color: rgb(222, 222, 222);
	font-family: "tos";
	text-shadow:
		2px 2px 4px rgb(0, 0, 0),
		-2px -2px 3px rgb(7, 7, 7);
	filter: drop-shadow(0 0 15px rgb(0, 15, 152))
		drop-shadow(0 0 25px rgba(0, 19, 190, 0.786));
}

.userInput {
	margin-top: 30px;
	font-family: "cb";
	font-size: 18px;
}

#tarotCount,
#drawTarotBtn {
	margin-top: 25px;
	font-family: "one";
	font-size: 26px;
	padding: 16px;
}

#tarotCount {
	margin-right: 20px;
	background-color: rgb(231, 231, 231);
	color: rgb(0, 19, 101);
}

#drawTarotBtn {
	outline: none;
	border: 2px solid;
	border-radius: 3px;
	margin-left: 20px;
	color: rgb(231, 231, 231);
	background-color: rgb(0, 19, 101);
	box-sizing: border-box;
}

.outputBox {
	width: 80%;
	margin: 60px auto 0px auto;
}

.outputBox p {
	padding: 10px;
	border-radius: 6px;
	justify-content: center;
	margin-bottom: 1rem;
}

#tarotOutput {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 25px;
	padding-bottom: 20px;
}

/* Card Styling */
.card-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	max-width: 230px;
	margin-bottom: 20px;
	margin-top: 40px;
}

.tarot-card {
	width: 230px;
	height: 400px;
	perspective: 1000px;
	position: relative;
	padding-top: 8px;
}

.tarot-card .inner {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.8 ease;
	transform: rotateY(180deg);
}

.tarot-card.flipped .inner {
	transform: rotateY(0deg);
}

.tarot-card .front,
.tarot-card .back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}

.tarot-card .front {
	filter: drop-shadow(0 0 15px rgb(180, 223, 255));
}

.tarot-card .back {
	transform: rotateY(180deg);
}

.tarot-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	padding: 18px;
}

/* Position Label */
.position-label {
	position: absolute;
	top: -45px;
	left: 50%;
	transform: translateX(-50%);
	font-family: "cd";
	font-size: 38px;
	color: rgb(234, 224, 255);
	text-shadow: 2px 2px 4px rgb(32, 32, 32);
	filter: drop-shadow(0 0 25px rgb(54, 54, 54));
	white-space: nowrap;
}

/* Name & Meaning */
.name {
	font-family: "corn";
	font-size: 25px;
	color: rgb(235, 254, 231);
	text-align: center;
	margin-top: 18px;
	margin-bottom: 2px;
	line-height: 1.2;
}

.meaning {
	font-family: "ch";
	font-size: 23px;
	color: rgb(236, 250, 255);
	text-shadow:
		2px 2px 4px rgb(37, 37, 37),
		-2px -2px 4px rgb(34, 34, 34);
	text-align: center;
	line-height: 1.2;
	max-width: 120%;
	margin-top: 8px;
}

/* Desktop Spreads */
.one-card {
	display: flex;
	justify-content: center;
}

.two-card {
	display: flex;
	justify-content: center;
	gap: 80px;
}

.three-card {
	display: grid;
	grid-template-columns: repeat(3, 230px);
	justify-content: center;
	column-gap: 95px;
	row-gap: 40px;
	width: 100%;
}

/* Responsive */
@media (min-width: 601px) and (max-width: 1100px) {

    .backBtn {
        top: 12px;
        left: 72px;
    }

    .title {
        margin-top: 75px;
    }
    
    .container {
        width: 85%;
    }

	#tarotOutput.one-card {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	#tarotOutput.two-card {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-items: center;
		column-gap: 50px;
	}

    /* Tablet layout applies to the REAL wrapper */
    #tarotOutput.three-card {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        column-gap: 50px;
        row-gap: 60px;
        width: 100%;
    }


    /* Third card centered on its own row */
    #tarotOutput .card-wrapper:nth-child(3) {
        grid-column: 1 / span 2;
        justify-self: center;
        margin-top: 130px;
    }

    .tarot-card {
        width: 220px;
        height: 360px;
    }

    .position-label {
        top: -30px;
        font-size: 30px;
    }

    .name {
        font-size: 22px;
    }

    .meaning {
        font-size: 18px;
        padding: 0 20px;
    }
}



@media (max-width: 600px) {

    .backBtn {
        font-size: 18px;
        top: 8px;
        left: 25px;
    }

    .container {
        width: 90%;
        min-height: auto;
        height: auto;
        padding-top: 5px;
        padding-bottom: 120px;
    }

    .title {
        margin-top: 60px;
        font-size: 57px;
        filter: drop-shadow(0 0 8px rgb(0, 15, 152))
                drop-shadow(0 0 18px rgba(0, 19, 190, 0.786));
    }

    .userInput {
        font-size: 18px;
        margin-top: 15px;
        width: 75%;
    }

    #tarotCount,
    #drawTarotBtn {
        font-size: 20px;
        padding: 10px 10px;
        margin-top: 14px;
    }

    #tarotCount {
        margin-right: 10px;
    }

    #drawTarotBtn {
        margin-left: 10px;
    }

    .tarot-card {
        width: 150px;
        height: 255px;
    }

    .tarot-card img {
        padding: 8px;
    }

    .position-label {
        font-size: 22px;
        top: -18px;
    }

    .name {
        font-size: 17px;
        margin-top: 8px;
    }

    .meaning {
        font-size: 16px;
        margin-top: 3px;
        line-height: 1.3;
        padding: 0 10px;
    }

    #tarotOutput {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 110px;
        width: 100%;
        margin-top: -40px;
    }

    .one-card,
    .two-card,
    .three-card {
        display: contents;
    }

    .card-wrapper {
        max-width: 180px;
        width: 100%;
    }
}