/* css/hud.css — HUD (kartu info, tombol), dialog aturan, toast combo, layar muat. */
.hud{position:fixed;left:10px;right:10px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
#top{top:calc(env(safe-area-inset-top,0px) + 8px)}
#bot{bottom:calc(env(safe-area-inset-bottom,0px) + 10px);justify-content:center}
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:8px 12px;font-size:14px;
  backdrop-filter:blur(6px);pointer-events:auto}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:5px;vertical-align:-1px}
button,select{font:inherit;font-size:14px;color:var(--fg);background:var(--card);border:1px solid var(--bd);
  border-radius:10px;padding:9px 14px;pointer-events:auto;cursor:pointer}
button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:active{transform:scale(.97)}
#end{display:none}
#sound[aria-pressed="false"]{opacity:.6}

#rules{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:20px}
#rules .card{max-width:420px;max-height:80%;overflow:auto;line-height:1.5}

.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--bg);z-index:10;transition:opacity .4s}
.overlay[hidden]{display:none}
.overlay.fade{opacity:0;pointer-events:none}
.overlay pre{background:rgba(0,0,0,.08);padding:8px 10px;border-radius:8px;overflow:auto;font-size:13px}

/* Toast "makan beruntun" */
#combo{position:fixed;left:0;right:0;top:34%;display:flex;justify-content:center;pointer-events:none;z-index:5}
#combo .pop{font:800 clamp(34px,9vw,68px)/1 system-ui,-apple-system,"Segoe UI",sans-serif;font-style:italic;letter-spacing:.01em;
  color:#fff3dc;text-shadow:0 2px 0 #8a3a14,0 0 22px rgba(255,140,60,.85),0 6px 24px rgba(0,0,0,.55);
  animation:comboPop .95s cubic-bezier(.2,.9,.25,1.2) forwards;white-space:nowrap}
#combo .pop small{display:block;font-size:.34em;font-style:normal;font-weight:600;letter-spacing:.2em;text-align:center;opacity:.9;margin-top:4px}
@keyframes comboPop{
  0%{transform:scale(.3) rotate(-6deg);opacity:0}
  18%{transform:scale(1.18) rotate(-2deg);opacity:1}
  32%{transform:scale(1) rotate(-2deg)}
  78%{transform:scale(1) rotate(-2deg);opacity:1}
  100%{transform:scale(1.08) translateY(-26px) rotate(-2deg);opacity:0}}
@media (prefers-reduced-motion:reduce){#combo .pop{animation:comboFade .9s forwards}
  @keyframes comboFade{0%,80%{opacity:1}100%{opacity:0}}}