:root {
  --bg: #0d1220;
  --bg2: #151c30;
  --panel: #1b2440;
  --line: #2b365a;
  --ink: #eef1f8;
  --mute: #9aa4c0;
  --gold: #f6c445;
  --red: #ff5a5f;
  --green: #3ddc84;
  --blue: #4aa8ff;
  --radius: 14px;
  --t-grass: #4caf50; --t-fire: #f0592a; --t-water: #2f8fe0; --t-lightning: #f2c014; --t-psychic: #9b59d0;
  --t-fighting: #c0703a; --t-darkness: #3d4a63; --t-metal: #95a3b3; --t-colorless: #cfc6b4;
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); color: var(--ink); background: var(--bg);
  background-image: radial-gradient(ellipse at 50% -10%, #23305a 0%, transparent 60%), radial-gradient(ellipse at 50% 110%, #2a1d48 0%, transparent 55%);
  background-attachment: fixed; -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
input, select { font: inherit; }
.hidden { display: none !important; }

/* ---------- nút ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); font-weight: 700; min-height: 46px; transition: transform .08s, filter .15s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #ffd45e, #f0a91f); color: #2a1a00; border-color: #ffd45e; }
.btn.blue { background: linear-gradient(180deg, #5cb4ff, #2f7fe0); border-color: #6fbcff; color: #fff; }
.btn.danger { background: #3a1d27; border-color: #6b2b3b; color: #ffb3b8; }
.btn.ghost { background: transparent; }
.btn.block { width: 100%; }

/* ---------- sảnh ---------- */
.lobby { max-width: 440px; margin: 0 auto; padding: 28px 16px 40px; }
.brand { text-align: center; margin: 8px 0 24px; }
.brand h1 { font-size: 34px; margin: 0; letter-spacing: -.5px; font-weight: 800;
  background: linear-gradient(180deg, #fff3c4, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand p { margin: 6px 0 0; color: var(--mute); }
.fan { display: flex; justify-content: center; height: 150px; margin: 4px 0 20px; }
.fan img { width: 96px; height: 134px; object-fit: cover; border-radius: 10px; border: 3px solid #ffe08a; box-shadow: 0 10px 24px #0008; margin: 0 -18px; }
.fan img:nth-child(1) { transform: rotate(-14deg) translateY(14px); }
.fan img:nth-child(3) { transform: rotate(14deg) translateY(14px); }
.fan img:nth-child(2) { z-index: 1; }
.panel { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.panel h2 { font-size: 15px; margin: 0 0 12px; color: var(--mute); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.field-label { display: block; font-size: 13px; color: var(--mute); margin: 10px 0 6px; }
.inp { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 16px; }
.inp:focus { outline: 2px solid var(--blue); border-color: transparent; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.seg { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { flex: 1; padding: 9px 4px; border-radius: 8px; background: transparent; color: var(--mute); font-weight: 600; font-size: 14px; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 0 #ffffff14 inset; }
.links { display: flex; justify-content: center; gap: 18px; margin-top: 10px; }
.links a { color: var(--mute); font-size: 14px; }
.code-big { font-size: 56px; font-weight: 800; letter-spacing: 10px; text-align: center; color: var(--gold); margin: 6px 0; font-variant-numeric: tabular-nums; }
.wait-dots::after { content: ''; animation: dots 1.4s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.muted { color: var(--mute); font-size: 14px; }
.center { text-align: center; }

/* ---------- bàn đấu ---------- */
.game { height: 100dvh; display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 6px; position: relative; }
.game::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 40% at 50% 0%, #ff5a5f22, transparent 70%), radial-gradient(ellipse 70% 40% at 50% 100%, #4aa8ff26, transparent 70%),
    radial-gradient(circle at 50% 50%, #1b2550 0%, #0b1020 75%); }

/* thanh người chơi */
.pbar { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: linear-gradient(180deg, #ffffff10, #ffffff05); border: 1px solid var(--line); border-radius: 14px; position: relative; transition: border-color .3s, box-shadow .3s; }
.pbar.active { border-color: var(--gold); box-shadow: 0 0 0 1px #f6c44566, 0 0 22px #f6c44533; }
.pbar.opp.active { border-color: #ff7a7f; box-shadow: 0 0 0 1px #ff5a5f55, 0 0 22px #ff5a5f33; }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 900; font-size: 18px;
  background: radial-gradient(circle at 35% 30%, #6fb6ff, #2d5fb8); border: 2px solid #ffffff40; box-shadow: 0 4px 10px #0006; }
.pbar.opp .avatar { background: radial-gradient(circle at 35% 30%, #ff9a8a, #b8323b); }
.avatar.bot { font-size: 22px; background: radial-gradient(circle at 35% 30%, #c9d4e6, #59657e); }
.pbar .who { min-width: 0; flex: 1; }
.pbar .nm { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7591; flex: none; }
.dot.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
.lpbar { height: 9px; background: #0007; border-radius: 6px; overflow: hidden; margin-top: 5px; position: relative;
  box-shadow: inset 0 1px 2px #000a; }
.lpbar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9.6%, #0006 9.6% 10%); }
.lpbar i { display: block; height: 100%; background: linear-gradient(180deg, #7cf0a8, #22b866); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.lpbar i.mid { background: linear-gradient(180deg, #ffe37a, #e0a800); }
.lpbar i.low { background: linear-gradient(180deg, #ff9a8a, #d92b3a); animation: lowpulse 1s infinite; }
@keyframes lowpulse { 50% { filter: brightness(1.5); } }
.lp { font-weight: 900; font-size: 24px; font-variant-numeric: tabular-nums; min-width: 74px; text-align: right; transition: color .3s; }
.lp small { font-size: 11px; color: var(--mute); font-weight: 700; margin-right: 3px; }
.lp.drop { color: #ff7a7f; } .lp.gain { color: var(--green); }
.pbar .meta { font-size: 11px; color: var(--mute); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thinking { color: #ffd1d3; font-weight: 700; }
.iconbtn { width: 36px; height: 36px; border-radius: 10px; background: #0b1020cc; border: 1px solid var(--line); font-size: 16px; flex: none; }

/* thảm đấu */
.arena { flex: 1; min-height: 0; perspective: 1100px; display: flex; }
.mat { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; border-radius: 22px; transform: rotateX(7deg); transform-origin: 50% 70%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 46px, #ffffff14 47px 49px, transparent 50px 66px, #ffffff0d 67px 68px, transparent 69px),
    linear-gradient(180deg, #3a1a2a 0%, #1c1630 48%, #142343 52%, #10305a 100%);
  border: 1px solid #ffffff1f; box-shadow: inset 0 0 0 6px #0b102080, inset 0 0 60px #000a, 0 20px 40px #0009; position: relative; overflow: visible; }
.mat::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .35;
  background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px); background-size: 22px 22px; }
.half { flex: 1; min-height: 0; container-type: size; }
.zones { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; height: 100%; }
.zone { flex: none; width: min(calc((100cqw - 20px) / 3), calc(100cqh * 63 / 88)); aspect-ratio: 63 / 88; border-radius: 12px; position: relative;
  display: flex; align-items: center; justify-content: center; }
.zone.empty { border: 2px solid #ffffff14; background: radial-gradient(circle, #ffffff08, transparent 70%); box-shadow: inset 0 0 18px #0008; }
.half-me .zone.empty { cursor: pointer; }
.slot-rune { width: 46%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed #ffffff1c; animation: spin 18s linear infinite; }
.half-me .zone.empty::after { content: '+'; position: absolute; color: #ffffff30; font-size: 26px; font-weight: 300; }
.zone.target { cursor: crosshair; }
.zone.target .fcard { animation: targetpulse 1s infinite; }
@keyframes targetpulse { 50% { box-shadow: 0 0 0 3px #ff5a5f, 0 0 26px #ff5a5faa; } }
.zone.pick .fcard { box-shadow: 0 0 0 3px var(--gold), 0 0 18px #f6c44588; cursor: pointer; }
.zone.picked .fcard { box-shadow: 0 0 0 4px #fff, 0 0 28px var(--gold); transform: translateY(-6px); }
.zone.attacker .fcard { box-shadow: 0 0 0 3px var(--gold), 0 0 30px var(--gold); transform: translateY(-8px) scale(1.04); }
.mat.targeting .half-me .zone:not(.attacker) .fcard { filter: brightness(.6); }
.zone.acting { z-index: 30; }

.midbar { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 2px 2px; position: relative; z-index: 2; }
.midbar::before { content: ''; position: absolute; left: -8px; right: -8px; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, #ffffff30, transparent); z-index: -1; }
.turnflag { padding: 6px 12px; border-radius: 20px; font-weight: 900; font-size: 12px; white-space: nowrap; background: #0b1020; border: 1px solid var(--line); letter-spacing: .3px; }
.turnflag.mine { background: linear-gradient(180deg, #ffd45e, #f0a91f); color: #2a1a00; border-color: transparent; box-shadow: 0 0 14px #f6c44566; }
.turnflag.bot { background: linear-gradient(180deg, #ff8a8f, #d6343f); color: #fff; border-color: transparent; }
.lastlog { flex: 1; font-size: 12px; color: #dfe5f5; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; cursor: pointer;
  background: #0b1020b3; border-radius: 6px; padding: 0 6px; box-shadow: 0 0 0 4px #0b1020b3; margin: 0 4px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.actions .btn { min-height: 54px; font-size: 16px; }
#btnEnd.nudge { animation: nudge 1.4s infinite; border-color: var(--gold); }
@keyframes nudge { 50% { box-shadow: 0 0 0 3px #f6c44555, 0 0 20px #f6c44544; } }
.hint { font-size: 12px; color: var(--mute); text-align: center; min-height: 16px; }
.hint a { color: var(--gold); }

/* lá trên sân */
.fcard { position: absolute; inset: 0; color: var(--ink); border-radius: 11px; overflow: hidden; background: #111; border: 3px solid var(--tc, #888);
  display: flex; flex-direction: column; cursor: pointer; transition: transform .25s, filter .25s, box-shadow .25s;
  box-shadow: 0 0 18px color-mix(in srgb, var(--tc) 45%, transparent), 0 10px 18px #000a;
  animation: bob 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.1s); }
@keyframes bob { 50% { transform: translateY(-3px); } }
.zone.target .fcard, .zone.attacker .fcard, .zone.picked .fcard, .zone.acting .fcard { animation-name: none; }
.zone.target .fcard { animation: targetpulse 1s infinite; }
.fcard .f-art { flex: 1; background-size: cover; background-position: center; min-height: 0; }
.fcard .f-info { background: linear-gradient(180deg, #000b, #000e); padding: 4px 6px 5px; }
.fcard .f-name { display: block; font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.f-hp { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.f-hp small { color: var(--mute); font-weight: 600; font-size: 9px; }
.f-hpbar { flex: 1; height: 6px; background: #fff2; border-radius: 4px; overflow: hidden; position: relative; }
.f-hpbar i { display: block; height: 100%; background: var(--green); transition: width .45s ease-out; position: relative; z-index: 1; }
.f-hpbar .ghost { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; opacity: .85; transition: width .6s ease-in; }
.f-hpbar i.mid { background: #f2c014; } .f-hpbar i.low { background: var(--red); }
.f-en { display: flex; align-items: center; gap: 4px; min-height: 10px; margin-top: 2px; }
.f-en em { font-size: 9px; color: var(--mute); font-style: normal; margin-left: auto; }
.f-badge { position: absolute; top: 4px; left: 4px; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 5px; background: #000b; color: var(--gold); z-index: 2; }
.f-status { position: absolute; top: 3px; right: 4px; display: flex; gap: 2px; font-size: 14px; filter: drop-shadow(0 1px 2px #000); z-index: 2; }
.f-status i { font-style: normal; }
.pips { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.pip { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c9, #f0b31f 60%, #a86a00); box-shadow: 0 0 0 1px #0005; }
.pip.on { width: 7px; height: 7px; box-shadow: 0 0 4px #ffcf40; }
.fcard.dim { filter: grayscale(.55) brightness(.68); }
.fcard.can { box-shadow: 0 0 0 2px var(--gold), 0 0 22px #f6c44599, 0 10px 18px #000a; }
.fcard.guarded { box-shadow: 0 0 0 3px #7cc4ff, 0 0 22px #7cc4ffaa, 0 10px 18px #000a; }
.fcard.holo::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .5;
  background: linear-gradient(115deg, transparent 30%, #ff8af0 40%, #7af7ff 47%, #fff6a0 54%, transparent 64%); background-size: 250% 250%; animation: holo 4s linear infinite; }
@keyframes holo { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* dự đoán sát thương khi chọn mục tiêu */
.preview { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #0b1020f0; border: 2px solid #ff5a5f; border-radius: 10px; padding: 3px 8px; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 14px #000a; }
.preview.lethal { border-color: #fff; background: linear-gradient(180deg, #d92b3a, #7a0d18); animation: pvpulse .8s infinite; }
@keyframes pvpulse { 50% { transform: translateX(-50%) scale(1.07); } }
.pv-num { font-weight: 900; font-size: 18px; color: #fff; }
.preview em { font-style: normal; font-size: 10px; font-weight: 800; padding: 0 4px; border-radius: 4px; }
.t-weak { background: #ff8a00; color: #2a1200; }
.t-res { background: #2f6fb8; color: #fff; }
.pv-ko { font-size: 11px; color: #fff; }
.pv-ko.maybe { color: #ffd1d3; font-weight: 700; }

/* lớp hiệu ứng */
#fxCanvas { position: fixed; inset: 0; width: 100vw; height: 100dvh; pointer-events: none; z-index: 65; }
.screen-flash { position: fixed; inset: 0; z-index: 64; pointer-events: none; mix-blend-mode: screen; }
.dmgpop { position: fixed; z-index: 70; font-size: 40px; font-weight: 900; color: #fff; pointer-events: none; text-align: center; line-height: 1;
  text-shadow: 0 0 2px #000, 0 3px 0 #b3001b, 0 0 18px #ff2d55; animation: pop 1.3s cubic-bezier(.2,.9,.3,1) forwards; }
.dmgpop small { display: block; font-size: 13px; letter-spacing: .5px; margin-top: 4px; color: #fff; text-shadow: 0 0 2px #000, 0 2px 0 #000; }
.dmgpop.crit { font-size: 52px; color: #ffe14a; text-shadow: 0 0 2px #000, 0 4px 0 #b34700, 0 0 26px #ff8a00; }
.dmgpop.crit small { color: #ffb04a; }
.dmgpop.miss { color: #aab6d3; text-shadow: 0 0 2px #000, 0 3px 0 #2b3550; }
.dmgpop.heal { color: #b8ffd0; text-shadow: 0 0 2px #000, 0 3px 0 #007a3d, 0 0 18px #3ddc84; }
.dmgpop.energy { font-size: 26px; color: #ffe14a; text-shadow: 0 0 2px #000, 0 2px 0 #8a5a00, 0 0 14px #ffc400; }
.dmgpop.energy.small { font-size: 16px; }
.dmgpop.status { font-size: 20px; text-shadow: 0 0 2px #000, 0 2px 0 #000; }
.dmgpop.lp { font-size: 28px; color: #ff9a9e; }
@keyframes pop { 0% { transform: translate(-50%, 0) scale(.3); opacity: 0; } 18% { transform: translate(-50%, -24px) scale(1.25); opacity: 1; }
  70% { transform: translate(-50%, -48px) scale(1); opacity: 1; } 100% { transform: translate(-50%, -80px) scale(.95); opacity: 0; } }
.callout { position: fixed; z-index: 69; transform: translate(-50%, -100%); pointer-events: none; font-weight: 900; font-size: 15px; white-space: nowrap;
  padding: 5px 12px; border-radius: 10px; color: #111; background: var(--tc); box-shadow: 0 0 18px var(--tc), 0 6px 14px #0009; animation: callout 1.3s forwards; }
@keyframes callout { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -110%) scale(1.08); } 80% { opacity: 1; transform: translate(-50%, -115%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -130%); } }
.turn-banner { position: fixed; left: 0; right: 0; top: 42%; z-index: 72; pointer-events: none; display: flex; justify-content: center; }
.turn-banner span { display: block; padding: 14px 40px; font-size: 30px; font-weight: 900; letter-spacing: 2px; color: #2a1a00;
  background: linear-gradient(90deg, transparent, #ffd45e 15%, #f0a91f 85%, transparent); text-shadow: 0 1px 0 #fff8; }
.turn-banner.foe span { color: #fff; background: linear-gradient(90deg, transparent, #ff6a70 15%, #b8212d 85%, transparent); text-shadow: 0 2px 0 #0006; }
.turn-banner.gx span { color: #fff; background: linear-gradient(90deg, transparent, #ff4fd8 15%, #7a5cff 50%, #22d3ee 85%, transparent); font-size: 38px; }
.turn-banner.bonus span { color: #fff; background: linear-gradient(90deg, transparent, #2fbf71 15%, #1a8a52 85%, transparent); font-size: 24px; }
.coin-wrap { position: fixed; inset: 0; z-index: 73; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #0008; perspective: 600px; pointer-events: none; }
.coin { width: 110px; height: 110px; position: relative; transform-style: preserve-3d; }
.coin .face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 18px; backface-visibility: hidden;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #e2a92a 60%, #8a5a00); color: #4a2c00; border: 5px solid #ffd34d; box-shadow: inset 0 0 0 4px #b8860b; }
.coin .face.t { transform: rotateY(180deg); background: radial-gradient(circle at 35% 30%, #e8eef5, #9aa7b8 60%, #4c5768); color: #1c2230; border-color: #d6dde6; box-shadow: inset 0 0 0 4px #7c8798; }
.coin-res { font-size: 28px; font-weight: 900; color: var(--gold); text-shadow: 0 2px 0 #000; min-height: 34px; text-align: center; padding: 0 16px; }
.shards { position: fixed; inset: 0; z-index: 66; pointer-events: none; }
.shards i { position: absolute; background-repeat: no-repeat; border: 1px solid #fff6; box-shadow: 0 0 8px #fff8; }
.ko-stamp { position: fixed; z-index: 71; transform: translate(-50%, -50%) rotate(-12deg); pointer-events: none; font-size: 34px; font-weight: 900; color: #fff; white-space: nowrap;
  padding: 6px 16px; border: 4px solid #fff; border-radius: 12px; background: #d92b3acc; box-shadow: 0 0 30px #ff2d55; animation: stamp 1.3s forwards; }
@keyframes stamp { 0% { transform: translate(-50%, -50%) rotate(-12deg) scale(3); opacity: 0; } 18% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(.9); } }
.reveal { position: fixed; inset: 0; z-index: 68; display: flex; align-items: center; justify-content: center; pointer-events: none; perspective: 900px; background: #0007; }
.reveal.fly { background: transparent; transition: background .3s; }
.reveal .card { width: min(280px, 72vw); }
.big-intro { position: fixed; inset: 0; z-index: 67; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--tc) 35%, transparent), #000d 70%); overflow: hidden; }
.big-intro .rays { position: absolute; width: 240vmax; height: 240vmax; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 45%, transparent) 0 6deg, transparent 6deg 18deg); animation: spin 6s linear infinite; opacity: .55; }
.big-name { position: relative; font-size: clamp(30px, 10vw, 56px); font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 1px; text-align: center; padding: 0 12px;
  text-shadow: 0 0 20px var(--tc), 0 4px 0 #000; animation: bigname 1.2s cubic-bezier(.2,1.3,.4,1) both; }
.big-sub { position: relative; font-weight: 800; color: var(--tc); text-shadow: 0 2px 0 #000; letter-spacing: 3px; }
@keyframes bigname { from { transform: scale(2.4); opacity: 0; letter-spacing: 20px; } }
.summon-circle { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(60deg); border-radius: 50%; pointer-events: none; z-index: -1;
  border: 3px solid var(--tc); box-shadow: 0 0 24px var(--tc), inset 0 0 24px var(--tc);
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 50%, transparent) 0 10deg, transparent 10deg 30deg);
  animation: circle 1.4s ease-out forwards; }
@keyframes circle { 0% { opacity: 0; transform: translate(-50%, -50%) rotateX(60deg) rotate(0) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotateX(60deg) rotate(200deg) scale(1.2); } }
.shield-pop { position: fixed; z-index: 70; transform: translate(-50%, -50%); font-size: 64px; pointer-events: none; filter: drop-shadow(0 0 16px #7cc4ff); animation: stamp 0.9s forwards; }

/* sảnh: khung đấu máy nổi bật */
.panel-bot { border-color: #f6c44566; background: linear-gradient(160deg, #2a2340, #151c30 60%); box-shadow: 0 0 30px #f6c44514; }
@media (prefers-reduced-motion: reduce) { .fcard, .slot-rune, .fcard.holo::after { animation: none !important; } }

/* ---------- lá bài đầy đủ ---------- */
.card { --tc: #888; width: 300px; aspect-ratio: 63 / 88; border-radius: 14px; padding: 8px; position: relative;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 85%, #fff) 0%, var(--tc) 45%, color-mix(in srgb, var(--tc) 70%, #000) 100%);
  border: 6px solid #f3d24f; box-shadow: 0 14px 34px #000a; color: #1a1a1a; display: flex; flex-direction: column; overflow: hidden; font-size: 12px; }
.card.rule { border-color: #c9ccd6; background: linear-gradient(160deg, #2b2f3a, color-mix(in srgb, var(--tc) 55%, #111) 60%, #15171d); color: #fff; }
.card.t-gold { border-color: #f7d774; background: linear-gradient(135deg, #fff3b0, #d9a520 30%, #fff1a8 50%, #b8860b 75%, #ffe58a); color: #2a1d00; }
.card .c-top { display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 700; }
.c-stage { background: #0002; padding: 1px 6px; border-radius: 6px; }
.card.rule .c-stage { background: #fff2; }
.c-trib { background: #b3001b; color: #fff; padding: 1px 6px; border-radius: 6px; }
.c-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin: 2px 2px 4px; }
.c-name { font-size: 18px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
.c-hp { font-weight: 900; font-size: 20px; white-space: nowrap; color: inherit; display: flex; align-items: center; gap: 2px; }
.card.rule .c-hp, .card.t-gold .c-hp { color: inherit; }
.c-hp small { font-size: 9px; }
.c-type { font-style: normal; font-size: 16px; margin-left: 2px; }
.c-art { border: 3px solid #e9e2c9; border-radius: 3px; aspect-ratio: 4 / 3; overflow: hidden; background: #000; box-shadow: 0 2px 5px #0005; flex: none; }
.card.t-gold .c-art { border-color: #fff3b0; }
.c-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-body { flex: 1; padding: 6px 2px 2px; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 0; overflow: hidden; }
.c-atk-row { display: flex; align-items: center; gap: 6px; }
.c-atk-row b { flex: 1; font-size: 14px; }
.c-dmg { font-weight: 900; font-size: 17px; }
.c-atk p, .c-ability p { margin: 2px 0 0; font-size: 10.5px; line-height: 1.3; opacity: .9; }
.c-ability b { font-size: 13px; }
.c-ab-tag { background: #b3001b; color: #fff; font-size: 9px; padding: 1px 5px; border-radius: 4px; margin-right: 6px; font-weight: 800; }
.c-rule { font-size: 13px; line-height: 1.45; margin: 0; background: #fff8; border-radius: 6px; padding: 8px; }
.c-limit { font-size: 10.5px; margin: 6px 0 0; opacity: .8; }
.c-foot { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; border-top: 1px solid #0003; padding-top: 4px; }
.card.rule .c-foot { border-color: #fff3; }
.c-set { font-size: 9px; opacity: .65; margin-top: 2px; }
.card.t-trainer { --tc: #b9c2cf; }
.card.t-energy { --tc: #8fc8f5; }
.t-grass { --tc: var(--t-grass); } .t-fire { --tc: var(--t-fire); } .t-water { --tc: var(--t-water); } .t-lightning { --tc: var(--t-lightning); }
.t-psychic { --tc: var(--t-psychic); } .t-fighting { --tc: var(--t-fighting); } .t-darkness { --tc: var(--t-darkness); }
.t-metal { --tc: var(--t-metal); } .t-colorless { --tc: var(--t-colorless); } .t-gold { --tc: #e2b23a; }
.t-darkness .c-name, .t-darkness .c-top { color: #fff; }
.card.t-darkness:not(.rule) { color: #f2f2f2; }

/* ---------- sheet / modal ---------- */
.sheet-bg { position: fixed; inset: 0; background: #000a; z-index: 40; display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 560px; max-height: 92dvh; overflow: auto; background: var(--bg2); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 20px 20px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); animation: up .25s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet h3 { margin: 0 0 10px; font-size: 18px; }
.sheet .card { margin: 0 auto 14px; width: min(300px, 80vw); }
.sheet-close { float: right; }
.atk-list { display: grid; gap: 8px; margin-bottom: 10px; }
.atk-btn { text-align: left; padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; }
.atk-btn b { font-size: 15px; }
.atk-btn .d { font-weight: 900; font-size: 20px; color: var(--gold); }
.atk-btn .why { grid-column: 1 / -1; font-size: 12px; color: var(--mute); }
.atk-btn:not(:disabled):hover { border-color: var(--gold); }
.atk-btn:disabled { opacity: .5; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.mini { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 4; border: 2px solid var(--tc, #888); background: #000; padding: 0; }
.mini img { width: 100%; height: 72%; object-fit: cover; display: block; }
.mini span { display: block; font-size: 11px; font-weight: 700; padding: 4px; line-height: 1.2; text-align: left; }
.mini.used { opacity: .35; }
.mini.used::after { content: 'Đã dùng'; position: absolute; top: 6px; right: 6px; font-size: 10px; background: #000c; padding: 2px 6px; border-radius: 6px; }

/* camera */
.cam-wrap { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; max-height: 62dvh; margin: 0 auto 12px; }
.cam-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-guide { position: absolute; left: 50%; top: 50%; width: 64%; aspect-ratio: 63 / 88; transform: translate(-50%, -50%); border: 3px solid #ffffffd0; border-radius: 14px;
  box-shadow: 0 0 0 999px #0007; }
.cam-guide::after { content: 'Đặt lá bài vào khung'; position: absolute; left: 0; right: 0; bottom: -30px; text-align: center; font-size: 13px; font-weight: 600; color: #fff; }
.cam-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; background: #000a; font-weight: 700; }
.spinner { width: 42px; height: 42px; border: 4px solid #fff3; border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.scan-line { position: absolute; left: 18%; right: 18%; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); top: 20%; animation: scan 1.6s ease-in-out infinite alternate; }
@keyframes scan { to { top: 78%; } }

/* toast */
.toast { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 90; background: #2a1520; border: 1px solid #7a2a3c; color: #ffd0d4;
  padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; max-width: 92vw; box-shadow: 0 10px 30px #0008; animation: up .2s; }
.toast.ok { background: #13281d; border-color: #2a7a4c; color: #c9f5da; }

/* log */
.loglist { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.45; }
.loglist li { padding: 6px 0; border-bottom: 1px solid #ffffff0d; }
.loglist li.turn { color: var(--gold); font-weight: 700; padding-top: 12px; }

/* thắng */
.win { position: fixed; inset: 0; z-index: 80; background: radial-gradient(circle, #2a2150ee, #0d1220f5); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 24px; text-align: center; }
.win.pending { opacity: 0; pointer-events: none; }
.win h2 { font-size: 40px; margin: 0; color: var(--gold); }
.win .trophy { font-size: 80px; animation: trophy .9s cubic-bezier(.2,1.4,.4,1); }
@keyframes trophy { from { transform: scale(.2) rotate(-30deg); opacity: 0; } }
.guard-btn { border-color: #3d6fa8; background: linear-gradient(180deg, #1d3354, #16263f); color: #cfe6ff; margin-top: 4px; }
.atk-btn { border-left: 4px solid var(--tc, var(--line)); }
.atk-btn .why i { font-style: normal; opacity: .75; }

/* bộ sưu tập / luật */
.page { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
.page h1 { margin: 0 0 6px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; justify-items: center; margin-top: 18px; }
.gallery .card { width: 100%; max-width: 300px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.chip { padding: 7px 12px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.chip.on { background: var(--gold); color: #2a1a00; border-color: var(--gold); }
.rules { max-width: 680px; line-height: 1.6; }
.rules h2 { margin-top: 28px; font-size: 20px; color: var(--gold); }
.rules table { border-collapse: collapse; width: 100%; font-size: 14px; }
.rules td, .rules th { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; vertical-align: top; }
.rules a, .page a { color: var(--blue); }

@media (max-width: 380px) {
  .lp { font-size: 19px; min-width: 58px; }
  .actions .btn { font-size: 15px; }
}

/* ---------- trang đăng nhập ---------- */
.login-page { min-height: 100dvh; overflow-x: hidden;
  background: radial-gradient(1px 1px at 20% 30%, #fff8, transparent), radial-gradient(1px 1px at 70% 20%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, #fff7, transparent), radial-gradient(1px 1px at 60% 80%, #fff5, transparent),
    radial-gradient(1px 1px at 92% 35%, #fff6, transparent), radial-gradient(ellipse 60% 40% at 80% 70%, #5b3fa833, transparent),
    linear-gradient(180deg, #0d1430, #0b1020 70%); background-size: 260px 260px, 340px 340px, 300px 300px, 280px 280px, 380px 380px, 100% 100%, 100% 100%; }
/* màn ngang: tranh (đã cắt bỏ nửa trời trống) neo trái, mờ dần vào nền trời đêm bên phải */
.lg-bg { position: fixed; top: 0; bottom: 0; left: 0; width: min(100vw, calc(100dvh * 1.12)); background: url('login-art/wide.jpg') left center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%); mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
  animation: lgzoom 24s ease-in-out infinite alternate; transform-origin: 30% 50%; }
@keyframes lgzoom { to { transform: scale(1.06); } }
.lg-shade { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 90% at 28% 50%, transparent 45%, #0b102088 100%), linear-gradient(180deg, transparent 75%, #0b1020aa 100%); }
@media (min-aspect-ratio: 4/5) and (max-width: 1100px) {
  .lg-wrap { margin-right: auto; }
  .lg-shade { background: #0b102099; }
}
.lg-embers { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.lg-embers i { position: absolute; bottom: -10px; width: 5px; height: 5px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 10px 2px #ff7a1a;
  opacity: 0; animation: ember 7s linear infinite; }
.lg-embers i:nth-child(odd) { background: #9fe0ff; box-shadow: 0 0 10px 2px #3b9cff; }
.lg-embers i:nth-child(1) { left: 6%; animation-delay: 0s; } .lg-embers i:nth-child(2) { left: 14%; animation-delay: 2.3s; }
.lg-embers i:nth-child(3) { left: 22%; animation-delay: 4.1s; } .lg-embers i:nth-child(4) { left: 31%; animation-delay: 1.2s; }
.lg-embers i:nth-child(5) { left: 39%; animation-delay: 5.5s; } .lg-embers i:nth-child(6) { left: 47%; animation-delay: 3.3s; }
.lg-embers i:nth-child(7) { left: 55%; animation-delay: .7s; } .lg-embers i:nth-child(8) { left: 63%; animation-delay: 6.1s; }
.lg-embers i:nth-child(9) { left: 71%; animation-delay: 2.9s; } .lg-embers i:nth-child(10) { left: 79%; animation-delay: 4.8s; }
.lg-embers i:nth-child(11) { left: 87%; animation-delay: 1.7s; } .lg-embers i:nth-child(12) { left: 94%; animation-delay: 3.9s; }
@keyframes ember { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { opacity: .9; } 100% { transform: translate(40px, -105vh) scale(1.1); opacity: 0; } }

.lg-wrap { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 22px;
  width: min(440px, 100%); margin-left: auto; margin-right: max(16px, 7vw); padding: 32px 16px; }
.lg-brand { text-align: center; }
.lg-kicker { display: inline-block; font: 800 12px/1 var(--font); letter-spacing: 4px; text-transform: uppercase; color: #ffe9a8;
  padding: 6px 12px; border: 1px solid #f6c44566; border-radius: 30px; background: #0b102099; }
.lg-logo { font-family: 'Baloo 2', var(--font); font-weight: 800; font-size: clamp(46px, 11vw, 66px); line-height: .95; margin: 12px 0 8px; letter-spacing: -.5px;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe48a 38%, #f0a91f 62%, #b86a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #4a2600) drop-shadow(0 0 22px #ff9a1f66); }
.lg-logo span { display: inline-block; transform: rotate(-4deg); background: linear-gradient(180deg, #fff 0%, #9fe0ff 40%, #3b9cff 70%, #1a4fb8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px #3b9cff88); }
.lg-tag { margin: 0; color: #dfe6f8; font-size: 14px; text-shadow: 0 1px 6px #000; }
.lg-tag b { color: #fff; } .lg-tag i { color: var(--gold); font-style: normal; margin: 0 4px; }

.lg-card { position: relative; padding: 22px 20px 18px; border-radius: 20px; background: linear-gradient(180deg, #1b2440e6, #111833f0);
  border: 1px solid #ffffff1f; box-shadow: 0 0 0 1px #f6c44533, 0 24px 60px #000c, inset 0 1px 0 #ffffff14; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lg-card::before { content: ''; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ff9a1f, #ffe48a, #3b9cff, transparent); }
.lg-card.shake { animation: lgshake .45s; }
@keyframes lgshake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.lg-field { display: block; margin-bottom: 14px; }
.lg-label { display: block; font-size: 13px; font-weight: 700; color: #b9c3de; margin-bottom: 6px; }
.lg-input { display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px; background: #0a0f1ecc; border: 1px solid #2f3b62; transition: border-color .2s, box-shadow .2s; }
.lg-input:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px #f6c44533; }
.lg-input svg { width: 20px; height: 20px; fill: #7f8db3; flex: none; }
.lg-input:focus-within svg { fill: var(--gold); }
.lg-input input { flex: 1; min-width: 0; height: 50px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 600 16px var(--font); }
.lg-input input::placeholder { color: #5d6a8f; font-weight: 400; }
.lg-eye { background: transparent; padding: 6px; margin-right: -6px; border-radius: 8px; display: grid; place-items: center; }
.lg-eye.on svg { fill: var(--gold); }
.lg-err { margin: 2px 0 12px; padding: 10px 12px; border-radius: 10px; background: #3a1520; border: 1px solid #7a2a3c; color: #ffd0d4; font-weight: 600; font-size: 14px; }
.lg-go { position: relative; overflow: hidden; width: 100%; height: 56px; border-radius: 14px; margin-top: 4px;
  font: 800 20px/1 'Baloo 2', var(--font); letter-spacing: 1px; text-transform: uppercase; color: #2a1500;
  background: linear-gradient(180deg, #ffe48a 0%, #ffc23d 45%, #f08a1a 100%); box-shadow: 0 6px 0 #9a4f00, 0 10px 26px #ff8a1a55, inset 0 1px 0 #fff8;
  transition: transform .08s, box-shadow .08s, filter .2s; }
.lg-go:hover { filter: brightness(1.06); }
.lg-go:active { transform: translateY(4px); box-shadow: 0 2px 0 #9a4f00, 0 6px 16px #ff8a1a44, inset 0 1px 0 #fff8; }
.lg-go::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, #ffffffb0, transparent); animation: lgshine 3.2s ease-in-out infinite; }
@keyframes lgshine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.lg-go:disabled { cursor: wait; }
.lg-go.busy span { opacity: .55; }
.lg-go.ok { background: linear-gradient(180deg, #b8ffd0, #3ddc84 50%, #1a8a52); box-shadow: 0 6px 0 #0d5a33, 0 10px 26px #3ddc8455; }
.lg-foot { margin: 14px 0 0; text-align: center; color: #8e9abb; font-size: 13px; }
.entering .lg-wrap { transition: opacity .4s, transform .4s; opacity: 0; transform: scale(.96); }

/* điện thoại / màn dọc: ảnh dọc, khung đăng nhập nằm phần dưới tối của ảnh */
@media (max-aspect-ratio: 4/5) {
  .lg-bg { width: 100vw; background-image: url('login-art/tall.jpg'); background-position: center top; -webkit-mask-image: none; mask-image: none; }
  .lg-shade { background: linear-gradient(180deg, transparent 0%, transparent 32%, #0b102066 48%, #0b1020e6 62%, #0b1020 100%); }
  .lg-wrap { margin: 0 auto; justify-content: flex-end; padding-bottom: calc(24px + env(safe-area-inset-bottom)); padding-top: 34vh; }
}
@media (max-aspect-ratio: 4/5) and (max-height: 700px) {
  .lg-wrap { padding-top: 20vh; gap: 14px; }
  .lg-logo { font-size: 44px; margin: 8px 0 4px; }
  .lg-card { padding: 16px 16px 14px; }
  .lg-input input { height: 44px; }
  .lg-field { margin-bottom: 10px; }
  .lg-go { height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .lg-bg, .lg-embers i, .lg-go::after { animation: none !important; } }

/* =================== BỘ GIAO DIỆN CHUNG (đồng bộ trang đăng nhập) =================== */
:root { --display: 'Baloo 2', var(--font); --fire: #ff9a1f; --volt: #3b9cff; }
body.app-bg, .page-bg {
  background: radial-gradient(1px 1px at 20% 30%, #fff8, transparent), radial-gradient(1px 1px at 70% 20%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, #fff7, transparent), radial-gradient(1px 1px at 60% 80%, #fff5, transparent),
    radial-gradient(ellipse 60% 40% at 15% 0%, #ff9a1f1f, transparent), radial-gradient(ellipse 60% 40% at 90% 10%, #3b9cff22, transparent),
    linear-gradient(180deg, #0d1430, #0b1020 70%);
  background-size: 260px 260px, 340px 340px, 300px 300px, 280px 280px, 100% 100%, 100% 100%, 100% 100%; background-attachment: fixed; }
.glass { background: linear-gradient(180deg, #1b2440d9, #111833eb); border: 1px solid #ffffff1f; border-radius: 20px; position: relative;
  box-shadow: 0 0 0 1px #f6c44522, 0 18px 50px #000a, inset 0 1px 0 #ffffff14; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.glass::before { content: ''; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--fire), #ffe48a, var(--volt), transparent); }

/* nút 3D */
.go { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border-radius: 14px;
  font: 800 18px/1 var(--display); letter-spacing: .5px; color: #2a1500; cursor: pointer;
  background: linear-gradient(180deg, #ffe48a 0%, #ffc23d 45%, #f08a1a 100%); box-shadow: 0 5px 0 #9a4f00, 0 10px 22px #ff8a1a40, inset 0 1px 0 #fff8;
  transition: transform .08s, box-shadow .08s, filter .2s; }
.go:hover { filter: brightness(1.06); }
.go:active { transform: translateY(3px); box-shadow: 0 2px 0 #9a4f00, 0 5px 12px #ff8a1a33, inset 0 1px 0 #fff8; }
.go:disabled { opacity: .5; cursor: not-allowed; }
.go::after { content: ''; position: absolute; top: 0; bottom: 0; width: 35%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, #ffffff99, transparent); animation: lgshine 3.6s ease-in-out infinite; }
.go.blue { color: #fff; background: linear-gradient(180deg, #8fd0ff 0%, #4aa8ff 45%, #1f6fd6 100%); box-shadow: 0 5px 0 #0f3f86, 0 10px 22px #3b9cff40, inset 0 1px 0 #fff6; text-shadow: 0 1px 0 #0006; }
.go.blue:active { box-shadow: 0 2px 0 #0f3f86, inset 0 1px 0 #fff6; }
.go.green { color: #fff; background: linear-gradient(180deg, #8ff0b8 0%, #3ddc84 45%, #1a8a52 100%); box-shadow: 0 5px 0 #0d5a33, 0 10px 22px #3ddc8440, inset 0 1px 0 #fff6; text-shadow: 0 1px 0 #0006; }
.go.green:active { box-shadow: 0 2px 0 #0d5a33, inset 0 1px 0 #fff6; }
.go.ghosty { color: var(--ink); background: #ffffff12; border: 1px solid #ffffff26; box-shadow: 0 4px 0 #00000066; }
.go.ghosty::after { display: none; }
.go.ghosty:active { box-shadow: 0 1px 0 #00000066; }

/* chip chọn */
.chips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.chips button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: #0a0f1ecc; border: 1px solid #2f3b62;
  color: var(--mute); font-weight: 700; transition: all .15s; }
.chips button b { font: 800 20px/1 var(--display); color: var(--ink); }
.chips button small { font-size: 12px; }
.chips button.on { border-color: var(--gold); background: linear-gradient(180deg, #3a2e12, #1c1708); color: #ffe9a8; box-shadow: 0 0 0 2px #f6c44544, 0 0 18px #f6c44533; }
.chips button.on b { color: var(--gold); }
.chips.small button { padding: 9px 4px; font-size: 14px; flex-direction: row; justify-content: center; }

/* =================== SẢNH =================== */
.lobby2 { position: relative; min-height: 100dvh; max-width: 1080px; margin: 0 auto; padding: 14px 16px calc(28px + env(safe-area-inset-bottom)); }
.lb-bg { position: fixed; inset: 0 0 auto 0; height: 62vh; z-index: -1; background: url('login-art/tall.jpg') center 30% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000a 0%, #0006 55%, transparent 100%); mask-image: linear-gradient(180deg, #000a 0%, #0006 55%, transparent 100%); }
@media (min-aspect-ratio: 4/5) { .lb-bg { background-image: url('login-art/wide.jpg'); background-position: left 40%; height: 70vh; } }
.lb-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lb-logo { font: 800 26px/1 var(--display); background: linear-gradient(180deg, #fffbe6, #ffe48a 40%, #f0a91f 70%, #b86a00); -webkit-background-clip: text; background-clip: text;
  color: transparent; filter: drop-shadow(0 2px 0 #4a2600); }
.lb-logo span { background: linear-gradient(180deg, #fff, #9fe0ff 40%, #3b9cff 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lb-user { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 30px; background: #0b1020b3; border: 1px solid #ffffff1f; font-size: 14px; min-width: 0; }
.lb-user b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.lb-user a { color: var(--mute); font-size: 12px; white-space: nowrap; }
.lb-ava { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 15px var(--display); color: #fff; flex: none;
  background: radial-gradient(circle at 35% 30%, #6fb6ff, #2d5fb8); border: 2px solid #ffffff40; }
.lb-hero { text-align: center; padding: clamp(28px, 10vh, 90px) 0 18px; }
.lb-kicker { display: inline-block; margin: 0; font: 800 11px/1 var(--font); letter-spacing: 4px; text-transform: uppercase; color: #ffe9a8;
  padding: 6px 12px; border: 1px solid #f6c44566; border-radius: 30px; background: #0b1020b3; }
.lb-hello { font: 800 clamp(30px, 8vw, 50px)/1.05 var(--display); margin: 12px 0 6px; color: #fff; text-shadow: 0 3px 0 #0008, 0 0 24px #000; }
.lb-hello span { color: var(--gold); }
.lb-sub { margin: 0 auto; max-width: 440px; color: #dfe6f8; font-size: 15px; text-shadow: 0 1px 8px #000; }
.lb-setup { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 16px; margin: 6px auto 18px; max-width: 760px; }
.lb-setup > label > span, .lb-lp > span { display: block; font-size: 13px; font-weight: 700; color: #b9c3de; margin-bottom: 6px; }
@media (min-width: 720px) { .lb-setup { grid-template-columns: 1fr 1.2fr; align-items: end; } }

.lb-modes { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .lb-modes { grid-template-columns: repeat(3, 1fr); } }
.mode { border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #172042, #10162f); border: 1px solid #ffffff1f;
  box-shadow: 0 18px 40px #0009; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.mode:hover { transform: translateY(-3px); box-shadow: 0 24px 50px #000b, 0 0 0 1px #f6c44544; }
.mode-art { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
.mode-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, #10162f 100%); }
.mode-bot .mode-art { background-image: url('ui-art/mode-bot.jpg'); }
.mode-online .mode-art { background-image: url('ui-art/mode-online.jpg'); }
.mode-local .mode-art { background-image: url('ui-art/mode-local.jpg'); }
.mode-tag { position: absolute; left: 14px; bottom: 10px; z-index: 1; font: 800 22px/1 var(--display); color: #fff; text-shadow: 0 2px 0 #000, 0 0 16px #000; }
.mode-body { padding: 6px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mode-body p { margin: 0; color: #b9c3de; font-size: 14px; }
.mode-body .go { margin-top: auto; }
.mode-bot { border-color: #f6c44555; box-shadow: 0 18px 40px #0009, 0 0 30px #f6c44518; }
.lb-join { display: grid; grid-template-columns: 1fr 96px; gap: 8px; }
.lb-join .inp { text-align: center; font: 800 20px var(--display); letter-spacing: 6px; height: 52px; }
.lb-join .go { height: 52px; }
.mode .inp { background: #0a0f1ecc; border-color: #2f3b62; height: 48px; }
.lb-links { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
@media (min-width: 720px) { .lb-links { grid-template-columns: 1fr 1fr; } }
.lb-link { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, #172042, #10162f); border: 1px solid #ffffff1f; transition: border-color .2s, transform .2s; }
.lb-link:hover { border-color: var(--gold); transform: translateY(-2px); }
.lb-link b { display: block; font: 800 19px/1.1 var(--display); }
.lb-link small { color: var(--mute); font-size: 13px; }
.lb-link > i { margin-left: auto; font-style: normal; font-size: 28px; color: var(--gold); }
.lb-fan { display: flex; flex: none; width: 74px; height: 52px; position: relative; }
.lb-fan img { position: absolute; width: 36px; height: 50px; object-fit: cover; border-radius: 5px; border: 2px solid #ffe08a; box-shadow: 0 4px 8px #0008; }
.lb-fan img:nth-child(1) { left: 0; transform: rotate(-12deg); } .lb-fan img:nth-child(2) { left: 19px; z-index: 1; } .lb-fan img:nth-child(3) { left: 38px; transform: rotate(12deg); }
.lb-ico { width: 52px; height: 52px; display: grid; place-items: center; font-size: 28px; border-radius: 14px; background: #ffffff10; flex: none; }

/* màn chờ */
.wait-card { max-width: 420px; margin: 12vh auto 0; padding: 28px 22px 22px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.wait-card h2 { margin: 0; font: 800 28px/1.1 var(--display); color: #fff; }
.wait-card p { margin: 0; }
.radar { position: relative; width: 110px; height: 110px; margin: 0 auto 4px; display: grid; place-items: center; }
.radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--volt); opacity: 0; animation: radar 2.4s ease-out infinite; }
.radar span:nth-child(2) { animation-delay: .8s; } .radar span:nth-child(3) { animation-delay: 1.6s; }
.radar b { font-size: 38px; filter: drop-shadow(0 0 12px var(--volt)); }
@keyframes radar { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.2); opacity: 0; } }
.code-boxes { display: flex; justify-content: center; gap: 10px; margin: 6px 0; }
.code-boxes b { width: 62px; height: 78px; display: grid; place-items: center; border-radius: 14px; font: 800 44px/1 var(--display); color: var(--gold);
  background: #0a0f1e; border: 2px solid #f6c44566; box-shadow: inset 0 2px 8px #000a, 0 0 18px #f6c44522; }
.wait-note { color: #b9c3de; font-size: 14px; }

/* =================== TRANG PHỤ (bộ sưu tập, luật) =================== */
.page2 { max-width: 1120px; margin: 0 auto; padding: 0 16px 60px; }
.hero { position: relative; margin: 0 -16px 18px; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 16px 22px;
  background-size: cover; background-position: center; overflow: hidden; }
@media (min-width: 1152px) { .hero { margin: 16px 0 22px; border-radius: 24px; } }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0b102033 0%, #0b102066 45%, #0b1020 100%); }
.hero > * { position: relative; z-index: 1; }
.hero-gallery { background-image: url('ui-art/gallery-hero.jpg'); min-height: 280px; }
.hero-rules { background-image: url('ui-art/rules-hero.jpg'); background-position: 70% 40%; min-height: 280px; }
.back { position: absolute; top: 14px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 30px;
  background: #0b1020b3; border: 1px solid #ffffff26; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; backdrop-filter: blur(6px); }
.back:hover { border-color: var(--gold); }
.hero h1 { margin: 0; font: 800 clamp(36px, 8vw, 58px)/1 var(--display); background: linear-gradient(180deg, #fffbe6, #ffe48a 40%, #f0a91f 75%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #4a2600) drop-shadow(0 0 20px #000); }
.hero p { margin: 8px 0 0; color: #dfe6f8; max-width: 560px; text-shadow: 0 1px 8px #000; }
.stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.stats span { padding: 6px 12px; border-radius: 30px; background: #0b1020cc; border: 1px solid #ffffff26; font-size: 13px; font-weight: 700; }
.stats b { color: var(--gold); font-family: var(--display); font-size: 16px; }
.filterbar { position: sticky; top: 0; z-index: 5; margin: 0 -16px; padding: 10px 16px; background: #0b1020e6; backdrop-filter: blur(10px); border-bottom: 1px solid #ffffff14;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.filterbar::-webkit-scrollbar { display: none; }
.filterbar .chip { flex: none; padding: 8px 14px; font-size: 14px; }
.gallery2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 22px; justify-items: center; margin-top: 18px; }
.gallery2 .card { width: 100%; max-width: 300px; cursor: zoom-in; transition: transform .2s; }
.gallery2 .card:hover { transform: translateY(-6px) rotate(-1deg); }
.zoom { position: fixed; inset: 0; z-index: 50; background: #000c; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade .2s; cursor: zoom-out; }
.zoom .card { width: min(360px, 88vw); animation: zoomin .3s cubic-bezier(.2,1.2,.4,1); }
@keyframes zoomin { from { transform: scale(.6) rotateY(30deg); opacity: 0; } }

.rules2 { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; line-height: 1.6; }
.rules2 section { padding: 18px 18px 14px; }
.rules2 h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 800 24px/1.1 var(--display); color: #fff; }
.rules2 h2 i { font-style: normal; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #ffffff10; font-size: 22px; flex: none; }
.rules2 p { margin: 6px 0; color: #dfe6f8; }
.rules2 b { color: #fff; }
.rules2 table { border-collapse: collapse; width: 100%; font-size: 14px; margin-top: 6px; }
.rules2 td, .rules2 th { border-bottom: 1px solid #ffffff14; padding: 9px 6px; text-align: left; vertical-align: top; }
.rules2 th { color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.rules2 tr:last-child td { border-bottom: 0; }
.steps { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: st; display: flex; flex-direction: column; gap: 10px; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; color: #dfe6f8; }
.steps li::before { content: counter(st); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 18px var(--display); color: #2a1500;
  background: linear-gradient(180deg, #ffe48a, #f08a1a); box-shadow: 0 3px 0 #9a4f00; }
.steps small { display: block; color: var(--mute); font-size: 13px; }
.tribute-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.tribute-row div { text-align: center; padding: 12px 6px; border-radius: 14px; background: #0a0f1ecc; border: 1px solid #2f3b62; }
.tribute-row b { display: block; font: 800 26px/1 var(--display); color: var(--gold); }
.tribute-row small { color: var(--mute); font-size: 12px; }
.lvl { display: grid; gap: 8px; margin-top: 6px; }
.lvl div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #0a0f1ecc; border: 1px solid #2f3b62; }
.lvl div b { font: 800 17px var(--display); }

/* =================== BÀN ĐẤU: dùng font hiển thị cho số và cờ =================== */
.lp, .turnflag, .dmgpop, .turn-banner span, .callout, .ko-stamp, .big-name, .pv-num, .coin-res, .win h2, .sheet h3 { font-family: var(--display); }
.sheet { background: linear-gradient(180deg, #1b2440, #111833); border-color: #ffffff1f; }
.sheet::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 3px; background: #ffffff33; margin: -6px auto 10px; }
.win { background: radial-gradient(circle, #2a2150f0, #0b1020f8); }
.win h2 { font-size: 46px; background: linear-gradient(180deg, #fffbe6, #ffe48a 40%, #f0a91f 75%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #4a2600); }
.lb-join .inp::placeholder { letter-spacing: 0; font: 600 15px var(--font); }

/* =================== BÀN ĐẤU v2 =================== */
/* nền ngoài bàn: tranh đấu trường mờ tối (lấp 2 bên trên máy tính) */
.game::before { background:
    linear-gradient(180deg, #0b1020d0, #0b1020e8),
    url('login-art/wide.jpg') center / cover no-repeat; filter: blur(2px); }
@media (min-width: 760px) { .game { max-width: 760px; } }

/* thảm đấu = tranh sàn đá rune */
.mat { background:
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, #05081299 100%),
    linear-gradient(180deg, #0b102033, #0b102011 50%, #0b102033),
    url('ui-art/mat.jpg') center / cover no-repeat;
  border: 2px solid #c9a24a66; box-shadow: inset 0 0 0 4px #0b1020aa, inset 0 0 40px #000c, 0 0 0 1px #000, 0 24px 50px #000b, 0 0 40px #f6c44514; }
.mat::before { display: none; }

/* ô trống: lá úp mờ + vòng rune */
.zone.empty { border: 2px solid #ffffff1a; background: #05081266; box-shadow: inset 0 0 22px #000c; overflow: hidden; }
.zone.empty::before { content: ''; position: absolute; inset: 6px; border-radius: 8px; background: url('ui-art/card-back.jpg') center / 112% no-repeat; opacity: .14; }
.half-me .zone.empty::after { display: none; }
.slot-rune { position: relative; border-color: #ffffff26; }
.zone.empty.cta { border-color: #f6c44599; cursor: pointer; animation: ctaglow 1.6s ease-in-out infinite; }
.zone.empty.cta::before { opacity: .28; }
.slot-cta { position: absolute; font: 800 15px/1.1 var(--display); color: #ffe48a; text-align: center; text-shadow: 0 2px 0 #000, 0 0 12px #f6c44599; }
@keyframes ctaglow { 50% { box-shadow: inset 0 0 22px #000c, 0 0 0 2px #f6c44566, 0 0 20px #f6c44544; } }

/* thanh người chơi kiểu bảng tên */
.pbar { padding: 8px 12px 8px 8px; border-radius: 16px; border: 1px solid #ffffff1f; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: linear-gradient(90deg, #2d5fb855, #111833e6 45%); box-shadow: 0 8px 22px #0008, inset 0 1px 0 #ffffff14; }
.pbar.opp { background: linear-gradient(90deg, #b8323b55, #111833e6 45%); }
.pbar.active { border-color: #ffe48a; box-shadow: 0 0 0 1px #f6c44588, 0 0 26px #f6c44544, 0 8px 22px #0008; }
.pbar.opp.active { border-color: #ff8a8f; box-shadow: 0 0 0 1px #ff5a5f88, 0 0 26px #ff5a5f44, 0 8px 22px #0008; }
.avatar { width: 44px; height: 44px; font: 800 20px var(--display); border: 2px solid #ffffff66; box-shadow: 0 0 0 3px #0b1020, 0 0 16px #3b9cff66; }
.pbar.opp .avatar { box-shadow: 0 0 0 3px #0b1020, 0 0 16px #ff5a5f66; }
.pbar .nm { font: 800 16px/1.15 var(--display); }
.lpbar { height: 10px; border-radius: 6px; box-shadow: inset 0 1px 3px #000c, 0 0 0 1px #ffffff14; }
.lpbar i { box-shadow: 0 0 10px #3ddc8488; }
.lp { font-size: 30px; line-height: 1; color: #fff; text-shadow: 0 2px 0 #000a; }
.lp small { font: 700 10px var(--font); letter-spacing: 1px; color: #ffe48a; vertical-align: 6px; }
.lp.drop { color: #ff8a8f; } .lp.gain { color: #7cf0a8; }
.handfan { display: inline-flex; vertical-align: -3px; margin-right: 4px; }
.handfan i { width: 11px; height: 15px; border-radius: 2px; margin-right: -4px; border: 1px solid #c9a24a; box-shadow: 0 1px 2px #000a;
  background: url('ui-art/card-back.jpg') center / 118% no-repeat; }
.handfan i:nth-child(odd) { transform: rotate(-6deg); } .handfan i:nth-child(even) { transform: rotate(5deg); }

/* thanh giữa: nằm trên vòng rune */
.midbar { gap: 6px; }
.turnflag { font-size: 14px; padding: 7px 14px; border-radius: 30px; box-shadow: 0 4px 0 #0007; }
.turnflag.mine { background: linear-gradient(180deg, #ffe48a, #f0a91f); box-shadow: 0 4px 0 #9a4f00, 0 0 18px #f6c44566; }
.turnflag.bot { background: linear-gradient(180deg, #ff9a9e, #d6343f); box-shadow: 0 4px 0 #7a0d18, 0 0 18px #ff5a5f55; }
.lastlog { background: #0b1020cc; box-shadow: 0 0 0 4px #0b1020cc, 0 0 0 5px #ffffff14; color: #e6ecfa; }
.iconbtn { border-radius: 50%; width: 38px; height: 38px; background: #0b1020d9; border-color: #ffffff2a; box-shadow: 0 3px 0 #0008; }

/* lá trên sân: dải tên theo màu hệ */
.fcard { border-width: 2px; border-radius: 10px; }
.fcard .f-info { background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 35%, #000c) 0%, #000e 70%); border-top: 1px solid color-mix(in srgb, var(--tc) 60%, transparent); }
.fcard .f-name { font: 800 13px/1.15 var(--display); text-shadow: 0 1px 0 #000; }
.f-hp { font-family: var(--display); font-size: 13px; }
.f-badge { font-family: var(--display); background: linear-gradient(180deg, #ffe48a, #f0a91f); color: #2a1500; padding: 1px 6px; box-shadow: 0 2px 0 #9a4f00; }

/* nút hành động */
.actions { gap: 10px; }
.actions .go { height: 58px; font-size: 18px; }
.actions .go svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
#btnEnd:disabled { color: #8e9abb; background: #ffffff10; box-shadow: 0 4px 0 #0008; text-shadow: none; }
#btnEnd:disabled::after { display: none; }
#btnEnd.nudge { animation: gonudge 1.3s ease-in-out infinite; }
@keyframes gonudge { 50% { box-shadow: 0 5px 0 #0f3f86, 0 0 0 4px #9fe0ff66, 0 0 28px #3b9cffaa; } }
.hint { font-size: 12.5px; color: #c9d2ea; }
.hint b { color: #ffe48a; }

/* bảng bật lên */
.sheet { border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px #000a; position: relative; }
.sheet h3 { font-size: 22px; margin: 0 40px 12px 0; }
.sheet-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: #ffffff12; border: 1px solid #ffffff26; color: var(--ink); font-size: 16px; z-index: 2; }
.sheet .go { margin-top: 6px; }
.sheet .row .go { margin-top: 0; }
.linkbtn { background: transparent; color: #b9c3de; font-weight: 700; font-size: 14px; padding: 10px 6px; border-radius: 10px; }
.linkbtn:hover { color: #fff; background: #ffffff0d; }
.linkbtn.danger { color: #ff9aa0; }
.linkbtn.wide { display: block; width: 100%; margin-top: 8px; text-align: center; }
.sheet-links { display: flex; justify-content: space-between; margin-top: 6px; }
.go.danger { color: #ffb3b8; border-color: #7a2a3c; background: #3a152066; }
.mon-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; padding-right: 40px; }
.mon-thumb { width: 74px; height: 74px; border-radius: 14px; background-size: cover; background-position: center; flex: none; border: 2px solid var(--tc);
  box-shadow: 0 0 18px color-mix(in srgb, var(--tc) 55%, transparent); }
.mon-info { flex: 1; min-width: 0; }
.mon-info h3 { margin: 0 0 6px; }
.mon-hp { display: flex; align-items: center; gap: 8px; font-family: var(--display); }
.mon-hp .f-hpbar { height: 8px; }
.mon-hp b { font-size: 18px; } .mon-hp small { color: var(--mute); font-size: 12px; }
.mon-en { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 12px; color: var(--mute); }
.atk-btn { grid-template-columns: auto 1fr auto; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, #0a0f1e) 0%, #0a0f1e 55%);
  border: 1px solid #ffffff1f; border-left: 4px solid var(--tc); box-shadow: 0 4px 0 #0007; transition: transform .1s; }
.atk-btn:not(:disabled):active { transform: translateY(2px); box-shadow: 0 2px 0 #0007; }
.atk-btn b { font: 800 18px/1.1 var(--display); }
.atk-btn .d { font: 800 26px/1 var(--display); color: #ffe48a; text-shadow: 0 2px 0 #000; }
.atk-btn .why { font-size: 12.5px; color: #c9d2ea; }
.atk-btn:disabled { filter: grayscale(.7); opacity: .55; }
.guard-go { flex-direction: column; gap: 2px; height: auto; padding: 10px; color: #cfe6ff; border-color: #3d6fa8; background: linear-gradient(180deg, #1d3354, #16263f); }
.guard-go small { font: 600 12px var(--font); color: #9fc4ec; }
.result-card .card { margin-bottom: 10px; animation: zoomin .35s cubic-bezier(.2,1.2,.4,1); }
.warn-pill { text-align: center; margin: 4px 0 8px; padding: 10px 12px; border-radius: 12px; background: #3a1520; border: 1px solid #7a2a3c; color: #ffd0d4; font-weight: 600; font-size: 14px; }
.mini { border-radius: 12px; box-shadow: 0 4px 10px #0008; transition: transform .12s; }
.mini:active { transform: scale(.96); }
.loglist li { padding: 7px 10px; border-radius: 8px; border-bottom: 0; }
.loglist li:nth-child(odd) { background: #ffffff07; }
.loglist li.turn { background: transparent; font-family: var(--display); font-size: 15px; }

/* camera: góc ngắm vàng */
.cam-wrap { border-radius: 20px; border: 1px solid #ffffff26; box-shadow: 0 10px 30px #000a; }
.cam-guide { border: 0; box-shadow: 0 0 0 999px #000a; border-radius: 12px; }
.cam-guide i { position: absolute; width: 30px; height: 30px; border: 4px solid #ffe48a; filter: drop-shadow(0 0 6px #f6c445); }
.cam-guide i:nth-child(1) { left: -4px; top: -4px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.cam-guide i:nth-child(2) { right: -4px; top: -4px; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.cam-guide i:nth-child(3) { left: -4px; bottom: -4px; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
.cam-guide i:nth-child(4) { right: -4px; bottom: -4px; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.scan-idle { position: absolute; left: 6%; right: 6%; height: 2px; top: 10%; background: linear-gradient(90deg, transparent, #9fe0ff, transparent);
  box-shadow: 0 0 12px #3b9cff; animation: scan 2.2s ease-in-out infinite alternate; opacity: .8; }
@keyframes scan { to { top: 88%; } }

/* màn thắng / thua */
.win { background: #0b1020; padding: 0; }
.win-art { position: absolute; inset: 0; background: url('ui-art/victory.jpg') center / cover no-repeat; animation: lgzoom 18s ease-in-out infinite alternate; }
.win-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, #0b102066 0%, #0b1020e6 75%); }
.win.lose .win-art { filter: grayscale(.85) brightness(.55) hue-rotate(200deg); }
.win-box { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 20px; width: min(420px, 92vw);
  border-radius: 24px; background: linear-gradient(180deg, #1b2440cc, #111833e6); border: 1px solid #ffffff26; backdrop-filter: blur(8px); box-shadow: 0 24px 60px #000c; }
.win .trophy { font-size: 72px; filter: drop-shadow(0 0 24px #f6c445aa); }
.win h2 { font-size: clamp(36px, 10vw, 50px); text-align: center; line-height: 1; }
.win-sub { margin: 0; color: #dfe6f8; }
.win-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.win-stats span { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 12px; background: #0a0f1ecc; border: 1px solid #2f3b62; font-size: 11px; color: var(--mute); text-align: center; }
.win-stats b { font: 800 24px/1 var(--display); color: #ffe48a; margin-bottom: 3px; }
.win .row { width: 100%; }
/* lá trên sân: giới hạn cỡ trên màn lớn, chữ co giãn theo cỡ lá */
.zone { width: min(calc((100cqw - 20px) / 3), calc(100cqh * 63 / 88), 190px); container-type: inline-size; }
.zones { gap: clamp(10px, 3cqw, 26px); }
.fcard .f-name { font-size: clamp(11px, 11cqi, 16px); }
.f-hp { font-size: clamp(11px, 10cqi, 15px); }
.f-info { padding: 4px clamp(5px, 5cqi, 9px) 5px; }
.pip.on { width: clamp(6px, 5cqi, 9px); height: clamp(6px, 5cqi, 9px); }
.f-status { font-size: clamp(13px, 11cqi, 18px); }
/* màn thua: vẫn thấy tranh, tông lạnh */
.win.lose .win-art { filter: grayscale(.6) brightness(.8) hue-rotate(190deg); }
.win.lose .win-art::after { background: radial-gradient(ellipse at 50% 60%, #0b102055 0%, #0b1020cc 80%); }

/* =================== BÀI TRÊN TAY =================== */
.hand { display: flex; gap: 6px; overflow-x: auto; overflow-y: visible; padding: 8px 4px 4px; margin: -2px -4px 0; scrollbar-width: none; min-height: 88px; align-items: flex-end; }
.hand::-webkit-scrollbar { display: none; }
.hcard { position: relative; flex: none; width: 58px; height: 80px; padding: 0; border-radius: 9px; overflow: hidden; border: 2px solid var(--tc, #888);
  background: #0a0f1e; box-shadow: 0 4px 10px #0009; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; opacity: .62; filter: saturate(.7); }
.hcard.ok { opacity: 1; filter: none; box-shadow: 0 0 0 1px #ffe48a, 0 0 14px #f6c44566, 0 4px 10px #0009; }
.hcard.ok:hover, .hcard.ok:active { transform: translateY(-6px); }
.h-art { flex: 1; background-size: cover; background-position: center; }
.h-name { font: 800 9.5px/1.1 var(--display); color: #fff; padding: 2px 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #000c; text-align: left; }
.h-tag { font: 800 10px/1 var(--display); color: #ffe48a; padding: 1px 3px 3px; background: #000c; text-align: left; }
.h-tag small { font-size: 7px; margin-left: 1px; color: var(--mute); }
.h-trib { position: absolute; top: 2px; right: 2px; font: 800 10px/1 var(--display); background: #b3001b; color: #fff; padding: 2px 4px; border-radius: 5px; }
.h-rule { position: absolute; top: 2px; left: 2px; font-size: 10px; color: #ffe48a; text-shadow: 0 0 4px #000, 0 0 6px #f6c445; }
.hcard.drawn { animation: drawin .7s cubic-bezier(.2,1.3,.4,1); }
@keyframes drawin { 0% { transform: translateY(-120px) rotate(-20deg) scale(1.3); opacity: 0; } 60% { opacity: 1; box-shadow: 0 0 24px #9fe0ff; } }
.hand-empty { margin: auto; color: var(--mute); font-size: 13px; }
.t-energy { --tc: #8fc8f5; } .t-trainer { --tc: #b9c2cf; }
/* bộ bài đầu trận */
.deck-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); margin-top: 10px; }
.deck-grid .mini { cursor: default; }
.deck-who { margin: 16px 0 0; font: 800 18px var(--display); color: var(--gold); }
.in-hand { position: absolute; top: 5px; left: 5px; font-size: 10px; background: linear-gradient(180deg, #ffe48a, #f0a91f); color: #2a1500; padding: 2px 6px; border-radius: 6px; }
/* tóm tắt lượt đối thủ */
.recap { position: absolute; left: 50%; top: 74px; transform: translateX(-50%); z-index: 30; width: min(92%, 520px); padding: 10px 14px 8px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, #2a1520f0, #1b1030f2); border: 1px solid #ff8a8f66; box-shadow: 0 12px 30px #000b, 0 0 20px #ff5a5f33; animation: up .25s ease-out; transition: opacity .5s, transform .5s; }
.recap.out { opacity: 0; transform: translateX(-50%) translateY(-10px); }
.recap b { font: 800 15px var(--display); color: #ffd1d3; }
.recap ul { margin: 4px 0 2px; padding-left: 18px; font-size: 13px; line-height: 1.45; color: #f2e6ea; }
.recap small { color: #b9a0a8; font-size: 11px; }
.recap { animation: recapin .35s cubic-bezier(.2,1.2,.4,1); }
@keyframes recapin { from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.96); } }
.netstatus { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 30px;
  background: #2a2010f2; border: 1px solid #f6c44588; color: #ffe9a8; font-weight: 700; font-size: 14px; box-shadow: 0 10px 30px #000a; }
.netstatus .spinner { width: 16px; height: 16px; border-width: 3px; }

/* =================== HUY HIỆU =================== */
.hero-achv { background-image: url('ui-art/victory.jpg'); background-position: center 35%; min-height: 260px; }
.achv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 760px) { .achv-stats { grid-template-columns: repeat(6, 1fr); } }
.tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 16px; text-align: center;
  background: linear-gradient(180deg, #1b2440d9, #111833eb); border: 1px solid #ffffff1f; }
.tile i { font-style: normal; font-size: 22px; }
.tile b { font: 800 28px/1 var(--display); color: #ffe48a; }
.tile span { font-size: 12px; color: var(--mute); }
.achv-levels { padding: 16px 18px; margin-bottom: 18px; }
.achv-levels h3 { margin: 0 0 10px; font: 800 20px var(--display); }
.lvrow { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 14px; }
.lvrow b { font-size: 13px; color: #dfe6f8; white-space: nowrap; }
.lvbar { height: 10px; border-radius: 6px; background: #0a0f1e; overflow: hidden; box-shadow: inset 0 1px 3px #000a; }
.lvbar i { display: block; height: 100%; background: linear-gradient(90deg, #3ddc84, #a6f07a); }
.achv-h { font: 800 26px var(--display); margin: 8px 0 12px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 10px 12px; border-radius: 18px;
  background: #0f1530; border: 1px solid #ffffff14; filter: grayscale(1); opacity: .55; }
.badge i { font-style: normal; font-size: 40px; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: #ffffff0d; border: 2px solid #ffffff1a; }
.badge b { font: 800 16px/1.15 var(--display); }
.badge span { font-size: 12px; color: var(--mute); }
.badge small { font-size: 11px; color: #ffe48a; }
.badge.on { filter: none; opacity: 1; background: linear-gradient(180deg, #2a2340, #151c30); border-color: #f6c44566; box-shadow: 0 0 22px #f6c44522; }
.badge.on i { background: radial-gradient(circle at 35% 30%, #fff3b0, #e2a92a 60%, #8a5a00); border-color: #ffe48a; box-shadow: 0 0 18px #f6c44566; }
/* huy hiệu mới trên màn thắng */
.new-badges { width: 100%; padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #3a2e12cc, #1c1708cc); border: 1px solid #f6c44588; text-align: center; animation: zoomin .5s .3s both; }
.new-badges b { font: 800 15px var(--display); color: #ffe48a; }
.new-badges div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.new-badges span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 20px; background: #0b1020cc; font-size: 13px; font-weight: 700; }
.new-badges i { font-style: normal; }
.scan-bonus { color: #9fe0ff; }
@media (min-width: 900px) { .lb-links { grid-template-columns: 1fr 1fr 1fr; } }
html { background: #0b1020; }
.lvrow { grid-template-columns: minmax(130px, 170px) 1fr auto; }