/* site.css — landing BAGLINGS v2: satu desa hidup, gulir = jam berjalan */
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: #0d2228; color: var(--ink); font: 400 16px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img.pixel, canvas.pixel { image-rendering: pixelated; }
a { color: inherit; }
.wrap { width: min(1160px, 100% - 32px); margin: 0 auto; }
.wrap.narrow { width: min(760px, 100% - 32px); }
h1, h2, h3 { font-family: var(--font-px); font-weight: 700; margin: 0; }
.btn.small { font-size: 14px; padding: 8px 12px 10px; }

/* ---------- kanvas desa ---------- */
#world { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; image-rendering: pixelated; z-index: 0; cursor: default; }
#vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(6, 14, 20, 0.42) 100%); }
#track { position: relative; z-index: 2; pointer-events: none; }

/* ---------- HUD ---------- */
.hud-top { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 0; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 700 18px var(--font-px); letter-spacing: 0.08em; color: var(--paper); text-shadow: 2px 2px 0 var(--ink); justify-self: start; }
.brand img { width: 30px; height: 32px; filter: drop-shadow(2px 2px 0 var(--ink)); }
.hud-right { justify-self: end; display: flex; gap: 6px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--font-px); color: var(--paper); background: rgba(13, 30, 35, 0.82); padding: 7px 10px; text-decoration: none;
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); margin: 3px; }
.pill b { color: var(--gold); font-weight: 600; }

/* jam hari: penggaris babak */
.day { display: flex; align-items: center; gap: 10px; background: rgba(13, 30, 35, 0.82); padding: 6px 12px 6px 8px; color: var(--paper);
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }
.day-clock { display: flex; align-items: center; gap: 6px; font: 700 18px var(--font-px); min-width: 74px; }
.day-clock img { width: 20px; height: 20px; }
.day-bar { position: relative; width: 260px; height: 10px; background: #12292e; box-shadow: 0 0 0 2px var(--ink); cursor: pointer; }
.day-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #6b8fd6, #ffd968 30%, #ffcf5a 60%, #e0663a 78%, #3a4a8a); }
.day-bar span { position: absolute; top: -5px; width: 8px; height: 20px; margin-left: -4px; background: var(--paper); box-shadow: 0 0 0 2px var(--ink); left: 0; }
.day-bar em { position: absolute; top: 12px; width: 2px; height: 5px; background: rgba(255, 246, 226, 0.45); }

.hud-bl { position: fixed; z-index: 20; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.hud-br { position: fixed; z-index: 20; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
.ca-chip { display: inline-flex; gap: 8px; align-items: center; font: 600 13px var(--font-px); color: var(--paper); background: rgba(13, 30, 35, 0.82); border: 0; padding: 7px 10px; cursor: default; margin: 3px;
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 0 0 2px rgba(255, 207, 90, 0.35); }
.ca-chip span { color: var(--gold); }
.ca-chip b { font-weight: 500; opacity: 0.85; }
.ca-chip.live { cursor: copy; box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 0 0 2px var(--gold); }
.live-dot { width: 8px; height: 8px; background: #7ff0a0; animation: blink 1s steps(2) infinite; }
.inv img { width: 20px; height: 20px; }
.inv.pop { animation: pop 0.35s steps(3); }
@keyframes pop { 50% { transform: scale(1.25); } }
@keyframes blink { 50% { opacity: 0.3; } }

/* ---------- babak ---------- */
.ch { position: fixed; z-index: 10; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.35s, transform 0.35s steps(4), visibility 0s 0.35s; pointer-events: none; }
.ch.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s, transform 0.35s steps(4), visibility 0s; }
.ch.on > * { pointer-events: auto; }
.ch[data-side="left"] { left: max(20px, calc((100vw - 1240px) / 2)); bottom: 84px; width: min(460px, calc(100vw - 40px)); }
.ch[data-side="right"] { right: max(20px, calc((100vw - 1240px) / 2)); top: 88px; max-height: calc(100vh - 168px); width: min(560px, calc(100vw - 40px)); display: flex; flex-direction: column; align-items: flex-start; }
.ch[data-side="right"] > .box, .ch[data-side="right"] > .book { align-self: stretch; }

.quest { display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--font-px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 5px 10px 5px 6px;
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 -3px 0 0 var(--gold-2); margin: 3px; }
.quest img { width: 20px; height: 20px; }
.quest::before { content: 'New quest ·'; opacity: 0.6; margin-left: 2px; }

h2.scrub { font: 700 clamp(34px, 4.4vw, 56px)/1.02 var(--font-px); color: var(--paper); margin: 14px 0 14px; letter-spacing: 0.005em;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink), 0 7px 0 var(--ink), 3px 7px 0 var(--ink), -3px 7px 0 var(--ink); }
.scrub .w { display: inline-block; white-space: nowrap; }
.scrub .l { opacity: 0; display: inline-block; transform: translateY(6px); }
.scrub .l.on { opacity: 1; transform: none; }
.scrub .gold { color: var(--gold); }

.box { padding: 16px 18px; font-size: 16px; }
.box p { margin: 0 0 8px; }
.box p:last-child { margin-bottom: 0; }
.muted-s { color: var(--muted); font-size: 14px; }

/* kotak bicara warga */
.talkbox { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 14px 16px 16px; align-items: start; }
#nb-pic { width: 112px; height: 119px; background: linear-gradient(#2c5a5c, #20444a); box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 3px #2f6a6c; }
.tb-who b { font: 700 24px var(--font-px); color: var(--gold); margin-right: 8px; }
.tb-who span { font: 500 14px var(--font-px); opacity: 0.75; }
#nb-text { font: 500 19px/1.32 var(--font-px); margin: 4px 0 6px; min-height: 50px; }
#nb-text::after { content: '▌'; animation: blink 0.8s steps(2) infinite; margin-left: 2px; color: var(--gold); }
.tb-want { display: flex; align-items: center; gap: 6px; font: 500 14px var(--font-px); opacity: 0.85; }
.tb-want img { width: 16px; height: 16px; }
.tb-dots { grid-column: 1 / -1; display: flex; gap: 6px; }
.tb-dots i { flex: 1; height: 6px; background: rgba(255, 246, 226, 0.18); }
.tb-dots i.on { background: var(--gold); }

/* memancing */
.fish-ui { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.hold { position: relative; overflow: hidden; min-width: 210px; white-space: nowrap; justify-content: center; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hold-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #7bbf5a; mix-blend-mode: multiply; }
.hold-label { position: relative; }
.hold.bite { animation: shake 0.12s steps(2) infinite; }
@keyframes shake { 50% { transform: translateX(3px); } }
.fish-msg { font: 600 15px var(--font-px); color: var(--wood); margin: 0 !important; }

/* penjahit */
.tailor { display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; overflow: auto; overscroll-behavior: contain; }
.lead-s { font-size: 15px; }
.st-top { display: flex; gap: 10px; align-items: center; margin: 4px 0 12px; flex-wrap: wrap; }
.st-name { flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--paper-2); box-shadow: 0 0 0 3px var(--ink); min-width: 180px; margin: 3px; }
.st-name span { font: 600 13px var(--font-px); color: var(--muted); }
.st-name input { flex: 1; border: 0; background: transparent; font: 700 22px var(--font-px); color: var(--ink); outline: none; min-width: 0; }
.st-code { font: 600 14px var(--font-px); color: var(--muted); }
.st-code b { color: var(--ink); background: var(--gold); padding: 3px 6px; box-shadow: 0 0 0 2px var(--ink); margin-left: 4px; letter-spacing: 0.06em; }
.st-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.st-tab { font: 600 14px var(--font-px); background: var(--paper-2); border: 0; padding: 7px 10px; cursor: pointer; box-shadow: 0 0 0 2px var(--ink); color: var(--ink); margin: 2px; }
.st-tab.on { background: var(--ink); color: var(--gold); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; align-content: start; padding: 3px; }
.slot { background: #ead8b0; border: 0; padding: 4px 2px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 500 12px var(--font-px); color: var(--ink);
  box-shadow: 0 0 0 3px #c9b07a; transition: transform 0.08s steps(2); }
.slot canvas { width: 54px; height: 57px; image-rendering: pixelated; }
.slot:hover { transform: translateY(-3px); }
.slot.on { background: var(--gold); box-shadow: 0 0 0 3px var(--ink); }
.st-face { display: flex; gap: 4px; align-items: center; margin: 14px 0 6px; flex-wrap: wrap; font: 600 13px var(--font-px); color: var(--muted); }
.st-face span { margin-right: 4px; }
.mini { font: 600 13px var(--font-px); background: var(--paper-2); color: var(--ink); border: 0; box-shadow: 0 0 0 2px var(--ink); padding: 5px 9px; cursor: pointer; margin: 2px; }
.mini.on { background: var(--ink); color: var(--gold); }
.st-actions { display: flex; flex-wrap: wrap; gap: 2px; margin: 8px -4px 0; }

/* papan proyek */
.projects { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.projects li { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; padding: 7px 10px; background: var(--paper-2); align-items: center; transition: background 0.2s steps(2); }
.projects li i { grid-row: span 2; width: 18px; height: 18px; box-shadow: 0 0 0 3px var(--ink); background: var(--paper); margin-left: 3px; }
.projects li b { font: 600 16px var(--font-px); }
.projects li span { font-size: 13px; color: var(--muted); }
.projects li.done { background: #dff0c8; }
.projects li.done i { background: #3fae5a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff6e2' d='M1 3h1v1H1zM2 4h1v1H2zM3 3h1v1H3zM4 2h1v1H4zM5 1h1v1H5z'/%3E%3C/svg%3E") center/100% no-repeat; }
.projects li.done b { text-decoration: line-through; text-decoration-thickness: 2px; }

/* buku besar */
.book { display: grid; grid-template-columns: 1fr 1fr; flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; position: relative;
  background: #6b3d1f; padding: 10px; box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), inset 0 -4px 0 0 #4a2812; margin: 4px; }
.page { background: var(--paper); padding: 16px 16px 14px; background-image: repeating-linear-gradient(transparent 0 25px, rgba(122, 78, 44, 0.16) 25px 27px); }
.page.left { box-shadow: inset -6px 0 0 0 #e8d6ae; }
.page.right { box-shadow: inset 6px 0 0 0 #e8d6ae; }
.page h3 { font-size: 19px; margin: 0 0 8px; }
.page h3.ok { color: #2f7a3a; }
.page h3.warn { color: #b24a26; margin-top: 14px; }
.page .row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; border-bottom: 2px dashed rgba(122, 78, 44, 0.25); }
.page .row span { color: var(--muted); font: 500 14px var(--font-px); white-space: nowrap; }
.page .row b { font-weight: 600; text-align: right; }
.page .row b i { font-style: normal; }
.page a { color: #1f5f8a; }
.page ul { margin: 0; padding-left: 18px; font-size: 14px; }
.page li { margin: 4px 0; }
.fine-s { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
#lg-block { font-family: var(--font-px); font-size: 16px; color: #2f7a3a; }
.copy { font: 600 12px var(--font-px); margin-left: 6px; padding: 2px 6px; border: 2px solid var(--ink); background: var(--gold); cursor: pointer; }

/* ---------- layar judul ---------- */
.ch.title { inset: 0; display: grid; place-items: center; padding: 70px 16px 70px; transform: none; }
.ch.title::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 46% 38% at 50% 46%, rgba(8, 18, 26, 0.62), rgba(8, 18, 26, 0.18) 70%, transparent); }
.ch.title > * { position: relative; }
.ch.title > .cord { position: fixed; }
.ch.title .title-card { text-align: center; display: flex; flex-direction: column; align-items: center; transform: translateY(-3vh); }
.wordmark { --s: 4; display: flex; gap: calc(var(--s) * 2px); justify-content: center; filter: drop-shadow(0 calc(var(--s) * 2px) 0 rgba(6, 14, 20, 0.35)); }
.wm-letter { width: calc(var(--w) * var(--s) * 1px); height: calc(var(--h) * var(--s) * 1px); image-rendering: pixelated; animation: dropIn 0.55s steps(5) both, hopL 2.6s steps(1) infinite; animation-delay: calc(var(--i) * 0.07s), calc(0.8s + var(--i) * 0.11s); }
@keyframes hopL { 0%, 72%, 100% { transform: none; } 76% { transform: translateY(calc(var(--s) * -2px)); } 80% { transform: translateY(calc(var(--s) * -3px)); } 85% { transform: translateY(calc(var(--s) * -1px)); } }
@keyframes dropIn { from { transform: translateY(-70px); opacity: 0; } to { transform: none; opacity: 1; } }
.tag { font: 700 clamp(20px, 2.4vw, 28px) var(--font-px); color: var(--paper); margin: 26px 0 6px; text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 0 4px 0 var(--ink); }
.tag-sub { max-width: 470px; margin: 0 0 20px; color: rgba(255, 246, 226, 0.92); font-size: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 0, 0, 0.5); }
.title-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.or { font: 600 15px var(--font-px); color: var(--paper); text-shadow: 2px 2px 0 var(--ink); }
.or.go { color: var(--gold); animation: nudge 1s steps(2) infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }

/* tali kantong */
.cord { position: fixed; top: 64px; left: calc(50% + min(560px, 43vw)); --pull: 0px; display: flex; flex-direction: column; align-items: center; z-index: 11; }
.cord::before { content: ""; width: 22px; height: 8px; background: #7a4e2c; box-shadow: 0 0 0 3px var(--ink); margin-bottom: 3px; }
.rope { width: 8px; height: calc(min(26vh, 230px) + var(--pull)); background: repeating-linear-gradient(170deg, #d9b47a 0 5px, #9b693c 5px 9px); box-shadow: 0 0 0 3px var(--ink); }
.cord.spring .rope { transition: height 0.5s cubic-bezier(.3, 1.8, .5, 1); }
.knot { border: 0; background: transparent; padding: 0; cursor: grab; display: flex; flex-direction: column; align-items: center; gap: 8px; touch-action: none; margin-top: -2px; }
.knot:active { cursor: grabbing; }
.knot canvas { width: 60px; height: 66px; image-rendering: pixelated; animation: sway 2.2s ease-in-out infinite; transform-origin: 50% 0; }
.cord.pulling .knot canvas, .cord.done .knot canvas { animation: none; }
.knot span { font: 700 14px var(--font-px); color: var(--ink); background: var(--gold); padding: 4px 8px; box-shadow: 0 0 0 3px var(--ink); letter-spacing: 0.1em; }
.cord.done .knot span { background: #7bbf5a; }
@keyframes sway { 50% { transform: rotate(5deg); } }

/* ---------- penutup ---------- */
.ch.end { inset: 0; display: grid; place-items: center; padding: 80px 16px; transform: none; }
.end-card { text-align: center; }
.end-kicker { font: 700 15px var(--font-px); color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; text-shadow: 2px 2px 0 var(--ink); }
.end-card h2.scrub { font-size: clamp(34px, 5vw, 64px); }
.end-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.end-sub { font: 500 15px var(--font-px); color: rgba(255, 246, 226, 0.85); margin: 14px 0 0; text-shadow: 2px 2px 0 var(--ink); }

/* ---------- setelah cerita ---------- */
.after { position: relative; z-index: 15; background: #0d2228; border-top: 4px solid var(--ink);
  background-image: radial-gradient(rgba(255, 246, 226, 0.5) 1px, transparent 1.5px), radial-gradient(rgba(255, 246, 226, 0.25) 1px, transparent 1.5px);
  background-size: 140px 120px, 90px 70px; background-position: 10px 20px, 50px 40px; padding-top: 80px; }
.after-h { font-size: clamp(30px, 4vw, 44px); color: var(--paper); text-shadow: 3px 3px 0 var(--ink); margin-bottom: 24px; }
details { padding: 0; margin-bottom: 14px; }
summary { cursor: pointer; padding: 16px 20px; font: 600 19px var(--font-px); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::after { content: '+'; color: var(--wood); }
details[open] summary::after { content: '–'; }
summary::-webkit-details-marker { display: none; }
details p { margin: 0; padding: 0 20px 18px; color: #4a3d30; }
.foot { margin-top: 70px; color: var(--paper); }
#walk { display: block; width: 100%; height: 96px; image-rendering: pixelated; }
.foot-ground { background-color: #4b6e3a; background-image: var(--grass-tile); background-size: 96px 96px; border-top: 4px solid var(--ink); padding: 26px 0 70px; }
.foot-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: rgba(16, 36, 41, 0.86); padding: 14px 18px; box-shadow: 0 0 0 3px var(--ink); }
.foot-row nav { display: flex; gap: 16px; font: 500 16px var(--font-px); flex-wrap: wrap; }
.foot-row nav a { text-decoration: none; }
.foot-row nav a:hover { color: var(--gold); }
.fine { margin: 0 0 0 auto; font-size: 13px; opacity: 0.75; }

/* ---------- layar sedang ---------- */
@media (min-width: 1400px) { .wordmark { --s: 5; } }
@media (max-width: 1100px) {
  .day-bar { width: 160px; }
  .wordmark { --s: 3; }
  .cord { left: auto; right: 28px; }
}
/* ---------- HP: panel jadi lembar bawah ---------- */
@media (max-width: 760px) {
  .hud-top { grid-template-columns: auto 1fr auto; padding-left: 10px; padding-right: 10px; gap: 6px; }
  .brand span { display: none; }
  .day { justify-self: center; padding: 5px 8px; gap: 8px; }
  .day-bar { width: 64px; }
  .day-clock { font-size: 15px; min-width: 58px; }
  .day-clock img { width: 16px; height: 16px; }
  .hud-right .pill { display: none; }
  .hud-bl { left: 8px; }
  .hud-bl .block { display: none; }
  .ch[data-side="left"], .ch[data-side="right"] { left: 10px; right: 10px; width: auto; top: auto; bottom: 64px; max-height: 60vh; display: flex; flex-direction: column; align-items: flex-start; }
  .ch[data-side] > .box, .ch[data-side] > .talkbox, .ch[data-side] > .book { align-self: stretch; overflow: auto; overscroll-behavior: contain; min-height: 0; }
  .ch[data-side="right"] { top: auto; max-height: 60vh; bottom: 64px; }
  .ch[data-side="right"] > .tailor, .ch[data-side="right"] > .book { flex: 1 1 auto; }
  h2.scrub { font-size: 28px; margin: 8px 0 10px; }
  .quest { font-size: 12px; }
  .box { padding: 12px 14px; font-size: 15px; }
  .talkbox { grid-template-columns: 72px 1fr; gap: 10px; padding: 12px; }
  #nb-pic { width: 72px; height: 76px; }
  #nb-text { font-size: 16px; min-height: 42px; }
  .tb-who b { font-size: 19px; }
  .hold { min-width: 0; flex: 1; }
  .book { grid-template-columns: 1fr; }
  .page.left, .page.right { box-shadow: none; }
  .page.right { border-top: 4px solid #6b3d1f; }
  .st-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
  .slot canvas { width: 44px; height: 47px; }
  .st-name input { font-size: 18px; }
  .lead-s { display: none; }
  #ledger h2.scrub, #stitch h2.scrub { font-size: 22px; }
  .wordmark { --s: 1.75; }
  .tag { margin-top: 18px; }
  .tag-sub { font-size: 14px; max-width: 320px; }
  .cord { right: 18px; }
  .cord { top: 60px; }
  .rope { height: calc(10vh + var(--pull)); }
  .knot canvas { width: 44px; height: 48px; }
  .fine { margin: 0; width: 100%; }
}
@media (max-width: 380px) { .wordmark { --s: 1.5; } }

@media (prefers-reduced-motion: reduce) {
  .live-dot, #nb-text::after, .wm-letter, .knot canvas, .or.go { animation: none !important; }
}

/* kartu CA di layar judul: sebelum launch = hitung mundur, sesudah = alamat + salin + beli */
.ca-card { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; margin: 18px auto 0; max-width: min(640px, 92vw); padding: 10px 14px; background: rgba(13, 30, 35, 0.86); color: var(--paper); font: 600 15px var(--font-px);
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 0 0 2px rgba(255, 207, 90, 0.45); pointer-events: auto; }
.ca-card .ca-k { color: var(--gold); letter-spacing: 0.06em; }
.ca-card b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ca-card .ca-sub { font-weight: 500; font-size: 13px; opacity: 0.75; }
.ca-card.live { box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 0 0 2px var(--gold); }
.ca-addr { background: none; border: 0; color: var(--paper); font: 600 14px var(--font-px); cursor: copy; word-break: break-all; padding: 0; text-align: center; }
.ca-act { display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 760px) { .ca-card { font-size: 13px; margin-top: 12px; } .ca-addr { font-size: 12px; } }

/* font pixel punya ligatur "fi" yang terbaca seperti "A" → matikan di semua elemen */
*, *::before, *::after { font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "clig" 0; }