/* Zeraphia Item Management v107 */

#screen-main .item-home-entry{
  position:absolute !important;
  right:var(--home-side-menu-inset,18px) !important;
  left:auto !important;
  top:calc(
    var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px))
    + clamp(88px,22vw,98px)
    + 8px
  ) !important;
  bottom:auto !important;
  z-index:30 !important;
}

/* アイテムを神聖樹の下へ置き、スコアアタックは1段下へ */
#screen-main .score-attack-home-entry{
  top:calc(
    var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px))
    + (clamp(88px,22vw,98px) + 8px) * 2
  ) !important;
}

@media (max-width:380px),(max-height:700px){
  #screen-main .item-home-entry{
    right:14px !important;
    top:calc(
      var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px))
      + 84px + 8px
    ) !important;
  }
  #screen-main .score-attack-home-entry{
    top:calc(
      var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px))
      + (84px + 8px) * 2
    ) !important;
  }
}

/* build1015: 画面の配置・余白・PC幅センタリングは app_chrome.css
   (#screen-item.screen.app-page / .item-screen-scroll.app-page-content) が唯一の持ち主。
   ここはアイテム画面の背景画像だけを担当する。 */
html body:not(.ui-immersive) #screen-item.screen.active{
  background:
    linear-gradient(180deg,rgba(255,255,255,.74),rgba(249,246,239,.60)),
    url("../images/chara_bg_sky.webp") center/cover no-repeat !important;
}

.item-page-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding:18px 8px 15px;
  border-bottom:1px solid rgba(164,132,73,.19);
}
.item-page-intro small{
  display:block;
  color:#9b7a3d;
  font-family:"Cinzel",serif;
  font-size:7px;
  font-weight:700;
  letter-spacing:.32em;
}
.item-page-intro h2{
  margin:5px 0 0;
  color:#3a2d21;
  font-family:"Noto Serif JP",serif;
  font-size:22px;
  font-weight:500;
  letter-spacing:.12em;
}
.item-page-intro p{
  margin:7px 0 0;
  color:#756858;
  font-family:"Noto Serif JP",serif;
  font-size:9px;
  line-height:1.65;
}
.item-page-coin{
  flex:0 0 auto;
  min-width:94px;
  padding:9px 10px;
  text-align:right;
  background:
    linear-gradient(180deg,rgba(255,255,255,.44),rgba(255,255,255,.15));
  border-left:1px solid rgba(182,146,79,.30);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.item-page-coin span{
  display:block;
  color:#a18448;
  font:700 6px/1 "Cinzel",serif;
  letter-spacing:.26em;
}
.item-page-coin strong{
  display:block;
  margin-top:5px;
  color:#59431f;
  font:600 15px/1 "Cinzel","Noto Serif JP",serif;
  letter-spacing:.04em;
}

.item-category-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:15px 0 10px;
}
.item-category-tab{
  position:relative;
  height:48px;
  border:1px solid rgba(171,139,77,.20);
  background:
    linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.12));
  color:#867862;
  font-family:"Noto Serif JP",serif;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.item-category-tab::after{
  content:"";
  position:absolute;
  left:22%;
  right:22%;
  bottom:-1px;
  height:1px;
  background:transparent;
}
.item-category-tab span{
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
}
.item-category-tab small{
  min-width:20px;
  color:#9b855e;
  font:600 8px/1 "Cinzel",serif;
}
.item-category-tab.is-active{
  border-color:rgba(171,132,58,.50);
  color:#3e3022;
  background:
    linear-gradient(180deg,rgba(255,255,255,.68),rgba(252,247,238,.34));
}
.item-category-tab.is-active::after{
  background:linear-gradient(90deg,transparent,#a67b31 28%,#a67b31 72%,transparent);
}

.item-inventory-panel{
  border-top:1px solid rgba(173,143,87,.15);
  padding-top:12px;
}
.item-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:0 4px 10px;
}
.item-panel-head small{
  display:block;
  color:#a1844d;
  font:700 6px/1 "Cinzel",serif;
  letter-spacing:.28em;
}
.item-panel-head strong{
  display:block;
  margin-top:4px;
  color:#4a3828;
  font-family:"Noto Serif JP",serif;
  font-size:15px;
  font-weight:500;
  letter-spacing:.09em;
}
.item-refresh-btn{
  border:0;
  background:transparent;
  color:#85652e;
  font-family:"Noto Serif JP",serif;
  font-size:9px;
  font-weight:600;
  padding:7px 6px;
  text-shadow:0 0 8px rgba(255,255,255,.9);
}

.item-management-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.item-management-loading,
.item-management-empty{
  padding:36px 16px;
  color:#897b6b;
  text-align:center;
  font:500 10px/1.7 "Noto Serif JP",serif;
}

.item-row{
  position:relative;
  min-height:88px;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 10px 10px 9px;
  border:1px solid rgba(173,143,87,.18);
  background:
    linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.14));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.item-row.is-zero{opacity:.62}
.item-row::before{
  content:"";
  position:absolute;
  left:5px; top:5px;
  width:9px; height:9px;
  border-left:1px solid rgba(170,135,66,.36);
  border-top:1px solid rgba(170,135,66,.36);
}
.item-row-icon{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border:1px solid rgba(170,141,83,.22);
  background:rgba(255,255,255,.32);
  overflow:hidden;
}
.item-row-icon img{
  width:84%;
  height:84%;
  object-fit:contain;
}
.item-row-icon.is-level span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:37px;
  height:37px;
  border-radius:50%;
  border:1px solid rgba(163,129,64,.46);
  color:#725322;
  font:600 17px/1 "Noto Serif JP",serif;
  background:radial-gradient(circle,rgba(255,255,255,.84),rgba(235,224,204,.36));
}
.item-row-main{min-width:0}
.item-row-kicker{
  color:#a1844d;
  font:600 6px/1 "Cinzel",serif;
  letter-spacing:.22em;
}
.item-row-name{
  margin-top:5px;
  color:#3e3126;
  font-family:"Noto Serif JP",serif;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.item-row-desc{
  margin-top:4px;
  color:#827568;
  font-family:"Noto Serif JP",serif;
  font-size:7.5px;
  line-height:1.42;
}
.item-row-count{
  display:flex;
  align-items:baseline;
  gap:4px;
  margin-top:6px;
  color:#756348;
}
.item-row-count span{
  font:500 7px/1 "Cinzel",serif;
  letter-spacing:.10em;
}
.item-row-count strong{
  color:#3d2e20;
  font:600 14px/1 "Cinzel","Noto Serif JP",serif;
}
.item-row-actions{
  width:72px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
}
.item-sell-btn{
  min-height:34px;
  border:1px solid rgba(167,126,54,.42);
  background:
    linear-gradient(180deg,rgba(255,253,248,.72),rgba(242,233,216,.42));
  color:#5f451e;
  font-family:"Noto Serif JP",serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:.10em;
}
.item-sell-btn:disabled{
  border-color:rgba(150,140,123,.18);
  color:#9c9488;
  background:rgba(255,255,255,.17);
}
.item-row-price{
  text-align:center;
  color:#9a7635;
  font:600 7px/1 "Cinzel","Noto Serif JP",serif;
  white-space:nowrap;
}
.item-row-price img{
  width:10px;
  height:10px;
  vertical-align:-2px;
  object-fit:contain;
}

/* Sell modal */
.item-sell-modal[hidden]{display:none!important}
.item-sell-modal{
  position:fixed;
  inset:0;
  z-index:1300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.item-sell-backdrop{
  position:absolute;
  inset:0;
  background:rgba(244,242,236,.40);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.item-sell-dialog{
  position:relative;
  z-index:1;
  width:min(100%,350px);
  padding:20px 18px 17px;
  border:1px solid rgba(170,132,61,.42);
  background:
    linear-gradient(180deg,rgba(255,255,255,.88),rgba(248,243,233,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 20px 52px rgba(78,61,38,.14);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.item-sell-close{
  position:absolute;
  right:9px;
  top:8px;
  width:30px;
  height:30px;
  border:0;
  background:transparent;
  color:#795d2c;
  font-size:20px;
}
.item-sell-kicker{
  color:#9b7739;
  font:700 7px/1 "Cinzel",serif;
  letter-spacing:.28em;
}
.item-sell-dialog h2{
  margin:6px 0 14px;
  color:#35291f;
  font:500 20px/1.2 "Noto Serif JP",serif;
  letter-spacing:.12em;
}
.item-sell-selected{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 0;
  border-top:1px solid rgba(169,138,80,.14);
  border-bottom:1px solid rgba(169,138,80,.14);
}
.item-sell-icon{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(169,138,80,.22);
  background:rgba(255,255,255,.36);
}
.item-sell-icon img{width:84%;height:84%;object-fit:contain}
.item-sell-copy strong{
  display:block;
  color:#3c3026;
  font:600 12px/1.35 "Noto Serif JP",serif;
}
.item-sell-copy span{
  display:block;
  margin-top:5px;
  color:#817361;
  font:500 8px/1 "Noto Serif JP",serif;
}
.item-sell-copy b{color:#5b431e}

.item-sell-stepper{
  display:grid;
  grid-template-columns:38px 1fr 38px 54px;
  gap:7px;
  margin-top:15px;
}
.item-sell-stepper button,
.item-sell-stepper input{
  height:38px;
  border:1px solid rgba(165,132,71,.24);
  background:rgba(255,255,255,.43);
  color:#4d3a22;
  font-family:"Noto Serif JP",serif;
  text-align:center;
}
.item-sell-stepper input{font-size:13px}
.item-sell-stepper button{font-size:14px}
#item-sell-max{
  color:#805d25;
  font:700 8px/1 "Cinzel",serif;
  letter-spacing:.08em;
}

.item-sell-summary{
  margin-top:14px;
  border-top:1px solid rgba(164,130,65,.14);
  border-bottom:1px solid rgba(164,130,65,.14);
  padding:8px 0;
}
.item-sell-summary>div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:30px;
  color:#776a5b;
  font:500 9px/1 "Noto Serif JP",serif;
}
.item-sell-summary strong{
  color:#59401d;
  font:600 13px/1 "Cinzel","Noto Serif JP",serif;
}
.item-sell-summary img{
  width:15px;
  height:15px;
  object-fit:contain;
  vertical-align:-3px;
}
.item-sell-confirm{
  width:100%;
  height:48px;
  margin-top:15px;
  border:1px solid rgba(156,112,37,.60);
  background:linear-gradient(180deg,rgba(255,252,245,.92),rgba(240,229,208,.72));
  color:#3d2b18;
  font:700 13px/1 "Noto Serif JP",serif;
  letter-spacing:.15em;
}
.item-sell-confirm:disabled{opacity:.45}
.item-sell-note{
  margin:8px 0 0;
  color:#998c7c;
  font:500 7px/1.5 "Noto Serif JP",serif;
  text-align:center;
}

@media (max-width:360px){
  .item-page-intro h2{font-size:20px}
  .item-row{
    grid-template-columns:50px minmax(0,1fr) 64px;
    gap:8px;
    padding-left:7px;
    padding-right:7px;
  }
  .item-row-icon{width:48px;height:48px}
  .item-row-actions{width:64px}
  .item-row-name{font-size:11px}
}

/* =========================================================
   ITEM v108 — EXP material images / sell rates
   ========================================================= */

.item-row-icon.is-exp{
  background:
    radial-gradient(circle at 50% 44%,rgba(255,255,255,.64),rgba(255,255,255,.20) 60%,rgba(255,255,255,.06) 100%);
  overflow:visible;
}

.item-row-icon.is-exp img{
  width:96%;
  height:96%;
  object-fit:contain;
  filter:drop-shadow(0 5px 8px rgba(78,58,33,.12));
}

.item-sell-icon img{
  filter:drop-shadow(0 6px 10px rgba(77,58,35,.12));
}

/* =========================================================
   ITEM v109 — top position / duplicate coin / sell-rate legibility
   ========================================================= */

.item-page-intro{
  align-items:flex-start !important;
  justify-content:flex-start !important;
  padding:8px 8px 12px !important;
  gap:0 !important;
}

/* Coin is already shown in the global user frame. */
.item-page-coin{
  display:none !important;
}

/* Slightly tighten the first content blocks. */
.item-category-tabs{
  margin-top:11px !important;
}

.item-row-actions{
  width:76px !important;
}

.item-row-price{
  color:#85611f !important;
  font:700 9.5px/1.15 "Cinzel","Noto Serif JP",serif !important;
  letter-spacing:.01em !important;
  text-shadow:0 0 7px rgba(255,255,255,.86) !important;
}

.item-row-price img{
  width:12px !important;
  height:12px !important;
  margin-right:1px !important;
  vertical-align:-2px !important;
}

@media (max-width:360px){
  .item-row-actions{
    width:70px !important;
  }
  .item-row-price{
    font-size:9px !important;
  }
}

/* =========================================================
   ITEM v110 — list-only scroll viewport
   赤ライン内だけをスクロール領域にする。
   上部情報・カテゴリ・見出しは固定、下部ナビも固定。
   上下端は他画面と同様に溶けるようにフェード。
   ========================================================= */

/* Fixed content above the red line. */
#screen-item .item-page-intro,
#screen-item .item-category-tabs,
#screen-item .item-panel-head{
  flex:0 0 auto !important;
}

/* Inventory panel consumes all remaining space above bottom nav. */
#screen-item .item-inventory-panel{
  flex:1 1 auto !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  padding-top:10px !important;
}

/* The material list itself is the only scrollable viewport. */
#screen-item .item-management-list{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-y:contain !important;
  scrollbar-width:none !important;

  /* Give the first/last card room to sit outside the fade when at rest. */
  padding:9px 0 22px !important;

  /* Dissolve cards at the top/bottom viewport edges while scrolling. */
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      #000 15px,
      #000 calc(100% - 24px),
      transparent 100%
    ) !important;
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      #000 15px,
      #000 calc(100% - 24px),
      transparent 100%
    ) !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-size:100% 100% !important;
  mask-size:100% 100% !important;
}

#screen-item .item-management-list::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

/* Keep the panel title exactly above the scrolling boundary. */
#screen-item .item-panel-head{
  margin:0 4px 2px !important;
  padding-bottom:5px !important;
  position:relative !important;
  z-index:2 !important;
}

/* Slight white haze at the two clipping edges; no hard horizontal bar. */
#screen-item .item-inventory-panel{
  position:relative !important;
}

#screen-item .item-inventory-panel::before,
#screen-item .item-inventory-panel::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  height:18px !important;
  z-index:3 !important;
  pointer-events:none !important;
}

#screen-item .item-inventory-panel::before{
  /* build684: redundant top haze removed. The list mask handles top-edge fade. */
  content:none !important;
  display:none !important;
}

#screen-item .item-inventory-panel::after{
  bottom:0 !important;
  height:26px !important;
  background:
    linear-gradient(
      to top,
      rgba(253,250,244,.82) 0%,
      rgba(253,250,244,.38) 42%,
      rgba(253,250,244,0) 100%
    ) !important;
}

/* iPhone SE class: preserve as much scroll height as possible. */
@media (max-height:700px){
  #screen-item .item-page-intro{
    padding-top:5px !important;
    padding-bottom:8px !important;
  }

  #screen-item .item-category-tabs{
    margin-top:7px !important;
    margin-bottom:7px !important;
  }

  #screen-item .item-category-tab{
    height:43px !important;
  }

  #screen-item .item-inventory-panel{
    padding-top:7px !important;
  }

  #screen-item .item-panel-head{
    margin-bottom:0 !important;
    padding-bottom:3px !important;
  }

}

/* =========================================================
   ITEM v111 — 3 category tabs / remove item-type counts
   進化素材・強化素材・その他
   ========================================================= */

.item-category-tabs{
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:7px !important;
}

.item-category-tab{
  min-width:0 !important;
  padding:0 6px !important;
}

.item-category-tab span{
  font-size:10px !important;
  letter-spacing:.08em !important;
  white-space:nowrap !important;
}

/* 種類数表示は廃止 */
.item-category-tab small{
  display:none !important;
}


@media (max-width:360px){
  .item-category-tabs{
    gap:5px !important;
  }
  .item-category-tab span{
    font-size:9.5px !important;
    letter-spacing:.05em !important;
  }
}

/* =========================================================
   ITEM v112 — OTHER items: Noah ticket / spirit flowers
   ========================================================= */

.item-row-other .item-row-icon{
  background:
    radial-gradient(circle at 50% 45%,
      rgba(255,255,255,.70),
      rgba(255,255,255,.24) 62%,
      rgba(255,255,255,.06) 100%) !important;
  overflow:visible !important;
}

.item-row-other .item-row-icon img{
  width:96% !important;
  height:96% !important;
  object-fit:contain !important;
  filter:drop-shadow(0 5px 9px rgba(88,66,36,.13)) !important;
}

.item-row-actions-other{
  justify-content:center !important;
  align-items:center !important;
}

.item-other-tag{
  min-width:62px;
  padding:8px 5px;
  border-top:1px solid rgba(164,132,71,.22);
  border-bottom:1px solid rgba(164,132,71,.22);
  color:#8a6b32;
  font-family:"Noto Serif JP",serif;
  font-size:8px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:.06em;
  text-align:center;
  text-shadow:0 0 7px rgba(255,255,255,.86);
}

.item-row-other.is-zero{
  opacity:.68 !important;
}

/* =========================================================
   ITEM v113 — OTHER holdings-only view
   交換機能・準備中・右側タグを表示せず、所持状況だけを明確にする。
   ========================================================= */

#screen-item .item-row-other{
  grid-template-columns:58px minmax(0,1fr) !important;
  padding-right:14px !important;
}

#screen-item .item-row-other .item-row-main{
  padding-right:4px !important;
}

#screen-item .item-row-other .item-row-desc{
  max-width:100% !important;
}

#screen-item .item-row-count-other{
  margin-top:8px !important;
  padding-top:6px !important;
  border-top:1px solid rgba(166,134,75,.12) !important;
}

#screen-item .item-row-count-other span{
  color:#9b804c !important;
  font-size:7px !important;
  letter-spacing:.16em !important;
}

#screen-item .item-row-count-other strong{
  color:#49351f !important;
  font-size:17px !important;
  font-weight:650 !important;
  text-shadow:0 0 8px rgba(255,255,255,.82) !important;
}

/* v112の交換/クエストタグは廃止 */
#screen-item .item-row-actions-other,
#screen-item .item-other-tag{
  display:none !important;
}

/* 所持0でも完全には薄くしすぎない */
#screen-item .item-row-other.is-zero{
  opacity:.72 !important;
}

@media (max-width:360px){
  #screen-item .item-row-other{
    grid-template-columns:50px minmax(0,1fr) !important;
    padding-right:10px !important;
  }

  #screen-item .item-row-count-other strong{
    font-size:16px !important;
  }
}

/* =========================================================
   ITEM — 記憶の欠片アイコン（旧画像アセットを共用）
   ========================================================= */

#screen-item .item-row img[src$="item_wing.webp"]{
  width:96% !important;
  height:96% !important;
  object-fit:contain !important;
  filter:drop-shadow(0 5px 10px rgba(107,82,35,.14)) !important;
}

/* =========================================================
   ITEM build685 — OTHER typography parity
   その他のアイテム情報を進化素材・強化素材と完全に同じ書体/色へ統一
   ========================================================= */
#screen-item .item-row-other,
#screen-item .item-row-other.is-zero{
  opacity:1 !important;
}
#screen-item .item-row-other .item-row-kicker{
  color:#a1844d !important;
  font:600 6px/1 "Cinzel",serif !important;
  letter-spacing:.22em !important;
  opacity:1 !important;
}
#screen-item .item-row-other .item-row-name{
  margin-top:5px !important;
  color:#3e3126 !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:normal !important;
  opacity:1 !important;
}
#screen-item .item-row-other .item-row-desc{
  margin-top:4px !important;
  color:#827568 !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:7.5px !important;
  font-weight:400 !important;
  line-height:1.42 !important;
  opacity:1 !important;
}
#screen-item .item-row-other .item-row-count,
#screen-item .item-row-other .item-row-count-other{
  color:#756348 !important;
  opacity:1 !important;
}
#screen-item .item-row-other .item-row-count span,
#screen-item .item-row-other .item-row-count-other span{
  color:#756348 !important;
  font:500 7px/1 "Cinzel",serif !important;
  letter-spacing:.10em !important;
  opacity:1 !important;
}
#screen-item .item-row-other .item-row-count strong,
#screen-item .item-row-other .item-row-count-other strong{
  color:#3d2e20 !important;
  font:600 14px/1 "Cinzel","Noto Serif JP",serif !important;
  text-shadow:none !important;
  opacity:1 !important;
}
@media (max-width:360px){
  #screen-item .item-row-other .item-row-name{
    font-size:11px !important;
  }
}


/* =========================================================
   ITEM build1065 — 聖霊花(R)交換所
   ========================================================= */

.item-exchange-open-btn{
  min-width:62px;
  min-height:34px;
  padding:0 10px;
  border:1px solid rgba(164,132,71,.30);
  background:rgba(255,253,247,.66);
  color:#6f5123;
  font-family:"Noto Serif JP",serif;
  font-size:9px;
  font-weight:600;
  letter-spacing:.10em;
}
.item-exchange-open-btn:disabled{
  opacity:.42;
}

.item-exchange-modal{
  position:fixed;
  inset:0;
  z-index:18050;
}
.item-exchange-modal[hidden]{
  display:none !important;
}
.item-exchange-backdrop{
  position:absolute;
  inset:0;
  background:rgba(47,39,31,.38);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.item-exchange-dialog{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(92vw,430px);
  max-height:min(84vh,720px);
  box-sizing:border-box;
  overflow:hidden;
  padding:20px 16px 16px;
  border:1px solid rgba(165,132,72,.32);
  background:
    linear-gradient(180deg,rgba(255,253,248,.985),rgba(248,242,231,.985));
  box-shadow:0 24px 70px rgba(48,38,25,.22);
  color:#47382a;
  font-family:"Noto Serif JP",serif;
}
.item-exchange-close{
  position:absolute;
  right:8px;
  top:7px;
  width:30px;
  height:30px;
  border:0;
  background:transparent;
  color:#806b4e;
  font-size:20px;
}
.item-exchange-kicker{
  display:block;
  color:#9c7d45;
  font:700 7px/1 "Cinzel",serif;
  letter-spacing:.28em;
}
.item-exchange-dialog h2{
  margin:6px 0 13px;
  font-size:19px;
  font-weight:500;
  letter-spacing:.10em;
}
.item-exchange-owned{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:9px 10px;
  border-top:1px solid rgba(168,137,82,.18);
  border-bottom:1px solid rgba(168,137,82,.18);
}
.item-exchange-owned img{
  width:28px;
  height:28px;
  object-fit:contain;
}
.item-exchange-owned span{
  flex:1;
  font-size:10px;
  color:#75644d;
}
.item-exchange-owned strong{
  font:600 17px/1 "Cinzel","Noto Serif JP",serif;
  color:#5d4521;
}
.item-exchange-list{
  max-height:min(58vh,500px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-right:2px;
}
.item-exchange-group-title{
  margin:13px 0 6px;
  color:#98733a;
  font:700 8px/1 "Cinzel","Noto Serif JP",serif;
  letter-spacing:.18em;
}
.item-exchange-group-title:first-child{
  margin-top:0;
}
.item-exchange-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 64px;
  align-items:center;
  gap:9px;
  min-height:58px;
  padding:8px 6px;
  border-top:1px solid rgba(161,132,83,.13);
}
.item-exchange-reward-icon{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.item-exchange-reward-icon img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.item-exchange-reward-icon.is-placeholder{
  color:#b19a78;
  border:1px solid rgba(167,137,86,.20);
}
.item-exchange-copy{
  min-width:0;
}
.item-exchange-copy strong{
  display:block;
  font-size:10px;
  font-weight:600;
  line-height:1.35;
  color:#49392b;
}
.item-exchange-copy span{
  display:block;
  margin-top:3px;
  font-size:8px;
  line-height:1.45;
  color:#867765;
}
.item-exchange-btn{
  height:34px;
  border:1px solid rgba(163,128,67,.34);
  background:rgba(255,255,255,.64);
  color:#6b4d1e;
  font-family:"Noto Serif JP",serif;
  font-size:9px;
  font-weight:600;
}
.item-exchange-btn:disabled{
  opacity:.38;
}
.item-exchange-row.is-disabled{
  opacity:.58;
}
.item-exchange-row.is-disabled .item-exchange-btn{
  font-size:6.5px;
  letter-spacing:.02em;
}
.item-exchange-note{
  margin:10px 0 0;
  color:#968571;
  font-size:7.5px;
  line-height:1.5;
  text-align:center;
}


/* =========================================================
   ITEM build1066 — restore OTHER action column for exchange
   v113 had globally hidden .item-row-actions-other.
   ========================================================= */

#screen-item .item-row-other:has([data-open-flower-exchange]),
#screen-item .item-row-other:has(.item-exchange-open-btn){
  grid-template-columns:58px minmax(0,1fr) 68px !important;
  padding-right:10px !important;
}

#screen-item .item-row-actions-other{
  display:flex !important;
  width:68px !important;
  min-width:68px !important;
  justify-content:center !important;
  align-items:center !important;
}

#screen-item .item-exchange-open-btn{
  display:block !important;
  width:64px !important;
  min-width:64px !important;
  height:36px !important;
  padding:0 6px !important;
  box-sizing:border-box !important;
  visibility:visible !important;
  opacity:1 !important;
}

#screen-item .item-exchange-open-btn:disabled{
  opacity:.42 !important;
}

@media (max-width:360px){
  #screen-item .item-row-other:has([data-open-flower-exchange]),
  #screen-item .item-row-other:has(.item-exchange-open-btn){
    grid-template-columns:50px minmax(0,1fr) 62px !important;
    padding-right:8px !important;
  }

  #screen-item .item-row-actions-other{
    width:62px !important;
    min-width:62px !important;
  }

  #screen-item .item-exchange-open-btn{
    width:58px !important;
    min-width:58px !important;
  }
}


/* =========================================================
   ITEM build1071 — 聖霊花 所持数をカード内へ固定
   交換ボタン追加後に OWNED が枠外へ落ちる問題を修正
   ========================================================= */

#screen-item .item-row-other:has(.item-exchange-open-btn){
  position:relative !important;
  min-height:96px !important;
  height:auto !important;
  padding-bottom:12px !important;
  align-items:center !important;
  overflow:hidden !important;
}

#screen-item .item-row-other:has(.item-exchange-open-btn) .item-row-main{
  position:relative !important;
  min-height:72px !important;
  padding-right:2px !important;
  padding-bottom:22px !important;
  box-sizing:border-box !important;
}

#screen-item .item-row-other:has(.item-exchange-open-btn) .item-row-count-other{
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  margin:0 !important;
  padding:5px 0 0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  border-top:1px solid rgba(166,134,75,.12) !important;
  display:flex !important;
  align-items:baseline !important;
  gap:4px !important;
  white-space:nowrap !important;
}

#screen-item .item-row-other:has(.item-exchange-open-btn) .item-row-actions-other{
  align-self:center !important;
}

@media (max-width:360px){
  #screen-item .item-row-other:has(.item-exchange-open-btn){
    min-height:94px !important;
  }

  #screen-item .item-row-other:has(.item-exchange-open-btn) .item-row-main{
    min-height:70px !important;
    padding-bottom:21px !important;
  }
}