/* Hallmark · shape: app screen · genre: playful · theme: custom (kampung sticker, kept from v1) · posture: full-palette
 * nav: warung awning bar with a five-tab bottom bar and a raised Main sticker · footer: stacked brand, link list, one disclaimer line
 * signature: the Gak? stamp in the landing hero and the raised Main sticker button · states: hover, focus, active, disabled, loading, error
 * paper: #FFF4DE cream over #FFFBF2 · accent: chili #C7311F, leaf #237349, sky #2C6AA6, turmeric #F6B800 · display: Plus Jakarta Sans 800 · body: Plus Jakarta Sans 500
 * axes: cream paper / one humanist sans / chili stamps · contrast: pass · v2.0.0
 * pre-emit critique: P4 H4 E4 S4 R3 V3 · weakest: R, the sticker shadows and tilts are many, so only two tilt on hover and the idle loops were cut
 */
/* Hallmark · waive 12 · spring posture: --spring is used for the press squish and the sticker tilt only, on transform and scale · the sticker squish is this kampung game's playful identity and every press settles in one small overshoot */
/* Hallmark · waive 38iii · the Gak? stamp is the single coloured word and appears once in the landing hero · the stamp is the Liga Mabar signature, Lolos Gak? is the product name, and every other head is one colour */
/* Hallmark · answered F7 · cards share one recipe by design, varied by fill and shadow per role: paper, soft tint, turmeric or chili · the sticker card is the material of this kampung identity */
/* Hallmark · answered F15 · one primary button recipe per page, nested radii step 8, 12, 16 and 20 · the hero stamp and the pill chips are the only non-card radii */

/* =====================================================================
   Tokens. Everything below reads these; no literal colour or font-family
   outside this block. Phase-2 stylesheets (games.css, replay.css) too.
   ===================================================================== */
:root {
  /* colour: field */
  --cream: #FFF4DE;
  --cream-d: #FFE9BD;
  --paper: #FFFBF2;
  --ink: #1E1B16;
  --ink-2: #2D2922;
  --ink-3: #4A4438;
  --muted: #6B6253;
  /* colour: signals */
  --chili: #E2412E;
  --chili-d: #C7311F;
  --leaf: #2F8F5B;
  --leaf-d: #237349;
  --turmeric: #F6B800;
  --sky: #3B82C4;
  --sky-d: #2C6AA6;
  --live: #FF2D1F;
  /* colour: tints (soft fills behind ink text) */
  --chili-soft: #FBD9D2;
  --chili-tint: #FDF0EC;
  --leaf-soft: #CFEBD9;
  --leaf-tint: #E7F4EC;
  --sky-soft: #D7E8F7;
  --turmeric-soft: #FFF0B8;
  /* colour: text on a coloured fill is always the tinted paper, never pure white */
  --on-color: var(--paper);
  --disabled-bg: #E9DFC9;
  --disabled-ink: #625948;
  --focus: var(--sky-d);
  --focus-on-dark: var(--turmeric);
  /* colour: overlays and patterns (alpha is for overlays only) */
  --dot-ink: rgba(30, 27, 22, .09);
  --dot-ink-2: rgba(30, 27, 22, .12);
  --ink-a-20: rgba(30, 27, 22, .2);
  --ink-a-35: rgba(30, 27, 22, .35);
  --ink-a-55: rgba(30, 27, 22, .55);
  --scrim: rgba(30, 27, 22, .86);
  --paper-a-40: rgba(255, 251, 242, .4);
  --paper-a-70: rgba(255, 251, 242, .7);
  --paper-a-85: rgba(255, 251, 242, .85);
  --paper-a-95: rgba(255, 251, 242, .95);
  --wash-turmeric: rgba(246, 184, 0, .18);
  --wash-chili: rgba(226, 65, 46, .12);
  --ring-chili: rgba(226, 65, 46, .6);
  /* colour: marbles and game scenes (games.css, replay.css) */
  --marble-sky: #7FB4E6;
  --marble-gold-hi: #FFE27A;
  --marble-gold-lo: #CF9A00;
  --scene-sky: #BFE3F6;
  --scene-sky-2: #9FD6F2;
  --scene-sky-3: #CDEBFA;
  --scene-cloud: #D9EEF8;
  --scene-grass: #A5D88C;
  --scene-bush: #7BC47F;
  --scene-yard: #EBD7AB;
  --scene-peci: #2C2620;
  --scene-tt-left: #D7E8F7;
  --scene-tt-right: #FBD9D2;
  --kid-sky: #7DB6E4;
  --kid-chili: #F0765F;
  --kid-leaf: #6CC48F;
  --kid-gold: #FFD24D;
  --kid-paper: #FFFBF2;
  --ok-bright: #8DD6A8;

  /* space: a 4px scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-9: 36px;
  --s-10: 40px;
  --s-11: 44px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-20: 80px;
  --gutter: var(--s-4);

  /* shape */
  --bw: 3px;
  --bw-s: 2px;
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-4: 20px;
  --r-pill: 999px;
  --r: var(--r-3);
  --sh: 4px 4px 0 var(--ink);
  --sh-s: 2px 2px 0 var(--ink);
  --sh-l: 6px 6px 0 var(--ink);
  --sh-hover: 5px 5px 0 var(--ink);
  --sh-press: 1px 1px 0 var(--ink);

  /* layers: one scale, nothing arbitrary */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 20;
  --z-nav: 30;
  --z-overlay: 40;
  --z-toast: 50;
  --z-skip: 60;

  /* layout: header = awning 15px + bar 56px + rule 3px; a second sticky element sits under it at this offset */
  --top-h: 74px;
  --bar-h: 64px;
  --wrap: 980px;

  /* motion */
  --dur-micro: 120ms;
  --dur-short: 200ms;
  --dur-long: 420ms;
  --dur-spring: 320ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* type: one family, three weights (500 body, 700 labels and controls, 800 display) */
  --font: "Plus Jakarta Sans", ui-rounded, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-d: var(--font);
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --w-body: 500;
  --w-label: 700;
  --w-display: 800;
  --t-xs: .75rem;
  --t-sm: .875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5rem;
  --t-2xl: 2rem;
}

/* ---------- fonts: Plus Jakarta Sans, self-hosted (SIL OFL 1.1, see /static/fonts/OFL.txt). One variable file per subset covers 500 to 800. ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/static/fonts/PlusJakartaSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/static/fonts/PlusJakartaSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--top-h) + var(--s-4));
  overflow-x: clip;
  scrollbar-color: var(--ink-3) var(--cream);
  accent-color: var(--chili-d);
}
body {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--w-body);
  font-size: var(--t-base);
  line-height: 1.55;
  font-synthesis: none;
  color: var(--ink);
  background-color: var(--cream);
  background-image: radial-gradient(var(--dot-ink) 1.4px, transparent 1.6px);
  background-size: 20px 20px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
::selection { background: var(--turmeric); color: var(--ink); }
img { max-width: 100%; }
a { color: var(--sky-d); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--chili-d); }
h1, h2, h3, h4 {
  font-family: var(--font-d);
  font-weight: var(--w-display);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  min-width: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}
p, li, dd, figcaption { text-wrap: pretty; }
p { margin: 0 0 .9em; }
b, strong { font-weight: var(--w-label); }
code { font-family: var(--font-mono); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input, select, textarea { font-size: 16px; caret-color: var(--chili-d); }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.center { text-align: center; }
.inline { display: inline; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 0; background: var(--turmeric); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r-1); padding: var(--s-2) var(--s-4); z-index: var(--z-skip); }
.skip:focus { left: var(--s-2); top: var(--s-2); }
[hidden] { display: none !important; }

/* focus: one ring for every interactive element, instant, never animated */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pulse :focus-visible, .cta-card :focus-visible, .km-me :focus-visible, .tabbar :focus-visible { outline-color: var(--focus-on-dark); }
.tabbar :focus-visible { outline-offset: -4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: -3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: 640px; }
.main { flex: 1; padding-bottom: var(--s-7); }
.block { padding-top: var(--s-6); padding-bottom: var(--s-2); }

/* ---------- icons (sprite inlined by base.html; see icons.svg for the names and the colour hooks) ---------- */
.ic { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; overflow: visible; }
.ic-sm { width: 1em; height: 1em; vertical-align: -.125em; --ic-sw: 2.75; }
.ic-lg { width: 1.75em; height: 1.75em; vertical-align: -.5em; }
.ic-xl { width: 2.5em; height: 2.5em; vertical-align: middle; }
.ic-2xl { width: 3.5em; height: 3.5em; vertical-align: middle; }
.ic-logo { width: 100%; height: 100%; vertical-align: top; }
.on-color { --ic-stroke: var(--ink); }

/* ---------- header: warung awning ---------- */
.top { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--cream); border-bottom: var(--bw) solid var(--ink); }
.awning { height: 15px; background: repeating-linear-gradient(90deg, var(--chili) 0 22px, var(--paper) 22px 44px); border-bottom: var(--bw) solid var(--ink); }
.awning i { display: none; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); height: var(--s-14); }
.logo { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; color: var(--ink); }
.logo-mark { display: block; width: var(--s-10); height: var(--s-10); transform: rotate(-6deg); }
.logo-text { font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-md); line-height: .95; text-transform: uppercase; letter-spacing: 0; }
.logo-text b { display: block; color: var(--chili-d); font-weight: var(--w-display); }
.nav-links { display: flex; align-items: center; gap: var(--s-4); font-weight: var(--w-label); }
.nav-links a:not(.btn) { color: var(--ink); text-decoration: none; padding: var(--s-2) var(--s-1); }
.nav-links a:not(.btn):hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--chili-d); }

.announce { background: var(--turmeric); border-bottom: var(--bw) solid var(--ink); font-size: var(--t-sm); padding: var(--s-2) 0; }
.announce .wrap { display: flex; align-items: flex-start; gap: var(--s-2); }

/* ---------- buttons, stickers, tags ---------- */
.btn {
  --bg: var(--paper); --fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font: inherit; font-weight: var(--w-display); font-size: var(--t-base); line-height: 1.1;
  padding: var(--s-3) var(--s-5); min-height: 48px;
  color: var(--fg); background: var(--bg);
  border: var(--bw) solid var(--ink); border-radius: var(--r-2);
  box-shadow: var(--sh); cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translate(3px, 3px); box-shadow: var(--sh-press); }
.btn:disabled, .btn[aria-disabled="true"] {
  --bg: var(--disabled-bg); --fg: var(--disabled-ink);
  border-color: var(--disabled-ink); box-shadow: none; cursor: not-allowed; transform: none;
}
.btn[aria-busy="true"] { cursor: progress; }
@media (hover: hover) {
  .btn:hover:not(:disabled):not([aria-disabled="true"]) { color: var(--fg); transform: translate(-1px, -1px); box-shadow: var(--sh-hover); }
  .btn:active:hover:not(:disabled):not([aria-disabled="true"]) { transform: translate(3px, 3px); box-shadow: var(--sh-press); }
}
.btn-chili { --bg: var(--chili-d); --fg: var(--on-color); }
.btn-leaf { --bg: var(--leaf-d); --fg: var(--on-color); }
.btn-sky { --bg: var(--sky-d); --fg: var(--on-color); }
.btn-turmeric { --bg: var(--turmeric); --fg: var(--ink); }
.btn-paper { --bg: var(--paper); --fg: var(--ink); }
.btn-ghost { --bg: transparent; --fg: var(--ink); background: transparent; box-shadow: none; }
@media (hover: hover) {
  .btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) { box-shadow: none; transform: none; background: var(--cream-d); }
}
.btn-ghost:active { transform: none; box-shadow: none; background: var(--cream-d); }
.btn-sm { min-height: var(--s-10); padding: var(--s-2) var(--s-3); font-size: var(--t-sm); box-shadow: var(--sh-s); border-radius: var(--r-2); }
.btn-lg { min-height: 52px; padding: var(--s-3) var(--s-6); font-size: var(--t-md); }
.btn-block { display: flex; width: 100%; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

/* a sticker is a small tilted label in the body face: sentence case, no tracking */
.sticker {
  display: inline-flex; align-items: center; gap: var(--s-1); font-weight: var(--w-display); font-size: var(--t-sm); line-height: 1.2;
  padding: var(--s-1) var(--s-3); border: var(--bw) solid var(--ink); border-radius: var(--r-1); box-shadow: var(--sh-s);
  transform: rotate(-2.5deg); vertical-align: middle; margin-right: var(--s-2); background: var(--paper); color: var(--ink);
}
.sticker-leaf { background: var(--leaf-d); color: var(--on-color); }
.sticker-turmeric { background: var(--turmeric); }
.sticker-chili { background: var(--chili-d); color: var(--on-color); }
.sticker-sky { background: var(--sky-d); color: var(--on-color); }

.tag { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: var(--w-label); font-size: var(--t-xs); line-height: 1.2; padding: var(--s-1) var(--s-2); border: var(--bw-s) solid var(--ink); border-radius: var(--r-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tag-ok { background: var(--leaf-d); color: var(--on-color); }
.tag-out { background: var(--chili-d); color: var(--on-color); }
.tag-wait { background: var(--cream-d); }

.kw { display: inline-block; background: var(--turmeric); color: var(--ink); border: var(--bw-s) solid var(--ink); border-radius: var(--r-1); padding: 0 var(--s-2); font-weight: var(--w-display); box-shadow: var(--sh-s); }

/* ---------- cards ---------- */
.card {
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r);
  box-shadow: var(--sh); padding: var(--s-5); margin-bottom: var(--s-5);
}
.card-title { font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-xl); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .4em; }
.card-turmeric { background: var(--turmeric); }
.card-leaf { background: var(--leaf-soft); }
.card-sky { background: var(--sky-soft); }
.card-chili-soft { background: var(--chili-soft); }
.card-paper { background: var(--paper); }
.eyebrow-s { font-size: var(--t-sm); font-weight: var(--w-label); color: var(--muted); margin-bottom: .4em; }
.page-title { font-size: clamp(1.8rem, 8vw, 2.6rem); margin-bottom: .5em; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.section-title { font-size: clamp(1.4rem, 5.5vw, 2rem); margin-bottom: var(--s-5); }
.section-title .sticker { display: inline-flex; margin-bottom: var(--s-2); }
.lead-s { font-size: var(--t-md); }

.flashes { padding-top: var(--s-4); }
.flash { display: flex; align-items: flex-start; gap: var(--s-2); border: var(--bw) solid var(--ink); border-radius: var(--r); padding: var(--s-3) var(--s-4); font-weight: var(--w-label); box-shadow: var(--sh-s); margin-bottom: var(--s-3); background: var(--paper); }
.flash-ok { background: var(--leaf-soft); }
.flash-err { background: var(--chili-soft); }
.flash-info { background: var(--sky-soft); }
.narrow .flash { margin-bottom: var(--s-5); }

/* ---------- hero (landing): the headline, one sentence, one filled action ---------- */
.hero {
  position: relative; overflow: clip; border-bottom: var(--bw) solid var(--ink);
  background-color: var(--cream-d); background-image: radial-gradient(var(--dot-ink-2) 1.5px, transparent 1.7px); background-size: 16px 16px;
}
.hero-in { position: relative; padding-top: var(--s-8); padding-bottom: var(--s-10); }
.hero-title { font-size: clamp(4rem, 23vw, 8.5rem); line-height: .92; margin: 0 0 var(--s-5); display: flex; flex-direction: column; align-items: flex-start; letter-spacing: -.035em; }
.ht-1 { text-shadow: 4px 4px 0 var(--turmeric); }
.ht-2 {
  position: relative; display: inline-block; margin: var(--s-2) 0 0 .1em; padding: .02em .14em .08em;
  background: var(--chili-d); color: var(--on-color); border: 4px solid var(--ink); border-radius: var(--r-4);
  box-shadow: var(--sh-l); transform: rotate(-3deg);
}
.lead { font-size: var(--t-md); max-width: 34ch; }
.hero .lead { font-size: var(--t-lg); line-height: 1.45; margin-bottom: var(--s-6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }
.deco { position: absolute; width: var(--s-14); height: var(--s-14); filter: drop-shadow(3px 3px 0 var(--ink)); pointer-events: none; user-select: none; }
.deco .ic { width: 100%; height: 100%; vertical-align: top; }
.deco-1 { right: var(--s-4); top: var(--s-6); transform: rotate(10deg); width: var(--s-16); height: var(--s-16); }
.deco-2 { right: var(--s-3); top: 128px; transform: rotate(-14deg); }
.deco-3 { right: var(--s-6); bottom: var(--s-12); transform: rotate(8deg); width: var(--s-12); height: var(--s-12); }
.marble { position: absolute; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--ink); pointer-events: none; box-shadow: 3px 3px 0 var(--ink); }
.marble::after { content: ""; position: absolute; left: 20%; top: 16%; width: 26%; height: 26%; border-radius: 50%; background: var(--paper-a-85); }
.marble-1 { right: 120px; bottom: var(--s-9); background: radial-gradient(circle at 35% 30%, var(--marble-sky), var(--sky) 60%, var(--sky-d)); }
.marble-2 { right: 168px; bottom: var(--s-4); width: 26px; height: 26px; background: radial-gradient(circle at 35% 30%, var(--marble-gold-hi), var(--turmeric) 60%, var(--marble-gold-lo)); }

.deco-3, .marble { display: none; }

/* ---------- scoreboard, countdown ---------- */
.scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-5); }
.score { background: var(--turmeric); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: var(--s-3) var(--s-2); text-align: center; transform: rotate(var(--rot, 0deg)); }
.score:nth-child(odd) { --rot: -1deg; }
.score:nth-child(even) { --rot: 1deg; }
.score b { display: block; font-family: var(--font-d); font-weight: var(--w-display); font-size: clamp(1.7rem, 8vw, 2.4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.score span { font-size: var(--t-sm); font-weight: var(--w-label); }
.score-leaf { background: var(--leaf-soft); }
.score-chili { background: var(--chili-soft); }

.timer-card { text-align: center; }
.cd { display: flex; justify-content: center; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); }
.cd-unit { background: var(--ink); color: var(--turmeric); border-radius: var(--r-2); padding: var(--s-2) var(--s-2); min-width: 62px; box-shadow: var(--sh-s); }
.cd-unit b { display: block; font-family: var(--font-mono); font-weight: var(--w-display); font-size: var(--t-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.cd-unit small { display: block; font-size: var(--t-xs); font-weight: var(--w-label); color: var(--cream); margin-top: var(--s-1); }
.cd-done { font-weight: var(--w-display); }
.cd-sm .cd-unit { min-width: 52px; padding: var(--s-1); }
.cd-sm .cd-unit b { font-size: var(--t-xl); }
.lock-box { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); background: var(--cream-d); border: var(--bw-s) dashed var(--ink); border-radius: var(--r); padding: var(--s-3); margin: var(--s-3) 0 var(--s-4); font-weight: var(--w-label); }

/* ---------- steps, timeline, stages ---------- */
.steps { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: var(--s-4); counter-reset: s; }
.step { display: flex; gap: var(--s-4); align-items: flex-start; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: var(--s-4); }
.step:nth-child(2) { background: var(--turmeric-soft); }
.step-no { flex: none; display: grid; place-items: center; width: var(--s-12); height: var(--s-12); font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-xl); background: var(--chili-d); color: var(--on-color); border: var(--bw) solid var(--ink); border-radius: var(--r-2); box-shadow: var(--sh-s); transform: rotate(-5deg); }
.step h3 { font-size: var(--t-md); margin-bottom: .25em; }
.step p { margin-bottom: .6em; }
.plain-steps { padding-left: 1.3em; margin: 0 0 .8em; }
.plain-steps li { margin-bottom: .35em; }

.timeline { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.tl { position: relative; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); padding: var(--s-3) var(--s-4) var(--s-2) 88px; box-shadow: var(--sh-s); min-height: 80px; }
.tl b { font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-md); }
.tl p { font-size: var(--t-sm); margin: var(--s-1) 0; }
.tl-t { position: absolute; left: var(--s-3); top: var(--s-3); width: 64px; text-align: center; font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-base); background: var(--sky-d); color: var(--on-color); border: var(--bw-s) solid var(--ink); border-radius: var(--r-1); padding: var(--s-2) 0; font-variant-numeric: tabular-nums; }

.stages { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); padding: 0; margin: 0 0 var(--s-4); }
.stage { position: relative; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); font-weight: var(--w-display); font-size: var(--t-sm); box-shadow: var(--sh-s); }
.stage-final { background: var(--turmeric); }

/* ---------- game cards ---------- */
.games { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6) var(--s-5); }
.game { --c: var(--turmeric); background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: var(--s-4); transform: rotate(var(--tilt, 0deg)); position: relative; padding-top: var(--s-14); }
.game-icon { position: absolute; left: var(--s-4); top: -24px; display: grid; place-items: center; width: var(--s-16); height: var(--s-16); font-size: 2.1rem; background: var(--c); border: var(--bw) solid var(--ink); border-radius: var(--r-3); box-shadow: var(--sh-s); transform: rotate(-5deg); }
.game-icon .ic { width: 40px; height: 40px; vertical-align: top; --ic-a: var(--paper); --ic-b: var(--paper); --ic-c: var(--ink); }
.game-sky { --c: var(--sky); }
.game-chili { --c: var(--chili); }
.game-leaf { --c: var(--leaf); }
.game-turmeric { --c: var(--turmeric); }
.game h3 { font-size: var(--t-xl); margin-bottom: .2em; }
.game-tag { margin-bottom: .6em; }
.game details { border-top: var(--bw-s) dashed var(--ink); padding-top: var(--s-2); }
.game summary { cursor: pointer; font-weight: var(--w-display); }
.game details p { margin: .6em 0 0; font-size: var(--t-sm); }
.game-pill { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-d); font-weight: var(--w-display); padding: var(--s-2) var(--s-4); background: var(--c, var(--turmeric)); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r-pill); box-shadow: var(--sh-s); }
.game-pill.game-sky, .game-pill.game-chili, .game-pill.game-leaf { color: var(--on-color); }
.game-pill.game-sky { background: var(--sky-d); }
.game-pill.game-chili { background: var(--chili-d); }
.game-pill.game-leaf { background: var(--leaf-d); }
.game-pill .ic { --ic-stroke: var(--ink); --ic-a: var(--paper); --ic-b: var(--paper); --ic-c: var(--ink); width: 1.5em; height: 1.5em; vertical-align: middle; }
.night-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }

.cta-card { background: var(--chili-d); color: var(--on-color); border: var(--bw) solid var(--ink); border-radius: var(--r-4); box-shadow: var(--sh-l); padding: var(--s-6) var(--s-5); text-align: center; }
.cta-card h2 { font-size: var(--t-2xl); }
.cta-card .btn { --bg: var(--turmeric); --fg: var(--ink); }
.cta-card .kw { color: var(--ink); }

/* ---------- KTP card ---------- */
.ktp { background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r-4); box-shadow: var(--sh-l); overflow: hidden; margin-bottom: var(--s-2); position: relative; }
.ktp-head { background: var(--turmeric); border-bottom: var(--bw) solid var(--ink); padding: var(--s-3) var(--s-4) var(--s-2); display: flex; flex-direction: column; }
.ktp-title { font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-md); }
.ktp-sub { font-size: var(--t-xs); font-weight: var(--w-label); }
.ktp-body { display: flex; gap: var(--s-4); padding: var(--s-4); }
.ktp-photo { position: relative; flex: none; width: 96px; height: 120px; background: var(--sky); border: var(--bw) solid var(--ink); border-radius: var(--r-2); box-shadow: var(--sh-s); overflow: hidden; display: grid; place-items: center; }
.ktp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: var(--z-base); }
.ktp-initial { font-family: var(--font-d); font-weight: var(--w-display); font-size: 3.4rem; color: var(--paper); }
.ktp-fields { margin: 0; display: grid; gap: var(--s-2); min-width: 0; flex: 1; }
.ktp-fields > div { min-width: 0; }
.ktp-fields dt { font-size: var(--t-xs); font-weight: var(--w-label); color: var(--muted); }
.ktp-fields dd { margin: 0; font-weight: var(--w-display); font-size: var(--t-base); line-height: 1.2; overflow-wrap: anywhere; }
.status { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-xs); padding: var(--s-1) var(--s-2); border: var(--bw-s) solid var(--ink); border-radius: var(--r-1); background: var(--cream-d); font-variant-numeric: tabular-nums; }
.status-alive { background: var(--leaf-d); color: var(--on-color); }
.status-out { background: var(--chili-d); color: var(--on-color); }
.status-reg { background: var(--sky-d); color: var(--on-color); }
.status-champion { background: var(--turmeric); }
.ktp-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4); align-items: center; }
.badge { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-sm); font-weight: var(--w-label); background: var(--cream-d); border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); padding: var(--s-1) var(--s-3); box-shadow: var(--sh-s); }
.ktp-foot { display: flex; justify-content: space-between; gap: var(--s-2); border-top: var(--bw-s) dashed var(--ink); padding: var(--s-2) var(--s-4); font-size: var(--t-xs); font-weight: var(--w-label); font-variant-numeric: tabular-nums; color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 8px, var(--wash-turmeric) 8px 16px); }

/* ---------- tonight / picker ---------- */
.tonight .rules { background: var(--cream-d); border: var(--bw-s) dashed var(--ink); border-radius: var(--r-2); padding: var(--s-3); }
.picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin: var(--s-2) 0 var(--s-3); }
.picker-8, .picker-5, .picker-4, .picker-6, .picker-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.picker-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: 84px; padding: var(--s-3) var(--s-2); font: inherit; font-weight: var(--w-display); text-align: center; color: var(--ink);
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh-s); cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) {
  .opt:hover:not(:disabled) { background: var(--turmeric-soft); transform: translate(-1px, -1px); box-shadow: var(--sh); }
}
.opt:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.opt:disabled { background: var(--disabled-bg); color: var(--disabled-ink); border-color: var(--disabled-ink); box-shadow: none; cursor: not-allowed; }
.opt-emoji { font-size: 1.7rem; line-height: 1; }
.opt .ic { width: 1.75em; height: 1.75em; }
.opt-label { line-height: 1.15; }
.opt-check { font-size: var(--t-xs); font-weight: var(--w-label); }
.opt.is-picked { background: var(--leaf-d); color: var(--on-color); box-shadow: var(--sh); transform: translate(-1px, -1px); }
.opt.is-picked::after { content: ""; position: absolute; top: -12px; right: -8px; width: 28px; height: 28px; background: var(--turmeric); border: var(--bw) solid var(--ink); border-radius: 50%; z-index: var(--z-base); }
.opt.is-picked::before { content: ""; position: absolute; top: -6px; right: 4px; width: 7px; height: 13px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); z-index: var(--z-raised); }
.picker-5 .opt:last-child { grid-column: 1 / -1; }

.result-card { background: var(--paper); }
.result-big { font-family: var(--font-d); font-weight: var(--w-display); font-size: clamp(2.2rem, 12vw, 3.4rem); line-height: 1; display: inline-block; padding: var(--s-2) var(--s-4); margin: var(--s-1) 0 var(--s-3); border: 4px solid var(--ink); border-radius: var(--r-2); box-shadow: var(--sh); transform: rotate(-3deg); color: var(--on-color); }
.result-ok .result-big { background: var(--leaf-d); }
.result-out .result-big { background: var(--chili-d); }
.kampung-line { background: var(--paper); border: var(--bw-s) dashed var(--ink); border-radius: var(--r); padding: var(--s-3); }

/* ---------- replay ---------- */
.stage-box { background: var(--paper); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; }
.stage-bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--turmeric); color: var(--ink); border-bottom: var(--bw) solid var(--ink); font-size: var(--t-sm); }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--chili); animation: blink 1.2s ease-in-out 5; }
.stage-prog { flex: 1; height: 8px; background: var(--ink-3); border-radius: var(--r-pill); overflow: hidden; }
.stage-prog i { display: block; height: 100%; width: 0; background: var(--turmeric); }
.feed { list-style: none; margin: 0; padding: var(--s-3) var(--s-4); max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-3); scroll-behavior: smooth; }
.ev { color: var(--cream); background: var(--ink-2); border: var(--bw-s) solid var(--ink-3); border-radius: var(--r-2); padding: var(--s-2) var(--s-3); }
.ev-text { display: block; font-weight: var(--w-label); }
.ev-who { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.chip { font-size: var(--t-xs); font-weight: var(--w-label); background: var(--cream); color: var(--ink); text-decoration: none; padding: 0 var(--s-2); border-radius: var(--r-pill); border: var(--bw-s) solid var(--ink); }
.chip:hover { background: var(--turmeric); color: var(--ink); }
.chip-more { background: var(--cream-d); }
.ev-final { background: var(--turmeric); color: var(--ink); border-color: var(--cream); }
.ev-final .ev-text { font-family: var(--font-d); font-weight: var(--w-display); }
.js .feed .ev { display: none; }
.js .feed .ev.on { display: block; animation: pop var(--dur-short) var(--ease-out); }
.feed-ctl { display: flex; gap: var(--s-3); padding: 0 var(--s-4) var(--s-3); }
.feed-ctl:empty { display: none; }
.js .after-replay { display: none; }
.js .after-replay.shown { display: block; animation: rise var(--dur-long) var(--ease-out); }

.bars, .leader, .champs, .history, .lobbies { list-style: none; margin: 0; padding: 0; }
.bar-row { display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); font-size: var(--t-sm); }
.bar-label { font-weight: var(--w-label); line-height: 1.2; }
.bar-track { position: relative; height: 22px; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r-pill); overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--turmeric); transform-origin: 0 50%; }
.shown .bar-fill, .no-anim .bar-fill { animation: grow .8s var(--ease-out) both; }
.bar-num { min-width: 64px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar-num small { color: var(--muted); }
.bar-fill:empty { min-width: 0; }

.table-wrap { overflow-x: auto; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); }
.rank { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rank th { text-align: left; font-size: var(--t-sm); font-weight: var(--w-label); padding: var(--s-2) var(--s-3); background: var(--turmeric); border-bottom: var(--bw) solid var(--ink); white-space: nowrap; }
.rank td { padding: var(--s-2) var(--s-3); border-bottom: var(--bw-s) solid var(--cream-d); vertical-align: middle; }
.rank .r-no { width: 40px; font-family: var(--font-d); font-weight: var(--w-display); }
.rank .r-who a { font-weight: var(--w-display); color: var(--ink); overflow-wrap: anywhere; }
.rank .r-who small { display: block; font-weight: var(--w-label); }
.rank .r-tag { text-align: right; width: 1%; }
.row-out { background: var(--chili-tint); }
.cutline td { padding: 0; border: 0; background: var(--cream); }
.cutline span { display: block; text-align: center; font-size: var(--t-sm); font-weight: var(--w-label); padding: var(--s-1) 0; border-top: var(--bw) dashed var(--ink); border-bottom: var(--bw) dashed var(--ink); background: repeating-linear-gradient(135deg, transparent 0 8px, var(--wash-chili) 8px 16px); }
.auto { white-space: nowrap; }

.lobbies li { margin-bottom: var(--s-3); }
.lobby-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh-s); padding: var(--s-3) var(--s-4); text-decoration: none; color: var(--ink); font-weight: var(--w-label); transition: transform var(--dur-micro) var(--ease-out); }
@media (hover: hover) {
  .lobby-row:hover { background: var(--turmeric-soft); color: var(--ink); transform: translate(-1px, -1px); box-shadow: var(--sh); }
}
.lobby-nums { font-size: var(--t-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lobby-name { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; overflow-wrap: anywhere; }
.lobby-go { display: inline-flex; font-weight: var(--w-display); }

.hist { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); padding: var(--s-3); margin-bottom: var(--s-3); box-shadow: var(--sh-s); }
.hist-ok { background: var(--leaf-tint); }
.hist-out { background: var(--chili-tint); }
.hist-main { display: flex; flex-direction: column; min-width: 0; }
.hist-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); flex: none; }

.leader-row { display: grid; grid-template-columns: var(--s-8) minmax(90px, 1.2fr) minmax(0, 1.6fr) auto; gap: var(--s-2); align-items: center; margin-bottom: var(--s-3); }
.leader-no { display: grid; place-items: center; width: var(--s-8); height: var(--s-8); font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-base); font-variant-numeric: tabular-nums; border-radius: 50%; border: var(--bw-s) solid transparent; }
.leader-no-1 { background: var(--turmeric); border-color: var(--ink); }
.leader-no-2 { background: var(--cream-d); border-color: var(--ink); }
.leader-no-3 { background: var(--chili-soft); border-color: var(--ink); }
.leader-name { font-weight: var(--w-display); line-height: 1.15; }
.leader-num { min-width: var(--s-9); text-align: right; font-variant-numeric: tabular-nums; }
.champ { display: flex; gap: var(--s-3); align-items: center; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh-s); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); }
.champ-ico { flex: none; display: inline-flex; }
.champ-who { display: flex; flex-direction: column; min-width: 0; }
.champs a { color: var(--ink); }

/* ---------- login ---------- */
.code-box { margin-top: var(--s-4); text-align: center; }
.code-big { font-family: var(--font-mono); font-weight: var(--w-display); font-size: clamp(1.8rem, 9.5vw, 2.8rem); letter-spacing: .02em; background: var(--ink); color: var(--turmeric); border-radius: var(--r); padding: var(--s-4) var(--s-3); margin: var(--s-2) 0 var(--s-3); box-shadow: var(--sh); user-select: all; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.code-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-bottom: var(--s-3); }

/* ---------- prose / legal ---------- */
.prose { line-height: 1.65; }
.prose p, .prose li { max-width: 65ch; }
.prose h2 { font-size: var(--t-xl); margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }

/* ---------- error ---------- */
.err-code { font-family: var(--font-d); font-weight: var(--w-display); font-size: clamp(5rem, 28vw, 9rem); line-height: .9; color: var(--chili-d); text-shadow: 5px 5px 0 var(--ink); font-variant-numeric: tabular-nums; }
.err-emoji { display: flex; justify-content: center; margin: var(--s-2) 0 var(--s-3); }
.err-emoji .ic { width: var(--s-12); height: var(--s-12); }

/* ---------- footer ---------- */
.foot { border-top: var(--bw) solid var(--ink); background: var(--paper); padding: var(--s-6) 0 var(--s-8); text-align: center; }
.foot-brand { display: flex; align-items: center; justify-content: center; gap: var(--s-2); font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-md); margin-bottom: var(--s-2); }
.foot-brand .ic { width: var(--s-8); height: var(--s-8); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-5); list-style: none; padding: 0; margin: 0 0 var(--s-3); }
.foot-links a { display: inline-block; padding: var(--s-2) 0; color: var(--ink); font-weight: var(--w-label); }
.foot-small { font-size: var(--t-sm); color: var(--muted); max-width: 40ch; margin: 0 auto; }

/* ---------- keyframes shared by the page rules (transform and opacity only) ---------- */
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- larger screens ---------- */
@media (min-width: 640px) {
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-5); }
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tl { padding: 72px var(--s-4) var(--s-3); }
  .tl-t { left: var(--s-4); top: var(--s-3); }
  .picker-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .picker-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .picker-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .picker-5 .opt:last-child { grid-column: auto; }
  .deco-1 { right: 8%; top: var(--s-10); width: 88px; height: 88px; }
  .deco-2 { right: 22%; top: 140px; width: 68px; height: 68px; }
  .deco-3 { display: block; right: 6%; bottom: var(--s-14); width: 64px; height: 64px; }
  .marble { display: block; }
  .marble-1 { right: 26%; bottom: var(--s-10); }
  .marble-2 { right: 31%; bottom: var(--s-5); }
  .ktp-photo { width: 120px; height: 150px; }
  .ktp-body { gap: var(--s-5); }
  .hero .lead { font-size: var(--t-xl); max-width: 30ch; }
}
@media (max-width: 380px) {
  .wrap { padding-inline: var(--s-3); }
  .logo-text { font-size: var(--t-base); }
  .nav-links { gap: var(--s-2); }
  .cd { gap: var(--s-1); }
  .cd-unit { min-width: 54px; }
  .cd-unit b { font-size: var(--t-xl); }
  .ktp-photo { width: 84px; height: 108px; }
  .bar-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bar-row .bar-track { grid-column: 1 / -1; order: 3; }
  .leader-row { grid-template-columns: var(--s-8) minmax(0, 1fr) auto; }
  .leader-row .bar-track { grid-column: 2 / -1; order: 4; }
}

/* =====================================================================
   Mobile shell, live pulse and "Jalur Maraton"
   ===================================================================== */

/* ---------- header: desktop links vs mobile pill ---------- */
.hdr-m { display: none; align-items: center; gap: var(--s-2); min-width: 0; }
.hdr-pill {
  display: inline-flex; align-items: center; min-height: var(--s-11); max-width: 58vw; padding: var(--s-1) var(--s-3);
  font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-sm); line-height: 1.1; color: var(--on-color); text-decoration: none;
  background: var(--leaf-d); border: var(--bw) solid var(--ink); border-radius: var(--r-pill); box-shadow: var(--sh-s);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.hdr-pill:hover { color: var(--on-color); }
.js:not(.badge-ready) .hdr-masuk { visibility: hidden; }

/* ---------- bottom tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch;
  background: var(--paper); border-top: var(--bw) solid var(--ink);
}
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: var(--s-14); min-width: var(--s-11); color: var(--ink); text-decoration: none; font-weight: var(--w-label);
  -webkit-tap-highlight-color: transparent;
}
.tab:hover { color: var(--ink); }
.tab-ico { position: relative; display: block; line-height: 1; }
.tab-ico .ic { width: var(--s-7); height: var(--s-7); display: block; --ic-a: var(--turmeric); }
.tab-lbl { font-size: var(--t-xs); line-height: 1; }
.tab[aria-current="page"]:not(.tab-main) { background: var(--cream-d); }
.tab[aria-current="page"]:not(.tab-main)::before {
  content: ""; position: absolute; top: -3px; left: 20%; right: 20%; height: 6px;
  background: var(--chili-d); border: var(--bw-s) solid var(--ink); border-top: 0; border-radius: 0 0 6px 6px;
}
.tab[aria-current="page"] .tab-lbl { color: var(--chili-d); font-weight: var(--w-display); }
.tab[aria-current="page"] .tab-ico .ic { --ic-a: var(--chili); }
.tab-dot {
  position: absolute; top: -3px; right: -8px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--live); border: var(--bw-s) solid var(--ink);
}
.tab-chip {
  position: absolute; top: var(--s-1); left: var(--s-1); padding: 0 var(--s-1); font-family: var(--font-d); font-weight: var(--w-display);
  font-size: var(--t-xs); line-height: 1.3; color: var(--on-color); background: var(--chili-d);
  border: var(--bw-s) solid var(--ink); border-radius: 6px; transform: rotate(-8deg);
}

/* the raised centre sticker button */
.tab-main { overflow: visible; }
.main-btn {
  position: absolute; left: 0; right: 0; margin: 0 auto; top: -32px; z-index: var(--z-raised); width: 76px; height: 76px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  color: var(--on-color); background: var(--chili-d); border: 4px solid var(--ink); border-radius: 50%;
  box-shadow: var(--sh);
  transition: transform var(--dur-micro) var(--ease-out);
}
.main-ico { display: block; line-height: 1; }
.main-ico .ic { width: var(--s-8); height: var(--s-8); display: block; --ic-stroke: var(--ink); --ic-a: var(--turmeric); --ic-b: var(--paper); }
.main-lbl { font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-xs); line-height: 1; margin-top: var(--s-1); }
.tab-main:active .main-btn { transform: translate(3px, 3px); box-shadow: var(--sh-press); }
.tab-main[aria-current="page"] .main-btn { background: var(--ink-2); }
.main-dot {
  position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--live); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--ink);
}
.main-dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 3px solid var(--live);
  animation: ring 1.5s var(--ease-out) 4;
}
.main-chip {
  position: absolute; bottom: var(--s-1); left: 50%; transform: translateX(-50%); padding: 0 var(--s-2);
  font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-xs); line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--turmeric); background: var(--ink); border-radius: var(--r-pill);
}
.tab-main .main-chip { z-index: var(--z-raised); }

@media (max-width: 899px) {
  .nav-links { display: none; }
  .hdr-m { display: flex; }
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + var(--s-2)); }
  .btn-sm { min-height: var(--s-11); }
  .foot { padding-bottom: var(--s-9); }
  .picker { gap: var(--s-3); }
  .picker > .opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .opt { min-height: 96px; padding: var(--s-4) var(--s-2); }
  .opt-emoji { font-size: 2.3rem; }
  .opt-label { font-size: var(--t-base); }
}
@media (min-width: 900px) {
  .tabbar { display: none; }
  .nav-links { gap: var(--s-5); }
}

/* ---------- live pulse strip ---------- */
.pulse { background: var(--ink); color: var(--cream); border-bottom: var(--bw) solid var(--ink); }
.pulse-in { display: flex; gap: var(--s-3); align-items: flex-start; padding-top: var(--s-3); padding-bottom: var(--s-3); }
.pulse-tag {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-1); margin-top: 0; padding: var(--s-1) var(--s-2);
  font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-sm); line-height: 1.2; color: var(--on-color); background: var(--chili-d);
  border: var(--bw-s) solid var(--cream); border-radius: var(--r-1);
}
.pulse-tag .ic { --ic-stroke: var(--paper); --ic-a: var(--paper); --ic-b: transparent; width: 1.1em; height: 1.1em; }
.pulse-main { min-width: 0; flex: 1; }
.pulse-text { margin: 0; font-weight: var(--w-label); font-size: var(--t-base); line-height: 1.4; overflow-wrap: anywhere; }
.pulse-sub { margin: var(--s-1) 0 0; font-size: var(--t-sm); font-weight: var(--w-label); color: var(--turmeric); }
.pulse-bar { height: 12px; max-width: 480px; margin-top: var(--s-2); background: var(--ink-3); border: var(--bw-s) solid var(--cream); border-radius: var(--r-pill); overflow: hidden; }
.pulse-bar i { display: block; height: 100%; min-width: 2px; background: var(--turmeric); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); transition: transform var(--dur-long) var(--ease-out); }
.pulse-bar-light { background: var(--paper); border: var(--bw) solid var(--ink); height: 16px; margin-top: var(--s-2); }
.pulse-bar-light i { background: var(--leaf-d); }
.pulse-big .pulse-in { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.pulse-big .pulse-text { font-size: var(--t-md); }
.pulse-big .pulse-sub { font-size: var(--t-base); }

/* ---------- Jalur Maraton: vertical race track ---------- */
.maraton { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.km { position: relative; display: flex; gap: var(--s-4); padding-bottom: var(--s-4); }
.km::before { content: ""; position: absolute; left: 18px; top: var(--s-10); bottom: -2px; width: 4px; background: var(--ink); }
.km:last-child::before { display: none; }
.km-upcoming::before { background: repeating-linear-gradient(180deg, var(--ink) 0 6px, transparent 6px 12px); }
.km-dot {
  position: relative; z-index: var(--z-base); flex: none; display: grid; place-items: center; width: var(--s-10); height: var(--s-10);
  font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-base); background: var(--paper); border: var(--bw) solid var(--ink);
  border-radius: 50%; box-shadow: var(--sh-s); font-variant-numeric: tabular-nums;
}
.km-dot .ic { width: var(--s-6); height: var(--s-6); }
.km-passed .km-dot { background: var(--leaf-d); color: var(--on-color); --ic-stroke: var(--paper); }
.km-current .km-dot { background: var(--chili-d); color: var(--on-color); --ic-stroke: var(--ink); --ic-a: var(--turmeric); --ic-b: var(--paper); }
.km-current .km-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--chili); animation: ring 1.5s var(--ease-out) 3; }
.km-upcoming .km-dot { background: var(--cream); border-style: dashed; box-shadow: none; color: var(--muted); }
.km-finish .km-dot { font-size: var(--t-lg); }
.km-finish .km-dot .ic { --ic-a: var(--turmeric); }
.km-body { flex: 1; min-width: 0; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh-s); padding: var(--s-2) var(--s-3) var(--s-3); }
.km-passed .km-body { background: var(--leaf-tint); }
.km-current .km-body { background: var(--turmeric-soft); box-shadow: var(--sh); }
.km-upcoming .km-body { background: transparent; border-style: dashed; box-shadow: none; }
.km-finish.km-passed .km-body { background: var(--turmeric); }
.km-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.km-top b { font-family: var(--font-d); font-weight: var(--w-display); color: var(--chili-d); }
.km-stage { font-weight: var(--w-display); }
.km-date { margin-left: auto; font-size: var(--t-sm); color: var(--muted); font-weight: var(--w-label); }
.km-game { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--muted); }
.km-game .ic { width: var(--s-5); height: var(--s-5); }
.km-stat { margin-top: var(--s-1); font-weight: var(--w-display); font-variant-numeric: tabular-nums; }
.km-current .km-stat { color: var(--chili-d); }
.km-me { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-2); padding: var(--s-1) var(--s-3); font-size: var(--t-sm); font-weight: var(--w-display); color: var(--turmeric); background: var(--ink); border-radius: var(--r-pill); }
.km-me a { color: var(--turmeric); }
.km-me .ic { --ic-a: var(--turmeric); --ic-b: var(--ink); --ic-stroke: var(--turmeric); }

/* compact horizontal track */
.maraton-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--s-3); padding: var(--s-4) var(--s-1) var(--s-3); scroll-snap-type: x proximity; }
.maraton-compact { display: flex; gap: var(--s-2); width: max-content; margin: 0; }
.kmc {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); min-width: 68px; padding: var(--s-2);
  font-size: var(--t-xs); line-height: 1.2; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r-2);
  box-shadow: var(--sh-s); scroll-snap-align: center;
}
.kmc b { font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-xs); white-space: nowrap; }
.kmc-dot { display: block; line-height: 1; }
.kmc-dot .ic { width: var(--s-5); height: var(--s-5); display: block; }
.kmc-n { font-weight: var(--w-display); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.kmc-passed { background: var(--leaf-soft); }
.kmc-current { background: var(--turmeric); }
.kmc-current::after { content: ""; position: absolute; inset: -4px; border-radius: 16px; border: 3px solid var(--chili); animation: ring 1.5s var(--ease-out) 3; pointer-events: none; }
.kmc-upcoming { background: transparent; border-style: dashed; box-shadow: none; color: var(--muted); }
.kmc-upcoming .ic { --ic-a: var(--cream-d); --ic-stroke: var(--muted); }
.kmc-me { position: absolute; top: -16px; right: -8px; width: var(--s-6); height: var(--s-6); filter: drop-shadow(1px 1px 0 var(--ink)); }
.kmc-me .ic { width: 100%; height: 100%; --ic-a: var(--chili); display: block; }

/* ---------- activity ticker ---------- */
.ticker { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-2); }
.tk {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3);
  font-weight: var(--w-label); font-size: var(--t-sm); background: var(--paper); border: var(--bw) solid var(--ink);
  border-radius: var(--r-2); box-shadow: var(--sh-s);
}
.tk-ico { flex: none; display: inline-flex; }
.tk-ico .ic { width: var(--s-5); height: var(--s-5); }
.tk-join .tk-ico { --ic-a: var(--sky); }
.tk-register .tk-ico { --ic-a: var(--turmeric); }
.tk-lock .tk-ico { --ic-a: var(--leaf); }
.tk-reveal .tk-ico { --ic-a: var(--chili); }
.tk-champion { background: var(--turmeric-soft); }
.tk-empty { color: var(--muted); }
.tk-text { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.tk-time { flex: none; font-size: var(--t-xs); font-weight: var(--w-label); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-new { animation: pop var(--dur-short) var(--ease-out); }
.mini-title { font-size: var(--t-base); margin: var(--s-5) 0 var(--s-2); }

/* ---------- kampung race highlight ---------- */
.leader-row { padding: var(--s-1) var(--s-2); border: var(--bw) solid transparent; border-radius: var(--r-2); }
.leader-row.is-mine { background: var(--turmeric-soft); border-color: var(--ink); box-shadow: var(--sh-s); }
.mine-tag { display: inline-block; margin-left: var(--s-2); padding: 0 var(--s-2); font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-xs); color: var(--turmeric); background: var(--ink); border-radius: 6px; vertical-align: middle; }

/* ---------- /main and /saya: urgency ---------- */
.cd-urgent .cd-unit { background: var(--chili-d); color: var(--on-color); }
.cd-urgent .cd-unit small { color: var(--on-color); }
.lock-box.is-urgent { background: var(--chili-soft); border-color: var(--chili-d); }
.urgency { background: var(--leaf-tint); }
.urgency-warn { background: var(--chili-soft); border-color: var(--chili-d); }
.urgency-line { margin: 0; font-size: var(--t-md); }
.safe-box { margin-top: var(--s-3); padding: var(--s-3); background: var(--leaf-soft); border: var(--bw-s) dashed var(--ink); border-radius: var(--r); }
.safe-box p { margin-bottom: .4em; }
.streak { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); font-weight: var(--w-display); font-size: var(--t-sm); background: var(--turmeric); border: var(--bw) solid var(--ink); border-radius: var(--r-pill); box-shadow: var(--sh-s); font-variant-numeric: tabular-nums; }
.streak-row { margin: var(--s-3) 0 0; }
.comeback { padding: var(--s-3); font-weight: var(--w-label); background: var(--paper); border: var(--bw-s) dashed var(--ink); border-radius: var(--r); }
.tonight-mini.is-todo { box-shadow: 4px 4px 0 var(--chili-d); border-color: var(--chili-d); }
.live-cta p { margin-bottom: .8em; }
.install-t { margin-bottom: .4em; }
.live-peek { margin-top: var(--s-7); }

@media (max-width: 380px) {
  .tab-lbl { font-size: var(--t-xs); }
  .main-btn { width: 70px; height: 70px; top: -30px; }
  .hdr-pill { font-size: var(--t-xs); padding: var(--s-1) var(--s-2); }
  .pulse-text { font-size: var(--t-sm); }
}

/* =====================================================================
   Page sections for /live, /saya, /klasemen, /p/<user>, /malam/<n>
   ===================================================================== */

/* section head: a small tilted icon tile beside a plain heading (no label above it) */
.sec-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.sec-head .section-title { margin: 0; }
.sec-head > div { min-width: 0; }
.sec-tile {
  flex: none; display: grid; place-items: center; width: var(--s-12); height: var(--s-12);
  background: var(--c, var(--turmeric)); border: var(--bw) solid var(--ink); border-radius: var(--r-2);
  box-shadow: var(--sh-s); transform: rotate(-4deg);
}
.sec-tile .ic { width: var(--s-7); height: var(--s-7); vertical-align: top; --ic-a: var(--paper); --ic-b: var(--paper); --ic-c: var(--ink); }
.sec-chili { --c: var(--chili-soft); }
.sec-leaf { --c: var(--leaf-soft); }
.sec-sky { --c: var(--sky-soft); }
.sec-turmeric { --c: var(--turmeric); }
.sec-sub { margin: var(--s-1) 0 0; font-size: var(--t-sm); font-weight: var(--w-label); }

/* stage line: a chip with the night number, then the stage name in plain words */
.stage-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); font-size: var(--t-sm); font-weight: var(--w-label); }
.stage-line .tag { background: var(--paper); box-shadow: var(--sh-s); }
.status-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2); }

.back-link { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--s-11); margin-bottom: var(--s-1); font-weight: var(--w-label); font-size: var(--t-sm); color: var(--ink); }
.back-link:hover { color: var(--chili-d); }

/* icons that sit in a card title or a button label */
.card-title .ic-lg { width: 1.2em; height: 1.2em; vertical-align: -.2em; }
.btn .ic { width: 1.25em; height: 1.25em; vertical-align: middle; }

/* history rows */
.hist-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); }
.hist-meta > span { display: inline-flex; align-items: center; gap: var(--s-1); }