/* Stadium event hub (Tournaments tab after registration). Functional styling from the site tokens + mockup class names;
   the visual pass comes after. Everything is scoped under .pg-event (the scouting dialog carries it too). */
.pg-event, .ev-scrim {
  --van: #6fa8dc; --due: #f07a6a; --str: #5fd0a0; --flx: #b79cf5;
  --evlive: #3fa9ff;
  --D: "Big Shoulders Display", var(--f), sans-serif;
}
.pg-event { color: var(--tx); }
.pg-event a { color: inherit; text-decoration: none; }
.pg-event button { font: inherit; color: inherit; }
.pg-event h1, .pg-event h2, .pg-event h3 { margin: 0; }

/* event header */
.pg-event .ev { display: block; position: relative; overflow: hidden; border-bottom: 1px solid var(--ln); }
.pg-event .ev img.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; opacity: .55; }
.pg-event .ev::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #060910f2 0%, #060910d0 38%, #06091040 75%), linear-gradient(0deg, var(--bg) 0%, #0b0f1700 60%); pointer-events: none; }
.pg-event .ev-in { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 40px var(--gut) 0; }
.pg-event .kick { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font: 700 13px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.pg-event .live { display: inline-flex; align-items: center; gap: 8px; color: var(--evlive); }
.pg-event .live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--evlive); box-shadow: 0 0 0 4px #3fa9ff33; }
.pg-event .ev h1 { font: 800 clamp(56px, 9vw, 104px)/.86 var(--D); text-transform: uppercase; color: #f6eedd; margin-top: 14px; letter-spacing: 0; }
.pg-event .ev h1 span { color: var(--gold); }
.pg-event .ev-facts { display: flex; flex-wrap: wrap; gap: 18px 40px; margin-top: 22px; padding-bottom: 26px; }
.pg-event .ev-facts div { display: grid; }
.pg-event .ev-facts small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.pg-event .ev-facts b { font: 700 28px/1.1 var(--D); }
.pg-event .tabs { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); display: flex; gap: 6px; align-items: end; overflow-x: auto; white-space: nowrap; }
.pg-event .tabs a { padding: 14px 18px; font: 700 15px/1 var(--D); letter-spacing: .12em; text-transform: uppercase; color: #aeb8c8; border-bottom: 3px solid transparent; }
.pg-event .tabs a.on { color: #fff; border-color: var(--gold); }
.pg-event .tabs a.cq { margin-left: auto; color: var(--gold); border: 1px solid #d4af3755; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; background: #d4af3710; }
.pg-event .tabs a.cq.on { border-bottom-color: var(--gold); background: #d4af371c; }
.pg-event .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.pg-event .sec { padding-top: 44px; }
.pg-event .sec:last-child { padding-bottom: 60px; }
.pg-event .sec-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 6px 18px; margin-bottom: 18px; }
.pg-event .sec-h h2 { font: 800 40px/1 var(--D); text-transform: uppercase; color: #f6eedd; letter-spacing: 0; }
.pg-event .sec-h p { color: var(--mut); font-size: 14px; }
.pg-event .lbl { font: 700 12px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pg-event .more { margin-top: 14px; font-weight: 600; color: var(--gold); }
.pg-event .ev-empty, .pg-event .ev-note { color: var(--mut); padding: 18px; border: 1px dashed var(--ln2); border-radius: 10px; }
.pg-event .ev-stale { max-width: var(--max); margin: 12px auto 0; padding: 10px var(--gut); color: #ffd58a; background: #ffb84d14; border-left: 3px solid #ffb84d; font-size: 14px; }

.pg-event .ev-champ { display: grid; gap: 4px; margin-top: 16px; }
.pg-event .ev-champ b { font: 800 clamp(34px, 5vw, 56px)/1 var(--D); text-transform: uppercase; color: var(--gold); }
.pg-event .ev-champ small { color: var(--mut); }

/* status strip */
.pg-event .strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--ln2); border-radius: 10px; overflow: hidden; background: var(--s1); }
.pg-event .strip > div { padding: 18px 22px; border-right: 1px solid var(--ln); }
.pg-event .strip > div:last-child { border: 0; }
.pg-event .strip small { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.pg-event .strip b { font: 800 34px/1.1 var(--D); }
.pg-event .bar { height: 6px; background: #ffffff14; border-radius: 4px; margin-top: 10px; overflow: hidden; }
.pg-event .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--evlive), #7cc4ff); }

/* teams */
.pg-event .teams { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pg-event .teams.four { grid-template-columns: repeat(4, 1fr); }
.pg-event .tm { display: block; background: var(--s1); border: 1px solid var(--ln); border-radius: 10px; overflow: hidden; }
.pg-event .tm-h { display: flex; gap: 10px; align-items: center; padding: 12px; background: linear-gradient(90deg, #1b2536, #151d2b); }
.pg-event .av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; background: #2a3446; display: grid; place-items: center; font: 800 13px/1 var(--f); color: #fff; }
.pg-event .tm-h b { font: 700 18px/1 var(--D); letter-spacing: .02em; display: block; }
.pg-event .tm-h small { color: var(--mut); font-size: 11px; }
.pg-event .tm ol { list-style: none; margin: 0; padding: 8px 12px 12px; display: grid; gap: 5px; }
.pg-event .tm li { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.pg-event .tm li.empty { color: #4d586b; }
.pg-event .tm li.empty::before { content: ""; width: 16px; height: 2px; background: #33405a; }
.pg-event .tm .mem { display: flex; gap: 8px; align-items: center; width: 100%; background: none; border: 0; padding: 2px 0; cursor: pointer; text-align: left; min-width: 0; }
.pg-event .tm .mem:hover .mn { text-decoration: underline; }
.pg-event .tm .mem .mn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-event .tm .mem small { flex: none; margin-left: 6px; color: var(--fnt); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.pg-event .tm .champ { padding: 4px 12px 14px; font: 700 20px/1.1 var(--D); }
.pg-event .rd { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.pg-event .R-Vanguard { background: var(--van); }
.pg-event .R-Duelist { background: var(--due); }
.pg-event .R-Strategist { background: var(--str); }
.pg-event .R-Flex { background: var(--flx); }
.pg-event .tm li.new { color: #fff; }
.pg-event .tm li.new .mem small { display: none; }
.pg-event .tm li.new::after { content: "JUST PICKED"; margin-left: auto; font: 700 9px/1 var(--f); letter-spacing: .1em; color: var(--evlive); }
.pg-event .tm li.new { animation: ev-sweep 1.4s ease-out; }
@keyframes ev-sweep { from { background: #d4af3733; } to { background: transparent; } }

/* leaders + awards cards */
.pg-event .lead { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pg-event .ld { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--ln2); min-height: 200px; background: var(--s1); }
.pg-event .ld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.pg-event .ld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 15%, #0b0f1780 60%, #0b0f1730); }
.pg-event .ld > div { position: relative; z-index: 1; padding: 16px; display: flex; flex-direction: column; height: 100%; min-height: 200px; justify-content: end; }
.pg-event .ld .lbl { margin-bottom: auto; }
.pg-event .ld h3 { font: 800 30px/1 var(--D); text-transform: uppercase; letter-spacing: 0; }
.pg-event .ld p { color: #c9d0db; font-size: 13px; }
.pg-event .ld .big { font: 800 40px/1 var(--D); color: var(--gold); }
.pg-event .ld .staff { margin-top: 6px; font: 700 10px/1 var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.pg-event .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pg-event .chips a, .pg-event .chips button { padding: 8px 14px; border: 1px solid var(--ln2); border-radius: 999px; font-size: 13px; color: var(--mut); background: none; cursor: pointer; }
.pg-event .chips .on { background: var(--gold); color: #11141a; border-color: var(--gold); }
.pg-event .lead-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.pg-event .lead-table th, .pg-event .lead-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--ln); }
.pg-event .lead-table th { color: var(--mut); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.pg-event .lead-table button { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 700; }

/* bracket */
.pg-event .bk { display: flex; gap: 26px; background: var(--s1); border: 1px solid var(--ln); border-radius: 12px; padding: 20px; overflow-x: auto; }
.pg-event .bk-col { min-width: 210px; flex: 1 0 210px; }
.pg-event .bk-side { margin: 0 0 8px; font: 700 12px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pg-event .bk h4 { margin: 0 0 10px; font: 700 13px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.pg-event .mt { border: 1px solid var(--ln2); border-radius: 8px; overflow: hidden; margin-bottom: 14px; background: #0d131d; }
.pg-event .mt > div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 14px; }
.pg-event .mt > div + div { border-top: 1px solid var(--ln); }
.pg-event .mt .w { color: #fff; font-weight: 700; }
.pg-event .mt .w b { color: var(--gold); }
.pg-event .mt .l { color: #7d889b; }
.pg-event .mt.is-live { border-color: var(--evlive); box-shadow: 0 0 0 3px #3fa9ff22; }
.pg-event .mt .lv { display: block; font: 700 10px/1 var(--f); letter-spacing: .12em; color: var(--evlive); padding: 6px 10px; background: #3fa9ff14; }
.pg-event .mt .edit { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--ln); cursor: pointer; font: 600 12px/1 var(--f); color: var(--gold); padding: 9px 10px; background: #d4af3710; }
.pg-event .mt.is-trace { border-color: var(--gold); box-shadow: 0 0 0 3px #d4af3722; }
.pg-event .mt.gf { border-color: var(--gold); }
.pg-event .bk-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.pg-event .bk-tools select, .pg-event .sheet select, .pg-event .sheet input, .pg-event .sheet textarea { background: #0d131d; color: var(--tx); border: 1px solid var(--ln2); border-radius: 8px; padding: 9px 10px; font: inherit; }
.pg-event .btn2 { padding: 10px 16px; border-radius: 8px; border: 1px solid var(--ln2); background: var(--s2); cursor: pointer; font-weight: 700; font-size: 14px; }
.pg-event .btn2.g { background: var(--gold); color: #11141a; border-color: var(--gold); }
.pg-event .sheet { position: fixed; inset: 0; z-index: 50; background: #05080dcc; display: grid; place-items: center; padding: 16px; }
.pg-event .sheet > div { width: min(480px, 100%); max-height: 100%; overflow: auto; background: var(--s1); border: 1px solid var(--ln2); border-radius: 14px; padding: 20px; display: grid; gap: 12px; }
.pg-event .sheet label { display: grid; gap: 4px; font-size: 13px; color: var(--mut); }
.pg-event .sheet .step { display: flex; align-items: center; gap: 10px; }
.pg-event .sheet .step b { font: 800 28px/1 var(--D); min-width: 24px; text-align: center; color: var(--tx); }
.pg-event .sheet .err { color: var(--loss); font-size: 13px; }
.pg-event .sch-draw { margin-bottom: 28px; }
.pg-event .sch-draw .season-brackets { margin-top: 8px; }
.pg-event .sch-dayh { margin: 24px 0 8px; font: 800 24px/1 var(--D); text-transform: uppercase; }
.pg-event .sch-row-m { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--ln); font-size: 14px; align-items: center; }
.pg-event .sch-row-m .chip { font: 700 11px/1 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.pg-event .sch-row-m .chip.live { color: var(--evlive); }
.pg-event .rounds-seg { display: none; }

/* Captains' Quarters: the event header collapses to the tab bar so the whole pool fits one screen */
.pg-event.ev-compact .ev img.art, .pg-event.ev-compact .ev h1, .pg-event.ev-compact .ev-facts, .pg-event.ev-compact .kick { display: none; }
.pg-event.ev-compact .ev-in { padding: 0; }
.pg-event.ev-compact .ev { background: #0d1219; }
.pg-event.ev-compact .ev::after { display: none; }
.pg-event.ev-compact .tabs { max-width: 1392px; }
.pg-event.ev-compact .tabs a { padding: 12px 14px; }
.pg-event.ev-compact .wrap { max-width: 1392px; padding: 0; }
.pg-event.ev-compact .sec { padding-top: 0; }
.pg-event .cqbar { position: sticky; top: 0; z-index: 5; background: #0d1219f2; border-bottom: 1px solid var(--ln2); }
.pg-event .cqbar-in { max-width: 1392px; margin: 0 auto; padding: 10px var(--gut); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.pg-event .cqbar h2 { font: 800 28px/1 var(--D); text-transform: uppercase; color: #f6eedd; letter-spacing: 0; }
.pg-event .cqbar .counts { font-size: 13px; color: var(--mut); }
.pg-event .cqbar .counts b { color: #fff; }
.pg-event .cqbar .search { flex: 0 1 260px; height: 42px; padding: 0 12px; border: 1px solid var(--ln2); border-radius: 8px; background: #0d131d; color: var(--tx); font: inherit; font-size: 15px; }
.pg-event .seg { display: flex; border: 1px solid var(--ln2); border-radius: 8px; overflow: hidden; }
.pg-event .seg button { padding: 10px 14px; font-size: 13px; color: var(--mut); background: none; border: 0; cursor: pointer; }
.pg-event .seg button.on { background: var(--s3); color: #fff; }
.pg-event .w2 { max-width: 1392px; margin: 0 auto; padding: 0 var(--gut) 40px; }
.pg-event .myteam { display: flex; align-items: stretch; gap: 6px; margin: 12px 0 10px; overflow-x: auto; }
.pg-event .myteam .lab { display: flex; flex-direction: column; justify-content: center; padding: 0 14px 0 0; min-width: 150px; }
.pg-event .myteam .lab b { font: 800 22px/1 var(--D); text-transform: uppercase; }
.pg-event .myteam .lab select { background: #0d131d; color: var(--tx); border: 1px solid var(--ln2); border-radius: 6px; padding: 4px; max-width: 180px; }
.pg-event .ms { flex: 1 0 110px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 7px; background: var(--s2); font-size: 12.5px; font-weight: 700; min-width: 0; border: 1px solid var(--ln); }
.pg-event .ms small { display: block; font-weight: 500; color: var(--mut); font-size: 10.5px; }
.pg-event .ms.e { border-style: dashed; color: #4d586b; background: transparent; font-weight: 500; }
.pg-event .ms.cap { border-color: #d4af3766; }
.pg-event .mix { display: flex; gap: 5px; align-items: center; padding-left: 10px; font-size: 11px; color: var(--mut); }
.pg-event .mix b { font: 800 20px/1 var(--D); }
.pg-event .rows { display: grid; gap: 8px; }
.pg-event .rrow { display: grid; grid-template-columns: 112px 1fr; background: #0d131d; border: 1px solid var(--ln); border-radius: 8px; overflow: hidden; }
.pg-event .rlab { display: flex; flex-direction: column; justify-content: center; padding: 0 12px; border-left: 4px solid; background: var(--s2); }
.pg-event .rlab b { font: 800 20px/1 var(--D); text-transform: uppercase; }
.pg-event .rlab small { font-size: 11px; color: var(--mut); }
.pg-event .rgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 5px; }
.pg-event .rgrid.c { grid-template-columns: repeat(10, 1fr); }
.pg-event .t2 { position: relative; height: 42px; border-radius: 5px; overflow: hidden; background: #182131; display: flex; align-items: center; gap: 6px; padding: 0 7px 0 5px; border: 1px solid #ffffff12; cursor: pointer; text-align: left; min-width: 0; transition: opacity .3s, filter .3s; }
.pg-event .t2 > img.bn { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.pg-event .t2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0d131dee 20%, #0d131d99 60%, #0d131d55); pointer-events: none; }
.pg-event .t2 > * { position: relative; z-index: 1; }
.pg-event .t2 .no { font: 800 16px/1 var(--D); color: var(--gold); min-width: 22px; text-align: right; }
.pg-event .t2 .av { width: 24px; height: 24px; font-size: 9px; }
.pg-event .t2 .nm { min-width: 0; font-weight: 700; font-size: 12.5px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-event .t2 .nm small { display: block; font-weight: 500; font-size: 10.5px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; }
.pg-event .t2.pk { background: #11161f; }
.pg-event .t2.pk > img.bn { filter: grayscale(1); opacity: .18; }
.pg-event .t2.pk .av { filter: grayscale(1); opacity: .5; }
.pg-event .t2.pk .nm { color: #7d8798; text-decoration: line-through; text-decoration-color: #7d879880; }
.pg-event .t2.pk .no { color: #6a7384; }
.pg-event .t2.pk .nm small { color: #aab3c2; text-decoration: none; display: block; }
.pg-event .t2.mine { border-color: #d4af37aa; }
.pg-event .t2.mine .nm small { color: var(--gold); }
.pg-event .t2.just { box-shadow: 0 0 0 2px var(--evlive); }
.pg-event .t2.c { height: 30px; }
.pg-event .t2.c .av, .pg-event .t2.c > img.bn { display: none; }
.pg-event .t2.c .nm small { display: none; }
.pg-event .t2.c .no { font-size: 14px; }
.pg-event .legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--mut); }
.pg-event .legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.pg-event .cq-gate { max-width: 560px; margin: 60px auto; padding: 28px; text-align: center; background: var(--s1); border: 1px solid var(--ln2); border-radius: 12px; }
.pg-event .cq-gate h2 { font: 800 30px/1 var(--D); text-transform: uppercase; margin-bottom: 10px; }
.pg-event .cq-gate .btn2 { display: inline-block; margin-top: 16px; }

/* scouting card (dialog is appended to <body>, so it carries its own scope) */
.ev-scrim { position: fixed; inset: 0; z-index: 60; background: #05080dcc; backdrop-filter: blur(3px); display: grid; place-items: center; padding: 12px; overflow: auto; color: var(--tx); }
.ev-scrim .md { width: min(760px, 100%); background: var(--s1); border: 1px solid var(--ln2); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px #000c; max-height: calc(100vh - 24px); overflow-y: auto; }
.ev-scrim .md-b { height: 150px; position: relative; background: #182131; }
.ev-scrim .md-b img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-scrim .md-b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--s1), #0F152000 70%); }
.ev-scrim .md-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: #000a; border: 0; color: #fff; font-size: 18px; cursor: pointer; }
.ev-scrim .md-id { display: flex; gap: 18px; align-items: end; padding: 0 26px; margin-top: -56px; position: relative; z-index: 1; }
.ev-scrim .md-id .av { width: 104px; height: 104px; border-radius: 50%; border: 3px solid var(--str); object-fit: cover; background: #2a3446; display: grid; place-items: center; font: 800 30px/1 var(--f); flex: none; }
.ev-scrim .md-id h2 { font: 800 clamp(34px, 6vw, 54px)/.9 var(--D); text-transform: uppercase; margin: 0; letter-spacing: 0; overflow-wrap: anywhere; }
.ev-scrim .lbl { font: 700 12px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.ev-scrim .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ev-scrim .tag { background: rgba(255, 255, 255, .07); color: #e6ebf2; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); font-size: 12px; font-weight: 600; }
.ev-scrim .tag.g { border-color: #d4af3780; color: var(--gold); }
.ev-scrim .md-body { padding: 22px 26px 26px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; }
.ev-scrim .md-empty { color: var(--mut); grid-column: 1 / -1; }
.ev-scrim .big3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.ev-scrim .big3 div { border-top: 2px solid var(--str); padding-top: 8px; }
.ev-scrim .big3 b { font: 800 40px/1 var(--D); display: block; }
.ev-scrim .big3 small, .ev-scrim .small6 small { color: var(--mut); font-size: 12px; }
.ev-scrim .small6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; margin-top: 16px; }
.ev-scrim .small6 b { font: 700 22px/1 var(--D); display: block; }
.ev-scrim .hist { margin-top: 8px; }
.ev-scrim .hist div { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--ln); font-size: 14px; }
.ev-scrim .hist small { color: var(--mut); }
.ev-scrim .hist .champ { color: var(--gold); font-weight: 700; }
.ev-scrim .md-f { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 26px 22px; }
.ev-scrim .bt { padding: 12px 18px; min-height: 44px; border-radius: 6px; font-weight: 700; font-size: 14px; border: 1px solid var(--ln2); background: none; color: var(--tx); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.ev-scrim .bt.g { background: var(--gold); color: #11141a; border-color: var(--gold); }
.ev-scrim .bt:disabled { opacity: .4; cursor: default; }

.mu-scrim { z-index: 55; align-items: center; overflow: hidden; }
.mu-scrim .mu { width: min(1040px, 100%); max-height: calc(100vh - 24px); overflow: hidden; display: flex; flex-direction: column; }
.mu-scrim .mu-top { padding: 16px 22px 6px; flex: none; }
.mu-scrim .mu-top h2 { font: 800 clamp(24px, 4vw, 40px)/.95 var(--D); text-transform: uppercase; margin: 4px 0; }
.mu-scrim .mu-top p { color: var(--mut); margin: 0; font-size: 13px; }
.mu-scrim .md-x { z-index: 3; }
.mu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 8px 16px 16px; min-height: 0; }
.mu-team { background: var(--s2); border: 1px solid var(--ln); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.mu-team.win { border-color: #d4af3799; }
.mu-h { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: end; padding: 10px 14px 6px; }
.mu-h h3 { font: 800 22px/.95 var(--D); text-transform: uppercase; grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-sc { font: 800 28px/1 var(--D); color: var(--gold); }
.mu-list { display: grid; gap: 4px; padding: 6px 10px 10px; }
.mu-p { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; text-align: left; border: 1px solid var(--ln); border-radius: 8px; overflow: hidden; background: var(--s1); cursor: pointer; color: inherit; padding: 6px 10px; isolation: isolate; }
.mu-p::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mu-bn) center/cover no-repeat; opacity: .28; }
.mu-p:hover { border-color: #d4af3799; }
.mu-p .av { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--str); object-fit: cover; background: #2a3446; display: grid; place-items: center; font: 800 13px/1 var(--f); flex: none; }
.mu-nm { flex: 1; min-width: 0; }
.mu-nm b { display: block; font: 800 15px/1.1 var(--D); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-nm .tags { margin-top: 3px; }
.mu-p small { flex: none; font: 700 10px/1 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 800px) { .mu-grid { grid-template-columns: 1fr; } .mu-scrim .mu { max-height: 100vh; overflow: auto; } }

@media (max-width: 900px) {
  .pg-event .teams, .pg-event .teams.four { grid-template-columns: repeat(2, 1fr); }
  .pg-event .lead { grid-template-columns: repeat(2, 1fr); }
  .pg-event .rgrid { grid-template-columns: repeat(4, 1fr); }
  .pg-event .rgrid.c { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 600px) {
  .pg-event .tabs a { padding: 12px 10px; font-size: 13px; }
  .pg-event .tabs a.cq { margin-left: 0; }
  .pg-event .strip { grid-template-columns: 1fr 1fr; }
  .pg-event .teams, .pg-event .teams.four, .pg-event .lead { grid-template-columns: 1fr; }
  .pg-event .sec-h { display: block; }
  .pg-event .sec-h h2 { font-size: 32px; }
  .pg-event .cqbar .search { flex: 1 1 100%; order: 3; }
  .pg-event .myteam .ms { flex: 0 0 120px; }
  .pg-event .mix { display: none; }
  .pg-event .rrow { grid-template-columns: 1fr; }
  .pg-event .rlab { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; border-left: 0; border-top: 3px solid; }
  .pg-event .rgrid, .pg-event .rgrid.c { grid-template-columns: 1fr 1fr; }
  .pg-event .bk { flex-direction: column; }
  .pg-event .bk-col { min-width: 0; flex: none; }
  .pg-event .bk .bk-col.is-hidden { display: none; }
  .pg-event .rounds-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .pg-event .sch-row-m { grid-template-columns: 1fr; }
  .ev-scrim { padding: 0; place-items: stretch; }
  .ev-scrim .md { width: 100vw; max-height: none; min-height: 100vh; border-radius: 0; }
  .ev-scrim .md-body { grid-template-columns: 1fr; }
  .ev-scrim .md-id .av { width: 80px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-event *, .ev-scrim * { transition: none !important; animation: none !important; }
}

/* Leaders (2026-10-16 rebuild): stat chips, who/role chips, podium of three, ranked list with bars. */
.pg-event .ld-controls .chips { margin-bottom: 10px; }
.pg-event .ld-sub button { padding: 6px 12px; font-size: 12px; }
.pg-event .ld-sub .on { background: #ffffff1a; color: #fff; border-color: #ffffff55; }
.pg-event .ld-sep { width: 1px; align-self: stretch; background: var(--ln2); margin: 0 4px; }
.pg-event .ld-podium { grid-template-columns: repeat(3, 1fr); margin-top: 6px; }
.pg-event .ld-podium .ld-p1 { border-color: #d4af3799; box-shadow: 0 0 0 1px #d4af3733 inset; }
.pg-event .ld-name { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: left; font: inherit; min-width: 0; }
.pg-event .ld-name:hover h3, .pg-event .ld-list .ld-name:hover { color: var(--gold); }
.pg-event .ld-role { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--mut); white-space: nowrap; }
.pg-event .ld-role::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.pg-event .ld-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.pg-event .ld-list li { display: grid; grid-template-columns: 34px minmax(120px, 1.1fr) 92px minmax(80px, 1.4fr) 76px 40px; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; background: var(--s1); border: 1px solid var(--ln); font-size: 14px; }
.pg-event .ld-list li:hover { border-color: var(--ln2); background: var(--s2); }
.pg-event .ld-list .ld-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-event .ld-rank { font: 800 18px/1 var(--D); color: var(--mut); text-align: right; }
.pg-event .ld-bar { height: 6px; border-radius: 4px; background: #ffffff12; overflow: hidden; }
.pg-event .ld-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #d4af37, #f0d67a); }
.pg-event .ld-val { font: 800 18px/1 var(--D); text-align: right; color: #fff; }
.pg-event .ld-g { color: var(--fnt, #687589); font-size: 12px; text-align: right; }
.pg-event .ld-more { margin-top: 12px; font-size: 14px; }
.pg-event .ld-more a { color: var(--gold); font-weight: 600; }
@media (max-width: 760px) {
  .pg-event .ld-podium { grid-template-columns: 1fr; }
  .pg-event .ld-list li { grid-template-columns: 28px minmax(0, 1fr) 64px 34px; }
  .pg-event .ld-list .ld-role, .pg-event .ld-list .ld-bar { display: none; }
}

/* One-time NO (owner rule 2026-10-16): a small red badge on the pool tile, a red tag in the scouting card. */
.pg-event .nob { position: absolute; top: 3px; right: 4px; z-index: 2; padding: 2px 5px; border-radius: 3px; background: #c8323a; color: #fff; font: 800 9px/1.1 var(--f, Archivo, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
.pg-event .t2.c .nob { top: 50%; transform: translateY(-50%); }
.pg-event .t2.nu .nm { padding-right: 22px; }
.ev-scrim .tag.no { background: #c8323a26; border-color: #f07a6a; color: #ffb4ab; }

.pg-event .ld-role.is-none::before { display: none; }

/* Ranks (2026-10-16): icon + rank colour (sampled from each rank's own icon), bold with a soft shadow so it reads on any banner. */
.pg-event .rk, .ev-scrim .rk { display: inline-flex; align-items: center; gap: 4px; color: var(--rk, #dfe5ee); font-weight: 700; letter-spacing: .01em; text-shadow: 0 1px 2px #000c; white-space: nowrap; }
.pg-event .rk img, .ev-scrim .rk img { width: 14px; height: 14px; object-fit: contain; flex: none; filter: drop-shadow(0 1px 1px #000a); }
.pg-event .t2 .nm small .rk { font-size: 11px; }
.ev-scrim .tag-rank { display: inline-flex; align-items: center; gap: 6px; }
.ev-scrim .tag-rank .rk img { width: 18px; height: 18px; }
.ev-scrim .rk-lbl { color: #aab3c2; font-weight: 600; font-size: 11px; }
/* tile banners sit under a slightly stronger left fade so names and ranks stay readable */
.pg-event .t2::after { background: linear-gradient(90deg, #0d131df5 25%, #0d131daa 62%, #0d131d55); }

/* ---- round 2: Captains' Quarters pages, tutorial, tab pill, hover lift, rulebook button ---- */
.pg-event .ev-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-bottom: 20px; }
.pg-event .ev-rulebook { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid #d4af3799; border-radius: 999px; font: 700 14px/1 var(--D); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); background: #d4af3714; }
.pg-event .ev-rulebook:hover { background: #d4af3730; }
.pg-event .ev-bracket-cta { display: grid; gap: 8px; margin-top: 36px; padding: 28px 32px; border: 1px solid #d4af3755; border-radius: 16px; background: linear-gradient(135deg, #d4af3722, #121821 42%, #0d131d); text-decoration: none; color: inherit; box-shadow: 0 18px 50px #0006; }
.pg-event .ev-bracket-cta:hover { border-color: #d4af37aa; }
.pg-event .ev-bracket-cta h2 { font: 800 clamp(36px, 6vw, 56px)/.9 var(--D); text-transform: uppercase; color: #f6eedd; letter-spacing: 0; }
.pg-event .ev-bracket-cta p { margin: 0; color: #c9d0db; font-size: 15px; max-width: 42em; }
.pg-event .ev-cta-go { display: inline-flex; margin-top: 8px; padding: 10px 16px; width: max-content; border-radius: 999px; background: var(--gold); color: #11141a; font: 800 13px/1 var(--D); letter-spacing: .12em; text-transform: uppercase; }
.pg-event.ev-compact .ev-links { display: none; }
.pg-event .tabs a.cq { margin-left: auto; margin-bottom: 6px; padding: 10px 20px; border: 1px solid var(--gold); border-radius: 999px; background: linear-gradient(180deg, #d4af3733, #d4af3714); color: var(--gold); font-weight: 800; letter-spacing: .14em; box-shadow: 0 0 0 0 #d4af3700; transition: box-shadow .2s, background .2s; }
.pg-event .tabs a.cq:hover { box-shadow: 0 0 0 3px #d4af3733; }
.pg-event .tabs a.cq.on { background: var(--gold); color: #11141a; border-color: var(--gold); }
.pg-event.ev-compact [data-ev-body] { animation: cq-in .25s ease-out both; }
@keyframes cq-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pg-event .cq-nav { display: flex; gap: 6px; align-items: center; }
.pg-event .cq-btn { padding: 9px 16px; border: 1px solid var(--ln2); border-radius: 999px; font: 700 13px/1 var(--D); letter-spacing: .1em; text-transform: uppercase; color: #cfd6e2; }
.pg-event .cq-btn:hover { border-color: #d4af3799; color: #fff; }
.pg-event .cq-btn.on { background: var(--s3); color: var(--gold); border-color: #d4af3799; }
.pg-event .cq-help { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ln2); background: none; cursor: pointer; font: 800 15px/1 var(--f); color: var(--mut); }
.pg-event .cq-help:hover { color: var(--gold); border-color: #d4af3799; }
.pg-event .cq-live { margin: 12px 0 0; font-size: 12px; color: var(--mut); opacity: .8; }
.pg-event .cq-h { font: 800 26px/1 var(--D); text-transform: uppercase; margin: 18px 0 10px; letter-spacing: 0; }
.pg-event .myteam-page .myteam { margin: 0; }
.pg-event .cq-teams .teams { margin-top: 4px; }
.pg-event .t2:not(.pk):hover { transform: translateY(-2px); border-color: #ffffff40; box-shadow: 0 6px 14px #0009; z-index: 2; }
.pg-event .t2 { transition: opacity .3s, filter .3s, transform .12s ease-out, box-shadow .12s ease-out, border-color .12s ease-out; }
.pg-event .t2.pk:hover { transform: translateY(-1px); border-color: #ffffff30; }
.pg-event .t2:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
/* tutorial */
.cq-tut-root { --D: "Big Shoulders Display", var(--f), sans-serif; }
.cq-tut-scrim { position: fixed; inset: 0; z-index: 70; background: #05080dd9; backdrop-filter: blur(3px); display: grid; place-items: center; padding: 14px; overflow: auto; }
.cq-tut { width: min(640px, 100%); background: var(--s1); border: 1px solid var(--ln2); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px #000c; color: var(--tx); }
.cq-tut img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #0d131d; }
.cq-tut-body { padding: 18px 22px 6px; }
.cq-tut-body .lbl { font: 700 12px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.cq-tut-body h3 { font: 800 30px/1.05 var(--D); text-transform: uppercase; margin: 8px 0 6px; letter-spacing: 0; }
.cq-tut-body p { margin: 0; color: #c9d0db; font-size: 15px; }
.cq-tut-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px 20px; }
.cq-dots { display: flex; gap: 8px; }
.cq-dots button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 0; background: #ffffff30; cursor: pointer; }
.cq-dots button.on { background: var(--gold); }
.cq-tut-act { display: flex; gap: 8px; }
.cq-tut .btn2 { padding: 10px 16px; min-height: 44px; border-radius: 8px; border: 1px solid var(--ln2); background: var(--s2); color: var(--tx); cursor: pointer; font: 700 14px/1 var(--f); }
.cq-tut .btn2.g { background: var(--gold); color: #11141a; border-color: var(--gold); }
@media (max-width: 600px) { .pg-event .cq-nav { flex-wrap: wrap; } .cq-tut-body h3 { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .pg-event.ev-compact [data-ev-body] { animation: none !important; } .pg-event .t2:hover { transform: none !important; } }

/* ---- schedule: match calendar (Gantt), facts, rules ---- */
.pg-event .sch-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.pg-event .sch-facts > div { background: var(--s1); border: 1px solid var(--ln2); border-radius: 10px; padding: 14px 16px; display: grid; gap: 4px; }
.pg-event .sch-facts small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.pg-event .sch-facts b { font: 800 22px/1.1 var(--D); text-transform: uppercase; }
.pg-event .sch-facts .sch-draft { border-color: #d4af3766; background: #d4af3710; }
.pg-event .sch-facts .sch-draft span { color: var(--mut); font-size: 13px; }
.pg-event .sch-gantt { --lab: 170px; background: var(--s1); border: 1px solid var(--ln); border-radius: 12px; padding: 10px 12px 14px; overflow-x: auto; }
.pg-event .sch-gantt .sch-row { position: relative; display: grid; grid-template-columns: var(--lab) repeat(var(--days), minmax(44px, 1fr)); align-items: stretch; border: 0; padding: 0; gap: 0; min-width: 760px; }
.pg-event .sch-gantt .sch-row:not(.sch-hd) { height: 38px; border-top: 1px solid var(--ln); }
.pg-event .sch-lab { display: flex; align-items: center; padding-right: 10px; font: 700 13px/1.1 var(--D); letter-spacing: .08em; text-transform: uppercase; color: #cfd6e2; }
.pg-event .sch-day { position: relative; display: grid; place-items: center; align-content: center; padding: 6px 0; border-left: 1px solid var(--ln); text-align: center; }
.pg-event .sch-day small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.pg-event .sch-day b { font: 800 18px/1 var(--D); }
.pg-event .sch-day.today b, .pg-event .sch-day.today small { color: var(--gold); }
.pg-event .sch-dot { position: absolute; top: 3px; right: 4px; min-width: 16px; padding: 2px 4px; border-radius: 999px; background: var(--evlive); color: #06121d; font: 800 10px/1 var(--f); font-style: normal; text-align: center; }
.pg-event .sch-cell { border-left: 1px solid var(--ln); }
.pg-event .sch-cell.today { background: #d4af3710; }
.pg-event .sch-bar { grid-row: 1; align-self: center; margin: 0 3px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 700 12px/1 var(--f); letter-spacing: .04em; color: #0b0f17; z-index: 1; }
.pg-event .sch-bar b { font-weight: 800; }
.pg-event .sch-U { background: var(--gold); }
.pg-event .sch-L { background: #b79cf5; }
.pg-event .sch-G { background: linear-gradient(90deg, #fff, #f6eedd); }
.pg-event .sch-wlist { display: none; list-style: none; margin: 14px 0 0; padding: 0; gap: 10px; }
.pg-event .sch-wlist li { display: grid; gap: 6px; background: var(--s1); border: 1px solid var(--ln2); border-radius: 10px; padding: 12px 14px; }
.pg-event .sch-wlist b { font: 800 20px/1 var(--D); text-transform: uppercase; }
.pg-event .sch-chip { display: inline-block; margin: 0 6px 4px 0; padding: 5px 10px; border-radius: 999px; font: 700 12px/1 var(--f); color: #0b0f17; }
.pg-event .sch-legend { margin: 14px 0 0; }
.pg-event .sch-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.pg-event .sch-rules article { background: var(--s1); border: 1px solid var(--ln2); border-radius: 10px; padding: 16px; }
.pg-event .sch-rules h3 { font: 800 22px/1 var(--D); text-transform: uppercase; margin: 8px 0; letter-spacing: 0; }
.pg-event .sch-rules p { margin: 0; color: #c9d0db; font-size: 14px; }
.pg-event .sch-more { margin-top: 16px; display: flex; gap: 12px; align-items: center; }
.pg-event .sch-pdf { color: var(--mut); text-decoration: underline; font-size: 13px; }
@media (max-width: 600px) {
  .pg-event .sch-gantt { display: none; }
  .pg-event .sch-wlist { display: grid; }
}

/* ---------- Pool readability + role zoom (owner, 2026-10-16) ----------
   The banner is atmosphere, not a backdrop for text: it only fades in on the right ~60% of the card, desaturated and darkened,
   and the left side where the number, avatar, name and rank sit is solid. Type is bigger; columns size to the screen. */
.pg-event .rgrid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 6px; padding: 7px; }
.pg-event .t2 { height: 52px; gap: 8px; padding: 0 9px 0 7px; background: #141c29; border-color: #ffffff14; border-radius: 7px; }
.pg-event .t2 > img.bn { inset: 0 0 0 auto; left: auto; width: 64%; height: 100%; opacity: .5; filter: saturate(.7) brightness(.62) contrast(.95);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 58%); mask-image: linear-gradient(90deg, transparent 0, #000 58%); }
.pg-event .t2::after { background: linear-gradient(90deg, #141c29 0%, #141c29 42%, #141c29b8 70%, #141c2970 100%); }
.pg-event .t2 .no { font-size: 19px; min-width: 26px; text-shadow: 0 1px 2px #000c; }
.pg-event .t2 .av { width: 30px; height: 30px; font-size: 10px; flex: none; box-shadow: 0 0 0 1.5px #0b1018; }
.pg-event .t2 .nm { font-size: 14px; color: #f3f6fb; text-shadow: 0 1px 2px #000b; }
.pg-event .t2 .nm small { font-size: 11.5px; margin-top: 2px; }
.pg-event .t2.pk { background: #0f141c; }
.pg-event .t2.pk > img.bn { opacity: .12; filter: grayscale(1) brightness(.6); }
.pg-event .t2.pk::after { background: linear-gradient(90deg, #0f141c 0%, #0f141c 45%, #0f141ccc 75%, #0f141c88); }

/* plain mode (banner toggle): one solid colour per card, the role colour as a thin left edge */
.pg-event .rows.no-banners .t2 > img.bn { display: none; }
.pg-event .rows.no-banners .t2::after { display: none; }
.pg-event .rows.no-banners .t2 { background: #1a2433; box-shadow: inset 3px 0 0 var(--rc, #ffffff22); }
.pg-event .rows.no-banners .t2.pk { background: #10151d; box-shadow: inset 3px 0 0 #ffffff14; }

/* the role label is a button: click to zoom into that role */
.pg-event .rlab { appearance: none; border: 0; border-left: 4px solid var(--rc); color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative; transition: background .15s; }
.pg-event .rlab b { color: var(--rc); }
.pg-event .rlab:hover { background: color-mix(in srgb, var(--rc) 14%, var(--s2)); }
.pg-event .rlab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.pg-event .rlab-hint { margin-top: 6px; font: 700 10px/1 var(--f, Archivo, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--rc); opacity: 0; transition: opacity .15s; }
.pg-event .rlab:hover .rlab-hint, .pg-event .rlab:focus-visible .rlab-hint, .pg-event .rrow.is-in .rlab-hint { opacity: .9; }

/* focused role: label becomes a header, cards grow */
.pg-event .rows.is-focus .rrow.is-in { grid-template-columns: 1fr; }
.pg-event .rows.is-focus .rrow.is-in .rlab { flex-direction: row; align-items: center; gap: 16px; padding: 14px 18px; border-left: 0; border-top: 4px solid var(--rc); }
.pg-event .rows.is-focus .rrow.is-in .rlab b { font-size: 36px; }
.pg-event .rows.is-focus .rrow.is-in .rlab small { font-size: 13px; }
.pg-event .rows.is-focus .rrow.is-in .rlab-hint { margin: 0 0 0 auto; font-size: 12px; }
.pg-event .rows.is-focus .rgrid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; padding: 12px; }
.pg-event .rows.is-focus .t2 { height: 80px; gap: 12px; padding: 0 14px 0 10px; border-radius: 9px; }
.pg-event .rows.is-focus .t2 .no { font-size: 27px; min-width: 38px; }
.pg-event .rows.is-focus .t2 .av { width: 50px; height: 50px; font-size: 15px; }
.pg-event .rows.is-focus .t2 .nm { font-size: 18px; }
.pg-event .rows.is-focus .t2 .nm small { font-size: 13px; margin-top: 4px; }
.pg-event .rows.is-focus .t2 .rk img { width: 18px; height: 18px; }
.pg-event .rows.is-focus .t2 > img.bn { width: 60%; opacity: .58; }
.pg-event .rows.is-focus .nob { font-size: 11px; padding: 3px 7px; top: 6px; right: 7px; }

/* rows leaving to the side (zoom in) and sliding back (zoom out) */
.pg-event .rrow { transition: transform 220ms ease-in, opacity 200ms ease-in; }
.pg-event .rrow.is-leaving { transform: translateX(-70px) scale(.97); opacity: 0; pointer-events: none; }
@keyframes cqRowIn { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
.pg-event .rrow.is-entering { animation: cqRowIn 380ms cubic-bezier(.2, .8, .2, 1) both; }

/* toolbar: role chips + sort, and the banner toggle */
.pg-event .cq-tools { max-width: 1392px; margin: 0 auto; padding: 0 var(--gut, 24px) 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pg-event .cq-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-event .cq-roles button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--ln2); background: none; color: var(--mut); font-size: 13px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.pg-event .cq-roles button:hover { color: #fff; border-color: #ffffff40; }
.pg-event .cq-roles button.on { color: #11141a; background: var(--rc, var(--gold)); border-color: var(--rc, var(--gold)); }
.pg-event .cq-roles button.on .rd { background: #11141a !important; }
.pg-event .cq-sort { margin-left: auto; }
.pg-event .cq-icon { margin-left: auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--ln2); background: #0d131d; color: #c9d2df; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.pg-event .cq-icon:hover { color: #fff; border-color: #ffffff55; }
.pg-event .cq-icon.on { color: var(--gold); border-color: #d4af3799; background: #d4af3714; }
.pg-event .cq-icon .bi-cut { opacity: 0; transition: opacity .15s; }
.pg-event .cq-icon.on .bi-cut { opacity: 1; }
.pg-event .cq-icon.on .bi-art { opacity: .35; }
@media (max-width: 760px) {
  .pg-event .rgrid { grid-template-columns: 1fr 1fr; }
  .pg-event .t2 .av { width: 26px; height: 26px; }
  .pg-event .cq-sort { margin-left: 0; }
  .pg-event .rows.is-focus .rgrid { grid-template-columns: 1fr; }
  .pg-event .rows.is-focus .rrow.is-in .rlab b { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .pg-event .rrow, .pg-event .rrow.is-entering { transition: none; animation: none; } }

.pg-event .rrow[hidden] { display: none; }

/* ---------- Role plates (owner, 2026-10-16: no neon, no heavy colour, still distinctive) ----------
   A dark plate with a faint diagonal weave, the role name in the cream display type the hero uses, and the role colour only
   as a muted accent: the line glyph, a hairline edge and the slim "left" meter. The plate itself is the zoom button. */
.pg-event .rrow { grid-template-columns: 156px 1fr; border-radius: 10px; border-color: #ffffff12; }
.pg-event .rlab {
  --rc-soft: color-mix(in srgb, var(--rc) 58%, #8a94a6);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 16px 14px;
  border: 0; border-right: 1px solid #ffffff10; box-shadow: inset 2px 0 0 color-mix(in srgb, var(--rc) 45%, #0d131d);
  background:
    repeating-linear-gradient(135deg, #ffffff06 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #172030 0%, #111823 100%);
  transition: background-color .2s, box-shadow .2s;
}
.pg-event .rlab:hover { box-shadow: inset 2px 0 0 var(--rc-soft); background:
    repeating-linear-gradient(135deg, #ffffff08 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #1b2537 0%, #131b28 100%); }
.pg-event .rlab-glyph { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--rc-soft);
  border: 1px solid color-mix(in srgb, var(--rc) 35%, #ffffff14); background: #0d131d; transition: color .2s, border-color .2s; }
.pg-event .rlab:hover .rlab-glyph { color: color-mix(in srgb, var(--rc) 75%, #dfe5ee); border-color: color-mix(in srgb, var(--rc) 55%, #ffffff14); }
.pg-event .rlab-txt { display: grid; gap: 5px; width: 100%; }
.pg-event .rlab b, .pg-event .rlab-txt b { color: #f2ead8; font: 800 23px/0.95 var(--D); letter-spacing: .02em; text-transform: uppercase; }
.pg-event .rlab small { color: var(--mut); font-size: 11.5px; }
.pg-event .rlab small em { font-style: normal; font-weight: 700; color: #e6ebf2; }
.pg-event .rlab-meter { display: block; height: 3px; width: 100%; max-width: 110px; border-radius: 3px; background: #ffffff12; overflow: hidden; }
.pg-event .rlab-meter i { display: block; height: 100%; border-radius: 3px; background: var(--rc-soft); transition: width .4s; }
.pg-event .rlab-go { display: inline-flex; align-items: center; gap: 4px; font: 700 10px/1 var(--f, Archivo, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: #8d97a8; transition: color .2s; }
.pg-event .rlab-go svg { transition: transform .2s; }
.pg-event .rlab:hover .rlab-go { color: #f2ead8; }
.pg-event .rlab:hover .rlab-go svg { transform: translateX(3px); }
.pg-event .rrow.is-in .rlab:hover .rlab-go svg { transform: translateX(-3px); }
.pg-event .rlab-hint { display: none; } /* replaced by .rlab-go */

/* focused role: the same plate, laid out as a header bar (no tinted band, no thick top border) */
.pg-event .rows.is-focus .rrow.is-in { grid-template-columns: 1fr; }
.pg-event .rows.is-focus .rrow.is-in .rlab { flex-direction: row; align-items: center; gap: 18px; padding: 14px 20px; border: 0; border-bottom: 1px solid #ffffff10;
  box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--rc) 40%, #0d131d); }
.pg-event .rows.is-focus .rrow.is-in .rlab-glyph { width: 46px; height: 46px; }
.pg-event .rows.is-focus .rrow.is-in .rlab-glyph svg { width: 26px; height: 26px; }
.pg-event .rows.is-focus .rrow.is-in .rlab-txt { width: auto; grid-template-columns: auto auto; align-items: baseline; column-gap: 16px; }
.pg-event .rows.is-focus .rrow.is-in .rlab-txt b { font-size: 38px; grid-row: span 2; }
.pg-event .rows.is-focus .rrow.is-in .rlab small { font-size: 13px; }
.pg-event .rows.is-focus .rrow.is-in .rlab-meter { width: 160px; max-width: none; align-self: start; }
.pg-event .rows.is-focus .rrow.is-in .rlab-go { margin-left: auto; font-size: 11px; color: #c4ccd8; flex-direction: row-reverse; }
.pg-event .rows.is-focus .rrow.is-in .rlab b { font-size: 38px; }

@media (max-width: 760px) {
  .pg-event .rrow { grid-template-columns: 1fr; }
  .pg-event .rlab { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; border-right: 0; border-bottom: 1px solid #ffffff10; box-shadow: inset 0 2px 0 color-mix(in srgb, var(--rc) 45%, #0d131d); }
  .pg-event .rlab-txt { width: auto; }
  .pg-event .rlab-go { margin-left: auto; }
  .pg-event .rows.is-focus .rrow.is-in .rlab-txt b, .pg-event .rows.is-focus .rrow.is-in .rlab b { font-size: 28px; }
  .pg-event .rows.is-focus .rrow.is-in .rlab-meter { width: 90px; }
}

/* Role plates: plain surface (owner, 2026-10-16: no line texture). */
.pg-event .rlab, .pg-event .rlab:hover { background: linear-gradient(180deg, #172030 0%, #111823 100%); }
.pg-event .rlab:hover { background: linear-gradient(180deg, #1b2537 0%, #131b28 100%); }

/* Captains' Quarters tab: a rectangular HUD tab with no bottom edge. It sits on the hub's baseline with short "feet" that run
   along the line, a gold top rail, and when open it fills with the panel colour and covers the line, so it opens straight into
   the Captains' Quarters bar below. */
.pg-event .tabs { overflow: visible; }
.pg-event .tabs a.cq {
  position: relative; margin: 0 0 -1px auto; padding: 13px 28px 14px; border-radius: 0;
  border: 1px solid #d4af3759; border-bottom: 0; color: var(--gold); font-weight: 800; letter-spacing: .16em;
  background: linear-gradient(180deg, #d4af3712 0%, #d4af3703 100%); box-shadow: none; transition: background .2s, color .2s, border-color .2s;
}
.pg-event .tabs a.cq::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--gold); opacity: .55; transition: opacity .2s; }
.pg-event .tabs a.cq::after { content: ""; position: absolute; bottom: 0; left: -9px; right: -9px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, #d4af3799 0 8px, transparent 8px calc(100% - 8px), #d4af3799 calc(100% - 8px)); }
.pg-event .tabs a.cq:hover { color: #f4d68c; border-color: #d4af3799; background: linear-gradient(180deg, #d4af3722 0%, #d4af3708 100%); box-shadow: none; }
.pg-event .tabs a.cq:hover::before { opacity: 1; }
.pg-event .tabs a.cq.on { color: var(--gold); background: #0d1219; border-color: #d4af3799; z-index: 6; }
.pg-event .tabs a.cq.on::before { opacity: 1; }
.pg-event .tabs a.cq.on::after { background: linear-gradient(90deg, #d4af37 0 8px, transparent 8px calc(100% - 8px), #d4af37 calc(100% - 8px)); }
@media (max-width: 760px) { .pg-event .tabs { overflow-x: auto; } .pg-event .tabs a.cq { margin-left: 8px; padding: 11px 16px 12px; } .pg-event .tabs a.cq::after { left: 0; right: 0; } }
/* no top edge on the Captains' Quarters tab: it would double the site header's gold line (owner, 2026-10-16) */
.pg-event .tabs a.cq { border-top: 0; }
.pg-event .tabs a.cq::before { display: none; }

/* Captains' Quarters tab, v3 (owner, 2026-10-16): solid, the same colour as the page under it, rising out of that surface into the
   hero like a tab pulled up from behind. No border, no transparency. Two curved "flares" at its foot blend it into the baseline;
   a soft shadow above lifts it off the hero art. Inside Captains' Quarters it takes the bar's colour so the join stays seamless. */
.pg-event .tabs a.cq {
  --tabbg: #12181c;
  border: 0; border-radius: 9px 9px 0 0; margin: 0 10px -1px auto; padding: 14px 30px 15px;
  background: var(--tabbg); color: var(--gold); letter-spacing: .16em; font-weight: 800;
  box-shadow: 0 -12px 24px -10px #000d, inset 0 1px 0 #ffffff10;
  transition: color .2s, background-color .2s, box-shadow .2s;
}
.pg-event .tabs a.cq::before, .pg-event .tabs a.cq::after {
  content: ""; display: block; position: absolute; bottom: 0; top: auto; width: 10px; height: 10px; opacity: 1; pointer-events: none;
}
.pg-event .tabs a.cq::before { left: -10px; right: auto; background: radial-gradient(circle at 0 0, transparent 9.5px, var(--tabbg) 10px); }
.pg-event .tabs a.cq::after { right: -10px; left: auto; background: radial-gradient(circle at 100% 0, transparent 9.5px, var(--tabbg) 10px); }
.pg-event .tabs a.cq:hover { color: #f4d68c; --tabbg: #161d22; box-shadow: 0 -14px 26px -10px #000e, inset 0 1px 0 #ffffff18; }
.pg-event .tabs a.cq.on { --tabbg: #0d1219; color: var(--gold); box-shadow: 0 -12px 24px -10px #000d, inset 0 1px 0 #ffffff12; }
.pg-event .tabs a.cq.on:hover { color: #f4d68c; }
@media (max-width: 760px) { .pg-event .tabs a.cq { margin-left: 12px; padding: 12px 18px 13px; } }
.pg-event .tabs a.cq.on::after { background: radial-gradient(circle at 100% 0, transparent 9.5px, var(--tabbg) 10px); }
.pg-event .tabs a.cq.on::before { background: radial-gradient(circle at 0 0, transparent 9.5px, var(--tabbg) 10px); }
/* open: the tab and the Captains' Quarters bar share one slightly lifted surface, so the tab grows out of the bar */
.pg-event .tabs a.cq.on { --tabbg: #151c26; }
.pg-event .cqbar { background: #151c26f5; }

/* ---------- Hub tabs, v4 (owner, 2026-10-16) ----------
   Whichever tab is open rises out of the page: solid page colour, rounded top, curved flares at its foot, a soft shadow above.
   The others are plain text. "Captains' Quarters" keeps gold text so captains find it, and gets the same raised look when open
   (but inside Captains' Quarters the tabs are replaced by a Back button, see .ev-back). */
.pg-event .tabs a { position: relative; border-bottom: 0; border-radius: 9px 9px 0 0; margin-bottom: -1px; padding: 14px 22px 15px; color: #aeb8c8; transition: color .2s, background-color .2s; }
.pg-event .tabs a:hover { color: #fff; }
.pg-event .tabs a.on { --tabbg: #12181c; background: var(--tabbg); color: #f2ead8; box-shadow: 0 -12px 24px -10px #000d, inset 0 1px 0 #ffffff10; z-index: 2; }
.pg-event .tabs a.on::before, .pg-event .tabs a.on::after { content: ""; display: block; position: absolute; bottom: 0; top: auto; width: 10px; height: 10px; pointer-events: none; opacity: 1; }
.pg-event .tabs a.on::before { left: -10px; right: auto; background: radial-gradient(circle at 0 0, transparent 9.5px, var(--tabbg) 10px); }
.pg-event .tabs a.on::after { right: -10px; left: auto; background: radial-gradient(circle at 100% 0, transparent 9.5px, var(--tabbg) 10px); }
.pg-event .tabs a:first-child.on::before { display: none; } /* the first tab sits on the page edge: no left flare */
.pg-event .tabs a.cq:not(.on) { background: none; box-shadow: none; color: var(--gold); }
.pg-event .tabs a.cq:not(.on):hover { color: #f4d68c; }
.pg-event .tabs a.cq:not(.on)::before, .pg-event .tabs a.cq:not(.on)::after { display: none; }

/* Inside Captains' Quarters: one Back button where the tabs were */
.pg-event .tabs .ev-back { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0; padding: 10px 16px 10px 12px; border-radius: 10px; border: 1px solid var(--ln2);
  background: #151c26; color: #e6ebf2; font: 700 14px/1 var(--D); letter-spacing: .12em; text-transform: uppercase; box-shadow: none; }
.pg-event .tabs .ev-back:hover { color: var(--gold); border-color: #d4af3766; }
.pg-event .tabs .ev-back:hover svg { transform: translateX(-3px); }
.pg-event .tabs .ev-back svg { transition: transform .2s; }
.pg-event .tabs .ev-back::before, .pg-event .tabs .ev-back::after { display: none !important; }

/* ---------- Player Pool header: two even rows, 40px controls ---------- */
.pg-event .cqbar-in { display: grid; gap: 12px; padding: 14px var(--gut) 14px; }
.pg-event .cq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.pg-event .cq-title { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; min-width: 0; }
.pg-event .cqbar h2 { font: 800 30px/1 var(--D); letter-spacing: .01em; color: #f2ead8; }
.pg-event .cqbar .counts { font-size: 13px; color: var(--mut); }
.pg-event .cq-nav { gap: 8px; flex-wrap: wrap; }
.pg-event .cq-btn { height: 40px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 10px; }
.pg-event .cq-help { width: 40px; height: 40px; border-radius: 10px; }
.pg-event .cq-ctrl { display: flex; align-items: center; gap: 10px; }
.pg-event .cq-ctrl .search { flex: 1 1 280px; max-width: 420px; height: 40px; border-radius: 10px; font-size: 14.5px; }
.pg-event .cq-ctrl .seg { height: 40px; padding: 0; gap: 0; border-radius: 10px; background: #0d131d; border: 1px solid var(--ln2); width: auto; }
.pg-event .cq-ctrl .seg button { height: 100%; padding: 0 16px; border-radius: 0; font-size: 13.5px; font-weight: 600; }
.pg-event .cq-ctrl .seg button.on { background: var(--s3); color: #fff; }
.pg-event .cq-ctrl .cq-icon { margin-left: auto; width: 40px; height: 40px; border-radius: 10px; }

@media (max-width: 760px) {
  .pg-event .tabs a { padding: 12px 14px 13px; }
  .pg-event .cqbar-in { gap: 10px; padding: 12px 16px; }
  .pg-event .cq-head { flex-direction: column; align-items: stretch; }
  .pg-event .cqbar h2 { font-size: 26px; }
  .pg-event .cq-nav { display: grid; grid-template-columns: 1fr 1fr 1fr 40px; gap: 6px; }
  .pg-event .cq-btn { justify-content: center; padding: 0 8px; font-size: 12px; letter-spacing: .06em; }
  .pg-event .cq-ctrl { flex-wrap: wrap; }
  .pg-event .cq-ctrl .search { flex: 1 1 100%; max-width: none; order: -1; }
  .pg-event .cq-ctrl .seg { flex: 1; }
  .pg-event .cq-ctrl .seg button { flex: 1; padding: 0 8px; }
  .pg-event .cq-ctrl .cq-icon { margin-left: 0; }
  .pg-event .tabs .ev-back { margin: 8px 0; }
}

/* Player Pool bar runs edge to edge (owner, 2026-10-16: the bar was a box narrower than the screen, leaving a step at its edges).
   The background and its bottom hairline extend to both screen edges via shadow + clip-path; the contents stay on the same
   centred column as the pool below. overflow-x: clip (not hidden) keeps the sticky bar working and stops any sideways scroll. */
.pg-event { overflow-x: clip; }
.pg-event .cqbar { background: #151c26; border-bottom: 0; box-shadow: 0 0 0 100vmax #151c26; clip-path: inset(0 -100vmax); }
.pg-event .cqbar::after { content: ""; position: absolute; left: -100vmax; right: -100vmax; bottom: 0; height: 1px; background: #ffffff1a; pointer-events: none; }
/* the Back row above it uses the same surface, so the two read as one header */
.pg-event.ev-compact .ev { background: #151c26; border-bottom: 1px solid #ffffff10; }