/* Page-only presentation. Remove this stylesheet link to restore the prior layout. */
:root {
  --page-blue: #132f67;
  --page-ink: #fff6da;
  --page-yellow: #ffe45c;
  --page-shadow: #061b40;
}
.token-page { background:var(--page-blue); color:var(--page-ink); overflow:clip; }
.token-header { padding-block:18px; }
.ticker { color:var(--page-yellow); text-shadow:2px 3px var(--page-shadow); }
.hero {
  min-height:clamp(620px,86svh,940px);
  padding:70px 20px 64px;
  isolation:isolate;
}
.hero h1 {
  position:relative; top:auto; bottom:auto; grid-row:1; z-index:2;
  font-size:clamp(60px,8vw,112px); color:var(--page-yellow);
  transform:rotate(-4deg); text-shadow:3px 5px var(--page-shadow);
  margin-bottom:24px;
}
.hero-art { grid-row:2; width:min(73vw,510px); z-index:1; animation:none; filter:drop-shadow(0 14px 0 #071c4055); }
.hero::before, .hero::after {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width:min(94vw,850px); aspect-ratio:1; border:1px solid #b5d8f74a;
  border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%);
}
.hero::after { width:min(82vw,730px); border:2px solid #b5d8f724; }
.speed-lines { opacity:.2; }
.hero-rule {
  left:50%; bottom:5px; width:44px; height:44px;
  background:none; border:solid var(--page-yellow); border-width:0 3px 3px 0;
  transform:translateX(-50%) rotate(45deg); opacity:1;
}
.copy-stack { max-width:1120px; padding:130px 36px 80px; gap:130px; }
.copy-block, .copy-block:nth-child(even) {
  position:relative; isolation:isolate; max-width:900px;
  background:none; padding:24px 28px; color:var(--page-ink); text-shadow:none;
}
.copy-block h2 {
  position:relative; width:fit-content; max-width:100%; margin:0 auto 48px;
  color:var(--page-yellow); font-size:clamp(32px,4.2vw,56px);
  line-height:1.2; text-shadow:3px 4px var(--page-shadow); text-wrap:balance;
}
.copy-block h2::after {
  content:""; display:block; width:64px; height:4px; margin:24px auto 0;
  background:var(--page-yellow); transform:rotate(-6deg);
}
.copy-block p, .copy-block p:nth-of-type(2), .copy-block p:nth-of-type(3) {
  max-width:48ch; margin:0 auto 28px; font-size:clamp(18px,1.85vw,24px);
  line-height:1.65; text-shadow:0 2px var(--page-shadow); text-wrap:pretty;
}
.copy-block .copy-beat, .copy-block .copy-beat:nth-of-type(2),
.copy-block .copy-beat:nth-of-type(3) {
  font-size:clamp(28px,4vw,48px); line-height:1.25; margin:44px auto 8px;
  transform:rotate(-2deg); text-wrap:balance;
}
.copy-block .copy-beat-answer:nth-of-type(3) {
  color:var(--page-yellow); transform:rotate(2deg); margin:0 auto 52px;
}
/* Rings live outside the reading column; their missing arcs keep the page open. */
.copy-block::before, .copy-block::after {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width:100px; height:100px; border:8px solid #ffe45c;
  border-right-color:transparent; border-radius:50%;
  left:-120px; top:120px; transform:rotate(-28deg);
  box-shadow:inset 3px 3px #fff6da55;
}
.copy-block::after {
  width:34px; height:34px; border-width:4px; left:auto; right:-62px; top:auto; bottom:20%;
  transform:rotate(35deg); opacity:.55;
}
.copy-block:nth-child(2)::before { left:auto; right:-120px; top:65px; transform:rotate(140deg); }
.copy-block:nth-child(2)::after { right:auto; left:-62px; }
.copy-block:last-child { padding-bottom:75px; }
.copy-block:last-child::before { width:56px; height:56px; top:130px; left:-60px; }
.copy-block:last-child p:nth-last-child(2) { margin-top:58px; margin-bottom:4px; }
.copy-block:last-child p:last-child { color:var(--page-yellow); }
.copy-block:last-child::after {
  width:22px; height:22px; left:50%; right:auto; bottom:12px; top:auto;
  border:solid var(--page-yellow); border-width:0 3px 3px 0; border-radius:0;
  box-shadow:none; transform:translateX(-50%) rotate(45deg); opacity:1;
}
.lineup { padding-top:20px; padding-bottom:0; gap:24px; background:#102957; }
.lineup::before { background:none; border-top:1px solid #d6e8ff29; inset:0; }
.lineup figure { border:0; }
.gameplay-window, .gameplay-frame { height:100svh; }
.token-footer { background:#0a1e43; border:0; padding-block:40px; color:var(--page-ink); }
.token-footer small { color:#d6e3ee; }
.token-footer a { color:var(--page-yellow); }
@media (max-width:700px) {
  .hero { min-height:650px; padding-top:40px; }
  .hero h1 { font-size:64px; }
  .hero-art { width:min(86vw,450px); }
  .copy-stack { padding:96px 22px 36px; gap:80px; }
  .copy-block, .copy-block:nth-child(even) { padding:16px 0; }
  .copy-block h2 { font-size:32px; margin-bottom:32px; }
  .copy-block::before { width:44px; height:44px; border-width:4px; left:-48px; opacity:.3; }
  .copy-block::after { right:-45px; }
  .copy-block:nth-child(2)::before { right:-48px; }
  .copy-block:nth-child(2)::after { left:-45px; }
  .copy-block:last-child { padding-bottom:72px; }
  .copy-block:last-child::before { left:-56px; }
  .lineup { padding-inline:10px; gap:0; }
  .lineup figure:nth-child(2) { margin-top:-8%; }
}