/* BLACKSAW2081 LAB v2.8.46
   Kompleksowa naprawa ramek komunikatów i rzutu kością.
*/

/* =========================================================
   1. KOMUNIKATY FAZ
   ========================================================= */

.phase-toast{
  --bs-corner-w:138px !important; /* +10% względem v2.8.45 */
  --bs-corner-h:118px !important;
  --bs-edge:14px !important;

  width:min(560px,88vw) !important;
  min-height:168px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:hidden !important; /* tło nie może wystawać poza obrys */
  background:transparent !important;
  box-shadow:none !important;
  isolation:isolate !important;
}

/* Pełne teksturowane tło, przycięte do wnętrza ramy. */
.phase-toast > .blacksaw-frame-content{
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  min-height:168px !important;
  margin:0 !important;
  padding:40px 145px 48px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:
    linear-gradient(180deg,rgba(6,6,8,.10),rgba(3,4,6,.28)),
    url('../images/ui/frame_background.png') center/cover no-repeat !important;
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(238,20,71,.12) !important;
}

/* Narożniki większe o 10%, równo dosunięte. */
.phase-toast > .blacksaw-frame-corner{
  width:var(--bs-corner-w) !important;
  height:var(--bs-corner-h) !important;
  aspect-ratio:auto !important;
  z-index:10 !important;
  opacity:1 !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.9)) !important;
}
.phase-toast > .frame-top-left{left:-2px !important;top:-2px !important}
.phase-toast > .frame-top-right{right:-2px !important;top:-2px !important}
.phase-toast > .frame-bottom-left{left:-2px !important;bottom:-2px !important}
.phase-toast > .frame-bottom-right{right:-2px !important;bottom:-2px !important}

/* Górna i dolna belka są identycznie osadzone. */
.phase-toast > .bs-nine-edge-top{
  top:5px !important;
  left:124px !important;
  right:124px !important;
  height:14px !important;
}
.phase-toast > .bs-nine-edge-bottom{
  bottom:5px !important;
  left:124px !important;
  right:124px !important;
  height:14px !important;
}
.phase-toast > .bs-nine-edge-left{
  left:5px !important;
  top:107px !important;
  bottom:107px !important;
  width:14px !important;
}
.phase-toast > .bs-nine-edge-right{
  right:5px !important;
  top:107px !important;
  bottom:107px !important;
  width:14px !important;
}

/* Pasek przesunięty 5 px wyżej. */
.phase-toast > .message-progress{
  left:145px !important;
  right:145px !important;
  bottom:30px !important;
  top:auto !important;
  z-index:12 !important;
  margin:0 !important;
}

/* Tekst centralnie. */
.phase-toast > .blacksaw-frame-content > strong,
.phase-toast > .blacksaw-frame-content > span,
.phase-toast > .blacksaw-frame-content > small{
  width:100% !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* =========================================================
   2. PANEL RZUTU KOŚCIĄ
   ========================================================= */

.combat-roll-panel{
  position:relative !important;
  width:min(560px,90vw) !important;
  min-width:0 !important;
  min-height:400px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:none !important;
  overflow:hidden !important;
  background:
    linear-gradient(180deg,rgba(6,6,8,.08),rgba(3,4,6,.24)),
    url('../images/ui/frame_background.png') center/cover no-repeat !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.72),
    inset 0 0 42px rgba(0,0,0,.30) !important;
  isolation:isolate !important;
}

/* Usuwamy jednolite czarne tło i maskę. */
.combat-roll-panel::before,
.combat-roll-panel::after{
  content:none !important;
  display:none !important;
}

/* Treść rozciąga się do górnej i dolnej części ramki. */
.combat-roll-panel > .blacksaw-frame-content{
  position:relative !important;
  z-index:4 !important;
  min-height:400px !important;
  margin:0 !important;
  padding:54px 92px 62px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Narożniki ramki rzutu. */
.combat-roll-panel > .blacksaw-frame-corner{
  position:absolute !important;
  width:166px !important;
  height:142px !important;
  aspect-ratio:auto !important;
  z-index:10 !important;
  opacity:1 !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  filter:drop-shadow(0 9px 14px rgba(0,0,0,.9)) !important;
}
.combat-roll-panel > .frame-top-left{left:-2px !important;top:-2px !important}
.combat-roll-panel > .frame-top-right{right:-2px !important;top:-2px !important}
.combat-roll-panel > .frame-bottom-left{left:-2px !important;bottom:-2px !important}
.combat-roll-panel > .frame-bottom-right{right:-2px !important;bottom:-2px !important}

/* Tło dochodzi dokładnie pod wszystkie cztery narożniki. */
.combat-roll-panel .combat-roll-kicker,
.combat-roll-panel .combat-roll-title,
.combat-roll-panel .combat-die-stage,
.combat-roll-panel .combat-roll-result,
.combat-roll-panel .combat-dice-pips{
  position:relative !important;
  z-index:11 !important;
}

/* Pasek na dole, wewnątrz ramy. */
.combat-roll-panel .message-progress{
  position:absolute !important;
  left:104px !important;
  right:104px !important;
  bottom:32px !important;
  top:auto !important;
  z-index:12 !important;
  margin:0 !important;
}

.combat-roll-result{
  margin-top:8px !important;
  margin-bottom:22px !important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:720px){
  .phase-toast{
    --bs-corner-w:108px !important;
    --bs-corner-h:92px !important;
    min-height:150px !important;
  }
  .phase-toast > .blacksaw-frame-content{
    min-height:150px !important;
    padding:34px 114px 44px !important;
  }
  .phase-toast > .message-progress{
    left:114px !important;
    right:114px !important;
    bottom:27px !important;
  }

  .combat-roll-panel{
    width:min(92vw,520px) !important;
    min-height:350px !important;
  }
  .combat-roll-panel > .blacksaw-frame-content{
    min-height:350px !important;
    padding:48px 72px 56px !important;
  }
  .combat-roll-panel > .blacksaw-frame-corner{
    width:132px !important;
    height:113px !important;
  }
  .combat-roll-panel .message-progress{
    left:82px !important;
    right:82px !important;
    bottom:28px !important;
  }
}