/* Layout: a night forest above, then a leather strap whose ten holes are the ten mint stages. */
:root {
  color-scheme: dark;
  --night: #0b1f1c;
  --pine: #123029;
  --moss: #24524a;
  --leather: #6b4226;
  --leather-dark: #47291a;
  --brass: #f0c05a;
  --signal: #5fe3c4;
  --parch: #eaf3ec;
  --sage: #a3bfb4;
  --ember: #ee7f55;
  --display: "Big Shoulders Display", Impact, sans-serif;
  --serif: "Big Shoulders Display", Impact, sans-serif;
  --poster: Rye, Georgia, serif;
  --paper: #e9dcb9;
  --ink: #2b1c10;
  --body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--night); color: var(--parch); font: 400 18px/1.55 var(--body); overflow-x: hidden; }
html[lang="en"] [data-l="id"], html[lang="id"] [data-l="en"] { display: none; }
a { color: var(--brass); }
h1, h2, h3 { font-weight: 400; text-wrap: balance; margin: 0; }
h1 { font: 900 clamp(3.1rem, 8.2vw, 7rem)/.95 var(--serif); max-width: 13ch; text-transform: uppercase; }
h2 { font: 900 clamp(2.5rem, 5.6vw, 4.4rem)/1 var(--display); text-transform: uppercase; }
h3 { font: 900 2rem/1.1 var(--display); text-transform: uppercase; }
p { margin: 0; max-width: 65ch; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); background: #0b1f1cd9; backdrop-filter: blur(8px); border-bottom: 1px solid #24524a99; }
.brand { font: 900 1.5rem var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--parch); text-decoration: none; }
.nav nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nav nav a { color: var(--sage); text-decoration: none; font-size: .98rem; }
.nav nav a:hover { color: var(--brass); }

.scene { position: relative; height: 460vh; background: var(--night); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); }
.poster, #film, #flies { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#flies { pointer-events: none; }
.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #071512d9 0%, #07151266 38%, #07151200 62%), linear-gradient(0deg, var(--night) 0%, #0b1f1c00 18%); }
.chapter { position: absolute; left: max(16px, 5vw, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(calc(-50% + 26px)); max-width: 680px; display: grid; gap: 20px; opacity: 0; visibility: hidden; transition: opacity .45s, transform .45s, visibility .45s; }
.chapter.on { opacity: 1; visibility: visible; transform: translateY(-50%); }
.chapter p:not(.kicker) { font-size: 1.2rem; text-shadow: 0 1px 12px #000; }
.chapter h1, .chapter h2 { text-shadow: 0 2px 24px #000a; }
.console { position: absolute; right: max(16px, 3vw); bottom: 26px; width: min(360px, calc(100% - 32px)); margin: 0; padding: 12px 14px; background: #06141299; border: 1px solid #5fe3c480; border-radius: 3px; backdrop-filter: blur(6px); color: var(--signal); font: 400 .76rem/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.scrollcue { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #ffffff14; }
.scrollcue span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--brass); }
.kicker { font: 500 .82rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }

.strap { position: relative; background: var(--leather-dark); overflow: hidden; }
.strap img { display: block; width: 100%; aspect-ratio: 16 / 3; object-fit: cover; }
.holes { position: absolute; inset: 0 0 auto; aspect-ratio: 16 / 3; display: grid; grid-template-columns: repeat(10, 1fr); align-items: center; padding-inline: 6.5%; }
.hole { width: 2.5vw; min-width: 11px; aspect-ratio: 1; justify-self: center; border-radius: 50%; display: grid; place-items: center; font: 500 clamp(.6rem, 1.1vw, .85rem) var(--mono); color: var(--night); }
.hole.done { background: var(--brass); box-shadow: 0 0 22px var(--brass); }
.hole.now { background: var(--signal); box-shadow: 0 0 0 3px var(--parch), 0 0 26px var(--signal); animation: pulse 2.2s infinite; }
.strap-note { max-width: none; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); font: 400 .86rem var(--mono); color: var(--parch); background: var(--night); }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px #5fe3c400, 0 0 34px var(--signal); } }

.band { padding-block: clamp(52px, 8vw, 92px); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.band.pine { background: var(--pine); }
.band.warn { background: var(--leather-dark); }
.wrap { max-width: 1120px; margin: 0 auto; display: grid; gap: 22px; }
.wrap.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 72px); align-items: start; }
.copy { display: grid; gap: 18px; min-width: 0; }
.sub { color: var(--sage); }
.note { color: var(--sage); font-size: .95rem; }
.row { display: flex; flex-wrap: wrap; gap: 12px; }
.row.tight { gap: 8px; }
.between { justify-content: space-between; align-items: center; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 22px; background: var(--brass); color: var(--night); border: 0; border-radius: 3px; font: 700 1.02rem var(--body); text-decoration: none; cursor: pointer; }
.btn:hover:not(:disabled) { background: var(--parch); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.alt { background: transparent; color: var(--parch); box-shadow: inset 0 0 0 1px var(--parch); }
.btn.wide { width: 100%; }
.chapter .btn, #copyPrompt { justify-self: start; }
.btn.small { min-height: 38px; padding: 6px 14px; font-size: .92rem; }
.ghost { background: none; border: 1px solid var(--moss); color: var(--sage); padding: 4px 10px; border-radius: 3px; font: 500 .85rem var(--mono); cursor: pointer; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
.facts dt, .mini dt { color: var(--sage); font-size: .85rem; }
.facts dd { margin: 0; font: 500 1.35rem var(--mono); font-variant-numeric: tabular-nums; }
.panel { display: grid; gap: 12px; padding: 22px; background: var(--pine); border: 1px solid var(--moss); min-width: 0; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--moss); }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; color: var(--sage); padding: 8px; font: 700 1.2rem var(--display); cursor: pointer; }
.tabs button.on { color: var(--brass); border-color: var(--brass); }
label { font-size: .9rem; color: var(--sage); }
input { width: 100%; min-width: 0; padding: 10px 12px; background: var(--night); color: var(--parch); border: 1px solid var(--moss); border-radius: 3px; font: 500 1rem var(--mono); }
.quote { font: 500 1rem var(--mono); color: var(--brass); }
.wallet { font: 400 .85rem var(--mono); color: var(--sage); overflow-wrap: anywhere; }
.claims { display: grid; gap: 10px; border-top: 1px solid var(--moss); padding-top: 14px; }
.mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.mini dd { margin: 0; font: 500 .98rem var(--mono); overflow-wrap: anywhere; }
.copyline { display: flex; gap: 8px; }

.duel { display: grid; grid-template-columns: 1fr 1fr; position: relative; background: var(--night); }
.duel-title { grid-column: 1 / -1; padding: 62px max(16px, env(safe-area-inset-right, 0px)) 26px max(16px, env(safe-area-inset-left, 0px)); text-align: center; }
.side { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; gap: 18px; padding: 30px max(16px, 3vw); transition: flex .3s, background .3s; min-width: 0; }
.side img { width: 100%; filter: brightness(1.3) drop-shadow(0 0 34px #5fe3c455); transition: transform .35s; }
.outlaw img { filter: brightness(1.35) drop-shadow(0 0 34px #f0c05a55); }
.side:hover img { transform: translateY(-8px) scale(1.05); }
.scout { background: linear-gradient(120deg, #0e3a3a, #123029); }
.outlaw { background: linear-gradient(240deg, #572016, #3b1a12); }
.tag { color: var(--brass); font: 500 1rem var(--mono); margin-block: 4px 10px; }
.side ul { margin: 0; padding-left: 20px; display: grid; gap: 3px; }
.duel-note { grid-column: 1 / -1; max-width: none; text-align: center; color: var(--sage); padding: 16px; font-size: .95rem; }

.board { background: linear-gradient(0deg, #00000038, #00000038), repeating-linear-gradient(0deg, #37221390 0 74px, #2c1a0e90 74px 77px), var(--leather-dark); }
.posters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding-block: 16px; }
.wanted { position: relative; display: grid; justify-items: center; gap: 2px; padding: 22px 12px 18px; background: var(--paper); color: var(--ink); box-shadow: 0 16px 26px #0008; transition: transform .25s; min-width: 0; }
.wanted:nth-child(1) { transform: rotate(-2deg); }
.wanted:nth-child(2) { transform: rotate(1.4deg) translateY(10px); }
.wanted:nth-child(3) { transform: rotate(-1deg); }
.wanted:nth-child(4) { transform: rotate(2.2deg) translateY(6px); }
.wanted:hover { transform: rotate(0) scale(1.05); z-index: 2; }
.wanted::before { content: ""; position: absolute; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--brass), #6b4a12); box-shadow: 0 2px 3px #0008; }
.wanted .w { font: 400 clamp(1.3rem, 2.6vw, 2.1rem) var(--poster); text-transform: uppercase; }
.wanted img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: sepia(.25) contrast(1.05); }
.wanted h3 { font: 400 clamp(.95rem, 1.7vw, 1.3rem) var(--poster); text-transform: none; text-align: center; }
.bounty { font: 500 .88rem var(--mono); }
.mult { font: 900 2.4rem var(--display); color: #8e2a17; }

.flow svg { display: block; width: 100%; min-width: 640px; height: auto; }
.stream path { fill: none; stroke: var(--signal); stroke-opacity: .5; animation: run 1.8s linear infinite; stroke-dasharray: 26 8; }
.stream .st2 { stroke: var(--brass); }
.stream .st3 { stroke: var(--ember); }
@keyframes run { to { stroke-dashoffset: -68; } }
.node { fill: var(--night); stroke: var(--moss); }
.flow text { fill: var(--parch); font-family: var(--body); }
.flow .big { font: 700 19px var(--body); }
.flow .label { font: 700 20px var(--body); }
.flow .small { fill: var(--sage); font: 400 14px var(--mono); }
html[lang="en"] tspan[data-l="id"], html[lang="id"] tspan[data-l="en"] { display: none; }

.in { animation: rise .6s both; }
@keyframes rise { from { opacity: 0; translate: 0 26px; } }

.scroll { overflow-x: auto; min-width: 0; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font: 500 .78rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sage); padding: 8px 12px; border-bottom: 1px solid var(--brass); white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid var(--moss); font-family: var(--mono); font-size: .95rem; white-space: nowrap; }
tr.now td { color: var(--brass); }

.prompt { margin: 0; padding: 18px; background: var(--night); border: 1px solid var(--moss); font: 400 .95rem/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; }
.foot { padding-block: 26px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); background: var(--night); border-top: 1px solid var(--moss); display: grid; gap: 10px; }
.links { display: flex; gap: 16px; flex-wrap: wrap; }

.doc { max-width: 780px; margin: 0 auto; padding-block: 112px 72px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 18px; }
.doc h2 { margin-top: 26px; }
.doc ul, .doc ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.doc code { font: 400 .88em var(--mono); color: var(--brass); overflow-wrap: anywhere; }
details { border-bottom: 1px solid var(--moss); padding-block: 12px; }
summary { cursor: pointer; font-weight: 700; }
details p { margin-top: 8px; color: var(--sage); }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .wrap.two, .duel { grid-template-columns: minmax(0, 1fr); }
  .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side { grid-template-columns: 130px minmax(0, 1fr); }
  .chapter { bottom: 40px; }
  .console { display: none; }
  .shade { background: linear-gradient(0deg, #071512e6 0%, #07151280 44%, #07151233 100%); }
  .chapter { top: auto; bottom: 34px; transform: translateY(26px); }
  .chapter.on { transform: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scene { height: 100vh; } .stream path, .hole.now, .in { animation: none; } }