.controlDeck{--deck-frame:linear-gradient(180deg,#6c3145 0%,#2a101e 34%,#100810 72%,#8b5430 100%)}
.deckControls,.deckTrim{display:contents}
.deckTrim i{display:none}

/* The supplied arrow is the visible spin icon; retain the translated button name. */
.controlDeck .spinBtn{border:0;box-shadow:none;isolation:isolate}
.controlDeck .spinBtn::before,.controlDeck .spinBtn::after{display:none}
.controlDeck .spinBtn span{
  position:absolute;width:1px;height:1px;max-width:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.controlDeck .spinBtn small{
  position:absolute;left:10%;bottom:12%;width:80%;max-width:80%;margin:0;
  color:#fff0b5;font-size:clamp(7px,.7vw,11px);line-height:1.2;letter-spacing:0;
  text-align:center;text-shadow:0 1px 3px #240009;
}
.controlDeck .spinBtn:hover:not(:disabled){
  transform:none;filter:brightness(1.08) saturate(1.1) drop-shadow(0 0 10px rgba(255,31,79,.88)) drop-shadow(0 0 24px rgba(244,164,48,.48));
  box-shadow:none;
}
.controlDeck .spinBtn:disabled{opacity:1}
.controlDeck .spinBtn:disabled::after{
  display:block;inset:0;border:0;border-radius:50%;box-shadow:none;background:#08000366;
}
.game.turbo .controlDeck .spinBtn:disabled{opacity:1;filter:none;box-shadow:none}
.game.turbo .controlDeck .spinBtn:disabled::after{background:#ffab6022}

/* Source coordinates: 2170 x 725, with the visible frame at y=90..610.
   Keep the controls inside the opening and the hit area over the ruby button. */
@media (min-width:1181px) and (pointer:fine), (min-width:1367px){
  .controlDeck{
    display:block;container-type:inline-size;width:var(--deck-width);
    height:auto;min-height:0;min-width:0;aspect-ratio:2170 / 440;
    margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  }
  .controlDeck::before{
    z-index:2;inset:0;width:100%;height:100%;transform:none;
    border:0;border-radius:0;box-shadow:none;
    background:var(--deck-frame) center 43.9024% / 100% 139.4231% no-repeat;
  }
  .controlDeck::after{
    display:block;z-index:0;left:6.2%;top:35%;right:auto;width:71.8%;height:41%;
    transform:none;border-radius:999px;
    background:linear-gradient(180deg,#1c1017,#09070c 65%,#190b14);
  }
  .deckControls{
    position:absolute;z-index:1;left:8.3%;top:44.8077%;width:67.5%;height:24.6154%;
    display:grid;align-items:stretch;gap:clamp(5px,.48cqw,8px);
    grid-template-columns:minmax(30px,.5fr) minmax(0,2.25fr) minmax(0,1.7fr) minmax(46px,.8fr) minmax(46px,.8fr);
  }
  .deckControls>.menuBtn,.deckControls>.controlPlaque,.deckControls>.winReadout,
  .deckControls>.maxBetBtn,.deckControls>.fastSpinBtn,.deckControls>.autoSlotBtn{
    min-width:0;min-height:0;height:100%;margin:0;padding:5px;
    border:1px solid #794133;border-radius:7px;
  }
  .deckControls .menuBtn{grid-column:1}
  .deckControls .menuBtn::before{font-size:clamp(18px,1.8cqw,28px)}
  .deckControls .fastSpinBtn{grid-column:6;font-size:clamp(11px,1cqw,15px)}
  .deckControls .lineArrow{display:none}
  .deckControls .lineValue{justify-content:center;margin-top:4px}
  .deckControls .lineValue b{min-width:0;font-size:clamp(18px,1.8cqw,28px)}
  .deckControls .betPlaque{grid-column:2;flex-direction:column;gap:5px;justify-content:center}
  .deckControls .controlPlaque>span,.deckControls .winReadout>span{font-size:12px;letter-spacing:.04em}
  .deckControls .betSelector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:4px}
  .deckControls .pillBtn{
    width:100%;min-width:0;min-height:0;height:clamp(28px,2.7cqw,40px);
    padding:0;font-size:clamp(14px,1.2cqw,18px);
  }
  .deckControls .winReadout{grid-column:3;display:grid;align-content:center}
  .deckControls .winReadout b{font-size:clamp(22px,2.4cqw,38px);line-height:1;margin-top:5px;letter-spacing:0;overflow-wrap:anywhere}
  .deckControls .autoSlotBtn{grid-column:4;gap:4px}
  .deckControls .fastSpinBtn{grid-column:5}
  .deckControls .autoLabel{font-size:clamp(11px,.9cqw,14px)}
  .deckControls .autoValue{font-size:clamp(14px,1.2cqw,20px)}
  .controlDeck .spinBtn{
    position:absolute;z-index:3;left:78.9401%;top:26.2%;width:14.2857%;max-width:none;
    height:auto;aspect-ratio:310 / 270;min-height:0;min-width:0;margin:0;padding:0;
    background:none;container-type:normal;
  }
  .controlDeck .spinBtn small{font-size:clamp(8px,.8cqw,13px)}
}

/* On compact layouts, keep touch controls stacked and reuse the source's
   upper/lower rails and ruby button without squeezing them into one row. */
@media (max-width:1180px), (pointer:coarse) and (max-width:1366px){
  .controlDeck{margin-top:clamp(42px,10vw,106px);margin-bottom:clamp(22px,6vw,64px);padding-top:20px;padding-bottom:20px}
  .controlDeck::before{
    border-color:#9a5634;border-radius:18px;
    background:linear-gradient(180deg,#211018,#09070d 55%,#1b0912);
  }
  .controlDeck::after{display:none}
  .deckTrim i{
    display:block;position:absolute;z-index:4;left:10px;width:calc(100% - 20px);
    pointer-events:none;background-image:var(--deck-frame);background-repeat:no-repeat;
  }
  .deckTrimTop{
    top:0;aspect-ratio:1580 / 220;transform:translateY(-77.3%);
    background-size:137.3418% 329.5455%;background-position:20.339% 15.8416%;
  }
  .deckTrimBottom{
    bottom:0;aspect-ratio:1580 / 162;transform:translateY(66.7%);
    background-size:137.3418% 447.5309%;background-position:20.339% 79.5737%;
  }
  .controlDeck .spinBtn{
    background:var(--deck-frame) 92.0968% 49.6471% / 700% 241.6667% no-repeat;
  }
  .controlDeck .maxBetBtn br{display:block}
}
@media (max-height:600px) and (orientation:landscape) and (max-width:1180px),
       (max-height:600px) and (orientation:landscape) and (pointer:coarse) and (max-width:1366px){
  .controlDeck{margin-top:18px;margin-bottom:14px;padding-top:10px;padding-bottom:10px}
}