/* ============================================================
   jjxl.party — Anno XL · Cape Yamu Forty
   Token values lifted verbatim from the design system
   (_ds/tokens/colors.css, typography.css, spacing.css).
   ============================================================ */
:root {
  --paper:#fbfaf6; --cream:#f4efe3; --cream-deep:#efe7d6; --sand:#e3d9c2;
  --navy-night:#0e151f; --navy:#163149; --steel-deep:#1d3a52; --steel:#2c4d66;
  --steel-light:#5a7d96; --mist:#cfd8dd;
  --bronze:#9a6b45; --bronze-light:#b58358; --bronze-deep:#7a5234;
  --taupe:#5e5648; --dune:#8a7d6a; --fawn:#a89a83;
  --jade:#3f6258; --dawn:#f0a44e;
  --rule-on-navy:rgba(244,239,227,.22);

  --font-display:"Cormorant Garamond","Times New Roman",serif;
  --font-sans:"Jost","Century Gothic",system-ui,sans-serif;
  --font-brand:"Cinzel","Trajan Pro",serif;
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body {
  background:var(--navy-night);
  color:var(--cream);
  font-family:var(--font-sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
img { max-width:100%; display:block; }
button { font:inherit; color:inherit; cursor:pointer; }

.view { min-height:100svh; }
.view[hidden] { display:none; }
.takeover { position:fixed; inset:0; z-index:30; overflow:auto; }

/* ---- shared type helpers ---- */
.display { font-family:var(--font-display); font-weight:500; line-height:.98;
  letter-spacing:.02em; text-wrap:balance; margin:0; }
.italic { font-family:var(--font-display); font-style:italic; font-weight:400;
  color:var(--steel-light); margin:0; }
.eyebrow { font-size:11px; letter-spacing:.44em; text-indent:.44em;
  text-transform:uppercase; color:var(--bronze-light); margin:0; }
.label { font-size:11px; letter-spacing:.34em; text-indent:.34em;
  text-transform:uppercase; color:var(--bronze-light); }

/* Placeholder for the Roofline mark. The real artwork is a React component in
   _ds/_ds_bundle.js and must be re-exported as SVG, not redrawn. */
.mark { font-family:var(--font-brand); font-weight:600; color:var(--bronze-light);
  letter-spacing:.16em; text-indent:.16em; line-height:1; }
.mark-lg { font-size:56px; }
.mark-xl { font-size:74px; }

.progress { font-family:var(--font-brand); font-size:12px; letter-spacing:.5em;
  text-indent:.5em; color:var(--bronze-light); margin:18px 0 0; }
.progress b { font-weight:600; }
.progress { opacity:1; }

.btn {
  display:block; width:100%; height:48px; border:0; border-radius:4px;
  font-family:var(--font-sans); font-weight:500; font-size:11px;
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase;
  transition:opacity .2s ease, background .2s ease;
}
.btn-bronze { background:var(--bronze); color:var(--cream); }
.btn-bronze:hover { background:var(--bronze-deep); }
.btn-bronze:active { transform:translateY(1px); }
.btn:disabled { opacity:.45; cursor:default; }

.linkbtn { background:none; border:0; padding:0; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--steel-light); }
.linkbtn.tiny { font-size:9.5px; opacity:.7; margin-top:18px; }

.footnote { font-size:13px; margin-top:18px; }

/* ============================================================
   THE GATE
   ============================================================ */
.gate { background:#0e151f; }
.gate-scrim {
  position:fixed; inset:0; z-index:0;
  background:
    linear-gradient(rgba(14,21,31,.74), rgba(14,21,31,.74)),
    url("/photos/aerial.jpg") 10% 42% / cover no-repeat;
  filter:brightness(.92);
}
.gate-inner {
  position:relative; z-index:1;
  min-height:100svh; display:flex; flex-direction:column; align-items:center;
  padding:calc(env(safe-area-inset-top) + 34px) 26px calc(env(safe-area-inset-bottom) + 26px);
  text-align:center;
}
.gate-head { font-size:27px; color:var(--cream); margin-top:30px; max-width:15ch; }
.gate-sub { font-size:13px; margin-top:12px; }

.namelist {
  flex:1; width:100%; max-width:320px; margin:26px 0 22px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* 36px gradient fade masks top and bottom */
  -webkit-mask-image:linear-gradient(transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-image:linear-gradient(transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  padding:36px 0;
}
.namelist button {
  display:block; width:100%; background:none; border:0; padding:9px 0;
  font-family:var(--font-display); font-weight:400; font-size:20px;
  color:rgba(244,239,227,.65); transition:all .18s ease;
}
.namelist button[aria-selected="true"] {
  font-size:28px; font-weight:500; color:var(--cream);
  width:230px; margin:10px auto; padding:12px 0;
  border-top:1px solid var(--bronze-light);
  border-bottom:1px solid var(--bronze-light);
}
#gate-cta { max-width:320px; margin-top:auto; }

/* ============================================================
   CREAM TAKEOVERS — Residence · Herald · Webview eject
   ============================================================ */
.cream { background:var(--cream); color:var(--steel-deep); z-index:35; }
.cream-inner {
  min-height:100svh; display:flex; flex-direction:column; align-items:center;
  padding:calc(env(safe-area-inset-top) + 36px) 28px calc(env(safe-area-inset-bottom) + 30px);
  text-align:center;
}
/* On cream the mark inverts: navy strokes and letters, bronze (not
   bronze-light) gilt — matching the token file's light scope. */
.markslot.dark .rf { --rf-gold:var(--bronze); color:var(--navy); }
.cream-progress { color:var(--bronze); }
.cream-head { font-size:27px; color:var(--steel-deep); margin-top:26px; max-width:16ch; }
.body { font-family:var(--font-sans); font-weight:300; font-size:13px; line-height:1.65;
  color:var(--taupe); margin:14px 0 0; max-width:34ch; }
.body.quiet { color:var(--dune); }
.appicon { border-radius:13px; margin-top:26px; box-shadow:0 4px 14px rgba(29,58,82,.16); }

.instr { margin-top:24px; width:100%; max-width:320px;
  border:1px solid rgba(29,58,82,.16); border-radius:6px; overflow:hidden; }
.instr-row { display:flex; align-items:center; gap:12px; padding:14px 16px;
  font-family:var(--font-sans); font-size:13px; color:var(--steel-deep); text-align:left; }
.instr-row + .instr-row { border-top:1px solid rgba(29,58,82,.16); }
.roman { font-family:var(--font-brand); font-size:12px; color:var(--bronze); min-width:18px; }
.shareglyph { width:13px; height:17px; vertical-align:-3px; color:var(--steel); }

.btn-navy { background:var(--navy); color:var(--cream); }
.btn-navy:hover { background:var(--steel-deep); }
.btn-outline { background:none; border:1px solid var(--bronze); color:var(--bronze); }
.cream .btn { max-width:320px; margin-top:28px; }
.cream .linkbtn { margin-top:16px; color:var(--dune); }
.cream .footnote { color:var(--dune); }

.bellring { width:78px; height:78px; border-radius:50%; margin-top:26px;
  border:1px solid var(--bronze); display:flex; align-items:center; justify-content:center; }
.bellring svg { width:30px; height:30px; color:var(--bronze); }

/* The chevron that points at Safari's Share button. Bottom-centre on iPhone;
   flipped to the top-right on iPad, where Share lives instead. */
.pointer { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 8px);
  transform:translateX(-50%); color:var(--bronze); z-index:36; }
.pointer svg { width:30px; height:30px; animation:nudge 1.5s ease-in-out infinite; }
.pointer.top-right { left:auto; right:14px; bottom:auto;
  top:calc(env(safe-area-inset-top) + 8px); transform:none; }
.pointer.top-right svg { transform:rotate(180deg); animation:nudge-up 1.5s ease-in-out infinite; }
@keyframes nudge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
@keyframes nudge-up { 0%,100%{transform:rotate(180deg) translateY(0)} 50%{transform:rotate(180deg) translateY(6px)} }

/* ============================================================
   THE LEDGER
   ============================================================ */
.ledger { background:rgba(14,21,31,.96); z-index:38; }
.ledger-inner { max-width:560px; margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 54px) 26px 40px; }
.ledger-close { position:fixed; top:calc(env(safe-area-inset-top) + 12px); right:14px; }
.ledger-head { font-size:30px; color:var(--cream); }
.ledger-sub { font-size:13px; margin-top:10px; }
.board-full { margin-top:26px; }
.board-full li { grid-template-columns:28px 1fr auto; }
.board-full .tag { font-family:var(--font-display); font-style:italic; font-size:13px;
  color:var(--bronze-light); margin-left:8px; }
.board-full li.unscored .tag { color:var(--steel-light); }

/* ============================================================
   HOME — the vigil
   ============================================================ */
.home-scrim {
  position:fixed; inset:0; z-index:0;
  background:url("/photos/aerial.jpg") 10% 42% / cover no-repeat;
}
.home-scrim::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(14,21,31,.62) 0%, rgba(14,21,31,.42) 42%, rgba(14,21,31,.94) 78%);
}
.home-inner {
  position:relative; z-index:1;
  min-height:100svh; display:flex; flex-direction:column; align-items:center;
  padding:calc(env(safe-area-inset-top) + 40px) 24px calc(env(safe-area-inset-bottom) + 28px);
  text-align:center;
}

.vigil { margin-top:34px; width:100%; }
.clock { display:flex; align-items:baseline; justify-content:center; gap:10px; }
.clock .num {
  font-family:var(--font-display); font-weight:500; font-size:64px;
  line-height:1; color:var(--cream); font-variant-numeric:tabular-nums;
}
.clock .lab {
  font-family:var(--font-sans); font-weight:400; font-size:8px;
  letter-spacing:.36em; text-indent:.36em; text-transform:uppercase;
  color:var(--steel-light); margin-top:10px;
}
.clock .mid { font-size:40px; color:var(--bronze-light); line-height:1; }
.secs { font-family:var(--font-sans); font-size:13px; letter-spacing:.12em;
  color:var(--steel-light); margin:16px 0 0; }
.tease { font-size:14px; margin-top:16px; }

/* ---- arcade card ---- */
.card {
  width:100%; max-width:420px; margin-top:34px; padding:20px;
  border:1px solid rgba(244,239,227,.28); border-radius:6px;
  background:rgba(14,21,31,.42); backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.medallions { display:flex; justify-content:center; gap:12px; }
.medallions img { width:46px; height:46px; border-radius:50%; }
.card-copy { font-size:13px; line-height:1.6; color:var(--cream);
  margin:14px 0 18px; }
.arcade-card .btn { height:46px; }

/* ---- vanguard ---- */
.vanguard { width:100%; max-width:420px; margin-top:34px; text-align:left; }
.vanguard-head { display:flex; align-items:baseline; justify-content:space-between; }
.board { list-style:none; margin:14px 0 0; padding:0; }
.board li {
  display:grid; grid-template-columns:24px 1fr auto; align-items:baseline; gap:10px;
  padding:11px 0; border-bottom:1px solid rgba(244,239,227,.12);
}
.board .rank { font-family:var(--font-brand); font-size:12px; color:var(--bronze-light); }
.board .who  { font-family:var(--font-display); font-weight:500; font-size:16px; color:var(--cream); }
.board .pts  { font-family:var(--font-sans); font-size:11px; letter-spacing:.1em; color:var(--steel-light); }
.board li.unscored .who { color:rgba(244,239,227,.55); }
.status { font-size:11px; letter-spacing:.1em; color:var(--steel-light); margin:16px 0 0; }

.foot {
  width:100%; max-width:420px; margin-top:auto; padding-top:16px;
  border-top:1px solid rgba(244,239,227,.22);
  display:flex; justify-content:space-between; align-items:baseline;
}
.foot-l, .foot span:first-child { font-family:var(--font-sans); font-size:9.5px;
  letter-spacing:.4em; text-transform:uppercase; color:var(--steel-light); }
.foot-r { font-family:var(--font-brand); font-size:12px; letter-spacing:.34em;
  color:var(--bronze-light); }
.foot-centre { justify-content:center; gap:18px; }

/* ============================================================
   LAUNCH
   ============================================================ */
.launch-scrim {
  position:fixed; inset:0; z-index:0;
  background:url("/photos/fire-pit.jpg") center / cover no-repeat;
  filter:brightness(.45);
}
.launch-inner {
  position:relative; z-index:1; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 24px; text-align:center; gap:20px;
}
.launch-head { font-size:clamp(34px,9vw,46px); color:var(--cream); }
.player { width:100%; max-width:860px; aspect-ratio:16/9;
  border:1px solid rgba(181,131,88,.35); background:rgba(14,21,31,.6);
  display:flex; align-items:center; justify-content:center; }
.player iframe { width:100%; height:100%; border:0; }

/* ============================================================
   ARCADE — hosts the existing game
   ============================================================ */
.arcade { z-index:40; background:var(--navy-night); overflow:hidden; }
#game { width:100%; height:100%; border:0; display:block; }
.close {
  position:absolute; top:calc(env(safe-area-inset-top) + 12px); right:12px; z-index:41;
  width:38px; height:38px; border-radius:50%; border:0;
  background:rgba(22,49,73,.12); color:var(--cream); font-size:20px; line-height:1;
  backdrop-filter:blur(4px);
}

.nojs { padding:40px 24px; text-align:center; color:var(--cream); }

/* ---- motion ---- */
@keyframes axlFade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.view:not([hidden]) > *:not(.gate-scrim):not(.home-scrim):not(.launch-scrim) {
  animation:axlFade .38s ease both;
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }