/* ==========================================================================
   แกลเลอรีปีก (wings.php · js/wings.js)
   วิดีโอปีกอัดบนพื้นสีเดียว --wing-bg (ต้องตรงกับสีพื้นที่ตั้งในโปรแกรมอัด) แล้ววางเต็มกรอบสี่เหลี่ยม
   แสงเรืองชาด-ทองหลังปีกเป็นชั้น CSS แบบ screen ทับวิดีโอ (พื้นดำได้แสงเรือง ปีกสว่างขึ้นเล็กน้อย) — เปลี่ยนโทนได้โดยไม่ต้องอัดใหม่
   ========================================================================== */
.wings-page { --wing-bg: #0b0a09; --wing-glow: rgba(176, 74, 28, .24); --wing-line: rgba(202, 161, 101, .2); }

/* แถบเครื่องมือ: ชาย/หญิง · จำนวน · ค้นหา — ติดใต้แถบเมนูเมื่อเลื่อน */
/* แท็บประเภทไอเท็ม (ไอเท็มภายในเกม → ปีก …) */
.wg-tabs { margin-bottom: 18px; }
.wg-tabs .pill__han { font-size: 17px; }

.wg-bar {
  position: sticky; top: calc(var(--top) + 10px); z-index: 30;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
  margin-bottom: 24px; padding: 8px 10px 8px 4px;
  border: 1px solid var(--line-2); border-radius: 4px;
  background: rgba(14, 12, 11, .84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 36px -24px #000;
}
.wg-sex { flex: none; padding-block: 0; }
.wg-sex .pill { height: 42px; cursor: pointer; }
.wg-sex .pill__han { font-size: 17px; }
.wg-count { font-family: var(--display); font-size: 14.5px; color: var(--muted); white-space: nowrap; }
.wg-count b { font-weight: 500; color: var(--gold-2); }
.wg-search { flex: 1 1 260px; max-width: 420px; height: 44px; margin-left: auto; padding-left: 12px; }
.wg-search > .ico { flex: none; font-size: 18px; color: var(--gold); }
.wg-search .search__input { width: auto; }

/* ตารางการ์ด (ภาพ 16:9 — ปีกกว้าง ภาพจัตุรัสเหลือที่ว่างบนล่างมาก) */
.wg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.wg-grid__cell { min-width: 0; }
.wg-grid__cell[hidden] { display: none; }

.wcard {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid var(--wing-line); border-radius: 4px; color: inherit;
  background: linear-gradient(180deg, #1c1714, #120f0d);
  transition: border-color .25s, transform .3s var(--ease), box-shadow .3s;
}
.wcard:hover { border-color: var(--gold-line); transform: translateY(-3px); box-shadow: 0 20px 36px -22px #000, 0 0 0 1px rgba(202, 161, 101, .1); }
.wcard:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.wcard__media, .wv__stage { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; background: var(--wing-bg); }
/* คลิปวาดลง <canvas> (js/wings.js) ทับภาพปก แสดงเมื่อได้เฟรมแรกแล้ว */
.wcard__media > img, .wcard__media > canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.wcard__media > canvas { opacity: 0; transition: opacity .35s; }
.wcard__media > canvas.is-on { opacity: 1; }
/* แสงเรืองหลังปีก (screen) + ขอบมืด — ชั้นบนสุด ไม่รับเมาส์ */
.wcard__media::before, .wv__stage::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(ellipse 62% 54% at 50% 46%, var(--wing-glow), transparent 72%); transition: opacity .35s; }
.wcard__media::after, .wv__stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 78% 78% at 50% 50%, transparent 58%, rgba(0, 0, 0, .55)); }
.wcard__media::before { opacity: .75; }
.wcard:hover .wcard__media::before { opacity: 1; }

/* ยังไม่มีภาพตัวอย่าง: อักษร 翼 โปร่ง + ไอคอนไอเท็มในกรอบเพชร */
.wcard__ph, .wv__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.wcard.is-ready .wcard__ph { visibility: hidden; }
.wcard__han { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(96px, 9vw, 124px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(236, 208, 160, .1); user-select: none; }
/* กรอบเพชรต้องใหญ่พอให้มุมไอเท็ม 36px อยู่ข้างใน: ด้านเพชร 56px หมุน 45° = ห่างกลาง 28px > มุมไอคอน 25.5px */
.wcard__gem { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.wcard__gem::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--gold-line); background: rgba(12, 10, 9, .85); transform: rotate(45deg); box-shadow: 0 0 0 5px rgba(202, 161, 101, .05), 0 0 28px rgba(202, 161, 101, .16); }
.wcard__gem img { position: relative; display: block; width: 36px; height: 36px; border: 1px solid rgba(202, 161, 101, .4); }
.wcard__soon { position: relative; font-size: 12px; letter-spacing: .06em; color: var(--muted); }

.wcard__body { display: flex; align-items: center; gap: 12px; padding: 12px 14px 14px; border-top: 1px solid rgba(202, 161, 101, .14); }
/* ไอคอนไอเท็มของปีกนี้ (แบบช่องไอเท็มในเกม) · ไม่มีรูป = อักษร 翼 */
.wcard__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 1px solid rgba(202, 161, 101, .33); border-radius: 4px; background: #1a1714; color: var(--gold); font-size: 18px; }
.wcard__ico img { display: block; width: 100%; height: 100%; }
.wcard__text { display: grid; gap: 5px; min-width: 0; }
.wcard__name { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-family: var(--display); font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; transition: color .2s; }
.wcard:hover .wcard__name { color: var(--gold-2); }
.wcard__meta { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 12.5px; color: var(--muted); }
.wcard__meta span + span::before { content: "·"; margin-right: 8px; color: var(--dim); }

.wg-none { margin-top: 8px; border: 1px dashed var(--wing-line); }
.wg-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 28px; font-size: 13.5px; color: var(--muted); }
.wg-note > .ico { color: var(--gold); }
.wg-note__keys { margin-left: auto; color: var(--dim); }

/* ==========================================================================
   หน้าต่างดูปีก: ภาพใหญ่ 16:9 (สูงไม่เกินจอ) + ข้อมูลไอเท็มด้านขวา · จอเล็ก = ซ้อนบนล่าง
   ========================================================================== */
/* เกือบเต็มจอ (ภาพ 16:9 สูงเท่าจอ − ขอบ) · --wv-zoom = ขยายคลิปตัดพื้นว่างรอบตัวละคร (คลิปอัดตัวละครไว้กลางภาพ เหลือขอบมาก) */
.wv { --wv-side: 320px; --wv-zoom: 1.3; width: min(1680px, calc(100% - 24px), calc((100vh - 24px) * 16 / 9 + var(--wv-side))); max-width: none; max-height: calc(100vh - 24px); padding: 0; border: 0; overflow: visible; color: var(--text); background: transparent; }
.wv::backdrop { background: rgba(5, 4, 3, .9); }
.wv__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--wv-side); background: linear-gradient(180deg, #1b1613, #0f0c0b); }
.wv__poster, .wv__video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--wv-zoom)); transform-origin: 50% 50%; }
.wv__poster[hidden] { display: none; }
.wv__video { opacity: 0; transition: opacity .3s; }
.wv__video.is-on { opacity: 1; }
.wv__ph[hidden] { display: none; }
.wv__ph .wcard__han { font-size: clamp(150px, 22vw, 260px); }
.wv__gem { transform: scale(1.4); }

.wv__nav { position: absolute; top: 50%; z-index: 5; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -23px; padding: 0; border: 1px solid var(--gold-line); border-radius: 50%; color: var(--gold-2); font-size: 22px; background: rgba(10, 8, 7, .7); transition: background-color .2s, color .2s; }
.wv__nav:hover { color: #fff; background: rgba(110, 16, 20, .85); }
.wv__nav--prev { left: 14px; }
.wv__nav--next { right: 14px; }
.wv__dock { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none; }
.wv__dock > * { pointer-events: auto; }
.wv__sex { border: 1px solid var(--line-2); border-radius: 4px; background: rgba(10, 8, 7, .78); }
.wv__play { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: 4px; color: var(--gold-2); background: rgba(10, 8, 7, .78); }
.wv__play[hidden], .wv__play [hidden] { display: none; }
.wv__play .ico { font-size: 18px; }

/* ข้อมูลด้านขวาสูงเท่าภาพเสมอ (ภาพกำหนดความสูงแถว) — รายการไอเท็มยาว (PVP 10 ระดับ) เลื่อนในกรอบนี้ */
.wv__info { position: relative; min-height: 0; border-left: 1px solid rgba(202, 161, 101, .16); }
.wv__scroll { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 30px 26px 24px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(202, 161, 101, .35) transparent; }
.wv__name { margin: 2px 40px 16px 0; font-family: var(--display); font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.wv__label { margin-bottom: 10px; font-size: 12.5px; letter-spacing: .06em; color: var(--muted); }
.wv__items { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.wv__items li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255, 255, 255, .02); }
.wv__ico { width: 36px; height: 36px; overflow: hidden; border: 1px solid rgba(202, 161, 101, .33); border-radius: 4px; background: #1a1714; }
.wv__ico img { display: block; width: 100%; height: 100%; }
.wv__iname { font-size: 14px; line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere; }
.wv__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.wv__keys { margin-top: auto; padding-top: 4px; font-size: 12px; color: var(--dim); }
.wv__keys kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-right: 3px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 3px; font-family: var(--font); font-size: 11px; color: var(--text-2); }
.wv__close { position: absolute; top: 14px; right: 14px; z-index: 6; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; color: #fff; font-size: 20px; background: rgba(10, 8, 7, .7); }
.wv__close:hover { border-color: var(--gold-line); color: var(--gold-2); }

@media (hover: none) { .wg-note__keys, .wv__keys { display: none; } }

@media (max-width: 860px) {
  .wv { --wv-zoom: 1.2; width: calc(100% - 20px); max-height: calc(100vh - 20px); overflow-y: auto; }
  .wv__panel { grid-template-columns: minmax(0, 1fr); }
  .wv__stage { max-height: none; }
  .wv__info { border-left: 0; border-top: 1px solid rgba(202, 161, 101, .16); }
  .wv__scroll { position: static; overflow: visible; padding: 20px 18px 22px; }
  .wv__name { margin-right: 0; }
  .wv__nav { width: 40px; height: 40px; margin-top: -20px; }
  .wv__nav--prev { left: 8px; }
  .wv__nav--next { right: 8px; }
}
@media (max-width: 600px) {
  .wg-bar { top: calc(var(--top) + 6px); padding: 6px; gap: 8px 10px; }
  .wg-search { flex-basis: 100%; max-width: none; margin-left: 0; }
  .wg-count { margin-left: auto; padding-right: 4px; }
  .wg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wcard__body { gap: 9px; padding: 10px 11px 12px; }
  .wcard__ico { width: 32px; height: 32px; }
  .wcard__name { font-size: 14.5px; }
  .wcard__meta { font-size: 11.5px; }
  .wg-note__keys { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wcard, .wcard__media > canvas, .wcard__media::before, .wv__video { transition: none; }
  .wcard:hover { transform: none; }
}

/* กันบันทึกภาพจากพื้นที่ภาพ (js/wings.js ปิดคลิกขวา/ลากด้วย): เลือกข้อความ ลากรูป กดค้างบนมือถือ */
.wcard__media, .wv__stage { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wcard__media img, .wcard__media canvas, .wv__stage img, .wv__stage canvas { -webkit-user-drag: none; }