/* =========================================================
   App shell (V2-SHELL). Views never style these.
     .shell-top    status ribbon (scrolls away) + masthead (sticky)
     .ribbon       live server facts, the event pill, the account links
     .mast         links split around the crest medallion, Download, phone menu button, server chip
     .menu-sheet   phones and small tablets: the whole menu as one sheet
     .band         the page band the router renders above the content (art, h1, lede, fact chips)
     .closing      the key-art band every page ends on
     .site-footer  compact footer
   Breakpoints: phone masthead to 900 px; split nav from 901 px; Download in the masthead from 1240 px.
   ========================================================= */

/* -------------------- Shell top -------------------- */
/* From 901 px the ribbon stays pinned with the masthead (Ed: the live numbers belong in view, like the menu).
   On phones it scrolls away so the header stays one bar. */
.shell-top {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}
@media (max-width: 900px) { .shell-top { top: calc(-1 * var(--ribbon-h)); } }

/* -------------------- Status ribbon -------------------- */
.ribbon {
  height: var(--ribbon-h);
  background: var(--ink-00);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.ribbon-in {
  max-width: var(--shell-max);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  white-space: nowrap;
}
.ribbon b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.rb-item { display: flex; align-items: center; gap: 0.45em; min-width: 0; text-wrap: nowrap; white-space: nowrap; }
.rb-status .status-dot { width: 8px; height: 8px; }
.rb-status-text { overflow: hidden; text-overflow: ellipsis; }
.rb-status-text strong { color: var(--text); font-weight: 600; }
.rb-sep { flex: none; width: 1px; height: 14px; background: var(--line-strong); }
.rb-sep:has(+ [hidden]) { display: none; }
.rb-rates { gap: var(--s-3); }
.rb-rates span { display: inline-flex; gap: 0.35em; }
.rb-chip-slot:empty { display: none; }
.rb-end { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); min-width: 0; }

/* The event pill: the season's own colours, so the ribbon changes with it. */
.rb-event {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 28px;
  padding: 0 0.7rem;
  color: var(--text-2);
  text-decoration: none;
  background: var(--tint);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.rb-event strong { color: var(--accent-hi); font-weight: 600; }
.rb-event .icon { width: 14px; height: 14px; color: var(--accent-hi); }
.rb-event:hover { color: var(--text); border-color: var(--accent); }

.rb-account { display: flex; align-items: center; gap: var(--s-4); }
.rb-account a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 32px;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}
.rb-account a:hover { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 0.25em; }
.rb-account a + a, .rb-account .rb-silk { color: var(--accent-hi); }
.rb-account .icon { width: 15px; height: 15px; color: var(--accent); }
.rb-account .rb-name { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
.rb-account .rb-silk { font-variant-numeric: tabular-nums; font-weight: 600; }

/* -------------------- Masthead -------------------- */
.mast {
  position: relative;
  height: var(--mast-h);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink-00) 97%, transparent), color-mix(in srgb, var(--ink-0) 95%, transparent));
}
@supports (backdrop-filter: blur(8px)) {
  .mast { background: linear-gradient(180deg, color-mix(in srgb, var(--ink-00) 90%, transparent), color-mix(in srgb, var(--ink-0) 84%, transparent)); backdrop-filter: blur(10px) saturate(1.2); }
}
/* The brass rule along the bottom, broken where the crest hangs through it. */
.mast::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0, var(--gold-lo) 8%, var(--gold) calc(50% - var(--crest-w) / 2 - 40px),
    transparent calc(50% - var(--crest-w) / 2 + 12px), transparent calc(50% + var(--crest-w) / 2 - 12px),
    var(--gold) calc(50% + var(--crest-w) / 2 + 40px), var(--gold-lo) 92%, transparent 100%);
}
.mast-in {
  max-width: var(--shell-max);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--crest-w) minmax(0, 1fr);
}
.mast-l, .mast-r { display: flex; align-items: flex-end; min-width: 0; height: var(--mast-h); padding-bottom: 6px; }
.mast-l { justify-content: flex-end; }
.mast-r { justify-content: flex-start; }
.mast-end { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; align-self: flex-end; padding-bottom: 6px; } /* on the nav links' centre line */
.nav-l { padding-right: var(--s-4); }
.nav-r { padding-left: var(--s-4); }
.nav-list { display: flex; align-items: center; gap: clamp(0px, 0.6vw, var(--s-2)); }

/* One look for links and the World / Help buttons. */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  padding: 0 var(--s-3);
  font-family: var(--font-label);
  font-size: var(--fs-nav);
  font-weight: var(--fw-label);
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.nav-link:hover { color: var(--accent-hi); background: var(--tint); }
.nav-link[aria-current="page"], .nav-group.has-current > .nav-link { color: var(--accent-hi); }
/* The current page: the crimson gem set on the brass rule under the link. */
.nav-link[aria-current="page"]::after, .nav-group.has-current > .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 7px;
  height: 7px;
  translate: -50% 0;
  rotate: 45deg;
  background: var(--action);
  box-shadow: 0 0 0 1px var(--gold), 0 0 8px color-mix(in srgb, var(--action) 70%, transparent);
}
.nav-group.has-current > .nav-group-btn::after { left: calc(50% - 8px); }
.nav-group-btn .icon { width: 14px; height: 14px; color: var(--accent); transition: rotate var(--dur-2) var(--ease-out); }
.nav-group.is-open > .nav-group-btn .icon { rotate: 180deg; }

/* World and Help: disclosure panels (js/app.js), not ARIA menus. */
.nav-group { position: relative; }
.nav-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 2;
  min-width: 15rem;
  padding: var(--s-2);
  display: none;
  background: var(--plate-body);
  border: 1px solid var(--frame-hi);
  border-radius: var(--r-3);
  box-shadow: var(--bevel), var(--e-3);
  translate: -50% 0;
  transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out), display var(--dur-2) allow-discrete;
}
.nav-group.is-open > .nav-panel { display: block; }
@starting-style { .nav-group.is-open > .nav-panel { opacity: 0; translate: -50% -6px; } }
.nav-panel ul { display: grid; gap: 2px; }
.nav-panel a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: 0 var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--r-2);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.nav-panel a .icon { width: 18px; height: 18px; color: var(--accent); }
.nav-panel a:hover { background: var(--tint); color: var(--accent-hi); }
.nav-panel a[aria-current="page"] { color: var(--accent-hi); background: var(--tint-strong); }

/* The crest medallion: centred, hanging through the bar into the band or hero. */
.crest {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  display: block;
  width: var(--crest-w);
  margin-top: 6px;
  border-radius: var(--r-3);
  transform-origin: 50% 0;
  transition: scale var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out);
}
.crest img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 10px rgb(var(--shadow-rgb) / 0.85)) drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 22%, transparent));
  transition: transform var(--dur-2) var(--ease-out);
}
.crest::before { /* a lantern glow behind the crest */
  content: "";
  position: absolute;
  inset: -20% -18% -10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent 75%);
  pointer-events: none;
}
.crest:hover img { transform: translateY(-1px) scale(1.015); }
.crest:focus-visible { outline-offset: 4px; }
/* Once the ribbon has scrolled away the crest folds into the bar, so it never covers content. */
html.mast-stuck .crest { scale: 0.6; translate: 0 -2px; }
@media (max-width: 900px) { html.mast-stuck .crest { scale: 0.74; } }

/* Menu button (phones) and the server chip. */
.mast-btn {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  color: var(--accent-hi);
  background: color-mix(in srgb, var(--ink-00) 60%, transparent);
  border: 1px solid var(--frame);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out);
}
.mast-btn:hover { border-color: var(--frame-hi); }
.mast-btn .icon { width: 20px; height: 20px; }
.mast .rail-chip, .ribbon .rail-chip {
  gap: 0.45rem;
  padding: 0 0.75rem;
  font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--ink-00) 60%, transparent);
  border: 1px solid var(--frame);
  border-radius: var(--r-2);
}
.mast .rail-chip:hover, .ribbon .rail-chip:hover { border-color: var(--frame-hi); background: var(--tint); }
.ribbon .rail-chip { min-height: 28px; border-radius: var(--r-pill); padding: 0 0.7rem; }
.rail-chip-text b { font-weight: 600; color: var(--text); }
.rail-chip-more { color: var(--text-2); font-weight: 500; }

/* -------------------- Phone and small-tablet masthead (to 900 px) -------------------- */
@media (max-width: 900px) {
  .nav-l, .nav-r, .mast .mast-dl { display: none; }
  .mast-btn { display: inline-flex; }
  .mast-l, .mast-r { align-items: center; padding-bottom: 0; }
  .mast-l { justify-content: flex-start; }
  .mast-end { align-self: center; padding-bottom: 0; }
  .crest { margin-top: 4px; }
  .rail-chip-more { display: none; }
  .ribbon-in { gap: var(--s-3); }
  .rb-time, .rb-time-sep, .rb-rates, .rb-rates-sep, .rb-account { display: none; }
  .rb-event .rb-long { display: none; }
}
@media (max-width: 420px) {
  .rb-players-of { display: none; }
}
/* Tablets: the full masthead; the server chip lives in the ribbon (js/app.js moves it). */
@media (min-width: 901px) and (max-width: 1179px) {
  .nav-link { padding: 0 var(--s-2); font-size: 0.875rem; }
  .nav-l { padding-right: var(--s-2); }
  .nav-r { padding-left: var(--s-2); }
  .rb-status, .rb-time-sep { display: none; }
}
@media (max-width: 1100px) { .rb-rates, .rb-rates-sep { display: none; } }
@media (max-width: 1239px) { .mast .mast-dl { display: none; } }

/* -------------------- Menu sheet -------------------- */
.menu-sheet {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--ribbon-h) + var(--mast-h)) 0 calc(var(--s-7) + env(safe-area-inset-bottom, 0px));
  background: var(--ink-0);
  transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out), display var(--dur-2) allow-discrete;
}
html.mast-stuck .menu-sheet { padding-top: var(--mast-h); }
@starting-style { .menu-sheet:not([hidden]) { opacity: 0; translate: 0 -8px; } }
.menu-sheet-in { max-width: 34rem; margin-inline: auto; padding: var(--s-5) var(--gutter) 0; border-top: 1px solid var(--gold-lo); }
.menu-list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--font-label);
  font-size: 1rem;
  font-weight: var(--fw-label);
  letter-spacing: 0.08em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.menu-list a:hover, .menu-list a[aria-current="page"] { color: var(--accent-hi); }
.menu-list-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
.menu-list-2 a { font-family: var(--font-body); font-size: var(--fs-base); font-weight: 500; letter-spacing: 0; }
.menu-group {
  margin-top: var(--s-5);
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent);
}
.menu-sheet .btn { margin-top: var(--s-6); }
.menu-sheet .fine { text-align: center; }
@media (min-width: 901px) { .menu-sheet { display: none !important; } }

/* -------------------- Page band -------------------- */
#band:empty { display: none; }
.band {
  position: relative;
  isolation: isolate;
  min-height: var(--band-h);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink-1);
  border-bottom: 1px solid var(--gold-lo);
}
.band-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--band-pos, 70% 40%);
}
.band.is-dim .band-art { filter: brightness(0.62) saturate(0.85); }
.band::before { /* veil: left to right for the h1, bottom to top into the page */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ink-0) 94%, transparent) 0%, color-mix(in srgb, var(--ink-0) 72%, transparent) 38%, color-mix(in srgb, var(--ink-0) 20%, transparent) 75%, color-mix(in srgb, var(--ink-0) 45%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--ink-0) 95%, transparent) 0%, transparent 55%);
}
.band::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--rule-metal); }
.band-in {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: calc(var(--s-8) + 20px) var(--gutter) var(--s-6);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
}
.band-text { max-width: 46rem; min-width: 0; }
.band h1 {
  font-size: var(--fs-band);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
  text-shadow: 0 2px 18px rgb(var(--shadow-rgb) / 0.9);
}
.band h1:focus { outline: none; }
.band .lede { margin-top: var(--s-3); font-size: var(--fs-md); color: var(--text); max-width: 62ch; text-shadow: 0 1px 10px rgb(var(--shadow-rgb) / 0.9); }
.band .lede a { color: var(--accent-hi); text-decoration-color: color-mix(in srgb, var(--accent-hi) 50%, transparent); }
.band .lede a:hover { text-decoration-color: currentColor; }
.band-plaque { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.band-plaque:empty { display: none; }
@media (max-width: 900px) {
  .band-in { padding-top: calc(var(--s-7) + 16px); padding-bottom: var(--s-5); }
  .band::before { background: linear-gradient(0deg, color-mix(in srgb, var(--ink-0) 96%, transparent) 0%, color-mix(in srgb, var(--ink-0) 80%, transparent) 55%, color-mix(in srgb, var(--ink-0) 42%, transparent) 100%); }
}

/* -------------------- Closing band -------------------- */
.closing { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--gold-lo); background: var(--ink-1); }
.closing-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--ink-0) 62%, transparent), color-mix(in srgb, var(--ink-0) 93%, transparent) 70%), linear-gradient(0deg, var(--ink-00), transparent 55%);
}
.closing-in {
  max-width: 54rem;
  margin-inline: auto;
  padding: var(--section) var(--gutter);
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  text-align: center;
}
.closing h2 { font-size: var(--fs-2xl); color: var(--text); text-shadow: 0 2px 16px rgb(var(--shadow-rgb) / 0.95); }
.closing h2 span { color: var(--accent-hi); }
.closing p { color: var(--text-2); text-shadow: 0 1px 10px rgb(var(--shadow-rgb) / 0.95); }
.closing-actions { justify-content: center; margin-top: var(--s-3); }
@media (max-width: 599px) { .closing-actions .btn { width: 100%; } }

/* -------------------- Footer -------------------- */
.site-footer { background: var(--ink-00); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); }
.foot-in {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: var(--s-6) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-5) var(--s-7);
  align-items: start;
}
.foot-brand { display: inline-block; border-radius: var(--r-2); }
.foot-crest { width: 120px; height: auto; }
.foot-nav { display: grid; grid-template-columns: repeat(4, max-content); gap: var(--s-2) var(--s-7); justify-content: end; }
.footer-title {
  margin-bottom: var(--s-1);
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--accent);
}
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--text);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
.footer-col a:hover, .footer-col a[aria-current="page"] { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 0.22em; }
.footer-legal { grid-column: 1 / -1; padding-top: var(--s-4); border-top: 1px solid var(--line-soft); font-size: var(--fs-xs); color: var(--text-2); }
@media (max-width: 900px) {
  .foot-in { grid-template-columns: 1fr; }
  .foot-nav { justify-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .footer-col a { min-height: 40px; }
}

/* No JavaScript: the shell still says what this is and where the client is. */
.noscript-note { padding-block: var(--s-8); }
.noscript-note h1 { margin-bottom: var(--s-4); }

@media print {
  .shell-top, .menu-sheet, .backdrop, .closing, .rail, .rail-backdrop { display: none !important; }
  .band { min-height: 0; background: none; }
  .band-art, .band::before { display: none; }
}