/* ZERAPHIA build1374 — Gacha probability screen (独立コンポーネント)
   既存の gacha-pool-* CSS に依存しない。通常/特別/限定すべて共通。
*/
#gacha-pool-detail-modal.zgr-modal{
  position:fixed;
  inset:0;
  z-index:600000;
  display:none;
  color:#4b3221;
  font-family:"Noto Serif JP",serif;
  isolation:isolate;
}
#gacha-pool-detail-modal.zgr-modal.is-open{display:block}
#gacha-pool-detail-modal.zgr-modal,
#gacha-pool-detail-modal.zgr-modal *{box-sizing:border-box}
#gacha-pool-detail-modal .zgr-backdrop{
  position:absolute;
  inset:0;
  background:rgba(30,29,30,.59);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
#gacha-pool-detail-modal .zgr-sheet{
  position:absolute;
  top:max(calc(env(safe-area-inset-top, 0px) + 14px),14px);
  bottom:max(calc(env(safe-area-inset-bottom, 0px) + 14px),14px);
  left:50%;
  transform:translateX(-50%);
  width:min(calc(100vw - 24px), 510px);
  display:flex;
  flex-direction:column;
  padding:14px 15px 12px;
  min-height:0;
  overflow:hidden;
  border:2px solid #bd9556;
  border-radius:4px;
  background:
    linear-gradient(180deg,rgba(255,253,248,.91) 0%,rgba(255,252,246,.95) 45%,rgba(253,249,241,.94) 100%),
    url("../images/bg_gacha_ratio.webp") center center / cover no-repeat;
  box-shadow:0 0 0 2px rgba(255,255,255,.72),0 20px 56px rgba(34,27,23,.31),inset 0 0 0 3px rgba(255,255,255,.7);
}
#gacha-pool-detail-modal .zgr-sheet::before,
#gacha-pool-detail-modal .zgr-sheet::after{
  content:'✦';
  position:absolute;
  top:-4px;
  font:400 15px/1 'Noto Serif JP',serif;
  color:#b58b45;
  text-shadow:0 0 4px white;
  z-index:3;
  pointer-events:none;
}
#gacha-pool-detail-modal .zgr-sheet::before{left:8px}
#gacha-pool-detail-modal .zgr-sheet::after{right:8px}
#gacha-pool-detail-modal .zgr-sheet-outline{
  pointer-events:none;
  position:absolute;
  z-index:0;
  inset:5px;
  border:1px solid rgba(204,163,91,.60);
}
#gacha-pool-detail-modal .zgr-header{
  position:relative;
  flex:0 0 auto;
  padding:4px 42px 8px;
  text-align:center;
}
#gacha-pool-detail-modal .zgr-title{
  margin:0;
  font:700 clamp(22px,5vw,32px)/1.2 "Noto Serif JP",serif;
  letter-spacing:.08em;
  color:#4a2b17;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
#gacha-pool-detail-modal .zgr-ornament{
  position:relative;
  margin:8px auto 5px;
  max-width:86%;
  height:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ae854a;
  font-size:14px;
}
#gacha-pool-detail-modal .zgr-ornament::before,
#gacha-pool-detail-modal .zgr-ornament::after{
  content:'';
  position:absolute;
  width:calc(50% - 18px);
  height:1px;
  top:50%;
  background:linear-gradient(90deg,transparent,#bb955d);
}
#gacha-pool-detail-modal .zgr-ornament::before{left:0}
#gacha-pool-detail-modal .zgr-ornament::after{right:0; transform:scaleX(-1)}
#gacha-pool-detail-modal .zgr-subtitle{
  color:#593d2e;
  font:500 15px/1.3 "Noto Serif JP",serif;
  letter-spacing:.16em;
}
#gacha-pool-detail-modal .zgr-close{
  appearance:none;
  -webkit-appearance:none;
  position:absolute;
  top:-3px;
  right:-6px;
  width:39px;
  height:39px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  z-index:5;
}
#gacha-pool-detail-modal .zgr-close img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
#gacha-pool-detail-modal .zgr-summary{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  margin:8px 0 9px;
}
#gacha-pool-detail-modal .zgr-rate{
  min-width:0;
  min-height:85px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:7px 3px;
  border:1px solid rgba(197,159,95,.80);
  background:linear-gradient(160deg,rgba(254,247,233,.89),rgba(255,255,255,.82) 54%,rgba(234,226,212,.52));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.60);
}
#gacha-pool-detail-modal .zgr-rate.is-r{
  background:linear-gradient(160deg,rgba(240,241,248,.86),rgba(255,255,255,.85) 55%,rgba(214,226,245,.55));
  border-color:rgba(168,168,184,.75);
}
#gacha-pool-detail-modal .zgr-rate.is-material{
  background:linear-gradient(160deg,rgba(246,251,245,.85),rgba(255,255,255,.86) 55%,rgba(220,232,217,.60));
}
#gacha-pool-detail-modal .zgr-rate span{
  color:#6d4d2e;
  font:600 12px/1.2 "Cinzel","Noto Serif JP",serif;
  letter-spacing:.08em;
}
#gacha-pool-detail-modal .zgr-rate.is-r span{color:#64738c}
#gacha-pool-detail-modal .zgr-rate b{
  margin:3px 0;
  color:#653e23;
  font:700 clamp(22px,5vw,31px)/1 "Cinzel","Noto Serif JP",serif;
  letter-spacing:.015em;
}
#gacha-pool-detail-modal .zgr-rate.is-sr b{color:#9b611f}
#gacha-pool-detail-modal .zgr-rate small{
  color:#988d79;
  font:400 8px/1 "Noto Serif JP",serif;
  letter-spacing:0;
  white-space:nowrap;
}
#gacha-pool-detail-modal .zgr-content{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:0 4px 10px 0;
  scrollbar-width:thin;
  scrollbar-color:rgba(176,136,76,.70) transparent;
}
#gacha-pool-detail-modal .zgr-content::-webkit-scrollbar{width:5px}
#gacha-pool-detail-modal .zgr-content::-webkit-scrollbar-thumb{background:rgba(176,136,76,.70);border-radius:5px}
#gacha-pool-detail-modal .zgr-section{
  margin:0 0 10px;
  border:1px solid rgba(211,195,171,.63);
  background:rgba(255,253,248,.52);
}
#gacha-pool-detail-modal .zgr-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:32px;
  gap:6px;
  padding:3px 11px;
  background:linear-gradient(100deg,rgba(223,214,216,.55),rgba(255,254,249,.90),rgba(237,222,194,.55));
  color:#4d382a;
  border-bottom:1px solid rgba(206,176,129,.65);
  font-family:"Cinzel","Noto Serif JP",serif;
}
#gacha-pool-detail-modal .zgr-section-head span{
  font:500 14px/1.2 "Cinzel","Noto Serif JP",serif;
  letter-spacing:.08em;
}
#gacha-pool-detail-modal .zgr-section-head em{
  font-style:normal;
  font-size:11px;
  letter-spacing:.02em;
}
#gacha-pool-detail-modal .zgr-section-head b{
  font:700 19px/1 "Cinzel","Noto Serif JP",serif;
  color:#855829;
}
#gacha-pool-detail-modal .zgr-section-list{
  padding:4px 10px;
  background:rgba(255,254,252,.58);
}
#gacha-pool-detail-modal .zgr-empty{
  padding:15px 6px;
  text-align:center;
  color:#968b7e;
  font:500 12px/1.35 "Noto Serif JP",serif;
}
#gacha-pool-detail-modal .zgr-entry{
  width:100%;
  min-width:0;
  min-height:64px;
  position:relative;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 60px 13px;
  gap:10px;
  align-items:center;
  margin:0;
  padding:6px 0;
  border:0;
  border-radius:0;
  border-bottom:1px solid rgba(198,182,156,.5);
  background:transparent;
  text-align:left;
  color:#483524;
  box-shadow:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
#gacha-pool-detail-modal .zgr-entry:last-child{border-bottom:0}
#gacha-pool-detail-modal .zgr-entry.is-character:active{background:rgba(199,171,114,.13)}
#gacha-pool-detail-modal .zgr-entry.is-material{
  cursor:default;
  grid-template-columns:54px minmax(0,1fr) 60px 13px;
}
#gacha-pool-detail-modal .zgr-entry-img{
  width:54px;
  height:54px;
  min-width:54px;
  max-width:54px;
  max-height:54px;
  display:block;
  object-fit:cover;
  background:rgba(250,245,235,.8);
  border:1px solid rgba(203,184,150,.86);
  box-shadow:0 1px 2px rgba(93,67,38,.11);
}
#gacha-pool-detail-modal .zgr-entry.is-material .zgr-entry-img{
  object-fit:contain;
  padding:5px;
}
#gacha-pool-detail-modal .zgr-entry-main{min-width:0}
#gacha-pool-detail-modal .zgr-entry-name{
  display:flex;
  gap:6px;
  align-items:center;
  min-width:0;
  color:#443020;
  font:600 15px/1.2 "Noto Serif JP",serif;
}
#gacha-pool-detail-modal .zgr-attribute-icon{
  display:inline-block;
  flex:0 0 21px;
  width:21px;
  height:21px;
  max-width:21px;
  max-height:21px;
  object-fit:contain;
}
#gacha-pool-detail-modal .zgr-entry-meta{
  margin-top:4px;
  color:#817d7b;
  font:500 11px/1.15 "Cinzel","Noto Serif JP",serif;
  letter-spacing:.04em;
}
#gacha-pool-detail-modal .zgr-entry-owned{
  margin-top:4px;
  color:#766958;
  font:500 11px/1.2 "Noto Serif JP",serif;
  white-space:nowrap;
}
#gacha-pool-detail-modal .zgr-entry-rate{
  color:#493426;
  text-align:right;
  white-space:nowrap;
  font:700 17px/1 "Cinzel","Noto Serif JP",serif;
}
#gacha-pool-detail-modal .zgr-entry-chevron{
  text-align:center;
  color:#876035;
  font:400 28px/1 "Noto Serif JP",serif;
}
#gacha-pool-detail-modal .zgr-note{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  padding:8px 4px 1px;
  border-top:1px solid rgba(204,181,143,.76);
  color:#6b5545;
  font:500 10px/1.4 "Noto Serif JP",serif;
}
#gacha-pool-detail-modal .zgr-note p{
  margin:0 0 3px;
  font:inherit;
}
@media(max-width:420px){
  #gacha-pool-detail-modal .zgr-sheet{
    width:calc(100vw - 22px);
    padding:11px 10px 9px;
  }
  #gacha-pool-detail-modal .zgr-header{padding:3px 32px 5px}
  #gacha-pool-detail-modal .zgr-title{font-size:23px}
  #gacha-pool-detail-modal .zgr-close{width:32px;height:32px;top:-2px;right:-3px}
  #gacha-pool-detail-modal .zgr-subtitle{font-size:13px}
  #gacha-pool-detail-modal .zgr-summary{gap:4px;margin:6px 0 7px}
  #gacha-pool-detail-modal .zgr-rate{min-height:72px;padding:5px 2px}
  #gacha-pool-detail-modal .zgr-rate span{font-size:10px}
  #gacha-pool-detail-modal .zgr-rate b{font-size:24px}
  #gacha-pool-detail-modal .zgr-rate small{font-size:7px}
  #gacha-pool-detail-modal .zgr-section-head{min-height:29px;padding:4px 8px}
  #gacha-pool-detail-modal .zgr-section-head span{font-size:12px}
  #gacha-pool-detail-modal .zgr-section-head em{font-size:10px}
  #gacha-pool-detail-modal .zgr-section-head b{font-size:17px}
  #gacha-pool-detail-modal .zgr-section-list{padding:3px 7px}
  #gacha-pool-detail-modal .zgr-entry{grid-template-columns:45px minmax(0,1fr) 51px 12px;min-height:57px;gap:6px;padding:5px 0}
  #gacha-pool-detail-modal .zgr-entry.is-material{grid-template-columns:45px minmax(0,1fr) 51px 12px}
  #gacha-pool-detail-modal .zgr-entry-img{width:45px;height:45px;min-width:45px;max-width:45px;max-height:45px}
  #gacha-pool-detail-modal .zgr-entry-name{font-size:13px}
  #gacha-pool-detail-modal .zgr-entry-meta,#gacha-pool-detail-modal .zgr-entry-owned{font-size:10px}
  #gacha-pool-detail-modal .zgr-entry-rate{font-size:15px}
  #gacha-pool-detail-modal .zgr-entry-chevron{font-size:23px}
  #gacha-pool-detail-modal .zgr-attribute-icon{width:18px;height:18px;min-width:18px;max-width:18px;max-height:18px;flex-basis:18px}
  #gacha-pool-detail-modal .zgr-note{font-size:9px;padding-top:5px}
}
@media(max-height:650px){
  #gacha-pool-detail-modal .zgr-sheet{
    top:max(calc(env(safe-area-inset-top,0px) + 7px),7px);
    bottom:max(calc(env(safe-area-inset-bottom,0px) + 7px),7px);
  }
  #gacha-pool-detail-modal .zgr-summary{margin:5px 0 6px}
  #gacha-pool-detail-modal .zgr-rate{min-height:64px}
  #gacha-pool-detail-modal .zgr-note{font-size:8.5px}
}