:root {
  --bg: #0d1517;
  --bg2: #142326;
  --panel: #1b2f33;
  --line: #2b4449;
  --text: #f3f6f6;
  --muted: #8fa7aa;
  --pink: #ed1b76;
  --teal: #249f9c;
  --green: #2fbf71;
  --red: #e5243b;
  --opt0: #ed1b76;
  --opt1: #1f8fd6;
  --opt2: #e3a21a;
  --opt3: #27a35a;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at top, var(--bg2), var(--bg) 70%) fixed;
  color: var(--text);
  font-family: 'Montserrat', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, .display { font-family: 'Bebas Neue', 'Montserrat', sans-serif; letter-spacing: .04em; font-weight: 400; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 16px; text-align: center; }
.screen.top { justify-content: flex-start; }

.logo { display: flex; gap: 14px; justify-content: center; font-size: 34px; color: var(--pink); }
.logo span { width: 44px; height: 44px; border: 5px solid currentColor; display: grid; place-items: center; }
.logo .c { border-radius: 50%; }
.logo .t { border: none; width: 0; height: 0; border-left: 26px solid transparent; border-right: 26px solid transparent; border-bottom: 44px solid currentColor; position: relative; }
.logo .t::after { content: ''; position: absolute; left: -15px; top: 13px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 26px solid var(--bg2); }
.title-big { font-size: clamp(40px, 9vw, 88px); color: var(--text); line-height: 1; }
.title-big b { color: var(--pink); font-weight: 400; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.card.wide { max-width: 900px; text-align: left; }

input, select, textarea { background: var(--bg); border: 2px solid var(--line); border-radius: 10px; padding: 14px; width: 100%; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--teal); }
input.pin { font-size: 32px; text-align: center; letter-spacing: .3em; font-weight: 800; }

.btn { background: var(--pink); color: #fff; border: none; border-radius: 10px; padding: 14px 22px; font-weight: 800; cursor: pointer; text-transform: uppercase; letter-spacing: .05em; transition: transform .1s, filter .1s; }
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.teal { background: var(--teal); }
.btn.ghost { background: transparent; border: 2px solid var(--line); color: var(--text); }
.btn.small { padding: 8px 12px; font-size: 13px; }
.btn.big { font-size: 22px; padding: 18px 40px; }
.error { color: #ff6b81; min-height: 1.2em; font-weight: 600; }
.muted { color: var(--muted); }

/* ---------- Jawapan ABCD ---------- */
.opt-0 { background: var(--opt0); }
.opt-1 { background: var(--opt1); }
.opt-2 { background: var(--opt2); }
.opt-3 { background: var(--opt3); }
.letter { display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 8px; background: rgba(0,0,0,.25); font-weight: 900; flex: none; }

/* Telefon pemain */
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 560px; flex: 1; max-height: 70vh; }
.answers button { border: none; border-radius: 14px; color: #fff; font-weight: 800; font-size: 18px; padding: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,.3); }
.answers button .letter { font-size: 26px; }
.answers button:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.answers button.picked { outline: 5px solid #fff; }
.answers button.dim { opacity: .3; }

.phone-q { font-size: 18px; font-weight: 700; max-width: 560px; }
.badge { background: var(--panel); border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px; font-weight: 700; }
.player-tag { position: fixed; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; pointer-events: none; font-weight: 700; font-size: 14px; }
.player-tag span { background: rgba(0,0,0,.4); padding: 6px 12px; border-radius: 999px; }

.num-big { font-family: 'Bebas Neue', sans-serif; font-size: 96px; color: var(--teal); line-height: 1; }

/* Keputusan di telefon */
#result.safe { background: radial-gradient(circle, #135c3b, #0b2a1c); }
#result.dead { background: radial-gradient(circle, #6a0f1c, #1a0508); }
.result-word { font-family: 'Bebas Neue', sans-serif; font-size: clamp(64px, 20vw, 140px); line-height: .9; }
#result.safe .result-word { color: var(--green); }
#result.dead .result-word { color: var(--red); }
.bullet-hole { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, #000 18%, #3a0a10 30%, transparent 62%); pointer-events: none; }
.bullet-hole::before, .bullet-hole::after { content: ''; position: absolute; left: 50%; top: 50%; width: 120px; height: 2px; background: rgba(255,255,255,.35); transform: translate(-50%, -50%) rotate(30deg); }
.bullet-hole::after { transform: translate(-50%, -50%) rotate(-50deg); }

@keyframes shake {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-12px, 6px); }
  40% { transform: translate(10px, -8px); }
  60% { transform: translate(-6px, 4px); }
  80% { transform: translate(4px, -2px); }
}

/* ---------- Host / projektor ---------- */
.host-bar { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; z-index: 5; gap: 8px; }
.pin-box { background: #fff; color: #111; border-radius: 14px; padding: 12px 28px; }
.pin-box .display { font-size: clamp(56px, 10vw, 120px); line-height: 1; letter-spacing: .08em; }
.lobby-top { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; justify-content: center; }
#qr { background: #fff; padding: 10px; border-radius: 12px; }
#qr img, #qr canvas { display: block; width: 150px; height: 150px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 1200px; }
.chip { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 700; cursor: pointer; animation: pop .3s; }
.chip b { color: var(--teal); margin-right: 6px; }
.chip.off { opacity: .4; }
.chip:hover { border-color: var(--red); text-decoration: line-through; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } }

.q-head { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1300px; gap: 16px; }
.q-text { font-size: clamp(26px, 4vw, 52px); font-weight: 800; max-width: 1300px; line-height: 1.2; }
.timer { width: 110px; height: 110px; border-radius: 50%; background: var(--pink); display: grid; place-items: center; font-family: 'Bebas Neue', sans-serif; font-size: 60px; flex: none; }
.timer.low { animation: pulse .5s infinite alternate; background: var(--red); }
@keyframes pulse { to { transform: scale(1.08); } }
.host-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; max-width: 1300px; }
.host-opt { border-radius: 14px; padding: 22px; font-size: clamp(20px, 2.6vw, 34px); font-weight: 800; display: flex; align-items: center; gap: 16px; text-align: left; position: relative; overflow: hidden; color: #fff; }
.host-opt .count { margin-left: auto; font-family: 'Bebas Neue', sans-serif; font-size: 1.4em; }
.host-opt.wrong { opacity: .25; }
.host-opt.right { outline: 6px solid #fff; animation: pop .4s; }
.answered-count { font-size: 22px; font-weight: 800; }

/* Grid tembakan */
.reveal-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 16px; width: 100%; max-width: 1600px; align-items: start; }
.reveal-summary { display: flex; gap: 24px; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 40px; }
.reveal-summary .alive { color: var(--green); }
.reveal-summary .dead { color: var(--red); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; max-height: 58vh; overflow-y: auto; padding: 4px; }
.grid.dense { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 5px; }
.p-card { background: var(--panel); border: 2px solid var(--teal); border-radius: 10px; padding: 8px 6px; position: relative; overflow: hidden; transition: opacity .4s, filter .4s; }
.p-card .n { font-family: 'Bebas Neue', sans-serif; font-size: 26px; line-height: 1; color: var(--teal); }
.p-card .nm { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid.dense .p-card .n { font-size: 20px; }
.grid.dense .p-card .nm { font-size: 11px; }
.p-card.safe { border-color: var(--green); box-shadow: 0 0 14px rgba(47,191,113,.5); }
.p-card.shot { animation: shot .45s ease-out forwards; }
@keyframes shot {
  0% { background: #fff; transform: scale(1.15); }
  30% { background: var(--red); transform: scale(1) translateX(-4px); }
  100% { background: #3a0d14; transform: none; }
}
.p-card.dead { border-color: var(--red); filter: grayscale(.7); opacity: .55; }
.p-card.dead::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; color: var(--red); font-weight: 900; opacity: .85; }

.flash { position: fixed; inset: 0; background: var(--red); opacity: 0; pointer-events: none; z-index: 20; }
.flash.go { animation: flash .25s; }
@keyframes flash { 0% { opacity: .22; } 100% { opacity: 0; } }

.board { display: flex; flex-direction: column; gap: 6px; }
.board-row { display: flex; gap: 10px; align-items: center; background: var(--panel); border-radius: 10px; padding: 10px 12px; font-weight: 700; text-align: left; }
.board-row .r { font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: var(--pink); width: 28px; }
.board-row .s { margin-left: auto; font-family: 'Bebas Neue', sans-serif; font-size: 24px; }

/* Podium */
.podium { display: flex; align-items: flex-end; gap: 16px; justify-content: center; margin-top: 40px; }
.podium .col { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 200px; }
.podium .stand { width: 100%; border-radius: 12px 12px 0 0; display: grid; place-items: center; font-family: 'Bebas Neue', sans-serif; font-size: 72px; animation: rise .8s ease-out both; }
.podium .p1 .stand { height: 240px; background: #d4a514; animation-delay: 1.4s; }
.podium .p2 .stand { height: 180px; background: #9aa6ab; animation-delay: .7s; }
.podium .p3 .stand { height: 130px; background: #b06a2d; }
.podium .who { font-size: 22px; font-weight: 800; animation: pop .4s both; }
.podium .p1 .who { animation-delay: 2s; } .podium .p2 .who { animation-delay: 1.3s; } .podium .p3 .who { animation-delay: .6s; }
@keyframes rise { from { transform: scaleY(0); transform-origin: bottom; } }

/* Dashboard & editor */
.list { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; gap: 8px; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; flex-wrap: wrap; }
.row .grow { flex: 1; min-width: 160px; font-weight: 700; }
.q-edit { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.q-edit .opt-row { display: flex; gap: 8px; align-items: center; }
.q-edit .opt-row input[type=radio] { width: 22px; height: 22px; flex: none; accent-color: var(--green); }
.q-edit .opt-row .letter { color: #fff; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

@media (max-width: 900px) {
  .reveal-wrap { grid-template-columns: 1fr; }
  .host-opts { grid-template-columns: 1fr; }
  .podium .col { width: 30vw; }
}

/* ---------- Babak Lampu Hijau, Lampu Merah ---------- */
.field { position: relative; width: 100%; max-width: 1700px; height: calc(100vh - 290px); min-height: 360px; border-radius: 16px; overflow: hidden; border: 3px solid #0b0f10; }
.field .wall { position: absolute; left: 0; right: 0; top: 0; height: 16%; background:
  radial-gradient(ellipse 120px 40px at 15% 45%, #fff 60%, transparent 62%),
  radial-gradient(ellipse 160px 50px at 70% 35%, #fff 60%, transparent 62%),
  radial-gradient(ellipse 90px 30px at 90% 60%, #fff 60%, transparent 62%),
  linear-gradient(#7fc6ec, #a9dcf5); border-bottom: 6px solid #5e8fa8; }
.field .sand { position: absolute; left: 0; right: 0; top: 16%; bottom: 0; background:
  radial-gradient(circle at 20% 70%, rgba(0,0,0,.05) 0 2px, transparent 3px) 0 0 / 38px 38px,
  linear-gradient(#e4c48c, #d3ad6c); }
.field .finish { position: absolute; left: 0; right: 0; top: 27%; height: 6px; background: repeating-linear-gradient(90deg, #c8102e 0 30px, #fff 30px 60px); opacity: .9; }
.doll { position: absolute; left: 50%; top: 1%; height: 27%; aspect-ratio: 1 / 2; transform: translateX(-50%); z-index: 3; filter: drop-shadow(0 6px 4px rgba(0,0,0,.35)); }
.doll svg { width: 100%; height: 100%; display: block; }
.doll .face { opacity: 0; }
.doll.front .face { opacity: 1; }
.doll .eye { fill: #141414; }
.doll.front.scan .eye { fill: #ff2a2a; filter: drop-shadow(0 0 4px #f00); animation: eyeglow .25s infinite alternate; }
@keyframes eyeglow { to { fill: #ffd0d0; } }
.doll.turning { animation: turn .4s ease-in-out; }
@keyframes turn { 50% { transform: translateX(-50%) scaleX(0.05); } }

.field-call { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px, 9vw, 130px); z-index: 6; pointer-events: none; opacity: 0; text-shadow: 0 4px 0 rgba(0,0,0,.35); }
.field-call.show { animation: callpop 1.2s ease-out forwards; }
.field-call.green { color: #3ee07f; }
.field-call.red { color: #ff2a3c; }
@keyframes callpop { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1.05); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }

.answer-banner { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); z-index: 5; background: rgba(11,15,16,.88); border: 3px solid var(--green); color: #fff; border-radius: 12px; padding: 8px 18px; font-weight: 800; font-size: clamp(16px, 1.8vw, 26px); white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .3s; }
.answer-banner.show { opacity: 1; animation: pop .4s; }
.field .answer-banner { left: 2%; transform: none; top: 18%; max-width: 38%; white-space: normal; }

.runners { position: absolute; inset: 0; z-index: 4; }
.runner { position: absolute; left: 0; top: 0; width: 64px; transform-origin: 0 0; display: flex; flex-direction: column; align-items: center; will-change: transform; }
.runner .fig { position: relative; width: 26px; height: 40px; transform-origin: 50% 100%; }
.runner .head { position: absolute; left: 6px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #f1c9a5; border: 2px solid #3b2a1e; border-top-color: #141414; }
.runner .body { position: absolute; left: 1px; top: 13px; width: 24px; height: 26px; border-radius: 6px 6px 3px 3px; background: #1f7a6b; color: #fff; font: 800 9px/26px 'Montserrat', sans-serif; text-align: center; box-shadow: inset 0 -5px 0 rgba(0,0,0,.2); }
.runner .tag { margin-top: 2px; max-width: 64px; font-size: 10px; font-weight: 800; color: #1c1c1c; background: rgba(255,255,255,.75); padding: 0 4px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runners.dense .runner { width: 50px; }
.runners.dense .runner .fig { transform: scale(.8); }
.runners.dense .runner .tag { font-size: 9px; max-width: 50px; }
.runner.walk .fig { animation: walk .32s infinite alternate ease-in-out; }
@keyframes walk { from { transform: rotate(-7deg) translateY(0); } to { transform: rotate(7deg) translateY(-3px); } }
.runner.hit .fig { animation: hit .35s ease-out forwards; }
@keyframes hit { 0% { filter: brightness(3); } 100% { transform: rotate(-85deg) translate(-4px, 4px); filter: grayscale(.8) brightness(.7); } }
.runner.down .fig { transform: rotate(-85deg) translate(-4px, 4px); filter: grayscale(.8) brightness(.7); }
.runner.down::before { content: ''; position: absolute; left: 50%; top: 22px; width: 46px; height: 22px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, #9b0a1a 0 45%, rgba(155,10,26,.6) 60%, transparent 72%); z-index: -1; animation: pool .6s ease-out; }
@keyframes pool { from { transform: translateX(-50%) scale(.2); } }
.runner.down .tag { background: rgba(229,36,59,.85); color: #fff; text-decoration: line-through; }
.runner.safe .tag { background: var(--green); color: #fff; }
.runner.safe .fig { animation: cheer .5s ease-in-out 2; }
@keyframes cheer { 50% { transform: translateY(-10px); } }
.crosshair { position: absolute; width: 60px; height: 60px; margin: -18px 0 0 -18px; border: 3px solid #ff2a2a; border-radius: 50%; z-index: 7; pointer-events: none; animation: aim .2s ease-out; }
.crosshair::before, .crosshair::after { content: ''; position: absolute; background: #ff2a2a; }
.crosshair::before { left: 50%; top: -10px; bottom: -10px; width: 3px; transform: translateX(-50%); }
.crosshair::after { top: 50%; left: -10px; right: -10px; height: 3px; transform: translateY(-50%); }
@keyframes aim { from { transform: scale(2.2); opacity: 0; } }

.reveal-bottom { display: grid; grid-template-columns: 1fr 340px; gap: 12px; align-items: start; width: 100%; max-width: 1700px; transition: opacity .5s; }
.reveal-bottom.hidden-soft { opacity: 0; pointer-events: none; }
.host-opts.compact { grid-template-columns: repeat(4, 1fr); max-width: none; }
.host-opts.compact .host-opt { padding: 10px 12px; font-size: clamp(14px, 1.3vw, 19px); }
.top5 { max-width: none; padding: 8px 12px; gap: 3px; }
.top5 .board { gap: 3px; }
.top5 .board-row { padding: 2px 10px; font-size: 14px; }
.top5 .board-row .r, .top5 .board-row .s { font-size: 18px; }

/* Telefon: menunggu babak di skrin besar */
#watch { background: radial-gradient(circle, #1d3a2c, #0d1517); }
#watch.red { background: radial-gradient(circle, #4a0b14, #0d1517); }
.watch-word { font-family: 'Bebas Neue', sans-serif; font-size: clamp(54px, 16vw, 110px); line-height: .95; }
#watch .watch-word { color: #3ee07f; }
#watch.red .watch-word { color: #ff2a3c; animation: pulse .4s infinite alternate; }

@media (max-width: 900px) {
  .reveal-bottom { grid-template-columns: 1fr; }
  .host-opts.compact { grid-template-columns: 1fr 1fr; }
}

/* Kesan patung menembak */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; overflow: visible; }
.doll.firing { filter: drop-shadow(0 0 18px rgba(255, 0, 0, .9)) drop-shadow(0 6px 4px rgba(0,0,0,.35)); }
.doll.firing svg { animation: recoil .12s infinite alternate; }
@keyframes recoil { to { transform: translateY(2px) scale(1.02); } }
.field.shake { animation: fshake .18s; }
@keyframes fshake { 25% { transform: translate(-5px, 3px); } 50% { transform: translate(4px, -3px); } 75% { transform: translate(-2px, 2px); } }

/* Nama sentiasa kelihatan walaupun pemain dah rebah */
.runner .fig { z-index: 1; }
.runner .tag { position: relative; z-index: 2; }
.runner.down .fig, .runner.hit .fig { transform-origin: 50% 85%; }
@keyframes hit { 0% { filter: brightness(3); } 100% { transform: rotate(-80deg) scale(.85) translate(6px, -2px); filter: grayscale(.8) brightness(.7); } }
.runner.down .fig { transform: rotate(-80deg) scale(.85) translate(6px, -2px); }
.runner.down::before { top: 16px; width: 40px; height: 18px; }



/* Gambar soalan */
.q-img { max-width: min(1300px, 100%); max-height: 42vh; object-fit: contain; border-radius: 12px; background: #000; border: 3px solid var(--line); }
#g-question.has-img { gap: 10px; }
#g-question.has-img .q-text { font-size: clamp(22px, 2.8vw, 40px); }
#g-question.has-img .host-opt { padding: 14px 18px; font-size: clamp(18px, 2vw, 28px); }
#g-question.has-img .timer { width: 90px; height: 90px; font-size: 48px; }
.phone-img { max-width: 100%; max-height: 26vh; object-fit: contain; border-radius: 10px; background: #000; }
.q-edit-img { max-height: 90px; border-radius: 8px; border: 1px solid var(--line); }

/* Butang di skrin podium sentiasa kelihatan */
#g-ended .toolbar { position: fixed; top: 12px; right: 16px; z-index: 5; }



/* Mesej ralat kosong tak ambil ruang (kotak kekal seimbang) */
.error:empty { display: none; }
@media (max-width: 600px) {
  .row { gap: 6px 8px; }
  .row .grow, .row .muted { flex-basis: 100%; margin-top: -4px; }
  .row .grow { margin-top: 0; }
}

/* Homepage: muat tepat satu skrin telefon, seimbang di tengah */
.join-screen { height: 100vh; height: 100dvh; min-height: 0; justify-content: center; gap: clamp(10px, 2.2vh, 20px); padding: 56px 16px 16px; overflow: hidden; }
.join-screen .title-big { font-size: clamp(40px, 13vw, 72px); }
.join-screen .card { padding: clamp(14px, 2.5vh, 20px); gap: clamp(8px, 1.6vh, 12px); }
.join-screen input { padding: clamp(10px, 1.8vh, 14px); }
.join-screen input.pin { font-size: clamp(24px, 7vw, 32px); }
.join-screen .btn.big { padding: clamp(12px, 2vh, 18px) 40px; font-size: clamp(18px, 5vw, 22px); }
.home-hero { display: flex; gap: clamp(16px, 6vw, 28px); justify-content: center; align-items: center; height: clamp(70px, 14vh, 120px); --s: clamp(44px, 13vw, 72px); }
.home-hero .shape { display: block; width: var(--s); height: var(--s); border: calc(var(--s) / 10) solid var(--pink); opacity: .35; animation: glow 2.4s infinite ease-in-out; }
.home-hero .circle { border-radius: 50%; }
.home-hero .triangle { width: 0; height: 0; border: none; border-left: calc(var(--s) * .6) solid transparent; border-right: calc(var(--s) * .6) solid transparent; border-bottom: calc(var(--s) * 1.04) solid var(--pink); animation-delay: .8s; }
.home-hero .square { border-radius: 4px; animation-delay: 1.6s; }
@keyframes glow {
  0%, 100% { opacity: .3; transform: translateY(0) scale(1); filter: none; }
  20% { opacity: 1; transform: translateY(-10px) scale(1.08); filter: drop-shadow(0 0 14px var(--pink)); }
  40% { opacity: .3; transform: translateY(0) scale(1); filter: none; }
}

/* Pilihan jawapan panjang: jangan terkeluar skrin */
.answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.answers button span:last-child { overflow-wrap: anywhere; }
.answers.long { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.answers.long button { flex-direction: row; justify-content: flex-start; text-align: left; font-size: clamp(14px, 4vw, 17px); padding: 10px 14px; gap: 12px; }
.answers.long button .letter { font-size: 20px; }
.host-opt span:nth-child(2) { overflow-wrap: anywhere; min-width: 0; }
.host-opts.long .host-opt { font-size: clamp(18px, 2.1vw, 30px); padding: 16px 20px; }
.host-opts.compact.long .host-opt { font-size: clamp(11px, 0.95vw, 14px); padding: 8px 10px; gap: 8px; }
.host-opts.compact.long .host-opt .letter { font-size: 14px; }
.field .answer-banner { font-size: clamp(14px, 1.5vw, 22px); }

/* Log masuk / daftar penganjur */
.auth-card { gap: 12px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); border-radius: 10px; padding: 4px; gap: 4px; }
.tab { background: transparent; border: none; border-radius: 8px; padding: 10px; font-weight: 800; color: var(--muted); cursor: pointer; text-transform: uppercase; letter-spacing: .05em; font-size: 13px; }
.tab.active { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.auth-note { font-size: 13px; margin: 0; }
.user-bar { width: 100%; max-width: 900px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; text-align: left; }
.user-bar b { color: var(--text); }
.admin-badge { margin-left: 8px; font-size: 11px; padding: 2px 8px; color: var(--pink); }

/* Butang bunyi homepage: ikon kecil & samar di bawah */
.sound-btn { position: fixed; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 10; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(13,21,23,.6); color: var(--muted); display: grid; place-items: center; cursor: pointer; opacity: .55; transition: opacity .2s, color .2s; padding: 0; }
.sound-btn:hover, .sound-btn:focus-visible { opacity: 1; color: var(--text); }
.sound-btn svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-btn .ico-off, .sound-btn.off .ico-on { display: none; }
.sound-btn.off .ico-off { display: block; }
.sound-btn svg path[fill="none"] { fill: none; }
a.btn { text-decoration: none; display: inline-block; }

/* Login host: logo kekal di tempat sama bila tukar tab (blok dikira ikut tinggi borang Sign up) */
#login { justify-content: flex-start; padding-top: max(16px, calc((100vh - 540px) / 2)); }

/* Halaman admin */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; max-width: 900px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-align: center; }
.stat .v { font-family: 'Bebas Neue', sans-serif; font-size: 44px; line-height: 1; color: var(--pink); }
.stat .l { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 4px; }
.search { width: auto; min-width: 220px; padding: 9px 12px; }
.user-row { align-items: flex-start; }
.user-row .u-name { font-weight: 800; display: flex; align-items: center; gap: 4px; }
.user-row .u-email { color: var(--teal); font-weight: 700; font-size: 14px; margin-top: 2px; word-break: break-all; }
.user-row .u-meta { color: var(--muted); font-weight: 500; font-size: 13px; margin-top: 3px; }
@media (max-width: 600px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .search { min-width: 0; width: 100%; }
}

/* Jalur 'View as' (admin melihat sebagai penganjur lain) */
.imp-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 8px 16px; background: #f6c431; color: #1a1a1a; font-size: 14px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.imp-banner .btn { background: #1a1a1a; color: #fff; }
body.viewing-as .screen { padding-top: 60px; }


/* Halaman keputusan sesi */
.res-title { font-size: clamp(32px, 5vw, 52px); text-align: center; }
.table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--line); }
.res-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.res-table th { background: var(--bg); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 10px; text-align: left; position: sticky; top: 0; }
.res-table td { padding: 9px 10px; border-top: 1px solid var(--line); }
.res-table td.rank { font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: var(--pink); }
.res-table td.name { font-weight: 800; }
.res-table td.score { font-family: 'Bebas Neue', sans-serif; font-size: 20px; }
.res-table tr.top1 td.rank::after { content: ' 🥇'; } .res-table tr.top2 td.rank::after { content: ' 🥈'; } .res-table tr.top3 td.rank::after { content: ' 🥉'; }
.res-table td.ans { text-align: center; font-weight: 800; font-size: 13px; }
.res-table td.ans.ok { color: var(--green); }
.res-table td.ans.bad { color: #ff6b81; }
.res-table td.ans.none { color: var(--muted); }
.legend { font-size: 12px; }
.q-res { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.q-res-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.q-res-num { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: var(--pink); }
.q-res-text { font-weight: 800; flex: 1; min-width: 200px; }
.q-res-pct { font-weight: 800; font-size: 14px; }
.q-res-pct.good { color: var(--green); } .q-res-pct.mid { color: #f6c431; } .q-res-pct.bad { color: #ff6b81; }
.badge.hard { background: rgba(229,36,59,.18); border-color: var(--red); color: #ff6b81; font-size: 11px; padding: 2px 8px; }
.pct-bar { height: 8px; background: var(--panel); border-radius: 99px; overflow: hidden; }
.pct-bar .fill { height: 100%; background: var(--green); border-radius: 99px; }
.q-res-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.q-res-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: #fff; font-weight: 700; font-size: 14px; opacity: .45; }
.q-res-opt.right { opacity: 1; outline: 3px solid #fff; }
.q-res-opt .o-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.q-res-opt .o-count { font-family: 'Bebas Neue', sans-serif; font-size: 22px; }
@media (max-width: 600px) { .q-res-opts { grid-template-columns: 1fr; } }

/* Ikon bunyi di lobby host: sama gaya homepage, duduk dalam bar atas */
.sound-btn.host-sound { position: relative; left: auto; bottom: auto; transform: none; }
.sound-btn.needs-unlock::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); animation: pulse .8s infinite alternate; }

/* Label kecil bergerak 'click for sound' (hanya bila bunyi belum aktif) */
.sound-wrap { display: inline-flex; align-items: center; gap: 8px; }
.sound-hint { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); opacity: .75; white-space: nowrap; cursor: pointer; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); opacity: .45; } 50% { transform: translateX(6px); opacity: .9; } }
html { background: var(--bg); }


/* ---------- Dashboard (ringkas, dikemaskan) ---------- */
.dash-card { gap: 14px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-head h3 { font-size: 28px; display: flex; align-items: center; gap: 10px; }
.card-head .count { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 800; background: var(--bg); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 2px 10px; letter-spacing: 0; }
.card-head .count:empty { display: none; }
.dash-row { padding: 14px 16px; gap: 12px; transition: border-color .15s, background .15s; }
.dash-row:hover { border-color: var(--teal); background: #0f1d20; }
.row-title { font-weight: 800; font-size: 15px; line-height: 1.35; }
.row-meta { color: var(--muted); font-size: 13px; font-weight: 500; margin-top: 3px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.row-actions .btn { min-width: 76px; text-align: center; }
.btn.danger:hover { border-color: var(--red); color: #ff6b81; }
.empty { color: var(--muted); padding: 22px; text-align: center; border: 2px dashed var(--line); border-radius: 12px; font-size: 14px; }
@media (max-width: 600px) {
  .dash-row .row-actions { width: 100%; }
  .dash-row .row-actions .btn { flex: 1; min-width: 0; }
}
.row-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }


/* Pautan kongsi */
.share-note { width: 100%; max-width: 420px; font-size: 14px; font-weight: 700; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.share-note.ready { color: var(--green); border-color: var(--green); }
.link-btn { background: none; border: none; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; padding: 2px 6px; border-radius: 6px; opacity: .7; }
.link-btn:hover { opacity: 1; color: var(--text); background: var(--panel); }

/* PIN tetap kuiz di dashboard */
.pin-tag { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; color: #111; border-radius: 10px; padding: 4px 12px; line-height: 1; flex: none; }
.pin-tag .pin-label { font-size: 9px; font-weight: 900; letter-spacing: .12em; color: #666; }
.pin-tag .pin-num { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: .08em; margin-top: 2px; }
@media (max-width: 600px) { .pin-tag { flex-direction: row; gap: 8px; padding: 6px 12px; } .pin-tag .pin-num { margin-top: 0; } }

/* QR lobby lebih besar (ikut saiz skrin) supaya mudah di-scan dari jauh */
#qr { padding: 12px; border-radius: 14px; }
#qr img, #qr canvas { width: clamp(180px, 26vh, 340px); height: clamp(180px, 26vh, 340px); }
.lobby-top { gap: 32px; }

/* Kredit pembangun: ketam hijau kecil di bawah garis potong papan nama. Satu pusingan 10s:
   pegang → sepit bergerak ke garis potong & 'cut-cut' → papan terbelah & jatuh dekat sepit →
   ketam tunduk, sepit kutip → lengan & kepingan naik bersama → cantum & pegang semula.
   Semua animasi guna tempoh & peratus yang sama supaya serentak. */
.credit { position: fixed; right: 16px; bottom: 12px; z-index: 30; pointer-events: none; --crab-t: 10s; }
.crab-walker { display: flex; flex-direction: column; align-items: flex-start; }
.crab-sign { display: flex; position: relative; z-index: 0; margin-bottom: -9px; font-size: 10px; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--muted); }
.crab-sign .piece { background: rgb(27,47,51); border: 1px solid rgba(63,191,127,.35); padding: 2px 0 8px; animation: var(--crab-t) linear infinite; }
.crab-sign .piece.l { padding-left: 9px; padding-right: 3px; border-right: none; border-radius: 5px 0 0 5px; transform-origin: 100% 100%; animation-name: piece-l; }
.crab-sign .piece.r { padding-right: 9px; border-left: none; border-radius: 0 5px 5px 0; transform-origin: 0% 100%; animation-name: piece-r; }
.crab-sign b { color: var(--text); font-weight: 800; }
.crab { display: block; width: 40px; height: 25px; position: relative; z-index: 1; margin-left: 50px; animation: crab-dip var(--crab-t) linear infinite; }
.crab svg { width: 100%; height: 100%; display: block; overflow: visible; }
.crab .arm { animation: var(--crab-t) linear infinite; }
.crab .arm.l { animation-name: arm-l; }
.crab .arm.r { animation-name: arm-r; }
.crab .jaw { transform-box: fill-box; transform-origin: 50% 100%; animation: var(--crab-t) linear infinite; }
.crab .jaw.a { animation-name: snip-a; }
.crab .jaw.b { animation-name: snip-b; }
.crab .eye { animation: crab-blink var(--crab-t) linear infinite; transform-box: fill-box; transform-origin: center; }

/* Garis masa (sama untuk semua):
   0–32 pegang | 32–37 sepit ke garis potong | 37–45 cut-cut | 46 terbelah | 47–49 lengan undur
   49–55 jatuh | 55–58 lantun | 58–64 tunduk, lengan turun ke kepingan | 64–67 cengkam
   67–82 lengan & kepingan naik bersama | 82–86 cantum | 86–100 pegang */
@keyframes arm-l { 0%, 32% { transform: translate(0, 0); } 37%, 45% { transform: translate(12px, -1px); } 49%, 58% { transform: translate(0, 0); } 64%, 67% { transform: translate(-3px, 15px); } 82%, 100% { transform: translate(0, 0); } }
@keyframes arm-r { 0%, 32% { transform: translate(0, 0); } 37%, 45% { transform: translate(-12px, -1px); } 49%, 58% { transform: translate(0, 0); } 64%, 67% { transform: translate(3px, 15px); } 82%, 100% { transform: translate(0, 0); } }
@keyframes snip-a { 0%, 37%, 46%, 63%, 100% { transform: rotate(-10deg); } 39%, 43%, 64.5% { transform: rotate(-42deg); } 41%, 45%, 66%, 82% { transform: rotate(4deg); } 86% { transform: rotate(-10deg); } }
@keyframes snip-b { 0%, 37%, 46%, 63%, 100% { transform: rotate(10deg); } 39%, 43%, 64.5% { transform: rotate(42deg); } 41%, 45%, 66%, 82% { transform: rotate(-4deg); } 86% { transform: rotate(10deg); } }
@keyframes crab-dip { 0%, 58%, 82%, 100% { transform: translateY(0); } 64%, 67% { transform: translateY(2px); } }
@keyframes piece-l {
  0%, 45% { transform: translate(0, 0) rotate(0); }
  46%, 49% { transform: translate(-1.5px, 0) rotate(-3deg); }
  55% { transform: translate(-3px, 10px) rotate(-9deg); }
  56.5% { transform: translate(-3px, 8.5px) rotate(-8deg); }
  58%, 67% { transform: translate(-3px, 10px) rotate(-9deg); }
  82% { transform: translate(-1.5px, 0) rotate(-3deg); }
  86%, 100% { transform: translate(0, 0) rotate(0); }
}
@keyframes piece-r {
  0%, 45% { transform: translate(0, 0) rotate(0); }
  46%, 49% { transform: translate(1.5px, 0) rotate(3deg); }
  55% { transform: translate(3px, 10px) rotate(10deg); }
  56.5% { transform: translate(3px, 8.5px) rotate(9deg); }
  58%, 67% { transform: translate(3px, 10px) rotate(10deg); }
  82% { transform: translate(1.5px, 0) rotate(3deg); }
  86%, 100% { transform: translate(0, 0) rotate(0); }
}
@keyframes crab-blink { 0%, 20%, 24%, 100% { transform: scaleY(1); } 22% { transform: scaleY(.1); } 90% { transform: scaleY(1); } 92% { transform: scaleY(.1); } 94% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .credit * { animation: none !important; } }
@media (max-width: 600px) { .credit { right: 10px; } }

/* Kredit: kurang menonjol — lebih kecil, separuh lut sinar, warna dilembutkan */
.credit { transform: scale(.8); transform-origin: 100% 100%; opacity: .5; filter: saturate(.75); }

/* Butang fullscreen /live: kecil & samar di kiri bawah (sama gaya ikon bunyi) */
.sound-btn.fs-btn { left: 14px; bottom: max(14px, env(safe-area-inset-bottom)); transform: none; z-index: 31; }
.fs-btn svg { fill: none !important; }
.fs-btn .ico-exit, .fs-btn.on .ico-enter { display: none; }
.fs-btn.on .ico-exit { display: block; }

/* ---------- Lobby /live: hiasan semasa menunggu pemain ---------- */
#g-lobby { position: relative; overflow: hidden; }
#g-lobby > *:not(.lobby-bg):not(.guard):not(.host-bar) { position: relative; z-index: 2; }
#g-lobby > .host-bar { z-index: 5; }
.lobby-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.float-shape { position: absolute; bottom: -120px; width: var(--size); height: var(--size); border: calc(var(--size) / 9) solid var(--pink); animation: float-up var(--dur) linear var(--delay) infinite; }
.float-shape.c { border-radius: 50%; }
.float-shape.s { border-radius: 4px; border-color: var(--teal); }
.float-shape.t { border: none; width: 0; height: 0; border-left: calc(var(--size) / 2) solid transparent; border-right: calc(var(--size) / 2) solid transparent; border-bottom: calc(var(--size) * .87) solid var(--pink); }
@keyframes float-up { from { transform: translateY(0) rotate(0); } to { transform: translateY(calc(-100vh - 240px)) rotate(var(--spin)); } }

/* Pengawal bertopeng di kiri & kanan, bergoyang perlahan */
.guard { position: absolute; bottom: 0; height: 44vh; width: auto; z-index: 1; pointer-events: none; opacity: .9; filter: drop-shadow(0 10px 20px rgba(0,0,0,.5)); transform-origin: 50% 100%; animation: guard-sway 4.5s ease-in-out infinite; }
.guard.left { left: 3vw; }
.guard.right { right: 3vw; animation-delay: -2.2s; }
.guard .g-head { transform-box: fill-box; transform-origin: 50% 100%; animation: guard-look 6s ease-in-out infinite; }
.guard.right .g-head { animation-delay: -3s; }
@keyframes guard-sway { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-4px); } }
@keyframes guard-look { 0%, 35%, 100% { transform: rotate(0); } 45%, 60% { transform: rotate(-8deg); } 70%, 85% { transform: rotate(7deg); } }
@media (max-width: 1100px) { .guard { display: none; } }

/* Nama pemain baru 'lantun' masuk dengan cahaya hijau */
.chip.new { animation: chip-in .6s cubic-bezier(.3, 1.6, .5, 1) both, chip-glow 1.6s ease-out .2s; }
@keyframes chip-in { from { transform: scale(.2) translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes chip-glow { 0% { box-shadow: 0 0 0 0 rgba(47,191,113,.9); border-color: var(--green); } 100% { box-shadow: 0 0 0 14px rgba(47,191,113,0); } }
.chip { animation: none; }

/* Kiraan pemain berdenyut */
.answered-count.bump { animation: count-bump .45s ease-out; }
@keyframes count-bump { 40% { transform: scale(1.35); color: var(--green); } }

/* Teks bergilir di bawah START */
.lobby-tip { font-size: clamp(16px, 1.6vw, 22px); font-weight: 700; color: var(--muted); letter-spacing: .02em; transition: opacity .4s, transform .4s; min-height: 1.4em; }
.lobby-tip.fade { opacity: 0; transform: translateY(6px); }
.lobby-tip .dots i { font-style: normal; animation: dot 1.4s infinite; opacity: .2; }
.lobby-tip .dots i:nth-child(2) { animation-delay: .2s; } .lobby-tip .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 30% { opacity: 1; } }

/* PIN berkilau perlahan */
#g-lobby .pin-box { position: relative; overflow: hidden; }
#g-lobby .pin-box::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); animation: shine 5s ease-in-out infinite; }
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { #g-lobby *, #g-lobby *::after { animation: none !important; } }

/* Homepage: ikon bunyi di atas kanan, sama gaya /live */
.home-sound-wrap { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 10; }

/* ---------- Homepage: efek ringan ---------- */
.join-screen { position: relative; }
.join-screen > *:not(.lobby-bg):not(.home-sound-wrap) { position: relative; z-index: 2; }
/* 'GAME' menyala macam neon dengan kelipan halus */
.join-screen .title-big b { animation: neon 5s ease-in-out infinite; }
@keyframes neon {
  0%, 100% { text-shadow: 0 0 6px rgba(237,27,118,.6), 0 0 18px rgba(237,27,118,.35); }
  50% { text-shadow: 0 0 10px rgba(237,27,118,.9), 0 0 30px rgba(237,27,118,.55); }
  62% { opacity: 1; } 63% { opacity: .55; } 64% { opacity: 1; } 66% { opacity: .7; } 67% { opacity: 1; }
}
/* Kotak borang bercahaya perlahan (merah jambu ↔ hijau kebiruan) */
.join-screen #join-form { animation: card-glow 7s ease-in-out infinite; }
@keyframes card-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(237,27,118,.25), 0 10px 40px rgba(237,27,118,.12); }
  50% { box-shadow: 0 0 0 1px rgba(36,159,156,.35), 0 10px 40px rgba(36,159,156,.16); }
}
/* JOIN 'hidup' bila sedia */
#join-form.ready .btn.big { animation: join-ready 1.3s ease-in-out infinite; }
@keyframes join-ready {
  0%, 100% { box-shadow: 0 0 0 0 rgba(237,27,118,.55); transform: scale(1); }
  50% { box-shadow: 0 0 0 10px rgba(237,27,118,0); transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) { .join-screen *, .join-screen #join-form { animation: none !important; } }

/* ---------- Babak gaya Roblox (.field.blocky) ---------- */
.field.blocky .sand { background:
  linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px) 0 0 / 40px 40px,
  linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px) 0 0 / 40px 40px,
  linear-gradient(#e6c58a, #d6ae6a); }
.field.blocky .finish { height: 8px; background: repeating-linear-gradient(90deg, #c8102e 0 24px, #fff 24px 48px); box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.field.blocky .doll { filter: drop-shadow(0 6px 0 rgba(0,0,0,.25)); }
.field.blocky .doll.turning { animation: bkturn .4s steps(4, end); }
@keyframes bkturn { 50% { transform: translateX(-50%) scaleX(0.05); } }
.field .deco { position: absolute; z-index: 2; pointer-events: none; }
.field .deco svg { width: 100%; height: 100%; display: block; }
.field .tree { top: 2%; height: 26%; aspect-ratio: 80 / 110; filter: drop-shadow(0 5px 0 rgba(0,0,0,.18)); }
.field .tree.t1 { left: calc(50% - 22%); }
.field .tree.t2 { left: calc(50% + 12%); height: 20%; top: 8%; }
.field .fguard { top: 9%; height: min(18%, 22vw); aspect-ratio: 1 / 2; animation: guardidle 2.4s ease-in-out infinite; }
.field .fguard.g1 { right: 13%; }
.field .fguard.g2 { right: 4%; animation-delay: -1.2s; }
@keyframes guardidle { 50% { transform: translateY(-3px); } }

.blocky .runner .fig { width: 26px; height: 40px; background: var(--bk-sprite) 0 0 / 130px 40px no-repeat; }
.bk-num { position: absolute; left: 5px; top: 13px; width: 16px; height: 13px; color: #fff; font: 800 7px/13px 'Montserrat', sans-serif; text-align: center; }
.blocky .runner.walk .fig { animation: bkwalk calc(var(--stride, .32s) * 2) var(--sdelay, 0s) steps(4, jump-none) infinite; }
@keyframes bkwalk { from { background-position: 0 0; } to { background-position: -78px 0; } }
.blocky .runner.hit .fig { animation: none; filter: brightness(3) saturate(0); }
.blocky .runner.down .fig { visibility: hidden; }
.blocky .runner.down::before { display: none; }
.field .rubble { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.blocky .runner.safe .fig { animation: bkjump .45s ease-in-out 3; }
@keyframes bkjump { 50% { transform: translateY(-9px); } }
.blocky .runner.safe .fig { background-position: -104px 0; }
@media (prefers-reduced-motion: reduce) { .field .fguard { animation: none; } }

/* Ketam kredit disorok semasa bermain / di halaman yang tidak perlu */
body.no-credit .credit { display: none !important; }
body.credit-center .credit { right: auto; left: 50%; transform: translateX(-50%) scale(.8); transform-origin: 50% 100%; }