/* 1. GOOGLE FONTS & ROOT */
@import url("https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300;400;500;600;700&family=Kavoon&family=Molengo&family=Quando&display=swap");

:root {
   --panel: #11162b;
}

/* 2. RESET & BASE LAYOUT */
html, body {
   height: 100%;
   margin: 0;
   padding: 0;
}

body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   background: #569c61;
   background: radial-gradient(circle, rgba(86, 156, 97, 1) 0%, rgba(86, 137, 92, 1) 51%, rgba(58, 96, 62, 1) 100%);
}

main {
   flex: 1 0 auto;
   background: none;
   width: auto;
   margin: clamp(1.5rem, 4vw, 3rem) auto 0 auto;
}

/* 3. TYPOGRAPHY */

body p {
   font-family: "Hind Madurai", sans-serif;
   font-weight: 400;
   font-style: normal;
}

h1, .icon-modal {
   background: #e6b055;
   background: -webkit-radial-gradient(#d4911e, #e6b055, #fffaed);
   background-clip: inherit;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-weight: bold;
   font-family: "Kavoon", serif;
}

header h1 {
   font-size: clamp(2.2rem, 7vw, 5rem);
    line-height: 1.1;
    z-index: 1;
}

@media (min-width: 576px) {
   header h1 {
      font-size: clamp(2.8rem, 7vw, 6rem);
   }
}

@media (min-width: 992px) {
   header h1 {
      font-size: clamp(3.5rem, 6vw, 7rem);
   }
}

/* Fix icon and h1 overlap in header */
header .d-flex.align-items-center {
   gap: 2.5rem;
}


.icon-modal {
   position: static;
   margin-right: 0.5rem;
   z-index: 2;
}

h2, h4 {
   font-family: "Quando", serif;
   font-weight: 400;
   font-style: normal;
}

button {
   font-family: "Quando", serif !important;
   font-weight: 400;
   font-style: normal;
}

/* 4. HEADER */
header {
   background-color: #11162b;
}

/* 5. MODAL */
.icon-modal {
   position: absolute;
   left: 0;
   translate: 9px -7px;
   cursor: pointer;
   color: #e6b055;
}

.modal-header {
   background-color: #11162b;
}

.modal-body {
   background: #569c61;
   background: radial-gradient(circle, rgba(86, 156, 97, 1) 0%, rgba(86, 137, 92, 1) 51%, rgba(58, 96, 62, 1) 100%);
   color: white;
}

.modalbtncustom {
   background: #d4911e;
   background: linear-gradient(0deg, rgba(212, 145, 30, 1) 0%, rgba(230, 176, 85, 1) 49%, rgba(255, 250, 237, 1) 100%);
   color: #11162b;
}

.modal-footer {
   background-color: #11162b;
}

@media (min-width: 1024px) {
   .modal-dialog {
      max-width: 700px;
   }
}

/* 6. MAIN & GAME AREA */
/* Card images inside flex containers */
#dealer-cards img,
#your-cards img {
   height: clamp(110px, 18vw, 175px);
   width: auto;
   aspect-ratio: 5 / 7;
   border-radius: 0.5rem;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

#dealer-sum, #your-sum {
   color: aliceblue !important;
   font-weight: normal;
}

/* Dark gradient panels */
.card.bg-gradient-dark {
   background: linear-gradient(160deg, var(--panel), #0b1020);
   border: none;
}

/* GAME BUTTONS AND TALLY */
#gamebuttons button {
   background: #d4911e;
   background: linear-gradient(0deg, rgba(212, 145, 30, 1) 0%, rgba(230, 176, 85, 1) 49%, rgba(255, 250, 237, 1) 100%);
   color: #11162b;
}

#results, #tally {
   color: aliceblue;
}

/* 7. UTILITIES */
.visually-hidden-focusable:active,
.visually-hidden-focusable:focus {
   position: static !important;
   width: auto;
   height: auto;
   margin: 0;
   clip: auto;
   white-space: normal;
   overflow: visible;
}

.min-h-1 {
   min-height: 1.5rem;
}

/* 8. FOOTER */
footer, footer p {
   background: #11162b;
   color: aliceblue;
   margin-bottom: 0;
}

footer {
   flex-shrink: 0;
   width: 100%;
}