/* Wildgame shared UI kit — one control style for every Wildgame slot.
   Theme per game by overriding the --wg-* variables (see bottom of file). */

.wg-ui, .wg-modal, .wg-top {
  --wg-bg: rgba(8, 7, 9, 0.82);
  --wg-line: rgba(201, 162, 74, 0.45);
  --wg-accent: #c9a24a;
  --wg-accent-hi: #f1d58c;
  --wg-accent-lo: #7a5a1f;
  --wg-text: #f6f1e6;
  --wg-muted: rgba(246, 241, 230, 0.55);
  --wg-danger: #d4202e;
  --wg-font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --wg-font-display: "Cinzel", "Times New Roman", serif;
  --wg-h: 96px;
}
.wg-ui {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--wg-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 24px max(0px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--wg-bg), rgba(8, 7, 9, 0.35) 85%, transparent);
  font-family: var(--wg-font);
  color: var(--wg-text);
  user-select: none;
  -webkit-user-select: none;
  z-index: 10;
}
.wg-ui * { box-sizing: border-box; }

.wg-group { display: flex; align-items: center; gap: 12px; }
.wg-left { justify-self: start; }
.wg-right { justify-self: end; }

.wg-readout { display: flex; flex-direction: column; align-items: center; min-width: 110px; }
.wg-readout .wg-label { font-size: 11px; letter-spacing: .18em; color: var(--wg-muted); text-transform: uppercase; }
.wg-readout .wg-value { font-family: var(--wg-font-display); font-weight: 700; font-size: 22px; color: var(--wg-accent-hi); white-space: nowrap; }
.wg-readout .wg-sub, .wg-readout .wg-label { white-space: nowrap; }

.wg-btn {
  appearance: none; border: 1.5px solid var(--wg-line); background: rgba(20, 18, 22, .85);
  color: var(--wg-text); width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s, opacity .15s;
}
.wg-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wg-btn:hover { border-color: var(--wg-accent); }
.wg-btn:active { transform: scale(.92); }
.wg-btn[disabled] { opacity: .35; pointer-events: none; }
.wg-btn.is-on { background: var(--wg-accent); color: #0b0a0c; border-color: var(--wg-accent-hi); }
.wg-btn.small { width: 36px; height: 36px; }
.wg-btn.small svg { width: 16px; height: 16px; }

.wg-spin {
  position: relative; width: 104px; height: 104px; border-radius: 50%; margin-top: -30px;
  border: 3px solid var(--wg-accent-hi);
  background: radial-gradient(circle at 35% 30%, #3a3036, #0b0a0c 70%);
  box-shadow: 0 0 0 6px rgba(201,162,74,.18), 0 10px 30px rgba(0,0,0,.6), inset 0 0 24px rgba(201,162,74,.25);
  color: var(--wg-accent-hi); cursor: pointer; display: grid; place-items: center;
  transition: transform .12s, box-shadow .2s;
}
.wg-spin svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s; }
.wg-spin:hover { box-shadow: 0 0 0 8px rgba(201,162,74,.28), 0 10px 30px rgba(0,0,0,.6), inset 0 0 30px rgba(201,162,74,.35); }
.wg-spin:active { transform: scale(.94); }
.wg-spin.is-spinning svg { animation: wg-rot .7s linear infinite; }
.wg-spin.is-stop { border-color: var(--wg-danger); color: var(--wg-danger); }
.wg-spin[disabled] { opacity: .5; pointer-events: none; }
.wg-spin .wg-count { position: absolute; font-family: var(--wg-font-display); font-weight: 700; font-size: 26px; color: var(--wg-text); }
@keyframes wg-rot { to { transform: rotate(360deg); } }

.wg-bet { display: flex; align-items: center; gap: 8px; }
.wg-readout .wg-sub { font-size: 10px; letter-spacing: .14em; color: var(--wg-muted); text-transform: uppercase; }

.wg-top {
  position: fixed; top: 0; left: 0; right: 0; height: 26px; z-index: 11;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px;
  font: 600 11px/1 var(--wg-font, Inter, Arial, sans-serif); letter-spacing: .12em; color: rgba(246,241,230,.7);
  background: linear-gradient(to bottom, rgba(8,7,9,.8), transparent);
  pointer-events: none; text-transform: uppercase;
}
.wg-top .wg-mode { padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(201,162,74,.5); color: #f1d58c; }
.wg-top .wg-mode.is-demo { background: rgba(201,162,74,.18); }
.wg-hist { width: 100%; border-collapse: collapse; font-size: 13px; }
.wg-hist td { color: var(--wg-text); }
.wg-hist td small { color: var(--wg-muted); }
.wg-hist th, .wg-hist td { text-align: left; padding: 8px 6px; border-bottom: 1px solid rgba(201,162,74,.15); vertical-align: top; }
.wg-hist th { color: var(--wg-accent); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.wg-mini { display: grid; grid-template-columns: repeat(5, 30px); gap: 2px; }
.wg-mini img { width: 30px; height: 30px; background: #141216; border-radius: 3px; }
.wg-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.wg-lines figure { margin: 0; text-align: center; font-size: 11px; color: var(--wg-muted); }
.wg-lines svg { width: 86px; height: 52px; display: block; margin: 0 auto 4px; }

/* modal (paytable / rules / autoplay) */
.wg-modal {
  position: fixed; inset: 0; display: none; place-items: center; z-index: 20;
  background: rgba(0,0,0,.72); backdrop-filter: blur(4px);
  font-family: var(--wg-font); color: var(--wg-text);
}
.wg-modal.is-open { display: grid; }
.wg-modal-card {
  color: var(--wg-text);
  width: min(920px, 92vw); max-height: 86vh; overflow: auto;
  background: #0f0d11; border: 1.5px solid var(--wg-line); border-radius: 14px; padding: 28px 32px;
}
.wg-modal-card h2 { font-family: var(--wg-font-display); color: var(--wg-accent-hi); margin: 0 0 16px; letter-spacing: .08em; }
.wg-modal-card h3 { font-family: var(--wg-font-display); color: var(--wg-accent); margin: 22px 0 10px; }
.wg-modal-card p, .wg-modal-card li { color: rgba(246,241,230,.82); line-height: 1.55; font-size: 14px; }
.wg-close { position: sticky; top: 0; float: right; }
.wg-pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.wg-pay { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.03); border: 1px solid rgba(201,162,74,.2); border-radius: 10px; padding: 8px; }
.wg-pay img { width: 56px; height: 56px; }
.wg-pay div { font-size: 13px; line-height: 1.45; }
.wg-pay b { color: var(--wg-accent-hi); }
.wg-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.wg-chip { appearance: none; border: 1.5px solid var(--wg-line); background: transparent; color: var(--wg-text); padding: 10px 18px; border-radius: 999px; cursor: pointer; font: 600 15px var(--wg-font); }
.wg-chip:hover { border-color: var(--wg-accent); color: var(--wg-accent-hi); }

/* autoplay slider */
.wg-auto { display: grid; gap: 16px; max-width: 560px; }
.wg-auto-value { display: flex; align-items: baseline; gap: 10px; }
.wg-auto-n { font: 700 56px/1 var(--wg-font-display); color: var(--wg-accent-hi); min-width: 3ch; }
.wg-auto-value small { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--wg-muted); }
.wg-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--wg-accent) 0 var(--p, 5%), rgba(246,241,230,.14) var(--p, 5%) 100%); }
.wg-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--wg-accent-hi), var(--wg-accent-lo)); border: 2px solid #0b0a0c; box-shadow: 0 0 0 2px var(--wg-accent), 0 4px 10px rgba(0,0,0,.6); }
.wg-range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--wg-accent-hi); border: 2px solid #0b0a0c; }
.wg-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--wg-accent-hi); }
.wg-auto-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--wg-muted); margin-top: -8px; }
.wg-start { appearance: none; border: 0; border-radius: 999px; padding: 14px 22px; cursor: pointer; justify-self: start;
  font: 700 16px var(--wg-font); letter-spacing: .06em; text-transform: uppercase; color: #0b0a0c;
  background: linear-gradient(180deg, var(--wg-accent-hi), var(--wg-accent)); }
.wg-start:hover { filter: brightness(1.08); }
.wg-note { margin: 0; font-size: 12px !important; color: var(--wg-muted) !important; }

/* feature-buy button — lives in the bottom bar, right of "+" (shared kit: every Wildgame slot with a bonus buy) */
.wg-buy {
  appearance: none; position: relative; margin-left: 6px; height: 64px; min-width: 112px; padding: 6px 14px;
  display: grid; align-content: center; justify-items: center; gap: 2px; cursor: pointer;
  font-family: var(--wg-font, Inter, Arial, sans-serif); color: #f6f1e6; line-height: 1.05;
  border: 2px solid #f1d58c; border-radius: 14px;
  background: radial-gradient(120% 90% at 50% 0%, #7a1a2c 0%, #3a0a14 55%, #1a0408 100%);
  box-shadow: 0 0 0 3px rgba(201,162,74,.22), 0 8px 22px rgba(0,0,0,.55), inset 0 0 18px rgba(212,32,46,.35);
  transition: transform .12s, filter .15s, opacity .2s;
  animation: wg-buy-glow 2.4s ease-in-out infinite;
}
.wg-buy:hover { filter: brightness(1.12); }
.wg-buy:active { transform: scale(.95); }
.wg-buy[disabled] { opacity: .4; filter: grayscale(.6); animation: none; cursor: default; pointer-events: none; }
.wg-buy-k { font: 800 9px/1 var(--wg-font, Inter, sans-serif); letter-spacing: .32em; color: #f1d58c; }
.wg-buy-t { font: 700 12px/1.05 "Cinzel", "Times New Roman", serif; letter-spacing: .04em; white-space: nowrap; }
.wg-buy-p { font: 700 14px/1 "Cinzel", "Times New Roman", serif; color: #f1d58c; margin-top: 2px; }
@keyframes wg-buy-glow { 50% { box-shadow: 0 0 0 3px rgba(201,162,74,.38), 0 8px 22px rgba(0,0,0,.55), 0 0 20px rgba(212,32,46,.55), inset 0 0 18px rgba(212,32,46,.45); } }
.wg-buy-confirm { display: grid; gap: 14px; max-width: 560px; }
.wg-buy-price { font: 700 48px/1 var(--wg-font-display); color: var(--wg-accent-hi); display: flex; align-items: baseline; gap: 12px; }
.wg-buy-price small { font: 600 14px var(--wg-font); color: var(--wg-muted); letter-spacing: .1em; text-transform: uppercase; }
.wg-buy-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* portrait / small screens */
@media (max-aspect-ratio: 1/1) {
  .wg-ui { --wg-h: 150px; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 8px 12px; padding: 0 14px 10px; }
  .wg-center { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .wg-left { grid-row: 2; }
  .wg-right { grid-row: 2; }
  .wg-spin { width: 88px; height: 88px; margin-top: -10px; }
  .wg-group { gap: 8px; }
  .wg-btn { width: 40px; height: 40px; }
  .wg-btn.small { width: 34px; height: 34px; }
  .wg-readout { min-width: 0; }
  .wg-readout .wg-value { font-size: 14px; }
  .wg-readout .wg-sub { font-size: 8px; letter-spacing: .08em; }
  .wg-right, .wg-left { gap: 6px; }
  .wg-buy { height: 54px; min-width: 96px; padding: 4px 10px; }
}

@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  .wg-top { font-size: 9px; letter-spacing: .08em; }
  .wg-top .wg-game { display: none; }
}

/* ── per-game theme hook ── */
.wg-ui.theme-black-market { --wg-accent: #c9a24a; --wg-accent-hi: #f1d58c; }