/* ==========================================================================
   Byb. glass: the style layer from the "Byb. Glass Concepts" designs.
   Same layout and colours as app.css; surfaces become frosted glass over soft
   pitch-green, bib-orange and blue light. Loaded after app.css. Remove the
   "glass" class from <html> in index.html to switch it off.
   ========================================================================== */

/* ---- the light behind the glass (fixed to the screen, so it doesn't stretch on long pages) */
html.glass { --paper: rgba(255,255,255,.56); --field: rgba(255,255,255,.62); --chip: rgba(23,32,26,.06);
  --line: rgba(23,32,26,.10); --line-soft: rgba(23,32,26,.07); --field-line: rgba(23,32,26,.15);
  --pitch-soft: rgba(31,107,58,.12); --warn-bg: rgba(227,176,79,.22); --danger-bg: rgba(179,38,30,.09);
  --g-edge: rgba(255,255,255,.85); --g-hi: inset 0 1px 0 rgba(255,255,255,.9); --g-shadow: 0 8px 28px rgba(20,63,36,.10), 0 1px 2px rgba(20,63,36,.06);
  --g-strong: rgba(255,255,255,.74); --g-blur: blur(22px) saturate(170%); }
html.glass, html.glass body { background: #edf2ec; }
html.glass body { background: transparent; }
html.glass body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 34% at 8% 4%, rgba(31,107,58,.36), transparent 70%),
    radial-gradient(55% 30% at 100% 30%, rgba(232,104,31,.28), transparent 70%),
    radial-gradient(60% 32% at 0% 68%, rgba(43,79,138,.24), transparent 70%),
    radial-gradient(60% 30% at 92% 96%, rgba(31,107,58,.24), transparent 70%); }
html.glass[data-theme="dark"] { --paper: rgba(255,255,255,.06); --field: rgba(255,255,255,.05); --chip: rgba(255,255,255,.07);
  --line: rgba(255,255,255,.10); --line-soft: rgba(255,255,255,.06); --field-line: rgba(255,255,255,.16);
  --pitch-soft: rgba(47,138,80,.18); --warn-bg: rgba(227,176,79,.13); --danger-bg: rgba(242,134,126,.12);
  --g-edge: rgba(255,255,255,.13); --g-hi: inset 0 1px 0 rgba(255,255,255,.09); --g-shadow: 0 10px 30px rgba(0,0,0,.35);
  --g-strong: rgba(28,40,32,.72); --g-blur: blur(22px) saturate(160%); background: #09110c; }
html.glass[data-theme="dark"] body::before { background: radial-gradient(70% 34% at 8% 4%, rgba(47,138,80,.50), transparent 70%),
    radial-gradient(55% 30% at 100% 30%, rgba(232,104,31,.30), transparent 70%),
    radial-gradient(60% 32% at 0% 68%, rgba(43,79,138,.42), transparent 70%),
    radial-gradient(60% 30% at 92% 96%, rgba(47,138,80,.38), transparent 70%); }
@media (prefers-color-scheme: dark) {
  html.glass:not([data-theme="light"]) { --paper: rgba(255,255,255,.06); --field: rgba(255,255,255,.05); --chip: rgba(255,255,255,.07);
  --line: rgba(255,255,255,.10); --line-soft: rgba(255,255,255,.06); --field-line: rgba(255,255,255,.16);
  --pitch-soft: rgba(47,138,80,.18); --warn-bg: rgba(227,176,79,.13); --danger-bg: rgba(242,134,126,.12);
  --g-edge: rgba(255,255,255,.13); --g-hi: inset 0 1px 0 rgba(255,255,255,.09); --g-shadow: 0 10px 30px rgba(0,0,0,.35);
  --g-strong: rgba(28,40,32,.72); --g-blur: blur(22px) saturate(160%); background: #09110c; }
  html.glass:not([data-theme="light"]) body::before { background: radial-gradient(70% 34% at 8% 4%, rgba(47,138,80,.50), transparent 70%),
    radial-gradient(55% 30% at 100% 30%, rgba(232,104,31,.30), transparent 70%),
    radial-gradient(60% 32% at 0% 68%, rgba(43,79,138,.42), transparent 70%),
    radial-gradient(60% 30% at 92% 96%, rgba(47,138,80,.38), transparent 70%); }
}
/* the match screen is always dark, whatever the mode */
html.glass .dark-screen { --paper: rgba(255,255,255,.06); --field: rgba(255,255,255,.05); --chip: rgba(255,255,255,.07);
  --line: rgba(255,255,255,.10); --line-soft: rgba(255,255,255,.06); --field-line: rgba(255,255,255,.16);
  --pitch-soft: rgba(47,138,80,.18); --warn-bg: rgba(227,176,79,.13); --danger-bg: rgba(242,134,126,.12);
  --g-edge: rgba(255,255,255,.13); --g-hi: inset 0 1px 0 rgba(255,255,255,.09); --g-shadow: 0 10px 30px rgba(0,0,0,.35);
  --g-strong: rgba(28,40,32,.72); --g-blur: blur(22px) saturate(160%); }
html.glass:has(.dark-screen) { background: #09110c; }
html.glass:has(.dark-screen) body::before { background: radial-gradient(70% 34% at 8% 4%, rgba(47,138,80,.50), transparent 70%),
    radial-gradient(55% 30% at 100% 30%, rgba(232,104,31,.30), transparent 70%),
    radial-gradient(60% 32% at 0% 68%, rgba(43,79,138,.42), transparent 70%),
    radial-gradient(60% 30% at 92% 96%, rgba(47,138,80,.38), transparent 70%); }

.glass .app, .glass .dark-screen { background: transparent; }
/* ---- frosted surfaces */
.glass .card, .glass .btn:not(.ghost):not(.primary):not(.dark):not(.danger-solid), .glass .chip:not(.on):not(.dashed),
.glass .seg, .glass .input, .glass .notice, .glass .stepper button { -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
.glass .card { border: 1px solid var(--g-edge); border-radius: 18px; box-shadow: var(--g-hi), var(--g-shadow); }
.glass .card.flush { border-radius: 18px; }
.glass .list-row, .glass .pl, .glass .trow, .glass .trow.head { background: transparent; }
.glass a.list-row:hover, .glass button.list-row:hover { background: rgba(255,255,255,.08); }
.glass .btn { border-color: var(--g-edge); box-shadow: var(--g-hi), 0 4px 14px rgba(0,0,0,.06); }
.glass .btn.ghost { box-shadow: none; }
.glass .chip { border-color: var(--g-edge); box-shadow: var(--g-hi); }
.glass .chip.dashed { border-color: var(--field-line); box-shadow: none; }
.glass .input { border-color: var(--g-edge); box-shadow: var(--g-hi); }
.glass .seg { border: 1px solid var(--g-edge); }
.glass .seg button.on { background: var(--g-strong); box-shadow: var(--g-hi), 0 2px 8px rgba(0,0,0,.10); }
.glass .stepper button { background: var(--paper); border-color: var(--g-edge); }
/* ---- coloured glass: same colours, lit from within */
.glass .btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--pitch) 86%, #fff), var(--pitch)); border-color: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 22px color-mix(in srgb, var(--pitch) 40%, transparent); }
.glass .btn.dark { background: color-mix(in srgb, var(--ink) 88%, transparent); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 22px rgba(0,0,0,.18); }
.glass .chip.on { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 12px rgba(0,0,0,.14); }
.glass .chip.green.on { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 14px color-mix(in srgb, var(--pitch) 45%, transparent); }
/* the next game card: green glass on a pitch */
.glass .card.green { background: linear-gradient(140deg, rgba(31,107,58,.90), rgba(20,63,36,.80)); border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 14px 40px rgba(20,63,36,.35); }
.glass .card.pitch > .lines * { stroke: rgba(255,255,255,.18); }
.glass .card.pitch > .lines .spot { fill: rgba(255,255,255,.18); }
.glass .btn.inout { background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38), inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.14); }
.glass .btn.inout[aria-pressed="true"] { background: rgba(255,255,255,.94); box-shadow: inset 0 1px 0 #fff, 0 4px 0 rgba(0,0,0,.18), 0 8px 22px rgba(255,255,255,.22); }
/* notices: tinted glass with a light edge */
.glass .notice { border: 1px solid var(--g-edge); box-shadow: var(--g-hi); border-radius: 14px; }
.glass .notice.green { background: rgba(31,107,58,.13); }
.glass .notice.orange { background: rgba(232,104,31,.14); }
.glass .notice.warn { background: rgba(227,176,79,.20); }
.glass .card.warn { background: rgba(227,176,79,.20); }
/* the player card: deep green glass with the tier ring kept */
.glass .pcard { background: linear-gradient(150deg, rgba(31,107,58,.86), rgba(20,63,36,.82)); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
.glass .pcard .stat { background: rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.glass .pcard .pphoto { box-shadow: 0 0 0 3px rgba(255,255,255,.22), 0 10px 30px rgba(232,104,31,.35); }
.glass .bar { background: var(--chip); box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
/* form dots */
.glass .form-dot.W { box-shadow: 0 4px 12px color-mix(in srgb, var(--pitch) 45%, transparent); }
.glass .form-dot.L { background: var(--chip); border: 1px solid var(--g-edge); }
/* tab bar: frosted, with the selected tab glowing */
.glass .tabbar { background: var(--g-strong); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-top: 1px solid var(--g-edge); box-shadow: 0 -8px 30px rgba(0,0,0,.08); }
.glass .tab.on svg { filter: drop-shadow(0 0 8px currentColor); }
.glass .dot { box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 2px 8px rgba(232,104,31,.5); }
/* sheets and dialogs: thick glass over a blurred page */
.glass .scrim { background: rgba(9,17,12,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.glass .sheet, .glass .dialog { background: var(--g-strong); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--g-edge); box-shadow: var(--g-hi), 0 20px 60px rgba(0,0,0,.30); border-radius: 24px; }
/* the match screen: big score tiles as lit team glass */
.glass .dark-screen .card { background: rgba(255,255,255,.06); }
/* ---- vote: one dropdown per award */
.vote-pick select.input { font-weight: 600; }
.vote-pick select.input.unset { color: var(--muted); font-weight: 500; }
.rate-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 84px; gap: 8px; align-items: center; }
.rate-row .n { font: 800 16px var(--display); color: var(--muted); text-align: center; }
.rate-row input.input { text-align: center; font: 800 20px var(--display); }
.glass .team-head.A { background: linear-gradient(180deg, color-mix(in srgb, var(--team-a) 86%, #fff), var(--team-a)); color: var(--team-a-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.glass .team-head.B { background: linear-gradient(180deg, color-mix(in srgb, var(--team-b) 86%, #fff), var(--team-b)); color: var(--team-b-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
/* ---- group settings: bib colour swatches */
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.swatch { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--g-edge, var(--field-line)); background: var(--paper); color: var(--ink); font: 600 14px var(--body); box-shadow: var(--g-hi, none); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
.swatch .chipc { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.14); }
.swatch[aria-pressed="true"] { border: 2px solid var(--ink); padding: 0 11px; }
.swatch[aria-pressed="true"] .chipc { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.teams-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.teams-preview span { border-radius: 10px; padding: 8px 10px; font: 800 15px var(--display); text-transform: uppercase; }

/* ---- dark mode versions (player names in lists read white, not green) */
html.glass[data-theme="dark"] .card.green { background: linear-gradient(140deg, rgba(47,138,80,.62), rgba(16,48,28,.55)); border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 40px rgba(0,0,0,.4); }
html.glass[data-theme="dark"] .notice.green { background: rgba(47,138,80,.18); }
html.glass[data-theme="dark"] .notice.orange { background: rgba(232,104,31,.16); color: #f3c3a0; }
html.glass[data-theme="dark"] .notice.warn { background: rgba(227,176,79,.12); }
html.glass[data-theme="dark"] .card.warn { background: rgba(227,176,79,.12); }
html.glass[data-theme="dark"] .pcard { background: linear-gradient(150deg, rgba(47,138,80,.42), rgba(16,48,28,.55)); }
html.glass[data-theme="dark"] .trow .link-name, html.glass[data-theme="dark"] .list-row .link-name { color: #ffffff; text-decoration-color: rgba(255,255,255,.28); }
@media (prefers-color-scheme: dark) {
  html.glass:not([data-theme="light"]) .card.green { background: linear-gradient(140deg, rgba(47,138,80,.62), rgba(16,48,28,.55)); border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 40px rgba(0,0,0,.4); }
  html.glass:not([data-theme="light"]) .notice.green { background: rgba(47,138,80,.18); }
  html.glass:not([data-theme="light"]) .notice.orange { background: rgba(232,104,31,.16); color: #f3c3a0; }
  html.glass:not([data-theme="light"]) .notice.warn { background: rgba(227,176,79,.12); }
  html.glass:not([data-theme="light"]) .card.warn { background: rgba(227,176,79,.12); }
  html.glass:not([data-theme="light"]) .pcard { background: linear-gradient(150deg, rgba(47,138,80,.42), rgba(16,48,28,.55)); }
  html.glass:not([data-theme="light"]) .trow .link-name, html.glass:not([data-theme="light"]) .list-row .link-name { color: #ffffff; text-decoration-color: rgba(255,255,255,.28); }
}