/* Kerangka layar penuh untuk game arkade. Warna dasar dan tombol berasal dari ../ui.css. */
:root {
  color-scheme: light;
  --bg: #fff5e4; --surface: #fffdf8; --ink: #2a1f3d; --muted: #776a86; --line: #f0e1c8;
  --accent: #f2542d; --on-accent: #fff; --press: #c23a18;
  --font-display: "Fredoka", system-ui, sans-serif; --font-body: "Nunito", system-ui, sans-serif;
}
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--ink); font: 600 15px/1.45 var(--font-body); }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.icons { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topbar { flex: none; }
.top-inner { max-width: 1240px; margin: 0 auto; padding-inline: 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { color: var(--ink); text-decoration: none; font: 700 20px var(--font-display); }
.brand-accent { color: var(--accent); }
.top-actions { display: flex; gap: 8px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink); }
.play-area { flex: 1; min-height: 0; width: min(100%, 1240px); margin: 0 auto; padding: 12px 20px 8px; display: flex; flex-direction: column; gap: 6px; }
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 24px; background: #20163a; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 18px 40px -26px #2a1f3d; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.keys { flex: none; margin: 0; text-align: center; color: var(--muted); font-size: 12.5px; }
kbd { padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; font: 700 11px var(--font-body); background: var(--surface); }

/* HUD */
.stage .hud { width: auto; margin: 0; min-height: 0; }
.hud { position: absolute; left: 0; right: 0; top: 0; padding: 12px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; pointer-events: none; color: #fff; text-shadow: 0 2px 0 #0005; }
.hud-left, .hud-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hud-right { justify-content: flex-end; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; background: #1a133088; backdrop-filter: blur(4px); font: 700 15px var(--font-display); font-variant-numeric: tabular-nums; }
.score { font: 700 clamp(30px, 6vw, 44px)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.coin-dot { width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffc23d 60%, #d9951a); box-shadow: inset 0 0 0 1.5px #d9951a; }
.pause { pointer-events: auto; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 14px; background: #1a133088; color: #fff; backdrop-filter: blur(4px); }
.lives { display: inline-flex; gap: 2px; font-size: 17px; line-height: 1; }
.lives i { font-style: normal; color: #ff5d6c; transition: transform .25s, opacity .25s; }
.lives i.gone { opacity: .25; transform: scale(.7); filter: grayscale(1); }
.power { pointer-events: none; }
.combo { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); color: #ffd65c; font: 700 clamp(22px, 5vw, 34px) var(--font-display); text-shadow: 0 3px 0 #0006; pointer-events: none; }
.combo.bump { animation: bump .28s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bump { from { transform: translateX(-50%) scale(1.5); } }
.tip { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); max-width: 90%; width: max-content; padding: 8px 16px; border-radius: 16px; background: #1a1330cc; color: #fff; font: 600 clamp(14px, 2.4vw, 18px) var(--font-display); text-align: center; pointer-events: none; animation: tip-in .35s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes tip-in { from { opacity: 0; transform: translate(-50%, 12px) scale(.9); } }

/* Layar menu, jeda, selesai */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; color: #fff; background: linear-gradient(180deg, #1a133022, #1a1330aa); overflow-y: auto; animation: fade .25s ease both; }
@keyframes fade { from { opacity: 0; } }
.logo { margin: 0; font: 700 clamp(44px, 11vw, 92px)/.95 var(--font-display); color: #fff; text-shadow: 0 5px 0 var(--accent), 0 12px 24px #0007; transform: rotate(-2deg); }
.logo span { color: var(--sun, #ffc23d); }
.tagline { margin: 0; max-width: 42ch; font-size: clamp(14px, 2vw, 17px); text-shadow: 0 1px 3px #0009; }
.play-button { min-width: 200px; min-height: 60px; border: 0; border-radius: 22px; background: #ffc23d; color: #2a1f3d; box-shadow: 0 6px 0 #d9951a, 0 16px 30px -10px #0009; font: 700 24px var(--font-display); transition: transform .08s, box-shadow .08s; touch-action: manipulation; animation: wiggle 2.4s ease-in-out infinite; }
.play-button:active { transform: translateY(6px); box-shadow: 0 0 0 #d9951a; }
@keyframes wiggle { 0%, 80%, 100% { rotate: 0deg; } 86% { rotate: -3deg; } 93% { rotate: 3deg; } }
.ghost { min-height: 42px; padding: 6px 18px; border: 2px solid #ffffff66; border-radius: 14px; background: #1a133055; color: #fff; font: 600 15px var(--font-display); touch-action: manipulation; }
.ghost:hover { background: #1a133099; }
.stats-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.skins { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 6px 4px; scrollbar-width: none; touch-action: pan-x; }
.skin { flex: none; width: 74px; padding: 6px 4px 5px; border: 2px solid #ffffff44; border-radius: 16px; background: #1a133077; color: #fff; font: 600 11.5px/1.15 var(--font-display); transition: transform .12s, border-color .12s; touch-action: manipulation; }
.skin canvas { position: static; display: block; width: 44px; height: 44px; margin: 0 auto 3px; }
.skin[aria-pressed="true"] { border-color: #ffc23d; background: #1a1330bb; transform: translateY(-2px); }
.skin .price { display: inline-flex; align-items: center; gap: 3px; opacity: .9; }
.skin .price .coin-dot { width: 10px; height: 10px; }
.skin.locked canvas { filter: grayscale(.8) brightness(.7); }
.final { margin: 0; font: 700 clamp(58px, 14vw, 104px)/1 var(--font-display); text-shadow: 0 5px 0 #0005; font-variant-numeric: tabular-nums; }
.kicker { margin: 0; font: 600 clamp(18px, 3vw, 26px) var(--font-display); }
.record { padding: 3px 14px; border-radius: 99px; background: #ffc23d; color: #2a1f3d; font: 700 15px var(--font-display); animation: bump2 .5s cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes bump2 { from { transform: scale(.2) rotate(-16deg); } }
.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }

dialog { width: min(92vw, 440px); max-height: 85dvh; padding: 22px; border: 0; border-radius: 24px; color: var(--ink); background: var(--surface); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dialog-heading h2 { margin: 0; font: 700 24px var(--font-display); }
.rules { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.55; }
.rules li + li { margin-top: 8px; }
.rules b { color: var(--ink); }

@media (max-width: 680px) {
  .play-area { padding: 0; }
  .stage { border-radius: 0; box-shadow: none; }
  .keys { display: none; }
  .tip { bottom: 22%; }
}
/* HP mendatar: sembunyikan kepala halaman agar arena selebar mungkin. */
@media (max-height: 480px) {
  .topbar { display: none; }
  .play-area { padding: 0; width: 100%; }
  .stage { border-radius: 0; }
  .keys { display: none; }
  .logo { font-size: 44px; }
  .screen { gap: 6px; padding: 8px; justify-content: flex-start; }
  .final { font-size: 52px; }
  .tagline { display: none; }
}
@media (hover: none) { .keys { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}