: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; }
.fx .beam { fill: rgba(255, 30, 30, .22); }
.fx .laser { stroke: #ff1a1a; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px #ff0000) drop-shadow(0 0 12px #ff4d4d); }
.fx .laser-core { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.fx .spark { fill: none; stroke: #ffdd55; stroke-width: 4; }
.fx .muzzle { fill: #fff3b0; filter: drop-shadow(0 0 10px #ff2a2a); }
.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: 16px 16px 64px; 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%; }
}