/**
 * MRDR Application Styles - Main Entry Point
 * 
 * CSS Architecture Overview:
 * - css/app.css (this file) - Main application styles
 * - css/features/ - Feature-specific styles (completion-screens, puzzle-creator)
 * - css/design-system/ - Design system components and utilities
 * - css/legacy/ - Temporary backup during migration
 * 
 * This file contains core application layout and game-specific styles.
 * Component styles are imported via design-system/design-system.css
 */

/* CSS Reset and Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
}

:root {
    /* Using semantic tokens instead of direct color variables */
    /* These tokens are defined in design-system/theme-system.css */

    /* Spacing - Using design-system variables from layout.css */
    /* Removed duplicate spacing variables - now using:
       --space-xs: 4px
       --space-sm: 8px  
       --space-md: 16px
       --space-lg: 24px
       --space-xl: 32px
       --space-xxl: 48px
       from design-system/layout.css */

    /* Sizing */
    --header-height: 2rem;
    --hand-height: 150px;
    --hand-height-mobile: 120px; /* Added for mobile */
    --hand-height-small: 100px; /* Added for smallest screens */
    --border-radius: 8px;
    --grid-gap: 0.5rem;
}

body {
    font-family: 'Lora', serif; /* Updated to Lora */
    background-color: var(--body-background-color); /* Use semantic token */
    color: var(--text-primary-color); /* Use semantic token */
    line-height: 1.5;
}

/* App Container */
.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}

/* Header */
.header {
    background-color: var(--header-background-color); /* Use semantic token */
    box-shadow: 0 2px 4px var(--shadow-color); /* Use semantic token */
    padding: 0 var(--space-md);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed; /* Change from sticky to fixed */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.3s ease;
}

/* Header hiding class for mobile scroll behavior */
.header-hidden {
    transform: translateY(-100%);
}

.header h1 {
    font-size: .75rem;
    margin: 0;
}

.controls {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

/* Hamburger button styles moved to design-system/components/button/button.css */

/* Mobile Navigation Container (Hidden on Desktop) */
.mobile-nav {
    display: flex; /* Keep flex for desktop layout */
}

/* Main Content */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* Ensure flex items can shrink below their content size */
}

/* Tableau Grid */
.tableau, .tableau-grid-container { /* Renamed from .tableau-section in design to match old structure somewhat */
    flex: 1;
    padding: 0; /* Remove padding completely */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Changed from auto to hidden */
    position: relative; /* Added for stats positioning */
    border: none;
    outline: none;
}

/* Card styles moved to design-system/components/card/card.css */

/* Hand Section */
.hand-section { /* Maps to old .hand-deck-container somewhat */
    height: var(--hand-height);
    background-color: var(--surface-background-color); /* Use semantic token */
    /* border-top: 0px solid var(--surface-border-color);  */
    padding: var(--space-md);
    display: flex;
    gap: var(--space-md);
}

.deck { /* Maps to old .deck-container */
    display: flex;
    align-items: center;
}

.deck-icon { /* Maps to old .deck */
    background-color: var(--deck-background-color); /* Use semantic token */
    color: var(--deck-text-color); /* Use semantic token */
    padding: var(--space-sm);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer; /* Added for interaction */
    box-shadow: 0 2px 4px var(--shadow-color); /* Use semantic token */
}
.deck-icon:hover {
    background-color: var(--deck-hover-background-color); /* Use semantic token */
}

.deck-count { /* Maps to old .deck-count span */
    font-weight: bold;
}

/* Hand container styles moved to design-system/components/card/card.css */

/* Cards container styles moved to design-system/components/card/card.css */

/* Card component styles moved to design-system/components/card/card.css */

/* Button styles moved to design-system/components/button/button.css */

/* Select Dropdown */
select { /* Maps to old .control-select */
    padding: 0.5rem; /* Adjusted padding */
    /* border: 1px solid var(--form-control-border-color); */
    border-radius: var(--border-radius);
    background-color: var(--surface-background-color); /* Use semantic token */
    color: var(--text-primary-color); /* Use semantic token */
    min-width: 150px;
    cursor: pointer; /* Added */
}

select:focus {
    outline: none;
    border-color: var(--form-control-focus-border-color); /* Use semantic token */
    box-shadow: 0 0 0 2px var(--form-control-focus-shadow-color); /* Use semantic token */
}

/* Stats */
.stats { /* Maps to old .game-stats */
    font-size: .75rem;
    background-color: var(--stats-background-color); /* Use semantic token */
    padding: var(--space-xs) var(--space-md); /* Reduced padding */
    border-radius: 0; /* Remove border radius */
    box-shadow: 0 1px 2px var(--shadow-color); /* Use semantic token */
    display: flex;
    justify-content: center; /* Center stats */
    gap: var(--space-lg); /* Increase gap slightly */
    width: 100%; /* Take full width */
    border-bottom: 1px solid var(--stats-border-color); /* Use semantic token */
    margin-bottom: 0; /* No margin */
}

.stat {
    font-weight: 500;
}

/* Desktop/Mobile Utilities */
.desktop-only {
    display: flex; /* Default to flex since the control container uses flex layout */
}

/* Popover styles moved to design-system/components/popover/popover.css */

/* Popover responsive styles moved to design-system/components/popover/popover.css */

.tile-text-rules {
  font-style: italic;
}

/* New Layout Styles for MRDR Theme */
.game-container {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.game-header {
    display: flex;
    align-items: center;
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    color: var(--logo-text-color); /* Fixed to use semantic token */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.nav-buttons-group {
    display: flex;
    align-items: center;
    gap: var(--space-md); /* 16px */
    margin-left: auto;
}

.logo {
    font-family: var(--mrdr-logo-family, 'Notable', sans-serif);
    font-size: var(--mrdr-logo-size, 18px);
    font-weight: var(--mrdr-logo-weight, 400);
    letter-spacing: var(--mrdr-logo-spacing, 0.05em);
    text-transform: uppercase;
    color: var(--logo-text-color); /* Fixed to use semantic token */
}

/* Button styles moved to design-system/components/button/button.css */

.game-content {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    column-gap: var(--space-lg);
    padding: 0 var(--space-xxl) var(--space-md);
    height: 100%;
    overflow: hidden;
    align-items: start;
}

/* Large Desktop */
@media (min-width: 1440px) {
    .game-content {
        grid-template-columns: 480px minmax(0, 1fr);
        padding: 0 var(--space-xxl) var(--space-lg);
    }
    
    .puzzle-title-display {
        font-size: 2.5rem;
    }
}

.left-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    color: var(--stats-text-color); /* Fixed to use semantic token */
    max-height: 100%;
    align-self: start;
}

.right-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    align-items: flex-start; /* Changed from center to flex-start */
    justify-content: flex-start; /* Changed from center to flex-start */
    flex: 1;
    min-width: 0; /* Allow proper shrinking in grid */
}


.puzzle-title-display {
    font-size: 2rem;
    font-weight: 700;
    color: var(--puzzle-title-color); /* Fixed to use semantic token */
    margin-bottom: 0;
}

.player-hand-area {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

.player-hand-area h2, .game-stats-area h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--stats-text-color); /* Fixed to use semantic token */
    margin-bottom: var(--space-sm);
}

/* Styles for when player-hand-area contains the intro description */
.player-hand-area.intro-description-mode {
    display: flex; /* Ensure it's a flex container to manage its child */
    flex-direction: column; /* Stack children vertically */
    overflow: hidden; /* Prevent its own scrollbars if child handles it */
}

.player-hand-area.intro-description-mode > hand-grid {
    flex-grow: 1; /* Allow hand-grid to take up available space */
    display: flex; /* Make hand-grid a flex container for its .puzzle-description-intro child */
    min-height: 0; /* Important for flex children to shrink properly */
}

/* The .puzzle-description-intro div itself will have overflow-y: auto from inline styles */
/* and height: 100% to fill its parent (the hand-grid) */

/* Puzzle Description Intro Styling */
.puzzle-description-intro {
    color: var(--puzzle-description-text-color, #333);
    font-size: 15px; /* Updated from 14px */
    line-height: 1.6;
    text-align: left;
    width: 100%;
    overflow-y: auto;
    font-family: 'Lora', serif;
    box-sizing: border-box;
    flex: 1;
}

.ds-hand-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    min-height: 100px;
    align-items: flex-start;
    overflow-y: auto;
}

.ds-hand-container > tableau-tile {
    width: 160px;
    height: 160px;
}

.stats-display {
    display: flex;
    /* flex-wrap: wrap; */ /* Removed to keep label and wrapper on one line */
    /* gap: var(--space-lg); */ /* Replaced by justify-content */
    align-items: center;
    justify-content: space-between; /* Distribute space between label and wrapper */
    width: 100%; /* Ensure it takes full width of its container */
}

.stat-values-wrapper {
    display: flex;
    justify-content: space-around; /* Distribute stat items evenly */
    align-items: center;
    flex-grow: 1; /* Allow this wrapper to take up available space */
}

.stat-label {
    font-size: 1.2rem;
    font-weight: 400;
}

.stat-item {
    display: flex;
    flex-direction: column; 
    align-items: center;
    /* gap: 0; */ /* Gap will be handled by .stat-value-line margin and sublabel margin */
    font-size: 1.25rem;
    font-weight: 700;
}

/* Enable clicking on the deck stat for hand shuffle functionality */
#deck-stat-clickable {
    pointer-events: auto;
    cursor: pointer;
}

#deck-stat-clickable.disabled {
    cursor: default;
    pointer-events: none;
}

#deck-stat-clickable.enabled {
    cursor: pointer;
}

.stat-value-line {
    display: flex;
    align-items: center; /* Vertically align icon and count */
    gap: var(--space-xs); /* Space between icon and count */
}

.stat-item .icon-placeholder, .stat-item .icon-fa { 
    font-size: 1rem;
}

.stat-sublabel {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: lowercase;
    margin-top: -10px; /* Fine-tune vertical alignment */
}

#game-tableau { 
    display: flex;
    width: 100%;
    height: auto;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

/* Constrain tableau-grid to fit within available space */
#game-tableau tableau-grid {
    display: block;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    max-width: min(100%, 600px); /* Limit max size on larger screens */
    margin: 0; /* Align to start, no auto centering */
}


.action-buttons-container {
    display: flex;
    gap: var(--space-md);
    flex-shrink: 0;
}

/* Action button styles moved to design-system/components/button/button.css */

.right-column .grid {
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1/1;
}

/* Dropdown styles moved to design-system/components/dropdown/dropdown.css */

/* Visual feedback for dragging tiles out of tableau to return to deck */
.dragging-tableau-tile {
    cursor: move;
}

.dragging-tableau-tile * {
    cursor: move !important;
}

/* Hide grid space labels when game is paused */
tableau-grid[data-paused="true"] tableau-cell .cell-label {
    display: none !important;
}

/* Tile interaction states moved to design-system/components/popover/popover.css */

/* Improve touch responsiveness for draggable tiles */
tableau-tile[draggable="true"] {
    -webkit-touch-callout: none; /* Disable callout on long-press */
    -webkit-user-select: none; /* Disable text selection */
    touch-action: none; /* Prevent scrolling when touching tiles */
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
}

/* Mobile-specific dragging improvements */
@media (max-width: 768px) {
    tableau-tile {
        /* Reduce delay for drag initiation on mobile */
        cursor: move;
    }
    
    /* Visual feedback handled by JavaScript for better control */
    tableau-tile.dragging-source {
        opacity: 0.5 !important;
    }
    
    /* Ensure hand-grid doesn't interfere with touch events */
    hand-grid {
        pointer-events: none;
    }
    
    hand-grid tableau-tile {
        pointer-events: auto !important;
        touch-action: none !important;
    }
}

/* Modal styles moved to design-system/components/modal/modal.css */

/* Responsive Design */

/* Tablet Landscape and Small Desktop */
@media (min-width: 769px) and (max-width: 1024px) {
    .game-content {
        grid-template-columns: 350px minmax(0, 1fr);
        column-gap: var(--space-md);
        padding: 0 var(--space-lg) var(--space-md);
    }
    
    .left-column {
        max-width: 350px;
    }
    
    .puzzle-title-display {
        font-size: 1.5rem;
    }
    
    .ds-hand-container > tableau-tile {
        width: 140px;
        height: 140px;
    }
}

/* Specific adjustments for landscape orientation on tablets */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .game-container {
        height: 100vh;
        overflow: hidden;
    }
    
    .game-content {
        padding-top: 0;
        padding-bottom: var(--space-sm);
    }
    
    .game-header {
        padding-top: var(--space-sm);
        padding-bottom: var(--space-sm);
    }
    
    .player-hand-area {
        max-height: 40vh;
    }
}

/* Tablet Portrait and Mobile Landscape */
@media (max-width: 768px) {
    body {
        overflow: auto; /* Allow scrolling on mobile */
    }
    
    /* Style stats for tablet portrait */
    .game-stats-area {
        width: 100%;
        padding: var(--space-sm) 0;
        margin-bottom: var(--space-md);
        background: transparent;
        border: none;
    }
    
    .stats-display {
        font-size: 0.875rem;
        justify-content: center;
    }
    
    .stat-item {
        font-size: 1rem;
        flex-direction: row;
        align-items: center;
    }
    
    .stat-sublabel {
        display: inline;
        margin: 0;
        margin-left: 4px;
    }
    
    .tableau-grid {
        min-width: min(600px, calc(100vw - var(--space-md) * 2));
    }

    /* Hide desktop-only elements on mobile */
    .desktop-only {
        display: none !important;
    }
    
    .main {
        padding-top: 0; /* Remove the padding as we've added it to body */
        padding-bottom: var(--hand-height-mobile); /* Add padding to account for fixed hand section */
    }

    .hand-section {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 900;
        height: var(--hand-height-mobile); /* Use mobile height */
        padding: var(--space-sm); /* Reduce padding */
        box-shadow: 0 -2px 5px var(--shadow-color); /* Use semantic token */
    }

    .card {
        min-width: 120px; /* Smaller cards on tablet */
        max-width: 180px; /* Limit max width */
    }

    .header {
        padding: var(--space-sm);
        align-items: center; /* Center items vertically */
    }

    /* Hamburger button responsive styles moved to design-system/components/button/button.css */

    /* Style the Mobile Nav Container */
    .mobile-nav {
        display: none; /* Hide the nav container by default on mobile */
        position: absolute;
        top: 100%; /* Position below the header */
        left: 0;
        right: 0;
        background-color: var(--surface-background-color); /* Use semantic token */
        box-shadow: 0 4px 6px var(--shadow-color); /* Use semantic token */
        z-index: 1000;
        padding: var(--space-md);
        border-top: 1px solid var(--surface-border-color); /* Use semantic token */
    }

    .mobile-nav.is-open {
        display: block; /* Show the nav when open */
    }

    /* Style controls inside the mobile nav */
    .mobile-nav .controls {
        display: flex; /* Use flex for items inside */
        flex-direction: column; /* Stack items vertically */
        align-items: stretch; /* Stretch items */
        gap: var(--space-md); /* Space out items */
        margin-top: 0; /* Reset margin */
        width: 100%;
    }

     .mobile-nav .controls select {
        width: 100%;
        text-align: center;
     }
     /* Button responsive styles moved to design-system/components/button/button.css */

     /* Action button responsive styles moved to design-system/components/button/button.css */
}

/* Mobile Landscape */
@media (max-width: 768px) and (orientation: landscape) {
    .game-container {
        height: 100vh;
        overflow: hidden;
    }
    
    .game-header {
        padding-top: var(--space-xs);
        padding-bottom: var(--space-xs);
    }
    
    .game-content {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        padding: 0 var(--space-md) var(--space-xs);
    }
    
    .left-column {
        max-width: 280px;
        gap: var(--space-xs);
        padding: 0;
    }
    
    .puzzle-title-display {
        font-size: 1.25rem;
        margin-bottom: var(--space-xs);
    }
    
    .player-hand-area {
        max-height: 30vh;
        min-height: 100px;
    }
    
    .ds-hand-container > tableau-tile {
        width: 100px;
        height: 100px;
    }
    
    .action-buttons-container {
        gap: var(--space-xs);
    }
    
    .action-buttons-container tableau-button {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.875rem;
    }
    
    .stats-display {
        font-size: 0.875rem;
    }
    
    #game-tableau {
        padding: 0;
    }
}

/* Mobile Portrait */
@media (max-width: 480px) {

    body {
     
    }

    .tableau-grid {
        min-width: min(360px, calc(100vw - var(--space-sm) * 2));
        max-width: 100%;
    }

    .game-header {
        padding-top: var(--space-sm);
        padding-bottom: var(--space-sm);
    }

    .main {
        padding-bottom: var(--hand-height-small); /* Adjust padding for smaller fixed hand */
    }

    .game-container {
        width: 100%;
        height: unset;
        overflow-y:scroll;
    }

    .game-content {
        display: flex;
        padding-bottom: var(--space-md);
        flex-direction: column;
        row-gap: var(--space-xs);
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
        padding-top: var(--space-sm); /* Add top padding */
        height:unset;
    }
    
    /* Style stats for mobile */
    .game-stats-area {
        width: 100%;
        margin-bottom: var(--space-xs);
        background: transparent;
        border: none;
    }
    
    /* Style action buttons when moved to right column on mobile */
    .right-column .action-buttons-container {
        width: 100%;
        margin-bottom: var(--space-md);
        justify-content: center;
    }
    
    /* Compact stats display on mobile */
    .stats-display {
        font-size: 0.75rem;
        gap: var(--space-xs);
        justify-content: center; /* Center the stats */
    }
    
    .stat-label {
        display: inline; /* Show "Rules:" label on mobile */
        font-size: 0.875rem; /* Same size as stat items */
        font-weight: 600; /* Same weight as stat items */
        margin-right: var(--space-md);
    }
    
    .stat-values-wrapper {
        justify-content: auto;
    }
    
    .stat-item {
        flex-direction: row; /* Horizontal layout on mobile */
        align-items: center;
        gap: var(--space-xs);
        font-size: 0.875rem;
    }
    
    .stat-value-line {
        gap: 4px;
        align-items: center;
    }
    
    .stat-item .icon-fa {
        font-size: 0.75rem;
    }
    
    .stat-sublabel {
        display: inline; /* Show sublabels inline on mobile */
        font-size: 0.75rem;
        font-weight: 400;
        text-transform: lowercase;
        margin: 0;
        margin-left: 2px;
    }
    
    /* Stack order: Stats, then Tableau, then controls */
    .right-column {
        order: -1; /* Move tableau after stats */
        /* Inherit justify-content: flex-start from base styles */
        height: auto; /* Let height be determined by content */
        max-height: none; /* Remove max-height constraint */
        width: 100%; /* Full width on mobile */
        padding: 0; /* Remove padding to use full width */
    }

    .left-column {
        order: 1; /* Move controls below */
        max-width: 100%; /* Full width on mobile */
        min-width: 0; /* Allow it to shrink properly */
        width: 100%;
        padding-left: var(--space-md);
        padding-right: var(--space-md);
        gap: var(--space-xs);
       }

    #game-tableau {
        width: 100%; /* Full width on mobile */
        padding: 0; /* Remove padding for full width */
    }
    
    #game-tableau tableau-grid {
        width: 100%; /* Full width of parent */
        max-width: 100%; /* Override the base max-width */
    }

    .tableau {
        padding: var(--space-xs); /* Reduce padding */
        flex: 1 1 auto; /* Allow tableau to shrink */
    }

    .hand-section {
        padding: var(--space-xs) var(--space-xs) 0; /* Reduce padding, especially at bottom */
        height: var(--hand-height-small); /* Even less height on smallest screens */
        min-height: var(--hand-height-small); /* Ensure minimum height */
    }

    .card {
        min-width: 90px; /* Even smaller cards to fit more in view */
        max-width: 120px; /* Limit max width */
        padding: var(--space-xs);
        margin-bottom: var(--space-xs); /* Add bottom margin */
    }

    .cards {
        gap: var(--space-xs); /* Reduce gap between cards */
        padding-right: var(--space-lg); /* Add extra padding to indicate scrolling */
    }
    
    /* Add fading edge to indicate more content */
    .hand::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 20px;
        background: linear-gradient(to right, transparent, var(--surface-background-color)); /* Use semantic token */
        pointer-events: none; /* Allow clicks to pass through */
    }

    .card-title, .tile-title {
        font-size: 0.8rem;
    }

    .card-content {
        font-size: 0.75rem;
    }
    .tile-content {
        font-size: 0.7rem; /* Slightly smaller text on very small screens */
    }

    .controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }
    select {
        width: 100%;
    }
    /* Button responsive styles moved to design-system/components/button/button.css */
}