/* ---------- Shell / Theme (near-black, balanced hero) ---------- */
.uswbd-shell {
  --neon: #7cff9c;
  --neon-soft: rgba(124,255,156,.40);
  --bg: #050907;
  --pane-bg: #060e0a;

  max-width: 990px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid var(--neon-soft);
  box-shadow:
    0 0 0 1px var(--neon-soft),
    0 0 10px rgba(124,255,156,.20),
    inset 0 0 12px rgba(124,255,156,.08);
}

.uswbd-pane {
  background: var(--pane-bg);
  border-radius: 14px;
  padding: 8px;
  margin: 10px 0;
  border: 1px solid var(--neon-soft);
  box-shadow:
    0 0 0 1px var(--neon-soft),
    0 0 8px rgba(124,255,156,.18),
    inset 0 0 10px rgba(124,255,156,.08);
}

/* Hero (balanced) */
.uswbd-hero {
  width: 100%;
  height: 240px;           /* balanced height */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06110a;
  border-radius: 10px;
  padding: 6px;            /* add a little air around contained image */
}
.uswbd-hero img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;     /* show full image without cropping */
  display: block;
}

@media (max-width: 640px) {
  .uswbd-hero { height: 160px; }
}

/* Game area */
.usw-bud-drop {
  max-width: 970px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  color: #e9ffe9;
  user-select: none;
  border-radius: 10px;
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(8,18,13,0.92), rgba(3,7,5,0.98) 60%),
    #030705;
  border: 1px solid var(--neon-soft);
  box-shadow:
    0 0 0 1px var(--neon-soft),
    0 0 6px rgba(124,255,156,.18),
    inset 0 0 8px rgba(124,255,156,.10);
}

@media (max-width: 640px) {
  .usw-bud-drop { max-width: 300px; height: 300px; }
}

/* Internal UI */
.uswbd-layer { position: absolute; inset: 0; }
.uswbd-hud { position: absolute; left: 12px; top: 8px; right: 12px; display: flex; justify-content: space-between; align-items: center; font: 600 14px/1.2 system-ui; }
.uswbd-hud .btn { border: 1px solid rgba(255,255,255,.15); padding: 6px 10px; border-radius: 10px; cursor: pointer; background: rgba(255,255,255,.06); font-weight: 700; }
.uswbd-start { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55)); z-index: 5; }
.uswbd-start .card { text-align: center; max-width: 80%; color: #eaffea; }
.uswbd-start h3 { font-size: 20px; margin-bottom: 8px; }
.uswbd-toast { position: absolute; left: 50%; transform: translateX(-50%); top: 16px; background: rgba(0,0,0,.55); padding: 8px 12px; border-radius: 10px; font: 600 13px system-ui; z-index: 6; display: none; }
.uswbd-jar { position: absolute; width: 110px; height: 120px; z-index: 12; pointer-events: none; display: block; }
.uswbd-bud { position: absolute; width: 44px; height: 44px; will-change: transform; }
.uswbd-bud.is-rocket { width: 54px; height: 54px; filter: drop-shadow(0 0 6px rgba(255,80,80,.9)); }
.uswbd-particles { position:absolute; width:6px; height:6px; border-radius:50%; background:#72ffa1; pointer-events:none; }
.uswbd-particles.rocket { background:#ff6b6b; width:7px; height:7px; }
.uswbd-branding { position: absolute; bottom: 10px; left: 10px; text-align: center; font: 600 12px system-ui; color: #e9ffe9; }
.uswbd-branding img { max-width: 80px; display: block; margin-top: 4px; border-radius: 4px; }
.uswbd-hiscore { position:absolute; right: 12px; bottom: 8px; font: 700 12px system-ui; opacity:.9; }