/* Hallmark · extends the style.css stamp (playful, kampung sticker, tokens from style.css :root) for the four kampung: crest icons, the Pembagian Warga quiz and reveal, the Piala Kampung race and the kampung accent
 * colour comes from the tokens only: a kampung sets --k, --k-soft, --k-d and --k-on through an inline style (views.kampung_vars) · motion: transform, scale and opacity only, fixed iteration counts, reduced-motion fallbacks at the end
 */

/* ---------- accent: a sorted player's kampung tints a few surfaces and never floods the page ---------- */
.ktp[data-kampung] { box-shadow: 6px 6px 0 var(--k); }
.ktp[data-kampung] .ktp-head { background: var(--k-soft); flex-direction: row; align-items: center; justify-content: space-between; }
.ktp-head-text { display: flex; flex-direction: column; min-width: 0; }
.ktp-crest { flex: none; display: block; line-height: 0; margin-block: calc(var(--s-2) * -1); }
.ktp-crest .ic { width: var(--s-14); height: var(--s-14); vertical-align: top; --ic-sw: 1.3; }
.ktp-kampung a { color: var(--ink); }
.ktp-kampung a:hover { color: var(--chili-d); }
body[data-kampung] .tonight { box-shadow: 4px 4px 0 var(--k); }
body[data-kampung] .result-card { box-shadow: 4px 4px 0 var(--k); }
body[data-kampung] .main-btn { box-shadow: 0 0 0 var(--s-1) var(--k), 0 0 0 calc(var(--s-1) + var(--bw)) var(--ink), var(--sh); }
.btn-k { --bg: var(--k-d, var(--chili-d)); --fg: var(--k-on, var(--on-color)); }

/* ---------- crest sizes (the sprite symbols are drawn on a 24 grid with a 1.5 stroke; big sizes thin the ink) ---------- */
.crest { vertical-align: middle; }
.ic.crest.ic-lg { width: var(--s-8); height: var(--s-8); vertical-align: middle; }
.ic.crest.ic-xl { width: var(--s-12); height: var(--s-12); }
.ic.crest.ic-2xl { width: var(--s-16); height: var(--s-16); --ic-sw: 1.3; }
.ic.crest.ic-hero { width: calc(var(--s-10) * 4); height: calc(var(--s-10) * 4); vertical-align: top; --ic-sw: 1.1; }

.kdot { display: inline-block; flex: none; width: var(--s-3); height: var(--s-3); margin-left: var(--s-1); vertical-align: middle; background: var(--k, var(--cream-d)); border: var(--bw-s) solid var(--ink); border-radius: 50%; }
.rp-ktag .kdot { width: var(--s-2); height: var(--s-2); margin-left: var(--s-1); }

.kampung-line, .kline { display: flex; align-items: center; gap: var(--s-3); }
.rv-kampung { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin: var(--s-3) 0; padding: var(--s-2) var(--s-3); text-align: left; color: var(--ink); background: var(--k-soft); border: var(--bw-s) solid var(--ink); border-radius: var(--r); }
.rv-kampung .ic { flex: none; width: var(--s-10); height: var(--s-10); }
.kline { margin: var(--s-3) 0; padding: var(--s-2) var(--s-3); background: var(--k-soft, var(--turmeric-soft)); border: var(--bw-s) solid var(--ink); border-radius: var(--r); }
.kampung-line .ic, .kline .ic { flex: none; }
.kampung-line > span, .kline > span { min-width: 0; }

/* ---------- the Piala Kampung strip inside the live pulse (dark band) ---------- */
.kstrip { padding-top: var(--s-2); padding-bottom: var(--s-3); border-top: var(--bw-s) solid var(--ink-3); }
.kstrip :focus-visible { outline-color: var(--focus-on-dark); }
.kstrip-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--s-11); font-weight: var(--w-label); font-size: var(--t-sm); color: var(--cream); text-decoration: none; }
.kstrip-head:hover { color: var(--turmeric); }
.kstrip-go { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--turmeric); }
.kstrip-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.kstrip-item { display: grid; justify-items: center; align-content: start; gap: var(--s-1); text-align: center; color: var(--cream); font-size: var(--t-xs); font-weight: var(--w-label); line-height: 1.2; min-width: 0; }
.kstrip-item.is-mine { color: var(--turmeric); }
.kstrip-item .ic { width: var(--s-9); height: var(--s-9); --ic-sw: 1.7; }
.kstrip-pts { font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.kstrip-bar { display: flex; height: var(--s-3); margin-top: var(--s-2); border: var(--bw-s) solid var(--cream); border-radius: var(--r-pill); overflow: clip; background: var(--ink-3); }
.kstrip-bar i { flex: var(--g, 1) 1 0; min-width: var(--s-2); background: var(--kc); border-right: var(--bw-s) solid var(--ink); }
.kstrip-bar i:last-child { border-right: 0; }
.kstrip-text { margin: var(--s-2) 0 0; font-size: var(--t-sm); font-weight: var(--w-label); color: var(--turmeric); }
.pulse:not(.pulse-big) .kstrip-list, .pulse:not(.pulse-big) .kstrip-head { display: none; }
.pulse:not(.pulse-big) .kstrip { padding-top: 0; border-top: 0; }
.pulse:not(.pulse-big) .kstrip-bar { margin-top: 0; }

/* ---------- landing: pick-a-side teaser ---------- */
.kpick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-4); }
.kpick-link { display: grid; justify-items: center; align-content: start; gap: var(--s-1); height: 100%; padding: var(--s-4) var(--s-3); text-align: center; color: var(--ink); text-decoration: none; background: var(--k-soft); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: 4px 4px 0 var(--k); transition: transform var(--dur-micro) var(--ease-out); }
.kpick-link:hover { color: var(--ink); }
.kpick-link:active { transform: translate(2px, 2px); }
.kpick-link b { font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-md); }
.kpick-link span:last-child { font-size: var(--t-sm); }
.kpick-link .ic { margin-bottom: var(--s-1); }

/* ---------- Piala Kampung race page ---------- */
.kscope { display: inline-flex; gap: var(--s-1); margin: 0 0 var(--s-5); padding: var(--s-1); background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r-pill); box-shadow: var(--sh-s); }
.kscope-btn { display: inline-flex; align-items: center; min-height: var(--s-11); padding: var(--s-2) var(--s-4); font-weight: var(--w-label); color: var(--ink); text-decoration: none; border: var(--bw-s) solid transparent; border-radius: var(--r-pill); }
.kscope-btn:hover { color: var(--ink); background: var(--cream-d); }
.kscope-btn[aria-current="true"] { background: var(--turmeric); border-color: var(--ink); font-weight: var(--w-display); }
.krace-text { font-weight: var(--w-label); margin: 0 0 var(--s-4); }
.krace { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.kcard { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4); padding: var(--s-4); background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: 4px 4px 0 var(--k); }
.kcard.is-lead { background: var(--k-soft); box-shadow: var(--sh-l) ; box-shadow: 6px 6px 0 var(--k); }
.kcard.is-mine { outline: var(--s-1) solid var(--k); outline-offset: var(--s-1); }
.kcard:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.kcard-rank { position: absolute; top: calc(var(--s-3) * -1); left: calc(var(--s-2) * -1); z-index: var(--z-base); display: grid; place-items: center; width: var(--s-8); height: var(--s-8); font-family: var(--font-d); font-weight: var(--w-display); font-variant-numeric: tabular-nums; background: var(--cream-d); border: var(--bw) solid var(--ink); border-radius: 50%; box-shadow: var(--sh-s); }
.kcard.is-lead .kcard-rank { background: var(--turmeric); }
.kcard-crest { display: block; line-height: 0; }
.kcard-crest .ic.crest.ic-hero { width: calc(var(--s-10) * 2); height: calc(var(--s-10) * 2); --ic-sw: 1.4; }
.kcard-body { min-width: 0; }
.kcard-name { margin: 0; font-size: var(--t-xl); }
.kcard-link { color: var(--ink); text-decoration: none; }
.kcard-link::after { content: ""; position: absolute; inset: 0; }
.kcard-link:focus-visible { outline: 0; }
.kcard-trait { margin: 0 0 var(--s-2); font-size: var(--t-sm); font-weight: var(--w-label); color: var(--ink-3); }
.kcard-stats { display: flex; gap: var(--s-6); margin: 0; font-variant-numeric: tabular-nums; }
.kcard-stats dt { font-size: var(--t-xs); font-weight: var(--w-label); color: var(--muted); font-variant-numeric: tabular-nums; }
.kcard-stats dd { margin: 0; font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kcard-gap { margin: var(--s-2) 0; font-size: var(--t-sm); font-weight: var(--w-label); }
.kcard-bar { display: block; height: var(--s-3); background: var(--paper); border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); overflow: clip; }
.kcard-bar i { display: block; height: 100%; min-width: var(--s-1); background: var(--k-d); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform var(--dur-long) var(--ease-out); }
.kcard .mine-tag { margin-left: var(--s-2); }

/* ---------- /kampung/<key> ---------- */
.kp-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); padding: var(--s-6); background: var(--k-soft); border: var(--bw) solid var(--ink); border-radius: var(--r-4); box-shadow: 6px 6px 0 var(--k); }
.kp-crest { display: block; line-height: 0; flex: none; }
.kp-head { flex: 1 1 var(--s-16); min-width: 0; }
.kp-name { margin: 0 0 var(--s-1); font-size: clamp(2rem, 9vw, 3rem); }
.kp-trait { margin: 0 0 var(--s-1); font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-lg); }
.kp-tagline { margin: 0 0 var(--s-2); font-size: var(--t-md); }
.kp-mine { display: inline-flex; align-items: center; gap: var(--s-1); margin: 0; padding: var(--s-1) var(--s-3); font-size: var(--t-sm); font-weight: var(--w-display); background: var(--paper); border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); }
.kp-sum { margin: 0; }
.contrib { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.contrib-row { display: grid; grid-template-columns: var(--s-6) var(--s-10) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--paper); border: var(--bw-s) solid var(--ink); border-radius: var(--r-2); }
.contrib-no { font-family: var(--font-d); font-weight: var(--w-display); text-align: center; font-variant-numeric: tabular-nums; }
.contrib .av { margin-left: 0; }
.contrib-who { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.contrib-pts { font-size: var(--t-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Pembagian Warga: the quiz ---------- */
body[data-nav="warga"] .tabbar { display: none; }
body[data-nav="warga"] { padding-bottom: 0; }
.quiz { position: relative; }
.qprog { margin: 0 0 var(--s-5); }
.qprog-label { margin: 0 0 var(--s-2); font-size: var(--t-sm); font-weight: var(--w-label); color: var(--muted); }
.qprog-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-1); }
.qprog-bar i { position: relative; height: var(--s-3); overflow: clip; background: var(--paper); border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); }
.qprog-bar i::after { content: ""; position: absolute; inset: 0; background: var(--chili-d); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--dur-spring) var(--spring); }
.qprog-bar i.is-done::after { transform: scaleX(1); }
.qsteps { position: relative; list-style: none; margin: 0; padding: 0; }
.qstep { margin: 0 0 var(--s-6); }
.qfield { margin: 0; padding: 0; border: 0; min-width: 0; }
.qlegend { display: block; width: 100%; margin: 0 0 var(--s-4); padding: 0; }
.qlegend:focus { outline: 0; }
.qno { display: block; margin-bottom: var(--s-1); font-size: var(--t-sm); font-weight: var(--w-label); color: var(--muted); }
.qtext { display: block; font-family: var(--font-d); font-weight: var(--w-display); font-size: clamp(1.4rem, 6vw, 1.9rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.qopts { display: grid; gap: var(--s-3); }
.qopt { position: relative; display: block; cursor: pointer; }
.qopt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.qopt-body { display: block; min-height: var(--s-14); padding: var(--s-4); font-weight: var(--w-label); line-height: 1.3; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); transition: transform var(--dur-micro) var(--ease-out); }
@media (hover: hover) {
  .qopt:hover .qopt-body { transform: translate(-1px, -1px); box-shadow: var(--sh-hover); }
}
.qopt input:focus-visible + .qopt-body { outline: 3px solid var(--focus); outline-offset: 3px; }
.qopt input:checked + .qopt-body { background: var(--turmeric); font-weight: var(--w-display); transform: translate(3px, 3px); box-shadow: var(--sh-press); }
.js .qno { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.quiz-actions [data-qsubmit] { order: -1; flex: 1 1 100%; }
.quiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: var(--s-5) 0 var(--s-3); }
.js .qprog { display: block; }
.js .qstep { display: none; }
.js .qstep.is-active, .js .qstep.is-leaving { display: block; }
.js .qstep.is-leaving { position: absolute; top: 0; left: 0; right: 0; }

/* ---------- Pembagian Warga: the reveal (full screen) ---------- */
.rk { position: relative; overflow: clip; display: grid; place-items: center; min-height: calc(100vh - var(--top-h)); min-height: calc(100dvh - var(--top-h)); background: var(--k-soft); border-bottom: var(--bw) solid var(--ink); }
.rk-rays { position: absolute; inset: -60%; background: repeating-conic-gradient(from 0deg, var(--paper-a-40) 0deg 8deg, transparent 8deg 16deg); }
.rk-in { position: relative; display: grid; justify-items: center; padding-top: var(--s-8); padding-bottom: var(--s-8); text-align: center; }
.rk-stage { display: flex; align-items: flex-end; justify-content: center; gap: var(--s-2); margin-bottom: var(--s-5); }
.rk-crest { display: block; line-height: 0; }
.rk-crest .ic.crest.ic-hero { width: calc(var(--s-12) * 4); height: calc(var(--s-12) * 4); max-width: 56vw; max-height: 56vw; --ic-sw: .95; }
.rk-flag { display: block; line-height: 0; transform-origin: 50% 100%; }
.rk-flag .ic { width: var(--s-16); height: var(--s-20); vertical-align: top; --ic-a: var(--k); --ic-sw: 1.6; }
.rk-flag-r { scale: -1 1; }
.rk-title { max-width: 14em; margin: 0 0 var(--s-2); font-size: clamp(2rem, 9vw, 3.4rem); }
.rk-trait { margin: 0; font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-xl); }
.rk-tagline { margin: var(--s-1) 0 var(--s-6); font-size: var(--t-md); }
.rk-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.rk-more { margin: var(--s-5) 0 0; font-weight: var(--w-label); }
.rk-more a { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .js .qstep.is-active { animation: qin var(--dur-long) var(--spring) both; }
  .js .qstep.is-leaving { animation: qout var(--dur-short) var(--ease-in) both; pointer-events: none; }
  .js .qstep.is-active .qopt { animation: qopt-in var(--dur-long) var(--spring) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
  .qopt input:checked + .qopt-body { animation: qpop var(--dur-spring) var(--spring); }
  .rk-rays { animation: rk-rays 1400ms var(--ease-out) both; }
  .rk-crest { animation: rk-pop 760ms var(--spring) 120ms both; }
  .rk-flag { animation: rk-rise 820ms var(--spring) 520ms both; }
  .rk-title { animation: rk-up 560ms var(--ease-out) 900ms both; }
  .rk-trait { animation: rk-up 560ms var(--ease-out) 1040ms both; }
  .rk-tagline { animation: rk-up 560ms var(--ease-out) 1140ms both; }
  .rk-actions { animation: rk-up 560ms var(--ease-out) 1300ms both; }
  .rk-more { animation: rk-up 560ms var(--ease-out) 1400ms both; }
}
@keyframes qin { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * var(--s-8))) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes qout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(calc(var(--dir, 1) * var(--s-8) * -1)); } }
@keyframes qopt-in { from { opacity: 0; transform: translateY(var(--s-4)) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes qpop { 0% { scale: .96; } 55% { scale: 1.03; } 100% { scale: 1; } }
@keyframes rk-rays { from { opacity: 0; transform: rotate(-24deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes rk-pop { from { opacity: 0; transform: scale(.2) rotate(-14deg); } 60% { opacity: 1; transform: scale(1.12) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes rk-rise { from { opacity: 0; transform: translateY(70%); } to { opacity: 1; transform: none; } }
@keyframes rk-up { from { opacity: 0; transform: translateY(var(--s-4)); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .qstep.is-leaving { display: none; }
  .qprog-bar i::after, .kcard-bar i, .qopt-body, .kpick-link { transition: none; }
}

@media (max-width: 380px) {
  .kcard { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .kstrip-item .ic { width: var(--s-8); height: var(--s-8); }
}

@media (max-width: 599px) {
  .kp-hero { flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-5); }
  .kp-crest .ic.crest.ic-hero { width: calc(var(--s-8) * 4); height: calc(var(--s-8) * 4); }
}