/* Start Screen Styles */

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

.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: 8px 20px;
     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: 6px;
}

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