/* รวมไอเทม (/wiki/items/): the search bar, the chips, the card grid, the full card, and the look of the rare ones.
   Pixel art is drawn crisp. The animations move only transform and opacity, and stop under prefers-reduced-motion. */
.items-howto { margin: 6px 0 14px; }
.items-app { margin: 14px 0 24px; }
.items-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.items-search, .items-sort {
  min-height: 48px; padding: 6px 12px; border: 3px solid var(--wood-mid); border-radius: 4px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 18px;
}
.items-search { flex: 1 1 260px; min-width: 0; }
.items-sort { flex: 0 1 260px; max-width: 100%; }
.items-search:focus-visible, .items-sort:focus-visible, .chip:focus-visible, .item-card:focus-visible, .dlg-close:focus-visible { outline: 3px solid var(--accent-yellow); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.chip {
  min-height: 40px; padding: 2px 12px; border: 2px solid var(--wood-mid); border-radius: 20px;
  background: rgba(244, 237, 224, 0.1); color: var(--paper); font: inherit; font-size: 17px; cursor: pointer;
}
.chip:hover { background: rgba(244, 237, 224, 0.2); }
.chip.on { background: var(--wood-pale-2); color: var(--ink); border-color: var(--accent-yellow); }
.items-count { margin: 8px 0; color: var(--wood-pale-2); font-size: 17px; }
.items-more { margin: 16px auto 0; display: flex; }
.items-more[hidden] { display: none; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.items-plain[hidden] { display: none; }

/* --- Pictures: whole-number scaling, no smoothing ------------------------------------------------------------------- */
.ic { display: inline-flex; align-items: center; justify-content: center; position: relative; flex: none; }
.ic img { image-rendering: pixelated; image-rendering: crisp-edges; max-width: none; position: relative; z-index: 1; }

/* --- The card ------------------------------------------------------------------------------------------------------- */
.item-card {
  --edge: #6e4a2f; --glow: transparent;
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px 12px; border: 3px solid var(--edge); border-radius: 6px; text-align: center;
  background: linear-gradient(#f4ede0, #e5d6b6); color: var(--ink); text-decoration: none; content-visibility: auto; contain-intrinsic-size: 200px 230px;
  transition: transform 0.12s;
}
.item-card:hover { transform: translateY(-3px); color: var(--ink); }
.item-name { font-size: 20px; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.item-price { font-size: 15px; line-height: 1.3; color: var(--ink-soft); }
.item-where { font-size: 14px; line-height: 1.3; color: #5a4a3a; }
.item-market { font-size: 14px; line-height: 1.3; color: #2f6a2a; }
.rar-badge { display: inline-block; padding: 0 8px; border-radius: 3px; font-size: 14px; line-height: 1.6; background: #8a7d6a; color: #fff; }
.rar-b1 { background: #3f7a39; }
.rar-b2 { background: #2f68a8; }
.rar-b3 { background: linear-gradient(90deg, #6b3fa0, #b8872c); }
.rar-b4 { background: linear-gradient(90deg, #d8a21c, #fff0a0, #d8a21c); color: #3a2400; }
.rar-1 { --edge: #4f9a45; }
.rar-2 { --edge: #3b7cc2; }

/* หายากมาก (epic): a purple and gold border and a soft sheen that sweeps across every few seconds */
.rar-3 { --edge: #8450c0; box-shadow: 0 0 0 2px #d8a83c inset, 0 0 12px rgba(132, 80, 192, 0.55); }
.rar-3::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: translateX(0) skewX(-18deg);
  animation: item-sheen 5s ease-in-out infinite;
}
@keyframes item-sheen { 0%, 55% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(520%) skewX(-18deg); } }

/* ตำนาน (legendary): gold light turning behind the picture, sparkles round the card and a ribbon */
.rar-4 { --edge: #d8a21c; background: linear-gradient(#fff4cf, #f0d98a); box-shadow: 0 0 0 2px #fff0a0 inset, 0 0 16px rgba(255, 210, 63, 0.7); }
.rar-4 .ic::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 150%; height: 150%; margin: -75% 0 0 -75%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255, 210, 63, 0), rgba(255, 210, 63, 0.75), rgba(255, 255, 255, 0), rgba(255, 210, 63, 0.75), rgba(255, 210, 63, 0));
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 70%); mask: radial-gradient(circle, #000 28%, transparent 70%);
  animation: item-spin 14s linear infinite;
}
@keyframes item-spin { to { transform: rotate(360deg); } }
.rar-4::before, .rar-4::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(circle at 12% 18%, #fff 0 2px, transparent 3px), radial-gradient(circle at 86% 26%, #fff6b8 0 2px, transparent 3px),
    radial-gradient(circle at 20% 78%, #fff6b8 0 2px, transparent 3px), radial-gradient(circle at 80% 84%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 50% 8%, #fff 0 1.5px, transparent 2.5px);
  animation: item-twinkle 2.6s ease-in-out infinite;
}
.rar-4::after { transform: scale(-1, -1); animation-delay: 1.3s; opacity: 0; }
@keyframes item-twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
.leg-ribbon { /* its own class: the site kit's .ribbon (the big red title ribbon) made it huge and cut the word off */
  position: absolute; top: 9px; right: -24px; z-index: 3; width: 84px; padding: 1px 0; transform: rotate(40deg); text-align: center;
  background: linear-gradient(#a8321a, #6e1c0c); color: #ffe48a; font-size: 12px; line-height: 1.35; letter-spacing: 0.5px;
  border-top: 1px solid #f2c84a; border-bottom: 1px solid #f2c84a; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); text-shadow: 0 1px 0 rgba(40, 6, 6, 0.8);
}

/* --- The full card (a dialog) --------------------------------------------------------------------------------------- */
.item-dialog {
  position: fixed; inset: 0; margin: auto; width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; overflow-x: hidden;
  padding: 16px; border: 4px solid #6e4a2f; border-radius: 8px; background: #3b2418; color: var(--paper);
}
.item-dialog::backdrop { background: rgba(10, 5, 2, 0.75); }
.dlg-head { display: flex; gap: 14px; align-items: center; position: relative; padding-right: 64px; }
.dlg-ic { border: 3px solid var(--wood-mid); border-radius: 6px; background: linear-gradient(#f4ede0, #e5d6b6); }
.dlg-titles { min-width: 0; }
.dlg-titles h2 { margin: 0; font-size: 28px; line-height: 1.2; color: var(--wood-pale-2); overflow-wrap: anywhere; }
.dlg-en { margin: 0; font-size: 16px; color: #c8b79a; }
.dlg-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 0; }
.tag { padding: 0 8px; border-radius: 3px; font-size: 14px; line-height: 1.6; background: rgba(244, 237, 224, 0.18); }
.swatch { width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; }
.dlg-close {
  position: absolute; top: 0; right: 0; min-height: 44px; padding: 2px 14px; border: 2px solid var(--wood-pale); border-radius: 4px;
  background: #6e4a2f; color: var(--paper); font: inherit; font-size: 17px; cursor: pointer;
}
.dlg-sec { margin-top: 14px; }
.dlg-sec h3 { margin: 0 0 4px; font-size: 20px; color: var(--wood-pale-2); border-bottom: 2px solid var(--wood-mid); }
.dlg-list { margin: 4px 0; padding-left: 20px; font-size: 17px; line-height: 1.5; }
.kind { color: var(--accent-yellow); font-weight: normal; }
.more { font-size: 15px; white-space: nowrap; }
.rare-note { margin-top: 12px; padding: 8px 12px; border-radius: 6px; background: rgba(216, 162, 28, 0.18); border: 2px solid #d8a21c; }
.rare-note p { margin: 2px 0; font-size: 17px; }
.rare-note .odds { color: #fff0a0; }
.item-dialog.rar-3 { border-color: #8450c0; box-shadow: 0 0 0 2px #d8a83c inset, 0 0 24px rgba(132, 80, 192, 0.6); }
.item-dialog.rar-3::after, .item-dialog.rar-4::before, .item-dialog.rar-4::after { content: none; animation: none; }
.item-dialog.rar-4 { border-color: #d8a21c; box-shadow: 0 0 0 2px #fff0a0 inset, 0 0 28px rgba(255, 210, 63, 0.65); background: radial-gradient(circle at 80px 80px, #5a4318, #3b2418 70%); }
.item-dialog .leg-ribbon { display: none; } /* Head UX check: the corner ribbon covered the close button; the dialog already shows the ตำนาน tag */
.item-dialog .dlg-ic.rar-4, .item-dialog.rar-4 .dlg-ic { box-shadow: 0 0 14px rgba(255, 210, 63, 0.85); }

@media (max-width: 480px) {
  .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .item-name { font-size: 18px; }
  .dlg-head { flex-direction: column; align-items: flex-start; padding-right: 0; padding-top: 48px; }
  .dlg-titles h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .rar-3::after { animation: none; opacity: 0; }
  .rar-4 .ic::before { animation: none; }
  .rar-4::before { animation: none; opacity: 0.9; }
  .rar-4::after { animation: none; opacity: 0; }
  .item-card { transition: none; }
}
/* Head UX check: the category links read as one row of chips above the finder, not a 13-line bullet list. */
.items-cats ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.items-cats li { margin: 0; }
.items-cats a { display: inline-flex; align-items: center; min-height: 40px; padding: 2px 12px; border: 2px solid var(--wood-mid); border-radius: 20px; background: rgba(244, 237, 224, 0.1); color: var(--paper); font-size: 17px; text-decoration: none; white-space: nowrap; }
.items-cats a:hover { background: rgba(244, 237, 224, 0.2); }
.items-cats a[aria-current="page"] { background: var(--wood-pale-2); color: var(--ink); border-color: var(--accent-yellow); }
.items-cats a:focus-visible { outline: 3px solid var(--accent-yellow); outline-offset: 2px; }
/* The index finder has its own category chips; the link row is only for readers without scripts. */
body:has(#items-app .items-bar) .items-cats.nojs-only { display: none; }