/* Card Grid and Card Styles */

#grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(4, 1fr);
     gap: var(--space-md);
     width: 95%;
     max-width: var(--grid-max-width);
     margin: 0 auto;
     box-sizing: border-box;
}

#grid:not(.checking) .card:not(.flipped):hover {
     box-shadow:
          inset 0 0 1px rgba(0, 0, 0, 0.05),
          var(--shadow-2xl);
     border-color: var(--card-border-hover);
}

#grid .card.match-madness:not(.matched) {
     box-shadow:
          0 0 10px var(--fire-color),
          0 0 20px rgba(255, 69, 0, var(--opacity-50));
     animation: fireAura 0.8s infinite alternate;
}

@keyframes fireAura {
     0% {
          box-shadow:
               0 0 10px var(--fire-color),
               0 0 20px rgba(255, 69, 0, var(--opacity-50));
     }
     100% {
          box-shadow:
               0 0 15px var(--fire-color),
               0 0 30px rgba(255, 69, 0, var(--opacity-30));
     }
}

.card {
     width: 100%;
     aspect-ratio: 1 / 1;
     background-color: var(--card-bg);
     border: var(--border-width-lg) solid var(--card-border);
     border-radius: var(--radius-xl);
     cursor: pointer;
     position: relative;
     transform-style: preserve-3d;
     transition:
          transform var(--duration-slow) cubic-bezier(0.175, 0.885, 0.32, 1.275),
          box-shadow var(--duration-base) ease,
          border-color var(--duration-base) ease;
     box-shadow:
          inset 0 0 2px rgba(0, 0, 0, var(--opacity-10)),
          var(--shadow-lg);
     font-size: clamp(16px, 10vw, 40px);
     box-sizing: border-box;

     /* Mobile: instant tap, no double-tap zoom */
     touch-action: manipulation;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.card:not(.flipped):hover {
     transform: translateY(-6px) scale(var(--scale-md));
     box-shadow:
          inset 0 0 1px rgba(0, 0, 0, 0.05),
          var(--shadow-2xl);
     border-color: var(--card-border-hover);
}

/* Keyboard focus indicator - enhanced storybook style */
/* Use high specificity to override rare/mythic card shadows */
.card:focus-visible,
.card.card-rare:focus-visible,
.card.card-mythic:focus-visible {
     outline: 4px solid var(--gold-accent, #ffd700);
     outline-offset: 3px;
     border-color: var(--gold-accent, #ffd700);
     box-shadow:
          inset 0 0 1px rgba(0, 0, 0, 0.05),
          var(--shadow-2xl),
          0 0 0 8px rgba(255, 215, 0, 0.4),
          0 0 20px rgba(255, 215, 0, 0.3) !important;
     z-index: 10;
}

.card:not(.flipped):focus-visible {
     transform: translateY(-6px) scale(1.05);
}

.card.flipped {
     transform: rotateY(var(--rotate-180));
     box-shadow:
          inset 0 0 2px rgba(0, 0, 0, var(--opacity-10)),
          var(--shadow-lg);
     border-color: var(--card-border);
}

.back,
.front {
     position: absolute;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     backface-visibility: hidden;
     border-radius: 9px;
     box-sizing: border-box;
}

.back {
     background-image: linear-gradient(
          to bottom,
          var(--storybook-cream) 0%,
          var(--storybook-parchment-dark) 100%
     );
}

.back::before {
     content: '';
     position: absolute;
     top: var(--space-xs);
     left: var(--space-xs);
     right: var(--space-xs);
     bottom: var(--space-xs);
     border: var(--border-width-md) dashed var(--storybook-gold-muted);
     border-radius: var(--radius-sm);
     box-sizing: border-box;
     pointer-events: none;
     opacity: var(--opacity-70);
}

.back::after {
     content: '';
     position: absolute;
     top: var(--space-sm);
     left: var(--space-sm);
     right: var(--space-sm);
     bottom: var(--space-sm);
     border-radius: var(--radius-xs);
     box-sizing: border-box;
     pointer-events: none;
     background-image: var(--card-back-image, url('/assets_optimized/cardbacks/Default.webp'));
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     opacity: var(--opacity-90);
}

.front {
     transform: rotateY(var(--rotate-180));
     background-color: var(--card-bg);
     background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23D4AF37' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='10' cy='10' r='4'/%3E%3C/g%3E%3C/svg%3E");
     padding: var(--space-xs);
     box-sizing: border-box;
}

.bonus {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 0.2em;
     color: var(--bonus-text);
     font-weight: bold;
     background-color: var(--bonus-bg);
     padding: 2px;
     width: var(--icon-4xl);
     height: var(--icon-md);
     display: flex;
     justify-content: center;
     align-items: center;
     pointer-events: none;
}

.bonus-text {
     position: fixed;
     color: var(--storybook-brown-deep);
     font-size: 16px;
     font-weight: bold;
     font-family:
          Bubblegum Sans,
          cursive;
     text-shadow:
          1px 1px 0 var(--gold-accent),
          -1px -1px 0 var(--gold-accent),
          1px -1px 0 var(--gold-accent),
          -1px 1px 0 var(--gold-accent),
          1px 1px 2px rgba(0, 0, 0, var(--opacity-20));
     background-color: #fffae6;
     padding: 4px var(--space-xl);
     z-index: var(--z-notification);
     animation: none;
     min-width: var(--icon-2xl);
     text-align: center;
     border: var(--border-width-md) solid var(--gold-accent);
     border-radius: var(--radius-md);
     box-shadow:
          var(--shadow-md),
          0 0 8px rgba(255, 217, 102, var(--opacity-30)) inset;
}

.bonus-text::before,
.bonus-text::after {
     content: '';
     position: absolute;
     width: var(--icon-xs);
     height: 100%;
     top: 0;
     background-color: #fffae6;
     border: var(--border-width-md) solid var(--gold-accent);
}

.bonus-text::before {
     left: calc(var(--icon-xs) * -1);
     border-radius: var(--radius-sm) 0 0 var(--radius-sm);
     border-right: none;
     transform: perspective(5px) rotateY(var(--rotate-md));
     box-shadow:
          -2px 2px 5px rgba(0, 0, 0, var(--opacity-10)),
          0 0 8px rgba(255, 217, 102, var(--opacity-30)) inset;
}

.bonus-text::after {
     right: calc(var(--icon-xs) * -1);
     border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
     border-left: none;
     transform: perspective(5px) rotateY(5deg);
     box-shadow:
          2px 2px 5px rgba(0, 0, 0, var(--opacity-10)),
          0 0 8px rgba(255, 217, 102, var(--opacity-30)) inset;
}

.bonus-text::before::after,
.bonus-text::after::after {
     content: '';
     position: absolute;
     width: var(--space-md);
     height: var(--space-md);
     border-radius: var(--radius-round);
     background-color: #fffae6;
     border: var(--border-width-sm) solid #d2c5a0;
     z-index: var(--z-notification);
}

@keyframes floatBubble {
     0% {
          transform: translateY(0) translateX(0);
          opacity: 1;
     }
     25% {
          transform: translateY(-50px) translateX(var(--space-md));
          opacity: var(--opacity-90);
     }
     50% {
          transform: translateY(-100px) translateX(calc(var(--space-md) * -1));
          opacity: var(--opacity-80);
     }
     75% {
          transform: translateY(-150px) translateX(var(--space-xs));
          opacity: var(--opacity-30);
     }
     100% {
          transform: translateY(-200px) translateX(0);
          opacity: 0;
     }
}

.card.matched {
     visibility: hidden;
}

.card-image {
     width: 100%;
     height: 100%;
     object-fit: contain;
     pointer-events: none;
}

/* Matched pairs display */
#pairs-and-notebook {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 95%;
     max-width: var(--grid-max-width);
     margin: var(--space-md) auto 0;
     padding: 0;
     box-sizing: border-box;
     gap: var(--space-md);
}

#matched-pairs-left,
#matched-pairs-right {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: var(--space-xs);
     flex: 1;
     max-width: calc(42% - var(--space-xs));
     padding: var(--space-xs);
     min-height: 66px;
}

#matched-pairs-left .card,
#matched-pairs-right .card {
     width: var(--card-size-xs);
     height: var(--card-size-xs);
     font-size: var(--font-base);
     transform: rotateY(var(--rotate-180));
     margin: 0;
     box-shadow: var(--shadow-sm);
}

/* Rarity Animations */
@keyframes rareGlowPulse {
     0% {
          box-shadow: 0 0 1px 1px goldenrod;
     }
     50% {
          box-shadow: 0 0 2px 1px gold;
     }
     100% {
          box-shadow: 0 0 1px 1px goldenrod;
     }
}

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

@keyframes mythicPulse {
     0% {
          box-shadow: 0 0 1px 1px var(--mythic-color);
     }
     50% {
          box-shadow: 0 0 2px 1px var(--mythic-color-dark);
     }
     100% {
          box-shadow: 0 0 1px 1px var(--mythic-color);
     }
}

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

/* Rare card styles */
.card-rare:not(.flipped) {
     border: 2px solid #d2c5a0;
     border-radius: 10px;
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.card-rare.flipped {
     animation: rareGlowPulse 2s infinite linear;
}

.card-rare .front {
     background-image: linear-gradient(
          135deg,
          rgba(255, 215, 0, 0.3),
          rgba(218, 165, 32, 0.1),
          rgba(255, 215, 0, 0.2),
          rgba(218, 165, 32, 0.1),
          rgba(255, 215, 0, 0.3)
     );
     background-size: 200% 200%;
     border: 3px solid var(--gold-accent);
}

.card-rare .front::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(
          45deg,
          transparent 40%,
          rgba(255, 215, 0, 0.3) 50%,
          transparent 60%
     );
     background-size: 200% 200%;
     animation: rareShimmer 4s infinite linear;
     pointer-events: none;
     z-index: 0;
}

/* Mythic card styles */
.card-mythic:not(.flipped) {
     border: 2px solid #d2c5a0;
     border-radius: 10px;
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.card-mythic.flipped {
     animation: mythicPulse 2s infinite linear;
}

.card-mythic .front {
     background-image: linear-gradient(
          135deg,
          rgba(148, 0, 211, 0.2),
          rgba(75, 0, 130, 0.1),
          rgba(0, 0, 255, 0.2),
          rgba(0, 255, 0, 0.1),
          rgba(255, 255, 0, 0.2),
          rgba(255, 127, 0, 0.1),
          rgba(255, 0, 0, 0.2)
     );
     background-size: 200% 200%;
     border: 3px solid var(--mythic-color-dark);
}

.card-mythic .front::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(
          45deg,
          transparent 40%,
          rgba(138, 43, 226, 0.3) 50%,
          transparent 60%
     );
     background-size: 200% 200%;
     animation: mythicShimmer 4s infinite linear;
     pointer-events: none;
     z-index: 0;
}