/* ==========================================================
   KEREN89 MAHJONG DEMO - MAIN STYLESHEET
   Readable / non-minified edition

   Sections are kept in source order to preserve behavior.
   Search common selectors such as: .demo-header, .cabinet,
   .board, .tile, .controls, .modal, .premium-footer.
========================================================== */

:root {
  --gold:#ffc533;
  --deep-gold:#a85a00;
  --red:#7d1008;
  --red2:#3a0704;
  --teal:#0e927e;
  --panel:#292a38;
  --panel2:#333440;
  --cream:#fffaf0;
}

* {
  box-sizing:border-box
}

html,body {
  margin:0;
  min-height:100%;
  background:radial-gradient(circle at 50% 0,#263244 0,#111827 48%,#090f18 100%);
  font-family:Arial,Helvetica,sans-serif;
  color:#fff
}

button {
  font:inherit
}

body {
  display:flex;
  justify-content:center;
  padding:4px 0 18px;
  overflow-x:hidden
}

.app-shell {
  width:min(100%,470px);
  padding:0 10px
}

.demo-header {
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 12px;
  background:linear-gradient(90deg,#202a39,#17202e);
  border:1px solid #334155;
  border-radius:9px 9px 0 0;
  box-shadow:0 7px 22px #0008;
  overflow:hidden
}

.brand-logo {
  display:block;
  width:min(76%,330px);
  height:46px;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px #000a)
}

.cabinet {
  position:relative;
  margin-top:5px;
  padding:12px 13px 10px;
  border-radius:27px;
  background:  radial-gradient(circle at 10% 20%,#d23a1e55,transparent 25%),radial-gradient(circle at 90% 30%,#d23a1e55,transparent 24%),repeating-radial-gradient(circle at 0 0,transparent 0 11px,#ffb0000b 12px 13px),linear-gradient(180deg,#8d140a,#410804 72%,#250302);
  border:3px solid #8f4c00;
  box-shadow:inset 0 0 30px #ffab0044,0 14px 28px #000b
}

.cabinet:before,.cabinet:after {
  content:"";
  position:absolute;
  top:125px;
  width:22px;
  height:58%;
  border:4px solid #ffb914;
  border-left:0;
  border-radius:0 100% 100% 0;
  filter:drop-shadow(0 0 5px #ff9800)
}

.cabinet:before {
  left:5px
}

.cabinet:after {
  right:5px;
  transform:scaleX(-1)
}

.ways-title {
  width:48%;
  min-width:190px;
  margin:0 auto 8px;
  text-align:center;
  padding:5px 12px;
  border-radius:12px;
  background:linear-gradient(#bd1d0d,#650500);
  border:2px solid #ffd64a;
  color:#ffe27b;
  font:900 italic 18px Georgia,serif;
  letter-spacing:1px;
  box-shadow:0 0 12px #ffb00088
}

.multiplier-track {
  height:45px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  padding:0 16px;
  margin-bottom:8px;
  border-radius:28px;
  background:linear-gradient(#1ab19a,#087162);
  border:2px solid #ffd13c;
  box-shadow:inset 0 0 18px #002f31,0 0 12px #ffb00044
}

.multiplier-track span {
  text-align:center;
  font:900 italic 27px Georgia,serif;
  color:#002f31;
  text-shadow:0 1px #6ff0d7
}

.multiplier-track span.active {
  color:#ffd04a;
  text-shadow:0 0 5px #fff,0 0 14px #ff9d00;
  transform:scale(1.15)
}

.board-frame {
  position:relative;
  isolation:isolate;
  margin:0 auto;
  width:80%;
  padding:4px;
  border-radius:12px;
  background:linear-gradient(#d99a25,#6b1c07);
  box-shadow:0 0 16px #ffb00080
}

.board {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(6,1fr);
  gap:3px;
  aspect-ratio:5/6;
  background:linear-gradient(180deg,#8e160d,#650d08);
  border-radius:8px;
  padding:4px;
  overflow:hidden
}

.tile {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  border-radius:8px;
  background:linear-gradient(145deg,#fffdf4 0,#f3eee2 65%,#c9c2ae 100%);
  box-shadow:inset 0 1px 2px #fff,0 4px 0 #9f9785,0 5px 5px #0008;
  transition:transform .22s,opacity .22s,filter .22s
}

.tile.gold {
  background:linear-gradient(145deg,#fff16a,#ffc21e 55%,#d57800);
  box-shadow:inset 0 1px 3px #fff9a1,0 4px 0 #9d5000,0 0 12px #ffc400
}

.tile.winner {
  animation:pulseWin .35s infinite alternate;
  z-index:4
}

.tile.cracking:after {
  content:"";
  position:absolute;
  inset:8%;
  z-index:7;
  pointer-events:none;
  background:linear-gradient(62deg,transparent 46%,#6f6758 47% 50%,transparent 51%),linear-gradient(118deg,transparent 43%,#807767 44% 47%,transparent 48%),linear-gradient(15deg,transparent 54%,#8b826f 55% 58%,transparent 59%);
  filter:drop-shadow(0 0 1px #fff);
  animation:crackFlash .12s both
}

.tile.break {
  animation:breakTile .30s forwards
}

.tile.drop {
  animation:dropIn .34s both
}

.tile .face {
  width:88%;
  height:88%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative
}

.tile .char {
  font-family:"Times New Roman",serif;
  font-weight:900;
  font-size:clamp(20px,7vw,38px);
  line-height:.82;
  text-align:center;
  text-shadow:0 1px #fff
}

.char.red {
  color:#c82018
}

.char.green {
  color:#15851c
}

.char.blue {
  color:#182f9d
}

.wild-face {
  flex-direction:column;
  color:#ffc627;
  text-shadow:0 2px 0 #a34d00,0 0 7px #ffcf35;
  font-weight:900;
  font-size:clamp(13px,4vw,22px)
}

.wild-face .ingot {
  font-size:clamp(24px,8vw,44px);
  line-height:.8
}

.scatter-face {
  font:900 clamp(27px,9vw,47px) Georgia,serif;
  color:#ff2d11;
  text-shadow:0 2px #7d1008,0 0 8px #ffb000;
  filter:drop-shadow(0 0 5px #ff4d00)
}

.dots,.bamboos {
  display:grid;
  width:84%;
  height:84%;
  place-items:center
}

.dot {
  width:clamp(7px,2.5vw,13px);
  height:clamp(7px,2.5vw,13px);
  border-radius:50%;
  border:2px solid currentColor;
  background:radial-gradient(circle,#fff 0 18%,currentColor 20% 42%,#fff 44% 52%,currentColor 54%);
  box-shadow:inset 0 0 2px #0007
}

.bamboo {
  width:clamp(5px,1.8vw,9px);
  height:clamp(16px,5.8vw,29px);
  border-radius:7px;
  background:repeating-linear-gradient(180deg,#157d21 0 5px,#d8f3c5 5px 7px,#157d21 7px 11px);
  box-shadow:inset 0 0 1px #003b08
}

.big-win {
  position:absolute;
  inset:0;
  z-index:30;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:linear-gradient(180deg,#00000018,#00000058);
  font:900 italic 38px Georgia,serif;
  color:#ffe05f;
  text-shadow:0 0 7px #fff,0 0 20px #ff8a00;
  opacity:0;
  pointer-events:none;
  transform:scale(.82);
  transition:opacity .18s ease,transform .18s ease
}

.big-win[hidden] {
  display:none!important
}

.big-win.is-visible {
  opacity:1;
  transform:scale(1)
}

.big-win strong {
  font-size:24px;
  margin-top:6px
}

.bonus-banner {
  margin:10px 2px 6px;
  text-align:center;
  padding:6px;
  border-radius:8px;
  background:linear-gradient(#c22011,#710800);
  border:2px solid #ffd12b;
  color:#ffe47c;
  font:900 italic 18px Georgia,serif;
  box-shadow:inset 0 0 8px #ffbb003d
}

.meters {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px
}

.meters>div {
  min-width:0;
  text-align:center;
  background:#6d0b07;
  border:1.5px solid #ffc400;
  border-radius:8px;
  padding:4px 2px
}

.meters small {
  display:block;
  color:#ffd652;
  font-size:7px;
  font-weight:800
}

.meters strong {
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  margin-top:2px
}

.controls {
  display:grid;
  grid-template-columns:1fr 46px 92px 46px 1fr 34px;
  align-items:center;
  gap:4px;
  margin-top:8px
}

.controls button {
  border:0;
  color:#ffd62c;
  background:transparent;
  font-weight:900;
  cursor:pointer
}

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

.icon-control {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px
}

.icon-control span {
  font-size:24px
}

.icon-control b {
  font-size:10px
}

.icon-control.active {
  filter:drop-shadow(0 0 8px #fff200);
  color:#fff65a
}

.round-control {
  width:38px;
  height:38px;
  border-radius:50%!important;
  background:linear-gradient(#c02d14,#6c0804)!important;
  border:2px solid #ffc224!important;
  box-shadow:inset 0 0 7px #ff9d00,0 2px 4px #0008;
  font-size:25px!important
}

.spin-control {
  width:82px;
  height:82px;
  border-radius:50%!important;
  background:radial-gradient(circle,#25ac99 0 48%,#087b71 49% 61%,#ffc54a 62% 70%,#7f4c00 71%)!important;
  border:5px solid #ffe478!important;
  box-shadow:0 0 0 3px #ae5f00,0 0 14px #ffd431
}

.spin-control span {
  display:block;
  font-size:48px;
  color:#ffd35f;
  text-shadow:0 2px #7c4200
}

.spin-control.spinning span {
  animation:spin 1s linear infinite
}

.menu-control {
  font-size:28px!important;
  color:#fff!important
}

footer {
  text-align:center;
  color:#9cabc0;
  font-size:10px;
  padding-top:8px
}

.modal {
  position:fixed;
  inset:0;
  z-index:50;
  background:#0009;
  display:flex;
  justify-content:center;
  align-items:stretch
}

.modal[hidden] {
  display:none
}

.modal-panel {
  width:min(100%,560px);
  height:100%;
  background:var(--panel);
  border-left:2px solid #6cda91;
  border-right:2px solid #6cda91;
  overflow:hidden
}

.modal-panel>header {
  height:72px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  padding:0 22px;
  background:#222330;
  border-bottom:1px solid #3c3d48
}

.modal-panel h2 {
  text-align:center;
  color:#ffad3c;
  font-size:25px;
  font-weight:500;
  margin:0
}

.modal-panel>header button {
  border:0;
  background:none;
  color:#fff;
  font-size:48px;
  font-weight:200;
  line-height:1;
  cursor:pointer
}

.modal-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#222330
}

.modal-tabs button {
  padding:11px;
  border:0;
  border-bottom:3px solid transparent;
  background:none;
  color:#ddd;
  font-weight:700
}

.modal-tabs button.active {
  color:#ffb13c;
  border-color:#ffb13c
}

.modal-content {
  height:calc(100% - 116px);
  overflow:auto;
  padding:24px 28px 70px;
  scrollbar-color:#73737d transparent
}

.tab-page {
  display:none
}

.tab-page.active {
  display:block
}

.tab-page h3 {
  text-align:center;
  font-size:20px;
  margin:10px 0 24px
}

.tab-page p,.tab-page li {
  color:#dedee4;
  font-size:16px;
  line-height:1.4
}

.tab-page li {
  margin:10px 0
}

.paytable-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 26px
}

.pay-item {
  display:grid;
  grid-template-columns:86px 1fr;
  align-items:center;
  gap:12px
}

.pay-item .sample {
  width:62px;
  height:70px
}

.pay-values {
  display:grid;
  grid-template-columns:auto auto;
  gap:4px 14px;
  color:#ddd
}

.pay-values b {
  color:#ffb13c;
  font-weight:500
}

.rule-block {
  margin:30px -28px 0;
  padding:25px 28px;
  border-top:1px solid #3e3f4b
}

.gold-demo,.scatter-row {
  display:flex;
  justify-content:center;
  gap:12px;
  margin:12px 0 22px
}

.gold-demo .tile,.scatter-row .tile {
  width:62px;
  height:70px
}

.mini-multipliers {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:10px 16px;
  border-radius:28px;
  background:linear-gradient(#20ac99,#087164);
  border:1px solid #d8b631;
  color:#003c34;
  font:900 italic 29px Georgia,serif;
  text-shadow:0 1px #75eedf
}

.mini-multipliers b:nth-child(2) {
  color:#ffcf42;
  text-shadow:0 0 7px #fff,0 0 12px #ff8a00
}

.ways-example {
  text-align:center;
  font-size:24px;
  color:#ddd
}

.ways-example span,.ways-example strong {
  color:#ffca2f
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}

@keyframes dropIn {
  0% {
    transform:translateY(-95px) scale(.9);
    opacity:0
  }
  78% {
    transform:translateY(5px);
    opacity:1
  }
  100% {
    transform:none;
    opacity:1
  }
}

@keyframes pulseWin {
  to {
    transform:scale(1.05);
    filter:brightness(1.35)
  }
}

@keyframes breakTile {
  0% {
    opacity:1;
    transform:scale(1)
  }
  55% {
    opacity:.9;
    transform:scale(1.08) rotate(-2deg)
  }
  100% {
    transform:scale(.12) rotate(18deg);
    opacity:0;
    filter:blur(2px)
  }
}

@media(max-width:390px) {
  .app-shell {
    padding:0 5px
  }
  .cabinet {
    padding:10px 8px 8px
  }
  .board-frame {
    width:82%
  }
  .controls {
    grid-template-columns:1fr 40px 78px 40px 1fr 30px
  }
  .spin-control {
    width:70px;
    height:70px
  }
  .spin-control span {
    font-size:40px
  }
  .round-control {
    width:34px;
    height:34px
  }
  .paytable-grid {
    grid-template-columns:1fr
  }
  .modal-content {
    padding-left:20px;
    padding-right:20px
  }
  .rule-block {
    margin-left:-20px;
    margin-right:-20px;
    padding-left:20px;
    padding-right:20px
  }
}

.tile-shard,.break-dust {
  position:absolute;
  z-index:20;
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:shardFly .52s cubic-bezier(.12,.68,.25,1) var(--delay,0ms) forwards
}

.tile-shard {
  width:13px;
  height:17px;
  background:linear-gradient(145deg,#fffdf4,#d6cfbf);
  border:1px solid #bdb4a2;
  clip-path:polygon(8% 0,100% 18%,72% 100%,0 70%);
  box-shadow:0 1px 2px #0008
}

.tile-shard:nth-of-type(3n) {
  width:9px;
  height:12px;
  clip-path:polygon(50% 0,100% 100%,0 75%)
}

.tile-shard.gold-shard {
  background:linear-gradient(145deg,#fff58d,#ffc21c 58%,#b96800);
  border-color:#ffdf59;
  box-shadow:0 0 6px #ffc400
}

.break-dust {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fff4c9;
  filter:blur(.5px);
  animation-name:dustFly;
  animation-duration:.45s
}

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

@keyframes shardFly {
  0% {
    opacity:1;
    transform:translate(-50%,-50%) scale(.9) rotate(0)
  }
  70% {
    opacity:1
  }
  100% {
    opacity:0;
    transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.45) rotate(var(--rot))
  }
}

@keyframes dustFly {
  0% {
    opacity:.9;
    transform:translate(-50%,-50%) scale(.7)
  }
  100% {
    opacity:0;
    transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.8)
  }
}

/* Cascade/tumble animation: survivors move down; only replacement tiles enter from above. */
.tile.cascade-drop {
  animation:cascadeFall .46s cubic-bezier(.18,.78,.22,1.08) both;
  will-change:transform,opacity;
}

.tile.cascade-drop.new-tile {
  animation-name:newTileFall;
}

@keyframes cascadeFall {
  0% {
    transform:translateY(calc(var(--fall-rows,0) * -103%));
    opacity:1
  }
  78% {
    transform:translateY(5px);
    opacity:1
  }
  100% {
    transform:translateY(0);
    opacity:1
  }
}

@keyframes newTileFall {
  0% {
    transform:translateY(calc(var(--fall-rows,1) * -103%));
    opacity:0
  }
  20% {
    opacity:1
  }
  78% {
    transform:translateY(6px);
    opacity:1
  }
  100% {
    transform:translateY(0);
    opacity:1
  }
}

/* Auto-spin amount picker */
.auto-modal {
  position:fixed;
  inset:0;
  z-index:70;
  background:#05070cc7;
  display:grid;
  place-items:center;
  padding:18px
}

.auto-modal[hidden] {
  display:none
}

.auto-picker {
  width:min(92vw,390px);
  border:2px solid #e8b72f;
  border-radius:18px;
  background:linear-gradient(180deg,#2b2937,#181824);
  box-shadow:0 18px 60px #000,0 0 28px #ff9d003f;
  overflow:hidden;
  color:#fff
}

.auto-picker header {
  display:grid;
  grid-template-columns:1fr 42px;
  align-items:center;
  padding:15px 16px;
  background:linear-gradient(#a10f08,#650602);
  border-bottom:1px solid #f6c143
}

.auto-picker h2 {
  margin:0;
  text-align:center;
  font:800 19px Georgia,serif;
  color:#ffd45b;
  letter-spacing:.6px
}

.auto-picker header button {
  border:0;
  background:none;
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer
}

.auto-picker p {
  text-align:center;
  color:#ddd;
  margin:20px 12px 12px
}

.auto-options {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:8px 18px 22px
}

.auto-options button {
  min-height:54px;
  border:2px solid #d49e18;
  border-radius:14px;
  background:linear-gradient(#b3180e,#760804);
  color:#ffe16c;
  font:900 20px Georgia,serif;
  box-shadow:inset 0 1px #ffcf70,0 5px 12px #0008;
  cursor:pointer
}

.auto-options button:hover,.auto-options button:focus-visible {
  filter:brightness(1.2);
  transform:translateY(-1px)
}

.auto-options button:last-child {
  grid-column:2
}

.icon-control.active b {
  min-width:34px
}

/* Custom 3D 胡 scatter supplied by the user. */
.scatter-face {
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  background:transparent!important
}

.scatter-face img {
  width:94%;
  height:94%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 4px #ff2600) drop-shadow(0 0 8px #ff9a00) drop-shadow(0 2px 1px #6b0000);
  animation:scatterPulse 1.15s ease-in-out infinite alternate
}

@keyframes scatterPulse {
  from {
    transform:scale(.96);
    filter:drop-shadow(0 0 3px #ff2600) drop-shadow(0 0 6px #ff9a00) drop-shadow(0 2px 1px #6b0000)
  }
  to {
    transform:scale(1.035);
    filter:drop-shadow(0 0 7px #ff2600) drop-shadow(0 0 13px #ffd000) drop-shadow(0 2px 1px #6b0000)
  }
}

.tile:has(.scatter-face) {
  background:radial-gradient(circle,#5a0800 0 35%,#180000 72%,#050000 100%);
  border-color:#ffb300;
  box-shadow:inset 0 0 10px #ff8a0033,0 0 7px #ff4d00
}

.tile.gold:has(.scatter-face) {
  background:radial-gradient(circle,#5a0800 0 35%,#180000 72%,#050000 100%)
}

.multiplier-track.free-mode {
  box-shadow:inset 0 0 18px #32fff780,0 0 18px #ffd00080;
  border-color:#ffe36e
}

.multiplier-track.free-mode span.active {
  color:#fff3a0;
  text-shadow:0 0 5px #fff,0 0 14px #ffb000,0 0 22px #ff5a00;
  transform:scale(1.14)
}

/* Scatter + Free Spin trigger */
.tile.scatter-hit {
  z-index:30;
  animation:scatterHit .72s ease-in-out both !important;
  filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px #ffb000) drop-shadow(0 0 30px #ff2600);
}

@keyframes scatterHit {
  0% {
    transform:scale(1)
  }
  35% {
    transform:scale(1.2) rotate(-3deg)
  }
  60% {
    transform:scale(1.08) rotate(3deg)
  }
  100% {
    transform:scale(1.16)
  }
}

.big-win.free-spin-popup {
  background:radial-gradient(circle at 50% 45%,rgba(255,210,0,.30),rgba(80,0,0,.78) 48%,rgba(0,0,0,.88));
  backdrop-filter:blur(3px);
}

.big-win.free-spin-popup #bigWinTitle {
  font-size:clamp(34px,9vw,72px);
  color:#fff8b8;
  text-shadow:0 2px 0 #8b1d00,0 0 10px #fff,0 0 22px #ffbf00,0 0 44px #ff3c00;
  animation:freeTitle .8s ease-in-out infinite alternate;
}

.big-win.free-spin-popup #bigWinAmount {
  display:block;
  margin-top:12px;
  color:#fff;
  font-size:clamp(18px,4.5vw,34px);
  text-shadow:0 0 12px #ffb000;
}

@keyframes freeTitle {
  to {
    transform:scale(1.08)
  }
}

/* === Popup Scatter / Free Spin — centered, straight, and clipped safely === */
.board-frame {
  overflow:hidden;
}

.big-win.free-spin-popup {
  inset:0;
  width:100%;
  height:100%;
  padding:clamp(12px,4vw,24px);
  overflow:hidden;
  box-sizing:border-box;
  font-style:normal;
  text-align:center;
  transform:none;
  background:     radial-gradient(circle at 50% 42%,rgba(255,225,74,.36) 0,rgba(191,43,0,.52) 31%,rgba(48,0,0,.86) 64%,rgba(0,0,0,.92) 100%);
  backdrop-filter:blur(2px);
}

.big-win.free-spin-popup.is-visible {
  transform:none;
}

.big-win.free-spin-popup::before {
  content:"";
  position:absolute;
  inset:11%;
  border:2px solid #ffd75a;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(104,8,3,.78),rgba(28,0,0,.88));
  box-shadow:inset 0 0 24px rgba(255,177,0,.28),0 0 20px rgba(255,126,0,.42);
}

.big-win.free-spin-popup::after {
  content:"◆  BONUS  ◆";
  position:relative;
  z-index:2;
  order:-1;
  margin-bottom:8px;
  color:#ffd96c;
  font:800 clamp(10px,2.8vw,14px)/1 Arial,sans-serif;
  letter-spacing:clamp(1px,.7vw,3px);
  text-shadow:0 1px 0 #6e1d00,0 0 8px #ff9d00;
}

.big-win.free-spin-popup #bigWinTitle, .big-win.free-spin-popup #bigWinAmount {
  position:relative;
  z-index:2;
  display:block;
  width:min(82%,320px);
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  overflow-wrap:anywhere;
  word-break:normal;
  white-space:normal;
  box-sizing:border-box;
  transform:none!important;
  font-style:normal!important;
}

.big-win.free-spin-popup #bigWinTitle {
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(27px,7.2vw,48px);
  line-height:1.05;
  letter-spacing:.5px;
  color:#fff6ae;
  text-shadow:0 2px 0 #861b00,0 0 8px #fff,0 0 19px #ffb800,0 0 32px #ff4300;
  animation:freeTitleSafe .78s ease-in-out infinite alternate;
}

.big-win.free-spin-popup #bigWinAmount {
  margin-top:12px;
  padding:8px 10px;
  border-top:1px solid rgba(255,220,95,.7);
  border-bottom:1px solid rgba(255,220,95,.7);
  color:#fff;
  font:800 clamp(15px,4vw,24px)/1.2 Arial,sans-serif;
  text-shadow:0 0 10px #ff9b00;
}

@keyframes freeTitleSafe {
  from {
    transform:scale(.97)
  }
  to {
    transform:scale(1.025)
  }
}

@media (max-width:380px) {
  .big-win.free-spin-popup {
    padding:10px
  }
  .big-win.free-spin-popup::before {
    inset:8%
  }
  .big-win.free-spin-popup #bigWinTitle {
    font-size:clamp(24px,7vw,36px)
  }
  .big-win.free-spin-popup #bigWinAmount {
    font-size:clamp(13px,3.8vw,19px)
  }
}

/* === Hamburger game menu === */
.game-menu[hidden] {
  display:none
}

.game-menu {
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:flex-end;
  justify-content:center
}

.game-menu-backdrop {
  position:absolute;
  inset:0;
  background:rgba(7,10,18,.48);
  backdrop-filter:blur(1.5px)
}

.game-menu-panel {
  position:relative;
  width:min(100%,520px);
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:4px;
  padding:18px 12px calc(14px + env(safe-area-inset-bottom));
  border-top:2px solid rgba(255,202,97,.72);
  border-radius:28px 28px 0 0;
  background:linear-gradient(180deg,rgba(180,79,39,.96),rgba(129,48,24,.98));
  box-shadow:0 -10px 35px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.18);
  animation:menuRise .22s ease-out both
}

.game-menu-panel::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:24px;
  border-top:2px solid rgba(255,215,122,.75);
  border-radius:50%;
  pointer-events:none
}

@keyframes menuRise {
  from {
    transform:translateY(100%)
  }
  to {
    transform:translateY(0)
  }
}

.game-menu-item {
  min-width:0;
  border:0;
  background:transparent;
  color:#ffe0aa;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:4px 1px;
  font:500 clamp(9px,2.5vw,12px)/1.1 Arial,sans-serif;
  cursor:pointer
}

.game-menu-item b {
  font-weight:500;
  white-space:nowrap
}

.menu-icon {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:2px solid #f3a94d;
  border-radius:50%;
  font:700 22px/1 Arial,sans-serif;
  color:#ffb64d;
  text-shadow:0 1px #6c2600
}

.game-menu-item:nth-child(3) .menu-icon,.game-menu-item:nth-child(4) .menu-icon {
  border-radius:5px
}

.history-icon {
  font-size:9px;
  border-style:dashed
}

.close-icon {
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.3);
  color:white
}

.game-menu-item.active .menu-icon {
  box-shadow:0 0 14px #ffd66a;
  background:rgba(255,202,69,.14)
}

.compact-panel {
  max-width:460px
}

.history-list {
  display:grid;
  gap:8px
}

.history-row {
  display:grid;
  grid-template-columns:54px 1fr 1fr;
  gap:8px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(255,178,70,.25);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  font-size:13px
}

.history-row span:nth-child(2),.history-row span:nth-child(3) {
  text-align:right
}

.history-empty {
  padding:30px 12px;
  text-align:center;
  color:#bbb
}

@media(max-width:390px) {
  .game-menu-panel {
    padding-left:5px;
    padding-right:5px
  }
  .menu-icon {
    width:30px;
    height:30px;
    font-size:19px
  }
  .game-menu-item {
    font-size:9px
  }
}

/* KEREN89 logo frame glow */
.demo-header {
  position:relative;
  isolation:isolate;
  border:1px solid rgba(255,216,92,.9);
  background:linear-gradient(180deg,#202a39,#121a27);
  box-shadow:     inset 0 0 14px rgba(255,210,70,.10),     0 0 5px rgba(255,217,91,.85),     0 0 14px rgba(255,170,0,.55),     0 0 28px rgba(255,106,0,.28),     0 8px 22px rgba(0,0,0,.72);
  overflow:visible;
  animation:logoFrameGlow 1.9s ease-in-out infinite alternate;
}

.demo-header::before {
  content:"";
  position:absolute;
  inset:-3px;
  z-index:-1;
  border-radius:11px 11px 2px 2px;
  border:2px solid rgba(255,208,65,.58);
  filter:blur(3px);
  opacity:.68;
  pointer-events:none;
}

.demo-header::after {
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:-5px;
  height:2px;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,#ffcf47,#fff2a3,#ff9d00,transparent);
  box-shadow:0 0 8px #ffcf47,0 0 16px #ff8a00;
  opacity:.85;
  pointer-events:none;
}

.brand-logo {
  filter:     drop-shadow(0 2px 4px rgba(0,0,0,.8))     drop-shadow(0 0 4px rgba(255,245,194,.65))     drop-shadow(0 0 10px rgba(255,184,37,.38));
}

@keyframes logoFrameGlow {
  from {
    box-shadow:inset 0 0 10px rgba(255,210,70,.08),0 0 4px rgba(255,217,91,.65),0 0 10px rgba(255,170,0,.4),0 0 20px rgba(255,106,0,.18),0 8px 22px rgba(0,0,0,.72)
  }
  to {
    box-shadow:inset 0 0 18px rgba(255,231,124,.16),0 0 7px rgba(255,238,155,.95),0 0 19px rgba(255,180,0,.72),0 0 34px rgba(255,92,0,.38),0 8px 22px rgba(0,0,0,.72)
  }
}

@media (prefers-reduced-motion:reduce) {
  .demo-header {
    animation:none
  }
}

/* Header Login / Daftar */
.brand-header {
  position:relative;
  display:grid;
  grid-template-columns:minmax(72px,1fr) minmax(145px,2.15fr) minmax(72px,1fr);
  gap:8px;
  align-items:center;
  padding:5px 9px;
}

.brand-logo {
  width:100%;
  max-width:230px;
  justify-self:center;
}

.header-cta {
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:34px;
  padding:0 10px;
  border:1.5px solid #ffe477;
  border-radius:9px;
  color:#fff5b7;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  letter-spacing:.5px;
  text-shadow:0 1px 2px #5b2100,0 0 7px #ffb400;
  background:linear-gradient(180deg,#d92713 0%,#8d0b05 52%,#570300 100%);
  box-shadow:inset 0 1px 0 #fff08c,0 0 9px #ffb00077,0 3px 7px #0008;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
  white-space:nowrap;
}

.header-register {
  background:linear-gradient(180deg,#eebf30 0%,#c67505 52%,#7b3900 100%);
  color:#271000;
  text-shadow:0 1px #fff2a6;
}

.header-cta:hover,.header-cta:focus-visible {
  transform:translateY(-1px) scale(1.025);
  filter:brightness(1.16);
  box-shadow:inset 0 1px 0 #fff6b5,0 0 14px #ffd34d,0 4px 9px #0009;
  outline:none;
}

.header-cta:active {
  transform:translateY(1px) scale(.98)
}

@media(max-width:390px) {
  .brand-header {
    grid-template-columns:68px minmax(122px,1fr) 68px;
    gap:5px;
    padding-inline:6px
  }
  .header-cta {
    height:31px;
    padding:0 5px;
    font-size:10px;
    border-radius:8px
  }
  .brand-logo {
    max-width:190px;
    height:42px
  }
}

@media(max-width:330px) {
  .brand-header {
    grid-template-columns:59px minmax(105px,1fr) 59px;
    gap:3px
  }
  .header-cta {
    font-size:9px;
    padding:0 3px
  }
}

/* Vertical mahjong tile proportions */
.board {
  aspect-ratio:5 / 7.15;
  grid-template-rows:repeat(6,minmax(0,1fr));
  gap:3px;
}

.tile {
  border-radius:7px;
  min-height:0;
  box-shadow:inset 0 1px 2px #fff,0 5px 0 #9f9785,0 6px 6px #0008;
}

.tile.gold {
  box-shadow:inset 0 1px 3px #fff9a1,0 5px 0 #9d5000,0 0 12px #ffc400;
}

.tile .face {
  width:86%;
  height:91%
}

@media(max-width:390px) {
  .board-frame {
    width:84%
  }
  .board {
    aspect-ratio:5 / 7.2;
    gap:3px
  }
  .tile {
    border-radius:6px
  }
}

/* === Responsive layout V2: phone, tablet, desktop, landscape === */
html {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%
}

body {
  min-width:280px;
  padding:max(4px,env(safe-area-inset-top)) max(0px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(0px,env(safe-area-inset-left))
}

.app-shell {
  width:min(100%,520px);
  padding-inline:clamp(4px,2.2vw,12px)
}

.demo-header {
  height:clamp(52px,12vw,66px)
}

.brand-header {
  grid-template-columns:minmax(58px,1fr) minmax(118px,2.1fr) minmax(58px,1fr);
  gap:clamp(3px,1.5vw,9px);
  padding-inline:clamp(5px,2vw,10px)
}

.brand-logo {
  max-width:235px;
  height:clamp(36px,9vw,50px)
}

.header-cta {
  height:clamp(29px,7.5vw,36px);
  padding-inline:clamp(4px,2vw,11px);
  font-size:clamp(8px,2.6vw,12px)
}

.cabinet {
  margin-top:clamp(5px,1.5vw,8px);
  padding:clamp(9px,2.8vw,14px) clamp(7px,2.6vw,14px) clamp(8px,2vw,12px);
  border-radius:clamp(19px,5.5vw,29px)
}

.ways-title {
  width:clamp(182px,52%,235px);
  min-width:0;
  font-size:clamp(14px,4.5vw,19px);
  padding:clamp(4px,1.2vw,6px) 8px;
  margin-bottom:clamp(6px,1.8vw,10px)
}

.multiplier-track {
  height:clamp(39px,10.5vw,49px);
  padding-inline:clamp(8px,3vw,17px);
  margin-bottom:clamp(6px,1.7vw,10px)
}

.multiplier-track span {
  font-size:clamp(21px,7vw,29px)
}

.board-frame {
  width:clamp(260px,84%,390px);
  max-width:100%;
  padding:clamp(3px,1vw,5px)
}

.board {
  gap:clamp(2px,.8vw,4px);
  padding:clamp(3px,.9vw,5px)
}

.tile {
  border-radius:clamp(5px,1.7vw,8px)
}

.tile .char {
  font-size:clamp(18px,7.5vw,38px)
}

.wild-face {
  font-size:clamp(10px,4vw,22px)
}

.wild-face .ingot {
  font-size:clamp(20px,8vw,44px)
}

.scatter-face {
  font-size:clamp(24px,9vw,47px)
}

.bonus-banner {
  font-size:clamp(13px,4.5vw,19px);
  padding:clamp(5px,1.5vw,7px);
  margin-top:clamp(7px,2vw,11px)
}

.meters {
  gap:clamp(3px,1vw,6px)
}

.meters>div {
  padding:clamp(3px,1vw,5px) 2px
}

.meters small {
  font-size:clamp(6px,1.8vw,8px)
}

.meters strong {
  font-size:clamp(9px,3vw,13px)
}

.controls {
  grid-template-columns:minmax(42px,1fr) clamp(32px,10vw,44px) clamp(66px,21vw,88px) clamp(32px,10vw,44px) minmax(42px,1fr) clamp(27px,8vw,35px);
  gap:clamp(2px,1vw,5px);
  margin-top:clamp(6px,1.8vw,10px)
}

.round-control {
  width:clamp(31px,9.5vw,40px);
  height:clamp(31px,9.5vw,40px);
  font-size:clamp(20px,6vw,26px)!important
}

.spin-control {
  width:clamp(64px,20vw,84px);
  height:clamp(64px,20vw,84px);
  border-width:clamp(4px,1.2vw,5px)!important
}

.spin-control span {
  font-size:clamp(36px,12vw,50px)
}

.icon-control span {
  font-size:clamp(19px,6vw,25px)
}

.icon-control b {
  font-size:clamp(7px,2.4vw,10px)
}

.menu-control {
  font-size:clamp(23px,7vw,29px)!important
}

footer {
  font-size:clamp(8px,2.4vw,10px)
}

/* Narrow phones */
@media (max-width:359px) {
  .app-shell {
    padding-inline:3px
  }
  .brand-header {
    grid-template-columns:54px minmax(102px,1fr) 54px
  }
  .header-cta {
    letter-spacing:0;
    padding-inline:2px
  }
  .cabinet {
    padding-inline:6px;
    border-width:2px
  }
  .cabinet:before,.cabinet:after {
    width:15px;
    border-width:3px
  }
  .board-frame {
    width:86%
  }
  .controls {
    grid-template-columns:minmax(36px,1fr) 31px 64px 31px minmax(36px,1fr) 27px
  }
  .paytable-grid {
    grid-template-columns:1fr
  }
}

/* Tablets and wide phones */
@media (min-width:521px) {
  body {
    padding-top:12px
  }
  .app-shell {
    width:min(94vw,560px)
  }
  .board-frame {
    width:82%;
    max-width:410px
  }
  .modal-panel {
    height:min(94vh,900px);
    margin-block:auto;
    border-radius:18px
  }
  .modal {
    padding:3vh 14px
  }
  .game-menu-panel {
    width:min(94vw,560px);
    border-radius:28px 28px 12px 12px;
    margin-bottom:12px
  }
}

/* Desktop */
@media (min-width:900px) {
  body {
    align-items:flex-start;
    padding-block:18px 28px
  }
  .app-shell {
    width:min(92vw,590px)
  }
  .demo-header {
    height:68px
  }
  .cabinet {
    padding:15px 16px 13px
  }
  .board-frame {
    width:80%;
    max-width:425px
  }
  .tile .char {
    font-size:38px
  }
}

/* Short landscape screens: keep controls reachable and reduce vertical bulk */
@media (orientation:landscape) and (max-height:650px) {
  body {
    padding-block:3px 8px
  }
  .app-shell {
    width:min(54vh,470px);
    min-width:320px
  }
  .demo-header {
    height:45px
  }
  .brand-logo {
    height:36px
  }
  .header-cta {
    height:27px;
    font-size:9px
  }
  .cabinet {
    margin-top:3px;
    padding-top:7px;
    padding-bottom:6px
  }
  .ways-title {
    font-size:13px;
    padding:3px 8px;
    margin-bottom:4px
  }
  .multiplier-track {
    height:34px;
    margin-bottom:4px
  }
  .multiplier-track span {
    font-size:20px
  }
  .board-frame {
    width:73%;
    max-width:300px
  }
  .board {
    gap:2px;
    padding:3px
  }
  .bonus-banner {
    margin-top:5px;
    margin-bottom:3px;
    padding:3px;
    font-size:12px
  }
  .meters>div {
    padding:2px
  }
  .meters strong {
    font-size:9px
  }
  .meters small {
    font-size:6px
  }
  .controls {
    margin-top:4px;
    grid-template-columns:1fr 29px 55px 29px 1fr 25px
  }
  .spin-control {
    width:55px;
    height:55px
  }
  .spin-control span {
    font-size:32px
  }
  .round-control {
    width:29px;
    height:29px;
    font-size:18px!important
  }
  .icon-control span {
    font-size:18px
  }
  .icon-control b {
    font-size:7px
  }
  footer {
    padding-top:3px;
    font-size:7px
  }
}

/* Modal responsiveness */
.modal-panel {
  max-width:560px
}

.modal-panel>header {
  height:clamp(58px,12vw,72px);
  padding-inline:clamp(14px,4vw,22px)
}

.modal-panel h2 {
  font-size:clamp(20px,5.5vw,25px)
}

.modal-panel>header button {
  font-size:clamp(38px,10vw,48px)
}

.modal-content {
  padding:clamp(16px,5vw,28px) clamp(14px,5vw,28px) calc(55px + env(safe-area-inset-bottom))
}

.tab-page p,.tab-page li {
  font-size:clamp(13px,3.8vw,16px)
}

.paytable-grid {
  gap:clamp(14px,4vw,24px)
}

.pay-item {
  grid-template-columns:clamp(56px,18vw,86px) 1fr;
  gap:clamp(7px,2.5vw,12px)
}

.pay-item .sample {
  width:clamp(48px,15vw,62px);
  height:clamp(56px,17vw,70px)
}

.rule-block {
  margin-left:calc(-1 * clamp(14px,5vw,28px));
  margin-right:calc(-1 * clamp(14px,5vw,28px));
  padding-left:clamp(14px,5vw,28px);
  padding-right:clamp(14px,5vw,28px)
}

/* Prevent text overflow in every language / amount size */
.header-cta,.ways-title,.bonus-banner,.meters strong,.game-menu-item b {
  overflow:hidden;
  text-overflow:ellipsis
}

img,svg,canvas {
  max-width:100%
}

button,a {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}

/* === Premium responsive wallpaper experience === */
:root {
  --bg-wallpaper:url("assets/keren89-wallpaper.webp")
}

html {
  background:#050505
}

body {
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
  background:     linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,.68)),     var(--bg-wallpaper) center center/cover no-repeat fixed;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-4;
  pointer-events:none;
  background:var(--bg-wallpaper) center center/cover no-repeat;
  transform:scale(1.025);
  filter:saturate(1.05) contrast(1.03);
}

.background-vignette {
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:     radial-gradient(circle at 50% 42%,transparent 25%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.78) 100%),     linear-gradient(90deg,rgba(0,0,0,.46),transparent 22%,transparent 78%,rgba(0,0,0,.46));
}

.app-shell {
  position:relative;
  z-index:2;
  opacity:0;
  transform:translateY(18px) scale(.985);
  transition:opacity .72s ease,transform .85s cubic-bezier(.2,.8,.2,1);
}

.game-ready .app-shell {
  opacity:1;
  transform:none
}

.cabinet {
  box-shadow:     0 30px 70px rgba(0,0,0,.78),     0 10px 28px rgba(0,0,0,.72),     0 0 28px rgba(255,188,25,.62),     0 0 72px rgba(255,138,0,.30),     inset 0 0 24px rgba(255,196,57,.18);
  animation:cabinetGlow 4.5s ease-in-out infinite;
}

@keyframes cabinetGlow {
  0%,100% {
    filter:drop-shadow(0 0 5px rgba(255,181,34,.45))
  }
  50% {
    filter:drop-shadow(0 0 14px rgba(255,210,92,.72))
  }
}

.gold-particles {
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none
}

.gold-particles i {
  position:absolute;
  left:var(--x);
  bottom:-18px;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:#ffd66b;
  box-shadow:0 0 8px #ffb000,0 0 18px rgba(255,159,0,.8);
  opacity:0;
  animation:floatGold var(--dur) linear infinite;
  animation-delay:var(--delay);
}

@keyframes floatGold {
  0% {
    transform:translate3d(0,8vh,0) scale(.55);
    opacity:0
  }
  12% {
    opacity:.75
  }
  75% {
    opacity:.55
  }
  100% {
    transform:translate3d(var(--drift),-112vh,0) scale(1.25);
    opacity:0
  }
}

.loading-screen {
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--bg-wallpaper) center center/cover no-repeat;
  opacity:1;
  visibility:visible;
  transition:opacity .75s ease,visibility .75s ease;
}

.game-ready .loading-screen {
  opacity:0;
  visibility:hidden
}

.loading-screen::before {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(3px)
}

.loading-vignette {
  position:absolute;
  inset:0;
  background:radial-gradient(circle,transparent 20%,rgba(0,0,0,.86) 100%)
}

.loading-card {
  position:relative;
  width:min(78vw,390px);
  padding:25px 28px;
  text-align:center;
  border:1px solid rgba(255,207,83,.72);
  border-radius:20px;
  background:rgba(7,10,17,.72);
  box-shadow:0 0 35px rgba(255,175,25,.36),0 24px 80px #000
}

.loading-card img {
  width:min(250px,80%);
  filter:drop-shadow(0 0 12px rgba(255,208,79,.7))
}

.loading-card p {
  margin:13px 0 0;
  color:#ffe7a0;
  font-weight:800;
  letter-spacing:.16em;
  font-size:12px
}

.loading-bar {
  height:7px;
  margin-top:19px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 3px #000
}

.loading-bar span {
  display:block;
  height:100%;
  width:42%;
  border-radius:inherit;
  background:linear-gradient(90deg,#8a5100,#ffe68f,#ff9d00);
  box-shadow:0 0 12px #ffc32a;
  animation:loadingSweep 1.25s ease-in-out infinite
}

@keyframes loadingSweep {
  0% {
    transform:translateX(-120%)
  }
  100% {
    transform:translateX(340%)
  }
}

@media(max-width:768px) {
  body,body::before,.loading-screen {
    background-position:center top;
    background-attachment:scroll
  }
  body::before {
    transform:scale(1.06)
  }
  .background-vignette {
    background:radial-gradient(circle at 50% 31%,transparent 18%,rgba(0,0,0,.28) 55%,rgba(0,0,0,.84) 100%)
  }
  .cabinet {
    box-shadow:0 22px 45px rgba(0,0,0,.82),0 0 20px rgba(255,186,35,.58),0 0 42px rgba(255,126,0,.24)
  }
}

@media(orientation:portrait) and (max-width:520px) {
  body::before,.loading-screen {
    background-size:auto 100%;
    background-position:center top
  }
}

@media(prefers-reduced-motion:reduce) {
  .cabinet,.gold-particles i,.loading-bar span {
    animation:none!important
  }
  .app-shell {
    transition:none
  }
}

/* === Premium glowing footer === */
.premium-footer {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:min(94%,520px);
  margin:10px auto max(8px,env(safe-area-inset-bottom));
  padding:8px 14px;
  overflow:hidden;
  border:1px solid rgba(255,215,92,.84);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(22,27,39,.90),rgba(7,9,15,.92));
  color:#d8dfeb;
  font-size:clamp(8px,2.2vw,11px);
  letter-spacing:.025em;
  text-shadow:0 1px 2px #000,0 0 8px rgba(255,205,67,.28);
  box-shadow:     inset 0 1px 0 rgba(255,255,255,.12),     inset 0 -1px 8px rgba(255,154,0,.12),     0 0 7px rgba(255,216,91,.82),     0 0 18px rgba(255,165,0,.44),     0 8px 20px rgba(0,0,0,.70);
  animation:footerGoldGlow 2.8s ease-in-out infinite;
}

.premium-footer::before {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:linear-gradient(110deg,transparent 20%,rgba(255,239,169,.72) 46%,transparent 70%);
  transform:translateX(-125%);
  animation:footerShine 4.2s ease-in-out infinite;
  pointer-events:none;
}

.premium-footer span,.premium-footer strong {
  position:relative;
  z-index:1;
  white-space:nowrap
}

.premium-footer strong {
  color:#ffd55b;
  font-size:1.08em;
  letter-spacing:.10em;
  text-shadow:0 0 6px #ffb000,0 0 14px rgba(255,157,0,.70);
}

@keyframes footerGoldGlow {
  0%,100% {
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 8px rgba(255,154,0,.12),0 0 6px rgba(255,216,91,.68),0 0 14px rgba(255,165,0,.34),0 8px 20px rgba(0,0,0,.70)
  }
  50% {
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 10px rgba(255,178,0,.20),0 0 11px rgba(255,232,134,.98),0 0 27px rgba(255,153,0,.60),0 8px 22px rgba(0,0,0,.78)
  }
}

@keyframes footerShine {
  0%,55% {
    transform:translateX(-125%);
    opacity:0
  }
  65% {
    opacity:.8
  }
  82%,100% {
    transform:translateX(125%);
    opacity:0
  }
}

@media(max-width:360px) {
  .premium-footer {
    gap:5px;
    padding:7px 8px;
    letter-spacing:0
  }
  .premium-footer strong {
    letter-spacing:.055em
  }
}

@media(max-width:300px) {
  .premium-footer {
    flex-direction:column;
    gap:2px;
    border-radius:14px
  }
}

@media(prefers-reduced-motion:reduce) {
  .premium-footer,.premium-footer::before {
    animation:none!important
  }
}

/* === SEO content for Indonesian demo landing page === */
.seo-game-info {
  width:min(94%,760px);
  margin:18px auto max(26px,env(safe-area-inset-bottom));
  padding:clamp(16px,3vw,24px);
  border:1px solid rgba(255,215,92,.42);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(10,14,23,.88),rgba(5,7,12,.94));
  color:#e8edf6;
  box-shadow:0 12px 32px rgba(0,0,0,.62),0 0 24px rgba(255,170,0,.12);
  text-align:left;
  line-height:1.65;
}

.seo-game-info h1,.seo-game-info h2 {
  margin:0 0 10px;
  color:#ffd76d;
  line-height:1.25;
  text-shadow:0 0 10px rgba(255,181,35,.25)
}

.seo-game-info h1 {
  font-size:clamp(20px,4.6vw,30px)
}

.seo-game-info h2 {
  margin-top:18px;
  font-size:clamp(17px,3.8vw,23px)
}

.seo-game-info p {
  margin:0 0 12px;
  font-size:clamp(13px,2.8vw,16px)
}

.seo-game-info .seo-disclaimer {
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px solid rgba(255,215,92,.20);
  color:#bfc8d8;
  font-size:.92em
}

@media(max-width:420px) {
  .seo-game-info {
    width:calc(100% - 20px);
    border-radius:16px;
    padding:15px
  }
}