/* Root variables unchanged */
* {
     box-sizing: border-box;
}

html {
     /* Prevent pull-to-refresh on iOS */
     overscroll-behavior-y: contain;
     overflow: hidden;
     height: 100%;
}

:root {
     /* Base Palette - Storybook Theme */
     --storybook-cream: #fff9e6;
     --storybook-parchment-light: #faf0e6;
     --storybook-parchment-dark: #f0e6d2;
     --storybook-gold-rich: #b8860b;
     --storybook-gold-muted: #d4af37;
     --storybook-gold-highlight: #ffd700;
     --storybook-brown-deep: #5c4033;
     --storybook-brown-medium: #8b4513;
     --storybook-ink-faded: #70543e;

     /* Functional Colors - Derived or Specific Use */
     --primary-bg: var(--storybook-parchment-light);
     --card-bg: var(--storybook-cream);
     --cream-bg: var(--storybook-cream); /* Added missing variable */
     --card-border: var(--storybook-gold-muted);
     --card-border-hover: var(--storybook-gold-highlight);

     --bonus-bg: var(--storybook-gold-rich);
     --bonus-text: var(--storybook-cream);

     --button-bg: var(--storybook-parchment-dark);
     --button-hover-bg: var(--storybook-cream);
     --button-text: var(--storybook-brown-deep);
     --button-border: var(--storybook-gold-muted);
     --button-hover-border: var(--storybook-gold-highlight);

     --overlay-bg: rgba(46, 32, 22, 0.2); /* Darker, warmer overlay */
     --message-bg: var(--storybook-cream); /* Use storybook-cream directly */
     --message-border: var(--storybook-gold-rich);
     --message-text: var(--storybook-brown-deep);

     --transition-speed: 0.3s;
     --grid-max-width: 600px;
     --font-family: 'Open Sans', 'Rounded Mplus 1c', 'Trebuchet MS', sans-serif;

     --fire-color: #e77500;
     --progress-bg: var(--storybook-parchment-dark);
     --progress-fill: var(--storybook-gold-rich);
     --green-accent: #5e8c31;

     --mythic-color: #8a2be2;
     --mythic-color-dark: #6a1b9a;

     --text-shadow-gold:
          1px 1px 0 var(--storybook-gold-muted), -1px -1px 0 var(--storybook-gold-muted),
          1px -1px 0 var(--storybook-gold-muted), -1px 1px 0 var(--storybook-gold-muted),
          1px 1px 2px rgba(0, 0, 0, 0.1);

     /* Storybook themed SVG fills */
     --card-back-svg: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm34 9c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM57 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23D4AF37' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
     --corner-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0,0 C6.66666667,6.66666667 13.3333333,6.66666667 20,0 C13.3333333,6.66666667 13.3333333,13.3333333 20,20 C13.3333333,13.3333333 6.66666667,13.3333333 0,20 C6.66666667,13.3333333 6.66666667,6.66666667 0,0' fill='%23D4AF37' fill-opacity='0.3'/%3E%3C/svg%3E");
     --parchment-pattern: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23B8860B' fill-opacity='0.05'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

     /* Spacing System */
     --space-xs: 5px;
     --space-sm: 8px;
     --space-md: 10px;
     --space-lg: 15px;
     --space-xl: 20px;
     --space-2xl: 25px;
     --space-3xl: 30px;
     --space-4xl: 40px;

     /* Border Radius */
     --radius-xs: 4px;
     --radius-sm: 5px;
     --radius-md: 8px;
     --radius-lg: 10px;
     --radius-xl: 12px;
     --radius-2xl: 15px;
     --radius-3xl: 20px;
     --radius-4xl: 30px;
     --radius-round: 50%;

     /* Font Sizes */
     --font-xs: 0.8em;
     --font-sm: 0.9em;
     --font-base: 1em;
     --font-md: 1.1em;
     --font-lg: 1.2em;
     --font-xl: 1.3em;
     --font-2xl: 1.4em;
     --font-3xl: 1.5em;
     --font-4xl: 1.6em;
     --font-5xl: 1.8em;
     --font-6xl: 1.9em;
     --font-7xl: 2rem;
     --font-8xl: 2.8em;
     --font-9xl: 3.8rem;

     /* Box Shadows */
     --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.1);
     --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.15);
     --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.2);
     --shadow-xl: 0 5px 15px rgba(0, 0, 0, 0.2);
     --shadow-2xl: 0 10px 20px rgba(0, 0, 0, 0.2);
     --shadow-3xl: 0 10px 30px rgba(0, 0, 0, 0.3);
     --shadow-inset-sm: inset 0 0 5px rgba(0, 0, 0, 0.05);
     --shadow-inset-md: inset 0 0 10px rgba(0, 0, 0, 0.05);

     /* Z-Index Layers */
     --z-base: 1;
     --z-card: 2;
     --z-overlay: 3;
     --z-modal: 100;
     --z-tooltip: 998;
     --z-modal-high: 1000;
     --z-notification: 1001;
     --z-top: 9999;

     /* Animation Durations */
     --duration-fast: 0.2s;
     --duration-base: 0.3s;
     --duration-slow: 0.4s;
     --duration-slower: 0.5s;
     --duration-slowest: 1s;
     --duration-2s: 2s;
     --duration-3s: 3s;

     /* Borders */
     --border-width-sm: 1px;
     --border-width-md: 2px;
     --border-width-lg: 3px;
     --border-width-xl: 4px;
     --border-width-2xl: 5px;

     /* Opacity Values */
     --opacity-10: 0.1;
     --opacity-20: 0.2;
     --opacity-30: 0.3;
     --opacity-50: 0.5;
     --opacity-60: 0.6;
     --opacity-70: 0.7;
     --opacity-80: 0.8;
     --opacity-90: 0.9;

     /* Common Dimensions */
     --card-size-xs: 54px;
     --card-size-sm: 60px;
     --card-size-md: 80px;
     --card-size-lg: 125px;
     --card-size-xl: 150px;

     --button-height-sm: 30px;
     --button-height-md: 40px;
     --button-height-lg: 45px;
     --button-height-xl: 54px;

     --button-width-sm: 60px;
     --button-width-md: 120px;
     --button-width-lg: 160px;
     --button-width-xl: 200px;
     --button-width-2xl: 250px;

     /* Transforms */
     --scale-sm: 0.95;
     --scale-base: 1;
     --scale-md: 1.03;
     --scale-lg: 1.05;
     --scale-xl: 1.1;
     --scale-2xl: 1.15;
     --scale-3xl: 1.2;
     --scale-4xl: 1.3;

     --rotate-sm: -2deg;
     --rotate-md: -5deg;
     --rotate-lg: -15deg;
     --rotate-xl: -45deg;
     --rotate-180: 180deg;

     /* Icon Sizes */
     --icon-xs: 8px;
     --icon-sm: 18px;
     --icon-md: 20px;
     --icon-lg: 25px;
     --icon-xl: 30px;
     --icon-2xl: 35px;
     --icon-3xl: 40px;
     --icon-4xl: 50px;
     --icon-5xl: 60px;
     --icon-6xl: 80px;

     /* Additional colors that might be missing */
     --light-border: #d2c5a0;
     --gold-accent: var(--storybook-gold-highlight);
     --blue-accent: #4169e1;
     --purple-accent: #9370db;
     --orange-accent: #ff8c00;
     --pink-accent: #ff69b4;
     --storybook-brown: var(--storybook-brown-deep);
}

/* Body and global styles */
body {
     font-family: var(--font-family);
     font-weight: 400;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     margin: 0;
     padding: 0;
     background-color: var(--primary-bg);
     background-image: var(--card-back-svg);

     /* Prevent iOS zooming, gestures, and make game feel native */
     touch-action: manipulation;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     user-select: none;
     -webkit-tap-highlight-color: transparent;
     overscroll-behavior: none;
     overscroll-behavior-y: contain; /* Prevent pull-to-refresh */
     overflow: hidden; /* Lock scrolling completely */
}

.hidden {
     display: none !important;
}

/* Start Screen */
#start-screen {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100vh;
     gap: var(--space-lg);
     padding: var(--space-xl);
}

/* Title and illustration */
.title-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--space-lg);
     margin-bottom: var(--space-xs);
     position: relative;
     padding: var(--space-xl);
     width: 100%;
     max-width: 350px;
}

.title-container::before,
.title-container::after,
.title-container > *:first-child::before,
.title-container > *:last-child::after {
     content: '';
     position: absolute;
     width: var(--icon-md);
     height: var(--icon-md);
     background-image: var(--corner-flourish);
     background-size: contain;
     background-repeat: no-repeat;
     z-index: var(--z-base);
}

.title-container::before {
     top: var(--space-xs);
     left: var(--space-xs);
     transform: rotate(0deg);
}

.title-container::after {
     top: var(--space-xs);
     right: var(--space-xs);
     transform: rotate(90deg);
}

.title-container > *:first-child::before {
     bottom: var(--space-xs);
     left: var(--space-xs);
     transform: rotate(270deg);
}

.title-container > *:last-child::after {
     bottom: var(--space-xs);
     right: var(--space-xs);
     transform: rotate(180deg);
}

.game-title {
     font-family:
          Bubblegum Sans,
          cursive;
     font-size: var(--font-9xl);
     color: var(--storybook-brown-deep);
     text-shadow:
          2px 2px 0 var(--storybook-gold-muted),
          -1px -1px 0 var(--storybook-gold-muted),
          1px -1px 0 var(--storybook-gold-muted),
          -1px 1px 0 var(--storybook-gold-muted),
          2px 2px 4px rgba(0, 0, 0, 0.3);
     margin: 0;
     padding: var(--space-md) var(--space-xl);
     text-align: center;
     transform: rotate(var(--rotate-sm));
     position: relative;
     z-index: var(--z-overlay);
     background-color: #fffae6;
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-xl), var(--shadow-2xl);
     border: var(--border-width-md) solid var(--storybook-gold-rich);
     display: inline-block;
}

.game-title::after {
     content: '';
     position: absolute;
     bottom: calc(var(--space-xs) * -1);
     left: 50%;
     transform: translateX(-50%);
     width: 80%;
     height: var(--border-width-md);
     background: linear-gradient(to right, transparent, var(--storybook-gold-rich), transparent);
}

.card-illustration {
     display: flex;
     position: relative;
     height: var(--card-size-xl);
     margin: var(--space-md) 0;
     margin-top: var(--space-xl);
     perspective: 800px;
     animation: slight-bounce 6s infinite ease-in-out;
}

@keyframes slight-bounce {
     0%,
     100% {
          transform: translateY(0);
     }
     50% {
          transform: translateY(calc(var(--space-xs) * -1));
     }
}

.title-card-image {
     width: 80%;
     height: 80%;
     object-fit: contain;
     position: relative;
     z-index: var(--z-card);
     filter: drop-shadow(var(--shadow-sm));
     animation: subtle-shine var(--duration-3s) infinite ease-in-out;
}

@keyframes subtle-shine {
     0%,
     100% {
          filter: drop-shadow(var(--shadow-sm));
     }
     50% {
          filter: drop-shadow(var(--shadow-sm)) brightness(1.1);
     }
}

.title-card {
     background-color: var(--card-bg);
     border: var(--border-width-md) solid var(--card-border);
     border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: var(--shadow-xl);
     position: relative;
     overflow: hidden;
     padding: var(--space-xs);
     width: var(--card-size-lg);
     height: var(--card-size-lg);
     aspect-ratio: 1 / 1;
}

.title-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%
     );
}

.title-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;
}

.card-left {
     transform: rotate(var(--rotate-lg)) translateX(var(--space-xl)) translateY(var(--space-xs));
     z-index: var(--z-base);
}

.card-right {
     transform: rotate(15deg) translateX(calc(var(--space-xl) * -1))
          translateY(calc(var(--space-xs) * -1));
     z-index: var(--z-card);
}

.select-difficulty {
     font-family:
          Bubblegum Sans,
          cursive;
     font-size: var(--font-7xl);
     color: var(--storybook-brown-deep);
     text-shadow: var(--text-shadow-gold);
     margin: 0 0 calc(var(--space-xs) * -1);
     padding: var(--space-sm) var(--space-lg);
     text-align: center;
     transform: rotate(1deg);
     background-color: #fffae6;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-3xl);
     border: var(--border-width-md) solid var(--storybook-gold-rich);
     display: inline-block;
}

.select-difficulty::before,
.select-difficulty::after {
     display: none;
}

#difficulty-selection {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--space-sm);
     margin-top: calc(var(--space-lg) * -1);
}

#difficulty-selection button {
     margin: 0;
     width: var(--button-width-2xl);
     padding: var(--space-sm) var(--space-lg);
     border-radius: var(--radius-lg);
     border: var(--border-width-md) solid var(--card-border);
     background-color: var(--storybook-parchment-dark);
     cursor: pointer;
     transition: all var(--duration-fast) ease;
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: relative;
     overflow: hidden;
     box-shadow: var(--shadow-lg);
}

#difficulty-selection button::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, var(--opacity-30)),
          transparent
     );
     transition: var(--duration-slower);
}

#difficulty-selection button:hover {
     transform: scale(var(--scale-md));
     box-shadow: var(--shadow-lg);
     border-color: var(--card-border);
}

#difficulty-selection button:hover::before {
     left: 100%;
}

#difficulty-selection button:active {
     transform: translateY(2px);
     box-shadow: var(--shadow-sm);
}

#easy-start {
     background-color: #e0f7e0;
     border-bottom: var(--border-width-xl) solid var(--card-border);
}

#easy-start:hover {
     background-color: #d0f0d0;
}

#normal-start {
     background-color: #e0f0ff;
     border-bottom: var(--border-width-xl) solid var(--card-border);
}

#normal-start:hover {
     background-color: #d0e8ff;
}

#hard-start {
     background-color: #fff0e0;
     border-bottom: var(--border-width-xl) solid var(--card-border);
}

#hard-start:hover {
     background-color: #ffe8d0;
}

#frantic-start {
     background-color: #ffe0e0;
     border-bottom: var(--border-width-xl) solid var(--card-border);
}

#frantic-start:hover {
     background-color: #ffd0d0;
}

#difficulty-selection button .mode-name {
     flex: 1;
     text-align: center;
     font-family:
          Bubblegum Sans,
          cursive;
     font-size: var(--font-6xl);
     color: var(--storybook-brown-deep);
     margin: 0 0 calc(var(--space-xs) * -1);
     font-weight: bold;
     text-shadow: 0 1px 1px rgba(255, 255, 255, var(--opacity-70));
}

#difficulty-selection button .emoji-left,
#difficulty-selection button .emoji-right {
     font-size: var(--font-xl);
     padding: 0 var(--space-xs);
     position: relative;
     z-index: var(--z-base);
     display: flex;
     align-items: center;
     justify-content: center;
}

#login-button {
     margin-top: var(--space-lg);
     padding: var(--space-sm) var(--space-lg);
     font-size: clamp(var(--font-sm), 2.5vw, var(--font-base));
     cursor: pointer;
     background-color: #3b5998;
     border: none;
     border-radius: var(--radius-sm);
     color: white;
     width: clamp(180px, 40vw, var(--button-width-xl));
     height: clamp(var(--button-height-md), 10vw, var(--button-height-lg));
}

#login-button:hover {
     background-color: #2a4373;
}

/* Game Area */
#game-area {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     padding: var(--space-xl);
     background-color: rgba(255, 255, 255, var(--opacity-50));
     border-radius: var(--radius-3xl);
     box-shadow: var(--shadow-3xl);
     max-width: calc(var(--grid-max-width) + var(--space-4xl));
     margin: 0 auto;
}

#stats {
     margin: var(--space-md) 0;
     width: 95%;
     max-width: var(--grid-max-width);
     text-align: center;
}

.stats-card {
     background-color: var(--storybook-parchment-dark);
     border-radius: var(--radius-2xl);
     box-shadow: var(--shadow-md);
     padding: var(--space-sm) var(--space-lg);
     box-sizing: border-box;
     position: relative;
     border: var(--border-width-md) solid var(--card-border);
     background-image: var(--parchment-pattern);
}

.stats-card::before,
.stats-card::after {
     content: '';
     position: absolute;
     width: var(--icon-3xl);
     height: var(--icon-md);
     background-size: contain;
     background-repeat: no-repeat;
     opacity: var(--opacity-60);
}

.stats-card::before {
     background-image: var(--corner-flourish);
     top: 0;
     left: var(--space-xl);
     opacity: var(--opacity-90);
}

.stats-card::after {
     background-image: var(--corner-flourish);
     bottom: 0;
     right: var(--space-xl);
     opacity: var(--opacity-90);
}

#stats h2 {
     margin: 2px 0;
     font-size: var(--font-4xl);
     font-family:
          Bubblegum Sans,
          cursive;
     color: var(--storybook-brown-deep);
     text-shadow: var(--text-shadow-gold);
     position: relative;
}

#stats h2::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 50%;
     transform: translateX(-50%);
     width: 80%;
     height: var(--border-width-md);
     background: linear-gradient(to right, transparent, var(--storybook-gold-rich), transparent);
     display: block;
}

#stats h3 {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     margin: 3px 0 var(--space-xs);
     white-space: nowrap;
     position: relative;
     font-family:
          Bubblegum Sans,
          cursive;
     color: var(--storybook-brown-deep);
}

.stat-item {
     flex: 1;
     text-align: center;
     font-weight: 600;
     color: var(--storybook-brown-deep);
}

.stat-hint {
     flex: 0;
     margin-right: var(--space-xs);
     text-align: right;
     width: var(--icon-xl);
     height: var(--icon-xl);
     position: relative;
}

.stat-hint:has(#hint-button.hidden) {
     display: none;
}

.stat-timer {
     display: flex;
     align-items: center;
     justify-content: center;
     flex: 0 1 auto;
}

.stat-bonus {
     position: absolute;
     color: var(--green-accent);
     font-size: var(--font-base);
     font-weight: bold;
     opacity: 1;
     transition: opacity var(--duration-slower) ease-out;
     z-index: var(--z-notification);
     pointer-events: none;
}

.stat-bonus.fade-out {
     opacity: 0;
}

#tagline.led-scroll {
     background-color: var(--primary-bg);
     color: var(--fire-color);
     font-family:
          Courier New,
          Courier,
          monospace;
     font-weight: 300;
     display: flex;
     align-items: center;
     overflow: hidden;
     height: 18px;
     width: 100%;
     position: relative;
}

.led-text {
     display: inline-block;
     white-space: nowrap;
     position: absolute;
     animation: marquee 6s linear infinite;
     padding-left: 100%;
}

@keyframes marquee {
     0% {
          transform: translateX(0);
     }
     100% {
          transform: translateX(-100%);
     }
}

.led-text:nth-child(1) {
     animation-delay: 0s;
     left: 0%;
}

.led-text:nth-child(2) {
     animation-delay: 2s;
}

.led-text:nth-child(3) {
     animation-delay: 4s;
}

#progress-bar {
     width: 100%;
     max-width: var(--grid-max-width);
     height: 60px; /* Bigger for mobile tap */
     background: linear-gradient(180deg, #f5ead2 0%, #e8dcc0 100%);
     margin: 0 0 var(--space-xs);
     border-radius: var(--radius-2xl);
     position: relative;
     overflow: visible; /* Allow player icon to show outside */
     padding: var(--space-sm);
     box-shadow:
          inset 0 2px 4px rgba(0, 0, 0, 0.1),
          0 4px 8px rgba(0, 0, 0, 0.15);
     background-image: var(--parchment-pattern);
     display: flex;
     align-items: center;
     border: var(--border-width-lg) solid var(--card-border);
}

#progress-fill {
     height: 100%;
     background: linear-gradient(90deg, #8c7a58 0%, #a89070 50%, #8c7a58 100%);
     width: 0%;
     transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
     border-radius: var(--radius-xl);
     box-shadow:
          0 2px 8px rgba(0, 0, 0, 0.2),
          inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

#progress-segments {
     width: 100%;
     height: 100%;
     display: flex;
     position: relative;
     z-index: 2;
     gap: 2px;
}

.segment {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
}

.segment-marker {
     width: 44px; /* Bigger tap target for mobile */
     height: 44px;
     border-radius: var(--radius-round);
     background: white;
     border: 3px solid var(--card-border);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
     transition: all 0.3s ease;
     position: relative;
     z-index: 3;
}

.segment-marker img {
     width: 32px;
     height: 32px;
     object-fit: contain;
}

.segment[data-completed='true'] .segment-marker::after {
     content: '✓';
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     color: white;
     font-size: 28px;
     font-weight: bold;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     z-index: 4;
     animation: checkPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes checkPop {
     0% {
          transform: scale(0) rotate(-45deg);
          opacity: 0;
     }
     50% {
          transform: scale(1.3) rotate(10deg);
     }
     100% {
          transform: scale(1) rotate(0deg);
          opacity: 1;
     }
}

.segment[data-completed='true'] .segment-marker {
     border-color: var(--green-accent);
     background: linear-gradient(135deg, #5e8c31 0%, #4a7024 100%);
     transform: scale(1.1);
     box-shadow:
          0 0 0 3px rgba(94, 140, 49, 0.2),
          0 4px 12px rgba(0, 0, 0, 0.3);
     animation: completePulse 0.5s ease;
}

@keyframes completePulse {
     0% {
          transform: scale(1);
     }
     50% {
          transform: scale(1.2);
     }
     100% {
          transform: scale(1.1);
     }
}

.segment[data-current='true'] .segment-marker {
     border-color: var(--storybook-gold-highlight);
     box-shadow:
          0 0 0 3px rgba(255, 215, 0, 0.3),
          0 0 20px rgba(255, 215, 0, 0.4);
     animation: currentPulse 2s ease-in-out infinite;
}

@keyframes currentPulse {
     0%,
     100% {
          box-shadow:
               0 0 0 3px rgba(255, 215, 0, 0.3),
               0 0 20px rgba(255, 215, 0, 0.4);
     }
     50% {
          box-shadow:
               0 0 0 5px rgba(255, 215, 0, 0.5),
               0 0 30px rgba(255, 215, 0, 0.6);
     }
}

.segment::after {
     /* Remove old connectors */
     display: none;
}

.player-icon {
     position: absolute;
     z-index: 10;
     top: 50%;
     transform: translate(-50%, -50%);
     transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     width: 56px;
     height: 56px;
     border-radius: var(--radius-round);
     background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.9) 0%,
          rgba(255, 255, 255, 0.6) 100%
     );
     display: flex;
     justify-content: center;
     align-items: center;
     filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
     pointer-events: none;
}

.player-icon::before {
     content: '';
     position: absolute;
     width: 4px;
     height: 4px;
     border-radius: var(--radius-round);
     background-color: white;
     z-index: -1;
}

body[data-difficulty='easy'] .player-icon::before {
     border: var(--border-width-lg) solid var(--green-accent);
     box-shadow: 0 0 10px rgba(39, 174, 96, var(--opacity-60));
     animation: playerPulseGreen var(--duration-2s) infinite alternate;
}

body[data-difficulty='normal'] .player-icon::before {
     border: var(--border-width-lg) solid var(--mythic-color);
     box-shadow: 0 0 10px rgba(106, 27, 154, var(--opacity-60));
     animation: playerPulseBlue var(--duration-2s) infinite alternate;
}

body[data-difficulty='hard'] .player-icon::before {
     border: var(--border-width-lg) solid var(--mythic-color-dark);
     box-shadow: 0 0 10px rgba(106, 27, 154, var(--opacity-60));
     animation: playerPulseOrange var(--duration-2s) infinite alternate;
}

body[data-difficulty='frantic'] .player-icon::before {
     border: var(--border-width-lg) solid var(--fire-color);
     box-shadow: 0 0 10px rgba(231, 76, 60, var(--opacity-60));
     animation: playerPulseRed var(--duration-2s) infinite alternate;
}

body:not([data-difficulty]) .player-icon::before {
     border: var(--border-width-lg) solid var(--mythic-color);
     box-shadow: 0 0 10px rgba(106, 27, 154, var(--opacity-60));
     animation: playerPulseBlue var(--duration-2s) infinite alternate;
}

@keyframes playerPulseGreen {
     0% {
          box-shadow: 0 0 6px rgba(39, 174, 96, var(--opacity-60));
     }
     100% {
          box-shadow: 0 0 12px rgba(39, 174, 96, var(--opacity-80));
     }
}

@keyframes playerPulseBlue {
     0% {
          box-shadow: 0 0 6px rgba(106, 27, 154, var(--opacity-60));
     }
     100% {
          box-shadow: 0 0 12px rgba(106, 27, 154, var(--opacity-80));
     }
}

@keyframes playerPulseOrange {
     0% {
          box-shadow: 0 0 6px rgba(106, 27, 154, var(--opacity-60));
     }
     100% {
          box-shadow: 0 0 12px rgba(106, 27, 154, var(--opacity-80));
     }
}

@keyframes playerPulseRed {
     0% {
          box-shadow: 0 0 6px rgba(231, 76, 60, var(--opacity-60));
     }
     100% {
          box-shadow: 0 0 12px rgba(231, 76, 60, var(--opacity-80));
     }
}

.player-icon img {
     width: 48px;
     height: 48px;
     object-fit: contain;
     position: relative;
     z-index: 1;
     animation: playerBounce 1s ease-in-out infinite;
}

@keyframes playerBounce {
     0%,
     100% {
          transform: translateY(0);
     }
     50% {
          transform: translateY(-4px);
     }
}

/* Mobile optimizations */
@media (max-width: 768px) {
     #progress-bar {
          height: 70px;
          padding: var(--space-md);
     }

     .segment-marker {
          width: 40px;
          height: 40px;
          font-size: 20px;
     }

     .segment-marker img {
          width: 28px;
          height: 28px;
     }

     .player-icon {
          width: 52px;
          height: 52px;
     }

     .player-icon img {
          width: 44px;
          height: 44px;
     }
}

#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);
}

.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);
     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;
}

#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);
}

#notebook-display {
     text-align: center;
     width: var(--button-width-sm);
     min-width: var(--button-width-sm);
}

#notebook-button {
     padding: var(--space-xs);
     font-size: var(--font-3xl);
     cursor: pointer;
     background: linear-gradient(to bottom, var(--gold-accent), #e6a400);
     border: var(--border-width-md) solid #e6a400;
     border-radius: 9px;
     color: #630;
     width: 100%;
     height: var(--button-height-xl);
     display: flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
     transition: all var(--duration-base) ease;
     box-shadow: var(--shadow-md);
     overflow: visible;
     position: relative;
}

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

#notebook-button:active {
     transform: translateY(1px);
     box-shadow: var(--shadow-sm);
}

#notebook-modal {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 90%;
     max-width: 350px;
     background-color: #f8f4e5;
     border: none;
     border-radius: var(--radius-2xl);
     text-align: center;
     z-index: var(--z-modal-high);
     box-shadow: var(--shadow-3xl), var(--shadow-inset-sm);
     display: flex;
     flex-direction: column;
     overflow: visible;
     padding-bottom: var(--space-md);
     background-image: var(--card-back-svg);
     background-blend-mode: multiply;
     opacity: 1; /* Ensure full opacity */
}

#notebook-modal h2 {
     margin: var(--space-md) 0;
     font-size: var(--font-5xl);
     font-family:
          Bubblegum Sans,
          cursive;
     color: var(--storybook-brown);
     text-shadow: var(--text-shadow-gold);
     border-bottom: var(--border-width-md) solid #e0d8c0;
     padding-bottom: var(--space-sm);
}

.notebook-tabs {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--space-md);
     margin: 0;
     padding: 0 var(--space-xs);
     box-sizing: border-box;
     height: auto;
}

.notebook-tabs-container {
     display: flex;
     gap: 0;
     flex-grow: 1;
     justify-content: center;
     align-items: center;
     overflow: visible;
     position: relative;
}

.notebook-nav-button {
     width: 2em;
     height: 2em;
     padding: 0;
     background: linear-gradient(to bottom, var(--gold-accent), #e6a400);
     border: var(--border-width-md) solid #e6a400;
     border-radius: var(--radius-md);
     color: #630;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all var(--duration-base) ease;
     box-shadow: var(--shadow-sm);
}

.notebook-nav-button:hover:not(:disabled) {
     background: linear-gradient(to bottom, #ffe7a0, var(--gold-accent));
     transform: scale(var(--scale-lg));
     box-shadow: var(--shadow-md);
}

.notebook-nav-button:disabled {
     background: linear-gradient(to bottom, #f0dea0, #e6d59c);
     border-color: #e0d8c0;
     color: #b5a990;
     cursor: not-allowed;
     opacity: var(--opacity-70);
     box-shadow: var(--shadow-xs);
}

#settings-notebook-prev {
     order: -1;
}

#settings-notebook-next {
     order: 1;
}

.notebook-tab {
     flex: 1;
     height: var(--button-height-md);
     padding: var(--space-xs);
     cursor: pointer;
     background-color: #e0d8c000;
     border: var(--border-width-sm) solid #e0d8c0;
     border-bottom: none;
     border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all var(--duration-base) ease;
}

.notebook-tab.active {
     background: linear-gradient(to bottom, var(--gold-accent), #fffae600);
     background-color: var(--gold-accent);
     border-color: #febe00;
}

.notebook-tab:hover:not(.active) {
     background: linear-gradient(to bottom, #ffc825, #fffae600);
     background-color: #ffc82540;
     border-color: #e0d8c0;
}

.notebook-tab-image {
     width: 2.2em;
     height: 2.2em;
     object-fit: contain;
     filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.15));
}

.notebook-pages {
     padding-left: var(--space-md);
     padding-right: var(--space-md);
     padding-bottom: var(--space-xs);
}

.notebook-page {
     display: none;
     background-color: #fffae6;
     border: var(--border-width-sm) solid #e0d8c0;
     border-radius: var(--radius-xl);
     margin: 0;
     padding: var(--space-md);
     box-shadow: var(--shadow-lg);
     background-image: var(--parchment-pattern);
     background-blend-mode: multiply;
     opacity: 1; /* Ensure full opacity */
}

.notebook-page.active {
     display: flex;
     flex-direction: column;
}

.notebook-page h3 {
     font-size: var(--font-4xl);
     margin: 0;
     color: #630;
     font-family:
          Bubblegum Sans,
          cursive;
     text-shadow: var(--text-shadow-gold);
}

@keyframes tabBounce {
     0%,
     100% {
          transform: translateY(0);
     }
     50% {
          transform: translateY(-2px);
     }
}

#timer {
     font-size: 16px;
     font-weight: bold;
     color: var(--storybook-brown);
}

#timer.warning {
     color: #e67e22;
     text-shadow: none;
}

#magical-timer {
     position: relative;
     width: var(--button-width-sm);
     height: var(--button-width-sm);
     margin: 0 auto;
}

.timer-frame {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: var(--radius-round);
     box-shadow: var(--shadow-lg);
     overflow: hidden;
     transform: scale(1);
     transition: transform var(--duration-fast) ease;
}

.frame-decoration {
     position: absolute;
     width: var(--icon-md);
     height: var(--icon-md);
     background-size: contain;
     background-repeat: no-repeat;
     opacity: var(--opacity-90);
     z-index: var(--z-overlay);
}

.top-left {
     top: -5px;
     left: -5px;
     background-image: var(--corner-flourish);
     transform: rotate(var(--rotate-xl));
}

.top-right {
     top: -5px;
     right: -5px;
     background-image: var(--corner-flourish);
     transform: rotate(45deg);
}

.bottom-left {
     bottom: -5px;
     left: -5px;
     background-image: var(--corner-flourish);
     transform: rotate(-135deg);
}

.bottom-right {
     bottom: -5px;
     right: -5px;
     background-image: var(--corner-flourish);
     transform: rotate(135deg);
}

#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-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: '✧';
     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: '✧';
     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; /* Always ignore clicks by default */
     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;
}

/* Only allow clicks when message is visible */
#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 {
     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;
     }
}

@media (max-width: 450px) {
     .stat-item {
          padding: 0 var(--space-xs);
     }
}

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

#close-notebook {
     margin: var(--space-lg) auto;
     padding: var(--space-md) var(--space-2xl);
     font-size: var(--font-md);
     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-4xl);
     color: var(--storybook-brown);
     font-family:
          Bubblegum Sans,
          cursive;
     font-weight: bold;
     transition: all var(--duration-base) ease;
     box-shadow: var(--shadow-sm);
     position: relative;
     overflow: hidden;
}

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

#close-notebook:active {
     transform: translateY(1px) scale(var(--scale-sm));
     box-shadow: var(--shadow-sm);
}

.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);
     }
     75% {
          transform: scale(var(--scale-3xl));
          opacity: var(--opacity-60);
     }
     100% {
          transform: scale(0);
          opacity: 0;
     }
}

.difficulty-icon {
     width: var(--icon-2xl);
     height: var(--icon-2xl);
     object-fit: contain;
     filter: drop-shadow(var(--shadow-sm));
}

#difficulty-selection button:hover .difficulty-icon {
     transform: scale(var(--scale-4xl));
     filter: drop-shadow(var(--shadow-sm));
}

#progress-segments::before,
#progress-segments::after {
     display: none;
}

.segment {
     flex: 1;
     height: 100%;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
}

.segment::before {
     content: '';
     position: absolute;
     left: 0;
     top: 50%;
     height: 6px;
     width: 100%;
     background-color: var(--light-border);
     transform: translateY(-50%);
     z-index: 0;
}

.segment:first-child::before {
     left: 50%;
     width: 50%;
}

.segment:last-child::before {
     width: 50%;
}

.segment-marker {
     width: var(--icon-3xl);
     height: var(--icon-3xl);
     background-color: var(--cream-bg);
     border: var(--border-width-md) solid var(--light-border);
     border-radius: var(--radius-round);
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     z-index: var(--z-overlay);
     box-shadow: var(--shadow-sm);
     transition: transform var(--duration-fast) ease;
     overflow: visible;
}

.segment-image {
     width: 34px;
     height: 34px;
     object-fit: contain;
     vertical-align: middle;
}

.segment[data-completed='true'] .segment-marker {
     border-color: #8c7a58;
     box-shadow:
          0 0 0 2px rgba(140, 122, 88, var(--opacity-30)),
          var(--shadow-sm);
}

@keyframes pulseCurrent {
     0% {
          box-shadow: 0 0 5px rgba(0, 0, 0, var(--opacity-30));
     }
     100% {
          box-shadow: 0 0 12px rgba(0, 0, 0, var(--opacity-50));
     }
}

#tagline-and-progress {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 0;
     margin: 0;
}

@keyframes titleBounce {
     0%,
     100% {
          transform: translateY(0);
     }
     50% {
          transform: translateY(calc(var(--space-md) * -1));
     }
}

@keyframes sparkle {
     0%,
     100% {
          opacity: 0;
          transform: scale(var(--opacity-80));
     }
     50% {
          opacity: 1;
          transform: scale(var(--scale-3xl));
     }
}

@keyframes float {
     0%,
     100% {
          transform: translateY(0) rotate(0deg);
     }
     50% {
          transform: translateY(calc(var(--space-md) * -1)) rotate(2deg);
     }
}

@keyframes glow {
     0%,
     100% {
          box-shadow: 0 0 15px rgba(255, 217, 102, var(--opacity-50));
     }
     50% {
          box-shadow: 0 0 25px rgba(255, 217, 102, var(--opacity-80));
     }
}

.confetti {
     position: fixed;
     top: -10vh;
     z-index: 999;
     animation:
          confetti-fall 10s linear forwards,
          confetti-shake var(--duration-3s) ease-in-out infinite;
}

.confetti:nth-child(1) {
     left: 10%;
     width: 12px;
     height: 12px;
     background-color: rebeccapurple;
     animation-delay: 0s;
     animation-duration: 8s;
}

.confetti:nth-child(2) {
     left: 20%;
     width: 15px;
     height: 15px;
     background-color: pink;
     animation-delay: var(--duration-slower);
     animation-duration: 9s;
}

.confetti:nth-child(3) {
     left: 30%;
     width: 10px;
     height: 10px;
     background-color: lightblue;
     animation-delay: var(--duration-slowest);
     animation-duration: 7s;
}

.confetti:nth-child(4) {
     left: 40%;
     width: 14px;
     height: 14px;
     background-color: seagreen;
     animation-delay: 1.5s;
     animation-duration: 10s;
}

.confetti:nth-child(5) {
     left: 50%;
     width: 11px;
     height: 11px;
     background-color: firebrick;
     animation-delay: var(--duration-2s);
     animation-duration: 8.5s;
}

.confetti:nth-child(6) {
     left: 60%;
     width: 13px;
     height: 13px;
     background-color: #9400d3;
     animation-delay: 2.5s;
     animation-duration: 7.5s;
}

.confetti:nth-child(7) {
     left: 70%;
     width: 16px;
     height: 16px;
     background-color: yellow;
     animation-delay: var(--duration-3s);
     animation-duration: 9.5s;
}

.confetti:nth-child(8) {
     left: 80%;
     width: 12px;
     height: 12px;
     background-color: greenyellow;
     animation-delay: 3.5s;
     animation-duration: 8s;
}

.confetti:nth-child(9) {
     left: 90%;
     width: 14px;
     height: 14px;
     background-color: red;
     animation-delay: 4s;
     animation-duration: 10.5s;
}

.confetti:nth-child(10) {
     left: 25%;
     width: 10px;
     height: 10px;
     background-color: orange;
     animation-delay: 4.5s;
     animation-duration: 7s;
}

.confetti:nth-child(11) {
     left: 65%;
     width: 15px;
     height: 15px;
     background-color: blue;
     animation-delay: 5s;
     animation-duration: 9s;
}

.confetti:nth-child(12) {
     left: 85%;
     width: 13px;
     height: 13px;
     background-color: green;
     animation-delay: 5.5s;
     animation-duration: 8.5s;
}

.confetti:nth-child(3n) {
     border-radius: var(--radius-round);
}

.confetti:nth-child(3n + 1) {
     border-radius: 0;
}

.confetti:nth-child(3n + 2) {
     width: 0;
     height: 0;
     background-color: transparent;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
     border-bottom: 16px solid #ff69b4;
}

#congratulations-container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 9998;
     pointer-events: none;
}

#congratulations-container #congratulations-plaque {
     pointer-events: auto;
}

#tagline:not(.led-scroll) {
     font-weight: 300;
     font-style: italic;
     color: var(--storybook-brown);
     width: 90%;
     max-width: var(--grid-max-width);
     margin: var(--space-sm) auto;
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     display: block;
}

#matched-pairs-left .card .front img,
#matched-pairs-right .card .front img {
     width: 85%;
     height: 85%;
     object-fit: contain;
}

#hint-button {
     width: var(--icon-xl);
     height: var(--icon-xl);
     border-radius: var(--radius-round);
     background: linear-gradient(to bottom, var(--gold-accent), var(--bonus-bg));
     border: var(--border-width-md) solid var(--bonus-bg);
     color: var(--storybook-brown);
     font-size: var(--font-lg);
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: var(--shadow-md);
     transition: all var(--duration-base) ease;
     position: absolute;
     top: 0;
     right: 0;
}

#hint-button:hover {
     background: linear-gradient(to bottom, #ffe7a0, var(--gold-accent));
     transform: scale(var(--scale-xl));
     box-shadow: var(--shadow-lg);
}

#hint-button:active {
     transform: scale(var(--scale-sm));
     box-shadow: var(--shadow-sm);
}

#hint-button i,
#hint-button span {
     font-style: normal;
}

/* Eye icon for peek button */
#hint-button .eye-icon {
     display: inline-block;
     width: var(--icon-sm);
     height: var(--icon-sm);
     background-image: var(--corner-flourish);
     background-repeat: no-repeat;
     background-position: center;
}

.stat-value {
     font-family:
          Bubblegum Sans,
          cursive !important;
     font-size: 1.6em !important;
     font-weight: bold !important;
     color: var(--storybook-brown) !important;
     text-shadow: var(--text-shadow-gold) !important;
     position: relative !important;
     display: inline-block !important;
     transform: scale(1) !important;
     transition: transform 0.2s ease !important;
}

.stat-value::after {
     content: '';
     position: absolute !important;
     bottom: -2px !important;
     left: 0 !important;
     width: 100% !important;
     height: 3px !important;
     background: linear-gradient(
          90deg,
          rgba(255, 217, 102, 0) 0%,
          rgba(255, 217, 102, 0.8) 50%,
          rgba(255, 217, 102, 0) 100%
     ) !important;
     border-radius: 2px !important;
}

@keyframes stat-pulse {
     0% {
          transform: scale(1);
     }
     50% {
          transform: scale(1.15);
     }
     100% {
          transform: scale(1);
     }
}

.stat-pulse {
     animation: stat-pulse 0.5s ease !important;
}

.stat-label {
     font-weight: bold !important;
     font-style: italic !important;
     color: var(--storybook-brown) !important;
     position: relative !important;
     padding: 0 5px !important;
}

.stat-label::before {
     content: '✶' !important;
     font-size: 0.8em !important;
     color: var(--gold-accent) !important;
     position: absolute !important;
     top: 50% !important;
     transform: translateY(-50%) !important;
     left: -8px !important;
}

#hint-button,
.stat-hint {
     display: none !important;
}

#hint-button.hidden,
#hint-button:not(.hidden),
.stat-hint:has(#hint-button) {
     display: none !important;
}

/* Settings Button */
#settings-button {
     position: relative;
     width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     background: linear-gradient(to bottom, var(--gold-accent), var(--bonus-bg));
     border: 3px solid var(--bonus-bg);
     border-radius: 15px;
     overflow: hidden;
     transition: all 0.3s ease;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     outline: none;
     margin-top: 10px;
}

#settings-button:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
     background: linear-gradient(to bottom, var(--gold-accent), var(--bonus-bg));
}

#settings-button:active {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.settings-icon {
     width: 4em;
     height: 4em;
     transform: rotate(0deg); /* Starting state */
     transition:
          transform 0.3s ease,
          background-color 0.3s ease,
          border-color 0.3s ease;
}

#settings-button:hover .settings-icon {
     transform: rotate(180deg);
     transition: transform 1.2s ease;
}

/* Unhover transition */
#settings-button .settings-icon {
     transition: transform 0.8s ease-in-out;
}

/* New class for when settings are open */
#settings-button.settings-open .settings-icon {
     transform: rotate(0deg);
     transition: transform 0.8s ease-in-out;
}

/* When hovering while settings are open */
#settings-button.settings-open:hover .settings-icon {
     transform: rotate(180deg);
     transition: transform 1.2s ease;
}

/* Settings Modal */
#settings-modal {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 90%;
     max-width: 400px;
     background-color: #f8f4e5; /* Use explicit color instead of variable */
     border: none;
     border-radius: var(--radius-2xl);
     text-align: center;
     z-index: var(--z-modal-high);
     box-shadow: var(--shadow-3xl), var(--shadow-inset-sm);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     background-image: var(--card-back-svg);
     background-blend-mode: multiply;
     opacity: 1; /* Ensure full opacity */
}

.settings-header {
     border-bottom: var(--border-width-md) solid #e0d8c0;
     background-color: #f8f4e5; /* Ensure header has background */
}

#settings-modal h2 {
     margin: var(--space-md);
     font-size: var(--font-5xl);
     font-family:
          Bubblegum Sans,
          cursive;
     color: var(--storybook-brown);
     text-shadow: var(--text-shadow-gold);
}

.settings-tabs {
     display: flex;
     justify-content: center;
     gap: var(--space-md);
     margin-bottom: 0;
     background-color: #f8f4e5; /* Ensure tabs area has background */
}

.settings-tab {
     padding: var(--space-sm) var(--space-lg);
     background-color: #fffae6; /* Use explicit color */
     border: var(--border-width-md) solid #e0d8c0;
     border-bottom: none;
     border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     cursor: pointer;
     font-family:
          Bubblegum Sans,
          cursive;
     color: var(--storybook-brown);
     font-size: var(--font-md);
     transition:
          background-color var(--duration-base) ease,
          border-color var(--duration-base) ease;
}

.settings-tab.active {
     background-color: var(--gold-accent);
     border-color: var(--bonus-bg);
     border-bottom: none;
     position: relative;
     z-index: var(--z-base);
}

.settings-tab:hover:not(.active) {
     background: linear-gradient(to bottom, var(--gold-accent), var(--bonus-bg));
     border-color: #e0d8c0;
     border-bottom: none;
}

.settings-content {
     padding: var(--space-xs);
     background-color: #fffae6; /* Use explicit color */
     margin: 0;
     max-height: 350px;
     overflow-y: auto;
     border-bottom: var(--border-width-md) solid #e0d8c0;
}

.settings-panel {
     display: none;
     background-color: #fffae6; /* Ensure panel has background */
}

.settings-panel.active {
     display: block;
}

/* Volume Controls */
.volume-control {
     margin: var(--space-xs);
     padding: var(--space-lg);
     background-color: #fffae6; /* Use explicit color */
     border: var(--border-width-sm) solid #e0d8c0;
     border-radius: var(--radius-lg);
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.volume-control label {
     display: flex;
     align-items: center;
     font-weight: bold;
     color: var(--storybook-brown);
     margin-bottom: var(--space-md);
     font-size: var(--font-md);
}

.volume-icon {
     margin-right: var(--space-sm);
     font-size: var(--font-lg);
}

.slider-container {
     display: flex;
     align-items: center;
     margin-bottom: var(--space-lg);
}

input[type='range'] {
     flex: 1;
     appearance: none;
     height: 12px;
     background: linear-gradient(to bottom, var(--gold-accent), var(--bonus-bg));
     border-radius: var(--radius-lg);
     outline: none;
     margin-right: var(--space-md);
}

input[type='range']::-webkit-slider-thumb {
     appearance: none;
     width: var(--icon-lg);
     height: var(--icon-lg);
     background: #fffae6;
     border: var(--border-width-md) solid var(--gold-accent);
     border-radius: var(--radius-round);
     cursor: pointer;
     box-shadow: var(--shadow-sm);
}

input[type='range']::-moz-range-thumb {
     width: var(--icon-lg);
     height: var(--icon-lg);
     background: #fffae6;
     border: var(--border-width-md) solid var(--gold-accent);
     border-radius: var(--radius-round);
     cursor: pointer;
     box-shadow: var(--shadow-sm);
}

.volume-value {
     min-width: 45px;
     text-align: right;
     font-weight: bold;
     color: var(--storybook-brown);
}

.mute-button {
     padding: var(--space-sm) var(--space-lg);
     background: linear-gradient(to bottom, var(--gold-accent), var(--bonus-bg));
     border: var(--border-width-md) solid var(--bonus-text);
     border-radius: var(--radius-lg);
     cursor: pointer;
     font-family:
          Bubblegum Sans,
          cursive;
     color: var(--storybook-brown);
     font-size: var(--font-base);
     transition: all var(--duration-base) ease;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
}

.mute-button:hover {
     background: linear-gradient(to bottom, #ffe7a0, var(--gold-accent));
}

.mute-button:active {
     transform: translateY(1px);
}

.mute-button.muted {
     filter: grayscale(100%);
     color: #8a7b63;
}

.mute-icon {
     margin-right: var(--space-sm);
}

/* Close button */
#close-settings {
     width: var(--button-width-md);
     height: var(--button-height-md);
     margin: var(--space-xs) auto;
     margin-bottom: var(--space-md);
     background: linear-gradient(to bottom, var(--gold-accent), var(--bonus-bg));
     border: var(--border-width-lg) solid var(--bonus-bg);
     border-radius: var(--radius-lg);
     color: var(--storybook-brown);
     font-size: var(--font-md);
     font-family:
          Bubblegum Sans,
          cursive;
     cursor: pointer;
     transition: all var(--duration-base) ease;
     position: relative;
     overflow: hidden;
     box-shadow: var(--shadow-sm);
}

#close-settings:hover {
     background: linear-gradient(to bottom, #ffe7a0, var(--gold-accent));
     box-shadow: var(--shadow-lg);
}

/* Hide modal styling for both notebook and settings */
.modal.hidden {
     display: none;
}

/* Empty notebook message */
.empty-notebook {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 200px;
     padding: var(--space-xl);
     background-color: #fffae6; /* Use explicit color */
     border: var(--border-width-sm) dashed #e0d8c0;
     border-radius: var(--radius-lg);
     margin-top: var(--space-xl);
}

.empty-notebook h3 {
     color: var(--storybook-brown);
     margin-bottom: var(--space-md);
     font-family:
          Bubblegum Sans,
          cursive;
     font-size: var(--font-3xl);
}

.empty-notebook p {
     color: var(--storybook-brown);
     font-style: italic;
}

.rarity-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.3125em;
     margin-top: 0.3125em;
     font-size: 0.8em;
}

.rarity-prev,
.rarity-next {
     background: none;
     border: none;
     cursor: pointer;
     color: var(--storybook-brown);
     font-size: 1em;
     padding: 0.125em 0.3125em;
}

.rarity-display {
     text-transform: capitalize;
     color: var(--storybook-brown);
     min-width: 3.5em;
     display: inline-block;
}

/* 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;
}

.notebook-emojis {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 15px;
     padding: 10px 5px;
     justify-content: center;
     width: 100%;
}

/* Notebook display */
.notebook-emoji {
     width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--card-bg);
     border: 3px solid var(--light-border);
     border-radius: 8px;
     filter: grayscale(50%);
     opacity: 0.3;
}

.notebook-emoji-image {
     width: 50px;
     height: 50px;
     object-fit: contain;
     filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.15));
}

/* Collected cards */
.notebook-emoji.card-regular {
     filter: none;
     opacity: 1;
     border: 3px solid var(--gold-accent);
}

.notebook-emoji.card-rare {
     filter: none;
     opacity: 1;
     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: 400% 400%;
     border: 3px solid var(--gold-accent);
     transform: rotate(-2deg);
}

.notebook-emoji.card-rare::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;
}

.notebook-emoji.card-mythic {
     filter: none;
     opacity: 1;
     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: 400% 400%;
     border: 3px solid var(--mythic-color-dark);
     transform: rotate(-2deg);
}

.notebook-emoji.card-mythic::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;
}

/* Shine effect for all buttons */
.shine-button {
     position: relative;
}

.shine-button::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(
          90deg,
          transparent 40%,
          rgba(255, 255, 255, 0.4) 50%,
          transparent 60%
     );
     background-size: 200% 100%;
     transition: background-position 0.5s;
}

.shine-button:hover::before {
     background-position: 100% 0;
}

/* Updated button styles without redundant ::before */
#settings-button {
     width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     background: linear-gradient(to bottom, var(--gold-accent), var(--bonus-bg));
     border: 3px solid var(--bonus-bg);
     border-radius: 15px;
     transition: all 0.3s ease;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     outline: none;
     margin-top: 10px;
}

#settings-button:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
     background: linear-gradient(to bottom, var(--gold-accent), var(--bonus-bg));
}

#settings-button:active {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#close-settings {
     width: 120px;
     height: 40px;
     margin: 5px auto;
     margin-bottom: 10px;
     background: linear-gradient(to bottom, var(--gold-accent), var(--bonus-bg));
     border: 3px solid var(--bonus-bg);
     border-radius: 10px;
     color: var(--storybook-brown);
     font-size: 1.1em;
     font-family:
          Bubblegum Sans,
          cursive;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

#close-settings:hover {
     background: linear-gradient(to bottom, #ffe7a0, var(--gold-accent));
     box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
}

#home-win,
#home-loss {
     margin-top: 25px;
     padding: 12px 30px;
     font-size: 1.2em;
     cursor: pointer;
     background: linear-gradient(to bottom, var(--gold-accent), var(--bonus-bg));
     border: 3px solid var(--bonus-bg);
     border-radius: 15px;
     color: var(--storybook-brown);
     font-family:
          Bubblegum Sans,
          cursive;
     font-weight: bold;
     width: 160px;
     transition: all 0.3s ease;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#home-win:hover,
#home-loss:hover {
     background: linear-gradient(to bottom, #ffe7a0, var(--gold-accent));
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

#home-win:active,
#home-loss:active {
     transform: translateY(1px) scale(0.98);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#home-win:disabled,
#home-loss:disabled {
     background: linear-gradient(to bottom, #f0dea0, #e6d59c);
     cursor: not-allowed;
     opacity: 0.7;
     transform: none;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#difficulty-selection button {
     margin: 0;
     width: 250px;
     padding: 8px 15px;
     border-radius: 10px;
     border: 2px solid var(--light-border);
     background-color: var(--cream-bg);
     cursor: pointer;
     transition: all 0.2s ease;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#difficulty-selection button:hover {
     transform: scale(1.03);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     border-color: var(--light-border);
}

#difficulty-selection button:active {
     transform: translateY(2px);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#easy-start {
     background-color: #e0f7e0;
     border-bottom: 4px solid var(--light-border);
}

#easy-start:hover {
     background-color: #d0f0d0;
}

#normal-start {
     background-color: #e0f0ff;
     border-bottom: 4px solid var(--light-border);
}

#normal-start:hover {
     background-color: #d0e8ff;
}

#hard-start {
     background-color: #fff0e0;
     border-bottom: 4px solid var(--light-border);
}

#hard-start:hover {
     background-color: #ffe8d0;
}

#frantic-start {
     background-color: #ffe0e0;
     border-bottom: 4px solid var(--light-border);
}

#frantic-start:hover {
     background-color: #ffd0d0;
}

#difficulty-selection button .mode-name {
     flex: 1;
     text-align: center;
     font-family:
          Bubblegum Sans,
          cursive;
     font-size: 1.9rem;
     color: var(--storybook-brown);
     margin: 0 0 -5px;
     font-weight: bold;
     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}

#difficulty-selection button .emoji-left,
#difficulty-selection button .emoji-right {
     font-size: 1.3em;
     padding: 0 5px;
     position: relative;
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
}

.mute-button {
     padding: 8px 15px;
     background: linear-gradient(to bottom, var(--gold-accent), var(--bonus-bg));
     border: 2px solid var(--bonus-text);
     border-radius: 10px;
     cursor: pointer;
     font-family:
          Bubblegum Sans,
          cursive;
     color: var(--storybook-brown);
     font-size: 1em;
     transition: all 0.3s ease;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
}

.mute-button:hover {
     background: linear-gradient(to bottom, #ffe7a0, var(--gold-accent));
}

.mute-button:active {
     transform: translateY(1px);
}

.mute-button.muted {
     filter: grayscale(100%);
     color: #8a7b63;
}

.mute-icon {
     margin-right: 8px;
}

/* Notebook nav buttons */
.notebook-nav-button {
     width: 2em;
     height: 2em;
     padding: 0;
     background: linear-gradient(to bottom, var(--gold-accent), #e6a400);
     border: 2px solid #e6a400;
     border-radius: 8px;
     color: #630;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.notebook-nav-button:hover:not(:disabled) {
     background: linear-gradient(to bottom, #ffe7a0, var(--gold-accent));
     transform: scale(1.05);
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.notebook-nav-button:disabled {
     background: linear-gradient(to bottom, #f0dea0, #e6d59c);
     border-color: #e0d8c0;
     color: #b5a990;
     cursor: not-allowed;
     opacity: 0.7;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (hover: none) {
     .card:not(.flipped):hover,
     #grid:not(.checking) .card:not(.flipped):hover {
          transform: none;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
          border-color: var(--light-border);
     }
}

.timer-parchment {
     position: absolute;
     top: var(--space-xs);
     left: var(--space-xs);
     right: var(--space-xs);
     bottom: var(--space-xs);
     border-radius: var(--radius-round);
     background-color: #fff9e6;
     background-image: var(--parchment-pattern);
     z-index: var(--z-base);
     border: var(--border-width-md) solid var(--light-border);
     box-shadow: var(--shadow-inset-sm);
}

.timer-progress-container {
     position: absolute;
     top: var(--space-xs);
     left: var(--space-xs);
     width: calc(100% - var(--space-md));
     height: calc(100% - var(--space-md));
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: var(--z-card);
}

.timer-text {
     position: absolute;
     font-family:
          Bubblegum Sans,
          cursive;
     font-size: var(--font-md);
     text-align: center;
     z-index: var(--z-overlay);
     text-shadow: 1px 1px 0 rgba(255, 255, 255, var(--opacity-70));
}

.clock-mark {
     position: absolute;
     font-size: var(--font-lg);
     color: var(--storybook-brown);
     text-shadow: 0 0 3px rgba(92, 46, 0, var(--opacity-70));
     z-index: var(--z-overlay);
}

.mark-12 {
     top: -4px;
     left: 50%;
     transform: translateX(-50%);
}

.mark-3 {
     right: 1px;
     top: 50%;
     transform: translateY(-50%);
}

.mark-6 {
     bottom: -2.5px;
     left: 50%;
     transform: translateX(-50%);
}

.mark-9 {
     left: 1px;
     top: 50%;
     transform: translateY(-50%);
}

.fairy-dust-container {
     position: absolute;
     top: var(--space-xs);
     left: var(--space-xs);
     width: calc(100% - var(--space-md));
     height: calc(100% - var(--space-md));
     border-radius: var(--radius-round);
     overflow: hidden;
     z-index: var(--z-card);
}

.fairy-dust {
     position: absolute;
     width: 4px;
     height: 4px;
     background-color: rgba(255, 217, 102, var(--opacity-70));
     border-radius: var(--radius-round);
     z-index: var(--z-card);
     opacity: var(--opacity-60);
     animation: twinkle var(--duration-2s) infinite ease-in-out;
}

.dust1 {
     top: 25%;
     left: 20%;
     animation-delay: 0.1s;
}

.dust2 {
     top: 15%;
     right: 25%;
     animation-delay: 0.3s;
}

.dust3 {
     bottom: 30%;
     left: 15%;
     animation-delay: 0.5s;
}

.dust4 {
     bottom: 20%;
     right: 20%;
     animation-delay: 0.7s;
}

.dust5 {
     top: 50%;
     left: 50%;
     animation-delay: 0.9s;
}

@keyframes timerPulse {
     0% {
          transform: scale(1);
     }
     50% {
          transform: scale(var(--scale-lg));
     }
     100% {
          transform: scale(1);
     }
}

#magical-timer.warning .timer-frame {
     box-shadow: var(--shadow-lg);
}

#magical-timer.warning .timer-parchment {
     background-color: #fff1d6;
}

#timer-progress {
     transition:
          stroke-dashoffset var(--duration-slowest) linear,
          stroke var(--duration-base) ease;
}

#timer-progress.warning {
     stroke: #e67e22;
}

#timer-svg {
     position: relative;
     z-index: var(--z-card);
     filter: drop-shadow(var(--shadow-xs));
}

body.peek-mode {
     cursor:
          url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>')
               24 24,
          auto;
}

body.peek-mode #grid .card:not(.flipped):hover {
     box-shadow: none;
     transform: none;
}

.hint-reveal {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0);
     clip-path: circle(0% at 50% 50%);
     pointer-events: none;
     z-index: var(--z-card);
}

@keyframes reveal-circle {
     0% {
          clip-path: circle(0% at 50% 50%);
     }
     50% {
          clip-path: circle(50% at 50% 50%);
     }
     100% {
          clip-path: circle(0% at 50% 50%);
     }
}