/* ============================================================
   art — the painted art: scene layout helpers, card art and faces, page bands, the Council
   panorama, the painted bookcase, sheet headers and textures. Loads after v2.css.
   Every rule here only applies when the art exists (classes set from art/index.json).
   ============================================================ */
:root { --band-h: 210px; }
@media (min-width: 1024px) { :root { --band-h: 280px; } }

/* ---------- scenes: the panel overlaps the stage bottom; keep the feet above it ---------- */
.road2 .scene-root { --safe-bottom: 26px; }
@media (min-width: 1024px) { .road2 .scene-root { --safe-bottom: 74px; } }
.scene-box.panning { transition: left 2.2s cubic-bezier(.45, 0, .25, 1), top 2.2s cubic-bezier(.45, 0, .25, 1); }
.scene-box .arrival > img { object-fit: contain; }

/* ---------- card art ---------- */
.tc-art > .tc-bg { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; filter: brightness(.6) saturate(.85) blur(1.4px); }
.tc-art > .tc-cut { position: absolute; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.tc-art > .tc-cut.bust { top: 5%; left: 50%; width: auto; max-width: none; transform: translateX(calc(-1 * var(--cx, 50%))); }
.tc-art > .tc-cut.whole { inset: 5% 4% 0; width: 92%; height: 95%; object-fit: contain; object-position: 50% 100%; }
.tc-art > .tc-cover { object-fit: cover; }
.tc-item { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, rgba(255, 232, 190, .26), transparent 68%), linear-gradient(#3b2b1d, #1b130c); }
.tc-item img { max-width: 80%; max-height: 88%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6)); }
.has-tex-oak .tc-item { background: radial-gradient(ellipse at 50% 42%, rgba(255, 232, 190, .3), transparent 66%), linear-gradient(rgba(20, 12, 6, .35), rgba(10, 6, 3, .6)), var(--tex-oak) center / 260px; }

/* painted card faces: T04 (light) frames every card but foes, T05 (dark) frames foes */
.tcg2.faced { background: var(--face-light) center / 100% 100% no-repeat; padding: 7.6% 9.2% 12.5%; gap: 4px; }
.tcg2.faced.face-dark { background-image: var(--face-dark); }
.tcg2.faced .tc-name, .tcg2.faced .tc-type { background: color-mix(in srgb, var(--frame) 24%, rgba(252, 243, 220, .9)); box-shadow: inset 0 0 0 1px rgba(120, 90, 40, .25); }
.tcg2.faced .tc-text { background: rgba(252, 245, 226, .78); box-shadow: inset 0 0 0 1px rgba(120, 90, 40, .18); }
.tcg2.faced .tc-art { box-shadow: inset 0 0 0 1px rgba(90, 60, 20, .45), 0 1px 2px rgba(60, 40, 10, .3); }
.tcg2.faced .tc-foot { color: #5b4024; text-shadow: none; padding: 0 2px; margin-bottom: -2px; }
.tcg2.faced.face-dark { color: #f0dccb; }
.tcg2.faced.face-dark .tc-name, .tcg2.faced.face-dark .tc-type { background: rgba(26, 10, 6, .72); color: #f3dfc8; box-shadow: inset 0 0 0 1px rgba(255, 150, 80, .18); }
.tcg2.faced.face-dark .tc-text { background: rgba(20, 8, 5, .66); color: #ecd9c8; box-shadow: inset 0 0 0 1px rgba(255, 150, 80, .12); }
.tcg2.faced.face-dark .tc-stats span { background: rgba(255, 255, 255, .07); }
.tcg2.faced.face-dark .tc-foot { color: rgba(255, 226, 196, .85); }
.tcg2.faced.face-dark .mute { color: rgba(240, 220, 200, .7); }
.tcg2.big.faced { padding: 7.6% 9.2% 12.5%; }

/* card backs: the Red Book's leather */
.has-tex-leather .tcg2.back { background: linear-gradient(rgba(24, 8, 4, .55), rgba(24, 8, 4, .7)), var(--tex-leather) center / 220px; }

/* gear slots with their item */
.slot.pic { grid-template-columns: 44px 1fr; grid-template-areas: "p s" "p b"; align-items: center; column-gap: 10px; cursor: pointer; }
.slot.pic > .slot-art { grid-area: p; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #4a3826, #1d140c); }
.slot.pic > .slot-art img { width: 86%; height: 86%; object-fit: contain; }
.slot.pic > .slot-art.cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.6); }
.slot.pic > span { grid-area: s; } .slot.pic > b { grid-area: b; }

/* ---------- painted header bands behind the page title ---------- */
.main { position: relative; isolation: isolate; }
.page-band { position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--band-h); overflow: hidden; pointer-events: none; }
.page-band img { width: 100%; height: 100%; object-fit: cover; animation: bandIn .9s ease both; }
@keyframes bandIn { from { opacity: 0; } }
.page-band::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 8, 4, .62) 0%, rgba(12, 8, 4, .34) 38%, rgba(12, 8, 4, .08) 62%, transparent 74%),
    linear-gradient(180deg, transparent 46%, color-mix(in srgb, var(--bg) 72%, transparent) 74%, var(--bg) 90%); }
body.has-band .topbar { min-height: calc(var(--band-h) - 40px); color: #fbf3e2; }
body.has-band .topbar h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, .75), 0 1px 2px rgba(0, 0, 0, .6); }
body.has-band .topbar .sub { color: rgba(255, 246, 228, .92); text-shadow: 0 1px 8px rgba(0, 0, 0, .85); }
body.has-band .topbar .iconbtn { background: rgba(20, 14, 10, .45); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (min-width: 1024px) { body.has-band .topbar { padding-top: 34px; } }

/* ---------- sheet header art (the evening check-in: Bag End's parlour) ---------- */
.sheet.has-art { padding-top: 0; }
.sheet-art { position: relative; height: 128px; margin: 0 -18px 4px; overflow: hidden; border-radius: 20px 20px 0 0; }
.sheet-art img { width: 100%; height: 100%; object-fit: cover; }
.sheet-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 6, 3, .15), transparent 45%, color-mix(in srgb, var(--paper) 60%, transparent) 78%, var(--paper)); }
.sheet.has-art .grab { position: absolute; left: 50%; top: 6px; margin: 0; transform: translateX(-50%); z-index: 2; background: rgba(255, 255, 255, .7); }
@media (min-width: 760px) { .sheet-art { height: 150px; margin: 0 -24px 6px; } }

/* ---------- the Council: the painted terrace ---------- */
.pano-wrap { display: grid; gap: 0; }
.pano2.painted { container-type: size; height: clamp(300px, 52vh, 480px); overflow-x: auto; overflow-y: hidden; border-radius: var(--r-lg); scrollbar-width: thin; cursor: grab; background: #c9a466; }
.pano2.painted .pano-track { position: relative; height: 100%; }
.pano2.painted .pano-img { position: absolute; top: 0; height: 100%; width: auto; aspect-ratio: 3 / 2; user-select: none; -webkit-user-drag: none; }
.pano2.painted .pano-img.seam { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ov)); mask-image: linear-gradient(90deg, transparent 0, #000 var(--ov)); }
.pano2.painted .pano-people { position: absolute; inset: 0; padding: 0; display: block; }
.pano2.painted .pp { position: absolute; display: block; width: auto; transform: translate(-50%, -100%); padding: 0; }
.pano2.painted .pp-fig { display: block; height: var(--h); filter: drop-shadow(0 6px 8px rgba(40, 24, 8, .4)) sepia(.06) saturate(1.04); }
.pano2.painted .pp-fig img { height: 100%; width: auto; }
.pano2.painted .pp::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: -1.5%; height: calc(var(--h) * .05); border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 36, 10, .45), transparent); }
.pano2.painted .pp-name { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 4px; white-space: nowrap; display: grid; justify-items: center; color: #fffaf0;
  font-size: 13.5px; text-shadow: 0 1px 6px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .8); }
.pano2.painted .pp-tag { font-size: 11.5px; }
.pano2.painted .pp.left .pp-fig { opacity: .82; filter: grayscale(.35) drop-shadow(0 6px 8px rgba(40, 24, 8, .4)); }
.pano2.painted .pp:hover .pp-fig, .pano2.painted .pp:focus-visible .pp-fig { filter: drop-shadow(0 0 10px rgba(255, 236, 180, .8)) drop-shadow(0 6px 8px rgba(40, 24, 8, .4)); }

/* ---------- the Archives: books on the painted shelves ---------- */
.bookcase.painted { display: block; padding: 0; aspect-ratio: var(--ar-d); background: #2a1a10; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8); }
.bookcase.painted .bc-in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: 100% 100%; }
@media (max-width: 720px) {
  .bookcase.painted { aspect-ratio: var(--ar-p); }
  .bookcase.painted .bc-in { width: calc(100% / var(--pw)); height: calc(100% / var(--ph)); left: calc(-100% * var(--px) / var(--pw)); top: calc(-100% * var(--py) / var(--ph)); }
}
.bc-row, .bc-alcove { position: absolute; display: flex; align-items: flex-end; gap: 1px; }
.bc-row.end { justify-content: flex-end; }
.bc-alcove { justify-content: center; gap: 3%; padding-bottom: 0; }
.bookcase.painted .spine { height: var(--h); width: auto; aspect-ratio: var(--ar); min-width: 0; max-width: none; flex: none; border-radius: 2px 2px 0 0;
  box-shadow: 1px 0 2px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); }
.bookcase.painted .spine .sp-t { font-size: clamp(6px, .75vw, 10px); }
.bc-alcove .spine { box-shadow: 0 0 12px rgba(255, 214, 130, .45), 1px 0 2px rgba(0, 0, 0, .4); }

/* ---------- textures (subtle) ---------- */
.has-tex-parchment .redbook2 .compose, .has-tex-parchment .redbook2 .book, .has-tex-parchment .month {
  background-image: linear-gradient(color-mix(in srgb, var(--paper) 78%, transparent), color-mix(in srgb, var(--paper) 78%, transparent)), var(--tex-parchment); background-size: auto, 420px; }
[data-mode="dark"].has-tex-parchment .redbook2 .compose, [data-mode="dark"].has-tex-parchment .redbook2 .book, [data-mode="dark"].has-tex-parchment .month { background-image: none; }
.has-tex-parchment .intro .pg { background: linear-gradient(rgba(239, 226, 196, .5), rgba(239, 226, 196, .5)), var(--tex-parchment) center / 300px; }
.has-tex-leather .intro .cover { background: linear-gradient(135deg, rgba(120, 30, 18, .35), rgba(40, 8, 4, .55) 70%), var(--tex-leather) center / 240px; }
.has-tex-oak .bookcase:not(.painted) { background-image: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 140, .16), transparent 60%), linear-gradient(rgba(30, 18, 10, .35), rgba(30, 18, 10, .5)), var(--tex-oak); background-size: auto, auto, 300px; }