/* Shared Atlantis glass treatment for modal windows and their controls. */
#rulesModal,
#betLimitsModal,
#autoHistoryModal{
  background:rgba(0,20,42,.56);
  -webkit-backdrop-filter:blur(14px) saturate(1.12);
  backdrop-filter:blur(14px) saturate(1.12);
}
#rulesModal .rulesCard,
#betLimitsModal .betLimitsCard,
#autoHistoryModal .ledgerCard,
#resultPopup .resultPopupCard{
  border:1px solid rgba(224,255,255,.66);
  border-radius:22px;
  color:#e9fbff;
  background:
    radial-gradient(circle at 18% 0,rgba(221,253,255,.22),transparent 38%),
    linear-gradient(145deg,rgba(139,224,246,.18),rgba(3,49,83,.64));
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
  backdrop-filter:blur(24px) saturate(1.2);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.52),
    inset 0 -24px 42px rgba(0,34,70,.22),
    0 24px 70px rgba(0,17,46,.55),
    0 0 34px rgba(96,225,255,.16);
}

#rulesModal .rulesCard::before,
#betLimitsModal .betLimitsCard::before,
#autoHistoryModal .ledgerCard::before{
  content:"";
  display:block;
  position:absolute;
  z-index:0;
  left:5%;right:5%;top:1px;height:32%;
  border-radius:22px 22px 50% 50%;
  /* Clear the legacy painted-frame outline inherited by the Atlantis help card. */
  border:0;
  background:linear-gradient(180deg,rgba(255,255,255,.13),transparent);
  pointer-events:none;
}

#rulesModal .rulesCard::after{display:none}

/* The old help artwork positioned content around a painted frame. The glass card
   uses the whole panel while retaining its existing scrolling behavior. */
#rulesModal .rulesCard{
  width:min(900px,calc(100vw - 28px));
  height:min(86vh,800px);height:min(86dvh,800px);
  padding:64px clamp(22px,4vw,52px) 34px;
}
#rulesModal .rulesModalHeader{position:relative;z-index:1;inset:auto}
#rulesModal .rulesScroll{
  position:relative;z-index:1;inset:auto;
  flex:1 1 0;min-height:0;padding-right:10px;
}

/* The rules already identify the game as a demo in the lobby; keep the panel focused on play information. */
#rulesModal .rulesNotice{display:none}

/* Remove the painted Bet frame and restore the controls to a normal responsive
   flow inside the glass panel. */
#betLimitsModal .betLimitsCard{
  width:min(720px,calc(100vw - 28px));
  min-height:0;max-height:calc(100dvh - 28px);aspect-ratio:auto;
  overflow:auto;padding:64px clamp(22px,5vw,48px) 36px;
}
#betLimitsModal .betModalSelector{
  position:relative;left:auto;right:auto;top:auto;height:auto;
  grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0 0;gap:10px;
}
#betLimitsModal .betModalSelector .pillBtn{
  width:100%;height:52px;min-height:52px;transform:none;
}
#betLimitsModal .betLimitActions{
  position:relative;left:auto;right:auto;top:auto;height:auto;
  margin:14px 0 0;gap:10px;
}
#betLimitsModal .betLimitActions button{height:52px;min-height:52px}

#rulesModal .rulesClose,
#betLimitsModal .rulesClose,
#autoHistoryModal .ledgerClose{
  top:16px;right:16px;width:44px;height:44px;min-width:44px;min-height:44px;
  border-radius:50%;font:800 25px/1 Georgia,serif;
}

#autoHistoryModal .ledgerCard{isolation:isolate}
#autoHistoryModal .ledgerCard>*{position:relative;z-index:1}

#resultPopup .resultPopupCard{
  border-radius:20px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -28px 48px rgba(0,18,42,.5),
    0 24px 70px rgba(0,10,32,.72),
    0 0 34px rgba(96,225,255,.2);
}
#resultPopup.win .resultPopupCard{
  border-color:rgba(139,238,255,.78);
  background:radial-gradient(circle at 50% 0,rgba(139,238,255,.24),transparent 45%),linear-gradient(145deg,rgba(12,83,111,.94),rgba(2,27,54,.97));
}
#resultPopup.freeSpins .resultPopupCard{
  border-color:rgba(126,244,255,.82);
  background:radial-gradient(circle at 50% 0,rgba(111,245,255,.28),transparent 48%),linear-gradient(145deg,rgba(9,91,121,.95),rgba(2,30,58,.98));
}
#resultPopup.loss .resultPopupCard{
  border-color:rgba(194,212,231,.52);
  background:radial-gradient(circle at 50% 0,rgba(171,202,224,.14),transparent 45%),linear-gradient(145deg,rgba(13,58,82,.95),rgba(2,24,48,.98));
}

/* Replace the inherited fire/gold accents with the Atlantis water palette. */
#rulesModal .rulesKicker,
#betLimitsModal .rulesKicker,
#autoHistoryModal .ledgerKicker{color:#87ddeb;text-shadow:0 0 10px rgba(105,231,255,.2)}

#rulesModal .rulesTitle,
#betLimitsModal .rulesTitle,
#autoHistoryModal .ledgerCard h2{
  color:#eaffff;
  text-shadow:0 0 18px rgba(105,231,255,.38);
}

#rulesModal .rulesIntro,
#betLimitsModal .rulesIntro,
#rulesModal .rulesSection ol,
#rulesModal .rulesSection ul,
#rulesModal .rulesPayoutNote,
#rulesModal .rulesScatterFeature p{color:#c9e9f1}

#rulesModal .rulesScroll{scrollbar-color:#70dceb rgba(2,39,70,.62)}
#rulesModal .rulesScroll::-webkit-scrollbar-track{
  border-color:rgba(121,218,238,.25);background:rgba(2,39,70,.62);
}
#rulesModal .rulesScroll::-webkit-scrollbar-thumb{
  border-color:#073551;background:linear-gradient(180deg,#b9f8ff,#46bdd7 58%,#197aa5);
}
#rulesModal .rulesScroll::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#e8fdff,#6ee5f3 58%,#2596bc);
}

#rulesModal .rulesSection{
  border-color:rgba(126,224,242,.28);
  background:linear-gradient(180deg,rgba(32,117,151,.18),rgba(2,39,70,.3));
  box-shadow:inset 0 0 18px rgba(2,35,65,.36);
}
#rulesModal .rulesSection h3,
#rulesModal .rulesPaytable th,
#rulesModal .rulesScatterFeature b{color:#c9f8ff}
#rulesModal .rulesPaytableWrap{border-color:rgba(126,224,242,.28)}
#rulesModal .rulesPaytable{color:#c8e7ee}
#rulesModal .rulesPaytable th{background:rgba(43,150,184,.16)}
#rulesModal .rulesPaytable td{border-bottom-color:rgba(126,224,242,.2)}
#rulesModal .rulesPaytable td:not(:first-child){color:#8defff}
#rulesModal .rulesSymbolCell img{filter:drop-shadow(0 0 5px rgba(91,225,255,.34))}
#rulesModal .rulesScatterFeature small{color:#79dbea}
#rulesModal .rulesPaylineDiagram i{
  border-color:rgba(126,224,242,.4);
  background:linear-gradient(145deg,rgba(51,161,191,.26),rgba(2,39,70,.5));
}
#rulesModal .rulesPaylineDiagram i::after{
  background:#9af4ff;box-shadow:0 0 9px rgba(105,231,255,.95);
}

#autoHistoryModal .ledgerCrest{color:#93efff;text-shadow:0 0 20px rgba(105,231,255,.5)}
#autoHistoryModal .ledgerCard[data-tone="profit"] .ledgerHero>strong,
#autoHistoryModal [data-tone="profit"]{color:#8ff3dc;text-shadow:0 0 24px rgba(80,235,211,.25)}
#autoHistoryModal [data-tone="loss"]{color:#efb9d1}
#autoHistoryModal [data-tone="even"]{color:#c9e8ef}
#autoHistoryModal .ledgerNavigation,
#autoHistoryModal .ledgerBalance{border-color:rgba(126,224,242,.25)}
#autoHistoryModal .ledgerStats{
  border-color:rgba(126,224,242,.25);background:rgba(2,39,70,.34);
}
#autoHistoryModal .ledgerStats>div+div{border-color:rgba(126,224,242,.2)}
#autoHistoryModal .ledgerTable th,
#autoHistoryModal .ledgerTable td{border-bottom-color:rgba(126,224,242,.17)}
#autoHistoryModal .ledgerTable thead th{background:#0b4663;color:#c9edf4}

#resultPopup .resultSigil{color:#98f2ff;text-shadow:0 0 15px rgba(105,231,255,.55)}
#resultPopup .resultEyebrow{color:#c7edf4}
#resultPopup .resultAmount{color:#eaffff;text-shadow:0 0 20px rgba(105,231,255,.48)}
#resultPopup.freeSpins .resultSigil,
#resultPopup.freeSpins .resultAmount{color:#a7f7ff;text-shadow:0 0 20px rgba(105,231,255,.62)}
#resultPopup .resultPopupCard::before,
#resultPopup .resultPopupCard::after{
  color:#d8fbff;border-color:#89eaff;
  background:radial-gradient(circle,#91efff 0 24%,#0b5272 28% 48%,#49bdd4 52% 62%,#052d4b 67%);
  box-shadow:0 0 12px rgba(105,231,255,.5);
}

/* Spin results surface beside the cabinet, leaving the gems unobstructed. */
#resultPopup:not(.freeSpins){
  position:fixed;left:auto;right:max(14px,env(safe-area-inset-right));top:auto;
  bottom:max(14px,env(safe-area-inset-bottom));width:min(320px,calc(100vw - 28px));
  transform:translateY(18px) scale(.76);
}
#resultPopup:not(.freeSpins) .resultPopupCard{
  --result-glow:116,231,255;
  min-height:0;padding:16px 54px 15px 20px;text-align:left;
  border:1px solid rgba(var(--result-glow),.62);border-radius:18px;
  background:
    radial-gradient(circle at 82% 0,rgba(var(--result-glow),.18),transparent 45%),
    linear-gradient(135deg,rgba(14,111,145,.7),rgba(3,52,87,.82) 58%,rgba(1,24,51,.9));
  -webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(235,255,255,.35),inset 0 -16px 32px rgba(0,20,51,.25),0 14px 34px rgba(0,11,35,.52),0 0 22px rgba(var(--result-glow),.16);
}
#resultPopup:not(.freeSpins).loss .resultPopupCard{
  --result-glow:157,192,220;
  background:radial-gradient(circle at 82% 0,rgba(var(--result-glow),.13),transparent 45%),linear-gradient(135deg,rgba(31,88,116,.7),rgba(5,43,73,.84) 58%,rgba(1,22,46,.92));
}
#resultPopup:not(.freeSpins) .resultPopupCard::before{
  content:"";left:8%;right:8%;top:1px;width:auto;height:38%;border:0;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);box-shadow:none;transform:none;
}
#resultPopup:not(.freeSpins) .resultPopupCard::after{display:none}
#resultPopup:not(.freeSpins) .resultSigil{
  position:absolute;right:18px;top:50%;font-size:27px;opacity:.9;transform:translateY(-50%);
}
#resultPopup:not(.freeSpins) .resultEyebrow{margin:0;color:rgba(211,248,255,.84);font-size:9px;letter-spacing:.16em}
#resultPopup:not(.freeSpins) .resultAmount{margin-top:7px;font-size:clamp(29px,3vw,40px);line-height:1;color:#eaffff}
#resultPopup:not(.freeSpins) .resultDetail{margin-top:6px;color:rgba(197,232,241,.75);font-size:9px;letter-spacing:.11em}
#resultPopup:not(.freeSpins).show{animation:atlantisResultPopupCornerLife 2.2s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes atlantisResultPopupCornerLife{
  0%{opacity:0;transform:translateY(18px) scale(.76);filter:blur(5px)}
  16%,72%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  100%{opacity:0;transform:translateY(10px) scale(.94);filter:blur(2px)}
}

/* Soul Hunter's award sequence, themed for Atlantis. The large celebration
   collapses into the same compact, clickable remaining-spins tab. */
#resultPopup.freeSpins{
  position:fixed;z-index:150;isolation:isolate;left:clamp(18px,10vw,190px);top:23%;width:min(250px,54vw);
  transform:translateX(-130%) scale(.9);filter:blur(4px);
  transition:left .6s cubic-bezier(.22,.8,.22,1),transform .6s cubic-bezier(.22,.8,.22,1),opacity .45s ease,filter .45s ease;
}
#resultPopup.freeSpins.show{left:50%;top:48%;width:min(650px,88vw);animation:atlantisFreeSpinAwardReveal 2.8s cubic-bezier(.16,.8,.22,1) forwards}
#resultPopup.freeSpins.show,#resultPopup.freeSpins.docked{pointer-events:auto}
#resultPopup.freeSpins.docked{left:0;visibility:visible;opacity:.72;transform:translateX(-60%) scale(.92);filter:saturate(.82);cursor:pointer;animation:none}
#resultPopup.freeSpins.docked:hover,#resultPopup.freeSpins.docked:focus-visible{opacity:1;transform:translateX(-52%) scale(.96);filter:brightness(1.12);outline:none}
#resultPopup.freeSpins.exiting{left:0;visibility:visible;pointer-events:none;animation:atlantisFreeSpinTabFadeOut .6s ease forwards}
#resultPopup.freeSpins .resultPopupCard{
  padding:16px 20px 15px;border:1px solid rgba(151,244,255,.72);border-radius:14px;text-align:left;
  background:radial-gradient(circle at 18% 5%,rgba(255,255,255,.14),transparent 35%),linear-gradient(135deg,rgba(16,139,171,.58),rgba(3,64,101,.72) 58%,rgba(1,27,58,.82));
  -webkit-backdrop-filter:blur(30px) saturate(155%);backdrop-filter:blur(30px) saturate(155%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 0 30px rgba(90,231,255,.14),0 14px 32px rgba(0,13,40,.48),0 0 20px rgba(93,231,255,.2);
}
#resultPopup.freeSpins .resultPopupCard::before,#resultPopup.freeSpins .resultPopupCard::after{background:linear-gradient(135deg,rgba(229,255,255,.94),rgba(37,163,194,.9));border-color:rgba(183,249,255,.86);box-shadow:0 0 12px rgba(91,231,255,.58)}
#resultPopup.freeSpins .resultSigil{float:left;margin:2px 12px 0 0;font-size:34px}
#resultPopup.freeSpins .resultEyebrow{margin:2px 0 0;font-size:9px}
#resultPopup.freeSpins .resultAmount{margin:6px 0 0;font-size:clamp(32px,3.2vw,43px)}
#resultPopup.freeSpins .resultDetail{clear:both;margin-top:11px;padding-top:9px;border-top:1px solid rgba(157,242,255,.34);font-size:9px;letter-spacing:.1em}
#resultPopup.freeSpins.show .resultPopupCard{
  z-index:3;overflow:visible;padding:38px 38px 34px;border:2px solid #a8f6ff;border-radius:22px;text-align:center;
  background:radial-gradient(circle at 50% 8%,rgba(218,255,255,.27),transparent 35%),radial-gradient(circle at 50% 100%,rgba(7,190,219,.3),transparent 58%),linear-gradient(145deg,rgba(5,100,137,.98),rgba(2,35,72,.99) 58%,rgba(0,13,38,.99));
  box-shadow:inset 0 0 0 3px #00182b,inset 0 0 0 6px rgba(103,231,241,.42),inset 0 0 55px rgba(55,221,255,.2),0 0 26px rgba(181,250,255,.76),0 0 80px rgba(31,198,255,.5),0 28px 80px rgba(0,8,28,.86);
}
#resultPopup.freeSpins.show .resultSigil{float:none;margin:0;font-size:52px;animation:atlantisFreeSpinSigil 1.05s ease-in-out infinite alternate}
#resultPopup.freeSpins.show .resultEyebrow{margin-top:10px;color:#c8fbff;font-size:clamp(10px,1.25vw,15px);letter-spacing:.28em}
#resultPopup.freeSpins.show .resultAmount{margin-top:15px;font-size:clamp(34px,5.2vw,70px);line-height:1.05;letter-spacing:.02em;background:linear-gradient(180deg,#f5ffff 0%,#aef8ff 42%,#58dcea 72%,#fff2af 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 0 #00506f) drop-shadow(0 0 18px rgba(147,246,255,.8))}
#resultPopup.freeSpins.show .resultDetail{margin-top:18px;padding-top:13px;color:#dcfcff;border-top-color:rgba(174,246,255,.44);font-size:clamp(9px,1vw,13px);letter-spacing:.16em}
.freeSpinAwardFx{position:absolute;z-index:1;left:50%;top:50%;width:680px;height:420px;visibility:hidden;opacity:0;transform:translate(-50%,-50%);pointer-events:none}
#resultPopup.freeSpins.show .freeSpinAwardFx{visibility:visible;animation:atlantisFreeSpinFxLife 2.8s ease both}
.freeSpinAwardFx::before{content:"";position:absolute;left:50%;top:50%;width:200vw;height:200vh;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(9,144,183,.46),rgba(0,28,61,.76) 38%,rgba(0,7,24,.88) 72%);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.freeSpinAwardRing{position:absolute;z-index:1;inset:-55px 75px;border:2px solid #b9ffff;border-radius:50%;box-shadow:0 0 8px #fff,0 0 22px #34dce6;animation:atlantisFreeSpinAwardRing 2.8s ease-out both}
.freeSpinAwardFlare{position:absolute;z-index:2;left:-12%;right:-12%;top:50%;height:5px;border-radius:50%;background:linear-gradient(90deg,transparent,#47d9ea 20%,#d9ffff 48%,#fff 50%,#d9ffff 52%,#47d9ea 80%,transparent);box-shadow:0 0 12px #e7ffff,0 0 34px #28bfe9;animation:atlantisFreeSpinAwardFlare 2.8s ease both}
.freeSpinAwardFx i{position:absolute;z-index:2;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:#efffff;box-shadow:0 0 8px #fff,0 0 18px #55e5f5;animation:atlantisFreeSpinAwardSpark 1.35s var(--spark-delay) ease-out 2 both}
.freeSpinAwardFx i:nth-of-type(1){--spark-x:-290px;--spark-y:-160px;--spark-delay:.05s}.freeSpinAwardFx i:nth-of-type(2){--spark-x:-115px;--spark-y:-205px;--spark-delay:.12s}.freeSpinAwardFx i:nth-of-type(3){--spark-x:115px;--spark-y:-205px;--spark-delay:.2s}.freeSpinAwardFx i:nth-of-type(4){--spark-x:290px;--spark-y:-160px;--spark-delay:.08s}.freeSpinAwardFx i:nth-of-type(5){--spark-x:-300px;--spark-y:150px;--spark-delay:.22s}.freeSpinAwardFx i:nth-of-type(6){--spark-x:-105px;--spark-y:205px;--spark-delay:.15s}.freeSpinAwardFx i:nth-of-type(7){--spark-x:105px;--spark-y:205px;--spark-delay:.26s}.freeSpinAwardFx i:nth-of-type(8){--spark-x:300px;--spark-y:150px;--spark-delay:.18s}
@keyframes atlantisFreeSpinAwardReveal{0%{visibility:visible;opacity:0;transform:translate(-50%,-45%) scale(.48);filter:blur(8px)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.08);filter:blur(0)}25%,82%{visibility:visible;opacity:1;transform:translate(-50%,-50%) scale(1);filter:none}100%{visibility:visible;opacity:1;transform:translate(-50%,-50%) scale(.98);filter:none}}
@keyframes atlantisFreeSpinFxLife{0%{opacity:0}12%,88%{opacity:1}100%{opacity:0}}
@keyframes atlantisFreeSpinAwardRing{0%{opacity:0;transform:scale(.25)}22%{opacity:1;transform:scale(.75)}55%{opacity:.75;transform:scale(1.35)}84%,100%{opacity:0;transform:scale(1.7)}}
@keyframes atlantisFreeSpinAwardFlare{0%,8%{opacity:0;transform:scaleX(.08)}20%,74%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.16)}}
@keyframes atlantisFreeSpinAwardSpark{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}100%{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(.15)}}
@keyframes atlantisFreeSpinSigil{to{transform:scale(1.2) rotate(8deg);filter:brightness(1.35) drop-shadow(0 0 16px #61e7f3)}}
@keyframes atlantisFreeSpinTabFadeOut{from{opacity:.72;transform:translateX(-60%) scale(.92);filter:saturate(.82)}to{opacity:0;transform:translateX(-92%) scale(.86);filter:blur(3px)}}

#rulesModal .rulesClose,
#betLimitsModal .rulesClose,
#betLimitsModal .pillBtn,
#betLimitsModal .betLimitActions button,
#autoHistoryModal .ledgerClose,
#autoHistoryModal .ledgerNavigation button,
#autoHistoryModal .ledgerActions button{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(224,255,255,.7);
  color:rgba(244,255,255,.96);
  background:linear-gradient(145deg,rgba(214,251,255,.24),rgba(32,142,184,.14));
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  backdrop-filter:blur(12px) saturate(1.15);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -8px 18px rgba(1,57,101,.16),0 7px 18px rgba(0,27,63,.3);
  text-shadow:0 1px 3px rgba(0,38,67,.7);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}

#rulesModal .rulesClose,
#betLimitsModal .rulesClose,
#autoHistoryModal .ledgerClose{
  position:absolute;z-index:10;pointer-events:auto;touch-action:manipulation;
  color:#f4ffff;
  background:linear-gradient(145deg,rgba(214,251,255,.27),rgba(32,142,184,.17));
}

#rulesModal .rulesClose::before,
#betLimitsModal .rulesClose::before,
#betLimitsModal .pillBtn::before,
#betLimitsModal .betLimitActions button::before,
#autoHistoryModal .ledgerClose::before,
#autoHistoryModal .ledgerNavigation button::before,
#autoHistoryModal .ledgerActions button::before{
  content:"";
  position:absolute;
  left:12%;right:12%;top:7%;height:32%;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.34),transparent);
  pointer-events:none;
}

#rulesModal .rulesClose:hover,
#betLimitsModal button:hover:not(:disabled),
#autoHistoryModal button:hover:not(:disabled){
  filter:brightness(1.13);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.62),inset 0 -8px 18px rgba(1,57,101,.18),0 9px 24px rgba(0,39,78,.4);
}

#rulesModal .rulesClose:active,
#betLimitsModal button:active:not(:disabled),
#autoHistoryModal button:active:not(:disabled){transform:scale(.96)}

#rulesModal .rulesClose:focus-visible,
#betLimitsModal button:focus-visible,
#autoHistoryModal button:focus-visible{
  outline:3px solid #aaf6ff;
  outline-offset:3px;
}

#betLimitsModal .pillBtn.active{
  border-color:rgba(157,241,255,.95);
  color:#eaffff;
  background:linear-gradient(145deg,rgba(177,245,255,.3),rgba(32,142,184,.18));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.64),0 0 18px rgba(102,235,255,.5);
}
#betLimitsModal .pillBtn.active::after{
  content:"";
  position:absolute;inset:12% 6%;pointer-events:none;
  border:1px solid rgba(157,241,255,.55);border-radius:8px;
  background:rgba(105,231,255,.08);
  box-shadow:inset 0 0 16px rgba(105,231,255,.48),0 0 13px rgba(105,231,255,.3);
}

#autoHistoryModal button:disabled{opacity:.38;filter:saturate(.6)}

@media(prefers-reduced-motion:reduce){
  #rulesModal .rulesClose,
  #betLimitsModal button,
  #autoHistoryModal button{transition:none}
  #resultPopup:not(.freeSpins).show{animation:none!important;opacity:1;transform:none;filter:none}
  #resultPopup.freeSpins.show{animation:none!important;visibility:visible;opacity:1;transform:none;filter:none}
}

@media(max-width:599px){
  #rulesModal .rulesCard{
    height:calc(100dvh - 24px);padding:58px 18px 24px;border-radius:18px;
  }
  #betLimitsModal .betLimitsCard{
    padding:60px 18px 26px;border-radius:18px;
  }
  #betLimitsModal .betModalSelector{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #rulesModal .rulesClose,
  #betLimitsModal .rulesClose,
  #autoHistoryModal .ledgerClose{top:12px;right:12px;width:40px;height:40px;min-width:40px;min-height:40px}
  #resultPopup:not(.freeSpins){right:12px;bottom:12px;width:min(300px,calc(100vw - 24px))}
  #resultPopup.freeSpins{left:12px;top:18%;width:min(245px,68vw)}
  #resultPopup.freeSpins.show{left:50%;top:48%;width:min(650px,94vw)}
  #resultPopup.freeSpins.docked{left:0;top:18%;width:min(245px,68vw)}
  #resultPopup.freeSpins.docked{left:0;transform:translateX(-62%) scale(.88)}
  #resultPopup.freeSpins.docked:hover,#resultPopup.freeSpins.docked:focus-visible{transform:translateX(-54%) scale(.92)}
}

/* Hoop Fortune-style compact, non-blocking WIN/LOSS toast. */
#resultPopup:not(.freeSpins){
  position:fixed;left:auto;right:max(24px,env(safe-area-inset-right));top:auto;z-index:135;
  bottom:max(var(--result-toast-bottom,12px),env(safe-area-inset-bottom));
  width:min(324px,calc(100vw - 32px));max-width:none;margin:0;
  pointer-events:none;visibility:hidden;opacity:0;filter:none;
  transform:translateX(calc(100% + 32px));
}
#resultPopup:not(.freeSpins) .resultPopupCard{
  position:relative;width:100%;min-height:96px;margin:0;padding:12px 15px;
  display:grid;grid-template-columns:48px minmax(0,1fr);
  grid-template-areas:"sigil title" "sigil amount" "sigil detail";
  column-gap:13px;row-gap:2px;align-items:center;overflow:hidden;text-align:left;
  border-radius:16px;-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
}
#resultPopup:not(.freeSpins) .resultPopupCard::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;height:auto;border:0;border-radius:0;
  background:linear-gradient(transparent,currentColor 20% 80%,transparent);box-shadow:0 0 12px currentColor;transform:none;opacity:.72;
}
#resultPopup:not(.freeSpins) .resultPopupCard::after{content:none;display:none}
#resultPopup:not(.freeSpins) .resultSigil{
  grid-area:sigil;position:relative;right:auto;top:auto;display:grid;place-items:center;
  width:48px;height:48px;margin:0;border:1px solid rgba(255,255,255,.36);border-radius:50%;
  font-size:27px;opacity:1;transform:none;background:rgba(8,20,28,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 16px rgba(255,255,255,.16);
}
#resultPopup:not(.freeSpins) .resultEyebrow{grid-area:title;display:block;margin:1px 0 0;font-size:17px;line-height:1.05;letter-spacing:.035em}
#resultPopup:not(.freeSpins) .resultAmount{grid-area:amount;display:block;margin:1px 0 0;font-size:23px;line-height:1.05;letter-spacing:-.025em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#resultPopup:not(.freeSpins) .resultDetail{grid-area:detail;display:block;margin:1px 0 0;font-size:10px;line-height:1.2;letter-spacing:.025em}
#resultPopup:not(.freeSpins).show{
  visibility:visible;opacity:1;filter:none;transform:translateX(0);
  animation:hoopConceptResultToast 2.2s cubic-bezier(.2,.78,.2,1) both;
}
@keyframes hoopConceptResultToast{
  0%{visibility:visible;opacity:0;transform:translateX(calc(100% + 32px))}
  13%,78%{visibility:visible;opacity:1;transform:translateX(0)}
  100%{visibility:hidden;opacity:0;transform:translateX(36px)}
}
@media (max-width:680px){
  #resultPopup:not(.freeSpins){right:max(8px,env(safe-area-inset-right));width:min(250px,calc(100vw - 16px))}
  #resultPopup:not(.freeSpins) .resultPopupCard{min-height:70px;grid-template-columns:40px minmax(0,1fr);padding:8px 11px;column-gap:10px}
  #resultPopup:not(.freeSpins) .resultSigil{width:40px;height:40px;font-size:22px}
  #resultPopup:not(.freeSpins) .resultEyebrow{font-size:14px}
  #resultPopup:not(.freeSpins) .resultAmount{font-size:19px}
  #resultPopup:not(.freeSpins) .resultDetail{display:none}
}