/* ===================================================================
   UNIVERSAL ARTICLE STYLESHEET
   Master reference for all Penny-Slot-Machines.com articles
   NO WRAPPER REQUIRED - Works directly on elements
   Last Updated: February 2026
   
   USE THIS FOR:
   - All new articles (Australia, Canada, US states, game reviews, etc.)
   - Freelancer article writing
   - Any content pages needing consistent formatting
   
   FEATURES:
   - Canada-style colored boxes (blue, yellow, green, red, gray)
   - Your signature blue italic subheadings
   - Responsive design for mobile
   - Print-friendly styles
   - Utility classes for layouts, comparisons, navigation
   =================================================================== */

/* ===================================================================
   TYPOGRAPHY - HEADINGS
   Direct styling - no wrapper needed
   =================================================================== */
h1 {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 30px;
    line-height: 36px;
    color: #000;
    text-decoration: none;
    margin-top: 3px;
    margin-bottom: 6px;
    text-align: left;
}

h1:first-child {
    margin-top: 0;
}

h2 {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 24px;
    line-height: 26px;
    color: #000;
    text-decoration: none;
    margin-top: 30px;
    margin-bottom: 6px;
    text-align: left;
    -webkit-text-size-adjust: 100%;
}

h2:first-child {
    margin-top: 0;
}

h3 {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 20px;
    line-height: 32px;
    color: #000;
    text-decoration: none;
    margin-top: 7px;
    margin-bottom: 5px;
    text-align: left;
}

h3:first-child {
    margin-top: 0;
}

/* FAQ-style H3 headers - Dark blue for Q&A sections */
h3.faq,
.faq-question {
    color: #309;
    margin-top: 21px;
    margin-bottom: 3px;
}

h4 {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 18px;
    line-height: 28px;
    color: #000;
    text-decoration: none;
    margin-top: 15px;
    margin-bottom: 8px;
    text-align: left;
}

/* ===================================================================
   TYPOGRAPHY - BODY TEXT
   =================================================================== */
p {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-decoration: none;
    margin-top: 6px;
    margin-bottom: 12px;
    text-align: left;
    -webkit-text-size-adjust: 100%;
}

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

/* YOUR SIGNATURE STYLE - Blue Italic Subheading */
.subheading {
    color: #309;
    font-style: italic;
    font-weight: bold;
    font-size: 18px;
    line-height: 26px;
    margin: 9px 0 3px 0;
    display: block;
}

/* ===================================================================
   TYPOGRAPHY - INLINE ELEMENTS
   =================================================================== */
strong {
    font-weight: bold;
    color: #000;
}

em {
    font-style: italic;
}

a:link {
    color: #00f;
    text-decoration: underline;
}

a:visited {
    color: #00f;
    text-decoration: underline;
}

a:hover {
    color: #c00;
    text-decoration: underline;
}

/* ===================================================================
   LISTS
   =================================================================== */
ul,
ol {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 32px;
    color: #000;
    text-decoration: none;
    margin-top: 12px;
    margin-bottom: 15px;
    padding-left: 30px;
    text-align: left;
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

li {
    margin-bottom: 0;
}

/* Nested lists */
ul ul,
ol ol,
ul ol,
ol ul {
    margin-top: 8px;
    margin-bottom: 0;
}

/* ===================================================================
   COLORED BOXES - CANADA STYLE
   Your signature colored callout boxes
   =================================================================== */

/* Quick Summary Box - Light Blue */
.quick-summary {
    background-color: #f0f8ff;
    border-left: 4px solid #309;
    padding: 15px 20px;
    margin: 20px 0;
}

.quick-summary h3 {
    color: #309;
    margin-top: 0;
    font-size: 18px;
}

.quick-summary ul {
    margin: 0;
    padding-left: 20px;
}

.quick-summary li {
    margin-bottom: 8px;
}

/* Quick Facts Box - Same light blue as Quick Summary */
.quick-facts {
    background-color: #f0f8ff;
    border-left: 4px solid #309;
    padding: 15px 20px;
    margin: 20px 0;
}

.quick-facts h4 {
    color: #309;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: bold;
}

.quick-facts ul {
    margin: 0;
    padding-left: 20px;
}

.quick-facts li {
    margin-bottom: 8px;
}

/* Callout/Highlight Box - Yellow/Cream */
.callout-box {
    background-color: #fffbf0;
    border: 1px solid #ffd700;
    border-radius: 4px;
    padding: 15px 20px;
    margin: 20px 0;
}

.callout-box h3,
.callout-box h4 {
    margin-top: 0;
    color: #c60;
}

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

/* Featured Box - Yellow/Gold (like Mega Moolah on Canada page) */
.featured-box {
    background-color: #fffbf0;
    border: 1px solid #ffd700;
    border-radius: 4px;
    padding: 15px 20px;
    margin: 20px 0;
}

.featured-box h4 {
    margin-top: 0;
    color: #c60;
    font-size: 18px;
    font-weight: bold;
}

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

/* Important Note Box - Light Pink/Red */
.important-note {
    background-color: #fff5f5;
    border-left: 4px solid #c00;
    padding: 15px 20px;
    margin: 20px 0;
}

.important-note h3 {
    margin-top: 0;
    color: #c00;
}

.important-note strong {
    color: #c00;
}

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

/* Recent Enforcement Box - Same pink/red as Important Note */
.recent-enforcement {
    background-color: #fff5f5;
    border-left: 4px solid #c00;
    padding: 15px 20px;
    margin: 20px 0;
}

.recent-enforcement strong {
    color: #c00;
}

/* Pro Tip Box - Light Green */
.pro-tip {
    background-color: #f0fff4;
    border-left: 4px solid #28a745;
    padding: 15px 20px;
    margin: 20px 0;
}

.pro-tip h3,
.pro-tip h4 {
    margin-top: 0;
    color: #28a745;
}

.pro-tip strong {
    color: #28a745;
}

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

/* Key Points Box - Light Gray */
.key-points {
    background-color: #f9f9f9;
    padding: 15px 20px 5px 40px;
    margin: 15px 0;
    border-radius: 4px;
}

.key-points h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #000;
}

.key-points ul {
    margin: 0;
    padding-left: 20px;
}

.key-points li {
    margin-bottom: 10px;
}

/* ===================================================================
   ADDITIONAL UTILITY BOXES
   =================================================================== */

/* Info Box - Blue (for important updates/calls to action) */
.info-box {
    margin: 20px 0;
    padding: 15px 20px;
    background-color: #e6f2ff;
    border-left: 4px solid #0066cc;
    border-radius: 4px;
}

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

/* Warning Box - Yellow (for cautions/legal notices) */
.warning-box {
    margin: 20px 0;
    padding: 15px 20px;
    background-color: #fff9e6;
    border-left: 4px solid #ffcc00;
    border-radius: 4px;
}

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

/* Disclaimer Box - Grey (for disclaimers/legal text) */
.disclaimer-box {
    margin: 20px 0;
    padding: 15px 20px;
    background-color: #f5f5f5;
    border-left: 4px solid #0066cc;
    border-radius: 4px;
}

.disclaimer-box p {
    margin: 0;
    line-height: 1.6;
    font-size: 14px;
}

.disclaimer-box p + p {
    margin-top: 10px;
}

/* ===================================================================
   LAYOUT UTILITIES
   =================================================================== */

/* Two Column Layout - For comparisons */
.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 30px 0;
}

.column {
    padding: 20px;
    background-color: #f9fafb;
    border-radius: 6px;
}

.column h3 {
    margin-top: 0;
    color: #374151;
}

/* Comparison Rows - For side-by-side comparisons */
.comparison-row {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #e5e7eb;
}

.comparison-row:nth-child(even) {
    background-color: #f9fafb;
}

.comparison-label {
    font-weight: bold;
    color: #374151;
}

.comparison-value {
    color: #6b7280;
}

/* Info Grid - Generic grid layout for cards/info blocks */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

/* Backwards compatibility - old names still work */
.province-grid,
.state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.info-card {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.info-card h4 {
    margin-top: 0;
    color: #309;
    font-size: 18px;
}

/* Backwards compatibility - old names still work */
.province-card,
.state-card {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.province-card h4,
.state-card h4 {
    margin-top: 0;
    color: #309;
    font-size: 18px;
}

/* ===================================================================
   SPECIAL ELEMENTS
   =================================================================== */

/* Stats/Numbers Highlight */
.stat-highlight {
    font-size: 20px;
    font-weight: bold;
    color: #309;
    display: block;
    margin: 15px 0;
}

/* Checklist Style - Green checkmarks */
.checklist {
    list-style: none;
    padding-left: 0;
}

.checklist li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 12px;
}

.checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
    font-size: 18px;
}

/* Highlight Text Inline - Yellow highlight */
.highlight-text {
    background-color: #fef08a;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Section Divider - Gradient horizontal rule */
.section-divider {
    border: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, #e5e7eb, transparent);
    margin: 50px 0;
}

/* Related Links Box - Light blue gradient for related content navigation */
.related-links-box {
    margin: 40px 0;
    padding: 25px;
    background: linear-gradient(135deg, #e6f2ff 0%, #cce5ff 100%);
    border-radius: 8px;
    color: #000;
}

.related-links-box h3 {
    margin-top: 0;
    color: #309;
}

.related-links-box ul {
    margin: 15px 0 0 0;
    padding-left: 20px;
}

.related-links-box a {
    color: #00f;
    font-weight: bold;
}

.related-links-box a:hover {
    color: #c00;
}

/* Backwards compatibility - old name still works */
.state-nav-box {
    margin: 40px 0;
    padding: 25px;
    background: linear-gradient(135deg, #e6f2ff 0%, #cce5ff 100%);
    border-radius: 8px;
    color: #000;
}

.state-nav-box h3 {
    margin-top: 0;
    color: #309;
}

.state-nav-box ul {
    margin: 15px 0 0 0;
    padding-left: 20px;
}

.state-nav-box a {
    color: #00f;
    font-weight: bold;
}

.state-nav-box a:hover {
    color: #c00;
}

/* ===================================================================
   BUTTONS & LINKS
   =================================================================== */

/* CTA Buttons */
.cta-button {
    display: inline-block;
    padding: 12px 30px;
    margin: 10px 0;
    background-color: #0066cc;
    color: #fff !important;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    text-decoration: none !important;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #0052a3;
    text-decoration: none !important;
}

/* Jump Link - Internal page anchor */
.jump-link {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    margin: 20px 0;
}

/* ===================================================================
   IMAGES
   =================================================================== */
img {
    max-width: 100%;
    height: auto;
}

.header-image {
    margin: 20px 0;
    border-radius: 8px;
}

/* ===================================================================
   TEXT UTILITIES
   =================================================================== */

/* Small Text / Fine Print */
.small-text {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.small-text em {
    font-style: italic;
}

/* Text Alignment */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* Margin Utilities */
.margin-top-large {
    margin-top: 40px;
}

.margin-bottom-large {
    margin-bottom: 40px;
}

/* ===================================================================
   SECTIONS & STRUCTURE
   =================================================================== */
section {
    margin-bottom: 30px;
}

section:last-of-type {
    margin-bottom: 20px;
}

/* FAQ Section Styling */
.faq-section {
    margin: 30px 0;
}

.faq-section .faq-question {
    font-size: 18px;
    margin-top: 25px;
    margin-bottom: 3px;
}

/* State Links Grid */
.state-links {
    margin: 30px 0;
}

.state-links ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.state-links li {
    margin: 5px 0;
}

/* Article Footer */
.article-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
    font-size: 14px;
    color: #666;
    text-align: center;
}

.article-footer em {
    font-style: italic;
}

/* Placeholder/Coming Soon Styling */
.placeholder-notice {
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px dashed #ccc;
    border-radius: 4px;
    text-align: center;
    color: #666;
    font-style: italic;
}

/* ===================================================================
   RESPONSIVE DESIGN - TABLETS
   =================================================================== */
@media screen and (max-width: 768px) {
    h1 {
        font-size: 28px;
        line-height: 34px;
    }
    
    h2 {
        font-size: 22px;
        line-height: 28px;
        margin-top: 30px;
    }
    
    h3 {
        font-size: 19px;
        line-height: 30px;
    }
    
    h4 {
        font-size: 17px;
        line-height: 26px;
    }
    
    .two-column {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .province-grid,
    .state-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   RESPONSIVE DESIGN - MOBILE
   =================================================================== */
@media screen and (max-width: 480px) {
    h1 {
        font-size: 24px;
        line-height: 30px;
    }
    
    h2 {
        font-size: 20px;
        line-height: 26px;
        margin-top: 30px;
    }
    
    h3 {
        font-size: 18px;
        line-height: 28px;
    }
    
    h4 {
        font-size: 16px;
        line-height: 24px;
    }
    
    p,
    ul,
    ol {
        font-size: 15px;
        line-height: 24px;
    }
    
    ul,
    ol {
        padding-left: 25px;
    }
    
    /* Mobile adjustments for boxes */
    .subheading {
        font-size: 17px;
    }
    
    .quick-summary,
    .quick-facts,
    .callout-box,
    .featured-box,
    .important-note,
    .recent-enforcement,
    .pro-tip,
    .key-points,
    .info-box,
    .warning-box,
    .disclaimer-box {
        padding: 12px 15px;
        margin: 15px 0;
    }
    
    .province-grid,
    .state-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .stat-highlight {
        font-size: 18px;
    }
    
    .state-nav-box {
        padding: 20px;
    }
    
    .comparison-row {
        flex-direction: column;
        gap: 10px;
    }
}

/* ===================================================================
   SLOT REVIEW SPECIFIC STYLES
   For Vegas slots, online slots, game reviews
   =================================================================== */

/* Game Stats Card - For RTP, Volatility, Max Win, etc. */
.game-stats {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    border-radius: 8px;
    color: white;
    margin: 20px 0;
}

.game-stats h3 {
    margin-top: 0;
    color: white;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.game-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.game-stat-row:last-child {
    border-bottom: none;
}

.game-stat-label {
    font-weight: bold;
    color: #fef08a;
}

.game-stat-value {
    color: white;
}

/* Slot Info Grid - 2-column grid for stats */
.slot-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.slot-info-card {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
    border: 2px solid #309;
}

.slot-info-card h4 {
    margin-top: 0;
    color: #309;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.slot-info-card .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #000;
    display: block;
    margin: 10px 0;
}

.slot-info-card .stat-label {
    font-size: 14px;
    color: #666;
}

/* RTP Badge - Colored by percentage */
.rtp-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
}

.rtp-high {
    background-color: #d4edda;
    color: #155724;
}

.rtp-medium {
    background-color: #fff3cd;
    color: #856404;
}

.rtp-low {
    background-color: #f8d7da;
    color: #721c24;
}

/* Volatility Indicator */
.volatility {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.volatility-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
}

.volatility-dot.active {
    background-color: #309;
}

/* Game Features Box */
.game-features {
    background-color: #e8f4f8;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.game-features h3 {
    margin-top: 0;
    color: #309;
}

.game-features ul {
    margin: 10px 0 0 0;
    padding-left: 25px;
}

.game-features li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.game-features li::marker {
    color: #309;
    font-weight: bold;
}

/* Provider Info Box */
.provider-info {
    background: linear-gradient(to right, #f9f9f9, #ffffff);
    padding: 15px 20px;
    border-left: 4px solid #309;
    border-radius: 4px;
    margin: 20px 0;
}

.provider-logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 10px;
}

.provider-info strong {
    color: #309;
}

/* Where to Play Box - Call to action */
.where-to-play {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    padding: 20px;
    border-radius: 8px;
    color: white;
    margin: 30px 0;
    text-align: center;
}

.where-to-play h3 {
    margin-top: 0;
    color: white;
}

.where-to-play .play-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: white;
    color: #28a745;
    font-weight: bold;
    text-decoration: none;
    border-radius: 25px;
    margin-top: 10px;
    transition: transform 0.2s;
}

.where-to-play .play-button:hover {
    transform: scale(1.05);
    color: #28a745;
}

/* Pros and Cons - Two column */
.pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.pros,
.cons {
    padding: 20px;
    border-radius: 8px;
}

.pros {
    background-color: #d4edda;
    border-left: 4px solid #28a745;
}

.pros h4 {
    margin-top: 0;
    color: #155724;
}

.pros ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.pros li {
    color: #155724;
    margin-bottom: 8px;
}

.pros li::marker {
    content: "✓ ";
    color: #28a745;
    font-weight: bold;
}

.cons {
    background-color: #f8d7da;
    border-left: 4px solid #dc3545;
}

.cons h4 {
    margin-top: 0;
    color: #721c24;
}

.cons ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.cons li {
    color: #721c24;
    margin-bottom: 8px;
}

.cons li::marker {
    content: "✗ ";
    color: #dc3545;
    font-weight: bold;
}

/* Rating Display - Star rating */
.rating-display {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    margin: 15px 0;
}

.rating-stars {
    color: #ffd700;
    letter-spacing: 2px;
}

.rating-number {
    font-weight: bold;
    color: #309;
}

/* Similar Games Grid */
.similar-games {
    margin: 30px 0;
}

.similar-games h3 {
    color: #309;
}

.similar-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.similar-game-card {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e0e0e0;
    transition: transform 0.2s;
}

.similar-game-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.similar-game-card img {
    max-width: 100%;
    border-radius: 4px;
    margin-bottom: 10px;
}

.similar-game-card h4 {
    margin: 10px 0 5px 0;
    font-size: 16px;
    color: #309;
}

.similar-game-card .game-provider {
    font-size: 14px;
    color: #666;
}

/* Game Specs Table - Alternative to stat cards */
.game-specs {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: white;
}

.game-specs th {
    background-color: #309;
    color: white;
    padding: 12px;
    text-align: left;
    font-weight: bold;
}

.game-specs td {
    padding: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.game-specs tr:last-child td {
    border-bottom: none;
}

.game-specs tr:nth-child(even) {
    background-color: #f9f9f9;
}

.game-specs .spec-label {
    font-weight: bold;
    color: #309;
    width: 40%;
}

/* Bonus Features List - Styled list */
.bonus-features {
    background: linear-gradient(to right, #fff9e6, #ffffff);
    padding: 20px;
    border-left: 4px solid #ffd700;
    border-radius: 4px;
    margin: 20px 0;
}

.bonus-features h4 {
    margin-top: 0;
    color: #c60;
}

.bonus-features ul {
    margin: 10px 0 0 0;
    padding-left: 25px;
}

.bonus-features li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.bonus-features li strong {
    color: #c60;
}

/* Release Info Badge */
.release-info {
    display: inline-block;
    background-color: #e8f4f8;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    color: #309;
    font-weight: bold;
    margin: 10px 0;
}

/* Game Screenshot Container */
.game-screenshots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.game-screenshots img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Payline Indicator */
.paylines {
    display: inline-block;
    background-color: #309;
    color: white;
    padding: 5px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
}

/* Max Win Highlight */
.max-win {
    font-size: 28px;
    font-weight: bold;
    color: #28a745;
    text-align: center;
    padding: 15px;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-radius: 8px;
    margin: 20px 0;
}

.max-win-label {
    display: block;
    font-size: 14px;
    color: #155724;
    font-weight: normal;
    margin-top: 5px;
}

/* ===================================================================
   RESPONSIVE - SLOT STYLES
   =================================================================== */
@media screen and (max-width: 768px) {
    .slot-info-grid {
        grid-template-columns: 1fr;
    }
    
    .pros-cons {
        grid-template-columns: 1fr;
    }
    
    .similar-games-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .game-stat-row {
        flex-direction: column;
        gap: 5px;
    }
}

@media screen and (max-width: 480px) {
    .game-stats {
        padding: 15px;
    }
    
    .slot-info-card .stat-value {
        font-size: 20px;
    }
    
    .similar-games-grid {
        grid-template-columns: 1fr;
    }
    
    .game-screenshots {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   PRINT STYLES
   =================================================================== */
@media print {
    h2 {
        page-break-after: avoid;
    }
    
    h3,
    h4 {
        page-break-after: avoid;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 12px;
    }
    
    /* Hide navigation and interactive elements in print */
    .state-nav-box,
    .related-links-box,
    .cta-button,
    .where-to-play {
        display: none;
    }
}

/* ===================================================================
   END OF UNIVERSAL ARTICLE STYLESHEET
   =================================================================== */