/* ===== INDEX.CSS - ULTRA OPTIMALIZOVÁNO PRO VÝKON =====
 * 
 * DRASTICKÁ optimalizace (2025-10-19):
 * VARIANTA: "Ultra-lite books" - úplně bez 3D
 * - Všechny perspective() transformace ODSTRANĚNY
 * - Knihy: pouze 2D rotate() pro vizuální náklony
 * - Hover: POUZE filter brightness() - žádné posuny
 * - Žádné 3D efekty, transform-style, perspective
 * - Plochý design s minimálními animacemi
 * 
 * Výsledek: Mělo by fungovat na <1% CPU
 * Target: Plynulost i na slabých zařízeních
 */

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

body {
    font-family: 'Playfair Display', 'Georgia', serif;
    /* Tlumené studiové pozadí */
    background:
        radial-gradient(ellipse at 30% 30%, rgba(250,248,240,1) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(235,230,220,0.8) 0%, transparent 50%),
        linear-gradient(180deg, #f0ede3 0%, #e8e3d5 50%, #ded9c8 100%);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
    /* Odstraněno: perspective: 2000px; - pro lepší výkon */
    position: relative;
}

/* Jemná textura papíru/plátna na pozadí */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        /* Jemné vlákno */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(0,0,0,0.01) 3px,
            rgba(0,0,0,0.01) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(0,0,0,0.008) 3px,
            rgba(0,0,0,0.008) 4px
        ),
        /* Jemné vinětování */
        radial-gradient(ellipse at center, 
            transparent 0%, 
            transparent 50%,
            rgba(0,0,0,0.03) 100%);
    pointer-events: none;
    z-index: 1;
}

.menu {
    height: 8vh;
    background: rgba(139, 115, 85, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    color: #3d2817;
    font-size: 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: relative;
    z-index: 10;
}

.menu-left {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}

.menu-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.menu > * {
    display: flex;
    align-items: center;
}

/* Access indicator */
.access-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    height: fit-content;
}

.access-indicator.preview {
    background: rgba(255, 193, 7, 0.2);
    color: #f57c00;
    border: 2px solid rgba(255, 193, 7, 0.5);
}

.access-indicator.full {
    background: rgba(76, 175, 80, 0.2);
    color: #2e7d32;
    border: 2px solid rgba(76, 175, 80, 0.5);
}

.access-indicator i {
    font-size: 18px;
}

.logout-button {
    padding: 8px 16px;
    background: rgba(139, 115, 85, 0.2);
    color: #3d2817;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logout-button:hover {
    background: rgba(139, 115, 85, 0.4);
    filter: brightness(1.1);
}

.logout-button.admin-button {
    border: 2px solid rgba(220, 53, 69, 0.5);
    background: rgba(220, 53, 69, 0.1);
    color: #c82333;
}

.logout-button.admin-button:hover {
    background: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.7);
    filter: brightness(1.1);
}

.main-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 40px 20px 80px 20px;
    position: relative;
    z-index: 2;
}

.bookshelf {
    width: 90%;
    max-width: 1400px;
    position: relative;
    padding-top: 280px;  /* Prostor pro rámeček nad knihami */
}

/* Vržený stín police na stěnu za ní */
.bookshelf::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 3%;
    right: 3%;
    height: 60px;
    
    /* Soft vržený stín 8-16px */
    background: radial-gradient(ellipse at center top,
        rgba(0,0,0,0.35) 0%,
        rgba(0,0,0,0.2) 30%,
        rgba(0,0,0,0.1) 60%,
        transparent 100%
    );
    
    /* Rozmazání stínu */
    filter: blur(12px);
    opacity: 0.8;
    z-index: -1;
    pointer-events: none;
}

.shelf {
    width: 100%;
    height: 50px;
    position: relative;
    margin-top: 15px;
    
    /* Ořechové/teakové dřevo - PBR materiál, satén */
    background: linear-gradient(180deg, 
        #7a5c45 0%,      /* světlejší horní část (studové světlo) */
        #6b4f3a 20%,     /* přechod */
        #5d4230 50%,     /* střed - ořechová */
        #4f3826 80%,     /* tmavší spodek */
        #42301f 100%     /* spodní hrana */
    );
    
    /* Perspektiva zepředu - zjednodušeno na plochý vzhled */
    transform: none;
    transform-style: flat;
    
    /* Zaoblená přední hrana (bullnose) */
    border-radius: 8px 8px 3px 3px;
    
    /* Soft vržený stín na stěnu + kontaktový stín knih */
    box-shadow:
        /* Vržený stín na stěnu */
        0 16px 32px rgba(0,0,0,0.25),
        0 8px 16px rgba(0,0,0,0.15),
        /* Kontaktový stín knih na desce */
        inset 0 8px 12px rgba(0,0,0,0.15),
        /* Jemný speculární highlight na zaoblené hraně */
        inset 0 2px 4px rgba(255,255,255,0.2),
        /* Hloubka předního okraje */
        0 2px 0 rgba(0,0,0,0.3),
        0 3px 2px rgba(0,0,0,0.2);
}

/* Optimalizováno: zjednodušená dřevěná kresba shelf */
.shelf::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px 8px 3px 3px;
    opacity: 0.7;
    
    background-image:
        /* Hlavní dřevěná vlákna - jen nejdůležitější vzor */
        repeating-linear-gradient(90deg,
            transparent 0px,
            rgba(0,0,0,0.08) 1px,
            transparent 2px,
            transparent 60px,
            rgba(0,0,0,0.12) 61px,
            transparent 63px),
        /* Jemné póry dřeva - zjednodušeno */
        repeating-linear-gradient(90deg,
            transparent 0px,
            rgba(0,0,0,0.03) 0.5px,
            transparent 1px,
            transparent 3px);
    
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* Speculární highlight na zaoblené přední hraně (bullnose) */
.shelf::after {
    content: '';
    position: absolute;
    top: 0;
    left: 2%;
    right: 2%;
    height: 12px;
    
    /* Highlight zleva (studiové světlo) */
    background: linear-gradient(to right,
        rgba(255,245,220,0.35) 0%,
        rgba(255,245,220,0.15) 30%,
        rgba(255,245,220,0.08) 50%,
        rgba(255,245,220,0.04) 70%,
        transparent 100%
    );
    
    border-radius: 8px 8px 0 0;
    pointer-events: none;
}

.books-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 5.4px;  /* 4.5px * 1.2 */
    padding: 0 20px;
    margin-bottom: -9px;  /* -7.5px * 1.2 */
    position: relative;
    /* Optimalizováno: GPU kompozice pro kontejner */
    transform: translateZ(0);
    /* CSS containment pro lepší výkon */
    contain: layout style;
}

/* Studiové osvětlení zleva - světelný gradient na scéně */
.books-container::before {
    content: '';
    position: absolute;
    left: -100px;
    top: -50px;
    width: 300px;
    height: 400px;
    background: radial-gradient(ellipse at left center,
        rgba(255,248,220,0.3) 0%,
        rgba(255,248,220,0.1) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
}

/* Jemný ambient světlo zprava */
.books-container::after {
    content: '';
    position: absolute;
    right: -50px;
    top: 0;
    width: 200px;
    height: 400px;
    background: radial-gradient(ellipse at right center,
        rgba(200,190,170,0.15) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 1;
}

.book-spine {
    width: 105.3px;  /* 117px * 0.9 (zmenšeno o 10%) */
    height: 518.4px;  /* 576px * 0.9 (zmenšeno o 10%) */
    position: relative;
    cursor: pointer;
    /* ÚPLNĚ BEZ TRANSFORM - ploché knihy */
    /* Nejefektivnější animace - jen opacity */
    transition: opacity 0.2s ease;
    /* CSS containment - vypnuto kvůli demo-badge */
    /* contain: layout style paint; */
    /* GPU optimalizace */
    will-change: opacity;
    /* Povolit overflow pro demo-badge */
    overflow: visible;
    
    /* Jednoduchý stín - statický */
    box-shadow: 2px 4px 8px rgba(0,0,0,0.15);
}

/* Demo bublina (badge) nad knihami */
.demo-badge {
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #D4AF37 0%, #C19A2E 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    width: 95px;
    min-height: 38px;
    box-shadow: 
        0 4px 12px rgba(212, 175, 55, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.15);
    z-index: 10;
    pointer-events: none;
    font-family: 'Inter', -apple-system, sans-serif;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Šipka u bubliny */
.demo-badge::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #C19A2E;
}

.book-spine:hover {
    /* Nejefektivnější hover - jen průhlednost */
    opacity: 0.95;
}

/* Ambient occlusion mezi knihami */
.book-spine::before {
    content: '';
    position: absolute;
    top: 5%;
    left: -3px;
    width: 5px;
    height: 90%;
    background: linear-gradient(to right, 
        rgba(0,0,0,0.6) 0%, 
        rgba(0,0,0,0.3) 40%,
        transparent 100%);
    pointer-events: none;
    z-index: -1;
}

/* Ambient occlusion vpravo */
.book-spine::after {
    content: '';
    position: absolute;
    top: 5%;
    right: -3px;
    width: 5px;
    height: 90%;
    background: linear-gradient(to left, 
        rgba(0,0,0,0.4) 0%, 
        rgba(0,0,0,0.2) 50%,
        transparent 100%);
    pointer-events: none;
    z-index: -1;
}

.book-front {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 54px 21.6px;  /* 45px * 1.2, 18px * 1.2 */
    border-radius: 5.4px;  /* 4.5px * 1.2 */
    overflow: visible;
    
    /* Kulatý profil hřbetu */
    border-left: 1px solid rgba(0,0,0,0.5);
    border-right: 1px solid rgba(255,255,255,0.15);
    
    /* Studiové osvětlení zleva */
    box-shadow:
        inset 6px 0 12px rgba(255,255,255,0.25),     /* hlavní světlo zleva */
        inset -8px 0 16px rgba(0,0,0,0.45),          /* stín vpravo */
        inset 0 4px 8px rgba(255,255,255,0.1),       /* horní světlo */
        inset 0 -4px 8px rgba(0,0,0,0.3),            /* spodní stín */
        /* Optimalizováno: zjednodušené stíny - méně vrstev */
        2px 0 4px rgba(0,0,0,0.2),                   /* vnější hloubka */
        4px 0 0 -2px rgba(250,248,240,0.3);          /* hrana stránek */
}

/* Optimalizováno: zjednodušená textura staré kůže */
.book-front::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        /* Patina na hranách - pouze hlavní efekty */
        radial-gradient(ellipse at 50% 10%,
            rgba(255,255,255,0.06) 0%,
            transparent 30%),
        radial-gradient(ellipse at 50% 90%,
            rgba(255,255,255,0.05) 0%,
            transparent 30%),
        /* Zjednodušená textura kůže */
        repeating-linear-gradient(0deg, 
            transparent 0px, 
            rgba(0,0,0,0.08) 1px, 
            transparent 2px,
            transparent 15px,
            rgba(255,255,255,0.02) 15px,
            transparent 16px);
    opacity: 0.9;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Raised bands (hřbetní žebra) */
.book-front::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        /* Ševní linie podél hřbetu */
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 8px,
            rgba(0,0,0,0.08) 8px,
            rgba(0,0,0,0.08) 8.5px,
            transparent 8.5px,
            transparent 10px,
            rgba(0,0,0,0.08) 10px,
            rgba(0,0,0,0.08) 10.5px,
            transparent 10.5px
        ),
        /* Raised bands */
        linear-gradient(0deg,
            transparent 0%,
            transparent 15%,
            rgba(0,0,0,0.2) 15.5%,
            rgba(255,255,255,0.1) 16%,
            transparent 16.5%,
            transparent 25%,
            rgba(0,0,0,0.2) 25.5%,
            rgba(255,255,255,0.1) 26%,
            transparent 26.5%,
            transparent 74%,
            rgba(0,0,0,0.2) 74.5%,
            rgba(255,255,255,0.1) 75%,
            transparent 75.5%,
            transparent 84%,
            rgba(0,0,0,0.2) 84.5%,
            rgba(255,255,255,0.1) 85%,
            transparent 85.5%,
            transparent 100%
        );
    pointer-events: none;
}

.book-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'Playfair Display', 'Cinzel', 'Georgia', serif;
    font-size: 22px;  /* Upraveno pro lepší vešlost */
    font-weight: 700;  /* Tučnější písmo */
    letter-spacing: 8px;  /* Větší prostor mezi písmeny pro elegantnější vzhled */
    text-transform: uppercase;
    position: absolute;
    z-index: 2;
    line-height: 1.4;
    text-align: center;
    
    /* Přesné umístění mezi raised bands (26.5% - 74%) */
    top: 27%;
    bottom: 27%;
    left: 0;
    right: 0;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Ražené zlaté písmo - historická technika */
    background: linear-gradient(135deg, 
        #b8952e 0%,      /* tlumenější zlatá */
        #d4af37 25%,     
        #c9a961 50%,     
        #a8872a 75%,     
        #b8952e 100%     
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Ražba - vytlačený efekt do kůže */
    filter: 
        drop-shadow(0px 1.5px 0px rgba(0,0,0,0.6))      /* hlavní stín */
        drop-shadow(0px 0.5px 0px rgba(0,0,0,0.4))      /* blízký stín */
        drop-shadow(0px -0.5px 0px rgba(255,255,255,0.15))  /* horní světlo */
        drop-shadow(1px 0px 1px rgba(0,0,0,0.3));       /* boční stín */
    
    text-shadow: none;
    opacity: 0.85;  /* Mírně vybledlá ražba */
}

/* Animace odlesku při hoveru - VYPNUTO PRO VÝKON
.book-spine:hover .book-title {
    animation: goldShine 2s ease-in-out infinite;
}
*/

@keyframes goldShine {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Historické knihy z 19.-20. století - tmavá kůže s patinou */
.book-0 .book-front { 
    background: linear-gradient(to right, 
        #3a2318 0%,      /* tmavá hnědá kůže */
        #4d3122 15%,     /* osvětlená část zleva */
        #42291d 50%,     /* střed */
        #352015 85%,     /* stín vpravo */
        #2a1810 100%     /* tmavý okraj */
    );
}

.book-1 .book-front { 
    background: linear-gradient(to right,
        #2a2520 0%,      /* tmavě šedohnědá kůže */
        #3d352e 15%,
        #35302a 50%,
        #282218 85%,
        #1d1a15 100%
    );
}

.book-2 .book-front { 
    background: linear-gradient(to right,
        #1f2428 0%,      /* tmavě modrošedá */
        #2f363d 15%,
        #272e34 50%,
        #1a1f24 85%,
        #14181c 100%
    );
}

.book-3 .book-front { 
    background: linear-gradient(to right,
        #3d2f28 0%,      /* hnědá kůže */
        #523f35 15%,
        #48382f 50%,
        #342620 85%,
        #281e18 100%
    );
}

.book-4 .book-front { 
    background: linear-gradient(to right,
        #2a2520 0%,      /* tmavě šedohnědá (opakování) */
        #3d352e 15%,
        #35302a 50%,
        #282218 85%,
        #1d1a15 100%
    );
}

.book-5 .book-front { 
    background: linear-gradient(to right,
        #252828 0%,      /* téměř černá šedozelená */
        #363a3a 15%,
        #2e3232 50%,
        #1f2222 85%,
        #171919 100%
    );
}

.book-6 .book-front { 
    background: linear-gradient(to right,
        #3a2a1f 0%,      /* tmavá hnědá */
        #4d3a2c 15%,
        #433228 50%,
        #31231a 85%,
        #261c14 100%
    );
}

.book-7 .book-front { 
    background: linear-gradient(to right,
        #2f2125 0%,      /* tmavě vínová kůže */
        #42313a 15%,
        #39282f 50%,
        #291a20 85%,
        #1e1418 100%
    );
}

.book-8 .book-front { 
    background: linear-gradient(to right,
        #1f2428 0%,      /* tmavě modrošedá (opakování) */
        #2f363d 15%,
        #272e34 50%,
        #1a1f24 85%,
        #14181c 100%
    );
}

/* Variace tlouštěk knih pro realističnost - drobné nerovnosti historických knih */
/* Všechny rozměry zmenšeny o 10% */
.book-0 { 
    height: 558.9px;  /* 621px * 0.9 */
    width: 110.16px;  /* 122.4px * 0.9 */
}
.book-1 { 
    height: 507.6px;  /* 564px * 0.9 */
    width: 98.1px;    /* 109px * 0.9 */
}
.book-2 { 
    height: 538.2px;  /* 598px * 0.9 */
    width: 104.4px;   /* 116px * 0.9 */
}
.book-3 { 
    height: 496.8px;  /* 552px * 0.9 */
    width: 99.9px;    /* 111px * 0.9 */
}
.book-4 { 
    height: 528.3px;  /* 587px * 0.9 */
    width: 110.7px;   /* 123px * 0.9 */
}
.book-5 { 
    height: 517.5px;  /* 575px * 0.9 */
    width: 102.6px;   /* 114px * 0.9 */
}
.book-6 { 
    height: 504.9px;  /* 561px * 0.9 */
    width: 97.2px;    /* 108px * 0.9 */
}
.book-7 { 
    height: 548.1px;  /* 609px * 0.9 */
    width: 107.1px;   /* 119px * 0.9 */
}
.book-8 { 
    height: 523.8px;  /* 582px * 0.9 */
    width: 103.5px;   /* 115px * 0.9 */
}

.footer-controls {
    height: 5vh;
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(139, 115, 85, 0.15);
    border-top: 1px solid rgba(139, 115, 85, 0.2);
    position: relative;
    z-index: 10;
}

.footer-controls .controls {
    width: 100%;
    max-width: 1400px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.library-title {
    text-align: center;
    color: #3d2817;
    font-size: 2em;
    margin-bottom: 40px;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
    font-variant: small-caps;
    letter-spacing: 3px;
}

/* Mobilní kontejner pro rámečky - na desktopu rámečky umístěny absolutně */
.mobile-frames-container {
    display: contents; /* Necháme rámečky zobrazit normálně */
}

/* Text "Vyberte knihu" pro mobil - skrytý na desktopu */
.mobile-select-text {
    display: none;
}

/* MyHeritage Family Tree Frame - Desktop pozice */
.family-tree-frame {
    position: absolute;
    width: 200px;
    height: 200px;
    /* Umístění podle uživatelského náčrtu - vlevo nad knihami */
    left: 13%;  /* Vlevo, nad první a druhou knihou */
    top: 40px;  /* Nad knihami, pod titulkem */
    cursor: pointer;
    transition: all 0.3s ease;
    transform-style: preserve-3d;
    /* Lehká perspektiva jako u knih */
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
    z-index: 50;
}

.family-tree-frame:hover {
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
    filter: brightness(1.08);
}

/* Stats Frame - druhý rámeček napravo */
.stats-frame {
    position: absolute;
    width: 200px;
    height: 200px;
    /* Umístění o 30% napravo od levého rámečku */
    left: 72%;  
    top: 40px;  /* Stejná výška jako první rámeček */
    cursor: pointer;
    transition: all 0.3s ease;
    transform-style: preserve-3d;
    /* Lehká perspektiva jako u knih */
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
    z-index: 50;
}

.stats-frame:hover {
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
    filter: brightness(1.08);
}

.frame-border {
    width: 100%;
    height: 100%;
    padding: 12px;
    border-radius: 4px;
    position: relative;
    
    /* Tmavý dřevěný rám - podobný jako polička */
    background: 
        /* Dřevěná textura - jemné žilky */
        repeating-linear-gradient(
            90deg,
            #3d2f28 0px,
            #453729 1px,
            #3d2f28 2px,
            #3a2e27 3px
        ),
        /* Gradient pro hloubku */
        linear-gradient(135deg,
            #4a3a2f 0%,
            #3d2f28 50%,
            #2f2520 100%
        );
    
    /* Stín - rámeček visí na zdi */
    box-shadow:
        0 2px 4px rgba(0,0,0,0.2),
        0 6px 12px rgba(0,0,0,0.15),
        0 12px 24px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 2px rgba(0,0,0,0.3);
    
    /* Ornamentální vnitřní okraj */
    border: 2px solid #2a2520;
    outline: 1px solid #5a4a3a;
    outline-offset: -5px;
}

.frame-content {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        #f5f1e8 0%,
        #ebe7dc 50%,
        #e0dcc8 100%
    );
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
}

/* Jemná textura papíru uvnitř rámečku */
.frame-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,0.015) 2px,
            rgba(0,0,0,0.015) 3px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,0.012) 2px,
            rgba(0,0,0,0.012) 3px
        );
    pointer-events: none;
    border-radius: 2px;
}

/* SVG ilustrace stromu v rámečku */
.tree-illustration {
    width: 90px;
    height: 90px;
    margin: 10px auto 5px;
    fill: #5a7a45;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}

/* MyHeritage logo */
.myheritage-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 5px 0;
}

.logo-icon {
    font-size: 18px;
    color: #2a1f18;
}

.logo-text {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 16px;
    font-weight: 600;
    color: #2a1f18;
}

.frame-text {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 22px;
    font-weight: 700;
    color: #2a1f18;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.8);
    margin-top: 10px;
}

/* Papírové štítky s čísly - klasické z 19.-20. století */
.book-label {
    position: absolute;
    bottom: 17%;  /* Přesně mezi spodními raised bands (74%-85%) - uprostřed na 79.5% od vrchu = 20.5% od spodu */
    left: 50%;
    transform: translateX(-50%);
    width: 40.5px;  /* 45px * 0.9 - zmenšeno o 10% */
    height: 45px;   /* 50px * 0.9 - zmenšeno o 10% */
    
    /* Staré nažloutlé papírové pozadí */
    background: linear-gradient(180deg,
        #f4ead4 0%,
        #ebe1c8 50%,
        #ddd3ba 100%
    );
    
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 2px;
    
    /* Stínování štítku */
    box-shadow:
        0 2px 4px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 2px rgba(0,0,0,0.1);
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 25.2px;  /* 28px * 0.9 - zmenšeno o 10% */
    font-weight: normal;
    color: #2a1f18;
    
    pointer-events: none;
    z-index: 4;
}

/* Textura papíru na štítku */
.book-label::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg,
            transparent 0px,
            rgba(0,0,0,0.015) 1px,
            transparent 2px),
        repeating-linear-gradient(90deg,
            transparent 0px,
            rgba(0,0,0,0.01) 1px,
            transparent 2px);
    opacity: 0.6;
    pointer-events: none;
}

/* Číslo na štítku */
.book-label::after {
    content: attr(data-number);
    position: relative;
    z-index: 1;
}

/* ===== PERFORMANCE OPTIMALIZACE PRO SLABŠÍ ZAŘÍZENÍ ===== */

/* Pro starší nebo slabší zařízení - zjednodušené animace */
@media (max-width: 768px), (max-height: 600px), (prefers-reduced-motion: reduce) {
    .book-spine {
        /* Zachováme statické natočení, ale bez perspektivy */
        transform: rotateY(-5deg);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .book-spine:hover {
        /* Pouze zesvětlení - žádný posun ani změna stínu */
        filter: brightness(1.15);
        transform: none;
        box-shadow: none;
    }
    
    .shelf::before,
    .book-front::before,
    .book-front::after {
        /* Vypnutí složitých background-image vzorů */
        background-image: none;
    }
    
    .books-container::before,
    .books-container::after {
        /* Vypnutí studiového osvětlení */
        display: none;
    }
}

/* Pro velmi slabá zařízení - minimální animace */
@media (max-width: 480px) {
    .book-spine {
        transform: none;
        transition: opacity 0.2s ease;
    }
    
    .book-spine:hover {
        transform: none;
        opacity: 0.8;
        box-shadow: none;
        filter: none;
    }
}

/* ===== MOBILNÍ LIST VIEW - Elegantní seznam knih ===== */
@media (max-width: 768px) {
    /* Skrýt policku na mobilu */
    .shelf {
        display: none;
    }
    
    /* Mobilní verze rámečků - zmenšené */
    .family-tree-frame,
    .stats-frame {
        position: static;
        width: 140px;
        height: 140px;
        transform: none;
        margin: 0;
    }
    
    .family-tree-frame:hover,
    .stats-frame:hover {
        transform: none;
        filter: brightness(1.05);
    }
    
    /* Zmenšit text v rámečcích na mobilu */
    .frame-text {
        font-size: 16px;
    }
    
    /* Zmenšit ikony v rámečcích na mobilu */
    .family-tree-frame img,
    .stats-frame i {
        width: 60px !important;
        height: 60px !important;
        font-size: 40px !important;
    }
    
    .main-content {
        padding: 20px 15px;
        align-items: flex-start;
    }
    
    .bookshelf {
        width: 100%;
        padding-top: 0;
        max-width: 600px;
    }
    
    /* Nadpis knihovny - skrytý na mobilu */
    .library-title {
        display: none;
    }
    
    /* Container pro rámečky nad knihami */
    .mobile-frames-container {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-bottom: 20px;
        width: 100%;
    }
    
    /* Text "Vyberte knihu" */
    .mobile-select-text {
        display: block;
        text-align: center;
        font-size: 1.2em;
        font-weight: 600;
        color: #3d2817;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    
    /* Books container jako vertikální seznam */
    .books-container {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        margin-bottom: 0;
    }
    
    /* Každá kniha jako řádek v seznamu */
    .book-spine {
        width: 100%;
        height: auto;
        min-height: 80px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        margin: 0 0 8px 0;
        border-radius: 0;
        
        /* Transparentní pozadí */
        background: transparent;
        
        /* Bez hranice */
        border-bottom: none;
        
        /* Bez stínu */
        box-shadow: none;
        
        /* Transformace resetována */
        transform: none;
        transition: all 0.3s ease;
    }
    
    .book-spine::before,
    .book-spine::after {
        display: none;
    }
    
    .book-spine:hover,
    .book-spine:active {
        background: transparent;
        box-shadow: none;
        transform: scale(1.02);
        opacity: 1;
    }
    
    /* Book front jako kniha (hřbet) - CELÁ ŠÍŘKA NA MOBILU */
    .book-front {
        width: 100%;
        min-width: auto;
        height: 80px;
        margin-right: 0;
        padding: 15px 20px;
        border-radius: 4px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        
        /* Zachovat knihovní vzhled */
        border-left: 2px solid rgba(0,0,0,0.5);
        border-right: 2px solid rgba(255,255,255,0.15);
        border-top: 1px solid rgba(0,0,0,0.2);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        
        box-shadow: 
            inset 6px 0 12px rgba(255,255,255,0.25),
            inset -8px 0 16px rgba(0,0,0,0.45),
            inset 0 4px 8px rgba(255,255,255,0.1),
            inset 0 -4px 8px rgba(0,0,0,0.3),
            0 3px 8px rgba(0,0,0,0.25);
    }
    
    /* Textura kůže a raised bands - horizontální */
    .book-front::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: 
            /* Raised bands - horizontálně pro mobilní view */
            linear-gradient(90deg,
                transparent 0%,
                transparent 10%,
                rgba(0,0,0,0.15) 10.5%,
                rgba(255,255,255,0.08) 11%,
                transparent 11.5%,
                transparent 20%,
                rgba(0,0,0,0.15) 20.5%,
                rgba(255,255,255,0.08) 21%,
                transparent 21.5%,
                transparent 79%,
                rgba(0,0,0,0.15) 79.5%,
                rgba(255,255,255,0.08) 80%,
                transparent 80.5%,
                transparent 89%,
                rgba(0,0,0,0.15) 89.5%,
                rgba(255,255,255,0.08) 90%,
                transparent 90.5%,
                transparent 100%
            ),
            /* Jemná textura kůže */
            repeating-linear-gradient(90deg, 
                transparent 0px, 
                rgba(0,0,0,0.06) 1px, 
                transparent 2px,
                transparent 20px,
                rgba(255,255,255,0.02) 20px,
                transparent 21px);
        opacity: 0.7;
        mix-blend-mode: overlay;
        pointer-events: none;
        border-radius: 4px;
    }
    
    .book-front::after {
        display: none;
    }
    
    /* Book title HORIZONTÁLNĚ na celou šířku - VERTIKÁLNĚ VYCENTROVANÝ */
    .book-title {
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 4px;
        text-align: center;
        text-transform: uppercase;
        line-height: 1.3;
        
        /* Absolutní pozicování pro perfektní centrování */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 40px);
        
        /* Ražené zlaté písmo - stejné jako desktop */
        background: linear-gradient(135deg, 
            #b8952e 0%,
            #d4af37 25%,     
            #c9a961 50%,     
            #a8872a 75%,     
            #b8952e 100%     
        );
        background-size: 200% 200%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        
        /* Ražba - vytlačený efekt */
        filter: 
            drop-shadow(0px 1.5px 0px rgba(0,0,0,0.6))
            drop-shadow(0px 0.5px 0px rgba(0,0,0,0.4))
            drop-shadow(0px -0.5px 0px rgba(255,255,255,0.15))
            drop-shadow(1px 0px 1px rgba(0,0,0,0.3));
        
        opacity: 0.85;
        max-height: none;
        overflow: visible;
        
        /* Reset bottom z desktop verze (27%) - nutné pro mobilní centrování */
        bottom: 0;
    }
    
    /* Štítek s číslem - SKRYTÝ na mobilu */
    .book-label {
        display: none;
    }
    
    .book-label::before {
        display: none;
    }
    
    /* Variace výšek vypnuto na mobilu */
    .book-0, .book-1, .book-2, .book-3, 
    .book-4, .book-5, .book-6, .book-7, .book-8 {
        height: auto;
        width: 100%;
    }
    
    /* Menu zjednodušení */
    .menu {
        height: auto;
        min-height: 60px;
        padding: 10px 15px;
        font-size: 20px;
    }
    
    .menu-left {
        position: static;
        transform: none;
    }
    
    .access-indicator {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .logout-button {
        font-size: 18px;
        padding: 6px 12px;
    }
    
    /* Demo badge na mobilu - napravo od názvu knihy */
    .demo-badge {
        position: absolute;
        top: 50%;
        right: 15px;
        left: auto;
        transform: translateY(-50%);
        width: 85px;
        height: auto;
        padding: 6px 10px;
        font-size: 9px;
        line-height: 1.3;
    }
    
    /* Šipka skryta na mobilu */
    .demo-badge::after {
        display: none;
    }
    
    /* Footer */
    .footer-controls {
        min-height: 50px;
        padding: 10px;
    }
}

/* Extra malé displeje - stejný styl */
@media (max-width: 380px) {
    .book-spine {
        min-height: 100px;
        margin: 0 0 12px 0;
    }
    
    .book-front {
        height: 100px;
        padding: 12px 15px;
    }
    
    .book-title {
        font-size: 20px;
        letter-spacing: 4px;
    }
    
    .library-title {
        font-size: 1.3em;
    }
}