/* =====================================================================
   ธีมแบบโปรแกรม TrafficSim: พื้นดำ เส้นบาง ขอบเหลี่ยม · IBM Plex Sans Thai + JetBrains Mono
   โหลดต่อจาก style.css เพื่อทับสีและรูปทรงเดิม
   ===================================================================== */
@font-face { font-family: "Plex Thai"; font-weight: 400; src: url(fonts/ibm-plex-sans-thai-thai-400-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 500; src: url(fonts/ibm-plex-sans-thai-thai-500-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 600; src: url(fonts/ibm-plex-sans-thai-thai-600-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 700; src: url(fonts/ibm-plex-sans-thai-thai-700-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 400; src: url(fonts/ibm-plex-sans-thai-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Plex Thai"; font-weight: 500; src: url(fonts/ibm-plex-sans-thai-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Plex Thai"; font-weight: 600; src: url(fonts/ibm-plex-sans-thai-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Plex Thai"; font-weight: 700; src: url(fonts/ibm-plex-sans-thai-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "JB Mono"; font-weight: 400; src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "JB Mono"; font-weight: 500; src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "JB Mono"; font-weight: 700; src: url(fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2"); }

:root {
  --bg: #0D0E10; --bg2: #121316; --panel: #16171A; --panel2: #1D1E22; --hover: #222328;
  --line: #2A2B30; --line2: #3A3B41; --text: #EDEAE6; --muted: #8C8782; --dim: #5F5B57;
  --red: #EF5A45; --maroon: #E5533C; --orange: #F08A24; --yellow: #F5C451; --ok: #45C08D; --white: #F2F0EC;
  --sans: "Plex Thai", "Leelawadee UI", Tahoma, sans-serif;
  --mono: "JB Mono", "Plex Thai", Consolas, monospace;
  font-family: var(--sans);
}
body { background: var(--bg); -webkit-font-smoothing: antialiased; line-height: 1.5; }
::selection { background: var(--orange); color: #111; }
input, select { border-radius: 0; background: var(--bg); border-color: var(--line2); }
input:focus, select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }

/* ปุ่ม: ขอบบาง พื้นใส · ปุ่มหลักสีขาว */
.btn { border-radius: 0; background: transparent; border-color: var(--line2); font-weight: 500; }
.btn:hover { background: var(--hover); border-color: var(--text); }
.btn.primary { background: var(--white); border-color: var(--white); color: #0D0E10; font-weight: 700; }
.btn.primary:hover { background: #fff; filter: none; }
.btn.on { background: var(--orange); border-color: var(--orange); color: #111; }
.btn.danger { border-color: rgba(239, 90, 69, .6); color: var(--red); }
.mini { border-radius: 0; background: transparent; border-color: var(--line2); }
.pill { border-radius: 0; background: transparent; border-color: var(--line2); font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; }
#toast { background: var(--white); color: #0D0E10; border-radius: 0; font-weight: 500; }

/* แถบบนแบ่งช่องด้วยเส้น */
.bar { background: var(--bg); border-bottom: 1px solid var(--line); min-height: 52px; padding: 0; gap: 0; align-items: stretch; }
.bar > * { display: flex; align-items: center; }
.bar .brand { font-family: var(--mono); font-weight: 700; letter-spacing: .06em; color: var(--text); padding: 0 18px; border-right: 1px solid var(--line); text-decoration: none; }
.bar .brand::first-letter { color: var(--orange); }
.room-code { border-radius: 0; border: none; border-right: 1px solid var(--line); background: transparent; padding: 0 16px; font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; color: var(--muted); }
.room-code b { color: var(--orange); font-size: 1rem; }
.room-code:hover { background: var(--hover); color: var(--text); }
.conn { margin: 0 14px; border-radius: 0; width: 8px; height: 8px; align-self: center; }
.turn { padding: 0 14px; font-size: .9rem; }
.tools { gap: 0; align-items: stretch; }
.tools .btn { border: none; border-left: 1px solid var(--line); padding: 0 16px; color: var(--muted); height: auto; }
.tools .btn:hover { color: var(--text); background: var(--hover); }
.tools .btn.primary { background: var(--white); color: #0D0E10; }
.panel-toggle { border-radius: 0; border: none; border-left: 1px solid var(--line); background: transparent; padding: 0 16px; }
.phases { gap: 0; margin: 0; align-items: stretch; border-left: 1px solid var(--line); }
.phases i { display: none; }
.ph { border-radius: 0; border: none; border-right: 1px solid var(--line); padding: 0 16px; display: flex; align-items: center; font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ph.on { background: var(--white); color: #0D0E10; }

/* กระดาน: พื้นดำมีตารางจางๆ */
.board {
  background-color: var(--bg);
  background-image: linear-gradient(rgba(42, 43, 48, .55) 1px, transparent 1px), linear-gradient(90deg, rgba(42, 43, 48, .55) 1px, transparent 1px);
  background-size: 48px 48px;
}
.slot, .pile, .rowzone, .damage { border-radius: 0; border: 1px dashed var(--line2); background: rgba(13, 14, 16, .78); }
.slot { border-radius: 50%; }
.slot.vc { border: 1px solid rgba(240, 138, 36, .55); background: radial-gradient(circle, rgba(240, 138, 36, .10), rgba(13, 14, 16, .78) 70%); }
.slot-label { font-family: var(--mono); letter-spacing: .14em; color: var(--dim); font-weight: 700; }
.count { border-radius: 0; background: var(--white); color: #0D0E10; border: none; font-family: var(--mono); }
.soul { border-radius: 0; background: var(--bg); border: 1px solid var(--yellow); color: var(--yellow); font-family: var(--mono); letter-spacing: .06em; }
.gz-up, .vc-tag { border-radius: 0; font-family: var(--mono); letter-spacing: .06em; }
.midline { background: linear-gradient(90deg, transparent, var(--line2), transparent); opacity: 1; }
.atk-slot { border: 1px solid var(--red) !important; box-shadow: 0 0 0 1px var(--red), 0 0 18px rgba(239, 90, 69, .45); }
.tgt-slot { border: 1px solid var(--yellow) !important; box-shadow: 0 0 0 1px var(--yellow), 0 0 18px rgba(245, 196, 81, .4); }
.boost-slot { border: 1px solid var(--orange) !important; }
.drop-hover { outline: 2px solid var(--orange) !important; outline-offset: 2px; background: rgba(240, 138, 36, .12) !important; }
.pw { font-family: var(--mono); letter-spacing: .02em; background: rgba(13, 14, 16, .88); }
.pw.mod { color: var(--orange); }
.card.sel { box-shadow: 0 0 0 2px var(--white), 0 0 16px rgba(242, 240, 236, .35); }
/* หลังการ์ด Vanguard (ภาคแรก/G) ใช้กับการ์ดคว่ำ เด็ค และมืออีกฝ่าย */
.card.back, .mini-back { background: #050608 url(/cardback.webp) center / 100% 100% no-repeat; border: 0; }
.card.fd::after { background: #050608 url(/cardback.webp) center / 100% 100% no-repeat; z-index: 1; }
.card.fd .fd-label, .card.fd .pw { display: none; }
/* แวนการ์ดที่ถูก Delete: หลังการ์ด + ป้ายแดงเลือดหมู · hollowed: ป้ายเล็กบนการ์ด */
.card.fd .fd-label.del { display: block; z-index: 3; top: 38%; color: #fff; background: var(--maroon); padding: 2px 0; letter-spacing: .12em; font-size: calc(var(--ch) * .1); }
.fd-label.hollow { top: auto; bottom: 18%; font-size: calc(var(--ch) * .08); color: var(--yellow); background: #0009; padding: 1px 0; }
.card .txt { background: linear-gradient(160deg, #1D1E22, #121316); border: 1px solid var(--line2); }
.t-grade { color: var(--orange); font-family: var(--mono); }
.t-pow { font-family: var(--mono); }
.t-trig { border-radius: 0; font-family: var(--mono); font-size: .9em; }
.hand-name { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; }

/* แถบคำแนะนำกลางกระดาน */
.guide { border-radius: 0; background: rgba(18, 19, 22, .96); border: 1px solid var(--line); border-left: 3px solid var(--dim); }
.guide b { color: var(--orange); }
.guide.hot { border-color: var(--line2); border-left-color: var(--orange); box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
.guide.finished { border-left-color: var(--yellow); }
.guide.finished b { color: var(--yellow); }

/* แผงข้าง */
.side { background: var(--bg2); border-left: 1px solid var(--line); }
.detail { border-bottom: 1px solid var(--line); }
.detail-img { border-radius: 0; }
.detail-text h3 { color: var(--text); font-weight: 600; }
.detail-meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; }
.chips span { border-radius: 0; background: transparent; border: 1px solid var(--line2); font-family: var(--mono); font-size: .72rem; }
.actions { background: var(--panel); border-bottom: 1px solid var(--line); }
.act-title { color: var(--text); }
.act-sub { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; color: var(--dim); }
.l { border-bottom: 1px solid var(--line); }
.l time { font-family: var(--mono); color: var(--dim); }
.l-turn { color: var(--text); font-weight: 600; }
.l-check { color: var(--yellow); }
.l-chat { color: #9fd3c7; }
.chat { border-top: 1px solid var(--line); }
.skill { border-radius: 0; background: var(--bg); border-color: var(--line); }
.sk-kind { border-radius: 0; background: var(--white); color: #0D0E10; font-family: var(--mono); }
.sk-tag { font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; }
.th-toggle { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--muted); background: none; border: 1px solid var(--line2); padding: 1px 8px; cursor: pointer; }
.th-toggle:hover { color: var(--text); border-color: var(--text); }

/* เมนู / หน้าต่าง */
.menu { border-radius: 0; background: var(--panel); border: 1px solid var(--line2); box-shadow: 0 8px 28px rgba(0, 0, 0, .55); padding: 0; }
.menu button { border-radius: 0; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.menu hr { display: none; }
.modal { border-radius: 0; background: rgba(18, 19, 22, .98); border: 1px solid var(--line2); box-shadow: 0 8px 28px rgba(0, 0, 0, .6); }
.modal-head { color: var(--text); font-weight: 600; }
.pick-opt { border-radius: 0; }
.pick-opt.on { outline-color: var(--orange); box-shadow: 0 0 16px rgba(240, 138, 36, .5); }

/* หน้าแรก / จัดเด็ค */
.lobby { background-color: var(--bg); background-image: linear-gradient(rgba(42, 43, 48, .55) 1px, transparent 1px), linear-gradient(90deg, rgba(42, 43, 48, .55) 1px, transparent 1px); background-size: 48px 48px; }
.lobby-card { border-radius: 0; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
.logo { font-family: var(--mono); color: var(--text); letter-spacing: .04em; font-size: 1.5rem; }
.logo::first-letter { color: var(--orange); }
.lobby-card label { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.join-box { border-radius: 0; background: var(--bg); border: 1px solid var(--line2); border-left: 3px solid var(--orange); }
.code { color: var(--orange); font-family: var(--mono); }
.tips { border-top: 1px solid var(--line); }
.deck-pane, .detail-pane { background: var(--bg2); border-color: var(--line); }
#deck-list h4 { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; font-size: .74rem; color: var(--orange); }
.deck-row:hover { background: var(--hover); }
.have { border-radius: 0; background: var(--white); font-family: var(--mono); }
.res:hover .card { box-shadow: 0 0 0 1px var(--orange); }

/* ---------- กองเด็ค: ซ้อนหลายใบให้เห็นความหนา ---------- */
.deck .stack { position: relative; width: var(--cw); height: var(--ch); }
.deck .stack .card.back { position: absolute; left: 0; top: 0; cursor: pointer; }

/* ---------- เอฟเฟคจั่ว / เช็คทริกเกอร์ ---------- */
.fx-layer { position: fixed; inset: 0; z-index: 96; pointer-events: none; overflow: hidden; }
.fx-card { position: fixed; left: 0; top: 0; width: var(--fw); height: calc(var(--fw) / .686); perspective: 900px; will-change: transform; }
.fx-card .flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, .7, .3, 1); }
.fx-card.up .flip { transform: rotateY(180deg); }
.fx-card .fx-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 5%; overflow: hidden; box-shadow: 0 10px 30px #000c; }
.fx-card .fx-face.back { transform: translateZ(1px); background: #050608 url(/cardback.webp) center / 100% 100% no-repeat; }
.fx-card .fx-face.front { transform: rotateY(180deg) translateZ(1px); background: #222; }
.fx-card .fx-face.front .txt { font-size: calc(var(--fw) * .085 / .686); }
.fx-card .fx-face.front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0a0a0c; }
.fx-title { position: fixed; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-weight: 700; letter-spacing: .2em; font-size: clamp(14px, 2.4vw, 22px);
  color: var(--white); text-shadow: 0 2px 8px #000; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.fx-title.show { opacity: 1; }
.fx-trig { position: fixed; left: 50%; transform: translateX(-50%) scale(.6); padding: 6px 18px; font-family: var(--mono); font-weight: 800; letter-spacing: .12em;
  font-size: clamp(16px, 3vw, 30px); color: #120608; opacity: 0; transition: transform .25s cubic-bezier(.2, 1.6, .4, 1), opacity .2s; white-space: nowrap; box-shadow: 0 0 30px currentColor; }
.fx-trig.show { opacity: 1; transform: translateX(-50%) scale(1); }
.fx-trig.critical { background: #ffd23f; color: #3a0b0f; } .fx-trig.draw { background: #4aa3ff; } .fx-trig.stand { background: #ff9f43; }
.fx-trig.heal { background: #3ddc84; } .fx-trig.front { background: #ff6b5e; } .fx-trig.none { background: #2a2b30; color: #c9c7c2; box-shadow: none; }
.fx-hide { visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) { .fx-layer { display: none; } }

/* ปุ่มใช้สกิล ACT: ใหญ่ สีเหลือง กะพริบเบาๆ ให้เห็นทันที */
.btn.act-big, .ab-row .btn.act-big { background: var(--yellow); border-color: var(--yellow); color: #1a1205; font-weight: 700; font-size: 1rem; padding: 7px 16px; animation: act-pulse 1.6s ease-in-out infinite; }
.btn.act-big:hover { filter: brightness(1.1); }
.skill-head .btn.act-big { margin-left: auto; }
@keyframes act-pulse { 0%, 100% { box-shadow: 0 0 0 0 #f5c45166; } 50% { box-shadow: 0 0 0 6px #f5c45100; } }
.ab-row:has(.act-big) { align-items: center; font-size: .9rem; }

/* ปุ่ม Legion */
.btn.legion-btn { border-color: var(--maroon); color: var(--maroon); font-weight: 700; padding: 7px 16px; }
.btn.legion-btn.ready { background: var(--maroon); color: #fff; animation: legion-pulse 1.6s ease-in-out infinite; }
.btn.legion-btn:disabled { opacity: .55; cursor: not-allowed; }
.legion-why { color: var(--muted); align-self: center; }
@keyframes legion-pulse { 0%, 100% { box-shadow: 0 0 0 0 #e5533c88; } 50% { box-shadow: 0 0 0 7px #e5533c00; } }
@media (prefers-reduced-motion: reduce) { .btn.act-big, .btn.legion-btn.ready { animation: none; } }

/* ---------- เอฟเฟคการต่อสู้: ลูกศร / HIT / Ride · Stride · Legion / ตัวเลขพลัง / Retire ---------- */
#arrow-layer { z-index: 40; }
#float-layer { z-index: 97; }
.sound-btn { padding: 2px 8px; font-size: 1rem; line-height: 1; }
.fx-arrow { position: fixed; left: 0; top: 0; overflow: visible; pointer-events: none; }
.fx-arrow .shaft { fill: none; stroke-linecap: round; stroke-dasharray: 1; }
.fx-arrow.hold .shaft { stroke: var(--red); opacity: .75; filter: drop-shadow(0 0 6px rgba(239, 90, 69, .8)); animation: arrow-pulse 1.4s ease-in-out .3s infinite; stroke-dashoffset: 0; }
.fx-arrow.hold .head { fill: var(--red); opacity: .85; filter: drop-shadow(0 0 6px rgba(239, 90, 69, .8)); }
.fx-arrow.hold { animation: fade-in .3s ease-out; }
.fx-arrow.strike .shaft { stroke: #fff3c4; filter: drop-shadow(0 0 10px var(--orange)); stroke-dashoffset: 1; animation: arrow-draw .3s cubic-bezier(.4, 0, .2, 1) forwards; }
.fx-arrow.strike .head { fill: #fff3c4; opacity: 0; filter: drop-shadow(0 0 10px var(--orange)); animation: fade-in .08s .26s forwards; }
.fx-arrow.strike.quick .shaft { animation-duration: .16s; }
.fx-arrow.strike.quick .head { animation-delay: .14s; }
@keyframes arrow-draw { to { stroke-dashoffset: 0; } }
@keyframes arrow-pulse { 50% { opacity: .4; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.fx-hit { position: fixed; display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; font-family: var(--mono); text-shadow: 0 2px 10px #000, 0 0 2px #000; }
.fx-hit b { font-size: clamp(22px, 4vw, 44px); font-weight: 800; letter-spacing: .06em; }
.fx-hit span { font-size: clamp(11px, 1.4vw, 15px); font-weight: 700; padding: 2px 10px; background: rgba(13, 14, 16, .85); border: 1px solid var(--line2); }
.fx-hit.hit b { color: #ff6b5e; -webkit-text-stroke: 1px #3a0b0f; }
.fx-hit.guard b, .fx-hit.pg b { color: var(--yellow); -webkit-text-stroke: 1px #3a2a00; }
.fx-hit.cancel b { color: var(--muted); }
.fx-flash { position: fixed; border-radius: 6px; background: radial-gradient(circle, rgba(255, 240, 220, .95), rgba(239, 90, 69, .7) 45%, transparent 75%); mix-blend-mode: screen; }
.fx-ring { position: fixed; width: var(--r); height: var(--r); border-radius: 50%; border: 4px solid var(--yellow); box-shadow: 0 0 24px var(--yellow), inset 0 0 24px rgba(245, 196, 81, .6); }
.fx-ring.pg { border-width: 7px; border-color: #fff3c4; }

.fx-tag { position: fixed; font-family: var(--mono); font-weight: 800; letter-spacing: .2em; font-size: clamp(14px, 2vw, 22px); padding: 2px 12px; white-space: nowrap; }
.fx-tag.ride { color: #1a0d05; background: var(--orange); box-shadow: 0 0 18px rgba(240, 138, 36, .8); }

.fx-shade { position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(60, 10, 14, .55), rgba(5, 5, 7, .88) 70%); }
.fx-card.glow .fx-face { box-shadow: 0 0 0 2px var(--yellow), 0 0 40px rgba(245, 196, 81, .75), 0 10px 30px #000c; }
.fx-card.glow.gold .fx-face { box-shadow: 0 0 0 3px #ffe08a, 0 0 70px 10px rgba(240, 138, 36, .8), 0 10px 30px #000c; animation: gold-pulse 1s ease-in-out infinite; }
.fx-card.glow.critical .fx-face { box-shadow: 0 0 0 3px #ffd23f, 0 0 50px rgba(255, 210, 63, .9); }
.fx-card.glow.draw .fx-face { box-shadow: 0 0 0 3px #4aa3ff, 0 0 50px rgba(74, 163, 255, .8); }
.fx-card.glow.stand .fx-face { box-shadow: 0 0 0 3px #ff9f43, 0 0 50px rgba(255, 159, 67, .8); }
.fx-card.glow.heal .fx-face { box-shadow: 0 0 0 3px #3ddc84, 0 0 50px rgba(61, 220, 132, .8); }
.fx-card.glow.front .fx-face { box-shadow: 0 0 0 3px #ff6b5e, 0 0 50px rgba(255, 107, 94, .8); }
@keyframes gold-pulse { 50% { filter: brightness(1.15); } }
.fx-big { position: fixed; left: 50%; display: flex; flex-direction: column; align-items: center; white-space: nowrap; font-family: var(--mono); font-weight: 800; font-style: italic;
  font-size: clamp(24px, 5vw, 56px); letter-spacing: .04em; color: #fff3c4; text-shadow: 0 0 18px var(--orange), 0 0 40px var(--red), 0 3px 0 #3a0b0f; }
.fx-big small { font-size: .32em; font-style: normal; letter-spacing: .2em; color: var(--text); text-shadow: 0 2px 8px #000; }
.fx-big.legion { color: #ffd9c9; text-shadow: 0 0 18px var(--red), 0 0 40px var(--maroon), 0 3px 0 #2a0508; }
.fx-big.gguard { font-size: clamp(20px, 3.6vw, 40px); color: var(--yellow); }

.fx-stripe { position: fixed; left: 0; right: 0; top: 50%; padding: 14px 0; display: flex; align-items: baseline; justify-content: center; gap: 18px; transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(22, 23, 26, .94) 18%, rgba(22, 23, 26, .94) 82%, transparent); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.fx-stripe b { font-size: clamp(22px, 4vw, 42px); font-weight: 700; color: var(--text); }
.fx-stripe span { font-family: var(--mono); font-size: clamp(12px, 1.6vw, 16px); letter-spacing: .2em; color: var(--muted); }
.fx-stripe.mine { background: linear-gradient(90deg, transparent, rgba(122, 16, 32, .95) 18%, rgba(122, 16, 32, .95) 82%, transparent); border-color: var(--orange); }
.fx-stripe.mine b { color: #fff3c4; }
.fx-stripe.win { background: linear-gradient(90deg, transparent, rgba(150, 90, 0, .95) 18%, rgba(150, 90, 0, .95) 82%, transparent); border-color: var(--yellow); }
.fx-stripe.win b { color: #fff3c4; text-shadow: 0 0 20px var(--yellow); font-size: clamp(30px, 6vw, 64px); }
.fx-stripe.lose b { color: var(--muted); font-size: clamp(30px, 6vw, 64px); }

.fx-float { position: fixed; font-family: var(--mono); font-weight: 800; font-size: clamp(14px, 2vw, 22px); white-space: nowrap; text-shadow: 0 2px 6px #000, 0 0 2px #000; }
.fx-float.pos { color: var(--yellow); }
.fx-float.neg { color: #ff6b5e; }
.fx-ghost { position: fixed; width: var(--cw); height: var(--ch); display: grid; place-items: center; }
.fx-ghost .card { position: absolute; inset: 0; }
.fx-ghost span { position: relative; z-index: 1; font-family: var(--mono); font-weight: 800; letter-spacing: .12em; font-size: clamp(11px, 1.4vw, 15px); padding: 2px 8px; background: rgba(13, 14, 16, .85); color: var(--text); white-space: nowrap; animation: fade-in .15s; }
.fx-ghost span.drop { color: #ff6b5e; border: 1px solid #ff6b5e; }
@media (prefers-reduced-motion: reduce) { #arrow-layer .fx-arrow { animation: none; } }

/* ---------- ประกาศ Final Turn ---------- */
.btn.final-btn { border-color: var(--red); color: #fff3c4; background: linear-gradient(180deg, #a3151f, #6e0c14); font-weight: 700; animation: final-glow 1.6s ease-in-out infinite; }
.btn.final-btn:hover { filter: brightness(1.15); }
@keyframes final-glow { 50% { box-shadow: 0 0 14px rgba(239, 90, 69, .8); } }
.final-pill { font-family: var(--mono); font-weight: 800; letter-spacing: .08em; color: #fff3c4; background: #8e121c; padding: 1px 8px; }
.fx-shade.fire { background: radial-gradient(ellipse at center, rgba(150, 30, 10, .55), rgba(40, 4, 6, .9) 70%); }
.fx-final { position: fixed; left: 50%; top: 45%; display: flex; flex-direction: column; align-items: center; white-space: nowrap; font-family: var(--mono); font-style: italic; }
.fx-final small { font-size: clamp(14px, 2vw, 22px); font-style: normal; font-weight: 700; letter-spacing: .2em; color: var(--text); text-shadow: 0 2px 8px #000; }
.fx-final b { font-size: clamp(42px, 10vw, 120px); font-weight: 800; letter-spacing: .02em; color: #fff3c4; -webkit-text-stroke: 2px #5a0a0f;
  text-shadow: 0 0 20px #ffb347, 0 0 50px var(--orange), 0 0 90px var(--red), 0 6px 0 #3a0508; animation: final-flicker .18s steps(2) infinite; }
@keyframes final-flicker { 50% { text-shadow: 0 0 26px #ffd27a, 0 0 60px var(--orange), 0 0 110px var(--red), 0 6px 0 #3a0508; } }
@media (prefers-reduced-motion: reduce) { .btn.final-btn, .fx-final b { animation: none; } }

/* ---------- บัญชีผู้เล่น ---------- */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line2); }
.auth-tabs button { background: transparent; color: var(--muted); border: 0; padding: 10px; font: inherit; font-weight: 600; cursor: pointer; }
.auth-tabs button.on { background: var(--maroon); color: #fff3c4; }
.auth-tabs button:not(.on):hover { color: var(--text); background: var(--hover); }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: var(--bg); border: 1px solid var(--line2); border-left: 3px solid var(--orange); }
.acct-row b { color: var(--orange); }
.acct-row span { flex: 1 1 180px; }
.rooms { display: flex; flex-direction: column; gap: 6px; }
.rooms:empty { display: none; }
.rooms-head { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.room-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line2); }
.room-row.open { border-left: 3px solid var(--orange); }
.room-row .code { font-weight: 700; letter-spacing: .08em; }
.room-who { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; text-overflow: ellipsis; }
.room-who small { color: var(--muted); font-size: .78rem; }
.fx-dust { position: fixed; width: var(--r); height: var(--r); border-radius: 50%; border: 3px solid rgba(240, 138, 36, .8); box-shadow: 0 0 18px rgba(240, 138, 36, .5); pointer-events: none; }
.fx-dust.gc { border-color: var(--yellow); box-shadow: 0 0 18px rgba(245, 196, 81, .6); }

/* ---------- สรุปสกิลที่ผู้เล่นทำเอง ---------- */
#note-layer { z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding: 64px 12px 0; }
.skill-note { pointer-events: auto; cursor: pointer; max-width: min(360px, calc(100vw - 32px)); background: rgba(22, 23, 26, .97); border: 1px solid var(--line2); border-left: 3px solid var(--orange);
  padding: 8px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); font-size: .86rem; }
.skill-note.mine { border-left-color: var(--muted); }
.skill-note b { display: block; color: var(--orange); margin-bottom: 4px; }
.skill-note.mine b { color: var(--text); }
.skill-note ul { margin: 0; padding-left: 18px; color: var(--text); }
.skill-note li + li { margin-top: 2px; }

/* ---------- แผ่นรองเล่น: แต่ละฝั่งมีกรอบมุมเหลี่ยม สีอุ่นฝั่งเรา แดงเลือดหมูฝั่งตรงข้าม ฝั่งที่ถึงตาเรืองแสง ---------- */
.side-grid { position: relative; isolation: isolate; padding: 6px 8px; --c: var(--line2); }
.side-grid::before { content: ""; position: absolute; inset: 0; z-index: -2; border: 1px solid var(--line); transition: box-shadow .4s, border-color .4s; }
.side-grid.me::before {
  background: radial-gradient(ellipse 38% 62% at 50% 48%, rgba(240, 138, 36, .12), transparent 72%), linear-gradient(0deg, rgba(122, 16, 32, .16), rgba(13, 14, 16, .55));
}
.side-grid.opp::before {
  background: radial-gradient(ellipse 38% 62% at 50% 52%, rgba(229, 83, 60, .10), transparent 72%), linear-gradient(180deg, rgba(90, 10, 22, .22), rgba(13, 14, 16, .55));
}
.side-grid::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) top left / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) top left / 2px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) top right / 2px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px 16px no-repeat;
}
.side-grid.active { --c: var(--orange); }
.side-grid.active::before { border-color: rgba(240, 138, 36, .35); box-shadow: inset 0 0 50px rgba(240, 138, 36, .10), 0 0 24px rgba(240, 138, 36, .08); }

/* วงแหวนรอบ VC แบบแผ่นรองเล่นจริง · ฝั่งที่ถึงตา วงประหมุนช้าๆ */
.slot { isolation: isolate; }
.slot.vc::before, .slot.vc::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.slot.vc::before { inset: -9%; border: 1px solid rgba(240, 138, 36, .28); }
.slot.vc::after { inset: -17%; border: 1px dashed rgba(240, 138, 36, .22); }
.side-grid.active .slot.vc::after { border-color: rgba(240, 138, 36, .5); animation: vc-spin 24s linear infinite; }
@keyframes vc-spin { to { transform: rotate(360deg); } }
.slot:not(.vc) { background: radial-gradient(circle, rgba(42, 43, 48, .35), rgba(13, 14, 16, .78) 70%); }

/* หน้าแรก: การ์ดเกรด 3 เรียงเป็นพัด */
.lobby { background-color: var(--bg); background-image: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(122, 16, 32, .45), transparent 70%), linear-gradient(rgba(42, 43, 48, .55) 1px, transparent 1px), linear-gradient(90deg, rgba(42, 43, 48, .55) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; }
.fan { position: relative; height: 172px; margin: 4px 0 0; display: flex; justify-content: center; }
.fan img { position: absolute; top: 8px; width: 92px; aspect-ratio: .686; object-fit: cover; border-radius: 5px; box-shadow: 0 8px 22px rgba(0, 0, 0, .6);
  transform-origin: 50% 140%; transform: rotate(calc(var(--i) * 11deg)) translateY(calc(var(--i) * var(--i) * 2px)); transition: transform .25s; background: #111; }
.fan:hover img { transform: rotate(calc(var(--i) * 14deg)) translateY(calc(var(--i) * var(--i) * 3px - 6px)); }
.fan img:nth-child(3) { z-index: 2; box-shadow: 0 0 0 2px var(--orange), 0 10px 28px rgba(0, 0, 0, .7); }
@media (max-width: 420px) { .fan { height: 142px; } .fan img { width: 74px; } }
@media (prefers-reduced-motion: reduce) { .side-grid.active .slot.vc::after { animation: none; } }

/* ---------- จอมือถือ: ห้ามล้นแนวนอน · แถบบนย่อเหลือเฉพาะที่จำเป็น ---------- */
html, body { overflow-x: hidden; }
.lobby { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.lobby-card { width: min(460px, 100%); min-width: 0; }
.lobby-card select, .lobby-card input { min-width: 0; max-width: 100%; }
.table { overflow: hidden; }
.bar { min-width: 0; }
.turn { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .bar .brand { padding: 0 10px; }
  .room-code { padding: 0 8px; letter-spacing: .04em; }
  .conn { margin: 0 8px; }
  .sound-btn { padding: 0 8px; }
  .phases .ph:not(.on) { display: none; }
  .ph { padding: 0 10px; }
  .tools .btn { padding: 0 10px; }
  .panel-toggle { padding: 0 12px; }
}
@media (max-width: 430px) {
  .room-code { font-size: 0; }
  .room-code b { font-size: .9rem; }
  .lobby { padding: 10px; }
  .lobby-card { padding: 16px; }
  .acct-row .btn { padding: 4px 10px; }
}

/* ---------- หน้าต่างเลือกเด็คแบบดูรูป ---------- */
.noimg { display: grid; place-items: center; color: var(--dim); font-family: var(--mono); font-size: 1.4rem; border: 1px dashed var(--line2); }
.deck-grid-ov { position: fixed; inset: 0; z-index: 120; background: rgba(5, 5, 7, .86); display: grid; place-items: center; padding: 16px; animation: dg-fade .16s ease-out; }
.deck-grid { width: min(1040px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain; background: var(--panel); border: 1px solid var(--line2); padding: 0 16px 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, .7); animation: dg-rise .22s cubic-bezier(.2, .8, .3, 1); }
.deck-grid-head { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; background: var(--panel); padding: 14px 0 10px; z-index: 3; border-bottom: 1px solid var(--line); }
.dg-top { display: flex; align-items: center; gap: 12px; }
.dg-top b { flex: none; }
.dg-search { flex: 1; min-width: 0; }
.dg-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.dg-chips::-webkit-scrollbar { display: none; }
.dg-chip { flex: none; padding: 3px 11px; background: transparent; border: 1px solid var(--line2); color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; }
.dg-chip:hover { color: var(--text); border-color: var(--text); }
.dg-chip.on { background: var(--orange); border-color: var(--orange); color: #111; font-weight: 600; }
.dg-extra { margin-top: 12px; }
.deck-grid h4 { margin: 14px 0 8px; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.deck-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.deck-tile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 6px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; text-align: left; transition: transform .14s, border-color .14s, box-shadow .14s; animation: tile-in .3s cubic-bezier(.2, .8, .3, 1) backwards; animation-delay: calc(min(var(--d, 0), 16) * 18ms); }
.deck-tile img, .deck-tile .noimg { width: 100%; aspect-ratio: .686; object-fit: cover; border-radius: 4px; background: #111; margin-bottom: 3px; }
.deck-tile span { font-size: .78rem; line-height: 1.3; }
.deck-tile .t-code { font-family: var(--mono); font-size: .68rem; color: var(--orange); letter-spacing: .04em; }
.deck-tile .t-clan { font-size: .68rem; color: var(--muted); margin-top: auto; padding-top: 2px; }
.deck-tile:hover { border-color: var(--orange); transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0, 0, 0, .55), 0 0 14px rgba(240, 138, 36, .25); z-index: 2; }
.deck-tile.on { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange), 0 0 16px rgba(240, 138, 36, .35); }
.deck-tile[hidden], .dg-group[hidden], .deck-tiles[hidden], .dg-empty[hidden] { display: none; }
@keyframes dg-fade { from { opacity: 0; } }
@keyframes dg-rise { from { opacity: 0; transform: translateY(16px) scale(.985); } }
@keyframes tile-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@media (max-width: 560px) {
  .deck-grid-ov { padding: 0; }
  .deck-grid { height: 100%; border: 0; padding: 0 10px 18px; }
  .dg-top { flex-wrap: wrap; gap: 8px; }
  .dg-top b { flex: 1; }
  .dg-search { order: 3; flex: 1 0 100%; }
}
@media (max-width: 430px) { .deck-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .deck-tile span { font-size: .72rem; } }

/* ---------- หน้าเมนู: ประกายไฟ โลโก้ และการ์ดที่บินเข้าเด็ค ---------- */
.menu-embers { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.lobby > :not(.menu-embers) { position: relative; z-index: 1; }
.lobby { height: 100dvh; }
.logo-d { display: inline-block; color: var(--aura, var(--orange)); animation: logo-pulse 2.6s ease-in-out infinite; transition: color .5s; }
@keyframes logo-pulse { 0%, 100% { text-shadow: 0 0 4px transparent; transform: scale(1); } 50% { text-shadow: 0 0 16px currentColor; transform: scale(1.18); } }
.menu-fly { position: fixed; z-index: 130; pointer-events: none; border-radius: 4px; object-fit: cover; box-shadow: 0 8px 22px rgba(0, 0, 0, .6); }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--text); }
.sec-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* ปุ่มหลัก: แสงวิ่งผ่านเป็นระยะ */
.play-main { position: relative; overflow: hidden; width: 100%; transition: box-shadow .2s, transform .12s; }
.play-main:hover { box-shadow: 0 0 22px color-mix(in srgb, var(--aura, var(--orange)) 70%, transparent); }
.play-main:active { transform: scale(.985); }
.play-main::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(100deg, transparent, rgba(240, 138, 36, .42), transparent); transform: translateX(-140%) skewX(-16deg); animation: main-shine 4.2s ease-in-out infinite; pointer-events: none; }
@keyframes main-shine { 0%, 62% { transform: translateX(-140%) skewX(-16deg); } 100% { transform: translateX(330%) skewX(-16deg); } }

/* ---------- หน้าล็อกอิน ---------- */
.auth-fan .fan { margin: 0; }
.auth.first { animation: auth-in .42s cubic-bezier(.2, .8, .3, 1); }
@keyframes auth-in { from { opacity: 0; transform: translateY(18px); } }
.auth-fan:not(.no-deal) .fan img { animation: fan-deal .55s cubic-bezier(.2, .85, .3, 1.1) backwards; animation-delay: calc((var(--i) + 2) * 70ms + 120ms); }
@keyframes fan-deal { from { opacity: 0; transform: translateY(70px) rotate(0) scale(.82); } }
.auth-room { padding: 7px 10px; background: var(--bg); border-left: 3px solid var(--orange); font-size: .9rem; }
.auth .tips { text-align: center; }

/* ---------- หน้าแรกหลังล็อกอิน ---------- */
.home { --aura: #f08a24; display: block; padding: 0 20px 24px; }
.home-wrap { width: min(1060px, 100%); margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.home-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.home-top .logo { white-space: nowrap; }
.acct { display: flex; align-items: center; gap: 8px; min-width: 0; }
.acct-who { display: flex; flex-direction: column; text-align: right; line-height: 1.3; min-width: 0; margin-right: 4px; }
.acct-who b { color: var(--orange); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-who small { color: var(--muted); font-size: .76rem; }
.acct-who small br { display: none; }
.acct-who small small { margin-left: 6px; }
.btn.icon { padding: 5px 9px; line-height: 1.3; }
.home-main { flex: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: start; align-content: start; }

/* การ์ดหน้าเด็ค */
.deck-stage { --hw: min(238px, 33vh); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.deck-stage .sec-label { align-self: flex-start; }
.deck-hero { position: relative; display: grid; place-items: center; padding: 34px 54px 30px; background: none; border: 0; cursor: pointer; perspective: 900px; color: inherit; animation: hero-in .6s cubic-bezier(.2, .85, .3, 1.05) backwards; }
@keyframes hero-in { from { opacity: 0; transform: translateY(26px) scale(.92); } }
.hero-aura { position: absolute; left: 50%; top: 50%; width: calc(var(--hw) * 1.5); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background-color: var(--aura); opacity: .3; filter: blur(46px); transition: background-color .5s; animation: aura-breath 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes aura-breath { 50% { opacity: .46; transform: translate(-50%, -50%) scale(1.08); } }
.hero-ring { position: absolute; left: 50%; top: 50%; width: calc(var(--hw) * 1.62); aspect-ratio: 1; margin: calc(var(--hw) * -.81) 0 0 calc(var(--hw) * -.81); border-radius: 50%; border: 2px dashed var(--aura); opacity: .32; transition: border-color .5s; animation: ring-spin 26s linear infinite; pointer-events: none; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.hero-float { display: block; animation: hero-float 4.6s ease-in-out infinite; }
@keyframes hero-float { 50% { transform: translateY(-7px); } }
.hero-flip { display: block; transform-style: preserve-3d; }
.hero-card { position: relative; display: block; width: var(--hw); aspect-ratio: .686; border-radius: 8px; overflow: hidden; background: #111; box-shadow: 0 0 0 2px color-mix(in srgb, var(--aura) 80%, transparent), 0 16px 40px rgba(0, 0, 0, .7), 0 0 34px color-mix(in srgb, var(--aura) 34%, transparent); transition: transform .14s ease-out, box-shadow .5s; will-change: transform; }
#hero-img, #hero-img img, #hero-img .noimg { display: block; width: 100%; height: 100%; object-fit: cover; }
#hero-img .noimg { display: grid; font-size: 3rem; }
.hero-foil { position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 28%), rgba(255, 255, 255, .24), transparent 46%), linear-gradient(112deg, transparent 34%, color-mix(in srgb, var(--aura) 34%, transparent) 50%, transparent 66%); background-size: 100% 100%, 260% 100%; background-repeat: no-repeat; animation: foil-sweep 5.4s ease-in-out infinite; }
@keyframes foil-sweep { 0%, 100% { background-position: 0 0, 130% 0; } 50% { background-position: 0 0, -30% 0; } }
.hero-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }
.hero-info b { font-size: 1.12rem; line-height: 1.3; }
.hero-info small { font-size: .82rem; }
.hero-info .t-code { font-family: var(--mono); color: var(--aura); letter-spacing: .06em; transition: color .5s; }
.hero-clan { color: var(--text); }
.hero-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* แผงวิธีเข้าเล่น */
.play-panel { display: flex; flex-direction: column; gap: 14px; }
.play-sec { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0, 0, 0, .45); animation: sec-in .42s cubic-bezier(.2, .8, .3, 1) backwards; }
.play-sec:nth-child(2) { animation-delay: .07s; }
@keyframes sec-in { from { opacity: 0; transform: translateX(16px); } }
.play-sec.join-box { background: var(--panel); border-left: 3px solid var(--orange); }
.invite-code { font-family: var(--mono); font-size: 1.9rem; text-align: center; }
.play-main.big { padding: 13px 18px; font-size: 1.1rem; }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.code-row .code-input { width: 100%; letter-spacing: .24em; }
.code-row .code-input::placeholder { letter-spacing: 0; }
.home .rooms { max-height: 212px; overflow: auto; padding-top: 2px; }
.home .room-row .btn { flex: none; }
.bot-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.bot-tile { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px; background: var(--bg); border: 1px solid var(--line2); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .14s; }
.bot-tile:hover { border-color: var(--orange); }
.bot-tile img, .bot-tile .noimg { flex: none; width: 36px; aspect-ratio: .686; object-fit: cover; border-radius: 3px; background: #111; }
.bot-tile .noimg { font-size: 1rem; }
.bt-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.bt-text b { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-text small { font-size: .72rem; color: var(--muted); }
.howto { color: var(--muted); font-size: .86rem; line-height: 1.6; padding: 0 2px; }
.howto summary { cursor: pointer; width: fit-content; padding: 2px 0; color: var(--text); }
.howto summary:hover { color: var(--orange); }
.howto p { margin: 8px 0 0; }

@media (max-width: 820px) {
  .home { padding: 0 12px 20px; }
  .home-top { padding: 10px 0; margin-bottom: 12px; gap: 8px; }
  .home-top .logo { font-size: 1.02rem; letter-spacing: 0; }
  .home-main { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .acct-who { display: none; }
  .home-top #logout { padding: 5px 9px; font-size: .8rem; }
  .deck-stage { --hw: 104px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: center; text-align: left; }
  .deck-stage .sec-label { grid-column: 1 / -1; }
  .deck-hero { padding: 4px 8px; grid-row: 2 / span 2; }
  .hero-ring { display: none; }
  .hero-aura { filter: blur(26px); }
  .hero-info { align-self: end; }
  .hero-info b { font-size: 1rem; }
  .hero-info small { font-size: .76rem; }
  .hero-links { align-self: start; justify-content: flex-start; margin: 0; gap: 6px; }
  .hero-links .btn { padding: 5px 10px; font-size: .84rem; }
  .play-sec { padding: 12px; }
}
@media (max-width: 400px) {
  .bot-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 350px) {
  .home-top .logo { font-size: .88rem; }
  .home-top #logout { padding: 5px 7px; font-size: .74rem; }
}

/* ---------- หน้าจัดเด็ค ---------- */
.b-bar { flex: none; }
.b-bar .brand-d { color: var(--orange); }
.b-bar .btn { margin: 7px 0 7px 8px; display: inline-flex; }
.b-bar .b-back { margin-right: 8px; }
.deck-state { color: var(--orange); font-size: .82rem; white-space: nowrap; padding-right: 2px; }
.deck-state.on::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--orange); animation: state-blink 1.4s ease-in-out infinite; }
@keyframes state-blink { 50% { opacity: .3; } }
#deck-save.dirty { box-shadow: 0 0 0 1px var(--orange), 0 0 14px rgba(240, 138, 36, .5); }
.b-tabs { display: none; }
.deck-pane { overflow: hidden; }
.deck-open-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
#deck-list { flex: 1; min-height: 0; overflow: auto; margin-right: -6px; padding-right: 6px; }
#deck-stats { display: flex; flex-direction: column; gap: 6px; }
.deck-meter { display: flex; flex-direction: column; gap: 3px; }
.dm-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .84rem; }
.dm-top b { font-family: var(--mono); font-size: .95rem; color: var(--red); }
.dm-bar { height: 7px; background: var(--bg); border: 1px solid var(--line2); overflow: hidden; }
.dm-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--maroon), var(--orange)); transition: width .28s cubic-bezier(.2, .8, .3, 1); }
.deck-meter.full .dm-top b { color: var(--ok); }
.deck-meter.full .dm-bar i { background: linear-gradient(90deg, #2c9b6f, var(--ok)); box-shadow: 0 0 10px var(--ok); }
.deck-meter.over .dm-bar i { background: var(--red); }
.deck-row { gap: 5px; padding: 2px 3px; }
.dr-thumb { flex: none; width: 23px; height: 33px; object-fit: cover; border-radius: 2px; background: #111; }
.deck-row > b { min-width: 14px; text-align: center; display: inline-block; }
.dr-meta { font-size: .76rem; white-space: nowrap; }
.mini.info-btn { display: none; font-family: var(--mono); font-style: italic; }
.deck-actions { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.deck-actions .btn { padding: 4px 10px; font-size: .84rem; }
.filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.filters input { flex: none; width: 100%; }
.filter-sel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.filter-sel select { min-width: 0; width: 100%; padding-left: 6px; padding-right: 2px; font-size: .84rem; }
.builder .hint { padding: 0 2px 6px; }
.res { transition: transform .12s; content-visibility: auto; contain-intrinsic-size: auto 210px; } /* ใบนอกจอไม่ต้องวาด */
.res:hover { transform: translateY(-3px); z-index: 2; }
.res:active { transform: scale(.97); }
.res-have .have { top: 2px; right: 4px; }
.res-minus, .res-info { position: absolute; z-index: 4; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; background: rgba(13, 14, 16, .9); border: 1px solid var(--line2); color: var(--text); font-family: var(--mono); line-height: 1; cursor: pointer; }
.res-minus { top: 30px; right: 4px; opacity: 0; transition: opacity .12s; }
.res:hover .res-minus { opacity: 1; }
.res-minus:hover { border-color: var(--red); color: var(--red); }
.res-info { display: none; top: 2px; left: 4px; font-style: italic; }
.sheet-bg { display: none; }
@media (hover: none), (max-width: 900px) {
  .res-minus { opacity: 1; }
  .res-info { display: grid; }
  .mini.info-btn { display: block; }
}
@media (max-width: 900px) {
  .t-long { display: none; }
  .bar .brand { padding: 0 12px; }
  .deck-state { font-size: .74rem; }
  .b-tabs { flex: none; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg2); border-bottom: 1px solid var(--line); }
  .b-tabs button { padding: 9px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; cursor: pointer; }
  .b-tabs button.on { color: var(--text); border-bottom-color: var(--orange); font-weight: 600; }
  .b-tabs b { display: inline-block; font-family: var(--mono); color: var(--red); }
  .b-tabs b.ok { color: var(--ok); }
  .builder-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
  .deck-pane { max-height: none; border: 0; min-height: 0; }
  .builder-body[data-tab="search"] .deck-pane, .builder-body[data-tab="deck"] .search-pane { display: none; }
  .search-pane { padding: 8px 8px 0; min-width: 0; }
  .filter-sel { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .filter-sel::-webkit-scrollbar { display: none; }
  .filter-sel select { flex: none; width: auto; max-width: 150px; }
  .results { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .res { --ch: 138px; --cw: 95px; }
  .res-name { font-size: .7rem; max-width: 100px; }
  .res-have .have { right: 2px; }
  .res-minus { right: 2px; }
  .res-info { left: 2px; }
  /* รายละเอียดการ์ดเป็นแผ่นเลื่อนขึ้นจากล่าง */
  .detail-pane { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 76dvh; border: 0; border-top: 2px solid var(--orange); transform: translateY(102%); visibility: hidden; transition: transform .22s cubic-bezier(.2, .8, .3, 1), visibility .22s; }
  .sheet-open .detail-pane { transform: none; visibility: visible; }
  .detail-pane .detail-img { width: min(190px, 56%); margin: 0 auto 10px; }
  .sheet-open .sheet-bg { display: flex; position: fixed; inset: 0; z-index: 70; padding: 10px; justify-content: flex-end; align-items: flex-start; background: rgba(5, 5, 7, .7); }
  .sheet-bg .btn { background: var(--panel2); height: fit-content; }
}
@media (max-width: 430px) { .dr-meta { display: none; } }

/* ปิดเอฟเฟกต์หน้าเมนูเมื่อผู้เล่นเลือก "เอฟเฟกต์: ลด" หรือปิดแอนิเมชันในเครื่อง */
body.fx-lite .logo-d, body.fx-lite .play-main::after, body.fx-lite .hero-aura, body.fx-lite .hero-ring, body.fx-lite .hero-float, body.fx-lite .hero-foil, body.fx-lite .deck-hero, body.fx-lite .play-sec, body.fx-lite .auth, body.fx-lite .auth-fan .fan img, body.fx-lite .deck-tile, body.fx-lite .deck-grid, body.fx-lite .deck-grid-ov, body.fx-lite .deck-state.on::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .logo-d, .play-main::after, .hero-aura, .hero-ring, .hero-float, .hero-foil, .deck-hero, .play-sec, .auth, .auth-fan .fan img, .deck-tile, .deck-grid, .deck-grid-ov, .deck-state.on::before { animation: none; }
}

/* ---------- เริ่มเกม / ใกล้แพ้ / แผ่นการ์ดบนมือถือ ---------- */
.fx-final.standup b { font-size: clamp(30px, 7.5vw, 88px); }
.damage.danger { border: 1px solid rgba(239, 90, 69, .7); animation: danger-pulse 1.6s ease-in-out infinite; }
.damage.danger .slot-label { color: #ff6b5e; }
.damage.danger .slot-label::after { content: " ⚠"; }
@keyframes danger-pulse { 50% { box-shadow: inset 0 0 26px rgba(239, 90, 69, .45), 0 0 18px rgba(239, 90, 69, .35); } }
.card-sheet { position: fixed; left: 8px; right: 8px; top: 56px; z-index: 66; max-height: 46vh; overflow: auto; background: rgba(18, 19, 22, .98);
  border: 1px solid var(--line2); border-top: 2px solid var(--orange); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); padding: 8px; }
.card-sheet.hidden { display: none; }
.card-sheet .sheet-x { position: sticky; top: 0; float: right; z-index: 2; background: var(--bg); color: var(--text); border: 1px solid var(--line2); width: 32px; height: 32px; font-size: 1rem; cursor: pointer; }
.card-sheet .detail-img { width: 110px; }
@media (min-width: 901px) { .card-sheet { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .damage.danger { animation: none; box-shadow: inset 0 0 20px rgba(239, 90, 69, .4); } }

/* ---------- อนุภาค / ลำแสง / คลื่นกระแทก ---------- */
.fx-particles { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 98; pointer-events: none; }
.fx-redflash { position: fixed; inset: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(239, 60, 40, .55) 100%); }
.fx-whiteflash { position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(255, 250, 230, .95), rgba(255, 210, 120, .4) 60%, transparent); }
.fx-beam { position: fixed; top: 0; width: var(--w); transform-origin: top; background: linear-gradient(90deg, transparent, rgba(255, 220, 140, .55) 30%, #fffbe8 50%, rgba(255, 220, 140, .55) 70%, transparent);
  filter: blur(1px); box-shadow: 0 0 40px rgba(255, 200, 100, .7); mix-blend-mode: screen; }
.fx-wave { position: fixed; width: 120vmin; height: 120vmin; border-radius: 50%; border: 6px solid rgba(255, 220, 200, .8); box-shadow: 0 0 40px rgba(239, 90, 69, .8), inset 0 0 40px rgba(239, 90, 69, .6); }
@media (prefers-reduced-motion: reduce) { .fx-particles { display: none; } }

/* เลือกวงบนกระดาน: แตะวงกลมที่เรืองแสงแทนกล่องปุ่ม */
.slot.pick-slot { cursor: pointer; border: 2px solid var(--yellow) !important; z-index: 6; animation: pick-slot 1s ease-in-out infinite; }
.slot.pick-slot:hover { background: radial-gradient(circle, rgba(255, 210, 63, .38), rgba(13, 14, 16, .78) 72%) !important; }
.slot.pick-slot .card { cursor: pointer; }
.slot.pick-slot .slot-label { color: var(--yellow); opacity: 1; }
.pick-tag { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 8; padding: 1px 8px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; pointer-events: none; }
@keyframes pick-slot { 0%, 100% { box-shadow: 0 0 8px rgba(255, 210, 63, .45); } 50% { box-shadow: 0 0 0 3px var(--yellow), 0 0 24px var(--orange); } }
@media (prefers-reduced-motion: reduce) { .slot.pick-slot { animation: none; box-shadow: 0 0 0 3px var(--yellow); } }

/* เลือกการ์ดบนสนาม: แตะการ์ดที่เรืองแสงแทนกล่องเลือก */
.card.pick-target { cursor: pointer; z-index: 6; animation: pick-target 1s ease-in-out infinite; }
@keyframes pick-target { 0%, 100% { box-shadow: 0 0 0 2px var(--yellow), 0 0 8px rgba(255, 210, 63, .5); } 50% { box-shadow: 0 0 0 3px var(--yellow), 0 0 24px var(--orange); } }
.card.pick-target.pick-on { animation: none; outline: 3px solid var(--orange); outline-offset: 1px; box-shadow: 0 0 0 3px var(--yellow), 0 0 22px var(--orange); }
@media (prefers-reduced-motion: reduce) { .card.pick-target { animation: none; box-shadow: 0 0 0 3px var(--yellow); } }

/* Stride ทับ Legion: heart สองใบโผล่คนละข้างของ G unit ให้เห็นทั้งคู่ แต่จางกว่า G unit */
.heart:has(+ .heart) { transform: translate(-54%, -10%) scale(.82); opacity: .65; }
.heart + .heart { transform: translate(54%, -10%) scale(.82); opacity: .65; }
.heart + .heart + .card:not(.rest) { transform: translate(0, 6%); }
.heart.dim { opacity: .42; }

/* แถบสกิล: เรียงลงล่างเท่านั้น (flex-wrap จาก .guide ทำให้ปุ่มล้นไปคอลัมน์ขวานอกจอ) ปุ่มล่างติดขอบเสมอ */
.guide.ab-offer { flex-wrap: nowrap; justify-content: flex-start; overflow-x: hidden; }
.guide.ab-offer > * { flex: none; }
.guide.ab-offer .ab-row span { min-width: 0; overflow-wrap: anywhere; }
.guide.ab-offer > .g-btns { position: sticky; bottom: -6px; padding: 6px 0; background: var(--panel, #15161a); z-index: 1; }
/* การ์ดเล็ก (มือถือ): ป้าย Soul/Stride/Legion อยู่มุมบน เห็นการ์ดและพาวเวอร์ */
.board.tiny .slot.vc .soul { top: -11px; bottom: auto; right: -8px; font-size: 9px; padding: 0 3px; line-height: 1.4; letter-spacing: 0; }
.board.tiny .vc-tag { top: -11px; font-size: 8px; padding: 0 3px; line-height: 1.5; letter-spacing: 0; }
.board.tiny .gz-up { font-size: 9px; padding: 0 3px; left: 1px; bottom: 1px; letter-spacing: 0; white-space: nowrap; }
.guide.ab-offer .ab-row { align-items: flex-start; }
@media (max-width: 560px) { .guide.ab-offer .ab-row { flex-direction: column; gap: 4px; } }
.board.tiny .gz-up { top: 12px; bottom: auto; }

/* เป้าที่แตะได้ (ผู้โจมตี/เป้าโจมตี/เป้าทริกเกอร์): มีกรอบตลอด แอนิเมชันแค่เพิ่มความสว่าง */
.card.pick { box-shadow: 0 0 0 2px var(--yellow); animation-name: pick-unit; }
@keyframes pick-unit { 0%, 100% { box-shadow: 0 0 0 2px var(--yellow), 0 0 8px rgba(255, 210, 63, .5); } 50% { box-shadow: 0 0 0 3px var(--yellow), 0 0 20px var(--orange); } }

/* ป้าย Soul อยู่มุมบนขวาเสมอ ไม่บังตัวเลขพาวเวอร์ด้านล่าง · ป้าย Stride/Legion อยู่มุมบนซ้าย */
.slot.vc .soul { top: -8px; bottom: auto; right: -8px; }
.vc-tag { left: -4px; transform: none; }
.board.tiny .vc-tag { left: 0; top: 4px; transform: none; } /* มือถือ: Stride อยู่ในการ์ด Soul อยู่เหนือการ์ด ไม่ทับกันทุกขนาดจอ */

/* เลือกการ์ดในมือบนกระดาน: ใบที่เลือกแล้วยกขึ้น ใบที่เลือกไม่ได้จางลง */
.hand.me .card.pick-on { transform: translateY(-12px); z-index: 7; }
.hand.me .card.pick-dim { opacity: .35; }
.guide .btn[disabled] { opacity: .45; cursor: not-allowed; }
/* เปิดดู G zone ตัวเอง: ใบคว่ำต้องเห็นหน้าการ์ด จะได้เลือกถูกใบ · ใบที่หงายแล้วใช้ Stride ไม่ได้จึงจางลง */
.modal-cards .card.fd[data-zone="gzone"]::after { background: none; }
.modal-cards .card.fd[data-zone="gzone"] .fd-label { display: block; color: var(--yellow); background: rgba(0, 0, 0, .7); padding: 2px 0; }
.modal-cards .card.face[data-zone="gzone"]:not(.fd) { opacity: .5; }

/* แถบนำทางตอนต้องเลือก ติดอยู่ในจอเสมอแม้กระดานเลื่อนได้ จะได้เห็นปุ่มยืนยันพร้อมการ์ดในมือ */
.guide.hot { position: sticky; top: 0; bottom: 0; z-index: 8; background: var(--panel); }
.pile-view { position: absolute; left: 4px; top: 4px; z-index: 3; padding: 2px 6px; font: 700 10px var(--mono, monospace); color: #fff; background: rgba(120, 20, 20, .92); border-radius: 4px; pointer-events: none; }

/* ช่องสรุปการต่อสู้: พลังตี/พลังกัน พร้อมที่มา */
.battle-box { flex: none; width: min(100%, 860px); margin: 2px 0; padding: 4px 10px; display: flex; flex-direction: column; gap: 2px; background: rgba(18, 19, 22, .96); border: 1px solid var(--line2); font-size: .82rem; line-height: 1.35; }
.bt-row { display: flex; align-items: baseline; gap: 8px; }
.bt-k { flex: none; font-weight: 700; color: var(--muted); }
.bt-atk .bt-k, .bt-atk .bt-n { color: var(--red); }
.bt-def .bt-k, .bt-def .bt-n { color: var(--yellow); }
.bt-n { flex: none; min-width: 3.4em; font: 800 1.15rem var(--mono, monospace); text-align: right; }
.bt-ps { flex: 1; min-width: 0; color: var(--muted); }
.bt-part { white-space: nowrap; }
.bt-ps small { opacity: .85; }
.bt-say { flex: none; padding: 0 6px; font-weight: 700; white-space: nowrap; }
.bt-hit { color: #fff; background: var(--red); }
.bt-miss, .bt-pg { color: #1a1206; background: var(--yellow); }
.bt-cancel { color: var(--muted); border: 1px solid var(--line2); }
.pw.pw-atk { color: #fff; background: rgba(150, 30, 26, .95); }
.pw.pw-def { color: #1a1206; background: rgba(245, 196, 81, .95); }
.pw.pw-atk, .pw.pw-def { white-space: nowrap; font-size: calc(var(--ch) * .1); }
.pw.pw-two { display: flex; flex-direction: column; font-size: calc(var(--ch) * .09); line-height: 1.15; white-space: nowrap; }
@media (max-width: 560px) { .battle-box { font-size: .72rem; padding: 3px 6px; } .bt-row { gap: 5px; } .bt-n { font-size: 1rem; min-width: 3em; } }

/* เอฟเฟกต์ 3 มิติ */
.fx-floor { position: fixed; width: var(--s); height: var(--s); border-radius: 50%; pointer-events: none; border: calc(var(--s) * .018) solid var(--c); box-shadow: 0 0 calc(var(--s) * .07) var(--c), inset 0 0 calc(var(--s) * .07) var(--c); }
.fx-pillar { position: fixed; background: linear-gradient(90deg, transparent, var(--c) 45%, #fff 50%, var(--c) 55%, transparent); transform-origin: 50% 100%; filter: blur(5px); mix-blend-mode: screen; }
.fx-chain, .fx-crack { position: fixed; pointer-events: none; }
.fx-chain svg, .fx-crack svg, .lock-mark svg { display: block; width: 100%; height: 100%; }
.fx-crack .crack { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 3px #ef5a45); stroke-dasharray: 1; stroke-dashoffset: 1; animation: crack-run .3s ease-out forwards; }
@keyframes crack-run { to { stroke-dashoffset: 0; } }
.fx-hit.delete b { color: #fff; background: var(--maroon); padding: 2px 12px; -webkit-text-stroke: 0; letter-spacing: .14em; box-shadow: 0 4px 18px rgba(0, 0, 0, .7); }
.lock-mark { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .92; }
/* การ์ดเอียงตามเมาส์หรือนิ้ว + แสงฟอยล์ */
.hand.me .card.tilting { transform: perspective(520px) translateY(-14px) rotateX(var(--tx)) rotateY(var(--ty)) scale(1.1); z-index: 6; transition: none; }
.modal-cards .card.tilting { transform: perspective(520px) rotateX(var(--tx)) rotateY(var(--ty)) scale(1.05); z-index: 6; transition: none; }
.detail-img.tilting { transform: perspective(620px) rotateX(var(--tx)) rotateY(var(--ty)); transition: none; }
.detail-img { transition: transform .25s ease-out; }
.card.tilting::before, .detail-img.tilting::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .42), transparent 42%), linear-gradient(115deg, transparent 22%, rgba(255, 70, 70, .24) 36%, rgba(255, 210, 63, .24) 46%, rgba(70, 220, 255, .24) 56%, rgba(200, 90, 255, .24) 66%, transparent 80%); background-size: 100% 100%, 220% 220%; background-position: 0 0, var(--gx) var(--gy); }
/* เอียงกระดานเหมือนโต๊ะจริง (ตัวเลือก ปิดไว้ก่อน) */
body.board-tilt #board { transform: perspective(1500px) rotateX(9deg) scale(.97); transform-origin: 50% 55%; }

/* คู่ Legion วางต่อกัน ไม่ซ้อน: rest ทั้งคู่หมุนเป็นชิ้นเดียว ภาพจึงยังเชื่อมกัน */
.legion > .card + .card { margin-left: 0; }
.legion { position: relative; z-index: 2; transition: transform .15s; }
.legion.lg-rest { transform: rotate(90deg) scale(.85); }
.legion.lg-rest > .card.rest { transform: none; }

/* คอลัมน์แวนการ์ดกว้างขึ้น ให้มีช่องไฟระหว่างคู่ Legion กับ rear-guard ข้างๆ (ความกว้างเพิ่มนับรวมในการคำนวณขนาดการ์ดแล้ว) · วงกลมยังกว้างเท่าเดิม */
.side-grid { --vcw: calc(var(--ch) * 1.18); }
.side-grid.me { grid-template-columns: var(--ch) var(--ch) var(--vcw) var(--ch) var(--ch) var(--ch); }
.side-grid.opp { grid-template-columns: var(--ch) var(--ch) var(--ch) var(--vcw) var(--ch) var(--ch); }
.board.wide .side-grid.me, .board.wide .side-grid.opp { grid-template-columns: repeat(3, var(--ch)) var(--vcw) repeat(3, var(--ch)); }
.a-vc, .a-bc { width: var(--ch); justify-self: center; }

/* เอฟเฟกต์ตามแคลน */
.fx-bolt { position: fixed; left: 0; top: 0; pointer-events: none; filter: drop-shadow(0 0 8px #7fc4ff); }
.fx-smoke { position: fixed; width: var(--s); height: var(--s); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(10, 4, 20, .95), rgba(60, 20, 100, .75) 45%, transparent 72%); }
.fx-smoke.ghost { background: radial-gradient(circle, rgba(170, 255, 235, .5), rgba(40, 130, 125, .45) 45%, transparent 72%); }
.fx-rift { position: fixed; width: calc(var(--s) * .3); height: calc(var(--s) * 1.5); border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse, #000 55%, #2a0640 80%); box-shadow: 0 0 14px 4px #c23bff, 0 0 40px 10px rgba(255, 46, 99, .6); }
.fx-slash { position: fixed; width: var(--s); height: 5px; pointer-events: none; background: linear-gradient(90deg, transparent, #fff 50%, transparent); box-shadow: 0 0 10px #dfe6ff, 0 0 22px #a6b4d6; }
/* ฉากตัดเข้าแบบอนิเมะ */
.fx-cut { position: fixed; left: -6vw; right: -6vw; top: 44%; height: clamp(110px, 30vh, 270px); overflow: hidden; background: #0d0e10; border-top: 4px solid var(--c); border-bottom: 4px solid var(--c); box-shadow: 0 0 40px var(--c), 0 0 0 100vmax rgba(0, 0, 0, .35); }
.fx-cut img { position: absolute; right: 6vw; top: 0; width: 62%; height: 100%; object-fit: cover; object-position: 50% 24%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%); mask-image: linear-gradient(90deg, transparent, #000 32%); }
.cut-lines { position: absolute; inset: 0; opacity: .3; background: repeating-linear-gradient(100deg, transparent 0 34px, var(--c) 34px 37px, transparent 37px 90px); }
.cut-text { position: absolute; left: 9vw; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; max-width: 62%; font-family: var(--mono); text-shadow: 0 2px 10px #000, 0 0 3px #000; }
.cut-text small { font-size: clamp(11px, 1.6vw, 15px); letter-spacing: .2em; color: var(--text); }
.cut-text b { font-size: clamp(26px, 6.4vw, 66px); font-weight: 800; font-style: italic; line-height: 1.05; color: #fff; -webkit-text-stroke: 1px var(--c); }
.cut-text span { font-size: clamp(11px, 1.8vw, 18px); color: #fff3c4; }
/* Damage check ที่ตัดสินเกม */
.fx-lethal { position: fixed; inset: 0; pointer-events: none; background: rgba(5, 5, 7, .72); box-shadow: inset 0 0 120px 40px rgba(180, 10, 20, .75); animation: lethal-beat .52s ease-in-out infinite alternate; }
@keyframes lethal-beat { from { opacity: .55; } to { opacity: 1; } }
.fx-shard { position: fixed; pointer-events: none; }
.fx-shard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fx-shard .txt { display: none; }
/* เลขพลังลุกไฟ */
.pw.pw-atk.pw-hot { color: #fff3c4; background: linear-gradient(0deg, #b3220f, #ff7a1a); text-shadow: 0 0 6px #ffb347; animation: pw-burn .45s ease-in-out infinite alternate; }
.pw.pw-atk.pw-inferno { color: #fff; background: linear-gradient(0deg, #7a0a10, #ff2e1a 55%, #ffb347); text-shadow: 0 0 8px #fff3c4, 0 0 14px #ff7a1a; font-size: calc(var(--ch) * .12); animation: pw-burn .22s ease-in-out infinite alternate; }
@keyframes pw-burn { from { filter: brightness(1); } to { filter: brightness(1.45); } }
.bt-n.pw-hot { color: #ffb347; text-shadow: 0 0 10px #ff7a1a; }
.bt-n.pw-inferno { color: #fff3c4; font-size: 1.4rem; text-shadow: 0 0 8px #ffb347, 0 0 18px #ef5a45; animation: pw-burn .22s ease-in-out infinite alternate; }
.fx-float.heat { color: #ffb347; text-shadow: 0 0 10px #ff7a1a, 0 2px 6px #000; }
.fx-float.heat.big { color: #fff3c4; font-size: clamp(22px, 4vw, 40px); text-shadow: 0 0 14px #ef5a45, 0 2px 6px #000; }
/* Double Trigger */
.fx-double { position: fixed; left: 50%; padding: 4px 18px; white-space: nowrap; font-family: var(--mono); font-weight: 800; font-style: italic; letter-spacing: .08em; font-size: clamp(22px, 5vw, 52px); color: #1a1206; background: var(--yellow); box-shadow: 0 0 34px var(--yellow); }
.fx-double.heal { background: #3ddc84; box-shadow: 0 0 34px #3ddc84; }
.fx-double.draw { color: #fff; background: #4aa3ff; box-shadow: 0 0 34px #4aa3ff; }
.fx-double.stand { background: #ff9f43; box-shadow: 0 0 34px #ff9f43; }
.fx-double.front { color: #fff; background: #ff6b5e; box-shadow: 0 0 34px #ff6b5e; }
.fx-double.mix { color: #fff; background: linear-gradient(90deg, var(--maroon), var(--red), var(--orange)); box-shadow: 0 0 34px var(--orange); }
/* โล่ Perfect Guard และดวงไฟ Soul */
.fx-shield { position: fixed; width: var(--s); height: var(--s); border-radius: 50%; pointer-events: none; border: 3px solid #eaf7ff; background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .55), rgba(150, 215, 255, .32) 45%, rgba(70, 150, 255, .5) 72%, rgba(70, 150, 255, .05)), repeating-conic-gradient(rgba(255, 255, 255, .22) 0 6deg, transparent 6deg 60deg); box-shadow: 0 0 34px 8px rgba(150, 215, 255, .8), inset 0 0 30px rgba(255, 255, 255, .6); }
.fx-orb { position: fixed; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff, var(--c) 55%, transparent 72%); box-shadow: 0 0 12px 4px var(--c); }

/* ผลการโจมตีอยู่เหนือประกาย และมีเงาเข้มรองหลังตัวหนังสือ */
#hit-layer { z-index: 99; }
.fx-hit { isolation: isolate; }
.fx-hit::before { content: ""; position: absolute; inset: -22% -18%; z-index: -1; background: radial-gradient(ellipse, rgba(0, 0, 0, .8), rgba(0, 0, 0, .45) 55%, transparent 74%); }
/* คำใบ้แตะข้าม */
.fx-skip { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 2px 10px; font-size: 12px; color: var(--muted); background: rgba(13, 14, 16, .78); border: 1px solid var(--line2); pointer-events: none; white-space: nowrap; }

/* ---------- จอ VS ก่อนเริ่มเกม ---------- */
.fx-skip { z-index: 5; }
.fx-vs { position: absolute; inset: 0; overflow: hidden; }
.vs-side { position: absolute; top: 0; bottom: 0; width: 57%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 58%, #0b0b0e), #0b0b0e 78%); }
.vs-a { left: 0; clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); padding-right: 9%; }
.vs-b { left: 43%; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); padding-left: 9%; background: linear-gradient(315deg, color-mix(in srgb, var(--c) 58%, #0b0b0e), #0b0b0e 78%); }
.vs-bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; opacity: .24; filter: blur(14px) saturate(1.3); }
.vs-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 86%; text-align: center; }
.vs-card { display: block; height: min(54vh, 430px); aspect-ratio: .686; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 2px var(--c), 0 18px 44px rgba(0, 0, 0, .75), 0 0 46px color-mix(in srgb, var(--c) 60%, transparent); background: #111; }
.vs-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; color: var(--text); }
.vs-text b { font-size: clamp(1.15rem, 2.6vw, 1.9rem); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 8px #000; }
.vs-text span { font-size: clamp(.82rem, 1.4vw, 1rem); line-height: 1.3; text-shadow: 0 1px 5px #000; }
.vs-clan { font-size: .8rem; color: var(--c); font-family: var(--mono); letter-spacing: .06em; filter: brightness(1.25); }
.vs-tag { align-self: center; padding: 0 8px; border: 1px solid var(--c); color: var(--text); font-size: .8rem; }
.vs-tag.vs-you { background: var(--c); color: #0b0b0e; font-weight: 700; }
.vs-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); font-family: var(--mono); font-weight: 800; font-style: italic; font-size: clamp(72px, 12vw, 170px); line-height: 1; color: #fff; -webkit-text-stroke: 2px #1a0d04; text-shadow: 0 0 22px #ffb347, 0 0 56px #ef5a45, 5px 6px 0 #7a1020; }
.vs-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
@media (orientation: portrait) {
  .vs-side { left: 0; right: 0; top: auto; bottom: auto; width: auto; height: 57%; padding: 0; }
  .vs-a { top: 0; clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); padding-bottom: 9%; }
  .vs-b { top: 43%; clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%); padding-top: 9%; }
  .vs-in { flex-direction: row; gap: 14px; text-align: left; max-width: 92%; }
  .vs-b .vs-in { flex-direction: row-reverse; text-align: right; }
  .vs-card { height: min(30vh, 250px); flex: none; }
  .vs-text { flex: 1; }
  .vs-tag { align-self: flex-start; }
  .vs-b .vs-tag { align-self: flex-end; }
  .vs-text b { white-space: normal; overflow-wrap: anywhere; font-size: 1.2rem; }
  .vs-text span { font-size: .84rem; }
  .vs-mark { font-size: clamp(64px, 22vw, 120px); }
}