/* Spider modal UI — stable override loaded after all versioned UI CSS. */
:root{
  --spider-modal-bg:#203247;
  --spider-modal-bg-2:#17283a;
  --spider-modal-accent:#168f69;
  --spider-modal-border:rgba(174,205,226,.55);
  --spider-modal-text:#f7fbfd;
  --spider-modal-muted:#c4d2da;
}
html[data-table-theme="emerald"]{
  --spider-modal-bg:#063944;
  --spider-modal-bg-2:#032c35;
  --spider-modal-accent:#0db37d;
  --spider-modal-border:rgba(91,196,190,.62);
  --spider-modal-muted:#b8d9d8;
}
html[data-table-theme="midnight"]{
  --spider-modal-bg:#17364d;
  --spider-modal-bg-2:#0e293d;
  --spider-modal-accent:#2d8ec5;
  --spider-modal-border:rgba(99,169,212,.62);
  --spider-modal-muted:#c1d8e7;
}
html[data-table-theme="classic"]{
  --spider-modal-bg:#203247;
  --spider-modal-bg-2:#17283a;
  --spider-modal-accent:#168f69;
  --spider-modal-border:rgba(174,205,226,.55);
  --spider-modal-muted:#c4d2da;
}

/* Backdrop: visibly separate the dialog from the table. */
.modal-overlay{
  background:#010609!important;
  opacity:.68!important;
}

/* Victory only: no full-screen backdrop blur. This keeps the classic dark
   overlay but avoids an expensive GPU blur while the fireworks canvas runs. */
.modal-overlay.spider-victory-overlay{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Real Materialize dialogs used by the game. */
#m-areyousure.modal,
#m-selectgame.modal{
  box-sizing:border-box!important;
  overflow:hidden!important;
  color:var(--spider-modal-text)!important;
  border:2px solid var(--spider-modal-border)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,var(--spider-modal-bg) 0%,var(--spider-modal-bg-2) 100%)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.62),0 0 0 1px rgba(0,0,0,.35)!important;
}
#m-areyousure.modal{max-width:400px!important;}
#m-selectgame.modal{max-width:560px!important;}

#m-areyousure .modal-content,
#m-selectgame .modal-content{
  box-sizing:border-box!important;
  padding:20px 20px 16px!important;
  color:var(--spider-modal-text)!important;
  background:transparent!important;
}
#m-areyousure .modal-content h5,
#m-selectgame .modal-content h5{
  margin:0!important;
  color:var(--spider-modal-text)!important;
  font-size:19px!important;
  line-height:1.25!important;
  font-weight:700!important;
}

/* Confirmation footer: no floats, no inherited margins, actual bottom padding. */
#m-areyousure .modal-footer{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  float:none!important;
  clear:both!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:14px 16px 20px!important;
  gap:12px!important;
  overflow:visible!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  background:rgba(0,0,0,.20)!important;
}
#m-areyousure .modal-footer::after{content:none!important;display:none!important;}
#m-areyousure .m-buttonsure,
#m-areyousure #m-buttonyes,
#m-areyousure #m-buttonsure{
  box-sizing:border-box!important;
  float:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  height:46px!important;
  min-height:46px!important;
  line-height:1!important;
  margin:0!important;
  padding:0 14px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:9px!important;
  color:var(--spider-modal-text)!important;
  background:rgba(255,255,255,.07)!important;
  font-weight:700!important;
  text-transform:none!important;
  box-shadow:none!important;
}
#m-areyousure #m-buttonyes{
  border-color:color-mix(in srgb,var(--spider-modal-accent) 75%,white 25%)!important;
  background:var(--spider-modal-accent)!important;
}
#m-areyousure #m-buttonsure:hover{background:rgba(255,255,255,.11)!important;}
#m-areyousure #m-buttonyes:hover{filter:brightness(1.08)!important;}

/* Difficulty: separate choices with breathing room. */
#m-selectgame .modal-content{padding-bottom:12px!important;}
#m-selectgame .modal-footer{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:4px 16px 20px!important;
  gap:10px!important;
  overflow:visible!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  background:rgba(0,0,0,.12)!important;
}
#m-selectgame .m-buttonsure,
#m-selectgame #m-button1,
#m-selectgame #m-button2,
#m-selectgame #m-button4{
  box-sizing:border-box!important;
  float:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  height:50px!important;
  min-height:50px!important;
  line-height:1!important;
  margin:0!important;
  padding:0 16px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:9px!important;
  color:var(--spider-modal-text)!important;
  background:rgba(255,255,255,.06)!important;
  font-weight:700!important;
  text-transform:none!important;
}
#m-selectgame .m-buttonsure:hover{background:rgba(255,255,255,.10)!important;}

@media(max-width:600px){
  #m-areyousure.modal{width:calc(100vw - 28px)!important;max-width:400px!important;}
  #m-selectgame.modal{width:calc(100vw - 24px)!important;max-width:560px!important;}
  #m-areyousure .modal-content,#m-selectgame .modal-content{padding-left:16px!important;padding-right:16px!important;}
  #m-areyousure .modal-footer{padding:12px 14px 18px!important;gap:10px!important;}
  #m-selectgame .modal-footer{padding:4px 14px 18px!important;}
}

/* v2.3.81: themed win dialog. Keep the existing game-over logic, but make
   the Materialize modal match Classic / Emerald / Midnight UI. */
#m-gameover.modal{
  box-sizing:border-box!important;
  width:min(520px,calc(100vw - 32px))!important;
  max-width:520px!important;
  max-height:calc(100vh - 32px)!important;
  overflow:auto!important;
  color:var(--spider-modal-text)!important;
  border:1px solid var(--spider-modal-border)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,var(--spider-modal-bg) 0%,var(--spider-modal-bg-2) 100%)!important;
  box-shadow:0 24px 72px rgba(0,0,0,.68),0 0 0 1px rgba(0,0,0,.28),inset 0 3px 0 var(--spider-modal-accent)!important;
}
#m-gameover .modal-content{
  box-sizing:border-box!important;
  padding:24px 26px 18px!important;
  color:var(--spider-modal-text)!important;
  background:transparent!important;
}
#m-gameover .like-logo{
  box-sizing:border-box!important;
  width:58px!important;
  height:58px!important;
  margin:0 auto 10px!important;
  border:1px solid color-mix(in srgb,var(--spider-modal-accent) 55%,transparent)!important;
  border-radius:50%!important;
  background-color:color-mix(in srgb,var(--spider-modal-accent) 13%,transparent)!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:44px 44px!important;
}
#m-gameover h5{
  margin:4px 0 0!important;
  color:var(--spider-modal-text)!important;
  font-size:24px!important;
  font-weight:750!important;
  line-height:1.2!important;
  letter-spacing:-.01em!important;
}
#m-gameover #movesMade{
  margin:18px 0 0!important;
  color:var(--spider-modal-text)!important;
  text-align:left!important;
}
#m-gameover #movesMade table{
  width:100%!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:8px 0!important;
  margin:0 -8px!important;
}
#m-gameover #movesMade th{
  padding:0 12px 7px!important;
  color:var(--spider-modal-muted)!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}
#m-gameover #movesMade td{
  padding:12px!important;
  color:var(--spider-modal-text)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.055)!important;
  font-size:14px!important;
  line-height:1.55!important;
}
#m-gameover .modal-footer{
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:16px 20px 20px!important;
  gap:12px!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  background:rgba(0,0,0,.18)!important;
}
#m-gameover .modal-footer > .center-align{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:0!important;
}
#m-gameover #newgameover-btn{
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:170px!important;
  height:44px!important;
  margin:0!important;
  padding:0 24px!important;
  color:#fff!important;
  border:1px solid color-mix(in srgb,var(--spider-modal-accent) 75%,white 25%)!important;
  border-radius:9px!important;
  background:var(--spider-modal-accent)!important;
  box-shadow:0 6px 18px rgba(0,0,0,.20)!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1!important;
  text-transform:none!important;
}
#m-gameover #newgameover-btn:hover{filter:brightness(1.08)!important;}
#m-gameover .modal-footer .btn-small{
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:118px!important;
  height:36px!important;
  margin:0!important;
  padding:0 12px!important;
  color:var(--spider-modal-muted)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.055)!important;
  box-shadow:none!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1!important;
  text-transform:none!important;
}
#m-gameover .modal-footer .btn-small:hover{
  color:var(--spider-modal-text)!important;
  border-color:color-mix(in srgb,var(--spider-modal-accent) 55%,rgba(255,255,255,.18))!important;
  background:rgba(255,255,255,.09)!important;
}
@media(max-width:599px){
  #m-gameover.modal{
    width:calc(100vw - 20px)!important;
    max-height:calc(100vh - 20px)!important;
    border-radius:14px!important;
  }
  #m-gameover .modal-content{padding:20px 14px 14px!important;}
  #m-gameover h5{font-size:20px!important;}
  #m-gameover #movesMade{margin-top:14px!important;}
  #m-gameover #movesMade table{border-spacing:5px 0!important;margin:0 -5px!important;}
  #m-gameover #movesMade th{padding:0 8px 6px!important;font-size:10px!important;}
  #m-gameover #movesMade td{padding:9px!important;font-size:12px!important;line-height:1.45!important;}
  #m-gameover .modal-footer{padding:14px 12px 16px!important;gap:10px!important;}
  #m-gameover #newgameover-btn{width:100%!important;min-width:0!important;}
  #m-gameover .modal-footer > .center-align:last-child{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
  }
  #m-gameover .modal-footer .btn-small{
    width:100%!important;
    min-width:0!important;
    padding:0 6px!important;
    font-size:10px!important;
  }
}