/* ═══════════════════════════════════════════════════════════════
   ITEM LISTS (currency.php, nameplates.php, gallery.php, emblems.php, supply-items.php, mybanner.php, room.php) — it-* scoped.
   Loaded after css/home.css (tokens, shared hm-* bits). One card per item: its picture, its name and what the
   game says about it. <main> carries it-<kind>, which only changes how the picture is laid out.
   ═══════════════════════════════════════════════════════════════ */

.it-top { display: grid; gap: 4px; margin-top: 6px; }
.it-title { margin: 0; font: 400 clamp(2.6rem, 8vw, 4.6rem)/0.9 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; transform: skewX(-6deg); transform-origin: left bottom; text-shadow: 4px 4px 0 var(--red), 7px 7px 0 var(--ink); overflow-wrap: anywhere; }   /* one long word ("Selbstvermarktung") must not widen a phone page */
.it-lead { margin: 16px 0 0 !important; }

/* ── Filters ───────────────────────────────────────────────────── */
.it-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); align-items: end; gap: 12px 14px; margin: -14px 0; padding: 12px 14px; border: 3px solid var(--ink); background: var(--panel); box-shadow: 4px 4px 0 var(--ink); }
.it-filters[hidden], .it-group[hidden], .it-li[hidden], .it-none[hidden] { display: none; }
.it-filters label { display: grid; gap: 4px; margin: 0; min-width: 0; }
.it-filters label > span { color: var(--dim); font: 400 0.72rem/1 var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; }
.it-filters input, .it-filters select { width: 100%; min-width: 0; padding: 7px 10px; border: 2px solid var(--ink); background: var(--bg); color: var(--text); font: inherit; font-size: 0.92rem; }
.it-filters input:focus, .it-filters select:focus { outline: 2px solid var(--yellow); outline-offset: 0; }
.it-end { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.it-reset { padding: 8px 14px; border: 2px solid var(--ink); background: var(--panel-2); color: var(--text); font: 400 0.86rem/1 var(--font-head); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; }
.it-reset:hover { background: var(--yellow); color: var(--ink); }
.it-count { color: var(--dim); font-size: 0.86rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.it-count b { color: var(--text); font: 400 1.15rem/1 var(--font-head); }
.it-none { color: var(--dim); text-align: center; }

/* ── Groups + cards ────────────────────────────────────────────── */
/* content-visibility clips painting at the section's padding box: the padding (taken back by the margin) leaves
   room for the cards' offset shadows on the right and at the bottom. */
.it-group { content-visibility: auto; contain-intrinsic-size: auto 600px; scroll-margin-top: 20px; margin: 0 -8px -8px 0; padding: 0 8px 8px 0; }
.it-face { flex: none; width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 50%; background: var(--panel-2); object-fit: cover; }
.it-secn { flex: none; color: var(--dim); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.it-secn b { color: var(--text); font: 400 1.2rem/1 var(--font-head); }
.it-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px 14px; }
.it-li { min-width: 0; }
.it-card { display: flex; align-items: center; gap: 12px; height: 100%; padding: 10px 12px; border: 3px solid var(--ink); background: var(--panel); box-shadow: 4px 4px 0 var(--line); }
.it-pic { flex: none; display: block; width: 68px; aspect-ratio: 1; }
.it-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.it-pic.is-none { display: none; }
.it-txt { display: grid; gap: 4px; min-width: 0; }
.it-txt h3 { margin: 0; font: 400 1.08rem/1.2 var(--font-head); overflow-wrap: anywhere; }
.it-txt h3 a:hover { color: var(--yellow); }
.it-txt p { color: #c9cdd6; font-size: 0.86rem; line-height: 1.35; overflow-wrap: anywhere; }
.it-txt .it-note { color: var(--dim); font-size: 0.78rem; }   /* how the item is obtained */
a.it-pic[data-full] { cursor: zoom-in; }
.it a.it-pic:focus-visible { outline-offset: -3px; }   /* inside the picture: the card clips what lies outside it */
.it-chips { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 2px !important; }
.it-chips li { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 2px solid var(--ink); background: var(--panel-2); color: var(--yellow); font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.it-chips img { width: 22px; height: 22px; object-fit: contain; }

/* Character Data has no icon of its own: the Battle Style's face stands in. */
.it-currency [data-g='data'] .it-pic img { border: 2px solid var(--ink); border-radius: 50%; background: var(--panel-2); object-fit: cover; }

/* Picture on top: name plates (a wide strip), gallery illustrations, emblems, My Banner backgrounds, My Room. */
.it-nameplate .it-card, .it-gallery .it-card, .it-emblem .it-card, .it-banner .it-card, .it-room .it-card { display: grid; grid-template-rows: auto 1fr; align-items: start; gap: 0; padding: 0; overflow: hidden; }
.it-nameplate .it-txt, .it-gallery .it-txt, .it-emblem .it-txt, .it-banner .it-txt, .it-room .it-txt { padding: 9px 12px 11px; }
.it-nameplate .it-pic { width: 100%; aspect-ratio: 664 / 112; border-bottom: 3px solid var(--ink); background: var(--ink); }
.it-nameplate .it-txt h3 { font-size: 0.98rem; }
.it-gallery .it-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px 16px; }
.it-gallery .it-pic { width: 100%; aspect-ratio: 664 / 374; overflow: hidden; border-bottom: 3px solid var(--ink); background: #000 radial-gradient(rgba(255, 255, 255, 0.07) 1.2px, transparent 1.3px) 0 0 / 12px 12px; cursor: zoom-in; }
.it-gallery .it-pic img { object-fit: cover; transition: transform 0.35s; }
.it-gallery .it-card:hover .it-pic img { transform: scale(1.04); }
.it-gallery .it-card { box-shadow: 5px 5px 0 var(--line); transition: box-shadow 0.18s; }
.it-gallery .it-card:hover { box-shadow: 5px 5px 0 var(--yellow); }
.it-gallery .it-txt p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.it-emblem .it-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.it-emblem .it-pic { width: 100%; aspect-ratio: 672 / 644; border-bottom: 3px solid var(--ink); background: var(--panel-2) url('/assets/Emblems/emblem_backer.webp') center / cover no-repeat; }
.it-emblem .it-pic.is-none { display: block; }   /* art not on the server yet: the empty emblem plate stays */
.it-emblem .it-txt h3 { font-size: 0.98rem; }
.it-emblem .it-txt p { font-size: 0.8rem; }

/* My Banner: backgrounds are pictures (408 x 256); effects and messages are text only. */
.it-banner .it-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px 14px; }
.it-banner .it-pic { width: 100%; aspect-ratio: 408 / 256; overflow: hidden; border-bottom: 3px solid var(--ink); background: var(--ink); }
.it-banner .it-pic img { object-fit: cover; transition: transform 0.35s; }
.it-banner .it-card:hover .it-pic img { transform: scale(1.04); }
.it-banner .it-card { transition: box-shadow 0.18s; }
.it-banner .it-card:hover { box-shadow: 4px 4px 0 var(--yellow); }
.it-banner .it-txt h3 { font-size: 1rem; }
.it-banner .it-txt p:not(.it-note) { font-style: italic; }   /* the quote printed on the banner */
.it-banner [data-g='effect'] .it-txt p, .it-banner [data-g='message'] .it-txt p { font-style: normal; }
.it-banner [data-g='message'] .it-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px 10px; }
.it-banner [data-g='message'] .it-card { box-shadow: none; }
.it-banner [data-g='message'] .it-txt { padding: 8px 12px; }
.it-banner [data-g='message'] .it-txt h3 { font: 400 0.92rem/1.3 var(--font-body); }

/* My Room: the room itself across the row (864 x 340), then its options as square thumbnails (256 x 256). */
.it-room .it-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 14px 12px; }
.it-room .it-pic { width: 100%; aspect-ratio: 1; overflow: hidden; border-bottom: 3px solid var(--ink); background: var(--ink); }
.it-room .it-pic img { object-fit: cover; }
.it-room .it-txt h3 { font-size: 0.98rem; }
.it-room .it-wide { grid-column: 1 / -1; }
.it-room .it-wide .it-pic { aspect-ratio: 864 / 340; }
.it-room .it-wide .it-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.it-room .it-wide .it-txt h3 { font-size: 1.25rem; }
.it-room .it-wide .it-chips { margin: 0 !important; }
.it-room .it-card { transition: box-shadow 0.18s; }
.it-room .it-card:hover { box-shadow: 4px 4px 0 var(--yellow); }

/* ── Viewer (a picture, larger) ────────────────────────────────── */
.it-view { width: min(1180px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; overflow: auto; border: 4px solid var(--ink); background: var(--panel); color: var(--text); box-shadow: 8px 8px 0 var(--yellow); }
.it-view::backdrop { background: rgba(7, 8, 10, 0.86); }
.it-view > img { display: block; width: 100%; height: auto; background: #000; }
.it-view-txt { display: grid; gap: 8px; padding: 14px 18px 18px; }
.it-view-txt h2 { margin: 0; font: 400 clamp(1.3rem, 3vw, 1.8rem)/1.1 var(--font-head); text-transform: uppercase; }
.it-view-txt p { margin: 0; color: #d6d9e0; font-size: 0.95rem; line-height: 1.5; white-space: pre-line; }
/* The close button stays at the top right while a tall picture scrolls: its form is the sticky box (no height of
   its own, the button hangs out of it). */
.it-view > form { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; height: 0; margin: 0; }
.it-close { flex: none; width: 38px; height: 38px; margin: 8px 8px 0 0; border: 3px solid var(--ink); background: var(--yellow); color: var(--ink); font: 400 1.4rem/1 var(--font-head); cursor: pointer; }
/* The game's pictures are smaller than the gallery's: the viewer is sized to them, not stretched across the screen. */
.it-banner .it-view { width: min(840px, calc(100vw - 24px)); }
.it-room .it-view { width: min(888px, calc(100vw - 24px)); }
.it-room .it-view > img { width: auto; min-width: min(100%, 512px); max-width: 100%; margin: 0 auto; background: none; }

@media (prefers-reduced-motion: reduce) { .it-gallery .it-card:hover .it-pic img, .it-banner .it-card:hover .it-pic img { transform: none; } }