/* Safe additive patch for CafeKhayyam Backgammon 0.4.4.
   The original stylesheet remains unchanged. */

.ckbg-p2-room-code{
  width:min(520px,calc(100% - 36px));
  margin:18px auto -5px;
  padding:15px 18px;
  border:1px solid rgba(202,156,89,.38);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(28,20,14,.96),rgba(9,7,5,.96));
  box-shadow:0 18px 50px rgba(0,0,0,.34);
  text-align:center;
}
.ckbg-p2-room-code small{
  display:block;
  margin-bottom:7px;
  color:#917353;
  font-size:7px;
  letter-spacing:.18em;
}
.ckbg-p2-room-code strong{
  display:block;
  color:#e9c48e;
  font:27px Georgia,serif;
  letter-spacing:.13em;
}
.ckbg-p2-room-code>div{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:11px;
}
.ckbg-p2-room-code button{
  border:1px solid #71502f;
  border-radius:8px;
  padding:8px 14px;
  background:#17100b;
  color:#cfa66e;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}

#ckbg40-roll.ckbg-p2-rolling{
  opacity:.55!important;
  pointer-events:none!important;
  transform:none!important;
}

.ckbg40-board-wrap:has(.ckbg-p2-bearoff-rail){
  grid-template-columns:minmax(720px,1fr) 52px!important;
}
.ckbg-p2-bearoff-rail{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:7px;
  min-height:610px;
}
.ckbg-p2-bearoff-rail .ckbg40-bearoff{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
}
.ckbg-p2-bearoff-rail .ckbg40-bearoff small{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}

.ckbg40-game-shell,
#ckbg40-view{
  position:relative;
}
.ckbg-p2-victory{
  position:absolute;
  z-index:200;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:18px;
  background:rgba(3,2,1,.76);
  backdrop-filter:blur(6px);
}
.ckbg-p2-rays{
  position:absolute;
  width:760px;
  height:760px;
  left:50%;
  top:50%;
  background:repeating-conic-gradient(
    rgba(214,164,91,.15) 0 6deg,
    transparent 6deg 18deg
  );
  animation:ckbg-p2-spin 14s linear infinite;
}
.ckbg-p2-victory-card{
  position:relative;
  z-index:2;
  width:min(390px,85%);
  padding:32px 26px;
  border:1px solid rgba(224,179,110,.5);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0,rgba(218,168,96,.2),transparent 52%),
    #100b08;
  box-shadow:0 30px 100px #000;
  text-align:center;
  animation:ckbg-p2-in .45s cubic-bezier(.2,.8,.2,1);
}
.ckbg-p2-victory-card small{
  color:#ae8554;
  font-size:7px;
  letter-spacing:.2em;
}
.ckbg-p2-victory-card h2{
  margin:10px 0 13px;
  color:#efd09a;
  font:30px Georgia,serif;
}
.ckbg-p2-sparkles{
  color:#c79251;
  font-size:20px;
  letter-spacing:.45em;
  margin:15px 0 20px;
}
.ckbg-p2-victory-card button{
  padding:12px 25px;
  border:1px solid #d5a461;
  border-radius:999px;
  background:linear-gradient(#deb475,#a96e34);
  color:#140d08;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}
@keyframes ckbg-p2-spin{
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes ckbg-p2-in{
  from{opacity:0;transform:scale(.84) translateY(18px)}
  to{opacity:1;transform:none}
}
@media(max-width:900px){
  .ckbg40-board-wrap:has(.ckbg-p2-bearoff-rail){
    grid-template-columns:minmax(720px,1fr) 48px!important;
  }
}


/* =========================================================
   P4 — Opening dice panel + reliable dice effect
   ========================================================= */

/* Make the opening box much lighter and smaller. */
.ckbg40-center-hud{
  width:252px!important;
  padding:14px 15px 15px!important;
  border-radius:14px!important;
  border:1px solid rgba(198,149,82,.30)!important;
  background:
    radial-gradient(circle at 50% 0,rgba(184,127,61,.10),transparent 55%),
    rgba(13,9,7,.94)!important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(10px);
}

.ckbg40-center-hud .ckbg40-status{
  margin-bottom:10px!important;
  color:#d4ab72!important;
  font:14px Georgia,serif!important;
  line-height:1.2!important;
}

.ckbg40-center-hud .ckbg40-opening-dice{
  gap:9px!important;
  margin:2px 0 5px!important;
}

.ckbg40-center-hud .ckbg40-opening-die{
  width:42px!important;
  height:42px!important;
  border-radius:9px!important;
  border:1px solid rgba(215,169,105,.55)!important;
  background:
    radial-gradient(circle at 32% 27%,#d9b071 0,#a8733d 60%,#5a351d 100%)!important;
  box-shadow:
    0 7px 16px rgba(0,0,0,.48),
    inset 0 1px 1px rgba(255,255,255,.24)!important;
  font-size:17px!important;
}

.ckbg40-center-hud .ckbg40-opening-vs{
  color:#73583e!important;
  font-size:7px!important;
}

.ckbg40-center-hud .ckbg40-roll-btn{
  min-height:42px!important;
  margin-top:10px!important;
  padding:9px 14px!important;
  border-radius:9px!important;
  font-size:9px!important;
  letter-spacing:.04em!important;
  background:linear-gradient(180deg,#d7aa68,#a36b36)!important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.25)!important;
}

.ckbg40-center-hud .ckbg40-roll-btn span{
  margin-right:6px!important;
  font-size:15px!important;
}

/* When dice are actually moving, remove the box completely from their path. */
.ckbg40-center-hud.ckbg40-dice-hud-hidden{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate(-50%,-50%) scale(.92)!important;
  transition:
    opacity .12s ease,
    transform .15s ease,
    visibility 0s linear .12s!important;
}

/* Dice effect must ALWAYS sit above the board/HUD. */
.ckbg40-board{
  position:relative!important;
}

.ckbg40-roll-overlay.ckbg40-roll-overlay-front{
  position:absolute!important;
  z-index:500!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:40px!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at center,rgba(176,116,54,.10),transparent 27%)!important;
}

.ckbg40-roll-overlay.ckbg40-roll-overlay-front i{
  width:68px!important;
  height:68px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:14px!important;
  border:1px solid rgba(245,209,150,.90)!important;
  background:
    radial-gradient(circle at 30% 23%,#f3d49d,#d3a05f 42%,#a86b35 70%,#5c341c)!important;
  color:#1b1008!important;
  font:700 26px Georgia,serif!important;
  box-shadow:
    0 22px 42px rgba(0,0,0,.74),
    inset 0 2px 2px rgba(255,255,255,.34),
    inset 0 -5px 10px rgba(78,40,17,.30)!important;
}

.ckbg40-roll-btn.is-rolling{
  pointer-events:none!important;
  opacity:.55!important;
}

@media(max-width:900px){
  .ckbg40-center-hud{
    width:232px!important;
    padding:12px 13px 13px!important;
  }

  .ckbg40-roll-overlay.ckbg40-roll-overlay-front{
    gap:28px!important;
  }

  .ckbg40-roll-overlay.ckbg40-roll-overlay-front i{
    width:58px!important;
    height:58px!important;
    font-size:22px!important;
  }
}