/* Overlay and Modal Styles */

#overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: var(--overlay-bg);
     z-index: var(--z-tooltip);
}

#overlay.hidden {
     display: none;
}

/* Congratulations and Game Over screens */
#congratulations-plaque,
#game-over {
     position: fixed;
     top: 200px;
     left: 50%;
     transform: translateX(-50%);
     width: 90%;
     max-width: var(--grid-max-width);
     padding: var(--space-xl);
     border-radius: var(--radius-lg);
     text-align: center;
     z-index: var(--z-top);
}

#congratulations-plaque {
     background-color: #fff9e6;
     border: var(--border-width-2xl) solid var(--gold-accent);
     border-radius: var(--radius-3xl);
     box-shadow: 0 0 20px rgba(255, 217, 102, var(--opacity-60));
     background-image: var(--parchment-pattern), var(--card-back-svg);
     padding: var(--space-3xl) var(--space-xl);
     position: relative;
     animation: glow var(--duration-3s) infinite ease-in-out;
}

#congratulations-plaque::before,
#congratulations-plaque::after,
#congratulations-plaque .corner-tl,
#congratulations-plaque .corner-tr,
#congratulations-plaque .corner-bl,
#congratulations-plaque .corner-br {
     content: '';
     position: absolute;
     width: var(--icon-3xl);
     height: var(--icon-3xl);
     background-size: contain;
     background-repeat: no-repeat;
     z-index: var(--z-base);
}

#congratulations-plaque::before {
     content: '\2727';
     top: var(--space-lg);
     left: var(--space-lg);
     font-size: 26px;
     color: var(--gold-accent);
     text-shadow: 0 0 5px rgba(255, 179, 71, var(--opacity-70));
     animation: sparkle var(--duration-2s) infinite ease-in-out;
}

#congratulations-plaque::after {
     content: '\2727';
     top: var(--space-lg);
     right: var(--space-lg);
     font-size: 26px;
     color: var(--gold-accent);
     text-shadow: 0 0 5px rgba(255, 179, 71, var(--opacity-70));
     animation: sparkle 2.5s infinite ease-in-out;
}

#congratulations-plaque .sparkle {
     position: absolute;
     color: var(--gold-accent);
     font-size: var(--font-xl);
     text-shadow: 0 0 5px rgba(255, 215, 0, var(--opacity-70));
     z-index: var(--z-card);
     animation: sparkle var(--duration-2s) infinite ease-in-out;
}

#congratulations-plaque .sparkle:nth-child(1) {
     top: 50px;
     left: 25%;
     animation-delay: 0.3s;
}

#congratulations-plaque .sparkle:nth-child(2) {
     bottom: 40px;
     right: 20%;
     animation-delay: 0.7s;
}

#congratulations-plaque .sparkle:nth-child(3) {
     top: 30%;
     left: var(--space-xl);
     animation-delay: 1.1s;
}

#congratulations-plaque .sparkle:nth-child(4) {
     top: 40%;
     right: var(--space-2xl);
     animation-delay: 1.5s;
}

#congratulations-plaque h1 {
     font-size: var(--font-8xl);
     margin-bottom: var(--space-xl);
     font-family:
          Bubblegum Sans,
          cursive;
     color: var(--storybook-brown);
     text-shadow: var(--text-shadow-gold);
     animation: titleBounce var(--duration-2s) infinite ease-in-out;
}

#congratulations-plaque p {
     font-size: var(--font-xl);
     margin: var(--space-xl) 0;
     font-family:
          Comic Sans MS,
          cursive,
          sans-serif;
     color: var(--storybook-brown);
     text-shadow: 1px 1px 1px rgba(255, 255, 255, var(--opacity-70));
}

#home-win,
#home-loss {
     margin-top: var(--space-2xl);
     padding: var(--space-xl) var(--space-3xl);
     font-size: var(--font-lg);
     cursor: pointer;
     background: linear-gradient(to bottom, var(--gold-accent), var(--bonus-bg));
     border: var(--border-width-lg) solid var(--bonus-bg);
     border-radius: var(--radius-2xl);
     color: var(--storybook-brown);
     font-family:
          Bubblegum Sans,
          cursive;
     font-weight: bold;
     width: var(--button-width-lg);
     transition: all var(--duration-base) ease;
     box-shadow: var(--shadow-lg);
     position: relative;
     overflow: hidden;
}

#home-win:hover,
#home-loss:hover {
     background: linear-gradient(to bottom, #ffe7a0, var(--gold-accent));
     box-shadow: var(--shadow-xl);
}

#home-win:active,
#home-loss:active {
     transform: translateY(1px) scale(var(--scale-sm));
     box-shadow: var(--shadow-sm);
}

#home-win:disabled,
#home-loss:disabled {
     background: linear-gradient(to bottom, #f0dea0, #e6d59c);
     cursor: not-allowed;
     opacity: var(--opacity-70);
     transform: none;
     box-shadow: var(--shadow-xs);
}

#game-over {
     background-color: var(--message-bg);
     color: white;
}

#game-over-message {
     font-size: var(--font-lg);
     margin-bottom: var(--space-xl);
}

/* Messages and Effects */
#message {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: #fffae6;
     border: var(--border-width-lg) solid var(--gold-accent);
     border-radius: var(--radius-xl);
     padding: var(--space-xl);
     box-shadow: var(--shadow-xl);
     background-image: var(--parchment-pattern);
     z-index: var(--z-modal-high);
     opacity: 0;
     pointer-events: none;
     transition: opacity var(--duration-slower);
     font-family:
          Bubblegum Sans,
          cursive;
     color: var(--storybook-brown);
     font-size: var(--font-2xl);
     text-shadow: var(--text-shadow-gold);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--space-md);
     min-width: 250px;
     text-align: center;
}

#message[style*='opacity: 1'] {
     pointer-events: auto;
}

#message .storybook-message {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--space-md);
     width: 100%;
}

#message .storybook-header {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: var(--space-lg);
     width: auto;
}

#message .storybook-decoration {
     font-size: var(--font-lg);
     color: var(--gold-accent);
     text-shadow: 0 0 5px rgba(255, 179, 71, var(--opacity-70));
     line-height: 1;
     flex: 0 0 auto;
}

/* Card in message */
#message .card {
     width: var(--card-size-lg);
     height: var(--card-size-lg);
     transform: rotateY(var(--rotate-180));
     position: relative;
     border-radius: var(--radius-md);
     border: var(--border-width-md) solid var(--light-border);
     background-color: var(--card-bg);
     box-shadow: var(--shadow-xl);
     margin: 0;
     flex: 0 0 auto;
}

#message .card .front {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: var(--radius-md);
     position: absolute;
     top: 0;
     left: 0;
}

#message .card .card-image {
     width: 80%;
     height: 80%;
     object-fit: contain;
}

#message .card::before {
     content: '';
     position: absolute;
     top: 6px;
     left: 6px;
     right: 6px;
     bottom: 6px;
     border: var(--border-width-md) solid rgba(210, 160, 104, var(--opacity-50));
     border-radius: var(--radius-sm);
     z-index: var(--z-base);
     background: linear-gradient(
          135deg,
          rgba(255, 255, 255, var(--opacity-30)) 0%,
          rgba(255, 255, 255, 0) 50%,
          rgba(0, 0, 0, 0.05) 100%
     );
}

#message .card::after {
     content: '';
     position: absolute;
     top: 4px;
     left: 4px;
     right: 4px;
     bottom: 4px;
     border: var(--border-width-sm) dashed rgba(210, 197, 160, var(--opacity-50));
     border-radius: var(--radius-sm);
     z-index: var(--z-base);
     pointer-events: none;
}

#message .rarity-label {
     color: var(--storybook-brown);
     text-shadow: var(--text-shadow-gold);
     font-weight: bold;
     text-transform: capitalize;
}

#message .card.card-mythic {
     animation: mythicGlow 1.5s infinite alternate;
}

#message .card.card-rare {
     animation: rareGlow 2s infinite alternate;
}

@keyframes mythicGlow {
     0% {
          box-shadow:
               var(--shadow-xl),
               0 0 10px var(--mythic-color);
     }
     100% {
          box-shadow:
               var(--shadow-xl),
               0 0 20px var(--mythic-color);
     }
}

@keyframes rareGlow {
     0% {
          box-shadow:
               var(--shadow-xl),
               0 0 5px var(--gold-accent);
     }
     100% {
          box-shadow:
               var(--shadow-xl),
               0 0 10px var(--gold-accent);
     }
}

#score-multiplier {
     color: var(--fire-color);
     font-weight: bold;
     margin-right: var(--space-xs);
}

/* Fireworks container */
#fireworks-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: var(--z-modal);
}

.firework {
     position: absolute;
     border-radius: var(--radius-round);
     box-shadow: 0 0 10px 2px currentColor;
     animation: explode calc(var(--speed) * 1s) ease-out forwards;
}

.firework-red {
     background-color: var(--fire-color);
}
.firework-gold {
     background-color: var(--gold-accent);
}
.firework-blue {
     background-color: var(--blue-accent);
}
.firework-green {
     background: var(--green-accent);
}
.firework-purple {
     background: var(--purple-accent);
}
.firework-orange {
     background: var(--orange-accent);
}
.firework-pink {
     background: var(--pink-accent);
}

@keyframes explode {
     0% {
          transform: translate(0, 0) scale(0);
          opacity: 1;
     }
     100% {
          transform: translate(var(--dx), var(--dy)) scale(2);
          opacity: 0;
     }
}

/* Sparkle effect */
.sparkle {
     position: fixed;
     background-color: #fff;
     border-radius: var(--radius-round);
     box-shadow:
          0 0 8px 3px var(--gold-accent),
          0 0 15px 1px white;
     pointer-events: none;
     z-index: var(--z-modal-high);
     animation: twinkle var(--duration-3xl) ease-out forwards;
}

@keyframes twinkle {
     0% {
          transform: scale(0);
          opacity: 0;
     }
     25% {
          transform: scale(var(--scale-xl));
          opacity: var(--opacity-90);
     }
     50% {
          transform: scale(var(--opacity-80));
          opacity: var(--opacity-80);
     }
     100% {
          transform: scale(0);
          opacity: 0;
     }
}