/* responsive.css - Responsive layout for the World Cup Board (index.html).
   Loaded AFTER styles.css. The single page (<body data-layout="auto">) adapts by
   orientation x device size.

   Four quadrants = orientation (portrait | landscape) x device size (desktop | mobile).
   "Mobile" = the screen's SHORT side <= 600px, so phones count as mobile in BOTH
   orientations (portrait: max-width:600px; landscape: max-height:600px). Verified:
   iPhone 14 Pro Max (430x932), Galaxy S22 (360x780), Galaxy A16 (360x800). */

/* ============================================================
   Soccer Pitch background by orientation.
   Landscape uses the horizontal pitch from styles.css (unchanged).
   Portrait swaps to the rotated portrait pitch SVG below.
   ============================================================ */
@media (orientation: portrait) {
    [data-theme="pitch"] body {
        background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-20%20-20%20720%201090%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20x%3D%22-20%22%20y%3D%22-20%22%20width%3D%22720%22%20height%3D%221090%22%20fill%3D%22%232f7d33%22%2F%3E%3Cg%20transform%3D%22translate(-185%2C185)%20rotate(90%20525%20340)%22%3E%3Cg%3E%3Crect%20x%3D%220%22%20y%3D%22-80%22%20width%3D%22150%22%20height%3D%22840%22%20fill%3D%22%233a9440%22%2F%3E%3Crect%20x%3D%22300%22%20y%3D%22-80%22%20width%3D%22150%22%20height%3D%22840%22%20fill%3D%22%233a9440%22%2F%3E%3Crect%20x%3D%22600%22%20y%3D%22-80%22%20width%3D%22150%22%20height%3D%22840%22%20fill%3D%22%233a9440%22%2F%3E%3Crect%20x%3D%22900%22%20y%3D%22-80%22%20width%3D%22150%22%20height%3D%22840%22%20fill%3D%22%233a9440%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.82)%22%20stroke-width%3D%224%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221050%22%20height%3D%22680%22%2F%3E%3Cline%20x1%3D%22525%22%20y1%3D%220%22%20x2%3D%22525%22%20y2%3D%22680%22%2F%3E%3Ccircle%20cx%3D%22525%22%20cy%3D%22340%22%20r%3D%2291.5%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22138.5%22%20width%3D%22165%22%20height%3D%22403%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22248.4%22%20width%3D%2255%22%20height%3D%22183.2%22%2F%3E%3Crect%20x%3D%22885%22%20y%3D%22138.5%22%20width%3D%22165%22%20height%3D%22403%22%2F%3E%3Crect%20x%3D%22995%22%20y%3D%22248.4%22%20width%3D%2255%22%20height%3D%22183.2%22%2F%3E%3Cpath%20d%3D%22M165%2C266.87%20A91.5%2091.5%200%200%201%20165%2C413.13%22%2F%3E%3Cpath%20d%3D%22M885%2C266.87%20A91.5%2091.5%200%200%200%20885%2C413.13%22%2F%3E%3Cpath%20d%3D%22M10%2C0%20A10%2010%200%200%201%200%2C10%22%2F%3E%3Cpath%20d%3D%22M1040%2C0%20A10%2010%200%200%200%201050%2C10%22%2F%3E%3Cpath%20d%3D%22M1050%2C670%20A10%2010%200%200%200%201040%2C680%22%2F%3E%3Cpath%20d%3D%22M10%2C680%20A10%2010%200%200%200%200%2C670%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22rgba(255%2C255%2C255%2C0.82)%22%20stroke%3D%22none%22%3E%3Ccircle%20cx%3D%22525%22%20cy%3D%22340%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22340%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22940%22%20cy%3D%22340%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat, #2f7d33;
        background-attachment: fixed;
    }
}

/* ============================================================
   DESKTOP PORTRAIT  (portrait, short side > 600px)
   Mirrors the former vertical.html overrides.
   ============================================================ */
@media (orientation: portrait) and (min-width: 601px) {
    .board-header { font-size: 1.8rem; padding: 1.2rem 1.5rem; }
    .slide-head h1 { font-size: 3rem; }
    .standings-grid,
    .matches-grid { grid-template-columns: 1fr; }
    .standings-table { font-size: 1.5rem; }
    .match-team { font-size: 1.7rem; }
    .match-score { font-size: 2.2rem; }
    #headlines-ticker { font-size: 1.8rem; }
    .clock-time { font-size: 1.8rem; }
    .lower-third { --lt-tab-width: 300px; --lt-tab-height: 4.2rem; }
}

/* ============================================================
   MOBILE (shared) - both phone orientations. Scale fonts DOWN.
   ============================================================ */
@media (orientation: portrait) and (max-width: 600px),
       (orientation: landscape) and (max-height: 600px) {
    .board-header { font-size: 1rem; padding: 0.5rem 0.8rem; }
    .panel-label { font-size: 0.72rem; }
    #carousel-container { top: 2.6rem; bottom: 5.4rem; padding: 0 0.7rem; }
    .slide-head h1 { font-size: 1.5rem; }
    .slide-sub { font-size: 0.8rem; }
    .slide-head { margin-bottom: 0.6rem; }

    .group-title { font-size: 1.05rem; }
    .standings-group { padding: 0.6rem 0.7rem; }
    .standings-table { font-size: 0.95rem; }
    .standings-table th { font-size: 0.68rem; }
    .standings-table td { padding: 0.3rem 0.2rem; }
    .st-flag { font-size: 1rem; margin-right: 0.3rem; }

    .result-card { padding: 0.7rem 0.85rem; }
    .result-team-line, .up-team-line { font-size: 1.05rem; gap: 0.45rem; }
    .result-score { font-size: 1.4rem; }
    .result-flag { font-size: 1.05rem; }
    .result-flag .flag-img { height: 1rem; }
    .result-day-title { font-size: 1.05rem; }
    .goal, .up-record, .up-scorer, .result-record { font-size: 0.78rem; }
    .goal-min { font-size: 0.72rem; min-width: 2rem; }

    .match-card { padding: 0.6rem 0.8rem; }
    .match-team { font-size: 1rem; }
    .match-score { font-size: 1.2rem; }
    .match-meta, .result-meta { font-size: 0.78rem; }

    .bracket-round { min-width: 120px; }
    .bracket-round-title { font-size: 0.72rem; }
    .bracket-team { font-size: 0.68rem; padding: 0.18rem 0.3rem; }
    .bracket-team .seed { font-size: 0.6rem; width: 1.2rem; }
    .bracket-name { font-size: 0.72rem; }
    .bracket-vround .bracket-round-title { font-size: 1rem; }
    .bracket-vround .bracket-name { font-size: 0.9rem; }

    #headlines-ticker { font-size: 1rem; }
    .headline-item { margin-right: 2rem; }
    #status-display { font-size: 0.82rem; }
    .clock-time { font-size: 1.05rem; }
    .clock-date { font-size: 0.68rem; }
    .lower-third { --lt-tab-width: 140px; --lt-tab-height: 2.7rem; }
    .offline-banner { font-size: 0.82rem; padding: 0.25rem 0.6rem; }

    #settings-panel { width: 100%; max-width: 100%; padding: 1rem; }
    #settings-toggle { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }
    .message-card { padding: 1.2rem 1.3rem; }
    .message-card h1 { font-size: 1.4rem; }
    .message-card p, .setup-steps { font-size: 0.9rem; }
}

/* ============================================================
   MOBILE PORTRAIT  (portrait, short side <= 600px) - single column.
   ============================================================ */
@media (orientation: portrait) and (max-width: 600px) {
    .standings-grid,
    .matches-grid,
    .results-list { grid-template-columns: 1fr; }
    .bracket-vmatches { grid-template-columns: 1fr; }
    .slide-head h1 { font-size: 1.4rem; }
}

/* ============================================================
   MOBILE LANDSCAPE  (landscape, short side <= 600px) - tight height.
   ============================================================ */
@media (orientation: landscape) and (max-height: 600px) {
    #carousel-container { top: 2.3rem; bottom: 4.4rem; }
    .board-header { padding: 0.3rem 0.8rem; }
    .lower-third { --lt-tab-height: 2.3rem; }
    .results-list,
    .standings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   TOUCH (responsive page only): the auto-scroll is transform-based (same smooth
   behavior as the landscape board) and is interrupted by manual drag/wheel, which
   carousel.js handles directly. We disable the browser's own touch scrolling/bounce
   on the scrolling area so JS fully controls movement, and keep horizontal swipes
   (page changes, app.js setupTouchGestures) responsive.
   ============================================================ */
html, body { overscroll-behavior: none; }
.scroll-viewport { touch-action: none; }