/* 
  Spanish Dice Poker - Layout Stylesheet
  
  IMPORTANT: This is starter code provided for the main page layout.
  
  You are allowed to modify this file to adjust (ONLY) the layout structure,
  spacing, grid behavior, and responsive breakpoints as needed.
  
  If this layout works well for your implementation, feel free to use it as-is.
  If you prefer a different layout approach, you may completely redesign it.
  
  The key requirement is that your layout must be RESPONSIVE and work well
  on mobile, tablet, and desktop devices. Since this is a skeleton, 
  it might not work perfectly out of the box when you start adding your components.
*/

/* Spanish Dice Poker - Layout Skeleton */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    background-color: #f5f5f5;
}

/* Header */
header {
    padding: 2rem;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

header p {
    color: #666;
    font-size: 1.1rem;
}

/* Introduction Section */
section.intro {
    background-color: white;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #ddd;
    line-height: 1.3;
    font-size: 0.85rem;
}

section.intro h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

section.intro h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 0;
    margin-bottom: 0.15rem;
}

section.intro p {
    margin-bottom: 0.6rem;
    color: #555;
}

section.intro ol,
section.intro ul {
    margin-left: 1.2rem;
    margin-bottom: 1rem;
    padding: 0;
}

section.intro li {
    margin-bottom: 0.15rem;
    color: #555;
}

section.intro hr {
    margin: 1rem 0;
    border: none;
    border-top: 2px solid #ddd;
}

/* Two-column layout for large screens */
@media (min-width: 768px) {
    section.intro {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    section.intro h2 {
        grid-column: 1 / -1;
        margin-bottom: 0.5rem;
    }

    /* The Game (h3 + p) - Column 1 */
    section.intro h3:nth-of-type(2) {
        grid-column: 1;
        grid-row: 2;
    }

    section.intro p:nth-of-type(1) {
        grid-column: 1;
        grid-row: 3;
    }

    /* Hand Rankings (h3 + ol) - Column 2 */
    section.intro h3:nth-of-type(3) {
        grid-column: 2;
        grid-row: 2;
    }

    section.intro ol:nth-of-type(1) {
        grid-column: 2;
        grid-row: 3;
    }

    /* Game Rules (h3 + ul) - Column 1 */
    section.intro h3:nth-of-type(4) {
        grid-column: 1;
        grid-row: 4;
    }

    section.intro ul {
        grid-column: 1;
        grid-row: 5;
    }

    /* Getting Started (h3 + ol) - Column 2 */
    section.intro h3:nth-of-type(5) {
        grid-column: 2;
        grid-row: 4;
    }

    section.intro ol:nth-of-type(2) {
        grid-column: 2;
        grid-row: 5;
    }

    section.intro hr {
        grid-column: 1 / -1;
        grid-row: 6;
        margin: 0.5rem 0;
    }
}

/* Main Content */
main {
    flex: 1;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Game Monitor */
dice-poker-monitor {
    display: block;
    border-bottom: 2px solid #333;
    padding-bottom: 1.5rem;
    margin-bottom: 1rem;
}

/* Game Board */
dice-poker-board {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex: 1;
}

/* Footer */
footer {
    padding: 1.5rem;
    text-align: center;
    border-top: 1px solid #ddd;
    background-color: #f9f9f9;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    main {
        padding: 1rem;
    }

    header h1 {
        font-size: 1.8rem;
    }
}