/* ================================================================
   Page globals + info page. The bet panel's own styles live in the
   shared module: src/vendor/bet-panel/bet-panel.css.
   ================================================================ */
: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-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;
}
.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;
}
.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;
}
.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;
}
.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; }
.info-panel-wrap{
  display: flex; flex-direction: row; align-items: center;
  gap: .75em; margin-left: auto; height: 100%;
}