/* Màu theo kiểu giao diện trong game: nền xanh đậm, viền vàng, màu giá tướng 1–5 */
:root{--bg:#0b1420;--card:#121e2c;--ink:#e9e4d4;--muted:#93a0ae;--line:#24364a;--acc:#c8aa6e;--acc-ink:#1a1408;
--data:#3fbf86;--data-bg:#0f2a22;--op:#e0a040;--op-bg:#2a2010;
--c1:#9aa4af;--c2:#22b573;--c3:#2f8fe8;--c4:#b34fe0;--c5:#f2b632}
*{box-sizing:border-box}
body{margin:0;background:var(--bg) radial-gradient(ellipse at top,#16283d,transparent 60%) no-repeat;color:var(--ink);font:15px/1.45 -apple-system,system-ui,Segoe UI,Roboto,sans-serif}
header{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#0e1a28;border-bottom:1px solid var(--acc)}
h1{font-size:18px;margin:0;color:var(--acc);letter-spacing:.03em}
h2{font-size:15px;margin:4px 0 8px;color:var(--acc)}
h3{font-size:14px;margin:12px 0 6px}
small,.muted{color:var(--muted);font-weight:normal}
.badge{font-size:12px;padding:2px 8px;border-radius:10px;border:1px solid var(--line);color:var(--muted)}
nav{display:flex;position:sticky;top:0;z-index:5;background:#0e1a28;border-bottom:1px solid var(--line)}
nav button{flex:1;border:0;border-radius:0;background:none;padding:11px 4px;font-size:14px;color:var(--muted);border-bottom:2px solid transparent}
nav button.on{color:var(--acc);border-color:var(--acc);font-weight:600}
main{max-width:860px;margin:0 auto;padding:12px 16px 60px}
.tab{display:none}.tab.on{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px}
label{display:block;font-size:13px;color:var(--muted)}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:#0b1420;border:1px solid var(--line);border-radius:8px;padding:8px;margin:4px 0 8px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--acc);background:var(--acc);color:var(--acc-ink);padding:8px 12px;font-weight:600}
button.ghost{background:none;color:var(--acc)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;min-height:4px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 2px 3px 4px;border-radius:16px;background:#0b1420;border:1px solid var(--line);font-size:13px}
.chip button{border:0;background:none;color:var(--muted);padding:0 6px;font-size:18px;line-height:1}
/* ảnh */
.ic{vertical-align:middle;object-fit:cover}
.ic.c{width:26px;height:26px;border-radius:5px;margin-right:4px}
.ic.i{width:24px;height:24px;border-radius:4px;margin-right:4px;border:1px solid #3a4a5c}
.ic.t{width:18px;height:18px;margin-right:3px;padding:2px;border-radius:50%;background:#2b2418;border:1px solid var(--acc)}
.ic.big{width:56px;height:56px;border-radius:8px;border:2px solid var(--c1);margin-right:10px;flex:none}
.ic.b2{border-color:var(--c2)}.ic.b3{border-color:var(--c3)}.ic.b4{border-color:var(--c4)}.ic.b5{border-color:var(--c5)}
.ct,.it{display:inline-flex;align-items:center;white-space:nowrap;margin:2px 2px 2px 0}
.ct .ic{border:2px solid var(--c1)}
.ct.c2 .ic{border-color:var(--c2)}.ct.c3 .ic{border-color:var(--c3)}.ct.c4 .ic{border-color:var(--c4)}.ct.c5 .ic{border-color:var(--c5)}
/* bảng chọn kiểu ô như trong game */
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:6px;max-height:340px;overflow-y:auto;padding-right:2px}
.picker.comps{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));max-height:none}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:#0b1420;color:var(--ink);border:2px solid var(--c1);border-radius:8px;padding:4px 2px 5px;font-weight:normal;font-size:11px;line-height:1.15;text-align:center;min-height:44px;justify-content:center}
.tile .ic{width:52px;height:52px;margin:0;border:0;border-radius:5px}
.tile span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile em{position:absolute;top:2px;right:2px;font-style:normal;font-weight:700;font-size:12px;background:var(--acc);color:var(--acc-ink);border-radius:9px;padding:0 6px}
.tile[data-cost="2"]{border-color:var(--c2)}.tile[data-cost="3"]{border-color:var(--c3)}.tile[data-cost="4"]{border-color:var(--c4)}.tile[data-cost="5"]{border-color:var(--c5)}
.comps .tile{border-color:#3a4a5c}.comps .tile .ic{width:42px;height:42px}
.cost-label{grid-column:1/-1;font-size:12px;color:var(--muted);margin-top:4px}
/* khung kết quả */
.box{border-radius:10px;padding:12px;margin-bottom:12px;border:1px solid var(--line)}
.box.data{background:var(--data-bg);border-color:#1f5a44}.box.op{background:var(--op-bg);border-color:#5a4220}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:6px;margin-bottom:6px;color:#0b1420}
.data .tag{background:var(--data)}.op .tag{background:var(--op)}
.trait{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line)}
.trait:last-child{border:0}
.bps{white-space:nowrap}
.bps span{display:inline-block;min-width:22px;text-align:center;margin-left:2px;padding:1px 4px;border-radius:5px;font-size:12px;background:#0b1420;color:var(--muted)}
.bps span.hit{background:var(--acc);color:var(--acc-ink);font-weight:700}
.active{font-weight:600}
ul{margin:4px 0;padding-left:20px}li{margin:4px 0}
ul.plain{list-style:none;padding-left:0}
.c1{color:var(--c1)}.c2{color:var(--c2)}.c3{color:var(--c3)}.c4{color:var(--c4)}.c5{color:var(--c5)}
.ct.c1,.ct.c2,.ct.c3,.ct.c4,.ct.c5{color:var(--ink)}
.seg{display:flex;gap:6px;margin-bottom:10px}
.seg button{flex:1;background:none;color:var(--acc)}.seg button.on{background:var(--acc);color:var(--acc-ink)}
.item{padding:8px 0;border-bottom:1px solid var(--line)}
.item.row{display:flex;align-items:center}
.link{color:var(--acc);cursor:pointer;display:inline-flex;align-items:center;margin-right:6px}
.note{white-space:pre-wrap}
a{color:var(--acc)}