/* Monsnich Card Game — ธีมสว่าง "Light Card Portal" (ไม่พึ่งอินเทอร์เน็ต; ฟอนต์ Kanit/Noto Sans Thai เป็นตัวเลือกเสริม) */
:root {
  --bg: #F4F7FB; --panel: #FFFFFF; --text: #1E293B; --muted: #64748B; --line: #E2E8F0;
  --p1: #2563EB; --p1-soft: #DBEAFE; --p2: #E11D48; --p2-soft: #FFE4E6;
  --gold: #F59E0B; --good: #15803D; --bad: #BE123C;
  --radius: 16px; --shadow: 0 4px 16px rgba(15, 23, 42, .06);
  /* ความกว้างการ์ดบนกระดาน: เลือกค่าที่น้อยกว่าระหว่าง "ให้ 4 แถวพอดีความสูงจอ" กับ "ให้มือ+กระดานพอดีความกว้างจอ"
     (ครึ่งจอ 700–1100px จึงไม่ลีบและไม่ล้น ; log จะย้ายลงล่างเอง) */
  --bw: clamp(64px, min(calc(((100vh - 250px) / 4 - 8px) / 1.7), calc((100vw - 190px) / 6.9)), 124px);
  --hw: calc(var(--bw) * .7);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5;
  font-family: 'Kanit', 'Noto Sans Thai', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif; }
[hidden] { display: none !important; }
.muted { color: var(--muted); font-size: 13.5px; }
.bad { color: var(--bad); } .good { color: var(--good); }

/* ---------- หัวเว็บ / ปุ่ม / ฟอร์ม ---------- */
header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
h1 { margin: 0; font-size: 20px; font-weight: 600; color: #1E3A8A; }
h1 small { color: var(--muted); font-weight: 400; font-size: 14px; margin-left: 8px; }
.legend { font-size: 12.5px; color: var(--muted); flex: 1; min-width: 180px; }
.c1 { color: var(--p1); } .c2 { color: var(--p2); }
header label { font-size: 13.5px; }
button { min-height: 34px; background: #fff; color: var(--text); border: 1px solid #CBD5E1; border-radius: 10px; padding: 6px 14px; cursor: pointer; font: inherit; font-size: 14px; transition: background .15s, box-shadow .15s; }
button:hover { background: #F1F5F9; }
button.primary { background: linear-gradient(135deg, #2563EB, #1D4ED8); border-color: #1D4ED8; color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(37, 99, 235, .3); }
button.primary:hover { background: linear-gradient(135deg, #1D4ED8, #1E40AF); }
button:disabled { opacity: .45; cursor: default; }
.mini { min-height: 0; padding: 1px 9px; font-size: 12px; margin-left: 6px; }
select, #bName, #bSearch, #gSearch, #joinCode { background: #fff; color: var(--text); border: 1px solid #CBD5E1; border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 14px; }
input[type=checkbox], input[type=radio] { accent-color: var(--p1); }

/* ---------- หน้า Lobby ---------- */
.panel { max-width: 1100px; margin: 14px auto 28px; padding: 6px 18px; }
.panel h2 { margin: 14px 0 10px; font-size: 20px; font-weight: 600; }
fieldset { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 14px; padding: 12px 18px 14px; line-height: 2; }
legend { color: var(--muted); font-size: 13.5px; padding: 0 8px; }
fieldset label { margin-right: 16px; }
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.banner { display: flex; align-items: center; gap: 16px; min-height: 86px; padding: 14px 20px; border: 0; border-radius: var(--radius); text-align: left; color: #fff; box-shadow: 0 6px 20px rgba(15, 23, 42, .15); transition: transform .15s, box-shadow .15s; }
.banner:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 23, 42, .2); }
.banner.tut { background: linear-gradient(135deg, #2563EB, #7C3AED); }
.banner.gal { background: linear-gradient(135deg, #E11D48, #F59E0B); }
.banner .b-ico { font-size: 38px; line-height: 1; }
.banner b { display: block; font-size: 19px; font-weight: 600; }
.banner small { display: block; opacity: .92; font-size: 13.5px; }
fieldset.modes { background: transparent; border: 0; box-shadow: none; padding: 0; }
fieldset.modes legend { display: none; }
.modegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.modecard { position: relative; margin: 0 !important; display: block; }
.modecard input { position: absolute; opacity: 0; pointer-events: none; }
.mc { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 10px; background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer; text-align: center; transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; }
.mc:hover { transform: translateY(-2px); }
.mc-ico { font-size: 38px; line-height: 1.1; }
.mc b { font-size: 17px; font-weight: 600; } .mc small { color: var(--muted); font-size: 13px; }
.modecard input:checked + .mc { border-color: var(--p1); background: #EFF6FF; box-shadow: 0 0 0 4px rgba(37, 99, 235, .15); }
.modecard input:focus-visible + .mc { outline: 3px solid var(--gold); }
#start { width: 100%; min-height: 52px; font-size: 19px; border-radius: 14px; }
.bbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }

/* ---------- แถบสถานะ / คำถาม / รายละเอียด / คะแนน ---------- */
#status { margin: 12px 18px 0; padding: 9px 16px; border-radius: 12px; font-weight: 600; font-size: 15.5px; text-align: center; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
#status.p1 { border-left: 6px solid var(--p1); } #status.p2 { border-left: 6px solid var(--p2); }
#status.over { background: #FEF3C7; border-color: var(--gold); color: #92400E; font-size: 18px; }
#prompt { margin: 8px 18px 0; padding: 8px 14px; border-radius: 12px; background: #FFFBEB; border: 2px solid var(--gold); color: #78350F; text-align: center; font-size: 14.5px; }
#netBanner { margin: 8px 18px 0; padding: 8px 14px; border-radius: 12px; background: var(--p2-soft); border: 1px solid var(--p2); color: #881337; text-align: center; font-size: 14px; }
#topbar { position: relative; }
#detail { margin: 10px 18px 14px; padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14.5px; line-height: 1.6; color: var(--text); white-space: pre-line; min-height: 4.8em; }
#score { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 10px; flex-wrap: wrap; }
.sc { display: flex; align-items: center; gap: 12px; padding: 4px 18px; border-radius: 999px; background: var(--panel); border: 2px solid var(--line); box-shadow: var(--shadow); font-size: 14.5px; }
.sc b { font-size: 28px; line-height: 1.1; }
.sc.p1 { border-color: var(--p1); } .sc.p2 { border-color: var(--p2); }
.sc.p1.turn { background: var(--p1-soft); } .sc.p2.turn { background: var(--p2-soft); }
.sc.win { background: #FEF3C7; border-color: var(--gold); }
.vs { color: var(--muted); font-size: 12.5px; }
.first { color: #B45309; font-size: 11.5px; font-style: normal; font-weight: 700; }

/* ---------- เลย์เอาต์เกม ---------- */
main { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 14px; padding: 0 18px 8px; }
.hand { padding: 10px; border-radius: var(--radius); background: var(--panel); border: 2px solid var(--line); box-shadow: var(--shadow); }
.hand.p1 { border-color: #BFDBFE; } .hand.p2 { border-color: #FECDD3; }
.hand.p1.turn { border-color: var(--p1); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12), var(--shadow); }
.hand.p2.turn { border-color: var(--p2); box-shadow: 0 0 0 4px rgba(225, 29, 72, .12), var(--shadow); }
.hand h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.hand h2 small { display: block; color: var(--muted); font-weight: 400; font-size: 12.5px; }
.cards { display: grid; grid-template-columns: repeat(2, var(--hw)); gap: 5px; }
.readybox { text-align: center; padding: 16px 8px; background: #FFFBEB; border: 2px dashed var(--gold); border-radius: 12px; width: calc(var(--hw) * 2 + 5px); font-size: 14px; line-height: 1.55; }
.readybox button { margin-top: 6px; }

#board { display: grid; grid-template-columns: repeat(4, var(--bw)); gap: 6px; padding: 10px; background: #E8EEF7; border: 1px solid #D5DEEC; border-radius: var(--radius); box-shadow: var(--shadow); }
.cell { min-height: calc(var(--bw) * 1.395 + max(calc(var(--bw) * .3), 27px) - 2px); border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px #E2E8F0; display: flex; }
.cell.open { background: #FFFBEB; box-shadow: inset 0 0 0 3px var(--gold), 0 0 14px 2px rgba(245, 158, 11, .5); cursor: pointer; }
.cell.open:hover { background: #FEF3C7; }
.cell.chosen { box-shadow: inset 0 0 0 5px var(--p1), 0 0 14px rgba(37, 99, 235, .5); }
.cell.open .card { box-shadow: 0 0 0 2px var(--gold), 0 0 14px 2px rgba(245, 158, 11, .7); }
.cell.focus { box-shadow: inset 0 0 0 3px #FB923C; }
.cell.hint { background: #F0FDF4; box-shadow: inset 0 0 0 3px #22C55E, 0 0 14px 2px rgba(34, 197, 94, .6); animation: pulse 1.1s ease-in-out infinite; }

/* ---------- การ์ด ---------- */
.card { --w: var(--bw); --ih: max(calc(var(--w) * .3), 27px); width: var(--w); border: 3px solid var(--c); border-radius: 10px; background: var(--cd); overflow: hidden; position: relative;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .2); user-select: none; transition: border-color .3s, box-shadow .3s, background .3s; }
.card.p1 { --c: var(--p1); --cd: var(--p1-soft); }
.card.p2 { --c: var(--p2); --cd: var(--p2-soft); }
.hand .card { --w: var(--hw); }
.art { position: relative; aspect-ratio: 600 / 837; background: #fff; }
.art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.art img.flip { transform: rotate(180deg); }
.arrs i { position: absolute; transform: translate(-50%, -50%) rotate(var(--r)); font-style: normal; line-height: 1;
  font-size: max(12px, calc(var(--w) * .18)); color: var(--c);
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px rgba(15, 23, 42, .6); transition: color .3s; }
.info { height: var(--ih); display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 4px;
  padding: 0 5px; background: var(--c); color: #fff; transition: background .3s; }
.nm { font-size: max(10px, calc(var(--w) * .115)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el { font-size: max(9.5px, calc(var(--w) * .105)); white-space: nowrap; }
.pw { grid-row: 1 / 3; grid-column: 2; font-size: max(14px, calc(var(--w) * .22)); font-weight: 800; background: #fff; color: var(--text); border-radius: 6px; padding: 0 .35em; line-height: 1.35; }
.pw::before { content: '⚔'; font-size: .6em; margin-right: .2em; opacity: .7; }
.pw.buff { color: #15803D; } .pw.debuff { color: #B91C1C; }
.ward { position: absolute; top: 3px; right: 3px; font-size: max(14px, calc(var(--w) * .2)); line-height: 1; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 1px 2px rgba(15, 23, 42, .5)); }
.card.pick { cursor: pointer; transition: transform .12s, box-shadow .2s; }
.card.pick:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(15, 23, 42, .28); }
.card.sel { outline: 3px solid var(--gold); transform: translateY(-4px) scale(1.04); z-index: 2; }
.card.dim { opacity: .75; }
.card.back { aspect-ratio: 1 / 1.69; background: repeating-linear-gradient(45deg, var(--cd) 0 7px, #fff 7px 14px); }
.card.hint { outline: 3px solid #22C55E; box-shadow: 0 0 16px 3px rgba(34, 197, 94, .7); animation: pulse 1.1s ease-in-out infinite; }
#board .card.weak { outline: 3px solid #16A34A; box-shadow: 0 0 0 2px #16A34A, 0 0 16px 4px rgba(22, 163, 74, .6); z-index: 1; }
#board .card.weak::after { content: '✔ ชนะทาง'; position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: max(11px, calc(var(--w) * .13)); font-weight: 700; color: #fff; background: rgba(22, 163, 74, .92); padding: 1px 0; }
@keyframes drop { from { transform: scale(1.25); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes flash { 0% { filter: brightness(1.5) saturate(1.8); } 100% { filter: none; } }
@keyframes pulse { 50% { filter: brightness(1.12); } }
.card.drop { animation: drop .3s ease-out; }
.card.flash { animation: flash .9s ease-out; }

/* ---------- Action Log ---------- */
#logbox { width: 310px; height: calc(var(--bw) * 6.9 + 30px); min-height: 280px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; }
#logbox h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
#log { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; font-size: 13.5px; line-height: 1.5; }
#log li { padding: 7px 10px; margin-bottom: 7px; border-left: 4px solid; background: #F8FAFC; border-radius: 0 10px 10px 0; }
#log li.p1 { border-color: var(--p1); } #log li.p2 { border-color: var(--p2); }
#log .no { font-weight: 700; }
#log .place { font-weight: 600; }
#log .cap { color: #15803D; } #log .fail { color: #B45309; } #log .none { color: #64748B; }
#log .skill { color: #7C3AED; font-weight: 600; } #log .info { color: #1D4ED8; }

/* ---------- Deck Builder / คลังการ์ด ---------- */
#bInfo { margin: 6px 0; font-size: 14.5px; }
#bSel { display: flex; flex-wrap: wrap; gap: 6px; min-height: 66px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.chip { display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; background: #F1F5F9; border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.chip img { width: 36px; height: 50px; object-fit: cover; border-radius: 4px; }
.chip:hover { background: var(--p2-soft); }
#bGrid, #gGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 7px; overflow-y: auto; padding: 8px; background: #E8EEF7; border-radius: 12px; }
#bGrid { max-height: 52vh; } #gGrid { max-height: 62vh; margin: 6px 0; }
.bc { position: relative; cursor: pointer; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .15); }
.bc img { display: block; width: 100%; aspect-ratio: 600 / 837; object-fit: cover; }
.bc .st { position: absolute; top: 2px; right: 2px; background: rgba(30, 41, 59, .85); color: #FDE047; font-size: 11.5px; padding: 0 5px; border-radius: 5px; }
.bc .rr { position: absolute; top: 2px; left: 2px; background: rgba(30, 41, 59, .85); color: #BFDBFE; font-size: 10.5px; padding: 0 5px; border-radius: 5px; }
.bc .nm { display: block; font-size: 11px; text-align: center; padding: 2px; background: #fff; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc.selected { border-color: var(--p1); box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); }
.bc.blocked { opacity: .3; cursor: not-allowed; }

/* ---------- Modal (กติกา / คลังการ์ด / รายละเอียด) ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 12px; }
.modal.top { z-index: 60; }
.modal-box { width: min(860px, 100%); max-height: 92vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 60px rgba(15, 23, 42, .25); padding: 16px 20px; }
.modal-box.wide { width: min(1100px, 100%); }
.tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; position: sticky; top: -16px; background: var(--panel); padding: 8px 0; z-index: 2; }
.tabs button.on { background: var(--p1); border-color: var(--p1); color: #fff; }
.tabs #helpClose, .tabs #galleryClose, .tabs #cardClose { margin-left: auto; }
.modal h3 { margin: 14px 0 4px; font-size: 16px; font-weight: 600; }
.modal ul, .modal ol { margin: 4px 0; padding-left: 24px; line-height: 1.8; font-size: 14.5px; }

/* วงล้อธาตุ + เมทริกซ์ */
.elwrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
#elWheel { flex: 0 1 470px; min-width: 280px; width: 100%; max-width: 520px; margin: 0 auto; }
#elWheel svg { width: 100%; height: auto; display: block; }
.elside { flex: 1 1 260px; min-width: 240px; }
.wring { fill: none; stroke: #CBD5E1; stroke-width: 2; stroke-dasharray: 4 7; }
.wnode { cursor: pointer; transition: opacity .15s; outline: none; }
.wnode circle { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 2px 4px rgba(15, 23, 42, .3)); transition: stroke .15s, stroke-width .15s; }
.wnode:hover circle, .wnode:focus-visible circle { stroke: #1E293B; stroke-width: 4; }
.wnode.sel circle { stroke: #1E293B; stroke-width: 6; }
.wnode.win circle { stroke: #16A34A; stroke-width: 6; }
.wnode.lose circle { stroke: #E11D48; stroke-width: 6; }
.wnode.dim { opacity: .38; }
.wico { font-size: 22px; pointer-events: none; }
.wname { font-size: 12.5px; font-weight: 600; fill: #1E293B; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
#wArrows { pointer-events: none; }
.warrow { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.warrow.win { stroke: #16A34A; } .warrow.lose { stroke: #E11D48; }
#elChips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.elchip { min-height: 30px; padding: 3px 10px; font-size: 13px; }
.elchip.on { background: #FEF3C7; border-color: var(--gold); font-weight: 600; }
#elInfo { padding: 12px 14px; background: #F8FAFC; border: 1px solid var(--line); border-radius: 12px; line-height: 2.1; }
.elhead { font-size: 20px; font-weight: 600; }
.pill { display: inline-block; padding: 1px 11px; border-radius: 999px; font-size: 13.5px; }
.pill.win { background: #DCFCE7; border: 1px solid #16A34A; color: #14532D; }
.pill.lose { background: var(--p2-soft); border: 1px solid var(--p2); color: #881337; }
.mxscroll { overflow-x: auto; padding-bottom: 6px; }
#elTable { border-collapse: separate; border-spacing: 2px; font-size: 13px; }
#elTable th { font-weight: 500; padding: 2px 4px; white-space: nowrap; text-align: center; }
#elTable th[data-r] { position: sticky; left: 0; z-index: 1; background: var(--panel); text-align: left; padding-right: 8px; }
#elTable th.corner { color: var(--muted); font-size: 11px; text-align: left; position: sticky; left: 0; background: var(--panel); z-index: 2; }
#elTable td.mx { width: 30px; height: 30px; min-width: 30px; text-align: center; border-radius: 7px; background: #F1F5F9; color: #94A3B8; cursor: pointer; }
#elTable td.mx.win { background: #DCFCE7; color: #15803D; font-weight: 800; }
#elTable td.mx.lose { background: var(--p2-soft); color: #BE123C; font-weight: 800; }
#elTable .hov { box-shadow: inset 0 0 0 2px #64748B; background-color: #E2E8F0; }
#elTable td.mx.win.hov { background-color: #BBF7D0; } #elTable td.mx.lose.hov { background-color: #FECDD3; }
#elTable .sel { box-shadow: inset 0 0 0 2px var(--p1); }
#elTable th.hov, #elTable th.sel { color: var(--p1); font-weight: 700; }

/* รายละเอียดการ์ด */
#cardBody { display: flex; gap: 18px; flex-wrap: wrap; }
.cm-art { flex: 0 1 300px; } .cm-art img { width: 100%; border-radius: 12px; display: block; background: #fff; box-shadow: var(--shadow); }
.cm-info { flex: 1 1 280px; min-width: 0; } .cm-info h3 { margin: 0 0 6px; font-size: 22px; } .cm-info h3 small { color: var(--muted); font-size: 13.5px; }
.cm-table { border-collapse: collapse; font-size: 14.5px; } .cm-table th { text-align: left; color: var(--muted); font-weight: 400; padding: 2px 16px 2px 0; white-space: nowrap; } .cm-table td { padding: 2px 0; }
.cm-sec { margin-top: 12px; font-size: 14.5px; }
.cm-skill { padding: 10px 12px; background: #F1F5F9; border-radius: 10px; margin-top: 4px; line-height: 1.65; }
.dirgrid { display: grid; grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(3, 38px); gap: 3px; margin-top: 6px; }
.dirgrid i { display: flex; align-items: center; justify-content: center; background: #F1F5F9; border-radius: 6px; font-style: normal; color: #CBD5E1; }
.dirgrid i.on { background: #DBEAFE; color: var(--p1); font-size: 22px; rotate: var(--r); }
.dirgrid i.mid { background: #1E293B; color: #fff; font-weight: 800; font-size: 18px; }
.cm-vars { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .cm-vars button.on { background: #FEF3C7; border-color: var(--gold); font-weight: 700; }
.cm-main { margin-top: 4px; line-height: 1.8; }

/* ---------- สอนเล่น ---------- */
#tutBox { margin: 8px 18px 0; padding: 12px 16px; border-radius: 14px; background: #EFF6FF; border: 2px solid var(--p1); box-shadow: var(--shadow); }
.tuthead { display: flex; justify-content: space-between; gap: 8px; font-size: 14.5px; margin-bottom: 4px; color: #1E3A8A; }
.tuttext { font-size: 15.5px; line-height: 1.65; margin-bottom: 8px; }
.tutbtns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- ตัวซูมการ์ดเมื่อชี้ ---------- */
#cardZoom { position: fixed; z-index: 200; width: 270px; max-height: calc(100vh - 16px); overflow: hidden; background: var(--panel); border: 1px solid #CBD5E1; border-radius: 16px; box-shadow: 0 18px 50px rgba(15, 23, 42, .35); pointer-events: none; }
.zimg { width: 100%; display: block; max-height: 50vh; object-fit: contain; background: #fff; }
.zbody { padding: 10px 14px 12px; }
.zname { font-size: 17px; font-weight: 600; line-height: 1.3; } .zstar { color: #D97706; font-size: 13px; }
.zmeta { font-size: 13.5px; color: var(--muted); }
.zrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0; }
.zpow { font-weight: 800; font-size: 20px; } .zpow.buff { color: #15803D; } .zpow.debuff { color: #B91C1C; }
.zward { font-size: 13px; background: #DBEAFE; border-radius: 999px; padding: 0 8px; }
.dirgrid.mini { grid-template-columns: repeat(3, 17px); grid-template-rows: repeat(3, 17px); gap: 2px; margin: 0 0 0 auto; }
.dirgrid.mini i { font-size: 12px; border-radius: 4px; }
.zskill { font-size: 14.5px; line-height: 1.6; background: #F1F5F9; border-radius: 10px; padding: 8px 10px; }
@media (hover: none) { #cardZoom, #zoom-wrap { display: none !important; } .card.pick:hover { transform: none; } }

/* ---------- จอเล็ก / มือถือ ---------- */
@media (max-width: 860px) {
  :root { --bw: calc((100vw - 40px) / 4); --hw: 60px; }
  header { padding: 8px 10px; gap: 6px 8px; }
  h1 { font-size: 16px; } h1 small, .legend { display: none; }
  button { min-height: 42px; padding: 6px 12px; }
  .panel { padding: 4px 10px; }
  fieldset { padding: 10px 12px; }
  .banner { padding: 12px 14px; } .banner b { font-size: 17px; }
  select, #bName, #bSearch, #gSearch, #joinCode { min-height: 40px; max-width: 100%; }
  #topbar { position: sticky; top: 0; z-index: 20; background: var(--bg); padding-bottom: 4px; }
  #status { margin: 6px 8px 0; font-size: 15px; padding: 7px 10px; }
  #prompt { margin: 4px 8px 0; }
  #score { gap: 8px; padding: 6px; }
  .sc { padding: 2px 12px; } .sc b { font-size: 24px; } .vs { display: none; }
  main { flex-direction: column; align-items: center; gap: 8px; padding: 0 8px 12px; }
  #game[data-me="1"] #hand1, #game[data-me="2"] #hand2 { order: 3; }
  #game[data-me="1"] #hand2, #game[data-me="2"] #hand1 { order: 1; }
  #board { order: 2; gap: 4px; padding: 6px; }
  #logbox { order: 4; width: 100%; height: 220px; }
  .hand { width: 100%; padding: 6px; }
  .hand .cards { display: flex; overflow-x: auto; gap: 4px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .hand .card { flex: 0 0 var(--hw); }
  .readybox { width: 100%; }
  #detail { position: sticky; bottom: 0; z-index: 20; margin: 0; border-radius: 12px 12px 0 0; border-bottom: 0; font-size: 14px; max-height: 30vh; overflow-y: auto; min-height: 4.4em; }
  #netBanner { margin: 4px 8px 0; }
  #tutBox { margin: 4px 8px 0; padding: 8px 10px; } .tuttext { font-size: 14.5px; }
  #bGrid, #gGrid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } #bGrid { max-height: 45vh; } #gGrid { max-height: 50vh; }
  .modal { padding: 0; align-items: flex-end; } .modal-box, .modal-box.wide { border-radius: 20px 20px 0 0; max-height: 94vh; padding: 12px 14px; }
  .cm-art { flex-basis: 100%; max-width: 260px; margin: 0 auto; }
  #elTable { font-size: 12px; } #elTable td.mx { width: 26px; height: 26px; min-width: 26px; }
}

/* ---------- เล่นออฟไลน์ (PWA) ---------- */
/* ลากการ์ดวางบนกระดาน */
.dragghost { position: fixed !important; z-index: 400; margin: 0 !important; pointer-events: none; opacity: .92; transform: translate(-50%, -55%) rotate(-4deg) scale(1.05); box-shadow: 0 14px 30px rgba(15, 23, 42, .4) !important; }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none; }
.cell.open.dropover { background: #FDE68A; box-shadow: inset 0 0 0 4px #16A34A, 0 0 18px 4px rgba(22, 163, 74, .55); }
.zhint { margin-top: 8px; padding: 7px 10px; border-radius: 10px; font-size: 14px; line-height: 1.5; font-weight: 600; }
.zhint.ok { background: #DCFCE7; color: #166534; }
.zhint.warn { background: #FEF3C7; color: #92400E; }
#offlineBox progress { width: min(100%, 360px); height: 14px; vertical-align: middle; margin: 0 8px; accent-color: var(--p1); }
#dlHelp { margin-top: 4px; line-height: 1.6; }