/* Use a flowing cabinet on phones, tablets, and small browser windows. */
@media (max-width:1180px), (pointer:coarse) and (max-width:1366px){
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
  button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  html,body{background-attachment:scroll}
  .game{height:auto;min-height:100vh;min-height:100dvh}
  .slotMachine{
    --fluid-layout:1;
    position:relative;left:auto;top:auto;width:100%;max-width:1100px;
    min-height:100vh;min-height:100dvh;margin:0 auto;transform:none;
    padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;gap:12px;
  }
  .slotHeader{
    width:100%;min-width:0;min-height:0;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"balance actions";gap:8px;
  }
  .balancePlaque{
    justify-self:start;min-width:0;max-width:100%;min-height:60px;
    grid-template-columns:40px minmax(0,1fr);gap:8px;padding:7px 12px;
  }
  .balancePlaque img{width:38px;height:38px}
  .balancePlaque b{font-size:clamp(18px,3vw,24px);letter-spacing:0;white-space:nowrap}
  .balancePlaque span{font-size:10px}
  .headerActions{padding:4px;gap:6px;justify-self:end}
  .headerActions #achievementsBtn{display:none}
  .headerActions .iconBtn{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;font-size:21px}
  .headerActions .langBtn{font-size:13px}
  .audioPrompt{display:none}
  .reaperStage,.recentPanel{display:none}
  .slotStage{
    display:flex;justify-content:center;align-items:center;min-width:0;
    width:100%;padding-top:26px;
  }
  .slotStage .cabinet{min-width:0;width:100%;max-width:900px}
  .slotStage .reelFrame{width:min(100%,calc((100dvh - 340px)*1.55));margin:0 auto;padding:22px 14px 20px}
  .slotStage .reelFrame .titleArea,
  html[lang="en"] .slotStage .reelFrame .titleArea{
    width:82%;max-width:560px;padding:9px 14px 8px;
  }
  .slotStage .reelFrame .gameTitle{font-size:clamp(23px,4vw,36px)}
  html[lang="en"] .slotStage .reelFrame .gameTitle{font-size:clamp(21px,3.5vw,33px);letter-spacing:0}
  .slotStage .reelFrame .titleArea::before,.slotStage .reelFrame .titleArea::after{width:28px;height:26px}
  .slotStage .reelFrame .titleArea::before{left:-22px}
  .slotStage .reelFrame .titleArea::after{right:-22px}
  .slotStage .paylineHint{padding:10px 8px 3px;font-size:11px;letter-spacing:.03em;text-align:center;text-wrap:balance}
  .slotStage .message{min-height:52px;padding:5px 8px}
  .slotStage .message .main{font-size:clamp(16px,2.6vw,22px)}
  .slotStage .message .sub{font-size:11px;line-height:1.4;margin-top:4px}
  .frameGuard{display:none}
  .reelGlass{left:14px;right:14px;top:22px;bottom:20px}
  .reels{gap:4px;padding:6px 5px}
  .reel{padding:8px 3px;border-radius:20px / 44px}
  .controlDeck{
    --deck-panel-height:100%;
    --spin-size:clamp(76px,9.375vw,96px);
    width:100%;max-width:1000px;min-width:0;min-height:0;margin:0 auto;padding:12px 10px;
    grid-template-columns:minmax(0,2.4fr) minmax(0,1.4fr) repeat(2,minmax(0,.65fr)) minmax(0,calc(var(--spin-size) + 16px));
    grid-template-rows:auto;gap:8px;
  }
  .menuBtn,.linesPlaque,.fastSpinBtn{display:none}
  .controlPlaque,.winReadout,.maxBetBtn,.autoSlotBtn{min-width:0;min-height:72px;border-radius:8px}
  .betPlaque{grid-column:1;grid-row:1;flex-direction:column;gap:6px;padding:8px 6px}
  .betPlaque .betSelector{width:100%;min-width:0;gap:6px;flex-wrap:wrap}
  .controlDeck .pillBtn{flex:1 1 44px;min-width:44px;min-height:44px;height:44px;padding:0 4px;font-size:15px}
  .winReadout{grid-column:2;grid-row:1;display:grid;align-content:center;padding:8px 5px}
  .winReadout b{font-size:clamp(22px,2.8vw,30px);letter-spacing:0;overflow-wrap:anywhere}
  .maxBetBtn{display:block;grid-column:3;grid-row:1;font-size:11px}
  .autoSlotBtn{grid-column:4;grid-row:1;gap:4px;font-size:11px}
  .autoSlotBtn .autoLabel{font-size:11px}
  .spinBtn{
    grid-column:5;grid-row:1;min-width:0;
    width:min(var(--spin-size),calc(100% - 16px));max-width:calc(100% - 16px);
    height:auto;aspect-ratio:1 / 1;
  }
  .spinBtn span{font-size:24px}
  .spinBtn small{font-size:10px;letter-spacing:0}
  .spinBtn::before{font-size:24px}
  .slotMachine>.footerNote{display:block;padding:0 8px;font-size:10px;line-height:1.4;text-wrap:balance}
  .resultPopup{position:absolute;top:44%;width:min(410px,90%)}
  .bigOverlay .text{max-width:100%;font-size:clamp(30px,7vw,72px);text-align:center;overflow-wrap:anywhere}
  .rulesModal{
    padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  }
  .rulesCard{
    width:min(700px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)));
    padding:28px 20px 22px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .rulesClose{width:44px;height:44px;right:10px;top:10px}
  .rulesTitle{margin:10px 42px 12px;font-size:30px;line-height:1.15}
  .rulesIntro,.rulesSection ol,.rulesSection ul,.rulesPaytable{font-size:13px}
  .rulesSection h3{font-size:15px}
  .rulesNotice{font-size:11px}
}

/* Give tablet utility buttons room without borrowing from their text size. */
@media (min-width:768px) and (max-width:1023px){
  .controlDeck{--spin-size:clamp(76px,10vw,88px)}
}

/* Phones use a full betting row, a results/utility row, and a centered SPIN. */
@media (max-width:767px){
  .controlDeck{
    --spin-size:clamp(76px,20vw,88px);
    max-width:560px;padding:10px;grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:auto auto auto;gap:8px;
  }
  .betPlaque{grid-column:1/-1;grid-row:1;min-height:58px;flex-direction:row;padding:6px;gap:10px}
  .betPlaque .betSelector{gap:6px}
  .winReadout{grid-column:1/3;grid-row:2;min-height:56px;padding:5px}
  .maxBetBtn{grid-column:3;grid-row:2;min-height:56px}
  .maxBetBtn br{display:none}
  .autoSlotBtn{grid-column:4;grid-row:2;min-height:56px;display:grid;gap:4px;padding:4px}
  .spinBtn{grid-column:1/-1;grid-row:3;margin:8px}
}

/* Wider phones can share the second row without compressing the controls. */
@media (min-width:600px) and (max-width:767px){
  .controlDeck{grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.75fr)) minmax(0,calc(var(--spin-size) + 16px));grid-template-rows:auto auto}
  .winReadout{grid-column:1;grid-row:2}
  .maxBetBtn{grid-column:2;grid-row:2}
  .autoSlotBtn{grid-column:3;grid-row:2}
  .spinBtn{grid-column:4;grid-row:2}
}

/* Existing phone styling outside the control panel. */
@media (max-width:720px){
  .slotMachine{gap:10px;padding-top:max(10px,env(safe-area-inset-top))}
  .balancePlaque{justify-self:stretch;min-height:58px;grid-template-columns:34px minmax(0,1fr);padding:6px 8px;gap:6px}
  .balancePlaque img{width:32px;height:32px}
  .balancePlaque b{font-size:clamp(17px,4.5vw,23px)}
  .headerActions{gap:4px}
  .slotStage{padding-top:24px}
  .slotStage .reelFrame{width:min(100%,480px);padding:18px 7px 16px;border-radius:18px}
  .slotStage .reelFrame .titleArea,
  html[lang="en"] .slotStage .reelFrame .titleArea{width:86%;padding:8px 10px;max-width:400px}
  .slotStage .reelFrame .gameTitle{font-size:clamp(21px,5.4vw,30px)}
  html[lang="en"] .slotStage .reelFrame .gameTitle{font-size:clamp(16px,4.4vw,26px)}
  .slotStage .reelFrame .titleArea::before,.slotStage .reelFrame .titleArea::after{width:20px;height:22px}
  .slotStage .reelFrame .titleArea::before{left:-15px}
  .slotStage .reelFrame .titleArea::after{right:-15px}
  .frameCorner{display:none}
  .reelRail{left:7px;right:7px;height:14px}
  .reelRailTop{top:2px}.reelRailBottom{bottom:1px}
  .reelRail i{width:13px;height:13px;font-size:9px}
  .reelRailBottom i{font-size:6px}
  .reelGlass{left:7px;right:7px;top:18px;bottom:16px}
  .reels{gap:3px;padding:5px 3px}
  .reel{padding:6px 2px;border-width:1px;border-radius:14px / 34px}
  .slotStage .paylineHint{font-size:10px;line-height:1.4;padding:9px 4px 2px}
  .slotStage .message{min-height:48px}
  .slotStage .message .main{font-size:16px}
  .winReadout b{font-size:25px;margin-top:4px}
  .spinBtn::before,.controlDeck::after{display:none}
  .spinBtn span{font-size:23px}
  .rulesGrid{grid-template-columns:minmax(0,1fr)}
  .rulesCard{padding:24px 14px 18px}
  .rulesTitle{font-size:27px}
}

@media (max-width:380px){
  .slotMachine{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .slotHeader{gap:6px}
  .balancePlaque{grid-template-columns:minmax(0,1fr)}
  .balancePlaque img{display:none}
  .betPlaque{gap:6px}
  .betPlaque>span{font-size:9px}
  .betPlaque .betSelector{gap:4px}
  .controlDeck{padding:8px;gap:6px}
  .spinBtn span{font-size:21px}
}

/* Reserve more height for the controls on short portrait screens. */
@media (max-width:720px) and (max-height:700px) and (orientation:portrait){
  .slotMachine{gap:6px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .slotStage{padding-top:20px}
  .slotStage .reelFrame{width:min(100%,calc((100dvh - 340px)*1.3))}
  .slotStage .cell{aspect-ratio:1.2}
  .slotStage .message{min-height:30px;padding:4px}
  .slotStage .message .main{font-size:14px}
  .slotStage .message .sub{display:none}
  .slotStage .paylineHint{font-size:10px;padding-top:7px}
  .slotMachine>.footerNote{font-size:9px}
}

/* Landscape phones keep a full-size control panel beside the reels. */
@media (max-height:600px) and (orientation:landscape) and (max-width:1180px),
       (max-height:600px) and (orientation:landscape) and (pointer:coarse) and (max-width:1366px){
  .slotMachine{
    max-width:1100px;grid-template-columns:minmax(0,1fr) clamp(224px,29vw,260px);
    grid-template-rows:auto minmax(0,1fr);gap:8px 12px;
    padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  }
  .slotHeader{grid-column:1/-1;grid-row:1}
  .balancePlaque{justify-self:start;min-height:48px;padding:4px 10px;grid-template-columns:30px minmax(0,1fr)}
  .balancePlaque img{display:block;width:28px;height:28px}
  .balancePlaque b{font-size:19px;margin-top:3px}
  .headerActions{padding:0;border-color:transparent;background:none;box-shadow:none}
  .slotStage{grid-column:1;grid-row:2;padding-top:18px;align-self:center}
  .slotStage .reelFrame{width:min(100%,calc((100dvh - 140px)*1.65));padding:16px 7px 14px}
  .slotStage .cell{aspect-ratio:1.15}
  .slotStage .reelFrame .titleArea,
  html[lang="en"] .slotStage .reelFrame .titleArea{width:84%;max-width:420px;padding:6px 8px}
  .slotStage .reelFrame .gameTitle{font-size:22px}
  html[lang="en"] .slotStage .reelFrame .gameTitle{font-size:clamp(15px,2.6vw,23px)}
  .frameCorner{display:none}
  .reelRail{left:7px;right:7px;height:12px}
  .reelRailTop{top:1px}.reelRailBottom{bottom:0}
  .reelRail i{width:12px;height:12px;font-size:8px}
  .reelGlass{left:7px;right:7px;top:16px;bottom:14px}
  .reels{gap:3px;padding:4px 3px}
  .reel{padding:4px 2px;border-width:1px;border-radius:12px / 28px}
  .slotStage .paylineHint,.slotStage .message .sub{display:none}
  .slotStage .message{min-height:28px;padding:7px 2px 0}
  .slotStage .message .main{font-size:14px}
  .controlDeck{
    --spin-size:clamp(76px,9vw,84px);
    grid-column:2;grid-row:2;align-self:center;width:100%;padding:8px;
    grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);gap:6px;
  }
  .betPlaque{grid-column:1/-1;grid-row:1;flex-direction:column;min-height:0;padding:6px 4px;gap:5px}
  .betPlaque .betSelector{gap:4px}
  .winReadout{grid-column:1/-1;grid-row:2;min-height:48px;padding:4px 2px}
  .winReadout b{font-size:22px;margin-top:4px}
  .maxBetBtn{grid-column:1;grid-row:3;min-height:44px;font-size:10px}
  .autoSlotBtn{grid-column:2;grid-row:3;min-height:44px;padding:3px 1px;gap:2px;display:grid}
  .autoSlotBtn .autoLabel{font-size:10px}
  .autoSlotBtn .autoValue{font-size:14px}
  .spinBtn{grid-column:1/-1;grid-row:4;margin:8px}
  .spinBtn span{font-size:21px}
  .spinBtn small{font-size:9px}
  .spinBtn::before,.controlDeck::after{display:none}
  .slotMachine>.footerNote{display:none}
  .resultPopupCard{padding:14px 16px}
  .resultAmount{font-size:34px}
  .rulesGrid{grid-template-columns:1fr 1fr}
}

/* Preserve the wide cabinet's dimensions, with SPIN in the rightmost track. */
@media (min-width:1181px) and (pointer:fine), (min-width:1367px){
  .controlDeck{grid-template-columns:52px 136px minmax(250px,1fr) minmax(250px,1fr) 82px 80px 150px}
  .winReadout{grid-column:4}
  .maxBetBtn{grid-column:5}
  .autoSlotBtn{grid-column:6}
  .spinBtn{grid-column:7}
}
@media (min-width:1181px) and (max-width:1280px) and (pointer:fine){
  .controlDeck{grid-template-columns:52px 136px minmax(220px,1fr) minmax(225px,1fr) 82px 80px 146px}
}
@media (min-width:1600px){
  .controlDeck{grid-template-columns:58px 150px minmax(300px,1fr) minmax(320px,1fr) 90px 86px 162px}
}

/* Keep the two labels inside 70% of the innermost ring on smaller buttons.
   Add padding back to the query container's content width, then subtract
   the ring's two 12px insets and two 1px strokes to find its inner diameter. */
@media (max-width:1023px){
  .controlDeck .spinBtn{
    --spin-padding:clamp(4px,calc(var(--spin-size) * .08),8px);
    container-type:inline-size;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:var(--spin-padding);gap:clamp(1px,calc(var(--spin-size) * .02),2px);
    height:auto;aspect-ratio:1 / 1;
  }
  .controlDeck .spinBtn::before{display:none}
  .controlDeck .spinBtn span,.controlDeck .spinBtn small{
    --spin-inner-diameter:calc(100cqi + var(--spin-padding) * 2 - 26px);
    flex:0 0 auto;width:calc(var(--spin-inner-diameter) * .7);max-width:100%;
    margin:0;text-align:center;white-space:nowrap;
  }
  .controlDeck .spinBtn span{
    font-size:clamp(10px,calc(var(--spin-inner-diameter) * .238),18px);
    line-height:1;letter-spacing:.02em;
    text-shadow:0 1px 0 #5a2418,0 0 3px rgba(232,189,93,.35);
  }
  .controlDeck .spinBtn small{
    font-size:clamp(6px,calc(var(--spin-inner-diameter) * .14),10px);
    line-height:1.15;letter-spacing:0;
  }
}