/* shared by every screen: fonts, tokens, base, masthead, nav, panels, toast, custom tooltip */
@font-face {
  font-family: "Saira";
  src: url(../fonts/saira.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saira";
  src: url(../fonts/saira-italic.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  --field: #0A1422;
  --deck: #0F1C2E;
  --deck-2: #14243A;
  --rail: #213450;
  --chalk: #E9EFF7;
  --fog: #8A9BB3;
  --dim: #5B6C85;
  --ares: #5AC8FA;
  --inferno: #FF8F3F;
  --gold: #F5C542;
  --win: #4CC38A;
  --out: #FF5A6A;

  --gutter: 16px;
  --col: 720px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--field);
  color: var(--chalk);
  font: 400 15px/1.45 "Saira", system-ui, sans-serif;
  font-stretch: 95%;
  padding-bottom: 48px;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
.col { width: min(100% - 2 * var(--gutter), var(--col)); margin: 0 auto; }

/* masthead */
.mast { background: var(--field); }
.mast-in { width: min(100% - 2 * var(--gutter), var(--col)); margin: 0 auto; display: flex; align-items: center; gap: 10px; height: 52px; }
.mark { position: relative; width: 28px; height: 18px; flex: none; }
.mark i { position: absolute; top: 0; width: 18px; height: 18px; border-radius: 50%; }
.mark .a { left: 0; background: var(--ares); }
.mark .c { left: 10px; background: var(--inferno); opacity: .85; mix-blend-mode: screen; }
.wordmark { font-weight: 800; font-style: italic; font-stretch: 112%; font-size: 19px; letter-spacing: -.01em; white-space: nowrap; color: var(--chalk); text-decoration: none; }
.mast-week { color: var(--fog); font-weight: 600; font-stretch: 80%; padding-left: 10px; border-left: 1px solid var(--rail); white-space: nowrap; }
.mast-recs { margin-left: auto; display: flex; gap: 14px; font-stretch: 80%; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.rec b { font-weight: 700; }
.rec.ares b { color: var(--ares); }
.rec.inferno b { color: var(--inferno); }

/* nav: same tabs, same order, every screen */
.nav-tabs { border-bottom: 1px solid var(--rail); background: var(--field); }
.nav-in {
  position: relative;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  padding: 0 max(var(--gutter), (100% - var(--col)) / 2);
}
.nav-in::-webkit-scrollbar { display: none; }
.nav-in a {
  flex: none; position: relative;
  padding: 9px 11px 11px; font-size: 14px; font-weight: 600; font-stretch: 90%;
  color: var(--fog); text-decoration: none; white-space: nowrap;
}
.nav-in a:first-child { padding-left: 0; }
.nav-in a:hover { color: var(--chalk); }
.nav-in a[aria-current="page"] { color: var(--chalk); }
.nav-in a[aria-current="page"]::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--ares);
}
.nav-in a:first-child[aria-current="page"]::after { left: 0; }
.nav-in a .due { display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 5px; border-radius: 9px; background: var(--gold); color: var(--field); font-size: 11px; font-weight: 800; text-align: center; line-height: 17px; vertical-align: 1px; }

/* page heading */
.page-head { margin: 22px 0 6px; }
.page-head h1 { margin: 0; font-size: clamp(28px, 7vw, 40px); font-weight: 800; font-style: italic; font-stretch: 88%; line-height: 1; letter-spacing: -.01em; }
.page-head p { margin: 6px 0 0; color: var(--fog); font-size: 14px; }

/* panels */
.panel { margin-top: 12px; background: var(--deck); border: 1px solid var(--rail); border-radius: 10px; padding: 14px 16px; }
.panel h2 { margin: 0 0 10px; font-size: 20px; font-weight: 800; font-style: italic; font-stretch: 90%; letter-spacing: -.005em; }
.panel h2 small { font-size: 13px; font-weight: 500; font-style: normal; color: var(--fog); margin-left: 8px; }
.panel.slim { background: transparent; border-style: dashed; padding: 10px 16px 12px; }
.panel.slim h2 { font-size: 15px; font-style: normal; font-weight: 650; color: var(--fog); margin-bottom: 6px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--rail);
  background: var(--deck-2); color: var(--chalk); font-weight: 650; cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: color-mix(in srgb, var(--chalk) 35%, var(--rail)); }
.btn.primary { background: var(--ares); border-color: var(--ares); color: var(--field); }
.btn.primary:hover { background: color-mix(in srgb, var(--ares) 85%, white); }

/* player tags */
.who-ares { color: var(--ares); font-weight: 700; }
.who-inferno { color: var(--inferno); font-weight: 700; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 15;
  transform: translate(-50%, 10px); opacity: 0;
  background: var(--chalk); color: var(--field);
  padding: 8px 14px; border-radius: 6px; font-size: 14px; font-weight: 600;
  transition: opacity .16s, transform .16s; pointer-events: none; max-width: calc(100% - 32px);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* custom tooltip (never a native title attribute) */
.tip {
  position: fixed; z-index: 20; pointer-events: none; max-width: 260px;
  background: var(--deck-2); border: 1px solid var(--rail); border-radius: 6px;
  padding: 7px 10px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.45);
}

.mock-note { margin: 28px 0 0; font-size: 12px; color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

@media (max-width: 520px) {
  .wordmark { font-size: 17px; }
  .mast-week { display: none; }
  .mast-recs { gap: 10px; font-size: 14px; }
}

/* touch: every control at least a fingertip (44px) */
@media (pointer: coarse), (max-width: 520px) {
  .wordmark { display: inline-flex; align-items: center; min-height: 44px; }
  .btn { min-height: 44px; }
}

/* long-press for tooltips shouldn't pop the phone's own menu */
[data-tip] { -webkit-touch-callout: none; }