/* Desktop Layout - Content with fixed left margin and responsive right margin */
        /* Mobile responsive fixes */
        @media (max-width: 768px) {
            /* Removed - using external guide-base.css */
        }

        /* Beginner Guide Specific Styles */
        .guide-container {
            max-width: none;
            margin: 0 auto;
            padding: 20px;
        }

        /* Guide Cards im Grid-Layout */
        .guide-cards-grid .guide-card {
            max-width: none;
            margin: 0;
        }

        .guide-section {
            padding: 25px;
            margin-bottom: 30px;
        }

        /* Character Card Styles für die kleinen Bilder */
        .inline-character-card {
            position: relative;
            display: inline-block;
            width: 75px;
            height: 105px;
            margin: 0 3px;
            transition: all 0.3s ease;
            border-radius: 8px;
            overflow: hidden;
        }

        /* Guide Card Styles werden aus guide_grid.css geladen */

        .inline-character-card:hover {
            transform: translateY(-2px) scale(1.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }

        /* Hover-Name Overlay */
        .character-name-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
            color: white;
            padding: 15px 8px 8px;
            text-align: center;
            font-weight: bold;
            font-size: 0.85rem;
            opacity: 1 !important;
            z-index: 10;
            transition: opacity 0.3s ease;
            pointer-events: none;
            border-radius: 0 0 6px 6px;
        }

        .inline-character-card img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 6px;
            transition: filter 0.3s ease;
        }

        .inline-character-card:hover img {
            filter: brightness(1.1);
        }

        .inline-character-card .character-background {
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            border-radius: 6px;
            z-index: 1;
        }

        .inline-character-card .character-foreground {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 6px;
            z-index: 5;
        }

        /* Rarity-spezifische Backgrounds für kleine Karten */
        .inline-character-card.ssr {
            box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
            border: 1px solid #ebac43 !important;
        }

        .inline-character-card.ur {
            box-shadow: 0 2px 4px rgba(255, 68, 68, 0.3);
            border: 1px solid #e04444 !important;
        }

        .inline-character-card.sr {
            box-shadow: 0 2px 4px rgba(153, 50, 204, 0.3);
            border: 1px solid #bc72e7 !important;
        }

        .inline-character-card.r {
            border: 1px solid #666 !important;
        }

        .inline-character-card.n {
            border: 1px solid #333 !important;
        }

        .inline-character-card.sp {
            box-shadow: 0 2px 4px rgba(153, 50, 204, 0.3) !important;
            border: 1px solid #c6e3ff !important;
        }

        .guide-section h2 {
            color: rgb(230, 230, 230);
            font-size: 1.8rem;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .guide-section h3 {
            color: #e6e6e6;
            font-size: 1.4rem;
            margin: 25px 0 15px 0;
        }

        .guide-section h4 {
            color: #e6e6e6;
            font-size: 1.2rem;
            margin: 20px 0 10px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .resource-icon {
            width: 32px;
            height: 32px;
            object-fit: contain;
            border-radius: 4px;
            vertical-align: middle;
        }

        .guide-container p {
            color: #e6e6e6;
            line-height: 1.6;
            margin-bottom: 15px;
            font-size: 1.3rem;
        }

        .guide-container li {
            color: #e6e6e6;
            line-height: 1.6;
            margin-bottom: 8px;
        }

        /* Keep specific styles for guide-section if needed */
        .guide-section p {
            color: #e6e6e6;
            line-height: 1.6;
            margin-bottom: 15px;
            font-size: 1.3rem;
        }

        .guide-section li {
            color: #e6e6e6;
            line-height: 1.6;
            margin-bottom: 8px;
        }

        .guide-highlight {
            background: rgba(122, 90, 248, 0.1);
            border: 1px solid rgba(122, 90, 248, 0.3);
            border-radius: 8px;
            padding: 15px;
            margin: 20px 0;
        }

        .guide-highlight strong {
            color: #7a5af8a1;
        }

        strong {
            color: #e6e6e6;
        }

        /* Rarity-spezifische Farben für SSR, UR, SR */
        .rarity-ssr {
            color: #ebac43 !important;
            font-weight: bold;
        }

        .rarity-ur {
            color: #e04444 !important;
            font-weight: bold;
        }

        .rarity-sr {
            color: #bc72e7 !important;
            font-weight: bold;
        }


        .placeholder-image {
            width: 100%;
            max-width: 800px;
            height: 200px;
            background: linear-gradient(135deg, #7a5af8a1, #5a3fb8);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
            font-weight: bold;
            margin: 20px auto;
            box-shadow: 0 4px 15px rgba(122, 90, 248, 0.3);
        }



        @media (max-width: 768px) {
            .guide-container {
                padding: 10px;
            }

            .guide-section {
                padding: 15px;
            }

            .guide-section h2 {
                font-size: 1.5rem;
            }

            .resource-list {
                grid-template-columns: 1fr;
            }

            .placeholder-image {
                height: 150px;
                font-size: 1rem;
            }
        }