:root {
  --bg: #15171c; --bg2: #1f2229; --panel: #262a33; --line: #3a404c; --fg: #ecece6; --mut: #9aa0ad;
  --gold: #d9b24c; --gold-d: #8e6f1f; --red: #c0392b; --green: #2e8b57; --blue: #2f6fb0; --stone: #4a5160;
  --card-w: 64px; --card-h: 92px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: radial-gradient(ellipse at 50% 0%, #2a2f3a 0%, var(--bg) 60%); color: var(--fg); font: 14px/1.4 'Segoe UI', system-ui, sans-serif; overflow: hidden; }
button { font: inherit; color: var(--fg); background: linear-gradient(180deg, #3b4150, #2a2f3a); border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; cursor: pointer; }
button:hover { filter: brightness(1.15); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: linear-gradient(180deg, #e2bd5b, #a8821f); color: #1a1408; border-color: #c9a23c; font-weight: 700; }
button.secondary { background: linear-gradient(180deg, #4b5263, #353b47); }
button.warn { background: linear-gradient(180deg, #a93c30, #7a241a); }
input, select { font: inherit; color: var(--fg); background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.hidden { display: none !important; }
.muted { color: var(--mut); font-size: 13px; }
.warn-text { color: #f0a070; } .ok-text { color: #7fd38a; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.bar { display: flex; gap: 10px; align-items: center; padding: 10px 16px; background: var(--bg2); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bar h2 { font-size: 18px; color: var(--gold); margin-right: 8px; }
.bar input { min-width: 220px; }

/* ---------- menu ---------- */
#screen-menu { align-items: center; justify-content: center; }
.menu-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 36px 44px; text-align: center; max-width: 560px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.menu-card h1 { font-size: 34px; color: var(--gold); letter-spacing: 1px; }
.menu-card h1 span { display: block; font-size: 18px; color: var(--fg); letter-spacing: 4px; font-weight: 400; }
.menu-card .sub { color: var(--mut); margin: 10px 0 22px; }
.menu-btns { display: flex; flex-direction: column; gap: 10px; }
button.big { font-size: 18px; padding: 14px; }
.hint { color: var(--mut); font-size: 12px; margin-top: 22px; }

/* ---------- chọn đối thủ ---------- */
.opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 14px; overflow: auto; }
.opp-card { display: flex; gap: 10px; align-items: center; text-align: left; padding: 8px; background: var(--panel); }
.opp-card img { width: 50px; height: 72px; border-radius: 4px; }
.opp-card b { display: block; font-size: 15px; } .opp-card small { display: block; color: var(--mut); font-size: 12px; }
.opp-card.lv2 { border-color: #7a6a33; } .opp-card.lv3 { border-color: #c04e3b; }

/* ---------- grid lá bài ---------- */
.grid { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; overflow: auto; padding: 10px; }
.grid.compact { gap: 4px; }
.card-mini { position: relative; width: 56px; height: 80px; border-radius: 4px; overflow: hidden; cursor: pointer; border: 1px solid #000; background: #000; flex: none; }
.card-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-mini:hover { outline: 2px solid var(--gold); }
.card-mini.dim { opacity: .35; }
.card-mini .badge { position: absolute; right: 2px; bottom: 2px; background: rgba(0,0,0,.75); color: #ffe08a; font-size: 10px; padding: 1px 4px; border-radius: 3px; }
.detail { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; overflow: auto; }
.detail-img { width: 100%; max-width: 200px; border-radius: 6px; display: block; margin: 0 auto 8px; }
.detail h3 { color: var(--gold); font-size: 16px; }
.detail-kind { color: var(--mut); font-size: 12px; margin: 2px 0 4px; }
.detail-stat { font-weight: 700; } .detail-stat.boosted { color: #7fd38a; }
.detail-desc { font-size: 13px; margin-top: 8px; color: #d8d8d0; }
.detail-pw { color: var(--mut); font-size: 11px; margin-top: 8px; }
.detail-empty { color: var(--mut); text-align: center; padding: 30px 0; }

/* ---------- thư viện / deck ---------- */
.lib-layout { display: grid; grid-template-columns: 1fr 240px; gap: 10px; padding: 10px; flex: 1; min-height: 0; }
.deck-layout { display: grid; grid-template-columns: 1fr 440px 220px; gap: 10px; padding: 10px; flex: 1; min-height: 0; }
.trunk-pane, .deck-pane { display: flex; flex-direction: column; min-height: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; }
.trunk-pane .tools { display: flex; gap: 6px; padding: 8px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }
.trunk-pane .tools input { flex: 1; min-width: 120px; }
.trunk-pane .grid, .deck-pane .grid { flex: 1; }
.deck-pane h3 { padding: 8px 10px 0; font-size: 14px; color: var(--gold); }
.deck-pane h3 small { color: var(--mut); font-weight: 400; }
#deck-fusion { flex: 0 0 auto; min-height: 90px; max-height: 180px; }

/* ---------- bàn đấu ---------- */
#screen-duel { flex-direction: row; }
#duel-side { width: 250px; display: flex; flex-direction: column; gap: 8px; padding: 8px; background: var(--bg2); border-right: 1px solid var(--line); }
#duel-side .detail { flex: 0 0 auto; max-height: 56%; }
.log { flex: 1; overflow: auto; background: #0f1115; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 12px; color: #c9ccd4; }
.log div { padding: 1px 0; border-bottom: 1px dotted #23262d; }
.log .log-turn { color: var(--gold); font-weight: 700; margin-top: 4px; }
.log .log-win { color: #7fd38a; font-weight: 700; }
#duel-main { flex: 1; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 6px 10px; gap: 4px; }
.pbar { display: flex; align-items: center; gap: 14px; padding: 4px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.pbar .pname { font-weight: 700; color: var(--gold); min-width: 90px; }
.pbar .lp { font: 700 24px/1 'Segoe UI', monospace; color: #ffd36a; text-shadow: 0 0 8px rgba(255,200,80,.4); min-width: 80px; }
.pbar .counts { color: var(--mut); font-size: 12px; }
.phases { display: flex; gap: 4px; margin-left: auto; }
.phases span { padding: 3px 8px; border-radius: 4px; background: #1b1e25; border: 1px solid var(--line); font-size: 12px; color: var(--mut); }
.phases span.on { background: var(--gold); color: #1a1408; font-weight: 700; border-color: var(--gold); }
.turn-btns { display: flex; gap: 6px; min-width: 260px; justify-content: flex-end; }
.hand { display: flex; gap: 6px; justify-content: center; min-height: calc(var(--card-h) + 8px); padding: 3px; }
.hand.opp .bcard { opacity: .9; }
.board { flex: 1; display: grid; grid-template-columns: 90px 1fr 90px; gap: 8px; min-height: 0; background: radial-gradient(ellipse at center, #3c4454 0%, #262b35 70%); border: 2px solid #5a6273; border-radius: 10px; padding: 8px; }
.rows { display: grid; grid-template-rows: repeat(4, 1fr); gap: 6px; }
.row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.zone { position: relative; border: 1px dashed #6b7384; border-radius: 6px; background: rgba(255,255,255,.03); display: flex; align-items: center; justify-content: center; min-height: calc(var(--card-h) + 6px); }
.zone .zl { position: absolute; top: 2px; left: 4px; font-size: 10px; color: #8d94a3; }
.zone b { position: absolute; bottom: 2px; right: 4px; font-size: 12px; color: #ffd36a; }
.side-zone { display: flex; flex-direction: column; gap: 6px; justify-content: space-around; }
.zone.small { min-height: 70px; cursor: pointer; }
.zone.small .bcard { transform: scale(.78); }
.bcard { position: relative; width: var(--card-w); height: var(--card-h); border-radius: 4px; overflow: hidden; border: 1px solid #000; background: #000; cursor: default; transition: transform .15s, box-shadow .15s; flex: none; }
.bcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcard .st { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.72); color: #fff; font-size: 10px; text-align: center; padding: 1px 0; }
.bcard .setmark { position: absolute; top: 2px; left: 2px; background: rgba(0,0,0,.7); color: #ffd36a; font-size: 9px; padding: 0 3px; border-radius: 2px; }
.bcard .eq { position: absolute; top: 2px; right: 2px; background: #2f6fb0; color: #fff; font-size: 9px; padding: 0 3px; border-radius: 2px; }
.bcard.def { transform: rotate(90deg) scale(.86); }
.bcard.down img { filter: brightness(.85); }
.bcard.can { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(217,178,76,.6); cursor: pointer; }
.bcard.can:hover { transform: translateY(-4px); }
.bcard.def.can:hover { transform: rotate(90deg) scale(.9); }
.bcard.target { box-shadow: 0 0 0 2px var(--red), 0 0 14px rgba(192,57,43,.7); cursor: crosshair; }
.bcard.flash { animation: flash .9s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px #fff, 0 0 30px #ffd36a; } 100% { box-shadow: none; } }
.prompt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(10,12,16,.85); border: 1px solid var(--gold); color: #ffe6a8; padding: 6px 14px; border-radius: 20px; font-size: 13px; pointer-events: none; z-index: 5; }
.action-menu { position: absolute; z-index: 20; display: flex; flex-direction: column; gap: 3px; background: #11141a; border: 1px solid var(--gold); border-radius: 8px; padding: 5px; min-width: 180px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.action-menu button { text-align: left; padding: 7px 10px; }
.banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font: 800 42px/1 'Segoe UI', sans-serif; color: #ffd36a; text-shadow: 0 2px 0 #7a5a10, 0 0 30px rgba(255,200,80,.7); pointer-events: none; z-index: 30; animation: pop .4s ease-out; }
.banner.soft { font-size: 22px; opacity: .85; top: 50%; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
body.my-turn .pbar.bottom { border-color: var(--gold); }

/* ---------- hộp thoại ---------- */
.app-dialog { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
.dlg { background: var(--panel); border: 1px solid var(--gold); border-radius: 12px; padding: 18px 20px; min-width: 320px; max-width: 520px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.dlg.wide { max-width: 860px; width: 90vw; max-height: 86vh; display: flex; flex-direction: column; }
.dlg-msg { font-size: 15px; margin-bottom: 12px; white-space: pre-line; }
.dlg-msg small { color: var(--mut); }
.dlg-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.dlg-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.dlg-opt { display: flex; gap: 10px; align-items: center; text-align: left; padding: 6px 10px; }
.dlg-opt img { width: 40px; height: 58px; border-radius: 3px; }
.dlg-opt span { display: flex; flex-direction: column; } .dlg-opt small { color: var(--mut); font-size: 11px; }
.dlg-opt.pass { border-color: #777; }
.dlg-input { width: 100%; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; overflow: auto; flex: 1; min-height: 120px; }
.pick { display: flex; gap: 8px; align-items: center; padding: 5px; background: var(--bg2); border: 2px solid var(--line); border-radius: 6px; cursor: pointer; }
.pick img { width: 46px; height: 66px; border-radius: 3px; }
.pick b { display: block; font-size: 13px; } .pick small { display: block; color: var(--mut); font-size: 11px; }
.pick.sel { border-color: var(--gold); background: #3a3320; }
@media (max-width: 1000px) { #duel-side { width: 200px; } :root { --card-w: 52px; --card-h: 75px; } .deck-layout { grid-template-columns: 1fr 320px; } #deck-detail { display: none; } }

/* ---------- màn title gốc (800x600, scale theo cửa sổ) ---------- */
.title-screen { background: #000; align-items: center; justify-content: center; overflow: hidden; }
.title-stage { position: relative; width: 800px; height: 600px; background: url('/img/ui/title_bg.jpg') no-repeat; transform-origin: center center; flex: none; cursor: default; user-select: none; }
.title-logo { position: absolute; left: 120px; top: 10px; width: 560px; height: 310px; pointer-events: none; }
.title-menu { position: absolute; left: 200px; top: 320px; width: 400px; height: 250px; }
.title-menu img { position: absolute; inset: 0; width: 400px; height: 250px; display: block; }
.plank-hits { position: absolute; inset: 0; }
.plank { position: absolute; left: 0; width: 400px; height: 50px; cursor: pointer; }
.plank:hover { background: rgba(255, 230, 150, .22); box-shadow: inset 0 0 0 2px rgba(255, 220, 120, .55); }
.plank.disabled { cursor: not-allowed; }
.plank .lv { position: absolute; right: 70px; top: 14px; color: #3a2a12; font: 800 18px/1 'Segoe UI', sans-serif; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.title-copy { position: absolute; right: 18px; bottom: 10px; color: #fff; font: 600 18px 'Segoe UI', sans-serif; text-shadow: 0 1px 3px #000, 0 0 2px #000; }
.title-stats { position: absolute; left: 14px; top: 10px; color: #fff; font: 600 13px 'Segoe UI', sans-serif; text-shadow: 0 1px 3px #000, 0 0 2px #000; opacity: .9; }

.opp-card.dim { opacity: .55; }

/* ---------- DECK CONSTRUCTION gốc (800x600) ---------- */
.screen, .app-dialog { cursor: url('/img/ui/cursor00.png') 18 6, auto; }
.dc-stage { position: relative; width: 800px; height: 600px; transform-origin: center center; flex: none; user-select: none; background: #2a1d17 url('/img/ui/deck/kabegami_c.png') 217px 0 no-repeat; font-family: 'Segoe UI', Arial, sans-serif; }
.dc-left { position: absolute; left: 0; top: 0; width: 217px; height: 600px; background: url('/img/ui/deck/kabegami_l_e.png') no-repeat; }
.dc-hit { position: absolute; cursor: pointer; }
.dc-hit:hover { background: rgba(255,255,255,.18); }
.dc-export { left: 10px; top: 40px; width: 95px; height: 22px; }
.dc-import { left: 112px; top: 40px; width: 95px; height: 22px; }
.dc-back { left: 20px; top: 556px; width: 178px; height: 36px; border-radius: 6px; }
.dc-deckpick { position: absolute; left: 10px; top: 72px; width: 198px; display: flex; gap: 2px; }
.dc-deckpick select { flex: 1; min-width: 0; font-size: 12px; padding: 2px 4px; background: #f3e9d2; color: #3a1d0c; border: 2px solid #7a2a1a; border-radius: 4px; }
.dc-deckpick button { padding: 0 6px; font-size: 12px; background: #c0392b; border: 2px solid #7a1f14; border-radius: 4px; color: #fff; }
.dc-preview { position: absolute; left: 10px; top: 118px; width: 196px; height: 284px; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.dc-desc { position: absolute; left: 14px; top: 396px; width: 178px; height: 138px; overflow: auto; font-size: 12px; line-height: 1.5; color: #1a1a1a; padding: 2px 4px; }
.dc-desc b { display: block; color: #2244aa; font-size: 13px; margin-bottom: 3px; }
.dc-desc::-webkit-scrollbar { width: 6px; } .dc-desc::-webkit-scrollbar-thumb { background: #c0392b; }
.dc-center { position: absolute; left: 217px; top: 0; width: 466px; height: 600px; }
.dc-counter { position: absolute; left: 7px; width: 22px; height: 22px; display: flex; justify-content: center; align-items: center; gap: 0; }
.dc-counter span { display: block; width: 9px; height: 17px; background: url('/img/ui/deck/font_big.png') no-repeat; }
.dc-counter.red span { background-image: url('/img/ui/deck/font_big_red.png'); }
.dc-rows { position: absolute; left: 48px; top: 50px; width: 400px; height: 340px; }
.dc-row { position: absolute; height: 72px; }
.dc-rows .dc-row { left: 0; width: 400px; }
.dc-side { left: 48px; top: 414px; width: 400px; }
.dc-fusion { left: 48px; top: 512px; width: 400px; }
.dc-card { position: absolute; width: 50px; height: 72px; border-radius: 3px; box-shadow: 1px 0 3px rgba(0,0,0,.6); cursor: pointer; transition: transform .08s; }
.dc-card:hover { transform: translateY(-6px); z-index: 50 !important; outline: 2px solid #ffe36a; }
.dc-status { position: absolute; left: 50px; top: 388px; width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 5; font-size: 11px; font-weight: 700; color: #ffe36a; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.dc-right { position: absolute; left: 585px; top: 0; width: 215px; height: 600px; background: url('/img/ui/deck/kaban.png') 0 0 no-repeat, url('/img/ui/deck/right.png') 182px 0 no-repeat; }
.dc-filter, .dc-sort { position: absolute; top: 8px; height: 30px; border: 2px solid #111; border-radius: 6px; font: 800 14px 'Segoe UI', sans-serif; color: #fff; text-shadow: 0 1px 2px #000; padding: 0; }
.dc-filter { left: 42px; width: 100px; background: linear-gradient(180deg, #4b6cff, #1b2a99); }
.dc-filter.nor { background: linear-gradient(180deg, #e9e2c3, #a89c70); color: #222; text-shadow: none; } .dc-filter.eff { background: linear-gradient(180deg, #ffb45a, #c25d12); } .dc-filter.mag { background: linear-gradient(180deg, #4ad08a, #137a44); } .dc-filter.tra { background: linear-gradient(180deg, #ff86c8, #b02a74); } .dc-filter.fus { background: linear-gradient(180deg, #b78cff, #5c2bb0); } .dc-filter.rit { background: linear-gradient(180deg, #5ab8ff, #1a5aa8); }
.dc-sort { left: 146px; width: 32px; background: linear-gradient(180deg, #333, #000); font-size: 10px; }
.dc-list { position: absolute; left: 4px; top: 39px; width: 178px; height: 552px; overflow: hidden; }
.dc-rowitem { position: absolute; left: 0; width: 178px; height: 52px; cursor: pointer; color: #fff; }
.dc-rowitem:hover { background: rgba(255,255,255,.12); }
.dc-rowitem.dim { opacity: .45; }
.dc-rowitem img.mini { position: absolute; left: 4px; top: 7px; width: 32px; height: 44px; border-radius: 2px; }
.dc-rowitem .cnt { position: absolute; left: 20px; top: 36px; min-width: 16px; font: 800 12px/14px 'Segoe UI', sans-serif; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; text-align: right; }
.dc-rowitem .nm { position: absolute; left: 44px; top: 8px; width: 130px; white-space: nowrap; overflow: hidden; font: 700 13px/16px 'Segoe UI', sans-serif; color: #ffcf5a; text-shadow: 1px 1px 0 #000; }
.dc-rowitem .st { position: absolute; left: 44px; top: 29px; font: 700 12px/16px 'Consolas', 'Lucida Console', monospace; color: #8fe0ff; text-shadow: 1px 1px 0 #000; white-space: pre; }
.dc-rowitem .ic { position: absolute; top: 30px; width: 16px; height: 16px; background-repeat: no-repeat; }
.dc-rowitem .lv { position: absolute; right: 4px; top: 30px; font: 700 11px/16px 'Segoe UI', sans-serif; color: #fff; text-shadow: 1px 1px 0 #000; }
.dc-rowitem .lv::before { content: ''; display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 1px; background: url('/img/ui/deck/icon_star.png') -1px 0 no-repeat; }
.dc-scroll { position: absolute; left: 190px; top: 22px; width: 10px; height: 556px; cursor: pointer; }
.dc-thumb { position: absolute; left: -3px; width: 16px; min-height: 24px; background: rgba(255,230,120,.55); border: 1px solid #000; border-radius: 4px; }

/* ---------- bộ lọc 6 ô màu + kéo thả ---------- */
.dc-fpanel { position: absolute; left: 40px; top: 4px; width: 145px; height: 39px; background: url('/img/ui/deck/filter_mini.png') no-repeat; }
.dc-f { position: absolute; width: 21px; height: 9px; cursor: pointer; background-repeat: no-repeat; }
.dc-f.off { filter: brightness(.9); }
.dc-f.on { box-shadow: inset 1px 1px 2px rgba(0,0,0,.7), 0 0 4px rgba(255,255,255,.6); transform: translate(1px, 1px); }
.dc-f:hover { outline: 1px solid #fff; }
.dc-fpanel .dc-sort { position: absolute; left: 112px; top: 6px; width: 24px; height: 24px; border-radius: 4px; font: 800 9px 'Segoe UI', sans-serif; color: #ffe36a; background: #000; border: 1px solid #ffe36a; padding: 0; }
.dc-drop.over { outline: 3px dashed #ffe36a; outline-offset: -3px; background: rgba(255,230,106,.12); }
.dc-rowitem[draggable], .dc-card[draggable] { cursor: grab; }
.dc-rowitem.dragging, .dc-card.dragging { opacity: .4; }

.dc-rowitem .seigen { position: absolute; left: 42px; top: 7px; width: 16px; height: 16px; background: url('/img/ui/deck/icon_seigen.png') no-repeat; z-index: 2; }
.dc-rowitem .seigen + .nm { left: 60px; width: 116px; }

.dc-rowitem.sel { background: rgba(255,230,106,.28); box-shadow: inset 0 0 0 2px #ffe36a; }
.dc-card.sel { outline: 3px solid #4af0ff; outline-offset: -1px; transform: translateY(-4px); }

/* ---------- quản trị bài ---------- */
.adm-list { overflow: auto; display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.adm-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.adm-row.custom { border-color: var(--gold); }
.adm-row img { width: 40px; height: 58px; border-radius: 3px; }
.adm-info b { display: block; font-size: 14px; } .adm-info small { display: block; color: var(--mut); font-size: 11px; }
.adm-cust { color: var(--gold); font-weight: 700; }
.adm-btns { display: flex; gap: 4px; }
.adm-btns button { width: 34px; padding: 6px 0; }
.adm-btns button.on { background: linear-gradient(180deg, #e2bd5b, #a8821f); color: #1a1408; font-weight: 800; border-color: #c9a23c; }

/* ---------- tab 6 loại ---------- */
.cat-tabs { display: flex; gap: 6px; padding: 8px 16px 0; flex-wrap: wrap; }
.cat-tab { padding: 6px 14px; border: 2px solid #222; border-radius: 6px 6px 0 0; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; opacity: .55; }
.cat-tab small { font-weight: 600; opacity: .85; }
.cat-tab.on { opacity: 1; border-color: var(--gold); box-shadow: 0 0 10px rgba(217,178,76,.5); }
.cat-tab.all { background: linear-gradient(180deg, #4b6cff, #1b2a99); } .cat-tab.nor { background: linear-gradient(180deg, #e9e2c3, #a89c70); color: #222; text-shadow: none; }
.cat-tab.eff { background: linear-gradient(180deg, #ffb45a, #c25d12); } .cat-tab.mag { background: linear-gradient(180deg, #4ad08a, #137a44); }
.cat-tab.tra { background: linear-gradient(180deg, #ff86c8, #b02a74); } .cat-tab.fus { background: linear-gradient(180deg, #b78cff, #5c2bb0); } .cat-tab.rit { background: linear-gradient(180deg, #5ab8ff, #1a5aa8); }

.card-mini .stat { position: absolute; left: 2px; bottom: 2px; background: rgba(0,0,0,.75); color: #6fe3ff; font-size: 10px; padding: 1px 4px; border-radius: 3px; }

/* ---------- nút thu gọn danh sách + chế độ gọn ---------- */
.dc-swap { left: 3px; top: 4px; width: 36px; height: 36px; border-radius: 6px; }
.dc-stage.compact .dc-right { left: 683px; width: 117px; background: url('/img/ui/deck/right.png') 84px 0 no-repeat, url('/img/ui/deck/kaban.png') 0 0 no-repeat; }
.dc-stage.compact .dc-right::before { content: ''; position: absolute; left: 40px; top: 4px; width: 44px; height: 39px; background: repeating-linear-gradient(135deg, #2a2d33 0 4px, #4a4e57 4px 8px); border: 1px solid #111; border-radius: 3px; }
.dc-stage.compact .dc-fpanel { display: none; }
.dc-stage.compact .dc-list { width: 82px; }
.dc-stage.compact .dc-rowitem .cnt { left: 2px; }
.dc-stage.compact .dc-rowitem { width: 80px; }
.dc-stage.compact .dc-scroll { left: 92px; }
.dc-rowitem .st2 { position: absolute; left: 40px; top: 12px; width: 38px; text-align: right; font: 700 11px/15px 'Consolas', 'Lucida Console', monospace; color: #8fe0ff; text-shadow: 1px 1px 0 #000; }
.dc-stage.compact .dc-rows, .dc-stage.compact .dc-side, .dc-stage.compact .dc-fusion { width: 420px; }

/* ---------- BÀN ĐẤU gốc (800x600) ---------- */
.du-stage { position: relative; width: 800px; height: 600px; transform-origin: center center; flex: none; user-select: none; background: #111; font-family: 'Segoe UI', Arial, sans-serif; overflow: hidden; }
.du-left { position: absolute; left: 0; top: 0; width: 230px; height: 600px; background: url('/img/ui/duel/detail_detail.png') no-repeat; }
.du-lp { position: absolute; left: 0; top: 1px; width: 186px; height: 34px; display: flex; justify-content: flex-end; }
.du-lp.bottom { top: 528px; }
.du-lp span { display: block; width: 26px; height: 34px; background: url('/img/ui/duel/life_lp_123.png') no-repeat; }
.du-meter { position: absolute; left: 14px; width: 180px; height: 20px; background: url('/img/ui/duel/life_lp_aite1.png') no-repeat; }
.du-meter.opp { top: 43px; } .du-meter.mine { top: 571px; background-image: url('/img/ui/duel/life_lp_jibu1.png'); }
.du-meter-fill { position: absolute; left: 28px; top: 2px; height: 16px; width: 150px; background: url('/img/ui/duel/life_lp_aite2.png') no-repeat; transition: width .4s; }
.du-meter.mine .du-meter-fill { background-image: url('/img/ui/duel/life_lp_jibu2.png'); }
.du-name { position: absolute; left: 60px; font: 700 10px/12px 'Segoe UI', sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.du-name.opp { top: 64px; } .du-name.mine { top: 592px; }
.du-preview { position: absolute; left: 8px; top: 72px; width: 197px; height: 288px; border-radius: 5px; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.du-desc { position: absolute; left: 12px; top: 366px; width: 186px; height: 136px; overflow: auto; font-size: 12px; line-height: 1.5; color: #1a1a1a; padding-right: 4px; }
.du-desc b { display: block; color: #2244aa; font-size: 13px; } .du-desc i { display: block; color: #a0321e; font-style: normal; font-size: 12px; }
.du-desc::-webkit-scrollbar { width: 5px; } .du-desc::-webkit-scrollbar-thumb { background: #a0321e; }
.du-stat { position: absolute; left: 12px; top: 506px; width: 190px; font: 800 12px/16px 'Consolas', monospace; color: #111; }
.du-stat .ic { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; background-repeat: no-repeat; margin-right: 2px; }
.du-stat .up { color: #1a7a1a; } .du-stat .down { color: #b00; }
.du-phases { position: absolute; left: 221px; top: 82px; width: 40px; z-index: 30; } /* nằm trên tấm sân (#du-field) kẻo bị che */
.du-phases span { display: block; width: 40px; height: 75px; background-repeat: no-repeat; cursor: default; }
.du-phases span[data-ph="draw"] { background-image: url('/img/ui/duel/phase_pha_s_dr.png'); } .du-phases span[data-ph="standby"] { background-image: url('/img/ui/duel/phase_pha_s_st.png'); }
.du-phases span[data-ph="main1"] { background-image: url('/img/ui/duel/phase_pha_s_m1.png'); } .du-phases span[data-ph="battle"] { background-image: url('/img/ui/duel/phase_pha_s_ba.png'); }
.du-phases span[data-ph="main2"] { background-image: url('/img/ui/duel/phase_pha_s_m2.png'); } .du-phases span[data-ph="end"] { background-image: url('/img/ui/duel/phase_pha_s_en.png'); }
.du-phases span { background-position: 0 0; }            /* xanh thường */
.du-phases span.on { background-position: -40px 0; }     /* xanh sáng */
.du-phases.opp span { background-position: 0 -75px; }    /* đỏ thường */
.du-phases.opp span.on { background-position: -40px -75px; }
.du-phases span.clickable { cursor: pointer; filter: drop-shadow(0 0 4px #ffe36a); }
.du-field { position: absolute; left: 230px; top: 0; width: 570px; height: 600px; background: url('/img/ui/duel/field_fie_normal.png') no-repeat; }
.du-row { position: absolute; left: 95px; width: 410px; height: 80px; }
#p1-sz { top: 100px; } #p1-mz { top: 207px; } #p0-mz { top: 315px; } #p0-sz { top: 420px; }
.du-zone { position: absolute; width: 80px; height: 80px; }
.du-zone.fz.opp { left: 500px; top: 205px; width: 65px; } .du-zone.fz.mine { left: 22px; top: 318px; width: 75px; }
.du-pile { position: absolute; width: 60px; height: 82px; }
.du-deck.opp { left: 25px; top: 92px; } .du-deck.mine { left: 505px; top: 418px; }
.du-gy.opp { left: 25px; top: 190px; cursor: pointer; } .du-gy.mine { left: 505px; top: 328px; cursor: pointer; }   /* cùng cột với deck/fusion */
.du-fus.opp { left: 505px; top: 92px; cursor: pointer; } .du-fus.mine { left: 25px; top: 418px; cursor: pointer; }
.du-deck { background: url('/img/mini/card_ura.jpg') center / 100% 100% no-repeat; border-radius: 3px; box-shadow: 2px 2px 0 #3a2a1a, 4px 4px 0 #2a1d10, 6px 6px 6px rgba(0,0,0,.6); }
.du-deck b { position: absolute; left: 0; right: 0; bottom: -16px; text-align: center; font: 800 12px/14px 'Segoe UI', sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.du-pile .du-card { position: absolute; left: 1px; top: 1px; }
.du-pile b.cnt { position: absolute; right: -4px; bottom: -14px; font: 800 12px/14px 'Segoe UI', sans-serif; color: #ffe36a; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.du-card { position: absolute; width: 58px; height: 80px; border-radius: 3px; background: #000; box-shadow: 1px 1px 4px rgba(0,0,0,.7); transition: transform .12s; }
.du-card img { width: 100%; height: 100%; display: block; border-radius: 3px; }
.du-card.def { transform: rotate(90deg); }
.du-card .st { position: absolute; left: -12px; right: -12px; bottom: -15px; text-align: center; font: 800 11px/13px 'Consolas', monospace; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
.du-card.def .st { transform: rotate(-90deg); left: 10px; right: auto; bottom: 25px; width: 80px; }
.du-card .eq { position: absolute; top: -6px; right: -6px; background: #2f6fb0; color: #fff; font-size: 9px; padding: 0 3px; border-radius: 3px; }
.du-card.can { outline: 2px solid #ffe36a; box-shadow: 0 0 12px rgba(255,227,106,.8); cursor: pointer; }
.du-card.can:hover { transform: translateY(-4px); } .du-card.def.can:hover { transform: rotate(90deg) scale(1.06); }
.du-card.target { outline: 2px solid #ff3b3b; box-shadow: 0 0 12px rgba(255,59,59,.9); cursor: crosshair; }
.du-card.flash { animation: flash .9s ease-out; }
.du-row .du-card { top: 0; }
.du-hand { position: absolute; left: 0; width: 570px; height: 150px; }
.du-hand.opp { top: -84px; } .du-hand.mine { top: 530px; }
.du-hand .du-card { width: 100px; height: 145px; }
.du-hand.mine .du-card:hover, .du-hand.mine .du-card.can:hover { transform: translateY(-72px); z-index: 60 !important; }
.du-hand .du-card .st { display: none; }
.du-banner { position: absolute; left: 50%; top: 240px; transform: translateX(-50%); z-index: 30; pointer-events: none; animation: pop .35s ease-out; }
.du-btns { position: absolute; left: 100px; top: 512px; display: flex; gap: 4px; }
.du-btns button { padding: 1px 8px; font-size: 11px; }
.du-logbtn { position: absolute; left: 740px; top: 582px; width: 56px; height: 16px; padding: 0; font-size: 10px; line-height: 14px; border-radius: 4px; }
.du-logbtn.surrender { left: 236px; width: 70px; }
.du-log { position: absolute; left: 240px; top: 60px; width: 330px; height: 400px; z-index: 40; background: rgba(10,12,16,.92); }
.du-stage .prompt { top: 290px; }
.du-stage .banner { top: 220px; }

/* ---------- shop ---------- */
/* ---- đăng nhập ---- */
.login-box { width: 360px; background: linear-gradient(180deg, #1b2130, #11151f); border: 2px solid #3a4258; border-radius: 14px; padding: 22px 24px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 8px; }
.login-logo { width: 220px; align-self: center; margin-bottom: 6px; }
.login-tabs { display: flex; border-bottom: 1px solid #3a4258; margin-bottom: 6px; }
.login-tab { flex: 1; background: none; border: 0; color: #9aa; padding: 8px; font: 700 14px 'Segoe UI', sans-serif; cursor: pointer; border-bottom: 3px solid transparent; }
.login-tab.active { color: var(--gold, #ffd36a); border-bottom-color: var(--gold, #ffd36a); }
.login-box label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #bcc; }
.login-box input { padding: 9px 10px; border-radius: 8px; border: 1px solid #334; background: #0f1218; color: #fff; font-size: 14px; }
.login-err { color: #ff6a6a; min-height: 18px; font-size: 13px; }
.login-submit { padding: 10px; font-size: 15px; }
.login-or { text-align: center; color: #778; font-size: 12px; }
.login-google { display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: #222; text-decoration: none; font: 700 14px 'Segoe UI', sans-serif; padding: 9px; border-radius: 8px; }
.login-google:hover { filter: brightness(.93); }
.login-google img { width: 18px; height: 18px; }
.title-user { position: absolute; right: 14px; top: 10px; color: #fff; font: 600 13px 'Segoe UI', sans-serif; text-shadow: 0 1px 3px #000; display: flex; gap: 8px; align-items: center; }
.title-user button { background: rgba(0,0,0,.55); color: #fff; border: 1px solid #667; border-radius: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer; }
.shop-silver { font-size: 12px; color: #cdd; display: flex; gap: 4px; align-items: center; }
.sh-free { color: #7dff9a; font-weight: 800; } .sh-life { color: #ffd36a; font-weight: 800; } .sh-act { color: #8fe0ff; font-weight: 700; } .sh-exp { color: #ff7a7a; font-weight: 800; } .sh-none { color: #889; }
.adm-row.sh-expired { border-color: #a33; } .adm-row.sh-active { border-color: #2a6a8a; }
.dc-renew { position: absolute; left: 14px; top: 536px; width: 190px; background: rgba(120,20,20,.9); color: #fff; border: 1px solid #ff8a8a; border-radius: 6px; padding: 4px 6px; font: 700 11px/14px 'Segoe UI', sans-serif; cursor: pointer; z-index: 5; }
.dc-renew:hover { background: rgba(160,30,30,.95); }
.dc-card.locked, .dc-rowitem.locked { filter: grayscale(1) brightness(.6); }
.reward-note { text-align: center; color: #cfe; font: 600 14px/20px 'Segoe UI', sans-serif; margin-bottom: 10px; white-space: pre-line; }
.title-back { position: absolute; left: 14px; bottom: 96px; padding: 8px 14px; font: 800 15px 'Segoe UI', sans-serif; background: linear-gradient(180deg, #6d7a95, #3a4258); color: #fff; border: 2px solid #1d2230; border-radius: 8px; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.title-back:hover { filter: brightness(1.15); }
.title-shop { position: absolute; left: 14px; bottom: 40px; padding: 8px 14px; font: 800 15px 'Segoe UI', sans-serif; background: linear-gradient(180deg, #e2bd5b, #a8821f); color: #1a1408; border: 2px solid #5a4210; border-radius: 8px; box-shadow: 0 3px 8px rgba(0,0,0,.6); }
.shop-points { color: var(--gold); font-size: 16px; }
.shop-stars { color: #ffcf5a; letter-spacing: -1px; }
.adm-row.poor { opacity: .6; }
.adm-stars { font-size: 12px; color: var(--mut); display: flex; align-items: center; gap: 4px; margin-right: 10px; }
.adm-stars input { width: 52px; padding: 3px 4px; } .adm-stars i { font-style: normal; color: var(--gold); }

.dc-marquee { position: absolute; border: 1px dashed #4af0ff; background: rgba(74,240,255,.18); pointer-events: none; z-index: 200; }

/* nhãn hành động mặc định khi rê chuột lên lá */
.du-card .du-act { display: none; position: absolute; left: 50%; top: -24px; transform: translateX(-50%); padding: 2px 10px; border-radius: 10px; background: linear-gradient(180deg, #ffe36a, #c9961c); color: #1a1408; font: 900 11px/16px 'Segoe UI', Arial, sans-serif; letter-spacing: 1px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.7), 0 0 8px rgba(255,227,106,.6); pointer-events: none; z-index: 70; }
.du-card.can:hover .du-act { display: block; }
.du-hand .du-card .du-act { top: -22px; }

/* tỷ số match duel */
.du-score { position: absolute; left: 118px; font: 700 10px/12px 'Segoe UI', sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
.du-score.opp { top: 64px; } .du-score.mine { top: 592px; }
.du-score b { color: #ffe36a; }
.du-score i { display: inline-block; width: 10px; height: 10px; margin-left: 3px; vertical-align: -1px; border: 1px solid #ffe36a; border-radius: 2px; background: rgba(0,0,0,.45); }
.du-score.mine i.w { background: #4af0ff; box-shadow: 0 0 6px #4af0ff; }
.du-score.opp i.w { background: #ff6a6a; box-shadow: 0 0 6px #ff6a6a; }
.du-score span { margin-left: 4px; }

/* phân tích ATK/DEF */
.du-break { display: grid; grid-template-columns: 1fr 44px 44px; gap: 0 4px; margin-top: 3px; font: 700 11px/14px 'Consolas', monospace; color: #222; border-top: 1px solid rgba(0,0,0,.25); padding-top: 3px; margin-top: 6px; }
.du-break span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.du-break b { text-align: right; }

/* hộp chọn bài: thấy sân + lá đang rê sáng lên */
.app-dialog.picker { background: rgba(0,0,0,.28); align-items: flex-start; padding-top: 6vh; }
.pick-pos { display: block; color: #ffe36a; font-weight: 700; }
.du-card.pickhl { outline: 4px solid #4af0ff; outline-offset: 1px; box-shadow: 0 0 22px 6px rgba(74,240,255,.9); transform: translateY(-10px) scale(1.1); z-index: 80 !important; }
.du-card.def.pickhl { transform: rotate(90deg) scale(1.1); }

/* màn nhận thưởng */
.app-dialog.reward { background: rgba(0,0,0,.75); }
.reward-title { font: 900 26px/32px 'Segoe UI', sans-serif; color: var(--gold); text-align: center; text-shadow: 0 0 12px rgba(255,211,106,.8); margin-bottom: 14px; letter-spacing: 1px; }
.reward-row { display: flex; gap: 22px; justify-content: center; margin-bottom: 14px; }
.reward-card { width: 190px; text-align: center; opacity: 0; animation: rewardIn .7s cubic-bezier(.2,.8,.3,1) forwards; }
.reward-card img { width: 190px; border-radius: 8px; box-shadow: 0 0 24px 6px rgba(255,211,106,.75), 0 8px 20px rgba(0,0,0,.8); display: block; margin-bottom: 8px; }
.reward-card b { display: block; color: #fff; font-size: 14px; }
.reward-card small { display: block; color: var(--mut); font-size: 11px; margin-top: 2px; }
@keyframes rewardIn { from { opacity: 0; transform: translateY(40px) rotateY(90deg) scale(.6); } 60% { opacity: 1; transform: translateY(-8px) rotateY(0deg) scale(1.08); } to { opacity: 1; transform: translateY(0) rotateY(0deg) scale(1); } }

/* số lượt còn hiệu lực (Swords of Revealing Light...) */
.du-card .turns { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); background: linear-gradient(180deg, #ffe36a, #c9961c); color: #1a1408; font: 900 11px/15px 'Segoe UI', sans-serif; padding: 0 6px; border-radius: 8px; box-shadow: 0 0 6px rgba(255,227,106,.9), 0 1px 3px #000; white-space: nowrap; z-index: 5; }

/* thanh báo bản mới */
#update-bar { position: fixed; left: 50%; top: 8px; transform: translateX(-50%); z-index: 9999; background: linear-gradient(180deg, #ffe36a, #c9961c); color: #1a1408; font: 700 14px/18px 'Segoe UI', sans-serif; padding: 8px 16px; border-radius: 20px; box-shadow: 0 4px 14px rgba(0,0,0,.7); cursor: pointer; animation: pop .35s ease-out; }
#update-bar.hidden { display: none; }
/* build bump 1792080272 */

/* số ATK/DEF đang chạy dần */
.du-card .st.hi { color: #7dff9a; text-shadow: 0 0 4px #1f9d44, 0 1px 2px #000; }
.du-card .st.lo { color: #ff7a7a; text-shadow: 0 0 4px #a82323, 0 1px 2px #000; }
.du-card .st.up { color: #6cff8a; text-shadow: 0 0 6px #2fd45a, 0 1px 2px #000; }
.du-card .st.down { color: #ff6a6a; text-shadow: 0 0 6px #d42f2f, 0 1px 2px #000; }

/* lá liên quan khi rê chuột (trang bị ↔ quái) */
.du-card.linkhl { outline: 3px solid #ffe36a; outline-offset: 1px; box-shadow: 0 0 18px 5px rgba(255,227,106,.9); z-index: 55 !important; }

/* lá gây ra yêu cầu phản ứng, hiện trong hộp hỏi */
.dlg-trigger { display: flex; gap: 14px; align-items: flex-start; margin: -4px 0 12px; padding: 10px; border-radius: 10px; background: rgba(255,227,106,.08); border: 1px solid rgba(255,227,106,.35); }
.dlg-trigger img { width: 120px; border-radius: 6px; box-shadow: 0 0 14px rgba(255,227,106,.6); flex: none; }
.dlg-trigger small { display: block; color: var(--gold); font-weight: 700; margin-bottom: 2px; }
.dlg-trigger b { display: block; font-size: 16px; color: #fff; }
.dlg-trigger span { display: block; color: var(--mut); font-size: 12px; margin: 2px 0 6px; }
.dlg-trigger p { margin: 0; font-size: 12px; line-height: 1.4; color: #ddd; max-height: 110px; overflow: auto; }

/* hộp chọn: nhóm bài mình / bài địch */
.pick-head { font: 800 12px/16px 'Segoe UI', sans-serif; letter-spacing: 1px; margin: 4px 0 6px; color: #6cff8a; }
.pick-head.opp { color: #ff6a6a; margin-top: 12px; }
.pick-grid.opp { border: 1px solid rgba(255,80,80,.45); border-radius: 10px; padding: 6px; background: rgba(120,0,0,.12); }
.pick.opp { border-color: rgba(255,90,90,.6); background: rgba(90,10,10,.35); }
.pick.opp b { color: #ffb3b3; }
.pick.opp.sel { border-color: #ff6a6a; background: rgba(140,20,20,.55); box-shadow: 0 0 10px rgba(255,80,80,.6); }

/* quái đã tấn công trong Battle Phase */
.du-card.done img { filter: brightness(.45) grayscale(.6); }
.du-card.done .st { opacity: .6; }
.du-card.done::after { content: '✓ đã đánh'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-12deg); font: 900 11px/14px 'Segoe UI', sans-serif; color: #ffe36a; background: rgba(0,0,0,.65); padding: 2px 6px; border-radius: 6px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.du-card.def.done::after { transform: translate(-50%,-50%) rotate(78deg); }