/* Thematic item catalogue with sourced, uncropped object imagery. */
.items-view main { padding-top:28px; }
.items-view .page-intro { margin-bottom:22px; }
.items-overview { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:18px 24px; background:#eaf0e4; border:1px solid #dfe7d8; border-radius:10px; margin-bottom:18px; }
.items-kicker { display:block; color:#647b59; font-size:10px; letter-spacing:1.5px; margin-bottom:10px; }
.workspace .items-overview h2 { font-size:18px; line-height:1.5; letter-spacing:-.3px; font-weight:600; margin:0; }
.items-overview p { color:#60745a; font-size:12px; line-height:1.8; margin:0; max-width:420px; }
.items-stats { display:flex; gap:28px; margin:0; flex-shrink:0; }
.items-stats > div { display:flex; flex-direction:column-reverse; gap:5px; }
.items-stats dt { color:#687d61; font-size:11px; }
.items-stats dd { margin:0; font-size:30px; font-weight:600; letter-spacing:-1px; font-variant-numeric:tabular-nums; color:#34553e; }
.items-filter-panel { border:1px solid var(--line); background:#fff; border-radius:10px; }
.items-filter-header { display:flex; justify-content:space-between; align-items:center; padding:7px 20px 4px; gap:16px; }
.items-filter-header .button { min-height:32px; }
.workspace .items-filter-header h2 { font-size:12px; font-weight:600; margin:0; color:#617258; }
.item-category-filters { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; padding:0 18px 18px; }
.workspace .item-category-filters button { display:flex; align-items:center; gap:7px; color:#62725d; background:#f7f9f4; border:1px solid transparent; border-radius:5px; padding:8px 10px; font-size:12px; text-align:left; min-height:36px; }
.item-category-filters svg { width:14px; height:14px; color:#839978; }
.item-category-filters small { margin-left:auto; font-size:10px; color:#72836a; font-variant-numeric:tabular-nums; }
.workspace .item-category-filters button:hover { background:#ecf3e5; }
.workspace .item-category-filters button[aria-pressed="true"] { background:#e5eedb; color:#335638; border-color:#bed0ab; font-weight:600; }
.item-category-filters [aria-pressed="true"] svg { color:#507344; }
.items-controls { border-top:1px solid var(--line); padding:9px 18px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.items-controls .select-field { gap:6px; }
.items-controls .select-field label { font-size:10px; }
.workspace .items-controls select { font-size:11px; color:#425b3b; border:0; background:transparent; min-height:32px; padding:0 18px 0 0; max-width:180px; }
.items-layout-controls { margin-left:auto; display:flex; align-items:center; gap:5px; }
.items-layout-controls .icon-button { width:32px; height:32px; border-color:transparent; color:#76846b; }
.items-layout-controls .icon-button svg { width:16px; height:16px; }
.items-layout-controls [aria-pressed="true"] { color:#335c39; background:#edf3e5; border-color:#dbe5d0; }
.items-scope-note { font-size:11px; line-height:1.85; color:#6a785f; margin:12px 2px 18px; max-width:950px; }
.items-results-heading { margin-bottom:16px; }
#itemResultCount { font-size:12px; color:#6a7d5d; }
.item-filter-summary { font-size:12px; color:#637a55; margin:0 0 16px; }
.item-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.item-card { min-width:0; background:#fff; border:1px solid var(--line); border-radius:8px; padding:17px 18px 0; display:flex; flex-direction:column; transition:border-color .15s,box-shadow .15s; }
.item-card:hover { border-color:#aabd9c; box-shadow:0 4px 18px #354c2408; }
.workspace .item-card-image { position:relative; display:block; width:calc(100% + 36px); margin:-17px -18px 16px; padding:0; border:0; border-radius:7px 7px 0 0; overflow:hidden; text-align:left; background:#eef2e9; }
.item-image-surface { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:16/9; background:var(--item-image-bg,#edf1e8); overflow:hidden; }
.item-image-surface img { display:block; width:100%; height:100%; object-fit:contain; }
.item-image-surface img[hidden], .item-image-unavailable[hidden] { display:none; }
.item-image-label { display:inline-block; width:max-content; padding:4px 7px; border-radius:4px; color:#f8faf5; background:#163922db; font-size:10px; line-height:1.4; font-weight:500; }
.item-card-image > .item-image-label { position:absolute; top:10px; left:10px; pointer-events:none; }
.item-image-label.is-community { background:#67512fe6; color:#fff9ec; }
.item-image-hint { display:block; padding:7px 11px; font-size:10px; line-height:1.6; color:#5e7052; background:#f3f6ed; }
.item-image-unavailable { padding:24px; font-size:13px; color:#65765b; }
.item-image-surface.has-image-error { background:#edf1e8; min-height:140px; }
.item-card-image:hover img { filter:brightness(1.06); }
.item-card-image:focus-visible { outline:3px solid #527b3c; outline-offset:3px; }
.item-card-top { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:16px; }
.item-category-label { display:inline-flex; align-items:center; gap:5px; font-size:10px; color:#7a896b; }
.item-category-label svg { width:13px; height:13px; }
.item-status { font-size:10px; line-height:1.5; color:#7b826f; background:#f3f5ef; border-radius:4px; padding:3px 6px; white-space:nowrap; }
.item-status.has-dossier { color:#48723c; background:#eaf3e1; }
.item-card-content { display:flex; gap:12px; align-items:flex-start; }
.item-index { padding-top:4px; color:#a8b29d; font-size:11px; font-variant-numeric:tabular-nums; letter-spacing:.5px; }
.workspace .item-card h3 { font-size:17px; line-height:1.5; margin:0 0 3px; font-weight:600; }
.workspace .item-card h3 button { display:block; text-align:left; font:inherit; color:#2f4934; background:none; border:0; padding:0; line-height:inherit; }
.item-card h3 button::after { content:''; }
.item-english { font-size:11px; line-height:1.6; color:#86917b; overflow-wrap:anywhere; margin:0; }
.item-mechanic { font-size:12px; line-height:1.85; color:#63725b; margin:16px 0; flex:1; }
.item-card-tags { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-bottom:18px; font-size:10px; color:#78886c; }
.item-card-tags > span { padding:2px 6px; border:1px solid #e5eadd; border-radius:3px; line-height:1.6; }
.item-card-tags .item-source-pending { color:#8b7352; background:#fcf8ef; border-color:#eee4d1; }
.item-card-footer { border-top:1px solid #edf0e8; display:flex; align-items:center; justify-content:space-between; min-height:45px; gap:12px; }
.item-card-footer > span { font-size:10px; color:#87927e; }
.item-card-footer > div { display:flex; align-items:center; gap:4px; }
.item-card-footer .icon-button { width:30px; height:32px; color:#859377; border:0; }
.item-card-footer .icon-button svg { width:14px; height:14px; }
.item-card-footer .icon-button.is-collected { color:#4e7938; background:#ecf4e2; }
.workspace .item-open { display:flex; align-items:center; gap:4px; font-size:11px; color:#4e6d41; padding:6px 0 6px 7px; background:none; border:0; }
.item-open svg { width:13px; height:13px; }
body[data-card-size="small"] #itemGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
body[data-card-size="small"] #itemGrid .item-card,
body[data-card-size="small"] .mode-grid > .item-card {
  display:grid; grid-template-columns:96px minmax(0,1fr); align-content:start; align-items:start;
  gap:5px 12px; padding:12px; min-width:0;
}
body[data-card-size="small"] #itemGrid .item-card-image,
body[data-card-size="small"] .mode-grid > .item-card .item-card-image {
  grid-column:1; grid-row:1 / 6; align-self:start; width:96px; height:96px; margin:0;
  border-radius:5px; background:#eef2e9;
}
body[data-card-size="small"] #itemGrid .item-image-surface,
body[data-card-size="small"] .mode-grid > .item-card .item-image-surface {
  width:96px; height:96px; aspect-ratio:auto; background:var(--item-image-bg,#edf1e8);
}
body[data-card-size="small"] #itemGrid .item-card-image > .item-image-label,
body[data-card-size="small"] .mode-grid > .item-card .item-card-image > .item-image-label { top:auto; bottom:4px; left:4px; padding:2px 4px; font-size:8px; }
body[data-card-size="small"] #itemGrid .item-card-top,
body[data-card-size="small"] .mode-grid > .item-card .item-card-top { grid-column:2; grid-row:1; margin:0; }
body[data-card-size="small"] #itemGrid .item-card-content,
body[data-card-size="small"] .mode-grid > .item-card .item-card-content { grid-column:2; grid-row:2; gap:7px; }
body[data-card-size="small"] #itemGrid .item-index,
body[data-card-size="small"] .mode-grid > .item-card .item-index { display:none; }
body[data-card-size="small"] #itemGrid .item-card h3,
body[data-card-size="small"] .mode-grid > .item-card h3 { font-size:14px; line-height:1.4; }
body[data-card-size="small"] #itemGrid .item-english,
body[data-card-size="small"] .mode-grid > .item-card .item-english { font-size:10px; }
body[data-card-size="small"] #itemGrid .item-mechanic,
body[data-card-size="small"] .mode-grid > .item-card .item-mechanic {
  grid-column:2; grid-row:3; margin:0; font-size:11px; line-height:1.65;
}
body[data-card-size="small"] #itemGrid .item-card-tags,
body[data-card-size="small"] .mode-grid > .item-card .item-card-tags {
  grid-column:2; grid-row:4; padding:0; gap:4px; font-size:9px;
}
body[data-card-size="small"] #itemGrid .item-card-footer,
body[data-card-size="small"] .mode-grid > .item-card .item-card-footer {
  grid-column:2; grid-row:5; min-height:34px; gap:6px;
}
body[data-card-size="small"] #itemGrid .item-card-footer > span,
body[data-card-size="small"] .mode-grid > .item-card .item-card-footer > span { font-size:9px; }
body[data-card-size="small"] #itemGrid .item-card-footer .icon-button,
body[data-card-size="small"] .mode-grid > .item-card .item-card-footer .icon-button { width:32px; height:32px; }
body[data-card-size="small"] .mode-grid:has(> .item-card) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.item-detail-figure { margin:0; background:#f2f5ed; }
.item-original-image { display:block; }
.item-detail-figure .item-image-surface { aspect-ratio:auto; min-height:180px; }
.item-detail-figure img { width:100%; height:auto; max-height:440px; object-fit:contain; }
.item-detail-figure figcaption { display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px; padding:14px 24px; color:#5d6e54; font-size:12px; line-height:1.7; }
.item-detail-figure figcaption > span:not(.item-image-label) { min-width:0; }
.item-detail-figure figcaption a { color:#416332; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.item-image-credit { flex-basis:100%; }
.item-image-community-note { color:#856a40; font-size:11px; }
.item-detail-english { font-size:15px; color:#7c8d70; line-height:1.7; margin:7px 0 18px; }
.item-detail-note { font-size:12px; color:#78866e; line-height:1.9; margin:18px 0; }
.item-version { border-top:1px solid var(--line); padding:26px 0 0; margin-top:24px; }
.item-version-heading { padding:14px 18px; border-radius:7px; background:#edf3e6; margin-bottom:22px; }
.workspace .item-version-heading h3 { font-size:17px; line-height:1.6; color:#416238; margin:0 0 6px; }
.item-version-heading > span { font-size:12px; color:#6c805d; }
.item-pending { padding:22px; border:1px solid #e4e8dc; border-radius:8px; background:#f8faf4; margin:24px 0; }
.workspace .item-pending h3 { font-size:15px; color:#547045; margin:0 0 10px; }
.item-pending p, .item-pending li { font-size:13px; line-height:1.9; color:#6a7b5e; }
.item-pending p { margin:0; }
.item-pending ul { margin:12px 0 0; padding-left:18px; }
.item-source-link { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:#436e3a; padding:10px 0; overflow-wrap:anywhere; }
.item-source-link svg { width:14px; height:14px; }
@media (min-width:1600px) { .item-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:1240px) {
  .items-overview { gap:20px; padding:22px; }
  .workspace .items-overview h2 { font-size:18px; }
  .items-stats { gap:20px; }
  .item-category-filters { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .item-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .items-overview { flex-wrap:wrap; }
  .items-stats { gap:32px; }
  .item-category-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .items-layout-controls { margin-left:0; }
}
@media (max-width:1050px) {
  body[data-card-size="small"] #itemGrid,
  body[data-card-size="small"] .mode-grid:has(> .item-card) { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px) {
  .items-overview { padding:16px; gap:18px; flex-wrap:nowrap; }
  .items-overview > div { min-width:0; }
  .items-kicker { font-size:9px; line-height:1.7; letter-spacing:.5px; margin-bottom:6px; }
  .workspace .items-overview h2 { font-size:15px; }
  .items-stats { gap:13px; }
  .items-stats dt { font-size:9px; }
  .items-stats dd { font-size:24px; }
  .items-overview p { font-size:12px; }
  .items-filter-header { padding:10px 14px 5px; }
  .item-category-filters { grid-template-columns:none; grid-template-rows:repeat(2,auto); grid-auto-flow:column; grid-auto-columns:155px; overflow-x:auto; padding:0 12px 14px; gap:6px; overscroll-behavior-x:contain; }
  .items-filter-header h2::after { content:" · 左右滑动"; font-size:10px; font-weight:400; color:#8b957f; }
  .workspace .item-category-filters button { font-size:11px; padding:10px 8px; min-height:42px; }
  .items-controls { padding:12px; gap:10px 18px; }
  .items-controls .select-field { flex:1 1 120px; }
  .items-layout-controls { width:100%; border-top:1px solid var(--line); padding-top:10px; }
  .items-layout-controls select { margin-right:auto; }
  .items-scope-note { font-size:11px; }
  .item-grid { grid-template-columns:1fr; }
  .item-card { padding:17px 18px 0; }
  .item-card-top { margin-bottom:17px; }
  .item-card-footer { min-height:49px; }
  .item-card-footer .icon-button { width:40px; height:40px; }
  .workspace .item-open { min-height:40px; }
  .items-results-heading { gap:10px; }
  .items-results-heading > div { flex-wrap:wrap; gap:5px 10px; }
  body[data-card-size="small"] #itemGrid,
  body[data-card-size="small"] .mode-grid:has(> .item-card) { grid-template-columns:minmax(0,1fr); }
  body[data-card-size="small"] #itemGrid .item-card,
  body[data-card-size="small"] .mode-grid > .item-card { grid-template-columns:84px minmax(0,1fr); gap:5px 10px; }
  body[data-card-size="small"] #itemGrid .item-card-image,
  body[data-card-size="small"] .mode-grid > .item-card .item-card-image,
  body[data-card-size="small"] #itemGrid .item-image-surface,
  body[data-card-size="small"] .mode-grid > .item-card .item-image-surface { width:84px; height:84px; }
  .item-detail-figure figcaption { padding:12px 18px; }
  .item-detail-figure img { max-height:310px; }
}

/* In-page gameplay excerpts load only after the visitor starts playback. */
.item-demos { margin:24px 0; }
.item-demo { margin:0 0 22px; min-width:0; }
.item-demo-screen { background:#131d17; border-radius:8px; overflow:hidden; }
.item-demo video { display:block; width:100%; height:auto; max-height:65vh; object-fit:contain; background:#131d17; }
.item-demo-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:11px 0; }
.workspace .item-demo-tools button,.item-demo-tools select { min-height:34px; border:1px solid var(--line-strong); border-radius:5px; background:#fff; color:var(--ink); padding:6px 10px; font-size:12px; }
.workspace .item-demo-tools button[aria-pressed="true"] { background:#e4eddc; color:var(--accent); border-color:#9fb78e; }
.item-demo-tools label { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.item-demo-tools > span { margin-left:auto; font-size:11px; color:var(--muted); }
.item-demo-tools button:focus-visible,.item-demo-tools select:focus-visible { outline:2px solid #668f51; outline-offset:2px; }
.item-demo figcaption { display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--muted); font-size:11px; line-height:1.7; }
.item-demo figcaption p { width:100%; margin:0; font-size:13px; color:var(--ink); }
.item-demo figcaption a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.item-demo-error { padding:14px; margin:0; color:#e8eedf; font-size:12px; line-height:1.7; }
.item-demo-error[hidden] { display:none; }
.item-appearance { border:1px solid var(--line); border-radius:7px; margin:12px 0 24px; padding:12px 14px; color:var(--muted); font-size:12px; }
.item-appearance > summary { cursor:pointer; }
.item-appearance .item-detail-figure { margin:12px 0 0; }
@media(max-width:600px) {
  .workspace .item-demo-tools button,.item-demo-tools select { min-height:40px; }
  .item-demo-tools > span { width:100%; margin-left:0; }
}