:root{
  --text:#fff4d3;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --blue1:#4ca6ff;
  --blue2:#1f66dc;
  --blue3:#0a2f73;
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  user-select:none;
  -webkit-user-select:none;
}

html,body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  font-family:Arial, Helvetica, sans-serif;
  background:#08020f;
  color:var(--text);
  touch-action:manipulation;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}

body{
  position:relative;
  touch-action:manipulation;
}

img{
  display:block;
  max-width:100%;
  pointer-events:none;
}

button{
  border:none;
  font-family:inherit;
  cursor:pointer;
  background:none;
  touch-action:manipulation;
}

button:disabled{
  cursor:not-allowed;
  opacity:.68;
}

.intro-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 35%, rgba(32,78,170,.16) 0%, rgba(8,8,18,.10) 28%, rgba(3,2,8,.92) 100%),
    linear-gradient(180deg, rgba(6,8,16,.94) 0%, rgba(5,4,12,.97) 100%);
  opacity:1;
  visibility:visible;
  transition:
    opacity .45s ease,
    visibility .45s ease;
}

.intro-loader.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.intro-loader-inner{
  width:min(86vw, 420px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:26px;
  transform:translateY(-10px);
}

.intro-loader-logo{
  width:min(64vw, 240px);
  object-fit:contain;
  filter:
    drop-shadow(0 10px 30px rgba(0,0,0,.42))
    drop-shadow(0 0 22px rgba(60,140,255,.12));
  animation:introLogoFloat 2.2s ease-in-out infinite;
}

.intro-loader-bar-wrap{
  position:relative;
  width:min(78vw, 290px);
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.intro-loader-bar-glow{
  position:absolute;
  inset:-10px -14px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(62,150,255,.18) 0%, rgba(62,150,255,.06) 44%, rgba(62,150,255,0) 76%);
  filter:blur(8px);
  pointer-events:none;
}

.intro-loader-bar{
  position:relative;
  width:100%;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(8,18,44,.74);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 6px 20px rgba(0,0,0,.26);
}

.intro-loader-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0%;
  border-radius:999px;
  background:
    linear-gradient(90deg, #58b6ff 0%, #2e7dff 48%, #164dd8 100%);
  box-shadow:
    0 0 14px rgba(70,150,255,.34),
    inset 0 1px 0 rgba(255,255,255,.26);
  transition:width .08s linear;
}

.intro-loader-fill::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:44px;
  height:100%;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.36));
  filter:blur(1px);
}

@keyframes introLogoFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

.scene-bg{
  position:fixed;
  inset:0;
  background:
    linear-gradient(180deg, rgba(12,4,18,.08) 0%, rgba(8,3,14,.18) 100%),
    url("../assets/bg/dragon_cave.jpg") center/cover no-repeat;
  z-index:0;
}

.game-shell{
  position:relative;
  z-index:1;
  width:100%;
  min-height:100vh;
  margin:0 auto;
  padding:4px 8px calc(8px + var(--safe-bottom));
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:scale(.985);
  animation:gameShellReveal .5s ease forwards;
  animation-delay:3.45s;
  touch-action:manipulation;
}

@keyframes gameShellReveal{
  to{
    opacity:1;
    transform:scale(1);
  }
}

.top-ui{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  margin-bottom:0;
}

.game-logo{
  width:88px;
  object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.28));
}

.top-win-bar{
  width:100%;
  max-width:720px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:-2px;
  margin-bottom:2px;
}

.win-line{
  flex:1;
  max-width:42px;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,140,50,.95), transparent);
  filter:
    drop-shadow(0 0 4px rgba(255,150,70,.30))
    drop-shadow(0 0 8px rgba(255,90,0,.10));
}

.win-center{
  display:flex;
  align-items:center;
  gap:8px;
  padding:2px 10px 3px;
  white-space:nowrap;
  border-radius:999px;
  background:rgba(10,10,16,.12);
}

.win-label{
  font-size:11px;
  font-weight:1000;
  letter-spacing:.05em;
  background:linear-gradient(180deg,#ffd7d0 0%, #ff7f63 28%, #ff3d2b 56%, #a90a14 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}

.win-value{
  font-size:18px;
  font-weight:1000;
  letter-spacing:.02em;
  background:linear-gradient(180deg,#eefcff 0%, #bceeff 20%, #59baff 48%, #1f73ff 72%, #0c43b4 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
  text-shadow:
    0 2px 8px rgba(0,0,0,.80),
    0 0 8px rgba(60,160,255,.18);
}

.top-freespin-indicator{
  margin-top:2px;
  min-height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.top-freespin-indicator.hidden{
  display:none !important;
}

.top-freespin-indicator span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:3px 14px 4px;
  border-radius:999px;
  background:rgba(20,18,24,.54);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 6px 18px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#fff4d5;
  font-size:11px;
  font-weight:1000;
  line-height:1;
  letter-spacing:.02em;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
  white-space:nowrap;
}

.stage-area{
  flex:1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  margin-top:0;
}

.board-area{
  width:100%;
  max-width:760px;
  margin:0 auto;
}

.board-wrap{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:visible;
  touch-action:manipulation;
}

.board-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  z-index:5;
}

.board-grid{
  position:absolute;
  left:24.7%;
  top:26.7%;
  width:50.5%;
  height:43%;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(3, 1fr);
  gap:.45%;
  z-index:3;
  touch-action:manipulation;
}

.cell{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .16s ease, opacity .16s ease, filter .16s ease;
  touch-action:manipulation;
}

.tile{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:1;
  transform:scale(1.005);
  pointer-events:none;
  transition:filter .18s ease, transform .18s ease, opacity .18s ease;
}

.symbol{
  position:absolute;
  width:68%;
  height:68%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  object-fit:contain;
  z-index:3;
  pointer-events:none;
  transition:
    transform .10s ease,
    opacity .10s ease,
    filter .10s ease;
  filter:
    drop-shadow(0 4px 8px rgba(0,0,0,.20))
    drop-shadow(0 1px 1px rgba(255,255,255,.02));
}

.cell.multiplier .symbol{
  width:51%;
  height:51%;
}

.cell.scatter .symbol{
  width:71%;
  height:71%;
}

.cell.blank .symbol{
  width:50%;
  height:50%;
  opacity:.68;
  filter:
    drop-shadow(0 2px 6px rgba(0,0,0,.20))
    brightness(.78);
}

.cell.spinning .tile{
  animation:slotTilePulse .44s linear infinite;
}

.cell.spinning .symbol{
  filter:
    brightness(1.02)
    drop-shadow(0 4px 8px rgba(0,0,0,.16));
  transform:translate(-50%, -7%) scale(.99);
}

.cell.spinning::after{
  content:"";
  position:absolute;
  inset:9%;
  border-radius:18%;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.10) 42%,
      rgba(255,255,255,0) 100%
    );
  mix-blend-mode:screen;
  animation:slotSpinSweep .46s linear infinite;
  opacity:.14;
  pointer-events:none;
  z-index:4;
}

.cell.settle-bounce .symbol{
  animation:slotSettleBounce .28s ease-out;
}

.cell.win .symbol{
  transform:translate(-50%,-50%) scale(1.05);
  filter:
    drop-shadow(0 0 8px rgba(255,200,80,.42))
    drop-shadow(0 0 14px rgba(255,120,0,.22));
}

.cell.triggered .symbol{
  animation:scatterPulse .7s ease-in-out infinite;
}

.cell.triggered .tile{
  animation:scatterTilePulse .7s ease-in-out infinite;
}

.cell.bonus-hit .symbol{
  animation:bonusHitPulse .55s ease-in-out infinite;
}

.cell.pop{
  transform:scale(.92);
  opacity:0;
}

@keyframes slotTilePulse{
  0%,100%{ transform:scale(1.005); filter:brightness(1); }
  50%{ transform:scale(1.018); filter:brightness(1.06); }
}

@keyframes slotSpinSweep{
  0%{ transform:translateY(-44%); opacity:0; }
  25%{ opacity:.22; }
  100%{ transform:translateY(44%); opacity:0; }
}

@keyframes slotSettleBounce{
  0%{ transform:translate(-50%,-76%) scale(.93); opacity:.65; }
  60%{ transform:translate(-50%,-44%) scale(1.03); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
}

@keyframes scatterPulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-50%) scale(1.07); }
}

@keyframes scatterTilePulse{
  0%,100%{ transform:scale(1.005); }
  50%{ transform:scale(1.02); }
}

@keyframes bonusHitPulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-50%) scale(1.08); }
}

.buy-feature-btn{
  position:absolute;
  right:-2px;
  bottom:-18px;
  z-index:20;
  width:196px;
  height:74px;
  padding:0;
  background:url("../assets/ui/buy-feature-pill.png") center/contain no-repeat;
  outline:none;
  transition:transform .16s ease, filter .16s ease;
  filter:
    drop-shadow(0 10px 16px rgba(0,0,0,.34))
    drop-shadow(0 0 10px rgba(255,120,0,.10));
  touch-action:manipulation;
}

.buy-feature-btn.hidden{
  display:none !important;
}

.buy-feature-btn:hover{
  transform:translateY(-2px) scale(1.01);
}

.buy-feature-btn:active{
  transform:scale(.98);
}

.bonus-hud{
  position:absolute;
  left:50%;
  bottom:-14px;
  transform:translateX(-50%);
  z-index:24;
  width:178px;
  height:96px;
  pointer-events:none;
}

.bonus-hud.hidden{
  display:none !important;
}

.bonus-hud-bg{
  position:absolute;
  inset:0;
  background:url("../assets/ui/totox_plane.png") center/contain no-repeat;
  filter:
    drop-shadow(0 10px 16px rgba(0,0,0,.35))
    drop-shadow(0 0 16px rgba(255,120,0,.08));
}

.bonus-totalx-value{
  position:absolute;
  left:50%;
  top:44%;
  transform:translate(-50%,-50%);
  width:42%;
  max-width:42%;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:14px;
  line-height:1;
  font-weight:1000;
  white-space:nowrap;
  overflow:hidden;
  color:#fff4d0;
  text-shadow:
    0 2px 8px rgba(0,0,0,.95),
    0 0 6px rgba(255,255,255,.08);
  z-index:2;
}

.bonus-overlay{
  position:absolute;
  inset:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:rgba(0,0,0,.14);
  touch-action:manipulation;
}

.bonus-overlay.hidden{
  display:none !important;
}

.bonus-popup{
  position:relative;
  width:90%;
  max-width:520px;
  aspect-ratio:2 / 1;
  animation:bonusPopupIn .28s ease;
}

.bonus-popup::after{
  content:"Ekrana dokun";
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%);
  padding:7px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.48);
  color:#fff3cf;
  font-size:11px;
  font-weight:900;
}

.bonus-popup-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}

.bonus-popup.finish .bonus-finish-amount{
  position:absolute;
  left:50%;
  top:58%;
  transform:translate(-50%,-50%);
  width:60%;
  text-align:center;
  font-size:clamp(22px, 5vw, 38px);
  font-weight:1000;
  line-height:1;
  color:#ffe7a6;
  text-shadow:0 2px 10px rgba(0,0,0,.96);
  white-space:nowrap;
  overflow:hidden;
}

@keyframes bonusPopupIn{
  0%{ transform:scale(.88); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}

.mobile-minimal-hud{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top:2px;
  padding:0 6px calc(8px + var(--safe-bottom));
  position:relative;
  z-index:60;
  flex-direction:column;
  align-items:center;
  transition:opacity .18s ease, transform .18s ease;
  touch-action:manipulation;
}

.mobile-minimal-hud.bonus-mode{
  opacity:.74;
  transform:translateY(24px);
}

.mobile-minimal-top{
  width:min(94vw, 430px);
  min-height:92px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  margin-top:-2px;
  touch-action:manipulation;
}

.big-spin-btn{
  position:relative;
  width:84px;
  height:84px;
  border-radius:50%;
  padding:0;
  display:grid;
  place-items:center;
  background:transparent;
  transition:transform .14s ease;
  touch-action:manipulation;
}

.big-spin-btn:hover{ transform:translateY(-1px); }
.big-spin-btn:active{ transform:scale(.97); }

.big-spin-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:linear-gradient(180deg,#f4f5f7 0%, #bcc2cd 40%, #69707c 72%, #2b3038 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.24),
    inset 0 -6px 10px rgba(0,0,0,.24);
}

.big-spin-core{
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 26%, #3ea0ff 0%, #1f66dc 36%, #0d3b8d 68%, #08204c 100%);
}

.big-spin-glow{
  position:absolute;
  inset:16px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 24%, rgba(255,255,255,.22), rgba(255,255,255,.04) 46%, rgba(255,255,255,0) 72%);
  z-index:2;
}

.big-spin-logo{
  position:absolute;
  inset:12px;
  width:calc(100% - 24px);
  height:calc(100% - 24px);
  object-fit:contain;
  z-index:3;
  filter:
    drop-shadow(0 2px 8px rgba(0,0,0,.22))
    drop-shadow(0 0 5px rgba(130,210,255,.14));
}

.mini-logo-btn{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  padding:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  touch-action:manipulation;
}

.mini-logo-btn-img{
  width:80%;
  height:80%;
  object-fit:contain;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.22));
}

.mobile-minimal-bottom{
  width:min(94vw, 430px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:4px auto 0;
  touch-action:manipulation;
}

.mini-info-card{
  min-height:44px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  padding:8px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.mini-info-label{
  font-size:10px;
  font-weight:1000;
  letter-spacing:.05em;
  color:#48b1ff;
}

.mini-info-value{
  font-size:14px;
  font-weight:1000;
  color:#fff;
  line-height:1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.hidden{ display:none !important; }
.legacy-hidden{ display:none !important; }

.bet-modal,
.buy-confirm-modal,
.ui-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  opacity:1;
  transition:opacity .18s ease;
  touch-action:manipulation;
}

.bet-modal{
  z-index:100;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.buy-confirm-modal{
  z-index:120;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.ui-modal{
  z-index:140;
  background:rgba(0,0,0,.56);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.bet-modal.hidden,
.buy-confirm-modal.hidden,
.ui-modal.hidden{
  display:none !important;
}

.bet-modal-card,
.ui-modal-card{
  width:min(100%, 420px);
  max-height:min(86vh, 760px);
  overflow:auto;
  border-radius:18px;
  padding:16px;
  background:
    linear-gradient(180deg, rgba(18,12,28,.72), rgba(8,6,18,.80));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 40px rgba(0,0,0,.34);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
}

.info-card,
.history-card{
  width:min(100%, 520px);
}

.bet-modal-title,
.ui-modal-title{
  font-size:17px;
  font-weight:1000;
  text-align:center;
  margin-bottom:14px;
  color:#d9f3ff;
  letter-spacing:.06em;
}

.bet-options{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
  max-height:52vh;
  overflow:auto;
  padding-right:2px;
}

.bet-option,
.auto-option{
  height:44px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:#fff;
  font-size:13px;
  font-weight:900;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(255,255,255,.05);
}

.bet-option.active{
  background:linear-gradient(180deg, #61b8ff, #1f66dc);
  color:#eefcff;
  box-shadow:
    0 8px 18px rgba(30,110,255,.22),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.modal-close,
.ui-modal-close{
  width:100%;
  height:42px;
  margin-top:14px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color:#fff;
  font-weight:900;
}

.buy-confirm-card{
  position:relative;
  width:min(100%, 520px);
  aspect-ratio:3 / 2;
}

.buy-confirm-bg{
  position:absolute;
  inset:0;
  background:url("../assets/ui/buy-confirm-popup.png") center/contain no-repeat;
}

.buy-confirm-amount{
  position:absolute;
  left:50%;
  top:46%;
  transform:translate(-50%,-50%);
  min-width:140px;
  text-align:center;
  font-size:22px;
  font-weight:1000;
  color:#ffe8b2;
  text-shadow:0 2px 8px rgba(0,0,0,.95);
  pointer-events:none;
}

.buy-confirm-hotspot{
  position:absolute;
  bottom:10%;
  width:32%;
  height:22%;
  background:transparent;
}

.buy-confirm-hotspot.cancel{ left:8%; }
.buy-confirm-hotspot.confirm{ right:8%; }

.history-chips-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
}

.history-chip-row{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}

.history-chip-row::-webkit-scrollbar{
  display:none;
}

.history-chip{
  flex:0 0 auto;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:#dcefff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.03em;
  white-space:nowrap;
}

.history-chip.active{
  background:linear-gradient(180deg, rgba(79,172,255,.26), rgba(24,92,220,.18));
  border-color:rgba(90,180,255,.34);
  color:#f3fbff;
  box-shadow:
    0 0 0 1px rgba(90,180,255,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.minimal-history-list{
  display:flex;
  flex-direction:column;
  gap:0;
  max-height:46vh;
  overflow:auto;
  margin-top:2px;
}

.ui-history-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 2px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.ui-history-item:last-child{
  border-bottom:none;
}

.ui-history-left{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
}

.ui-history-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex:0 0 9px;
  margin-top:1px;
}

.ui-history-dot.is-win{
  background:#63e8a3;
  box-shadow:0 0 10px rgba(99,232,163,.28);
}

.ui-history-dot.is-loss{
  background:#ff8080;
  box-shadow:0 0 10px rgba(255,128,128,.22);
}

.ui-history-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.ui-history-title{
  font-size:12px;
  font-weight:900;
  color:#eef7ff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ui-history-sub{
  font-size:10px;
  color:rgba(255,255,255,.62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ui-history-right{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
}

.ui-history-amount{
  font-size:13px;
  font-weight:1000;
  white-space:nowrap;
}

.ui-history-amount.is-win{
  color:#72efad;
}

.ui-history-amount.is-loss{
  color:#ff8e8e;
}

.ui-history-time{
  font-size:10px;
  color:rgba(255,255,255,.56);
  white-space:nowrap;
}

.ui-history-empty{
  text-align:center;
  color:rgba(255,255,255,.72);
  padding:14px 0;
}

.minimal-history-pagination{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.history-page-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  color:#fff;
  font-size:18px;
  font-weight:900;
  line-height:1;
}

.history-page-indicator{
  min-width:60px;
  text-align:center;
  font-size:12px;
  font-weight:900;
  color:#d7efff;
}

.auto-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}

.logo-modal-brand{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:12px;
}

.logo-modal-brand-img{
  width:72px;
  height:72px;
  object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.24));
}

.logo-menu-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}

.logo-menu-btn{
  min-height:86px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  color:#eef8ff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.logo-menu-btn svg{
  width:20px;
  height:20px;
}

.logo-menu-btn span{
  font-size:11px;
  font-weight:1000;
  letter-spacing:.04em;
}

.turbo-toggle-btn.active{
  background:linear-gradient(180deg, rgba(75,170,255,.28), rgba(20,90,220,.20));
  border-color:rgba(90,180,255,.40);
  box-shadow:
    0 0 0 1px rgba(90,180,255,.18),
    0 0 18px rgba(40,120,255,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.official-info-box{
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.05);
  color:#eef5ff;
  font-size:13px;
  line-height:1.55;
}

.official-info-box p{
  margin:0 0 8px;
}

.official-info-box p:last-child{
  margin-bottom:0;
}

.info-section{
  margin-bottom:12px;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
}

.info-section-title{
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
  color:#bfe9ff;
  margin-bottom:12px;
}

.paytable-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.paytable-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.04);
}

.paytable-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}

.paytable-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.paytable-name{
  font-size:13px;
  color:#eef5ff;
  font-weight:800;
}

.paytable-text small{
  margin-top:2px;
  font-size:11px;
  color:rgba(255,255,255,.64);
}

.paytable-row strong{
  font-size:12px;
  color:#8fd2ff;
  white-space:nowrap;
}

.paytable-icon{
  width:34px;
  height:34px;
  object-fit:contain;
}

.bonus-rule-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.bonus-rule-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.04);
  color:#eef5ff;
  font-size:13px;
  line-height:1.45;
}

.bonus-rule-icon{
  width:34px;
  height:34px;
  object-fit:contain;
  flex:0 0 34px;
}

@media (max-width:600px){
  .game-logo{ width:84px; }
  .win-value{ font-size:17px; }

  .board-grid{
    left:24.7%;
    top:26.8%;
    width:50.5%;
    height:43.1%;
  }

  .top-freespin-indicator span{
    font-size:10px;
    padding:3px 12px 4px;
  }

  .mobile-minimal-top{
    width:min(95vw, 430px);
    min-height:90px;
  }

  .big-spin-btn{
    width:82px;
    height:82px;
  }

  .mini-logo-btn{
    width:40px;
    height:40px;
    right:2px;
  }

  .bonus-hud{
    width:170px;
    height:92px;
    bottom:-12px;
  }

  .mobile-minimal-hud.bonus-mode{
    transform:translateY(28px);
  }

  .buy-feature-btn{
    width:182px;
    height:68px;
    right:-1px;
    bottom:-16px;
  }

  .paytable-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .paytable-row strong{
    padding-left:44px;
  }

  .ui-history-title{
    font-size:11px;
  }

  .ui-history-sub{
    font-size:10px;
  }

  .ui-history-amount{
    font-size:12px;
  }
}

@media (min-width:761px){
  .game-shell{
    padding:6px 14px calc(10px + var(--safe-bottom));
  }

  .game-logo{ width:100px; }
  .top-win-bar{ max-width:840px; }
  .board-area{ max-width:900px; }

  .board-wrap{
    max-width:900px;
    margin:0 auto;
  }

  .board-grid{
    left:24.7%;
    top:26.8%;
    width:50.5%;
    height:43.1%;
  }

  .bonus-hud{
    width:188px;
    height:104px;
    bottom:-16px;
  }

  .buy-feature-btn{
    width:212px;
    height:78px;
    right:2px;
    bottom:-20px;
  }

  .mobile-minimal-top,
  .mobile-minimal-bottom{
    width:min(92vw, 470px);
  }
}