/* Phase 1 (Mobile UI Overhaul): base safeguards
   Keep this file minimal and low-risk. */

/* Prevent accidental full-page horizontal scrolling from overly-wide children.
   Horizontal scrolling should be handled by specific containers (e.g. tables). */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Media elements should never exceed their container width. */
img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

/* Player Trends: cap chart height on small screens */
@media (max-width: 768px) {
    #pt-chart {
        height: 60vh !important;
        min-height: 320px;
    }
}

/* Predictable sizing reduces overflow surprises (esp. with padding + width%). */
*,
*::before,
*::after {
    box-sizing: border-box;
}