/* ============================================================
   ZERAPHIA build1474 — アイテム画面 リデザイン（完成図準拠）
   すべて #screen-item 内に限定。既存の配置（スクロール領域・下部ナビ）は変更しない。
   ============================================================ */
html body:not(.ui-immersive) #screen-item.item-screen.screen.active{
  background:
    linear-gradient(180deg,rgba(255,253,248,.10) 0%,rgba(252,249,242,.52) 26%,rgba(250,246,238,.86) 44%,rgba(249,245,236,.92) 100%),
    url("../images/bg_setting.webp") center top / cover no-repeat,
    #f7f2e8 !important;
}

/* ---------- ページタイトル：アイテム / ITEM ---------- */
html body #screen-item.item-screen .app-page-heading{
  position:relative !important;
  overflow:visible !important;
}
html body #screen-item.item-screen .app-page-title{
  position:relative !important;
  overflow:visible !important;
  color:#2f2116 !important;
  font-size:clamp(22px,6.2vw,26px) !important;
  font-weight:700 !important;
  letter-spacing:.2em !important;
  text-indent:.2em !important;
  text-shadow:0 1px 0 rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.9) !important;
}
/* 上の聖印（コンパスの星＋左右に伸びる線） */
html body #screen-item.item-screen .app-page-title::before{
  content:"";
  position:absolute;
  left:50%;top:-17px;
  width:150px;height:16px;
  transform:translateX(-50%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 1 22.6 17.4 39 20 22.6 22.6 20 39 17.4 22.6 1 20 17.4 17.4Z' fill='%23b88a3c'/%3E%3Cpath d='M20 9 21.4 18.6 31 20 21.4 21.4 20 31 18.6 21.4 9 20 18.6 18.6Z' fill='%23fff3d6'/%3E%3Cpath d='M20 6 28 12M20 6 12 12M20 34 28 28M20 34 12 28' stroke='%23b88a3c' stroke-width='1' opacity='.55'/%3E%3C/svg%3E") center/16px 16px no-repeat,
    linear-gradient(90deg,transparent,rgba(184,138,60,.75) 40%,transparent 46%,transparent 54%,rgba(184,138,60,.75) 60%,transparent) center 70%/100% 1px no-repeat;
  pointer-events:none;
}
html body #screen-item.item-screen .item-title-en{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:4px;
  color:#a17a3b;
  font:600 8px/1 "Cinzel",serif;
  letter-spacing:.32em;
  text-indent:.32em;
  white-space:nowrap;
}
html body #screen-item.item-screen .item-title-en::before,
html body #screen-item.item-screen .item-title-en::after{
  content:"";
  width:38px;height:6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z' fill='%23b88a3c'/%3E%3C/svg%3E") var(--d,right) center/5px 5px no-repeat,
    linear-gradient(90deg,var(--l1,transparent),var(--l2,rgba(184,138,60,.8))) center/calc(100% - 6px) 1px no-repeat;
}
html body #screen-item.item-screen .item-title-en::after{--d:left;--l1:rgba(184,138,60,.8);--l2:transparent;}

/* ---------- 所持アイテム（見出し） ---------- */
html body #screen-item.item-screen .item-page-intro{
  display:block !important;
  padding:16px 6px 10px !important;
  border-bottom:0 !important;
}
html body #screen-item.item-screen .item-page-intro small{display:none !important;}
html body #screen-item.item-screen .item-page-intro h2{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 !important;
  color:#2f2116 !important;
  font:700 clamp(19px,5.4vw,22px)/1.2 "Noto Serif JP",serif !important;
  letter-spacing:.12em !important;
}
html body #screen-item.item-screen .item-page-intro h2::before{
  content:"";
  flex:0 0 28px;
  width:28px;height:28px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f1d58f'/%3E%3Cstop offset='.5' stop-color='%23bb8b3d'/%3E%3Cstop offset='1' stop-color='%23866026'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M20 2 23.2 16.8 38 20 23.2 23.2 20 38 16.8 23.2 2 20 16.8 16.8Z' fill='url(%23g)'/%3E%3Cpath d='M20 9 21.6 18.4 31 20 21.6 21.6 20 31 18.4 21.6 9 20 18.4 18.4Z' fill='%23fff8e6'/%3E%3Cpath d='M9 9 13 13M31 9 27 13M9 31 13 27M31 31 27 27' stroke='%23bb8b3d' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 1px 1px rgba(110,74,22,.25));
}
/* 見出しの下線（星から右へ伸びる金線） */
html body #screen-item.item-screen .item-page-intro h2::after{
  content:"";
  flex:1 1 auto;
  align-self:flex-end;
  height:1px;
  margin:0 0 3px 4px;
  background:linear-gradient(90deg,rgba(184,138,60,.7),rgba(184,138,60,.25) 70%,transparent);
}
html body #screen-item.item-screen .item-page-intro p{
  margin:7px 0 0 38px !important;letter-spacing:0 !important;white-space:nowrap;
  color:#5e4f40 !important;
  font:500 clamp(8.4px,2.36vw,10px)/1.6 "Noto Serif JP",serif !important;
  letter-spacing:.02em !important;
}

/* ---------- カテゴリタブ（アイコン付き） ---------- */
html body #screen-item.item-screen .item-category-tabs{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:5px !important;
  margin:4px 0 12px !important;
  padding:0 !important;
}
html body #screen-item.item-screen .item-category-tab{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  height:42px !important;
  min-height:0 !important;
  padding:0 6px !important;
  border:1px solid rgba(181,153,104,.55) !important;
  border-radius:2px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(245,239,226,.82)) !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75),inset 0 0 0 3px rgba(196,172,128,.28),0 2px 5px rgba(90,64,26,.08) !important;
  color:#3d2d1f !important;
  overflow:visible !important;
}
html body #screen-item.item-screen .item-category-tab span{
  font:700 clamp(12px,3.4vw,14px)/1 "Noto Serif JP",serif !important;
  letter-spacing:.06em !important;
  color:inherit !important;
  white-space:nowrap !important;
}
html body #screen-item.item-screen .item-tab-icon{
  display:block;
  flex:0 0 auto;
  width:22px;height:22px;
  opacity:.8;
  filter:grayscale(.55);
}
html body #screen-item.item-screen .item-tab-icon svg{display:block;width:100%;height:100%;}
html body #screen-item.item-screen .item-category-tab::after{
  content:"" !important;
  display:none !important;
}
html body #screen-item.item-screen .item-category-tab.is-active{
  border-color:#b98b3e !important;
  background:linear-gradient(180deg,#fffaf0 0%,#f6ead0 100%) !important;
  box-shadow:inset 0 0 0 2px rgba(255,252,241,.95),inset 0 0 0 3px rgba(185,139,62,.45),0 3px 8px rgba(120,82,26,.18) !important;
  color:#2c1d10 !important;
}
html body #screen-item.item-screen .item-category-tab.is-active .item-tab-icon{opacity:1;filter:none;}
/* アクティブタブの下に出る菱形 */
html body #screen-item.item-screen .item-category-tab.is-active::after{
  display:block !important;
  position:absolute !important;
  left:50% !important;bottom:-5px !important;top:auto !important;right:auto !important;
  width:8px !important;height:8px !important;
  transform:translateX(-50%) rotate(45deg) !important;
  background:#fff6e2 !important;
  border:1px solid #b98b3e !important;
  border-top:0 !important;border-left:0 !important;
  box-shadow:none !important;
  opacity:1 !important;
}

/* ---------- セクション見出し：✦ その他 ──── [更新] ---------- */
html body #screen-item.item-screen .item-panel-head{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 2px 2px !important;
  padding:0 !important;
  border:0 !important;
}
html body #screen-item.item-screen .item-panel-head > div{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
html body #screen-item.item-screen .item-panel-head > div::after{
  content:"";
  flex:1 1 auto;
  height:6px;
  min-width:20px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z' fill='%23c4a065'/%3E%3C/svg%3E") left center/5px 5px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z' fill='%23c4a065'/%3E%3C/svg%3E") right center/5px 5px no-repeat,
    linear-gradient(90deg,rgba(184,138,60,.55),rgba(184,138,60,.35)) center/calc(100% - 10px) 1px no-repeat;
}
html body #screen-item.item-screen .item-panel-head small{display:none !important;}
html body #screen-item.item-screen .item-panel-head strong{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  color:#2f2116 !important;
  font:700 clamp(16px,4.6vw,19px)/1.2 "Noto Serif JP",serif !important;
  letter-spacing:.14em !important;
  white-space:nowrap !important;
}
html body #screen-item.item-screen .item-panel-head strong::before{
  content:"";
  width:20px;height:20px;flex:0 0 20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 23 17 38 20 23 23 20 38 17 23 2 20 17 17Z' fill='%23c09246'/%3E%3Cpath d='M20 10 21.5 18.5 30 20 21.5 21.5 20 30 18.5 21.5 10 20 18.5 18.5Z' fill='%23fff6e2'/%3E%3C/svg%3E") center/contain no-repeat;
}
html body #screen-item.item-screen .item-refresh-btn{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  height:28px !important;
  min-width:76px !important;
  padding:0 12px !important;
  border:1px solid rgba(181,153,104,.6) !important;
  border-radius:2px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(244,237,223,.88)) !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 1px 3px rgba(90,64,26,.1) !important;
  color:#3d2d1f !important;
  font:600 11.5px/1 "Noto Serif JP",serif !important;
  letter-spacing:.1em !important;
}
html body #screen-item.item-screen .item-refresh-icon{width:14px;height:14px;color:#6e5432;flex:0 0 14px;}

/* ---------- アイテムカード ---------- */
html body #screen-item.item-screen .item-management-list{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  padding:10px 1px 24px !important;
}
html body #screen-item.item-screen .item-row,
html body #screen-item.item-screen .item-row.item-row-other,
html body #screen-item.item-screen .item-row-other:has(.item-exchange-open-btn){
  position:relative !important;
  display:grid !important;
  grid-template-columns:clamp(70px,20vw,82px) minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:0 12px !important;
  min-height:clamp(96px,27vw,106px) !important;
  height:auto !important;
  margin:0 !important;
  padding:9px 12px 9px 10px !important;
  border:1px solid rgba(190,160,108,.62) !important;
  border-radius:2px !important;
  background:
    radial-gradient(ellipse 60% 90% at 88% 30%,rgba(255,255,255,.65),rgba(255,255,255,0) 70%),
    linear-gradient(180deg,rgba(255,254,250,.94),rgba(248,243,233,.92)) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.72),
    inset 0 0 0 4px rgba(198,172,124,.32),
    0 3px 8px rgba(96,70,30,.10) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  opacity:1 !important;
  flex:0 0 auto !important;
  overflow:visible !important;
}
/* 四隅の金の飾り角 */
html body #screen-item.item-screen .item-row::before{
  content:"" !important;
  position:absolute !important;
  inset:-1px !important;
  width:auto !important;height:auto !important;
  border:0 !important;
  pointer-events:none !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 13V4L4 1h9' fill='none' stroke='%23b88a3c' stroke-width='1.4'/%3E%3Cpath d='M4 10V5.5L5.5 4H10' fill='none' stroke='%23d9bb7c' stroke-width='.9'/%3E%3C/svg%3E") left top/12px 12px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M13 13V4L10 1H1' fill='none' stroke='%23b88a3c' stroke-width='1.4'/%3E%3Cpath d='M10 10V5.5L8.5 4H4' fill='none' stroke='%23d9bb7c' stroke-width='.9'/%3E%3C/svg%3E") right top/12px 12px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 1v9l3 3h9' fill='none' stroke='%23b88a3c' stroke-width='1.4'/%3E%3Cpath d='M4 4v4.5L5.5 10H10' fill='none' stroke='%23d9bb7c' stroke-width='.9'/%3E%3C/svg%3E") left bottom/12px 12px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M13 1v9l-3 3H1' fill='none' stroke='%23b88a3c' stroke-width='1.4'/%3E%3Cpath d='M10 4v4.5L8.5 10H4' fill='none' stroke='%23d9bb7c' stroke-width='.9'/%3E%3C/svg%3E") right bottom/12px 12px no-repeat !important;
}
html body #screen-item.item-screen .item-row::after{content:none !important;}

/* 画像枠 */
html body #screen-item.item-screen .item-row-icon,
html body #screen-item.item-screen .item-row-other .item-row-icon{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1/1 !important;
  margin:0 !important;
  border:1px solid rgba(190,160,108,.6) !important;
  border-radius:1px !important;
  background:
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.98) 0,rgba(255,252,243,.9) 42%,rgba(236,228,212,.85) 100%) !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),inset 0 0 0 3px rgba(205,182,138,.35),0 1px 3px rgba(90,64,26,.10) !important;
  overflow:hidden !important;
}
html body #screen-item.item-screen .item-row-icon img{
  width:88% !important;
  height:88% !important;
  object-fit:contain !important;
  filter:drop-shadow(0 2px 3px rgba(70,46,14,.22)) !important;
}
/* 10連チケットは横長なので枠いっぱいに */
html body #screen-item.item-screen .item-row-icon img[src$="gacha_ticket_10.webp"]{
  width:104% !important;height:104% !important;max-width:none !important;
}

/* 文字 */
html body #screen-item.item-screen .item-row-main{
  position:relative !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
}
html body #screen-item.item-screen .item-row .item-row-kicker{
  color:#9a7a42 !important;
  font:600 7px/1 "Cinzel",serif !important;
  letter-spacing:.24em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html body #screen-item.item-screen .item-row .item-row-name{
  margin-top:5px !important;
  color:#2b1e13 !important;
  font:700 clamp(13.5px,3.9vw,15.5px)/1.25 "Noto Serif JP",serif !important;
  letter-spacing:.02em !important;
}
html body #screen-item.item-screen .item-row .item-row-desc{
  margin-top:5px !important;
  color:#5c4d3e !important;
  font:500 clamp(8.6px,2.45vw,9.8px)/1.55 "Noto Serif JP",serif !important;
}
html body #screen-item.item-screen .item-row .item-row-count,
html body #screen-item.item-screen .item-row .item-row-count-other,
html body #screen-item.item-screen .item-row-other:has(.item-exchange-open-btn) .item-row-count-other{
  position:static !important;
  display:flex !important;
  align-items:baseline !important;
  gap:12px !important;
  width:auto !important;
  margin:6px 0 0 !important;
  padding:5px 0 0 !important;
  border-top:1px dashed rgba(166,134,75,.42) !important;
  color:#6c5a41 !important;
}
html body #screen-item.item-screen .item-row .item-row-count span{
  color:#6c5a41 !important;
  font:500 9px/1 "Cinzel",serif !important;
  letter-spacing:.12em !important;
}
html body #screen-item.item-screen .item-row .item-row-count strong{
  color:#2b1e13 !important;
  font:700 clamp(15px,4.4vw,18px)/1 "Cinzel","Noto Serif JP",serif !important;
}
/* 0個のカードも文字は薄くしない（完成図準拠） */
html body #screen-item.item-screen .item-row.is-zero .item-row-icon img{opacity:.92 !important;}

/* ---------- 右側のボタン：交換・売却・未実装 ---------- */
html body #screen-item.item-screen .item-row-actions,
html body #screen-item.item-screen .item-row-actions-other{
  width:auto !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  align-self:center !important;
}
html body #screen-item.item-screen .item-exchange-open-btn,
html body #screen-item.item-screen .item-sell-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:clamp(62px,18vw,72px) !important;
  min-width:0 !important;
  height:clamp(32px,9vw,36px) !important;
  padding:0 !important;
  border:1px solid #b08640 !important;
  border-radius:2px !important;
  background:linear-gradient(180deg,#fffcf3 0%,#f6ead0 100%) !important;
  box-shadow:inset 0 0 0 2px rgba(255,253,245,.95),inset 0 0 0 3px rgba(176,134,64,.45),0 2px 5px rgba(110,76,24,.18) !important;
  color:#3a2512 !important;
  font:700 clamp(13px,3.7vw,15px)/1 "Noto Serif JP",serif !important;
  letter-spacing:.14em !important;
  text-indent:.14em !important;
  opacity:1 !important;
}
html body #screen-item.item-screen .item-exchange-open-btn:disabled,
html body #screen-item.item-screen .item-sell-btn:disabled{
  border-color:rgba(170,160,145,.7) !important;
  background:linear-gradient(180deg,rgba(244,242,238,.95),rgba(230,226,219,.92)) !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),inset 0 0 0 3px rgba(170,160,145,.25) !important;
  color:#8f877b !important;
  font-size:clamp(11.5px,3.2vw,13px) !important;
  letter-spacing:.08em !important;
  text-indent:.08em !important;
  opacity:1 !important;
}
html body #screen-item.item-screen .item-row-price{
  color:#8a6a35 !important;
  font:600 9px/1.2 "Noto Serif JP",serif !important;
  text-align:center !important;
  white-space:nowrap !important;
}

@media (max-width:360px){
  html body #screen-item.item-screen .item-row,
  html body #screen-item.item-screen .item-row.item-row-other,
  html body #screen-item.item-screen .item-row-other:has(.item-exchange-open-btn){
    gap:0 9px !important;
    padding:8px 9px 8px 8px !important;
  }
  html body #screen-item.item-screen .item-tab-icon{width:18px;height:18px;}
  html body #screen-item.item-screen .item-category-tab{gap:4px !important;}
}
@media (max-height:700px){
  html body #screen-item.item-screen .item-page-intro{padding:12px 6px 6px !important;}
  html body #screen-item.item-screen .item-page-intro p{margin-top:4px !important;}
  html body #screen-item.item-screen .item-category-tabs{margin:2px 0 9px !important;}
  html body #screen-item.item-screen .item-category-tab{height:38px !important;}
}

/* 聖霊花カードの旧レイアウト（OWNED絶対配置用の下余白）を解除 */
html body #screen-item.item-screen .item-row-other:has(.item-exchange-open-btn) .item-row-main{
  min-height:0 !important;
  padding:0 !important;
}
@media (max-width:370px){
  html body #screen-item.item-screen .item-page-intro p{white-space:normal !important;margin-left:4px !important;}
}

/* ============================================================
   build1475 — 聖霊花交換所モーダル（完成図準拠）
   ============================================================ */
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-backdrop{
  background:rgba(56,44,28,.30) !important;
  backdrop-filter:blur(3px) !important;-webkit-backdrop-filter:blur(3px) !important;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-dialog{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  top:calc(50% + 14px) !important;
  width:min(90vw,430px) !important;
  height:min(78vh,700px,calc(100vh - 210px)) !important;
  height:min(78dvh,700px,calc(100dvh - 210px)) !important;
  max-height:none !important;
  padding:34px clamp(10px,3.2vw,14px) 18px !important;
  overflow:visible !important;
  border:1px solid #c6a466 !important;
  border-radius:3px !important;
  background:
    radial-gradient(ellipse 70% 22% at 50% 0%,rgba(255,236,190,.38),rgba(255,236,190,0) 100%),
    linear-gradient(180deg,#fffdf8 0%,#faf5ea 55%,#f6f0e3 100%) !important;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.85),
    inset 0 0 0 5px rgba(198,164,102,.55),
    0 22px 60px rgba(48,36,18,.30) !important;
  color:#2f2116 !important;
}
/* 四隅の飾り角 */
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-dialog::before{
  content:"";
  position:absolute;inset:6px;
  pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M1 29V9L9 1h20' fill='none' stroke='%23c19a55' stroke-width='1.3'/%3E%3Cpath d='M6 22V11.5L11.5 6H22' fill='none' stroke='%23dcc28c' stroke-width='.9'/%3E%3Ccircle cx='9' cy='9' r='1.6' fill='%23c19a55'/%3E%3C/svg%3E") left top/24px 24px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M29 29V9L21 1H1' fill='none' stroke='%23c19a55' stroke-width='1.3'/%3E%3Cpath d='M24 22V11.5L18.5 6H8' fill='none' stroke='%23dcc28c' stroke-width='.9'/%3E%3Ccircle cx='21' cy='9' r='1.6' fill='%23c19a55'/%3E%3C/svg%3E") right top/24px 24px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M1 1v20l8 8h20' fill='none' stroke='%23c19a55' stroke-width='1.3'/%3E%3Cpath d='M6 8v10.5L11.5 24H22' fill='none' stroke='%23dcc28c' stroke-width='.9'/%3E%3Ccircle cx='9' cy='21' r='1.6' fill='%23c19a55'/%3E%3C/svg%3E") left bottom/24px 24px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M29 1v20l-8 8H1' fill='none' stroke='%23c19a55' stroke-width='1.3'/%3E%3Cpath d='M24 8v10.5L18.5 24H8' fill='none' stroke='%23dcc28c' stroke-width='.9'/%3E%3Ccircle cx='21' cy='21' r='1.6' fill='%23c19a55'/%3E%3C/svg%3E") right bottom/24px 24px no-repeat;
}
/* 下辺中央の小さな飾り */
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-dialog::after{
  content:"";
  position:absolute;left:50%;bottom:-7px;
  width:56px;height:14px;transform:translateX(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 14'%3E%3Cpath d='M2 7h18M36 7h18' stroke='%23c19a55' stroke-width='1'/%3E%3Cpath d='M28 1l6 6-6 6-6-6Z' fill='%23fbf5e8' stroke='%23c19a55' stroke-width='1.1'/%3E%3Cpath d='M28 4.5l2.5 2.5L28 9.5 25.5 7Z' fill='%23c19a55'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events:none;
}
/* 上部の聖花の紋章（アーチ＋花＋光条） */
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-emblem{
  position:absolute;
  left:50%;top:-30px;
  width:96px;height:58px;
  transform:translateX(-50%);
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 58'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f3d996'/%3E%3Cstop offset='1' stop-color='%23b88a3c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='%23d8b56f' stroke-width='.7' opacity='.8'%3E%3Cpath d='M48 40 6 30M48 40 12 20M48 40 90 30M48 40 84 20M48 40 0 42M48 40 96 42'/%3E%3C/g%3E%3Cpath d='M22 56V30a26 26 0 0 1 52 0v26Z' fill='%23fffaf0' stroke='url(%23g)' stroke-width='1.6'/%3E%3Cpath d='M27 56V31a21 21 0 0 1 42 0v25' fill='none' stroke='%23e2c98f' stroke-width='.9'/%3E%3Cpath d='M48 16c4 6 5 12 0 22-5-10-4-16 0-22Z' fill='%23fff' stroke='%23c49a4e' stroke-width='1'/%3E%3Cpath d='M48 38c-3-8-9-12-16-12 2 7 8 12 16 12Z' fill='%23fff' stroke='%23c49a4e' stroke-width='1'/%3E%3Cpath d='M48 38c3-8 9-12 16-12-2 7-8 12-16 12Z' fill='%23fff' stroke='%23c49a4e' stroke-width='1'/%3E%3Cpath d='M48 40c-6-1-12 1-16 6 6 2 12 0 16-6ZM48 40c6-1 12 1 16 6-6 2-12 0-16-6Z' fill='%23fdf6e6' stroke='%23c49a4e' stroke-width='.9'/%3E%3Ccircle cx='48' cy='35' r='2.4' fill='url(%23g)'/%3E%3Cpath d='M48 3l1.6 5L48 13l-1.6-5Z' fill='%23c49a4e'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(120,84,26,.18));
}
/* 閉じる（丸い金枠） */
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-close{
  right:-6px !important;top:-6px !important;
  width:36px !important;height:36px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  padding:0 0 2px !important;
  border:1px solid #b88a3c !important;
  border-radius:50% !important;
  background:radial-gradient(circle,#fffdf6 0,#f6ecd6 100%) !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),inset 0 0 0 3px rgba(184,138,60,.35),0 2px 6px rgba(80,56,20,.22) !important;
  color:#3a2717 !important;
  font:300 25px/1 "Noto Serif JP",serif !important;
  z-index:3 !important;
}
/* タイトル */
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-dialog h2{
  order:0;
  margin:2px 0 6px !important;
  text-align:center !important;
  color:#2f2116 !important;
  font:700 clamp(21px,6vw,25px)/1.25 "Noto Serif JP",serif !important;
  letter-spacing:.16em !important;
  text-indent:.16em !important;
  text-shadow:0 1px 0 #fff !important;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-kicker{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  margin:0 0 12px !important;
  color:#9a7a42 !important;
  font:600 7px/1 "Cinzel",serif !important;
  letter-spacing:.3em !important;
  white-space:nowrap !important;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-kicker::before,
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-kicker::after{
  content:"";
  flex:1 1 auto;max-width:76px;height:12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 11.8 8.2 20 10 11.8 11.8 10 20 8.2 11.8 0 10 8.2 8.2Z' fill='%23c19a55'/%3E%3C/svg%3E") var(--s,right) center/11px 11px no-repeat,
    linear-gradient(90deg,var(--a,transparent),var(--b,rgba(193,154,85,.85))) center/calc(100% - 4px) 1px no-repeat;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-kicker::after{--s:left;--a:rgba(193,154,85,.85);--b:transparent;}

/* 所持数バー */
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-owned{
  flex:0 0 auto;
  position:relative;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) 1px auto !important;
  align-items:center !important;
  gap:0 12px !important;
  margin:0 0 10px !important;
  padding:8px 18px 8px 12px !important;
  border:1px solid #c6a466 !important;
  border-radius:2px !important;
  background:
    radial-gradient(ellipse 40% 120% at 18% 50%,rgba(255,255,255,.95),rgba(255,255,255,0) 100%),
    linear-gradient(180deg,#fffaf0,#f5ead3) !important;
  box-shadow:inset 0 0 0 3px rgba(255,253,246,.92),inset 0 0 0 4px rgba(198,164,102,.4),0 2px 6px rgba(110,78,26,.10) !important;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-owned::after{
  content:"";
  grid-column:3;grid-row:1;
  width:1px;height:26px;
  background:linear-gradient(180deg,transparent,rgba(166,128,62,.6),transparent);
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-owned img{
  grid-column:1;
  width:clamp(34px,10vw,42px) !important;height:clamp(34px,10vw,42px) !important;
  object-fit:contain !important;
  filter:drop-shadow(0 2px 3px rgba(90,64,26,.22));
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-owned span{
  grid-column:2;
  display:flex !important;align-items:baseline !important;gap:8px !important;
  color:#3a2a1b !important;
  font:600 clamp(12.5px,3.6vw,14.5px)/1.2 "Noto Serif JP",serif !important;
  white-space:nowrap !important;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-owned span small{
  color:#6f5c45;font:500 10px/1 "Noto Serif JP",serif;letter-spacing:.06em;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-owned strong{
  grid-column:4;
  min-width:52px;text-align:center;
  color:#2b1e13 !important;
  font:700 clamp(22px,6.4vw,27px)/1 "Cinzel","Noto Serif JP",serif !important;
}

/* 交換リスト */
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-list{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  overflow-y:auto !important;
  padding:2px 6px 4px 2px !important;
  margin-right:-4px !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(150,128,96,.55) transparent;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-list::-webkit-scrollbar{width:3px;}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-list::-webkit-scrollbar-thumb{background:rgba(150,128,96,.55);border-radius:3px;}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-group-title{display:none !important;}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-row{
  flex:0 0 auto;
  display:grid !important;
  grid-template-columns:clamp(40px,11.5vw,46px) minmax(0,1fr) auto auto !important;
  align-items:center !important;
  gap:0 9px !important;
  min-height:clamp(54px,15vw,60px) !important;
  margin:0 !important;
  padding:6px 8px 6px 7px !important;
  border:0 !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,246,238,.94)) !important;
  box-shadow:0 0 0 1px rgba(214,196,160,.55),0 2px 5px rgba(90,66,30,.07) !important;
  opacity:1 !important;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-reward-icon{
  width:100% !important;height:auto !important;aspect-ratio:1/1;
  border:1px solid rgba(198,164,102,.7) !important;
  border-radius:2px !important;
  background:radial-gradient(circle at 50% 45%,#fff 0,#fbf6ea 55%,#efe5d0 100%) !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85) !important;
  overflow:hidden !important;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-reward-icon img{
  width:90% !important;height:90% !important;max-width:none !important;max-height:none !important;object-fit:contain !important;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-reward-icon.is-placeholder span{color:#b49a6c;font:600 16px/1 "Cinzel",serif;}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-copy strong{
  color:#2b1e13 !important;
  font:700 clamp(11.5px,3.3vw,13.5px)/1.3 "Noto Serif JP",serif !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-copy span{
  margin-top:3px !important;
  color:#6f604e !important;
  font:500 clamp(8.5px,2.4vw,9.6px)/1.4 "Noto Serif JP",serif !important;
}
/* 必要数（花アイコン＋数）：左右に細い区切り線 */
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-cost{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:3px;
  width:clamp(50px,14.5vw,60px);
  box-sizing:border-box;
  padding:0 4px;
  border-left:1px solid rgba(190,166,120,.5);
  border-right:1px solid rgba(190,166,120,.5);
  height:28px;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-cost img{
  width:clamp(17px,5vw,21px);height:clamp(17px,5vw,21px);object-fit:contain;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-cost b{
  color:#2b1e13;
  font:600 clamp(13px,3.8vw,15.5px)/1 "Cinzel","Noto Serif JP",serif;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-cost.is-short b{color:#a5432f;}
/* 交換ボタン（ブロンズ） */
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-btn{
  width:clamp(56px,17vw,68px) !important;
  height:clamp(28px,8vw,32px) !important;
  padding:0 !important;
  border:1px solid #6e4f22 !important;
  border-radius:2px !important;
  background:linear-gradient(180deg,#b48d55 0%,#93703c 52%,#7c5c2d 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(255,236,196,.55),inset 0 0 0 3px rgba(122,90,42,.6),inset 0 0 0 4px rgba(244,214,150,.35),0 2px 4px rgba(70,46,14,.25) !important;
  color:#fffaf0 !important;
  font:600 clamp(11px,3.2vw,13px)/1 "Noto Serif JP",serif !important;
  letter-spacing:.12em !important;text-indent:.12em !important;
  text-shadow:0 1px 1px rgba(60,38,10,.6) !important;
  opacity:1 !important;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-btn:disabled{
  border-color:rgba(160,150,135,.8) !important;
  background:linear-gradient(180deg,#e8e4dc,#d5cfc4) !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55) !important;
  color:#8b8275 !important;
  text-shadow:none !important;
  font-size:clamp(10px,2.9vw,11.5px) !important;
  letter-spacing:.04em !important;text-indent:.04em !important;
}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-row.is-disabled .item-exchange-copy,
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-row.is-disabled .item-exchange-reward-icon{opacity:.6;}
html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-note{
  flex:0 0 auto;
  margin:8px 0 0 !important;
  color:#8d7d68 !important;
  font:500 9px/1.4 "Noto Serif JP",serif !important;
  text-align:center !important;
}
@media (max-width:360px){
  html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-row{gap:0 6px !important;padding:5px 6px !important;}
  html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-cost{padding:0 3px;width:46px;}
  html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-copy strong{white-space:normal;}
  html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-dialog{padding-top:30px !important;}
  html body :is(#spirit-flower-exchange-modal,#spirit-flower-sr-exchange-modal) .item-exchange-kicker{margin-bottom:8px !important;}
}

/* ============================================================
   build1489 — 限定衣装プレビュー
   ============================================================ */
html body #spirit-flower-exchange-modal .item-exchange-reward-icon.is-previewable{
  position:relative !important;cursor:zoom-in !important;
}
html body #spirit-flower-exchange-modal .item-exchange-reward-icon.is-previewable::after{
  content:"";position:absolute;right:1px;bottom:1px;width:15px;height:15px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3Cpath d='M15 15l4.5 4.5M10.5 7.8v5.4M7.8 10.5h5.4' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/10px 10px no-repeat,linear-gradient(180deg,#a2804d,#6e5228);
  border:1px solid #f2dfb3;box-shadow:0 1px 2px rgba(40,26,8,.35);
}
#item-skin-preview{
  position:fixed;inset:0;z-index:18200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:calc(20px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));
  background:radial-gradient(ellipse 80% 60% at 50% 42%,rgba(255,250,238,.97),rgba(241,232,214,.97) 70%,rgba(226,212,186,.98));
  cursor:zoom-out;animation:itemSkinPreviewIn .2s ease both;
}
#item-skin-preview .item-skin-preview-frame{
  position:relative;display:flex;flex-direction:column;align-items:center;
  max-width:min(92vw,460px);max-height:calc(100dvh - 120px);
  padding:7px;border:1px solid #c6a466;border-radius:2px;
  background:linear-gradient(180deg,#fffdf7,#f3ead7);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.9),inset 0 0 0 4px rgba(198,164,102,.55),0 16px 36px rgba(92,66,28,.22);
}
#item-skin-preview .item-skin-preview-img{
  display:block;max-width:100%;max-height:calc(100dvh - 210px);object-fit:contain;
}
#item-skin-preview .item-skin-preview-caption{
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0 4px;
}
#item-skin-preview .item-skin-preview-caption small{color:#9a7a42;font:600 8px/1 "Cinzel",serif;letter-spacing:.3em;}
#item-skin-preview .item-skin-preview-caption strong{color:#2f2116;font:700 20px/1.2 "Noto Serif JP",serif;letter-spacing:.16em;}
#item-skin-preview .item-skin-preview-caption span{color:#7a5420;font:600 11px/1 "Noto Serif JP",serif;letter-spacing:.2em;}
#item-skin-preview .item-skin-preview-close{
  position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;
  width:38px;height:38px;border:1px solid #b88a3c;border-radius:50%;
  background:radial-gradient(circle,#fffdf6,#f6ecd6);color:#3a2717;font:300 25px/1 "Noto Serif JP",serif;
  box-shadow:0 2px 6px rgba(80,56,20,.22);cursor:pointer;
}
#item-skin-preview .item-skin-preview-hint{margin:0;color:#8d7d68;font:500 10px/1 "Noto Serif JP",serif;letter-spacing:.12em;}
@keyframes itemSkinPreviewIn{from{opacity:0}to{opacity:1}}
html body #item-skin-preview .item-skin-preview-close{
  border-radius:50% !important;padding:0 0 2px !important;display:flex !important;align-items:center !important;justify-content:center !important;
  border:1px solid #b88a3c !important;background:radial-gradient(circle,#fffdf6,#f6ecd6) !important;outline:none !important;
}

/* build1647 — SR exchange: show complete item names/descriptions without truncation */
html body #spirit-flower-sr-exchange-modal .item-exchange-row{
  min-height:60px !important;
  height:auto !important;
  grid-template-columns:clamp(36px,10.5vw,44px) minmax(0,1fr) clamp(40px,12vw,52px) clamp(52px,15vw,62px) !important;
  gap:0 clamp(4px,1.6vw,7px) !important;
  padding:8px 6px !important;
}
html body #spirit-flower-sr-exchange-modal .item-exchange-copy{
  min-width:0 !important;
  overflow:visible !important;
  white-space:normal !important;
}
html body #spirit-flower-sr-exchange-modal .item-exchange-copy strong{
  display:block !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  line-height:1.45 !important;
  font-size:clamp(10px,2.9vw,12.5px) !important;
}
html body #spirit-flower-sr-exchange-modal .item-exchange-copy span{
  display:block !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  line-height:1.5 !important;
}
html body #spirit-flower-sr-exchange-modal .item-exchange-cost{
  width:100% !important;
  min-width:0 !important;
  padding:0 2px !important;
}
html body #spirit-flower-sr-exchange-modal .item-exchange-btn{
  width:100% !important;
  min-width:0 !important;
}
