/* User-provided artwork stays intact; the sheets are framed in CSS. */
:root {
  --bg:#0d1c27; --bg2:#142833; --card:#1a3540; --panel:#142833;
  --line:#3a555b; --ink:#edf2ec; --ink2:#b7c8c5; --dim:#96aeac;
  --gold:#e0bf76; --green:#64b89c;
}

body { background:radial-gradient(ellipse at 50% 0,#29414f,#09141d 75%); }
.app { max-width:1000px; margin:auto; border-inline:1px solid #b7d9cc1a; box-shadow:0 0 80px #0005; }
.topbar { background:linear-gradient(180deg,#19333e,#11252f); border-color:#74998b45; }
.topbar .stat:first-child { position:relative; padding-left:34px; }
.topbar__coin { position:absolute; left:0; top:0; width:30px; height:30px; }
.tab { background:#1d3842; border-color:#466461; transition:background .2s,border-color .2s; }
.tab.is-on { background:#2c514f; border-color:#c8ac6d; }
.btn { background:#203e48; }
.btn--go { background:linear-gradient(180deg,#28796b,#19564f); border-color:#8ebd9c; }
button:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

#pane-squad, #pane-daily, #pane-roster {
  background:linear-gradient(180deg,#0b1e2b0d,#0c222cd6 56%,#0c222cf2),url('../assets/art/hall.webp') center top / cover;
}
#pane-stages {
  background:linear-gradient(180deg,#102b3c33,#10232ed9 40%,#10232ef0),url('../assets/art/map.webp') center top / cover;
}
.scene-title { flex:0 0 auto; min-height:158px; padding:24px 22px 18px; background:linear-gradient(90deg,#0b202bba,transparent 90%); }
.scene-title > span { font-size:10px; letter-spacing:3px; color:#dfcc9b; }
.scene-title h1 { margin:8px 0 5px; font:600 30px/1.3 'Songti SC','STSong',serif; letter-spacing:5px; color:#f1ecd9; text-shadow:0 2px 12px #10202e; }
.scene-title p { margin:0; font-size:12px; color:#c6d9d9; }
.power { background:#102d37c9; border-block:1px solid #a7c8b52b; }
.slot { background:#15313caf; border-color:#a4c9b55c; }
.slot--front::after, .slot--back::after { z-index:2; padding:1px 5px; bottom:20px; border-radius:3px; background:#10232edb; color:#e6d8b5; }
.hero { aspect-ratio:3/4; border-color:#c8ad70; box-shadow:0 3px 10px #03121d55; border-radius:9px; }
.hero__name { padding:5px 2px 3px; color:#fff6df; background:linear-gradient(180deg,transparent,#0b2334ef); }
.hero__lv { color:#f7ead1; }
.bench { padding-top:8px; }
.bench__sub { color:#a8bcbd; }
.bench__list { grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); }
.roster { grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); }
.detail { background:#122d38ee; }
.stage { background:#102a36e8; border-color:#a0bca14d; }
.stage--now { border-color:var(--gold); background:#1a3b42ed; }
.diff { background:#102630; }
.daily__card { background:#132f3be8; border-color:#719b8c66; }
.daily__head { align-items:center; }
.daily__head .art-icon { width:38px; height:38px; }
.ladder__c, .drop { background:#102a36; }
.result__card { background:linear-gradient(160deg,#254750,#112832); border-color:#b7a57980; }
.picker { background:#0b1c28e8; }
.picker__list { background:#15313d; }
.picker__row { align-items:center; }
.picker__row .art-icon { width:38px; height:38px; }

.portrait { position:relative; display:block; width:100%; height:100%; overflow:hidden; }
.hero > .portrait, .detail__art > .portrait, .fighter__art > .portrait { position:absolute; inset:0; }
.portrait > picture { display:contents; }   /* AVIF 的 <picture> 包装不产生盒子，里面的 img 仍按原来的规则定位 */
.portrait > img, .portrait > picture > img { display:block; width:100%; height:100%; object-fit:cover; }
.portrait--sheet > img, .portrait--sheet > picture > img { position:absolute; width:600%; height:300%; max-width:none; object-fit:fill; }
.detail__art { position:relative; }
.fighter__art { position:relative; border-color:#bcaa7d; }
.fighter__art > .portrait { height:100%; }
.fighter__bar { position:absolute; left:0; right:0; bottom:0; margin:0; height:6px; }
.fighter { max-width:128px; }
.fighter__nm { padding:3px 1px; border-radius:0 0 5px 5px; background:#102630ef; font-size:11px; color:#f0f5e8; text-shadow:0 1px 4px #071723; }
.field {
  background:linear-gradient(180deg,#071b2b35,#0c21321a 55%,#0c21326b),url('../assets/art/courtyard.webp') center center / cover;
  grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);
}
.field--realm { background-image:linear-gradient(180deg,#071b2b35,#0c21321a 55%,#0c21326b),url('../assets/art/realm.webp'); }
.comblog { border:1px solid #819e9666; border-radius:8px; background:#0a1f2ef5; color:#edf2ec; }
.battlebar { background:#122b36; }

.art-icon {
  display:inline-block; width:36px; height:36px; flex:0 0 auto;
  background-image:url('../assets/art/items.webp'); background-size:300% 200%; background-repeat:no-repeat;
  border-radius:8px;
}
.art-icon--coin { background-position:0 0; }
.art-icon--crystal { background-position:50% 0; }
.art-icon--weapon { background-position:100% 0; }
.art-icon--armor { background-position:0 100%; }
.art-icon--amulet { background-position:50% 100%; }
.art-icon--potion { background-position:100% 100%; }
.art-icon--calendar, .art-icon--tower { background-image:url('../assets/art/ui.webp'); background-size:330% 200%; }
.art-icon--calendar { background-position:29% 100%; }
.art-icon--tower { background-position:83% 100%; }
.gear-slot { position:relative; padding-left:50px; min-height:52px; }
.gear-slot > .art-icon { position:absolute; left:6px; top:50%; transform:translateY(-50%); }
.detail__sk > .art-icon { float:right; width:48px; height:48px; margin-left:8px; }

@media (max-width:600px) {
  .topbar { flex-wrap:wrap; gap:10px 18px; padding:10px 12px 8px; }
  .topbar__right { width:100%; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
  .tab { padding:7px 8px; }
  .scene-title { min-height:132px; padding:19px 14px 14px; }
  .scene-title h1 { font-size:26px; }
  .roster { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .bench__list { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .fighter { max-width:106px; }
  .field { padding-top:16px; }
  .task { grid-template-columns:minmax(0,1fr) auto auto auto; gap:6px; }
  .task__r { white-space:normal; max-width:75px; }
}

/* ── AVIF 增强：支持 image-set() 类型声明的浏览器改用体积更小的 AVIF（候选里仍带 WebP）；
      其余浏览器沿用上面的 WebP 写法，不受影响。 ── */
@supports (background-image: image-set(url('../assets/art/hall.avif') type("image/avif"))) {
  #pane-squad, #pane-daily, #pane-roster { background:linear-gradient(180deg,#0b1e2b0d,#0c222cd6 56%,#0c222cf2),image-set(url('../assets/art/hall.avif') type("image/avif"), url('../assets/art/hall.webp') type("image/webp")) center top / cover; }
  #pane-stages { background:linear-gradient(180deg,#102b3c33,#10232ed9 40%,#10232ef0),image-set(url('../assets/art/map.avif') type("image/avif"), url('../assets/art/map.webp') type("image/webp")) center top / cover; }
  .field { background:linear-gradient(180deg,#071b2b35,#0c21321a 55%,#0c21326b),image-set(url('../assets/art/courtyard.avif') type("image/avif"), url('../assets/art/courtyard.webp') type("image/webp")) center center / cover; }
  .field--realm { background-image:linear-gradient(180deg,#071b2b35,#0c21321a 55%,#0c21326b),image-set(url('../assets/art/realm.avif') type("image/avif"), url('../assets/art/realm.webp') type("image/webp")); }
  .art-icon { background-image:image-set(url('../assets/art/items.avif') type("image/avif"), url('../assets/art/items.webp') type("image/webp")); }
  .art-icon--calendar, .art-icon--tower { background-image:image-set(url('../assets/art/ui.avif') type("image/avif"), url('../assets/art/ui.webp') type("image/webp")); }
}