/* =====================
   RESPONSIVE STYLES
   ===================== */

/* Responsive */
@media (max-width: 850px) {
    #gameInterface { padding: 10px; gap: 10px; }
    .main-area { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
    .sidebar { max-height: 180px; flex-direction: row; }
    .score-list { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; }
    .score-item { min-width: 140px; }
    .turn-card { display: none; }
    .game-grid { gap: 8px; padding: 10px; }
    .tile-icon { font-size: 1.3rem; }
    .tile-label { font-size: 0.65rem; }
    .action-grid { grid-template-columns: repeat(2, 1fr); }
    .tile-number { font-size: 1.3rem; }

    .menu-grid { grid-template-columns: repeat(3, 1fr); }
    .shop-grid { grid-template-columns: repeat(2, 1fr); }

    .hud-group { gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
    .hud-btn { padding: 6px 10px; font-size: 0.85rem; }
    .game-logo { font-size: 1rem; }
}

/* Print Styles */
@media print {
    @page {
        size: A4;
        margin: 1.5cm 1cm;
    }
    
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    body {
        visibility: hidden;
        background: white !important;
    }
    
    body * {
        visibility: hidden;
    }
    
    #detailOverlay, 
    #detailOverlay * {
        visibility: visible;
    }
    
    #detailPopup {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        border: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }
    
    .detail-popup-close, 
    .export-controls, 
    .ai-history-panel, 
    #aiHistoryContent {
        display: none !important;
    }
    
    .detail-popup-header {
        border-bottom: 3px solid #333 !important;
        color: #000 !important;
        background: white !important;
        padding: 10px 0 !important;
        margin-bottom: 15px !important;
    }
    
    .detail-popup-content {
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        background: white !important;
        color: #000 !important;
    }
    
    .detail-popup-content * {
        background: transparent !important;
        color: #000 !important;
        visibility: visible;
    }
    
    .game-detail-container {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Export HTML specific styles */
    .detail-popup-content div[style*="font-family: Arial"] {
        visibility: visible !important;
        display: block !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }
    
    .detail-popup-content div[style*="font-family: Arial"] * {
        visibility: visible !important;
        display: block !important;
    }
    
    .detail-popup-content h1, 
    .detail-popup-content h2, 
    .detail-popup-content h3, 
    .detail-popup-content h4 {
        color: #000 !important;
        page-break-after: avoid;
    }
    
    .detail-popup-content table {
        page-break-inside: avoid;
    }
    
    .detail-popup-content tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
    
    .detail-popup-content thead {
        display: table-header-group;
    }
    
    .detail-popup-content tfoot {
        display: table-footer-group;
    }
    
    .game-detail-header {
        border-bottom: 1px solid #999;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
    
    .game-detail-section {
        page-break-inside: avoid;
        margin-bottom: 15px;
    }
    
    .game-detail-section h4 {
        border-bottom: 1px solid #666;
        padding-bottom: 5px;
        margin-bottom: 10px;
        font-size: 14px;
    }
    
    .game-final-scores {
        page-break-inside: avoid;
    }
    
    .game-score-row {
        page-break-inside: avoid;
        border-bottom: 1px dotted #ccc;
        padding: 5px 0;
    }
    
    .game-category-grid {
        page-break-inside: avoid;
    }
    
    .ai-cat-tag {
        border: 1px solid #333 !important;
        color: #000 !important;
        background: white !important;
    }
    
    /* Player performance table */
    .game-player-detail {
        page-break-inside: avoid;
    }
    
    .player-stats-table {
        page-break-inside: avoid;
        width: 100%;
    }
    
    .player-stats-table table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .player-stats-table th, 
    .player-stats-table td {
        border: 1px solid #333 !important;
        padding: 4px 8px !important;
        text-align: left;
    }
    
    .player-stats-table th {
        background: #f0f0f0 !important;
    }
    
    /* Question log */
    .game-questions-log {
        page-break-before: always;
    }
    
    .question-log-entry {
        page-break-inside: avoid;
        border-bottom: 1px dotted #ccc;
        padding: 8px 0;
    }
    
    .question-log-question {
        font-weight: 600;
        margin-bottom: 5px;
    }
    
    .question-log-meta {
        font-size: 12px;
        color: #333;
    }
    
    /* Ensure all nested elements are visible */
    .detail-popup-content > * {
        visibility: visible;
    }
    
    /* Print container styles for body.printing-game-report */
    body.printing-game-report #printContainer {
        position: static !important;
        left: auto !important;
        top: auto !important;
        z-index: auto !important;
        width: 100% !important;
        max-width: none !important;
        padding: 20px !important;
        margin: 0 !important;
        background: white !important;
        visibility: visible !important;
        display: block !important;
        overflow: visible !important;
    }
    
    body.printing-game-report #printContainer * {
        visibility: visible !important;
    }
    
    /* Hide everything except print container when printing game report */
    body.printing-game-report > *:not(#printContainer) {
        display: none !important;
        visibility: hidden !important;
    }
    
    body.printing-game-report #printContainer > * {
        display: block !important;
    }
}