/* =========================================================
   Age of Doubloons - sys-items.css
   持ち物・図鑑・効果中の表示（items.js）の見た目。共通部品は css/sys.css。
   ========================================================= */

/* ---------------- 持ち物 ---------------- */
.it-equip{margin-bottom:4px}
.it-equip .sys-card{display:flex;flex-direction:column;min-height:92px}
.it-slot{font-size:max(var(--fs-min),calc(9.5px*var(--fs)));letter-spacing:.14em;color:#b39a58;font-weight:700;margin-bottom:4px}
.it-none{flex:1;display:flex;align-items:center;color:#6d6450}
.it-off{margin-top:auto;align-self:flex-start;padding:3px 9px;font-size:max(var(--fs-min),calc(10.5px*var(--fs)))}
.it-equip .sys-card .ds{margin-bottom:6px}

.it-active{
  display:flex;flex-direction:column;gap:3px;font-size:max(var(--fs-min),calc(11.5px*var(--fs)));color:#d8cdae;line-height:1.7;
  background:rgba(0,0,0,.25);border:1px solid rgba(143,208,255,.18);border-radius:8px;padding:7px 11px;
}
.it-active b{color:#8fd0ff;font-variant-numeric:tabular-nums}

.it-filter{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.it-filter .sys-btn{padding:4px 9px;font-size:max(var(--fs-min),calc(11px*var(--fs)))}
.it-filter small{opacity:.7;font-weight:600;margin-left:2px}
.it-type{font-size:max(var(--fs-min),calc(10px*var(--fs)));letter-spacing:.16em;color:#9a8656;margin:10px 0 2px;font-weight:700}

.it-row{align-items:flex-start}
.it-row.fresh{background:linear-gradient(90deg,rgba(255,209,102,.10),transparent 70%)}
.it-row.fresh .it-nm::after{content:'NEW';margin-left:6px;font-size:max(var(--fs-min),calc(9px*var(--fs)));color:#ffd166;letter-spacing:.1em}
.it-ic{
  flex:none;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;background:radial-gradient(circle at 40% 35%,#4a3a22,#1a130a);
  border:1px solid rgba(232,194,92,.28);overflow:hidden;line-height:1;
}
.it-ic .sys-img{width:100%;height:100%;object-fit:contain}
.it-nm{font-weight:800;color:#f1e4c0;font-size:max(var(--fs-min),calc(12.5px*var(--fs)))}
.it-nm .sys-tag{margin-left:4px;vertical-align:1px}
.it-n{margin-left:6px;color:#ffe08a;font-variant-numeric:tabular-nums;font-size:max(var(--fs-min),calc(11.5px*var(--fs)))}
.it-ds{color:#c4b795;font-size:max(var(--fs-min),calc(10.5px*var(--fs)));line-height:1.6;margin-top:2px}
.it-btns{flex:none;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;max-width:180px}

/* ---------------- 図鑑 ---------------- */
.dex-head{
  background:rgba(0,0,0,.28);border:1px solid rgba(232,194,92,.2);border-radius:9px;
  padding:9px 13px;margin-bottom:10px;
}
.dex-set{
  margin:10px 0;padding:8px 10px 10px;border-radius:10px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06);
}
.dex-set.done{border-color:rgba(255,209,102,.55);box-shadow:0 0 16px rgba(255,205,90,.14) inset}
.dex-sh{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:7px;font-size:max(var(--fs-min),calc(12px*var(--fs)))}
.dex-sh b{color:#ffe9a8;font-family:"Hiragino Mincho ProN",serif;font-size:max(var(--fs-min),calc(13px*var(--fs)));letter-spacing:.04em}
.dex-cnt{color:#cdbf98;font-variant-numeric:tabular-nums;font-weight:700}
.dex-bonus{color:#b7a987;font-size:max(var(--fs-min),calc(10.5px*var(--fs)));flex:1 1 220px}
.dex-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}

.dex-card{
  position:relative;text-align:center;padding:7px 5px 6px;border-radius:9px;
  background:radial-gradient(circle at 50% 30%,#3a2c18,#15100a);
  border:1px solid rgba(255,255,255,.12);cursor:default;
}
.dex-card[data-act]{cursor:pointer}
.dex-card[data-act]:hover{border-color:#ffe9a8;transform:translateY(-1px)}
.dex-card.framed{background-size:100% 100%;background-repeat:no-repeat;border-color:transparent;
  /* 枠の絵の下の飾りに値段が重ならないよう、下と左右をあける（10/1 名前が2行の札で「1,800枚」が飾りに重なった） */
  padding:8px 6px 20px}
.dex-card.r1{border-color:rgba(214,190,150,.45)}
.dex-card.r2{border-color:rgba(230,150,90,.55)}
.dex-card.r3{border-color:rgba(210,225,255,.6)}
.dex-card.r4{border-color:rgba(255,214,90,.7);box-shadow:0 0 10px rgba(255,214,90,.2)}
.dex-card.r5{border-color:rgba(255,160,255,.75);box-shadow:0 0 14px rgba(255,160,255,.28)}
.dex-card.unk,.dex-card.seen{background:rgba(0,0,0,.35);border-style:dashed;border-color:rgba(255,255,255,.12)}
.dex-ic{height:44px;display:flex;align-items:center;justify-content:center;line-height:1}
.dex-ic .sys-img{width:40px;height:40px;object-fit:contain}
/* 未発見はシルエット（黒く塗る）、目撃は薄い影 */
/* まだ見つけていない宝物の影。真っ黒（brightness(0)）だと暗い地に溶けて「無地」に見えた
   （2026-09-25 要望箱「図鑑のセットの下の小さいアイコンが無地になってる」）。
   色は伏せたまま、形と彫りが分かる暗い影にし、縁に薄い金を差す */
.dex-ic.sil{filter:grayscale(1) brightness(.42) contrast(1.15) drop-shadow(0 0 1px rgba(232,194,92,.55));opacity:.9}
.dex-card.seen .dex-ic.sil{filter:grayscale(1) brightness(.5) contrast(1.15) drop-shadow(0 0 3px rgba(143,208,255,.7));opacity:.95}
.dex-nm{font-size:max(var(--fs-min),calc(10.5px*var(--fs)));font-weight:800;color:#f1e4c0;margin-top:3px;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dex-card.unk .dex-nm{color:#6d6450}
.dex-card.seen .dex-nm{color:#9fc3dc}
.dex-ds{font-size:max(var(--fs-min),calc(9.5px*var(--fs)));color:#c4b795;margin-top:2px}
.dex-n{position:absolute;top:3px;right:5px;font-style:normal;font-size:max(var(--fs-min),calc(9.5px*var(--fs)));color:#ffe08a;font-weight:800}

.dex-detail{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.dex-detail > div:last-child{flex:1 1 200px;min-width:0}
.dex-detail p{margin:0 0 8px}
.dex-big{
  flex:none;width:112px;height:112px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:radial-gradient(circle at 50% 40%,#4a3a22,#120d07);
  border:1px solid rgba(232,194,92,.4);line-height:1;
}
.dex-big .sys-img{width:96px;height:96px;object-fit:contain}
.dex-detail .sys-kv{min-width:0}

/* ---------------- 効果中（画面左、所持メダルの下） ---------------- */
.sys-items-hud{
  position:absolute;left:16px;top:96px;display:none;flex-wrap:wrap;gap:4px;
  max-width:260px;pointer-events:none;z-index:5;
}
.sys-items-hud.on{display:flex}
.sys-items-hud .chip{
  display:inline-flex;align-items:center;gap:3px;padding:2px 7px 2px 5px;border-radius:11px;
  font-size:max(var(--fs-min),calc(13px*var(--fs)));line-height:18px;color:#ffeec0;
  background:linear-gradient(180deg,rgba(58,40,20,.9),rgba(20,14,7,.92));
  border:1px solid rgba(232,194,92,.45);box-shadow:0 3px 10px rgba(0,0,0,.45);
}
.sys-items-hud .chip b{font-size:max(var(--fs-min),calc(10.5px*var(--fs)));font-weight:800;color:#8fd0ff;font-variant-numeric:tabular-nums}
.sys-items-hud .chip{position:relative;overflow:hidden;padding-bottom:4px}
.sys-items-hud .chip .cn{font-size:max(var(--fs-min),calc(10.5px*var(--fs)));font-weight:700;color:#f3e2b4;white-space:nowrap}
.sys-items-hud .chip .cbar{position:absolute;left:6px;right:6px;bottom:2px;height:2px;border-radius:2px;background:rgba(255,255,255,.12)}
.sys-items-hud .chip .cbar i{display:block;height:100%;border-radius:2px;background:#8fd0ff}

@media (max-width:820px){
  .it-btns{max-width:120px}
  .dex-row{grid-template-columns:repeat(auto-fill,minmax(82px,1fr))}
  /* 縦並びの時は横いっぱいに伸ばす。align-items:flex-start のままだと、WebKit（iPhone）では文の欄が
     文の長さぶん横に広がって窓の外へ出た（Chrome は抑えるので気づかなかった。2026-09-25 オーナー「切れてるところが多すぎ」） */
  .dex-detail{flex-direction:column;align-items:stretch}
  .dex-detail > div:last-child{flex:0 0 auto;width:100%}
  .dex-detail > .dex-big{align-self:flex-start}
  .sys-items-hud{top:calc(84px + env(safe-area-inset-top,0px));max-width:200px}
}

/* ---------------- 宝箱の開封（要望11。items.js openTick。2026-09-17）---------------- */
.tr-open{position:fixed;inset:0;z-index:90;transition:opacity .25s;--rar:rgb(210,225,255)}
.tr-open.out{opacity:0}
.tr-open-dim{position:absolute;inset:0;background:rgba(0,0,0,.58);animation:trOpFade .3s ease-out}
.tr-open-a{position:absolute;inset:0;transition:opacity .35s}
.tr-open.step2 .tr-open-a{opacity:0}
.tr-open-rays{position:absolute;left:50%;top:42%;width:560px;height:560px;transform:translate(-50%,-50%);border-radius:50%;
  background:repeating-conic-gradient(rgba(255,214,120,.30) 0 8deg,transparent 8deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);animation:trRays 6s linear infinite}
.tr-open-chest{position:absolute;left:50%;top:52%;width:170px;transform:translate(-50%,-50%);animation:trChest .5s cubic-bezier(.2,1.6,.4,1)}
.tr-open-chest.e{font-size:120px;width:auto}
.tr-open-item{position:absolute;left:50%;top:32%;transform:translate(-50%,-50%);filter:drop-shadow(0 0 22px rgba(255,220,130,.95));animation:trRise .9s .25s both ease-out}
.tr-open-stars{position:absolute;left:0;right:0;top:18%;text-align:center;font:900 30px sans-serif;color:var(--rar);text-shadow:0 0 10px #000;animation:trRise .6s .5s both ease-out}
.tr-open-txt{position:absolute;left:0;right:0;top:66%;text-align:center;font:900 30px serif;color:#fff0b8;text-shadow:0 0 14px rgba(255,190,80,.9),0 2px 0 #000;animation:trRise .5s .35s both ease-out}
.tr-open-card{position:absolute;left:50%;top:50%;width:min(380px,calc(100vw - 28px));box-sizing:border-box;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;
  padding:16px;border-radius:14px;background:linear-gradient(180deg,#3b2a12,#1a1208);border:2px solid var(--rar);
  box-shadow:0 0 30px color-mix(in srgb,var(--rar) 45%,transparent),0 10px 30px #000;transition:opacity .3s,transform .3s}
.tr-open.step2 .tr-open-card{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.tr-open-card .top{display:flex;gap:14px;align-items:center}
.tr-open-card .ic{flex:0 0 104px;height:104px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:radial-gradient(circle,color-mix(in srgb,var(--rar) 45%,transparent),transparent 70%)}
.tr-open-card .new,.tr-open-card .dup{display:inline-block;font:900 12px sans-serif;border-radius:8px;padding:2px 7px;margin-bottom:4px}
.tr-open-card .new{background:#ff6b4a;color:#fff}
.tr-open-card .dup{background:rgba(200,240,255,.18);color:#c8f0ff;border:1px solid rgba(200,240,255,.5)}
.tr-open-card .nm{font:900 24px serif;color:#fff3d0}
.tr-open-card .rar{color:var(--rar);font-weight:900;font-size:16px}
.tr-open-card .ds{margin:12px 0 10px;font-size:15px;line-height:1.6;color:#e9dcbc;font-weight:600}
.tr-open-card .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:14px;border-top:1px solid rgba(232,194,92,.3);padding-top:10px}
.tr-open-card .kv span{color:#b9a47a;white-space:nowrap}
.tr-open-card .kv b{text-align:right;color:#fff}
.tr-open-card .kv b.gold{color:#ffe08a}
.tr-open-card .set{margin-top:10px;padding:8px 10px;border-radius:10px;background:rgba(232,194,92,.08);border:1px solid rgba(232,194,92,.3);font-size:13px}
.tr-open-card .set small{display:block;color:#b9a47a;margin-top:2px}
/* セットの印は、その宝物の絵を出す（2026-09-24 オーナー「セットのアイコンが全部無地なのはなんで？」）。
   まだ手に入れていない物は影絵にして、あと何が足りないか分かるようにする */
.tr-open-card .dots{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tr-open-card .dots i{width:34px;height:34px;border-radius:7px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:18px;
  background:#2a2014 center/86% 86% no-repeat;border:1px solid #6d5a38}
.tr-open-card .dots i:not(.on){filter:brightness(.3) grayscale(.8);opacity:.9}
.tr-open-card .dots i.on{background-color:color-mix(in srgb,var(--rar) 30%,#3b2a12);border-color:var(--rar);
  box-shadow:0 0 6px color-mix(in srgb,var(--rar) 55%,transparent)}
.tr-open-card .btns{display:flex;gap:10px;margin-top:14px}
.tr-open-card .btns .sys-btn{flex:1;min-height:44px}
@keyframes trOpFade{from{opacity:0}to{opacity:1}}
@keyframes trRays{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes trChest{from{transform:translate(-50%,-50%) scale(.3)}to{transform:translate(-50%,-50%) scale(1)}}
@keyframes trRise{from{opacity:0;margin-top:60px}to{opacity:1;margin-top:0}}

/* 新しく入った物（タブの数字の中身。2026-09-18） */
.it-newbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px;padding:8px 10px;border-radius:9px;
  background:rgba(210,69,44,.12);border:1px solid rgba(240,110,90,.55)}
.it-newbar b{width:100%;color:#ffb8a4;font-size:max(var(--fs-min),calc(12px*var(--fs)))}
.it-newchip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:12px;cursor:pointer;font:inherit;
  font-size:max(var(--fs-min),calc(12px*var(--fs)));color:#ffeec0;background:rgba(40,28,14,.9);border:1px solid rgba(232,194,92,.5)}
.it-row.flash{animation:itflash 1.4s ease-out}
@keyframes itflash{0%{box-shadow:0 0 0 2px #ffd166 inset;background:rgba(255,209,102,.25)}100%{box-shadow:none}}

/* 見本 ?eqslot（2026-09-27 要望141）：装備の枠を 1 行ずつの小さな帯に。押すと選ぶ窓 */
.it-eqhint{font-size:max(var(--fs-min),calc(11px*var(--fs)));color:#b9a57c;font-weight:400;margin-left:6px}
.it-eqrows{display:flex;flex-direction:column;gap:5px;margin-bottom:6px}
.it-eqrow{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:6px 10px;border-radius:9px;text-align:left;
  background:rgba(255,235,190,.05);border:1px solid rgba(232,194,92,.28);color:#e9dcc0;cursor:pointer}
.it-eqrow.on{border-color:rgba(232,194,92,.7);background:rgba(255,220,140,.09)}
.it-eqsl{flex:0 0 auto;min-width:3.6em;color:#e8c25c;font-weight:800;font-size:max(var(--fs-min),calc(12px*var(--fs)))}
.it-eqic{flex:0 0 auto;display:flex;align-items:center}
.it-eqnm{flex:1 1 auto;min-width:0;font-weight:700;font-size:max(var(--fs-min),calc(13px*var(--fs)));overflow-wrap:anywhere}
.it-eqnm.none{color:#9a8c70;font-weight:400}
.it-eqgo{flex:0 0 auto;color:#e8c25c;font-size:20px;line-height:1}
.it-eqpick.on{border-color:rgba(232,194,92,.7)}
.it-eqnm.none{white-space:nowrap}
/* 見本 ?tidy4（2026-09-27 要望112 の4）：空の装備の枠を 1 行に */
.it-eqempty{margin:-2px 0 8px;padding:6px 10px;border-radius:8px;background:rgba(255,235,190,.04);border:1px solid rgba(232,194,92,.2);color:#b9a57c;font-size:max(var(--fs-min),calc(12px*var(--fs)));overflow-wrap:anywhere}
/* 見本 ?ux9（2026-09-27）：高い品を売った後 5 秒の「取り消す」。窓（60）より手前、下のバーの上 */
.sell-undo{position:fixed;left:50%;bottom:calc(120px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:62;
  display:flex;align-items:center;gap:10px;width:min(380px,calc(100vw - 32px));box-sizing:border-box;padding:8px 10px 8px 14px;border-radius:12px;
  background:#160f07;border:1px solid rgba(232,194,92,.6);box-shadow:0 6px 18px rgba(0,0,0,.55);color:#f1e3c0}
.sell-undo .su-t{flex:1 1 auto;min-width:0;font-size:max(var(--fs-min,12px),calc(12px*var(--fs,1)));overflow-wrap:anywhere}
.sell-undo .su-b{flex:0 0 auto;min-height:40px;padding:6px 12px;font-weight:800}
.sell-undo .su-n{opacity:.75;margin-left:4px}