@import "https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@700&display=swap";

/* Korean popup headings use the selected storybook typeface. */
html[lang="ko"] #rulesTitle,
html[lang="ko"] #betLimitsTitle,
html[lang="ko"] #ledgerTitle{
  font-family:"Gowun Batang","Noto Serif KR","Batang",serif;
  font-weight:700;
}
#rulesModal{padding:8px}
#rulesModal,#betLimitsModal{
  background:rgba(3,2,4,.6);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
#rulesModal .rulesCard{
  width:min(1100px,96vw);height:min(92vh,860px);height:min(92dvh,860px);
  max-height:none;padding:clamp(28px,5vw,58px);border:1px solid rgba(255,221,170,.4);border-radius:24px;
  background:radial-gradient(circle at 18% 5%,rgba(255,255,255,.14),transparent 35%),linear-gradient(135deg,rgba(94,29,47,.5),rgba(37,10,22,.62) 55%,rgba(10,5,11,.7));
  backdrop-filter:blur(30px) saturate(155%);-webkit-backdrop-filter:blur(30px) saturate(155%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 48px rgba(146,76,185,.12),0 24px 70px rgba(0,0,0,.5);overflow:hidden;isolation:isolate;
}
#rulesModal .rulesCard::before{
  content:"";position:absolute;inset:1px;border:1px solid rgba(255,226,185,.16);border-radius:23px;
  background:linear-gradient(115deg,rgba(255,255,255,.1),transparent 22%,transparent 72%,rgba(214,130,255,.08));
  pointer-events:none;z-index:-1;
}
#rulesModal .rulesCard::after{
  display:none;
}
#rulesModal .rulesModalHeader{position:relative;top:auto;left:auto;right:auto;padding-right:40px}
#rulesModal .rulesTitle{margin:5px 0 8px;font-size:clamp(23px,3.5vw,38px)}
#rulesModal .rulesScroll{
  position:relative;top:auto;bottom:auto;left:auto;right:auto;
  min-height:0;height:calc(100% - 84px);overflow-y:auto;padding-right:10px;
}
#rulesModal .rulesGrid{grid-template-columns:minmax(0,1fr)}
#rulesModal .rulesSection{background:transparent;box-shadow:none}
#rulesModal .rulesPaytable th{background:transparent}
#rulesModal .rulesClose{
  top:18px;right:18px;width:44px;height:44px;min-width:44px;min-height:44px;
  z-index:3;padding:0;border:1px solid rgba(255,219,171,.42);background:rgba(28,10,20,.5);
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 5px 16px rgba(0,0,0,.24);
  color:#fff3e1;text-shadow:none;border-radius:50%;
}
#rulesModal .rulesClose:hover{transform:scale(1.06);border-color:#e8bd5d;background:rgba(111,37,60,.78)}
#rulesModal .rulesClose:focus-visible{outline:2px solid #e8bd5d;outline-offset:3px}
#rulesModal .rulesPaytable{min-width:0}
@media(max-width:599px){
  #rulesModal .rulesCard{padding:26px 18px;border-radius:18px}
  #rulesModal .rulesCard::before{border-radius:17px}
  #rulesModal .rulesModalHeader{padding-right:34px}
  #rulesModal .rulesScroll{height:calc(100% - 72px)}
  #rulesModal .rulesSection{padding:10px 8px}
  #rulesModal .rulesSymbolCell{gap:4px}
  #rulesModal .rulesSymbolCell img{width:26px;height:26px}
  #rulesModal .rulesPaytable{font-size:11px}
  #rulesModal .rulesKicker{letter-spacing:.15em}
}
@media(max-height:550px){
  #rulesModal .rulesTitle{font-size:24px;margin:3px 0}
  #rulesModal .rulesKicker{font-size:8px}
  #rulesModal .rulesScroll{top:37%}
}