@font-face { font-family: "Baloo 2"; src: url(assets/fonts/Baloo2.ttf) format("truetype"); font-weight: 400 800; font-display: swap; }
:root {
  --gold: #e3bd62;
  --gold-d: #7a5f22;
  --bg: #0d0a14;
  --ink: #f4ecd8;
  --muted: #cdbfa0;
  --brown: #e8dfcf;
  --hp: #3fcf5a;
  --hp-low: #e0443a;
  --card-w: 120px;
  --card-h: 150px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; color: var(--ink); font-family: "Baloo 2", system-ui, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
button, input { font-family: inherit; }
#stage {
  position: absolute; left: 0; top: 0; width: 540px; height: 960px; transform-origin: 0 0;
  background: var(--bg) url(assets/bg.jpg) center/cover; overflow: hidden; overflow: clip; user-select: none; -webkit-user-select: none;
}
.hidden { display: none !important; }
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: flex; flex-direction: column; }
#screen-game.active { display: block; }

/* ---- Đăng nhập / sảnh / kết quả ---- */
#screen-auth, #screen-lobby, #screen-result { background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .55)), url(assets/home.jpg) center/cover; padding: 16px 24px; }
.logo-wrap { display: flex; justify-content: center; margin-top: 18px; }
.logo-wrap.small { margin-top: 0; }
.logo-img { width: 470px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .7)); }
.logo-wrap.small .logo-img { width: 400px; }
.menu { margin-top: auto; padding-bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wbtn {
  width: 400px; min-height: 84px; border: 0; padding: 0 28px 4px; background: transparent center/100% 100% no-repeat;
  color: #f6e7bd; font-size: 30px; font-weight: 800; letter-spacing: 1px; cursor: pointer; transition: transform .08s;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .75), 0 0 8px rgba(0, 0, 0, .8);
}
.wbtn.orange { background-image: url(assets/btn_orange.png); }
.wbtn.blue { background-image: url(assets/btn_blue.png); }
.wbtn.green { background-image: url(assets/btn_green.png); }
.wbtn.grey { background-image: url(assets/btn_grey.png); }
.wbtn.small { width: 300px; min-height: 66px; font-size: 26px; }
.wbtn:active { transform: scale(.96); filter: brightness(.9); }
.contact { align-self: center; color: var(--muted); font-size: 15px; text-decoration: none; margin-bottom: 4px; }
.contact:active { color: var(--gold); }
.top-row { display: flex; justify-content: space-between; align-items: center; }
.top-actions { display: flex; gap: 6px; }
.chip { background: rgba(0, 0, 0, .6); border: 1px solid var(--gold-d); border-radius: 20px; padding: 4px 16px; font-size: 20px; font-weight: 700; color: var(--gold); }
.round-btn { width: 60px; height: 60px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .08s; position: relative; }
.round-btn img { width: 100%; height: 100%; object-fit: contain; }
.round-btn.small { width: 38px; height: 38px; }
.round-btn:active { transform: scale(.9); }
.lang-btn { background: url(assets/rb_blank.png) center/contain no-repeat; font-size: 18px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; }
.auth-lang { position: absolute; top: 16px; right: 16px; z-index: 5; }
.code-box { align-self: center; margin-top: 10px; background: rgba(0, 0, 0, .55); border: 1px solid var(--gold-d); border-radius: 10px; padding: 4px 18px; font-size: 20px; }
.code-box b { color: var(--gold); letter-spacing: 3px; }

/* panel (khung gỗ + giấy) */
.panel {
  position: relative; background: url(assets/panel.png) center/100% 100% no-repeat; color: var(--brown);
  padding: 72px 56px 48px; text-align: center;
}
.panel p, .panel h3 { margin: 0; }
.ribbon {
  position: absolute; left: 50%; top: -22px; transform: translateX(-50%); width: 340px; height: 70px;
  background: url(assets/ribbon.png) center/100% 100% no-repeat; display: flex; align-items: center; justify-content: center;
}
.ribbon span { color: #fbe7b0; font-size: 26px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 2px 0 #3a0710; padding-bottom: 6px; }
.muted { color: #b9a98a; font-size: 18px; margin: 10px 0; }
.big { font-size: 30px; font-weight: 800; margin: 8px 0; }
.err { color: #ff8a80; min-height: 22px; font-weight: 700; margin: 6px 0 0; }
.link { background: none; border: 0; color: var(--gold); text-decoration: underline; font-size: 18px; cursor: pointer; margin-top: 4px; }
.panel input, .code-input {
  width: 100%; height: 52px; border-radius: 8px; border: 1px solid #8a6d2f; background: rgba(8, 6, 14, .9); color: var(--ink);
  font-size: 22px; padding: 0 14px; text-align: center; outline: none; margin: 6px 0;
}
.auth-form { position: absolute; left: 50%; top: 250px; transform: translateX(-50%); width: 470px; z-index: 6; }
.overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); z-index: 40; display: flex; align-items: center; justify-content: center; padding: 0 36px; }
.overlay > .panel { width: 100%; animation: popupIn .3s cubic-bezier(.2, 1.4, .4, 1); }
.row-btns { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 8px; }
.spinner { width: 54px; height: 54px; margin: 14px auto; border: 6px solid rgba(227, 189, 98, .2); border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; }
.guide-body { max-height: 440px; overflow: auto; text-align: left; font-size: 18px; line-height: 1.3; margin-bottom: 8px; }
.guide-body p { margin: 7px 0; }
.toast { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); background: rgba(0, 0, 0, .85); border: 1px solid var(--gold-d); border-radius: 10px; padding: 8px 18px; font-size: 18px; z-index: 60; max-width: 480px; text-align: center; }
@keyframes popupIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* kết quả */
.result-hero { position: relative; text-align: center; margin-top: 54px; }
.rays { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 215, 120, .22) 0 10deg, transparent 10deg 20deg); animation: spin 18s linear infinite;
  mask: radial-gradient(circle, #000 20%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); }
.result-banner { position: relative; width: 480px; height: 150px; margin: 0 auto; background: url(assets/ribbon.png) center/100% 100% no-repeat; display: flex; align-items: center; justify-content: center; }
.result-title { font-size: 64px; font-weight: 900; color: #fff; text-shadow: 0 4px 0 #5a0d0d, 0 0 14px rgba(255, 220, 120, .8); letter-spacing: 3px; padding-bottom: 10px; }
.result-sub { position: relative; margin-top: 14px; font-size: 22px; color: var(--ink); text-shadow: 0 2px 3px #000; }
#screen-result.lose .result-title { color: #d8d0d0; text-shadow: 0 4px 0 #2b2b2b; }
#screen-result.lose .rays { opacity: .25; }
.stats-wrap { margin: 26px 0 0; padding: 50px 54px 40px; flex: 1; min-height: 0; overflow: auto; }
.stats { width: 100%; border-collapse: collapse; font-size: 20px; font-weight: 600; }
.stats th, .stats td { padding: 3px 6px; border-bottom: 1px solid rgba(227, 189, 98, .22); text-align: center; line-height: 1.25; }
.stats th { font-weight: 800; color: var(--gold); }
.stats td:first-child, .stats th:first-child { text-align: left; }
.stats td.hi { color: #ffd36a; font-weight: 800; }
.result-menu { display: flex; justify-content: center; padding: 14px 0 20px; }

/* ---- Trận ---- */
#screen-game { padding: 0; }
.top { position: absolute; left: 8px; right: 8px; top: 6px; height: 46px; display: flex; align-items: flex-start; justify-content: space-between; font-size: 13px; z-index: 3; }
.top-l { text-align: left; color: var(--muted); line-height: 1.25; text-shadow: 0 1px 2px #000; background: rgba(0, 0, 0, .55); border: 1px solid rgba(227, 189, 98, .35); border-radius: 8px; padding: 2px 10px; }
.top-l b { color: var(--ink); font-size: 15px; }
.top-r { display: flex; align-items: center; gap: 6px; }
.mini { height: 28px; border-radius: 6px; border: 1px solid #6b2a2a; background: rgba(58, 20, 20, .9); color: #ffb4a8; font-size: 13px; padding: 0 10px; }
.grid { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: repeat(3, var(--card-w)); grid-auto-rows: var(--card-h); gap: 4px; justify-content: center; }
#foeGrid { top: 66px; }
#meGrid { top: 420px; }
.divider { position: absolute; left: 0; right: 0; top: 376px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; text-align: center; padding: 0 30px; z-index: 2; }
.divider span { background: rgba(6, 4, 12, .78); border: 1px solid rgba(227, 189, 98, .5); border-radius: 18px; padding: 3px 18px; max-width: 100%; color: #f1e3bd; text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Card: art có nền + khung */
.card { position: relative; width: var(--card-w); height: var(--card-h); background: #0a0710; cursor: pointer; border-radius: 3px; touch-action: manipulation; }
.card::before { content: ''; position: absolute; inset: 0; background: url(assets/frame.png) center/100% 100% no-repeat; z-index: 3; pointer-events: none; }
.card.empty { background: rgba(0, 0, 0, .35); }
.card.empty::before { opacity: .55; }
.card.empty > * { display: none; }
.card .art { position: absolute; inset: 5.5% 7% 5% 7%; background-size: cover; background-position: center 6%; z-index: 1; }
.card .shade { position: absolute; left: 7%; right: 7%; bottom: 5%; height: 52px; background: linear-gradient(transparent, rgba(0, 0, 0, .88)); z-index: 2; }
.card .nm, .card .chips, .card .spd, .card .sk, .card .hp { z-index: 4; }
.card .nm { position: absolute; left: 11px; top: 9px; font-size: 12px; font-weight: 800; background: rgba(0, 0, 0, .55); border-radius: 8px; padding: 0 6px; text-shadow: 0 1px 2px #000; }
.card .gem { position: absolute; left: 50%; top: 1px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); z-index: 5; border: 1px solid #120c04; background: #999; box-shadow: 0 0 6px currentColor; color: #999; }
.card[data-kind=heal] .gem { background: #35d39a; color: #35d39a; }
.card[data-kind=dmg] .gem { background: #e0443a; color: #e0443a; }
.card[data-kind=buff] .gem { background: #f2c14a; color: #f2c14a; }
.card[data-kind=debuff] .gem { background: #a35cff; color: #a35cff; }
.card .hp { position: absolute; left: 11px; right: 11px; bottom: 9px; height: 14px; background: rgba(0, 0, 0, .75); border: 1px solid #000; border-radius: 3px; overflow: hidden; }
.card .hp i { display: block; height: 100%; width: 100%; background: linear-gradient(#69e87f, var(--hp)); transition: width .4s ease-out; }
.card .hp i.low { background: linear-gradient(#ff7a6e, var(--hp-low)); }
.card .hp b { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 14px; text-shadow: 0 1px 1px #000; }
.card .spd { position: absolute; left: 10px; bottom: 25px; display: flex; align-items: center; gap: 1px; font-weight: 900; font-size: 15px; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.card .spd img { width: 16px; height: 16px; }
.card .sk { position: absolute; right: 10px; bottom: 25px; display: flex; align-items: center; gap: 2px; background: rgba(0, 0, 0, .68); border: 1px solid var(--gold-d); border-radius: 10px; padding: 0 6px 0 2px; font-size: 12px; font-weight: 800; }
.card .sk img { width: 16px; height: 16px; }
.card .chips { position: absolute; right: 9px; top: 8px; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.chip2 { display: flex; align-items: center; background: rgba(0, 0, 0, .75); border-radius: 8px; padding: 0 5px 0 1px; font-size: 10px; font-weight: 800; }
.chip2 img { width: 12px; height: 12px; }
.chip2.up { color: #9dff9d; }
.chip2.down { color: #d9a2ff; }
.card.locked .art { filter: brightness(.7); }
.card.locked::after { content: '🔒'; position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); font-size: 15px; z-index: 5; }
.card.casting { z-index: 6; filter: drop-shadow(0 0 10px rgba(255, 220, 120, .95)); }
.card.target { filter: drop-shadow(0 0 9px rgba(255, 70, 70, .95)); }
.card.target.ally { filter: drop-shadow(0 0 9px rgba(90, 255, 140, .95)); }
.card.dying { animation: die .5s forwards; }
.card.drop-hover { filter: drop-shadow(0 0 12px rgba(127, 212, 255, 1)); transform: scale(1.04); z-index: 7; }
.card.drop-ready::before { filter: drop-shadow(0 0 4px rgba(127, 212, 255, .9)); }
@keyframes die { to { opacity: 0; transform: scale(.85) rotate(-3deg); filter: grayscale(1) brightness(.4); } }

/* Tay bài (to hơn 1.5x) */
.tray { position: absolute; left: 0; right: 0; bottom: 0; height: 232px; background: url(assets/plate.png) center/100% 100% no-repeat; padding: 16px 44px 0; z-index: 4; }
.hand-info { height: 24px; line-height: 24px; font-size: 13px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; padding-top: 4px; }
.hand { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.hand::-webkit-scrollbar { display: none; }
.hand .card { flex: 0 0 144px; width: 144px; height: 180px; touch-action: pan-x; }
.hand .card .nm { font-size: 14px; left: 13px; top: 11px; }
.hand .card .gem { width: 15px; height: 15px; margin-left: -7px; top: 2px; }
.hand .card .hp { height: 18px; left: 13px; right: 13px; bottom: 11px; }
.hand .card .hp b { font-size: 14px; line-height: 18px; }
.hand .card .spd { font-size: 19px; bottom: 32px; left: 12px; }
.hand .card .spd img { width: 21px; height: 21px; }
.hand .card .sk { bottom: 32px; right: 12px; font-size: 14px; }
.hand .card .sk img { width: 20px; height: 20px; }
.hand .card .chips { right: 11px; top: 10px; }
.hand .card.dragging-src { opacity: .35; }
.drag-ghost { position: absolute; z-index: 90; pointer-events: none; width: 120px; height: 150px; transform: translate(-50%, -60%) scale(1.1) rotate(-3deg); opacity: .95; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .8)); }
.drag-ghost .card { width: 100%; height: 100%; }

/* Hiệu ứng */
#fxLayer { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.giant { position: absolute; opacity: 0; filter: drop-shadow(0 0 14px rgba(255, 230, 150, .85)); animation: giant 1.5s ease-out forwards; }
@keyframes giant {
  0% { opacity: 0; transform: scale(.5); }
  18% { opacity: .2; }
  45% { opacity: 1; transform: scale(1); }
  82% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.08); }
}
.fx { position: absolute; background-size: 800% 100%; background-repeat: no-repeat; animation: fxplay .75s steps(8, jump-none) forwards; }
@keyframes fxplay { from { background-position: 0 0; } to { background-position: 100% 0; } }
.float { position: absolute; font-weight: 900; font-size: 26px; text-shadow: 0 2px 3px #000, 0 0 6px #000; animation: floatUp .8s ease-out forwards; white-space: nowrap; }
.float.heal { color: #7dff8f; }
.float.dmg { color: #ff5a4d; }
.float.buff { color: #ffe27a; font-size: 20px; }
.float.debuff { color: #d9a2ff; font-size: 20px; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -4px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -44px) scale(1); } }

/* Ribbon thông tin skill (nền đen mờ), đặt cạnh nhân vật khổng lồ */
.skill-info {
  position: absolute; padding: 8px 26px 10px; opacity: 0; text-align: center; animation: infoIn 1.5s ease-out forwards;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .82) 14%, rgba(0, 0, 0, .82) 86%, rgba(0, 0, 0, 0));
  border-top: 1px solid rgba(227, 189, 98, .55); border-bottom: 1px solid rgba(227, 189, 98, .55);
}
.skill-info .who { font-size: 13px; font-weight: 800; letter-spacing: 1px; color: #ffd9a0; }
.skill-info .who.foe { color: #ff9b9b; }
.skill-info .nm { font-size: 30px; line-height: 1.1; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(#fff7cc 8%, #f2c14a 50%, #b8661a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #3a1200); }
.skill-info .ds { font-size: 16px; font-weight: 600; color: #fff; margin-top: 2px; line-height: 1.25; }
@keyframes infoIn {
  0% { opacity: 0; transform: translateY(6px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* chi tiết card */
.card-detail { max-height: 86%; overflow: auto; padding: 60px 50px 40px; text-align: left; }
.card-detail h3 { font-size: 26px; color: var(--gold); }
.card-detail p { margin: 5px 0; font-size: 17px; }
.card-detail .row { display: flex; gap: 12px; }
.card-detail .big-art { width: 130px; height: 162px; flex: none; border: 1px solid #8a6d2f; border-radius: 4px; background-size: cover; background-position: center top; }
.card-detail .sk-row { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-size: 16px; }
.card-detail .sk-row.next { outline: 1px solid var(--gold); }
.card-detail .sk-row img { width: 26px; height: 26px; }

/* Bay card + đạn skill */
.card.arriving { visibility: hidden; }
.card.flying { pointer-events: none; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .7)); }
.orb { position: absolute; width: 28px; height: 28px; border-radius: 50%; pointer-events: none; z-index: 25; }
.hand { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }

/* ===== Theme v5: charcoal + viền vàng mảnh (theo UI kit tham chiếu) ===== */
:root { --line: #b79a52; --line-d: #6f5a2c; --char: #17161a; --char-2: #0d0c10; }
#screen-auth, #screen-lobby, #screen-result { background: linear-gradient(rgba(10, 9, 12, .15), rgba(10, 9, 12, .75)), url(assets/home.jpg) center/cover; }

.wbtn {
  width: 380px; min-height: 62px; padding: 0 30px 2px; border: 1px solid var(--line); border-radius: 999px;
  background: linear-gradient(180deg, #2a272d 0%, #131216 100%) !important;
  box-shadow: inset 0 0 0 3px #0b0a0d, inset 0 0 0 4px rgba(227, 189, 98, .38), 0 6px 16px rgba(0, 0, 0, .65);
  color: #efe3c2; font-size: 24px; font-weight: 700; letter-spacing: 1.5px;
}
.wbtn::before, .wbtn::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--line); transform: rotate(45deg); }
.wbtn::before { left: 18px; }
.wbtn::after { right: 18px; }
.wbtn.orange { background: linear-gradient(180deg, #4a3a17 0%, #1d160a 100%) !important; border-color: #e3bd62; color: #fff1c4;
  box-shadow: inset 0 0 0 3px #0b0a0d, inset 0 0 0 4px rgba(255, 214, 120, .6), 0 0 16px rgba(227, 189, 98, .3), 0 6px 16px rgba(0, 0, 0, .65); }
.wbtn.blue { background: linear-gradient(180deg, #123239 0%, #0a1a1e 100%) !important; border-color: #5fb3bd; color: #c9f4f7; }
.wbtn.blue::before, .wbtn.blue::after { background: #5fb3bd; }
.wbtn.green { background: linear-gradient(180deg, #2c1a44 0%, #150c22 100%) !important; border-color: #a77be0; color: #e6d6ff; }
.wbtn.green::before, .wbtn.green::after { background: #a77be0; }
.wbtn.grey { background: linear-gradient(180deg, #25242a 0%, #121115 100%) !important; border-color: #6f6a78; color: #c8c3cf; }
.wbtn.grey::before, .wbtn.grey::after { background: #6f6a78; }
.wbtn.small { width: 250px; min-height: 54px; font-size: 21px; }
.menu { gap: 12px; }

.panel {
  background: linear-gradient(180deg, #1c1b20 0%, #0e0d11 100%); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: inset 0 0 0 4px #09080b, inset 0 0 0 5px rgba(227, 189, 98, .3), 0 14px 40px rgba(0, 0, 0, .7); padding: 70px 36px 40px;
}
.ribbon {
  height: 44px; width: 300px; top: -22px; border: 1px solid var(--line); border-radius: 999px; background: linear-gradient(180deg, #2c2a31, #121115);
  box-shadow: inset 0 0 0 3px #09080b, inset 0 0 0 4px rgba(227, 189, 98, .35), 0 4px 12px rgba(0, 0, 0, .6);
}
.ribbon span { color: #f1d98f; font-size: 22px; padding-bottom: 0; text-shadow: none; letter-spacing: 2px; }
.chip, .code-box { background: linear-gradient(180deg, #232126, #111014); border: 1px solid var(--line-d); box-shadow: inset 0 0 0 2px #09080b; }
.round-btn img { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.logo-img { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .85)); }

/* Kết quả */
.result-banner { background: none; height: auto; width: auto; flex-direction: column; }
.result-banner::before { content: ''; width: 260px; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); margin-bottom: 6px; }
.result-title {
  font-size: 84px; letter-spacing: 8px; padding: 0 0 0 8px; font-weight: 800;
  background: linear-gradient(180deg, #fff8da 8%, #f0cb74 48%, #9a6a1a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 16px rgba(255, 200, 90, .55)) drop-shadow(0 3px 0 rgba(60, 30, 0, .8));
}
#screen-result.lose .result-title { background: linear-gradient(180deg, #f2f2f6 8%, #a9a9b6 50%, #55555f 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 14px rgba(150, 160, 190, .4)); }
.result-sub { color: #cfc4a6; font-size: 18px; }
.stats-wrap { padding: 34px 28px 22px; margin-top: 18px; }
.stats th, .stats td { border-bottom: 1px solid rgba(227, 189, 98, .16); font-size: 18px; }
.stats td:first-child { position: relative; padding-left: 20px; color: #e8dfcf; }
.stats td:first-child::before { content: ''; position: absolute; left: 4px; top: 50%; width: 7px; height: 7px; margin-top: -4px; background: var(--line); transform: rotate(45deg); }
.stats td.hi { color: #ffd36a; text-shadow: 0 0 8px rgba(255, 200, 90, .4); }
.result-menu { gap: 12px; }
.result-menu .wbtn { margin: 0; }

/* Màn trận: thanh trên + khay tay bài dạng đen mảnh viền vàng */
.top-l { background: linear-gradient(180deg, #232126, #111014); border: 1px solid var(--line-d); }
.mini { border-radius: 999px; border: 1px solid var(--line-d); background: linear-gradient(180deg, #2a1416, #12090a); color: #ffb4a8; }
.divider span { background: linear-gradient(180deg, #232126, #101014); border: 1px solid var(--line); box-shadow: inset 0 0 0 2px #09080b; font-weight: 600; }
.hand-info { color: #d8c48a; }

/* Card cast nhô lên, target dính đòn */
.card { transition: transform .22s cubic-bezier(.2, .9, .3, 1.25), filter .2s; }
.card.casting { transform: translateY(-14px) scale(1.08); }
.card.hit-dmg { animation: hitShake .45s ease-out; }
.card.hit-dmg .art { filter: brightness(1.7) saturate(1.6) sepia(.4) hue-rotate(-25deg); }
@keyframes hitShake {
  0% { transform: translate(0, 0); }
  15% { transform: translate(-8px, 2px) rotate(-2deg); }
  30% { transform: translate(7px, -2px) rotate(2deg); }
  45% { transform: translate(-6px, 1px) rotate(-1deg); }
  60% { transform: translate(4px, 0); }
  100% { transform: translate(0, 0); }
}
.hitflash { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 3px; animation: hitflash .5s ease-out forwards; }
.hitflash.dmg { background: radial-gradient(circle at 50% 45%, rgba(255, 70, 40, .8), rgba(255, 0, 0, .38) 60%, rgba(255, 0, 0, 0)); }
.hitflash.heal { background: radial-gradient(circle at 50% 45%, rgba(110, 255, 180, .6), rgba(50, 220, 140, .25) 60%, transparent); }
.hitflash.buff { background: radial-gradient(circle at 50% 45%, rgba(255, 220, 110, .6), rgba(255, 190, 60, .25) 60%, transparent); }
.hitflash.debuff { background: radial-gradient(circle at 50% 45%, rgba(190, 120, 255, .65), rgba(120, 50, 220, .3) 60%, transparent); }
@keyframes hitflash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

.search-timer { font-size: 44px; font-weight: 800; letter-spacing: 3px; color: #f1d98f; margin: 6px 0 14px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #000; }
/* logo mới tỉ lệ ~1:1 */
.logo-img { width: 380px; }
.logo-wrap.small .logo-img { width: 300px; }

/* logo ngang (card + kiếm + vòng ma thuật) */
.logo-img { width: 470px; }
.logo-wrap.small .logo-img { width: 380px; }

/* v12: nhân vật khổng lồ hiện đủ trong 0.3s rồi giữ, skill mới bắt đầu quanh nhân vật */
.giant { animation: giant12 1.6s ease-out forwards; }
@keyframes giant12 {
  0% { opacity: 0; transform: scale(.6); }
  19% { opacity: 1; transform: scale(1); }
  85% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.08); }
}
.skill-info { animation-duration: 1.6s; }
.search-timer { font-variant-numeric: tabular-nums; }
.rune, .ring, .spark, .shapefx, .starburst, .rock { pointer-events: none; }

/* v13: tên + chú thích skill to hơn 25% */
.skill-info { padding: 10px 30px 12px; }
.skill-info .who { font-size: 16px; }
.skill-info .nm { font-size: 38px; }
.skill-info .ds { font-size: 20px; margin-top: 3px; }

/* v14: tên skill to thêm 10% */
.skill-info .who { font-size: 18px; }
.skill-info .nm { font-size: 42px; }
.skill-info .ds { font-size: 22px; }

/* Hướng dẫn: tab + hình minh họa + danh sách nhân vật */
.guide-panel { padding-top: 64px; }
.tabs { display: flex; gap: 8px; justify-content: center; margin: 4px 0 10px; }
.tab { height: 38px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-d); background: linear-gradient(180deg, #232126, #111014); color: #cfc4a6; font-size: 16px; font-weight: 700; cursor: pointer; }
.tab.active { border-color: var(--gold); color: #ffe9a8; box-shadow: 0 0 10px rgba(227, 189, 98, .35); }
.guide-body { max-height: 560px; overflow: auto; text-align: left; font-size: 16px; line-height: 1.35; padding-right: 4px; }
.guide-body h4 { margin: 14px 0 6px; color: var(--gold); font-size: 18px; letter-spacing: 1px; }
.guide-body ul { margin: 6px 0; padding-left: 20px; }
.guide-body li { margin: 4px 0; }
.guide-body .fig { width: 100%; height: auto; display: block; margin: 6px 0 2px; }
.guide-body .cap { margin: 2px 0 8px; font-size: 14px; color: #cfc4a6; text-align: center; }
.cr { display: flex; gap: 10px; padding: 8px; margin: 8px 0; border: 1px solid rgba(227, 189, 98, .3); border-radius: 10px; background: rgba(255, 255, 255, .04); }
.cr-art { flex: 0 0 84px; height: 105px; border: 1px solid var(--line-d); border-radius: 6px; background-size: cover; background-position: center top; }
.cr-name { font-size: 20px; font-weight: 800; color: #ffe9a8; }
.cr-name span { font-size: 14px; font-weight: 600; color: #cfc4a6; margin-left: 6px; }
.cr-stats { font-size: 14px; color: #e8dfcf; margin: 2px 0 6px; }
.cr-stats b { color: var(--gold); }
.cr-sk { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; font-size: 14px; }
.cr-sk img { width: 24px; height: 24px; flex: none; }
.guide-body { scrollbar-width: thin; scrollbar-color: #6f5a2c #0d0c10; }
.guide-body::-webkit-scrollbar { width: 8px; }
.guide-body::-webkit-scrollbar-thumb { background: #6f5a2c; border-radius: 4px; }
.guide-body::-webkit-scrollbar-track { background: #0d0c10; }

/* v15: card tự xoay/phóng to khi ra skill (WAAPI), bỏ nhân vật khổng lồ */
.card.casting { transform: none; transition: none; filter: drop-shadow(0 0 12px rgba(255, 220, 120, .95)); }
.giant { display: none; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -2px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -14px) scale(1); } }

/* v18: lớp hiệu ứng skill luôn nằm trên cùng của bàn chơi (dưới popup 40), trên mọi card dù card có hiệu ứng gì */
#fxLayer { z-index: 35; }
.card.hit-dmg, .card.hit-heal, .card.hit-buff, .card.hit-debuff, .card.casting { z-index: 5; }

/* v23: huy hiệu skill (loại = màu/biểu tượng, số target = chấm, đối tượng = viền) */
.card .sk { display: none; }
.skchips { position: absolute; right: 8px; bottom: 25px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; z-index: 4; }
.skchip { display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px 0 3px; border-radius: 11px; border: 2px solid #8a6d2f; background: rgba(8, 6, 14, .82); box-shadow: 0 1px 4px #000; }
.skchip img { width: 15px; height: 15px; }
.skchip .pips { display: flex; gap: 2px; align-items: center; }
.skchip .pips i { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px currentColor; }
.skchip .pips b { font-size: 10px; letter-spacing: .5px; color: #fff; line-height: 1; }
.skchip.k-dmg { color: #ff5a4d; background: rgba(70, 8, 8, .85); }
.skchip.k-heal { color: #4dff9a; background: rgba(6, 56, 30, .85); }
.skchip.k-buff { color: #ffd36a; background: rgba(66, 48, 4, .85); }
.skchip.k-debuff { color: #c08bff; background: rgba(40, 14, 70, .85); }
.skchip.to-enemy { border-color: #ff5a4d; }
.skchip.to-ally { border-color: #4dd0ff; }
.skchip.later { opacity: .55; transform: scale(.88); transform-origin: right bottom; }
.skchip.next { box-shadow: 0 0 8px currentColor, 0 1px 4px #000; }
.skchip.next::before { content: '▶'; font-size: 8px; color: #fff; margin-right: -1px; }
.hand .card .skchips { right: 11px; bottom: 32px; gap: 4px; }
.hand .card .skchip { height: 26px; border-radius: 14px; padding: 0 9px 0 4px; }
.hand .card .skchip img { width: 19px; height: 19px; }
.hand .card .skchip .pips i { width: 8px; height: 8px; }
.hand .card .skchip .pips b { font-size: 13px; }

.skchip .pips b { font-size: 12px; font-weight: 800; }
.skchip .pips b.all { font-size: 17px; line-height: .8; }
.hand .card .skchip .pips b { font-size: 15px; }
.hand .card .skchip .pips b.all { font-size: 21px; }

/* v24: hai ô skill nằm ngang ở đỉnh card thay cho viên ngọc */
.card .gem { display: none; }
.skchips { top: 7px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); flex-direction: row; align-items: center; gap: 4px; white-space: nowrap; }
.skchip.later { transform: scale(.9); transform-origin: center; opacity: .6; }
.card .nm { top: 31px; }
.hand .card .skchips { top: 9px; bottom: auto; right: auto; gap: 5px; }
.hand .card .nm { top: 40px; }
.hand .card .chips { top: 40px; }
.card .chips { top: 31px; }

/* v25: 2 ô skill nhỏ gắn lên viền trên (không che tranh); skill tiếp theo ở góc dưới trái cạnh tốc độ */
.skchips { top: -9px; gap: 3px; z-index: 6; }
.skchips .skchip { height: 17px; padding: 0 5px 0 2px; border-width: 1.5px; gap: 2px; }
.skchips .skchip img { width: 12px; height: 12px; }
.skchips .skchip::before { display: none; }
.skchips .skchip.next { transform: scale(1.06); box-shadow: 0 0 8px currentColor, 0 1px 3px #000; }
.skchips .skchip .pips b { font-size: 11px; }
.skchips .skchip .pips b.all { font-size: 15px; }
.nxt { position: absolute; left: 50px; bottom: 24px; z-index: 5; }
.nxt .skchip { height: 20px; transform: none; }
.nxt .skchip::before { display: none; }
.card .nm { top: 9px; }
.card .chips { top: 9px; }
.hand .card .skchips { top: -11px; }
.hand .card .skchips .skchip { height: 21px; }
.hand .card .skchips .skchip img { width: 15px; height: 15px; }
.hand .card .skchips .skchip .pips b { font-size: 14px; }
.hand .card .skchips .skchip .pips b.all { font-size: 19px; }
.hand .card .nxt { left: 62px; bottom: 31px; }
.hand .card .nxt .skchip { height: 25px; }
.hand .card .nm { top: 11px; }
.hand .card .chips { top: 11px; }
/* v26: skill tiếp theo canh phải; 2 ô trên viền liền khung (dạng tab), nhỏ hơn, không highlight */
.nxt { left: auto; right: 9px; }
.hand .card .nxt { left: auto; right: 11px; }
.skchips { top: -8px; gap: 2px; }
.skchips .skchip, .skchips .skchip.later, .skchips .skchip.next {
  height: 15px; padding: 0 5px 0 2px; border-width: 1px; border-bottom-width: 0; border-radius: 8px 8px 0 0;
  background: #14100a; border-color: var(--gold-d); opacity: 1; transform: none; box-shadow: none; gap: 2px;
}
.skchips .skchip img { width: 11px; height: 11px; }
.skchips .skchip .pips b { font-size: 10px; }
.skchips .skchip .pips b.all { font-size: 13px; }
.skchips .skchip.to-enemy { border-color: #b8402f; }
.skchips .skchip.to-ally { border-color: #3a8fb8; }
.hand .card .skchips { top: -10px; }
.hand .card .skchips .skchip, .hand .card .skchips .skchip.later, .hand .card .skchips .skchip.next { height: 19px; }
.hand .card .skchips .skchip img { width: 14px; height: 14px; }
.hand .card .skchips .skchip .pips b { font-size: 13px; }
.hand .card .skchips .skchip .pips b.all { font-size: 17px; }
/* v27: giữ shape viên thuốc của 2 ô skill, bọc trong khung hoa văn giống khung card (dày 1/3), nằm giữa cạnh trên, nhô lên một chút */
.skchips {
  top: -11px; gap: 3px; padding: 2px 4px; border: 2px solid transparent; border-image: url(assets/frame.png) 22 / 2px stretch;
  background: #0d0a07; border-radius: 0; box-shadow: 0 1px 3px #000; z-index: 6;
}
.skchips .skchip, .skchips .skchip.later, .skchips .skchip.next {
  height: 16px; padding: 0 5px 0 2px; border-width: 1.5px; border-style: solid; border-radius: 9px; opacity: 1; transform: none; box-shadow: none;
}
.skchips .skchip.to-enemy { border-color: #ff5a4d; }
.skchips .skchip.to-ally { border-color: #4dd0ff; }
.skchips .skchip.k-dmg { background: rgba(70, 8, 8, .9); }
.skchips .skchip.k-heal { background: rgba(6, 56, 30, .9); }
.skchips .skchip.k-buff { background: rgba(66, 48, 4, .9); }
.skchips .skchip.k-debuff { background: rgba(40, 14, 70, .9); }
.hand .card .skchips { top: -14px; padding: 3px 5px; border-image-width: 3px; border-width: 3px; }
.hand .card .skchips .skchip, .hand .card .skchips .skchip.later, .hand .card .skchips .skchip.next { height: 21px; border-radius: 11px; }

/* v28: bỏ cụm skill trên đầu; 2 ô skill nằm góc dưới phải, skill sắp chạy sáng */
.skchips { display: none !important; }
.nxt { left: auto; right: 8px; bottom: 24px; display: flex; gap: 3px; z-index: 5; }
.nxt .skchip { height: 19px; padding: 0 5px 0 2px; border-width: 2px; border-style: solid; border-radius: 10px; box-shadow: none; opacity: 1; transform: none; }
.nxt .skchip img { width: 13px; height: 13px; }
.nxt .skchip .pips b { font-size: 11px; }
.nxt .skchip .pips b.all { font-size: 15px; }
.nxt .skchip.later { opacity: .5; transform: scale(.9); transform-origin: right bottom; filter: saturate(.6); }
.nxt .skchip.next { transform: scale(1.06); transform-origin: right bottom; box-shadow: 0 0 9px 1px currentColor, 0 1px 3px #000; }
.nxt .skchip.next::before { display: none; }
.hand .card .nxt { right: 11px; bottom: 31px; gap: 4px; }
.hand .card .nxt .skchip { height: 25px; }
.hand .card .nxt .skchip img { width: 17px; height: 17px; }
.hand .card .nxt .skchip .pips b { font-size: 14px; }
.hand .card .nxt .skchip .pips b.all { font-size: 19px; }