/* ============================================
   MESEKOCKA.HU — Magical Story Dice
   ============================================ */

:root {
    --primary: #6C5CE7;
    --primary-light: #A29BFE;
    --primary-dark: #5A4BD1;
    --secondary: #FF6B9D;
    --accent: #FECA57;
    --accent-glow: #FFD93D;
    --bg-dark: #1A1A2E;
    --bg-card: #16213E;
    --bg-card-light: #1E2D50;
    --text: #EEEEFF;
    --text-muted: #A0A0CC;
    --success: #00D2A0;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 8px 32px rgba(0,0,0,0.3);
    --shadow-glow: 0 0 30px rgba(108,92,231,0.4);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Quicksand', sans-serif;
    background: var(--bg-dark);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: 'Baloo 2', cursive;
}

/* ---- SCREENS ---- */
.screen {
    display: none;
    min-height: 100vh;
    padding: 20px;
    position: relative;
}
.screen.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: screenSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes screenSlideIn {
    0% { opacity: 0; transform: translateY(30px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- HERO ---- */
#hero {
    background: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%);
    overflow: hidden;
}

.floating-elements {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.float-item {
    position: absolute;
    font-size: 2.5rem;
    left: var(--x);
    top: var(--y);
    animation: floatAround 6s ease-in-out infinite;
    animation-delay: var(--delay);
    opacity: 0.3;
}

@keyframes floatAround {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

.hero-content {
    text-align: center;
    z-index: 1;
    max-width: 600px;
}

.logo-container {
    margin-bottom: 20px;
}

.logo-dice-wrap {
    width: 100px;
    height: 100px;
    perspective: 300px;
    margin: 0 auto 10px;
}

.logo-cube {
    width: 80px;
    height: 80px;
    position: relative;
    transform-style: preserve-3d;
    margin: 10px auto;
    animation: logoSpin 6s ease-in-out infinite;
}

.logo-core {
    position: absolute;
    width: 72px;
    height: 72px;
    top: 4px;
    left: 4px;
    transform-style: preserve-3d;
}

.logo-core-face {
    position: absolute;
    width: 72px;
    height: 72px;
    background: #E0D0BC;
    border-radius: 4px;
}

.logo-core-f1 { transform: rotateY(0deg) translateZ(36px); }
.logo-core-f2 { transform: rotateY(180deg) translateZ(36px); }
.logo-core-f3 { transform: rotateX(90deg) translateZ(36px); }
.logo-core-f4 { transform: rotateX(-90deg) translateZ(36px); }
.logo-core-f5 { transform: rotateY(-90deg) translateZ(36px); }
.logo-core-f6 { transform: rotateY(90deg) translateZ(36px); }

.logo-face {
    position: absolute;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    border-radius: 6px;
    background: linear-gradient(145deg, #E8D8C4, #F5EDE0);
    border: 2px solid rgba(180, 155, 120, 0.4);
    backface-visibility: hidden;
}

.logo-f1 { transform: rotateY(0deg) translateZ(40px); }
.logo-f2 { transform: rotateY(180deg) translateZ(40px); }
.logo-f3 { transform: rotateX(90deg) translateZ(40px); }
.logo-f4 { transform: rotateX(-90deg) translateZ(40px); }
.logo-f5 { transform: rotateY(-90deg) translateZ(40px); }
.logo-f6 { transform: rotateY(90deg) translateZ(40px); }

@keyframes logoSpin {
    0%, 100% { transform: rotateX(-30deg) rotateY(0deg); }
    25% { transform: rotateX(35deg) rotateY(90deg); }
    50% { transform: rotateX(-35deg) rotateY(180deg); }
    75% { transform: rotateX(30deg) rotateY(270deg); }
}

.hero-content h1 {
    font-size: 3.5rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 50%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

.tagline {
    font-size: 1.4rem;
    color: var(--text);
    margin: 10px 0 5px;
    font-weight: 600;
}

.subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 30px;
}

.hero-features {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
}

.feature-tag {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    position: relative;
}

.feature-tag + .feature-tag::before {
    content: '·';
    margin-right: 10px;
    opacity: 0.4;
}

.hero-nav-btn {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(108, 92, 231, 0.35);
    background: rgba(108, 92, 231, 0.1);
    color: var(--text);
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
}

.hero-nav-btn:hover {
    border-color: var(--primary);
    background: rgba(108, 92, 231, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.25);
}

/* ---- BUTTONS ---- */
.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    padding: 14px 36px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Baloo 2', cursive;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--accent), var(--secondary), var(--primary));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
}

.btn-glow:hover::after {
    opacity: 1;
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.btn-secondary {
    background: rgba(108, 92, 231, 0.15);
    color: var(--primary-light);
    border: 2px solid var(--primary);
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Baloo 2', cursive;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: rgba(108, 92, 231, 0.3);
    transform: translateY(-2px);
}

.btn-ghost {
    background: none;
    color: var(--text-muted);
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Quicksand', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-ghost:hover {
    color: var(--text);
    background: rgba(255,255,255,0.05);
}

.btn-large {
    padding: 16px 44px;
    font-size: 1.2rem;
}

.btn-back {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
}

.btn-back:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text);
}

.btn-icon {
    font-size: 1.2em;
}

/* ---- SETUP ---- */
#setup {
    background: linear-gradient(180deg, #1A1A2E 0%, #16213E 100%);
    justify-content: flex-start;
    padding-top: 70px;
}

.setup-content {
    max-width: 520px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.setup-content h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 10px;
}

.setup-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    padding: 20px;
    width: 100%;
}

.setup-label {
    display: block;
    font-weight: 700;
    margin-bottom: 12px;
    font-size: 1rem;
    color: var(--text);
}

.input-magic {
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(108, 92, 231, 0.3);
    background: var(--bg-dark);
    color: var(--text);
    font-size: 1.1rem;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    outline: none;
    transition: border-color 0.3s;
}

.input-magic:focus {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.2);
}

.input-magic::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.setup-hint-inline {
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Interest selector */
.interest-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.interest-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-card-light);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    font-size: 0.8rem;
    font-family: inherit;
    transition: all 0.2s;
}
.interest-btn:hover {
    border-color: var(--primary-light);
    background: rgba(108,92,231,0.15);
}
.interest-btn.selected {
    border-color: var(--primary);
    background: rgba(108,92,231,0.25);
    box-shadow: 0 0 12px rgba(108,92,231,0.3);
}
.interest-icon {
    font-size: 1.2rem;
}

.setup-hint {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
    opacity: 0.7;
}

/* Character inputs */
.char-buttons {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.btn-sm {
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
}
.char-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.char-role-badge {
    font-size: 0.7rem;
    color: var(--primary-light);
    white-space: nowrap;
    min-width: 90px;
}
.input-sm {
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
    flex: 1;
}
.char-remove-btn {
    background: rgba(255,107,157,0.2);
    border: none;
    color: var(--secondary);
    font-size: 1.2rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.char-remove-btn:hover {
    background: rgba(255,107,157,0.4);
}

/* Mood Sliders */
.mood-card {
    padding: 16px 20px;
}

.mood-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.mood-label-left, .mood-label-right {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 80px;
}

.mood-label-left { text-align: right; }
.mood-label-right { text-align: left; }

.mood-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(108, 92, 231, 0.3), rgba(255, 107, 157, 0.3));
    outline: none;
    cursor: pointer;
}

.mood-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--bg-dark);
    box-shadow: 0 0 8px rgba(108, 92, 231, 0.4);
    cursor: pointer;
    transition: transform 0.2s;
}

.mood-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.mood-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--bg-dark);
    box-shadow: 0 0 8px rgba(108, 92, 231, 0.4);
    cursor: pointer;
}

.age-selector, .theme-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.age-btn, .theme-btn {
    flex: 1;
    min-width: 100px;
    padding: 14px 10px;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(108, 92, 231, 0.2);
    background: var(--bg-dark);
    color: var(--text-muted);
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.age-btn:hover, .theme-btn:hover {
    border-color: var(--primary);
    color: var(--text);
}

.age-btn.selected, .theme-btn.selected {
    border-color: var(--primary);
    background: rgba(108, 92, 231, 0.15);
    color: var(--text);
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.2);
}

.age-emoji, .theme-icon {
    font-size: 1.5rem;
}

.dice-count-selector {
    display: flex;
    gap: 10px;
}

.dice-count-btn {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 2px solid rgba(108, 92, 231, 0.2);
    background: var(--bg-dark);
    color: var(--text-muted);
    font-size: 1.4rem;
    font-weight: 700;
    font-family: 'Baloo 2', cursive;
    cursor: pointer;
    transition: all 0.3s;
}

.dice-count-btn:hover {
    border-color: var(--primary);
    color: var(--text);
}

.dice-count-btn.selected {
    border-color: var(--primary);
    background: rgba(108, 92, 231, 0.15);
    color: var(--accent);
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.2);
}

/* ---- DICE ROLLING ---- */
#rolling {
    background: linear-gradient(180deg, #1A1A2E 0%, #0F3460 100%);
    justify-content: flex-start;
    padding-top: 70px;
}

.rolling-content {
    max-width: 700px;
    width: 100%;
    text-align: center;
}

.rolling-content h2 {
    font-size: 2rem;
    margin-bottom: 5px;
}

.roll-subtitle {
    color: var(--text-muted);
    margin-bottom: 30px;
    font-size: 1rem;
}

.dice-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-bottom: 30px;
    perspective: 1000px;
}

/* ---- 3D DICE ---- */
.dice-wrapper {
    width: 90px;
    height: 90px;
    perspective: 600px;
    cursor: pointer;
}

.dice {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.dice-wrapper:hover .dice:not(.rolling) {
    transform: scale(1.1);
    filter: brightness(1.2);
}

.dice-wrapper:active .dice:not(.rolling) {
    transform: scale(0.95);
}

.dice.rolling {
    animation: diceRoll 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes diceRoll {
    0% { transform: rotateX(0) rotateY(0) rotateZ(0) scale(1); }
    10% { transform: rotateX(120deg) rotateY(80deg) rotateZ(40deg) scale(1.15); }
    25% { transform: rotateX(280deg) rotateY(200deg) rotateZ(120deg) scale(0.9); }
    40% { transform: rotateX(450deg) rotateY(350deg) rotateZ(200deg) scale(1.1); }
    55% { transform: rotateX(580deg) rotateY(460deg) rotateZ(260deg) scale(0.95); }
    70% { transform: rotateX(670deg) rotateY(530deg) rotateZ(310deg) scale(1.05); }
    85% { transform: rotateX(710deg) rotateY(555deg) rotateZ(340deg) scale(1.02); }
}

.dice-face {
    position: absolute;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    border-radius: 14px;
    background: linear-gradient(145deg, #2D2B55, #1E1B40);
    border: 2px solid rgba(108, 92, 231, 0.3);
    backface-visibility: hidden;
    box-shadow: inset 0 0 20px rgba(108, 92, 231, 0.1);
}

.dice-face.front  { transform: rotateY(0deg) translateZ(45px); }
.dice-face.back   { transform: rotateY(180deg) translateZ(45px); }
.dice-face.right  { transform: rotateY(90deg) translateZ(45px); }
.dice-face.left   { transform: rotateY(-90deg) translateZ(45px); }
.dice-face.top    { transform: rotateX(90deg) translateZ(45px); }
.dice-face.bottom { transform: rotateX(-90deg) translateZ(45px); }

.dice.result {
    animation: diceSettle 0.5s ease;
}

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

.dice-result-card {
    width: 90px;
    height: 90px;
    background: linear-gradient(145deg, #2D2B55, #1E1B40);
    border: 2px solid var(--primary);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.3);
    animation: resultPop 0.5s ease backwards;
}

.dice-result-card:nth-child(1) { animation-delay: 0.1s; }
.dice-result-card:nth-child(2) { animation-delay: 0.2s; }
.dice-result-card:nth-child(3) { animation-delay: 0.3s; }
.dice-result-card:nth-child(4) { animation-delay: 0.4s; }
.dice-result-card:nth-child(5) { animation-delay: 0.5s; }
.dice-result-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes resultPop {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(5deg); opacity: 1; }
    70% { transform: scale(0.9) rotate(-2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.dice-result-card:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 30px rgba(108, 92, 231, 0.5);
    transition: all 0.2s ease;
}

.dice-result-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    text-align: center;
    max-width: 90px;
}

.result-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    border-radius: var(--radius-sm);
    padding: 4px;
}
.result-item:hover {
    background: rgba(108,92,231,0.15);
}
.result-item.dice-item-locked {
    background: rgba(108,92,231,0.25);
    box-shadow: 0 0 12px rgba(108,92,231,0.4);
    border: 2px solid var(--primary);
}
.dice-lock-badge {
    font-size: 0.65rem;
    opacity: 0.5;
    margin-top: 2px;
    transition: opacity 0.2s;
}
.result-item:hover .dice-lock-badge,
.dice-item-locked .dice-lock-badge {
    opacity: 1;
}
.results-hint {
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.6;
    margin: 8px 0 4px;
}

.dice-container.dice-hidden {
    display: none;
}

.roll-results {
    margin-bottom: 24px;
    width: 100%;
}

.results-panel {
    background: linear-gradient(135deg, rgba(108,92,231,0.12), rgba(255,107,157,0.08));
    border: 2px solid rgba(108, 92, 231, 0.3);
    border-radius: var(--radius);
    padding: 24px;
    animation: panelReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes panelReveal {
    0% { opacity: 0; transform: scale(0.9) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.results-banner {
    text-align: center;
    font-family: 'Baloo 2', cursive;
    font-size: 1.3rem;
    color: var(--accent);
    margin-bottom: 18px;
    letter-spacing: 1px;
}

.results-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 18px;
}

.results-sentence {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.result-tag {
    background: rgba(108, 92, 231, 0.2);
    border: 1px solid rgba(108, 92, 231, 0.3);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-light);
    animation: tagPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.result-tag:nth-child(1) { animation-delay: 0.5s; }
.result-tag:nth-child(2) { animation-delay: 0.6s; }
.result-tag:nth-child(3) { animation-delay: 0.7s; }
.result-tag:nth-child(4) { animation-delay: 0.8s; }
.result-tag:nth-child(5) { animation-delay: 0.9s; }
.result-tag:nth-child(6) { animation-delay: 1.0s; }

@keyframes tagPop {
    0% { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}

.roll-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.hidden {
    display: none !important;
}

/* ---- STORY ---- */
#story {
    background: linear-gradient(180deg, #1A1A2E 0%, #16213E 100%);
    justify-content: flex-start;
    padding-top: 70px;
}

.story-content {
    max-width: 700px;
    width: 100%;
}

.story-header {
    text-align: center;
    margin-bottom: 24px;
}

.story-title {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 12px;
}

/* ---- TTS BAR ---- */
.story-tts-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.tts-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, rgba(108,92,231,0.2), rgba(255,107,157,0.15));
    border: 2px solid rgba(108,92,231,0.3);
    border-radius: 28px;
    color: var(--text);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.3s;
}

.tts-btn:hover {
    background: linear-gradient(135deg, rgba(108,92,231,0.35), rgba(255,107,157,0.25));
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(108,92,231,0.3);
}

.tts-btn.tts-active-btn {
    background: linear-gradient(135deg, rgba(108,92,231,0.35), rgba(255,107,157,0.2));
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(108,92,231,0.3);
}

.tts-btn.tts-loading {
    opacity: 0.7;
    animation: ttsPulse 1s ease infinite;
}

@keyframes ttsPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.tts-icon {
    font-size: 1.4rem;
}

.tts-speed {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(108,92,231,0.2);
    border-radius: 2px;
    outline: none;
}

.tts-speed::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}

.tts-speed::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    cursor: pointer;
}

.tts-speed-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    min-width: 28px;
}

/* TTS active paragraph highlight */
.story-body p.tts-active {
    background: rgba(108,92,231,0.1);
    border-left: 3px solid var(--primary);
    padding-left: 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* TTS glow effect for decision reading */
.tts-glow {
    animation: ttsGlow 0.8s ease-in-out infinite alternate;
}
.decision-btn.tts-glow {
    animation: ttsBtnGlow 0.6s ease-in-out infinite alternate;
    transform: scale(1.05);
}
@keyframes ttsGlow {
    from { text-shadow: 0 0 5px rgba(108,92,231,0.3); }
    to { text-shadow: 0 0 20px rgba(108,92,231,0.8), 0 0 40px rgba(108,92,231,0.4); }
}
@keyframes ttsBtnGlow {
    from {
        box-shadow: 0 0 8px rgba(108,92,231,0.3);
        transform: scale(1.02);
    }
    to {
        box-shadow: 0 0 25px rgba(108,92,231,0.7), 0 0 50px rgba(108,92,231,0.3);
        transform: scale(1.06);
    }
}

.story-dice-summary {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.story-dice-summary .mini-dice {
    width: 44px;
    height: 44px;
    background: var(--bg-card);
    border: 1px solid rgba(108, 92, 231, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.story-body {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    padding: 30px;
    margin-bottom: 24px;
    min-height: 200px;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text);
}

.story-body p {
    margin-bottom: 16px;
    text-indent: 1.5em;
    animation: paragraphFadeIn 0.6s ease backwards;
}

.story-body p:nth-child(1) { animation-delay: 0.1s; }
.story-body p:nth-child(2) { animation-delay: 0.3s; }
.story-body p:nth-child(3) { animation-delay: 0.5s; }
.story-body p:nth-child(4) { animation-delay: 0.7s; }
.story-body p:nth-child(5) { animation-delay: 0.9s; }
.story-body p:nth-child(6) { animation-delay: 1.1s; }

@keyframes paragraphFadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.story-body p:first-child {
    text-indent: 0;
}

.story-body p:first-child::first-letter {
    font-size: 2.5em;
    float: left;
    line-height: 1;
    margin-right: 8px;
    margin-top: 4px;
    color: var(--accent);
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
}

.story-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 16px;
}

.magic-wand {
    font-size: 3rem;
    animation: wandWave 1s ease-in-out infinite;
}

@keyframes wandWave {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

.loading-dots {
    display: flex;
    gap: 6px;
}

.loading-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-light);
    animation: dotPulse 1.2s ease-in-out infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.story-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ---- STORY ILLUSTRATIONS ---- */
.story-illustration {
    margin: 20px -10px;
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.illust-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.illust-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(108, 92, 231, 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.illust-img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    animation: illustReveal 0.8s ease;
}

.illust-loaded {
    animation: illustReveal 0.8s ease;
}

@keyframes illustReveal {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* ---- CHAPTER BADGE ---- */
.chapter-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    margin-right: 10px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

/* ---- STORY ENDING ---- */
.story-ending {
    text-align: center;
    padding: 30px 20px;
    margin-top: 20px;
    border-top: 2px solid rgba(254, 202, 87, 0.3);
    animation: endingReveal 0.8s ease;
}

@keyframes endingReveal {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.ending-mark {
    font-size: 2rem;
    font-family: 'Baloo 2', cursive;
    color: var(--accent);
    margin-bottom: 8px;
}

.ending-sub {
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 24px;
}

.ending-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
}

/* ---- VARÁZSIGE ---- */
.varazsige-section {
    background: linear-gradient(135deg, rgba(254,202,87,0.12), rgba(108,92,231,0.1));
    border: 1px solid rgba(254,202,87,0.3);
    border-radius: var(--radius);
    padding: 24px 20px;
    margin: 20px auto;
    max-width: 500px;
    animation: igeReveal 1s ease 0.3s both;
}

@keyframes igeReveal {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

.varazsige-sparkle {
    font-size: 1.5rem;
    line-height: 1;
}

.varazsige-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 8px;
    font-weight: 700;
}

.varazsige-text {
    font-size: 1.25rem;
    font-family: 'Baloo 2', cursive;
    color: var(--text);
    font-style: italic;
    line-height: 1.5;
    margin: 8px 0;
}

/* ---- ADVENTURE MAP ---- */
.adventure-map {
    margin: 28px 0;
    text-align: left;
    animation: endingReveal 0.8s ease 0.5s both;
}

.adventure-map-title {
    text-align: center;
    color: var(--accent);
    font-family: 'Baloo 2', cursive;
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.adventure-path {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-left: 8px;
}

.path-node {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
}

.path-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(108,92,231,0.2);
    border: 2px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.path-start .path-icon {
    background: rgba(46,213,115,0.2);
    border-color: var(--success);
}

.path-end .path-icon {
    background: rgba(254,202,87,0.2);
    border-color: var(--accent);
}

.path-label {
    padding-top: 7px;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
}

.path-connector {
    width: 2px;
    height: 20px;
    background: linear-gradient(to bottom, var(--primary), rgba(108,92,231,0.3));
    margin-left: 17px;
}

.path-details {
    padding-top: 4px;
}

.path-question {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.path-chosen {
    font-size: 0.95rem;
    color: var(--primary-light);
    font-weight: 600;
}

/* ---- FAVORITE SCENE ---- */
.favorite-scene {
    margin: 28px 0;
    text-align: center;
    animation: endingReveal 0.8s ease 0.7s both;
}

.favorite-scene-title {
    color: var(--accent);
    font-family: 'Baloo 2', cursive;
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.scene-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
}

.scene-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(108,92,231,0.08);
    border: 1px solid rgba(108,92,231,0.15);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

.scene-card:hover {
    background: rgba(108,92,231,0.15);
    border-color: var(--primary);
    color: var(--text);
}

.scene-card.scene-selected {
    background: rgba(108,92,231,0.2);
    border-color: var(--primary);
    color: var(--text);
    box-shadow: 0 0 12px rgba(108,92,231,0.3);
}

.scene-num {
    font-weight: 700;
    color: var(--primary-light);
    flex-shrink: 0;
    min-width: 20px;
}

.scene-preview {
    flex: 1;
}

.favorite-scene-result {
    margin-top: 10px;
    color: var(--accent);
    font-weight: 600;
}

/* ---- STORY RATING ---- */
.story-rating {
    margin: 24px 0 8px;
    animation: endingReveal 0.8s ease 0.9s both;
}

.rating-question {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.rating-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.rating-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    background: rgba(108,92,231,0.08);
    border: 2px solid rgba(108,92,231,0.15);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.25s;
}

.rating-btn:hover {
    background: rgba(108,92,231,0.15);
    border-color: var(--primary);
    transform: translateY(-3px);
}

.rating-btn.rating-selected {
    background: rgba(108,92,231,0.25);
    border-color: var(--accent);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 4px 20px rgba(254,202,87,0.3);
}

.rating-emoji {
    font-size: 2rem;
}

.rating-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.rating-btn.rating-selected .rating-label {
    color: var(--accent);
}

.rating-thanks {
    margin-top: 12px;
    color: var(--accent);
    font-weight: 600;
    animation: igeReveal 0.5s ease;
}

/* ---- IMAGE PLACEHOLDERS ---- */
.story-illustration {
    margin: 16px 0;
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.4s ease;
}

.illust-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    border: 2px dashed rgba(108,92,231,0.2);
    border-radius: var(--radius);
    background: rgba(108,92,231,0.04);
}

.illust-placeholder-icon {
    font-size: 1.3rem;
    opacity: 0.5;
}

.illust-placeholder-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.5;
    font-style: italic;
}

.illust-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    border: 2px dashed rgba(108,92,231,0.2);
    border-radius: var(--radius);
    background: rgba(108,92,231,0.04);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.illust-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(108,92,231,0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.illust-failed {
    opacity: 0.4;
}

.illust-loaded .illust-placeholder,
.illust-loaded .illust-loading {
    display: none;
}

.illust-img {
    width: 100%;
    border-radius: var(--radius);
    display: block;
    animation: imgReveal 0.5s ease;
}

@keyframes imgReveal {
    0% { opacity: 0; transform: scale(0.97); }
    100% { opacity: 1; transform: scale(1); }
}

/* ---- DECISION POINT ---- */
.decision-point {
    background: linear-gradient(135deg, rgba(108,92,231,0.15), rgba(255,107,157,0.1));
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    padding: 24px;
    margin: 20px 0;
    text-align: center;
}

.decision-point h3 {
    color: var(--accent);
    margin-bottom: 16px;
    font-size: 1.2rem;
}

.decision-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.decision-btn {
    background: var(--bg-dark);
    border: 2px solid var(--primary);
    color: var(--text);
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Quicksand', sans-serif;
    cursor: pointer;
    transition: all 0.3s;
}

.decision-btn:hover {
    background: rgba(108, 92, 231, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
}

/* ---- LANDING EXTRA (below hero) ---- */
.landing-extra {
    background: linear-gradient(180deg, #0F3460 0%, #1A1A2E 30%, #16213E 100%);
    padding: 0 20px 40px;
}

.landing-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.landing-section:last-child { border-bottom: none; }

.landing-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
    color: var(--text);
}

/* How it works */
.how-it-works {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.step-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    flex: 1;
    min-width: 200px;
    max-width: 240px;
    position: relative;
}

.step-number {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    background: var(--primary);
    border-radius: 50%;
    color: white;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.step-card h3 {
    color: var(--accent);
    margin-bottom: 8px;
}

.step-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Testimonials */
.testimonials {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.testimonial-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    padding: 24px;
    flex: 1;
    min-width: 220px;
    max-width: 260px;
}

.testimonial-stars {
    color: var(--accent);
    font-size: 1rem;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.testimonial-card p {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 12px;
}

.testimonial-author {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

/* FAQ */
.faq-list {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.faq-item summary {
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-item summary::after {
    content: '+';
    font-size: 1.3rem;
    color: var(--primary-light);
    transition: transform 0.2s;
}

.faq-item[open] summary::after {
    content: '−';
}

.faq-item p {
    padding: 0 20px 16px;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Email signup */
.email-signup {
    text-align: center;
    background: linear-gradient(135deg, rgba(108,92,231,0.12), rgba(255,107,157,0.08));
    border: 2px solid rgba(108, 92, 231, 0.2);
    border-radius: var(--radius);
    padding: 40px 24px;
}

.email-signup h2 {
    margin-bottom: 8px;
}

.email-signup > p {
    color: var(--text-muted);
    margin-bottom: 20px;
}

.email-form {
    display: flex;
    gap: 10px;
    max-width: 420px;
    margin: 0 auto;
}

.email-form .input-magic {
    flex: 1;
}

.email-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 10px;
    opacity: 0.7;
}

/* Footer */
.landing-footer {
    text-align: center;
    padding: 30px 0 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.footer-links {
    margin-top: 8px;
}

.footer-links a {
    color: var(--primary-light);
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* ---- LIBRARY (Mesetár) ---- */
#library {
    background: linear-gradient(180deg, #1A1A2E 0%, #16213E 100%);
    justify-content: flex-start;
    padding-top: 70px;
}

.library-content {
    max-width: 640px;
    width: 100%;
}

.library-content h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 6px;
}

.library-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.saved-stories-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.empty-library {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 12px;
}

.empty-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.saved-story-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    padding: 18px;
    transition: all 0.2s;
}

.saved-story-card:hover {
    border-color: rgba(108, 92, 231, 0.3);
}

.saved-story-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.saved-theme-icon {
    font-size: 1.8rem;
}

.saved-story-meta h4 {
    color: var(--accent);
    font-size: 1rem;
    line-height: 1.2;
}

.saved-date {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.saved-preview {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 8px;
}

.saved-items {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.mini-tag {
    font-size: 1.1rem;
}

.saved-story-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.star-rating {
    display: flex;
    gap: 2px;
}

.star {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.15);
    cursor: pointer;
    transition: color 0.2s;
}

.star:hover, .star-filled {
    color: var(--accent);
}

.saved-actions {
    display: flex;
    gap: 4px;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 0.8rem;
}

.btn-danger {
    color: var(--secondary) !important;
}

.btn-danger:hover {
    background: rgba(255,107,157,0.15) !important;
}

/* ---- PROFILES ---- */
.profiles-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.profile-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-dark);
    border: 2px solid rgba(108, 92, 231, 0.2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s;
    min-width: 140px;
}

.profile-card:hover {
    border-color: var(--primary);
    background: rgba(108, 92, 231, 0.1);
}

.profile-avatar {
    font-size: 1.5rem;
}

.profile-info h4 {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.2;
}

.profile-info span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ---- TOAST ---- */
.toast {
    position: fixed;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--primary);
    color: var(--text);
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 2000;
    transition: bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

.toast-show {
    bottom: 30px;
}

/* ---- FUN FACTS (loading) ---- */
.fun-fact {
    margin-top: 16px;
    padding: 14px 18px;
    background: rgba(108, 92, 231, 0.1);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
    max-width: 340px;
    animation: funFactFadeIn 0.6s ease 1s backwards;
}

.fun-fact-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 4px;
}

.fun-fact p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    font-style: italic;
}

@keyframes funFactFadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ---- HERO NAV ---- */
.hero-nav {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---- FREE COUNTER BADGE ---- */
.free-counter-badge {
    position: fixed;
    top: 16px;
    right: 16px;
    background: var(--bg-card);
    border: 1px solid rgba(108, 92, 231, 0.3);
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    z-index: 100;
    cursor: pointer;
    transition: all 0.3s;
}

.free-counter-badge:hover {
    border-color: var(--primary);
    color: var(--text);
}

.free-counter-badge.warning {
    border-color: var(--secondary);
    color: var(--secondary);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 157, 0.4); }
    50% { box-shadow: 0 0 12px 4px rgba(255, 107, 157, 0.2); }
}

/* ---- PRICING ---- */
#pricing {
    background: linear-gradient(180deg, #1A1A2E 0%, #16213E 100%);
    justify-content: flex-start;
    padding-top: 70px;
}

.pricing-content {
    max-width: 900px;
    width: 100%;
    text-align: center;
}

.pricing-content h2 {
    font-size: 2.2rem;
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--accent), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pricing-subtitle {
    color: var(--text-muted);
    margin-bottom: 36px;
    font-size: 1.1rem;
}

.pricing-cards {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: stretch;
}

.pricing-card {
    background: var(--bg-card);
    border: 2px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    padding: 30px 24px;
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    transition: all 0.3s;
}

.pricing-card:hover {
    transform: translateY(-4px);
    border-color: rgba(108, 92, 231, 0.3);
}

.pricing-popular {
    border-color: var(--primary);
    box-shadow: 0 0 30px rgba(108, 92, 231, 0.2);
    transform: scale(1.05);
}

.pricing-popular:hover {
    transform: scale(1.05) translateY(-4px);
}

.pricing-popular-badge {
    position: absolute;
    top: -12px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 50px;
    letter-spacing: 0.5px;
}

.pricing-badge {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.pricing-badge.badge-pro {
    color: var(--primary-light);
}

.pricing-badge.badge-family {
    color: var(--accent);
}

.pricing-price {
    font-size: 2.2rem;
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.pricing-period {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.pricing-features {
    list-style: none;
    text-align: left;
    width: 100%;
    margin-bottom: 20px;
    flex: 1;
}

.pricing-features li {
    padding: 6px 0;
    font-size: 0.9rem;
    color: var(--text);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.pricing-features li::before {
    content: '✓ ';
    color: var(--success);
    font-weight: 700;
}

.pricing-features li.feature-disabled {
    color: var(--text-muted);
    opacity: 0.5;
}

.pricing-features li.feature-disabled::before {
    content: '— ';
    color: var(--text-muted);
}

/* ---- SHOP ---- */
#shop {
    background: linear-gradient(180deg, #1A1A2E 0%, #16213E 100%);
    justify-content: flex-start;
    padding-top: 70px;
    padding-bottom: 120px;
}

.shop-content {
    max-width: 680px;
    width: 100%;
}

.shop-content h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 6px;
    background: linear-gradient(135deg, var(--accent), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shop-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* Wizard Progress Bar */
.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
    padding: 0 10px;
}

.wiz-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    cursor: default;
}

.wiz-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--bg-card);
    border: 2px solid rgba(108, 92, 231, 0.2);
    color: var(--text-muted);
    transition: all 0.3s;
}

.wiz-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    transition: color 0.3s;
}

.wiz-step.active .wiz-num {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 0 16px rgba(108, 92, 231, 0.4);
}

.wiz-step.active .wiz-label {
    color: var(--accent);
}

.wiz-step.done .wiz-num {
    background: rgba(108, 92, 231, 0.3);
    border-color: var(--primary);
    color: #fff;
}

.wiz-step.done .wiz-num::after {
    content: '\2713';
    position: absolute;
    font-size: 1rem;
}

.wiz-step.done .wiz-num span { visibility: hidden; }

.wiz-line {
    flex: 1;
    height: 2px;
    background: rgba(108, 92, 231, 0.15);
    margin: 0 8px;
    margin-bottom: 18px;
}

/* Wizard Panels */
.wiz-panel {
    display: none;
    flex-direction: column;
    gap: 16px;
    animation: fadeSlideUp 0.35s ease;
}

.wiz-panel.active {
    display: flex;
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Config Sections */
.config-section {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    padding: 20px;
}

.section-title {
    font-size: 1.1rem;
    margin-bottom: 14px;
    color: var(--text);
}

/* Dice Quantity */
.dice-qty-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dice-qty-btn {
    flex: 1;
    min-width: 70px;
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(108, 92, 231, 0.2);
    background: var(--bg-dark);
    color: var(--text-muted);
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.dice-qty-btn:hover { border-color: var(--primary); color: var(--text); }
.dice-qty-btn.selected {
    border-color: var(--primary);
    background: rgba(108, 92, 231, 0.15);
    color: var(--accent);
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.2);
}

/* Material Selector */
.material-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.material-btn {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px;
    border-radius: var(--radius);
    border: 2px solid rgba(108, 92, 231, 0.15);
    background: var(--bg-dark);
    cursor: pointer;
    transition: all 0.3s;
}

.material-btn:hover { border-color: var(--primary); }

.material-btn.selected {
    border-color: var(--primary);
    background: rgba(108, 92, 231, 0.1);
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.15);
}

.material-swatch {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.1);
}

.swatch-bukk { background: linear-gradient(135deg, #8B6914, #C4A24C); }
.swatch-festett { background: linear-gradient(135deg, #6C5CE7, #A855F7); }
.swatch-fenyo { background: linear-gradient(135deg, #8B7355, #C4A882); }

.material-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text);
}

.material-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Trust Badges */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.trust-badge {
    flex: 1;
    min-width: 130px;
    padding: 10px 12px;
    background: rgba(108, 92, 231, 0.06);
    border: 1px solid rgba(108, 92, 231, 0.12);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-muted);
}

/* Step 2: Dice Tabs */
.dice-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.dice-tab {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(108, 92, 231, 0.15);
    background: var(--bg-dark);
    color: var(--text-muted);
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.dice-tab:hover { border-color: var(--primary); }

.dice-tab.active {
    border-color: var(--primary);
    background: rgba(108, 92, 231, 0.15);
    color: var(--accent);
}

.dice-tab-count {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Dice Editor Layout */
.dice-editor-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.dice-3d-preview-area {
    flex: 0 0 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 140px;
}

.face-slots-area {
    flex: 1;
}

/* 3D Dice Preview in Shop */
.shop-3d-wrapper {
    width: 100px;
    height: 100px;
    perspective: 300px;
}

.shop-dice-cube {
    width: 70px;
    height: 70px;
    position: relative;
    transform-style: preserve-3d;
    margin: 15px auto;
    animation: shopDiceSpin 8s linear infinite;
}

@keyframes shopDiceSpin {
    0% { transform: rotateX(-15deg) rotateY(0deg); }
    25% { transform: rotateX(20deg) rotateY(90deg); }
    50% { transform: rotateX(-25deg) rotateY(180deg); }
    75% { transform: rotateX(15deg) rotateY(270deg); }
    100% { transform: rotateX(-15deg) rotateY(360deg); }
}

.shop-3d-wrapper:hover .shop-dice-cube {
    animation-play-state: paused;
}

.shop-dice-face {
    position: absolute;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    border-radius: 8px;
    border: 2px solid;
    backface-visibility: visible;
    color: #fff;
}

/* Face Slots Grid */
.face-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.face-slot {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: var(--radius-sm);
    border: 2px dashed rgba(108, 92, 231, 0.25);
    background: var(--bg-dark);
    cursor: pointer;
    transition: all 0.3s;
    padding: 6px;
    min-height: 68px;
}

.face-slot:hover {
    border-color: var(--primary);
    background: rgba(108, 92, 231, 0.08);
    transform: scale(1.04);
}

.face-slot.filled {
    border-style: solid;
    border-color: rgba(108, 92, 231, 0.35);
    background: rgba(108, 92, 231, 0.08);
}

.face-slot-emoji { font-size: 1.6rem; }
.face-slot-label { font-size: 0.65rem; color: var(--text-muted); text-align: center; line-height: 1.1; }
.face-slot-empty { font-size: 1.4rem; color: rgba(108, 92, 231, 0.35); font-weight: 300; }
.face-slot-hint { font-size: 0.65rem; color: var(--text-muted); opacity: 0.6; }
.face-slot-img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

/* Quick Actions */
.dice-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-sm {
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
}

/* Step 3: Extras */
.shop-extra-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 600;
    font-size: 0.95rem;
}

.shop-extra-check:hover {
    background: rgba(255,255,255,0.03);
}

.shop-extra-check input {
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
}

.engrave-area, .gift-area {
    padding: 12px;
    animation: fadeSlideUp 0.3s ease;
}

.char-counter {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    text-align: right;
    margin-top: 4px;
}

/* Step 4: Order Summary */
.summary-line {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.summary-dice-row {
    padding: 4px 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.summary-section {
    padding: 8px 0;
}

.summary-extra {
    padding: 3px 0 3px 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.summary-divider {
    height: 1px;
    background: rgba(108, 92, 231, 0.2);
    margin: 10px 0;
}

.delivery-estimate {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 10px;
}

/* Order Form Grid */
.order-form-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-form-row {
    display: flex;
    gap: 10px;
}

.order-form-row input:first-child { flex: 0 0 120px; }
.order-form-row input:last-child { flex: 1; }

/* Wizard Navigation */
.wizard-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(26, 26, 46, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(108, 92, 231, 0.2);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
}

.shop-live-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 600;
}

.shop-price-value {
    font-size: 1.5rem;
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    color: var(--accent);
    transition: color 0.3s;
}

.wizard-buttons {
    display: flex;
    gap: 8px;
}

/* Face Picker Modal */
.face-picker-card {
    max-width: 520px;
    width: 95%;
    max-height: 80vh;
    overflow-y: auto;
}

.picker-theme-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.picker-tab {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(108, 92, 231, 0.2);
    background: var(--bg-dark);
    color: var(--text-muted);
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s;
}

.picker-tab:hover { border-color: var(--primary); }

.picker-tab.active {
    border-color: var(--primary);
    background: rgba(108, 92, 231, 0.15);
    color: var(--accent);
}

.picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 4px;
}

.picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.06);
    background: var(--bg-dark);
    cursor: pointer;
    transition: all 0.2s;
}

.picker-item:hover {
    border-color: var(--primary);
    background: rgba(108, 92, 231, 0.12);
    transform: scale(1.06);
}

.picker-emoji { font-size: 1.8rem; }
.picker-label { font-size: 0.65rem; color: var(--text-muted); text-align: center; line-height: 1.1; }

.picker-upload {
    padding: 20px;
}

.upload-area {
    border: 2px dashed rgba(108, 92, 231, 0.3);
    border-radius: var(--radius-sm);
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.upload-area:hover {
    border-color: var(--primary);
    background: rgba(108, 92, 231, 0.05);
}

.upload-icon { font-size: 2rem; }

/* Shop Confirm */
#shop-confirm {
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.confirm-content {
    text-align: center;
    max-width: 500px;
}

.confirm-icon {
    font-size: 4rem;
    margin-bottom: 12px;
    animation: confirmBounce 0.6s ease;
}

@keyframes confirmBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.confirm-order-id {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.confirm-summary {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
    text-align: left;
}

.confirm-total {
    color: var(--accent);
    font-weight: 800;
    font-size: 1.1rem;
}

.confirm-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Confetti */
.confetti-piece {
    position: absolute;
    top: -40px;
    font-size: 1.5rem;
    pointer-events: none;
    animation: confettiFall 3s ease-in forwards;
    z-index: 10;
}

@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Mobile responsive for shop */
@media (max-width: 600px) {
    .dice-editor-layout {
        flex-direction: column;
        align-items: center;
    }
    .dice-3d-preview-area {
        flex: none;
        width: 100%;
    }
    .face-slots {
        grid-template-columns: repeat(3, 1fr);
    }
    .material-selector {
        flex-direction: column;
    }
    .material-btn {
        flex-direction: row;
        min-width: 0;
        gap: 12px;
        padding: 12px 16px;
    }
    .wizard-nav {
        flex-direction: column;
        gap: 8px;
        padding: 10px 16px;
    }
    .order-form-row {
        flex-direction: column;
    }
    .order-form-row input:first-child { flex: 1; }
    .picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    }
}

/* ---- MODAL (Paywall) ---- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.3s ease;
}

.modal-overlay.hidden {
    display: none;
}

@keyframes modalFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.modal-card {
    background: var(--bg-card);
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    padding: 36px 30px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    position: relative;
    animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideIn {
    0% { opacity: 0; transform: scale(0.9) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover { color: var(--text); }

.modal-emoji {
    font-size: 3.5rem;
    margin-bottom: 12px;
}

.modal-card h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--accent);
}

.modal-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.6;
}

.modal-counter {
    margin-bottom: 24px;
}

.counter-bar {
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.counter-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), var(--primary), var(--secondary));
    border-radius: 4px;
    transition: width 0.5s ease;
}

.counter-text {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 600px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .tagline {
        font-size: 1.1rem;
    }
    .dice-wrapper {
        width: 70px;
        height: 70px;
    }
    .dice-face {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }
    .dice-face.front  { transform: rotateY(0deg) translateZ(35px); }
    .dice-face.back   { transform: rotateY(180deg) translateZ(35px); }
    .dice-face.right  { transform: rotateY(90deg) translateZ(35px); }
    .dice-face.left   { transform: rotateY(-90deg) translateZ(35px); }
    .dice-face.top    { transform: rotateX(90deg) translateZ(35px); }
    .dice-face.bottom { transform: rotateX(-90deg) translateZ(35px); }
    .dice-result-card {
        width: 70px;
        height: 70px;
        font-size: 2.2rem;
    }
    .dice-container {
        gap: 14px;
    }
    .story-body {
        padding: 20px;
        font-size: 1rem;
    }
    .btn-large {
        padding: 14px 32px;
        font-size: 1.1rem;
    }
    .setup-content h2, .rolling-content h2 {
        font-size: 1.6rem;
    }
    .theme-btn {
        min-width: calc(50% - 10px);
    }
    .how-it-works { flex-direction: column; align-items: center; }
    .step-card { max-width: 100%; }
    .testimonials { flex-direction: column; align-items: center; }
    .testimonial-card { max-width: 100%; }
    .email-form { flex-direction: column; }
    .pricing-cards { flex-direction: column; align-items: center; }
    .pricing-card { width: 100%; max-width: 320px; }
    .pricing-popular { transform: scale(1); }
    .pricing-popular:hover { transform: translateY(-4px); }
    .hero-nav { flex-direction: column; align-items: center; }
}