/* Settings Button and Modal Styles */

/* Settings Button (shared by game and title screen) */
#settings-button,
#title-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,
#title-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,
#title-settings-button:active {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

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

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

#settings-button .settings-icon,
#title-settings-button .settings-icon {
     transition: transform 0.8s ease-in-out;
}

#settings-button.settings-open .settings-icon,
#title-settings-button.settings-open .settings-icon {
     transform: rotate(0deg);
     transition: transform 0.8s ease-in-out;
}

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

/* Title Screen Buttons Container */
.title-buttons {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 10px;
     margin-top: 10px;
}

/* Google Sign-in Button */
.google-signin {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: var(--space-sm) var(--space-lg);
     width: var(--button-width-2xl);
     border-radius: var(--radius-lg);
     border: var(--border-width-md) solid var(--card-border);
     border-bottom: var(--border-width-xl) solid var(--card-border);
     background-color: #ffffff;
     cursor: pointer;
     transition: all var(--duration-fast) ease;
     box-shadow: var(--shadow-lg);
     position: relative;
     overflow: hidden;
}

.google-signin:hover {
     transform: scale(var(--scale-md));
     box-shadow: var(--shadow-lg);
     background-color: #f8f8f8;
}

.google-signin:hover::before {
     left: 100%;
}

.google-signin:active {
     transform: translateY(2px);
     box-shadow: var(--shadow-sm);
}

.google-icon {
     flex-shrink: 0;
}

.signin-text {
     font-family: Bubblegum Sans, cursive;
     font-size: var(--font-4xl);
     color: var(--storybook-brown-deep);
     font-weight: bold;
     text-shadow: 0 1px 1px rgba(255, 255, 255, var(--opacity-70));
}

/* User Status Display */
.user-status {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     margin-top: 15px;
     padding: 10px 20px;
     background: rgba(255, 255, 255, 0.8);
     border-radius: 20px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-status .user-name {
     font-family: var(--font-primary);
     font-size: 0.95rem;
     color: var(--text-primary);
}

.user-status.hidden {
     display: none;
}

/* Settings Modal */
#settings-modal {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 90%;
     max-width: 400px;
     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: hidden;
     background-image: var(--card-back-svg);
     background-blend-mode: multiply;
     opacity: 1;
}

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

#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-sm);
     margin-bottom: 0;
     background-color: #f8f4e5;
     flex-wrap: wrap;
}

.settings-tab {
     padding: var(--space-xs) var(--space-md);
     background-color: #fffae6;
     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;
     margin: 0;
     max-height: 350px;
     overflow-y: auto;
     border-bottom: var(--border-width-md) solid #e0d8c0;
}

.settings-panel {
     display: none;
     background-color: #fffae6;
}

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

/* Volume Controls */
.volume-control {
     margin: var(--space-xs);
     padding: var(--space-lg);
     background-color: #fffae6;
     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);
}

/* About Panel */
#about-panel {
     text-align: center;
     padding: var(--space-md);
}

.about-section {
     margin-bottom: var(--space-lg);
}

.about-section:last-child {
     margin-bottom: 0;
}

.about-section h3 {
     font-family: 'Bubblegum Sans', cursive;
     font-size: var(--font-5xl);
     color: var(--storybook-brown-deep);
     margin: 0 0 var(--space-xs) 0;
     text-shadow: var(--text-shadow-gold);
}

.about-section h4 {
     font-family: 'Bubblegum Sans', cursive;
     font-size: var(--font-lg);
     color: var(--storybook-brown-medium);
     margin: 0 0 var(--space-sm) 0;
}

.about-tagline {
     font-style: italic;
     color: var(--storybook-ink-faded);
     margin: 0;
}

.about-credit {
     margin: var(--space-xs) 0;
     color: var(--storybook-brown-deep);
}

.about-credit strong {
     color: var(--storybook-brown-medium);
}

.about-link {
     display: inline-block;
     padding: var(--space-sm) var(--space-xl);
     background: linear-gradient(to bottom, var(--gold-accent), var(--bonus-bg));
     color: var(--storybook-brown-deep);
     text-decoration: none;
     border-radius: var(--radius-lg);
     border: var(--border-width-md) solid var(--bonus-bg);
     font-family: 'Bubblegum Sans', cursive;
     font-size: var(--font-md);
     transition: all var(--duration-base) ease;
     box-shadow: var(--shadow-sm);
}

.about-link:hover {
     background: linear-gradient(to bottom, #ffe7a0, var(--gold-accent));
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
}

.about-version {
     border-top: 1px solid #e0d8c0;
     padding-top: var(--space-md);
     margin-top: var(--space-lg);
}

.about-version p {
     margin: 0;
     font-size: var(--font-sm);
     color: var(--storybook-ink-faded);
}

.about-header {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: var(--space-md);
     margin-bottom: var(--space-lg);
}

.about-card-left,
.about-card-right {
     width: 80px;
     height: 80px;
     object-fit: contain;
     filter: drop-shadow(0 2px 4px rgb(0 0 0 / 20%));
}

.about-card-left {
     transform: rotate(-8deg);
}

.about-card-right {
     transform: rotate(8deg);
}

.about-title-section {
     text-align: center;
}

.about-title-section h3 {
     font-family: 'Bubblegum Sans', cursive;
     font-size: var(--font-5xl);
     color: var(--storybook-brown-deep);
     margin: 0 0 var(--space-xs) 0;
     text-shadow: var(--text-shadow-gold);
}

.about-description {
     text-align: center;
     margin-bottom: var(--space-lg);
     padding: 0 var(--space-sm);
}

.about-description p {
     margin: 0;
     color: var(--storybook-brown-deep);
     line-height: 1.5;
}

.about-roadmap-link {
     color: var(--storybook-ink-faded);
     text-decoration: underline;
}

.about-roadmap-link:hover {
     color: var(--storybook-brown-medium);
}

.about-social-icon {
     color: var(--storybook-ink-faded);
     vertical-align: middle;
     margin: 0 2px;
}

.about-social-icon:hover {
     color: var(--storybook-brown-medium);
}

/* Mobile: tighten tabs to fit on one line */
@media (max-width: 480px) {
     .settings-tabs {
          gap: 5px;
     }

     .settings-tab {
          padding: var(--space-xs) 6px;
     }
}