: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(300px, 1fr)); gap: 10px; padding: 14px; overflow: auto; } /* 300: đủ chỗ tên + 2 nút (đại ca 08/11/2026) */ .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; } /* thư viện: 3 trạng thái sở hữu (đại ca 13/11/2026) — own-own sáng + số; own-none chưa activate: xám mờ; own-expired từng có nhưng hết hạn: mờ nâu + nhãn đỏ */ .card-mini.own-none img { filter: grayscale(1) brightness(.55); } .card-mini.own-none { border-color: #333; } .card-mini.own-none:hover img { filter: grayscale(.6) brightness(.8); } .card-mini.own-expired img { filter: sepia(.7) brightness(.6) saturate(.6); } .card-mini.own-expired { border-color: #a33; } .card-mini.own-expired .badge { right: 0; left: 0; bottom: 0; text-align: center; border-radius: 0; background: rgba(160,20,20,.9); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .3px; padding: 2px 0; } .card-mini.own-expired:hover img { filter: sepia(.3) brightness(.85); } .card-mini.own-own { border-color: #6a5a1a; box-shadow: 0 0 0 1px rgba(255,211,106,.35); } /* giỏ hàng lá lẻ (đại ca 13/11/2026) */ .cart-btn { padding: 6px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(0,0,0,.35); color: #cfd8e3; font: 700 13px 'Segoe UI', sans-serif; cursor: pointer; margin-left: auto; } .cart-btn.has { border-color: var(--gold); color: #fff; background: rgba(255,211,106,.16); box-shadow: 0 0 10px rgba(255,211,106,.25); } .cart-btn b { color: var(--gold); } .adm-btns .cart-add { padding: 4px 9px; border-radius: 6px; border: 1px solid #7ad9ff; background: rgba(8,30,40,.9); color: #b3ecff; cursor: pointer; font-size: 15px; } .adm-btns .cart-add:hover { background: rgba(20,60,80,.95); } .cart-dlg { max-width: min(640px, 96vw); } .cart-title { color: var(--gold); margin: 0 0 8px; font-size: 17px; } .cart-list { max-height: 52vh; overflow: auto; display: grid; gap: 4px; margin-bottom: 8px; } .cart-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; } .cart-row img { width: 34px; height: 48px; border-radius: 3px; flex: none; } .cart-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cart-info b { font-size: 14px; } .cart-info small { color: #9ab; font-size: 12px; } .cart-usd { color: var(--gold); flex: none; } .cart-del { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #a33; background: rgba(120,20,20,.5); color: #fff; cursor: pointer; } .cart-del:hover { background: #c0392b; } .cart-sum { font-size: 14px; color: #ddd; margin: 4px 0 8px; } .cart-sum b { color: var(--gold); } .cart-miss { color: #ff8a8a; font-weight: 700; } .cart-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1200; background: rgba(10,14,20,.95); border: 1px solid var(--gold); color: #ffe9a8; padding: 10px 16px; border-radius: 10px; font: 600 14px 'Segoe UI', sans-serif; box-shadow: 0 6px 24px rgba(0,0,0,.5); max-width: 92vw; text-align: center; transition: opacity .35s; } .cart-toast.out { opacity: 0; } body.portrait .cart-btn { margin-left: 0; font-size: 14px; } .libmenu-img { float: left; width: 84px; margin: 0 10px 4px 0; border-radius: 4px; } /* ảnh lá trong menu chuột phải thư viện (đại ca 13/11/2026) */ .lib-own { display: inline-flex; gap: 4px; margin-left: 8px; flex-wrap: wrap; } .lib-ownbtn { padding: 3px 9px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.35); color: #bbb; font: 600 12px 'Segoe UI', sans-serif; cursor: pointer; } .lib-ownbtn small { opacity: .75; margin-left: 2px; } .lib-ownbtn.on { color: #fff; border-color: var(--gold); background: rgba(255,211,106,.15); } .lib-ownbtn.own.on { border-color: #ffd36a; } .lib-ownbtn.none.on { border-color: #888; } .lib-ownbtn.expired.on { border-color: #e55; background: rgba(200,40,40,.2); } body.portrait .lib-own { margin-left: 0; width: 100%; } body.portrait .lib-ownbtn { font-size: 13px; padding: 4px 10px; } .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 30px 6px 14px; border-radius: 20px; font-size: 13px; pointer-events: none; z-index: 5; } .prompt .prompt-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid #8a7a40; background: rgba(0,0,0,.6); color: #ffe6a8; font-size: 11px; line-height: 18px; cursor: pointer; pointer-events: auto; } .prompt .prompt-x:hover { background: #a33; color: #fff; } .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 ---------- */ /* hộp thoại: luôn cuộn được trong khung máy (điện thoại: màn thưởng từng không bấm được nút Đóng) */ .app-dialog { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 100; overflow: auto; padding: 8px; box-sizing: border-box; -webkit-overflow-scrolling: touch; } .dlg { background: var(--panel); border: 1px solid var(--gold); border-radius: 12px; padding: 18px 20px; min-width: min(320px, 94vw); max-width: 520px; max-height: 94vh; overflow: auto; box-sizing: border-box; box-shadow: 0 20px 60px rgba(0,0,0,.6); margin: auto; } .dlg.wide { max-width: 860px; width: 90vw; max-height: 94vh; display: flex; flex-direction: column; } @media (max-width: 700px), (max-height: 520px) { .app-dialog { align-items: flex-start; } .dlg { padding: 12px 12px; } .app-dialog .reward-row { gap: 10px; flex-wrap: wrap; } .app-dialog .reward-card, .app-dialog .reward-card img { width: min(150px, 28vw); } .app-dialog .reward-title { font-size: 20px; line-height: 24px; } } .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_bg2.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: 60px; width: 92px; height: 22px; } /* nút đỏ trong kabegami_l_e.png: y 60–81, x 10–100 / 112–215 */ .dc-import { left: 112px; top: 60px; width: 104px; height: 22px; } .dc-back { left: 20px; top: 556px; width: 178px; height: 36px; border-radius: 6px; } .dc-deckpick { position: absolute; left: 10px; top: 86px; 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: 35px; width: 400px; height: 340px; } /* 4 hàng × 72 + 3 khe 16 = 336, canh giữa khung DECK (y 22–384), không đè dòng trạng thái — đại ca 24/10/2026 */ .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; } /* hàng 55px khớp vạch kẻ kaban.png */ .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: 193px; top: 50px; width: 12px; height: 488px; cursor: pointer; } /* rãnh = vạch sọc vàng-đen trong right.png (x≈198, y 50→538) */ .dc-thumb { position: absolute; left: -4px; width: 20px; 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ả ---------- */ /* đầu rương bài làm lại (đại ca 21/10/2026): che tấm tôn ca-rô + nút đổi cỡ cũ của kaban.png bằng dải xanh đậm, bộ lọc nằm trong hộp tối riêng, không đè nền */ .dc-right::before { content: ''; position: absolute; left: 0; top: 0; width: 182px; height: 39px; background: linear-gradient(180deg, #243a63, #16233f); border-bottom: 2px solid #8e6f1f; box-sizing: border-box; z-index: 1; } .dc-fpanel { position: absolute; left: 5px; top: 2px; width: 172px; height: 24px; z-index: 2; background: rgba(0, 0, 0, .45); border: 1px solid #5a6f9c; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } .dc-f[data-f=all] { left: 9px; top: 1px; width: 21px; height: 21px; } .dc-f[data-f=nor] { left: 40px; top: 2px; } .dc-f[data-f=eff] { left: 66px; top: 2px; } .dc-f[data-f=fus] { left: 92px; top: 2px; } .dc-f[data-f=mag] { left: 40px; top: 13px; } .dc-f[data-f=tra] { left: 66px; top: 13px; } .dc-f[data-f=rit] { left: 92px; top: 13px; } /* checkbox "Hiện lá chưa activate" ngay dưới cụm lọc (đại ca 21/10/2026) */ .dc-showlock { position: absolute; left: 9px; top: 26px; z-index: 2; font: 700 10px/12px 'Segoe UI', sans-serif; color: #ffe36a; text-shadow: 1px 1px 0 #000; white-space: nowrap; cursor: pointer; user-select: none; } .dc-showlock input { vertical-align: -2px; margin: 0 3px 0 0; width: 11px; height: 11px; accent-color: #ffe36a; cursor: pointer; } .dc-rowitem.lock { opacity: .6; } .dc-rowitem.lock .nm { color: #d8d2c0; } .dc-rowitem .lk { position: absolute; right: 3px; top: 4px; font: 800 9px/12px 'Segoe UI', sans-serif; color: #ffe36a; background: rgba(0,0,0,.7); border: 1px solid #8e6f1f; border-radius: 3px; padding: 0 3px; z-index: 2; } .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: 126px; top: 2px; width: 38px; height: 20px; border-radius: 4px; font: 800 10px 'Segoe UI', sans-serif; color: #ffe36a; background: linear-gradient(180deg, #2a2a2a, #000); border: 1px solid #ffe36a; padding: 0; cursor: pointer; } .dc-fpanel .dc-sort:hover { background: #3a3a3a; } .dc-drop.over { outline: 3px dashed #ffe36a; outline-offset: -3px; background: rgba(255,230,106,.12); } .dc-rowitem.draggable, .dc-card.draggable { cursor: grab; touch-action: none; } .dc-stage, .dc-rowitem img.mini { touch-action: none; } /* sân deck: trình duyệt không nhận pan/zoom → không bắn pointercancel giữa lúc kéo lá (đại ca 07/11/2026) */ .dc-rowitem.dragging, .dc-card.dragging { opacity: .4; } .dc-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; transform-origin: center center; } .dc-ghost img { display: block; width: 50px; height: 72px; border-radius: 3px; box-shadow: 0 6px 16px rgba(0,0,0,.8); outline: 2px solid #ffe36a; } .dc-ghost span { position: absolute; right: -8px; top: -8px; min-width: 20px; height: 20px; border-radius: 10px; background: #e23; color: #fff; font: bold 12px/20px 'Segoe UI', sans-serif; text-align: center; padding: 0 4px; } body.dc-dragging, body.dc-dragging * { cursor: grabbing !important; } body.dc-dragging .dc-card:hover { transform: none; outline: none; } .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; } /* SHOP theo lá: khối từng bản (đại ca 15/11/2026) */ .sh-copies { display: flex; flex-direction: column; gap: 3px; min-width: 300px; } .sh-copy { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #cfd8e3; } .sh-copy .sh-ck { flex: none; width: 30px; font-weight: 800; color: #ffe36a; } .sh-copy .sh-cs { flex: none; width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sh-copy.active .sh-cs { color: #7dff9a; } .sh-copy.expired .sh-cs { color: #ff8a7a; font-weight: 700; } .sh-copy.none .sh-cs { color: #8a94a6; } .sh-copy.life .sh-cs { color: #ffd36a; } .sh-copy button { padding: 3px 8px; font-size: 11px; white-space: nowrap; } .sh-copy button:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.6); } /* lá 1 chưa activate → nút lá 2/3 khoá (đại ca 15/11/2026) */ .sh-copy .cart-add { padding: 2px 7px; border-radius: 6px; border: 1px solid #7ad9ff; background: rgba(8,30,40,.9); color: #b3ecff; cursor: pointer; font-size: 13px; } .lib-copies { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); } .lib-copies-h { font: 800 11px 'Segoe UI', sans-serif; color: #ffe36a; letter-spacing: 1px; margin-bottom: 4px; } .lib-copies .sh-copies { min-width: 0; } .lib-copies .sh-copy { flex-wrap: wrap; row-gap: 3px; } .lib-copies .sh-copy .sh-cs { width: auto; max-width: 100%; } /* khung chi tiết hẹp: xuống dòng */ body.portrait .sh-copies { min-width: 0; } body.portrait .sh-copy { flex-wrap: wrap; } body.portrait .sh-copy .sh-cs { width: auto; } .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: 95px; } .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: 14px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 10px/12px 'Segoe UI', sans-serif; color: #fff; text-shadow: 0 1px 2px #000; } /* tên sát trái ngay dưới trái tim, cắt … nếu dài để không đè tỷ số Ván (x 118) — đại ca 15/11/2026 */ .du-name.opp { top: 64px; } .du-name.mine { top: 584px; } /* nâng lên cho khỏi cụt đáy sân 600px (đại ca 10/11/2026) */ .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; } /* chat với đối thủ trong trận online (đại ca 13/11/2026): to = che chỗ xem lá (y 72–522); nhỏ = dải dưới mô tả lá (y 468–504), mô tả ngắn lại cho vừa */ .du-chat { position: absolute; left: 8px; top: 72px; width: 197px; height: 450px; z-index: 5; display: flex; flex-direction: column; border-radius: 6px; background: rgba(20,16,10,.93); border: 1px solid #a0321e; box-shadow: 0 3px 8px rgba(0,0,0,.5); font: 12px/1.35 'Segoe UI', sans-serif; color: #eee; overflow: hidden; } .du-chat.mini { top: 468px; height: 36px; } .du-left.chat-mini .du-desc { height: 98px; } .ch-head { display: flex; align-items: center; justify-content: space-between; padding: 3px 6px; background: rgba(160,50,30,.55); font-size: 11px; color: #ffe3c4; flex: none; } .ch-head b { color: #fff; } .ch-tgl { width: 20px; height: 18px; padding: 0; border-radius: 4px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.35); color: #fff; font-size: 11px; line-height: 16px; cursor: pointer; } .ch-list { flex: 1; overflow: auto; padding: 4px 6px; display: flex; flex-direction: column; gap: 3px; } .ch-list::-webkit-scrollbar { width: 5px; } .ch-list::-webkit-scrollbar-thumb { background: #a0321e; } .ch-msg { word-break: break-word; } .ch-t { color: #8a8a8a; font-size: 10px; } .ch-who { font-weight: 700; } .ch-msg.me .ch-who, .ch-who.me { color: #7ad9ff; } .ch-msg.opp .ch-who, .ch-who.opp { color: #ffb347; } .ch-msg.sys { color: #ff9b8a; font-style: italic; } .ch-empty { color: #9a9a9a; font-style: italic; font-size: 11px; } .ch-form { display: flex; gap: 3px; padding: 4px; border-top: 1px solid rgba(255,255,255,.15); flex: none; } .ch-in { flex: 1; min-width: 0; height: 24px; padding: 0 6px; border-radius: 4px; border: 1px solid #666; background: #111; color: #fff; font: 12px 'Segoe UI', sans-serif; } .ch-in:focus { outline: none; border-color: #ffb347; } .ch-send { width: 28px; height: 24px; padding: 0; border-radius: 4px; border: 1px solid #a0321e; background: #5a1c10; color: #fff; cursor: pointer; } .ch-last { flex: 1; padding: 0 6px; line-height: 17px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: #ddd; } .ch-last:hover { background: rgba(255,255,255,.06); } .ch-last i { color: #9a9a9a; } .ch-unread { display: inline-block; min-width: 14px; padding: 0 4px; border-radius: 8px; background: #c0392b; color: #fff; font-size: 10px; line-height: 14px; text-align: center; } .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: 200px; } #p0-mz { top: 320px; } #p0-sz { top: 420px; } /* hàng ô đo từ vạch ngang y=90/190/290 | 310/410/510 */ .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: 507px; top: 512px; /* nằm trong #du-field (lệch trái 230) → 507 = 737 trên sân */ width: 60px; display: flex; flex-direction: column; gap: 2px; z-index: 31; } /* cụm nút ngay dưới deck của mình, trên ĐẦU HÀNG và LOG (đại ca 23/10/2026) */ .du-btns button { padding: 1px 2px; font-size: 10px; line-height: 13px; height: 15px; width: 60px; white-space: nowrap; border-radius: 4px; } .du-btns button.end { background: linear-gradient(#e86a5a, #a02a1a); color: #fff; border-color: #5a1a10; } .snd-log { position: absolute; left: 236px; top: 4px; z-index: 40; background: rgba(0,0,0,.72); color: #cfe; font: 600 10px/13px Consolas, monospace; padding: 3px 6px; border-radius: 4px; pointer-events: none; max-width: 330px; } .snd-log div:last-child { color: #ffe36a; } .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: 740px; top: 564px; width: 56px; } /* ngay trên LOG, dưới cụm nút phase */ .du-logbtn.opts { left: 740px; top: 6px; width: 26px; height: 20px; font-size: 14px; line-height: 18px; padding: 0; border-radius: 10px; opacity: .8; } /* nút ⚙ góc trên PHẢI (đại ca 13/11/2026, trước ở trái cạnh LP), trên bộ bài đối thủ */ .du-logbtn.opts:hover { opacity: 1; } .du-log { position: absolute; left: 240px; top: 60px; width: 330px; height: 400px; z-index: 40; background: rgba(10,12,16,.92); } .du-logbtn { z-index: 60; } /* nổi trên tay bài (tay nhiều lá từng che nút LOG) */ .du-log .log-close { position: sticky; top: 0; float: right; width: 22px; height: 22px; margin: -2px -4px 0 6px; padding: 0; border: 1px solid #8e6f1f; border-radius: 4px; background: #2a1d06; color: #ffe36a; font: 700 13px/20px sans-serif; cursor: pointer; z-index: 1; } .du-log .log-close:hover { background: #5a4210; } .du-stage .prompt { top: 290px; } .du-stage .banner { top: 220px; } /* ---------- shop ---------- */ /* ---- đăng nhập ---- */ .login-box { position: relative; z-index: 1; 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; } /* nút toàn màn hình nổi (điện thoại / máy tính bảng): cố định góc trên phải, không theo sân khấu nên không bị thu nhỏ */ /* cảm ứng: không callout/chọn chữ/kéo ảnh của trình duyệt khi đè giữ lá bài (iPad) */ body, .screen, .du-stage, .title-stage, .dc-stage { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } img { -webkit-touch-callout: none; -webkit-user-drag: none; } input, textarea { -webkit-user-select: text; user-select: text; } .fs-btn { position: fixed; right: 10px; top: 10px; z-index: 95; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #ffd36a; background: rgba(0,0,0,.65); color: #ffe6a8; font-size: 24px; line-height: 42px; text-align: center; padding: 0; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.6); } .fs-btn:active { background: #a8821f; color: #1a1408; } .title-fs { background: rgba(0,0,0,.55); color: #fff; border: 1px solid #667; border-radius: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer; } .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; } .dc-rowitem .lk.life { color: #ffd36a; } .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-actmenu { position: absolute; width: 296px; z-index: 60; background: rgba(10,14,22,.97); border: 1px solid #ffd36a; border-radius: 8px; padding: 6px; color: #eee; font: 12px/15px 'Segoe UI', sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.6); } .dc-actmenu .hd { color: #ffd36a; font-weight: 700; margin: 2px 4px 6px; } .dc-actmenu button { display: block; width: 100%; text-align: left; margin: 3px 0; padding: 5px 8px; background: #222838; color: #eee; border: 1px solid #3a4258; border-radius: 6px; cursor: pointer; font: inherit; } .dc-actmenu button:hover { background: #34405c; border-color: #ffd36a; } .dc-actmenu button b { display: block; } .dc-actmenu button small { color: #9ab; } .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-rowitem.locked { filter: grayscale(1) brightness(.6); } /* bản chưa activate trong deck: xám nhẹ + viền sáng xám quanh lá (đại ca 08/11/2026) */ .dc-card.locked { filter: grayscale(.85) brightness(.75); outline: 3px solid rgba(215,215,215,.9); outline-offset: -1px; box-shadow: 0 0 0 5px rgba(120,120,120,.45), 0 0 14px rgba(255,255,255,.45); } .dc-card.locked:hover { filter: grayscale(.4) brightness(.95); outline-color: #ffe36a; } .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: 30px; width: 164px; box-sizing: border-box; padding: 8px 6px; text-align: center; white-space: nowrap; font: 800 15px/19px 'Segoe UI', sans-serif; /* 4 nút trái cùng cỡ, đáy mỗi nút ngang đáy thanh menu tương ứng: menu 5 thanh × 50px từ y 320 → đáy 420/470/520/570 (đại ca 10/11/2026) */ 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: 584px; } .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; } /* đồng hồ suy nghĩ mỗi lượt (đại ca 12/11/2026): cạnh phải LP; chạy = sáng vàng, dừng vì hoạt ảnh = mờ, < 20 s = đỏ nhấp nháy, hết = ĐỎ */ /* đồng hồ suy nghĩ (đại ca 13/11/2026): 1 hàng ngang 'giờ lượt | timebank cả trận', nằm ở khe giữa số LP và thanh LP, cả 2 bên giống nhau */ .du-clock { position: absolute; left: 116px; width: 72px; display: flex; flex-direction: row; justify-content: center; gap: 3px; text-align: center; font: 700 10px/12px 'Consolas', 'Segoe UI', monospace; color: #c8d0e0; text-shadow: 0 1px 2px #000; border-radius: 4px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18); pointer-events: auto; } .du-clock .c-turn { display: block; } .du-clock .c-bank { display: block; font-size: 9px; line-height: 12px; color: #ffb347; opacity: .9; border-left: 1px solid rgba(255,255,255,.2); padding-left: 3px; } /* timebank cả trận (5 ph) luôn hiện cạnh giờ lượt */ .du-clock.bank .c-turn { color: #777; text-decoration: line-through; } .du-clock.bank .c-bank { color: #ffc46b; font-size: 10px; } /* hết giờ lượt → timebank đang chạy nổi lên */ .du-clock.opp { top: 29px; } .du-clock.mine { top: 556px; } /* khe giữa số LP (y 1–35 / 528–562) và thanh LP (y 43 / 571) */ .du-clock.run { color: #ffe36a; border-color: #ffe36a; box-shadow: 0 0 6px rgba(255,227,106,.5); } .du-clock.fx { color: #9aa6c0; border-color: rgba(255,255,255,.3); } .du-clock.bank { color: #ffb347; border-color: #ff9f1a; background: rgba(90,45,0,.6); } /* hết giờ lượt → hiện timebank cả trận còn lại (đại ca 13/11/2026) */ .du-clock.bank.run { color: #ffc46b; box-shadow: 0 0 6px rgba(255,159,26,.6); } .du-clock.react { border-style: dashed; border-color: #8fb3ff; } /* câu phản ứng trong lượt đối thủ: 15 s + timebank ≤ 15 s */ /* bảng "đang chờ đối thủ" (đại ca 13/11/2026): online, lúc đồng hồ đối thủ chạy — để người chơi biết game không treo */ .du-wait { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 54; padding: 5px 14px; border-radius: 10px; background: rgba(0,0,0,.74); border: 1px solid #8fb3ff; color: #cfe0ff; font: bold 13px 'Segoe UI', Arial, sans-serif; white-space: nowrap; pointer-events: none; display: flex; align-items: center; gap: 8px; } .du-wait b { color: #fff; } .du-wait .w-t { font-family: Consolas, monospace; color: #ffe36a; min-width: 36px; text-align: right; } .du-wait.bank .w-t { color: #ffb347; } .du-wait .w-dot { width: 8px; height: 8px; border-radius: 50%; background: #8fb3ff; animation: waitPulse 1s ease-in-out infinite; } @keyframes waitPulse { 50% { opacity: .25; transform: scale(.7); } } .du-wait.mine { border-color: #ffe36a; color: #ffe36a; font-size: 16px; padding: 6px 18px; background: rgba(20,14,0,.82); box-shadow: 0 0 10px rgba(255,227,106,.35); } /* tới lượt mình: to, vàng, ngay giữa cho dễ nhìn */ .du-wait.mine .w-t { color: #fff; font-size: 22px; min-width: 60px; } .du-wait.mine.bank .w-t { color: #ffb347; } .du-wait.mine.fx { opacity: .6; } .du-wait.warn .w-t { color: #ff8a7a; } .du-wait.mine.warn { border-color: #ff6a6a; animation: clockBlink .8s steps(2, start) infinite; } .du-wait.out { background: #b4231a; border-color: #ff6a6a; color: #fff; } .du-wait small { font-weight: 400; color: #ccc; } body.portrait .du-wait { top: 10px; font-size: 24px; padding: 8px 20px; gap: 12px; } body.portrait .du-wait .w-t { min-width: 64px; } body.portrait .du-wait .w-dot { width: 14px; height: 14px; } body.portrait .du-wait.mine { font-size: 30px; padding: 10px 28px; } body.portrait .du-wait.mine .w-t { font-size: 40px; min-width: 110px; } .du-clock.warn { color: #ff8a7a; border-color: #ff6a6a; } .du-clock.warn.run { animation: clockBlink .8s steps(2, start) infinite; } .du-clock.out { color: #fff; background: #b4231a; border-color: #ff6a6a; } @keyframes clockBlink { 50% { opacity: .35; } } /* 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; flex-wrap: wrap; } .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; } .dlg-trigger.small { padding: 6px; margin-bottom: 8px; } .dlg-trigger.small img { width: 74px; } .dlg-trigger.small p { max-height: 64px; } /* 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); } /* phòng thi đấu trực tuyến */ .opp-card.online-p { flex-wrap: wrap; } .opp-card.online-p .online-btns { display: flex; gap: 6px; width: 100%; margin-top: 4px; } .opp-card.online-p .online-btns button { flex: 1; padding: 6px 8px; font-size: 13px; } #online-status.neg { color: #e57368; } /* ---------- PHÒNG THI ĐẤU TRỰC TUYẾN (tràn màn hình; desktop 2 cột, màn dọc 9:16 xếp dọc) ---------- */ #screen-online { background: #000; } .online-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0b0e14 url('/img/ui/title_bg2.jpg') center / cover no-repeat; font-family: 'Segoe UI', sans-serif; } .online-wrap::before { content: ''; position: absolute; inset: 0; background: rgba(5, 8, 14, .45); pointer-events: none; } .ol-head, .ol-body, .ol-foot { position: relative; z-index: 1; } .ol-head { display: flex; align-items: center; gap: 18px; padding: 14px 22px 8px; } .ol-head > div { flex: 1; text-align: center; padding-right: 110px; } .ol-back { position: static; } .ol-title { color: #ffd978; font: 800 clamp(24px, 4vw, 40px)/1 'Segoe UI', sans-serif; letter-spacing: 3px; text-shadow: 0 2px 0 #5a3d0a, 0 4px 10px #000, 0 0 18px rgba(255,200,80,.35); } .ol-sub { margin-top: 6px; color: #fff; font: 600 13px 'Segoe UI', sans-serif; text-shadow: 0 1px 3px #000; opacity: .9; } .ol-sub.neg { color: #ff9b8a; } .ol-body { flex: 1; min-height: 0; display: flex; gap: 16px; padding: 6px 22px 10px; } .ol-panel { min-height: 0; background: rgba(12, 14, 20, .82); border: 2px solid #8e6f1f; box-shadow: 0 0 0 1px #3a2a0a inset, 0 10px 30px rgba(0,0,0,.6); border-radius: 8px; display: flex; flex-direction: column; } .ol-players { flex: 3; } .ol-tables { flex: 2; } .ol-h { padding: 10px 14px; background: linear-gradient(#5d4514, #3b2a0b); color: #ffe6a8; font: 800 15px/1 'Segoe UI', sans-serif; letter-spacing: 2px; text-shadow: 0 1px 2px #000; border-bottom: 1px solid #8e6f1f; border-radius: 6px 6px 0 0; } .ol-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .ol-list .muted { color: #c9c3b2; font-size: 14px; padding: 8px 6px; } .ol-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: rgba(40, 32, 18, .85); border: 1px solid #6f5520; border-radius: 8px; color: #fff; } .ol-row.dim { opacity: .55; } .ol-row img { width: 40px; height: 56px; border-radius: 4px; border: 1px solid #8e6f1f; background: #000; flex: none; } .ol-row > div { min-width: 0; } .ol-row .ol-name { font-weight: 700; font-size: 17px; color: #ffe6a8; text-shadow: 0 1px 2px #000; } .ol-row .ol-meta { font-size: 13px; color: #d6cdb4; } /* nút đấu máy trong phòng online (đại ca 13/11/2026) */ .ol-h-flex { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ol-cpu { display: flex; align-items: center; gap: 5px; font: 700 12px 'Segoe UI', sans-serif; letter-spacing: 0; color: #e8d5a3; } .ol-cpu button { padding: 4px 10px; border-radius: 6px; border: 1px solid #6b4e12; background: linear-gradient(#e2b857, #a97d1f); color: #2a1d06; font: 800 11px 'Segoe UI', sans-serif; cursor: pointer; } .ol-cpu button:hover { filter: brightness(1.1); } .ol-row .ol-btns { margin-left: auto; display: flex; gap: 8px; flex: none; } .ol-row button, .ol-row .ol-tag { background: linear-gradient(#e2b857, #a97d1f); color: #2a1d06; border: 1px solid #6b4e12; border-radius: 6px; padding: 8px 14px; font: 800 13px 'Segoe UI', sans-serif; letter-spacing: .5px; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset; } .ol-row button:hover { filter: brightness(1.12); } .ol-row .ol-tag { cursor: default; background: linear-gradient(#777, #444); color: #eee; border-color: #333; } .ol-row.me { border-color: #d9b24c; background: rgba(70, 55, 20, .85); } .ol-body2 { flex: 0 0 auto; max-height: 42vh; } .ol-tour { flex: 1; } .tour-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; } .tour-top .muted { font-size: 12px; color: #c9c3b2; } .tour-card { background: rgba(40, 32, 18, .85); border: 1px solid #8e6f1f; border-radius: 8px; padding: 8px 10px; color: #eee; font-size: 13px; } .tour-card.running { border-color: #d9b24c; } .tour-card.done { opacity: .75; } .tour-h b { color: #ffe6a8; font-size: 15px; } .tour-st { font-weight: 800; margin-left: 6px; } .tour-st.open { color: #7dff9a; } .tour-st.running { color: #ffd978; } .tour-st.done { color: #c9c3b2; } .tour-me { color: #8fe0ff; font-weight: 700; margin-left: 6px; } .tour-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .tour-btns button, .tour-m button.small { background: linear-gradient(#e2b857, #a97d1f); color: #2a1d06; border: 1px solid #5a4210; border-radius: 6px; padding: 4px 10px; font: 700 12px 'Segoe UI', sans-serif; cursor: pointer; } .tour-btns button:disabled { opacity: .5; cursor: default; } .tour-m button.small { padding: 1px 6px; font-size: 11px; margin-left: 4px; } .tour-pools { margin-top: 8px; display: grid; gap: 3px; } .tour-pl { display: inline-block; min-width: 86px; padding: 1px 6px; border-radius: 4px; font: 800 11px/16px 'Segoe UI', sans-serif; text-align: center; margin-right: 6px; } .tour-pl.w { background: #1f6a3a; color: #dfffe8; } .tour-pl.l { background: #7a2a1f; color: #ffe1dc; } .tour-pl.o { background: #333; color: #bbb; } .tour-pl.f { background: #a8821f; color: #1a1408; } .tour-ms { margin-top: 8px; display: grid; gap: 3px; } .tour-m i { color: #ff9b8a; font-style: normal; } .tour-m .live { color: #7dff9a; font-weight: 800; } .tour-m .wait { color: #c9c3b2; } .tour-log { margin-top: 8px; font-size: 11px; color: #c9c3b2; border-top: 1px solid #5a4210; padding-top: 4px; } .ol-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 22px 12px; } .ol-hint { color: #fff; font: 600 13px 'Segoe UI', sans-serif; text-shadow: 0 1px 3px #000; opacity: .85; } .ol-hint b { color: #ffd978; } .ol-copy { position: static; } /* màn dọc / hẹp (điện thoại 9:16): xếp dọc, bàn đấu thấp hơn, nút rủ xuống dòng riêng */ @media (max-width: 760px), (max-aspect-ratio: 1/1) { .ol-head { padding: 10px 12px 6px; gap: 10px; } .ol-head > div { padding-right: 0; } .ol-body { flex-direction: column; padding: 4px 12px 8px; gap: 10px; } .ol-players { flex: 3; } .ol-tables { flex: 2; } .ol-row { flex-wrap: wrap; } .ol-row .ol-btns { margin-left: 0; width: 100%; } .ol-row .ol-btns button { flex: 1; } .ol-foot { flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 12px 10px; } .ol-copy { display: none; } } /* phòng online: danh sách dài quá khung thì có thanh cuộn (màu vàng hợp khung) */ .ol-list { min-height: 0; scrollbar-width: thin; scrollbar-color: #c9a040 #241b0a; } .ol-list::-webkit-scrollbar { width: 10px; } .ol-list::-webkit-scrollbar-track { background: #241b0a; border-left: 1px solid #8e6f1f; } .ol-list::-webkit-scrollbar-thumb { background: linear-gradient(#e2b857, #a97d1f); border: 1px solid #5a4210; border-radius: 5px; } .ol-list::-webkit-scrollbar-thumb:hover { background: linear-gradient(#f0c966, #c08f26); } /* SHOP: cột nút bên phải mỗi lá — rộng, chữ một dòng (đại ca 21/10/2026) */ .adm-row .adm-btns { display: flex; flex-direction: column; gap: 6px; min-width: 190px; } .adm-row .adm-btns button { white-space: nowrap; width: 100%; padding: 9px 14px; font-size: 13px; font-weight: 700; } /* DECK CONSTRUCTION: mũi tên cuộn (đúng chỗ 2 mũi tên đỏ trong right.png) + kéo thanh cuộn */ .dc-arrow { position: absolute; left: 185px; width: 28px; height: 30px; cursor: pointer; z-index: 6; } .dc-arrow:hover { background: rgba(255,230,120,.25); border-radius: 4px; } .dc-arrow.up { top: 18px; } .dc-arrow.down { top: 540px; } .dc-thumb { cursor: grab; } .dc-thumb.drag { cursor: grabbing; background: rgba(255,230,120,.85); } .dc-stage.compact .dc-arrow { left: 87px; } /* ============================================================================ RESPONSIVE (đại ca 21/10/2026): nền màn hình phủ ảnh (hết viền đen); màn DỌC (body.portrait) → sân khấu logic 800x1422 ============================================================================ */ .title-screen { background: #0b0e14 url('/img/ui/title_bg2.jpg') center / cover no-repeat; } .title-screen::before { content: ''; position: absolute; inset: 0; background: rgba(5, 8, 14, .55); pointer-events: none; } #screen-duel.title-screen { background-image: url('/img/ui/duel/field_fie_normal.png'); } #screen-duel.title-screen::before { background: rgba(5, 8, 14, .7); } #screen-deck.title-screen { background-image: url('/img/ui/deck/kabegami_c.png'); } .title-stage, .du-stage, .dc-stage { position: relative; z-index: 1; } /* ---------- TITLE dọc ---------- */ body.portrait .title-stage { height: 1422px; background-size: cover; background-position: center; } body.portrait .title-logo { left: 120px; top: 230px; } body.portrait .title-menu { top: 640px; } body.portrait .title-stats { top: 12px; left: 14px; right: 14px; width: auto; white-space: normal; line-height: 1.4; font-size: 15px; } body.portrait .title-user { top: 92px; right: 14px; font-size: 15px; } body.portrait .title-shop { left: 20px; top: auto; bottom: 150px; } body.portrait .title-back { left: auto; right: 20px; top: auto; bottom: 150px; } body.portrait .title-copy { bottom: 20px; } /* ---------- BÀN ĐẤU dọc: sân (570x600) phóng 800/570, đè lên trên; thanh LP đối thủ trên cùng; dải dưới: LP mình, lá đang xem, phase, nút ---------- */ body.portrait .du-stage { height: 1422px; background: #0d1016 url('/img/ui/duel/field_fie_normal.png') center / cover; } body.portrait .du-field { left: 0; top: 278px; transform: scale(1.4035); transform-origin: 0 0; } body.portrait .du-left { background: none; width: 800px; height: 1422px; pointer-events: none; } body.portrait .du-left > * { pointer-events: auto; } body.portrait .du-lp { left: 10px; top: 14px; } body.portrait .du-meter.opp { left: 10px; top: 54px; } body.portrait .du-name.opp { left: 14px; top: 80px; font-size: 14px; line-height: 16px; } body.portrait .du-score.opp { left: 210px; top: 20px; } body.portrait .du-lp.bottom { left: 10px; top: 1236px; } body.portrait .du-meter.mine { left: 10px; top: 1276px; } body.portrait .du-name.mine { left: 14px; top: 1302px; font-size: 14px; line-height: 16px; } body.portrait .du-score.mine { left: 10px; top: 1322px; } body.portrait .du-clock { left: 120px; width: 104px; font-size: 14px; line-height: 20px; } body.portrait .du-clock .c-bank { font-size: 12px; line-height: 20px; } body.portrait .du-clock.bank .c-bank { font-size: 14px; } /* màn dọc: cạnh phải tên (y 80 / 1302), không đè ảnh lá (x 210) hay tỷ số match */ body.portrait .du-clock.opp { top: 66px; } body.portrait .du-clock.mine { top: 1286px; } body.portrait .du-stat { left: 310px; top: 1392px; width: 250px; font-size: 11px; line-height: 14px; } body.portrait .du-preview { left: 210px; top: 1240px; width: 90px; height: 132px; } body.portrait .du-chat { font-size: 13px; } body.portrait .du-chat.full { left: 210px; top: 1236px; width: 350px; height: 150px; } body.portrait .du-chat.mini { left: 10px; top: 1326px; width: 190px; height: 36px; } body.portrait .du-left.chat-mini .du-desc { height: 150px; } /* màn dọc: to = đè đúng chỗ ảnh + mô tả lá (x 210–560, y 1236–1386); nhỏ = dải dưới tên mình (y 1302), trái nút ĐẦU HÀNG (x 580) */ body.portrait .du-desc { left: 310px; top: 1236px; width: 250px; height: 150px; font-size: 11px; line-height: 1.35; color: #eee; background: rgba(0,0,0,.45); border-radius: 6px; padding: 4px 6px; } body.portrait .du-desc b { color: #ffe36a; } body.portrait .du-desc i { color: #ff9b8a; } body.portrait .du-phases { left: 572px; top: 1236px; width: 228px; display: flex; flex-wrap: wrap; gap: 0 2px; transform: scale(.9); transform-origin: 0 0; } body.portrait .du-phases span { width: 40px; height: 75px; } body.portrait .du-btns { left: 572px; top: 1312px; width: 220px; flex-direction: row; flex-wrap: wrap; gap: 6px; } body.portrait .du-btns button { font-size: 14px; padding: 6px 10px; width: auto; } body.portrait .du-logbtn { left: 720px; top: 1396px; width: 70px; height: 22px; font-size: 12px; line-height: 20px; } body.portrait .du-logbtn.surrender { left: 10px; top: 1396px; width: 110px; } body.portrait .du-log { left: 20px; top: 300px; width: 760px; height: 800px; } body.portrait .snd-log { left: 10px; bottom: auto; top: 110px; } body.portrait .du-hand.mine .du-card:hover, body.portrait .du-hand.mine .du-card.can:hover { transform: translateY(-40px); } /* ---------- DECK CONSTRUCTION dọc: thanh trên (deck, export/import/back) · vùng deck phóng 1.2 ở giữa · lá đang xem bên phải · rương bài rộng hết cỡ ở dưới ---------- */ body.portrait .dc-stage { height: 1422px; background: radial-gradient(ellipse at 50% 30%, #4a3326 0%, #2a1d17 55%, #160f0b 100%); } /* nền gạch; khung/viền deck vẽ trên chính .dc-center cho khớp hàng bài (đại ca 23/10/2026) */ body.portrait .dc-center { width: 466px; height: 600px; background: url('/img/ui/deck/kabegami_c.png') 0 0 no-repeat; } body.portrait .dc-left { background: none; width: 800px; height: 1422px; pointer-events: none; } body.portrait .dc-left > * { pointer-events: auto; } body.portrait .dc-deckpick { left: 10px; top: 8px; width: 440px; } body.portrait .dc-hit { background: linear-gradient(#e2b857, #a97d1f); border: 1px solid #5a4210; border-radius: 6px; color: #2a1d06; font: 800 13px/26px 'Segoe UI', sans-serif; text-align: center; } body.portrait .dc-hit:hover { filter: brightness(1.1); background: linear-gradient(#f0c966, #c08f26); } body.portrait .dc-export { left: 460px; top: 8px; width: 100px; height: 28px; } body.portrait .dc-export::after { content: 'EXPORT'; } body.portrait .dc-import { left: 568px; top: 8px; width: 100px; height: 28px; } body.portrait .dc-import::after { content: 'IMPORT'; } body.portrait .dc-back { left: 676px; top: 8px; width: 114px; height: 28px; background: linear-gradient(#e86a5a, #a02a1a); color: #fff; } body.portrait .dc-back::after { content: '← BACK'; } body.portrait .dc-center { left: 0; top: 46px; transform: none; } /* dọc (đại ca 23/10/2026): deck sát trái, cỡ gốc 466×600 */ body.portrait .dc-preview { left: 20px; top: 690px; width: 270px; height: 392px; } /* chi tiết lá xuống dưới, to dễ đọc */ body.portrait .dc-desc { left: 310px; top: 690px; width: 470px; height: 700px; font-size: 17px; line-height: 1.45; color: #f3e9d2; background: rgba(0,0,0,.5); border-radius: 8px; padding: 8px 10px; } body.portrait .dc-desc b { color: #ffe36a; } body.portrait .dc-right { left: 470px; top: 46px; width: 330px; height: 626px; background: rgba(12, 14, 20, .78); border-left: 2px solid #8e6f1f; border-bottom: 2px solid #8e6f1f; border-radius: 0 0 0 8px; } /* danh sách bên phải deck, rộng 330 */ body.portrait .dc-stage.compact .dc-right { left: 470px; width: 330px; background: rgba(12, 14, 20, .78); } body.portrait .dc-stage.compact .dc-right::before { display: none; } body.portrait .dc-list, body.portrait .dc-stage.compact .dc-list { left: 6px; top: 56px; width: 282px; height: 564px; } body.portrait .dc-right::before { display: none; } /* dọc: rương đã là nền tối toàn khổ, không cần dải che */ body.portrait .dc-fpanel { left: 10px; top: 3px; } body.portrait .dc-showlock { left: 14px; top: 36px; font-size: 13px; } body.portrait .dc-rowitem, body.portrait .dc-stage.compact .dc-rowitem { width: 282px; height: 54px; } body.portrait .dc-rowitem .nm { width: 232px; font-size: 14px; } body.portrait .dc-rowitem .st { font-size: 13px; } body.portrait .dc-rowitem .lv { right: 6px; } body.portrait .dc-scroll, body.portrait .dc-stage.compact .dc-scroll { left: 300px; top: 80px; height: 500px; width: 14px; background: rgba(255,255,255,.08); border-radius: 7px; } body.portrait .dc-thumb { left: -3px; width: 20px; background: linear-gradient(#e2b857, #a97d1f); border-color: #5a4210; } body.portrait .dc-arrow, body.portrait .dc-stage.compact .dc-arrow { left: 290px; width: 34px; height: 30px; background: linear-gradient(#e2b857, #a97d1f); border: 1px solid #5a4210; border-radius: 6px; } body.portrait .dc-arrow::after { content: ''; position: absolute; left: 11px; top: 9px; border: 8px solid transparent; } body.portrait .dc-arrow.up { top: 44px; } body.portrait .dc-arrow.up::after { border-bottom-color: #2a1d06; border-top: 0; top: 9px; } body.portrait .dc-arrow.down { top: 580px; } body.portrait .dc-arrow.down::after { border-top-color: #2a1d06; border-bottom: 0; top: 11px; } /* nền ngoài sân khấu: mờ + tối để không "hai logo" ở màn dọc */ .title-screen::before { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(5, 8, 14, .5); } body.portrait .title-stage { background: transparent; } body.portrait .title-logo { filter: drop-shadow(0 6px 14px rgba(0,0,0,.8)); } /* màn dọc: cột phase dựng đứng ở mép trái sân (dải xích), 6 ô 32×60 */ body.portrait .du-phases { left: 0; top: 407px; width: 40px; display: block; transform: scale(.85); transform-origin: 0 0; flex-wrap: nowrap; gap: 0; } /* DP ngang mép trên deck đối thủ (y 407), EP ngang mép dưới deck mình (y 980) */ body.portrait .du-phases span { width: 40px; height: 75px; margin: 0 0 45px; } body.portrait .du-phases span:last-child { margin-bottom: 0; } body.portrait .du-btns { top: 1318px; left: 548px; width: 250px; } body.portrait .du-btns button { width: auto; } /* hộp thoại điểm/level */ .rt-dlg { min-width: min(380px, 94vw); max-width: 560px; } .rt-line { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 6px; color: #ffe6a8; } .rt-line .rt-lv { font-size: 18px; } .rt-num { font: 700 15px Consolas, monospace; color: #fff; } .rt-cur { color: #ffd978; font-size: 20px; } .rt-bar { position: relative; height: 18px; background: #1a1508; border: 1px solid #8e6f1f; border-radius: 9px; overflow: hidden; } .rt-fill { height: 100%; background: linear-gradient(90deg, #a97d1f, #ffd978); box-shadow: 0 0 12px rgba(255,217,120,.7); transition: none; } .rt-bar i { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,.55); } .rt-note { margin-top: 8px; color: #c9c3b2; font-size: 13px; } .rt-lvup { margin-top: 10px; font: 800 20px 'Segoe UI', sans-serif; text-align: center; animation: pop .35s ease-out; } .rt-lvup.up { color: #7dff9a; } .rt-lvup.down { color: #ff7a7a; } /* DECK CONSTRUCTION ngang kéo rộng kín màn: --dcw = bề rộng sân (800..1600), vùng giữa co giãn, rương bài dính mép phải */ body:not(.portrait) .dc-stage { width: var(--dcw, 800px); background-size: calc(var(--dcw, 800px) - 217px) 600px; } body:not(.portrait) .dc-center { width: calc(var(--dcw, 800px) - 432px); } body:not(.portrait) .dc-right { left: calc(var(--dcw, 800px) - 215px); } body:not(.portrait) .dc-stage.compact .dc-right { left: calc(var(--dcw, 800px) - 117px); } body:not(.portrait) .dc-rows, body:not(.portrait) .dc-rows .dc-row, body:not(.portrait) .dc-side, body:not(.portrait) .dc-fusion { width: calc(var(--dcw, 800px) - 528px); } body:not(.portrait) .dc-stage.compact .dc-rows, body:not(.portrait) .dc-stage.compact .dc-side, body:not(.portrait) .dc-stage.compact .dc-fusion, body:not(.portrait) .dc-stage.compact .dc-rows .dc-row { width: calc(var(--dcw, 800px) - 430px); } body:not(.portrait) .dc-status { width: calc(var(--dcw, 800px) - 520px); } .rt-dlg.wide { max-width: 680px; width: min(680px, 94vw); } .rt-reason { text-align: center; color: #c9c3b2; margin: -4px 0 8px; font-size: 13px; } .rt-sec { border-top: 1px solid #3a2f14; padding: 10px 0 6px; } .rt-sec-h { font: 800 13px 'Segoe UI', sans-serif; letter-spacing: 1.5px; color: #ffe6a8; margin-bottom: 4px; } .rt-sec-h .pos { color: #7dff9a; } .rt-sec-h .neg { color: #ff7a7a; } .rt-sec-h .mut { color: #8c9b94; } .rt-sec-h small { font-weight: 400; letter-spacing: 0; color: #c9c3b2; } .rt-ticks { position: relative; height: 22px; margin: 2px 0 0; } .rt-ticks i { position: absolute; top: -18px; width: 2px; height: 14px; background: rgba(255,255,255,.35); transform: translateX(-1px); } .rt-ticks i.done { background: #5a4210; } .rt-ticks b { position: absolute; top: 2px; transform: translateX(-50%); font: 700 11px Consolas, monospace; color: #8c9b94; } .rt-ticks b:first-of-type { transform: none; } .rt-ticks b:last-of-type { transform: translateX(-100%); } .rt-ticks b.done { color: #c9a040; } .rt-ticks b.cur { color: #ffd978; font-size: 13px; text-shadow: 0 0 6px rgba(255,217,120,.8); } .rt-dlg .reward-row { margin: 6px 0 2px; } /* deck: nền thảm giữ nguyên kích thước gốc, neo sát trái cạnh khu vực để bài (không kéo giãn); bỏ nút thu gọn */ body:not(.portrait) .dc-stage { background-size: auto; background-position: 217px 0; } .dc-swap { display: none; } /* deck ngang: thảm giữa KÉO GIÃN theo bề rộng (như mockup đại ca 21/10/2026), vùng lá/số đếm giãn cùng hệ số --dck */ /* thảm giữa rộng 466·dck = kết thúc đúng mép rương bài (--dcw − 215) để nhãn DECK / SIDE DECK / FUSION DECK không bị rương đè (đại ca 21/10/2026) */ body:not(.portrait) .dc-stage { background-size: calc(466px * var(--dck, 1)) 600px; background-position: 217px 0; } /* ô số đếm (cửa sổ đen trên thảm, gốc x 8..27 → tâm 18) trượt/giãn theo --dck cho số nằm ngay giữa (đại ca 21/10/2026) */ body:not(.portrait) .dc-counter { left: calc(7px * var(--dck, 1)); width: calc(22px * var(--dck, 1)); } /* bề rộng vùng lá: giãn theo --dck nhưng KHÔNG lố qua rương bài bên phải (rương ở --dcw − 215, vùng giữa bắt đầu 217 → chừa 14px) */ body:not(.portrait) .dc-rows, body:not(.portrait) .dc-rows .dc-row, body:not(.portrait) .dc-side, body:not(.portrait) .dc-fusion { left: calc(48px * var(--dck, 1)); width: max(300px, min(calc(400px * var(--dck, 1)), calc(var(--dcw, 800px) - 446px - 48px * var(--dck, 1)))); } body:not(.portrait) .dc-rows .dc-row { left: 0; } body:not(.portrait) .dc-status { left: calc(50px * var(--dck, 1)); width: max(300px, min(calc(400px * var(--dck, 1)), calc(var(--dcw, 800px) - 448px - 50px * var(--dck, 1)))); } /* nối lại ván dở: phủ mờ trong lúc tua nhanh tới chỗ đang chơi */ .du-resume { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.72); color: #ffd866; font: bold 22px/1.4 'Segoe UI', sans-serif; text-shadow: 0 2px 6px #000; pointer-events: all; } /* hạn thuê lá trong ô mô tả deck */ .dc-exp { font-size: 11px; font-weight: bold; margin: 0 0 4px; padding: 2px 4px; border-radius: 3px; line-height: 1.35; } .dc-exp.ok { color: #0a5a2a; background: rgba(40,180,90,.18); } .dc-exp.warn { color: #7a4a00; background: rgba(240,170,30,.25); } .dc-exp.bad { color: #8a0f0f; background: rgba(220,50,50,.22); } /* Battle Phase: quái còn tấn công được → thanh gươm nhấp nháy trên mặt bài */ .du-card.can-atk::before { content: '⚔'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff3b0, #e0a020 60%, #8a5a00); border: 2px solid #fff; box-shadow: 0 0 10px 3px rgba(255,210,80,.9); color: #3a1f00; font: 900 22px/32px 'Segoe UI Symbol', 'Segoe UI', sans-serif; text-align: center; pointer-events: none; animation: du-sword 1s ease-in-out infinite alternate; } @keyframes du-sword { from { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 8px 2px rgba(255,210,80,.7); } to { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 0 16px 6px rgba(255,210,80,1); } } .du-card.can-atk img { outline: 2px solid #ffd24a; } /* zoom hai ngón (stage-fit.js): nút về 1:1 */ .zoom-reset { position: fixed; right: 10px; bottom: 10px; z-index: 96; padding: 8px 14px; border-radius: 22px; border: 2px solid #ffd36a; background: rgba(0,0,0,.7); color: #ffe6a8; font: 800 15px/1 'Segoe UI', sans-serif; } .zoom-reset.hidden { display: none; } .dc-list { touch-action: none; } /* cảm ứng: pointer events tự cuộn danh sách (ngang lẫn dọc) */ /* hộp thoại dời được: cầm tiêu đề kéo (chuột / ngón tay) */ .dlg-grip { cursor: move; touch-action: none; user-select: none; -webkit-user-select: none; } .dlg .dlg-msg.dlg-grip::before { content: '✥ '; color: #ffd36a; font-size: 13px; } body.portrait .dc-desc b { font-size: 20px; margin-bottom: 6px; } body.portrait .dc-desc .dc-exp { font-size: 14px; } body.portrait .dc-arrow::after { left: 9px; } body.portrait .dc-fpanel { left: 8px; top: 4px; } body.portrait .dc-showlock { left: 12px; top: 36px; } /* không cho trình duyệt kéo ảnh/chọn lá (kéo thả do pointer events của game) */ .dc-card, .dc-rowitem img.mini, .du-card img, .dc-ghost img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; } /* nút toàn màn hình trong bàn chơi, cạnh ⚙ */ .du-logbtn.fsb { left: 770px; top: 6px; width: 26px; height: 20px; font-size: 14px; line-height: 18px; padding: 0; border-radius: 10px; opacity: .8; } .du-logbtn.fsb:hover { opacity: 1; } .du-logbtn.fsb.on { background: #a8821f; color: #1a1408; } /* màn dọc: ⚙ và ⛶ lên góc trên phải (trước đây bị quy tắc chung .du-logbtn đè trùng chỗ nút LOG) */ body.portrait .du-logbtn.opts { left: 724px; top: 12px; width: 32px; height: 26px; font-size: 17px; line-height: 24px; } body.portrait .du-logbtn.fsb { left: 762px; top: 12px; width: 32px; height: 26px; font-size: 17px; line-height: 24px; } /* ===== OẲN TÙ TÌ (rps-ui.js): màn to, hoạt ảnh lắc tay ===== */ .rps-ov { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.72); } .rps-box { width: min(640px, 96vw); padding: 22px 24px 26px; border-radius: 18px; background: radial-gradient(ellipse at 50% 0%, #3a2d14 0%, #1a1408 70%); border: 3px solid #ffd36a; box-shadow: 0 0 0 2px #7a5a10, 0 24px 70px rgba(0,0,0,.8); text-align: center; color: #ffe6a8; font-family: 'Segoe UI', sans-serif; box-sizing: border-box; } .rps-title { font-size: 34px; font-weight: 900; letter-spacing: 3px; color: #ffd36a; text-shadow: 0 2px 0 #7a4a00, 0 0 18px rgba(255,200,80,.6); } .rps-title small { display: block; font-size: 14px; letter-spacing: 1px; color: #ffb3a0; font-weight: 700; margin-top: 2px; } .rps-sub { margin: 6px 0 16px; font-size: 16px; color: #e9dcb8; } .rps-sub b { color: #fff; } .rps-waiting::after { content: '…'; animation: rps-dots 1.2s steps(4) infinite; } @keyframes rps-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } } .rps-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .rps-btn { width: 150px; min-height: 170px; padding: 14px 8px; border-radius: 16px; border: 3px solid #b48a2a; background: linear-gradient(#5a4518, #2a1d08); color: #ffe6a8; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .rps-btn .emo { font-size: 76px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); } .rps-btn .nm { font-size: 20px; font-weight: 900; letter-spacing: 2px; } .rps-btn small { font-size: 11px; color: #d8c9a0; line-height: 1.3; } .rps-btn:hover:not(:disabled) { transform: translateY(-8px) scale(1.06); border-color: #ffd36a; box-shadow: 0 10px 30px rgba(255,200,80,.35); } .rps-btn:disabled { opacity: .45; cursor: default; } .rps-btn.picked { opacity: 1; transform: scale(1.12); border-color: #fff; box-shadow: 0 0 30px rgba(255,220,120,.9); background: linear-gradient(#a8821f, #5a4518); } .rps-btn.first { border-color: #e26a3a; } .rps-btn.second { border-color: #4aa0e2; } .rps-btn.wide { width: 230px; } .rps-stage { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 10px 0 6px; } .rps-side { width: 200px; } .rps-who { font-size: 15px; font-weight: 800; letter-spacing: 1px; color: #ffd36a; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rps-hand { font-size: 110px; line-height: 1.1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.8)); display: inline-block; transform-origin: 50% 90%; } .rps-hand.flip { transform: scaleX(-1); } .rps-hand.shake { animation: rps-shake .4s ease-in-out 3; } .rps-hand.flip.shake { animation-name: rps-shake-flip; } @keyframes rps-shake { 0% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-34px) rotate(6deg); } 100% { transform: translateY(0) rotate(-8deg); } } @keyframes rps-shake-flip { 0% { transform: scaleX(-1) translateY(0) rotate(-8deg); } 50% { transform: scaleX(-1) translateY(-34px) rotate(6deg); } 100% { transform: scaleX(-1) translateY(0) rotate(-8deg); } } .rps-hand.pop { animation: rps-pop .45s cubic-bezier(.3,1.6,.5,1) 1; } .rps-hand.flip.pop { animation-name: rps-pop-flip; } @keyframes rps-pop { 0% { transform: scale(.3); } 100% { transform: scale(1); } } @keyframes rps-pop-flip { 0% { transform: scaleX(-.3) scaleY(.3); } 100% { transform: scaleX(-1) scaleY(1); } } .rps-hand.win { filter: drop-shadow(0 0 22px #ffd36a) drop-shadow(0 6px 10px rgba(0,0,0,.8)); } .rps-pick { font-size: 18px; font-weight: 900; letter-spacing: 2px; color: #fff; margin-top: 4px; min-height: 22px; } .rps-vs { font-size: 30px; font-weight: 900; color: #ff9b8a; text-shadow: 0 0 12px rgba(255,100,80,.7); } .rps-count { min-height: 30px; font-size: 24px; font-weight: 900; color: #fff; letter-spacing: 2px; } .rps-result { min-height: 34px; margin-top: 4px; font-size: 24px; font-weight: 900; letter-spacing: 1px; } .rps-result.win { color: #7dff9a; text-shadow: 0 0 14px rgba(80,255,120,.7); } .rps-result.lose { color: #ff7a7a; text-shadow: 0 0 14px rgba(255,80,80,.7); } .rps-result.tie { color: #ffd36a; text-shadow: 0 0 14px rgba(255,210,100,.7); } @media (max-width: 600px) { .rps-btn { width: 30%; min-height: 130px; } .rps-btn.wide { width: 44%; } .rps-btn .emo { font-size: 54px; } .rps-btn .nm { font-size: 15px; } .rps-hand { font-size: 80px; } .rps-side { width: 40%; } .rps-title { font-size: 26px; } } /* ===== ô BÀI BỊ LOẠI (banished) — 2 ô nhỏ như game gốc (đại ca 24/10/2026): đối thủ = ô hồng bên TRÁI (giữa mộ đối thủ và ô môi trường của mình), mình = ô xanh bên PHẢI (giữa ô môi trường đối thủ và mộ của mình); hiện số lá, bấm xem ===== */ .du-pile.du-ban { width: 52px; height: 26px; cursor: pointer; border-radius: 4px 13px 13px 4px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; box-sizing: border-box; box-shadow: 0 2px 4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35); opacity: .75; } .du-ban.opp { left: 26px; top: 274px; background: linear-gradient(#ffb3d1, #e0507f); border-radius: 13px 4px 4px 13px; justify-content: flex-start; padding: 0 0 0 8px; } .du-ban.mine { left: 507px; top: 298px; background: linear-gradient(#a8d8ff, #3a7fd8); } .du-ban.has { opacity: 1; } .du-ban b { font: 900 15px/26px 'Segoe UI', sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; } .du-ban::after { content: '⊘'; position: absolute; top: 0; font: 900 13px/26px 'Segoe UI Symbol', sans-serif; color: rgba(255,255,255,.85); } .du-ban.opp::after { right: 8px; } .du-ban.mine::after { left: 8px; } /* lá bị Lightforce Sword ghim: ô nhỏ chéo góc trên phải lá bẫy */ .du-card .held { position: absolute; right: -16px; top: -14px; width: 30px; height: 43px; z-index: 6; transform: rotate(12deg); filter: drop-shadow(0 2px 3px rgba(0,0,0,.8)); pointer-events: auto; } .du-card .held img { width: 100%; height: 100%; border-radius: 2px; outline: 2px solid #ffd36a; } .du-card .held i { position: absolute; left: -6px; top: -8px; font-style: normal; font-size: 14px; } /* deck hết bài: ô trống, không mặt sau lá, không số 0 */ .du-deck.empty { background: none; box-shadow: none; } .du-deck.empty b { display: none; } /* menu chuột phải / đè bài: nổi trên mọi thứ của bàn chơi */ .action-menu.floating { position: fixed; z-index: 150; } /* thông báo nhỏ trên bàn chơi (nối lại ván bị lệch…) */ .du-toast { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); z-index: 70; max-width: 520px; padding: 10px 16px; border-radius: 10px; background: rgba(40, 20, 10, .92); border: 2px solid #ffb35a; color: #ffe6c8; font: 700 13px/1.4 'Segoe UI', sans-serif; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.7); pointer-events: none; animation: pop .3s ease-out; } /* màn DỌC (đại ca 24/10/2026): cột nút bên PHẢI dưới cùng — Vào BP / Hết BP / Hết lượt, ĐẦU HÀNG, LOG. #turn-btns nằm trong #du-field (dọc: scale 1.4035, top 278) → toạ độ field = (sân − 278) / 1.4035; trước đây bị đẩy ra ngoài màn hình (y ≈ 2128) */ body.portrait .du-btns { left: 413px; top: 686px; width: 150px; flex-direction: column; flex-wrap: nowrap; gap: 3px; } body.portrait .du-btns button { width: 150px; height: 22px; font-size: 13px; line-height: 16px; padding: 2px 4px; } body.portrait .du-logbtn.surrender { left: 580px; top: 1322px; width: 210px; height: 34px; font-size: 16px; line-height: 32px; } body.portrait .du-logbtn:not(.surrender):not(.opts):not(.fsb) { left: 580px; top: 1364px; width: 210px; height: 34px; font-size: 16px; line-height: 32px; } /* nhãn hành động trên lá ô MÔI TRƯỜNG (sát cột phase): canh trái, nổi trên cột phase, không bị che — đại ca 24/10/2026 */ .du-zone.fz .du-card .du-act { left: 12px; transform: none; } .du-zone.fz.opp .du-card .du-act { left: auto; right: 0; transform: none; } /* ô môi trường ĐỐI THỦ sát mép phải sân → nhãn (DUNG HỢP khi dùng ké Fusion Gate) canh phải, không tràn ra ngoài (đại ca 15/11/2026) */ /* ô môi trường của mình ở sân x 252, cột phase tới x 261 → nhãn bắt đầu từ x 264, không bị cột phase đè */ .du-card.can:hover { z-index: 70 !important; } /* bảng chọn dung hợp có hình */ .fu-list { display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow: auto; padding: 4px; } .fu-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; border: 2px solid #5a4a20; background: linear-gradient(#2a2212, #17120a); color: #f3e9d2; cursor: pointer; text-align: left; transition: border-color .12s, transform .12s; } .fu-row:hover { border-color: #ffd36a; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(255, 200, 80, .25); } .fu-res { display: flex; flex-direction: column; align-items: center; width: 120px; flex: none; } .fu-res img { width: 110px; height: 160px; border-radius: 4px; box-shadow: 0 0 14px rgba(160, 120, 255, .7); } .fu-res b { margin-top: 4px; font-size: 13px; color: #ffe6a8; text-align: center; } .fu-res small, .fu-mat small { font-size: 11px; color: #c9bfa5; } .fu-eq, .fu-plus { font-style: normal; font-size: 26px; font-weight: 900; color: #ffd36a; } .fu-mats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fu-mat { display: flex; flex-direction: column; align-items: center; width: 112px; } .fu-mat img { width: 64px; height: 92px; border-radius: 3px; } .fu-mat b { font-size: 11px; text-align: center; margin-top: 3px; } .fu-mat.sub img { outline: 2px dashed #7dff9a; outline-offset: 2px; } /* nhãn vị trí nguyên liệu nổi bật + ATK/DEF hiện tại (đại ca 14/11/2026): sân = cam, tay = xanh; số tăng xanh lá, giảm đỏ */ .fu-loc { display: block; flex: none; min-height: 0; margin-top: 3px; padding: 1px 7px; border-radius: 9px; font: 800 10px/14px 'Segoe UI', sans-serif; letter-spacing: .3px; font-style: normal; white-space: nowrap; } /* class riêng fu-loc-*: không dính CSS vùng tay bài (.hand) */ .fu-loc.fu-loc-field { background: #b85c1a; color: #fff3e0; box-shadow: 0 0 6px rgba(255,150,60,.6); } .fu-loc.fu-loc-hand { background: #2d6fb8; color: #e8f3ff; box-shadow: 0 0 6px rgba(80,160,255,.6); } .fu-stat { font: 700 11px/14px 'Consolas', monospace; color: #e8dfc8; margin-top: 2px; white-space: nowrap; } .fu-stat b.up { color: #7dff9a; } .fu-stat b.down { color: #ff8a7a; } .fu-mat.sub small { color: #7dff9a; font-weight: 700; } /* ===== Deck Construction — CHẾ ĐỘ MẪU ADMIN (deck-editor.js, /?tpl=1): Default Deck / Gift / Thưởng (đại ca 30/10/2026) ===== */ .dc-tplbar { display: none; } .dc-stage.tpl .dc-deckpick, .dc-stage.tpl .dc-showlock, .dc-stage.tpl .dc-renew { display: none !important; } .dc-stage.tpl .dc-tplbar { display: flex; align-items: center; justify-content: space-between; gap: 4px; position: absolute; left: 10px; top: 88px; width: 198px; z-index: 3; font: 800 10px/14px 'Segoe UI', sans-serif; color: #ffe36a; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; } .dc-tplbar b { display: none; } .dc-tplbar select { font-size: 10px; padding: 0 2px; background: #f3e9d2; color: #3a1d0c; border: 1px solid #7a2a1a; border-radius: 3px; } body.portrait .dc-stage.tpl .dc-tplbar { top: 6px; width: 440px; font-size: 13px; justify-content: flex-start; gap: 14px; } body.portrait .dc-tplbar b { display: inline; } /* nhãn vùng: dải một dòng ngay TRÊN mỗi vùng, không đè lá */ .dc-stage.tpl #dc-main::after, .dc-stage.tpl #dc-side::after, .dc-stage.tpl #dc-fusion::after { position: absolute; left: 0; top: -14px; padding: 0 8px; border-radius: 4px; background: rgba(20,12,4,.85); border: 1px solid #ffd36a; color: #ffd36a; font: 900 10px/12px 'Segoe UI', sans-serif; letter-spacing: .5px; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 2px #000; z-index: 300; } .dc-stage.tpl #dc-main::after { content: 'DEFAULT DECK — người mới nhận (≥ 40 lá)'; top: -16px; } .dc-stage.tpl.tpl-first #dc-main::after { content: '1ST PURCHASE DECK — nạp ≥ 50.000đ lần đầu nhận CẢ BỘ (không giới hạn số lá) · 30 ngày'; background: rgba(40,8,30,.9); border-color: #ff7ad9; color: #ffb3ea; } .dc-tpltab { font: 900 10px/16px 'Segoe UI', sans-serif; letter-spacing: .5px; padding: 0 6px; border-radius: 4px; border: 1px solid #ffd36a; background: rgba(20,12,4,.85); color: #ffd36a; cursor: pointer; } .dc-tpltab.on { background: #ffd36a; color: #3a1d0c; } .dc-tpltab[data-tab=first].on { background: #ff7ad9; border-color: #ff7ad9; color: #3a0a2a; } body.portrait .dc-tpltab { font-size: 13px; line-height: 22px; padding: 0 10px; } .dc-stage.tpl #dc-side::after { content: 'DEFAULT GIFT CARDS · 5 lá — mã quà tặng VIP · 30 ngày'; left: auto; right: 0; } .dc-stage.tpl #dc-fusion::after { content: 'THƯỞNG · 10 lá — mỗi 10 ván thắng 1 lá · 30 ngày'; } .title-gift { left: 14px; bottom: 80px; background: linear-gradient(180deg, #ff9b6a, #c0392b); color: #fff; border-color: #6a1a10; text-shadow: 0 1px 2px #000; } body.portrait .title-gift { left: 20px; bottom: 200px; } /* ===== hộp 🎁 QUÀ (promo.js) ===== */ .promo-dlg { max-width: min(760px, 96vw); } .promo-title { font-size: 26px; font-weight: 900; color: #ffd36a; letter-spacing: 2px; text-align: center; text-shadow: 0 2px 0 #7a4a00; margin-bottom: 6px; } .promo-sec { border: 1px solid rgba(255,211,106,.35); border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: rgba(255,211,106,.05); } .promo-sec h3 { margin: 0 0 8px; font-size: 16px; color: #ffd36a; letter-spacing: 1px; } .promo-sub { font-size: 12px; color: var(--mut, #9aa); margin: 6px 0; } .promo-mycode { margin-bottom: 8px; font-size: 14px; } .promo-mycode b { color: #7dff9a; font-size: 18px; letter-spacing: 2px; margin: 0 6px; } .promo-mycode small { display: block; color: var(--mut, #9aa); } .promo-form { display: flex; gap: 8px; } .promo-form input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #ffd36a; background: #0f1218; color: #fff; font: 700 15px Segoe UI, sans-serif; letter-spacing: 1px; text-transform: uppercase; } .promo-done { color: #7dff9a; font-weight: 800; } .promo-trial { margin: 8px 0 2px; padding: 10px 14px; border-radius: 10px; border: 1px solid #7dff9a; background: rgba(40,120,60,.25); color: #e8ffe8; font-size: 13px; line-height: 1.45; } .promo-trial b { color: #ffe36a; } /* đang dùng thử toàn bộ lá (đại ca 14/11/2026) */ .promo-cards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0 4px; } .promo-card { width: 112px; text-align: center; font-size: 11px; line-height: 1.25; } .promo-card img { width: 100%; border-radius: 5px; box-shadow: 0 3px 10px rgba(0,0,0,.6); transition: transform .15s; } .promo-card:hover img { transform: scale(1.08); } .promo-card b { display: block; margin-top: 3px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .promo-card small { display: block; color: #ffd36a; font-weight: 700; } .promo-cards.rewards .promo-card { width: 96px; } .promo-card.lock img { filter: grayscale(.85) brightness(.55); } .promo-card.lock small { color: #9aa; } .promo-card.open img { box-shadow: 0 0 16px #ffd36a; } .promo-card.open small { color: #7dff9a; } .promo-card.got img { box-shadow: 0 0 10px rgba(125,255,154,.6); } .promo-card.got small { color: #7dff9a; } .promo-bar { height: 12px; border-radius: 6px; background: #222838; overflow: hidden; border: 1px solid #3a4258; } .promo-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c9961c, #ffe36a); } .promo-claim { text-align: center; margin-top: 8px; } .promo-claim button { font-size: 16px; padding: 10px 22px; } @media (max-width: 600px) { .promo-card { width: 88px; } .promo-cards.rewards .promo-card { width: 72px; } } /* nút ✕ góc trên phải mọi hộp thoại (ui-dialog.js addX) */ .dlg-x { position: sticky; top: 0; float: right; z-index: 20; width: 32px; height: 32px; margin: -8px -10px 0 10px; padding: 0; border-radius: 50%; border: 2px solid #ffd36a; background: #2a1d08; color: #ffd36a; font: 900 16px/1 'Segoe UI', sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.6); } .dlg-x:hover { background: #c0392b; color: #fff; border-color: #fff; } .dlg.wide > .dlg-x { align-self: flex-end; flex: none; margin-bottom: -26px; } /* Quản trị bài (/admin/cards, admin.js): ảnh | tên | sao | nút 0 1 2 3 ↺ nằm NGANG một hàng (đại ca 30/10/2026) — không ăn style nút dọc của SHOP */ #adm-list .adm-row { grid-template-columns: 40px 1fr auto auto; } #adm-list .adm-btns { flex-direction: row; gap: 4px; min-width: 0; } #adm-list .adm-btns button { width: 40px; padding: 7px 0; font-size: 14px; } @media (max-width: 600px) { #adm-list .adm-row { grid-template-columns: 40px 1fr; } #adm-list .adm-stars, #adm-list .adm-btns { grid-column: 2; } } /* màn thưởng QUÀ (promo.js rewardScreen) */ .promo-reward .reward-title { font-size: 28px; } .promo-reward .promo-days { color: #7dff9a; font-weight: 700; margin-top: 4px; } .promo-reward .dlg-btns { justify-content: center; } .promo-reward .dlg-btns button { font-size: 16px; padding: 10px 22px; } /* tuyến dưới trong hộp QUÀ (promo.js) */ .promo-down { margin: 6px 0 10px; font-size: 13px; } .promo-down > b { color: #ffd36a; } .promo-down small { color: var(--mut, #9aa); margin-left: 6px; } .promo-down ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; max-height: 96px; overflow: auto; } .promo-down li { color: #fff; } /* biển cấm ở góc lá đang bị vô hiệu (duel-ui.js cardEl, v.negated) */ .du-card .ban { position: absolute; left: -7px; top: -7px; width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 13px; border-radius: 50%; background: rgba(20,0,0,.85); box-shadow: 0 0 5px #ff3b3b, 0 1px 3px #000; z-index: 7; pointer-events: none; animation: du-ban-pop .35s ease-out; } @keyframes du-ban-pop { from { transform: scale(2.2); opacity: 0; } to { transform: scale(1); opacity: 1; } } .du-card .ban ~ img, .du-card:has(.ban) img { filter: saturate(.45) brightness(.8); } .du-card .ban.src { background: rgba(40,28,0,.9); box-shadow: 0 0 6px #ffd36a, 0 1px 3px #000; color: #ffe9a8; } .du-card .ban.src ~ img, .du-card:has(.ban.src) img { filter: none; } /* lá đang ban lệnh cấm: biển ⚖ vàng, ảnh không mờ (đại ca 14/11/2026) */ /* đại lý cấp 1 trong hộp QUÀ */ .promo-agent { margin: 6px 0 10px; font-size: 13px; color: #fff; } .promo-agent b { color: #ffd36a; } .promo-agent small { display: block; color: var(--mut, #9aa); } /* Diamond trong hộp QUÀ */ .promo-diamond { margin: 6px 0 10px; font-size: 13px; color: #fff; } .promo-diamond > b { color: #9fe8ff; font-size: 16px; } .promo-diamond small { display: block; color: var(--mut, #9aa); } .promo-diamond ul { list-style: none; margin: 4px 0 0; padding: 0; max-height: 110px; overflow: auto; } .promo-diamond li { display: flex; gap: 8px; align-items: baseline; color: #9fe8ff; } .promo-diamond li span { color: #ddd; flex: 1; } .promo-diamond li small { display: inline; } /* xem lá to khi rê chuột / chạm trong hộp QUÀ & màn thưởng (promo.js attachPeek) */ .promo-card, .reward-card { cursor: zoom-in; } .promo-peek { position: fixed; z-index: 10050; display: flex; gap: 14px; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, #161c2b, #0d1119); border: 1px solid #ffd36a; box-shadow: 0 14px 44px rgba(0,0,0,.85), 0 0 0 1px #000; pointer-events: none; animation: pk-in .12s ease-out; } @keyframes pk-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } .promo-peek img { width: 240px; height: auto; flex: none; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.7); } .promo-peek .pk-body { flex: 1; min-width: 0; color: #fff; display: flex; flex-direction: column; } .promo-peek b { font-size: 20px; line-height: 1.2; color: #ffd36a; } .promo-peek small { display: block; color: #9fb0c9; margin: 6px 0 10px; font-size: 12.5px; } .promo-peek p { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow: auto; max-height: 270px; color: #f1f1f1; } .promo-peek em { display: none; margin-top: 10px; font-size: 12px; color: #9aa; } .promo-peek.modal { pointer-events: auto; left: 50% !important; top: 50% !important; width: min(94vw, 460px) !important; max-height: 92vh; overflow: auto; transform: translate(-50%, -50%); flex-direction: column; align-items: center; text-align: center; } .promo-peek.modal img { width: min(68vw, 280px); } .promo-peek.modal p { max-height: none; text-align: left; } .promo-peek.modal em { display: block; } @keyframes pk-in-modal { from { opacity: 0; transform: translate(-50%, -50%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%); } } .promo-peek.modal { animation: pk-in-modal .15s ease-out; } /* màn chọn đối thủ (đại ca 08/11/2026): sắp theo level, khoá đối thủ cao hơn level mình, nút xem deck */ .opp-lvhead { grid-column: 1 / -1; font-weight: 700; color: #ffd36a; margin-top: 6px; border-bottom: 1px solid rgba(255,211,106,.35); padding-bottom: 2px; } .opp-lvhead.locked { color: #8a8f9a; border-bottom-color: rgba(255,255,255,.12); } .opp-card { cursor: pointer; border: 2px solid var(--line); border-radius: 8px; } .opp-card .opp-info { flex: 1; min-width: 0; } .opp-card .opp-info b, .opp-card .opp-info small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .opp-card .opp-btns { display: flex; flex-direction: column; gap: 4px; } .opp-card .opp-btns button { padding: 4px 8px; font-size: 12px; white-space: nowrap; } .opp-card.mine { box-shadow: 0 0 0 2px rgba(255,211,106,.55) inset; } .opp-card.locked { opacity: .5; filter: grayscale(.7); } .opp-card.locked:hover { opacity: .75; } .app-dialog.oppdeck .dlg.wide { width: min(96vw, 1100px); max-height: 94vh; display: flex; flex-direction: column; } .oppdeck-body { display: flex; gap: 10px; flex: 1; min-height: 0; } .oppdeck-body .pick-grid { flex: 1; max-height: 70vh; align-content: start; } .oppdeck-detail { width: 230px; flex: none; overflow: auto; max-height: 70vh; } .oppdeck-detail .detail-img { width: 100%; height: auto; border-radius: 6px; } .oppdeck-detail h3 { margin: 6px 0 2px; font-size: 15px; color: #ffd36a; } .oppdeck-sep { grid-column: 1 / -1; color: #ffd36a; font-weight: 700; font-size: 12px; margin-top: 6px; } .pick .x { font-style: normal; color: #ffd36a; } .pick.on { border-color: var(--gold); } @media (max-width: 760px) { .oppdeck-body { flex-direction: column; } .oppdeck-detail { width: 100%; max-height: 32vh; font-size: 13px; } .oppdeck-detail .detail-img { float: left; width: 100px; margin: 0 8px 4px 0; } .oppdeck-detail h3 { margin-top: 0; } .oppdeck-body .pick-grid { max-height: 45vh; } } /* ưu đãi sau khi nhận quà: mở khoá toàn bộ lá 1 tháng (promo.js unlockOfferHtml) — đại ca 08/11/2026 */ .promo-unlock { margin: 10px 0 2px; padding: 12px 14px; border-radius: 12px; border: 2px solid #ffd36a; background: linear-gradient(135deg, rgba(255,211,106,.16), rgba(255,120,40,.10)); box-shadow: 0 0 18px rgba(255,211,106,.25); animation: pu-glow 2.4s ease-in-out infinite; } @keyframes pu-glow { 0%, 100% { box-shadow: 0 0 10px rgba(255,211,106,.2); } 50% { box-shadow: 0 0 26px rgba(255,211,106,.5); } } .promo-unlock .pu-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; } .promo-unlock .pu-head b { font-size: 16px; color: #ffd36a; letter-spacing: .5px; } .promo-unlock .pu-price { font-size: 22px; font-weight: 900; color: #7dff9a; } .promo-unlock .pu-price i { font-style: normal; font-size: 13px; color: #9fb0c9; } .promo-unlock small { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: #e8e8e8; } .promo-unlock small b { color: #ffd36a; } .promo-unlock .promo-claim button { font-size: 17px; padding: 11px 26px; } .promo-unlock.on { animation: none; border-color: #7dff9a; background: rgba(60,160,90,.14); box-shadow: none; } .promo-unlock.on b { color: #7dff9a; } .promo-unlock.off { animation: none; border-color: #555; background: rgba(255,255,255,.04); box-shadow: none; opacity: .75; } .promo-unlock.off b { color: #bbb; } .promo-unlock .pu-note { color: #ffb07a; font-weight: 700; } /* nạp $ bằng QR (topup.js) — đại ca 08/11/2026 */ .title-topup { left: 14px; bottom: 130px; background: linear-gradient(180deg, #7ddc8a, #1f8a3b); color: #fff; border-color: #0e4a1e; text-shadow: 0 1px 2px #000; } body.portrait .title-topup { left: 20px; bottom: 250px; } #shop-topup { margin-left: 8px; padding: 4px 10px; font-size: 13px; } .topup-dlg { max-width: min(760px, 96vw); } .tu-title { margin: 0 0 10px; color: #ffd36a; font-size: 18px; letter-spacing: 1px; } .tu-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } .tu-preset { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 10px; border: 2px solid var(--line); background: var(--bg2); color: #fff; cursor: pointer; } .tu-preset b { font-size: 17px; } .tu-preset span { color: #7dff9a; font-weight: 700; } .tu-preset small { color: #ffd36a; font-size: 11px; text-align: center; line-height: 1.2; } .tu-preset.on { border-color: #ffd36a; background: rgba(255,211,106,.14); box-shadow: 0 0 0 1px #ffd36a inset; } .tu-order { display: flex; gap: 16px; align-items: flex-start; } .tu-qr { flex: none; width: 240px; background: #fff; border-radius: 12px; padding: 6px; } .tu-qr img { width: 100%; height: auto; display: block; } .tu-info { flex: 1; min-width: 0; } .tu-rows { border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: rgba(0,0,0,.25); } .tu-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .tu-row:last-child { border-bottom: 0; } .tu-row span { color: var(--mut); font-size: 12px; min-width: 96px; } .tu-row b { flex: 1; font-family: Consolas, monospace; } .tu-row b.hl { color: #ffd36a; font-size: 20px; letter-spacing: 2px; } .tu-row i { width: 48px; } .tu-warn { margin-top: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,180,80,.6); background: rgba(120,70,0,.25); color: #ffd9a0; font-size: 12.5px; } .tu-wait { margin-top: 10px; font-size: 13px; color: #cfe; } .tu-wait .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ffd36a; margin-right: 6px; animation: pk-dot 1s ease-in-out infinite; } @keyframes pk-dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } .tu-paid { text-align: center; padding: 18px 0 6px; } .tu-paid .big { font-size: 44px; } .tu-paid b { display: block; font-size: 20px; color: #7dff9a; margin: 6px 0; } @media (max-width: 640px) { .tu-order { flex-direction: column; align-items: center; } .tu-info { width: 100%; } } /* bảng thanh toán ưu đãi (topup.js checkout) — đại ca 08/11/2026 */ .tu-desc { font-size: 13.5px; line-height: 1.45; color: #e8e8e8; margin-bottom: 10px; } .tu-desc b { color: #ffd36a; } .tu-sum { border: 1px solid #ffd36a; border-radius: 12px; padding: 4px 14px; margin: 6px 0 10px; background: linear-gradient(135deg, rgba(255,211,106,.12), rgba(0,0,0,.25)); } .tu-sum-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; } .tu-sum-row:last-child { border-bottom: 0; } .tu-sum-row span { color: #cfd6e4; } .tu-sum-row b { font-size: 17px; color: #fff; } .tu-sum-row b i { font-style: normal; font-size: 12px; color: #9fb0c9; } .tu-sum-row.ok b { color: #7dff9a; } .tu-sum-row.warn b { color: #ff9b8a; } .tu-sum-row.hl b { color: #ffd36a; font-size: 20px; } .tu-order { margin-top: 6px; } /* hồ sơ người chơi (profile.js) — đại ca 08/11/2026 */ .title-name { background: rgba(0,0,0,.55); color: #ffd36a; border: 1px solid #8a7a3a; border-radius: 6px; padding: 3px 10px; font: 700 13px 'Segoe UI', sans-serif; cursor: pointer; } .title-name:hover { background: rgba(255,211,106,.2); } .profile-dlg { max-width: min(640px, 96vw); } .pf-title { margin: 0 0 10px; color: #ffd36a; font-size: 18px; letter-spacing: 1px; } .pf-grid { display: flex; gap: 14px; align-items: flex-start; } .pf-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid #ffd36a; flex: none; } .pf-avatar.ph { display: flex; align-items: center; justify-content: center; font-size: 40px; background: #222a38; } .pf-info { flex: 1; min-width: 0; } .pf-name { font-size: 22px; font-weight: 900; color: #fff; margin-bottom: 6px; } .pf-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13.5px; } .pf-row span { color: #9fb0c9; } .pf-row b { color: #fff; text-align: right; } .pf-row b.ok { color: #7dff9a; } .pf-rename { margin-top: 14px; padding: 12px 14px; border: 1px solid #ffd36a; border-radius: 12px; background: rgba(255,211,106,.08); } .pf-rename h4 { margin: 0 0 8px; color: #ffd36a; font-size: 15px; } .pf-form { display: flex; gap: 8px; } .pf-form input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 8px; border: 1px solid #ffd36a; background: #0f1218; color: #fff; font: 700 16px 'Segoe UI', sans-serif; } .pf-cost { margin-top: 8px; font-size: 13px; } .pf-free { color: #7dff9a; } .pf-fee { color: #ffd9a0; } .pf-msg { margin-top: 6px; font-size: 13.5px; } .pf-msg .ok { color: #7dff9a; } .pf-msg .bad { color: #ff9b8a; } @media (max-width: 520px) { .pf-grid { flex-direction: column; align-items: center; text-align: center; } .pf-form { flex-direction: column; } } /* SHOP mới (08/11/2026): tab gói gia hạn tất cả + tab theo lá; không còn silver */ #screen-shop { display: flex; flex-direction: column; } #screen-shop.hidden { display: none; } .shop-views { display: flex; gap: 6px; margin-left: auto; } .shop-views button { padding: 6px 14px; border-radius: 8px; border: 2px solid #445; background: rgba(0,0,0,.4); color: #ccd; font-weight: 800; } .shop-views button.on { border-color: var(--gold); color: #ffd36a; background: rgba(255,211,106,.12); } .shop-cards { display: flex; flex-direction: column; flex: 1; min-height: 0; } .shop-tools { display: flex; gap: 8px; align-items: center; padding: 8px 16px 0; } .shop-tools input { flex: 1; min-width: 0; } .shop-packs { padding: 16px 20px; overflow: auto; flex: 1; } .sp-status { padding: 10px 14px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid #445; color: #dde; font-size: 14px; margin-bottom: 14px; } .sp-status.on { border-color: #7dff9a; color: #c8ffd4; background: rgba(60,160,90,.14); } .sp-status b { color: #ffd36a; } .sp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 900px; } .sp-card { position: relative; padding: 18px 18px 16px; border-radius: 16px; border: 2px solid #8a7a3a; background: linear-gradient(160deg, rgba(255,211,106,.14), rgba(0,0,0,.35)); display: flex; flex-direction: column; gap: 8px; } .sp-card.best { border-color: #ffd36a; box-shadow: 0 0 24px rgba(255,211,106,.35); } .sp-badge { position: absolute; top: -12px; right: 14px; background: #e23; color: #fff; font: 800 12px/22px 'Segoe UI', sans-serif; padding: 0 10px; border-radius: 11px; } .sp-title { font-size: 17px; font-weight: 800; color: #fff; } .sp-price { font-size: 34px; font-weight: 900; color: #ffd36a; line-height: 1; } .sp-price small { display: block; font-size: 12px; color: #9fb0c9; font-weight: 600; margin-top: 4px; } .sp-list { margin: 4px 0 6px; padding-left: 18px; color: #e8e8e8; font-size: 13.5px; line-height: 1.5; } .sp-list b { color: #ffd36a; } .sp-buy { margin-top: auto; font-size: 15px; padding: 11px 14px; } @media (max-width: 760px) { .shop-views { margin-left: 0; width: 100%; } .shop-views button { flex: 1; } .shop-packs { padding: 12px; } } /* UNLOCK ALL lần đầu + khoá gói gia hạn (08/11/2026) */ .sp-grid.three { max-width: 1240px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .sp-card.locked { opacity: .45; filter: grayscale(.6); border-color: #555; box-shadow: none; } .sp-card.locked .sp-buy { background: #333; color: #aaa; border: 1px solid #555; cursor: not-allowed; } .sp-card.done { border-color: #7dff9a; } .sp-card.done .sp-buy { background: rgba(60,160,90,.25); color: #7dff9a; border: 1px solid #7dff9a; cursor: default; } .sp-done { color: #7dff9a; font-size: 26px; } .sp-card.first { border-color: #ffd36a; } .sp-price s { font-size: 18px; color: #9fb0c9; margin-left: 6px; font-weight: 600; } .pu-price s { font-size: 14px; color: #9fb0c9; margin: 0 4px; font-weight: 600; } /* đếm ngược khuyến mãi từng giây (Topup.countdown) — 08/11/2026 */ .cd { font-variant-numeric: tabular-nums; font-family: Consolas, monospace; color: #ffd36a; } .cd.big { font-size: 22px; font-weight: 900; letter-spacing: 1px; } .cd.cd-urgent { color: #ff6a5a; animation: cd-blink 1s steps(2, start) infinite; } @keyframes cd-blink { to { opacity: .55; } } .sp-count { margin: 6px 0 2px; padding: 8px 10px; border-radius: 10px; background: rgba(226,35,51,.14); border: 1px dashed #ff7a6a; color: #ffd9a0; font-size: 13px; } .sp-count b { display: block; margin: 2px 0; } .sp-count small { display: block; color: #ffb0a0; font-size: 11.5px; } .pu-count { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(226,35,51,.16); border: 1px dashed #ff7a6a; color: #ffd9a0; font-size: 14px; text-align: center; } .pu-count b { margin-left: 6px; } /* Diamond: VIP/SVIP, đổi 💎 → K, đăng ký thưởng (08/11/2026) */ .promo-diamond .dm-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; } .promo-diamond .dm-sub { color: #9fb0c9; font-size: 12.5px; } .promo-diamond .dm-vip { margin: 4px 0; font-size: 13px; } .promo-diamond .ok { color: #7dff9a; } .promo-diamond .bad { color: #ff9b8a; } .dm-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 6px; } .dm-ex { display: flex; gap: 6px; } .dm-ex input { width: 110px; padding: 7px 10px; border-radius: 8px; border: 1px solid #9fe8ff; background: #0f1218; color: #fff; font: 700 14px 'Segoe UI', sans-serif; } .dm-actions button[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.5); } .dm-req { list-style: none; margin: 4px 0; padding: 0; } .dm-req li { color: #ffd36a; font-size: 12.5px; } .dm-req li small { color: #9aa; margin-left: 6px; } .rw-dlg { max-width: min(560px, 96vw); } .rw-form { display: grid; gap: 10px; margin: 10px 0; } .rw-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #9fb0c9; } .rw-form input { padding: 9px 12px; border-radius: 8px; border: 1px solid #ffd36a; background: #0f1218; color: #fff; font: 700 15px 'Segoe UI', sans-serif; } /* bộ bài mẫu admin (tab BỘ MẪU trong /admin/decks) — 08/11/2026 */ .dc-stage.tpl.tpl-preset #dc-main::after { content: 'BỘ BÀI MẪU — người chơi nạp vào deck của mình dùng ngay (40–80 lá main)'; background: rgba(8,30,40,.9); border-color: #7ad9ff; color: #b3ecff; } .dc-stage.tpl.tpl-preset #dc-side::after { content: 'SIDE DECK của bộ mẫu (≤ 15)'; } .dc-stage.tpl.tpl-preset #dc-fusion::after { content: 'FUSION DECK của bộ mẫu (≤ 20)'; } .dc-stage.tpl.tpl-first #dc-side::after { content: 'SIDE DECK của bộ 1st Purchase (≤ 15) · phát kèm'; border-color: #ff7ad9; color: #ffb3ea; } .dc-stage.tpl.tpl-first #dc-fusion::after { content: 'FUSION DECK của bộ 1st Purchase (≤ 20) · phát kèm'; border-color: #ff7ad9; color: #ffb3ea; } /* đại ca 13/11/2026: 2 ô này là side/fusion riêng của bộ 1st purchase, không còn là quà/thưởng */ .sp-card.preset .sp-title { color: #ffd36a; } .sp-price s { color: #9aa; font-weight: 400; } .sp-off { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: rgba(255,80,80,.18); border: 1px solid rgba(255,120,120,.6); color: #ffb3b3; font-size: 12.5px; font-weight: 700; } /* giá lẻ gạch + % giảm của combo (đại ca 13/11/2026) */ .sp-desc { margin: 2px 0 6px; padding: 8px 10px; border-left: 3px solid #ffd36a; background: rgba(255,211,106,.07); color: #f3e9c8; font-size: 13.5px; line-height: 1.45; white-space: pre-line; } /* mô tả chiến thuật bộ mẫu (đại ca 13/11/2026) */ .sp-view { width: 100%; margin: 0 0 6px; padding: 8px; border-radius: 8px; border: 1px solid #7ad9ff; background: rgba(8,30,40,.9); color: #b3ecff; font: 700 13.5px 'Segoe UI', sans-serif; cursor: pointer; } .sp-view:hover { background: rgba(20,60,80,.95); } .deckview-sub { display: block; margin-top: 4px; color: #f3e9c8; font-weight: 400; font-size: 13px; white-space: pre-line; } .dlg-input.multi { width: 100%; min-height: 90px; resize: vertical; font: 14px/1.4 'Segoe UI', sans-serif; } .dc-stage.tpl .dc-tplbar { flex-wrap: wrap; } .dc-presetbar { display: flex; gap: 3px; width: 100%; margin-top: 3px; } .dc-presetbar select { flex: 1; min-width: 0; } .dc-presetbar button { font: 900 11px/16px 'Segoe UI', sans-serif; padding: 0 5px; border-radius: 4px; border: 1px solid #7ad9ff; background: rgba(8,30,40,.9); color: #b3ecff; cursor: pointer; } body.portrait .dc-presetbar { width: auto; margin-top: 0; } body.portrait .dc-presetbar button { font-size: 14px; line-height: 22px; padding: 0 8px; } .topup-dlg button.warn { background: linear-gradient(180deg, #ff9b6a, #c0392b); color: #fff; border: 1px solid #6a1a10; font-weight: 800; } /* 🐞 báo lá lỗi (bugreport.js) — đại ca 08/11/2026 */ .title-bug { left: 14px; bottom: 180px; background: linear-gradient(180deg, #c9a0ff, #6a2fb5); color: #fff; border-color: #3a1566; text-shadow: 0 1px 2px #000; } body.portrait .title-bug { left: 20px; bottom: 300px; } .bug-dlg { max-width: min(860px, 96vw); } .bug-count { font-size: 12px; font-weight: 400; margin-left: 8px; } .bug-body { display: flex; gap: 14px; align-items: stretch; min-height: 380px; } .bug-left { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bug-side { width: 260px; flex: none; display: flex; flex-direction: column; gap: 8px; } .bug-q { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); color: #fff; font-size: 14px; margin-bottom: 6px; } .bug-list { flex: 1; overflow: auto; max-height: 56vh; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.25); } .bug-row { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer; } .bug-row:hover { background: rgba(255,255,255,.06); } .bug-row.on { background: rgba(201,160,255,.18); outline: 1px solid #c9a0ff; } .bug-row img { width: 36px; height: 52px; object-fit: cover; border-radius: 3px; flex: none; } .bug-row b { display: block; font-size: 14px; } .bug-row small { color: var(--mut); font-size: 11px; } .bug-more { padding: 10px; color: var(--mut); font-size: 12px; text-align: center; } .bug-big { width: 100%; max-width: 220px; align-self: center; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.6); } .bug-name { color: #ffd36a; text-align: center; } .bug-note { width: 100%; box-sizing: border-box; min-height: 90px; resize: vertical; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); color: #fff; font: 13px/1.4 'Segoe UI', sans-serif; } .bug-hint { color: var(--mut); font-size: 13px; line-height: 1.5; padding: 8px; } .bug-msg { color: #ff8a7a; font-size: 13px; min-height: 18px; } .bug-done { text-align: center; padding: 12px 6px; line-height: 1.5; } .bug-done .big { font-size: 40px; } .bug-done b { color: #7dff9a; display: block; margin-bottom: 6px; } @media (max-width: 700px) { .bug-body { flex-direction: column; } .bug-side { width: auto; } .bug-list { max-height: 36vh; } .bug-big { max-width: 150px; } } /* huy hiệu VIP cạnh nickname (đại ca 10/11/2026) */ .vip-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: linear-gradient(180deg, #ffe36a, #c9961c); color: #1a1408; font: 800 11px/16px 'Segoe UI', sans-serif; letter-spacing: .5px; border: 1px solid #fff3b0; box-shadow: 0 0 6px rgba(255,211,106,.6); vertical-align: 1px; } .vip-badge.off { background: linear-gradient(180deg, #999, #555); color: #eee; border-color: #777; box-shadow: none; opacity: .8; } /* ví K · Coin · Diamond trên trang chủ (đại ca 10/11/2026) */ .title-wallet { position: absolute; right: 14px; top: 40px; display: flex; gap: 6px; cursor: pointer; } .title-wallet span { background: rgba(0,0,0,.6); border: 1px solid #556; border-radius: 8px; padding: 3px 10px; font: 800 14px/18px 'Segoe UI', sans-serif; color: #fff; text-shadow: 0 1px 2px #000; } .title-wallet .w-k { color: #7dff9a; border-color: #2d7a3f; } .title-wallet .w-c { color: #ffd36a; border-color: #8a6a1a; } .title-wallet .w-d { color: #8fe0ff; border-color: #2a6a8a; } .title-wallet:hover span { background: rgba(255,255,255,.12); } body.portrait .title-wallet { top: 124px; right: 14px; } .coin-ico { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f0c33c 45%, #a8781a); border: 1px solid #6a4a0a; color: #5a3d05; font: 900 10px/14px "Segoe UI", sans-serif; text-align: center; vertical-align: 1px; margin-right: 2px; text-shadow: none; box-shadow: 0 1px 2px rgba(0,0,0,.6); } /* đồng xu vẽ CSS thay emoji 🪙 (Win10 không có glyph, ra ô vuông) — đại ca 10/11/2026 */ /* SHOP: chip VIP còn ngày + gói Coin (đại ca 10/11/2026) */ .shop-vip { margin-left: 10px; padding: 3px 10px; border-radius: 8px; background: rgba(0,0,0,.45); border: 1px solid #556; color: #ccd; font: 700 13px/18px 'Segoe UI', sans-serif; } .shop-vip.on { color: #ffe36a; border-color: #8a6a1a; background: rgba(255,211,106,.12); } .shop-vip b { color: #fff; } .sp-h { margin: 22px 0 14px; color: #ffd36a; font-size: 16px; letter-spacing: .5px; } .sp-h b { color: #fff; } .sp-h .coin-ico { width: 20px; height: 20px; font-size: 12px; line-height: 18px; vertical-align: -3px; } .sp-card.coin { border-color: #b08a2a; background: linear-gradient(160deg, rgba(240,195,60,.14), rgba(0,0,0,.35)); } .sp-card.coin .sp-title .coin-ico { width: 22px; height: 22px; font-size: 13px; line-height: 20px; vertical-align: -4px; margin-right: 4px; } .tu-sub { margin: 14px 0 8px; color: #ffd36a; font-weight: 800; font-size: 13px; } .tu-sub .coin-ico { vertical-align: -3px; } .tu-preset.coin { border-color: #8a6a1a; background: linear-gradient(160deg, rgba(240,195,60,.14), var(--bg2)); } .tu-preset.coin b { font-size: 15px; } .tu-preset.coin span { color: #ffd36a; } .tu-preset.coin:hover { border-color: #ffd36a; } .bug-tools { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; } .bug-tools .bug-q { flex: 1 1 160px; margin-bottom: 0; } .bug-tools select { padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); color: #fff; font-size: 13px; } /* nút trả bằng Diamond (đại ca 10/11/2026) */ .topup-dlg button.dia { background: linear-gradient(180deg, #9fe3ff, #2a7ab0); color: #06202e; border: 1px solid #0f3f5e; font-weight: 800; } .topup-dlg button.dia:hover { filter: brightness(1.08); } .topup-dlg .dia-slot:empty { display: none; } /* màn thưởng nhiều lá (bộ 40 lá nạp lần đầu): thu nhỏ để thấy đủ (đại ca 10/11/2026) */ .reward-row.many { gap: 12px; } .reward-row.many .reward-card { width: 118px; } .reward-row.many .reward-card img { width: 118px; box-shadow: 0 0 12px 3px rgba(255,211,106,.6), 0 4px 10px rgba(0,0,0,.8); } .reward-row.many .reward-card b { font-size: 12px; } .reward-row.many .reward-card small { font-size: 10px; } /* bảng điểm PvP (đại ca 10/11/2026) */ .elo-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: rgba(0,0,0,.55); border: 1px solid #5a7a9a; color: #9fe3ff; font: 800 11px/16px 'Segoe UI', sans-serif; cursor: pointer; vertical-align: 1px; } .elo-badge:hover { background: rgba(159,227,255,.18); } .elo-dlg { max-width: min(860px, 96vw); } .elo-me { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(159,227,255,.08); border: 1px solid #2a5a7a; margin-bottom: 12px; } .elo-me b { font-size: 22px; color: #9fe3ff; } .elo-me small { color: var(--mut); } .elo-tabs { display: flex; gap: 6px; margin-bottom: 8px; } .elo-tabs button { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); color: #ccd; cursor: pointer; } .elo-tabs button.on { background: rgba(159,227,255,.18); color: #fff; border-color: #9fe3ff; } .elo-table { width: 100%; border-collapse: collapse; font-size: 13px; } .elo-table th, .elo-table td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; } .elo-table th { color: var(--mut); font-weight: 600; font-size: 12px; } .elo-table tr.me td { background: rgba(255,211,106,.12); } .elo-table .r1 { color: #ffd36a; font-weight: 800; } .elo-table .pos { color: #7dff9a; } .elo-table .neg { color: #ff8a7a; } .elo-rules { color: #ccd; font-size: 12.5px; line-height: 1.55; } .elo-rules b { color: #ffd36a; } .elo-scroll { max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; } /* phí Coin đấu người (đại ca 10/11/2026) */ .ol-fee { position: relative; z-index: 1; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0 22px 6px; padding: 8px 12px; border-radius: 10px; background: rgba(240,195,60,.08); border: 1px solid #6a5a2a; font-size: 13px; } .ol-fee label { cursor: pointer; } .ol-fee b { color: #ffd36a; } .ol-fee small { color: var(--mut); } .ol-fee .ol-fee-h { font-weight: 800; color: #ffd36a; } .ol-fee .coin-ico { vertical-align: -3px; } /* Exodia: chữ lớn giữa sân (đại ca 10/11/2026) */ .fx-epicname.exodia b { font-size: 46px; letter-spacing: 6px; color: #ffe36a; text-shadow: 0 0 18px #ffb400, 0 0 40px #ff8800, 0 3px 4px #000; } .fx-epicname.exodia span { color: #fff3b0; font-size: 15px; } /* DNA Surgery: huy hiệu Loại trên quái ngửa (đại ca 10/11/2026) */ .du-card .dna { position: absolute; right: -6px; top: -7px; width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 12px; border-radius: 50%; background: rgba(40,0,60,.9); color: #ffd36a; box-shadow: 0 0 5px #d26bff, 0 1px 3px #000; z-index: 7; pointer-events: none; animation: du-ban-pop .35s ease-out; } /* BXH theo tỉnh (đại ca 10/11/2026) */ .elo-prov { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; font-size: 13px; } .elo-prov select { padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); color: #eee; font-size: 13px; } .elo-prov small { color: #9ab; margin-left: auto; } .elo-table td.muted { color: #9ab; font-size: 12px; } /* Đấu team (đại ca 11/11/2026) */ .ol-team { flex: 1; } .tm-members { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0; } .tm-m { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; } .tm-m.cap { color: #ffe6a8; } .tm-dot { width: 9px; height: 9px; border-radius: 50%; background: #666; display: inline-block; } .tm-dot.on { background: #5cf08a; box-shadow: 0 0 6px #5cf08a; } .tm-dot.busy { background: #ffb347; } .tm-dot.off { background: #555; } .tm-x { padding: 0 5px; font-size: 11px; line-height: 16px; border-radius: 4px; background: #3a1a1a; color: #ff9b8a; border: 1px solid #6a2a2a; cursor: pointer; } .tour-card .pos { color: #5cf08a; } /* REPLAY / lịch sử thi đấu (đại ca 11/11/2026) — cửa sổ LOAD theo game gốc (img/ui/replay/w_replay_l.png 347x284, vẽ gấp đôi) */ .replay-ov { display: flex; align-items: center; justify-content: center; } .rp-win { position: relative; width: 694px; height: 568px; background: url('/img/ui/replay/w_replay_l.png') 0 0 / 694px 568px no-repeat; transform-origin: center center; font-family: 'Segoe UI', Arial, sans-serif; user-select: none; } .rp-list { position: absolute; left: 92px; top: 142px; width: 452px; height: 232px; overflow: auto; scrollbar-width: none; padding: 2px 4px; } .rp-list::-webkit-scrollbar { display: none; } .rp-row { display: flex; align-items: center; gap: 8px; height: 32px; margin: 1px 0; padding: 0 8px; border: 2px solid transparent; border-radius: 4px; color: #4a2a1a; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; } .rp-row:hover { background: rgba(170, 60, 40, .10); } .rp-row.sel { border-color: #b8302a; background: rgba(184, 48, 42, .14); } .rp-date { color: #7a5a3a; font-weight: 600; width: 86px; flex: none; } .rp-kind { width: 22px; flex: none; text-align: center; } .rp-opp { flex: 1; overflow: hidden; text-overflow: ellipsis; } .rp-opp small { color: #8a6a4a; font-weight: 600; } .rp-res { width: 62px; flex: none; text-align: center; letter-spacing: .5px; } .rp-res.win { color: #1f8a3a; } .rp-res.lose { color: #b8302a; } .rp-res.draw { color: #6a6a6a; } .rp-turn { color: #7a5a3a; font-weight: 600; width: 60px; flex: none; text-align: right; font-size: 13px; } .rp-empty { color: #7a5a3a; font-size: 15px; text-align: center; padding: 70px 20px; line-height: 1.5; } .rp-line { position: absolute; left: 92px; top: 388px; width: 500px; height: 36px; line-height: 36px; padding: 0 10px; color: #5a3a2a; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-arrow { position: absolute; left: 556px; width: 36px; height: 40px; background: transparent; border: 0; cursor: pointer; } .rp-arrow.up { top: 140px; } .rp-arrow.down { top: 322px; } .rp-arrow:hover { background: rgba(184, 48, 42, .18); border-radius: 6px; } .rp-btn { position: absolute; top: 436px; height: 44px; background: transparent; border: 0; cursor: pointer; border-radius: 8px; } .rp-btn.load { left: 232px; width: 120px; } .rp-btn.cancel { left: 400px; width: 150px; } .rp-btn:hover { background: rgba(184, 48, 42, .18); } .rp-btn.off { cursor: default; opacity: .4; } .rp-btn.off:hover { background: transparent; } .ol-hist { margin-left: 8px; } /* thanh XEM LẠI trong trận */ .du-replaybar { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 10px; background: rgba(0,0,0,.72); border: 1px solid #ffd866; color: #ffd866; font: bold 13px 'Segoe UI', Arial, sans-serif; white-space: nowrap; } .du-replaybar small { color: #ccc; font-weight: 400; } .du-replaybar .rb-spd { display: inline-flex; gap: 3px; } .du-replaybar button { padding: 2px 8px; border-radius: 6px; border: 1px solid #8a7a40; background: #2a2418; color: #ffe6a8; font: bold 12px 'Segoe UI', Arial, sans-serif; cursor: pointer; } .du-replaybar button.on { background: #ffd866; color: #1a1408; } .du-replaybar .rb-x { border-color: #a04040; color: #ffb0a0; } body.portrait .du-replaybar { top: 2px; font-size: 12px; gap: 6px; padding: 3px 6px; } /* hỏi lưu replay sau trận — bảng gỗ game gốc (img/ui/replay/w_replay_q.png 464x166, vẽ ×1.5) — đại ca 11/11/2026 */ .replay-q { display: flex; align-items: center; justify-content: center; z-index: 1200; } .rp-qwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; transform: scale(min(1, calc((100vw - 16px) / 696))); transform-origin: center center; } .rp-q { position: relative; width: 696px; height: 249px; background: url('/img/ui/replay/w_replay_q.png') 0 0 / 696px 249px no-repeat; } .rp-qbtn { position: absolute; top: 152px; height: 54px; background: transparent; border: 0; border-radius: 10px; cursor: pointer; } .rp-qbtn.yes { left: 222px; width: 120px; } .rp-qbtn.no { left: 362px; width: 110px; } .rp-qbtn:hover { background: rgba(184, 48, 42, .2); } .rp-qsub { color: #ffe6a8; font: 600 14px 'Segoe UI', Arial, sans-serif; text-shadow: 0 1px 3px #000; text-align: center; } .rp-row.norep { opacity: .72; } .rp-norep { color: #9a7a5a; font-weight: 600; } /* lịch sử ván (đại ca 11/11/2026) */ .rp-pts { width: 44px; flex: none; text-align: right; font-size: 13px; font-weight: 700; } .rp-pts.win { color: #1f8a3a; } .rp-pts.lose { color: #b8302a; } .rp-pts.draw { color: #6a6a6a; } .elo-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid var(--line); font-size: 13px; } .elo-sum small { color: #9ab; margin-left: auto; } .elo-hist td { white-space: nowrap; } .elo-hist td:nth-child(3) { white-space: normal; } .elo-hist button.small { padding: 2px 8px; font-size: 12px; } .elo-sum .pos { color: #7dff9a; } .elo-sum .neg { color: #ff7a7a; } .elo-sum .muted { color: #9ab; } /* ---------- MÀN CHÍNH DỌC (đại ca 12/11/2026): phủ hết màn — hàng thông tin trải ngang hết chiều rộng, logo full 800, menu 1.9×, 4 nút phụ 2×2 dưới QUIT GAME ---------- */ body.portrait .title-stats { top: 10px; left: 14px; right: 14px; font-size: 17px; line-height: 1.35; } body.portrait .title-user { top: 96px; left: 14px; right: 14px; display: flex; gap: 8px; align-items: stretch; font-size: 18px; } body.portrait .title-user > button { flex: 1 1 0; min-width: 0; padding: 9px 6px; font-size: 18px; line-height: 24px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.portrait .title-user .title-name { flex: 2.4 1 0; } body.portrait .title-user .vip-badge { font-size: 13px; line-height: 18px; } body.portrait .title-user .elo-badge { font-size: 14px; } body.portrait .title-wallet { top: 154px; left: 14px; right: 14px; gap: 8px; } body.portrait .title-wallet span { flex: 1 1 0; text-align: center; padding: 7px 4px; font-size: 21px; line-height: 26px; white-space: nowrap; } body.portrait .title-logo { left: 0; top: 215px; width: 800px; height: 443px; } body.portrait .title-menu { left: 20px; top: 680px; transform: scale(1.9); transform-origin: 0 0; } body.portrait .title-shop, body.portrait .title-shop.title-gift, body.portrait .title-shop.title-topup, body.portrait .title-shop.title-bug, body.portrait .title-back { bottom: auto; width: 374px; padding: 14px 6px; font-size: 24px; line-height: 30px; border-radius: 12px; } body.portrait .title-shop { left: 20px; top: 1185px; } body.portrait .title-shop.title-gift { left: 406px; top: 1185px; } body.portrait .title-shop.title-topup { left: 20px; top: 1275px; } body.portrait .title-shop.title-bug { left: 406px; top: 1275px; } body.portrait .title-back { left: 20px; right: auto; top: 1185px; width: 760px; } /* ---------- DECK DỌC v2 (đại ca 12/11/2026): thảm deck chiếm 60% chiều cao (scale 1.345, kéo ngang kín 800×807), bên dưới: lá xem + mô tả (trái) · danh sách lá 4 hàng, ảnh lá 94×128 (phải) ---------- */ body.portrait .dc-center { left: 0; top: 46px; width: 595px; background-size: 595px 600px; transform: scale(1.345); transform-origin: 0 0; } /* thảm 466 kéo ngang ×1.276 = 595 → ×1.345 = 800 sát hai mép; hàng lá rộng 510 (lá đỡ đè nhau) — đại ca 12/11/2026 */ body.portrait .dc-rows, body.portrait .dc-rows .dc-row, body.portrait .dc-side, body.portrait .dc-fusion { width: 510px; } body.portrait .dc-rows, body.portrait .dc-side, body.portrait .dc-fusion { left: 61px; } body.portrait .dc-rows .dc-row { left: 0; } body.portrait .dc-counter { left: 9px; width: 28px; } body.portrait .dc-status { left: 64px; width: 510px; } body.portrait .dc-preview { left: 10px; top: 866px; width: 200px; height: 290px; } body.portrait .dc-renew { left: 216px; top: 866px; width: 100px; font-size: 12px; } body.portrait .dc-desc { left: 6px; top: 1164px; width: 310px; height: 250px; font-size: 14px; line-height: 1.4; padding: 5px 8px; } body.portrait .dc-right, body.portrait .dc-stage.compact .dc-right { left: 326px; top: 860px; width: 474px; height: 556px; border: 2px solid #8e6f1f; border-radius: 8px; box-sizing: border-box; } body.portrait .dc-fpanel { left: 6px; top: 4px; } body.portrait .dc-showlock { left: 186px; top: 10px; font-size: 12px; } body.portrait .dc-list, body.portrait .dc-stage.compact .dc-list { left: 6px; top: 34px; width: 410px; height: 520px; } body.portrait .dc-rowitem, body.portrait .dc-stage.compact .dc-rowitem { width: 410px; height: 130px; } body.portrait .dc-rowitem img.mini { left: 4px; top: 1px; width: 94px; height: 128px; } /* ảnh lá ×3 cỡ gốc (32×44) — đại ca 12/11/2026 */ body.portrait .dc-rowitem .cnt { left: 76px; top: 108px; font-size: 16px; line-height: 18px; } body.portrait .dc-rowitem .nm { left: 106px; top: 28px; width: 300px; font-size: 17px; line-height: 22px; } body.portrait .dc-rowitem .seigen { left: 104px; top: 30px; } body.portrait .dc-rowitem .seigen + .nm { left: 124px; width: 282px; } body.portrait .dc-rowitem .st { left: 106px; top: 62px; font-size: 16px; line-height: 20px; } body.portrait .dc-rowitem .ic { top: 64px; margin-left: 90px; } /* left inline (108/126 quái · 46/64 phép-bẫy) + 60 → sau ATK/DEF chữ 16px */ body.portrait .dc-rowitem .lv { top: 64px; font-size: 15px; line-height: 20px; } body.portrait .dc-rowitem .lk { top: 6px; font-size: 11px; line-height: 14px; } body.portrait .dc-scroll, body.portrait .dc-stage.compact .dc-scroll { left: 432px; top: 40px; height: 474px; } body.portrait .dc-arrow, body.portrait .dc-stage.compact .dc-arrow { left: 422px; } body.portrait .dc-arrow.up { top: 4px; } body.portrait .dc-arrow.down { top: 520px; } /* ---------- THƯ VIỆN BÀI màn dọc (đại ca 12/11/2026): lá nhỏ 84×120 (×1.5) 1 cột sát mép PHẢI; cột chi tiết (zoom) bên TRÁI rộng phần còn lại ---------- */ body.portrait #screen-library .lib-layout { grid-template-columns: 1fr 104px; gap: 6px; padding: 8px; } /* chi tiết (zoom) bên TRÁI chiếm hết chỗ còn lại, lưới lá 1 cột 84px sát mép PHẢI (đại ca 12/11/2026) */ body.portrait #screen-library #lib-detail { order: -1; } body.portrait #lib-grid { padding: 4px; gap: 6px; justify-content: flex-end; } body.portrait #lib-detail { padding: 8px; } body.portrait #lib-detail .detail-img { max-width: 200px; } /* ảnh giữ 200, chữ mô tả rộng hết cột (~290) → ít phải cuộn */ body.portrait #lib-detail .detail-desc { font-size: 14px; line-height: 1.4; } body.portrait #lib-grid .card-mini { width: 84px; height: 120px; } body.portrait #lib-grid .card-mini .badge, body.portrait #lib-grid .card-mini .stat { font-size: 13px; padding: 2px 5px; }