/* Ope We Pulled — site styles. Glass look from docs/mockups: Inter, accent gold,
   translucent panel on a dark gradient. Mobile first; no framework. */
:root {
  --accent: #e8c268;
  --accent-hover: #f5d586;
  --text: #f2efe8;
  --text-82: rgba(242, 239, 232, 0.82);
  --text-76: rgba(242, 239, 232, 0.76);
  --text-60: rgba(242, 239, 232, 0.6);
  --good: #7fd6a3;
  --warn: #f0b454;
  --bad: #f06a5a;
  --blue: #7abbd8; /* steel-light from the design profile */
  --panel: rgba(13, 15, 20, 0.84);
  --card: rgba(255, 255, 255, 0.07);
  --card-border: rgba(255, 255, 255, 0.14);
  --ink: #15171c;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: #0e1116
    radial-gradient(circle at 18% 22%, rgba(52, 120, 140, 0.55) 0, rgba(52, 120, 140, 0) 38%),
    radial-gradient(circle at 82% 78%, rgba(190, 88, 40, 0.45) 0, rgba(190, 88, 40, 0) 40%),
    radial-gradient(circle at 60% 10%, rgba(120, 90, 160, 0.35) 0, rgba(120, 90, 160, 0) 32%);
  background-attachment: fixed;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.wrap {
  max-width: 1040px; margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.panel {
  background: var(--panel);
  backdrop-filter: blur(28px) saturate(1.15);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

/* Header + nav */
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; }
.brand img { width: 38px; height: 38px; border-radius: 19px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); }
.brand .name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; color: var(--accent); }
.brand .sub { color: var(--text-82); font-size: 12px; line-height: 1.2; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: rgba(0, 0, 0, 0.28); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.06); }
.nav a { padding: 7px 14px; border-radius: 9px; color: rgba(242, 239, 232, 0.88); font-weight: 500; font-size: 13px; }
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.nav a.active { background: rgba(255, 255, 255, 0.12); color: var(--text); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.nav a.accent { color: var(--accent); }
.viewer { color: var(--text-76); font-size: 12px; padding: 0 18px 6px; text-align: right; }

main.body { padding: 6px 18px 18px; display: flex; flex-direction: column; gap: 10px; }

/* Glass controls. One recipe shared by buttons, the segmented control and
   selects: a translucent face that blurs what is behind it, a thin bright rim,
   an inset top sheen and bottom shade for thickness, a blurred dome highlight
   (buttons only; selects have no pseudo-elements) and a drop shadow to float. */
.btn, .seg, .controls select {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  backdrop-filter: blur(10px) saturate(1.5);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -2px 5px rgba(0, 0, 0, 0.28);
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn:focus-visible, .seg button:focus-visible, .controls select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 194, 104, 0.5), 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Buttons and pills */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 30px; padding: 0 14px;
  color: var(--text); border-radius: 15px;
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Dome highlight: a soft white blob in the upper left, behind the label. */
.btn::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 8%; right: 30%; top: 6%; height: 46%; border-radius: 50%;
  filter: blur(4px);
  background: radial-gradient(100% 100% at 35% 0%, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 70%);
  transition: background 0.2s ease;
}
.btn:hover {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -2px 5px rgba(0, 0, 0, 0.28);
}
.btn:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 2px 6px rgba(0, 0, 0, 0.35); }

/* Accent: solid gold by default (the gate's login button), gold-tinted glass
   on the landing page hero. */
.btn.accent { background: var(--accent); color: var(--ink); border-color: transparent; font-weight: 600; text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn.accent::after { background: radial-gradient(100% 100% at 35% 0%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%); }
.btn.accent:hover { background: var(--accent-hover); color: var(--ink); border-color: transparent; }
.tide .btn.accent, .hero .btn.accent {
  color: #fbe9b8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, rgba(232, 194, 104, 0.4) 0%, rgba(232, 194, 104, 0.2) 100%);
  border-color: rgba(245, 213, 134, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
  backdrop-filter: blur(10px) saturate(1.6);
  box-shadow:
    0 0 28px rgba(232, 194, 104, 0.22),
    0 12px 28px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 240, 200, 0.45),
    inset 0 -2px 6px rgba(120, 80, 10, 0.35);
}
.tide .btn.accent::after, .hero .btn.accent::after { background: radial-gradient(100% 100% at 35% 0%, rgba(255, 244, 214, 0.42), rgba(255, 244, 214, 0) 70%); }
.tide .btn.accent:hover, .hero .btn.accent:hover {
  color: #fff3d2;
  background: linear-gradient(180deg, rgba(232, 194, 104, 0.52) 0%, rgba(232, 194, 104, 0.28) 100%);
  border-color: rgba(245, 213, 134, 0.75);
  box-shadow:
    0 0 36px rgba(232, 194, 104, 0.32),
    0 16px 32px rgba(0, 0, 0, 0.42),
    0 3px 8px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 240, 200, 0.55),
    inset 0 -2px 6px rgba(120, 80, 10, 0.35);
}
.btn.big { height: 44px; padding: 0 24px; font-size: 15px; border-radius: 22px; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 9px; font-size: 11px; font-weight: 600; background: rgba(255, 255, 255, 0.1); color: var(--text-82); }
.pill.good { background: rgba(127, 214, 163, 0.18); color: var(--good); }
.pill.warn { background: rgba(240, 180, 84, 0.18); color: var(--warn); }
.pill.bad { background: rgba(240, 106, 90, 0.18); color: var(--bad); }
.pill.blue { background: rgba(122, 187, 216, 0.18); color: var(--blue); }

/* Control row */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
.controls label { color: var(--text-82); font-size: 12px; }
.controls select { height: 28px; padding: 0 8px; color: var(--text); border-radius: 8px; font: inherit; font-size: 12px; cursor: pointer; }
.controls select:hover { border-color: rgba(255, 255, 255, 0.28); background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 100%); }
.controls select option { background: #1a1d24; color: var(--text); }
/* Segmented control: the track is the dark glass face, the selected segment
   is the lighter knob riding on it. */
.seg {
  display: flex; gap: 3px; padding: 3px; border-radius: 9px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.38) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 2px 6px rgba(0, 0, 0, 0.4);
}
.seg button {
  height: 22px; padding: 0 9px; background: transparent; color: var(--text-82); border: 0; border-radius: 7px;
  font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.seg button:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.seg button.on {
  color: var(--text); font-weight: 600;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -1px 3px rgba(0, 0, 0, 0.25);
}
.status { color: var(--good); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Tiles and cards */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; gap: 2px; min-height: 87px; padding: 10px 12px; background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; }
/* Loading placeholder: the pages that open with a tile row ship an empty one
   in their HTML so the content does not jump when the data arrives. */
.skeleton-row { height: 32px; }
.tiles.skeleton .tile { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.07); }
.tile .label { color: var(--text-76); font-size: 11px; font-weight: 500; }
.tile .value { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tile .delta { font-size: 11px; font-weight: 500; color: var(--text-76); font-variant-numeric: tabular-nums; }
.tile .delta.good { color: var(--good); }
.tile .delta.bad { color: var(--bad); }

.grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 820px) { .grid.two { grid-template-columns: 1fr 300px; } .grid.half { grid-template-columns: 1fr 1fr; } }
.card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border); border-radius: 12px; min-width: 0; }
.card .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card .head .title { font-weight: 600; text-wrap: balance; }
.card .head .note { color: var(--text-76); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--text-76); font-size: 12px; }
.empty { color: var(--text-60); font-size: 12px; padding: 6px 0; }

/* Bars */
.bars { display: flex; align-items: flex-end; gap: 5px; height: 90px; overflow-x: auto; }
.bar { flex: 1 1 0; min-width: 18px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; height: 90px; }
.bar .v { font-size: 9.5px; color: var(--text-76); font-variant-numeric: tabular-nums; }
.bar .b { width: 100%; background: rgba(122, 187, 216, 0.78); border-radius: 4px 4px 2px 2px; min-height: 2px; }
.bar.last .b { background: var(--accent); }
.bar a { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; color: inherit; }
.axis { display: flex; justify-content: space-between; color: rgba(242, 239, 232, 0.7); font-size: 10.5px; }

/* Slot rows */
.slot { display: grid; grid-template-columns: 74px 1fr 80px; align-items: center; gap: 8px; font-size: 12px; }
.slot .name { font-weight: 500; }
.track { height: 6px; background: rgba(255, 255, 255, 0.12); border-radius: 3px; overflow: hidden; }
.track .fill { height: 6px; border-radius: 3px; background: var(--good); }
.slot .note { text-align: right; color: var(--text-82); font-variant-numeric: tabular-nums; }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table th { text-align: left; color: var(--text-76); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.09); white-space: nowrap; }
.table td { padding: 5px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); vertical-align: middle; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr:hover td { background: rgba(255, 255, 255, 0.03); }
.table-wrap { overflow-x: auto; }
.name-cell { font-weight: 500; white-space: nowrap; }

/* Attendance marks */
.mark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; font-size: 10.5px; font-weight: 700; }
.mark.P { background: rgba(127, 214, 163, 0.22); color: var(--good); }
.mark.L { background: rgba(240, 180, 84, 0.22); color: var(--warn); }
.mark.F { background: rgba(122, 187, 216, 0.22); color: var(--blue); }
.mark.A { background: rgba(255, 255, 255, 0.08); color: var(--text-60); }
.mark.N { background: rgba(240, 106, 90, 0.22); color: var(--bad); }
.mark.O, .mark.none { background: rgba(255, 255, 255, 0.04); color: var(--text-60); }
.legend { display: flex; flex-wrap: wrap; gap: 10px; color: var(--text-76); font-size: 11px; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }

/* Landing */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 18px 16px; }
.hero img { width: 120px; height: 120px; border-radius: 60px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 12px 40px rgba(0, 0, 0, 0.4); }
.hero h1 { margin: 6px 0 0; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--accent); text-wrap: balance; }
.hero .tagline { font-size: 15px; color: var(--text-82); max-width: 560px; }
.hero .meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; color: var(--text-76); font-size: 13px; }
.hero .actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8px; }
.hero .login { color: var(--text-76); font-size: 12px; }
.hero .login a { color: var(--accent); }
.teaser { margin: 0 18px 18px; }
.notice { margin: 0 18px 12px; padding: 10px 12px; border-radius: 10px; background: rgba(240, 180, 84, 0.14); border: 1px solid rgba(240, 180, 84, 0.35); color: var(--text); font-size: 13px; }
.notice.bad { background: rgba(240, 106, 90, 0.14); border-color: rgba(240, 106, 90, 0.35); }

/* Login panel (shown on 401) */
.gate { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 18px; text-align: center; }
.gate p { margin: 0; color: var(--text-82); max-width: 460px; }

/* Night page */
.night-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.night-title h2 { margin: 0; font-family: Fraunces, Georgia, "Times New Roman", serif; font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: -0.015em; font-variation-settings: "opsz" 72; text-wrap: balance; }
.boss-list { display: flex; flex-direction: column; gap: 4px; }
.boss { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; font-size: 12px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.boss .t { color: var(--text-76); font-variant-numeric: tabular-nums; }
.footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding: 10px 18px 16px; color: var(--text-60); font-size: 11px; text-align: center; }
.footer a { color: var(--text-76); }
.footer a:hover { color: var(--accent); }

/* Reduced motion: controls still look like glass, they just don't move. */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after, .seg, .seg button, .controls select { transition: none; }
  .btn:hover { transform: none; }
}

/* ---------- Landing page: the tide hero ----------
   One screen of painted art, crossfaded with a wave wipe (landing.js). The
   caption sits lower-left in Fraunces; the nav floats top-right as chrome; a
   rail on the right scrubs the scenes. Nothing here is scroll-pinned. */
body.landing .wrap { padding-top: 0; }
body.landing .brand { display: none; }
.tide {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 560px; height: 82vh; height: 82svh; max-height: 900px;
  background: var(--ground, #0e0d12);
  color: var(--text);
}
.tide-stage { position: absolute; inset: 0; z-index: 0; }
.tide-layer {
  position: absolute; inset: 0;
  background: #0e0d12 center / cover no-repeat;
}
.tide-layer-next { visibility: hidden; will-change: clip-path; }
.tide-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 13, 18, 0.62) 0%, rgba(14, 13, 18, 0) 26%, rgba(14, 13, 18, 0) 50%, rgba(14, 13, 18, 0.94) 100%),
    radial-gradient(125% 125% at 50% 40%, transparent 48%, rgba(8, 7, 10, 0.6) 100%);
}
.tide-vignette::after {
  content: ""; position: absolute; inset: 0; opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tide-chrome {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5; justify-content: flex-end;
  padding: calc(18px + env(safe-area-inset-top, 0px)) max(clamp(16px, 4vw, 48px), env(safe-area-inset-right, 0px)) 0 max(clamp(16px, 4vw, 48px), env(safe-area-inset-left, 0px));
}
.tide-cap {
  position: absolute; z-index: 4;
  left: max(clamp(16px, 5vw, 64px), env(safe-area-inset-left, 0px)); right: max(clamp(16px, 5vw, 64px), env(safe-area-inset-right, 0px));
  bottom: calc(clamp(44px, 9vh, 80px) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  max-width: 640px;
}
.tide-crest {
  width: 72px; height: 72px; border-radius: 12px; display: block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 12px 32px rgba(0, 0, 0, 0.5);
}
.tide-word {
  margin: 4px 0 0; font-family: Fraunces, Georgia, "Times New Roman", serif; font-weight: 400;
  font-size: clamp(46px, 8.5vw, 104px); line-height: 0.92; letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144; color: var(--text); text-wrap: balance;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.35), 0 10px 44px rgba(0, 0, 0, 0.6);
}
.tide-note { margin: 2px 0 0; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.tide-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-82); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.tide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 8px; }
.tide-actions .login { font-size: 13px; color: var(--text-82); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.tide-actions .login a { color: var(--accent); }
.tide-rail {
  position: absolute; z-index: 6; right: max(clamp(14px, 2.6vw, 32px), env(safe-area-inset-right, 0px)); top: 50%;
  width: 28px; height: min(38vh, 280px); transform: translateY(-50%);
  display: flex; justify-content: center; cursor: grab; touch-action: none; outline: none;
}
.tide-rail:active { cursor: grabbing; }
.tide-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: rgba(242, 239, 232, 0.18); }
.tide-rail-fill { position: absolute; top: 0; width: 2px; height: 0; border-radius: 2px; background: linear-gradient(var(--accent), rgba(232, 194, 104, 0.2)); transition: height 0.35s ease; }
.tide-bead {
  position: absolute; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--accent);
  transform: translateY(-50%); transition: top 0.35s ease;
  box-shadow: 0 0 0 4px rgba(232, 194, 104, 0.16), 0 0 18px 2px rgba(232, 194, 104, 0.55);
}
.tide-rail:focus-visible .tide-bead { box-shadow: 0 0 0 4px rgba(232, 194, 104, 0.5), 0 0 18px 2px rgba(232, 194, 104, 0.55); }
.tide-foot {
  position: absolute; z-index: 5; right: max(clamp(16px, 5vw, 64px), env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-82); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 0, 0, 0.5);
}
.tide-index { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------- Landing page: the deck ---------- */
.deck-wrap { padding: 28px max(clamp(16px, 4vw, 48px), env(safe-area-inset-right, 0px)) 6px max(clamp(16px, 4vw, 48px), env(safe-area-inset-left, 0px)); }
.deck {
  position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 18px; padding: 10px 0; isolation: isolate;
}
.deck-glow {
  position: absolute; z-index: 0; width: 460px; height: 460px; border-radius: 50%; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%); transition: opacity 0.4s ease;
  background: radial-gradient(circle, rgba(232, 194, 104, 0.17) 0%, rgba(232, 194, 104, 0) 62%);
}
.deck-card {
  position: relative; z-index: 1; display: block; width: 196px; aspect-ratio: 3 / 4; max-width: 100%;
  border-radius: 16px; overflow: hidden; color: var(--text); text-decoration: none;
  background: #23252c center / cover no-repeat;
  outline: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 30px 60px -24px rgba(0, 0, 0, 0.7);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease;
  will-change: transform;
}
.deck-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 13, 18, 0) 55%, rgba(14, 13, 18, 0.55) 100%);
}
.deck-card .label { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; }
.deck-card .title { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); text-wrap: balance; }
.deck-card .sub { font-size: 11.5px; color: var(--text-76); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.deck-card:hover { z-index: 2; color: var(--text); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 36px 70px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(232, 194, 104, 0.35); }
.deck-card:focus-visible { outline: 3px solid rgba(232, 194, 104, 0.6); outline-offset: 2px; }

@media (max-width: 720px) {
  .tide { height: 76vh; height: 76svh; min-height: 520px; }
  .tide-chrome { padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); justify-content: center; }
  .tide-crest { width: 56px; height: 56px; }
  .tide-rail, .tide-foot { display: none; }
  .tide-cap { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .deck { gap: 12px; }
  .deck-card { width: calc(50% - 6px); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-card, .tide-rail-fill, .tide-bead { transition: none; }
  .deck-card { transform: none; }
}

/* ---------- Phone nav: one row that scrolls instead of wrapping ---------- */
@media (max-width: 720px) {
  .nav { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; padding: 7px 11px; font-size: 12.5px; }
  .site-header { gap: 8px; }
}

/* ---------- Art behind the login gate and the 404 page ----------
   A page sets one of the backdrop classes on <body>; the art sits under the
   panel, dimmed toward the ground color so the panel still reads as glass. */
body.backdrop-war-room, body.backdrop-onyxia {
  background-size: cover; background-position: center 30%; background-repeat: no-repeat; background-attachment: scroll;
}
body.backdrop-war-room { background-image: linear-gradient(180deg, rgba(14, 13, 18, 0.22) 0%, rgba(14, 13, 18, 0.72) 60%, #0e0d12 100%), url("/assets/art/hero-war-room.jpg"); }
body.backdrop-onyxia { background-image: linear-gradient(180deg, rgba(14, 13, 18, 0.22) 0%, rgba(14, 13, 18, 0.72) 60%, #0e0d12 100%), url("/assets/art/hero-onyxia.jpg"); }
@media (max-width: 720px) {
  body.backdrop-war-room, body.backdrop-onyxia { background-attachment: scroll; background-position: center top; }
  body.backdrop-war-room { background-image: linear-gradient(180deg, rgba(14, 13, 18, 0.22) 0%, rgba(14, 13, 18, 0.72) 60%, #0e0d12 100%), url("/assets/art/hero-war-room-sm.jpg"); }
  body.backdrop-onyxia { background-image: linear-gradient(180deg, rgba(14, 13, 18, 0.22) 0%, rgba(14, 13, 18, 0.72) 60%, #0e0d12 100%), url("/assets/art/hero-onyxia-sm.jpg"); }
}
.gate { padding: 44px 18px 48px; gap: 14px; }
.gate .gate-crest { width: 64px; height: 64px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 12px 32px rgba(0, 0, 0, 0.5); }
.gate h2 { margin: 0; font-family: Fraunces, Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(30px, 5vw, 44px); line-height: 1; letter-spacing: -0.015em; font-variation-settings: "opsz" 72; text-wrap: balance; }
.gate .gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }

/* ---------- Last-raid landing spot (the deck's "Last raid" card links to #teaser) ---------- */
html { scroll-behavior: smooth; }
.teaser { scroll-margin-top: 16px; }
.teaser:target .card { animation: teaser-arrive 1.6s ease-out 1; }
@keyframes teaser-arrive {
  0% { box-shadow: 0 0 0 0 rgba(232, 194, 104, 0); }
  20% { box-shadow: 0 0 0 2px rgba(232, 194, 104, 0.85), 0 0 28px rgba(232, 194, 104, 0.35); }
  100% { box-shadow: 0 0 0 2px rgba(232, 194, 104, 0), 0 0 0 rgba(232, 194, 104, 0); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .teaser:target .card { animation: none; box-shadow: 0 0 0 2px rgba(232, 194, 104, 0.6); }
}

/* ---------- Touch devices: bigger tap targets, desktop look unchanged ----------
   Only when the primary pointer is a finger. Controls grow to 30-36px, the
   attendance marks to 28px; spacing scales with them. */
@media (pointer: coarse) {
  .btn { height: 36px; padding: 0 16px; border-radius: 18px; font-size: 13px; }
  .btn.big { height: 48px; padding: 0 26px; border-radius: 24px; }
  .controls select { height: 36px; padding: 0 10px; border-radius: 10px; font-size: 13px; }
  .seg { padding: 4px; border-radius: 11px; }
  .seg button { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; }
  .nav a { padding: 10px 14px; }
  .mark { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
  .table td { padding: 6px; }
}

/* ---------- Cross-document view transitions ----------
   Page-to-page navigation crossfades instead of flashing; the header keeps a
   snapshot of its own, so between member pages it holds still and from the
   landing page it slides into the panel. Chromium only; other browsers
   navigate as before. Off for people who asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
#site-header { view-transition-name: site-header; }

/* ---------- Continuous corners ----------
   Squircle corners on the glass surfaces where corner-shape is known
   (Chromium 139+); everyone else keeps the round ones. */
.panel, .card, .tile, .btn, .seg, .seg button, .controls select, .nav, .nav a, .deck-card, .notice { corner-shape: squircle; }