:root {
  --bg: #0e0c14; --panel: #16131f; --panel2: #1e1a2b; --line: #2a2539; --text: #ece9f5; --muted: #8e88a3;
  --accent: #ff9a3c; --good: #3ddc97; --bad: #ff6b6b; --warn: #ffc857;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: "Segoe UI", system-ui, sans-serif; color: var(--text); font-size: 14px; }
body.client { background: radial-gradient(1200px 500px at 50% -120px, #2a2140 0%, var(--bg) 70%) fixed, var(--bg); }
body.overlay { background: transparent; font-size: 12px; }
#app { padding: 16px; max-width: 1100px; margin: 0 auto; }
body.overlay #app { padding: 6px; }
body.overlay .client-only { display: none; }

header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.title { font-size: 20px; font-weight: 700; letter-spacing: .3px; }
body.overlay .title { font-size: 13px; }
#chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chip { padding: 3px 9px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.chip.ok { color: var(--good); border-color: #1f5a44; }
.chip.bad { color: var(--bad); border-color: #6a2f2f; }
.chip.warn { color: var(--warn); border-color: #6a5522; }

#notice { color: var(--warn); font-size: 12px; margin-bottom: 8px; }
#notice:empty { display: none; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; margin-bottom: 12px; }
body.overlay .panel { background: rgba(10, 14, 22, .86); padding: 6px 8px; margin-bottom: 6px; border-radius: 8px; }
.panel h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }

.row { display: grid; grid-template-columns: 38px 1.2fr 1fr 1fr .8fr 1.1fr .9fr .9fr; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--line); }
.row.head { border-top: 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.row.me { background: linear-gradient(90deg, rgba(90,169,255,.14), transparent); }
.row img { width: 32px; height: 32px; border-radius: 6px; background: var(--panel2); }
.row .who b { display: block; }
.row .who span, .muted { color: var(--muted); }
.row .who span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.small { font-size: 12px; }
body.overlay .row { grid-template-columns: 28px 1.2fr 1fr 1.1fr .8fr; padding: 3px 0; gap: 6px; }
body.overlay .row img { width: 24px; height: 24px; }
body.overlay .row .c-overall, body.overlay .row .c-mast, body.overlay .row .c-mmr { display: none; }
body.overlay .row .who span { display: none; }

.good { color: var(--good); } .bad { color: var(--bad); } .mid { color: var(--warn); }
.tier-iron { color: #9b8f85; } .tier-bronze { color: #c08457; } .tier-silver { color: #b8c4d0; } .tier-gold { color: #ffcf5a; }
.tier-platinum { color: #4fd1c5; } .tier-emerald { color: #3ddc97; } .tier-diamond { color: #7aa7ff; }
.tier-master, .tier-grandmaster, .tier-challenger { color: #e077ff; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.overlay .cols { grid-template-columns: 1fr; gap: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0; }
.tag { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; font-size: 12px; }
.reasons { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; }
body.overlay .reasons { display: none; }

.runes { display: grid; gap: 2px; }
.runes b { color: var(--accent); }
.block { margin-top: 6px; }
.block .label { font-size: 11px; color: var(--muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .5px; }
.items { display: flex; gap: 5px; flex-wrap: wrap; }
.item { display: flex; align-items: center; gap: 5px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px 2px 2px; font-size: 12px; }
.item img { width: 26px; height: 26px; border-radius: 4px; }
body.overlay .item { font-size: 11px; padding: 1px 5px 1px 1px; }
body.overlay .item img { width: 20px; height: 20px; }

.status-ok { color: var(--good); } .status-err { color: var(--bad); }

.form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
input { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 7px 9px; border-radius: 7px; font-size: 13px; }
.buttons { display: flex; gap: 8px; flex-wrap: wrap; }
button { background: var(--accent); color: #07101f; border: 0; border-radius: 7px; padding: 8px 12px; font-weight: 600; cursor: pointer; }
button:nth-child(n+2) { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }

.rec { display:flex; align-items:center; gap:10px; padding:5px 0; border-top:1px solid rgba(255,255,255,.06); }
.rec:first-of-type { border-top:0; }
.rec img { width:32px; height:32px; border-radius:6px; }
.rec .who { flex:1; display:flex; flex-direction:column; min-width:0; }
.rec .who span { font-size:12px; opacity:.65; }
.rec-wr { font-weight:700; }

.skillgrid { display:grid; grid-template-columns: 22px repeat(15, 1fr); gap:3px; align-items:center; }
.skillgrid .lv { font-size:10px; text-align:center; opacity:.5; }
.skillgrid .k { font-weight:800; color:#e8a64a; }
.skillgrid .c { height:22px; border-radius:5px; background:rgba(255,255,255,.06); display:grid; place-items:center; font-size:11px; color:transparent; }
.skillgrid .c.f { background:linear-gradient(135deg,#f0b15a,#d9772b); color:#1a0d05; font-weight:800; }

body.bar { background: transparent; font-size: 11px; overflow: hidden; }
body.bar #app { padding: 0; max-width: none; }
.bar { background: rgba(8, 12, 20, .88); border: 1px solid #2c3a57; border-radius: 8px; padding: 6px 8px; }
.bar-msg { padding: 6px; color: var(--muted); text-align: center; font-size: 11px; }
.bar-main { display: flex; gap: 8px; align-items: center; }
.bar-item img { width: 34px; height: 34px; border-radius: 6px; border: 1px solid #3a4a6d; display: block; }
.bar-body { flex: 1; min-width: 0; }
.bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.bar-top b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-top small { color: var(--muted); font-size: 10px; }
.bar-track { height: 6px; background: #1b2438; border-radius: 4px; overflow: hidden; display: flex; margin: 3px 0; }
.bar-track i { display: block; height: 100%; }
.bar-track .comp { background: var(--accent); } .bar-track .gold { background: var(--warn); }
.bar-nums { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
.bar-nums b { color: var(--text); } .bar-nums b.ok { color: var(--good); }
.ings { display: flex; gap: 4px; margin-top: 3px; align-items: center; overflow: hidden; white-space: nowrap; }
.ing { display: flex; align-items: center; gap: 2px; background: #141c2e; border: 1px solid #243049; border-radius: 5px; padding: 1px 4px 1px 1px; font-size: 10px; }
.ing img { width: 16px; height: 16px; border-radius: 3px; }
.ing em { font-style: normal; color: var(--warn); }
.ing.have { opacity: .55; } .ing.have em { color: var(--good); }
.ing.comb span { padding-left: 3px; color: var(--muted); }
.buy { margin-left: auto; font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; } .buy b { color: var(--text); }

.ready { display:flex; align-items:center; gap:12px; background:#17301f; border:1px solid #2f7a4a; border-radius:10px; padding:10px 14px; margin-bottom:10px; font-size:15px; }
.ready.ok { background:#14283a; border-color:#2f5f8f; } .ready.bad { background:#35171a; border-color:#8a3a3a; }
.ready button.accept { margin-left:auto; background:#2fb866; color:#06180d; font-weight:700; border:0; border-radius:8px; padding:8px 18px; cursor:pointer; }
.ready button.decline { background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:8px; padding:8px 12px; cursor:pointer; }
body.overlay .ready { font-size:12px; padding:6px 8px; }
label.check { display:flex; align-items:center; gap:8px; }

/* ---- Blitz-style build page ---- */
.hero { display:grid; grid-template-columns: repeat(6, 1fr); background: var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px 8px; margin-bottom:12px; }
.hcell { text-align:center; border-left:1px solid var(--line); padding:0 6px; } .hcell:first-child { border-left:0; }
.hcell small { display:block; color:var(--muted); font-size:12px; margin-bottom:4px; }
.hcell b { font-size:24px; font-weight:700; }
.tbadge { display:inline-block; font-weight:800; color:#06231f; background:linear-gradient(135deg,#7ff3e4,#2bb8a6); border-radius:8px; padding:3px 12px; font-size:18px; }
.pill { display:inline-block; border-radius:6px; padding:1px 7px; font-size:12px; font-weight:700; background:rgba(255,154,60,.12); }
.bgrid { display:grid; grid-template-columns: 300px 1.2fr 1fr; grid-template-areas: "l m r" "l s r"; gap:14px 18px; border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:12px; background-size:cover; background-position:center top; background-color:var(--panel); }
.bgrid.nov { grid-template-columns: 1.2fr 1fr; grid-template-areas: "m r" "s r"; }
.bleft { grid-area:l; } .bmid { grid-area:m; } .bright { grid-area:r; } .bskill { grid-area:s; }
.bgrid h3 { margin:0 0 8px; font-size:13px; text-transform:none; letter-spacing:0; color:var(--text); }
.phead { display:flex; align-items:center; gap:14px; margin:0 0 12px; }
.phead img { width:64px; height:64px; border-radius:12px; border:2px solid #c8a24a; }
.phead .crumb { font-size:12px; color:var(--muted); }
.phead h2 { margin:2px 0; font-size:22px; font-weight:800; } .phead h2 span { color:#b9b3cc; font-weight:700; }
.phead .psub { font-size:13px; color:var(--muted); }
.syn .srow2 { display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--line); }
.syn .srow2:first-of-type { border-top:0; }
.srole { font-weight:700; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.sally { display:flex; align-items:center; gap:10px; } .sally img { width:34px; height:34px; border-radius:50%; border:1px solid #3a3450; }
.sally > div { flex:1; min-width:0; } .sally b { display:block; font-size:13.5px; } .sally small { color:var(--muted); font-size:11.5px; }
.sbests { display:flex; gap:8px; } .sbest { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; }
.sbest img { width:26px; height:26px; border-radius:50%; border:1px solid #3a3450; }
.rolebar { display:flex; align-items:center; gap:6px; margin:0 0 12px; }
.role { width:40px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:rgba(30,26,43,.85); color:var(--muted); border-radius:8px; cursor:pointer; }
.role:hover { color:var(--text); border-color:#4b4466; }
.role.on { color:var(--accent); border-color:var(--accent); background:rgba(40,52,58,.7); }
.role.dim { opacity:.45; }
.rolenote { margin-left:8px; }
.vtabs { display:flex; gap:4px; background:rgba(20,18,30,.8); border-radius:10px; padding:4px; margin-bottom:10px; }
.vtab { flex:1; border:0; background:transparent; color:var(--muted); font:inherit; font-weight:700; font-size:13px; padding:6px 4px; border-radius:7px; cursor:pointer; }
.vtab.on { background:#f1eefb; color:#17141f; }
.vlist { display:flex; flex-direction:column; gap:6px; }
.variant { display:flex; align-items:center; gap:8px; }
.vmain { flex:1; min-width:0; } .vname { font-weight:700; font-size:13.5px; overflow-wrap:anywhere; } .variant.active .vname { color:var(--accent); }
.vgames { font-size:10.5px; letter-spacing:.04em; color:var(--muted); margin-top:2px; }
.vi img.vkey { border:0; background:rgba(0,0,0,.35); padding:2px; box-sizing:border-box; }
.vwr { min-width:38px; text-align:center; }
.variant { text-align:left; background:rgba(30,26,43,.85); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:9px 11px; cursor:pointer; font:inherit; }
.variant:hover { border-color:#4b4466; }
.variant.active { border-color:var(--accent); box-shadow: inset 3px 0 0 var(--accent); background:rgba(40,52,58,.7); }
.vt { display:flex; justify-content:space-between; align-items:center; } .vd { font-size:11px; color:var(--muted); margin:3px 0 6px; line-height:1.3; }
.vi { display:flex; gap:3px; flex-shrink:0; } .vi img { width:24px; height:24px; flex-shrink:0; border-radius:50%; border:1px solid #3a3450; }
.rhead { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.rgrid { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.styles { display:flex; gap:8px; justify-content:center; margin-bottom:8px; } .styles img { width:20px; height:20px; opacity:.3; filter:grayscale(1); } .styles img.on { opacity:1; filter:none; }
.rrow { display:flex; justify-content:center; gap:10px; margin-bottom:9px; }
.rune { width:34px; height:34px; border-radius:50%; background:#0d0b13; opacity:.35; filter:grayscale(1); border:2px solid transparent; }
.rune.on { opacity:1; filter:none; border-color:#c9a45c; box-shadow:0 0 8px rgba(201,164,92,.5); }
.rrow.key .rune { width:48px; height:48px; }
.shards { margin-top:4px; } .srow { display:flex; justify-content:center; gap:10px; margin-bottom:7px; }
.shard { width:24px; height:24px; border-radius:50%; background:#0d0b13; opacity:.35; filter:grayscale(1); border:2px solid transparent; } .shard.on { opacity:1; filter:none; border-color:#c9a45c; }
.spell { display:flex; align-items:center; gap:6px; background:rgba(30,26,43,.8); border:1px solid var(--line); border-radius:10px; padding:6px 8px; }
.spell img { width:32px; height:32px; border-radius:6px; }
.isec { margin-bottom:8px; } .isec h4 { margin:0 0 4px; font-size:12px; font-weight:600; color:var(--muted); }
.igrid { display:flex; flex-wrap:wrap; gap:5px; } .ic { position:relative; } .ic img { width:34px; height:34px; border-radius:6px; border:1px solid #3a3450; display:block; }
.ic i { position:absolute; right:0; bottom:0; font-size:10px; font-style:normal; background:rgba(0,0,0,.75); padding:0 4px; border-radius:4px 0 4px 0; }
.skhead { display:flex; align-items:center; gap:8px; margin-bottom:8px; } .gt { color:var(--muted); }
.sgrid { display:grid; grid-template-columns: 24px repeat(18, 1fr); gap:3px; align-items:center; }
.sgrid .lv { font-size:10px; text-align:center; color:var(--muted); }
.kb { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:6px; font-weight:800; font-size:12px; background:#241f33; }
.sc { height:22px; border-radius:4px; background:rgba(255,255,255,.05); display:grid; place-items:center; font-size:11px; font-weight:800; color:#10101a; }
.sq { color:#ff8a5c; } .sw { color:#5fe0d0; } .se { color:#a99cff; } .sr { color:#ffd166; }
.sc.f.sq { background:#ff8a5c; color:#10101a; } .sc.f.sw { background:#5fe0d0; color:#10101a; } .sc.f.se { background:#a99cff; color:#10101a; } .sc.f.sr { background:#ffd166; color:#10101a; }
.dmg { display:flex; gap:6px; } .dmg div { padding:7px 12px; border-radius:8px; font-weight:700; font-size:13px; }
.dmg .ad { background:rgba(255,107,107,.16); border:1px solid rgba(255,107,107,.5); color:#ff8f8f; }
.dmg .ap { background:rgba(122,130,255,.16); border:1px solid rgba(122,130,255,.5); color:#9aa2ff; }
@media (max-width: 900px) { .bgrid { grid-template-columns: 1fr; grid-template-areas: "l" "m" "r" "s"; } .hero { grid-template-columns: repeat(3, 1fr); row-gap:10px; } }

body.bar.moving .bar { -webkit-app-region: drag; cursor: move; outline: 2px dashed var(--accent); outline-offset: -3px; }
body.bar.moving .bar * { -webkit-app-region: drag; }

.clickable { cursor:pointer; transition: transform .08s, filter .08s; }
.clickable:hover { transform: scale(1.08); filter: brightness(1.25); }
.rune.clickable:not(.on):hover, .shard.clickable:not(.on):hover { opacity:.8; filter:none; }
.ic.add { width:34px; height:34px; border-radius:6px; border:1px dashed #5a5272; display:grid; place-items:center; color:var(--muted); font-size:20px; }
.pill.custom { background:rgba(255,200,87,.15); color:var(--warn); }
button.mini { background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:1px 8px; font-size:11px; cursor:pointer; }
button.mini:hover { color:var(--text); border-color:#4b4466; }
.mback { position:fixed; inset:0; background:rgba(5,4,10,.7); display:grid; place-items:center; z-index:50; }
.mbox { width:min(520px, 92vw); max-height:84vh; display:flex; flex-direction:column; background:var(--panel); border:1px solid #3a3450; border-radius:16px; padding:16px; }
.mbox h3 { margin:0 0 10px; font-size:15px; text-transform:none; letter-spacing:0; color:var(--text); }
.mbox input { margin-bottom:10px; }
.picklist { overflow:auto; display:grid; grid-template-columns: 1fr 1fr; gap:6px; }
.pick { display:flex; align-items:center; gap:8px; background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:5px 8px; cursor:pointer; font-size:13px; }
.pick:hover { border-color:var(--accent); }
.pick img { width:30px; height:30px; border-radius:6px; }
.spellgrid { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; }
.spk { flex-direction:column; text-align:center; padding:10px 6px; } .spk img { width:44px; height:44px; }
.mfoot { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }

html:has(body.overlay), body.overlay { overflow: hidden; }
body.overlay ::-webkit-scrollbar { display: none; }
body.overlay .skillalt, body.overlay .runes .muted { display: none; }

body.overlay #app { width: 460px; max-width: none; margin-top: 12px; }

body.skill { background: transparent; overflow: hidden; }
body.skill #app { padding: 0; max-width: none; height: 100vh; }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); height: 100%; }
.slot { position: relative; display: flex; align-items: flex-end; justify-content: center; }
/* flashes over the game's own level-up chevron for the skill to pick */
.slot .flash { width: 71%; height: 100%; box-sizing: border-box; border: 3px solid #ffe27a; border-radius: 4px; background: rgba(255,226,122,.35); animation: skflash .7s ease-in-out infinite; }
.slot .flash { display: flex; align-items: center; justify-content: center; }
.slot .flash b { font: 800 clamp(12px, 70%, 26px)/1 system-ui, sans-serif; color: #fff; text-shadow: 0 0 4px #000, 0 0 4px #000, 0 1px 2px #000; }
@keyframes skflash { 0%,100% { opacity: 1; box-shadow: 0 0 14px 4px rgba(255,226,122,.95); } 50% { opacity: .15; box-shadow: 0 0 2px 0 rgba(255,226,122,.2); } }
.slot.guide { outline: 1px dashed var(--accent); background: rgba(255,154,60,.12); align-items: center; }
.slot.guide span { font-weight: 800; color: var(--accent); }
.strip-hint { position: absolute; left: 0; right: 0; top: -22px; text-align: center; font-size: 11px; color: var(--text); background: rgba(8,12,20,.85); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
body.skill.moving #app { -webkit-app-region: drag; cursor: move; }
body.skill.moving #app * { -webkit-app-region: drag; }
body.skill.moving .sk-card { -webkit-app-region: drag; cursor: move; outline: 2px dashed var(--accent); }
body.skill.moving .sk-card * { -webkit-app-region: drag; }

/* ===== Forge touch-up: same layout, new skin ===== */
:root {
  color-scheme: dark;
  --ember: #ff9d4d; --ember2: #ff6a3d; --ink: #0b0910;
  --edge: linear-gradient(135deg, rgba(255,154,60,.45), rgba(139,108,255,.22) 55%, rgba(110,231,216,.22));
}
::selection { background: rgba(255,154,60,.3); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* scroll bars: slim, dark, tinted — never the default white bar */
* { scrollbar-width: thin; scrollbar-color: #3a3356 transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; background: transparent; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.015); border-left: 1px solid rgba(255,255,255,.03); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #4a4172, #2f2a4a); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent), #d9631a); background-clip: padding-box; border: 3px solid transparent; }
::-webkit-scrollbar-thumb:active { background: linear-gradient(180deg, var(--ember), var(--ember2)); background-clip: padding-box; border: 3px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }

body.client {
  background:
    radial-gradient(900px 420px at 12% -160px, rgba(255,154,60,.10), transparent 70%),
    radial-gradient(900px 480px at 92% -180px, rgba(255,157,77,.12), transparent 70%),
    linear-gradient(180deg, #120f1c 0%, var(--ink) 100%) fixed;
}
body.client .title { background: linear-gradient(90deg, var(--accent), var(--ember)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .6px; font-weight: 800; }

body.client .panel, body.client .bgrid, body.client .hero {
  background: linear-gradient(180deg, rgba(28,24,42,.92), rgba(18,15,28,.94));
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
body.client .panel::before, body.client .bgrid::before, body.client .hero::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
body.client .bgrid { background-blend-mode: normal; }
body.client .panel h3, body.client .bgrid h3 { display: flex; align-items: center; gap: 8px; }
body.client .panel h3::before, body.client .bgrid h3::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: linear-gradient(180deg, var(--ember), var(--ember2)); flex: none; }

.chip { background: rgba(30,26,43,.8); backdrop-filter: blur(4px); display: inline-flex; align-items: center; gap: 6px; }
.chip.ok::before, .chip.bad::before, .chip.warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

.hcell b { letter-spacing: .2px; }
.hero .hcell { position: relative; }
.tbadge { background: linear-gradient(135deg, var(--ember), var(--ember2)); color: #2a0f00; box-shadow: 0 4px 14px rgba(255,120,60,.35); }

body.client .row { transition: background .15s; }
body.client .row:not(.head):hover { background: rgba(255,255,255,.03); }
body.client .row.me { background: linear-gradient(90deg, rgba(255,154,60,.16), rgba(255,157,77,.06) 60%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.row img { box-shadow: 0 0 0 1px rgba(255,255,255,.08); }

.role.on, .variant.active, .vtab.on { box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(255,154,60,.18); }
.vtab.on { background: linear-gradient(180deg, #fff, #e6e1f6); }
.role { transition: all .15s; } .role:hover { transform: translateY(-1px); }

button { transition: border-color .15s, background .15s, transform .1s, box-shadow .15s; }
button:active { transform: translateY(1px); }
.tag { background: rgba(255,255,255,.04); }
.pill { border: 1px solid rgba(255,255,255,.06); }
.item img, .rune, .vi img { transition: transform .12s, filter .12s; }
.clickable:hover { filter: brightness(1.25); transform: scale(1.06); }

/* lane tabs */
.rolebar { gap:2px; border-bottom:1px solid var(--line); padding:0 2px; margin-bottom:14px; align-items:flex-end; }
.role { width:auto; min-width:92px; height:auto; flex-direction:row; gap:8px; padding:9px 14px 10px; border:0; border-bottom:3px solid transparent; border-radius:10px 10px 0 0; background:transparent; color:var(--muted); font:inherit; font-weight:700; font-size:13px; }
.role:hover { color:var(--text); background:rgba(255,255,255,.04); transform:none; }
.role .rl { letter-spacing:.2px; }
.role small { font-size:11px; font-weight:700; opacity:.9; }
.role.on { color:var(--accent); background:linear-gradient(180deg, rgba(255,154,60,.10), rgba(255,154,60,0)); border:0; border-bottom:3px solid var(--accent); box-shadow:none; }
.role.on svg { filter:drop-shadow(0 0 6px rgba(255,154,60,.55)); }
.role.dim { opacity:.5; }
.rolenote { margin-left:auto; padding-bottom:10px; }

/* ---- navigation + Home / Champions / Players pages ---- */
#nav { display: none; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
body.client #nav { display: flex; }
.navtab { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); padding: 9px 16px; font-size: 13px; font-weight: 600; letter-spacing: .3px; cursor: pointer; position: relative; }
.navtab:hover { color: var(--text); }
.navtab.on { color: var(--accent); border-bottom-color: var(--accent); }
.livedot { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
body.client #page { display: block; }
body.overlay #page, body.bar #page { display: none; }
#page:empty { display: none; }
#app[data-view="home"] #teams, #app[data-view="home"] #recs, #app[data-view="home"] #build,
#app[data-view="champs"] #teams, #app[data-view="champs"] #recs, #app[data-view="champs"] #build,
#app[data-view="summoner"] #teams, #app[data-view="summoner"] #recs, #app[data-view="summoner"] #build,
#app[data-view="settings"] #teams, #app[data-view="settings"] #recs, #app[data-view="settings"] #build,
#app[data-view="live"] #page, #app[data-view="settings"] #page { display: none; }
body.client #app:not([data-view="settings"]) #settings { display: none; }

.hgrid { display: grid; grid-template-columns: minmax(280px, 1fr) 1.5fr; gap: 12px; align-items: start; }
@media (max-width: 860px) { .hgrid { grid-template-columns: 1fr; } }
.pcard h4 { margin: 12px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.ranks { display: grid; gap: 8px; }
.rk { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rk small { width: 84px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.rk b { font-size: 16px; }
.mps { display: flex; gap: 8px; flex-wrap: wrap; }
.mp, .rc { cursor: pointer; text-align: center; display: grid; gap: 1px; justify-items: center; }
.mp img, .rc img { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); transition: transform .12s, border-color .12s; }
.mp:hover img, .rc:hover img, .mch:hover img { transform: translateY(-2px); border-color: var(--accent); }
.mp span { font-size: 12px; font-weight: 700; } .mp small, .rc small { color: var(--muted); font-size: 10px; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot { display: flex; flex-wrap: wrap; gap: 8px; }
.qbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.qbtns button, #sgo { background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 7px 12px; cursor: pointer; font-size: 12px; }
.qbtns button:hover, #sgo:hover { border-color: var(--accent); color: var(--accent); }

.metag { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 1000px) { .metag { grid-template-columns: repeat(2, 1fr); } }
.mhead { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 6px; }
.mrow { display: grid; grid-template-columns: 26px 1fr auto; gap: 6px; align-items: center; padding: 3px 4px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.mrow:hover, .crow:not(.head):hover { background: var(--panel2); }
.mrow img { width: 24px; height: 24px; border-radius: 6px; }

.match { display: grid; grid-template-columns: 112px 52px 100px 70px 1fr; gap: 10px; align-items: center; padding: 7px 10px; margin: 5px 0; border-radius: 10px; border-left: 4px solid var(--line); background: var(--panel2); }
.match.w { border-left-color: var(--good); background: linear-gradient(90deg, rgba(61,220,151,.10), var(--panel2) 60%); }
.match.l { border-left-color: var(--bad); background: linear-gradient(90deg, rgba(255,107,107,.10), var(--panel2) 60%); }
.match small { display: block; color: var(--muted); font-size: 10.5px; }
.match.w .mres b { color: var(--good); } .match.l .mres b { color: var(--bad); }
.mch { position: relative; cursor: pointer; } .mch img { width: 44px; height: 44px; border-radius: 10px; transition: transform .12s, border-color .12s; border: 1px solid var(--line); }
.mch small { position: absolute; right: 0; bottom: 0; background: #000b; border-radius: 6px 0 8px 0; padding: 0 4px; color: var(--text); }
.mitems { display: flex; gap: 3px; flex-wrap: nowrap; } .mitems img { width: 24px; height: 24px; border-radius: 5px; }
.msum { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
@media (max-width: 760px) { .match { grid-template-columns: 90px 48px 90px 1fr; } .mcs { display: none; } }

.ctools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.ctools input, .ctools select { background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 8px 12px; font-size: 13px; min-width: 200px; outline: none; }
.ctools input:focus, .ctools select:focus { border-color: var(--accent); }
.rolechips { display: flex; gap: 4px; flex-wrap: wrap; }
.rchip { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); padding: 5px 11px; font-size: 12px; cursor: pointer; }
.rchip.on { color: var(--accent); border-color: var(--accent); background: rgba(255,154,60,.08); }
#clist { max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.crow { display: grid; grid-template-columns: 34px 1.4fr .8fr .5fr .8fr .7fr .7fr; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 8px; font-size: 13px; }
.crow:not(.head) { cursor: pointer; } .crow img { width: 28px; height: 28px; border-radius: 7px; }
.crow.head { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; position: sticky; top: 0; background: var(--panel); z-index: 1; }
.backbtn { margin-bottom: 10px; font-size: 12px; padding: 6px 12px; cursor: pointer; }
.browse .clickable { pointer-events: none; }
.browse .mini { display: none; }
.browse .rolebar .role { cursor: pointer; }
.pname { cursor: pointer; text-decoration: underline dotted transparent; text-underline-offset: 3px; }
.pname:hover { color: var(--accent); text-decoration-color: var(--accent); }
.crow .tbadge { font-size:12px; padding:2px 8px; box-shadow:none; text-align:center; width:max-content; }

/* ---- expanded game ---- */
.match[data-mid] { cursor: pointer; margin-bottom: 0; grid-template-columns: 112px 52px 100px 70px 1fr 18px; transition: filter .12s; }
.match[data-mid]:hover { filter: brightness(1.15); }
.mwrap-gap { height: 5px; }
.match.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.chev { color: var(--muted); font-style: normal; font-size: 12px; }
.match + .match, .gdet + .match { margin-top: 5px; }
.gdet { background: var(--panel2); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; padding: 6px 8px 8px; margin: 0 0 5px; display: grid; gap: 8px; overflow-x: auto; }
.gteam { border-left: 3px solid var(--line); padding-left: 8px; min-width: 920px; }
.gteam.w { border-left-color: var(--good); } .gteam.l { border-left-color: var(--bad); }
.gthead { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 2px 0 4px; }
.gteam.w .gthead b { color: var(--good); } .gteam.l .gthead b { color: var(--bad); }
.grow { display: grid; grid-template-columns: 46px 40px 44px 1.2fr 92px 96px 76px 1fr 56px 1.4fr; gap: 8px; align-items: center; padding: 3px 4px; border-radius: 8px; font-size: 12px; }
.grow.me { background: rgba(255,154,60,.09); outline: 1px solid rgba(255,154,60,.3); }
.grow small { display: block; color: var(--muted); font-size: 10.5px; }
.gch { position: relative; cursor: pointer; } .gch img { width: 34px; height: 34px; border-radius: 8px; display: block; }
.gch small { position: absolute; right: -2px; bottom: -2px; background: #000b; color: var(--text); border-radius: 5px; padding: 0 3px; }
.gsp { display: flex; gap: 2px; flex-wrap: wrap; width: 44px; } .gsp img { width: 19px; height: 19px; border-radius: 4px; } .gsp img.gk { border-radius: 50%; background: #000a; }
.gname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdmg .gbar { height: 6px; border-radius: 3px; background: #0006; overflow: hidden; margin-bottom: 2px; } .gdmg .gbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember, #ff8a3c), var(--ember2, #ffb35c)); }
.grow .mitems img { width: 22px; height: 22px; }

/* ---- CF brand: colours taken from the logo (violet-black, steel, molten orange, teal/violet ring) ---- */
:root { --bg: #08060f; --panel: #150f24; --panel2: #1d1530; --line: #2e2347; --text: #efeaf9; --muted: #9a90b5; --accent: #ff9a3c; --ember: #ff9a3c; --ember2: #ff5a1f; --violet: #8b6cff; --teal: #6ee7d8; }
body.client { background: radial-gradient(900px 480px at 85% -140px, rgba(255,106,31,.16), transparent 70%), radial-gradient(1100px 520px at 8% -180px, rgba(139,108,255,.20), transparent 70%), #08060f fixed; }
body.client .panel, body.client .bgrid, body.client .hero { background: linear-gradient(180deg, rgba(27,20,48,.92), rgba(15,10,26,.95)); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 46px; height: 46px; filter: drop-shadow(0 4px 14px rgba(255,106,31,.45)); }
body.overlay .brand img, body.bar .brand img { display: none; }
body.client .brand .title, .brand .title { display: flex; flex-direction: column; line-height: 1; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: inherit !important; }
.brand .wm { font-size: 24px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase; display: flex; }
.brand .wm span { background: linear-gradient(180deg, #ffffff, #aeb7d0 55%, #7a85a3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand .wm b { background: linear-gradient(180deg, #ffe3a0, #ff9a3c 55%, #ff5a1f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(255,106,31,.45)); }
.brand .tag2 { font-size: 10px; letter-spacing: 3.2px; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
body.overlay .brand .tag2, body.bar .brand .tag2 { display: none; }
body.overlay .brand .wm { font-size: 13px; letter-spacing: 1.5px; }
button { color: #1a0a00; }
.navtab.on { color: var(--ember); border-bottom-color: var(--ember); text-shadow: 0 0 14px rgba(255,106,31,.5); }
.tbadge, .vtab.on { color: #2a0f00; }
.chip.ok { color: var(--teal); border-color: rgba(110,231,216,.35); }

/* ---- estimated MMR ---- */
.mmrc { display: grid; gap: 1px; font-size: 12px; cursor: help; }
.ml { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.ml i { font-style: normal; font-size: 10px; font-weight: 800; color: var(--muted); width: 10px; }
.ml b { font-weight: 700; } .ml small { color: var(--muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
.ml.low b { opacity: .6; font-style: italic; }
.mboxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mbox { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 1px; }
.mbox small { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; }
.mbox b { font-size: 18px; background: linear-gradient(180deg, #ffe3a0, #ff9a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mbox span { font-size: 11px; overflow-wrap: anywhere; } .mbox em { font-style: normal; color: var(--muted); font-size: 10.5px; }
.mbox.low b { opacity: .65; } .mbox.none b { color: var(--muted); background: none; }
.mmrp a { color: var(--accent); }
.grank { font-size: 12px; font-weight: 700; white-space: nowrap; } .grank small { display: block; color: var(--muted); font-weight: 400; font-size: 10.5px; }
.gplc { display: grid; justify-items: center; gap: 2px; }
.gplc b { font-size: 12px; min-width: 34px; text-align: center; padding: 2px 6px; border-radius: 999px; background: #ffffff10; color: var(--muted); }
.gplc.p1 b { background: linear-gradient(135deg, #ffe3a0, #ff9a3c); color: #2a0f00; } .gplc.p2 b { background: linear-gradient(135deg, #f1f4fb, #aab3c6); color: #1b2030; } .gplc.p3 b { background: linear-gradient(135deg, #f0b27a, #b86a2e); color: #2a1200; }
.gplc i { font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: .8px; border-radius: 4px; padding: 0 4px; }
.gplc i.MVP { background: #ff9a3c; color: #2a0f00; } .gplc i.ACE { background: #8b6cff; color: #fff; }
.mplc { font-weight: 800; color: var(--muted); } .mplc.p1 { color: #ffb35c; } .mplc.p2 { color: #d4dbea; } .mplc.p3 { color: #d9915a; }
.welcome { border-color: rgba(255,154,60,.45); background: linear-gradient(90deg, rgba(255,106,31,.12), rgba(139,108,255,.08)) !important; }
.recent { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 4px 0 8px; }
#settings .check { line-height: 1.3; }
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .cgrid { grid-template-columns: 1fr; } }
.cm { grid-template-columns: 30px 1fr auto; padding: 4px 6px; } .cm img { width: 28px; height: 28px; border-radius: 7px; }
.cm small { display: block; color: var(--muted); font-size: 10.5px; }
.mhead.good { color: var(--good); } .mhead.bad { color: var(--bad); }
.pbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.pcardb { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.pb-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.pb-name b { font-size: 14px; } .pb-name small, .pb-rank small { display: block; color: var(--muted); font-size: 10.5px; }
.pb-rank { text-align: right; font-weight: 700; font-size: 13px; }
.pb-stats { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.pb-form { display: inline-flex; gap: 2px; } .pb-form i { width: 7px; height: 14px; border-radius: 2px; background: var(--line); } .pb-form i.w { background: var(--good); } .pb-form i.l { background: var(--bad); opacity: .8; }
.pb-build { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pb-build .vkey { width: 30px; height: 30px; border-radius: 50%; background: #000a; }
.pb-sp { display: grid; gap: 2px; } .pb-sp img { width: 17px; height: 17px; border-radius: 4px; display: block; }
.pb-build .mitems { flex-wrap: wrap; } .pb-build .mitems img { width: 28px; height: 28px; }
.onl { display: flex; align-items: center; gap: 10px; } .onl b { font-size: 26px; background: linear-gradient(180deg, #ffe3a0, #ff9a3c); -webkit-background-clip: text; background-clip: text; color: transparent; } .onl span { color: var(--muted); font-size: 12.5px; }
.online code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; }
.updatep { border-color: rgba(61,220,151,.5) !important; background: linear-gradient(90deg, rgba(61,220,151,.10), rgba(139,108,255,.06)) !important; }
.updatep .notes { margin: 4px 0 10px; color: var(--text); max-height: 140px; overflow: auto; }
.progress { height: 8px; border-radius: 4px; background: #0007; overflow: hidden; margin: 6px 0; } .progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember2), var(--ember)); transition: width .3s; }
.clentry { margin-bottom: 10px; } .clhead { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .clhead b { color: var(--ember); } .clhead span { font-weight: 700; } .clhead small { color: var(--muted); margin-left: auto; }
.changelog ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; } .changelog li { margin: 2px 0; color: #d8d2ea; }
/* ---- website mode (body.web): no League client, no live game ---- */
.web #chips, .web #ready, .web #notice, .web #teams, .web #recs, .web #build { display: none !important; }
.web .browse #build { display: block !important; }
.webcta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: linear-gradient(100deg, rgba(255,106,31,.12), rgba(139,108,255,.08)); }
.webcta > div { flex: 1 1 380px; min-width: 0; }
.dlbtn { display: inline-block; padding: 12px 22px; border-radius: 10px; background: linear-gradient(180deg, var(--accent, #ff9a3c), #ff6a1f); color: #1b0d03; font-weight: 700; text-decoration: none; letter-spacing: .04em; white-space: nowrap; }
.dlbtn:hover { filter: brightness(1.08); }
.webfoot { max-width: 1100px; margin: 36px auto 30px; padding: 18px 14px 0; border-top: 1px solid var(--line, #2d2349); color: var(--muted, #a79bc4); font-size: 12.5px; }
.webfoot p { margin: 0 0 8px; }
.webfoot a { color: var(--accent, #ff9a3c); }

.web .homelink{color:var(--muted,#9aa4b2);font-size:12px;text-decoration:none;margin-right:12px;white-space:nowrap}.web .homelink:hover{color:#fff}

/* ================= Website overhaul (web mode only) ================= */
.web #app { max-width: 1240px; padding: 0 20px 20px; }
.web #topbar { position: sticky; top: 0; z-index: 50; margin: 0 -20px 22px; background: rgba(10,7,18,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.web .tbin { max-width: 1240px; margin: 0 auto; padding: 0 20px; height: 62px; display: flex; align-items: center; gap: 22px; }
.web .tbrand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.web .tbrand img { width: 34px; height: 34px; filter: drop-shadow(0 3px 10px rgba(255,106,31,.45)); }
.web .tbrand .wm { font-size: 17px; font-weight: 900; letter-spacing: 2px; display: flex; }
.web .tbrand .wm span { background: linear-gradient(180deg, #fff, #aeb7d0 60%, #7a85a3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.web .tbrand .wm b { background: linear-gradient(180deg, #ffe3a0, #ff9a3c 55%, #ff5a1f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.web #topbar #nav { display: flex; margin: 0; border: 0; gap: 2px; flex: none; }
.web #topbar .navtab { height: 62px; padding: 0 14px; font-size: 14px; }
.web .tsearch { margin-left: auto; flex: 0 1 380px; }
.web .tdl { flex: none; padding: 8px 16px; font-size: 13px; }
.wsearch { display: flex; gap: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.wsearch:focus-within { border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255,154,60,.15); }
.wsearch input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); padding: 10px 14px; font-size: 14px; outline: none; }
.wsearch select { background: transparent; border: 0; border-left: 1px solid var(--line); color: var(--muted); padding: 0 8px; font-size: 13px; outline: none; cursor: pointer; }
.wsearch select option { background: #150f24; color: var(--text); }
.wsearch button { border: 0; border-radius: 0; padding: 0 18px; font-weight: 800; background: linear-gradient(135deg, var(--ember), var(--ember2)); color: #2a0f00; cursor: pointer; }
.tsearch button { padding: 0 12px; }
@media (max-width: 900px) { .web .tsearch { display: none; } .web .tbin { gap: 12px; } .web .tbrand .wm { display: none; } .web .tdl { margin-left: auto; } }

.web .pagehead { margin: 4px 0 16px; } .web .pagehead h1 { margin: 0 0 4px; font-size: 30px; font-weight: 900; letter-spacing: -.3px; }
.web .pagehead p { margin: 0; color: var(--muted); max-width: 720px; }

/* home hero */
.hero2 { position: relative; overflow: hidden; text-align: center; padding: 54px 20px 46px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(600px 260px at 15% 0%, rgba(139,108,255,.28), transparent 70%), radial-gradient(600px 260px at 90% 100%, rgba(255,106,31,.24), transparent 70%), linear-gradient(180deg, #1a1230, #0f0a1c); }
.hero2 h1 { margin: 0 0 10px; font-size: clamp(30px, 5vw, 52px); font-weight: 900; letter-spacing: -1px; line-height: 1.05; }
.hero2 h1 em { font-style: normal; background: linear-gradient(180deg, #ffe3a0, #ff9a3c 55%, #ff5a1f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero2 p { margin: 0 auto 24px; max-width: 560px; color: var(--muted); font-size: 16px; }
.hero2 .wsearch { max-width: 620px; margin: 0 auto; border-radius: 16px; background: rgba(10,7,18,.7); }
.hero2 .wsearch input { padding: 16px 20px; font-size: 16px; } .hero2 .wsearch button { padding: 0 28px; font-size: 15px; } .hero2 .wsearch select { font-size: 14px; padding: 0 12px; }
.herolinks { margin-top: 18px; display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.herolinks button { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; font-weight: 700; cursor: pointer; }
.herolinks button:hover { border-color: var(--ember); color: var(--ember); } .herolinks a { color: var(--muted); font-size: 13px; }
.web .metag { gap: 12px; } .web .metag > div { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 8px; }
.web .metag .mhead { padding: 0 6px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; color: var(--text); font-weight: 700; }

/* tier list */
.web .tl { padding: 14px 10px 8px; }
.web .tl .ctools { padding: 0 8px; }
.web .rchip { padding: 7px 14px; font-weight: 700; }
.web .crow { grid-template-columns: 44px minmax(150px,1.6fr) 1fr 60px minmax(110px,1.2fr) .8fr .8fr; padding: 8px 10px; border-radius: 10px; font-size: 14px; }
.web .crow:not(.head) { border-top: 1px solid rgba(46,35,71,.55); border-radius: 0; }
.web .crow:not(.head):hover { background: linear-gradient(90deg, rgba(255,154,60,.10), transparent); }
.web .crow .rk { color: var(--muted); font-weight: 700; text-align: center; }
.web .crow .cn { display: flex; align-items: center; gap: 10px; min-width: 0; } .web .crow .cn img { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); } .web .crow .cn b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.web .crow .ln { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.web .crow .wrc { display: grid; gap: 4px; } .web .crow .wrc b { font-size: 14px; }
.web .crow .wrc i { display: block; height: 4px; border-radius: 3px; background: #ffffff12; overflow: hidden; } .web .crow .wrc u { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--violet), var(--ember)); }
.web .crow .tbadge { font-size: 12px; width: 40px; text-align: center; padding: 3px 0; }
.web .crow .tbadge.t1 { background: linear-gradient(135deg, #ffe3a0, #ff9a3c); } .web .crow .tbadge.t2 { background: linear-gradient(135deg, #a8f5e9, #2bb8a6); color: #052b26; }
.web .crow .tbadge.t3 { background: linear-gradient(135deg, #b9a8ff, #8b6cff); color: #1a0f40; } .web .crow .tbadge.t4, .web .crow .tbadge.t5 { background: #2a2342; color: var(--muted); }
.web .crow.head { top: 62px; background: #150f24; padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 760px) { .web .crow { grid-template-columns: 30px 1fr 56px 70px; } .web .crow > :nth-child(3), .web .crow > :nth-child(6), .web .crow > :nth-child(7) { display: none; } }

/* champion page */
.web .cdgrid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.web .cdside { position: sticky; top: 78px; } .web .cdside .panel { margin: 0; } .web .cdside .cgrid { grid-template-columns: 1fr; }
@media (max-width: 1060px) { .web .cdgrid { grid-template-columns: 1fr; } .web .cdside { position: static; } }
.web .browse { position: relative; isolation: isolate; }
.web .cbanner { position: absolute; inset: -4px 0 auto 0; height: 230px; z-index: -1; border-radius: 20px; background-size: cover; background-position: center 18%; opacity: .4; -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 100%); mask-image: linear-gradient(180deg, #000 20%, transparent 100%); }
.web .browse .phead h2 { font-size: 28px; } .web .browse .phead img { width: 84px; height: 84px; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.web .backbtn { margin-bottom: 10px; }

/* players */
.web .pcard { border-radius: 18px; } .web .pcard h3 { font-size: 15px; color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 800; }
.web .match { border-radius: 12px; }
.web .webfoot { max-width: 1240px; }
.web footer.webfoot { margin-top: 48px; }
.web #clist { max-height: none; overflow: visible; padding-right: 0; }
.web #topbar .navtab { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); box-shadow: none; }
.web #topbar .navtab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.web #topbar .navtab.on { color: var(--ember); border-bottom-color: var(--ember); background: transparent; }