/* =====================================================================
   การ์ดจิ๋ว 72x96 (หน้าร่างหัวข้อ O · 1 ต.ค. จ๊อบเลือก A ตัวละคร 1 เท่า ไม่มีแถบดำใต้ชื่อ)
   ใช้ที่ช่องทีม Tower + หน้าประตู · กรอบ = ขอบของกรอบ Gemini (cardart_*_mini.png ตัดแผ่นป้ายชื่อออก ขอบล่าง = ขอบบนกลับหัว)
   ===================================================================== */
body[data-zone] .mc { --frame: url(../assets/ui/v2/cardart_common_mini.png); position: relative; width: 72px; height: 96px; box-sizing: border-box; cursor: pointer; flex: none;
  border-style: solid; border-width: 6px; border-image: var(--frame) 32 35 32 35 / 6px stretch;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)); transition: transform .15s; }
body[data-zone] .mc:hover { transform: translateY(-2px); }
body[data-zone] .mc.t-common    { --frame: url(../assets/ui/v2/cardart_common_mini.png);    --glow: #d8d4c8; --glow2: #3a3c44; --name: #f4f0e6; }
body[data-zone] .mc.t-fine      { --frame: url(../assets/ui/v2/cardart_fine_mini.png);      --glow: #7fb069; --glow2: #1e3a22; --name: #d2f4b4; }
body[data-zone] .mc.t-rare      { --frame: url(../assets/ui/v2/cardart_rare_mini.png);      --glow: #6f8fd0; --glow2: #1c2a50; --name: #cfe0ff; }
body[data-zone] .mc.t-legendary { --frame: url(../assets/ui/v2/cardart_legendary_mini.png); --glow: #e0b24c; --glow2: #4a3510; --name: #fff2c0; }
body[data-zone] .mc.t-mystical  { --frame: url(../assets/ui/v2/cardart_mystical_mini.png);  --glow: #e0453a; --glow2: #4a1410; --name: #ffc6b8; }
body[data-zone] .mc .mc-art { position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 55%, var(--glow) 0, var(--glow2) 50%, #0a0c11 85%); box-shadow: inset 0 0 0 1px #05070b; }
body[data-zone] .mc .mc-name { position: absolute; left: 0; right: 0; bottom: 2px; height: 14px; font: 10px/14px var(--pix); color: var(--name); text-align: center;
  white-space: nowrap; overflow: hidden; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000; }
body[data-zone] .mc .mc-stage { position: absolute; left: 50%; bottom: 24px; width: 0; height: 0;
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); }
body[data-zone] .mc .mc-stage .actor { left: 0 !important; top: 0 !important; transition: none; }
body[data-zone] .mc .actor .tag, body[data-zone] .mc .actor .say, body[data-zone] .mc .actor::after { display: none !important; }
body[data-zone] .mc .actor.aura .layer { filter: none !important; }
body[data-zone] .mc .actor.aura::before, body[data-zone] .mc .actor.aura::after { display: none !important; }

/* ช่องทีม Tower: 4 ใบแถวเดียว */
body[data-zone] .tw-team { display: flex !important; gap: 4px !important; justify-content: center; grid-template-columns: none !important; }
body[data-zone] .tw-team .tw-m { width: 72px !important; height: 96px !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important;
  box-shadow: none !important; outline: none !important; display: block !important; min-height: 0 !important; overflow: visible !important; }
body[data-zone] .tw-team .tw-m.empty { box-sizing: border-box; border: 2px dashed var(--in-lo, #2c5070) !important; background: var(--in-bg, #08131f) !important; display: flex !important;
  align-items: center; justify-content: center; font: 11px var(--pix); color: #7f98b0; }
/* หน้าประตูตอนกาง: การ์ดจิ๋วแทนรูปเล็ก */
body[data-zone] .gate-row { display: flex !important; gap: 8px; align-items: flex-start; }
body[data-zone] .gate-row > .mc { margin-top: 2px; }

/* แท็บ Villagers ใช้การ์ดจิ๋ว (1 ต.ค. จ๊อบ: การ์ดใบเต็มรก) แถวละ 6 ใบ · เลขเลเวลมุมบนซ้าย · แถบเลือดตอนไม่เต็ม */
body[data-zone] #villagers .vgrid { grid-template-columns: repeat(auto-fill, 72px) !important; gap: 8px 4px !important; justify-content: center; }
body[data-zone] #villagers .mc.away { opacity: .75; }
body[data-zone] .mc .mc-lv { position: absolute; left: 2px; top: 2px; min-width: 14px; height: 12px; padding: 0 2px; box-sizing: border-box;
  font: 10px/12px var(--pix); color: #fff; text-align: center; background: rgba(5,7,11,.8); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--glow); }
body[data-zone] .mc .mc-hp { position: absolute; left: 4px; right: 4px; bottom: 1px; height: 2px; background: #2a0c0a; }
body[data-zone] .mc .mc-hp i { display: block; height: 100%; background: #d9573f; }

/* ลากการ์ดไปจัดงาน (1 ต.ค. จ๊อบ) · การ์ดลอยตามเมาส์ · ที่วางได้ขอบเขียว วางไม่ได้ขอบแดง */
body[data-zone] .drag-ghost { position: fixed !important; z-index: 500; pointer-events: none; margin: 0 !important; transform: rotate(-4deg) scale(1.08) !important;
  filter: drop-shadow(0 10px 8px rgba(0,0,0,.6)) !important; transition: none !important; }
body[data-zone] .drag-src { opacity: .35; }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none !important; }
body[data-zone] .drop-ok { outline: 3px solid #7fc45a !important; outline-offset: 2px; box-shadow: 0 0 14px rgba(127,196,90,.6) !important; }
body[data-zone] .drop-bad { outline: 3px solid #d9573f !important; outline-offset: 2px; }
body[data-zone] .actor.drop-ok, body[data-zone] .actor.drop-bad { outline-offset: 0; }