/* ============================================================
   Paradise Games · Winning Numbers
   Replaces the previous results.css. Palette, radii and pill
   language all come from site.css; no new colours are introduced.

   Everything here is namespaced to .pg- so nothing leaks into the
   4,000-line site sheet. The grids are Kendo widgets: the .pg-grid
   class sits on the grid WRAPPER, so table-level rules are written
   as ".pg-grid table" and cell rules match Kendo's k- classes as
   well as the bare elements.
   ============================================================ */

:root {
    --pg-grad: linear-gradient(19deg,#09539A 14.58%,#00365E 113.42%);
    --pg-accent: #63ADF4;
    --pg-stroke-inactive: #55A2EA;
    --pg-navy: #00365E;
    --pg-navy-dark: #032A44;
    --pg-label: #0A2A4A;
    --pg-gold: #E6BC75;
    --pg-red: #AA170F;
    --pg-panel-bg: rgba(12,66,121,.03);
    --pg-panel-border: 1px solid rgba(4,58,106,.14);
    --pg-hairline: rgba(4,58,106,.10);
    --pg-tint: rgba(12,66,121,.045);
    --pg-radius: 25px;
}

/* ---------- page shell ---------- */
.pg-results { padding: 16px 12px 48px; max-width: 1240px; margin: 0 auto; }
@media (min-width:768px) { .pg-results { padding: 22px 20px 64px; } }
.pg-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
.pg-layout > * { min-width: 0; }

@media (min-width:768px) {
    .pg-layout {
        grid-template-columns: auto minmax(0,1fr);
        grid-template-areas: "tabs tabs" "quick quick" "datesheet datesheet" "controls controls" "filter filter" "table table";
        gap: 12px;
        align-items: center;
    }
    /* The date sheet outgrew its old slot beside the pills once it gained the presets
       and the range toggle: field labels clipped against the banner, Search hung at the
       bottom of the fields with nothing around it, and the extras floated free. It now
       takes its own row below the pills and keeps its card styling, so the fields,
       Search and presets read as one contained control. */
    #datePanel { grid-area: datesheet; justify-self: start; width: 100%; max-width: 660px; }
    #datePanel .pg-date-field { flex: 0 1 180px; }
    .pg-tabs-wrap { grid-area: tabs; }
    .pg-quick { grid-area: quick; justify-self: start; align-self: center; }
    .pg-lotto-controls { grid-area: controls; position: relative; }
    /* desktop: sheets float under their own control instead of pushing the table down */
    .pg-control-group { display: block; position: relative; }
    .pg-lotto-controls .pg-sheet {
        position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
        background: #FFFDF9; border: 1px solid rgba(4,58,106,.18);
        box-shadow: 0 18px 40px rgba(3,42,68,.18); width: max-content; max-width: min(420px,90vw);
    }
    #housePanel { min-width: 320px; }
    .pg-sheet { grid-area: filter; }
    .pg-panel { grid-area: table; }
    .pg-sheet .pg-btn { width: auto; padding: 0 30px; justify-self: start; }
}

/* ---------- tab strip ---------- */
.pg-tabs-wrap { position: relative; min-width: 0; max-width: 100%; }
.pg-tabs {
    display: flex; gap: 10px; min-width: 0; max-width: 100%;
    overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin: 0;
    list-style: none; -webkit-overflow-scrolling: touch;
}
.pg-tabs::-webkit-scrollbar { display: none; }
.pg-tab {
    flex: 0 0 auto; border-radius: var(--pg-radius); border: 2px solid var(--pg-stroke-inactive);
    background: linear-gradient(0deg,rgba(255,255,255,.15) 0%,rgba(0,126,255,.07) 100%);
    box-shadow: 0 1px 1px rgba(10,42,74,.11), 0 4px 8.4px rgba(12,47,84,.08);
    color: var(--pg-label); font-weight: 600; font-size: 15px; padding: 9px 18px;
    text-decoration: none; white-space: nowrap; transition: all .25s ease; cursor: pointer;
    min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
}
@media (min-width:768px) { .pg-tab { font-size: 18px; padding: 8px 24px; } }
.pg-tab[aria-selected="true"] {
    border: 1px solid var(--pg-accent);
    background: linear-gradient(0deg,#09539A 0%,#00365E 100%);
    box-shadow: 0 0 0 1px rgba(8,49,89,.78), 0 4px 8.4px rgba(0,0,0,.37);
    color: #fff;
}
.pg-tab-fade { position: absolute; right: 0; top: 0; bottom: 6px; width: 34px; background: linear-gradient(90deg,rgba(255,255,255,0),#fff 70%); pointer-events: none; }
@media (min-width:1200px) { .pg-tab-fade { display: none; } }
.pg-tab .short { display: none; }
@media (max-width:767px) {
    /* One row, scrolling sideways within the strip (the page itself never scrolls
       sideways). The base rule already sets overflow-x: auto; the fade on the right
       edge stays visible as the cue that more tabs are off-screen. */
    .pg-tabs { gap: 6px; }
    .pg-tab { font-size: 13.5px; padding: 9px 12px; min-height: 44px; }
    .pg-tab .long { display: none; }
    .pg-tab .short { display: inline; }
}

/* ---------- quick date row ---------- */
/* one setting, three states: a segmented track rather than three loose pills */
.pg-quick {
    display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
    border: 1px solid rgba(4,58,106,.22); background: var(--pg-tint);
    width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.pg-quick::-webkit-scrollbar { display: none; }
.pg-quick button {
    flex: 0 0 auto; min-height: 42px; padding: 8px 16px; border-radius: 999px; border: 0;
    background: none; color: var(--pg-navy); font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; white-space: nowrap; transition: all .2s ease;
}
.pg-quick button:hover { background: rgba(12,66,121,.06); }
.pg-quick button[aria-pressed="true"] { background: var(--pg-grad); color: #fff; box-shadow: 0 1px 3px rgba(3,42,68,.28); }
.pg-quick .caret { font-size: 10px; opacity: .75; margin-left: 2px; }

/* ---------- Lotto-only controls: house, and number lookup ---------- */
.pg-lotto-controls { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
/* phone: the group is transparent, so a sheet drops onto its own line under the row */
@media (max-width:767px) {
    .pg-control-group { display: contents; }
    .pg-lotto-controls .pg-ctrl { order: 1; }
    .pg-lotto-controls .pg-sheet { order: 2; flex: 0 0 100%; }
}
/* value-holders, so they read as fields to fill rather than buttons to press */
.pg-ctrl {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px;
    border-radius: 999px; border: 1px solid rgba(4,58,106,.22); background: #fff;
    color: rgba(10,42,74,.78); font: inherit; font-size: 14px; font-weight: 400;
    cursor: pointer; white-space: nowrap; text-align: left;
}
.pg-ctrl .caret, .pg-ctrl .mag { color: rgba(10,42,74,.55); font-size: 12px; }
.pg-ctrl .caret { margin-left: auto; }
.pg-ctrl:hover { border-color: var(--pg-accent); }
.pg-ctrl[aria-expanded="true"] { border-color: var(--pg-accent); box-shadow: 0 0 0 3px rgba(99,173,244,.24); }
.pg-ctrl[data-active="true"] { border-color: var(--pg-accent); background: rgba(9,83,154,.07); color: var(--pg-navy); font-weight: 600; }
#houseBtn { min-width: 170px; }
#numberBtn { min-width: 170px; }

.pg-sheet { border-radius: var(--pg-radius); border: var(--pg-panel-border); background: var(--pg-panel-bg); padding: 14px; display: grid; gap: 12px; }
/* the date pair is two fields and a Search: no title, no close, Today is the reset */
.pg-sheet-inline { padding: 10px 12px; }
/* Flex rather than a fixed grid, because the To field is only present for a range. */
.pg-date-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }
.pg-date-field { flex: 1 1 150px; display: grid; gap: 4px; min-width: 0; }
.pg-date-field[hidden] { display: none; }
.pg-date-error { flex: 1 1 100%; }

/* Presets carry the ranges people actually ask for, so the two-field path is the
   exception rather than the default. */
.pg-date-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pg-chip {
    min-height: 38px; padding: 8px 14px; border-radius: 999px;
    border: 1px solid rgba(4,58,106,.22); background: #fff; color: var(--pg-navy);
    font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.pg-chip:hover { border-color: var(--pg-accent); background: rgba(12,66,121,.05); }
.pg-range-toggle {
    margin-left: auto; min-height: 38px; padding: 8px 4px; border: 0; background: none;
    color: var(--pg-navy); font: inherit; font-size: 13px; text-decoration: underline;
    cursor: pointer; white-space: nowrap;
}
.pg-range-toggle[aria-pressed="true"] { font-weight: 600; }
.pg-date-field > label {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(10,42,74,.7); padding-left: 2px;
}
.pg-date-row .pg-input { padding: 9px 12px; font-size: 14px; min-height: 44px; max-width: 100%; }
/* iOS gives date inputs a large intrinsic width and refuses to shrink them below it,
   so in range mode the To field overflowed the card. Resetting appearance makes iOS
   honour the flex sizing. Scoped to touch devices: on desktop the reset would strip
   the calendar icon for no benefit. */
@media (hover: none), (pointer: coarse) {
    .pg-date-row .pg-input { -webkit-appearance: none; appearance: none; }
}
/* iOS renders the date value in an inner box with its own alignment; keep it centred
   to match how the field looked before the appearance reset. iOS-only pseudo-element,
   ignored everywhere else. */
.pg-date-row .pg-input::-webkit-date-and-time-value { text-align: center; }
.pg-date-row .pg-btn { grid-column: 1 / -1; min-height: 44px; }
@media (min-width:560px) {
    .pg-date-field { flex: 0 1 200px; }
    .pg-date-row .pg-btn { grid-column: auto; width: auto; flex: 0 0 auto; padding: 0 28px; }
}
.pg-sheet[hidden] { display: none; }
.pg-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pg-sheet-head h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--pg-navy); }
.pg-sheet-close { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(4,58,106,.22); background: #fff; color: var(--pg-navy); cursor: pointer; font-size: 14px; }
/* a plain list reads faster than wrapped pills, and every row is the same height */
.pg-house-list { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(4,58,106,.14); border-radius: 16px; overflow: hidden; max-height: 330px; overflow-y: auto; }
.pg-house-list button {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px 16px;
    border: 0; border-bottom: 1px solid var(--pg-hairline); background: none; color: var(--pg-label);
    font: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
}
.pg-house-list button:last-child { border-bottom: 0; }
.pg-house-list button:hover { background: rgba(12,66,121,.04); }
.pg-house-list button .code { font-weight: 700; color: var(--pg-navy); min-width: 42px; }
.pg-house-list button .tick { margin-left: auto; color: var(--pg-navy); opacity: 0; font-size: 13px; }
.pg-house-list button[aria-pressed="true"] { background: rgba(9,83,154,.07); color: var(--pg-navy); font-weight: 600; }
.pg-house-list button[aria-pressed="true"] .tick { opacity: 1; }
/* five digits at most, so the field is sized to its content and Boxed sits beside it */
.pg-number-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pg-input-number { flex: 0 1 118px; width: 118px; min-width: 0; padding: 9px 14px; font-size: 16px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.pg-number-row .pg-check { min-height: 44px; flex: 0 0 auto; }
.pg-number-row .pg-btn { flex: 0 0 auto; width: auto; padding: 0 26px; min-height: 44px; }

/* ---------- fields ---------- */
.pg-field { display: grid; gap: 6px; min-width: 0; }
.pg-field > label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(10,42,74,.75); }
.pg-input { width: 100%; min-width: 0; min-height: 44px; border-radius: 999px; border: 1px solid rgba(4,58,106,.22); background: #fff; padding: 10px 16px; font: inherit; font-size: 15px; color: var(--pg-navy); }
.pg-input:focus { outline: none; border-color: var(--pg-accent); box-shadow: 0 0 0 3px rgba(99,173,244,.28); }
.pg-check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--pg-navy); min-height: 44px; }
.pg-check input { width: 20px; height: 20px; accent-color: #09539A; }
.pg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    min-height: 46px; border-radius: var(--pg-radius); border: 1px solid var(--pg-accent);
    background: var(--pg-grad); box-shadow: 0 0 0 1px rgba(8,49,89,.78), 0 4px 8.4px rgba(0,0,0,.37);
    color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: all .25s ease;
}
.pg-btn:hover { background: linear-gradient(19deg,#0a5fb0 14.58%,#004074 113.42%); }
.pg-btn-quiet { background: none; border: 1px solid rgba(4,58,106,.22); box-shadow: none; color: var(--pg-navy); }
.pg-btn-quiet:hover { background: rgba(12,66,121,.05); }

/* inline validation under the date pair */
.pg-date-error { grid-column: 1 / -1; font-size: 13px; color: var(--pg-red); margin: 0; }
.pg-date-error[hidden] { display: none; }
/* screen-reader-only live region */
.pg-sr-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- results panel + grid ----------
   .pg-grid is on the Kendo grid WRAPPER, so table rules are scoped
   to ".pg-grid table" and header/cell rules also name Kendo's own
   classes, which site.css styles too. results.css loads after
   site.css, so equal-specificity rules resolve here.               */
.pg-panel { border-radius: var(--pg-radius); border: var(--pg-panel-border); background: #fff; overflow: hidden; }
.pg-grid { border: 0; background: none; }
.pg-grid table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
/* Kendo draws vertical cell borders and shades alternate rows. The design has neither:
   one hairline under each row and a flat white table. These selectors carry the same
   specificity as the theme's own, and results.css loads after it. */
.pg-grid .k-table-th, .pg-grid .k-table-td { border-left: 0; border-right: 0; border-top: 0; }
.pg-grid .k-table-td { border-bottom: 1px solid var(--pg-hairline); }
/* The theme tints alternate rows via ".k-grid .k-table-row.k-table-alt-row" (three
   classes), so this has to match that weight to win on load order. */
.pg-grid .k-table-row.k-table-alt-row, .pg-grid .k-table-row.k-alt { background-color: transparent; }
.pg-grid .k-grid-header, .pg-grid .k-table-thead { border: 0; }
.pg-grid th, .pg-grid .k-table-th {
    background: var(--pg-tint); background-color: var(--pg-tint); color: var(--pg-navy);
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--pg-hairline); white-space: nowrap;
}
.pg-grid td, .pg-grid .k-table-td { padding: 14px 16px; border-bottom: 1px solid var(--pg-hairline); color: var(--pg-label); font-size: 15px; vertical-align: middle; }
.pg-grid tbody tr:last-child td { border-bottom: 0; }
.pg-grid .pg-ball { font-size: 20px; font-weight: 600; color: var(--pg-navy); letter-spacing: .02em; white-space: nowrap; }
@media (min-width:768px) {
    /* Fixed tracks so the date and house columns stop stealing the width the numbers
       need. EVERY track is declared: naming only the first two leaves the four ball
       columns to share whatever is left, which at tablet width is not enough and the
       numbers get clipped. Percentages until there is room for the design's px values. */
    .pg-grid-lotto table { table-layout: fixed; }
    .pg-grid-lotto th, .pg-grid-lotto td { box-sizing: border-box; }
    .pg-grid-lotto th:nth-child(1), .pg-grid-lotto td:nth-child(1) { width: 19%; }
    .pg-grid-lotto th:nth-child(2), .pg-grid-lotto td:nth-child(2) { width: 22%; }
    .pg-grid-lotto th:nth-child(n+3), .pg-grid-lotto td:nth-child(n+3) { width: 14.75%; }
    .pg-grid td.pg-c-house { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width:1200px) {
    .pg-grid-lotto th:nth-child(1), .pg-grid-lotto td:nth-child(1) { width: 200px; }
    .pg-grid-lotto th:nth-child(2), .pg-grid-lotto td:nth-child(2) { width: 260px; }
    .pg-grid-lotto th:nth-child(n+3), .pg-grid-lotto td:nth-child(n+3) { width: auto; }
}
.pg-grid .pg-ball:empty::after { content: "—"; color: rgba(10,42,74,.28); font-weight: 400; }
.pg-house-code { font-weight: 700; color: var(--pg-navy); }
.pg-house-name { color: rgba(10,42,74,.66); }
/* Kendo's theme sets white-space:normal on grid cells at (0,2,0), so this has to match it. */
.pg-grid td.pg-c-date, .pg-grid td.pg-c-date .pg-day { white-space: nowrap; }
.pg-time { display: block; color: var(--pg-navy); font-weight: 600; font-size: 15px; white-space: nowrap; line-height: 1.2; }
.pg-day { display: block; font-size: 12.5px; color: rgba(10,42,74,.75); line-height: 1.35; }
.pg-day-solo { font-size: 15px; color: var(--pg-navy); font-weight: 600; }
/* supplementary to the number, so it stays quiet: outline, no fill, no icon */
.pg-watch {
    display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 14px;
    border-radius: 999px; border: 1px solid rgba(4,58,106,.28); background: #fff; color: var(--pg-navy);
    font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer;
}
.pg-watch:hover { border-color: var(--pg-accent); background: rgba(12,66,121,.05); }
.pg-grid td.pg-money { font-weight: 600; color: var(--pg-navy); }
.pg-grid td.pg-money-bonus { color: #8a6a2e; }

/* phone: every row becomes a card, ball cells become tiles */
@media (max-width:767px) {
    .pg-grid table, .pg-grid tbody, .pg-grid tr, .pg-grid td { display: block; width: 100%; }
    .pg-grid thead { display: none; }
    .pg-grid tbody { padding: 10px; display: grid; gap: 10px; }
    .pg-grid tr, .pg-grid .k-table-row, .pg-grid .k-table-alt-row { display: flex; flex-wrap: wrap; gap: 6px; border-radius: 16px; border: 1px solid rgba(4,58,106,.12); background: #fff; padding: 11px 12px 12px; box-shadow: 0 1px 1px rgba(10,42,74,.05); }
    .pg-grid td, .pg-grid .k-table-td { border: 0; padding: 0; }
    .pg-grid td.pg-c-house { flex: 0 0 100%; order: 1; font-size: 15px; line-height: 1.25; }
    .pg-grid td.pg-c-date { flex: 0 0 100%; order: 2; display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; }
    .pg-grid td.pg-c-date .pg-time { display: inline; font-size: 13px; }
    .pg-grid td.pg-c-date .pg-day { display: inline; font-size: 12.5px; }
    .pg-grid td.pg-ball { order: 3; flex: 1 1 0; min-width: 0; background: var(--pg-tint); border-radius: 10px; padding: 10px 4px; text-align: center; font-size: 22px; font-weight: 600; width: auto; }
    .pg-grid td.pg-ball[data-len="2"] { flex-grow: 2; }
    .pg-grid td.pg-ball[data-len="3"] { flex-grow: 3; }
    .pg-grid td.pg-ball[data-len="4"] { flex-grow: 4; }
    .pg-grid td.pg-ball[data-len="5"] { flex-grow: 5; }
    .pg-grid td.pg-ball:empty { background: rgba(12,66,121,.02); flex-grow: 2; }
    .pg-grid td.pg-c-video { order: 4; flex: 0 0 100%; margin-top: 4px; }
    .pg-grid td.pg-c-video .pg-watch { width: 100%; justify-content: center; min-height: 38px; }
    /* Paradise Picks: ball and its Watch button share a column, so the button reads as belonging to that number */
    .pg-grid tr.pg-row-picks { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "d d" "b1 b2" "v1 v2"; gap: 6px; }
    .pg-grid tr.pg-row-picks > td:nth-child(1) { grid-area: d; }
    .pg-grid tr.pg-row-picks > td:nth-child(2) { grid-area: b1; }
    .pg-grid tr.pg-row-picks > td:nth-child(3) { grid-area: v1; }
    .pg-grid tr.pg-row-picks > td:nth-child(4) { grid-area: b2; }
    .pg-grid tr.pg-row-picks > td:nth-child(5) { grid-area: v2; }
    .pg-grid tr.pg-row-picks > td.pg-c-video { margin-top: 0; }
    .pg-grid td.pg-c-wide { flex: 0 0 100%; order: 3; font-size: 15px; }
    .pg-grid td.pg-c-pair { order: 3; flex: 1 1 40%; font-size: 15px; }
    /* cells that are not self-labelling need their header back once thead is hidden */
    .pg-grid td.pg-c-pair[data-label]::before,
    .pg-grid td.pg-c-wide[data-label]::before {
        content: attr(data-label); display: block; font-size: 11px; letter-spacing: .08em;
        text-transform: uppercase; color: rgba(10,42,74,.7); margin-bottom: 2px;
    }
}

/* ---------- pager ----------
   Kendo renders its own pager inside the wrapper; these rules restyle
   its parts. .pg-count replaces it when there is only one page.      */
.pg-grid .k-pager, .pg-pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--pg-hairline); background: var(--pg-tint); border-radius: 0; }
.pg-grid .k-pager-nav, .pg-pager-btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(4,58,106,.22); background: #fff; color: var(--pg-navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; }
.pg-grid .k-pager-nav.k-disabled, .pg-pager-btn[disabled] { opacity: .38; cursor: default; }
.pg-grid .k-pager-input, .pg-pager-page { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--pg-navy); }
.pg-grid .k-pager-input .k-textbox, .pg-grid .k-pager-input input, .pg-pager-page input { width: 56px; min-height: 44px; text-align: center; border-radius: 999px; border: 1px solid rgba(4,58,106,.22); font: inherit; }
.pg-grid .k-pager-info, .pg-pager-info { margin-left: auto; font-size: 13px; color: rgba(10,42,74,.75); }
@media (max-width:767px) {
    .pg-grid .k-pager-info, .pg-pager-info { margin-left: 0; flex: 0 0 100%; order: 5; }
}

/* one page of results needs a count, not a pager */
.pg-count { padding: 12px 16px; border-top: 1px solid var(--pg-hairline); background: var(--pg-tint); font-size: 13px; color: rgba(10,42,74,.75); }

/* ---------- loading ---------- */
.pg-skel-row { display: flex; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--pg-hairline); align-items: center; }
.pg-skel { height: 14px; border-radius: 999px; background: linear-gradient(90deg,rgba(12,66,121,.07) 0%,rgba(12,66,121,.14) 50%,rgba(12,66,121,.07) 100%); background-size: 200% 100%; animation: pg-shimmer 1.25s linear infinite; }
.pg-skel.tall { height: 34px; border-radius: 10px; }
@keyframes pg-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.pg-loading-note { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 13px; color: rgba(10,42,74,.75); }
.pg-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(9,83,154,.25); border-top-color: #09539A; animation: pg-spin .8s linear infinite; }
@keyframes pg-spin { to { transform: rotate(360deg); } }

/* ---------- empty ---------- */
.pg-empty { padding: 44px 24px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.pg-empty-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--pg-tint); display: grid; place-items: center; color: var(--pg-navy); font-size: 20px; }
.pg-empty h3 { margin: 0; font-size: 19px; color: var(--pg-navy); font-weight: 600; }
.pg-empty p { margin: 0; max-width: 40ch; font-size: 14.5px; line-height: 1.55; color: rgba(10,42,74,.66); }
.pg-empty .pg-btn-quiet { width: auto; padding: 10px 22px; }

/* ---------- video modal ----------
   The modal itself stays a Bootstrap modal; these style its inner shell. */
.pg-modal { border-radius: var(--pg-radius); border: var(--pg-panel-border); background: #fff; overflow: hidden; max-width: 720px; box-shadow: 0 24px 60px rgba(3,42,68,.28); }
.pg-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--pg-grad); color: #fff; }
/* The header now names the draw, so it has to be able to shrink and wrap. */
.pg-modal-head h4 { margin: 0; font-size: 16px; font-weight: 600; min-width: 0; }
@media (max-width:575px) { .pg-modal-head h4 { font-size: 14px; line-height: 1.3; } }
.pg-modal-close { width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }
.pg-modal-body { padding: 16px; background: #F4F7FB; }
.pg-video { width: 100%; aspect-ratio: 16/9; border-radius: 14px; background: #0A2A4A; display: grid; place-items: center; color: rgba(255,255,255,.7); font-size: 13px; }
.pg-modal-body video { width: 100%; border-radius: 14px; background: #0A2A4A; display: block; }
.pg-modal-meta { display: flex; gap: 10px; align-items: center; padding: 12px 18px; font-size: 13px; color: rgba(10,42,74,.7); border-top: 1px solid var(--pg-hairline); }

/* ---------- live draw frame ---------- */
.pg-frame { border-radius: var(--pg-radius); border: var(--pg-panel-border); background: var(--pg-panel-bg); padding: 10px; }
.pg-frame-inner { border-radius: 16px; overflow: hidden; background: #fff; }
.pg-frame-inner iframe { display: block; width: 100%; min-height: 900px; border: 0; }
.pg-frame-note { padding: 10px 12px 4px; font-size: 12.5px; color: rgba(10,42,74,.75); }