/* Saweet. Sabotase Kebun — UI persis video referensi */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
  width:100%; height:100%; overflow:hidden; background:#F4F1E8;
  font-family:-apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  touch-action:none; user-select:none; -webkit-user-select:none;
  position:fixed; inset:0;
}
#game-container { position:absolute; inset:0; }
#game-container canvas { display:block; }

#ui { position:absolute; inset:0; pointer-events:none; z-index:10; }
#ui button { pointer-events:auto; }

/* ===== top bar ===== */
#topbar {
  position:absolute; top:max(14px, env(safe-area-inset-top)); left:16px; right:16px;
  display:flex; justify-content:space-between; align-items:center;
}
#logo-cluster { display:flex; align-items:center; gap:10px; }
#logo-icon { width:52px; height:52px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
#logo-title { font-size:30px; font-weight:800; color:#1e1e1e; line-height:1; letter-spacing:-.5px; }
#logo-sub { font-size:12px; font-weight:600; color:#8a8a8a; letter-spacing:3px; margin-top:3px; }
#btn-lock {
  width:52px; height:52px; border:1px solid rgba(255,255,255,.7); border-radius:14px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:0 4px 16px rgba(46,82,64,.10); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

/* ===== stats pill (glassmorphism) ===== */
#stats-pill {
  position:absolute; top:calc(max(14px, env(safe-area-inset-top)) + 66px); left:16px; right:16px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px; box-shadow:0 4px 20px rgba(46,82,64,.10);
  display:flex; align-items:stretch; padding:10px 6px;
}
.stat { flex:1; text-align:center; }
.stat-label { font-size:11px; font-weight:700; color:#9a9a9a; letter-spacing:1.5px; }
.stat-value { font-size:19px; font-weight:800; color:#1e1e1e; margin-top:3px; display:flex; align-items:center; justify-content:center; gap:6px; }
.stat-divider { width:1px; background:#e8e8e8; margin:4px 0; }
.coin { color:#C9972F; font-size:20px; }
.leaf, .person { font-size:18px; }

/* ===== context action popup ===== */
#action-popup {
  position:absolute; transform:translate(-50%,-120%);
  transition:opacity .15s;
}
#action-popup.hidden { opacity:0; pointer-events:none; }
#btn-action {
  display:flex; align-items:center; gap:8px;
  background:#C0392B; border:none; border-radius:999px;
  color:#fff; font-weight:800; font-size:20px; letter-spacing:.5px;
  padding:12px 20px; cursor:pointer;
  box-shadow:0 4px 14px rgba(192,57,43,.45);
}
#btn-action:active { transform:scale(.95); }
#action-icon { font-size:22px; }
#action-charges {
  background:rgba(0,0,0,.28); border-radius:999px; padding:3px 10px; font-size:14px;
}
#selection-ring {
  position:absolute; width:90px; height:34px; border:3px solid #fff; border-radius:50%;
  transform:translate(-50%,-50%); box-shadow:0 0 0 2px rgba(0,0,0,.15);
  opacity:0; transition:opacity .15s; pointer-events:none;
}

/* ===== speech bubbles ===== */
#bubbles { position:absolute; inset:0; overflow:hidden; }
.bubble {
  position:absolute; transform:translate(-50%,-100%);
  background:#fff; border-radius:14px; padding:8px 14px;
  font-size:14px; font-weight:600; color:#333; white-space:nowrap;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
  animation:bubble-pop .25s ease-out;
}
.bubble::after {
  content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  border:8px solid transparent; border-top-color:#fff; border-bottom:none;
}
@keyframes bubble-pop { from { transform:translate(-50%,-100%) scale(.6); opacity:0; } }

/* ===== bottom bar ===== */
#bottombar {
  position:absolute; bottom:max(18px, env(safe-area-inset-bottom)); left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
#action-buttons {
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px; padding:10px 14px;
  display:flex; gap:10px; box-shadow:0 4px 20px rgba(46,82,64,.10);
}
.abtn {
  width:56px; height:56px; border:none; border-radius:50%;
  background:#f0efe9; font-size:24px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#2E5240; font-weight:800;
}
.abtn.active { background:#2F6E7E; color:#fff; }
.abtn:active { transform:scale(.92); }
#hint { font-size:13px; color:#8a8a8a; font-weight:500; }

/* ===== debug pill ===== */
#debug-pill {
  position:absolute; left:12px; bottom:calc(max(18px, env(safe-area-inset-bottom)) + 108px);
  background:rgba(20,20,20,.72); color:#cfcfcf; border-radius:10px;
  font-family:ui-monospace, Menlo, monospace; font-size:11px;
  padding:6px 8px; display:flex; align-items:center; gap:8px;
  pointer-events:auto;
}
#btn-reset {
  background:#C0392B; color:#fff; border:none; border-radius:6px;
  font-size:11px; font-weight:700; padding:3px 10px; cursor:pointer;
}

/* ===== vignette merah (efek sabotase) ===== */
#vignette {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(192,57,43,.45) 100%);
  opacity:0; transition:opacity .35s;
}

/* ===== toast ===== */
#toast {
  position:absolute; top:32%; left:50%; transform:translateX(-50%);
  background:rgba(30,30,30,.88); color:#fff; font-weight:700; font-size:17px;
  padding:12px 24px; border-radius:999px; white-space:nowrap;
  transition:opacity .3s;
}
#toast.hidden { opacity:0; }