/* =========================================================
   Another Pattern Gacha Ads v1.2.1
   ========================================================= */

:root {
  --gacha-color: #ffd700;
}

#gacha-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100vw !important;
  height: 100dvh !important;

  overflow: hidden !important;

  background:
    rgba(0, 0, 0, .86) !important;

  isolation: isolate;
  overscroll-behavior: contain;
}

#gacha-modal.gacha-hidden {
  display: none !important;
}

/* =========================================================
   v1.2.0: ネオン・ディメンションポータル
   放射状サンバーストは使わない
   ========================================================= */

/* 背景の発光オーブ */
#gacha-modal::before {
  content: "";
  position: absolute !important;
  inset: -18% !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background:
    radial-gradient(
      circle at 18% 22%,
      color-mix(in srgb, var(--gacha-color) 70%, transparent)
      0 7%,
      transparent 22%
    ),
    radial-gradient(
      circle at 82% 26%,
      color-mix(in srgb, var(--gacha-color) 58%, transparent)
      0 8%,
      transparent 24%
    ),
    radial-gradient(
      circle at 72% 82%,
      color-mix(in srgb, var(--gacha-color) 48%, transparent)
      0 8%,
      transparent 24%
    ),
    radial-gradient(
      circle at 20% 78%,
      color-mix(in srgb, var(--gacha-color) 52%, transparent)
      0 7%,
      transparent 23%
    ) !important;

  filter:
    blur(22px)
    saturate(1.7) !important;

  opacity: .8 !important;

  animation:
    apGachaNebulaMove
    6.5s
    ease-in-out
    infinite alternate
    !important;
}

@keyframes apGachaNebulaMove {
  from {
    transform:
      scale(1)
      rotate(-4deg);
  }

  to {
    transform:
      scale(1.14)
      rotate(5deg);
  }
}

/* 多重リング本体 */
#gacha-modal .gacha-sunburst {
  position: absolute !important;

  top: 50% !important;
  left: 50% !important;

  width: 126vmin !important;
  height: 126vmin !important;

  z-index: 1 !important;
  pointer-events: none !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      transparent 0 19%,
      color-mix(in srgb, var(--gacha-color) 44%, transparent)
      19.5% 21%,
      transparent 21.5% 32%,
      color-mix(in srgb, var(--gacha-color) 78%, transparent)
      32.5% 34.5%,
      transparent 35% 45%,
      color-mix(in srgb, var(--gacha-color) 38%, transparent)
      45.5% 47%,
      transparent 47.5% 58%,
      color-mix(in srgb, var(--gacha-color) 70%, transparent)
      58.5% 60%,
      transparent 60.5%
    ) !important;

  border:
    5px solid
    color-mix(
      in srgb,
      var(--gacha-color) 84%,
      white
    ) !important;

  box-shadow:
    0 0 24px var(--gacha-color),
    0 0 70px
      color-mix(in srgb, var(--gacha-color) 68%, transparent),
    0 0 130px
      color-mix(in srgb, var(--gacha-color) 42%, transparent),
    inset 0 0 38px var(--gacha-color) !important;

  opacity: .86 !important;

  transform-origin:
    50% 50% !important;

  will-change:
    transform,
    filter;
}

/* 外側の破線リング */
#gacha-modal
.gacha-sunburst::before {
  content: "";
  position: absolute !important;
  inset: 8% !important;

  border-radius: 50% !important;

  border:
    9px dashed
    color-mix(
      in srgb,
      var(--gacha-color) 84%,
      white
    ) !important;

  box-shadow:
    0 0 18px var(--gacha-color),
    inset 0 0 18px var(--gacha-color) !important;

  opacity: .78 !important;

  animation:
    apGachaPortalOuter
    5.5s
    linear
    infinite
    !important;
}

/* 内側の変形リング */
#gacha-modal
.gacha-sunburst::after {
  content: "";
  position: absolute !important;

  inset: 25% 12% !important;

  border-radius: 50% !important;

  border:
    7px double
    color-mix(
      in srgb,
      var(--gacha-color) 88%,
      white
    ) !important;

  box-shadow:
    0 0 18px var(--gacha-color),
    inset 0 0 18px var(--gacha-color) !important;

  opacity: .92 !important;

  animation:
    apGachaPortalInner
    3.1s
    ease-in-out
    infinite alternate
    !important;
}

#gacha-modal
.gacha-sunburst.is-spinning {
  animation:
    apGachaPortalMain
    8.5s
    linear
    infinite
    !important;
}

@keyframes apGachaPortalMain {
  0% {
    transform:
      translate3d(-50%, -50%, 0)
      rotate(0deg)
      scale(.94);

    filter:
      brightness(.9)
      saturate(1.2);
  }

  50% {
    transform:
      translate3d(-50%, -50%, 0)
      rotate(180deg)
      scale(1.06);

    filter:
      brightness(1.55)
      saturate(1.9);
  }

  100% {
    transform:
      translate3d(-50%, -50%, 0)
      rotate(360deg)
      scale(.94);

    filter:
      brightness(.9)
      saturate(1.2);
  }
}

@keyframes apGachaPortalOuter {
  from {
    transform:
      rotate(0deg)
      scale(1);
  }

  50% {
    transform:
      rotate(-180deg)
      scale(1.08);
  }

  to {
    transform:
      rotate(-360deg)
      scale(1);
  }
}

@keyframes apGachaPortalInner {
  from {
    transform:
      rotate(-24deg)
      scaleX(.86)
      scaleY(1.10);
    opacity: .55;
  }

  to {
    transform:
      rotate(30deg)
      scaleX(1.14)
      scaleY(.84);
    opacity: 1;
  }
}


/* コンテンツ */
#gacha-modal .gacha-content {
  position: relative !important;

  z-index: 2 !important;

  width:
    min(
      92vw,
      800px
    ) !important;

  max-height:
    min(
      84dvh,
      820px
    ) !important;

  padding: 20px !important;

  overflow-y: auto !important;

  border:
    4px solid
    var(
      --gacha-color,
      #b8860b
    ) !important;

  border-radius:
    10px !important;

  background:
    #2a2a2a !important;

  text-align:
    center !important;

  box-shadow:
    0 0 30px
      var(
        --gacha-color,
        #ffd700
      ),
    0 20px 70px
      rgba(
        0,
        0,
        0,
        .55
      ) !important;

  animation:
    apGachaPopIn
    .5s
    cubic-bezier(
      .175,
      .885,
      .32,
      1.275
    )
    !important;
}

@keyframes apGachaPopIn {
  0% {
    transform:
      scale(.5);

    opacity: 0;
  }

  100% {
    transform:
      scale(1);

    opacity: 1;
  }
}

/* ランク */
#gacha-rank-display {
  margin:
    0 0 8px !important;

  color:
    var(
      --gacha-color,
      #fff
    ) !important;

  font-size:
    clamp(
      32px,
      6vw,
      54px
    ) !important;

  font-weight:
    900 !important;

  line-height:
    1.05 !important;

  text-shadow:
    2px 2px 0 #000,
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    0 0 20px
      rgba(
        255,
        255,
        255,
        .8
      ) !important;
}

/* 広告グリッド */
#gacha-ads-container {
  display:
    grid !important;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        120px,
        1fr
      )
    ) !important;

  gap:
    10px !important;

  margin-top:
    14px !important;
}

#gacha-ads-container
.gacha-pop-item {
  opacity:
    1 !important;

  overflow:
    hidden !important;

  border-radius:
    6px !important;

  background:
    #fff !important;

  animation:
    apGachaPopItem
    .4s
    cubic-bezier(
      .175,
      .885,
      .32,
      1.275
    )
    forwards
    !important;
}

@keyframes apGachaPopItem {
  0% {
    opacity: 0;

    transform:
      scale(.3);
  }

  100% {
    opacity: 1;

    transform:
      scale(1);
  }
}

/* PoChipp ミニ表示 */
#gacha-ads-container
.pochipp-box {
  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    10px !important;

  border:
    0 !important;

  box-sizing:
    border-box !important;

  background:
    #fff !important;
}

#gacha-ads-container
.pochipp-box__image {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    60px !important;

  height:
    60px !important;

  margin:
    0 auto 5px !important;
}

#gacha-ads-container
.pochipp-box__image img {
  display:
    block !important;

  width:
    auto !important;

  height:
    auto !important;

  max-width:
    60px !important;

  max-height:
    60px !important;

  object-fit:
    contain !important;
}

#gacha-ads-container
.pochipp-box__body,
#gacha-ads-container
.pochipp-box__main {
  display:
    block !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;
}

#gacha-ads-container
.pochipp-box__title {
  display:
    -webkit-box !important;

  margin:
    0 0 5px !important;

  overflow:
    hidden !important;

  color:
    #222 !important;

  font-size:
    11px !important;

  line-height:
    1.3 !important;

  text-align:
    center !important;

  word-break:
    break-word !important;

  overflow-wrap:
    anywhere !important;

  -webkit-line-clamp:
    2 !important;

  -webkit-box-orient:
    vertical !important;
}

#gacha-ads-container
.pochipp-box__title a {
  color:
    #222 !important;

  font-size:
    11px !important;
}

#gacha-ads-container
.pochipp-box__info,
#gacha-ads-container
.pochipp-box__price,
#gacha-ads-container
.pochipp-box__logo,
#gacha-ads-container
.pochipp-box__brand,
#gacha-ads-container
.pochipp-box__footer {
  display:
    none !important;
}

#gacha-ads-container
.pochipp-box__btns,
#gacha-ads-container
.pochipp-box__btn__wrapper {
  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    4px !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;
}

#gacha-ads-container
.pochipp-box__btnwrap {
  width:
    100% !important;

  margin:
    0 !important;
}

#gacha-ads-container
.pochipp-box__btn,
#gacha-ads-container
[class*="pochipp-btn-"] {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    100% !important;

  min-height:
    26px !important;

  padding:
    5px 6px !important;

  border-radius:
    4px !important;

  color:
    #fff !important;

  font-size:
    10px !important;

  font-weight:
    800 !important;

  line-height:
    1.1 !important;

  text-decoration:
    none !important;
}

/* 閉じる */
#gacha-close-btn {
  min-height:
    44px !important;

  margin-top:
    20px !important;

  padding:
    10px 20px !important;

  border:
    0 !important;

  border-radius:
    6px !important;

  background:
    #007cff !important;

  color:
    #fff !important;

  font-size:
    14px !important;

  font-weight:
    900 !important;

  cursor:
    pointer !important;
}

#gacha-close-btn:disabled {
  opacity:
    .45 !important;

  cursor:
    wait !important;
}

#gacha-close-btn:not(:disabled):hover,
#gacha-close-btn:not(:disabled):focus-visible {
  background:
    #0067d5 !important;

  outline:
    3px solid
    rgba(
      0,
      124,
      255,
      .28
    ) !important;

  outline-offset:
    2px !important;
}

/* XWRITEの reduced-motion 全停止CSSより優先 */
@media (prefers-reduced-motion: reduce) {
  #gacha-modal::before {
    animation:
      apGachaNebulaMove
      6.5s
      ease-in-out
      infinite alternate
      !important;
  }

  #gacha-modal
  .gacha-sunburst.is-spinning {
    animation:
      apGachaPortalMain
      8.5s
      linear
      infinite
      !important;
  }

  #gacha-modal
  .gacha-sunburst::before {
    animation:
      apGachaPortalOuter
      5.5s
      linear
      infinite
      !important;
  }

  #gacha-modal
  .gacha-sunburst::after {
    animation:
      apGachaPortalInner
      3.1s
      ease-in-out
      infinite alternate
      !important;
  }

  #gacha-ads-container
  .gacha-pop-item {
    animation:
      apGachaPopItem
      .4s
      cubic-bezier(
        .175,
        .885,
        .32,
        1.275
      )
      forwards
      !important;
  }
}

/* スマホ */
@media (
  max-width:
  600px
) {
  #gacha-modal
  .gacha-content {
    width:
      calc(
        100vw - 20px
      ) !important;

    max-height:
      calc(
        100dvh - 20px
      ) !important;

    padding:
      14px 10px !important;

    border-width:
      3px !important;
  }

  #gacha-rank-display {
    margin-bottom:
      6px !important;

    font-size:
      34px !important;
  }

  #gacha-ads-container {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;

    gap:
      8px !important;

    margin-top:
      10px !important;
  }

  #gacha-ads-container
  .pochipp-box {
    padding:
      7px !important;
  }

  #gacha-ads-container
  .pochipp-box__image {
    width:
      52px !important;

    height:
      52px !important;
  }

  #gacha-ads-container
  .pochipp-box__image img {
    max-width:
      52px !important;

    max-height:
      52px !important;
  }

  #gacha-close-btn {
    width:
      100% !important;

    margin-top:
      14px !important;
  }
}


/* =========================================================
   v1.1.2 Smartphone:
   Amazon / 楽天市場 / メルカリを必ず1列縦積み
   ========================================================= */
@media (max-width: 600px) {

  /* 2列の商品カード自体は維持 */
  #gacha-ads-container > * {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #gacha-ads-container .pochipp-box {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /*
   * PoChippテーマ側の横並び指定より強くするため、
   * ボタン群はflexではなく1列gridに固定。
   */
  #gacha-ads-container .pochipp-box__btns,
  #gacha-ads-container .pochipp-box__btn__wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    gap: 4px !important;
    row-gap: 4px !important;
    column-gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

  /* Amazon / 楽天市場 / メルカリ各ラッパー */
  #gacha-ads-container .pochipp-box__btns > *,
  #gacha-ads-container .pochipp-box__btn__wrapper > *,
  #gacha-ads-container .pochipp-box__btnwrap {
    display: block !important;

    grid-column: 1 / -1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    flex: none !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

  /* 実際の購入ボタン */
  #gacha-ads-container .pochipp-box__btn,
  #gacha-ads-container .pochipp-box__btn a,
  #gacha-ads-container .pochipp-box__btnwrap a,
  #gacha-ads-container [class*="pochipp-btn-"] {
    display: flex !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    flex: none !important;

    margin: 0 !important;
    padding: 7px 4px !important;

    box-sizing: border-box !important;

    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important;
  }
}


/* =========================================================
   v1.2.1 星の輝き
   ========================================================= */

#gacha-modal .gacha-stars {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#gacha-modal .gacha-star {
  position: absolute !important;
  display: block !important;
  border-radius: 50% !important;
  background: #fff !important;
  opacity: 0 !important;

  box-shadow:
    0 0 6px #fff,
    0 0 14px var(--gacha-color),
    0 0 28px var(--gacha-color) !important;

  transform:
    translate(-50%, -50%)
    scale(.2)
    rotate(0deg);

  animation:
    apGachaStarTwinkle
    2s
    ease-in-out
    infinite
    !important;
}

/* 大きな十字星 */
#gacha-modal .gacha-star--large {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#gacha-modal .gacha-star--large::before,
#gacha-modal .gacha-star--large::after {
  content: "";
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;

  width: 3px !important;
  height: 260% !important;

  background:
    linear-gradient(
      to bottom,
      transparent,
      #fff 40%,
      color-mix(
        in srgb,
        var(--gacha-color) 72%,
        white
      ) 50%,
      #fff 60%,
      transparent
    ) !important;

  transform:
    translate(-50%, -50%);

  filter:
    drop-shadow(
      0 0 6px
      var(--gacha-color)
    );
}

#gacha-modal .gacha-star--large::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}

@keyframes apGachaStarTwinkle {
  0%,
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(.18)
      rotate(0deg);
  }

  20% {
    opacity: .35;
  }

  48% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1.45)
      rotate(45deg);
  }

  72% {
    opacity: .4;
  }
}

/* SSR以上は星を強める */
#gacha-modal[data-rank="SSR"] .gacha-star,
#gacha-modal[data-rank="UR"] .gacha-star,
#gacha-modal[data-rank="SUR"] .gacha-star,
#gacha-modal[data-rank="LR"] .gacha-star,
#gacha-modal[data-rank="SULR"] .gacha-star,
#gacha-modal[data-rank="EX"] .gacha-star {
  box-shadow:
    0 0 9px #fff,
    0 0 20px var(--gacha-color),
    0 0 40px var(--gacha-color) !important;
}

@media (prefers-reduced-motion: reduce) {
  #gacha-modal .gacha-star {
    animation:
      apGachaStarTwinkle
      2s
      ease-in-out
      infinite
      !important;
  }
}



#gacha-premium-link.gacha-premium-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 12px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #635bff, #ff008c);
  color: #ffffff;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(99, 91, 255, 0.32);
}

#gacha-premium-link.gacha-premium-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}