/*
 * Snake: loads after lisa3.css and reuses every Lisa 3 component as-is.
 *
 * 1. Swaps the story accent for Snake's Horizon colour, Cyan Bright
 *    (#4bffe1). On black it is already light enough for small text.
 *    Every literal pink in lisa3.css is restated.
 * 2. Adds this page's components: the play recording, the input map, the
 *    rule lists, the item table and the Horizon card.
 */

body.l3.sn1{
  --l3-accent: #4bffe1;
  --l3-accent-soft: rgb(75 255 225 / .14);
  --l3-accent-line: rgb(75 255 225 / .45);
  --l3-accent-rgb: 75 255 225;
  --sn-rgb: 75 255 225;
  /* The engine's --accent also colours the site cursor (Zoom / Open). */
  --accent: #4bffe1;
}

/* ------------------------------------------------ literal-pink restatements */
body.sn1 .l3-hero__glow{ background:radial-gradient(circle 760px at 72% 0%,
  rgb(var(--sn-rgb) / .16) 0%, rgb(var(--sn-rgb) / .1) 20%, rgb(var(--sn-rgb) / .05) 38%,
  rgb(var(--sn-rgb) / .02) 60%, transparent 100%); }
body.sn1 .l3-hero__film{ background:#000; box-shadow:0 40px 120px -30px rgb(var(--sn-rgb) / .35); }
body.sn1 .l3-hero__film video{ height:100%; top:0; object-fit:cover; object-position:50% 50%; }
body.sn1 .l3-chapter{ --glow-rgb:var(--sn-rgb); }
body.sn1 .closing::before{ background:radial-gradient(ellipse 700px 360px at 30% 60%, rgb(var(--sn-rgb) / .12), transparent 70%); }
body.sn1 .note--tag{ background:rgb(var(--sn-rgb) / .12); }
body.sn1 ::selection{ background:var(--l3-accent); color:#000; }
body.sn1 .l3-chapter__t{ overflow-wrap:break-word; }
body.sn1 .sn-reframe{ margin-top:clamp(24px,4vw,48px); }
/* Game captures are dark: show them on black, not the light canvas. */
body.sn1 .l3-shot .artifact-link, body.sn1 .frame .artifact-link{ background:#000; }
.sn-btn{ --btn-bg:#4bffe1; --btn-fg:#000; --btn-tint:var(--black-10); }
.sn-mark{ width:10px; height:10px; border-radius:50%; background:var(--l3-accent); box-shadow:0 0 0 4px rgb(var(--sn-rgb) / .2), 0 0 14px rgb(var(--sn-rgb) / .7); }
@media (max-width: 640px){
  body.sn1 .l3-chapter__t{ font-size:clamp(40px,11vw,56px); line-height:1.05; }
}

/* ------------------------------------------------ play recordings */
.sn-loops{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,2vw,24px); margin-top:40px; }
.sn-loops--one{ grid-template-columns:1fr; }
.sn-loop{ margin:0; min-width:0; }
.sn-loop__screen{ position:relative; aspect-ratio:16 / 10; border-radius:var(--l3-r); overflow:hidden; background:#000;
  box-shadow:0 0 0 1px var(--l3-line), 0 30px 80px -40px rgb(var(--sn-rgb) / .45); }
.sn-loop video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.sn-loop .figc{ margin-top:12px; }

/* ------------------------------------------------ the input map (decision 01) */
.sn-map{ display:grid; grid-template-columns:minmax(0,1.3fr) auto minmax(0,1fr); align-items:center; gap:clamp(16px,3vw,36px);
  margin-top:28px; padding:clamp(20px,3vw,32px); border-radius:var(--l3-r); background:var(--l3-card-quiet); border:1px solid var(--l3-line); position:relative; }
.sn-map__in{ display:grid; gap:8px; }
.sn-map__in span{ display:flex; flex-direction:column; gap:2px; padding:12px 16px; border-radius:var(--l3-r-sm); background:var(--l3-card);
  font:var(--t-b3); color:var(--l3-soft); position:relative; }
.sn-map__in span::after{ content:""; position:absolute; right:calc(-1 * clamp(16px,3vw,36px)); top:50%; width:clamp(16px,3vw,36px); height:1px; background:var(--l3-accent-line); }
.sn-map__in b{ font:var(--t-b3a); color:#fff; }
.sn-map__mid{ display:grid; place-items:center; gap:6px; width:clamp(96px,12vw,132px); aspect-ratio:1; border-radius:50%;
  border:1px solid var(--l3-accent-line); background:radial-gradient(circle, rgb(var(--sn-rgb) / .18), transparent 70%); text-align:center; align-content:center; }
.sn-map__mid b{ font:var(--t-h2); line-height:1; color:var(--l3-accent); }
.sn-map__mid span{ font:var(--t-b3c); font-size:11px; letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-soft); padding:0 10px; }
.sn-map__out{ display:flex; flex-direction:column; gap:6px; padding:18px; border-radius:var(--l3-r-sm); border:1px solid var(--l3-accent-line); background:var(--l3-accent-soft); }
.sn-map__out b{ font:var(--t-b2a); color:#fff; }
.sn-map__out span{ font:var(--t-b3); color:var(--l3-soft); }

/* ------------------------------------------------ lists */
.sn-rules{ list-style:none; counter-reset:r; margin:0; padding:0; display:grid; gap:0; max-width:var(--l3-read); }
/* The number hangs in the left gutter, so the bold lead and the rest of the
   sentence stay one run of text. */
.sn-rules li{ counter-increment:r; position:relative; padding:14px 0 14px 52px; border-bottom:1px solid var(--l3-line);
  font:var(--t-b2); color:var(--white-80); margin:0; list-style:none; }
.sn-rules li::before{ content:counter(r, decimal-leading-zero); position:absolute; left:0; top:17px; font:var(--t-b3c); color:var(--l3-accent); }
.sn-rules li b{ color:#fff; font-weight:var(--fw-medium); }
.sn-list{ margin:0; padding:0 0 0 20px; display:grid; gap:10px; max-width:var(--l3-read); }
.sn-list li{ font:var(--t-b2); color:var(--white-80); margin:0; }
.sn-list li b{ color:#fff; font-weight:var(--fw-medium); }
.sn-list li::marker{ color:var(--l3-accent); }
body.l3 .observed__item .sn-n{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; flex:none;
  background:var(--l3-accent-soft); color:var(--l3-accent); font:var(--t-b3c); font-size:12px; }

/* the radar beside its notes */
.sn-split{ grid-template-columns:minmax(0,360px) minmax(0,1fr); align-items:center; margin-top:32px; }
.sn-split .l3-fig--portrait{ max-width:360px; }

/* the Architect panel beside the tray rules */
.sn-pair{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center; }
.sn-pair__k{ margin:0 0 14px !important; font:var(--t-b3b); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-accent); }

/* ------------------------------------------------ the food table */
.sn-table{ border-radius:var(--l3-r); border:1px solid var(--l3-line); overflow:hidden; background:var(--l3-card-quiet); }
.sn-table > div{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1.2fr); gap:20px; padding:16px 22px; border-top:1px solid var(--l3-line); align-items:center; }
.sn-table > div:first-child{ border-top:0; }
.sn-table__head span{ font:var(--t-b3c); font-size:12px; letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-muted); }
.sn-table span[role=cell]{ font:var(--t-b3a); color:var(--l3-soft); }
.sn-food{ display:flex; align-items:center; gap:10px; }
.sn-food i{ width:14px; height:14px; border-radius:50%; background:var(--c); box-shadow:0 0 12px var(--c); flex:none; }
.sn-food--star i{ border-radius:0; width:16px; height:16px; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.sn-food--ember i{ border-radius:2px; clip-path:polygon(50% 0,61% 32%,95% 22%,70% 50%,95% 78%,61% 68%,50% 100%,39% 68%,5% 78%,30% 50%,5% 22%,39% 32%); width:16px; height:16px; }
.sn-food--comet i{ border-radius:50% 50% 50% 2px; transform:rotate(-45deg); }
.sn-food b{ font:var(--t-b2a); color:#fff; }
.sn-food em{ font:var(--t-b3c); font-style:normal; color:var(--l3-muted); }

/* ------------------------------------------------ keep exploring */
.aa-next{ padding:clamp(24px,4vw,40px) 0 clamp(72px,10vw,120px); }
.sn-next{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 28px; align-items:center;
  padding:clamp(22px,3vw,32px); border-radius:var(--l3-r);
  background:radial-gradient(ellipse 520px 220px at 0% 0%, rgb(var(--sn-rgb) / .14), transparent 70%), var(--l3-card-quiet);
  border:1px solid var(--l3-accent-line); color:#fff !important; text-decoration:none; transition:border-color .3s var(--ease, ease); }
.sn-next:hover{ border-color:var(--l3-accent); }
.sn-next__k{ display:block; margin-bottom:8px; font:var(--t-b3c); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-accent); }
.sn-next__t{ display:block; font:var(--t-h3); color:#fff; margin-bottom:6px; }
.sn-next__d{ display:block; font:var(--t-b3a); color:var(--l3-soft); max-width:600px; }
.sn-next__go{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; background:#4bffe1; color:#000; font:var(--t-b3b); white-space:nowrap; }
.sn-next__go .icon{ width:18px; height:18px; }

/* ------------------------------------------------ responsive */
@media (max-width: 900px){
  .sn-map{ grid-template-columns:1fr; justify-items:stretch; }
  .sn-map__in span::after{ display:none; }
  .sn-map__mid{ justify-self:center; }
  .sn-split, .sn-pair{ grid-template-columns:1fr; }
  .sn-split .l3-fig--portrait, .sn-pair .l3-shot{ max-width:340px; }
}
@media (max-width: 760px){
  .sn-loops{ grid-template-columns:1fr; }
  .sn-table > div{ grid-template-columns:1fr; gap:6px; }
  .sn-table__head{ display:none !important; }
  .sn-table span[role=cell]:nth-child(2)::before{ content:"Gives · "; color:var(--l3-accent); }
  .sn-table span[role=cell]:nth-child(3)::before{ content:"Takes · "; color:var(--l3-accent); }
}
@media (max-width: 560px){
  .sn-next{ grid-template-columns:1fr; }
  .sn-next__go{ justify-self:start; }
}

/* Three items in the eyebrow: let them wrap as whole words on a phone. */
body.sn1 .l3-hero__eyebrow{ flex-wrap:wrap; row-gap:6px; }
body.sn1 .l3-hero__eyebrow > span:not(.l3-dot){ white-space:nowrap; }