/* ============================================================
   Craftfiti BKK — Global styles + PWA chrome
   หมายเหตุ: design system หลัก (--bg, --amber, ฯลฯ) จะถูก
   port มาจาก Dashboard.html ตอน migration (Task #5)
   ไฟล์นี้เก็บแค่ PWA-specific UI + safe-area + reset
   ============================================================ */

/* ตัวแปรสี (:root) ประกาศรวมที่ dashboard.css ที่เดียว — ทุกหน้า (index/card/rank)
   โหลด dashboard.css ก่อน style.css เสมอ จึงได้ค่าครบ (เลิกประกาศซ้ำที่นี่ กันค่าหลุดกัน) */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { min-height: 100vh; }

body {
  background: var(--bg);
  color: var(--ink-body);
  font-family: 'IBM Plex Sans Thai', -apple-system, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* safe-area สำหรับ standalone PWA บน iOS — ไม่ให้โดน notch/home indicator บัง */
  padding-top    : env(safe-area-inset-top);
  padding-bottom : env(safe-area-inset-bottom);
  padding-left   : env(safe-area-inset-left);
  padding-right  : env(safe-area-inset-right);
}

/* ── PWA Install button (compact pill, bottom-right, ทุกหน้า) ── */
.pwa-install-btn {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom));
  right: 16px;
  z-index: 9999;
  padding: 10px 16px;
  background: #1a1612;
  color: #f5c544;
  border: 1px solid rgba(245,197,68,.4);
  border-radius: 999px;
  font: 600 13px/1 'IBM Plex Sans Thai', sans-serif;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.2);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.pwa-install-btn:hover { background: #241d16; transform: translateY(-1px); }
.pwa-install-btn:active { transform: translateY(0); }

/* ── Install guide bottom-sheet ──────────────────────────── */
.pwa-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, background .2s ease;
}
.pwa-sheet-backdrop--open {
  background: rgba(0,0,0,.55);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.pwa-sheet {
  width: 100%;
  max-width: 430px;
  background: #1a1612;
  color: #f2ead9;
  border: 1px solid rgba(245,197,68,.25);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 32px -8px rgba(0,0,0,.6);
  transform: translateY(100%);
  transition: transform .2s ease;
}
.pwa-sheet-backdrop--open .pwa-sheet { transform: translateY(0); }
.pwa-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pwa-sheet__title { font-weight: 700; font-size: 16px; color: #f5c544; }
.pwa-sheet__close {
  background: transparent;
  border: 0;
  color: #b8ac94;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.pwa-sheet__body { font-size: 14px; line-height: 1.7; }
.pwa-sheet__body ol { padding-left: 20px; margin-bottom: 10px; }
.pwa-sheet__body strong { color: #f5c544; }
.pwa-sheet__copy-btn {
  margin-top: 8px;
  width: 100%;
  padding: 10px 14px;
  background: rgba(245,197,68,.12);
  color: #f5c544;
  border: 1px solid rgba(245,197,68,.4);
  border-radius: 10px;
  font: 600 13px/1 'IBM Plex Sans Thai', sans-serif;
  cursor: pointer;
}

/* ── iOS install hint ───────────────────────────────────── */
.pwa-ios-hint {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 16px;
  right: 16px;
  z-index: 9999;
  padding: 12px 14px;
  background: var(--s1);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
  animation: slideUp .3s ease;
}
.pwa-ios-hint strong { color: var(--amber); }
.pwa-ios-hint__text { cursor: pointer; }
.pwa-ios-hint__close {
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

/* ── Update toast ────────────────────────────────────────── */
.pwa-update-toast {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 10px 14px;
  background: var(--s1);
  color: var(--ink);
  border: 1px solid var(--amber-glow);
  border-radius: 999px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  box-shadow: 0 8px 24px -8px var(--amber-glow);
}
.pwa-update-toast__btn {
  background: var(--amber);
  color: #1a1200;
  border: 0;
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 600;
  cursor: pointer;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Member avatar override สำหรับ Pokémon img ─────────── */
.poke-avatar {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
/* เมื่อ container เป็น emoji-sized — กำหนด default ที่ดูดี */
.m-avatar .poke-avatar,
.msum-av .poke-avatar { width: 1.4em; height: 1.4em; vertical-align: middle; }
.mem-d-ava .poke-avatar { width: 80px; height: 80px; }

/* ── ปุ่ม Pokémon ─────────────────────────────────────── */
.mem-poke-btn {
  margin: 8px auto 4px;
  display: block;
  background: var(--s2);
  color: var(--amber);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font: 600 12px 'IBM Plex Sans Thai', sans-serif;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.mem-poke-btn:hover { background: var(--s3, #362f28); border-color: var(--amber-glow); }
.mem-poke-btn:active { transform: scale(0.97); }
.mem-poke-btn:disabled { opacity: .5; cursor: not-allowed; }
.mem-poke-btn--roll {
  background: linear-gradient(135deg, var(--amber) 0%, var(--copper, #c97247) 100%);
  color: #1a1200;
  border-color: var(--amber);
  box-shadow: 0 4px 16px -4px var(--amber-glow);
}
.mem-poke-btn--roll:hover { filter: brightness(1.1); border-color: var(--amber-hi); }
.mem-poke-btn--pick {
  background: var(--amber);
  color: #1a1200;
  border-color: var(--amber);
  animation: pulse-amber 1.5s ease-in-out infinite;
}
@keyframes pulse-amber {
  0%, 100% { box-shadow: 0 0 0 0 var(--amber-glow); }
  50%      { box-shadow: 0 0 0 8px transparent; }
}

/* ── Reveal modal (กาชา) ────────────────────────────── */
.poke-reveal {
  width: min(360px, 92vw);
  background: linear-gradient(160deg, var(--s0) 0%, var(--s1) 100%);
  border: 1px solid var(--amber-glow);
  border-radius: 20px;
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: 0 20px 60px -12px var(--amber-glow), inset 0 0 0 1px rgba(245,197,68,.1);
  animation: revealIn .5s cubic-bezier(.22,1.2,.36,1);
}
.poke-reveal__top { margin-bottom: 12px; }
.poke-reveal__label {
  color: var(--ink-mute); font-size: 12px;
  text-transform: uppercase; letter-spacing: .3em;
  font-family: 'JetBrains Mono', monospace;
}
.poke-reveal__shiny {
  display: inline-block; margin-bottom: 8px;
  color: #ffd84a; font-weight: 700; font-size: 13px;
  letter-spacing: .3em;
  animation: shinyPulse 1.2s ease-in-out infinite;
  text-shadow: 0 0 8px #ffd84a, 0 0 16px #ffd84a;
}
@keyframes shinyPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(1.05)} }
.poke-reveal__img-wrap {
  position: relative; width: 180px; height: 180px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
}
.poke-reveal__img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 16px var(--amber-glow));
  animation: bounceIn .8s cubic-bezier(.22,1.5,.36,1);
}
.poke-reveal__img.is-animated {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
.poke-reveal__sparkle {
  position: absolute; inset: -20px; pointer-events: none;
  background: radial-gradient(circle at center, var(--amber-glow) 0%, transparent 60%);
  animation: sparkleSpin 3s linear infinite;
}
.poke-reveal__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; color: var(--amber);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: .08em;
}
.poke-reveal__hint {
  color: var(--ink-mute); font-size: 12px;
  margin-bottom: 18px;
}
.poke-reveal__hint strong { color: var(--amber); font-size: 14px; }
.poke-reveal__btn {
  width: 100%;
  background: var(--amber); color: #1a1200; border: 0;
  border-radius: 12px; padding: 12px;
  font: 700 14px 'IBM Plex Sans Thai', sans-serif;
  cursor: pointer; transition: filter .15s;
}
.poke-reveal__btn:hover { filter: brightness(1.1); }
.poke-reveal__actions { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.poke-reveal__act { width: 100%; border: 0; border-radius: 10px; padding: 10px 12px; font: 700 13px 'IBM Plex Sans Thai', sans-serif; cursor: pointer; transition: filter .15s; }
.poke-reveal__act:hover { filter: brightness(1.1); }
.poke-reveal__act--evo { background: #4a90e2; color: #fff; }
.poke-reveal__act--convert { background: rgba(107,168,90,.18); color: #8fce7a; border: 1px solid rgba(107,168,90,.4); }
.poke-reveal__act--sale { background: rgba(231,196,106,.14); color: var(--amber); border: 1px solid rgba(231,196,106,.35); }
.poke-reveal__act--noevo { color: rgba(255,255,255,.3); font: 10px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-align: center; padding: 4px 0; }
.poke-reveal__dupe { display: inline-block; background: rgba(200,86,74,.2); border: 1px solid rgba(200,86,74,.5); color: #e0604f; font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .12em; padding: 3px 10px; border-radius: 6px; margin-bottom: 8px; }

@keyframes revealIn {
  from { transform: scale(.85) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes bounceIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes sparkleSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Pokemon detail modal (in Dex flow) ───────────────── */
.poke-detail {
  width: min(380px, 94vw);
  max-height: 88vh;
  background: linear-gradient(160deg, var(--s0) 0%, var(--s1) 100%);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px 18px;
  position: relative;
  overflow-y: auto;
  animation: revealIn .3s cubic-bezier(.22,1.2,.36,1);
}
.poke-detail__close {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px;
  background: transparent; border: 0;
  color: var(--ink-mute); font-size: 24px; line-height: 1; cursor: pointer;
  z-index: 1;
}
.poke-detail__img-wrap {
  position: relative;
  width: 200px; height: 180px;
  margin: 0 auto 10px;
  background: radial-gradient(circle at center, var(--amber-glow) 0%, transparent 65%);
}
.poke-detail__img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4));
  cursor: pointer;
  transition: transform .15s;
}
.poke-detail__img.is-animated { image-rendering: pixelated; image-rendering: -moz-crisp-edges; }
.poke-detail__cry {
  position: absolute; bottom: 4px; right: 4px;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: var(--amber); color: #1a1200;
  cursor: pointer; font-size: 16px;
  box-shadow: 0 2px 8px var(--amber-glow);
  transition: transform .15s, filter .15s;
}
.poke-detail__cry:hover { filter: brightness(1.1); transform: scale(1.1); }
.poke-detail__cry:active { transform: scale(0.95); }
.poke-detail__shiny {
  position: absolute; top: 0; left: 0;
  background: linear-gradient(135deg, #ffd84a, #ff9a3c);
  color: #2a1500; padding: 2px 10px; border-radius: 999px;
  font: 700 10px 'JetBrains Mono', monospace; letter-spacing: 0.15em;
  box-shadow: 0 2px 8px rgba(255,180,0,0.4);
  animation: shinyPulse 1.2s ease-in-out infinite;
}
.poke-detail__head {
  text-align: center; margin-bottom: 12px;
}
.poke-detail__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; color: var(--amber); margin-bottom: 2px;
}
.poke-detail__genus {
  color: var(--ink-mute); font-size: 11px;
  font-family: var(--hand); margin-bottom: 6px;
}
.poke-detail__types {
  display: flex; gap: 6px; justify-content: center;
}
.poke-type-badge {
  display: inline-block;
  padding: 3px 10px; border-radius: 999px;
  font: 700 10px 'IBM Plex Sans Thai', sans-serif;
  color: #fff;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.2);
}

/* stats bars */
.poke-detail__stats {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.poke-stat-row {
  display: grid;
  grid-template-columns: 40px 1fr 32px;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
}
.poke-stat-row__lbl {
  font: 700 10px 'JetBrains Mono', monospace;
  color: var(--ink-mute); text-align: right;
}
.poke-stat-row__bar {
  background: var(--s2);
  height: 6px; border-radius: 3px;
  overflow: hidden;
}
.poke-stat-row__bar > div {
  height: 100%;
  border-radius: 3px;
  transition: width .3s;
}
.poke-stat-row__val {
  font: 600 11px 'JetBrains Mono', monospace;
  color: var(--ink); text-align: right;
}

/* flavor text */
.poke-detail__flavor {
  background: rgba(245, 197, 68, 0.06);
  border-left: 3px solid var(--amber);
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  color: var(--ink-body);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 14px;
  min-height: 20px;
}
.poke-detail__flavor:empty { display: none; }

.poke-detail__actions {
  display: flex; flex-direction: column; gap: 6px;
}
.poke-detail__action {
  padding: 12px; border-radius: 10px; border: 1px solid var(--line);
  font: 600 13px 'IBM Plex Sans Thai', sans-serif;
  cursor: pointer; transition: background .15s, filter .15s;
  background: var(--s2); color: var(--ink);
}
.poke-detail__action:hover { background: var(--s3, #362f28); }
.poke-detail__action--primary {
  background: var(--amber); color: #1a1200; border-color: var(--amber);
}
.poke-detail__action--primary:hover { filter: brightness(1.08); }
.poke-detail__action--ghost {
  background: transparent; color: var(--ink-mute);
}

/* ── Pokemon picker ───────────────────────────────────── */
.poke-picker-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn .2s ease;
}
.poke-picker {
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  background: var(--s0);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.poke-picker__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.poke-picker__title { color: var(--ink); font-size: 16px; font-weight: 600; }
.poke-picker__close {
  background: transparent; border: 0; color: var(--ink-mute);
  font-size: 24px; cursor: pointer; line-height: 1;
}
.poke-picker__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}
.poke-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.poke-card {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: border-color .15s, transform .15s;
}
.poke-card:hover { border-color: var(--amber-glow); transform: translateY(-2px); }
.poke-card.is-active {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber-glow), 0 4px 16px -4px var(--amber-glow);
}
.poke-card__img {
  width: 64px; height: 64px;
  image-rendering: -webkit-optimize-contrast;
}
.poke-card__name {
  font-size: 11px;
  color: var(--ink-body);
  text-transform: capitalize;
  text-align: center;
}
.poke-card__id {
  font-size: 10px;
  color: var(--ink-mute);
  font-family: 'JetBrains Mono', monospace;
}
.poke-picker__footer {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.poke-shiny-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-mute);
  cursor: pointer;
}
.poke-shiny-toggle input { accent-color: var(--amber); }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Redeem reward cards ─────────────────────────────────── */
.redeem-grid {
  display: grid; gap: 8px;
}
.redeem-card {
  background: var(--s1); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
  cursor: pointer; color: var(--ink);
  text-align: left;
  font: inherit;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s, background .15s, transform .1s;
}
.redeem-card:not(.is-disabled):hover {
  border-color: var(--amber);
  background: var(--s2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -4px var(--amber-glow);
}
.redeem-card:not(.is-disabled):active { transform: translateY(0); }
.redeem-card.is-disabled { opacity: .4; cursor: not-allowed; }
.redeem-card__head {
  display: flex; justify-content: space-between; align-items: center;
  font: 11px 'JetBrains Mono', monospace;
}
.redeem-card__rarity {
  padding: 2px 8px; border-radius: 999px;
  font-weight: 700; letter-spacing: .05em;
}
.rarity-common   { background: #6b7c5e; color: #f0f5e0; }
.rarity-uncommon { background: #4a7ba8; color: #e0f0f5; }
.rarity-rare     { background: #c97247; color: #fff; }
.rarity-ultra    { background: linear-gradient(135deg, #f5c544, #c97247); color: #1a1200; }
.redeem-card__own { color: var(--ink-mute); }
.redeem-card.is-disabled .redeem-card__own { color: var(--danger); }
.redeem-card__name { color: var(--ink); font-size: 13px; font-weight: 600; }

/* ── Voucher modal ───────────────────────────────────────── */
.voucher-modal {
  width: min(360px, 92vw);
  background: linear-gradient(160deg, var(--s0) 0%, var(--s1) 100%);
  border: 2px solid var(--amber);
  border-radius: 18px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 20px 60px -10px var(--amber-glow);
  animation: revealIn .4s cubic-bezier(.22,1.2,.36,1);
}
.voucher-modal__top { font-size: 56px; margin-bottom: 6px; }
.voucher-modal__title {
  font: 700 11px 'JetBrains Mono', monospace;
  letter-spacing: .3em; color: var(--ink-mute);
  margin-bottom: 4px;
}
.voucher-modal__reward {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; color: var(--amber); margin-bottom: 16px;
}
.voucher-modal__code {
  background: var(--bg);
  border: 1px dashed var(--amber);
  border-radius: 10px;
  padding: 14px;
  font: 700 18px 'JetBrains Mono', monospace;
  color: var(--amber-hi);
  letter-spacing: .15em;
  margin-bottom: 14px;
}
.voucher-modal__hint {
  color: var(--ink-body); font-size: 13px; line-height: 1.6;
  margin-bottom: 18px;
}
.voucher-modal__btn {
  width: 100%; padding: 12px;
  background: var(--amber); color: #1a1200; border: 0;
  border-radius: 10px;
  font: 700 14px 'IBM Plex Sans Thai', sans-serif;
  cursor: pointer;
}

/* ── Evolution path picker (Eevee) ───────────────────────── */
.evo-pick-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.evo-pick-card {
  background: var(--s1); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 6px;
  text-align: center; cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.evo-pick-card:hover {
  transform: translateY(-3px); border-color: var(--amber);
  box-shadow: 0 4px 16px -4px var(--amber-glow);
}
.evo-pick-card img {
  width: 72px; height: 72px; object-fit: contain;
}
.evo-pick-card__name {
  color: var(--ink); font-size: 12px; font-weight: 600;
  text-transform: capitalize; margin-top: 4px;
}
.evo-pick-card__cost {
  color: var(--amber); font: 700 11px 'JetBrains Mono', monospace;
  margin-top: 2px;
}

/* ── 🍺 Beer evolve animation ───────────────────────────── */
.beer-evolve-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0, 0, 0, 0.92);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  animation: fadeIn .3s ease;
}
.beer-evolve {
  display: flex; flex-direction: column; align-items: center;
}
.beer-evolve__glass {
  position: relative;
  width: 200px; height: 280px;
  overflow: visible;
}
/* Glass shape (clipping mask) */
.beer-evolve__glass-frame {
  position: absolute; inset: 0;
  border: 4px solid rgba(255,255,255,0.85);
  border-top: none;
  border-radius: 4px 4px 18px 18px / 4px 4px 32px 32px;
  pointer-events: none;
  box-shadow:
    inset -8px 0 12px -8px rgba(255,255,255,0.4),
    inset 8px 0 12px -8px rgba(255,255,255,0.2),
    0 8px 32px rgba(245,197,68,0.4);
}
.beer-evolve__glass-frame::before {
  /* glass rim highlight */
  content: '';
  position: absolute; top: -3px; left: -4px; right: -4px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
}

/* Amber liquid filling up */
.beer-evolve__liquid {
  position: absolute; left: 4px; right: 4px; bottom: 4px;
  height: 0;
  background: linear-gradient(180deg,
    rgba(255, 200, 80, 0.95) 0%,
    rgba(232, 163, 74, 0.95) 50%,
    rgba(168, 124, 32, 0.95) 100%);
  border-radius: 0 0 16px 16px / 0 0 30px 30px;
  animation: beerFill 2.5s cubic-bezier(.4,0,.2,1) forwards;
  box-shadow: inset 0 8px 16px -4px rgba(255,255,255,0.4);
}
@keyframes beerFill {
  0%   { height: 0;    }
  60%  { height: 88%;  }
  70%  { height: 100%; }
  100% { height: 100%; }
}

/* Foam at top — appears after liquid fills */
.beer-evolve__foam {
  position: absolute; left: 0; right: 0; top: -10px;
  height: 40px;
  opacity: 0;
  animation: foamShow 2.5s ease-out forwards;
}
@keyframes foamShow {
  0%, 50% { opacity: 0; transform: translateY(20px); }
  70%, 100% { opacity: 1; transform: translateY(0); }
}
.beer-evolve__bubble {
  position: absolute; bottom: 0;
  width: 30px; height: 30px;
  background: radial-gradient(circle at 30% 30%, #fff, #f5ecdc);
  border-radius: 50%;
  opacity: 0;
  animation: bubbleRise 1.5s ease-out forwards;
  animation-delay: calc(1.6s + var(--d));
  box-shadow: 0 2px 6px rgba(255,255,255,0.4);
}
@keyframes bubbleRise {
  0%   { opacity: 0; transform: translateY(20px) scale(0.5); }
  30%  { opacity: 1; transform: translateY(-10px) scale(1); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.6); }
}

/* Old Pokemon — visible at start, fades during fill */
.beer-evolve__poke {
  position: absolute; top: 50%; left: 50%;
  width: 140px; height: 140px;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.beer-evolve__poke img { width: 100%; height: 100%; object-fit: contain; }
.beer-evolve__poke--from {
  animation: pokeOldFade 2.5s ease-in forwards;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
@keyframes pokeOldFade {
  0%   { opacity: 1; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); }
  50%  { opacity: 0.6; }
  70%  { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  100% { opacity: 0; }
}
.beer-evolve__poke--to {
  opacity: 0;
  animation: pokeNewReveal 1.2s cubic-bezier(.22,1.5,.36,1) forwards;
  animation-delay: 1.6s;
  filter: drop-shadow(0 4px 16px var(--amber-glow));
}
@keyframes pokeNewReveal {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.beer-evolve__label {
  margin-top: 24px;
  font-family: 'Permanent Marker', cursive;
  font-size: 28px;
  color: var(--amber);
  letter-spacing: 0.04em;
  text-shadow: 0 0 16px var(--amber-glow), 0 2px 4px rgba(0,0,0,0.5);
  animation: labelPulse 1.5s ease-in-out infinite;
}
@keyframes labelPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.03); }
}

/* ── Rules modal (shared) ────────────────────────────────── */
.rules-overlay {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(0,0,0,.78);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fadeIn .25s;
}
.rules-modal {
  width: 100%; max-width: 540px; max-height: 86vh;
  background: var(--s0); border: 1px solid var(--line); border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,.7);
}
.rules-modal__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--s1) 0%, var(--s0) 100%);
}
.rules-modal__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; color: var(--amber); font-weight: 600;
}
.rules-modal__close {
  background: transparent; border: 0; color: var(--ink-mute);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.rules-modal__body {
  flex: 1; overflow-y: auto; padding: 8px 18px 18px;
}
.rules-item {
  display: flex; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.rules-item:last-of-type { border-bottom: none; }
.rules-item__icon {
  flex-shrink: 0; font-size: 24px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--s1); border-radius: 10px;
  border: 1px solid var(--line);
}
.rules-item__title {
  color: var(--ink); font-size: 14px; font-weight: 600;
  margin-bottom: 4px;
}
.rules-item__body {
  color: var(--ink-body); font-size: 13px; line-height: 1.65;
}
.rules-item__body strong { color: var(--amber); font-weight: 600; }
.rules-item__body code {
  background: var(--s2); padding: 1px 6px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--amber-hi);
}
.rules-footer {
  text-align: center; padding: 16px 0 4px;
  color: var(--ink-mute); font-size: 11px;
}

/* ── QR modal ─────────────────────────────────────────── */
.qr-modal {
  width: 100%; max-width: 380px;
  background: var(--s0); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,.7);
  animation: revealIn .3s cubic-bezier(.22,1.2,.36,1);
}
.qr-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.qr-modal__title {
  color: var(--ink); font-size: 14px; font-weight: 600;
}
.qr-modal__close {
  background: transparent; border: 0; color: var(--ink-mute);
  font-size: 24px; cursor: pointer; line-height: 1;
}
.qr-modal__body {
  padding: 20px; text-align: center;
}
.qr-modal__img {
  width: 280px; height: 280px;
  background: #f5ecdc; border-radius: 12px;
  margin-bottom: 14px;
  display: block; margin-left: auto; margin-right: auto;
}
.qr-modal__caption {
  color: var(--ink-body); font-size: 13px; line-height: 1.6;
  margin-bottom: 14px;
}
.qr-modal__url {
  display: flex; gap: 6px;
  background: var(--s2); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px;
}
.qr-modal__url input {
  flex: 1; background: transparent; border: 0;
  color: var(--ink-body); font: 11px 'JetBrains Mono', monospace;
  padding: 6px 8px; min-width: 0;
}
.qr-modal__url input:focus { outline: 0; color: var(--amber); }
.qr-modal__url button {
  background: var(--amber); color: #1a1200; border: 0;
  padding: 0 12px; border-radius: 6px; cursor: pointer;
  font-weight: 700;
}

/* ============================================================
   STAFF LOGIN GATE
   ============================================================ */
.staff-login {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; padding-top: max(24px, env(safe-area-inset-top));
  background: radial-gradient(120% 120% at 50% 0%, #1a1714 0%, #0d0b09 100%);
}
.staff-login-box {
  width: 100%; max-width: 340px;
  background: var(--s1); border: 1px solid var(--line);
  border-radius: 18px; padding: 32px 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  text-align: center;
}
.staff-login-logo { margin-bottom: 22px; letter-spacing: .04em; }
.staff-login-logo .brand-name {
  font: 700 22px/1 "Cormorant Garamond", serif; color: var(--ink);
}
.staff-login-logo .brand-bkk {
  font: 600 11px/1 "JetBrains Mono", monospace; color: var(--amber);
  margin-left: 6px; letter-spacing: .2em;
}
.staff-login-title {
  font: 600 17px/1.3 "IBM Plex Sans Thai", sans-serif; color: var(--ink);
  margin-bottom: 4px;
}
.staff-login-sub {
  font: 400 12px/1.4 "IBM Plex Sans Thai", sans-serif; color: var(--ink-mute);
  margin-bottom: 22px;
}
.staff-login-input {
  width: 100%; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 13px 14px; color: var(--ink);
  font: 500 15px/1 "IBM Plex Sans Thai", sans-serif;
  text-align: center; letter-spacing: .04em;
  transition: border-color .15s;
}
.staff-login-input:focus {
  outline: none; border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}
.staff-login-err {
  color: #ff8f7a; font: 500 12px/1.4 "IBM Plex Sans Thai", sans-serif;
  margin-top: 10px;
}
.staff-login-btn {
  width: 100%; margin-top: 18px;
  background: var(--amber); color: #1a1200; border: 0;
  border-radius: 10px; padding: 13px; cursor: pointer;
  font: 700 14px/1 "IBM Plex Sans Thai", sans-serif;
  transition: background .15s, opacity .15s;
}
.staff-login-btn:hover { background: var(--amber-hi); }
.staff-login-btn:disabled { opacity: .55; cursor: default; }

.staff-logout-btn {
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-mute); border-radius: 999px;
  padding: 4px 10px; margin-left: 10px; cursor: pointer;
  font: 600 11px/1 "JetBrains Mono", monospace;
  transition: color .15s, border-color .15s;
}
.staff-logout-btn:hover { color: var(--amber); border-color: var(--amber); }

/* screen-reader-only (a11y label ที่ไม่แสดงผลภาพ) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   GACHA HATCH EFFECT — Pokéball ฟักในขวดเบียร์ 🍺⚽
   ============================================================ */
.poke-roll-overlay { display:flex; align-items:center; justify-content:center; }

/* ── hatch phase ── */
.poke-hatch {
  display:flex; flex-direction:column; align-items:center; gap:18px;
  animation: hatch-in .3s ease both;
}
.poke-hatch.is-burst { animation: hatch-out .35s ease forwards; }
@keyframes hatch-in  { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }
@keyframes hatch-out { to{opacity:0;transform:scale(1.25)} }

.beer-bottle { position:relative; filter:drop-shadow(0 10px 24px rgba(0,0,0,.5)); }
.beer-bottle__neck {
  width:28px; height:40px; margin:0 auto -4px;
  background:linear-gradient(90deg,#5a3a12,#7a531d 40%,#3e2a0e);
  border-radius:7px 7px 2px 2px;
}
.beer-bottle__cap {
  width:34px; height:12px; margin:0 auto;
  background:linear-gradient(#f5c544,#c89a2e); border-radius:4px 4px 2px 2px;
  position:relative; z-index:3;
}
.beer-bottle__body {
  width:104px; height:150px; position:relative; overflow:hidden;
  background:linear-gradient(100deg, rgba(120,80,25,.55), rgba(70,45,12,.78));
  border:2px solid rgba(245,197,68,.35);
  border-radius:18px 18px 26px 26px;
  box-shadow: inset 0 0 24px rgba(0,0,0,.5), inset 14px 0 18px rgba(255,220,140,.18);
}
/* เบียร์เหลืองในขวด */
.beer-bottle__body::before {
  content:''; position:absolute; left:0; right:0; bottom:0; height:78%;
  background:linear-gradient(to top, rgba(245,197,68,.85), rgba(245,197,68,.35));
}
/* ฟองเบียร์ */
.beer-bubble {
  position:absolute; bottom:8%; width:7px; height:7px; border-radius:50%;
  background:rgba(255,245,210,.85);
  animation: bubble-rise linear infinite;
}
@keyframes bubble-rise {
  0%   { transform:translateY(0) scale(.6); opacity:0; }
  20%  { opacity:.9; }
  100% { transform:translateY(-120px) scale(1); opacity:0; }
}

/* Pokéball ในขวด */
.pb {
  position:absolute; left:50%; top:48%; width:54px; height:54px; margin:-27px 0 0 -27px;
  border-radius:50%; z-index:2;
  background:linear-gradient(#ee1515 0 46%, #1a1a1a 46% 54%, #f6f6f6 54% 100%);
  border:3px solid #1a1a1a;
  box-shadow:0 0 18px rgba(245,197,68,.7), inset -4px -4px 8px rgba(0,0,0,.3);
}
.pb::after {
  content:''; position:absolute; top:50%; left:50%; width:14px; height:14px;
  margin:-7px 0 0 -7px; border-radius:50%; background:#fff; border:3px solid #1a1a1a;
  box-shadow:0 0 6px rgba(255,255,255,.9);
}
.pb.is-wiggle { animation: pb-wiggle .45s ease-in-out 3; transform-origin:50% 70%; }
@keyframes pb-wiggle {
  0%,100%{ transform:rotate(0) }
  20%{ transform:rotate(-20deg) } 40%{ transform:rotate(17deg) }
  60%{ transform:rotate(-12deg) } 80%{ transform:rotate(7deg) }
}
.pb.is-pop { animation: pb-pop .35s ease forwards; }
@keyframes pb-pop { to{ transform:scale(2.1); opacity:0; } }

/* แสงวาบตอนแตก */
.hatch-flash {
  position:absolute; inset:0; border-radius:inherit; opacity:0;
  background:radial-gradient(circle at 50% 50%, #fff, rgba(245,197,68,.6) 40%, transparent 70%);
  pointer-events:none;
}
.beer-bottle.is-burst .hatch-flash { animation: flash .4s ease forwards; }
@keyframes flash { 0%{opacity:0} 30%{opacity:1} 100%{opacity:0} }

.poke-hatch__caption {
  font:600 13px/1 "IBM Plex Sans Thai",sans-serif; color:var(--amber);
  letter-spacing:.04em; text-align:center;
}

/* reveal เผยตัวหลังฟัก */
.poke-reveal--gated { display:none; }
.poke-reveal--gated.is-show { display:block; animation: reveal-pop .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes reveal-pop { 0%{opacity:0;transform:scale(.35)} 70%{transform:scale(1.08)} 100%{opacity:1;transform:scale(1)} }

/* ============================================================
   POKéDEX — สมุดสะสม (collection book: 1025 ตัว แบ่งเจน + silhouette)
   ============================================================ */
.poke-dexbook { max-width: 580px; width: 94vw; display:flex; flex-direction:column; max-height: 88vh; }
.dex-book__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 10px 10px; }

.dex-gen { margin-top: 14px; }
.dex-gen:first-child { margin-top: 4px; }
.dex-gen__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 7px 4px; margin-bottom: 6px;
  background: linear-gradient(var(--s1) 70%, transparent);
  backdrop-filter: blur(2px);
}
.dex-gen__title { font: 700 13px/1 "IBM Plex Sans Thai", sans-serif; color: var(--amber); letter-spacing: .02em; }
.dex-gen__meta  { font: 500 11px/1 "JetBrains Mono", monospace; color: var(--ink-mute); }

.dex-gen__grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
}
.dex-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--s0, #1a1714); border: 1px solid var(--line); border-radius: 9px;
  padding: 5px 2px 3px; cursor: pointer; color: var(--ink-mute);
  -webkit-tap-highlight-color: transparent; transition: transform .1s, border-color .12s;
}
.dex-cell__img { width: 46px; height: 46px; object-fit: contain; image-rendering: auto; }
.dex-cell__id  { font: 500 9px/1 "JetBrains Mono", monospace; color: var(--ink-hint, #7c715c); }
.dex-cell__shiny { position: absolute; top: 2px; right: 3px; font-size: 10px; }
/* ป้ายตัวซ้ำ ×N — ตัวซ้ำถูกยุบเป็นเซลล์เดียว ถ้าไม่มีป้ายนี้ผู้เล่นจะไม่รู้ว่าตัวที่ซื้อมาเข้าระบบแล้ว */
.dex-cell__dup { position: absolute; bottom: 13px; right: 2px; font: 700 9px/1 "JetBrains Mono", monospace; color: #06120c; background: var(--amber, #e0a94a); padding: 2px 4px; border-radius: 4px; box-shadow: 0 0 6px rgba(224,169,74,.6); }

/* owned — interactive */
.dex-cell:not(.locked):active { transform: scale(.94); }
.dex-cell:not(.locked):hover { border-color: var(--amber); }
.dex-cell.is-active { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-glow); background: rgba(245,197,68,.08); }
.dex-cell.is-active .dex-cell__id { color: var(--amber); }

/* just-rolled — ไฮไลต์ตัวใหม่ที่เพิ่งสุ่มได้ (เด่นกว่า is-active · เขียว pulse + badge NEW) */
.dex-cell.is-new { border-color: #4caf7a; background: rgba(76,175,122,.1); z-index: 2; animation: dexNewPulse 1.2s ease-in-out infinite; }
.dex-cell.is-new .dex-cell__id { color: #8be0b0; }
.dex-cell__new { position: absolute; top: 2px; left: 3px; font: 700 7px/1 "JetBrains Mono", monospace; letter-spacing: .5px; color: #06120c; background: #4caf7a; padding: 2px 4px; border-radius: 4px; box-shadow: 0 0 8px #4caf7a; }
@keyframes dexNewPulse {
  0%,100% { box-shadow: 0 0 0 2px #4caf7a, 0 0 12px -2px #4caf7a; }
  50%     { box-shadow: 0 0 0 3px #8be0b0, 0 0 22px 0 #4caf7a; }
}

/* locked — เงาดำ (silhouette) */
.dex-cell.locked { cursor: default; opacity: .9; }
.dex-cell.locked .dex-cell__img { filter: brightness(0); opacity: .42; }
.dex-cell.locked .dex-cell__id  { opacity: .5; }
.dex-cell.locked:active { transform: none; }

/* toast เตือนตอนแตะตัวที่ยังไม่มี */
.dex-locktoast {
  position: absolute; left: 50%; bottom: 56px; transform: translate(-50%, 12px);
  background: var(--s2, #2a2520); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px; font: 500 12px/1.3 "IBM Plex Sans Thai", sans-serif;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); max-width: 92%;
}
.dex-locktoast.show { opacity: 1; transform: translate(-50%, 0); }

/* Gen/ปี ตอนสุ่ม + ใน detail */
.poke-reveal__gen {
  font: 600 12px/1 "JetBrains Mono", monospace; color: var(--amber);
  margin-top: 5px; letter-spacing: .03em;
}
.poke-detail__gen {
  font: 500 11px/1 "JetBrains Mono", monospace; color: var(--ink-mute); margin-top: 3px;
}

/* ── Dex 2 หน้า: tabs + sort + expand + 6-col grid ── */
.dex-tabs {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 6px; border-bottom: 1px solid var(--line);
}
.dex-tab {
  background: transparent; border: 1px solid var(--line); color: var(--ink-mute);
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
  font: 600 12px/1 "IBM Plex Sans Thai", sans-serif;
  transition: color .12s, border-color .12s, background .12s;
}
.dex-tab.is-active { color: #1a1200; background: var(--amber); border-color: var(--amber); }
.dex-sort {
  margin-left: auto; background: var(--s2, #2a2520); border: 1px solid var(--line);
  color: var(--ink-mute); border-radius: 999px; padding: 6px 10px; cursor: pointer;
  font: 500 11px/1 "JetBrains Mono", monospace; white-space: nowrap;
}
.dex-sort:hover { color: var(--amber); border-color: var(--amber); }
.dex-gen__grid.dex-grid6 { grid-template-columns: repeat(6, 1fr); }
.dex-grid6 .dex-cell__img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.dex-expand {
  width: 100%; margin-top: 8px; background: var(--s0, #1a1714);
  border: 1px dashed var(--line); color: var(--ink-mute);
  border-radius: 9px; padding: 9px; cursor: pointer;
  font: 600 12px/1 "IBM Plex Sans Thai", sans-serif;
  transition: color .12s, border-color .12s;
}
.dex-expand:hover { color: var(--amber); border-color: var(--amber); }

/* ── Redeem power (power-based economy) ── */
.redeem-power {
  text-align: center; font: 600 13px/1.4 "IBM Plex Sans Thai", sans-serif;
  color: var(--ink); background: var(--s1); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px; margin-bottom: 12px;
}
.redeem-power strong { color: var(--amber); }
.redeem-card__power { color: var(--amber); font: 700 13px/1 "JetBrains Mono", monospace; }
.redeem-card__own { font-size: 11px; color: var(--ink-mute); }
.redeem-card.is-disabled { opacity: .45; cursor: not-allowed; }
.poke-card__power { font: 700 10px/1 "JetBrains Mono", monospace; color: var(--amber); margin-top: 2px; }

/* ── Member Pokémon card (landscape) — staff drawer (กดชื่อ member) ── */
.mpc {
  position: relative; color: #fff; border-radius: 16px; padding: 11px 11px 9px;
  border: 3px solid #f5d76a;
  background: radial-gradient(circle at 25% 0%, rgba(255,255,255,.12) 0%, transparent 35%),
    linear-gradient(165deg, var(--mpc1) 0%, var(--mpc2) 50%, var(--mpc3) 100%);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.55);
  font-family: "IBM Plex Sans Thai", sans-serif;
}
.mpc--blue  { --mpc1:#5fa8da; --mpc2:#2b5f8c; --mpc3:#163a5c; }
.mpc--green { --mpc1:#7dc06a; --mpc2:#3e7a32; --mpc3:#1f4f1a; }
.mpc--red   { --mpc1:#de6e62; --mpc2:#9c3a30; --mpc3:#62211c; }
.mpc--staff { --mpc1:#f5d76a; --mpc2:#a8842a; --mpc3:#5c4a16; }
.mpc__header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.15); }
.mpc__type { background:rgba(0,0,0,.4); color:#f5d76a; padding:3px 9px; border-radius:6px; font:700 10px/1 "JetBrains Mono",monospace; letter-spacing:.18em; border:1px solid rgba(255,255,255,.18); }
.mpc__name-area { min-width:0; }
.mpc__name { font:700 19px/1.05 "Cormorant Garamond",serif; text-shadow:1px 1px 0 rgba(0,0,0,.35); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mpc__code { font:10px "JetBrains Mono",monospace; color:rgba(255,255,255,.65); }
.mpc__pts { text-align:right; background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(220,210,180,.9)); color:#2a1a0a; padding:3px 9px; border-radius:8px; min-width:50px; }
.mpc__pts-lbl { font:700 8px "JetBrains Mono",monospace; letter-spacing:.18em; color:#6b4a1c; }
.mpc__pts-val { font:700 17px/1 "JetBrains Mono",monospace; }
.mpc__body { display:flex; gap:10px; margin-top:9px; align-items:center; }
.mpc__poke { flex:0 0 40%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at center,#f5ecdc 0%,#d9c89e 100%); border:2px solid #f5d76a; border-radius:10px; padding:6px; min-height:116px; position:relative; }
.mpc__poke-img { width:100%; height:92px; object-fit:contain; filter:drop-shadow(0 3px 6px rgba(0,0,0,.3)); cursor:pointer; transition:transform .15s ease; }
.mpc__poke-img.is-animated { image-rendering:pixelated; image-rendering:-moz-crisp-edges; }
.mpc__poke-id { font:600 9px/1.3 "JetBrains Mono",monospace; color:#2a1a0a; text-align:center; margin-top:4px; }
.mpc__poke-empty { color:#9c8f78; font-size:34px; text-align:center; }
.mpc__poke-empty-t { font-size:10px; margin-top:2px; }
.mpc__shiny { position:absolute; top:4px; right:5px; font:700 8px "JetBrains Mono",monospace; color:#b8860b; }
.mpc__info { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.mpc__stats { display:flex; flex-direction:column; gap:6px; font:600 12px/1 "IBM Plex Sans Thai",sans-serif; }
.mpc__stats span { background:rgba(0,0,0,.25); border-radius:6px; padding:6px 9px; }
.mpc__priv { background:rgba(0,0,0,.22); border-radius:8px; padding:10px 12px; margin-top:9px; font:500 12.5px/1.75 "IBM Plex Sans Thai",sans-serif; }
.mpc__priv-lbl { font:700 9px/1 "JetBrains Mono",monospace; letter-spacing:.1em; color:#f5d76a; text-align:center; margin-bottom:5px; opacity:.85; }
.mem-d-controls { margin-top:12px; }