/* Splash pages for oasisxxv.sulaweyo.me and opl.oasisxxv.sulaweyo.me (built by splash/build.mjs, served by sst.config.ts).
   The league site's dark palette and orange accent; Teko headings like oasisxxv.com; the notched
   banner shape from oasisxxv.com's art on buttons and the key art's lower edge. */
:root {
  --bg: #0f1218; --panel: #171c25; --panel-2: #1e2531; --line: #2a3342; --text: #e7ebf2; --muted: #9aa5b6;
  --accent: #fb7224; --accent-ink: #1a1206; --blue: #508ce6; --sky: #55bef2;
  --notch: polygon(0 0, 100% 0, 100% 100%, calc(100% - 14px) 100%, calc(100% - 22px) calc(100% - 6px), 22px calc(100% - 6px), 14px 100%, 0 100%);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { flex: 1; overflow-x: clip; }
a { color: var(--accent); }
a:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, .door-title, .kicker, .door-kicker, .badge { font-family: Teko, "Arial Narrow", system-ui, sans-serif; font-weight: 600; letter-spacing: .02em; }
.lede { font-size: 1.12rem; color: var(--text); max-width: 34rem; margin: 0 0 24px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 26px 14px; background: var(--accent); color: var(--accent-ink);
  font: 600 1.45rem/1 Teko, system-ui, sans-serif; letter-spacing: .03em; text-decoration: none; text-transform: uppercase; clip-path: var(--notch); }
.cta:hover { background: #ff8a45; }
.cta.ghost { background: var(--panel-2); color: var(--text); }
.cta.ghost:hover { background: var(--line); }
/* clip-path would cut off the focus ring, so draw one inside */
.cta:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--sky); }

.foot { padding: 20px 16px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
.foot p { max-width: 64rem; margin: 0 auto; }

/* ---- oasisxxv.sulaweyo.me: Kiriko key art behind the logo, then three doors ---- */
.keyart { position: relative; min-height: min(78vh, 760px); display: grid; align-items: center; padding: 48px 16px 72px;
  background: linear-gradient(90deg, rgba(15,18,24,.92) 0%, rgba(15,18,24,.7) 38%, rgba(15,18,24,0) 70%),
              url(/art/kiriko.webp) 68% 30% / cover no-repeat, var(--bg); }
.keyart-text { width: 100%; max-width: 72rem; margin: 0 auto; }
.logo-title { margin: 0 0 12px; width: min(440px, 80vw); color: #fff; line-height: 0; }
.logo-title svg { width: 100%; height: auto; display: block; }
.olderwatch { width: 150px; height: auto; opacity: .9; }
.doors { max-width: 72rem; margin: -8px auto 48px; padding: 0 16px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); position: relative; z-index: 1; }
.door { display: flex; flex-direction: column; gap: 2px; padding: 20px 22px 26px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--blue);
  color: var(--text); text-decoration: none; clip-path: var(--notch); transition: transform .15s, background .15s; }
.door.accent { border-top-color: var(--accent); }
.door:hover { background: var(--panel-2); transform: translateY(-2px); }
.door:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--sky); }
.door-kicker { color: var(--sky); font-size: 1.05rem; line-height: 1; text-transform: uppercase; }
.door.accent .door-kicker { color: var(--accent); }
.door-title { font-size: 2.3rem; line-height: 1.05; }
.door-text { color: var(--muted); }

/* ---- opl.oasisxxv.sulaweyo.me: title and role trio, then the current season's teams ---- */
.top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 72rem; margin: 0 auto; padding: 14px 16px; }
.brand { color: #fff; display: block; width: 104px; line-height: 0; }
.brand svg { width: 100%; height: auto; }
.top nav { display: flex; gap: 18px; }
.top nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem; }
.top nav a:hover { color: var(--text); }
.hero { position: relative; max-width: 72rem; margin: 0 auto; padding: 24px 16px 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 24px; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 10% -20vw 0 40%; background: radial-gradient(closest-side, rgba(80,140,230,.28), transparent 70%); }
.hero-text { padding-bottom: 72px; }
.kicker { margin: 0; color: var(--sky); font-size: 1.3rem; text-transform: uppercase; }
.hero h1 { margin: 0 0 14px; font-size: clamp(3.4rem, 8vw, 6rem); line-height: .86; text-transform: uppercase; }
.hero h1 span { display: block; color: var(--accent); }
.trio { position: relative; height: clamp(300px, 42vw, 500px); }
/* Reinhardt stands at the back; Ana and Soldier step forward either side of him */
.trio img { position: absolute; bottom: 0; height: 84%; width: auto; z-index: 2; filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); }
.trio .rein { height: 100%; left: 50%; transform: translateX(-50%); z-index: 1; filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)) brightness(.85); }
.trio .ana { left: 0; }
.trio .soldier { right: 0; }
.trio::after { content: ""; position: absolute; z-index: 3; inset: auto 0 0 0; height: 18%; background: linear-gradient(transparent, var(--bg)); }

.season { max-width: 72rem; margin: 0 auto 56px; padding: 28px 16px 0; border-top: 1px solid var(--line); }
.season-head { display: flex; align-items: center; gap: 14px; }
.season h2 { margin: 0; font-size: 2.6rem; line-height: 1; text-transform: uppercase; }
.badge { padding: 4px 10px 2px; background: var(--accent); color: var(--accent-ink); font-size: 1.05rem; line-height: 1; text-transform: uppercase; }
.divisions { display: grid; gap: 24px 32px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 18px; }
.division h3 { margin: 0 0 10px; font-size: 1.6rem; line-height: 1; color: var(--muted); text-transform: uppercase; }
.teams { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.teams a { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 8px 12px 8px 8px; background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--team, var(--line)); border-radius: 8px; color: var(--text); font-weight: 600; text-decoration: none; line-height: 1.25; }
.teams a:hover { background: var(--panel-2); }
.teams img { width: 56px; height: 56px; object-fit: contain; flex: none; }

@media (max-width: 720px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-text { padding-bottom: 0; }
  .trio { height: 300px; max-width: 420px; width: 100%; margin: 0 auto; }
  .keyart { background: linear-gradient(180deg, rgba(15,18,24,.35) 0%, rgba(15,18,24,.92) 62%), url(/art/kiriko.webp) 72% 0 / auto 70% no-repeat, var(--bg); align-items: end; min-height: 88vh; }
}
@media (max-width: 420px) {
  .teams { grid-template-columns: minmax(0, 1fr); }
  .door-title { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .door { transition: none; } .door:hover { transform: none; } }