@import url('tokens.css?v=202606131600');
/* :root tokeny + univerzalni reset presunuty do tokens.css (DRY, sdileno celym webem) */

html {
    color-scheme: light only;
    scroll-behavior: smooth;
    height: 100%
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--surface-dark);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(212, 175, 55, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(45, 80, 22, 0.06) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(139, 107, 71, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: var(--space-4)
}

h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: var(--space-3)
}

h3 {
    font-size: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: var(--space-3)
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: all var(--transition-fast)
}

a:hover {
    color: var(--primary-dark);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5)
}

button, .btn {
    position: relative;
    padding: var(--space-3) var(--space-6);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(45, 80, 22, 0.1) 100%);
    color: var(--text-primary);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 9999px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    backdrop-filter: blur(10px);
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    display: inline-block
}

button::before, .btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.6s ease-out;
    border-radius: 50%
}

button:hover, .btn:hover {
    transform: translateY(-2px) scale(1.05);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(45, 80, 22, 0.2) 100%);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2), inset 0 0 20px rgba(212, 175, 55, 0.1)
}

button:hover::before, .btn:hover::before {
    width: 300px;
    height: 300px
}

button:active, .btn:active {
    transform: translateY(0) scale(0.98)
}

button:disabled, .btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none
}

button:disabled:hover, .btn:disabled:hover {
    transform: none;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(45, 80, 22, 0.1) 100%);
    border-color: rgba(212, 175, 55, 0.2);
    box-shadow: none
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    position: relative;
    z-index: 10
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary) 0%, #F5E6D3 50%, var(--primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.glass-card {
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 100px rgba(212, 175, 55, 0.1), inset 0 0 60px rgba(45, 80, 22, 0.05);
    transition: all var(--transition-base)
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 120px rgba(212, 175, 55, 0.15), inset 0 0 80px rgba(45, 80, 22, 0.07)
}

.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(45, 80, 22, 0.2) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em
}

.badge-new {
    background: linear-gradient(135deg, var(--success) 0%, #4CAF50 100%);
    border-color: var(--success);
    color: #fff
}

.badge-hot {
    background: linear-gradient(135deg, var(--danger) 0%, #DC2626 100%);
    border-color: var(--danger);
    color: #fff;
    animation: pulse 2s ease-in-out infinite
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9
    }
}

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

@keyframes shimmer {
    0% {
        background-position: -200% 0
    }
    100% {
        background-position: 200% 0
    }
}

.loading {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-lg)
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: var(--radius-lg)
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary-dark) 0%, var(--secondary) 100%)
}

.hero{min-height:clamp(240px,38vh,420px);display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-6) 0;position:relative}.hero::before{content:'';position:absolute;top:50%;left:50%;width:500px;height:500px;background:radial-gradient(circle,rgba(212,175,55,0.1) 0%,transparent 70%);transform:translate(-50%,-50%);animation:pulse 4s ease-in-out infinite}.hero-content{position:relative;z-index:2;max-width:900px}.hero h1{font-size:clamp(1.7rem,4.5vw,2.9rem);font-weight:900;margin-bottom:var(--space-3);letter-spacing:-0.02em;line-height:1.15}.hero-subtitle{font-size:clamp(0.95rem,1.8vw,1.1rem);color:var(--text-secondary);margin:0 auto var(--space-4);max-width:600px;line-height:1.5}.hero-cta{display:inline-flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);border-color:var(--primary);color:var(--surface-dark);font-size:1.1rem;padding:var(--space-4) var(--space-8);box-shadow:0 10px 30px rgba(212,175,55,0.3)}.btn-primary:hover{background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);box-shadow:0 15px 40px rgba(212,175,55,0.4),0 0 60px rgba(212,175,55,0.2)}.btn-secondary{font-size:1.1rem;padding:var(--space-4) var(--space-8)}.stats-bar{display:flex;justify-content:center;gap:var(--space-4);margin-top:var(--space-4);flex-wrap:wrap}.stat-item{text-align:center}.stat-number{font-size:1.6rem;font-weight:900;color:var(--primary);display:block;line-height:1.1}.stat-label{font-size:0.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em}.games-section{padding:var(--space-6) 0 var(--space-8)}.section-header{text-align:center;margin-bottom:var(--space-6)}.section-title{font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:var(--space-3)}.section-subtitle{font-size:1.1rem;color:var(--text-secondary);max-width:600px;margin:0 auto}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-6);margin-bottom:var(--space-8)}.game-card{position:relative;overflow:hidden;border-radius:var(--radius-xl);transition:all var(--transition-base);cursor:pointer;background:rgba(15,23,42,0.9);backdrop-filter:blur(20px);border:1px solid rgba(212,175,55,0.2);box-shadow:0 10px 40px rgba(0,0,0,0.4)}.game-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 80px rgba(212,175,55,0.15);border-color:var(--primary)}.game-card:hover .game-thumbnail::after{opacity:1}.game-card:hover .play-overlay{opacity:1;transform:translate(-50%,-50%) scale(1)}.game-thumbnail{position:relative;width:100%;height:200px;background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%);overflow:hidden}.game-thumbnail::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(212,175,55,0.3) 0%,transparent 100%);opacity:0;transition:opacity var(--transition-base)}.game-thumbnail img{width:100%;height:100%;object-fit:cover}.chess-preview{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(135deg,#2D5016 0%,#1a2f0d 100%);position:relative}.chess-board-mini{position:relative;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:140px;height:140px;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.5);transform:rotate(-5deg)}.mini-square{background:#E8D5B5}.mini-square.dark{background:#8B6B47}.chess-mini-piece{position:absolute;width:12.5%;height:12.5%;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,0.55));pointer-events:none}.chess-mini-piece svg{display:block;width:100%;height:100%}.chess-mini-piece.hop{z-index:2;animation:chessHop 3.4s ease-in-out infinite}@keyframes chessHop{0%,34%{transform:translate(0,0)}53%{transform:translate(0,-200%)}66%,86%{transform:translate(-100%,-200%)}100%{transform:translate(0,0)}}@media(prefers-reduced-motion:reduce){.chess-mini-piece.hop{animation:none}}
/* externí karta Flaf — fialový gradient po vzoru projektu FLAF (flaf.cz) */
.game-card--flaf{background:linear-gradient(135deg,#483D8B 0%,#6B5B95 100%);border-color:rgba(127,255,212,0.45)}
.game-card--flaf:hover{box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 80px rgba(107,91,149,0.55);border-color:#7FFFD4}
.game-thumbnail--flaf{background:linear-gradient(135deg,#3a3170 0%,#6B5B95 100%)}
.game-thumbnail--flaf img{object-fit:contain;padding:10px}
.game-card--flaf .game-title{color:#fff}
.game-card--flaf .game-description{color:#E6E6FA}
.game-external{display:inline-flex;align-items:center;gap:0.35rem;font-size:0.85rem;font-weight:700;color:#7FFFD4;letter-spacing:0.02em}
/* === HOUSENKA - náhled karty na homepage (sladěno s novým designem hry: tmavá deska s mřížkou, zelená hlava s očima, zlatý drahokam) === */
.snake-preview{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0 19px,rgba(212,175,55,0.06) 19px 20px),repeating-linear-gradient(90deg,transparent 0 19px,rgba(212,175,55,0.06) 19px 20px),radial-gradient(circle at 50% 42%,rgba(212,175,55,0.12) 0%,transparent 60%),#0A0F1D}
.snake-mini{display:flex;gap:4px;transform:translateY(10px);animation:snakeWiggle 2s ease-in-out infinite}
.snake-head,
.snake-segment{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,#7CB342 0%,#558B2F 100%);box-shadow:0 2px 8px rgba(124,179,66,0.45)}
.snake-head{position:relative;background:linear-gradient(135deg,#AED581 0%,#7CB342 100%);box-shadow:0 2px 12px rgba(124,179,66,0.65)}
.snake-head::before,.snake-head::after{content:'';position:absolute;right:3px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 50% 45%,#0A0F1D 0 1.6px,#F8FAFC 1.8px 100%)}
.snake-head::before{top:3px}
.snake-head::after{bottom:3px}
.diamond-mini{position:absolute;top:18%;right:18%;width:18px;height:18px;background:linear-gradient(135deg,#F5E6A8 0%,#D4AF37 50%,#B8941F 100%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation:diamondPulse 1.5s ease-in-out infinite;filter:drop-shadow(0 0 7px rgba(212,175,55,0.75))}
.diamond-mini::before{content:'';position:absolute;inset:0;clip-path:polygon(50% 4%,72% 44%,50% 52%,28% 44%);background:rgba(255,255,255,0.5)}
@keyframes snakeWiggle{0%,100%{transform:translateY(10px)}50%{transform:translateY(5px)}}
@keyframes diamondPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:0.75}}
.bubbles-preview{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(180deg,#000d15 0%,#001525 15%,#001a2c 30%,#002a45 60%,#003654 100%);position:relative;overflow:hidden}
.bubbles-preview::before{content:'';position:absolute;bottom:0;left:0;right:0;height:6px;background:linear-gradient(180deg,#cfb98f 0%,#dbc9a8 50%,#e8d9bc 100%)}
.bubbles-preview::after{content:'';position:absolute;top:0;left:20%;width:25%;height:100%;background:linear-gradient(180deg,rgba(120,200,255,0.08) 0%,rgba(120,200,255,0.03) 50%,transparent 100%);transform:skewX(-5deg)}
.bubbles-preview .light-ray{position:absolute;top:0;width:20%;height:100%;background:linear-gradient(180deg,rgba(100,185,245,0.06) 0%,rgba(100,185,245,0.02) 60%,transparent 100%)}
.bubbles-preview .light-ray:nth-child(1){left:60%;transform:skewX(3deg)}
.bubble-cluster{position:relative;display:flex;flex-direction:column;gap:2px;animation:bubbleRise 3s ease-in-out infinite;z-index:2}
.bubble-row{display:flex;gap:2px;justify-content:flex-start}
.bubble-svg{width:24px;height:24px}
.shell-svg{position:absolute;bottom:8px;width:38px;height:20px;z-index:3}
.shell-svg:nth-child(2){left:12%}
.shell-svg:nth-child(3){left:50%;transform:translateX(-50%)}
.shell-svg:nth-child(4){right:12%}
.seaweed{position:absolute;bottom:6px;width:3px;background:linear-gradient(0deg,rgba(15,45,30,0.6) 0%,rgba(12,40,28,0.3) 70%,transparent 100%);border-radius:2px 2px 0 0;animation:seaweedSway 3s ease-in-out infinite;z-index:1}
.seaweed:nth-child(5){left:8%;height:60px;animation-delay:-0.3s}
.seaweed:nth-child(6){left:15%;height:45px;animation-delay:-1.2s}
.seaweed:nth-child(7){right:12%;height:55px;animation-delay:-0.8s}
.seaweed:nth-child(8){right:6%;height:40px;animation-delay:-1.5s}
.plankton{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(50,180,70,0.25);z-index:1}
.plankton:nth-child(9){top:20%;left:25%}
.plankton:nth-child(10){top:40%;right:30%}
.plankton:nth-child(11){top:65%;left:70%}
@keyframes bubbleRise{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes seaweedSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.8);width:60px;height:60px;background:rgba(212,175,55,0.95);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:all var(--transition-base);box-shadow:0 10px 30px rgba(212,175,55,0.5)}.play-icon{width:0;height:0;border-left:20px solid var(--surface-dark);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}.game-info{padding:var(--space-4)}.game-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:var(--space-2)}.game-title{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin:0}.game-badges{display:flex;gap:var(--space-1)}.game-description{color:var(--text-secondary);font-size:0.875rem;line-height:1.5;margin-bottom:var(--space-3)}.game-stats{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-3);border-top:1px solid rgba(212,175,55,0.1);font-size:0.75rem;color:var(--text-muted)}.game-rating{display:flex;align-items:center;gap:var(--space-1)}.star{color:var(--primary)}.features-section{padding:var(--space-8) 0;background:radial-gradient(ellipse at center,rgba(212,175,55,0.03) 0%,transparent 70%)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-6)}.feature-card{text-align:center;padding:var(--space-6);background:rgba(15,23,42,0.6);backdrop-filter:blur(10px);border:1px solid rgba(212,175,55,0.1);border-radius:var(--radius-xl);transition:all var(--transition-base)}.feature-card:hover{transform:translateY(-5px);background:rgba(15,23,42,0.8);border-color:rgba(212,175,55,0.3);box-shadow:0 20px 40px rgba(0,0,0,0.3)}.feature-icon{width:60px;height:60px;margin:0 auto var(--space-4);background:linear-gradient(135deg,rgba(212,175,55,0.2) 0%,rgba(45,80,22,0.2) 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.75rem}.feature-title{font-size:1.1rem;font-weight:600;margin-bottom:var(--space-2);color:var(--primary)}.feature-description{font-size:0.875rem;color:var(--text-secondary);line-height:1.5}.trust-section{padding:var(--space-6) 0;text-align:center;border-top:1px solid rgba(212,175,55,0.1)}.trust-badges{display:flex;justify-content:center;gap:var(--space-6);flex-wrap:wrap;margin-top:var(--space-4)}.trust-badge{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:rgba(212,175,55,0.05);border:1px solid rgba(212,175,55,0.1);border-radius:9999px;font-size:0.875rem;color:var(--text-secondary)}.trust-badge svg{width:20px;height:20px;color:var(--primary)}.faq-section{padding:var(--space-8) 0}.faq-container{max-width:800px;margin:0 auto}.faq-item{background:rgba(15,23,42,0.6);backdrop-filter:blur(10px);border:1px solid rgba(212,175,55,0.1);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-3);transition:all var(--transition-base)}.faq-item:hover{border-color:rgba(212,175,55,0.3);background:rgba(15,23,42,0.8)}.faq-question{font-size:1.1rem;font-weight:600;color:var(--primary);margin-bottom:var(--space-2);cursor:pointer;display:flex;justify-content:space-between;align-items:center}.faq-answer{color:var(--text-secondary);line-height:1.6;font-size:0.9rem}.footer{padding:var(--space-6) 0 var(--space-4);text-align:center;color:var(--text-muted);font-size:0.875rem;border-top:1px solid rgba(212,175,55,0.1);margin-top:var(--space-8)}.footer-links{display:flex;justify-content:center;gap:var(--space-4);margin-bottom:var(--space-3);flex-wrap:wrap}.footer-links a{color:var(--text-secondary);transition:color var(--transition-fast)}.footer-links a:hover{color:var(--primary)}@media(max-width:768px){.hero{min-height:auto}.games-grid{grid-template-columns:1fr}.features-grid{grid-template-columns:1fr;gap:var(--space-4)}.stats-bar{gap:var(--space-4)}.trust-badges{gap:var(--space-3)}}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--space-3)
    }

    h1 {
        font-size: 2rem
    }

    h2 {
        font-size: 1.5rem
    }

    h3 {
        font-size: 1.25rem
    }

    .glass-card {
        padding: var(--space-4)
    }
}

@media (max-width: 480px) {
    body {
        padding: var(--space-2)
    }

    .container {
        padding: 0 var(--space-2)
    }

    .glass-card {
        padding: var(--space-3);
        border-radius: var(--radius-lg)
    }
}

/* === PWA INSTALL BUTTON (App Store style) === */
.pwa-install-row{display:flex;justify-content:center;margin:var(--space-3) 0 var(--space-3);}
.pwa-appstore-btn{display:inline-flex;align-items:center;background:#000;border:1px solid #a6a6a6;border-radius:7px;padding:6px 16px 6px 8px;text-decoration:none !important;color:#fff !important;transition:background 0.2s,border-color 0.2s,transform 0.2s;cursor:pointer;}
.pwa-appstore-btn:hover,.pwa-appstore-btn:focus{background:#222;border-color:#ccc;text-decoration:none !important;color:#fff !important;transform:translateY(-1px);}
.pwa-appstore-btn svg{flex-shrink:0;margin-right:6px;}
.pwa-appstore-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding-top:1px;line-height:1;}
.pwa-appstore-small{color:#fff;font-size:8px;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:-1px;}
.pwa-appstore-big{color:#fff;font-size:16px;font-weight:500;line-height:1.2;}

/* === PWA INSTALL MODAL (iOS instructions) === */
.pwa-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;transition:opacity 0.25s ease-out;padding:1rem;}
.pwa-modal-overlay.visible{opacity:1;}
.pwa-modal-content{background:#0F172A;border:1px solid rgba(212,175,55,0.3);border-radius:14px;max-width:420px;width:100%;padding:1.5rem;box-shadow:0 20px 60px rgba(0,0,0,0.5);color:#fff;font-family:'Montserrat',sans-serif;}
.pwa-modal-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;}
.pwa-modal-icon{font-size:1.8rem;}
.pwa-modal-title{font-size:1.15rem;font-weight:600;color:#D4AF37;margin:0;}
.pwa-modal-body{font-size:0.92rem;line-height:1.5;color:#e2e8f0;margin-bottom:1.25rem;}
.pwa-modal-body ol{margin:0.5rem 0;padding-left:1.25rem;}
.pwa-modal-body li{margin-bottom:0.35rem;}
.pwa-modal-body strong{color:#D4AF37;}
.pwa-modal-actions{display:flex;gap:0.5rem;justify-content:flex-end;}
.pwa-modal-btn{background:linear-gradient(135deg,#D4AF37 0%,#B8941F 100%);color:#0F172A;border:none;padding:0.55rem 1.25rem;border-radius:8px;cursor:pointer;font-weight:600;font-size:0.9rem;transition:transform 0.2s;font-family:inherit;}
.pwa-modal-btn:hover{transform:scale(1.04);}
/* === DÁMA - náhled karty na homepage === */
.dama-preview{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(135deg,#3E2A14 0%,#241708 100%);position:relative}
.dama-board-mini{position:relative;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:140px;height:140px;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.5);transform:rotate(-5deg)}
.dama-mini-piece{position:absolute;width:12.5%;height:12.5%;border-radius:50%;transform:scale(0.8);background:radial-gradient(circle at 35% 30%,#FFFDF4 0%,#E8D8B8 60%,#C6AE82 100%);box-shadow:inset 0 -2px 3px rgba(0,0,0,0.35),0 1px 3px rgba(0,0,0,0.45)}
.dama-mini-piece.b{background:radial-gradient(circle at 35% 30%,#5C6878 0%,#28303F 60%,#0E131C 100%)}
.dama-mini-piece.jump{animation:damaJump 3s ease-in-out infinite}
/* translate PŘED scale — jinak scale zkracuje dráhu a skok nedosedne na cílové pole */
@keyframes damaJump{0%,45%{transform:translate(0,0) scale(0.8)}60%{transform:translate(100%,-150%) scale(0.95)}72%,90%{transform:translate(200%,-200%) scale(0.8)}100%{transform:translate(0,0) scale(0.8)}}
/* === SUDOKU - náhled karty na homepage === */
.sudoku-preview{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(135deg,#0F172A 0%,#020617 100%);position:relative}
.sudoku-board-mini{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(3,1fr);width:150px;height:50px;padding:2px;gap:1px;border-radius:6px;background:rgba(212,175,55,0.35);box-shadow:0 10px 30px rgba(0,0,0,0.5);transform:rotate(-5deg) scale(2.2);transform-origin:center}
.sudoku-mini-cell{display:flex;align-items:center;justify-content:center;background:#0F172A;font-size:7px;font-weight:700;color:#F8FAFC;border-radius:1px}
.sudoku-mini-cell:nth-child(3n){box-shadow:1px 0 0 rgba(212,175,55,0.55)}
.sudoku-mini-cell.pulse{animation:sudokuPulse 3s ease-in-out infinite;color:#D4AF37}
@keyframes sudokuPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:0.65}}
/* === PEXESO - náhled karty na homepage === */
.pexeso-preview{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(135deg,#241640 0%,#0F0A1F 100%);position:relative}
.pexeso-mini{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:6px;width:172px;height:92px;transform:rotate(-5deg);filter:drop-shadow(0 10px 24px rgba(0,0,0,0.5))}
.pex-card{display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:22px;line-height:1}
.pex-card.down{position:relative;background:radial-gradient(circle at 50% 36%,rgba(212,175,55,0.22) 0%,transparent 58%),linear-gradient(150deg,#3A2A5E 0%,#190F2C 100%);border:1px solid rgba(212,175,55,0.25)}
.pex-card.down::after{content:"";width:42%;height:42%;border:2px solid rgba(212,175,55,0.5);border-radius:18%;transform:rotate(45deg)}
.pex-card.up{background:linear-gradient(160deg,#fff 0%,#F8FAFC 100%);border:1px solid rgba(212,175,55,0.3)}
.pex-card.pulse{animation:pexPulse 3s ease-in-out infinite}
@keyframes pexPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:0.82}}
@media(prefers-reduced-motion:reduce){.pex-card.pulse{animation:none}}
.g2048-preview{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(135deg,#1b2336 0%,#0c1322 100%)}
.g2048-mini{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:5px;width:148px;height:148px;padding:6px;border-radius:8px;background:rgba(212,175,55,0.16);transform:rotate(-5deg);box-shadow:0 10px 28px rgba(0,0,0,0.5)}
.g2048-cell{display:flex;align-items:center;justify-content:center;border-radius:5px;background:rgba(255,255,255,0.04);font-size:10px;font-weight:800;color:#2A2010}
.g2048-cell[data-v=""]{color:transparent}
.g2048-cell[data-v="2"],.g2048-cell[data-v="4"]{background:linear-gradient(150deg,#EFE7D6,#E5DBC4)}
.g2048-cell[data-v="8"],.g2048-cell[data-v="16"]{background:linear-gradient(150deg,#F6D69E,#F1C57E)}
.g2048-cell[data-v="32"],.g2048-cell[data-v="64"]{background:linear-gradient(150deg,#FBBA5E,#F7A53F)}
.g2048-cell[data-v="128"],.g2048-cell[data-v="256"]{background:linear-gradient(150deg,#F7CB4C,#F0BB1F)}
.g2048-cell[data-v="1024"]{background:linear-gradient(150deg,#F1D40D,#E9C800)}
.g2048-cell[data-v="2048"]{background:linear-gradient(150deg,#FFE14D,#F5C400);box-shadow:0 0 14px rgba(244,196,0,0.85)}
.g2048-cell.g2048-pulse{animation:g2048Pulse 3s ease-in-out infinite}
@keyframes g2048Pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.g2048-cell.g2048-pulse{animation:none}}
.piskvorky-preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.piskvorky-board-mini{display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:1px;width:148px;height:148px;background:rgba(212,175,55,0.18);border:2px solid rgba(212,175,55,0.45);border-radius:6px;transform:rotate(-5deg);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.pk-mini-cell{background:#131c2e;position:relative}
.pk-mini-mark{position:absolute;inset:16%}
.pk-mini-mark.x::before,.pk-mini-mark.x::after{content:"";position:absolute;top:50%;left:0;width:100%;height:18%;border-radius:2px;background:linear-gradient(135deg,#F7EAD2,#D4AF37);transform:translateY(-50%) rotate(45deg)}
.pk-mini-mark.x::after{transform:translateY(-50%) rotate(-45deg)}
.pk-mini-mark.o{inset:14%;border:2px solid #5BC8E8;border-radius:50%}
@keyframes pkMiniPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}
.pk-mini-mark.pulse{animation:pkMiniPulse 3s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.pk-mini-mark.pulse{animation:none}}
/* Lodě – statický mini náhled karty (bez smyčkové animace kvůli výkonu) */
.lode-preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lode-board-mini{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:2px;width:150px;height:150px;background:rgba(212,175,55,0.18);border:2px solid rgba(212,175,55,0.45);border-radius:6px;transform:rotate(-5deg);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.lode-mini-cell{background:linear-gradient(135deg,#173455,#0f2742);position:relative;border-radius:2px}
.lode-mini-cell.ship{background:linear-gradient(135deg,#F5C24A 0%,#E8A03A 52%,#C8821C 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),inset 0 2px 4px rgba(255,255,255,.28)}
.lode-mini-cell.miss::after{content:"";position:absolute;inset:6%;border-radius:50%;opacity:.5;background:radial-gradient(circle closest-side,rgba(186,226,247,.95) 0 12%,transparent 16%),radial-gradient(circle closest-side,transparent 40%,rgba(156,208,236,.9) 44% 48%,transparent 52%),radial-gradient(circle closest-side,transparent 76%,rgba(124,184,220,.85) 80% 84%,transparent 88%)}
.lode-mini-cell.hit{background:linear-gradient(135deg,#8a98a7,#4a5563);box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}
.lode-mini-cell.hit::after{content:"";position:absolute;inset:30%;border-radius:50%;background:#25282e}
.lode-mini-cell.sunk{background:linear-gradient(90deg,#a4afbb,#7c8a99,#454d57);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4)}
/* Mlýn – statický mini náhled karty (SVG deska, bez animace kvůli výkonu) */
.mlyn-preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mlyn-board-mini{width:150px;height:150px;padding:8px;background:linear-gradient(150deg,#20283a,#0d1420);border:2px solid rgba(212,175,55,0.45);border-radius:6px;transform:rotate(-5deg);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.mlyn-board-mini .ml-lines rect,.mlyn-board-mini .ml-lines line{fill:none;stroke:rgba(212,175,55,0.55);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.mlyn-board-mini .ml-w{fill:#F0E2C4;stroke:#C6AE82;stroke-width:1}
.mlyn-board-mini .ml-b{fill:#28303F;stroke:#0E131C;stroke-width:1}
.mlyn-board-mini .ml-mill{fill:#F5C24A;stroke:#C8821C;stroke-width:1.2}
.gonu-preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gonu-board-mini{width:150px;height:150px;padding:8px;background:linear-gradient(150deg,#20283a,#0d1420);border:2px solid rgba(212,175,55,0.45);border-radius:6px;transform:rotate(-5deg);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.gonu-board-mini .gn-lines line{stroke:rgba(212,175,55,0.55);stroke-width:1.4;stroke-linecap:round}
.gonu-board-mini .gn-p1{fill:#F0E2C4;stroke:#C6AE82;stroke-width:1}
.gonu-board-mini .gn-p2{fill:#5BB6E6;stroke:#1E5F8C;stroke-width:1}
.gonu-board-mini .gn-capt{stroke:#D9534F;stroke-width:2.6}
.clovece-preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.clovece-board-mini{width:150px;height:150px;padding:6px;background:linear-gradient(150deg,#20283a,#0d1420);border:2px solid rgba(212,175,55,0.45);border-radius:6px;transform:rotate(-5deg);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.clovece-board-mini .cl-cross{fill:rgba(248,250,252,0.06);stroke:rgba(212,175,55,0.4);stroke-width:1.2}
.clovece-board-mini .cl-r{fill:#D9534F}
.clovece-board-mini .cl-g{fill:#4FA94F}
.clovece-board-mini .cl-y{fill:#E8B53A}
.clovece-board-mini .cl-b{fill:#4A90D9}
.clovece-board-mini .cl-center{fill:#D4AF37;stroke:#0d1420;stroke-width:1}
.slova-preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.slova-board-mini{width:150px;height:150px;padding:8px;background:linear-gradient(150deg,#20283a,#0d1420);border:2px solid rgba(212,175,55,0.45);border-radius:6px;transform:rotate(-4deg);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.slova-board-mini .sl-tile{fill:#F0E2C4;stroke:#C6AE82;stroke-width:1}
.slova-board-mini .sl-let{fill:#2A2010;font-family:'Montserrat',sans-serif;font-weight:900;font-size:13px;text-anchor:middle;dominant-baseline:central}
/* Výkon na mobilu (≤768px): vypnout smyčkové animace náhledů a odhalování/vstup sekcí — slabší mobil je nestíhá a trhá se scrollování */
@media (max-width:768px){
.hero,.hero::before,.games-section,.features-section,.trust-section,.faq-section,.badge-hot,
.snake-mini,.diamond-mini,.bubble-cluster,.seaweed,
.chess-mini-piece.hop,.dama-mini-piece.jump,.sudoku-mini-cell.pulse,
.pex-card.pulse,.g2048-cell.g2048-pulse,.pk-mini-mark.pulse{animation:none !important}
}
.games-intro{max-width:820px;margin:var(--space-6) auto 0;color:var(--text-muted);line-height:1.7;font-size:0.95rem;text-align:center}
.game-type{color:var(--text-muted)}
.game-free{color:var(--success);font-weight:700;letter-spacing:0.02em}
@media (max-width:480px){
.hero{padding:var(--space-4) 0}
.hero h1{font-size:1.5rem;margin-bottom:var(--space-2)}
.hero-subtitle{font-size:0.9rem;margin-bottom:var(--space-3)}
.stats-bar{display:grid;grid-template-columns:repeat(2,minmax(0,auto));justify-content:center;column-gap:var(--space-6);row-gap:var(--space-3);margin-top:var(--space-3)}
.stat-number{font-size:1.35rem}
.stat-label{font-size:0.62rem}
.hero-cta .btn{font-size:1rem;padding:var(--space-3) var(--space-6)}
.games-intro{font-size:0.88rem;margin-top:var(--space-4)}
}
/* === Hlavička s viditelným wordmarkem značky (brand recall) + odkrytá navigace === */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;flex-wrap:wrap}
.brand{display:inline-flex;align-items:baseline;font-weight:900;font-size:clamp(1.15rem,2.6vw,1.5rem);letter-spacing:-0.01em;line-height:1}
.brand-mark{background:linear-gradient(135deg,var(--primary) 0%,#F5E6D3 50%,var(--primary-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.brand-dot{color:var(--text-muted);font-weight:800}
.brand:hover{text-shadow:none}
.site-nav ul{display:flex;gap:var(--space-6);list-style:none;margin:0;padding:0}
.site-nav a{color:var(--text-secondary);font-size:0.9rem;font-weight:600;letter-spacing:0.02em}
.site-nav a:hover{color:var(--primary);text-shadow:none}
@media (max-width:560px){.site-nav{display:none}}
/* === Answer-first blok pro GEO (self-contained odpověď nad kartami) === */
.answer-first{max-width:880px;margin:0 auto var(--space-6);padding:var(--space-4) var(--space-6);background:rgba(15,23,42,0.55);border:1px solid rgba(212,175,55,0.14);border-left:3px solid var(--primary);border-radius:var(--radius-lg);text-align:center}
.answer-first p{margin:0;color:var(--text-secondary);line-height:1.65;font-size:1rem}
.answer-first strong{color:var(--text-primary)}
/* trust-section nadpis povýšen na h2 — udržet velikost přiměřenou (hierarchie) */
.trust-section h2{font-size:clamp(1.3rem,2.6vw,1.8rem);margin-bottom:0}
@media (max-width:480px){.answer-first{padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4)}.answer-first p{font-size:0.9rem}}