/* ================================================================
   The Frontier — Full UI Clone (overlay only, excludes game canvas)
   Matches DOM scale by using em-based sizing; root font-size scales
   with viewport so the whole UI resizes like the original Svelte app.
   ================================================================ */

:root{
  --dark:0,0,0;
  --light:255,255,255;
  --lightgrey:30,38,40;
  --card-primary:9,13,14;
  --card-secondary:15,16,16;
  --game-theme-color:#41e1fb;
  --game-theme-color-secondary:#fe99fe;
  --dark-hover:40,40,40;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:#000;color:#fff;font-family:"Outfit",system-ui,sans-serif;overscroll-behavior:none}
button,input{font-family:inherit}
[hidden]{display:none !important}

#app{position:relative;width:100vw;height:100vh;overflow:hidden}

/* ===== Canvas placeholder ===== */
.canvas-wrap{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:#3a2a0a}
.canvas-placeholder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(212,160,23,.35), transparent 65%),
    linear-gradient(180deg,#5a3f10 0%,#2a1d05 100%);
}
.canvas-placeholder-text{
  font-size:28px;font-weight:700;letter-spacing:.3em;color:rgba(255,220,140,.4);
  border:2px dashed rgba(255,220,140,.4);padding:2em 3em;border-radius:1em;
}

/* ===== Main overlay root (was .main-wrap.svelte-qceoov) ===== */
.main-wrap{position:absolute;inset:0;z-index:100;width:100%;height:100%;pointer-events:none}

/* Top bar ------------------------------------------------------- */
.top-wrap{
  display:flex;width:100%;justify-content:space-between;
  padding:0.25em 0.25em 0;z-index:999;pointer-events:none;
}
.title-text{
  font-size:11.5px;font-weight:600;color:rgb(var(--light));font-family:sans-serif;
  pointer-events:auto;z-index:999;padding:.6em .6em;
}
.title-logo{
  width:clamp(22px, 2.8vw, 32px);height:clamp(22px, 2.8vw, 32px);
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;box-shadow:none;
  color:#f9ffff;font-weight:600;padding:0;border-radius:0;
  --slotgen-mark:#8f111b;
  pointer-events:auto;z-index:999;overflow:visible;
  position:relative;
}
.title-logo::before{
  content:"";
  position:absolute;
  inset:12%;
  border-radius:9999px;
  background:rgba(255,255,255,.56);
  filter:blur(7px);
  opacity:.9;
  z-index:-1;
}
.title-logo .slotgen-mark-svg{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.72));
}

/* Fade wrap (bottom panel root) --------------------------------- */
.fade-wrap{
  position:absolute;bottom:0;left:0;z-index:100;
  display:flex;flex-direction:column;width:100%;pointer-events:none;
}
.game-wrap{
  width:100%;display:flex;align-items:center;justify-content:center;pointer-events:auto;
  /* Font-size drives em-based sizing of the entire bottom panel.
     Matches the live game: on wide/desktop screens the panel is pinned at a
     fixed pixel size (.desktop-panel-wrap = 829.5 × 97.5 px, scale ratio 1.00
     regardless of viewport width). On small popouts (400×225, 800×450) the
     panel scales proportionally with the viewport using both vw and vh so
     16:9 popouts shrink correctly (measured: 4.615px at 400×225,
     9.231px at 800×450, 12px at ≥1040×585). */
  font-size:min(12px, 1.155vw, 2.051vh) !important;
}

/* ===== Desktop panel wrap (was svelte-1bw2c1k) ===== */
.desktop-panel-wrap{
  width:fit-content;display:flex;flex-direction:row;margin-bottom:1em;gap:1em;align-items:center;
  position:relative;
}
.main-panel-desktop-wrap{
  display:flex;flex-direction:row;background-color:rgba(var(--card-primary),.5);
  width:fit-content;min-width:60em;border-radius:.7em;height:6.5em;
  padding-left:1.5em;padding-right:1.5em;align-items:center;justify-content:center;
}
.main-panel-container{display:flex;flex-direction:row;width:100%;gap:1em;justify-content:space-between;align-items:center}
.texts-wrap{display:flex;flex-direction:row;gap:1em;align-items:center}
.bet-controls-wrap{display:flex;gap:.5em;flex-direction:row;align-items:center;margin-left:auto}
.bet-indicator-wrap-outer{display:flex;flex-direction:row;align-items:center}
.bet-buttons-controls-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.25em;height:100%}
.bet-button-wrap{display:flex;flex-direction:row;gap:1em;justify-content:center}
.control-buttons-wrap{display:flex;flex-direction:column;gap:.75em;justify-content:center}

/* ===== Buy button (svelte-1d3jf08) ===== */
.buy-button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--game-theme-color);
  width:6.5em;height:6.5em;border-radius:1.25em;font-size:1.25em;font-weight:700;
  outline:solid .26em rgba(5,9,22,.82);outline-offset:-.42em;cursor:pointer;color:#050916;
  border:.08em solid rgba(255,255,255,.85);
  box-shadow:0 .22em 0 rgba(5,9,22,.72), 0 0 14px var(--game-theme-color);
  transition:box-shadow .2s, transform .12s ease, outline-color .2s;
  overflow:hidden;
}
.buy-button:hover{
  outline-color:var(--game-theme-color);
  box-shadow:0 .18em 0 rgba(5,9,22,.72), 0 0 18px var(--game-theme-color);
}
.buy-button:active{transform:translateY(.12em) scale(.98);box-shadow:0 .08em 0 rgba(5,9,22,.72), 0 0 12px var(--game-theme-color)}
.buy-button .icon{
  filter:none;
  --slotgen-mark:#050916;
  width:72%;height:72%;display:flex;align-items:center;justify-content:center;
}
.buy-button .icon svg{width:100%;height:100%;display:block}

/* ===== Menu button + popup (svelte-1izzaws) ===== */
.menu-button-wrap{position:relative}
.menu-button{
  background:transparent;padding:0;width:3em;height:3em;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:.9;color:rgb(var(--light));
  position:relative;
}
.menu-button svg{width:100%;height:100%;position:absolute;inset:0;margin:auto;transition:opacity .18s ease, transform .18s ease}
.menu-button .menu-icon-close{opacity:0;transform:rotate(-90deg) scale(.7)}
.menu-button.open .menu-icon-hamburger{opacity:0;transform:rotate(90deg) scale(.7)}
.menu-button.open .menu-icon-close{opacity:1;transform:rotate(0) scale(1)}
.menu-button:hover{opacity:1}

.menu-popup{
  position:absolute;bottom:4.72em;left:4.5em;transform:translateX(-50%);
  margin-bottom:.5em;display:flex;flex-direction:column;gap:.5em;
  background-color:rgba(var(--card-primary),.85);padding:.75em;border-radius:.7em;
  min-width:12em;z-index:2;
}
.menu-option{display:flex;align-items:center;gap:.75em;padding:.5em;border-radius:.5em;cursor:pointer;transition:background .2s}
.menu-option:hover{background:rgba(var(--dark),.3)}
.menu-option .icon-wrap{display:flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;color:rgb(var(--light))}
.menu-option .icon-wrap svg{width:100%;height:100%}
.menu-option .text{font-weight:600;color:rgb(var(--light));font-size:1em;white-space:nowrap}
.volume-slider{flex:1 1 0;width:80px;outline:none;accent-color:rgb(var(--light))}
.volume-slider:focus,.volume-slider:focus-visible{outline:none}

/* ===== Balance (svelte-10wg46i) ===== */
.balance-wrap{
  display:flex;flex-direction:column;gap:.2em;
  /* Cap container width so very large balances shrink via JS fitText
     instead of pushing the panel layout out of alignment. */
  max-width:12em;min-width:0;
}
.balance-wrap .text{font-size:1em;color:var(--game-theme-color)}
.balance-wrap .value{
  font-weight:700;font-size:1.6em;text-align:center;color:rgb(var(--light));
  /* Auto-fit: JS scales font-size down for very large balances. */
  white-space:nowrap;line-height:1.1;max-width:100%;min-width:0;
}
.balance-wrap.buy-screen .value{display:flex}

/* ===== Bet indicator (svelte-118h24l) ===== */
.bet-indicator-wrap{
  position:relative;display:flex;flex-direction:column;gap:.25em;align-items:center;justify-content:space-between;
}
.bet-indicator-button{
  display:flex;flex-direction:column;width:fit-content;padding:.5em 1em;
  justify-content:center;background-color:rgba(var(--card-secondary),.9);
  align-items:center;gap:.25em;border-radius:.5em;min-width:7.5em;max-width:14em;height:4em;cursor:pointer;
}
.bet-indicator-button:hover{background-color:rgba(var(--card-secondary),.8)}
.bet-indicator-button.buy-screen{pointer-events:none;cursor:default}
.bet-indicator-button .text{font-weight:400;font-size:1em;text-align:center;color:var(--game-theme-color)}
.bet-indicator-button .value{font-weight:700;color:rgb(var(--light));font-size:1.5em;text-align:center;white-space:nowrap;max-width:100%;line-height:1.1;}
.indicator-backer{position:relative;width:7.5em;height:.375em;flex:0 0 .375em;border-radius:9999px;background-color:rgb(var(--card-secondary));overflow:hidden}
.indicator-backer .indicator{position:absolute;top:0;left:0;height:100%;background:#fff;border-radius:9999px}
.indicator{position:absolute;bottom:0;left:0;height:100%;border-radius:9999px;background-color:rgb(var(--light))}

/* ===== Bet +/- chevrons (svelte-rxk1d2 / svelte-1b0lr46) ===== */
.bet-amount-button{
  background:transparent;width:fit-content;height:fit-content;
  display:flex;align-items:center;justify-content:center;color:rgb(var(--light));cursor:pointer;
}
.bet-amount-button.up{border-top-right-radius:1em}
.bet-amount-button.down{border-top-left-radius:1em}
.bet-amount-button:hover{color:var(--game-theme-color)}
.bet-amount-button .button-svg-wrap{height:1.5em;display:flex;align-items:center;justify-content:center}
.bet-amount-button .button-svg-wrap svg{height:100%}

/* ===== Spin/big bet button (svelte-ljmpi2) ===== */
.bet-button{
  display:flex;align-items:center;justify-content:center;
  outline:.5em solid rgb(var(--dark));
  width:8.5em;height:8.5em;background-color:rgb(var(--light));
  border-radius:50%;position:relative;z-index:100;cursor:pointer;color:#000;
  transition:transform .12s ease;
}
.bet-button:active{transform:scale(.96)}
.bet-button-svg-wrap{display:flex;align-items:center;justify-content:center;width:75%;height:75%;color:#000;transition:color .2s ease}
.bet-button:hover .bet-button-svg-wrap{color:var(--game-theme-color)}
.bet-button-svg-wrap svg{width:100%;height:100%}

/* ===== Control buttons (autoplay svelte-1wspjco / turbo svelte-quq151) ===== */
.control-wrap{position:relative;width:3em;height:3em}
.control-wrap .button-container{
  min-width:3em;min-height:3em;width:100%;height:100%;
  background-color:rgb(var(--light));border-radius:9999px;
  outline:.3em solid rgb(var(--dark));color:rgb(var(--dark));cursor:pointer;
  transition:outline-color .1s, background-color .1s;
}
.control-wrap.auto .button-container:hover{background-color:rgba(var(--light),.9)}
.control-wrap .button-svg-wrap{
  position:absolute;color:rgb(var(--dark));opacity:.98;pointer-events:none;
  height:2.25em;display:flex;align-items:center;justify-content:center;
  inset:.375em;transition:color .1s;
}
.control-wrap .button-svg-wrap svg{height:100%}

/* Turbo active state */
.control-wrap.turbo .button-container.active{
  outline-color:var(--game-theme-color);background-color:rgb(var(--dark));
}
.control-wrap.turbo .button-container.active ~ .button-svg-wrap,
.control-wrap.turbo.active .button-svg-wrap{color:var(--game-theme-color)}
.control-wrap.turbo .button-container:hover:not(.active){background-color:rgba(var(--light),.9)}

/* Autoplay active state (reuse cyan scheme) */
.control-wrap.auto .button-container.active{
  outline-color:var(--game-theme-color);background-color:rgb(var(--dark));
}
.control-wrap.auto .button-container.active ~ .button-svg-wrap{color:var(--game-theme-color)}

/* ===== Bet menu popup (svelte-1he3lxt) — matches live game exactly ===== */
.bet-menu{
  position:absolute;bottom:9em;left:50%;
  /* Live uses translate(8%) on an element already visually centered in the
     flex row. We center with translate(-50%) then add the same +8% shift,
     giving the combined translate(-42%). */
  transform:translate(-42%);
  background-color:rgba(var(--card-primary),.85);
  border-radius:.7em;padding:.75em;z-index:1;
  width:50em;max-width:95vw;max-height:32em;overflow-y:auto;
}
.bet-menu-header{text-align:center;margin-bottom:.75em}
.bet-menu-title{font-size:1.2em;font-weight:600;color:rgb(var(--light))}
.bet-options-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(10em,1fr));gap:.5em;
}
.bet-option{
  background:rgba(var(--dark),.6);border:none;outline:none;border-radius:.5em;
  padding:.75em;color:rgb(var(--light));font-weight:700;font-family:inherit;
  font-size:1.2em;cursor:pointer;transition:.2s;
}
.bet-option:hover{background:rgba(var(--dark),.8);transform:translateY(-2px)}
.bet-option:active{transform:translateY(0);background:var(--game-theme-color);color:rgb(var(--dark))}
.bet-option.active{background:var(--game-theme-color);color:rgb(var(--dark))}

/* ===== Autospin popup (svelte-fcwluh) — matches live game ===== */
.autospin-menu{
  position:absolute;bottom:8.75em;
  /* Anchor the menu centered above .bet-button-wrap (the SPIN button),
     which sits ~24.8em right of the panel's horizontal center on wide
     screens. translateX(-50%) then shifts the menu back by half its own
     width so the menu's center aligns with the SPIN button's center. */
  left:calc(50% + 24.8em);
  transform:translateX(-50%);
  border-radius:.7em;padding:.75em;background-color:rgba(var(--card-primary),.85);
  width:22em;z-index:1;
}
.autospin-menu-header{margin-bottom:.75em;text-align:center;display:flex;flex-direction:column;gap:.25em}
.autospin-menu-title{font-size:1.2em;font-weight:600;color:rgb(var(--light))}
.autospin-menu-subtitle{font-size:1em;font-weight:500;color:rgb(var(--light));opacity:.8}
.autospin-options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(50px,1fr));gap:.5em}
.autospin-option{
  background:rgba(var(--dark),.6);border:none;outline:none;border-radius:.5em;
  padding:.75em;color:rgb(var(--light));font-weight:700;font-family:inherit;
  font-size:1em;cursor:pointer;transition:.2s;
}
.autospin-option:hover{background:rgba(var(--dark-hover),1);transform:translateY(-2px)}
.autospin-option:active{transform:translateY(0);background:var(--game-theme-color);color:rgb(var(--dark))}
.autospin-option.active{background:var(--game-theme-color);color:rgb(var(--dark))}

/* =================================================================
   BUY BONUS SCREEN — matches live game (scrollable grid + fixed panel)
   ================================================================= */
.buy-screen-wrap{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  /* vmin+vw clamp keeps 5 cards in view at all landscape sizes */
  font-size:min(1.24vw, 2.09vmin, 16px);
  display:flex;flex-direction:column;align-items:center;color:#fff;overflow:hidden;
}

.close-button{
  position:absolute;top:1.8em;right:2.4em;width:4em;height:4em;
  background:rgba(var(--dark),.4);border-radius:.8em;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:rgb(var(--light));z-index:10;
}
.close-button:hover{opacity:.85}
.close-button svg{width:67%;height:67%}

/* Horizontal flex row — same as buy-bonus-clone */
.buy-cards-wrap{
  display:flex;flex-direction:row;flex-wrap:nowrap;
  gap:1em;
  justify-content:center;
  align-items:center;
  flex:1 1 auto;
  padding:3.5em 0.75em 6em;
  width:100%;overflow:visible;
}

/* Card — image on top, white body, pill button */
.buy-card{
  flex:0 0 auto;
  width:15em;
  background:rgb(var(--light));color:rgb(var(--dark));
  border-radius:1em;overflow:hidden;cursor:pointer;
  transition:transform .15s;
}
.buy-card:hover{transform:translateY(-2px)}
.buy-card .top-image-wrap{
  border-radius:1em 1em 0 0;
  background-size:cover;
  background-position:center;
  aspect-ratio:795/390;
  width:100%;
}
.buy-card .card-body{
  padding:1.8em .9em 1em;
  margin-top:-1em;
  display:flex;flex-direction:column;gap:.6em;align-items:center;text-align:center;
  background:rgb(var(--light));border-radius:1em 1em 0 0;
}
.buy-card .volatility-wrap{display:flex;gap:.2em}
.buy-card .volatility-dot{
  width:1em;height:1.4em;background:var(--game-theme-color);
  clip-path:polygon(55% 0,0 55%,40% 55%,25% 100%,100% 40%,60% 40%,90% 0);
}
.buy-card .volatility-dot.off{background:rgba(var(--dark),.18)}
.buy-card .card-title{font-weight:900;font-size:1.1em;letter-spacing:.04em;color:rgb(var(--dark))}
.buy-card .card-amount{
  font-weight:900;font-size:1.7em;color:rgb(var(--dark));
  /* Auto-fit: keep amount on a single line; JS scales font-size down to fit
     the card width for very large values (e.g. $10,000,000,000.00). */
  white-space:nowrap;line-height:1.1;
  max-width:100%;align-self:stretch;text-align:center;
}
.buy-card .select-button{
  margin-top:.2em;width:100%;padding:.75em 1em;border-radius:.5em;
  background:var(--game-theme-color);color:rgb(var(--light));
  text-align:center;font-weight:900;font-size:1em;letter-spacing:.1em;
}
.buy-card.pink .select-button{background:var(--game-theme-color-secondary)}
.buy-card .select-button:hover{filter:brightness(1.05)}

/* Bottom panel — compact pill, centered at bottom */
.bottom-panel{
  position:absolute;
  bottom:1.5em;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:1em;
  background:rgba(var(--card-primary),.92);
  border-radius:1em;
  padding:.8em 1.2em;
  pointer-events:auto;
  white-space:nowrap;
}

.bottom-panel .balance-wrap.buy-screen{
  display:flex;flex-direction:column;align-items:flex-start;gap:.15em;
}
.bottom-panel .balance-wrap.buy-screen .text{
  font-size:.9em;font-weight:500;color:var(--game-theme-color);
}
.bottom-panel .balance-wrap.buy-screen .value{
  font-size:1.4em;font-weight:700;color:rgb(var(--light));white-space:nowrap;
}

.bet-wrap{
  display:flex;align-items:center;gap:.5em;
  background:transparent;
}
.bet-wrap .bet-amount-button{
  display:flex;align-items:center;justify-content:center;
  color:rgb(var(--light));cursor:pointer;
  padding:0 .3em;
}
.bet-wrap .bet-amount-button:hover{color:var(--game-theme-color)}
.bet-wrap .bet-amount-button .button-svg-wrap{height:1em;display:flex;align-items:center;justify-content:center}

.bet-wrap .bet-indicator-wrap{
  display:flex;flex-direction:column;align-items:center;gap:.15em;
}
.bet-wrap .bet-indicator-button.buy-screen{
  display:flex;flex-direction:column;align-items:center;gap:.1em;cursor:default;
}
.bet-wrap .bet-indicator-button.buy-screen .text{font-size:.9em;font-weight:500;color:var(--game-theme-color);}
.bet-wrap .bet-indicator-button.buy-screen .value{font-size:1.4em;font-weight:700;color:rgb(var(--light));white-space:nowrap;}
.bet-wrap .indicator-backer{width:7em;height:.25em;border-radius:9999px;background:rgba(var(--light),.15);overflow:hidden;position:relative;}

@keyframes modalSlideIn{
  0%{transform:scale(.8) translateY(30px);opacity:0}
  100%{transform:scale(1) translateY(0);opacity:1}
}

/* ===== Confirm popup ===== */
.confirm-popup-wrap{
  position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;padding:1em;
}
.confirm-wrap-outer{
  position:relative;background:rgb(var(--card-secondary));border-radius:1em;
  overflow:hidden;width:min(92vw, 22em);display:flex;flex-direction:column;
  animation:modalSlideIn .3s ease-out both;
}
.confirm-card-top-back{}
.confirm-card-top-back img{display:block;width:100%;height:auto;border-radius:1em 1em 0 0}
.confirm-card-wrap{padding:1.25em;margin-top:-1em;display:flex;flex-direction:column;gap:.75em;align-items:center;text-align:center;border-radius:1em;background:rgb(var(--light))}
.confirm-card-wrap .volatility-wrap{display:flex;gap:.25em}
.confirm-card-wrap .volatility-dot{
  width:1em;height:1.4em;background:var(--game-theme-color);
  clip-path:polygon(55% 0,0 55%,40% 55%,25% 100%,100% 40%,60% 40%,90% 0);
}
.confirm-card-wrap .volatility-dot.off{background:rgba(var(--dark),.15)}
.confirm-card-wrap .title{font-weight:800;font-size:1.25em;letter-spacing:.03em;color:rgb(var(--dark))}
.confirm-card-wrap .dialog-text{font-size:.9em;color:rgba(0,0,0,.6);line-height:1.35}
.confirm-card-wrap .amount{font-weight:800;font-size:1.4em;color:rgb(var(--dark))}
.confirm-card-wrap.pink .amount{color:rgb(var(--dark))}
.select-button.confirm{
  margin-top:.25em;width:100%;padding:.8em;border-radius:.5em;
  background:var(--game-theme-color);color:rgb(var(--light));font-weight:900;letter-spacing:.06em;
  cursor:pointer;
}
.select-button.confirm.pink{background:var(--game-theme-color-secondary)}

/* ===== Info Page ===== */
.info-page-wrap{
  position:fixed;inset:0;z-index:300;
  background:rgba(5,8,10,.96);
  color:rgb(var(--light));
  overflow-y:auto;
  font-size:clamp(13px,1.1vw,16px);
  padding:4em 2em 4em;
  -webkit-overflow-scrolling:touch;
}
.info-page-wrap .close-button.info-close{
  position:fixed;top:1em;right:1em;z-index:310;
  width:3em;height:3em;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--card-primary),.85);
  border-radius:.6em;cursor:pointer;color:rgb(var(--light));
  transition:background .2s;
}
.info-page-wrap .close-button.info-close:hover{background:rgba(var(--dark-hover),.95)}
.info-page-wrap .close-button.info-close svg{width:45%;height:45%}
.info-content{max-width:55em;margin:0 auto;display:flex;flex-direction:column;gap:2.5em}
.info-section{display:flex;flex-direction:column;gap:1em;align-items:center;text-align:center}
.info-section h1{
  color:var(--game-theme-color);
  font-size:2em;font-weight:800;margin:0;letter-spacing:.02em;
}
.info-section p{margin:0;font-size:1em;line-height:1.45;color:rgba(var(--light),.92);max-width:45em}
.paytable-row{display:flex;gap:3em;justify-content:center;flex-wrap:wrap;width:100%}
.paytable-row.single{}
.paytable-cell{display:flex;flex-direction:column;align-items:center;gap:.75em;min-width:9em}
.sym-box{
  width:4em;height:4em;border-radius:.6em;
  background:linear-gradient(180deg,#c08951,#8b5a2b);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1.4em;color:#fff;
  box-shadow:inset 0 -.25em 0 rgba(0,0,0,.25), 0 .15em .3em rgba(0,0,0,.5);
}
.sym-box.hi{background:linear-gradient(180deg,#a87151,#6e3f25)}
.sym-box.wild{background:linear-gradient(180deg,var(--game-theme-color),#1b8aa3);color:#06252b}
.sym-payouts{
  border:1px solid rgba(var(--light),.5);
  border-radius:.4em;
  padding:.6em 1.2em;
  display:flex;flex-direction:column;gap:.25em;
  font-size:.95em;min-width:5em;text-align:center;
}
.info-version{
  text-align:center;font-size:.85em;color:rgba(var(--light),.5);margin:0;padding:1em 0;
}

/* ============================================================
   PORTRAIT PANEL — exact structure/classes from live game.
   Visibility is controlled via media queries below.
   All sizing uses em, driven by .game-wrap font-size.
   ============================================================ */
.main-panel-wrap-portrait {
  display: none; /* shown by media query */
  flex-direction: column;
  gap: 1em;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
}

/* Row 1: menu | bet-buttons cluster | buy-button */
.panel-container-portrait {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
  gap: 2em;
  padding: 0 1.5em;
  width: 100%;
  height: 8.5em;
  box-sizing: border-box;
}

.main-panel-wrap-portrait .menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: #fff;
  opacity: 1;
  position: relative;
}
.portrait-info-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1em;
  height: 3.1em;
  padding: .8em;
  background: rgba(var(--card-primary), .85);
  border-radius: .7em;
  box-sizing: border-box;
}
.portrait-info-wrap .icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  color: #fff;
  position: relative;
}
.portrait-info-wrap svg,
.portrait-info-wrap .icon-wrap svg {
  width: 100%;
  height: 100%;
  position: static;
  inset: auto;
  margin: 0;
  transition: none;
}

/* Spin cluster (auto + SPIN + turbo) */
.bet-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.25em;
  height: 8.5em;
}
.bet-buttons > .wrap {
  position: relative;
  width: 3em;
  height: 3em;
  cursor: pointer;
}
.bet-buttons > .wrap .button-container {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: #fff;
}
.bet-buttons > .wrap .button-svg-wrap {
  position: absolute; inset: 12.5%;
  display: flex; align-items: center; justify-content: center;
  color: #000;
  pointer-events: none; /* let clicks reach the button-container below */
}
.bet-buttons > .wrap .button-svg-wrap svg { width: 100%; height: 100%; }
.bet-buttons > .wrap.active .button-svg-wrap,
.bet-buttons > .wrap:hover .button-svg-wrap { color: var(--game-theme-color); }

.bet-buttons > .bet-button {
  position: relative;
  width: 8.5em;
  height: 8.5em;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: .4em solid transparent;
  outline-offset: -.4em;
  transition: outline-color .15s ease;
}
.bet-buttons > .bet-button:hover { outline-color: var(--game-theme-color); }
.bet-buttons > .bet-button .bet-button-svg-wrap {
  width: 60%; height: 60%;
  display: flex; align-items: center; justify-content: center;
  color: #000;
}
.bet-buttons > .bet-button:hover .bet-button-svg-wrap { color: var(--game-theme-color); }
.bet-buttons > .bet-button .bet-button-svg-wrap svg { width: 100%; height: 100%; }

/* Buy button (portrait) */
.main-panel-wrap-portrait .buy-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 6.5em;
  height: 6.5em;
  border-radius: 1.25em;
  background:var(--game-theme-color);
  color:#050916;
  font-size: 1.25em;
  font-weight: 700;
  cursor: pointer;
  outline:solid .26em rgba(5,9,22,.82);
  outline-offset:-.42em;
  border:.08em solid rgba(255,255,255,.85);
  box-shadow:0 .22em 0 rgba(5,9,22,.72), 0 0 14px var(--game-theme-color);
  transition: box-shadow .15s ease, transform .12s ease, outline-color .15s ease;
  overflow:hidden;
}
.main-panel-wrap-portrait .buy-button:hover {
  outline-color:var(--game-theme-color);
  box-shadow:0 .18em 0 rgba(5,9,22,.72), 0 0 18px var(--game-theme-color);
}
.main-panel-wrap-portrait .buy-button .icon {
  width: 72%; height: 72%;
  display: flex; align-items: center; justify-content: center;
}
.main-panel-wrap-portrait .buy-button .icon svg { width: 100%; height: 100%; }

/* Row 2: balance | bet-controls(span 2) | spacer */
.info-bar-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  width: 100%;
  height: 2.6em;
}
.info-bar-container > .text-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.6em;
}
.info-bar-container > .bet-amount-container {
  grid-column: span 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 2.6em;
}

.wrap.portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25em;
  padding: .25em 1em;
  min-width: 6em;
  height: 2.6em;
  background: rgba(var(--card-primary), .8);
  border-radius: 1em 1em 0 0;
  box-sizing: border-box;
}
.wrap.portrait .text.portrait { color: var(--game-theme-color); font-size: 1em; }
.wrap.portrait .value.portrait { color: #fff; font-weight: 700; font-size: 1em; white-space: nowrap; max-width: 100%; line-height: 1.1; }

.main-panel-wrap-portrait .bet-indicator-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 7.5em;
  height: 2.6em;
}
.bet-indicator-button.portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25em;
  padding: .5em 1em;
  min-width: 7.5em;
  width: 100%;
  height: 2.6em;
  background: rgba(15, 16, 16, .9);
  border-radius: 0;
  cursor: pointer;
  box-sizing: border-box;
}
.bet-indicator-button.portrait .text.portrait { color: var(--game-theme-color); font-size: 1em; }
.bet-indicator-button.portrait .value.portrait { color: #fff; font-weight: 700; font-size: 1em; white-space: nowrap; max-width: 100%; line-height: 1.1; }

.bet-amount-button.portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.45em;
  height: 2.6em;
  background: rgba(var(--card-primary), .8);
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
}
.bet-amount-button.portrait .button-svg-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1em;
}
.bet-amount-button.portrait .button-svg-wrap svg { width: 100%; height: 100%; }
.bet-amount-button.portrait.down { border-radius: 1em 0 0 0; }
.bet-amount-button.portrait.up   { border-radius: 0 1em 0 0; }
.bet-amount-button.portrait:hover { color: var(--game-theme-color); }

/* ============================================================
   BONUS MODE — shown while a free-spins bonus is active.
   Toggled via `.bonus-mode` class on `.desktop-panel-wrap` and
   `.main-panel-wrap-portrait` (set by app.js setDisplayMode()).
   ============================================================ */

/* Hide bonus-only elements by default */
.bonus-only { display: none !important; }

/* ---- DESKTOP bonus mode ---- */
.desktop-panel-wrap.bonus-mode .buy-button,
.desktop-panel-wrap.bonus-mode .bet-controls-wrap,
.desktop-panel-wrap.bonus-mode .bet-button-wrap,
.desktop-panel-wrap.bonus-mode .control-buttons-wrap { display: none !important; }

.desktop-panel-wrap.bonus-mode .bet-static-wrap.bonus-only,
.desktop-panel-wrap.bonus-mode .win-static-wrap.bonus-only,
.desktop-panel-wrap.bonus-mode .info-panel-wrap.bonus-only { display: flex !important; }

/* Base panel already has min-width:60em/height:6.5em, so the outer
   `.desktop-panel-wrap` naturally shrinks from 829.5×97.5 (with the 97.5px
   buy-button pill) to 720×78 once `.buy-button` is hidden in bonus mode.
   No further size override needed. */

/* Static BET display (non-interactive, sits next to BALANCE) */
.bet-static-wrap,
.win-static-wrap {
  display: flex; flex-direction: column; gap: .2em; align-items: center;
  max-width: 12em; min-width: 0;
}
.bet-static-wrap .text { font-size: 1em; color: var(--game-theme-color); }
.win-static-wrap .text { font-size: 1em; color: rgb(var(--light)) }
.bet-static-wrap .value {
  font-weight: 700; font-size: 1.6em; color: rgb(var(--light));
  white-space: nowrap; max-width: 100%; line-height: 1.1; text-align: center;
}
.win-static-wrap .value {
  font-weight: 700; font-size: 1.6em; color: var(--game-theme-color);
  white-space: nowrap; max-width: 100%; line-height: 1.1; text-align: center;
}

/* Desktop info panel: TOTAL WIN pill + FREE SPINS pill + skip */
.info-panel-wrap {
  display: flex; flex-direction: row; align-items: center;
  gap: .75em; margin-left: auto; height: 100%;
}

.pills-column {
  display: flex; flex-direction: column; align-items: stretch;
  gap: .35em; width: 11em;
}

/* TOTAL WIN pill — white rounded rect, label above value, taller */
.total-win-pill {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .05em;
  background: rgb(var(--light));
  border-radius: .55em;
  padding: .25em .75em;
  height: 3.4em;
  box-sizing: border-box;
}
.total-win-pill .text {
  font-size: .95em; font-weight: 800;
  color: var(--game-theme-color);
  letter-spacing: .02em; line-height: 1;
}
.total-win-pill .value {
  font-size: 1.5em; font-weight: 800; color: rgb(var(--dark));
  white-space: nowrap; line-height: 1;
}

/* FREE SPINS pill — white rounded rect, label left / value right, thin */
.free-spins-pill {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: .75em;
  background: rgb(var(--light));
  border-radius: .45em;
  padding: .25em .75em;
  height: 1.9em;
  box-sizing: border-box;
}
.free-spins-pill .free-text {
  font-size: .85em; font-weight: 800;
  color: var(--game-theme-color);
  letter-spacing: .02em; line-height: 1;
}
.free-spins-pill .value {
  font-size: 1.1em; font-weight: 800; color: rgb(var(--dark));
  white-space: nowrap; line-height: 1;
}

/* Skip button — circular white with lightning, right of pills */
.skip-wrap {
  position: relative; width: 3.75em; height: 3.75em; cursor: pointer;
  flex: 0 0 auto;
}
.skip-wrap .button-container {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background-color: rgb(var(--light)); border-radius: 9999px;
  outline: .3em solid rgb(var(--dark)); color: rgb(var(--dark));
  transition: outline-color .1s, background-color .1s;
}
.skip-wrap .button-container:hover { background-color: rgba(var(--light), .9); }
.skip-wrap .button-svg-wrap {
  position: absolute; inset: .5em;
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--dark)); pointer-events: none;
}
.skip-wrap .button-svg-wrap svg { height: 100%; }
.skip-wrap:hover .button-container { outline-color: var(--game-theme-color); }
.skip-wrap:hover .button-svg-wrap { color: var(--game-theme-color); }
/* Skip = the free-spins turbo button — match the base-game turbo ACTIVE style
   (dark fill, theme-color outline + bolt) for turbo and superTurbo. */
.skip-wrap.active .button-container {
  outline-color: var(--game-theme-color); background-color: rgb(var(--dark));
}
.skip-wrap.active .button-svg-wrap { color: var(--game-theme-color); }

/* ---- PORTRAIT bonus mode ---- */
.main-panel-wrap-portrait.bonus-mode .bet-buttons,
.main-panel-wrap-portrait.bonus-mode .buy-button,
.main-panel-wrap-portrait.bonus-mode .bet-amount-container > .bet-amount-button { display: none !important; }

.main-panel-wrap-portrait.bonus-mode .bonus-info-panel.bonus-only,
.main-panel-wrap-portrait.bonus-mode .skip-wrap.bonus-only,
.main-panel-wrap-portrait.bonus-mode .win-wrap.bonus-only { display: flex !important; }

/* Center bonus-info panel in the top row */
.main-panel-wrap-portrait .panel-container-portrait {
  align-items: center;
  justify-content: space-between;
}

.bonus-info-panel {
  display: flex; flex-direction: row; align-items: center;
  justify-content: center; gap: .6em;
  padding: 0 .5em;
  flex: 1 1 auto;
}
.bonus-info-panel .total-win-pill {
  flex: 1 1 0; min-width: 0; height: 4.2em;
  padding: .35em .5em;
}
.bonus-info-panel .total-win-pill .text {
  font-size: .95em; text-align: center;
}
.bonus-info-panel .total-win-pill .value {
  font-size: 1.6em;
}

.main-panel-wrap-portrait .skip-wrap { width: 3em; height: 3em; flex: 0 0 auto; }

/* WIN value in info bar shows cyan in bonus mode */
.main-panel-wrap-portrait.bonus-mode .win-wrap .value.portrait {
  color: var(--game-theme-color);
}

/* Portrait bet indicator becomes non-interactive in bonus mode */
.main-panel-wrap-portrait.bonus-mode .bet-indicator-button.portrait {
  pointer-events: none; cursor: default;
}

/* ============================================================
   RESPONSIVE — swap desktop panel for portrait panel
   Trigger purely on aspect ratio: use the portrait panel only when
   the viewport is portrait-oriented (height ≥ width). Landscape
   popouts like Popout S (400×225) and Popout L (800×450) keep the
   desktop panel, matching the live game.
   ============================================================ */
@media (max-aspect-ratio: 1/1) {
  .desktop-panel-wrap { display: none !important; }
  .main-panel-wrap-portrait { display: flex !important; }
  .game-wrap { font-size: 9.875px !important; }

  /* Bet / autospin menus — match live portrait positioning
     (live rule: .bet-menu.portrait { transform: translate(0) scale(1.1); width: calc(100% - 8em); bottom: 14.5em }
                 .autospin-menu.portrait { transform: translate(0) scale(1.5); bottom: 17em }) */
  .bet-menu.desktop {
    left: 4em; right: 4em;
    width: calc(100% - 8em);
    bottom: 14.5em;
    transform: translate(0) scale(1.1);
    transform-origin: center bottom;
  }
  .autospin-menu.desktop {
    left: 50%;
    right: auto;
    bottom: 17em;
    width: 22em;
    transform: translate(-50%) scale(1.5);
    transform-origin: center bottom;
  }

}

/* ============================================================
   BUY BONUS — narrow / portrait breakpoint
   Mirrors buy-bonus-clone/styles.css @media (max-width:767px) and (max-aspect-ratio:1/1).
   Card auto-wraps (1/2/3 cols) based on viewport width.
   ============================================================ */
@media (max-width: 767px) and (max-aspect-ratio: 1/1){
  .buy-screen-wrap{
    font-size:14px;
    justify-content:flex-start;
  }
  .buy-cards-wrap{
    flex-wrap:wrap;
    overflow-y:auto;
    padding:4em 1em 12em;
    gap:.75em;
    flex:1 1 auto;min-height:0;
    align-items:flex-start;
    align-content:flex-start;
    justify-content:center;
  }
  .buy-card{
    /* Fixed width — naturally wraps to 1/2/3 cols depending on viewport */
    width:17em;
  }
  /* Bottom panel: 2-row bar pinned to bottom */
  .bottom-panel{
    bottom:0; left:0; right:0;
    transform:none;
    flex-direction:column;
    gap:0; padding:0;
    border-radius:0;
    background:transparent;
    align-items:stretch;
  }
  .bottom-panel .balance-wrap.buy-screen{
    padding:.45em 1.5em;
    align-items:center;
    width:100%;max-width:none;
    background:rgba(var(--card-primary),.96);
  }
  .bottom-panel .balance-wrap.buy-screen::after{display:none}
  .bottom-panel .bet-wrap{
    padding:.4em 1.5em;
    justify-content:space-between;
    background:rgba(var(--dark),.98);
  }
  .bottom-panel .bet-amount-button{padding:0 .5em}
  /* Indicator bar spans full width on mobile */
  .indicator-backer{width:100%;max-width:12em}
}

/* Short-height override removed: the vh term in .game-wrap font-size
   (2.051vh) now handles short viewports correctly, matching the live game's
   proportional scaling on Popout S (400×225) and Popout L (800×450). */