/* Notebook Modal Styles */

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

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

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

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

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

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

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

/* Hide modal when hidden class is applied */
.modal.hidden {
     display: none;
}