/* Guide Page Specific Styles */

/* Breadcrumb */
.breadcrumb {
    background: #f8f9fa;
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef;
}

.breadcrumb ol {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child)::after {
    content: '>';
    margin-left: 0.5rem;
    color: #6c757d;
}

.breadcrumb a {
    color: #1e3c72;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: #ffd700;
}

/* Guide Main */
.guide-main {
    padding: 2rem 0;
    background: white;
}

/* Article Header */
.article-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #e9ecef;
}

.article-header h1 {
    font-size: 2.5rem;
    color: #1e3c72;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.article-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.article-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Featured Image */
.article-featured-image {
    margin: 2rem 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.article-featured-image:hover {
    transform: translateY(-5px);
}

.article-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.article-meta span::before {
    content: '';
    width: 4px;
    height: 4px;
    background: #ffd700;
    border-radius: 50%;
}

/* Table of Contents */
.table-of-contents {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 3rem;
    border-left: 4px solid #1e3c72;
}

.table-of-contents h2 {
    color: #1e3c72;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.table-of-contents ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.table-of-contents li {
    margin-bottom: 0.5rem;
}

.table-of-contents a {
    color: #333;
    text-decoration: none;
    padding: 0.5rem 0;
    display: block;
    transition: all 0.3s ease;
    border-radius: 5px;
    padding-left: 1rem;
}

.table-of-contents a:hover {
    background: #e9ecef;
    color: #1e3c72;
    padding-left: 1.5rem;
}

/* Article Content */
.article-content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

.article-content h2 {
    color: #1e3c72;
    font-size: 2rem;
    margin: 3rem 0 1.5rem 0;
    font-weight: 700;
    border-bottom: 2px solid #ffd700;
    padding-bottom: 0.5rem;
}

.article-content h3 {
    color: #1e3c72;
    font-size: 1.5rem;
    margin: 2rem 0 1rem 0;
    font-weight: 600;
}

.article-content h4 {
    color: #333;
    font-size: 1.2rem;
    margin: 1.5rem 0 0.5rem 0;
    font-weight: 600;
}

.article-content p {
    margin-bottom: 1.5rem;
    color: #555;
    font-size: 1.1rem;
}

.article-content ul, .article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.article-content li {
    margin-bottom: 0.5rem;
    color: #555;
}

/* Tables */
.card-values-table,
.payouts-table,
.house-edge-table {
    margin: 2rem 0;
    overflow-x: auto;
}

.card-values-table table,
.payouts-table table,
.house-edge-table table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.card-values-table th,
.payouts-table th,
.house-edge-table th,
.card-values-table td,
.payouts-table td,
.house-edge-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.card-values-table th,
.payouts-table th,
.house-edge-table th {
    background: #1e3c72;
    color: white;
    font-weight: 600;
}

.card-values-table tr:hover,
.payouts-table tr:hover,
.house-edge-table tr:hover {
    background: #f8f9fa;
}

/* Examples */
.examples {
    background: #e3f2fd;
    padding: 1.5rem;
    border-radius: 10px;
    margin: 1.5rem 0;
    border-left: 4px solid #2196f3;
}

.examples h4 {
    color: #1e3c72;
    margin-top: 0;
}

.examples ul {
    margin-bottom: 0;
}

/* Game Steps */
.game-steps {
    display: grid;
    gap: 1.5rem;
    margin: 2rem 0;
}

.step {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #ffd700;
}

.step h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.step ul {
    margin-bottom: 0;
}

/* Rules Section */
.rules-section {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    margin: 1.5rem 0;
    border-left: 4px solid #28a745;
}

.rules-section h3 {
    color: #1e3c72;
    margin-top: 0;
}

.rules-section ul {
    margin-bottom: 0;
}

.rules-section li {
    margin-bottom: 0.8rem;
}

/* Payouts Section */
.payouts-section,
.house-edge-section {
    margin: 2rem 0;
}

/* Tips Grid */
.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.tip-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-top: 4px solid #ffd700;
    transition: transform 0.3s ease;
}

.tip-card:hover {
    transform: translateY(-5px);
}

.tip-card h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.tip-card p,
.tip-card ul {
    margin-bottom: 0;
    color: #555;
}

.tip-card li {
    margin-bottom: 0.5rem;
}

/* Comparison Grid */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.comparison-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #1e3c72;
}

.comparison-card h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.comparison-card ul {
    margin-bottom: 0;
}

.comparison-card li {
    margin-bottom: 0.8rem;
    color: #555;
}

/* Responsible Gaming */
.responsible-gaming-list {
    background: #fff3cd;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    border-left: 4px solid #ffc107;
}

.responsible-gaming-list ul {
    margin-bottom: 0;
}

.responsible-gaming-list li {
    margin-bottom: 0.8rem;
    color: #856404;
    font-weight: 500;
}

/* Conclusion */
.conclusion {
    background: #d1ecf1;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    border-left: 4px solid #17a2b8;
}

.conclusion h2 {
    color: #1e3c72;
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.conclusion p {
    margin-bottom: 1rem;
    color: #0c5460;
}

.conclusion p:last-child {
    margin-bottom: 0;
}

/* Disclaimer */
.disclaimer {
    background: #f8d7da;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    border-left: 4px solid #dc3545;
}

.disclaimer h3 {
    color: #721c24;
    margin-top: 0;
    margin-bottom: 1rem;
}

.disclaimer p {
    margin-bottom: 0;
    color: #721c24;
    font-weight: 500;
}

/* Related Articles */
.related-articles {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid #e9ecef;
}

.related-articles h2 {
    color: #1e3c72;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.related-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    border-top: 4px solid #1e3c72;
}

.related-card:hover {
    transform: translateY(-5px);
}

.related-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.related-card h3 a {
    color: #1e3c72;
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-card h3 a:hover {
    color: #ffd700;
}

.related-card p {
    margin-bottom: 0;
    color: #555;
}

/* Responsive Design */
@media (max-width: 768px) {
    .article-header h1 {
        font-size: 2rem;
    }
    
    .article-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .article-content h2 {
        font-size: 1.6rem;
    }
    
    .article-content h3 {
        font-size: 1.3rem;
    }
    
    .tips-grid,
    .comparison-grid,
    .related-grid {
        grid-template-columns: 1fr;
    }
    
    .table-of-contents {
        padding: 1.5rem;
    }
    
    .step,
    .tip-card,
    .comparison-card,
    .related-card {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .guide-main {
        padding: 1rem 0;
    }
    
    .article-header {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
    }
    
    .article-header h1 {
        font-size: 1.6rem;
    }
    
    .article-content h2 {
        font-size: 1.4rem;
    }
    
    .article-content h3 {
        font-size: 1.2rem;
    }
    
    .table-of-contents,
    .step,
    .tip-card,
    .comparison-card,
    .related-card,
    .examples,
    .rules-section,
    .responsible-gaming-list,
    .conclusion,
    .disclaimer {
        padding: 1rem;
    }
    
    .card-values-table th,
    .payouts-table th,
    .house-edge-table th,
    .card-values-table td,
    .payouts-table td,
    .house-edge-table td {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
}

/* Strategy Guide Specific Styles */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.principle-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #1e3c72;
}

.principle-card h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.house-edge-table table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.house-edge-table th,
.house-edge-table td {
    padding: 0.8rem;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.house-edge-table th {
    background: #1e3c72;
    color: white;
    font-weight: 600;
}

.house-edge-table tr.recommended {
    background: #d4edda;
}

.house-edge-table tr.not-recommended {
    background: #f8d7da;
}

.money-management-example {
    background: #e3f2fd;
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 1rem;
}

.money-management-example h4 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.money-management-example ul {
    margin-bottom: 0;
}

/* Strategy Cards */
.strategy-card {
    background: white;
    margin: 2rem 0;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    border-left: 4px solid #ffd700;
}

.strategy-card h3 {
    background: #1e3c72;
    color: white;
    padding: 1.5rem;
    margin: 0;
    font-size: 1.4rem;
}

.strategy-content {
    padding: 2rem;
}

.strategy-info h4 {
    color: #1e3c72;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.strategy-info h4:first-child {
    margin-top: 0;
}

.progression-example {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
    border-left: 4px solid #28a745;
}

.progression-example ol {
    margin-bottom: 0;
}

.progression-example li {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.warning-box {
    background: #fff3cd;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
    border-left: 4px solid #ffc107;
}

.warning-box h4 {
    color: #856404;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.warning-box p {
    color: #856404;
    margin-bottom: 0;
    font-weight: 500;
}

/* Advanced Tips */
.advanced-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.session-management h4 {
    color: #1e3c72;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.session-management h4:first-child {
    margin-top: 0;
}

/* Application Guide */
.application-guide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.level-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
    border-top: 4px solid #1e3c72;
}

.level-card h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.level-card ul {
    text-align: left;
    margin-bottom: 0;
}

/* Money Management */
.money-management-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.money-principles,
.emotion-management {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.money-principles {
    border-left: 4px solid #28a745;
}

.emotion-management {
    border-left: 4px solid #dc3545;
}

.money-example {
    background: #e3f2fd;
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 1rem;
}

.money-example h4 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.emotion-management ul {
    margin-bottom: 0;
}

.emotion-management li {
    margin-bottom: 0.8rem;
}

/* Comparison Table */
.comparison-table {
    margin: 2rem 0;
    overflow-x: auto;
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.comparison-table th,
.comparison-table td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
}

.comparison-table th {
    background: #1e3c72;
    color: white;
    font-weight: 600;
}

.comparison-table tr.recommended {
    background: #d4edda;
}

.comparison-table tr:hover {
    background: #f8f9fa;
}

/* Mistakes Section */
.mistakes-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.mistake-card {
    background: #f8d7da;
    padding: 2rem;
    border-radius: 10px;
    border-left: 4px solid #dc3545;
}

.mistake-card h3 {
    color: #721c24;
    margin-top: 0;
    margin-bottom: 1rem;
}

.mistake-card ul {
    margin-bottom: 0;
}

.mistake-card li {
    color: #721c24;
    margin-bottom: 0.5rem;
}

/* Recommendations */
.recommendations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.recommendation-item {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
    border-top: 4px solid #28a745;
}

.recommendation-item h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.recommendation-item p {
    margin-bottom: 0;
    color: #555;
}

/* Final Advice */
.final-advice {
    background: #d1ecf1;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    border-left: 4px solid #17a2b8;
}

.final-advice h2 {
    color: #1e3c72;
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.final-advice p {
    margin-bottom: 0;
    color: #0c5460;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Responsive Design for Strategy Guide */
@media (max-width: 768px) {
    .principles-grid,
    .advanced-tips,
    .application-guide,
    .money-management-section,
    .mistakes-section,
    .recommendations {
        grid-template-columns: 1fr;
    }
    
    .strategy-content {
        padding: 1.5rem;
    }
    
    .comparison-table {
        font-size: 0.9rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 0.8rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .principle-card,
    .strategy-content,
    .level-card,
    .money-principles,
    .emotion-management,
    .mistake-card,
    .recommendation-item {
        padding: 1.5rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 0.6rem 0.3rem;
        font-size: 0.8rem;
    }
}

/* Bingo Guide Specific Styles */
.basic-terms {
    margin: 2rem 0;
}

.terms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.term-card {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
    border-top: 4px solid #1e3c72;
}

.term-card h4 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.term-card p {
    margin-bottom: 0;
    color: #555;
    font-size: 0.9rem;
}

/* Bingo Types */
.bingo-types {
    display: grid;
    gap: 2rem;
    margin: 2rem 0;
}

.bingo-type-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    border-left: 4px solid #ffd700;
}

.bingo-type-card h3 {
    background: #1e3c72;
    color: white;
    padding: 1.5rem;
    margin: 0;
    font-size: 1.4rem;
}

.type-content {
    padding: 2rem;
}

.type-features,
.type-gameplay,
.type-prizes,
.type-numbers {
    margin-bottom: 1.5rem;
}

.type-features h4,
.type-gameplay h4,
.type-prizes h4,
.type-numbers h4 {
    color: #1e3c72;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.number-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.number-column {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border-left: 3px solid #1e3c72;
}

/* Variations */
.variations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.variation-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #28a745;
}

.variation-card h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.variation-content h4 {
    color: #1e3c72;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.variation-content h4:first-child {
    margin-top: 0;
}

.patterns {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.pattern-item {
    background: #e3f2fd;
    padding: 0.8rem;
    border-radius: 5px;
    border-left: 3px solid #2196f3;
    font-size: 0.9rem;
}

/* Themed Games */
.themed-games {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.theme-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #17a2b8;
}

.theme-card h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.theme-content h4 {
    color: #1e3c72;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.theme-content h4:first-child {
    margin-top: 0;
}

/* Features */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.feature-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #6f42c1;
}

.feature-card h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.feature-content h4 {
    color: #1e3c72;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.feature-content h4:first-child {
    margin-top: 0;
}

/* Mobile Features */
.mobile-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.mobile-feature {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #fd7e14;
}

.mobile-feature h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Room Types */
.room-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.room-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #20c997;
}

.room-card h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.room-features h4 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Strategy Sections */
.strategy-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.strategy-section {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #e83e8c;
}

.strategy-section h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.strategy-content h4 {
    color: #1e3c72;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.strategy-content h4:first-child {
    margin-top: 0;
}

/* Bonus Sections */
.bonus-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.bonus-section {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #ffc107;
}

.bonus-section h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.bonus-types h4 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Safety Sections */
.safety-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.safety-section {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #dc3545;
}

.safety-section h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.safety-content h4 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Future Trends */
.future-trends {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.trend-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #6c757d;
}

.trend-card h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.trend-content h4 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Checklist */
.checklist {
    background: #d4edda;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    border-left: 4px solid #28a745;
}

.checklist h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.checklist ul {
    margin-bottom: 0;
}

.checklist li {
    margin-bottom: 0.5rem;
    color: #155724;
}

/* Responsive Design for Bingo Guide */
@media (max-width: 768px) {
    .terms-grid,
    .variations-grid,
    .themed-games,
    .features-grid,
    .mobile-features,
    .room-types-grid,
    .strategy-sections,
    .bonus-sections,
    .safety-sections,
    .future-trends {
        grid-template-columns: 1fr;
    }
    
    .number-layout {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .type-content {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .term-card,
    .variation-card,
    .theme-card,
    .feature-card,
    .mobile-feature,
    .room-card,
    .strategy-section,
    .bonus-section,
    .safety-section,
    .trend-card {
        padding: 1.5rem;
    }
    
    .number-layout {
        grid-template-columns: 1fr;
    }
}

/* Safety Guide Specific Styles */
.emergency-banner {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    text-align: center;
    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.3);
}

.emergency-banner h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.emergency-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.contact-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 8px;
    font-size: 1.1rem;
}

/* Check Grid */
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.check-card {
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.check-card.healthy {
    background: #d4edda;
    border-left: 4px solid #28a745;
}

.check-card.warning {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
}

.check-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.check-card.healthy h3 {
    color: #155724;
}

.check-card.warning h3 {
    color: #856404;
}

.check-card ul {
    margin-bottom: 0;
}

.check-card.healthy li {
    color: #155724;
    margin-bottom: 0.5rem;
}

.check-card.warning li {
    color: #856404;
    margin-bottom: 0.5rem;
}

/* Guide Sections */
.guide-sections {
    display: grid;
    gap: 2rem;
    margin: 2rem 0;
}

.guide-section {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #1e3c72;
}

.guide-section h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.planning-example {
    margin-top: 1rem;
}

.budget-breakdown {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.budget-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid #dee2e6;
}

.budget-item:last-child {
    border-bottom: none;
}

.budget-item.highlight {
    background: #e3f2fd;
    padding: 1rem;
    border-radius: 5px;
    font-weight: 600;
    color: #1e3c72;
    margin-top: 1rem;
}

.limits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.limit-card {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 3px solid #1e3c72;
}

.limit-card h4 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.game-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 1rem;
}

.recommended-games {
    background: #d4edda;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #28a745;
}

.avoid-games {
    background: #f8d7da;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #dc3545;
}

.recommended-games h4 {
    color: #155724;
    margin-top: 0;
    margin-bottom: 1rem;
}

.avoid-games h4 {
    color: #721c24;
    margin-top: 0;
    margin-bottom: 1rem;
}

.recommended-games ul {
    margin-bottom: 0;
}

.avoid-games ul {
    margin-bottom: 0;
}

.recommended-games li {
    color: #155724;
    margin-bottom: 0.5rem;
}

.avoid-games li {
    color: #721c24;
    margin-bottom: 0.5rem;
}

/* Warning Stages */
.warning-stages {
    display: grid;
    gap: 2rem;
    margin: 2rem 0;
}

.stage-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.stage-card.early {
    border-left: 4px solid #ffc107;
}

.stage-card.moderate {
    border-left: 4px solid #fd7e14;
}

.stage-card.severe {
    border-left: 4px solid #dc3545;
}

.stage-card h3 {
    background: #1e3c72;
    color: white;
    padding: 1.5rem;
    margin: 0;
    font-size: 1.3rem;
}

.stage-content {
    padding: 2rem;
}

.stage-content h4 {
    color: #1e3c72;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.stage-content h4:first-child {
    margin-top: 0;
}

.response-box {
    background: #e3f2fd;
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 1rem;
    border-left: 4px solid #2196f3;
}

.response-box.urgent {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
}

.response-box.emergency {
    background: #f8d7da;
    border-left: 4px solid #dc3545;
}

.response-box h4 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.response-box.urgent h4 {
    color: #856404;
}

.response-box.emergency h4 {
    color: #721c24;
}

/* Prevention Strategies */
.prevention-strategies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.strategy-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #17a2b8;
}

.strategy-card h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.strategy-content h4 {
    color: #1e3c72;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.strategy-content h4:first-child {
    margin-top: 0;
}

/* Online Safety */
.online-safety-sections {
    display: grid;
    gap: 2rem;
    margin: 2rem 0;
}

.safety-section {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #6f42c1;
}

.safety-section h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.safety-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 1rem;
}

.safe-sites {
    background: #d4edda;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #28a745;
}

.avoid-sites {
    background: #f8d7da;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #dc3545;
}

.safe-sites h4 {
    color: #155724;
    margin-top: 0;
    margin-bottom: 1rem;
}

.avoid-sites h4 {
    color: #721c24;
    margin-top: 0;
    margin-bottom: 1rem;
}

.limit-tools {
    background: #e3f2fd;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #2196f3;
}

.limit-tools h4 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Family Guide */
.family-guide-sections {
    display: grid;
    gap: 2rem;
    margin: 2rem 0;
}

.family-section {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #e83e8c;
}

.family-section h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.family-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 1rem;
}

.help-methods {
    background: #d4edda;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #28a745;
}

.avoid-methods {
    background: #f8d7da;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #dc3545;
}

.help-methods h4 {
    color: #155724;
    margin-top: 0;
    margin-bottom: 1rem;
}

.avoid-methods h4 {
    color: #721c24;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Help Resources */
.help-resources {
    display: grid;
    gap: 2rem;
    margin: 2rem 0;
}

.resource-section {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid #20c997;
}

.resource-section h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.resource-content h4 {
    color: #1e3c72;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.resource-content h4:first-child {
    margin-top: 0;
}

/* Success Principles */
.success-principles {
    background: #d1ecf1;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    border-left: 4px solid #17a2b8;
}

.success-principles h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1.5rem;
    text-align: center;
}

.principles-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.principle-item {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.principle-item h4 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.principle-item p {
    margin-bottom: 0;
    color: #555;
    font-size: 0.9rem;
}

/* Final Message */
.final-message {
    background: #fff3cd;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    border-left: 4px solid #ffc107;
}

.final-message h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
}

.final-message p {
    margin-bottom: 1rem;
    color: #856404;
    line-height: 1.7;
}

.final-message p:last-child {
    margin-bottom: 0;
}

/* Responsive Design for Safety Guide */
@media (max-width: 768px) {
    .emergency-contacts,
    .check-grid,
    .limits-grid,
    .game-selection,
    .prevention-strategies,
    .safety-content,
    .family-content,
    .principles-list {
        grid-template-columns: 1fr;
    }
    
    .guide-section,
    .stage-content,
    .safety-section,
    .family-section,
    .resource-section {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .emergency-banner {
        padding: 1.5rem;
    }
    
    .emergency-banner h2 {
        font-size: 1.5rem;
    }
    
    .contact-item {
        font-size: 1rem;
    }
    
    .check-card,
    .guide-section,
    .stage-content,
    .strategy-card,
    .safety-section,
    .family-section,
    .resource-section,
    .success-principles,
    .final-message {
        padding: 1.5rem;
    }
}

/* Additional Resources Styles */
.additional-resources,
.strategy-resources,
.bingo-resources,
.safety-resources {
    background: #e3f2fd;
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 1.5rem;
    border-left: 4px solid #2196f3;
}

.additional-resources h3,
.strategy-resources h3,
.bingo-resources h3,
.safety-resources h4 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.additional-resources ul,
.strategy-resources ul,
.bingo-resources ul,
.safety-resources ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.additional-resources li,
.strategy-resources li,
.bingo-resources li,
.safety-resources li {
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
}

.additional-resources li::before,
.strategy-resources li::before,
.bingo-resources li::before,
.safety-resources li::before {
    content: '📚';
    position: absolute;
    left: 0;
    top: 0;
}

.additional-resources a,
.strategy-resources a,
.bingo-resources a,
.safety-resources a {
    color: #1e3c72;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.additional-resources a:hover,
.strategy-resources a:hover,
.bingo-resources a:hover,
.safety-resources a:hover {
    color: #ffd700;
    text-decoration: underline;
}

/* Print Styles */
@media print {
    .header,
    .footer,
    .table-of-contents,
    .related-articles,
    .emergency-banner {
        display: none;
    }
    
    .article-content {
        max-width: none;
    }
    
    .article-content h2 {
        page-break-after: avoid;
    }
    
    .step,
    .tip-card,
    .comparison-card,
    .strategy-card,
    .level-card,
    .bingo-type-card,
    .variation-card,
    .theme-card,
    .stage-card,
    .check-card {
        page-break-inside: avoid;
    }
}