:root {
  --bg: #FBF3E6;
  --ink: #3B2416;
  --line: #1A1A1A;
  --card: #FFFFFF;
  --muted: #8A7563;
  --soft: #F3EADB;
  --accent: #FFD23F;
  --red: #E53935;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.hidden { display: none !important; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

.loading {
  position: fixed; inset: 0; display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center; font-size: 20px;
}
.loading img { animation: bob 1s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-10px) rotate(6deg); } }

/* ---------- select screen */
#select { max-width: 1000px; margin: 0 auto; padding: 16px 16px 112px; }
.top { text-align: center; margin-bottom: 12px; }
.top h1 { margin: 0; font-size: clamp(30px, 6vw, 46px); font-weight: 800; line-height: 1.05; }
.tagline { margin: 2px 0 10px; color: var(--muted); font-size: 15px; }

.tabs {
  display: inline-flex; gap: 4px; padding: 4px; background: var(--soft); border: 3px solid var(--line);
  border-radius: 16px; box-shadow: 0 3px 0 var(--line);
}
.tab {
  border: 0; background: transparent; border-radius: 11px; padding: 6px 16px; font-weight: 800; font-size: 16px; color: var(--muted);
}
.tab.on { background: var(--accent); color: var(--line); box-shadow: inset 0 0 0 2px var(--line); }

.panel { margin-bottom: 12px; }
.slots { display: flex; align-items: center; justify-content: center; gap: 10px; }
.slot {
  flex: 1 1 0; max-width: 340px; display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 3px solid var(--line); border-radius: 18px; padding: 8px 12px;
  box-shadow: 0 4px 0 var(--line); text-align: left; min-width: 0;
}
.slot.active { outline: 4px solid var(--accent); outline-offset: 2px; }
.slot-img { width: 54px; height: 54px; border-radius: 50%; background: #EFE4D2 center/contain no-repeat; flex: none; }
.slot-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.slot-text small { color: var(--muted); font-size: 13px; }
.slot-text b { font-size: 19px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs { font-weight: 800; font-size: 26px; -webkit-text-stroke: 1px var(--line); color: #fff; text-shadow: 0 2px 0 var(--line); }

/* rank panel */
.rankbox { display: flex; gap: 12px; align-items: stretch; justify-content: center; flex-wrap: wrap; }
.rankslot { max-width: 360px; flex: 1 1 260px; cursor: default; }
.rankslot .best { color: #B26A00; font-weight: 800; }
.rankopts { display: flex; gap: 10px; flex: 1 1 300px; max-width: 520px; flex-wrap: wrap; }
.field {
  flex: 1 1 140px; display: flex; flex-direction: column; gap: 3px; background: var(--card); border: 3px solid var(--line);
  border-radius: 18px; padding: 6px 12px 8px; box-shadow: 0 4px 0 var(--line); min-width: 0;
}
.field > span { font-size: 13px; color: var(--muted); }
.field input {
  border: 2px solid var(--line); border-radius: 10px; padding: 3px 10px; font-weight: 800; font-size: 17px; background: #FFFDF8; width: 100%; min-width: 0;
}
.field input:focus { outline: 3px solid var(--accent); }
.rules { margin: 10px auto 0; max-width: 720px; text-align: center; font-size: 15px; color: var(--muted); }
.rules b { color: var(--ink); }

.seg { display: inline-flex; gap: 4px; padding: 3px; background: var(--soft); border: 2px solid var(--line); border-radius: 12px; }
.seg button { border: 0; background: transparent; border-radius: 9px; padding: 2px 12px; font-weight: 800; font-size: 15px; color: var(--muted); }
.seg button.on { background: var(--accent); color: var(--line); box-shadow: inset 0 0 0 2px var(--line); }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 8px; }
.roles { margin-bottom: 12px; }
.chip {
  font-size: 14px; font-weight: 800; padding: 3px 12px; border-radius: 99px; background: var(--card);
  border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); color: var(--line); display: inline-flex; align-items: center; gap: 6px;
}
.chip.on { background: var(--accent); }
.chip .rd { width: 10px; height: 10px; border-radius: 50%; background: var(--rc); border: 1.5px solid var(--line); }

/* grid grouped by faction */
.grid { display: flex; flex-direction: column; gap: 14px; }
.sec { margin: 0 0 6px 2px; display: flex; align-items: baseline; gap: 8px; font-size: 19px; font-weight: 800; }
.sec small { font-size: 13px; color: var(--muted); font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.card {
  position: relative; background: var(--card); border: 3px solid var(--line); border-radius: 18px;
  padding: 8px 6px 9px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
  box-shadow: 0 4px 0 var(--line); transition: transform .08s;
}
.card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.card img { display: block; width: 80%; max-width: 104px; height: auto; aspect-ratio: 1; object-fit: contain; }
.card .nm {
  font-size: 14px; font-weight: 800; line-height: 1.12; text-align: center; overflow-wrap: normal; word-break: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%;
}
.rl {
  display: inline-block; font-size: 11.5px; font-weight: 800; line-height: 17px; height: 21px; padding: 0 9px; white-space: nowrap;
  color: #fff; background: var(--rc, #777); border: 2px solid var(--line); border-radius: 99px; text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.card .rl { margin-top: auto; }
.card .pick {
  position: absolute; top: 5px; right: 5px; font-size: 11px; font-weight: 800; padding: 0 7px; line-height: 18px;
  border-radius: 99px; border: 2px solid var(--line); background: var(--accent);
}
.card.sel { outline: 4px solid var(--accent); outline-offset: 1px; }

.detail {
  margin-top: 14px; background: var(--card); border: 3px solid var(--line); border-radius: 18px;
  padding: 12px 16px; box-shadow: 0 4px 0 var(--line); min-height: 60px;
}
.dhead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.dhead img { width: 64px; height: 64px; flex: none; }
.dhead h3 { margin: 0; font-size: 23px; font-weight: 800; line-height: 1.1; }
.dhead .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: 14px; margin-top: 2px; }
.detail dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 5px 10px; font-size: 15px; }
.detail dt { font-weight: 800; }
.detail dd { margin: 0; }

/* leaderboard */
.boardbar { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.boardbar select {
  border: 2px solid var(--line); border-radius: 12px; padding: 4px 10px; font-weight: 800; background: var(--card); box-shadow: 0 2px 0 var(--line); max-width: 220px;
}
.boardinfo { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 10px; min-height: 1.3em; }
.board { list-style: none; margin: 0 auto; padding: 0; max-width: 680px; display: flex; flex-direction: column; gap: 8px; }
.board li {
  display: flex; align-items: center; gap: 10px; background: var(--card); border: 3px solid var(--line); border-radius: 16px;
  padding: 6px 12px 6px 8px; box-shadow: 0 3px 0 var(--line); min-width: 0;
}
.board li.mine { background: #FFF6D1; }
.board li.empty { justify-content: center; color: var(--muted); padding: 18px; }
.board .rk {
  width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 17px;
  background: var(--soft); border: 2px solid var(--line);
}
.board li:nth-child(1) .rk.top { background: #FFD23F; }
.board li:nth-child(2) .rk.top { background: #E0E0E0; }
.board li:nth-child(3) .rk.top { background: #F0B27A; }
.board img { width: 46px; height: 46px; flex: none; }
.board .who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.board .who b { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board .who small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board .you { font-size: 11px; background: var(--accent); border: 1.5px solid var(--line); border-radius: 99px; padding: 0 6px; margin-left: 6px; vertical-align: 2px; }
.board .score { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; flex: none; }
.board .score b { font-size: 26px; font-weight: 800; }
.board .score small { font-size: 12px; color: var(--muted); }
.bests { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 auto 10px; max-width: 680px; }
.bests span { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border: 2px solid var(--line); border-radius: 99px; padding: 1px 10px 1px 2px; font-size: 13px; font-weight: 800; }
.bests img { width: 24px; height: 24px; }

.actions {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; justify-content: center; z-index: 5;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 35%);
}

.btn {
  border: 3px solid var(--line); border-radius: 14px; background: #fff; padding: 8px 18px;
  font-weight: 800; font-size: 17px; box-shadow: 0 4px 0 var(--line); white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.btn.primary { background: var(--accent); font-size: 20px; padding: 10px 30px; }
.btn.ghost { background: var(--soft); }
.btn.rec .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 2px solid var(--line); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn.danger { background: #FFCDD2; }
@keyframes blink { 50% { opacity: .2; } }

.selmsg { margin: 12px 0 0; background: #FFEBEE; border: 3px solid var(--line); border-radius: 14px; padding: 10px 12px; font-size: 15px; }

/* ---------- battle screen: canvas only */
#battle { height: 100dvh; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; }
.stage { position: relative; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
#cv {
  height: min(100%, calc((100vw - 16px) * 16 / 9)); max-height: 100%; max-width: 100%; aspect-ratio: 9 / 16; width: auto;
  border-radius: 16px; box-shadow: 0 0 0 3px var(--line), 0 6px 0 var(--line); background: var(--bg);
}
.recbadge {
  position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; pointer-events: none;
  background: rgba(26, 26, 26, .78); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: 1px; padding: 3px 10px 3px 8px; border-radius: 99px;
}
.recbadge i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: blink 1s infinite; }
.stepbar {
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 6;
  animation: fadein .25s ease-out;
}
.stepbar .btn { font-size: 16px; padding: 8px 14px; }
.stepbar .btn.primary { font-size: 18px; padding: 8px 20px; min-width: 150px; }

/* end-of-match dialog */
.modal {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(30, 20, 12, .55); animation: fadein .25s ease-out;
}
@keyframes fadein { from { opacity: 0; } }
.sheet {
  width: min(460px, 100%); max-height: 100%; overflow: auto; background: var(--bg); border: 4px solid var(--line); border-radius: 22px;
  box-shadow: 0 8px 0 var(--line); padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; text-align: center;
}
.sheet h2 { margin: 0; font-size: 27px; font-weight: 800; line-height: 1.15; }
.sheet h2 span { -webkit-text-stroke: 1px var(--line); }
.endsub { font-size: 15px; color: var(--ink); line-height: 1.35; }
.endsub:empty, .endlog:empty { display: none; }
.endsub .warn { color: #B71C1C; }
.endlog { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.endlog img { width: 30px; height: 30px; border-radius: 50%; }
.endlog img.lost { filter: grayscale(1); opacity: .45; outline: 2px solid var(--red); }
.endrec { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.endrec video {
  height: min(42vh, 500px); max-width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 14px; border: 3px solid var(--line);
}
.endsize { font-size: 14px; color: var(--muted); }
.endmsg { font-size: 15px; color: var(--ink); word-break: break-word; }
.endmsg:empty { display: none; }
.sheet .row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.sheet .btn { font-size: 16px; padding: 7px 13px; }
.sheet .btn.primary { font-size: 18px; padding: 8px 22px; }

/* ---------- 3vs3 */
.teams { display: flex; align-items: center; justify-content: center; gap: 10px; }
.teams .vs { flex: none; }
.tteam {
  --tc: #2F80ED; flex: 1 1 0; max-width: 430px; min-width: 0; background: #DCEBFF; border: 3px solid var(--line);
  border-radius: 18px; padding: 5px 8px 8px; box-shadow: 0 4px 0 var(--line);
}
.tteam.t1 { --tc: #E5484D; background: #FFE1E1; }
.tlabel { display: block; text-align: center; font-size: 15px; font-weight: 800; color: var(--tc); line-height: 1.3; margin-bottom: 3px; }
.tlabel .best { color: #B26A00; font-size: 13px; }
.tslots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tslot {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 6px 3px 5px;
  background: var(--card); border: 2.5px solid var(--line); border-radius: 13px; box-shadow: 0 3px 0 var(--line);
}
.tslot:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.tslot.active { outline: 4px solid var(--accent); outline-offset: 1px; }
.tslot .slot-img { width: 50px; height: 50px; }
.tslot b { font-size: 13.5px; font-weight: 800; line-height: 1.15; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kindbar { display: flex; justify-content: center; margin: 0 0 10px; }
.rankteam { flex: 1 1 320px; max-width: 430px; }
.card .pick.t0 { background: #2F80ED; color: #fff; }
.card .pick.t1 { background: #E5484D; color: #fff; }
.card.sel:has(.pick.t0) { outline-color: #2F80ED; }
.card.sel:has(.pick.t1) { outline-color: #E5484D; }
/* three stacked heads (team key) */
.h3 { display: inline-flex; flex: none; align-items: center; }
.h3 img { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--line); }
.h3 img + img { margin-left: -10px; }
.board .h3 img { width: 40px; height: 40px; }
.bests .h3 img { width: 24px; height: 24px; box-shadow: 0 0 0 1.5px var(--line); }
.bests .h3 img + img { margin-left: -7px; }
.h3.big { justify-content: center; }
.h3.big img { width: 64px; height: 64px; box-shadow: 0 0 0 3px var(--line); }
.h3.big img + img { margin-left: -12px; }
.endlog .grp { display: inline-flex; padding: 2px 5px; border-radius: 99px; background: var(--card); border: 2px solid var(--line); }
.endlog .grp img { width: 26px; height: 26px; border-radius: 50%; }
.endlog .grp img + img { margin-left: -7px; }
.endlog .grp.lost { border-color: var(--red); background: #FFEBEE; }
.endlog .grp.lost img { filter: grayscale(1); opacity: .5; }

/* ---------- responsive */
@media (max-width: 900px) { .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .card .nm { font-size: 15px; } }
@media (max-width: 560px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  #select { padding: 12px 10px 104px; }
  .tab { padding: 5px 10px; font-size: 14px; }
  .tagline { font-size: 13px; }
  .chip { font-size: 12px; padding: 2px 9px; gap: 4px; }
  .filters { gap: 5px; }
  .cards { gap: 7px; }
  .sec { font-size: 17px; }
  .card { padding: 6px 3px 7px; border-radius: 14px; border-width: 2px; box-shadow: 0 3px 0 var(--line); gap: 1px; }
  .card img { width: 66%; }
  .card .nm { font-size: 14px; line-height: 1.1; }
  .card .rl { font-size: 10px; line-height: 15px; height: 18px; padding: 0 6px; border-width: 1.5px; }
  .card .pick { font-size: 10px; padding: 0 5px; line-height: 15px; top: 3px; right: 3px; }
  .slot { padding: 6px 8px; gap: 6px; }
  .slot-img { width: 42px; height: 42px; }
  .slot-text b { font-size: 16px; }
  .detail { padding: 10px 12px; }
  .detail dl { grid-template-columns: 1fr; gap: 1px; }
  .detail dd { margin-bottom: 5px; }
  .rules { font-size: 14px; }
  .teams { flex-direction: column; gap: 2px; }
  .teams .vs { font-size: 20px; line-height: 1; }
  .tteam { width: 100%; max-width: none; padding: 4px 6px 7px; border-radius: 15px; }
  .tslot .slot-img { width: 44px; height: 44px; }
  .board .h3 img { width: 32px; height: 32px; }
  .board .h3 img + img { margin-left: -9px; }
}
@media (max-width: 340px) {
  .card .nm { font-size: 13px; }
}
@media (max-width: 460px) {
  .actions { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .actions .btn { font-size: 15px; padding: 8px 11px; border-width: 2px; box-shadow: 0 3px 0 var(--line); }
  .actions .btn.primary { font-size: 16px; padding: 8px 14px; }
  .stepbar .btn { font-size: 14px; padding: 6px 10px; }
  .stepbar .btn.primary { font-size: 16px; min-width: 120px; }
}

/* ---------- online rooms ("Phòng đấu") */
.roomform { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 640px; margin: 0 auto; }
.roomform .field { flex: 1 1 220px; }
.roomform .seg { align-self: flex-start; }
.roomgo { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 16px 0 0; }
.roomjoin { display: flex; gap: 8px; justify-content: center; margin: 14px auto 0; max-width: 420px; }
.roomjoin input {
  flex: 1 1 auto; min-width: 0; border: 3px solid var(--line); border-radius: 14px; padding: 6px 12px; font-weight: 800; font-size: 21px;
  letter-spacing: 5px; text-align: center; background: #fff; box-shadow: 0 4px 0 var(--line); text-transform: uppercase;
}
.roomjoin input::placeholder { letter-spacing: 0; text-transform: none; color: #B9A68F; font-size: 17px; }
.roomjoin input:focus { outline: 3px solid var(--accent); }
.rbar {
  display: flex; align-items: center; gap: 12px; background: var(--card); border: 3px solid var(--line); border-radius: 18px;
  padding: 6px 10px 6px 14px; box-shadow: 0 4px 0 var(--line); max-width: 760px; margin: 0 auto 12px;
}
.rcode { display: flex; flex-direction: column; line-height: 1.05; flex: none; }
.rcode small, .rmeta small { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.rcode b { font-size: 28px; letter-spacing: 3px; font-weight: 800; }
.rmeta { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.rmeta b { font-size: 16px; }
.rmeta small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpub { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); cursor: pointer; font-weight: 700; }
.rpub input { width: 15px; height: 15px; accent-color: #1A1A1A; margin: 0; }
.rbtns { display: flex; gap: 6px; flex: none; }
.btn.sm { font-size: 15px; padding: 4px 12px; border-width: 2.5px; box-shadow: 0 3px 0 var(--line); border-radius: 12px; }
.btn.sm.primary { font-size: 15px; padding: 4px 14px; }
.rseats { display: flex; align-items: stretch; justify-content: center; gap: 10px; max-width: 760px; margin: 0 auto; }
.rseat {
  --tc: #2F80ED; flex: 1 1 0; min-width: 0; background: #DCEBFF; border: 3px solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--line);
  padding: 10px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
}
.rseat.t1 { --tc: #E5484D; background: #FFE1E1; }
.rseat.me { outline: 4px solid var(--accent); outline-offset: 2px; }
.rseat.empty { background: var(--soft); border-style: dashed; box-shadow: none; }
.rs-heads { height: 66px; display: flex; align-items: center; justify-content: center; }
.rs-heads > img { width: 66px; height: 66px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--line); }
.rseat .h3 img { width: 56px; height: 56px; box-shadow: 0 0 0 2.5px var(--line); }
.rseat .h3 img + img { margin-left: -14px; }
.qh {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 800;
  background: #fff; color: var(--tc); box-shadow: 0 0 0 3px var(--line); flex: none;
}
.qh + .qh { margin-left: -14px; }
.qh.plus { background: transparent; box-shadow: none; border: 3px dashed var(--muted); color: var(--muted); }
.rs-name { font-size: 19px; font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tc); line-height: 1.15; }
.rseat.empty .rs-name { color: var(--muted); }
.rs-sub { font-size: 13.5px; color: var(--muted); min-height: 22px; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.tag { font-size: 11px; color: var(--line); background: var(--accent); border: 1.5px solid var(--line); border-radius: 99px; padding: 0 6px; margin-left: 6px; vertical-align: 3px; }
.tag.soft { background: #fff; }
.pill { font-size: 12.5px; font-weight: 800; padding: 0 10px; line-height: 19px; border-radius: 99px; border: 2px solid var(--line); background: #fff; color: var(--line); white-space: nowrap; }
.pill.ok { background: #B9F6CA; }
.pill.off { background: #FFCDD2; }
.pill.bot { background: #E1D5F7; }
.pill.wait { background: #FFF3C4; }
.rscore { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; min-width: 70px; }
.rscore b { font-size: 36px; font-weight: 800; white-space: nowrap; -webkit-text-stroke: 1px var(--line); }
.rscore small { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.rnote { text-align: center; color: var(--ink); font-size: 15px; margin: 14px auto 0; max-width: 680px; line-height: 1.45; }
.rnote .btn { margin-left: 6px; vertical-align: 1px; }
.rmine { display: flex; justify-content: center; margin: 12px 0 14px; }
.rmine:empty { display: none; }
.rmine .slot { max-width: 360px; width: 100%; }
.rmine .tteam { max-width: 430px; width: 100%; }
.rhist { max-width: 680px; margin: 14px auto 6px; }
.rhist:empty { display: none; }
.rhist h4 { margin: 0 0 6px; font-size: 15px; text-align: center; color: var(--muted); }
.rhist ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rhist li { display: flex; align-items: center; gap: 8px; background: var(--card); border: 2.5px solid var(--line); border-radius: 14px; padding: 4px 10px; font-size: 14px; min-width: 0; }
.rhist .no, .rhist .dur { color: var(--muted); font-weight: 800; flex: none; font-size: 13px; }
.rhist .no { width: 28px; }
.rhist .vsm { flex: none; color: var(--muted); font-size: 13px; }
.rhist .sd { flex: 1 1 0; display: flex; align-items: center; gap: 4px; min-width: 0; }
.rhist .sd.r { flex-direction: row-reverse; }
.rhist .sd b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 3px; min-width: 0; }
.rhist .sd img { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.rhist .sd img + img { margin-left: -9px; }
.rhist .sd.r img + img { margin-left: 0; margin-right: -9px; }
.rhist .sd.lost img { filter: grayscale(1); opacity: .45; }
.rhist .win { font-style: normal; font-size: 11px; font-weight: 800; background: var(--accent); border: 1.5px solid var(--line); border-radius: 99px; padding: 0 6px; flex: none; }
.endlog .vsm { font-weight: 800; align-self: center; margin: 0 8px; font-size: 18px; }
#endRoomInfo { color: var(--muted); }
.btn.rec.on { background: #FFE0E0; }
.btn.rec.on .dot { animation: blink 1s infinite; }
.toast {
  position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40;
  background: rgba(26, 26, 26, .92); color: #fff; font-weight: 800; padding: 8px 16px; border-radius: 16px; font-size: 15px;
  max-width: calc(100% - 32px); text-align: center; animation: fadein .2s ease-out; pointer-events: none; word-break: break-word;
}
@media (max-width: 640px) {
  .tabs { flex-wrap: wrap; justify-content: center; }
  .rbar { flex-wrap: wrap; gap: 6px 10px; padding: 6px 10px; }
  .rcode b { font-size: 24px; }
  .rbtns { width: 100%; justify-content: stretch; }
  .rbtns .btn { flex: 1; }
  .rseats { gap: 6px; }
  .rseat { padding: 8px 4px 10px; border-radius: 15px; gap: 4px; }
  .rs-heads { height: 52px; }
  .rs-heads > img { width: 52px; height: 52px; }
  .rseat .h3 img { width: 40px; height: 40px; }
  .rseat .h3 img + img { margin-left: -12px; }
  .qh { width: 44px; height: 44px; font-size: 24px; }
  .qh + .qh { margin-left: -12px; }
  .rs-name { font-size: 16px; }
  .rs-sub { font-size: 12px; }
  .rscore { min-width: 52px; }
  .rscore b { font-size: 26px; }
  .rhist li { padding: 4px 6px; gap: 5px; font-size: 13px; }
  .rhist .sd img { width: 24px; height: 24px; }
}
/* ------------------------------------------------------------ campaign "Vượt ải" */
.camphead { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.campprog { flex: 1 1 280px; max-width: 460px; display: flex; flex-direction: column; gap: 3px; }
.cbar { height: 16px; border: 3px solid var(--line); border-radius: 99px; background: var(--soft); overflow: hidden; }
.cbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FFB300, var(--accent)); transition: width .3s; }
.campprog small { font-size: 14px; color: var(--ink); font-weight: 800; }
.ctest { font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; width: fit-content; }
.ctest input { width: 16px; height: 16px; accent-color: #B26A00; margin: 0; }
.campmap {
  display: grid; gap: 7px; background: var(--card); border: 3px solid var(--line); border-radius: 18px;
  padding: 10px 12px; box-shadow: 0 4px 0 var(--line); max-width: 860px; margin: 0 auto;
}
.cch { display: grid; grid-template-columns: 108px repeat(10, minmax(0, 1fr)); gap: 6px; align-items: center; }
.cch > span { font-size: 14px; font-weight: 800; line-height: 1.1; min-width: 0; }
.cch > span small { display: block; color: var(--muted); font-weight: 700; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnode {
  position: relative; aspect-ratio: 1; width: 100%; max-width: 56px; justify-self: center; padding: 0; min-width: 0;
  border: 2px solid var(--line); border-radius: 50%; background: var(--soft);
  display: flex; align-items: center; justify-content: center;
}
.cnode img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; display: block; }
.cnode i { font-style: normal; font-size: 13px; font-weight: 800; color: var(--muted); }
.cnode b {
  position: absolute; bottom: -5px; right: -6px; font-size: 10.5px; line-height: 14px; min-width: 18px; padding: 0 3px;
  border-radius: 99px; background: #fff; border: 1.5px solid var(--line); color: var(--ink); font-weight: 800; text-align: center;
}
.cnode.done { background: #E3F4E4; border-color: #2E7D32; }
.cnode.done b { background: #2E7D32; color: #fff; border-color: #1B5E20; }
.cnode.cur { background: var(--accent); animation: cpulse 1.3s ease-in-out infinite; }
.cnode.lock { opacity: .4; cursor: not-allowed; }
.cnode.lock img { filter: grayscale(1) brightness(.75); }
.cnode.test { border-style: dashed; }
.cnode.boss { border-width: 3px; border-color: #B71C1C; background: #FFE3E3; }
.cnode.boss b { background: #B71C1C; color: #fff; border-color: #7F0000; }
.cnode.boss.done b { background: #2E7D32; border-color: #1B5E20; }
.cnode.on { outline: 3px solid #2F80ED; outline-offset: 2px; z-index: 1; }
@keyframes cpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 179, 0, .7); } 50% { box-shadow: 0 0 0 6px rgba(255, 179, 0, 0); } }
.campinfo {
  margin: 12px auto 0; max-width: 860px; background: var(--card); border: 3px solid var(--line); border-radius: 18px;
  padding: 12px 16px; box-shadow: 0 4px 0 var(--line);
}
.campinfo .cmeta { display: block; font-size: 13px; color: var(--muted); font-weight: 800; }
.campinfo .btag { color: #fff; background: #B71C1C; border: 1.5px solid var(--line); border-radius: 99px; padding: 0 7px; font-size: 11px; }
.campinfo .lvtag { color: #B26A00; font-weight: 800; }
.campinfo dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 5px 10px; font-size: 15px; }
.campinfo dt { font-weight: 800; }
.campinfo dd { margin: 0; }
.campinfo .cvs { margin: 10px 0 0; padding-top: 8px; border-top: 2px dashed var(--soft); font-size: 15px; text-align: center; }
.campinfo .cvs > span { font-weight: 800; color: var(--muted); margin: 0 6px; }
.campinfo .warn { color: #B71C1C; font-size: 13px; }
.campinfo { scroll-margin-bottom: 100px; }
@media (min-width: 1000px) {
  .campwrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
  .campwrap .campmap { max-width: none; margin: 0; }
  .campwrap .campinfo { margin: 0; max-width: none; position: sticky; top: 12px; }
  .campwrap .campinfo dl { grid-template-columns: 1fr; gap: 1px; }
  .campwrap .campinfo dd { margin-bottom: 6px; }
  .campwrap .cch { grid-template-columns: 96px repeat(10, minmax(0, 1fr)); gap: 5px; }
}
.card .cprog {
  position: absolute; top: 5px; left: 5px; font-size: 10.5px; font-weight: 800; padding: 0 6px; line-height: 16px;
  border-radius: 99px; border: 1.5px solid var(--line); background: #E3F4E4; color: #1B5E20;
}
@media (max-width: 640px) {
  .camphead { gap: 8px; }
  .campmap { padding: 8px; gap: 6px; border-radius: 15px; }
  .cch { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px 4px; }
  .cch > span { grid-column: 1 / -1; display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
  .cch > span small { font-size: 11px; }
  .cnode b { font-size: 9px; line-height: 12px; min-width: 15px; bottom: -4px; right: -4px; padding: 0 2px; }
  .cnode i { font-size: 11px; }
  .campinfo { padding: 10px 12px; }
  .campinfo dl { grid-template-columns: 1fr; gap: 1px; }
  .campinfo dd { margin-bottom: 5px; }
  .card .cprog { font-size: 9px; padding: 0 4px; line-height: 13px; top: 3px; left: 3px; }
}

/* ============================================================ R11: portrait app shell
   One centered column (max 560 px), bottom navigation, action buttons docked above it,
   hero picker paged by faction, campaign map one chapter at a time. */
#select { max-width: 560px; margin: 0 auto; padding: 0 12px calc(150px + env(safe-area-inset-bottom)); min-height: 100dvh; }
@media (min-width: 600px) {
  html { background: #EADCC4; }
  body { background: transparent; }
  #select { background: var(--bg); box-shadow: 0 0 0 3px var(--line), 0 0 40px rgba(0, 0, 0, .12); }
}
.appbar {
  position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 -12px 6px; padding: calc(6px + env(safe-area-inset-top)) 12px 6px; background: var(--bg); border-bottom: 2px solid rgba(26, 26, 26, .12);
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand img { flex: none; }
.brand h1 { margin: 0; font-size: clamp(17px, 4.7vw, 21px); font-weight: 800; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar .stat { flex: none; font-size: 12px; font-weight: 800; color: var(--muted); background: var(--soft); border: 2px solid var(--line); border-radius: 99px; padding: 0 9px; line-height: 20px; }
.tagline { margin: 0 0 8px; font-size: 13.5px; line-height: 1.35; text-align: center; }
.kindbar { margin: 0 0 8px; }
.kindbar .seg button { padding: 3px 22px; font-size: 15px; }
.panel { margin-bottom: 10px; }

/* dock: actions + bottom nav */
.dock {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 560px); z-index: 8;
  background: var(--bg); border-top: 3px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 600px) { .dock { box-shadow: 0 0 0 3px var(--line); } }
.dock .actions { position: static; background: none; padding: 8px 10px 4px; gap: 8px; }
.dock .actions .btn { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 15px; overflow: hidden; text-overflow: ellipsis; border-width: 2.5px; box-shadow: 0 3px 0 var(--line); }
.dock .actions .btn.primary { flex: 1.5 1 0; font-size: 17px; }
.dock .actions .btn.rec .dot { width: 10px; height: 10px; }
.bottomnav {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; width: 100%;
  padding: 2px 4px 4px; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.bottomnav .tab {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0 3px; min-width: 0;
  font-size: 12px; font-weight: 800; color: var(--muted); border-radius: 12px; background: none; box-shadow: none; white-space: nowrap;
}
.bottomnav .tab svg {
  width: 24px; height: 24px; padding: 3px 14px; box-sizing: content-box; border-radius: 99px;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.bottomnav .tab.on { color: var(--line); background: none; box-shadow: none; }
.bottomnav .tab.on svg { background: var(--accent); box-shadow: inset 0 0 0 2px var(--line); }
.toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
body.busy .dock .actions .btn.primary { opacity: .7; }
body.noscroll { overflow: hidden; }

/* slots: compact for a 560 px column */
.slots { gap: 8px; }
.slot { padding: 6px 10px; gap: 8px; border-radius: 16px; }
.slot-img { width: 46px; height: 46px; }
.slot-text b { font-size: 17px; }
.teams { flex-direction: column; gap: 2px; }
.teams .vs { font-size: 20px; line-height: 1; }
.tteam { width: 100%; max-width: none; padding: 4px 6px 7px; border-radius: 15px; }
.tslot .slot-img { width: 44px; height: 44px; }
.rankbox { flex-direction: column; align-items: stretch; gap: 10px; }
.rankslot, .rankteam { max-width: none; flex: none; }
.rankopts { max-width: none; flex: none; }
.rules { font-size: 13.5px; margin-top: 8px; }

/* picker */
.picker { margin-top: 2px; }
.pbar { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.fstrip {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; padding: 2px 2px 6px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.fstrip::-webkit-scrollbar, .rstrip::-webkit-scrollbar, .chstrip::-webkit-scrollbar { display: none; }
.fstrip.dim .fchip { opacity: .55; }
.fchip {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 3px; scroll-snap-align: start;
  background: var(--card); border: 2px solid var(--line); border-radius: 99px; box-shadow: 0 2px 0 var(--line);
  font-size: 14px; font-weight: 800; color: var(--line); white-space: nowrap; line-height: 1.2;
}
.fchip img { width: 26px; height: 26px; border-radius: 50%; background: var(--soft); flex: none; }
.fchip small { font-size: 11px; color: var(--muted); font-weight: 800; }
.fchip.on { background: var(--accent); }
.fchip.on small { color: var(--line); }
.ibtn {
  flex: none; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; margin-bottom: 4px;
  background: var(--card); border: 2px solid var(--line); border-radius: 50%; box-shadow: 0 2px 0 var(--line); color: var(--line);
}
.ibtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.srow { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; }
#btnFacs[aria-expanded="true"] { background: var(--accent); }
.fgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 2px 0 8px; padding: 8px;
  background: var(--soft); border: 2.5px solid var(--line); border-radius: 14px; box-shadow: 0 3px 0 var(--line);
}
.fgrid.hidden { display: none; }
.ftile {
  display: flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 6px 4px 4px; text-align: left;
  background: var(--card); border: 2px solid var(--line); border-radius: 12px; box-shadow: 0 2px 0 var(--line);
  font-size: 12px; font-weight: 800; color: var(--line); line-height: 1.15;
}
.ftile img { width: 30px; height: 30px; border-radius: 50%; background: var(--soft); flex: none; }
.ftile span { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; hyphens: manual; }
.ftile small { flex: none; font-size: 10.5px; color: var(--muted); }
.ftile.on { background: var(--accent); }
.ftile.on small { color: var(--line); }
.srow input {
  flex: 1 1 auto; min-width: 0; border: 2.5px solid var(--line); border-radius: 12px; padding: 5px 12px; font-weight: 800; font-size: 16px;
  background: #FFFDF8; box-shadow: 0 2px 0 var(--line);
}
.srow input:focus { outline: 3px solid var(--accent); }
.srow .ibtn { margin: 0; }
.rstrip { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 0 4px; }
.rstrip .chip { flex: none; font-size: 12.5px; padding: 2px 9px; gap: 4px; white-space: nowrap; }
.grid { display: block; }
.grid .sec { font-size: 15px; margin: 2px 0 6px; }
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.card { padding: 6px 3px 7px; border-radius: 14px; border-width: 2.5px; box-shadow: 0 3px 0 var(--line); gap: 1px; }
.card img { width: 70%; max-width: 76px; }
.card .nm { font-size: 13.5px; line-height: 1.1; }
.card .rl { font-size: 10px; line-height: 15px; height: 18px; padding: 0 6px; border-width: 1.5px; }
.card .pick { font-size: 10px; padding: 0 5px; line-height: 15px; top: 3px; right: 3px; }
.card .cprog { font-size: 9px; padding: 0 4px; line-height: 13px; top: 3px; left: 3px; }
.cards .empty { grid-column: 1 / -1; text-align: center; color: var(--muted); margin: 18px 0; }
.detail { margin-top: 10px; padding: 10px 12px; }
.detail dl { grid-template-columns: 1fr; gap: 1px; font-size: 14.5px; }
.detail dd { margin-bottom: 5px; }
.dhead img { width: 56px; height: 56px; }
.dhead h3 { font-size: 21px; }

/* picker as a bottom sheet (Vượt ải) */
.psheet { position: fixed; inset: 0; z-index: 30; background: rgba(26, 26, 26, .45); display: flex; align-items: flex-end; justify-content: center; animation: fadein .15s ease-out; }
.psheet-in {
  width: min(100%, 560px); max-height: 88dvh; display: flex; flex-direction: column; background: var(--bg);
  border: 3px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; animation: sheetup .22s ease-out;
}
@keyframes sheetup { from { transform: translateY(48px); opacity: .5; } }
.phead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 6px; }
.phead b { font-size: 19px; }
#pickHost { overflow-y: auto; overscroll-behavior: contain; padding: 0 12px calc(16px + env(safe-area-inset-bottom)); }

/* campaign: header, chapter strip, one chapter path */
.camphead { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; margin-bottom: 8px; }
#campSolo { cursor: pointer; max-width: none; }
#campSolo .chg {
  margin-left: auto; flex: none; font-size: 12.5px; font-weight: 800; padding: 1px 10px; border-radius: 99px;
  border: 2px solid var(--line); background: var(--accent); box-shadow: 0 2px 0 var(--line); white-space: nowrap;
}
.campprog { max-width: none; flex: none; }
.chstrip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 7px; margin: 0 0 4px; scroll-behavior: smooth; }
.chb {
  flex: none; min-width: 46px; display: flex; flex-direction: column; align-items: center; line-height: 1.05; padding: 3px 8px 4px;
  background: var(--card); border: 2px solid var(--line); border-radius: 12px; box-shadow: 0 2px 0 var(--line); color: var(--line);
}
.chb b { font-size: 16px; font-weight: 800; }
.chb small { font-size: 10px; font-weight: 800; color: var(--muted); }
.chb.on { background: var(--accent); }
.chb.on small { color: var(--line); }
.chb.done small { color: #2E7D32; }
.chb.lock { opacity: .45; }
.campmap { display: block; padding: 8px 10px 14px; max-width: none; }
.chhead { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; line-height: 1.2; }
.chhead b { font-size: 17px; flex: none; }
.chhead span { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chhead span i { font-style: normal; color: #B71C1C; font-weight: 800; }
.chhead small { flex: none; font-size: 12.5px; font-weight: 800; }
.cpath { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 8px; padding: 2px 2px 0; }
.cpath::before {
  content: ''; position: absolute; left: 10%; right: 10%; top: calc(25% - 2px); bottom: calc(25% - 2px);
  border: 4px dashed #DCCAAE; border-left: 0; border-radius: 0 999px 999px 0; pointer-events: none;
}
.cpath .cnode { max-width: 64px; z-index: 1; }
.cpath .cnode b { font-size: 11px; line-height: 15px; min-width: 19px; }
.cpath .cnode.boss { max-width: 72px; }
.campinfo { margin-top: 10px; padding: 10px 12px; max-width: none; }
.campinfo dl { grid-template-columns: 1fr; gap: 1px; font-size: 14.5px; }
.campinfo dd { margin-bottom: 5px; }
details.more { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
details.more summary { cursor: pointer; font-weight: 800; color: var(--ink); width: fit-content; }
details.more p { margin: 6px 0; line-height: 1.4; }

/* rooms & board inside the column */
.roomform { gap: 8px; }
.roomform .field { flex: 1 1 150px; }
.roomform .field:last-child { flex: 0 0 auto; }
.roomgo { margin-top: 12px; gap: 8px; }
.roomgo .btn { flex: 1 1 0; min-width: 0; }
.rbar { margin-bottom: 10px; }
.boardbar { gap: 6px; }
@media (max-width: 380px) {
  .brand h1 { font-size: 18px; }
  .cards { gap: 6px; }
  .card .nm { font-size: 12.5px; }
  .bottomnav .tab { font-size: 11px; }
  .bottomnav .tab svg { padding: 3px 10px; }
  .dock .actions .btn { font-size: 14px; }
  .dock .actions .btn.primary { font-size: 15px; }
}

.dock .actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.rec .dot { flex: none; margin: 0; }
.srow input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.tslot { padding: 4px 3px 4px; border-radius: 12px; }
.tslot .slot-img { width: 40px; height: 40px; }
.tslot b { font-size: 12.5px; }
.tlabel { font-size: 14px; margin-bottom: 2px; line-height: 1.2; }
.cpath .cnode.lock { opacity: 1; background: #F1E8DA; border-color: #B9A88F; }
.cpath .cnode.lock i { color: #B9A88F; }
.cpath .cnode.lock img { opacity: .55; }
.cpath .cnode.test { background: #FFF8E6; }
.appbar .stat { font-size: 11.5px; padding: 0 8px; }

/* ============================================================ v18 theme "Sân Chơi Nắng"
   Bright sky + sunshine yellow, sticker-style navy outlines, chunky tactile buttons, saturated role tiles.
   Replaces the v15 "Đêm Huyền Thoại" dark skin with the same selectors; layout rules above are unchanged.
   Research: ~/game_design/research_ui_v18_sang_notes.md. Rollback: tools/rollback_ui.sh v17_20261021 */
:root {
  --bg: #DFF4FF; --bg0: #BDEBFF; --ink: #1E2A5A; --line: #1E2A5A; --card: #FFFFFF; --muted: #56628F; --soft: #EEF8FF;
  --accent: #FFC93C; --accent2: #FF8A3D; --red: #FF4F6D; --blue: #2F8CFF; --green: #2FC26B; --glass: rgba(255, 255, 255, .8);
  --hi: inset 0 2px 0 rgba(255, 255, 255, .9); --ledge: 0 4px 0 var(--line);
  --panel: linear-gradient(180deg, #FFFFFF 0%, #F2F9FF 100%);
  --sun: linear-gradient(180deg, #FFF27F 0%, #FFD43A 50%, #FFB400 100%);
  --blueT: #1F6FE0; --redT: #D7263D;
  color-scheme: light;
}
html { background: var(--bg0); }
body { background: var(--bg0); color: var(--ink); }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 22% at 12% 3%, rgba(255, 255, 255, .9) 0%, transparent 70%),
    radial-gradient(45% 20% at 94% 10%, rgba(255, 255, 255, .75) 0%, transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .5) 0 2px, transparent 2.6px) 0 0 / 28px 28px,
    linear-gradient(180deg, #74CFFF 0%, #A9E3FF 34%, #D7F2FF 70%, #EAF9FF 100%);
}
::selection { background: rgba(255, 201, 60, .55); }
.loading { background: var(--bg0); color: var(--ink); font-size: 18px; }
.loading img { filter: drop-shadow(0 6px 0 rgba(30, 42, 90, .25)); }
#loadPct { color: var(--blueT); }

/* column + app bar */
#select { background: none; }
@media (min-width: 600px) {
  html { background: #9EDCFF; }
  body { background: transparent; }
  #select { background: rgba(255, 255, 255, .32); box-shadow: 0 0 0 2px rgba(30, 42, 90, .12), 0 0 50px rgba(30, 42, 90, .18); }
}
.appbar {
  background: rgba(255, 255, 255, .92); border-bottom: 3px solid var(--line); box-shadow: 0 3px 0 rgba(30, 42, 90, .1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.brand img { filter: drop-shadow(0 2px 0 rgba(30, 42, 90, .35)); }
.brand h1 {
  font-size: clamp(18px, 5vw, 22px); letter-spacing: .3px; color: #FFD43A; background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none;
  text-shadow: 2px 0 0 var(--line), -2px 0 0 var(--line), 0 2px 0 var(--line), 0 -2px 0 var(--line), 1.5px 1.5px 0 var(--line), -1.5px 1.5px 0 var(--line), 1.5px -1.5px 0 var(--line), -1.5px -1.5px 0 var(--line), 0 4px 0 var(--line);
}
.appbar .stat { background: #EEF6FF; border: 1.5px solid rgba(30, 42, 90, .25); color: var(--muted); }
.tagline { color: var(--muted); }

/* buttons: flat saturated fill, navy outline, hard ledge; press = sink */
.btn {
  border: 2.5px solid var(--line); border-radius: 14px; color: #fff;
  background: linear-gradient(180deg, #74C6FF 0%, #2F9BFF 55%, #1E82EE 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 40, 120, .18), var(--ledge);
  text-shadow: 0 2px 0 rgba(30, 42, 90, .6), 1px 0 0 rgba(30, 42, 90, .45), -1px 0 0 rgba(30, 42, 90, .45);
}
.btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 40, 120, .18), 0 1px 0 var(--line); }
.btn.primary {
  background: var(--sun); color: var(--line); text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(200, 110, 0, .35), var(--ledge);
}
.btn.ghost { background: linear-gradient(180deg, #FFFFFF 0%, #E9F3FF 100%); color: var(--ink); text-shadow: none; }
.btn.rec { background: linear-gradient(180deg, #FF95A8 0%, #FF4F6D 55%, #E6375A 100%); }
.btn.rec .dot { background: #fff; border: 0; box-shadow: 0 0 0 2px rgba(150, 0, 30, .55), 0 0 6px rgba(255, 255, 255, .8); }
.btn.rec.on { background: linear-gradient(180deg, #FFB0BE, #FF6680); }
.btn.danger { background: linear-gradient(180deg, #FF8FA0 0%, #E83A57 100%); }
.btn:focus-visible, .tab:focus-visible, .card:focus-visible, .chip:focus-visible, .fchip:focus-visible, .cnode:focus-visible, .chb:focus-visible, .slot:focus-visible, .tslot:focus-visible {
  outline: 3px solid var(--blueT); outline-offset: 2px;
}

/* segmented control + chips */
.seg { background: #E3F1FF; border: 2px solid var(--line); box-shadow: inset 0 2px 0 rgba(30, 42, 90, .12); }
.seg button { color: var(--muted); }
.seg button.on { color: var(--line); background: var(--sun); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 var(--line); }
.chip { background: #FFFFFF; border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); color: var(--ink); }
.chip.on { color: var(--line); background: var(--sun); border-color: var(--line); box-shadow: 0 2px 0 var(--line); }
.chip .rd { border: 1.5px solid var(--line); box-shadow: none; }
.fchip, .ftile { background: #FFFFFF; border: 2px solid rgba(30, 42, 90, .28); box-shadow: 0 2px 0 rgba(30, 42, 90, .2); color: var(--ink); }
.fchip img, .ftile img { background: #E8F4FF; box-shadow: 0 0 0 1.5px rgba(30, 42, 90, .3); }
.fchip small, .ftile small { color: var(--muted); }
.fchip.on, .ftile.on { color: var(--line); background: var(--sun); border-color: var(--line); box-shadow: 0 2px 0 var(--line); }
.fchip.on small, .ftile.on small { color: #6B4A00; }
.fgrid { background: rgba(255, 255, 255, .85); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.ibtn { background: #FFFFFF; border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); color: var(--ink); }
#btnFacs[aria-expanded="true"] { background: var(--sun); color: var(--line); border-color: var(--line); }
.srow input, .field input, .roomjoin input { background: #FFFFFF; color: var(--ink); border: 2px solid var(--line); box-shadow: inset 0 2px 0 rgba(30, 42, 90, .1); }
.srow input::placeholder, .field input::placeholder, .roomjoin input::placeholder { color: #7F8CB5; }
.srow input:focus, .field input:focus, .roomjoin input:focus { outline: 3px solid rgba(47, 140, 255, .45); border-color: var(--blueT); }
.field { background: var(--panel); border: 2.5px solid var(--line); box-shadow: var(--hi), var(--ledge); }
.field > span { color: var(--muted); }
.boardbar select { background: #FFFFFF; color: var(--ink); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); }
.sec, .grid .sec { color: var(--ink); }
.sec small { color: var(--muted); }

/* hero tiles: saturated role colour (Squad Busters-style), portrait on top, navy name plate */
.cards { gap: 8px; }
.card {
  --rc: #6D4C41; overflow: hidden; padding: 6px 0 0; gap: 0; border: 2.5px solid var(--line); border-radius: 14px; color: #fff;
  background:
    radial-gradient(80% 62% at 50% 36%, rgba(255, 255, 255, .55) 0%, transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .12) 0 6px, transparent 6px 14px),
    linear-gradient(180deg, color-mix(in srgb, var(--rc) 50%, #FFFFFF) 0%, var(--rc) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 var(--line);
  transition: transform .1s, box-shadow .15s;
}
.card img { order: 0; width: 74%; max-width: 80px; filter: drop-shadow(0 3px 0 rgba(30, 42, 90, .35)); }
.card .rl { order: 1; margin-top: -9px; position: relative; z-index: 1; border-width: 1.5px; box-shadow: 0 2px 0 rgba(30, 42, 90, .35); }
.card .nm {
  order: 2; margin-top: auto; width: 100%; padding: 3px 3px 4px; margin-bottom: 0;
  background: var(--line); color: #fff; text-shadow: none; border-top: 2px solid var(--line);
  display: block; white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.card:hover { transform: translateY(-1px); }
.card:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 0 0 var(--line); }
.card.sel { outline: none; transform: translateY(-2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 3.5px #FFC93C, 0 4px 0 3.5px var(--line); }
.card.sel:has(.pick.t0) { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 3.5px #2F8CFF, 0 4px 0 3.5px var(--line); }
.card.sel:has(.pick.t1) { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 3.5px #FF4F6D, 0 4px 0 3.5px var(--line); }
.card .pick { background: var(--sun); color: var(--line); border: 1.5px solid var(--line); z-index: 2; }
.card .pick.t0 { background: linear-gradient(180deg, #74C6FF, #1E82EE); color: #fff; }
.card .pick.t1 { background: linear-gradient(180deg, #FF95A8, #E6375A); color: #fff; }
.card .cprog { background: #1E9E5A; color: #fff; border: 1.5px solid var(--line); z-index: 2; }
.cards .empty { color: var(--muted); }
.rl { border: 1.5px solid var(--line); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }

/* slots, VS, teams */
.slot { color: var(--ink); border: 2.5px solid var(--line); box-shadow: var(--hi), var(--ledge); background: linear-gradient(115deg, #CDE6FF 0%, #FFFFFF 62%); }
.slot[data-side="1"] { background: linear-gradient(245deg, #FFD3DC 0%, #FFFFFF 62%); flex-direction: row-reverse; text-align: right; }
.rankslot, #campSolo { background: linear-gradient(115deg, #FFEFA8 0%, #FFFFFF 62%); }
.slot.active { outline: none; box-shadow: var(--hi), 0 0 0 3.5px #FFC93C, 0 5px 0 3.5px var(--line); }
.slot-img { background-color: #EAF5FF; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--line), inset 0 -6px 0 rgba(30, 42, 90, .08); }
.slot-text small { color: var(--muted); }
.slot-text b { text-shadow: none; }
.rankslot .best, .tlabel .best { color: #C25E00; }
.vs {
  color: #FFD43A; -webkit-text-stroke: 0; font-style: italic; font-size: 30px; letter-spacing: -1px;
  text-shadow: 2px 0 0 var(--line), -2px 0 0 var(--line), 0 2px 0 var(--line), 0 -2px 0 var(--line), 1.5px 1.5px 0 var(--line), -1.5px 1.5px 0 var(--line), 1.5px -1.5px 0 var(--line), -1.5px -1.5px 0 var(--line), 0 4px 0 var(--line);
}
.teams .vs { font-size: 22px; }
.tteam { background: linear-gradient(180deg, #CFE5FF, #F4FAFF); border: 2.5px solid var(--line); box-shadow: var(--hi), var(--ledge); }
.tteam.t1 { background: linear-gradient(180deg, #FFD6DE, #FFF6F8); }
.tlabel { color: var(--blueT); text-shadow: none; }
.tteam.t1 .tlabel { color: var(--redT); }
.tslot { background: #FFFFFF; border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); color: var(--ink); }
.tslot.active { outline: none; box-shadow: 0 0 0 3px #FFC93C, 0 3px 0 3px var(--line); }
.tslot b { text-shadow: none; }
.rules { color: var(--muted); }
.rules b { color: var(--ink); }

/* detail + generic panels */
.detail, .campinfo, .campmap, .rbar, .sheet .endrec video { background: var(--panel); border: 2.5px solid var(--line); box-shadow: var(--hi), var(--ledge); color: var(--ink); }
.detail dt, .campinfo dt { color: var(--blueT); }
.dhead img { filter: drop-shadow(0 3px 0 rgba(30, 42, 90, .3)); }
.dhead h3 { text-shadow: none; }
.dhead .sub, .campinfo .cmeta { color: var(--muted); }
.selmsg { background: #FFE6EB; border: 2px solid var(--red); color: #A3122E; }
details.more { color: var(--muted); }
details.more summary { color: var(--ink); }

/* leaderboard */
.boardinfo { color: var(--muted); }
.board li { background: var(--panel); border: 2.5px solid var(--line); box-shadow: 0 3px 0 var(--line); color: var(--ink); }
.board li.mine { background: linear-gradient(90deg, #FFF0A8, #FFFFFF 70%); }
.board li.empty { color: var(--muted); }
.board .rk { background: #E8F2FF; border: 1.5px solid var(--line); color: var(--ink); }
.board li:nth-child(1) .rk.top { background: linear-gradient(180deg, #FFF09A, #FFC21C 60%, #E39100); color: #4A2600; border-color: var(--line); }
.board li:nth-child(2) .rk.top { background: linear-gradient(180deg, #FFFFFF, #C9CFE0 60%, #9AA3BD); color: #252A44; border-color: var(--line); }
.board li:nth-child(3) .rk.top { background: linear-gradient(180deg, #FFD1A8, #E08A4C 60%, #B4612A); color: #3B1C08; border-color: var(--line); }
.board .who small, .board .score small { color: var(--muted); }
.board .you, .tag { background: var(--sun); color: var(--line); border-color: var(--line); }
.tag.soft { background: #FFFFFF; }
.bests span { background: #FFFFFF; border: 1.5px solid rgba(30, 42, 90, .25); color: var(--ink); }
.h3 img { background: #EAF5FF; box-shadow: 0 0 0 2px var(--line); }

/* dock + bottom nav: white tray, active tab = raised sunshine tile */
.dock { background: #FFFFFF; border-top: 3px solid var(--line); box-shadow: 0 -6px 18px rgba(30, 42, 90, .15); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (min-width: 600px) { .dock { box-shadow: 0 0 0 2px rgba(30, 42, 90, .12), 0 -6px 18px rgba(30, 42, 90, .15); } }
.dock .actions { padding-top: 9px; }
.dock .actions .btn { border-width: 2.5px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 40, 120, .18), 0 3px 0 var(--line); }
.dock .actions .btn.primary { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(200, 110, 0, .35), 0 3px 0 var(--line); }
.bottomnav { padding: 2px 4px 4px; gap: 4px; }
.bottomnav .tab { position: relative; gap: 0; padding: 3px 0 4px; color: var(--muted); border-radius: 14px; border: 2px solid transparent; transition: color .15s, background-color .15s; }
.bottomnav .tab img {
  width: 34px; height: 34px; display: block; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), filter .18s;
  filter: saturate(.85) drop-shadow(0 2px 0 rgba(30, 42, 90, .25)); -webkit-user-drag: none; user-select: none;
}
.bottomnav .tab span { line-height: 1.2; }
.bottomnav .tab.on { color: var(--line); background: var(--sun); border-color: var(--line); box-shadow: 0 3px 0 var(--line); text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.bottomnav .tab.on::before { content: none; }
.bottomnav .tab.on img { transform: translateY(-7px) scale(1.2); filter: drop-shadow(0 3px 0 rgba(30, 42, 90, .45)); }
.bottomnav .tab:active img { transform: translateY(1px) scale(.94); }
.toast { background: var(--line); color: #fff; border: 2px solid #FFD43A; box-shadow: 0 4px 0 rgba(30, 42, 90, .35); }

/* bottom sheet + end dialog */
.psheet, .modal { background: rgba(30, 42, 90, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.psheet-in { background: linear-gradient(180deg, #FFFFFF 0%, #EEF8FF 40%); border: 3px solid var(--line); border-bottom: 0; box-shadow: 0 -6px 24px rgba(30, 42, 90, .3), inset 0 2px 0 #fff; }
.phead b { color: var(--ink); text-shadow: none; }
.sheet {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F8FF 55%, #E2F2FF 100%); border: 3px solid var(--line); color: var(--ink);
  box-shadow: inset 0 2px 0 #fff, 0 8px 0 var(--line), 0 20px 50px rgba(30, 42, 90, .35);
}
.sheet h2 { color: var(--ink); text-shadow: 0 2px 0 rgba(255, 255, 255, .9); }
.sheet h2 span { -webkit-text-stroke: 0; }
.endsub, .endmsg { color: var(--ink); }
.endsub .warn { color: var(--redT); }
.endsize, #endRoomInfo { color: var(--muted); }
.endlog .grp { background: #F3F9FF; border: 1.5px solid rgba(30, 42, 90, .25); }
.endlog .grp.lost { background: #FFE6EB; border-color: var(--red); }
.endlog img { background: #EAF5FF; }

/* battle screen */
#battle { background: transparent; }
#cv { background: #A9E3FF; box-shadow: 0 0 0 3px var(--line), 0 8px 0 rgba(30, 42, 90, .25), 0 10px 40px rgba(30, 42, 90, .25); }

/* rooms */
.rcode small, .rmeta small { color: var(--muted); }
.rcode b { color: var(--blueT); text-shadow: none; }
.rpub { color: var(--muted); }
.rpub input { accent-color: #FFB400; }
.rseat { background: linear-gradient(180deg, #CFE5FF, #FFFFFF); border: 2.5px solid var(--line); box-shadow: var(--hi), var(--ledge); }
.rseat.t1 { background: linear-gradient(180deg, #FFD6DE, #FFFFFF); }
.rseat.me { outline: none; box-shadow: var(--hi), 0 0 0 3.5px #FFC93C, 0 5px 0 3.5px var(--line); }
.rseat.empty { background: rgba(255, 255, 255, .55); border: 2.5px dashed rgba(30, 42, 90, .35); box-shadow: none; }
.rs-heads > img { background: #EAF5FF; box-shadow: 0 0 0 3px var(--line); }
.rseat .h3 img { box-shadow: 0 0 0 2.5px var(--line); }
.qh { background: #EAF5FF; box-shadow: 0 0 0 2px var(--line); }
.rseat .rs-name { color: var(--blueT); text-shadow: none; }
.rseat.t1 .rs-name { color: var(--redT); }
.rseat.empty .rs-name, .rs-sub { color: var(--muted); }
.qh.plus { border-color: rgba(30, 42, 90, .35); color: var(--muted); }
.pill { border: 1.5px solid var(--line); color: var(--ink); }
.rscore b { -webkit-text-stroke: 0; color: var(--ink); text-shadow: 0 2px 0 #fff; }
.rscore small { color: var(--muted); }
.rnote { color: var(--ink); }
.rhist h4 { color: var(--muted); }
.rhist li { background: var(--panel); border: 2px solid var(--line); color: var(--ink); }
.rhist .no, .rhist .dur, .rhist .vsm { color: var(--muted); }
.rhist .win { background: var(--sun); color: var(--line); border-color: var(--line); }
.rhist .sd img { background: #EAF5FF; }

/* campaign */
.cbar { background: #E3EEFF; border: 2px solid var(--line); box-shadow: inset 0 2px 0 rgba(30, 42, 90, .12); }
.cbar i { background: linear-gradient(180deg, #FFF27F 0%, #FFD43A 45%, #FF9F1C 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.campprog small { color: var(--ink); }
.ctest { color: var(--muted); }
.ctest input { accent-color: #FFB400; }
#campSolo .chg { background: var(--sun); color: var(--line); border: 1.5px solid var(--line); }
.chb { background: #FFFFFF; border: 2px solid rgba(30, 42, 90, .28); box-shadow: 0 2px 0 rgba(30, 42, 90, .2); color: var(--ink); }
.chb small { color: var(--muted); }
.chb.on { color: var(--line); background: var(--sun); border-color: var(--line); box-shadow: 0 2px 0 var(--line); }
.chb.on small { color: #6B4A00; }
.chb.done small { color: #1E8A50; }
.chb.on.done small { color: #1B6B3A; }
.campmap {
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(255, 255, 255, .9), transparent 70%),
    repeating-linear-gradient(0deg, rgba(47, 140, 255, .07) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(47, 140, 255, .07) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #E4F6FF, #CDEFFF);
}
.chhead b { color: var(--ink); }
.chhead span { color: var(--muted); }
.chhead span i { color: var(--redT); }
.cpath::before { border-color: rgba(30, 42, 90, .3); }
.cnode { background: radial-gradient(circle at 50% 35%, #FFFFFF, #DCEBFF); border: 2.5px solid var(--line); box-shadow: inset 0 -3px 0 rgba(30, 42, 90, .1), 0 3px 0 var(--line); }
.cnode i { color: var(--muted); }
.cnode b { background: var(--line); color: #fff; border: 1.5px solid #fff; }
.cnode.done { background: radial-gradient(circle at 50% 35%, #A6F0C2, #2FC26B); border-color: var(--line); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 3px 0 var(--line); }
.cnode.done b { background: #1E9E5A; border-color: var(--line); }
.cnode.cur { background: radial-gradient(circle at 50% 35%, #FFF6A8, #FFC21A); animation: cpulse18 1.3s ease-in-out infinite; }
.cnode.cur i { color: #6B4A00; }
@keyframes cpulse18 { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 180, 0, .7), 0 3px 0 var(--line); } 50% { box-shadow: 0 0 0 9px rgba(255, 180, 0, 0), 0 3px 0 var(--line); } }
.cnode.boss { border: 3px solid var(--line); background: radial-gradient(circle at 50% 35%, #FF9DAE, #E5385A); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 0 0 3px #FFC93C, 0 3px 0 3px var(--line); }
.cnode.boss b { background: var(--redT); color: #fff; border-color: #fff; }
.cnode.boss.done { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 0 0 3px #2FC26B, 0 3px 0 3px var(--line); }
.cnode.boss.done b { background: #1E9E5A; border-color: var(--line); }
.cnode.on { outline: 3px solid var(--blueT); outline-offset: 3px; }
.cpath .cnode.lock { background: #EDF1F8; border-color: rgba(30, 42, 90, .3); box-shadow: none; opacity: 1; }
.cpath .cnode.lock i { color: #8C97B8; }
.cpath .cnode.lock img { opacity: .5; }
.cpath .cnode.test { background: #FFF6D6; border-style: dashed; }
.campinfo .btag { background: var(--redT); border-color: var(--line); }
.campinfo .lvtag { color: #C25E00; }
.campinfo .cvs { border-top: 1px dashed rgba(30, 42, 90, .22); }
.campinfo .cvs > span { color: var(--muted); }
.campinfo .warn { color: var(--redT); }

/* motion preferences */
@media (prefers-reduced-motion: reduce) {
  .bottomnav .tab img, .card { transition: none; }
  .cnode.cur { animation: none; }
}
.slots .slot-text b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.08; overflow-wrap: normal; word-break: normal; }
.slots .slot-text b.long { font-size: 14px; }
/* ===================== v16: khung video (Chuẩn / TikTok-Reels) ===================== */
.vidbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 6px; height: 28px; padding: 0 10px 0 8px;
  font: 800 12px/1 "Baloo 2", system-ui, sans-serif; color: #E6E4FF; background: var(--glass, rgba(255,255,255,.08)); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 99px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vidbtn:active { transform: translateY(1px); }
.vidbtn .vframe { width: 11px; height: 18px; border: 2px solid currentColor; border-radius: 3px; position: relative; opacity: .9; }
.vidbtn .vframe::after { content: ""; position: absolute; left: 1px; right: 1px; top: 4px; bottom: 4px; background: currentColor; border-radius: 1px; opacity: .55; }
.vidbtn.on { color: #1B1530; background: linear-gradient(180deg, #FFE27A, #F5B225); border-color: #0B0C24; box-shadow: 0 2px 0 #8A5A00; }
.appbar .vidbtn + .stat { margin-left: 0; }
.vidnote { margin: 0 14px 8px; font-size: 13px; color: var(--muted, #A7ACDD); }
.vidopts { display: grid; gap: 10px; padding: 0 14px 16px; }
.vopt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 16px; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .14); color: #E6E4FF; font: inherit; -webkit-tap-highlight-color: transparent; }
.vopt.on { border-color: #FFC83D; background: rgba(255, 200, 61, .12); box-shadow: 0 0 0 3px rgba(255, 200, 61, .18); }
.vopt .vtx { display: grid; gap: 2px; }
.vopt .vtx b { font-size: 16px; color: #FFFFFF; }
.vopt.on .vtx b { color: #FFC83D; }
.vopt .vtx small { font-size: 12.5px; line-height: 1.35; color: var(--muted, #A7ACDD); }
/* mini 9:16 frame preview (positions follow the real canvas layouts) */
.vprev { flex: none; position: relative; width: 54px; height: 96px; border-radius: 8px; overflow: hidden; background: #1A1C4E; border: 2px solid #0B0C24; }
.vprev i, .vprev em { position: absolute; display: block; }
.vprev i { border-radius: 3px; }
.vprev .c1, .vprev .c2 { background: #3A3F95; border: 1px solid #6C72D8; }
.vprev .ar { background: #FFFFFF; border: 2px solid #F5B225; border-radius: 2px; }
.vprev.std .c1 { left: 5.5%; right: 5.5%; top: 4.2%; height: 20.4%; }
.vprev.std .ar { left: 5.5%; right: 5.5%; top: 25.5%; height: 50%; }
.vprev.std .c2 { left: 5.5%; right: 5.5%; top: 77.2%; height: 20.4%; }
.vprev.safe .zt { left: 0; right: 0; top: 0; height: 11.5%; background: repeating-linear-gradient(135deg, rgba(232, 54, 74, .45) 0 3px, transparent 3px 6px); }
.vprev.safe .zb { left: 0; right: 0; bottom: 0; height: 21.9%; background: repeating-linear-gradient(135deg, rgba(232, 54, 74, .45) 0 3px, transparent 3px 6px); }
.vprev.safe .zr { right: 0; width: 11.1%; top: 11.5%; bottom: 21.9%; background: repeating-linear-gradient(135deg, rgba(232, 54, 74, .3) 0 3px, transparent 3px 6px); }
.vprev.safe .c1 { left: 11.1%; right: 11.1%; top: 11.7%; height: 15.8%; }
.vprev.safe .ar { left: 20.4%; right: 20.4%; top: 28.1%; height: 33.3%; }
.vprev.safe .c2 { left: 11.1%; right: 11.1%; top: 62.1%; height: 15.8%; }
/* v16: header room for the video-frame button on phones */
/* v19: #heroStat is the Kho tướng button, it stays visible on phones */

/* ===== v17 DUYÊN PHẬN chips ===== */
.bondrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 5px; }
.bondrow:empty { display: none; }
.bchip { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1.35;
  color: var(--bc); border: 1.5px solid var(--bc); background: color-mix(in srgb, var(--bc) 18%, rgba(16, 18, 52, .85)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bchip.on { box-shadow: 0 0 10px color-mix(in srgb, var(--bc) 45%, transparent); color: #fff; }
.bchip.on i { color: var(--bc); font-style: normal; }
.bchip.near { border-style: dashed; font-weight: 700; opacity: .8; background: transparent; }
.dbonds { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 5px; }
.dbonds li { padding: 5px 8px; border-left: 3px solid var(--bc); border-radius: 6px; background: rgba(255, 255, 255, .05); font-size: 13.5px; }
.dbonds li b { color: var(--bc); }
.dbonds li em { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--bc); color: #1b1d3a; }
.dbonds li small { opacity: .75; }
.dbonds li span { display: block; margin-top: 2px; opacity: .92; }
.dbonds li.on { background: color-mix(in srgb, var(--bc) 14%, transparent); }
.bnote { display: block; opacity: .7; font-size: 12px; }

/* ===================== v18 HỖN CHIẾN (free-for-all) ===================== */
:root { --f0: #2F80ED; --f1: #E5484D; --f2: #22B573; --f3: #F59E0B; --f4: #8B5CF6; --f5: #EC4899; }
.ffabox { display: grid; gap: 8px; padding: 10px; border-radius: 16px; background: rgba(5, 6, 25, .25); }
.ffahead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ffahead .tlabel { font-size: 13px; }
.seg.mini button { min-width: 38px; padding: 4px 8px; font-size: 14px; }
.fslots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fslot { border-top: 4px solid var(--fc) !important; }
.fslot.f0 { --fc: var(--f0); } .fslot.f1 { --fc: var(--f1); } .fslot.f2 { --fc: var(--f2); }
.fslot.f3 { --fc: var(--f3); } .fslot.f4 { --fc: var(--f4); } .fslot.f5 { --fc: var(--f5); }
.card .pick.f0 { background: var(--f0); color: #fff; } .card .pick.f1 { background: var(--f1); color: #fff; }
.card .pick.f2 { background: var(--f2); color: #fff; } .card .pick.f3 { background: var(--f3); color: #fff; }
.card .pick.f4 { background: var(--f4); color: #fff; } .card .pick.f5 { background: var(--f5); color: #fff; }
.ffarank { list-style: none; margin: 6px auto 0; padding: 0; display: grid; gap: 6px; max-width: 360px; text-align: left; }
.ffarank li { display: grid; grid-template-columns: 34px 40px 1fr; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 12px; background: rgba(255, 255, 255, .08); border-left: 5px solid var(--fc, #888); }
.ffarank li.f0 { --fc: var(--f0); } .ffarank li.f1 { --fc: var(--f1); } .ffarank li.f2 { --fc: var(--f2); }
.ffarank li.f3 { --fc: var(--f3); } .ffarank li.f4 { --fc: var(--f4); } .ffarank li.f5 { --fc: var(--f5); }
.ffarank li.top { background: rgba(255, 213, 74, .22); }
.ffarank li b { font-size: 16px; }
.ffarank li img { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.ffarank li small { display: block; font-size: 12px; opacity: .75; }

/* ===== v18 HỖN CHIẾN rooms: 6-seat grid ===== */
.rseats.ffa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rseats.ffa .rseat { padding: 8px 4px 10px; gap: 4px; min-width: 0; }
.rseats.ffa .rseat .rs-heads img, .rseats.ffa .rseat .qh { width: 52px; height: 52px; }
.rseats.ffa .rseat .rs-name { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rseats.ffa .rseat .btn.sm { padding: 6px 8px; font-size: 12.5px; }
.rseat.f0 { --tc: var(--f0); } .rseat.f1 { --tc: var(--f1); } .rseat.f2 { --tc: var(--f2); }
.rseat.f3 { --tc: var(--f3); } .rseat.f4 { --tc: var(--f4); } .rseat.f5 { --tc: var(--f5); }
.rseats.ffa .rseat:not(.empty) { border-top: 4px solid var(--tc); }
.rhist li.ffa .sd img.lost { opacity: .45; filter: grayscale(.7); }
.rhist li.ffa .sd img.top { box-shadow: 0 0 0 2.5px #FFC83D; }

/* ===================== v18 "Sân Chơi Nắng": bright re-colour of the v16-v18 blocks above (layout untouched) ===================== */
.vidbtn { color: var(--ink); background: #FFFFFF; border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); }
.vidbtn.on { color: var(--line); background: var(--sun); border-color: var(--line); box-shadow: 0 2px 0 var(--line); }
.vidnote { color: var(--muted); }
.vopt { background: #FFFFFF; border: 2px solid rgba(30, 42, 90, .22); color: var(--ink); box-shadow: 0 2px 0 rgba(30, 42, 90, .15); }
.vopt.on { border-color: var(--line); background: #FFF6D1; box-shadow: 0 0 0 3px #FFC93C, 0 3px 0 3px var(--line); }
.vopt .vtx b { color: var(--ink); }
.vopt.on .vtx b { color: #8A4F00; }
.vopt .vtx small { color: var(--muted); }
.vprev { background: #CDEBFF; border: 2px solid var(--line); }
.vprev .c1, .vprev .c2 { background: #FFFFFF; border: 1px solid #7FA7E0; }
.vprev .ar { background: #FFFFFF; border: 2px solid #FFB400; }
.bchip { color: color-mix(in srgb, var(--bc) 58%, #1E2A5A); border: 1.5px solid color-mix(in srgb, var(--bc) 70%, #1E2A5A); background: color-mix(in srgb, var(--bc) 14%, #FFFFFF); }
.bchip.on { color: #1E2A5A; background: color-mix(in srgb, var(--bc) 36%, #FFFFFF); box-shadow: 0 2px 0 color-mix(in srgb, var(--bc) 60%, #1E2A5A); }
.bchip.on i { color: color-mix(in srgb, var(--bc) 50%, #1E2A5A); }
.bchip.near { background: rgba(255, 255, 255, .75); opacity: .9; }
.dbonds li { background: #F3F9FF; }
.dbonds li b { color: color-mix(in srgb, var(--bc) 58%, #1E2A5A); }
.dbonds li em { color: #1E2A5A; background: color-mix(in srgb, var(--bc) 45%, #FFFFFF); border: 1px solid color-mix(in srgb, var(--bc) 60%, #1E2A5A); }
.dbonds li.on { background: color-mix(in srgb, var(--bc) 15%, #FFFFFF); }
.ffabox { background: rgba(255, 255, 255, .6); border: 2px solid rgba(30, 42, 90, .18); }
.ffarank li { background: #FFFFFF; border: 2px solid rgba(30, 42, 90, .18); border-left: 6px solid var(--fc, #888); color: var(--ink); }
.ffarank li.top { background: linear-gradient(90deg, #FFF0A8, #FFFFFF 75%); border-color: var(--line); border-left-color: var(--fc, #888); }
.ffarank li img { background: #EAF5FF; box-shadow: 0 0 0 2px var(--line); }
.ffarank li small { color: var(--muted); opacity: 1; }
.rseats.ffa .rseat:not(.empty) { background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 22%, #FFFFFF), #FFFFFF); }
.rhist li.ffa .sd img.top { box-shadow: 0 0 0 2.5px #FFB400, 0 0 0 4px var(--line); }
/* ============================================================ v18: tài khoản, màn chào khách, vòng quay tướng */
.appbar .spinbtn, .appbar .accbtn {
  flex: none; position: relative; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px 0 5px;
  font: inherit; font-size: 13.5px; font-weight: 800; color: var(--ink); background: #FFFFFF; border: 2px solid var(--line);
  border-radius: 99px; box-shadow: 0 2px 0 var(--line); cursor: pointer;
}
.appbar .spinbtn:active, .appbar .accbtn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--line); }
.appbar .spinbtn.free { background: var(--sun); animation: spinpulse 1.6s ease-in-out infinite; }
@keyframes spinpulse { 50% { box-shadow: 0 2px 0 var(--line), 0 0 0 5px rgba(255, 201, 60, .45); } }
.wico {
  display: inline-block; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--line);
  background: conic-gradient(#FFD43A 0 60deg, #7CD4FF 0 120deg, #FF8FB1 0 180deg, #8EE07A 0 240deg, #B79CFF 0 300deg, #FFA94D 0);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55);
}
.spinbtn.free .wico { animation: wspin 3s linear infinite; }
@keyframes wspin { to { transform: rotate(360deg); } }
.spinbtn .sdot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 2px solid #fff; }
.accbtn .ava, .ava { display: inline-block; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--line); background: #E8F4FF center / cover no-repeat; }
.ava.none { background: #E8F4FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='4.2' fill='%231E2A5A'/%3E%3Cpath d='M4 21c1.2-4.4 4.4-6.4 8-6.4s6.8 2 8 6.4' fill='%231E2A5A'/%3E%3C/svg%3E") center / 80% no-repeat; }
.accbtn .anm { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.guest .accbtn { background: var(--sun); }
@media (max-width: 420px) {
  .appbar { gap: 5px; }
  .appbar .stat { display: none; }
  .appbar .spinbtn span:not(.wico) { display: none; }
  .appbar .spinbtn { padding: 0 5px; }
  .accbtn .anm, .vidbtn #vidLbl { display: none; }
  .appbar .accbtn { padding: 0 3px; }
  .appbar .vidbtn { padding: 0 7px; }
  .brand h1 { font-size: clamp(15px, 4.4vw, 19px); }
  .vidbtn { margin-right: 0; }
}
/* guest welcome screen (covers the picker and the dock) */
.gate { position: fixed; inset: 0; z-index: 12; overflow-y: auto; overscroll-behavior: contain; display: flex; justify-content: center; align-items: flex-start;
  padding: calc(18px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .5) 0 2px, transparent 2.6px) 0 0 / 28px 28px,
    linear-gradient(180deg, #74CFFF 0%, #A9E3FF 40%, #DFF6FF 100%); }
.gin { width: min(100%, 440px); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: rgba(255, 255, 255, .92); border: 3px solid var(--line); border-radius: 26px; box-shadow: 0 6px 0 var(--line); padding: 18px 18px 20px; margin-top: 8px; }
.glogo { width: 104px; height: 104px; margin-top: -2px; filter: drop-shadow(0 5px 0 rgba(30, 42, 90, .25)); animation: bob 2.4s ease-in-out infinite alternate; }
.gin h2 { margin: 0; font-size: 27px; line-height: 1.05; color: #FFD43A; letter-spacing: .3px;
  text-shadow: 2px 0 0 var(--line), -2px 0 0 var(--line), 0 2px 0 var(--line), 0 -2px 0 var(--line), 1.5px 1.5px 0 var(--line), -1.5px 1.5px 0 var(--line), 1.5px -1.5px 0 var(--line), -1.5px -1.5px 0 var(--line), 0 4px 0 var(--line); }
.gsub { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.ggift { margin: 2px 0 4px; font-size: 15.5px; line-height: 1.4; }
.ggift b { color: #C25E00; }
.gcards { display: inline-flex; gap: 6px; flex: none; }
.gcards i { width: 24px; height: 32px; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 15px; color: var(--line);
  border: 2px solid var(--line); border-radius: 6px; background: var(--sun); box-shadow: 0 2px 0 var(--line); }
.gcards i:nth-child(2) { background: linear-gradient(180deg, #A6E3FF, #4FB6FF); } .gcards i:nth-child(3) { background: linear-gradient(180deg, #FFC2D2, #FF7EA0); }
.gcards i:nth-child(4) { background: linear-gradient(180deg, #C6F2B6, #6BD35A); }
.gcards.big { gap: 10px; margin: 4px 0; }
.gcards.big i { width: 58px; height: 78px; font-size: 32px; border-width: 3px; border-radius: 12px; box-shadow: 0 4px 0 var(--line); animation: gfloat 2.2s ease-in-out infinite alternate; }
.gcards.big i:nth-child(2) { animation-delay: .25s; } .gcards.big i:nth-child(3) { animation-delay: .5s; } .gcards.big i:nth-child(4) { animation-delay: .75s; }
@keyframes gfloat { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-7px) rotate(4deg); } }
.btn.wide { width: 100%; justify-content: center; }
.gin .btn.wide { font-size: 18px; padding: 11px 16px; }
.gfeat { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; width: 100%; text-align: left; font-size: 14px; }
.gfeat li { background: var(--soft); border: 2px solid rgba(30, 42, 90, .2); border-radius: 12px; padding: 6px 10px; }
.gfeat b { color: var(--blueT); }
/* account sheet */
.accin, .spinin { max-height: 92dvh; }
.accbody, .spinbody { overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.acctabs { align-self: center; }
.acctabs button { padding: 4px 22px; }
.gift { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.35; background: #FFF7D6; border: 2px solid var(--line); border-radius: 14px; padding: 8px 10px; }
.gift b { color: #C25E00; }
.accform { display: flex; flex-direction: column; gap: 8px; }
.accform .field { flex: none; display: flex; flex-direction: column; gap: 4px; background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.accform .field > span { font-size: 14px; font-weight: 800; color: var(--ink); }
.accform .field input { width: 100%; font-size: 16px; font-weight: 700; padding: 10px 12px; border-radius: 12px; }
.accform .hint { margin-top: -4px; font-size: 12px; color: var(--muted); }
.pwrow { position: relative; display: block; }
.pwrow input { padding-right: 46px !important; }
.pweye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; }
.pweye.on { background: var(--accent); }
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--ink); }
.consent input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: #1E82EE; }
.consent a { color: var(--blueT); font-weight: 800; }
.linkbtn { align-self: center; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 800; color: var(--blueT); text-decoration: underline; padding: 6px; cursor: pointer; }
.accbody .note, .spinbody .note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.note.ok, .accmsg.ok { color: #1E7F45; }
.accmsg { margin: 0; font-size: 14px; font-weight: 700; color: #C62845; background: #FFE8EC; border: 2px solid #F3A3B2; border-radius: 12px; padding: 7px 10px; }
.accmsg.ok { background: #E3F8EA; border-color: #8FD7A8; }
.wtitle { margin: 0; text-align: center; font-size: 19px; font-weight: 800; }
.wtitle b { color: #C25E00; }
.starters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; perspective: 700px; }
.scard { position: relative; aspect-ratio: 3 / 4.3; transform-style: preserve-3d; animation: sflip .7s cubic-bezier(.3, 1.4, .5, 1) var(--d) both; }
@keyframes sflip { from { transform: rotateY(180deg) scale(.9); } to { transform: rotateY(0) scale(1); } }
.sfront, .sback { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 2.5px solid var(--line); border-radius: 14px; box-shadow: 0 3px 0 var(--line); }
.sfront { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 3px; text-align: center;
  background: linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--rc) 22%, #FFFFFF) 100%); }
.sfront img { width: 78%; height: auto; aspect-ratio: 1; }
.sfront b { font-size: 12.5px; line-height: 1.1; }
.sfront small { font-size: 9.5px; line-height: 1.15; color: var(--muted); }
.sback { transform: rotateY(180deg); display: grid; place-items: center; font-size: 34px; font-weight: 900; color: var(--line); background: var(--sun); }
.rcbox { display: flex; flex-direction: column; gap: 6px; background: #FFF7D6; border: 2.5px dashed var(--line); border-radius: 14px; padding: 10px 12px; }
.rcbox > small { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.rcbox > b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 21px; letter-spacing: 1px; text-align: center; background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: 6px; user-select: all; }
.rcrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.prof { display: flex; align-items: center; gap: 12px; }
.prof b { display: block; font-size: 20px; }
.prof small { color: var(--muted); font-size: 13px; }
.ava.big { width: 58px; height: 58px; border-width: 3px; box-shadow: 0 3px 0 var(--line); }
.adm { color: #fff; background: #E6375A; border-radius: 6px; padding: 0 6px; font-weight: 800; font-size: 11px; }
.coll { background: var(--soft); border: 2px solid rgba(30, 42, 90, .25); border-radius: 14px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.coll .chead { display: flex; justify-content: space-between; font-size: 14px; }
.coll .chead span { font-weight: 800; color: var(--blueT); }
.coll .cbar { height: 12px; border-width: 2px; }
.cmini { display: flex; flex-wrap: wrap; gap: 4px; }
.cmini img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); background: #fff; }
.prow { display: flex; gap: 8px; }
.prow .btn { flex: 1 1 0; font-size: 15px; padding: 8px 6px; }
/* locked hero cards + "Của tôi" page */
.card.lock { background: #EEF1F7 !important; border-color: rgba(30, 42, 90, .45); box-shadow: 0 2px 0 rgba(30, 42, 90, .35); }
.card.lock img { filter: grayscale(1) contrast(.85) brightness(1.05); opacity: .55; }
.card.lock .nm { color: #6B7395; }
.card.lock .rl { filter: grayscale(.85); opacity: .7; }
.card .lk { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: #FFFFFF
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5' fill='%231E2A5A'/%3E%3Cpath d='M8.2 10.5V8a3.8 3.8 0 0 1 7.6 0v2.5' fill='none' stroke='%231E2A5A' stroke-width='2.6'/%3E%3C/svg%3E") center / 70% no-repeat; }
.card { position: relative; }
.card.more { background: var(--sun) !important; border-style: dashed; justify-content: center; gap: 6px; }
.card.more .wico { width: 46px; height: 46px; border-width: 3px; animation: wspin 6s linear infinite; }
.card.more .rl { background: #fff; color: var(--line); border: 1.5px solid var(--line); }
.fchip.mine { border-color: var(--line); background: linear-gradient(180deg, #FFFFFF, #FFF3C4); }
.fchip.mine.on, .ftile.mine.on { background: var(--sun); }
.ftile.mine { border-color: var(--line); }
/* daily spin */
.wheelwrap { position: relative; width: min(84vw, 320px); aspect-ratio: 1; margin: 10px auto 2px; }
.wptr { position: absolute; left: 50%; top: -10px; z-index: 3; width: 0; height: 0; transform: translateX(-50%);
  border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid #E6375A; filter: drop-shadow(0 2px 0 var(--line)) drop-shadow(0 -2px 0 var(--line)); }
.wheel { position: absolute; inset: 0; border-radius: 50%; border: 5px solid var(--line); box-shadow: 0 6px 0 var(--line), inset 0 0 0 5px #fff; background: #fff; will-change: transform; }
.wface { position: absolute; inset: 5px; border-radius: 50%; overflow: hidden; }
.wseg { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); }
.wseg img { position: absolute; left: -21px; top: calc(-1 * min(36vw, 138px)); width: 42px; height: 42px; border-radius: 50%; border: 2.5px solid var(--line); background: #fff; }
.wgo { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: 30%; aspect-ratio: 1; border-radius: 50%;
  border: 4px solid var(--line); background: var(--sun); box-shadow: 0 5px 0 var(--line), inset 0 3px 0 rgba(255, 255, 255, .7);
  font: inherit; font-size: clamp(18px, 5.5vw, 24px); font-weight: 900; color: var(--line); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.wgo:active { transform: translate(-50%, calc(-50% + 3px)); box-shadow: 0 2px 0 var(--line); }
.wgo.off { background: #EEF1F7; cursor: default; font-size: 13px; }
.wgo.off small { font-size: 11px; color: var(--muted); font-weight: 800; }
.wgo.off b { font-size: 15px; font-variant-numeric: tabular-nums; }
.wgo:disabled { opacity: 1; }
.spinst { margin: 4px 0 0; text-align: center; font-size: 14.5px; }
.spinst b { color: #C25E00; }
.spinin { position: relative; }
.spinres { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(223, 244, 255, .9); border-radius: 22px 22px 0 0; animation: fadein .2s ease-out; }
.prize { position: relative; width: min(100%, 340px); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--rc) 20%, #FFFFFF) 100%); border: 3px solid var(--line); border-radius: 22px; box-shadow: 0 6px 0 var(--line); padding: 14px 14px 16px; animation: prizein .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes prizein { from { transform: scale(.6); opacity: 0; } }
.prize .rays { position: absolute; left: 50%; top: 105px; width: 420px; height: 420px; margin: -210px 0 0 -210px; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 212, 58, .45) 0 12deg, transparent 12deg 24deg); border-radius: 50%; animation: wspin 12s linear infinite; }
.prize > :not(.rays) { position: relative; z-index: 1; }
.prize small { font-size: 15px; font-weight: 900; letter-spacing: 1px; color: #fff; background: #E6375A; border: 2px solid var(--line); border-radius: 99px; padding: 1px 12px; }
.prize img { width: 140px; height: 140px; filter: drop-shadow(0 5px 0 rgba(30, 42, 90, .3)); }
.prize b { font-size: 24px; line-height: 1.1; }
.prize em { font-style: normal; font-size: 13px; color: var(--muted); }
.prize p { margin: 2px 0 6px; font-size: 13.5px; color: var(--ink); }
.prize .row { display: flex; gap: 8px; width: 100%; }
.prize .row .btn { flex: 1 1 0; }
.endsub .muted { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .glogo, .gcards.big i, .spinbtn.free, .spinbtn.free .wico, .card.more .wico, .prize .rays, .scard { animation: none !important; }
}

/* v18.2 e-mail sign-up: 2 steps, 6-digit code box, "code sent to" line */
.steps { display: flex; gap: 8px; list-style: none; margin: 10px 0 4px; padding: 0; counter-reset: st; }
.steps li { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--muted); counter-increment: st; }
.steps li::before { content: counter(st); display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%;
  border: 2px solid rgba(30, 42, 90, .35); background: #FFFFFF; color: var(--muted); font-size: 13px; }
.steps li.on { color: var(--ink); }
.steps li.on::before { background: var(--sun); border-color: var(--line); color: var(--line); box-shadow: 0 2px 0 var(--line); }
.sentto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 2px; padding: 8px 12px; border-radius: 14px;
  background: #EEF8FF; border: 2px solid rgba(30, 42, 90, .25); font-size: 14px; color: var(--muted); }
.sentto b { color: var(--ink); word-break: break-all; font-size: 15px; }
.sentto .linkbtn { margin: 0 0 0 auto; }
.accform .field input.codein { font-size: 26px; font-weight: 900; letter-spacing: 10px; text-align: center; font-variant-numeric: tabular-nums; padding-left: 10px; }
.accform #cResend { align-self: flex-end; margin: -2px 0 2px; font-size: 14px; }
.accform #cResend:disabled { opacity: .55; cursor: default; text-decoration: none; }
.prof small.pmail { display: block; margin-top: 2px; word-break: break-all; }
.gift.linkmail { justify-content: space-between; background: #FFF1E0; }
.gift.linkmail .btn { flex: none; min-height: 40px; padding: 0 14px; font-size: 14px; }
/* ================= v19: Hướng dẫn, Rank, hero levels, card draw, Kho tướng, admin tools ================= */
.appbar .studiobtn { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px 0 6px; font: inherit; font-size: 12.5px; font-weight: 800;
  color: var(--ink); background: #FFFFFF; border: 2px dashed var(--line); border-radius: 99px; cursor: pointer; }
.appbar .studiobtn svg { width: 18px; height: 18px; fill: #FF4F6D; }
.appbar .studiobtn.on { background: var(--sun); border-style: solid; box-shadow: 0 2px 0 var(--line); }
.appbar .statbtn { font: inherit; font-size: 13px; font-weight: 800; color: var(--ink); background: #FFFFFF; border: 2px solid var(--line); border-radius: 99px; height: 30px; padding: 0 10px; box-shadow: 0 2px 0 var(--line); cursor: pointer; }
.appbar .statbtn:active { transform: translateY(2px); box-shadow: none; }
.appbar .spinbtn img { width: 26px; height: 26px; margin: -4px 0; filter: drop-shadow(0 1px 0 rgba(30, 42, 90, .35)); }
.appbar .spinbtn.free img { animation: packbob 1.4s ease-in-out infinite; }
@keyframes packbob { 50% { transform: translateY(-2px) rotate(-6deg); } }
.spinbtn .sdot { min-width: 16px; height: 16px; width: auto; padding: 0 3px; font-size: 10px; font-weight: 900; line-height: 12px; color: #fff; text-align: center; font-style: normal; }
@media (max-width: 420px) { .appbar .studiobtn span, .appbar .spinbtn span { display: none; } .appbar .studiobtn { padding: 0 6px; } }
.notice { margin: 0 auto 8px; max-width: 720px; padding: 8px 12px; font-size: 14px; font-weight: 700; color: var(--ink); background: #FFF3B8; border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 3px 0 var(--line); text-align: center; }
/* Hướng dẫn */
.guide { display: grid; gap: 10px; max-width: 720px; margin: 0 auto; }
.gcard { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--panel); border: 2.5px solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--line); border-left-width: 8px; }
.gcard:nth-child(6n+1) { border-left-color: #FFC93C; } .gcard:nth-child(6n+2) { border-left-color: #FF8FB1; } .gcard:nth-child(6n+3) { border-left-color: #2FC26B; }
.gcard:nth-child(6n+4) { border-left-color: #2F8CFF; } .gcard:nth-child(6n+5) { border-left-color: #B79CFF; } .gcard:nth-child(6n) { border-left-color: #FF8A3D; }
.gcard img { width: 44px; height: 44px; flex: none; object-fit: contain; }
.gcard h3 { margin: 0 0 2px; font-size: 17px; font-weight: 900; color: var(--ink); }
.gcard p { margin: 0; font-size: 14px; line-height: 1.45; color: #34406E; }
.gcard b { color: #C25E00; }
/* hero level badges */
.card { position: relative; }
.card .lvb { position: absolute; top: 3px; left: 3px; z-index: 2; font-size: 10.5px; font-weight: 900; line-height: 1; padding: 2px 5px; color: #1E2A5A; background: #FFFFFF; border: 1.5px solid var(--line); border-radius: 99px; box-shadow: 0 1px 0 var(--line); }
.card .lvb.max { background: var(--sun); }
.lvtag { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 900; color: #1E2A5A; background: #FFF3B8; border: 1.5px solid var(--line); border-radius: 99px; padding: 0 7px; }
/* Rank panel */
.rankme { max-width: 520px; margin: 0 auto 10px; padding: 10px 14px; background: var(--panel); border: 2.5px solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--line); }
.rankme p { margin: 0; text-align: center; }
.rankme .muted, .muted { color: var(--muted); }
.rmtop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rpts { font-size: 30px; font-weight: 900; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.rmtop small { color: var(--muted); font-weight: 700; }
.rpos { margin-left: auto; font-size: 13px; font-weight: 900; background: #E7F4FF; border: 2px solid var(--line); border-radius: 99px; padding: 1px 9px; }
.rankme .rbar { height: 10px; margin: 8px 0 5px; background: #E7EEF9; border: 2px solid var(--line); border-radius: 99px; overflow: hidden; }
.rankme .rbar i { display: block; height: 100%; background: linear-gradient(90deg, #2FC26B, #FFC93C); border-radius: 99px; }
.rsub { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.rsub b { color: var(--ink); }
.tier { display: inline-block; font-size: 12px; font-weight: 900; line-height: 1.2; color: #1E2A5A; border: 2px solid var(--line); border-radius: 8px; padding: 1px 8px; background: #E0C2A2; vertical-align: 1px; }
.tier.t0 { background: #E7B184; } .tier.t1 { background: #D9E2EE; } .tier.t2 { background: #FFD43A; }
.tier.t3 { background: #8FF0E2; } .tier.t4 { background: #9CCBFF; } .tier.t5 { background: linear-gradient(90deg, #FF8FB1, #B79CFF); color: #fff; text-shadow: 0 1px 0 #1E2A5A; }
.rankbox.dim { opacity: .55; pointer-events: none; }
.rankq { max-width: 520px; margin: 10px auto 0; padding: 12px 14px; text-align: center; background: #FFFBE6; border: 2.5px solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--line); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.rqh { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.rqh b { font-weight: 900; }
.rqspin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #FFD43A; border-top-color: var(--line); animation: wspin .8s linear infinite; }
.rqsub { font-size: 13.5px; color: #34406E; }
.rqt { font-size: 16px; color: #C25E00; font-variant-numeric: tabular-nums; }
.rqseats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rqs { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 58px; }
.rqs img, .rqs i { width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid var(--line); background: #FFFFFF; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 20px; object-fit: cover; }
.rqs.empty i { border-style: dashed; color: var(--muted); background: #F2F6FC; animation: blink 1.6s ease-in-out infinite; }
.rqs.me img { box-shadow: 0 0 0 3px #FFC93C; }
.rqs small { max-width: 58px; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdelta { font-size: 18px; font-weight: 900; }
.rdelta.up { color: #1E9E55; } .rdelta.down { color: #E0314F; }
.rup { color: #C25E00; } .rdown { color: var(--muted); }
/* board (rank points) */
.board .pts { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; flex: none; }
.board .pts b { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.board .pts small { font-size: 12px; color: var(--muted); }
.board li.top1 .rk { background: #FFD43A; } .board li.top2 .rk { background: #DDE5F0; } .board li.top3 .rk { background: #F2B98A; }
.board li.rec .rk { font-size: 12px; min-width: 44px; }
.board li.rec.win .rk { background: #C9F5DA; }
.board .who .h3 { display: flex; gap: 2px; }
.board .who .h3 img { width: 34px; height: 34px; }
/* speed button on the stage (local fights) */
.spdbtn { position: absolute; top: 10px; right: 10px; z-index: 6; min-width: 46px; height: 36px; padding: 0 8px; font: inherit; font-size: 16px; font-weight: 900; color: var(--ink);
  background: var(--sun); border: 2.5px solid var(--line); border-radius: 99px; box-shadow: 0 3px 0 var(--line); cursor: pointer; }
.spdbtn:active { transform: translateY(2px); box-shadow: none; }
/* card draw ("Rút thẻ") */
.pack { position: relative; height: 340px; display: grid; place-items: center; margin: 4px 0 0; border-radius: 20px; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, #DDF3FF 45%, #BDE6FF 100%); border: 2.5px solid var(--line); box-shadow: inset 0 -6px 0 rgba(30, 42, 90, .08); }
.deck { position: relative; width: 170px; height: 254px; transition: transform .3s, opacity .3s; }
.deck img, .deck i { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 14px; }
.deck i { background: url("assets/ui/card_back.webp?v=19") center / cover; border: 2px solid var(--line); filter: brightness(.9); }
.deck i:nth-child(1) { transform: translate(-10px, 8px) rotate(-7deg); } .deck i:nth-child(2) { transform: translate(9px, 6px) rotate(6deg); } .deck i:nth-child(3) { transform: translate(0, 4px) rotate(-1deg); }
.deck img { object-fit: cover; filter: drop-shadow(0 6px 0 rgba(30, 42, 90, .35)); animation: gfloat 2.4s ease-in-out infinite alternate; }
.deck.shake img { animation: dshake .18s linear infinite; }
@keyframes dshake { 25% { transform: translate(-3px, 0) rotate(-2deg); } 75% { transform: translate(3px, 0) rotate(2deg); } }
.deck.drawn { transform: translateY(150px) scale(.6); opacity: 0; }
.dstage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.tcard { position: relative; width: 196px; height: 293px; perspective: 900px; transform: translateY(120px) scale(.55); opacity: 0; transition: transform .55s cubic-bezier(.3, 1.45, .5, 1), opacity .3s; cursor: pointer; outline: none; }
.tcard.out { transform: none; opacity: 1; }
.tcard .tglow { position: absolute; inset: -16px; border-radius: 30px; opacity: 0; background: radial-gradient(circle, var(--gl) 0%, transparent 70%); }
.tcard.new { --gl: rgba(255, 196, 0, .95); --rb: #E6375A; --ray: rgba(255, 212, 58, .55); }
.tcard.level { --gl: rgba(90, 160, 255, .95); --rb: #2F8CFF; --ray: rgba(124, 184, 255, .5); }
.tcard.spare { --gl: rgba(170, 182, 205, .9); --rb: #6B7AA6; --ray: rgba(200, 210, 230, .5); }
.tcard.charge .tglow { animation: tglow .7s ease-in-out infinite alternate; }
.tcard.charge:not(.flip) .tin { animation: dshake .25s linear infinite; }
@keyframes tglow { from { opacity: .45; transform: scale(.96); } to { opacity: 1; transform: scale(1.06); } }
.tcard.shown .tglow { opacity: .9; animation: none; }
.tcard .rays { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(var(--ray) 0 11deg, transparent 11deg 22deg); transition: opacity .4s; }
.tcard.shown .rays { opacity: 1; animation: wspin 14s linear infinite; }
.tin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4, .1, .3, 1.2); }
.tcard.flip .tin { transform: rotateY(180deg); }
.tface { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; border: 3px solid var(--line); box-shadow: 0 6px 0 var(--line); overflow: hidden; }
.tface.back img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tface.front { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 26px 10px 10px; text-align: center;
  background: linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--rc) 30%, #FFFFFF) 100%); }
.tribbon { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12.5px; font-weight: 900; letter-spacing: .5px; color: #fff; background: var(--rb, #E6375A); border: 2px solid var(--line); border-radius: 99px; padding: 1px 10px; }
.tart { width: 132px; height: 132px; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(30, 42, 90, .3)); }
.tname { font-size: 19px; font-weight: 900; line-height: 1.1; color: var(--ink); }
.tfac { font-style: normal; font-size: 12px; color: var(--muted); }
.tlv { font-size: 12.5px; color: #34406E; }
.tlv b { color: #C25E00; }
.cfs { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.cf { position: absolute; left: 0; top: 0; width: var(--s); height: calc(var(--s) * 1.5); margin: calc(var(--s) * -.75) 0 0 calc(var(--s) * -.5); background: var(--c); border: 1.5px solid var(--line); border-radius: 2px;
  animation: cfly var(--t) cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes cfly { from { transform: rotate(var(--a)) translateY(0) rotate(0); opacity: 1; } 80% { opacity: 1; } to { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(320deg); opacity: 0; } }
.tap { margin: 4px 0 0; font-size: 13px; font-weight: 800; color: #34406E; animation: blink 1.2s ease-in-out infinite; }
.dres { width: 100%; text-align: center; padding: 0 4px; animation: fadein .3s ease-out; position: relative; z-index: 4; }
.dres p { margin: 6px 0 8px; font-size: 14.5px; }
.dres .row { display: flex; gap: 8px; }
.dres .row .btn { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; white-space: nowrap; font-size: 15px; }
.dres .row .btn.ghost { flex: .75 1 0; }
.pack:has(.dres:not(.hidden)) { height: auto; min-height: 340px; padding: 12px 10px 14px; }
.pack:has(.dres:not(.hidden)) .dstage { position: static; }
.pack:has(.dres:not(.hidden)) .deck { display: none; }
.dctl { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 10px; }
.btn.big.drawgo { width: min(100%, 320px); font-size: 20px; font-weight: 900; padding: 12px 18px; letter-spacing: .5px; }
.btn.big.drawgo small { font-size: 13px; }
.btn.drawgo.off { background: #EEF1F7; color: var(--ink); font-size: 15px; letter-spacing: 0; }
.btn.drawgo.off b { font-variant-numeric: tabular-nums; }
.odds { font-size: 13px; color: var(--muted); }
.odds summary { cursor: pointer; font-weight: 800; color: var(--ink); }
.odds ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; max-height: 220px; overflow: auto; }
.odds li { display: flex; justify-content: space-between; gap: 6px; }
.dlh { margin: 8px 0 2px; font-size: 14px; font-weight: 900; }
.dlog { display: flex; flex-wrap: wrap; gap: 6px; }
.dl { display: flex; flex-direction: column; align-items: center; width: 52px; }
.dl img { width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid var(--line); background: #FFFFFF; }
.dl.new img { box-shadow: 0 0 0 3px #FFC93C; } .dl.level img { box-shadow: 0 0 0 3px #7CB8FF; }
.dl small { font-size: 10.5px; font-weight: 900; color: #34406E; }
/* Kho tướng */
.invin { max-height: 92dvh; }
.invbody { overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.invbody .note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.invsum { display: flex; gap: 6px; }
.invsum span { flex: 1 1 0; text-align: center; font-size: 12.5px; color: var(--muted); background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 5px 4px; box-shadow: 0 2px 0 var(--line); }
.invsum b { display: block; font-size: 19px; color: var(--ink); }
.invseg { align-self: center; }
.invlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.invlist li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #FFFFFF; border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 2px 0 var(--line); }
.invlist li.empty { justify-content: center; color: var(--muted); }
.invlist img { width: 52px; height: 52px; flex: none; }
.iv { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.iv b { font-size: 15.5px; }
.iv small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv small b { font-size: inherit; color: var(--ink); }
.iv .rl { font-size: 10.5px; }
.lvbar { display: block; height: 7px; background: #E7EEF9; border: 1.5px solid var(--line); border-radius: 99px; overflow: hidden; }
.lvbar i { display: block; height: 100%; background: linear-gradient(90deg, #7CB8FF, #FFC93C); }
.iv .sp { color: #C25E00; }
@media (prefers-reduced-motion: reduce) {
  .deck img, .deck.shake img, .tcard.charge .tglow, .tcard.charge:not(.flip) .tin, .tcard.shown .rays, .cf, .tap, .rqspin, .rqs.empty i, .appbar .spinbtn.free img { animation: none !important; }
  .tcard, .tin, .deck { transition-duration: .05s !important; }
}
@media (max-width: 440px) { .appbar .stat.statbtn { display: inline-flex; align-items: center; height: 30px; padding: 0 7px; font-size: 12px; } .brand h1 { font-size: 15px; white-space: normal; line-height: 1.02; overflow: visible; max-width: 7.2em; padding: 2px 0; } }
#fightBar { flex-wrap: wrap; gap: 6px; }
#fightBar .studiohead { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 8px; text-align: center; }
#fightBar .studiohead small { color: var(--muted); font-weight: 700; }
#fightBar .seg { flex: none; }
#fightBar .seg button { white-space: nowrap; }
/* v19: card back fallback while card_back.webp is still loading (slow networks): navy card with a gold frame + emblem ring */
.deck i, .deck img, .tface.back {
  background-color: #2B3F9E;
  background-image: radial-gradient(circle at 50% 50%, #FFD54A 0 18%, transparent 19% 24%, #FFD54A 25% 27%, transparent 28%),
    linear-gradient(160deg, #3C59D6, #22307A);
  box-shadow: inset 0 0 0 6px #FFC83D, inset 0 0 0 9px #1E2A5A;
}
.deck i { background-image: url("assets/ui/card_back.webp?v=19"), linear-gradient(160deg, #3C59D6, #22307A); background-size: cover; background-position: center; box-shadow: none; }

/* ===================================================================== v20: Đấu (xếp hạng | thường), Tướng của tôi, nhiệm vụ ngày */
.bottomnav .tab span { font-size: 12px; letter-spacing: -.1px; }
.bottomnav .tab[data-mode="heroes"] span { letter-spacing: -.35px; }
@media (max-width: 400px) { .bottomnav .tab span { font-size: 11px; } .bottomnav .tab[data-mode="heroes"] span { font-size: 10.5px; letter-spacing: -.4px; } }
.bottomnav .tab .tdot { position: absolute; top: 2px; right: calc(50% - 25px); width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 2px solid #fff; box-shadow: 0 1px 0 var(--line); animation: tdot 1.4s ease-in-out infinite; }
@keyframes tdot { 50% { transform: scale(1.25); } }

.fighthead { max-width: 680px; margin: 0 auto 10px; display: flex; flex-direction: column; gap: 8px; }
.fseg { display: flex; width: 100%; box-sizing: border-box; padding: 4px; gap: 4px; border-radius: 16px; }
.fseg button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 4px; border-radius: 12px; line-height: 1.15; min-height: 48px; justify-content: center; }
.fseg button b { font-size: 16px; font-weight: 900; }
.fseg button small { font-size: 12px; font-weight: 700; opacity: .85; }
.fseg button:disabled { opacity: .45; }
.questbar {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 7px 12px; min-height: 48px;
  background: var(--panel); border: 2.5px solid var(--line); border-radius: 16px; box-shadow: var(--hi), 0 3px 0 var(--line);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.questbar:active { transform: translateY(2px); box-shadow: var(--hi), 0 1px 0 var(--line); }
.questbar .qico { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #FFE9A8; border: 2px solid var(--line); display: grid; place-items: center; }
.questbar .qico svg { width: 22px; height: 22px; fill: #fff; stroke: var(--line); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.questbar .qtx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.questbar .qtx b { font-size: 15px; font-weight: 900; }
.qbar { display: block; height: 10px; border: 2px solid var(--line); border-radius: 99px; background: #E3F1FF; overflow: hidden; }
.qbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6FD3FF, #2F8CFF); transition: width .35s; }
.qbar.big { height: 16px; border-width: 2.5px; }
.questbar .qpts { flex: none; font-weight: 900; font-size: 16px; color: var(--line); background: #fff; border: 2px solid var(--line); border-radius: 99px; padding: 1px 10px; }
.questbar.ready { background: var(--sun); animation: spinpulse 1.6s ease-in-out infinite; }
.questbar.ready .qbar i { background: linear-gradient(90deg, #2FC26B, #7BE495); }
.questbar.ready .qpts::after { content: ' · Nhận'; }
.questbar.done .qbar i { background: linear-gradient(90deg, #2FC26B, #7BE495); }
.questbar.done .qpts { background: #DDF7E7; }

.questin { max-width: 560px; }
.questbody { padding: 4px 14px 14px; overflow-y: auto; }
.qhead { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; background: var(--panel); border: 2.5px solid var(--line); border-radius: 18px; padding: 10px 12px; box-shadow: var(--hi), 0 3px 0 var(--line); }
.qhead .qbar { grid-column: 1 / -1; }
.qscore { display: flex; align-items: baseline; gap: 2px; }
.qscore b { font-size: 34px; font-weight: 900; line-height: 1; color: var(--line); }
.qscore small { font-size: 15px; font-weight: 800; color: var(--muted); }
.qreward { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.3; color: var(--ink); }
.qreward img { flex: none; filter: drop-shadow(0 2px 0 rgba(30, 42, 90, .35)); }
.qlist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.qlist li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 2px 0 var(--line); }
.qlist li.done { background: #EFFBF3; }
.qck { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--line); background: #fff; display: grid; place-items: center; font-weight: 900; font-size: 15px; color: #fff; }
.qlist li.done .qck { background: var(--green); }
.qtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qtxt b { font-size: 15px; font-weight: 800; line-height: 1.2; }
.qtxt small { font-size: 12.5px; color: var(--muted); line-height: 1.25; }
.qmini { display: block; height: 6px; margin-top: 3px; border-radius: 99px; background: #E3F1FF; overflow: hidden; border: 1.5px solid rgba(30, 42, 90, .35); }
.qmini i { display: block; height: 100%; background: #2F8CFF; }
.qlist li.done .qmini i { background: var(--green); }
.qside { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 52px; }
.qside em { font-style: normal; font-weight: 900; color: #C25E00; font-size: 15px; }
.qside small { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.qside .btn.sm { padding: 2px 12px; font-size: 13.5px; }
.qfoot { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; text-align: center; }
.qfoot small { color: var(--muted); font-size: 13px; }
.btn.big { font-size: 18px; padding: 10px 14px; }
.btn.glow { animation: spinpulse 1.6s ease-in-out infinite; }

.endquest { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 8px auto 0; padding: 6px 10px; background: #FFF6D1; border: 2px solid var(--line); border-radius: 14px; font-size: 15px; color: var(--ink); max-width: 420px; }
.endquest .up { font-style: normal; font-weight: 900; color: #1E9E5A; }

.myheroes { max-width: 680px; margin: 0 auto 10px; }
.mhcard { background: var(--panel); border: 2.5px solid var(--line); border-radius: 18px; box-shadow: var(--hi), 0 4px 0 var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.mhcard.guest { text-align: center; }
.mhcard.guest p { margin: 0; color: var(--ink); }
.mhcard.guest .row { display: flex; gap: 8px; justify-content: center; }
.mhsum { display: flex; align-items: center; gap: 6px; }
.mhs { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.05; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 5px 2px; }
.mhs b { font-size: 22px; font-weight: 900; color: var(--line); }
.mhs small { font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.mhsum .btn.sm { flex: none; padding: 8px 10px; font-size: 14px; }
.mhcol { display: flex; align-items: center; gap: 8px; }
.mhcol .cbar { flex: 1; height: 12px; border-width: 2px; }
.mhcol small { flex: none; font-size: 13px; color: var(--ink); font-weight: 700; }
.mhsel { margin: 0; font-size: 14px; color: var(--muted); }
.mhsel b { font-weight: 900; }
#btnHeroSpin { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
#btnHeroSpin small { font-size: 11.5px; font-weight: 800; opacity: .85; }

.board li.isbot { background: #F6FAFF; }
.btag { font-style: normal; font-size: 10.5px; font-weight: 900; color: #fff; background: #7A86B8; border: 1.5px solid var(--line); border-radius: 99px; padding: 0 6px; margin-left: 4px; vertical-align: 2px; letter-spacing: .3px; }
.board .bteam { flex: none; display: inline-flex; gap: 0; margin: 0 2px; }
.board .bteam img + img { margin-left: -6px; }
.board .bteam img { width: 26px; height: 26px; border-radius: 50%; background: #EAF5FF; box-shadow: 0 0 0 1.5px var(--line); }
.rqs .rqbot { font-style: normal; font-size: 11px; font-weight: 900; color: #fff; background: #7A86B8; border-radius: 99px; padding: 1px 5px; }
@media (prefers-reduced-motion: reduce) { .questbar.ready, .btn.glow, .bottomnav .tab .tdot { animation: none !important; } }
.board .who b.nkrow { display: flex; align-items: center; gap: 4px; min-width: 0; }
.board .who b.nkrow .nk { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .who b.nkrow .btag { flex: none; margin-left: 0; }

/* ---------------- v21: position ladder + Thách đấu */
.rmtop .rposbig { display: inline-flex; align-items: baseline; gap: 6px; }
.rmtop .rposbig small { font-size: 13px; }
.rmtop .rposbig b { font-size: 30px; font-weight: 900; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.rmtop .rof { font-size: 13px; }
.rmtop .rch { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; background: #FFF4D6; border: 2px solid var(--line); border-radius: 99px; padding: 2px 10px; }
.rmtop .rch small { font-size: 12px; color: #8A5A00; }
.rmtop .rch b { font-size: 16px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.chdots { display: flex; gap: 4px; margin: 8px 0 5px; }
.chdots i { flex: 1; height: 8px; border-radius: 99px; background: #E7EEF9; box-shadow: inset 0 0 0 1.5px rgba(30, 42, 90, .25); }
.chdots i.on { background: linear-gradient(90deg, #FF9F1C, #FFC93C); box-shadow: inset 0 0 0 1.5px var(--line); }
#actRank { gap: 8px; }
#actRank .btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
#actRank #btnRankRandom { flex: 0 1 auto; }
.chin { max-width: 560px; }
.chbody { padding: 4px 14px 16px; overflow-y: auto; }
.chtop { display: flex; gap: 10px; margin: 2px 0 10px; }
.chtop > div { flex: 1; text-align: center; background: var(--panel); border: 2.5px solid var(--line); border-radius: 16px; padding: 6px 8px; box-shadow: 0 3px 0 var(--line); }
.chtop small { display: block; font-size: 12px; font-weight: 800; color: var(--muted); }
.chtop b { font-size: 26px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.chteam { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 6px; }
.chteam small { font-weight: 800; color: var(--muted); }
.chteam .bteam { display: inline-flex; }
.chteam .bteam img, .chlist .bteam img { border-radius: 50%; background: #EAF5FF; box-shadow: 0 0 0 1.5px var(--line); }
.chteam .bteam img + img { margin-left: -6px; }
.chnote { margin: 4px 0 10px; font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; }
.chnote b { color: var(--ink); }
.chnote.warn, .chteam .warn { color: #C2410C; }
.chempty { text-align: center; font-size: 15px; margin: 16px 0; }
.chlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chlist li { display: flex; align-items: center; gap: 8px; background: #fff; border: 2.5px solid var(--line); border-radius: 16px; padding: 8px 10px; box-shadow: 0 3px 0 var(--line); }
.chlist .rk { flex: none; min-width: 52px; font-weight: 900; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.chlist .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chlist .who b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chlist .who small { font-size: 12px; color: var(--muted); }
.chlist .bteam { flex: none; display: inline-flex; }
.chlist .bteam img + img { margin-left: -7px; }
.chlist .btn { flex: none; }
.chload { text-align: center; margin: 18px 0; }
@media (max-width: 380px) { .chlist .bteam img { width: 22px; height: 22px; } .chlist .rk { min-width: 44px; font-size: 14px; } }

/* ---------------- v21b: "Phòng đang chờ" list (Đánh thường) */
.rlist { max-width: 640px; margin: 14px auto 0; background: var(--panel); border: 2.5px solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--line); padding: 10px 12px; }
.rlhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rlhead b { font-size: 16px; color: var(--ink); }
.rlhead small { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 7px; border-radius: 99px; background: #FFC93C; border: 2px solid var(--line); font-size: 12px; text-align: center; }
.rlhead small:empty { display: none; }
.rlrows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.rlrows li { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 7px 10px; }
.rlrows li.empty { display: block; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.45; background: transparent; border: 2px dashed rgba(30, 42, 90, .3); }
.rlrows li.empty b { color: var(--ink); }
.rlrows .rlk { flex: none; min-width: 74px; text-align: center; font-size: 12.5px; font-weight: 900; padding: 3px 8px; border-radius: 99px; border: 2px solid var(--line); background: #E7F4FF; color: var(--ink); }
.rlrows .rlk.kffa { background: #FFE3EC; }
.rlrows .rlk.k3v3 { background: #E3FBEA; }
.rlrows .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rlrows .who b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.rlrows .who small { font-size: 12px; color: var(--muted); }
.rlrows .btn { flex: none; }

/* ---------------- v21c: "Đấu" mode picker = two big, colourful cards (was a thin segment that was easy to miss) */
.fmodes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.fmodes .fm { position: relative; display: flex; align-items: center; gap: 8px; min-height: 70px; padding: 8px 10px 8px 8px; border-radius: 20px;
  border: 3px solid var(--line); text-align: left; cursor: pointer; color: var(--ink); font: inherit;
  box-shadow: 0 4px 0 var(--line), inset 0 2px 0 rgba(255, 255, 255, .75); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.fmodes .fm img { flex: none; width: 46px; height: 46px; filter: drop-shadow(0 2px 0 rgba(30, 42, 90, .3)); transition: transform .15s ease; }
.fmodes .fm span { display: flex; flex-direction: column; min-width: 0; }
.fmodes .fm b { font-size: 17px; font-weight: 900; line-height: 1.1; letter-spacing: -.01em; }
.fmodes .fm small { font-size: 12px; font-weight: 800; margin-top: 3px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmodes .fm-rank { background: linear-gradient(180deg, #FFF0C7 0%, #FFD98A 100%); }
.fmodes .fm-room { background: linear-gradient(180deg, #E0F1FF 0%, #A9D8FF 100%); }
.fmodes .fm:not(.on):hover { filter: brightness(1.04); }
.fmodes .fm:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--line), inset 0 2px 0 rgba(255, 255, 255, .75); }
.fmodes .fm.on { transform: translateY(-2px); box-shadow: 0 6px 0 var(--line), 0 0 0 4px #fff, 0 0 0 6.5px var(--line), inset 0 2px 0 rgba(255, 255, 255, .6); }
.fmodes .fm.on img { transform: scale(1.1) rotate(-4deg); }
.fmodes .fm-rank.on { background: linear-gradient(180deg, #FFD45E 0%, #FF9F1C 100%); }
.fmodes .fm-room.on { background: linear-gradient(180deg, #6FC0FF 0%, #2F80ED 100%); color: #fff; }
.fmodes .fm-room.on b, .fmodes .fm-room.on small { text-shadow: 0 1.5px 0 rgba(20, 40, 110, .55); opacity: 1; }
/* "đang chọn" tick + a pointer down to the content below */
.fmodes .fmck { position: absolute; top: -9px; right: -7px; width: 24px; height: 24px; border-radius: 50%; background: #22B573; border: 2.5px solid var(--line);
  box-shadow: 0 2px 0 var(--line); display: none; }
.fmodes .fmck::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.fmodes .fm.on .fmck { display: block; }
.fmodes .fm.on::after { content: ''; position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); border: 9px solid transparent; border-top-color: var(--line); }
.fmodes .fm:disabled { cursor: not-allowed; filter: grayscale(.7); opacity: .55; }
.fmodes .fm:focus-visible { outline: 3px solid #2F80ED; outline-offset: 4px; }
@media (max-width: 370px) { .fmodes .fm { gap: 6px; padding: 7px 8px 7px 6px; min-height: 64px; } .fmodes .fm img { width: 38px; height: 38px; } .fmodes .fm b { font-size: 15px; } .fmodes .fm small { font-size: 11px; } }
/* v21c layout: vertical cards so the titles always fit on one line on phones */
.fmodes .fm { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 3px; min-height: 0; padding: 8px 6px 9px; }
.fmodes .fm span { align-items: center; max-width: 100%; }
.fmodes .fm img { width: 42px; height: 42px; }
.fmodes .fm b { font-size: 17px; white-space: nowrap; }
.fmodes .fm small { margin-top: 1px; }
.fmodes .fm.on::after { content: none; }
@media (max-width: 370px) { .fmodes .fm { padding: 7px 4px 8px; } .fmodes .fm img { width: 36px; height: 36px; } .fmodes .fm b { font-size: 15.5px; } }
/* v21d: seat held for a player who switched apps */
.rseat .pill.away { font-size: 11.5px; padding: 2px 7px; letter-spacing: -.01em; white-space: nowrap; }
.rseat .pill.away b { font-variant-numeric: tabular-nums; }

/* ---------- v24 KỸ NĂNG 2: choose skill 1 / 2 in the hero detail, KN2 badge on cards ---------- */
.detail dd.skrow { position: relative; padding: 8px 10px; margin: 2px 0 6px; border-radius: 12px; background: #F4F7FF; border: 1.5px solid transparent; }
.detail dd.skrow.cur { background: #FFF8DC; border-color: var(--sun, #FFC93C); }
.detail dd.skrow.s2 b { color: #7A3CE0; }
.detail dd.skrow.locked { opacity: .78; }
.skbtn { display: block; margin-top: 7px; min-height: 36px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #5B8CFF, #3D63E8); border: 0; border-radius: 999px; box-shadow: 0 3px 0 #2A44A8; cursor: pointer; }
.skbtn.on { color: #6B4A00; background: var(--sun, #FFC93C); box-shadow: 0 3px 0 #C99400; cursor: default; }
.skbtn:disabled { opacity: .6; }
.s2lock { display: inline-block; margin-top: 7px; padding: 4px 10px; font-size: 12px; font-weight: 800; color: #6A5A8A; background: #ECE6FA; border-radius: 999px; }
.s2lock::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; border: 2px solid currentColor; border-radius: 2px 2px 3px 3px; box-shadow: inset 0 -4px 0 currentColor; }
.card .s2b { position: absolute; top: 3px; right: 3px; z-index: 2; font-size: 10px; font-weight: 900; line-height: 1; padding: 2px 5px; color: #fff; background: #7A3CE0; border: 1.5px solid #fff; border-radius: 6px; }

/* ---------- v24 ĐỘI MẶC ĐỊNH: one-tap saved teams ---------- */
.tpbar { margin: 0 0 8px; }
.tplabel { display: block; margin: 0 2px 4px; font-size: 12px; font-weight: 900; color: var(--blueT, #2B4BB8); letter-spacing: .2px; }
.tprow { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tprow::-webkit-scrollbar { display: none; }
.tpre, .tpsave { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; padding: 5px 9px; font: inherit; border-radius: 14px; cursor: pointer; }
.tpre { background: #fff; border: 2px solid var(--line, #D6DEF5); box-shadow: 0 2px 0 var(--line, #D6DEF5); }
.tpre.on { border-color: var(--sun, #FFC93C); background: #FFF8DC; box-shadow: 0 2px 0 #E2B12E; }
.tpre b { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 900; color: #1E2A5A; }
.tph { display: inline-flex; }
.tph img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: #EAF0FF; object-fit: cover; }
.tph img + img { margin-left: -7px; }
.tpsave { justify-content: center; min-width: 78px; font-size: 12px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #5B8CFF, #3D63E8); border: 0; box-shadow: 0 3px 0 #2A44A8; }
.teamin { max-width: 460px; }
.teambody { padding: 4px 2px 6px; }
.tscur { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: #F4F7FF; }
.tscur .tph img, .tsrow .tph img { width: 34px; height: 34px; }
.tscur b, .tsname b { display: block; font-size: 14px; color: #1E2A5A; }
.tscur small, .tsname small { display: block; font-size: 12px; color: #5A6890; }
.tsnamein { display: block; margin: 10px 2px; font-size: 12.5px; font-weight: 800; color: #3A4670; }
.tsnamein input { display: block; width: 100%; margin-top: 4px; min-height: 40px; padding: 6px 10px; font: inherit; font-size: 15px; border: 2px solid var(--line, #D6DEF5); border-radius: 12px; box-sizing: border-box; }
.tslist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tsrow { display: grid; grid-template-columns: 22px auto 1fr auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 14px; background: #fff; border: 2px solid var(--line, #D6DEF5); }
.tsrow.empty { border-style: dashed; background: #FAFBFF; }
.tsrow.empty .tph { display: none; }
.tsrow.empty { grid-template-columns: 22px 1fr auto; }
.tsno { font-weight: 900; color: #8A96BE; text-align: center; }
.tsname { min-width: 0; }
.tsname small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsact { display: flex; gap: 5px; }
.tshint { margin: 10px 2px 0; font-size: 12px; color: #5A6890; }
.tsact .btn, .tsact .btn.primary { font-size: 13px; padding: 6px 11px; min-height: 36px; min-width: 0; }

/* ---------------------------------------------------------------- v24 sound button + popover */
.appbar .sndbtn { flex: none; width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; border-radius: 50%;
  background: #FFFFFF; border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); cursor: pointer; color: var(--ink); }
.appbar .sndbtn:active { transform: translateY(2px); box-shadow: none; }
.sndbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sndbtn svg .spk { fill: #FFC83D; }
.sndbtn svg .mx { display: none; stroke: #E5484D; }
.sndbtn.off svg .wv { display: none; }
.sndbtn.off svg .mx { display: inline; }
.sndbtn.off svg .spk { fill: #C9D3E6; }
.sndpop { position: fixed; z-index: 60; top: 56px; right: max(8px, calc(50vw - 270px)); width: min(300px, calc(100vw - 16px)); padding: 12px 14px 14px;
  background: #FFFFFF; border: 2px solid var(--line); border-radius: 16px; box-shadow: 0 4px 0 var(--line), 0 12px 30px rgba(30, 42, 90, .18);
  display: grid; gap: 10px; }
.sndpop.hidden { display: none; }
.sndpop .sndttl { font-size: 15px; font-weight: 900; color: var(--ink); }
.sndrow { display: grid; grid-template-columns: 72px 1fr 40px; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.sndrow input[type=range] { width: 100%; height: 28px; accent-color: #2F80ED; cursor: pointer; }
.sndrow em { font-style: normal; font-size: 12.5px; font-weight: 800; color: #5B6787; text-align: right; }
.sndpop .btn { justify-self: stretch; }

/* ---------------------------------------------------------------- v24 Thách đấu rewards */
.rwline { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 800; color: #B35C00; }
.rwline b { font-weight: 900; }
.rwline.dim { color: #6B7794; font-weight: 700; }
.chrw { margin-top: 12px; border: 2px solid var(--line); border-radius: 14px; background: #FFF8E6; overflow: hidden; }
.chrw > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px; font-size: 14px; color: var(--ink); }
.chrw > summary::-webkit-details-marker { display: none; }
.chrw > summary span { font-size: 12.5px; font-weight: 800; color: #B35C00; }
.chrw > summary::after { content: '▾'; font-size: 13px; color: #6B7794; transition: transform .2s; }
.chrw[open] > summary::after { transform: rotate(180deg); }
.chrw .chnote { margin: 0 12px 8px; }
.rwcols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px 12px; }
.rwcols small { display: block; font-size: 11.5px; font-weight: 800; color: #6B7794; margin-bottom: 4px; }
.rwtab { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rwtab li { display: flex; justify-content: space-between; gap: 6px; padding: 5px 8px; border-radius: 9px; background: #FFFFFF; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.rwtab li b { color: #B35C00; font-weight: 900; }
.rwtab li.got { opacity: .62; }
.rwtab li.got b { color: #2E9E5B; }
.rwgot { color: #B35C00; }

/* v25: many bonds per hero -> count badge + folded list */
.bcount { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 9px; background: #FFE08A; color: #6B4A00; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; vertical-align: middle; }
details.dmore { margin-top: 4px; }
details.dmore > summary { cursor: pointer; list-style: none; display: inline-block; padding: 4px 12px; border-radius: 14px; background: #FFF3C4; color: #7A5400; font-weight: 700; font-size: 12.5px; }
details.dmore > summary::-webkit-details-marker { display: none; }
details.dmore[open] > summary { margin-bottom: 4px; }

/* ------------------------------------------------------------ v27 GIẢI ĐẤU TUẦN */
.tourcard { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 520px; margin: 0 auto 10px; padding: 8px 12px; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: linear-gradient(135deg, #FFF7CF 0%, #FFE07A 55%, #FFC94A 100%); border: 2.5px solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--line), inset 0 2px 0 rgba(255, 255, 255, .8); }
.tourcard:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--line); }
.tcico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2.5px solid var(--line); color: #C25E00; }
.tcico svg, .tchamp svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tctx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tctx b { font-size: 16px; font-weight: 900; line-height: 1.2; }
.tctx b em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted); margin-left: 4px; }
.tctx small { font-size: 12.5px; font-weight: 700; color: #6B4A12; line-height: 1.3; }
.tctx small .bteam { vertical-align: middle; }
.tctx small .bteam img + img { margin-left: -5px; }
.tcbadge { flex: none; font-size: 12px; font-weight: 900; padding: 3px 9px; border-radius: 99px; background: var(--line); color: #fff; white-space: nowrap; }
.tourcard.hot .tcbadge { background: #E5484D; }
.tourcard.ok .tcbadge { background: #1F9D57; }
.tourcard.live .tcbadge { background: #E5484D; animation: tpulse 1.2s ease-in-out infinite; }
@keyframes tpulse { 50% { opacity: .55; } }
.tourin { max-width: 560px; max-height: 92dvh; }
.tourhead { padding: 0 14px; }
.throw { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 800; color: var(--muted); }
.tpill { flex: none; font-size: 11.5px; font-weight: 900; padding: 2px 8px; border-radius: 99px; border: 2px solid var(--line); background: #fff; color: var(--ink); white-space: nowrap; }
.tpill.s-reg, .tpill.s-ok { background: #DDF7E7; }
.tpill.s-g1, .tpill.s-g2, .tpill.s-g3, .tpill.s-qf, .tpill.s-sf, .tpill.s-f { background: #FFE9A8; }
.tpill.s-cancel { background: #FFE1E1; }
.tpill.s-lock { background: #E8E3FF; }
.thline { margin: 4px 0 2px; font-size: 13.5px; line-height: 1.4; }
.tlive { display: inline-block; font-size: 11px; font-weight: 900; text-transform: uppercase; color: #fff; background: #E5484D; border-radius: 6px; padding: 1px 6px; animation: tpulse 1.2s ease-in-out infinite; }
.tlivebar { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 2px; scrollbar-width: none; }
.tlivebar::-webkit-scrollbar { display: none; }
.tlchip { flex: none; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--ink); background: #fff; border: 2px solid #E5484D; border-radius: 99px; padding: 3px 10px; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlchip i { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; animation: tpulse 1.2s infinite; }
.tlchip small { color: var(--muted); }
.tstale { margin: 6px 0 0; font-size: 13px; font-weight: 800; color: #C2410C; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tourtabs { display: flex; margin: 8px 12px 8px; }
.tourtabs button { flex: 1; padding: 4px 2px; font-size: 14px; white-space: nowrap; }
.tourbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px calc(16px + env(safe-area-inset-bottom)); }
.tsub { margin: 14px 2px 6px; font-size: 15px; font-weight: 900; }
.tnone { text-align: center; font-size: 13px; }
.tml { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tm { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 6px 8px; box-shadow: 0 2px 0 var(--line); }
.tm.s-live, .tm.s-soon { border-color: #E5484D; box-shadow: 0 2px 0 #E5484D; }
.tm.s-wait { background: #F7FAFF; border-style: dashed; box-shadow: none; }
.tmtop { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.tmtop > span { font-size: 12.5px; font-weight: 900; color: var(--ink); white-space: nowrap; }
.tmtop > small { flex: 1; text-align: right; font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmtop .btn.sm { font-size: 13px; padding: 2px 10px; flex: none; }
.tnow { color: #E5484D; animation: tpulse 1.2s infinite; }
.tmvs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin-top: 4px; }
.tmvs > em { font-style: normal; font-weight: 900; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tmvs > em.tdraw { color: var(--ink); }
.tms { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tmvs .tms:last-child { flex-direction: row-reverse; text-align: right; }
.tms b { min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tms .bteam { flex: none; display: inline-flex; }
.tms .bteam img, .ttab .bteam img, .tsr .bteam img { border-radius: 50%; background: #EAF5FF; box-shadow: 0 0 0 1.5px var(--line); }
.tms .bteam img + img, .ttab .bteam img + img, .tsr .bteam img + img { margin-left: -6px; }
.tms.win b { color: #C25E00; }
.tms.lose { opacity: .5; }
.tms.me b, .ttab tr.me td.tn b, .tsr.me b { background: #FFF0A8; border-radius: 6px; padding: 0 4px; }
.tmine { background: var(--panel); border: 2.5px solid var(--line); border-radius: 16px; box-shadow: 0 3px 0 var(--line); padding: 8px 10px; margin-bottom: 8px; }
.tmh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tmh b { font-size: 15px; }
.tmst { margin: 6px 0 0; text-align: center; font-size: 14px; }
.tteam3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tteam3 .th { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.tteam3 img { border-radius: 50%; background: #EAF5FF; box-shadow: 0 0 0 2px var(--line); }
.tteam3 b { font-size: 13px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.tteam3 small { font-size: 12px; color: var(--muted); font-weight: 800; }
.tk2 { font-style: normal; font-size: 10.5px; font-weight: 900; color: #fff; background: #7C5CFF; border-radius: 5px; padding: 0 4px; }
.tswap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 6px 10px; margin: 0 0 8px; border: 2px dashed var(--line); border-radius: 14px; background: #fff; }
.tswap small { font-weight: 800; color: var(--muted); }
.tswap .bteam img { border-radius: 50%; box-shadow: 0 0 0 1.5px var(--line); }
.tswap .bteam img + img { margin-left: -6px; }
.trow { display: flex; justify-content: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.tprize { margin: 12px 0 6px; padding: 8px 10px; background: #FFF9E3; border: 2px solid var(--line); border-radius: 14px; text-align: center; }
.tprize > b { font-size: 13.5px; }
.tprize ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tprize li { display: flex; flex-direction: column; align-items: center; }
.tprize li span { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.tprize li b { font-size: 19px; font-weight: 900; color: #C25E00; }
.tprize small { display: block; margin-top: 4px; font-size: 12px; font-weight: 800; color: #1F9D57; }
.tgjump { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.tgjump button { flex: none; min-width: 34px; font: inherit; font-weight: 900; font-size: 13.5px; padding: 3px 8px; border-radius: 10px; border: 2px solid var(--line); background: #fff; color: var(--ink); }
.tgjump button.on { background: var(--sun); }
.tgrp { margin: 0 0 14px; scroll-margin-top: 4px; }
.tgrp h4, .tstage h4 { margin: 6px 2px 6px; font-size: 15px; font-weight: 900; }
.ttab { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 13px; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.ttab th { font-size: 11px; font-weight: 800; color: var(--muted); padding: 4px 3px; background: #F2F8FF; text-align: center; }
.ttab td { padding: 4px 3px; text-align: center; border-top: 1px solid #E3ECF8; }
.ttab .tn { text-align: left; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttab td.tn .bteam { display: inline-flex; vertical-align: middle; margin-right: 4px; }
.ttab td.tn b { vertical-align: middle; }
.ttab tr.q td:first-child { box-shadow: inset 3px 0 0 #2FC26B; color: #1F9D57; font-weight: 900; }
.ttab tr.me td { background: #FFFBE0; }
.tstage { margin: 0 0 12px; }
.tsgrid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 480px) { .tsgrid { grid-template-columns: 1fr 1fr; } }
.tser { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 6px 8px; box-shadow: 0 2px 0 var(--line); min-width: 0; }
.tser.live { border-color: #E5484D; box-shadow: 0 2px 0 #E5484D; }
.tser.ph { background: #F7FAFF; border-style: dashed; box-shadow: none; }
.tser.ph .tsr b { color: var(--muted); font-weight: 800; }
.tsh { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 2px; }
.tsh b { font-size: 13.5px; }
.tsh small { font-size: 11.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.tsr { display: flex; align-items: center; gap: 6px; padding: 3px 0; min-width: 0; }
.tsr .bteam { flex: none; display: inline-flex; }
.tsr b { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsc { flex: none; min-width: 22px; text-align: right; font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tsr.win b, .tsr.win .tsc { color: #C25E00; }
.tsr.lose { opacity: .5; }
.tgames { list-style: none; margin: 4px 0 0; padding: 4px 0 0; border-top: 1px dashed #C9D6EA; display: flex; flex-direction: column; gap: 3px; }
.tgames li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; min-height: 26px; }
.tgames li span { font-weight: 900; flex: none; }
.tgames li small { flex: 1; min-width: 0; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgames .btn.sm { font-size: 12.5px; padding: 1px 9px; }
.tchamp { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; padding: 8px 12px; border: 2.5px solid var(--line); border-radius: 16px; box-shadow: 0 3px 0 var(--line); background: linear-gradient(135deg, #FFF7CF, #FFC94A); color: #8A4B00; }
.tchamp svg { width: 40px; height: 40px; flex: none; }
.tchamp div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tchamp small { font-weight: 900; font-size: 12px; }
.tchamp b { font-size: 19px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tchamp .bteam img { border-radius: 50%; box-shadow: 0 0 0 1.5px var(--line); background: #fff; }
.tchamp .bteam img + img { margin-left: -6px; }
.ttl { list-style: none; margin: 4px 0 8px; padding: 0 0 0 4px; }
.ttl li { position: relative; padding: 2px 0 6px 20px; display: flex; flex-direction: column; }
.ttl li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); background: #fff; }
.ttl li::after { content: ''; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 2px; background: #C9D6EA; }
.ttl li:last-child::after { display: none; }
.ttl li b { font-size: 13.5px; }
.ttl li small { font-size: 12px; color: var(--muted); font-weight: 700; }
.ttl li.past { opacity: .55; }
.ttl li.past::before { background: #2FC26B; }
.ttl li.now::before { background: #FFC93C; box-shadow: 0 0 0 3px rgba(255, 201, 60, .45); }
.ttl li.now b { color: #C25E00; }
.trules { margin: 8px 0; padding-left: 18px; font-size: 13.5px; line-height: 1.45; }
.trules li { margin: 4px 0; }
.thist .rk { min-width: 48px; font-size: 14px; }
.bteam.thid { display: inline-grid !important; place-items: center; width: var(--s, 20px); height: var(--s, 20px); border-radius: 50%; background: #E3ECF8; box-shadow: 0 0 0 1.5px var(--line); font-size: 11px; font-weight: 900; color: var(--muted); }

/* ------------------------------------------------------------ v28 BẢNG XẾP ĐỘI (#tpkSheet) */
#tpkSheet { z-index: 34; }
.tpkin { max-height: 92dvh; }
.pktop { padding: 0 12px 6px; display: flex; flex-direction: column; gap: 7px; }
.pkslots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pks { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 6px 4px 5px; border: 2.5px dashed #9FB0D9; border-radius: 14px; background: #F6F9FF; font: inherit; color: var(--ink); }
.pks.on { border-style: solid; border-color: var(--line); background: #fff; box-shadow: 0 3px 0 var(--line); cursor: pointer; }
.pks img { width: 50px; height: 50px; border-radius: 50%; background: #EAF5FF; box-shadow: 0 0 0 2px var(--line); object-fit: cover; }
.pke { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #E6ECFA; color: #8A96BE; font-weight: 900; font-size: 20px; }
.pks b { font-size: 13px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pks small { font-size: 11.5px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.pks i { position: absolute; top: 3px; right: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--red, #E5484D); color: #fff; font-style: normal; font-weight: 900; font-size: 14px; line-height: 20px; text-align: center; }
.pkname { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 14px; }
.pkname input { flex: 1; min-width: 0; font: inherit; font-weight: 700; padding: 6px 10px; border: 2.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.pkpre { display: flex; gap: 6px; overflow-x: auto; align-items: center; padding-bottom: 2px; scrollbar-width: none; }
.pkpre::-webkit-scrollbar { display: none; }
.pkpre > small { font-weight: 900; color: var(--muted); white-space: nowrap; font-size: 12px; }
.pkchip { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border: 2px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 900; color: var(--ink); cursor: pointer; }
.pkchip .bteam img { border-radius: 50%; box-shadow: 0 0 0 1.5px var(--line); }
.pkchip .bteam img + img { margin-left: -6px; }
.pkq { font: inherit; font-weight: 700; padding: 7px 12px; border: 2.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.pkgrid { flex: 1; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; align-content: start; }
.pkc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 5px 3px 4px; border: 2px solid #CBD5EE; border-radius: 12px; background: #fff; font: inherit; color: var(--ink); cursor: pointer; }
.pkc img { width: 46px; height: 46px; border-radius: 50%; background: #EAF5FF; object-fit: cover; }
.pkc b { font-size: 12px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkc small { font-size: 11px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.pkc.on { border-color: #2F80ED; background: #EAF3FF; box-shadow: 0 0 0 2px #2F80ED inset; }
.pkc em { position: absolute; top: 3px; left: 4px; width: 19px; height: 19px; border-radius: 50%; background: #2F80ED; color: #fff; font-style: normal; font-weight: 900; font-size: 12px; line-height: 19px; text-align: center; }
.pknone { grid-column: 1 / -1; text-align: center; }
.pkfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 2px solid #D6DEF2; background: #fff; }
.pkfoot small { font-weight: 800; color: var(--muted); font-size: 12.5px; }
.pkfoot .btn { min-width: 120px; }
.trow.tedit { margin: 8px 0 2px; }

/* Tướng của tôi -> Đội của tôi */
.mhteams { margin-top: 10px; }
.mhth { display: flex; flex-direction: column; gap: 2px; }
.mhth b { font-size: 16px; }
.mhth small { color: var(--muted); font-weight: 700; font-size: 12.5px; line-height: 1.35; }
.mtl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mtrow { display: grid; grid-template-columns: 18px auto 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border: 2px solid #CBD5EE; border-radius: 14px; background: #fff; }
.mtrow .bteam img { border-radius: 50%; box-shadow: 0 0 0 1.5px var(--line); background: #EAF5FF; }
.mtrow .bteam img + img { margin-left: -7px; }
.mtn { display: flex; flex-direction: column; min-width: 0; }
.mtn b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtn small { font-size: 11.5px; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mta { display: flex; gap: 5px; }
.mtrow.empty { grid-template-columns: 18px 1fr; border-style: dashed; background: #F8FAFF; }
.mtnew { font: inherit; font-weight: 900; font-size: 14px; color: #2F80ED; background: none; border: 0; text-align: left; padding: 6px 2px; cursor: pointer; }

/* Vòng bảng: colour badge per group (poster style) */
.tgrp { border-left: 5px solid var(--gc, #2F80ED); padding-left: 7px; border-radius: 4px; }
.tgrp h4 { display: flex; align-items: center; gap: 7px; }
.tgrp h4 i { width: 26px; height: 26px; border-radius: 8px; background: var(--gc, #2F80ED); color: #fff; font-style: normal; display: grid; place-items: center; font-size: 15px; box-shadow: 0 2px 0 var(--line); }

/* Nhánh đấu: bracket tree */
.ttree { position: relative; height: 430px; margin: 4px -4px 10px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(circle at 50% 32%, #3B5BDB 0%, #1F3A8A 45%, #142456 100%); border: 2.5px solid var(--line); box-shadow: 0 4px 0 var(--line); color: #fff; }
.tth { position: absolute; left: 0; right: 0; top: 6px; height: 16px; }
.tth span { position: absolute; transform: translateX(-50%); font-size: 10.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #BFD0FF; white-space: nowrap; }
.ttlines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ttlines path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ttlines .g { stroke: rgba(205, 220, 255, .55); stroke-width: 2; }
.ttlines .w { stroke: #FFD23F; stroke-width: 3.5; }
.ttcup { position: absolute; left: 50%; top: 19%; width: 74px; height: auto; transform: translateX(-50%); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)) saturate(.75); opacity: .9; }
.ttcup.on { filter: drop-shadow(0 0 14px rgba(255, 210, 63, .85)); opacity: 1; }
.ttsc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 44px; padding: 3px 8px; border-radius: 10px; background: #0E1A44; border: 2px solid #8FA7F0; font-weight: 900; font-size: 14px; text-align: center; white-space: nowrap; }
.ttsc.done { border-color: #FFD23F; color: #FFD23F; }
.ttch { position: absolute; left: 50%; top: 59%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 34%; text-align: center; }
.ttch small { font-size: 10.5px; font-weight: 900; color: #FFD23F; text-transform: uppercase; letter-spacing: .05em; }
.ttch b { font-size: 13px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttch.wait small { color: #BFD0FF; }
.ttch.wait b { font-size: 11.5px; font-weight: 800; color: #DCE6FF; white-space: normal; }
.ttch .bteam img { border-radius: 50%; box-shadow: 0 0 0 1.5px #FFD23F; background: #fff; }
.ttch .bteam img + img { margin-left: -6px; }
.tnode { position: absolute; width: 66px; transform: translate(-50%, -21px); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.tnh { position: relative; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px #CFDBFF, 0 3px 6px rgba(0, 0, 0, .35); display: grid; place-items: center; overflow: visible; }
.tnh img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #EAF5FF; }
.tnh em { font-style: normal; font-weight: 900; font-size: 13px; color: #1F3A8A; }
.tnode.ph .tnh { background: #2A4396; box-shadow: 0 0 0 2px rgba(205, 220, 255, .55); }
.tnode.ph .tnh em { color: #DCE6FF; }
.tnode b { font-size: 10.5px; font-weight: 900; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.tnode.ph b { color: #BFD0FF; font-weight: 800; }
.tnode.s-win .tnh { box-shadow: 0 0 0 3px #FFD23F, 0 0 12px rgba(255, 210, 63, .7); }
.tnode.s-lose { opacity: .5; }
.tnode.s-lose img { filter: grayscale(.85); }
.tnode.me .tnh { box-shadow: 0 0 0 3px #4ADE80, 0 0 10px rgba(74, 222, 128, .7); }
.tnode.me b { color: #86EFAC; }
.tnsc { position: absolute; right: -7px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #0E1A44; border: 1.5px solid #8FA7F0; color: #fff; font-style: normal; font-weight: 900; font-size: 11px; line-height: 15px; text-align: center; }
.tnode.s-win .tnsc { border-color: #FFD23F; color: #FFD23F; }

/* v29 "Của tôi": one titled block per faction */
.sec.mgsec { margin: 12px 0 6px 2px; font-size: 15px; }
.sec.mgsec:first-child { margin-top: 2px; }
.cards.mgcards + .sec.mgsec { padding-top: 8px; border-top: 1px dashed var(--line, rgba(0, 0, 0, .12)); }

/* v30 Tướng của tôi: hero info pop-up */
#pickArea.hm > #detail { display: none; }
.hpopin { height: auto; }
.hpopbody { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 12px calc(14px + env(safe-area-inset-bottom)); }
.hpopbody > .detail { margin-top: 0; }
.hpopx { width: 40px; height: 40px; flex: none; padding: 0; border-radius: 50%; border: 2.5px solid var(--line); background: #fff; display: grid; place-items: center; box-shadow: var(--ledge); cursor: pointer; }
.hpopx svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.hpopx:active { transform: translateY(2px); box-shadow: none; }

/* v31: the saved-team strip must never widen its panel (4-5+ teams scroll sideways inside it) */
#rankPresets, .tpbar { min-width: 0; max-width: 100%; }
.tprow { width: 100%; max-width: min(100%, calc(100vw - 24px)); contain: inline-size; }
.rankbox > * { min-width: 0; }
/* long hero names in the end sheet wrap instead of widening it */
.sheet h2, .endsub { overflow-wrap: anywhere; }


/* ------------------------------------------------------------------ v36 đa ngôn ngữ */
.langrow { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 auto 10px; flex-wrap: wrap; }
.langrow svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #1E2A5A; stroke-width: 1.8; }
.langrow button { font: inherit; font-weight: 700; font-size: 14px; padding: 5px 12px; border-radius: 999px; border: 2px solid #1E2A5A; background: #fff; color: #1E2A5A; cursor: pointer; min-height: 32px; }
.langrow button.on { background: #FFD43A; }
.langrow button:focus-visible { outline: 3px solid #1F6FE0; outline-offset: 2px; }
.gatelang { margin-bottom: 4px; }
.plang { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
.plang > span { font-weight: 800; }
.plang .langrow { margin: 0; }
html[lang="en"] .questbar.ready .qpts::after { content: ' · Claim'; }

/* v37: language row inside the settings popover */
.sndpop .sndlang { margin: 2px 0 2px; padding-bottom: 10px; border-bottom: 1px solid #E3E8F5; }
.sndpop .sndlang .langrow button { font-size: 13px; padding: 4px 10px; min-height: 30px; }
.sndpop .sndsec { font-size: 13px; font-weight: 900; color: #5B6787; }

/* ---------------- v39: đặt cược giải đấu ---------------- */
.tbwal { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, #FFF4D6, #FFE3A3); border: 2px solid #F5B83D; margin: 4px 0 8px; }
.tbwal small { display: block; font-size: 12px; color: #8a5a00; }
.tbwal b { font-size: 24px; line-height: 1.1; color: #7a4b00; }
.tbwal .btn { white-space: normal; max-width: 58%; line-height: 1.2; }
.tbl { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tbm { background: #fff; border: 2px solid #dfe6f3; border-radius: 14px; padding: 8px; }
.tbm.has { border-color: #22B573; }
.tbvs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 6px; margin-top: 4px; }
.tbvs em { align-self: center; font-style: normal; font-weight: 800; color: #8090a8; font-size: 12px; }
.tbside { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: 12px; border: 2px solid #dfe6f3; background: #f7f9fd; min-width: 0; cursor: pointer; font: inherit; color: inherit; }
.tbside b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.tbside small { font-size: 11px; color: #7a869a; }
.tbside.on { border-color: #2F80ED; background: #EAF2FF; box-shadow: 0 0 0 2px rgba(47, 128, 237, .2); }
.tbside:disabled { cursor: default; }
.tbamt { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.tbmy { margin: 6px 0 0; font-size: 13px; text-align: center; }
.tbhint { margin: 6px 0 0; font-size: 12px; color: #7a869a; text-align: center; }
.tbp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; background: #fff; border-radius: 12px; padding: 8px 10px; border: 1px solid #e3e9f3; }
.tbp > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbwin { color: #16a34a; }
.tblose { color: #dc2626; }

/* v46 in-fight hero details (3v3 / HỖN CHIẾN): light backdrop so the fight stays visible above the sheet */
#fightPop { background: rgba(30, 42, 90, .14); -webkit-backdrop-filter: none; backdrop-filter: none; }
#fightPop .fpopin { max-height: 60dvh; }
.fpdetail { margin-top: 0; }
.fpstat { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.fpwho { flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 13px; color: #fff; background: var(--tc); border: 2px solid var(--line); border-radius: 99px; padding: 1px 10px; }
.fphp { flex: 1; min-width: 40px; height: 12px; border-radius: 99px; background: #26315F; border: 2px solid var(--line); overflow: hidden; }
.fphp i { display: block; height: 100%; transition: width .25s ease-out; }
.fphpt { flex: none; font-size: 14px; white-space: nowrap; }

/* ===== v47 in-game chat: room box, battle button + one-line bubble, bottom sheet ===== */
.rchat { max-width: 680px; margin: 12px auto 4px; background: var(--card); border: 2.5px solid var(--line); border-radius: 16px; padding: 8px 10px 8px; box-shadow: 0 3px 0 var(--line); }
.chathead { display: flex; align-items: center; gap: 6px; margin: 0 2px 6px; font-size: 15px; color: var(--ink); }
.chathead svg, .chatbtn svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; flex: none; }
.chatlist { list-style: none; margin: 0; padding: 0 2px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; overscroll-behavior: contain; font-size: 14px; line-height: 1.38; }
.rchat .chatlist { max-height: 112px; }
.cm { word-break: break-word; color: var(--ink); padding: 1px 6px; border-radius: 8px; }
.cm b { color: var(--sc); font-weight: 900; margin-right: 6px; }
.cm i { font-style: normal; color: var(--muted); font-size: 12px; margin: 0 6px 0 -2px; }
.cm.me { background: var(--soft, #EEF8FF); }
.cm.s0, .cbub.s0 { --sc: var(--f0); } .cm.s1, .cbub.s1 { --sc: var(--f1); } .cm.s2, .cbub.s2 { --sc: var(--f2); }
.cm.s3, .cbub.s3 { --sc: var(--f3); } .cm.s4, .cbub.s4 { --sc: var(--f4); } .cm.s5, .cbub.s5 { --sc: var(--f5); }
.cm.sx, .cbub.sx { --sc: var(--muted); }
.cempty { color: var(--muted); font-size: 13px; text-align: center; padding: 6px 0; }
.chatq { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 2px 2px; -webkit-overflow-scrolling: touch; }
.chatq::-webkit-scrollbar { display: none; }
.cq { flex: none; font: inherit; font-size: 13px; font-weight: 800; padding: 5px 11px; border-radius: 99px; border: 2px solid var(--line); background: #FFF7D6; color: var(--ink); cursor: pointer; }
.cq:active { transform: translateY(1px); }
.chatform { display: flex; gap: 6px; margin-top: 7px; }
.chatform input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; padding: 6px 12px; border-radius: 99px; border: 2.5px solid var(--line); background: #fff; color: var(--ink); }
.chatform input:focus { outline: 3px solid var(--accent); outline-offset: 0; }
.csend { flex: none; width: 44px; padding: 0; display: grid; place-items: center; }
.csend svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linejoin: round; stroke-linecap: round; }
.chatst { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: #C0392B; text-align: center; }
.chatst:empty { display: none; }
/* battle: small button top-left (mirrors x1), above the end screen; newest message as one line next to it */
.chatbtn { position: absolute; top: 10px; left: 10px; z-index: 25; width: 44px; height: 36px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .86); border: 2.5px solid var(--line); border-radius: 99px; box-shadow: 0 3px 0 var(--line); opacity: .82; }
.chatbtn:active { transform: translateY(2px); box-shadow: none; }
.chatbtn.hot { opacity: 1; background: var(--sun); }
.chatbtn i { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 99px; background: #E5484D; color: #fff;
  font-style: normal; font-size: 11px; font-weight: 900; line-height: 15px; border: 2px solid #fff; text-align: center; }
.chattick { position: absolute; top: 10px; left: 62px; right: 10px; z-index: 25; height: 36px; display: flex; align-items: center; pointer-events: none; }
.stage:has(#btnSpeed:not(.hidden)) .chattick { right: 66px; }
.cbub { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 12px 6px 9px; border-radius: 15px 15px 15px 4px;
  background: rgba(255, 255, 255, .9); border-left: 4px solid var(--sc); box-shadow: 0 2px 8px rgba(30, 42, 90, .18); font-size: 13.5px; font-weight: 700; color: var(--ink); }
.cbub b { color: var(--sc); font-weight: 900; margin-right: 6px; }
.chattick.in .cbub { animation: cbubin .22s ease-out; }
.chattick.out { opacity: 0; transition: opacity .25s ease-in; }
@keyframes cbubin { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
#chatPop { background: rgba(30, 42, 90, .12); -webkit-backdrop-filter: none; backdrop-filter: none; }
.chatpopin { max-height: 56dvh; padding: 0 12px calc(10px + env(safe-area-inset-bottom)); }
.chatpopin .phead { padding: 10px 2px 6px; }
.chatpopin .chatlist { min-height: 56px; max-height: 24dvh; }
.chattog { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.chattog input { width: 18px; height: 18px; accent-color: #2F80ED; }
@media (prefers-reduced-motion: reduce) { .chattick.in .cbub { animation: none; } .chattick.out { transition: none; } }
/* ============================================================ v49: bạn bè (nút trên thanh, bảng, thẻ lời mời) */
.appbar .frbtn { flex: none; position: relative; width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; border-radius: 50%;
  background: #FFFFFF; border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); cursor: pointer; color: var(--ink); }
.appbar .frbtn:active { transform: translateY(2px); box-shadow: none; }
.frbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.frbtn svg circle:first-child { fill: #7CD4FF; }
.frbtn .fron { position: absolute; right: -7px; bottom: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 99px; background: var(--green, #2FC26B);
  border: 2px solid #fff; color: #fff; font: 800 10px/12px system-ui, sans-serif; font-style: normal; text-align: center; }
.frbtn .frdot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 2px solid #fff; }
.frbtn.hot { animation: frpulse 1.8s ease-in-out infinite; }
@keyframes frpulse { 50% { box-shadow: 0 2px 0 var(--line), 0 0 0 5px rgba(255, 79, 109, .28); } }
body.guest .frbtn { display: none; }
.frin { max-height: 86dvh; }
.frin .phead b { font-size: 19px; }
.frbody { overflow-y: auto; overscroll-behavior: contain; padding: 0 14px calc(14px + env(safe-area-inset-bottom)); }
.frbody h4 { display: flex; align-items: baseline; gap: 6px; margin: 14px 2px 6px; font-size: 14.5px; color: var(--ink); }
.frbody h4 small { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.frbody h4 .frn { min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font-size: 11.5px; line-height: 18px; text-align: center; }
.frroom { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 2px 0 8px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 14px;
  background: linear-gradient(90deg, #FFF6C9, #FFFFFF 80%); }
.frroom b { font-size: 14px; }
.frroom span { flex: 1 1 140px; font-size: 12.5px; color: var(--muted); }
.frfind { display: flex; gap: 6px; margin: 4px 0 2px; }
.frfind input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--ink); background: #fff;
  border: 2px solid var(--line); border-radius: 12px; }
.frfind input:focus { outline: 3px solid rgba(47, 140, 255, .35); outline-offset: 0; }
.frfind .btn { flex: none; }
.frmsg { margin: 6px 2px; padding: 6px 10px; border-radius: 10px; background: #FFE3E8; color: #A0122B; font-size: 13px; font-weight: 700; }
.frlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.frlist.find { margin-top: 8px; }
.frow { display: flex; align-items: center; gap: 10px; padding: 7px 8px; background: #fff; border: 2px solid rgba(30, 42, 90, .16); border-radius: 14px; }
.frow.on { border-color: rgba(47, 194, 107, .55); }
.frow.inv { border-color: var(--line); background: linear-gradient(90deg, #E6F7FF, #fff 80%); }
.frow.off .fava { filter: grayscale(.85); opacity: .75; }
.frow.picking { flex-wrap: wrap; }
.frow.picking .fact { width: 100%; justify-content: flex-end; }
.fava { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); background: #E8F4FF center / cover no-repeat; }
.fava.none { background: #E8F4FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='4.2' fill='%231E2A5A'/%3E%3Cpath d='M4 21c1.2-4.4 4.4-6.4 8-6.4s6.8 2 8 6.4' fill='%231E2A5A'/%3E%3C/svg%3E") center / 70% no-repeat; }
.pdot { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #fff; background: #B8C0D9; }
.pdot.on, .pdot.room { background: #2FC26B; }
.pdot.fight, .pdot.rank { background: #FF8A3D; }
.fnm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fnm b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnm small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow.on .fnm small { color: #1E8A4C; font-weight: 700; }
.fact { flex: none; display: flex; align-items: center; gap: 5px; }
.fact .btn.sm { font-size: 13.5px; padding: 3px 10px; }
.fact .btn.more { padding: 3px 8px; letter-spacing: 1px; }
.frtag { font-size: 12.5px; font-weight: 800; font-style: normal; color: var(--muted); padding: 0 4px; }
.frtag.ok { color: #1E8A4C; }
.frempty { margin: 8px 2px; font-size: 13.5px; color: var(--muted); list-style: none; }
.frhint { margin: 6px 2px 0; font-size: 12.5px; color: var(--muted); }
.frme { margin: 16px 2px 2px; padding-top: 10px; border-top: 2px dashed rgba(30, 42, 90, .18); font-size: 12.5px; color: var(--muted); }
.frme b { color: var(--ink); font-size: 14px; user-select: all; }
.frinv { position: fixed; z-index: 29; left: 50%; top: calc(52px + env(safe-area-inset-top)); transform: translateX(-50%); width: min(94vw, 460px);
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border: 3px solid var(--line); border-radius: 18px;
  box-shadow: 0 5px 0 var(--line), 0 10px 26px rgba(30, 42, 90, .3); animation: frdrop .28s cubic-bezier(.2, 1.4, .4, 1); }
.frinv .fitx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.frinv .fitx b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frinv .fitx small { font-size: 12.5px; color: var(--muted); }
.frinv .btn.sm { font-size: 13.5px; padding: 4px 10px; }
@keyframes frdrop { from { transform: translate(-50%, -24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .frbtn.hot, .frinv { animation: none; } }