/* parts/home.css - the main page's <main> (scope: .pg-home). Linked only on /.
   FINAL2: B's Now box (the focus under the raid lane flipping week by week) + the Current events card (running bars on
   one axis) as one sticky rail beside Today / Tomorrow / This week (≥ 1000 px); on tablets + phones one column: Now box,
   Today, Tomorrow, This week, Current events (home.js LAYOUT renders that DOM order); B's picture tiles + week board drawn
   with A's tokens and plates; A's More cards. Behaviour: parts/home.client.js. */

/* =====================================================================
   Layout: [agenda | rail (Now box + Current events card)] on desktop; below that one column, the DOM order
   ===================================================================== */
.pg-home .home { --rail: clamp(320px, 30vw, 372px); display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 26px; }
.pg-home .agenda { min-width: 0; }
.pg-home #now.stage { margin-top: 0; }
.pg-home .rail { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1000px) {
  .pg-home .home { grid-template-columns: minmax(0, 1fr) var(--rail); column-gap: 28px; margin-top: 12px; }
  /* #now (the rail's column, as tall as the agenda) starts 40 px above #today; the rail inside is pushed down to line
     up with Today. The scrollspy then never sees the two chapters at one height (each header link marks its own
     chapter): the sticky part is the rail, never the #now section the spy reads. */
  .pg-home .agenda { grid-column: 1; grid-row: 1; padding-top: 40px; }
  .pg-home .agenda > .stage:first-child { margin-top: 0; }
  .pg-home #now { grid-column: 2; grid-row: 1; }
  /* Sticky decision (owner 2026-10-16): the WHOLE rail - Now box + Current events card - stays in view while Today /
     Tomorrow / This week scroll by, capped at the viewport: the Current events card gives way (home.client.js fitRail
     folds its trailing bars into "N more events"; an open fold scrolls inside the card). A screen too short for the Now
     box + one bar: .is-tall - full height, its sticky top moved up (--home-rail-top) so it scrolls with the page until
     its bottom shows, then stays. Nothing is ever cut off. */
  .pg-home .rail { position: sticky; top: var(--home-rail-top, calc(var(--bar-h) + var(--safe-t) + 16px)); gap: 16px; margin-top: 40px; max-height: calc(100vh - var(--bar-h) - var(--safe-t) - 32px); max-height: calc(100dvh - var(--bar-h) - var(--safe-t) - 32px); }
  .pg-home .rail > .now-card { flex: none; }
  .pg-home .rail > .ev-card { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent; }
  .pg-home .rail.is-tall { max-height: none; }
  .pg-home .rail.is-tall > .ev-card { overflow: visible; }
  /* the build's one-column order (.is-st: the Current events card after This week) on a desktop - before the first paint
     puts the card into the rail, or without JS: the card stands where the rail shows it, under the Now box, the rail's
     gap apart, so nothing jumps. Row 1 is the Now box's own height (the agenda spans into the 1fr row, which never grows
     row 1); the card fills the top of row 2. */
  .pg-home .home.is-st { grid-template-rows: auto 1fr; }
  .pg-home .home.is-st > .agenda { grid-row: 1 / span 2; }
  .pg-home .home.is-st > .ev-sec { grid-column: 2; grid-row: 2; margin-top: 16px; }
}
/* the build's Today that only repeats the focus (home.js todayIsFocus): hidden on phones (the header's ☰ width, 767 px)
   until the first paint leaves it out there - no jump either way */
@media (max-width: 767px) {
  .pg-home #today.day-dup { display: none; }
}

/* =====================================================================
   NOW - the live card: its head row ("● Now" · the raid week's time · ‹ ›), the raid lane, the focus under it
   ===================================================================== */
.pg-home .now-card, .pg-home .ev-card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-lg); }
.pg-home .now-card { container: nowc / inline-size; padding: 12px 16px 12px; }
.pg-home .now-b { display: grid; grid-template-columns: minmax(0, 1fr); }
/* the head row (owner 2026-10-16): title, time, pager - one row, each centred on it. The time takes what is left between
   title and arrows: it may wrap to a second line on a phone (≤ 2 lines, then "…"), never pushes the arrows off the row,
   and the row keeps one height on every page (paging moves nothing). */
.pg-home .now-hd { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 2px; }
.pg-home .now-t { display: inline-flex; flex: none; align-items: center; gap: 10px; white-space: nowrap; }
.pg-home .now-t .live-dot { width: 8px; height: 8px; }
.pg-home .now-wk { flex: 1 1 auto; min-width: 0; margin: 0; }
.pg-home .now-hd .pgr { align-self: center; }

/* ---------- focus: the one thing to do now - big card + up to two small ones (home.js focusHtml), under the lane ---------- */
.pg-home .fx { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-top: 6px; padding: 12px 0 2px; border-top: 1px solid var(--hair); }
.pg-home .fx-c { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; margin: 0; padding: 0; color: var(--text); text-align: left; cursor: pointer; background: none; border: 0; border-radius: 16px; }
.pg-home .fx-art { position: relative; display: block; flex: none; }
.pg-home .fx-tx { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.pg-home .fx-t { font-weight: 720; letter-spacing: -.01em; text-wrap: pretty; }
/* the state chip ("now · until 17:00" · "starts 18:00" · "now · all day"; one line) + a theme's note ("in-person": beside
   it, under it on a small phone - never cut) */
.pg-home .fx-k { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pg-home .fx-st { display: inline-block; flex: 0 1 auto; max-width: 100%; padding: 3px 9px; font-size: 12px; font-weight: 750; line-height: 16px; color: var(--text); background: var(--surface-2); border-radius: 11px; }
.pg-home .fx-st.is-live { color: var(--live); background: color-mix(in srgb, var(--live) 14%, var(--surface)); }
.pg-home .fx-n { white-space: nowrap; }
/* big: the picture like the day tiles (plate + flags + the countdown where the tiles show their time), the words beside */
.pg-home .fx-big { align-items: center; }
.pg-home .fx-big .fx-art { width: clamp(104px, 36%, 168px); transition: transform .18s ease; }
.pg-home .fx-big:hover .fx-art { transform: translateY(-2px); }
.pg-home .fx-big .fx-pl { width: 100%; height: 96px; padding-bottom: 22px; border-radius: 16px; transition: box-shadow .18s ease; }
.pg-home .fx-big:hover .fx-pl { box-shadow: var(--lift); }
.pg-home .fx-big .fx-art:not(:has(.fx-on)) .fx-pl { padding-bottom: 0; } /* nothing on the picture: art centred */
.pg-home .fx-big .flags { position: absolute; top: 7px; left: 7px; right: 7px; z-index: 2; display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; pointer-events: none; }
.pg-home .fx-big .flags .b { height: 18px; padding: 0 6px; font-size: 10px; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pg-home .fx-on { position: absolute; left: 6px; bottom: 6px; z-index: 2; display: inline-flex; align-items: center; max-width: calc(100% - 12px); height: 20px; padding: 0 7px; overflow: hidden; font-size: 11px; font-weight: 720; color: var(--text); white-space: nowrap; background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid var(--hair); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-variant-numeric: tabular-nums; }
.pg-home .fx-big .fx-t { display: -webkit-box; overflow: hidden; font-size: 17px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pg-home .fx-d { display: -webkit-box; overflow: hidden; font-size: 13px; font-weight: 550; line-height: 1.35; color: var(--text-2); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* small: a quiet bordered row each, two side by side (one: the full width) */
.pg-home .fx-s { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 8px; }
.pg-home .fx-sm { gap: 9px; padding: 4px 8px 4px 4px; border: 1px solid var(--hair); border-radius: 13px; transition: background-color .15s, border-color .15s; }
.pg-home .fx-sm:hover { background: var(--surface-2); border-color: var(--hair-2); }
.pg-home .fx-sm .fx-pl { width: 38px; height: 38px; border-radius: 10px; }
.pg-home .fx-sm .fx-pl.pn1 .mon { width: 84cqh; height: 84cqh; }
.pg-home .fx-sm .fx-pl > .glyph { width: 64cqw; }
.pg-home .fx-sm .fx-pl .balls { width: 92cqw; }
.pg-home .fx-sm .fx-tx { gap: 2px; }
.pg-home .fx-sm .fx-t { display: -webkit-box; overflow: hidden; font-size: 12.5px; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pg-home .fx-sm .fx-k { font-size: 11.5px; }
.pg-home .fx-sm .fx-st { height: auto; padding: 0; font-size: 11.5px; line-height: 1.3; color: var(--text-2); background: none; }
.pg-home .fx-sm .fx-st.is-live { color: var(--live); background: none; }
.pg-home .fx-none { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 14px; font-weight: 600; color: var(--text-2); }
.pg-home .fx-none .fx-pl { width: 64px; height: 64px; --c: var(--mute); }
/* below the desktop rail there is height to spare: a taller picture, the line may run to 3 lines */
@media (max-width: 999px) {
  .pg-home .fx-big .fx-pl { height: 108px; }
  .pg-home .fx-d { -webkit-line-clamp: 3; }
}
/* a wide Now box (tablets): the big card left, the small ones stacked beside it; the raid lane full width below */
@container nowc (min-width: 640px) {
  .pg-home .fx { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 8px 18px; }
  .pg-home .fx > .fx-big:last-child { grid-column: 1 / -1; }
  .pg-home .fx-s { grid-template-columns: minmax(0, 1fr); }
  .pg-home .fx-big .fx-art { width: clamp(120px, 40%, 180px); }
}
/* official pictures (home.js artPlate / themePlate): an event's own banner (feed image) or the season's key art filling
   the plate, cover-cropped (never stretched), the plate's rounding; the glyph under it shows when the picture fails.
   A day theme's glyph sits on the art as a small frosted badge (top left, where an event's flags go). */
.pg-home .plate.has-img { background: var(--plate); }
.pg-home .pl-img { position: absolute; inset: 0; z-index: 0; display: block; }
.pg-home .pl-img[hidden] { display: none; }
.pg-home .pl-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.pg-home .pl-badge { position: absolute; top: 8px; left: 8px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; background: color-mix(in srgb, var(--bg) 78%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 45%, var(--hair)); border-radius: 50%; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pg-home .pl-badge .glyph { width: 24px; max-width: none; stroke-width: 3; }
.pg-home .fx-big .pl-badge { top: 7px; left: 7px; width: 30px; height: 30px; }
.pg-home .fx-big .pl-badge .glyph { width: 21px; }

/* small caps labels inside the cards (CURRENT EVENTS) */
.pg-home .lane-t { flex: none; margin: 0; font-size: 11.5px; font-weight: 750; line-height: 1; letter-spacing: .09em; text-transform: uppercase; color: var(--mute); }

/* pager buttons (raid lane + this week): 34 px discs, 42 px to the finger */
.pg-home .pgr { display: inline-flex; flex: none; gap: 6px; margin-left: auto; }
.pg-home .pg { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--text); cursor: pointer; background: var(--surface-2); border: 1px solid var(--hair-2); border-radius: 50%; transition: background-color .15s, opacity .15s; }
.pg-home .pg::before { content: ""; position: absolute; inset: -4px; }
.pg-home .pg .chev { width: 16px; height: 16px; stroke-width: 2.4; }
.pg-home .pg:hover:not(:disabled, [aria-disabled="true"]) { border-color: color-mix(in srgb, var(--accent) 50%, var(--hair-2)); }
.pg-home .pg:disabled, .pg-home .pg[aria-disabled="true"] { cursor: default; opacity: .32; }

/* swipe track (both pagers): every page in the DOM, one in view; height = the tallest page */
.pg-home .track { display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 16px; outline-offset: -2px; }
.pg-home .track::-webkit-scrollbar { display: none; }
.pg-home .track > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }

/* ---------- raid lane ---------- */
.pg-home .lane { min-width: 0; }
/* the week label in the head row (.now-hd): ≤ 2 lines, then "…" (a later week's "Week 44 · Tue Oct 27 - Mon Nov 2" on a
   small phone) - so the row keeps one height on every page */
.pg-home .lane-wk { display: -webkit-box; overflow: hidden; font-size: 13px; font-weight: 650; line-height: 16px; color: var(--text-2); text-wrap: balance; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-variant-numeric: tabular-nums; }
.pg-home .lane-wk.is-last { color: var(--live); }
/* a small phone: up to 3 short lines in the same 40 px row ("Next week · / Wed Oct 28 - / Tue Nov 3") */
@media (max-width: 359px) { .pg-home .now-hd .lane-wk { font-size: 11.5px; line-height: 13px; -webkit-line-clamp: 3; } }
.pg-home .lane-none { margin: 4px 2px 10px; font-size: 13.5px; color: var(--mute); }
/* one card slot of the whole lane = its width / the fullest week's cards + the pinned column's; the picture fills the
   slot (less a hair). Registered, so both are computed here on the lane's width and every page and the pinned column
   share them: paging never resizes a picture or a column. */
@property --home-slot { syntax: "<length>"; inherits: true; initial-value: 100px; }
@property --home-pic { syntax: "<length>"; inherits: true; initial-value: 92px; }
.pg-home .lane { container: lane / inline-size; }
.pg-home .lane-b { --home-slot: calc(100cqi / var(--cols, 1)); --home-pic: min(118px, calc(100cqi / var(--cols, 1) - 8px)); display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 4px; border-radius: 16px; }
/* a week's cards in their tier bands (the band carries the tier: "5★" · "Mega" · "Shadow 5★"). Every card is one slot wide
   on every page and in the pinned column (balanced columns, owner 2026-10-16); a week with fewer cards than the fullest
   one spreads its bands evenly. The pinned long-running boss sits beside the pager's pages. */
.pg-home .lane-pg, .pg-home .lane-pin { display: flex; align-items: stretch; justify-content: space-evenly; padding: 6px 0 2px; }
.pg-home .lane-pin { border-left: 1px solid var(--hair); }
.pg-home .lb-g { display: flex; flex: var(--u) 1 calc(var(--u) * var(--home-slot)); flex-direction: column; min-width: 0; } /* the band stretches over its share of the row (owner: full-width tier lines); the cards keep one slot each */
/* lane cards line up from the top: name, CP lines and type icons level across the columns */
.pg-home .lane .rc-card .rc-ty { margin-top: 0; }
/* type icons in the Now lane: smaller than the shared pills (owner) */
.pg-home .lane .rc-card .rc-ty { gap: 3px; }
.pg-home .lane .rc-card .tb-io { width: 26px; height: 19px; }
.pg-home .lane .rc-card .tb-io .tb-i { width: 14px; height: 14px; }
.pg-home .lane .rc-card .rc-hd { flex: none; }
.pg-home .lb-h { margin: 0 3px 4px; padding: 0 0 5px; font-size: clamp(9px, calc(var(--home-slot) * .13), 10.5px); /* "SHADOW 5★" fits its slot, 320 px phones + the 1024 rail */ font-weight: 780; line-height: 14px; letter-spacing: .02em; text-align: center; text-transform: uppercase; color: var(--t); white-space: nowrap; border-bottom: 2px solid color-mix(in srgb, var(--t) 45%, transparent); }
.pg-home .lb-c { display: flex; flex: 1 1 auto; }
/* one raid event = one button (Mega Charizard X + Y: two cards in it) */
.pg-home .md { display: flex; flex: var(--mu, 1) 1 0; align-items: stretch; min-width: 0; padding: 4px 2px 8px; color: var(--text); cursor: pointer; background: none; border: 0; border-radius: 16px; transition: background-color .15s; }
.pg-home .md:hover { background: var(--surface-2); }
.pg-home .md > .rc { flex: 1 1 0; gap: 6px; }
/* the picture: the sprite big on a soft glow in the tier colour (the Raids page's plate - no ring, no box edge), one size
   for the whole lane; it keeps clear of the time chip on its bottom edge (≥ 12 px) */
.pg-home .lane .rc-plate { width: var(--home-pic); height: var(--home-pic); margin-bottom: 9px; aspect-ratio: auto; background: radial-gradient(closest-side at 50% 54%, color-mix(in srgb, var(--t, var(--accent)) 30%, transparent), color-mix(in srgb, var(--t, var(--accent)) 10%, transparent) 64%, transparent); border-radius: 50%; }
.pg-home .lane .rc.is-shadow .rc-plate { background: radial-gradient(closest-side at 50% 54%, color-mix(in srgb, var(--t-shadow) 36%, transparent), color-mix(in srgb, var(--t-shadow) 12%, transparent) 64%, transparent); }
.pg-home .lane .rc-plate > .mon { inset: 1% 2% 12px; }
.pg-home .lane .rc-plate .rc-spk { top: 0; right: 0; }
.pg-home .md:hover .rc-plate > .mon { transform: translateY(-3px); }
.pg-home .md .rc-plate > .mon.is-shadow img { filter: drop-shadow(0 0 4px rgba(150, 90, 230, .7)) var(--sprite-shadow); }
/* CP: "100%  2050" on one line, the weather icons + the boosted CP on the next - in every column (owner 2026-10-16: a
   narrow one too): the label | number grid of the shared card, never the narrow card's stack (styles.css @container rc) */
.pg-home .lane .rc-card .rc-cp { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 1px 5px; font-size: 12px; line-height: 17px; }
.pg-home .lane .rc-card .rc-r { display: contents; }
.pg-home .lane .rc-card .rc-n .rc-k { display: inline-flex; }
.pg-home .lane .rc-card .rc-k { gap: 1px; font-size: 9.5px; letter-spacing: .04em; }
.pg-home .lane .rc-card .rc-w img { width: 15px; height: 15px; }
.pg-home .lane .rc-card .rc-nm { font-size: 13px; }
/* a narrow slot (4 columns on a small phone): a size smaller, still one line each */
@container rc (max-width: 72px) {
  .pg-home .lane .rc-card .rc-cp { gap: 1px 3px; font-size: 11px; line-height: 16px; }
  .pg-home .lane .rc-card .rc-k { font-size: 8.5px; letter-spacing: .02em; }
  .pg-home .lane .rc-card .rc-w img { width: 13px; height: 13px; }
  .pg-home .lane .rc-card .rc-nm { font-size: 12px; }
  .pg-home .lane .rc-card .tb-io { width: 23px; height: 17px; }
  .pg-home .lane .rc-card .tb-io .tb-i { width: 13px; height: 13px; }
}
/* the time left on the picture's bottom edge */
.pg-home .md-c { position: absolute; left: 50%; bottom: -10px; z-index: 1; padding: 0 7px; font-size: 11.5px; font-weight: 750; line-height: 19px; color: var(--text-2); white-space: nowrap; background: var(--surface); border: 1px solid var(--hair-2); border-radius: 999px; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.pg-home .md-c.is-last { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, var(--hair-2)); }
/* list layout (a week with more cards than one row holds): bands stacked, row cards two a line (one when narrow),
   the time under the numbers, the pinned boss under the pager */
.pg-home .lane.is-list .lane-pg, .pg-home .lane.is-list .lane-pin { display: block; }
.pg-home .lane.is-list .lb-g { display: block; }
.pg-home .lane.is-list .lane-pin { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--hair); border-left: 0; }
.pg-home .lane.is-list .lb-g + .lb-g { margin-top: 8px; }
.pg-home .lane.is-list .lb-h { margin: 0 2px 4px; text-align: left; }
.pg-home .lane.is-list .lb-c { display: flex; flex-wrap: wrap; justify-content: center; }
.pg-home .lane.is-list .md { flex: 0 0 50%; }
.pg-home .lb-br { display: none; }
.pg-home .lane.is-list .lb-br { display: block; flex: 0 0 100%; height: 0; }
.pg-home .lane.is-list .md { padding: 6px 4px 6px 9px; } /* the face's shiny mark (outer corner) stays inside its page */
.pg-home .lane.is-list .lb-c2 { flex-direction: column; flex-wrap: nowrap; }
.pg-home .lane.is-list .md-2 { flex: none; gap: 6px; }
.pg-home .lane.is-list .md-c { position: static; display: inline-block; margin-top: 3px; transform: none; }
@container lane (max-width: 329px) {
  .pg-home .lane.is-list .md { flex-basis: 100%; }
  .pg-home .lane.is-list .md-2 { flex-direction: column; }
  .pg-home .lane.is-list .md-2 > .rc { flex: none; }
}
/* a pointer flipped the lane: a short ring on the shown week */
.pg-home .lane.is-flash .lane-b { animation: home-flash .9s ease; }
@keyframes home-flash { 0% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 2px transparent; } }

/* ---------- the Current events card (was the Now box's "Running" half): bars on one axis (-7 d … +28 d), the now-line
   through every bar. In the rail under the Now box (desktop) or its own section after This week (section.ev-sec) ---------- */
.pg-home .ev-card { padding: 8px 16px 8px; }
.pg-home .runs { min-width: 0; }
.pg-home .runs-h { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 2px; }
.pg-home .runs-n { font-size: 12px; font-weight: 700; color: var(--mute); }
.pg-home .runs-none { margin: 4px 2px 10px; font-size: 13.5px; color: var(--mute); }
.pg-home .axis { position: relative; display: block; height: 15px; margin: 2px 4px 0 54px; font-size: 10.5px; font-weight: 650; line-height: 15px; color: var(--mute); }
.pg-home .axis i { position: absolute; top: 0; font-style: normal; white-space: nowrap; transform: translateX(-50%); }
.pg-home .axis .ax-now { color: var(--live); }
.pg-home .run-l { display: grid; grid-template-columns: minmax(0, 1fr); }
.pg-home .run { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 4px; color: var(--text); text-align: left; cursor: pointer; background: none; border: 0; border-radius: 12px; }
.pg-home .run:hover { background: var(--surface-2); }
.pg-home .run-pl { width: 38px; height: 38px; border-radius: 11px; }
.pg-home .run-pl.pn1 .mon { width: 84cqh; height: 84cqh; }
.pg-home .run-pl > .glyph { width: 62cqw; }
.pg-home .run-b { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.pg-home .run-line { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.pg-home .run-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 650; line-height: 1.3; text-wrap: pretty; }
.pg-home .run-end { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 17.5px; font-size: 12.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-home .run-end .b { height: 18px; padding: 0 7px; font-size: 10px; }
.pg-home .run-at { color: var(--live); }
.pg-home .run-tba { font-weight: 650; color: var(--mute); }
.pg-home .run-tr { position: relative; display: block; height: 6px; background: var(--bar); border-radius: 3px; }
.pg-home .run-tr::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--now); width: 2px; margin-left: -1px; background: var(--live); border-radius: 1px; }
.pg-home .run-tr i { position: absolute; top: 0; height: 100%; }
.pg-home .run-past { background: color-mix(in srgb, var(--c) 32%, transparent); border-radius: 3px 0 0 3px; }
.pg-home .run-left { background: var(--c); border-radius: 0 3px 3px 0; }
.pg-home .run-left.is-cont { background: linear-gradient(90deg, var(--c) 72%, color-mix(in srgb, var(--c) 12%, transparent)); }
/* the fold: two toggle buttons, one state (.runs.is-open, home.client.js), each in a block wrapper (.run-more) right
   before the bars it reveals (home.js runsHtml) - DOM order = visual order. ≥ 40 px tall; open state kept across
   repaints (home.client.js), the toggle's id keeps focus. */
.pg-home .run-more { display: none; }
.pg-home .run-tg { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0; padding: 0 6px; font-size: 13px; font-weight: 650; text-rendering: inherit; color: var(--accent); cursor: pointer; background: none; border: 0; border-radius: 10px; }
.pg-home .run-tg .chev { width: 14px; height: 14px; stroke-width: 2.4; transition: transform .15s; }
.pg-home .runs.is-open .run-tg .chev { transform: rotate(180deg); }
.pg-home .mn-n, .pg-home .mn-w, .pg-home .mn-t { display: none; }
/* the desktop rail: the "CURRENT EVENTS 8" head · the axis · the first K bars · "N more events" · the bars past K (.run-x) */
@media (min-width: 1000px) {
  .pg-home .run-l > .run-x { display: none; }
  .pg-home .runs.is-open .run-l > .run-x { display: flex; }
  .pg-home .run-more-w.need-w { display: block; }
  .pg-home .mn-w { display: inline; }
  /* the sticky rail would not fit the viewport (short screen, narrow rail, big raid week): home.client.js trims
     trailing bars (.run-cut) until it fits and writes the count into .mn-t (.is-tight); opening the fold shows them */
  .pg-home .run.run-cut { display: none; }
  .pg-home .runs.is-open .run-l > .run.run-cut { display: flex; }
  .pg-home .runs.is-tight .run-more-w { display: block; }
  .pg-home .runs.is-tight .mn-t { display: inline; }
  .pg-home .runs.is-tight .mn-w { display: none; }
}
/* below the rail (phones, tablets: the Now box is not sticky): the toggle is the head row - "CURRENT EVENTS 8 ⌄", the whole row
   a 44 px toggle (owner 2026-10-16: no separate link) · the axis · the special bars (0-2, ranked: the one `order` left,
   reading-flow keeps focus in that order) · the rest (open only). The plain head (.runs-h) shows only when nothing is
   folded; folded, it stays as the section's heading for screen readers (visually hidden, out of the flow). */
@media (max-width: 999px) {
  .pg-home .runs.fold-n > .runs-h { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .pg-home .run-l { reading-flow: grid-order; }
  .pg-home .run-l > .run { order: 3; display: none; }
  .pg-home .run-l > .run.run-sp { display: flex; }
  .pg-home .run-l > .run-sp1 { order: 1; }
  .pg-home .run-l > .run-sp2 { order: 2; }
  .pg-home .runs.is-open .run-l > .run { display: flex; }
  .pg-home .run-more-n { display: block; }
  .pg-home .run-more-n > .run-tg { display: flex; width: 100%; min-height: 44px; margin: -2px 0; padding: 0 2px; color: var(--text); }
  .pg-home .run-more-n > .run-tg:hover .lane-t { color: var(--text-2); }
  .pg-home .run-more-n > .run-tg .chev { color: var(--text-2); }
  .pg-home .mn-n { display: inline-flex; align-items: center; gap: 8px; }
  /* nothing special and folded: no axis over an empty list */
  .pg-home .runs.sp0:not(.is-open) .axis { display: none; }
}

/* =====================================================================
   TODAY · TOMORROW - picture tiles: plate (time + flags on it) + title + one meta line
   ===================================================================== */
.pg-home .day .sh { margin-bottom: 14px; }
.pg-home .tiles > .jg-i { container-type: inline-size; }
.pg-home .tl { display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%; padding: 0; color: var(--text); text-align: left; cursor: pointer; background: none; border: 0; border-radius: 18px; }
.pg-home .tl-art { position: relative; display: block; flex: none; transition: transform .18s ease; }
.pg-home .tl:hover .tl-art { transform: translateY(-3px); }
/* the plate keeps a band at the bottom for the time chip: sprites sit above it, never under it */
.pg-home .tl-art > .plate { width: 100%; height: clamp(130px, calc(14.5vh + 22px), 162px); padding-bottom: 34px; transition: box-shadow .18s ease; }
.pg-home .tl:hover .tl-art > .plate { box-shadow: var(--lift); }
.pg-home .tl .flags, .pg-home .wc .flags { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2; display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; pointer-events: none; }
.pg-home .tl .flags .b { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pg-home .when { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid var(--hair); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-variant-numeric: tabular-nums; }
.pg-home .tl-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0 4px; }
.pg-home .tl-t { font-size: 15px; font-weight: 680; line-height: 1.3; letter-spacing: -.01em; text-wrap: pretty; }
.pg-home .tl-m { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--mute); font-variant-numeric: tabular-nums; }
.pg-home .tl-m .is-live { color: var(--live); }
/* raid tiles (Raid Hour, Raid Day, a raid-week flip): their raid Pokémon as raid card rows (H.raidCard) */
.pg-home .tl-rc { display: flex; flex-direction: column; gap: 8px; margin-top: 5px; }
.pg-home .tl-rc .rc-face { width: 40px; height: 40px; border-radius: 12px; }
.pg-home .rc-more { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.pg-home .tl-k::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 1px; vertical-align: middle; background: var(--c, var(--mute)); border-radius: 50%; }
/* the season's day theme (home.js themeTile): its bonus line is what the tile says */
.pg-home .tl-sdl { font-weight: 600; color: var(--text-2); }
/* a tile with room (one per row) lays out wide: picture left, words right */
@container (min-width: 460px) {
  .pg-home .tl { flex-direction: row; align-items: center; gap: 22px; }
  .pg-home .tl-art { width: 54%; }
  .pg-home .tl-art > .plate { height: clamp(150px, calc(16vh + 24px), 184px); }
  .pg-home .tl-tx { flex: 1; gap: 6px; padding: 0 12px 0 0; }
  .pg-home .tl-t { font-size: 21px; line-height: 1.22; letter-spacing: -.02em; }
  .pg-home .tl-m { font-size: 14px; }
}
/* raid-week flip: the new bosses' faces, flips the lane (↑ where the lane is above, → beside it) */
.pg-home .tl-ptr .tl-art > .plate { --c: var(--t-mega); }
.pg-home .b-ptr { color: var(--text-2); }
.pg-home .b-ptr i { font-style: normal; }
.pg-home .b-ptr .ar-r { display: none; }
@media (min-width: 1000px) {
  .pg-home .b-ptr .ar-u { display: none; }
  .pg-home .b-ptr .ar-r { display: inline; }
}
.pg-home .day-none { display: flex; align-items: center; gap: 16px; min-height: 96px; margin: 0; padding: 0 22px; font-size: 14.5px; color: var(--text-2); background: radial-gradient(60% 90% at 0% 50%, var(--plate-hi), transparent 70%), var(--plate); border-radius: 18px; }
.pg-home .day-none .plate { width: 52px; height: 52px; background: none; --c: var(--mute); }

/* =====================================================================
   THIS WEEK - pager of 7-day pages: board (≥ 700 px wide) / day list + ticker (narrower)
   ===================================================================== */
.pg-home #week { container: wk / inline-size; }
/* the head: title + dates · the view switch (All · Raids · Events · Timeline) · the pager - one line from 640 px; narrower,
   the switch takes its own full-width line under title + pager (equal segments, 40 px to the finger) */
.pg-home #week > .sh { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; }
.pg-home #week > .sh .sh-x { display: contents; }
.pg-home #week > .sh .pgr { grid-column: 2; grid-row: 1; }
.pg-home .wk-seg { grid-column: 1 / -1; grid-row: 2; width: 100%; }
.pg-home .wk-seg .seg-b { flex: 1 1 0; }
@container wk (min-width: 640px) {
  .pg-home #week > .sh { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pg-home .wk-seg { grid-column: 2; grid-row: 1; width: auto; }
  .pg-home .wk-seg .seg-b { flex: none; }
  .pg-home #week > .sh .pgr { grid-column: 3; }
}
.pg-home .wk-track { margin-top: 2px; }
.pg-home .wk-pg { display: flex; flex-direction: column; }
/* quiet page: empty weeks in a row, one calm line */
.pg-home .wk-q { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; margin: 0; font-size: 14px; color: var(--mute); text-align: center; }
.pg-home .wk-q .plate { width: 56px; height: 56px; background: none; --c: var(--mute); }

/* ---- list (default): one row per day, the first item + "+N" (rows keep one height: pages never jump) ---- */
.pg-home .wd { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 72px; padding: 7px 0; border-top: 1px solid var(--hair); scroll-margin-top: calc(var(--bar-h) + var(--safe-t) + 84px); }
.pg-home .wd:first-child { border-top: 0; }
.pg-home .wd-h { display: flex; flex-direction: column; align-items: center; margin: 0; line-height: 1; }
.pg-home .wd-c { min-width: 0; }
.pg-home .wd-sd { min-width: 0; margin: 2px 0 5px; }
.pg-home .wd-sd.is-blank { display: none; }
.pg-home .wd-wd { font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); }
.pg-home .wd-n { margin-top: 3px; font-size: 20px; font-weight: 760; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.pg-home .wd.is-today .wd-n, .pg-home .wd.is-today .wd-wd { color: var(--accent); }
.pg-home .wd.is-empty .wd-n { color: var(--mute); }
.pg-home .wd-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pg-home .wd-none { margin-left: 4px; }
.pg-home .wc { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; margin: -4px 0; padding: 4px; color: var(--text); text-align: left; cursor: pointer; background: none; border: 0; border-radius: 14px; }
.pg-home .wc:hover { background: var(--surface); }
.pg-home .wc-art { position: relative; display: block; flex: none; width: 50px; height: 50px; }
.pg-home .wc-art > .plate { width: 100%; height: 100%; border-radius: 13px; }
.pg-home .wc-on { display: none; }
.pg-home .wc-tx { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.pg-home .wc-t { font-size: 14.5px; font-weight: 680; line-height: 1.3; letter-spacing: -.005em; text-wrap: pretty; }
.pg-home .wc-m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--mute); }
.pg-home .wc-in { font-weight: 720; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-home .wc-f { display: inline-flex; flex-wrap: wrap; gap: 4px; } /* a narrow board column wraps its flags (never spills into the next day) */
.pg-home .wc-f .b { height: 18px; padding: 0 7px; font-size: 10.5px; }
.pg-home .wc-r { min-width: 0; }
.pg-home .wc-ptr .wc-art > .plate { --c: var(--t-mega); }
.pg-home a.wc:hover { text-decoration: none; }
.pg-home .wc-rc { display: flex; flex-direction: column; gap: 7px; margin-top: 5px; }
/* a raid-week flip. List: "New raid bosses 06:00" over one row per boss, no picture of its own; board (below): a week
   tile like the others - the bosses together on the picture, the time on it, their names under the title */
.pg-home .wc-flip .wc-art, .pg-home .wc-nm { display: none; }
.pg-home .wc-hd { display: flex; align-items: baseline; gap: 10px; } /* list: "New raid bosses 06:00" on one line */
.pg-home .wc-flip .wc-rc { gap: 6px; }
/* each boss row's face sits on the same picture plate as every other item (owner 2026-10-16) */
.pg-home .wc-rc .rc-face { width: 38px; height: 38px; background: radial-gradient(64% 76% at 50% 56%, color-mix(in srgb, var(--c, var(--accent)) 20%, transparent), transparent 76%), radial-gradient(90% 60% at 50% 0%, var(--plate-hi), transparent 70%), var(--plate); border-radius: 11px; }
.pg-home .wc-rc .rc-nm { font-size: 13px; }
.pg-home .wc-rc .rc-cp { font-size: 11.5px; line-height: 16px; }
/* a Raid Hour's numbers the same day's flip already lists (the list shows the flip's rows; the board does not) */
.pg-home .wc-rc-said { display: none; }
/* the day's items past the first (list) / past WEEK_CAP (board) wait behind "+N"; it opens them in place */
.pg-home .wc-xl { display: none; }
.pg-home .wd.is-open .wc-xl { display: flex; }
.pg-home .wd.is-open .wd-l { flex-direction: column; align-items: stretch; }
.pg-home .wd.is-open .wd-l > .wc { flex: none; margin: 0; }
.pg-home .wd.is-open .wd-l > .wd-more { align-self: flex-start; }
/* "+N" (faces of what is hidden) ⇄ "Less": a 40 px button, aria-expanded (home.client.js) */
.pg-home .wd-more { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 6px; font: inherit; font-size: 12.5px; font-weight: 750; color: var(--text-2); white-space: nowrap; cursor: pointer; background: var(--surface); border: 1px solid var(--hair-2); border-radius: 999px; }
.pg-home .wd-more:not(:has(.faces)) { padding-left: 12px; }
.pg-home .wd-more:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, var(--hair-2)); }
.pg-home .wd-mo, .pg-home .wd-mc { display: inline-flex; align-items: center; gap: 6px; }
.pg-home .wd-mc { display: none; gap: 4px; }
.pg-home .wd-mc .chev { width: 14px; height: 14px; stroke-width: 2.4; }
.pg-home .wd-more[aria-expanded="true"] { padding: 0 14px 0 10px; }
.pg-home .wd-more[aria-expanded="true"] .wd-mo { display: none; }
.pg-home .wd-more[aria-expanded="true"] .wd-mc { display: inline-flex; }
.pg-home .wd-mf .face { width: 26px; height: 26px; padding: 2px; box-shadow: inset 0 0 0 1.5px var(--face-ring), 0 0 0 2px var(--surface); }
.pg-home .wd-mf .face + .face { margin-left: -9px; }
.pg-home .wd-more-b { display: none; }
/* today's / tomorrow's column: a week tile pointing up to its row ("↑ Today" where the time sits) */
.pg-home .wp-ar { font-style: normal; font-weight: 800; }

/* phone ticker: the shown week's days, a dot per item; opaque, sticky under the bar when there is height */
.pg-home .tk-w { margin: 0 calc(var(--gut) * -1) 4px; padding: 6px var(--gut) 8px; background: var(--bg); }
.pg-home .tk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; }
.pg-home .tk-d { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 56px; padding: 0; color: var(--text); background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; }
.pg-home .tk-d:hover { text-decoration: none; border-color: var(--hair-2); }
.pg-home .tk-d.is-empty { background: transparent; }
.pg-home .tk-d.is-today { border-color: color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.pg-home .tk-wd { font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.pg-home .tk-n { font-size: 16px; font-weight: 760; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pg-home .tk-d.is-empty .tk-n { color: var(--mute); }
.pg-home .tk-d.is-today .tk-n { color: var(--accent); }
.pg-home .tk-dots { display: flex; gap: 3px; height: 5px; }
.pg-home .tk-dots i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.pg-home .tk-q { display: block; height: 56px; }
/* the season weekday's one-word token under the dots (the full label + its popover sit on the day's row below) */
.pg-home .tk-w:has(.has-sd) .tk-d, .pg-home .tk-w:has(.has-sd) .tk-q { height: 68px; } /* every week's ticker one height */
.pg-home .tk-sd { margin-top: 3px; padding: 0 3px; font-size: 9.5px; font-weight: 720; line-height: 11px; letter-spacing: -.01em; color: var(--text-2); white-space: nowrap; }
/* a token wider than an even seventh (e.g. "Showcase" on a 320 px phone) widens its own day a little: never cut */
.pg-home .tk-w:has(.has-sd) .tk { grid-template-columns: repeat(7, minmax(min-content, 1fr)); }
@media (min-height: 500px) {
  .pg-home .tk-w { position: sticky; top: calc(var(--bar-h) + var(--safe-t)); z-index: 5; }
}
/* a control focused in This week clears the bar + the sticky ticker (WCAG 2.4.11) */
@media (max-width: 999px) {
  .pg-home #week :is(a, button, [tabindex]) { scroll-margin-top: calc(150px + var(--safe-t)); }
}

/* ---- board (≥ 700 px): seven day columns, ≤ 2 chips each + "+N"; today's + tomorrow's columns point up ---- */
@container wk (min-width: 700px) {
  .pg-home .tk-w { display: none; }
  .pg-home .wk-track { margin-top: 0; border-radius: 0; }
  .pg-home .wk-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); flex: 1; border-top: 1px solid var(--hair); }
  /* column rules fade out downwards: a light day reads as free time, not as an empty box */
  .pg-home .wd { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; padding: 12px 7px 10px; border-top: 0; border-left: 1px solid transparent; border-image: linear-gradient(to bottom, var(--hair-2), var(--hair) 45%, transparent 92%) 1; }
  .pg-home .wd:first-child { padding-left: 0; border-left: 0; }
  .pg-home .wd:last-child { padding-right: 0; }
  .pg-home .wd-h { flex-direction: row; align-items: baseline; gap: 5px; padding: 0 3px; }
  .pg-home .wd-n { margin-top: 0; }
  .pg-home .wd-sd { min-height: 30px; margin: -4px 0 0; padding: 0 3px; }
  .pg-home .wd-sd.is-blank { display: block; }
  .pg-home .wd-sd .sd { font-size: 11.5px; line-height: 15px; }
  .pg-home .wd-c { display: flex; flex-direction: column; gap: 10px; }
  .pg-home .wd-l { flex-direction: column; align-items: stretch; gap: 12px; }
  .pg-home .wd-none { margin: 8px 0 0 4px; }
  .pg-home .wc { flex: none; flex-direction: column; align-items: stretch; gap: 7px; margin: 0; padding: 0; border-radius: 14px; }
  .pg-home .wc:hover { background: none; }
  .pg-home .wc-art { width: 100%; height: 74px; transition: transform .18s ease; }
  .pg-home .wc:hover .wc-art { transform: translateY(-2px); }
  .pg-home .wc-art > .plate { padding-bottom: 22px; border-radius: 14px; }
  .pg-home .wc-on { position: absolute; left: 5px; bottom: 5px; z-index: 2; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; font-size: 11px; font-weight: 720; color: var(--text); white-space: nowrap; background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid var(--hair); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-variant-numeric: tabular-nums; }
  .pg-home .wc-in { display: none; }
  .pg-home .wc-tx { gap: 4px; padding: 0 2px; }
  .pg-home .wc-t { font-size: 12.5px; line-height: 1.3; }
  .pg-home .wc-m { gap: 4px; font-size: 11.5px; line-height: 1.3; }
  .pg-home .wc-xl { display: flex; }
  .pg-home .wc-xb { display: none; }
  .pg-home .wd.is-open .wc-xb { display: flex; }
  /* a raid-week flip on the board = a week tile: picture (bosses + time), title, the boss names; no rows */
  .pg-home .wc-flip .wc-art { display: block; }
  .pg-home .wc-flip .wc-rc { display: none; }
  .pg-home .wc-nm { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--mute); }
  .pg-home .wc-hd { display: block; }
  .pg-home .wc-hd .wc-t { display: block; }
  .pg-home .wc-rc-said { display: flex; }
  /* "↑ Tomorrow" on a narrow column's picture: a little smaller, never cut */
  .pg-home .wc-art { container-type: inline-size; }
  .pg-home .wc-rc { gap: 8px; margin-top: 2px; }
  .pg-home .wc-rc .rc { column-gap: 6px; }
  .pg-home .wc-rc .rc-face { width: 26px; height: 26px; border-radius: 8px; }
  .pg-home .wc-rc .rc-face .rc-spk { top: -5px; left: -5px; right: auto; }
  .pg-home .wc-rc .rc-nm { font-size: 12px; line-height: 1.25; }
  .pg-home .wc-rc .rc-t { width: 15px; height: 15px; }
  .pg-home .wc-rc .rc-cp { font-size: 11px; line-height: 15px; }
  .pg-home .wc-rc .rc-w img { width: 14px; height: 14px; }
  .pg-home .wd-more { align-self: flex-start; padding-right: 10px; font-size: 12px; }
  .pg-home .wd-more-l { display: none; }
  .pg-home .wd-more-b { display: inline-flex; }
  .pg-home .wd-mf .face { width: 24px; height: 24px; }
}

@container (max-width: 84px) {
  .pg-home .wc-pt .wc-on { left: 4px; padding: 0 5px; font-size: 10px; letter-spacing: -.01em; }
}

/* ---- Raids view: every top-tier boss up that day as a medal (a disc ringed in its tier colour; species + the
   band's word under it), "New raid bosses 06:00" over an arrival day, the day's raid moments as small rows.
   List: medal rows (≤ 4, balanced in home.js) · board: one compact row per boss, stacked ---- */
.pg-home .wr-day { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; padding: 2px 0; }
.pg-home .wr-sw { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 -2px 4px; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--text-2); }
.pg-home .wr-sw-at { font-weight: 760; color: var(--accent); font-variant-numeric: tabular-nums; }
/* the list: medals on one column grid across the days (92 px each, shrinking when four do not fit), from the left */
.pg-home .wr-g { display: grid; grid-template-columns: repeat(var(--n4, 4), minmax(0, 92px)); gap: 6px 4px; }
.pg-home .wr-g > .wr { grid-column-start: var(--s4, auto); }
@container wk (max-width: 341px) { /* small phones: 3 a row */
  .pg-home .wr-g { grid-template-columns: repeat(var(--n3, 3), minmax(0, 92px)); }
  .pg-home .wr-g > .wr { grid-column-start: var(--s3, auto); }
}
.pg-home .wr-more { display: none; } /* the board's "+N" (the list shows every medal) */
.pg-home .wr { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 6px 2px 5px; color: var(--text); text-align: center; cursor: pointer; background: none; border: 0; border-radius: 14px; }
.pg-home .wr:hover { background: var(--surface); }
.pg-home .wr-d { position: relative; display: grid; flex: none; place-items: center; width: 46px; height: 46px; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--t) 26%, transparent), transparent 70%), var(--surface-2); border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t) 50%, transparent); transition: transform .18s ease; }
.pg-home .wr:hover .wr-d { transform: translateY(-2px); }
.pg-home .wr-d > .mon { width: 78%; height: 78%; }
.pg-home .wr-d > .mon.is-shadow img { filter: drop-shadow(0 0 4px rgba(150, 90, 230, .7)) var(--sprite-shadow); }
.pg-home .wr-spk { position: absolute; top: -3px; right: -4px; line-height: 0; }
.pg-home .wr-spk .spk { position: static; display: block; width: 13px; height: 13px; }
.pg-home .wr-tx { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; min-width: 0; }
.pg-home .wr-n { max-width: 100%; font-size: 12.5px; font-weight: 700; line-height: 1.25; text-wrap: balance; overflow-wrap: anywhere; }
.pg-home .wr-m { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1px 5px; }
.pg-home .wr-k { font-size: 9.5px; font-weight: 780; line-height: 15px; letter-spacing: .03em; text-transform: uppercase; color: var(--t); white-space: nowrap; }
.pg-home .wr-new { height: 15px; padding: 0 5px; font-size: 9px; }
.pg-home .wr-to { font-size: 10.5px; font-weight: 750; line-height: 15px; color: var(--live); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-home .wr-none { margin: 0 0 0 4px; font-size: 13px; font-weight: 600; color: var(--mute); }
.pg-home .wm-l { display: flex; flex-direction: column; gap: 4px; }
.pg-home .wm { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 4px; color: var(--text); text-align: left; cursor: pointer; background: none; border: 0; border-radius: 12px; }
.pg-home .wm:hover { background: var(--surface); }
.pg-home .wm-pl { width: 38px; height: 38px; border-radius: 11px; }
.pg-home .wm-pl.pn1 .mon { width: 84cqh; height: 84cqh; }
.pg-home .wm-pl > .glyph { width: 62cqw; }
.pg-home .wm-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pg-home .wm-t { font-size: 13px; font-weight: 680; line-height: 1.3; text-wrap: pretty; }
.pg-home .wm-m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12px; font-weight: 720; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pg-home .wm-f { display: inline-flex; gap: 4px; }
.pg-home .wm-f .b { height: 18px; padding: 0 7px; font-size: 10.5px; }
/* under the view: 1★ + 3★ live on the Raids page */
.pg-home .wr-foot { margin: 14px 0 0; }
.pg-home .wr-fl { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px 4px 6px; font-size: 13px; font-weight: 650; color: var(--text-2); background: var(--surface); border: 1px solid var(--hair-2); border-radius: 999px; }
.pg-home .wr-fl:not(:has(.faces)) { padding-left: 14px; }
.pg-home .wr-fl:hover { color: var(--text); text-decoration: none; border-color: color-mix(in srgb, var(--accent) 50%, var(--hair-2)); }
.pg-home .wr-ft { white-space: nowrap; }
.pg-home .wr-fa { display: inline-flex; white-space: nowrap; align-items: center; gap: 2px; color: var(--accent); }
.pg-home .wr-fa .chev { width: 14px; height: 14px; stroke-width: 2.4; }
.pg-home .wr-ff .face { width: 30px; height: 30px; padding: 2px; }
.pg-home .wr-ff .face + .face { margin-left: -9px; }
@container wk (max-width: 359px) { .pg-home .wr-ff { display: none; } .pg-home .wr-fl { padding-left: 14px; } }
@container wk (min-width: 700px) {
  .pg-home .wr-day { gap: 8px; padding: 0; }
  /* "New 06:00" on one line in a narrow column (the words "raid bosses" stay for screen readers) */
  .pg-home .wr-sw { gap: 6px; margin: 0; padding: 0 3px; font-size: 12px; }
  .pg-home .wr-sw-l { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* a day column is narrow: one medal a line (the disc over its words) */
  .pg-home .wr-g { display: flex; flex-direction: column; gap: 2px; }
  .pg-home .wr.wr-xb { display: none; }
  .pg-home .wr-more { display: flex; }
  .pg-home .wd.is-open .wr.wr-xb { display: flex; }
  .pg-home .wr { flex: none; gap: 5px; padding: 6px 2px 5px; }
  .pg-home .wr-d { width: 42px; height: 42px; }
  .pg-home .wr-n { font-size: 12px; }
  /* a raid moment on the board: a week tile in small (picture over its title + time) */
  .pg-home .wm-l { gap: 10px; margin-top: 2px; }
  .pg-home .wm { flex-direction: column; align-items: stretch; gap: 6px; padding: 0; }
  .pg-home .wm:hover { background: none; }
  .pg-home .wm-pl { width: 100%; height: 56px; border-radius: 12px; transition: transform .18s ease; }
  .pg-home .wm:hover .wm-pl { transform: translateY(-2px); }
  .pg-home .wm-tx { padding: 0 2px; }
  .pg-home .wm-t { font-size: 12px; }
  .pg-home .wm-m { font-size: 11px; }
}

/* ---- Timeline view: what spans days, a bar each on the week's 7 days (the Now box's bars: paler before now, a fade
   where it runs past an edge). Narrow: name + end over the bar (the track = 7 day segments). Wide (≥ 700 px): a Gantt -
   names left, the bars over day columns (rules, today tinted, the now-line through them). ---- */
.pg-home .tln { --tln-x: 54px; position: relative; display: flex; flex-direction: column; padding: 2px 0 4px; }
.pg-home .tln-bg { display: none; }
.pg-home .tln-ax { margin: 0 4px 2px var(--tln-x); }
.pg-home .tln-ax-d { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pg-home .tln-ax-d i { display: flex; flex-direction: column; align-items: center; font-size: 13px; font-style: normal; font-weight: 760; line-height: 1.2; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pg-home .tln-ax-d b { font-size: 9.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.pg-home .tln-ax-d .is-today, .pg-home .tln-ax-d .is-today b { color: var(--accent); }
.pg-home .tln-g { display: flex; flex-direction: column; }
.pg-home .tln-h { display: flex; align-items: center; gap: 8px; min-height: 30px; margin: 6px 0 0; padding: 0 4px; font-size: inherit; }
.pg-home .tlr { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-areas: "pl t e" "pl tr tr"; align-items: center; gap: 6px 12px; width: 100%; margin: 0; padding: 6px 4px; color: var(--text); text-align: left; cursor: pointer; background: none; border: 0; border-radius: 12px; }
.pg-home .tlr:hover { text-decoration: none; background: var(--surface); }
.pg-home .tlr.is-raid { --c: var(--t); }
.pg-home .tlr-pl { grid-area: pl; width: 38px; height: 38px; border-radius: 11px; }
.pg-home .tlr-pl.pn1 .mon { width: 84cqh; height: 84cqh; }
.pg-home .tlr-pl > .glyph { width: 62cqw; }
.pg-home .tlr-pl .balls { width: 92cqw; }
.pg-home .tlr-t { grid-area: t; min-width: 0; font-size: 13.5px; font-weight: 650; line-height: 1.3; text-wrap: pretty; }
.pg-home .tlr-e { grid-area: e; align-self: start; font-size: 12.5px; font-weight: 700; line-height: 17.5px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the track: 7 day segments; the bar on it */
.pg-home .tlr-tr { position: relative; display: block; grid-area: tr; height: 6px; background: repeating-linear-gradient(90deg, var(--bar) 0 calc(100% / 7 - 2px), transparent calc(100% / 7 - 2px) calc(100% / 7)); border-radius: 3px; }
.pg-home .tlr-tr i { position: absolute; top: 0; height: 100%; }
.pg-home .tlr-past { background: color-mix(in srgb, var(--c) 32%, transparent); border-radius: 3px 0 0 3px; }
.pg-home .tlr-left { background: var(--c); border-radius: 3px; }
.pg-home .tlr-past + .tlr-left { border-radius: 0 3px 3px 0; }
.pg-home .tlr-tr .is-in { border-top-left-radius: 0; border-bottom-left-radius: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px); mask-image: linear-gradient(90deg, transparent, #000 16px); }
.pg-home .tlr-tr .is-cont { background: linear-gradient(90deg, var(--c) 72%, color-mix(in srgb, var(--c) 12%, transparent)); border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pg-home .tln.has-now .tlr-tr::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--now); width: 2px; margin-left: -1px; background: var(--live); border-radius: 1px; }
@container wk (min-width: 700px) {
  .pg-home .tln { --tln-x: 214px; padding: 0 0 4px; border-top: 1px solid var(--hair); }
  .pg-home .tln-bg { position: absolute; top: 0; bottom: 0; left: var(--tln-x); right: 4px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); pointer-events: none; }
  .pg-home .tln-bg i { border-left: 1px solid var(--hair); }
  .pg-home .tln-bg i:nth-of-type(7) { border-right: 1px solid var(--hair); }
  .pg-home .tln-bg i.is-today { background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent) 4%, transparent) 60%, transparent); }
  .pg-home .tln-now { position: absolute; top: 0; bottom: 0; left: var(--now); width: 2px; margin-left: -1px; background: color-mix(in srgb, var(--live) 80%, transparent); border-radius: 1px; }
  .pg-home .tln-ax { margin: 0 4px 4px var(--tln-x); padding: 10px 0 8px; }
  .pg-home .tln-ax-d i { flex-direction: row; align-items: baseline; justify-content: center; gap: 5px; font-size: 15px; }
  .pg-home .tln-ax-d b { font-size: 11px; }
  .pg-home .tln-h { margin-top: 4px; }
  .pg-home .tlr { grid-template-columns: 30px 10px minmax(0, 1fr) 16px calc(100% - var(--tln-x) + 4px); grid-template-areas: "pl . t . tr" "pl . e . tr"; gap: 1px 0; padding: 5px 4px; }
  .pg-home .tlr:hover { background: color-mix(in srgb, var(--surface) 80%, transparent); }
  .pg-home .tlr-pl { width: 30px; height: 30px; border-radius: 9px; }
  .pg-home .tlr-t { align-self: end; display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .pg-home .tlr-e { align-self: start; font-size: 11.5px; line-height: 15px; color: var(--mute); }
  .pg-home .tlr-tr { grid-row: 1 / span 2; align-self: center; height: 8px; background: none; border-radius: 4px; }
  .pg-home .tlr-past { border-radius: 4px 0 0 4px; }
  .pg-home .tlr-left { border-radius: 4px; }
  .pg-home .tlr-past + .tlr-left { border-radius: 0 4px 4px 0; }
  .pg-home .tln.has-now .tlr-tr::after { display: none; } /* the now-line runs through the whole chart */
}
@container wk (min-width: 900px) {
  .pg-home .tln { --tln-x: 244px; }
}

/* =====================================================================
   phones + small screens
   ===================================================================== */
@media (max-width: 639px) {
  .pg-home .home { margin-top: 22px; }
  .pg-home .now-card { padding: 10px 12px 10px; border-radius: 20px; }
  .pg-home .ev-card { padding: 6px 12px; border-radius: 20px; }
  .pg-home .now-hd { gap: 10px; }
  .pg-home .day .sh { flex-direction: row; align-items: baseline; }
  .pg-home .tl-art > .plate { height: 128px; padding-bottom: 32px; }
  .pg-home .tl-t { font-size: 14px; }
  .pg-home .tl-m { font-size: 12.5px; }
  .pg-home .when { left: 8px; bottom: 8px; height: 24px; padding: 0 8px; font-size: 12px; }
  .pg-home .tl .flags { top: 8px; left: 8px; right: 8px; }
  .pg-home .day-none { min-height: 84px; padding: 0 16px; gap: 12px; font-size: 14px; }
}
/* the This week head keeps its pager on the title's line; small phones put the dates under the title */
@media (max-width: 419px) {
  .pg-home #week > .sh .sh-a { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pg-home #week > .sh .sh-m { padding-top: 0; }
  .pg-home .lane-wk { font-size: 12.5px; line-height: 15px; }
  .pg-home .wc-t { font-size: 14px; }
  /* "+N" stays a small pill: the title keeps the width */
  .pg-home .wd-more-l .wd-mf { display: none; }
  .pg-home .wd-more-l { padding: 0 12px; }
}

/* =====================================================================
   SEASON WEEKDAYS - one short label per day (a button) + its popover: the bonus line, the season, the source
   ===================================================================== */
.pg-home .sd { --sd-c: #9b87f2; position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% + 8px); margin: -6px -4px; padding: 6px 4px; /* a bigger tap target, no overflow */ font: inherit; font-size: 12.5px; font-weight: 700; line-height: 17px; color: var(--text-2); text-align: left; text-wrap: balance; cursor: pointer; background: none; border: 0; border-radius: 6px; }
.pg-home .sd::before { content: ""; flex: none; align-self: flex-start; width: 7px; height: 7px; margin-top: calc(.5lh - 3.5px); background: var(--sd-c); border-radius: 50%; }
.pg-home .sd:hover { color: var(--text); text-decoration: underline dotted; text-underline-offset: 3px; }
.pg-home .sd-pop { position: fixed; inset: 0; width: min(300px, calc(100vw - 24px)); height: fit-content; margin: auto; padding: 12px 14px 10px; overflow: visible; color: var(--text); text-align: left; background: var(--surface); border: 1px solid var(--hair-2); border-radius: 14px; box-shadow: var(--lift-lg); }
.pg-home .sd-pop.is-placed { inset: auto; margin: 0; }
.pg-home .sd-pt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 14.5px; font-weight: 750; line-height: 1.3; }
.pg-home .sd-pk::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; background: #9b87f2; border-radius: 50%; vertical-align: middle; }
.pg-home .sd-pn { font-size: 12.5px; font-weight: 650; color: var(--mute); }
.pg-home .sd-pl { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.pg-home .sd-ps { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--mute); }
.pg-home .sd-ps a { display: inline-block; padding: 6px 0; margin: -6px 0; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }