/* Tester build: one stable coordinate space for every reel animation. */
.game-page .game-world .reels-surface{
  overflow:hidden;
  isolation:isolate;
  contain:layout paint;
  clip-path:inset(0 round 2px);
}
.game-page .game-world .board-effects{
  position:absolute;
  inset:0;
  overflow:hidden;
  contain:strict;
  isolation:isolate;
  display:block;
  pointer-events:none;
}
.game-page .game-world .royal-spell{
  position:absolute;
  inset:0;
  overflow:hidden;
  contain:strict;
  pointer-events:none;
}
.game-page .game-world .royal-projectile{
  position:absolute;
  width:min(54px,12%);
  aspect-ratio:1;
  height:auto;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.game-page .game-world .kiss-burst,
.game-page .game-world .book-spell-burst{overflow:hidden}
.game-page .game-world .spell-book-open{overflow:hidden}

/* A win ring belongs to one actual symbol cell, including its delayed start. */
.game-page.theme-princess .game-world .royal-hit-cell{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  contain:strict;
  pointer-events:none;
  z-index:6;
}
.game-page.theme-princess .game-world .royal-hit-cell>.royal-hit-ring{
  position:relative;
  inset:auto;
  width:84%;
  height:84%;
  margin:0;
  opacity:0;
  transform:scale(.3);
  transform-origin:center;
  box-shadow:inset 0 0 8px #ffd7ef44;
  pointer-events:none;
}

/* A single large amount centered on the actual board, without a label or box. */
.game-page.theme-princess .game-world .center-win-amount{
  position:absolute;
  inset:0;
  max-width:none;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  transform:none;
  animation:none;
  pointer-events:none;
}
.game-page.theme-princess .game-world .center-win-amount>strong{
  margin:0;
  font-size:clamp(24px,min(8cqw,calc(100cqw / var(--win-length,8))),112px);
  line-height:1;
  color:#ffe4f2;
  text-shadow:0 3px 2px #442038,0 0 14px #301323b3;
}

/* One shared HUD row: bonus to the left, win in the middle, controls to the right. */
.game-page .game-world .hud-bar{
  position:absolute;
  inset:auto 16px 14px;
  z-index:15;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(132px,15%) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(12px,1.6cqw,24px);
  pointer-events:none;
}
.game-page .game-world .hud-bar button,
.game-page .game-world .hud-bar select{pointer-events:auto}
.game-page .game-world .hud-bar .balance-control{
  grid-area:1 / 1;
  justify-self:start;
  position:static;
  inset:auto;
  max-width:130px;
}
.game-page .game-world .bonus-dock{
  grid-area:1 / 1;
  justify-self:end;
  display:grid;
  place-items:center;
  min-width:124px;
}
.game-page .game-world .win-summary{
  grid-area:1 / 2;
  display:grid;
  place-items:center;
  min-width:0;
}
.game-page .game-world .hud-bar .control-balance,
.game-page .game-world .game-controls.has-bonus .hud-bar .bonus-bank{
  grid-area:1 / 1;
  position:static;
  inset:auto;
  width:100%;
  min-width:0;
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  transform:none;
  text-align:center;
}
.game-page .game-world .hud-bar .control-balance>strong,
.game-page .game-world .hud-bar .bonus-bank>strong{
  font-size:clamp(18px,2.2cqw,28px);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.game-page .game-world .hud-bar .bonus-bank .control-label{font-size:10px;white-space:nowrap}
.game-page .game-world .control-dock{
  grid-area:1 / 3;
  justify-self:start;
  position:static;
  inset:auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(8px,1cqw,14px);
  max-width:100%;
}
.game-page .game-world .control-dock .bet-control,
.game-page .game-world .control-dock #speed-button,
.game-page .game-world .control-dock #auto-button,
.game-page .game-world .bonus-dock #buy-bonus-button{
  position:static;
  inset:auto;
  margin:0;
  transform:none;
}
.game-page .game-world .control-dock .bet-control{
  width:132px;
  padding:5px 7px 6px;
  border:1px solid #e2abc6a8;
  border-radius:11px;
  background:linear-gradient(180deg,#4e3048e8,#302334e8);
  box-shadow:0 4px 12px #1e10205c,inset 0 1px #f9d5e62e;
}
.game-page .game-world .control-dock .control-label{
  margin:0 0 3px;
  font-size:9px;
  letter-spacing:1px;
  color:#f2cfdf;
}
.game-page .game-world .control-dock .bet-row{flex-wrap:nowrap;gap:3px}
.game-page .game-world .control-dock .bet-row select{
  order:0;
  width:70px;
  height:29px;
  padding:1px 2px;
  font-size:15px;
  border-color:#e8b7ce80;
  background:#241927b5;
}
.game-page .game-world .control-dock .bet-row button{width:24px;height:27px;font-size:18px}
.game-page .game-world .control-dock #speed-button,
.game-page .game-world .control-dock #auto-button{
  height:49px;
  min-width:49px;
  padding:5px;
  border:1px solid #e8b7ce9c;
  border-radius:12px;
  background:linear-gradient(180deg,#53334ce8,#302334ea);
  color:#ffe9f3;
  box-shadow:0 4px 12px #1e10205c,inset 0 1px #f9d5e633;
}
.game-page .game-world .control-dock #speed-button{
  position:relative;
  width:49px;
  display:grid;
  place-items:center;
}
.game-page .game-world .control-dock #speed-button svg{width:24px;height:24px;fill:#f6c87522;stroke:#ffd987;filter:drop-shadow(0 0 4px #ef9b7988)}
.game-page .game-world .control-dock #speed-button .speed-badge{
  position:absolute;
  right:3px;
  bottom:2px;
  min-width:22px;
  min-height:15px;
  padding:1px 3px;
  border-radius:8px;
  background:#241a28e8;
  color:#fff1d2;
  font:800 9px/1.3 Nunito,Arial,sans-serif;
}
.game-page .game-world .control-dock #speed-button[data-speed='2']{background:linear-gradient(180deg,#7b4269,#3a2437);box-shadow:0 0 15px #f3a0cb55,inset 0 1px #ffdbea55}
.game-page .game-world .control-dock #auto-button{
  width:61px;
  display:flex;
  gap:1px;
  align-items:center;
  justify-content:center;
}
.game-page .game-world .control-dock #auto-button svg{width:22px;height:22px;stroke-width:2}
.game-page .game-world .control-dock #auto-button strong{font-size:9px;letter-spacing:.4px;line-height:1.05;max-width:54px;overflow:hidden;text-overflow:ellipsis}
.game-page .game-world .control-dock #auto-button.auto-on{background:linear-gradient(180deg,#47705a,#263c31);border-color:#bce3c5;color:#efffe9}
.game-page .game-world .bonus-dock #buy-bonus-button{
  width:124px;
  min-height:49px;
  height:49px;
  padding:5px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid #ffd0e2;
  border-radius:12px;
  background:linear-gradient(145deg,#b95f91,#743d68);
  color:#fff2e5;
  box-shadow:0 4px 12px #1e10205c,inset 0 1px #ffe8f24d;
}
.game-page .game-world .bonus-dock #buy-bonus-button .buy-bonus-star{font-size:19px;color:#ffe0a6;filter:drop-shadow(0 0 4px #ffb7d6)}
.game-page .game-world .bonus-dock #buy-bonus-button span:last-child{font-size:10px;line-height:1.05;font-weight:900;letter-spacing:.25px}
.game-page .game-world :is(.control-dock,.bonus-dock) button:hover:not(:disabled){transform:translateY(-2px)}
.game-page .game-world :is(.control-dock,.bonus-dock) button:focus-visible{outline:2px solid #fff0c8;outline-offset:2px}
.game-page .game-world :is(.control-dock,.bonus-dock) button:disabled{opacity:.48;filter:saturate(.6)}
.game-page .game-world .game-controls .bonus-dock #fs-counter{
  position:static;
  inset:auto;
  width:124px;
  min-height:49px;
  margin:0;
  padding:4px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:row;
  gap:7px;
  border:1px solid #efb8d3;
  border-radius:12px;
  background:linear-gradient(145deg,#744367e8,#43283ee8);
  color:#ffeaf5;
  box-shadow:inset 0 1px #ffe8f233;
  transform:none;
}
.game-page .game-world .bonus-dock #fs-counter>strong{font-size:27px;line-height:1;font-variant-numeric:tabular-nums}
.game-page .game-world .bonus-dock #fs-counter>span{font-size:10px;letter-spacing:.2px;line-height:1.2}
.game-page .game-world .bonus-dock #fs-counter>span:after{content:none}
.game-page .game-world .bonus-dock #buy-bonus-button[hidden],
.game-page .game-world .game-controls.has-bonus .bonus-dock #buy-bonus-button,
.game-page .game-world .game-controls .bonus-dock #fs-counter[hidden]{display:none}
/* Center the spin button in the clear strip beyond the wooden reel frame. */
.game-page .game-world #spin-button{
  --spin-size:clamp(56px,5.6cqw,76px);
  right:calc(8.5% - 14px - var(--spin-size)/2);
  bottom:94px;
  width:var(--spin-size);
  height:var(--spin-size);
}
.game-page .game-world:fullscreen #spin-button{
  right:calc((100% - min(66%,1120px))/4 - 14px - var(--spin-size)/2);
}
.game-page .game-world:has(.bonus-bank.is-active) .machine-message{bottom:73px}

/* Refined free-spin entrance, kept inside the game scene. */
.game-page .game-world>.princess-bonus-arrival{
  overflow:hidden;
  contain:layout paint;
  isolation:isolate;
  background:linear-gradient(180deg,#291b2cca,#4d2743e8);
  backdrop-filter:blur(3px);
}
.game-page .game-world .princess-bonus-arrival .magic-rainbow{
  inset:7% 6% 4%;
  border-radius:42% 42% 18% 18%;
  background:
    radial-gradient(ellipse at 50% 109%,transparent 0 27%,#fbc6e3 28% 34%,#e889c3 35% 41%,#c99ee7 42% 48%,#f6a6cc 49% 55%,transparent 56%),
    radial-gradient(ellipse at 50% 78%,#d96da054,transparent 61%);
  transform-origin:50% 100%;
  animation:royal-bonus-rainbow 1.35s cubic-bezier(.16,1,.3,1) both;
}
.game-page .game-world .princess-bonus-arrival .magic-rainbow:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 34%,#fff8eb38 48%,transparent 62%);
  transform:translateX(-100%);
  animation:royal-bonus-sheen 1.8s .25s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes royal-bonus-rainbow{from{opacity:0;transform:translateY(18%) scale(.82)}to{opacity:1;transform:none}}
@keyframes royal-bonus-sheen{to{transform:translateX(100%)}}
.game-page .game-world .bonus-greeting{
  inset:6% 10%;
  padding:0;
  display:grid;
  grid-template: auto 1fr auto / 1fr;
  justify-items:center;
  overflow:hidden;
  transition:opacity .45s,transform .55s cubic-bezier(.16,1,.3,1);
}
.game-page .game-world .bonus-greeting h2{
  z-index:3;
  margin:0;
  padding:8px 24px 6px;
  border:1px solid #f7d4d0b8;
  border-radius:9px 22px 8px 18px;
  background:linear-gradient(145deg,#743a63e8,#ac5b84e8);
  box-shadow:0 6px 18px #32152955,inset 0 1px #ffe8ef55;
  color:#fff0cf;
  font-size:clamp(34px,5cqw,67px);
  text-shadow:2px 3px #6d3354;
  animation:royal-bonus-title .72s .18s cubic-bezier(.16,1,.3,1) both;
}
@keyframes royal-bonus-title{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
.game-page .game-world .bonus-greeting .bonus-princess{
  align-self:end;
  width:min(31%,230px);
  height:92%;
  min-width:105px;
  overflow:hidden;
  filter:drop-shadow(0 7px 7px #35172f55);
}
.game-page .game-world .bonus-greeting p{
  z-index:3;
  margin:0 0 4px;
  padding:7px 18px;
  border-radius:999px;
  background:#4d2945db;
  border:1px solid #f0c0d5a8;
  color:#fff0dc;
  font-size:clamp(14px,1.8cqw,21px);
  letter-spacing:.3px;
  box-shadow:0 4px 12px #32152955;
}
.game-page .game-world .bonus-selection .bonus-greeting{opacity:0;transform:translateY(-8px);pointer-events:none}
.game-page .game-world .princess-bonus-arrival .bonus-arrival-panel{
  width:min(78%,720px);
  max-height:92%;
  overflow:hidden auto;
  padding:12px 18px;
  border:2px solid #eebbd1;
  border-radius:19px 8px 22px 10px;
  background:linear-gradient(145deg,#6c3a62f2,#382337f5);
  box-shadow:0 10px 30px #24122270,inset 0 0 0 2px #d28aac2e;
  transform:translateY(18px) scale(.98);
  transition:opacity .48s,transform .62s cubic-bezier(.16,1,.3,1);
}
.game-page .game-world .bonus-selection .bonus-arrival-panel{transform:none}
.game-page .game-world .bonus-arrival-panel .bonus-wheel{
  --wheel-size:min(430px,62cqw,calc(var(--reel-h) - 70px));
  margin:6px auto 8px;
}
.game-page .game-world .bonus-arrival-continue{margin-top:8px}

@container(max-width:900px){
  .game-page .game-world .hud-bar{inset:auto 12px 14px;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);column-gap:12px}
  .game-page .game-world .hud-bar .balance-control>strong{font-size:16px}
  .game-page .game-world .hud-bar .balance-control .control-label{font-size:9px}
  .game-page .game-world .control-dock{gap:8px}
  .game-page .game-world .control-dock .bet-control{width:112px;padding:4px}
  .game-page .game-world .control-dock .bet-row select{width:59px;font-size:13px}
  .game-page .game-world .control-dock .bet-row button{width:21px}
  .game-page .game-world .control-dock #speed-button{width:42px;min-width:42px;height:46px}
  .game-page .game-world .control-dock #auto-button{width:50px;min-width:50px;height:46px}
  .game-page .game-world .bonus-dock{min-width:104px}
  .game-page .game-world .bonus-dock #buy-bonus-button,
  .game-page .game-world .game-controls .bonus-dock #fs-counter{width:104px;height:46px;min-height:46px;padding:4px}
}
@container(max-width:700px){
  .game-page .game-world #spin-button,
  .game-page .game-world:fullscreen #spin-button{--spin-size:52px;right:calc(6.5% - 9px - var(--spin-size)/2);bottom:157px}
  .game-page .game-world .princess-bonus-arrival .bonus-arrival-panel{width:92%;padding:9px 7px}
  .game-page .game-world .bonus-arrival-panel .bonus-wheel{--wheel-size:min(330px,70cqw,calc(var(--reel-h) - 35px))}
}
/* On narrow phones, give the control trio its own row and keep every tap target inside the scene. */
@container(max-width:600px){
  .game-page .game-world .hud-bar{inset:auto 10px 14px;grid-template-columns:minmax(0,1fr) minmax(84px,1fr) minmax(0,1fr);gap:12px 4px}
  .game-page .game-world .bonus-dock{justify-self:start;min-width:0}
  .game-page .game-world .hud-bar .balance-control{grid-area:1 / 3;justify-self:end;text-align:right}
  .game-page .game-world .hud-bar .balance-control>strong{font-size:14px}
  .game-page .game-world .hud-bar .control-label{font-size:9px}
  .game-page .game-world .hud-bar .bonus-bank .control-label{font-size:8px;letter-spacing:0}
  .game-page .game-world .control-dock{grid-area:2 / 1 / 3 / -1}
  .game-page .game-world .control-dock #auto-button{width:42px;min-width:42px}
  .game-page .game-world .control-dock #auto-button strong{display:none}
  .game-page .game-world .bonus-dock #buy-bonus-button,
  .game-page .game-world .game-controls .bonus-dock #fs-counter{width:94px}
  .game-page .game-world .bonus-dock #buy-bonus-button span:last-child{font-size:9px}
  .game-page .game-world .bonus-dock #fs-counter>strong{font-size:23px}
  .game-page .game-world .bonus-dock #fs-counter>span{font-size:9px}
  .game-page .game-world #spin-button,
  .game-page .game-world:fullscreen #spin-button{--spin-size:46px;right:10px;bottom:14px}
  .game-page .game-world #spin-button .spin-icon svg{width:25px;height:25px}
  .game-page .game-world #spin-label{bottom:5px;font-size:7px}
}
@container(max-width:470px){
  .game-page .game-world .bonus-greeting{inset:7% 5%}
  .game-page .game-world .bonus-greeting .bonus-princess{width:38%}
}
@media(prefers-reduced-motion:reduce){
  .game-page .game-world .princess-bonus-arrival .magic-rainbow,
  .game-page .game-world .princess-bonus-arrival .magic-rainbow:after,
  .game-page .game-world .bonus-greeting h2{animation:none;transform:none}
}