/* Shared styles for every game: full-bleed stage, HUD, panels, toasts. */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b0d17;
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}
#game { position: fixed; inset: 0; }
.kit-stage { position: absolute; inset: 0; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#ui > * { pointer-events: auto; }

.kit-hud {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; padding: 10px 12px; pointer-events: none !important; z-index: 3;
}
.kit-hud__stats, .kit-hud__actions { display: flex; gap: 8px; flex-wrap: wrap; pointer-events: auto; }
.kit-chip {
  background: rgba(10, 12, 28, .62); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 4px 10px; min-width: 56px; text-align: center; line-height: 1.1;
}
.kit-chip small { display: block; font-size: 10px; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
.kit-chip b { font-size: 17px; font-variant-numeric: tabular-nums; }
.kit-icon-btn {
  appearance: none; border: 1px solid rgba(255,255,255,.14); cursor: pointer;
  background: rgba(10, 12, 28, .62); color: #fff; font: 700 15px system-ui, sans-serif;
  height: 40px; min-width: 40px; padding: 0 12px; border-radius: 12px;
}
.kit-icon-btn:active { transform: scale(.95); }
.kit-icon-btn.ad::after { content: " ▶"; font-size: 10px; color: #ffd84d; }

.kit-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(4, 6, 16, .55); padding: 16px; animation: kit-fade .2s ease-out; z-index: 10;
}
.kit-panel {
  width: min(380px, 100%); max-height: calc(100% - 16px); overflow: auto;
  background: linear-gradient(180deg, #23284a, #171a33);
  border: 1px solid rgba(255,255,255,.14); border-radius: 22px;
  padding: 22px 20px 18px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.45); animation: kit-pop .25s cubic-bezier(.2,1.4,.4,1);
}
.kit-panel h2 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.01em; }
.kit-body { font-size: 15px; line-height: 1.45; opacity: .92; }
.kit-body p { margin: 6px 0; }
.kit-body .big { font-size: 40px; font-weight: 900; margin: 6px 0; }
.kit-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.kit-btn {
  appearance: none; border: 0; cursor: pointer; border-radius: 14px;
  padding: 13px 16px; font: 800 17px system-ui, sans-serif; color: #fff;
  background: #3b4278; box-shadow: 0 4px 0 rgba(0,0,0,.3);
}
.kit-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.kit-btn:disabled { opacity: .45; cursor: default; }
.kit-btn.primary { background: linear-gradient(180deg, #ff5a5f, #e8384f); }
.kit-btn.green { background: linear-gradient(180deg, #34d27b, #1fae5f); }
.kit-btn.ad { background: linear-gradient(180deg, #ffb238, #f28b12); }
.kit-btn.ad::before { content: "▶ "; font-size: 13px; }
.kit-btn.ghost { background: transparent; box-shadow: none; opacity: .8; }

.kit-toast {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%);
  background: rgba(10, 12, 28, .85); border: 1px solid rgba(255,255,255,.15);
  padding: 10px 18px; border-radius: 999px; font-weight: 800; font-size: 16px;
  white-space: nowrap; pointer-events: none !important; transition: opacity .4s, transform .4s; z-index: 11;
}
.kit-toast.out { opacity: 0; transform: translate(-50%, -12px); }

.stars { font-size: 34px; letter-spacing: 4px; color: #ffd84d; }
.stars .off { color: rgba(255,255,255,.2); }

@keyframes kit-fade { from { opacity: 0; } }
@keyframes kit-pop { from { transform: scale(.85); opacity: 0; } }

/* Demo ad overlay used outside YouTube Playables */
.yt-demo-ad {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(0,0,0,.82); padding: 16px; font-family: system-ui, sans-serif;
}
.yt-demo-ad__box {
  width: min(340px, 100%); background: #111; border: 1px solid #333; border-radius: 16px;
  padding: 20px; color: #fff; text-align: center;
}
.yt-demo-ad__tag { font-size: 12px; color: #ffd84d; text-transform: uppercase; letter-spacing: .08em; }
.yt-demo-ad__title { font-size: 24px; font-weight: 900; margin: 10px 0 4px; }
.yt-demo-ad__box p { font-size: 13px; opacity: .7; margin: 0 0 14px; }
.yt-demo-ad__bar { height: 6px; background: #333; border-radius: 3px; overflow: hidden; }
.yt-demo-ad__bar i { display: block; height: 100%; width: 0; background: #ffd84d; }
.yt-demo-ad__row { display: flex; gap: 10px; margin-top: 16px; }
.yt-demo-ad__row button {
  flex: 1; border: 0; border-radius: 10px; padding: 11px; font-weight: 800; cursor: pointer;
  background: #2a2a2a; color: #fff;
}
.yt-demo-ad__row button[data-act="claim"] { background: #ffd84d; color: #111; }
.yt-demo-ad__row button:disabled { opacity: .5; cursor: default; }