/* Hextech theme (dark navy and gold), shared by every ladder page. The replay viewer has its own viewer.css. */
:root {
  --serif: "Cinzel", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --display: "Rajdhani", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  --bg: #010a13; --bg2: #06111d; --panel: #0a1428; --panel2: #0f1b33; --line: #1e2d3d; --gold: #c8aa6e; --gold2: #785a28;
  --gold3: #5a4820; --text: #f0e6d2; --muted: #a09b8c; --accent: #c8aa6e; --link: #cdbe91; --hex: #0ac8b9;
  --win: #33c8a0; --loss: #e84057; --warn: #e0b04a; --chip: #1e2328; --a: #2ea8ff; --b: #ff4655;
  color-scheme: dark;
}
* { box-sizing: border-box; scrollbar-color: #3c3c41 transparent; }
body { margin: 0; color: var(--text); min-height: 100vh;
  background: radial-gradient(ellipse at 50% -10%, #0c2134 0%, var(--bg) 55%) fixed, var(--bg);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif; }
a { color: var(--link); text-decoration: none; } a:hover { color: #f0e6d2; text-decoration: underline; }

/* header */
header { position: sticky; top: 0; z-index: 10; display: flex; gap: 8px 12px; align-items: center; padding: 10px 16px; flex-wrap: wrap;
  background: linear-gradient(180deg, #010a13, #06111d); border-bottom: 1px solid var(--gold2); box-shadow: 0 4px 20px #000a; }
header .brand { display: inline-flex; align-items: center; gap: 8px; font: 800 17px var(--serif); color: var(--gold); letter-spacing: .08em; }
header .brand img { width: 28px; height: 28px; }
header nav { display: flex; gap: 2px; flex-wrap: wrap; }
header nav a { color: var(--muted); font: 700 13px var(--serif); letter-spacing: .02em; padding: 6px 8px; border-bottom: 2px solid transparent; }
header nav a:hover { color: var(--text); text-decoration: none; border-bottom-color: var(--gold2); }
header nav a.on { color: var(--gold); border-bottom-color: var(--gold); }
header .who { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }

main { max-width: 1160px; margin: 0 auto; padding: 24px 18px 70px; }
h1 { font: 700 26px var(--serif); margin: 0 0 16px; letter-spacing: .04em; color: var(--text); }
h2 { font: 700 16px var(--serif); margin: 30px 0 10px; letter-spacing: .04em; color: var(--gold); text-transform: uppercase;
  display: flex; align-items: center; gap: 10px; }
h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold2), transparent); }
.panel { background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--gold3); padding: 16px; }
.scroll { overflow-x: auto; }

/* tables */
table { border-collapse: collapse; width: 100%; background: linear-gradient(180deg, rgba(10,20,40,.85), rgba(1,10,19,.85)); border: 1px solid var(--gold3); }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid #ffffff1a; white-space: nowrap; }
th { color: var(--gold); font: 700 12px var(--serif); letter-spacing: .03em; text-transform: uppercase; background: #010a13; border-bottom: 1px solid var(--gold2); }
tr:nth-child(even) td { background: rgba(255,255,255,.025); }
tr:hover td { background: rgba(200,170,110,.08); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num b { font: 700 15px var(--display); }
td.memo { min-width: 200px; max-width: 380px; white-space: normal; }
td.wrap { white-space: normal; min-width: 200px; }
td.memo > div { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

.muted { color: var(--muted); } .win { color: var(--win); font-weight: 600; } .loss { color: var(--loss); }
.chip { display: inline-block; padding: 0 7px; background: var(--chip); border: 1px solid #3c3c41; font-size: 12px; color: var(--muted); }
.st-ready, .st-done { color: var(--win); } .st-failed, .st-error { color: var(--loss); }
.st-pending, .st-building, .st-queued, .st-running { color: var(--warn); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.grid > *, .grid2 > * { min-width: 0; }

/* forms */
/* minmax(0, 1fr): a long <select> option must not stretch the form past its panel */
form.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 520px; }
form.stack select { width: 100%; }
label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-weight: 600; font-size: 13px; color: var(--muted); }
input, select, button, textarea { font: inherit; padding: 6px 10px; border-radius: 0; border: 1px solid var(--gold3); background: #010a13; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 8px rgba(200,170,110,.3); }
button { cursor: pointer; font: 700 13px var(--serif); letter-spacing: .06em; color: #0a1428; border: 1px solid var(--gold);
  background: linear-gradient(180deg, #f0e6d2, var(--gold)); }
button:hover { box-shadow: 0 0 12px rgba(200,170,110,.6); }
button:disabled { opacity: .45; cursor: default; box-shadow: none; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
pre { background: #000; border: 1px solid var(--gold3); padding: 12px; overflow: auto; max-height: 420px; font-size: 12px; color: #cfd6e4; }
details summary { cursor: pointer; color: var(--link); }
.viewer { width: 100%; height: 88vh; min-height: 560px; border: 1px solid var(--gold2); background: #000; box-shadow: 0 10px 40px #000c; }
.msg { margin-top: 8px; }

/* ---- LoL-style ranks: emblem, badge and rank-coloured names */
.emblem { vertical-align: middle; filter: drop-shadow(0 1px 2px #000a); }
.rank { display: inline-flex; align-items: center; gap: 4px; font: 700 13px var(--serif); white-space: nowrap; color: var(--rc); letter-spacing: .02em; }
.rank small { color: var(--muted); font: 600 12px var(--display); }
h1 .rank { font-size: 15px; vertical-align: middle; margin-left: 6px; }
h1 .emblem { vertical-align: -6px; }
/* Names keep plain colours in lists (the emblem shows the rank): several rank colours are close to the win / loss / muted
   colours. Only the big headings (podium, profile, promotion card) paint the name in its rank colour. */
a.rn { color: var(--link); font-weight: 700; } span.rn { color: var(--text); font-weight: 700; }
tr.muted a.rn, tr.muted span.rn { color: var(--muted); }
.pod .rn, .profile .rn, .promo .rn { color: var(--rc, var(--link)); }
.pod .rn-master, .pod .rn-grandmaster, .profile .rn-master, .profile .rn-grandmaster { text-shadow: 0 0 10px color-mix(in srgb, var(--rc) 55%, transparent); }
.pod .rn-challenger, .profile .rn-challenger { background: linear-gradient(90deg, #c99a1e, #f4d46b, #5ad1ff, #f4d46b, #c99a1e); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: rn-shine 8s linear infinite; }
@keyframes rn-shine { to { background-position: -200% 0; } }
.rank-change { font-size: 12px; font-weight: 700; margin-left: 4px; }
.rank-change.up { color: var(--win); } .rank-change.down { color: var(--loss); }

/* ---- op.gg-style bot profile */
.profile { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 18px 22px; margin-bottom: 18px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--rc) 16%, #0a1428) 0%, #0a1428 45%, #010a13 100%); border: 1px solid var(--gold2);
  box-shadow: 0 10px 40px #000a; position: relative; overflow: hidden; }
.profile::before { content: ""; position: absolute; left: -60px; top: -60px; width: 300px; height: 300px;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 35%, transparent), transparent 70%); pointer-events: none; }
.profile .pe { width: 132px; height: 132px; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--rc) 60%, transparent)); position: relative; }
.profile .pn { font: 800 32px var(--serif); letter-spacing: .04em; }
.profile .pv { font: 600 14px var(--display); color: var(--muted); margin-left: 8px; }
.profile .pr { font: 700 20px var(--serif); color: var(--rc); margin-top: 4px; }
.profile .pr small { font: 700 15px var(--display); color: var(--text); margin-left: 8px; }
.profile .pm { color: var(--muted); font-size: 13px; margin-top: 6px; }
.profile .pm b { color: var(--text); }
/* labelled stat tiles (bot profile, ranking status) instead of one long "・"-separated line */
.pstats, .statbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pstats > span, .statbar > span { display: grid; gap: 1px; padding: 5px 12px; min-width: 84px; border: 1px solid var(--gold3); background: rgba(1,10,19,.55); }
.pstats small, .statbar small { color: var(--muted); font-size: 12px; }
.pstats b, .statbar b { font: 700 17px/1.2 var(--display); color: var(--text); }
.statbar { margin: 0 0 16px; } .statbar b { font-size: 15px; }
.statbar .bad b { color: var(--loss); } .statbar .busy b { color: var(--warn); }
.statbar .wide { flex: 1 1 280px; } .statbar .wide b { font: 600 13px/1.5 system-ui, "Noto Sans JP", sans-serif; color: var(--warn); }
.wr { --p: 50; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--win) calc(var(--p) * 1%), var(--loss) 0); }
.wr::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #0a1428; }
.wr span { position: relative; z-index: 1; text-align: center; font: 700 22px var(--display); line-height: 1.05; }
.wr small { display: block; font: 600 12px var(--display); color: var(--muted); }
.lp-wrap { position: relative; }
.lp-graph { width: 100%; height: 260px; display: block; background: #000; border: 1px solid var(--gold3); cursor: crosshair; }
.lp-tip { position: absolute; pointer-events: none; padding: 3px 8px; background: #0a1428ee; border: 1px solid var(--gold3);
  color: var(--text); font: 600 12px Rajdhani, 'Noto Sans JP', sans-serif; white-space: nowrap; }
.history { display: grid; gap: 5px; }
.hrow { display: grid; grid-template-columns: 6px 74px 1fr 150px 110px 90px; align-items: center; gap: 12px; padding: 7px 12px 7px 0;
  border: 1px solid var(--gold3); background: linear-gradient(90deg, rgba(51,200,160,.10), rgba(10,20,40,.6) 40%); }
.hrow.loss { background: linear-gradient(90deg, rgba(232,64,87,.12), rgba(10,20,40,.6) 40%); }
.hrow .bar { align-self: stretch; } .hrow.win .bar { background: var(--win); } .hrow.loss .bar { background: var(--loss); }
.hrow .res { font: 800 13px var(--serif); letter-spacing: .06em; } .hrow.win .res { color: var(--win); } .hrow.loss .res { color: var(--loss); }
.hrow .res small { display: block; font: 600 12px var(--display); color: var(--muted); letter-spacing: 0; }
.hrow .picks { display: flex; gap: 3px; flex-wrap: wrap; }
.hrow .pick { width: 26px; height: 26px; border: 1px solid var(--gold3); background-color: #0b1220; }
.hrow .vs { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.hrow .gems { font: 700 14px var(--display); text-align: right; } .hrow .gems small { color: var(--muted); font-weight: 600; }
.hrow .delta { font: 700 14px var(--display); text-align: right; } .hrow .delta.up { color: var(--win); } .hrow .delta.down { color: var(--loss); }
.hrow .map { font: 700 12px var(--serif); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

/* ---- promotion / demotion card on the match page */
.promo { position: relative; display: flex; align-items: center; gap: 18px; margin: 14px 0; padding: 16px 22px; overflow: hidden;
  border: 1px solid var(--rc); background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 22%, #0a1428), #010a13 70%); }
.promo::before { content: ""; position: absolute; left: 30px; top: 50%; width: 260px; height: 260px; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 45%, transparent) 0 8deg, transparent 8deg 22deg);
  animation: promo-spin 14s linear infinite; opacity: .6; mask: radial-gradient(circle, #000 20%, transparent 70%); }
.promo img { position: relative; width: 84px; height: 84px; animation: promo-pop 1.2s cubic-bezier(.2,1.6,.4,1) both;
  filter: drop-shadow(0 0 18px var(--rc)); }
.promo .pt1 { font: 800 22px var(--serif); color: var(--rc); letter-spacing: .06em; animation: promo-fade .8s .4s both; position: relative; }
.promo .pt2 { color: var(--muted); font-size: 13px; animation: promo-fade .8s .6s both; position: relative; }
.promo.down { --rc: #7b7f88 !important; } .promo.down img { animation: promo-drop 1s ease both; filter: grayscale(.6) drop-shadow(0 0 8px #000); }
.promo.down::before { display: none; }
@keyframes promo-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes promo-pop { 0% { transform: scale(0) rotate(-20deg); opacity: 0; } 70% { opacity: 1; } 100% { transform: none; } }
@keyframes promo-fade { from { opacity: 0; transform: translateX(-10px); } }
@keyframes promo-drop { from { transform: translateY(-14px); opacity: 0; } }

@media (max-width: 760px) {
  .profile { grid-template-columns: auto 1fr; } .profile .wr { display: none; } .profile .pe { width: 90px; height: 90px; }
  .hrow { grid-template-columns: 6px 64px minmax(0, 1fr) auto 64px; gap: 8px; } .hrow .pick, .hrow .map { display: none; }
}

/* ---- ranking: podium and rank distribution */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: end; margin-bottom: 18px; }
.pod { position: relative; display: grid; justify-items: center; gap: 2px; padding: 18px 12px 16px; overflow: hidden; color: var(--text);
  border: 1px solid var(--gold2); background: #010a13; min-height: 250px; align-content: end; box-shadow: 0 12px 40px #000c; transition: transform .2s; }
.pod:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--gold); }
.pod.p1 { order: 2; min-height: 300px; border-color: var(--gold); box-shadow: 0 0 30px rgba(200,170,110,.25), 0 12px 40px #000c; }
.pod.p2 { order: 1; } .pod.p3 { order: 3; }
.pod-art { position: absolute; inset: 0; background-size: cover; background-position: 50% 25%; opacity: .5; transition: opacity .3s, transform 6s; }
.pod:hover .pod-art { opacity: .7; transform: scale(1.05); }
.pod::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,10,19,.15) 0%, rgba(1,10,19,.82) 45%, #010a13 78%); }
.pod-name, .pod-rank, .pod-stats { text-shadow: 0 1px 3px #000, 0 0 12px #000; }
.pod-art { z-index: 0; } .pod::before { z-index: 1; }
.pod > *:not(.pod-art) { position: relative; z-index: 2; }
.pod-place { position: absolute !important; left: 12px; top: 8px; font: 800 44px/1 var(--serif); color: var(--gold); text-shadow: 0 2px 10px #000; }
.pod.p1 .pod-place { font-size: 56px; color: #f4d46b; }
.pod-emblem { width: 92px; height: 92px; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--rc) 70%, transparent)); }
.pod.p1 .pod-emblem { width: 116px; height: 116px; }
.pod-name { font: 800 22px var(--serif); } .pod-name small { font: 600 12px var(--display); color: var(--muted); }
.pod-rank { font: 700 14px var(--serif); color: var(--rc); } .pod-rank small { color: var(--text); font: 700 12px var(--display); }
.pod-stats { font-size: 12px; color: var(--muted); text-align: center; } .pod-stats b { color: var(--text); }
.dist { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; align-items: end; height: 150px; padding: 10px 12px 6px; margin-bottom: 22px;
  border: 1px solid var(--gold3); background: linear-gradient(180deg, rgba(10,20,40,.6), rgba(1,10,19,.8)); }
.dist-col { height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; align-items: end; gap: 2px; min-width: 0; }
.dist-n { font: 700 12px var(--display); color: var(--text); }
.dist-bar { width: 70%; align-self: end; background: linear-gradient(180deg, var(--rc), color-mix(in srgb, var(--rc) 30%, #000)); box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 40%, transparent); }
.dist-col img { width: 26px; height: 26px; }
.dist-l { font: 700 12px var(--serif); color: var(--rc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---- op.gg-style match rows */
.mlist { display: grid; gap: 4px; }
.mrow { display: grid; grid-template-columns: 70px 1fr 92px 1fr 110px; align-items: center; gap: 10px; padding: 6px 10px; color: var(--text);
  border: 1px solid var(--gold3); background: linear-gradient(90deg, rgba(10,20,40,.85), rgba(1,10,19,.85)); }
.mrow:hover { text-decoration: none; border-color: var(--gold2); background: linear-gradient(90deg, rgba(20,36,64,.9), rgba(1,10,19,.9)); }
.mid { font: 700 12px var(--display); color: var(--muted); display: grid; } .mid small { font-size: 12px; }
.mside { display: grid; gap: 3px; min-width: 0; padding: 2px 8px; border-left: 3px solid transparent; }
.mside.b { text-align: right; border-left: none; border-right: 3px solid transparent; }
.mside.won { border-color: var(--win); background: linear-gradient(90deg, rgba(51,200,160,.10), transparent); }
.mside.b.won { background: linear-gradient(270deg, rgba(51,200,160,.10), transparent); }
.mside.lost { border-color: var(--loss); }
.mname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mname small { color: var(--muted); font-size: 12px; }
/* result in words, not only the green / red edge: 勝 / 敗 tag and each side's own rating change */
.wl { display: inline-block; padding: 0 5px; margin: 0 2px; font: 700 12px/1.5 var(--display); border: 1px solid; vertical-align: 1px; }
.wl.w { color: #04130e; background: var(--win); border-color: var(--win); } .wl.l { color: var(--loss); border-color: #e8405780; }
.mdl { font: 700 13px var(--display); color: var(--muted); margin-left: 4px; } .mdl.up { color: var(--win); } .mdl.down { color: var(--loss); }
.mpicks { display: flex; gap: 2px; } .mside.b .mpicks { justify-content: flex-end; }
.mpicks i { width: 22px; height: 22px; border: 1px solid var(--gold3); background-color: #0b1220; display: inline-block; }
.mscore { display: flex; justify-content: center; align-items: center; gap: 6px; font: 700 17px var(--display); color: var(--muted); }
.mscore b.w { color: var(--gold); text-shadow: 0 0 8px rgba(200,170,110,.5); } .mscore em { font-style: normal; color: var(--muted); font-size: 12px; }
.live { display: inline-flex; align-items: center; gap: 5px; font: 800 12px var(--serif); color: #fff; background: var(--loss); padding: 2px 7px; letter-spacing: .1em; }
/* only a small dot blinks; the label itself stays still so it can be read */
.live::before, .live-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.mmeta { display: grid; text-align: right; } .mmeta b { font: 700 12px var(--serif); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mmeta small { font-size: 12px; color: var(--muted); }
.st-row-running { border-color: color-mix(in srgb, var(--loss) 50%, var(--gold3)); }
.live-strip { display: flex; gap: 8px; align-items: stretch; overflow-x: auto; padding: 8px; margin-bottom: 14px; border: 1px solid var(--gold3); background: #010a13; }
.live-tag { display: flex; align-items: center; gap: 6px; font: 800 12px var(--serif); color: #fff; background: var(--loss); padding: 0 10px; letter-spacing: .12em; }
.live-card { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 6px; padding: 5px 10px; white-space: nowrap; color: var(--text);
  border: 1px solid var(--gold3); background: linear-gradient(180deg, #0a1428, #06111d); font-size: 12px; }
.live-card:hover { text-decoration: none; border-color: var(--gold); }
.live-card small { color: var(--muted); margin-left: 3px; } .live-card em { color: var(--gold); font-style: normal; font: 700 12px var(--serif); }
.live-card .lm { grid-column: 1 / -1; text-align: center; font: 700 12px var(--serif); letter-spacing: .08em; text-transform: uppercase; }

/* ---- champion tier list */
.tier-row { display: grid; grid-template-columns: 70px 1fr; gap: 10px; margin-bottom: 10px; }
.tier-label { display: grid; place-items: center; font: 800 34px var(--serif); border: 1px solid var(--gold3); color: #000; }
.t-S { background: linear-gradient(180deg, #ffe48a, #e0a52a); } .t-A { background: linear-gradient(180deg, #b6f0c9, #33c8a0); }
.t-B { background: linear-gradient(180deg, #b9d2ff, #4f7fe0); } .t-C { background: linear-gradient(180deg, #d7c3ff, #8a5ad8); }
.t-D { background: linear-gradient(180deg, #ffb3bd, #e84057); }
.tier-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.tcard { position: relative; display: grid; grid-template-columns: 96px 1fr; min-height: 88px; overflow: hidden; border: 1px solid var(--gold3);
  background: linear-gradient(90deg, #0a1428, #010a13); }
.tcard-art { background-size: cover; background-position: 50% 25%; mask: linear-gradient(90deg, #000 60%, transparent); }
.tcard-body { display: grid; align-content: center; gap: 3px; padding: 8px 10px 8px 4px; }
.tcard-body b { font: 700 15px var(--serif); }
.tcard-stats { display: flex; gap: 8px; flex-wrap: wrap; font: 600 12px var(--display); }
.tbar { height: 4px; background: #000; } .tbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold)); }

/* ---- head-to-head matrix */
table.mx { width: auto; }
.mx th, .mx td { padding: 4px 6px; text-align: center; }
/* columns are numbered like the rows (no rotated names); the header row and the name column stay put while scrolling */
.mx-wrap { max-height: 78vh; overflow: auto; border: 1px solid var(--gold3); }
.mx-wrap table.mx { border: none; }
.mx tr:first-child th { position: sticky; top: 0; z-index: 2; }
.mx th.mx-row { position: sticky; left: 0; z-index: 1; }
.mx tr:first-child th:first-child { left: 0; z-index: 3; }
.mx-col { vertical-align: bottom; white-space: nowrap; min-width: 46px; }
.mx-col .mx-num, .mx-row .mx-num { display: block; font: 700 13px var(--display); color: var(--text); }
.mx-row .mx-num { display: inline-block; min-width: 2.2em; color: var(--muted); }
.mx-row { text-align: left !important; white-space: nowrap; text-transform: none; letter-spacing: 0; font: 600 13px system-ui, "Noto Sans JP", sans-serif; }
.mx-c { min-width: 46px; font: 700 14px/1.15 var(--display); color: #fff; text-shadow: 0 1px 2px #000; }
.mx-c small { display: block; font: 600 12px var(--display); color: #ffffffc0; }
.mx tr:hover td.mx-c { filter: brightness(1.25); }
.mx-legend { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.mx-legend i { width: 220px; height: 12px; border: 1px solid var(--gold3);
  background: linear-gradient(90deg, hsl(0 75% 36%), hsl(75 30% 14%), hsl(150 75% 36%)); }
.mx-c.none { background: #05090f; color: var(--muted); }
.mx td.mx-self { background: repeating-linear-gradient(45deg, #0a1428 0 4px, #010a13 4px 8px); }

/* ---- login */
.login-bg { position: fixed; inset: 0; z-index: -1; background: #010a13; }
.login-bg span { position: absolute; inset: 0; background-size: cover; background-position: center 30%; opacity: 0;
  animation: login-fade calc(var(--n) * 6s) linear infinite; filter: brightness(.55) saturate(1.1); }
.login-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(1,10,19,.25), rgba(1,10,19,.92) 75%); }
@keyframes login-fade { 0% { opacity: 0; transform: scale(1.06); } 3% { opacity: 1; } 9% { opacity: 1; } 12% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
.login-box { width: min(380px, 100%); margin: 9vh auto 0; display: grid; justify-items: center; gap: 8px; padding: 28px 30px 24px; text-align: center;
  background: linear-gradient(180deg, rgba(10,20,40,.92), rgba(1,10,19,.95)); border: 1px solid var(--gold2); box-shadow: 0 20px 80px #000; }
.login-logo { width: 96px; height: 96px; filter: drop-shadow(0 0 20px rgba(244,212,107,.5)); }
.login-title { font: 800 26px var(--serif); color: var(--gold); letter-spacing: .1em; }
.login-sub { color: var(--muted); font: 600 12px var(--serif); letter-spacing: .2em; margin-bottom: 10px; }
.login-form { display: grid; gap: 10px; width: 100%; } .login-form input { padding: 10px 12px; } .login-form button { padding: 10px; font-size: 15px; }

@media (max-width: 760px) {
  .podium { grid-template-columns: 1fr; } .pod.p1, .pod.p2, .pod.p3 { order: 0; min-height: 200px; }
  .mrow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; padding: 6px; } .mid, .mmeta { display: none; }
  .mside { padding: 2px 6px; } .mdl { display: none; } .mscore { font-size: 15px; gap: 4px; }
  .mpicks { flex-wrap: wrap; } .mpicks i { width: 18px; height: 18px; }
  .dist { gap: 2px; padding: 8px 6px 6px; } .dist-l { display: none; } .dist-col img { width: 22px; height: 22px; }
  header { position: static; gap: 8px 16px; padding: 8px 12px; }
  header nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; order: 3; scrollbar-width: none; }
  header nav a { white-space: nowrap; padding: 6px 8px; }
  .tier-row { grid-template-columns: 44px 1fr; } .tier-label { font-size: 24px; }
}

/* ---- knowledge base, replay library, official matches */
.small { font-size: 12px; }
.btn-link { display: inline-block; padding: 6px 12px; border: 1px solid var(--gold2); font: 700 13px var(--serif); letter-spacing: .04em;
  color: var(--gold); background: rgba(200,170,110,.06); }
.btn-link:hover { text-decoration: none; border-color: var(--gold); color: var(--text); }
button.ghost { color: var(--muted); background: transparent; border-color: var(--gold3); }
button.ghost:hover { color: var(--text); border-color: var(--gold2); }
form.stack.wide, .panel.wide { max-width: 860px; margin-top: 16px; }
textarea { width: 100%; resize: vertical; font: 13px/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.tagcloud { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--gold3); color: var(--muted); font-size: 12px; margin-right: 4px; }
.tag small { color: var(--gold); }
.tag.on, .tag:hover { color: var(--gold); border-color: var(--gold2); text-decoration: none; }
.notes { display: grid; gap: 6px; margin-top: 10px; }
.note-row { display: grid; grid-template-columns: 82px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px; color: var(--text);
  background: linear-gradient(90deg, rgba(10,20,40,.9), rgba(1,10,19,.7)); border: 1px solid var(--gold3); }
.note-row:hover { text-decoration: none; border-color: var(--gold2); color: var(--text); }
.nbody { display: grid; gap: 2px; min-width: 0; }
.nbody small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntags i { font-style: normal; font-size: 12px; color: var(--gold); margin-right: 8px; }
.nmeta { display: grid; justify-items: end; gap: 2px; white-space: nowrap; }
.nmeta small { color: var(--muted); }
.nk, .ns { display: inline-block; padding: 1px 8px; font: 700 12px var(--display); letter-spacing: .06em; text-align: center; border: 1px solid; }
.nk { color: var(--hex); border-color: #0ac8b955; }
.nk-spec { color: var(--gold); border-color: var(--gold2); } .nk-experiment { color: #b48cff; border-color: #b48cff55; }
.nk-strategy { color: var(--a); border-color: #2ea8ff55; } .nk-question { color: var(--warn); border-color: #e0b04a55; }
.nk-idea { color: #ff9ad5; border-color: #ff9ad555; } .nk-log { color: var(--muted); border-color: #a09b8c55; }
.ns-open { color: var(--warn); border-color: #e0b04a55; } .ns-confirmed { color: var(--win); border-color: #33c8a055; }
.ns-refuted { color: var(--loss); border-color: #e8405755; } .ns-obsolete { color: var(--muted); border-color: #a09b8c55; }
.note-body { line-height: 1.7; overflow-wrap: anywhere; }
.note-body h3, .note-body h4, .note-body h5 { margin: 10px 0 4px; color: var(--gold); font-family: var(--serif); }
.note-body ul { margin: 4px 0; padding-left: 22px; }
.note-body code { background: #000; border: 1px solid var(--gold3); padding: 0 4px; font-size: 12px; }
.note-body pre { margin: 8px 0; }
.replies { display: grid; gap: 8px; }
.reply { padding: 10px 14px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 0 24px; }
tr.followed td:first-child { box-shadow: inset 3px 0 var(--gold); }
.cport { display: inline-block; width: 22px; height: 22px; vertical-align: middle; border: 1px solid var(--gold3); background-color: #000; }
@media (max-width: 640px) { .note-row { grid-template-columns: 1fr; gap: 6px; } .nmeta { justify-items: start; } }
/* open dropdown lists: keep them dark (browsers otherwise show light text on a white list) */
select { color-scheme: dark; }
select option, select optgroup { background: #0a1428; color: var(--text); }
select option:checked { background: var(--gold2); color: #fff; }

/* my team page */
.form-dot { display: inline-block; width: 20px; text-align: center; font: 700 12px var(--display); margin-right: 2px; border: 1px solid; }
.form-dot.win { color: var(--win); border-color: #33c8a066; } .form-dot.loss { color: var(--loss); border-color: #e8405766; }
.rchart { width: 100%; height: auto; display: block; }
.rchart .grid { stroke: #ffffff14; } .rchart text { fill: var(--muted); font: 12px system-ui; }
.rchart .line { stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rchart circle.w { fill: var(--win); } .rchart circle.l { fill: var(--loss); }
.rchart-wrap { position: relative; } .rchart { cursor: crosshair; }
.rchart .rc-cursor { stroke: #f0e6d266; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rchart .rc-dot { stroke: #000; stroke-width: 1; }
.new-banner { position: fixed; right: 18px; bottom: 18px; z-index: 20; padding: 10px 16px; background: var(--panel2);
  border: 1px solid var(--gold); box-shadow: 0 6px 24px #000c; font-weight: 600; }

/* secondary links (API, AI guide) sit next to the user name instead of in the main nav */
.who a { margin: 0 2px; }

/* respect reduced-motion settings: no looping shine / pulse / spin */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* =====================================================================================================================
   League-client skin: gold-gradient frames, dark buttons with gold borders, a PLAY-style call to action, client top bar,
   Beaufort-like (Cinzel) uppercase labels, hextech blue for primary actions and victories. Layered over the rules above.
   ===================================================================================================================== */
:root {
  --frame: linear-gradient(180deg, #c8aa6e, #785a28);           /* the client's default border gradient */
  --frame-hi: linear-gradient(180deg, #f0e6d2, #c8aa6e);        /* hovered */
  --frame-dim: linear-gradient(180deg, #785a28, #463714);       /* quiet panels */
  --blue: #0ac8b9; --blue2: #0397ab; --blue-text: #cdfafa;
  --win: #0ac8b9;                                               /* client match history: victory in hextech blue */
  --btn-bg: #1e2328;
}
body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(10,200,185,.10), transparent 60%),
    radial-gradient(ellipse at 50% -10%, #0c2134 0%, var(--bg) 55%) fixed,
    var(--bg);
}
::selection { background: #785a28; color: #f0e6d2; }
* { scrollbar-width: thin; scrollbar-color: #785a28 #010a13; }

/* ---- top bar: dark strip, PLAY button, uppercase tabs with a glowing gold underline */
header { min-height: 64px; padding: 0 16px; gap: 0 18px; flex-wrap: nowrap;
  background: linear-gradient(180deg, #010a13 0%, #0a1428 100%); border-bottom: none; box-shadow: 0 6px 24px #000c; }
header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #785a28 12%, #c8aa6e 50%, #785a28 88%, transparent); }
header .brand { font-size: 16px; text-shadow: 0 0 12px rgba(200,170,110,.35); white-space: nowrap; }
.play { position: relative; display: inline-grid; place-items: center; height: 38px; min-width: 112px; padding: 0 22px 0 26px; isolation: isolate;
  font: 800 15px var(--serif); letter-spacing: .1em; color: var(--blue-text); white-space: nowrap; text-shadow: 0 0 8px rgba(10,200,185,.6);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); background: linear-gradient(180deg, #f0e6d2, #c8aa6e 40%, #785a28); }
.play::before { content: ""; position: absolute; inset: 2px; z-index: -1;
  clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%);
  background: radial-gradient(ellipse at 50% 120%, rgba(10,200,185,.55), transparent 70%), linear-gradient(180deg, #0a323c, #091428); }
.play:hover { text-decoration: none; color: #fff; filter: brightness(1.15) drop-shadow(0 0 8px rgba(10,200,185,.5)); }
.play.on::before { background: radial-gradient(ellipse at 50% 120%, rgba(10,200,185,.85), transparent 75%), linear-gradient(180deg, #0a3c46, #0a1e2e); }
header nav { align-self: stretch; align-items: stretch; flex-wrap: nowrap; }
header nav a { display: flex; align-items: center; padding: 0 10px; font: 700 13px var(--serif); letter-spacing: .06em; text-transform: uppercase;
  color: #a09b8c; border-bottom: none; position: relative; white-space: nowrap; }
header nav a::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px; background: transparent; }
header nav a:hover { color: #f0e6d2; text-decoration: none; }
header nav a:hover::after { background: linear-gradient(90deg, transparent, #785a28, transparent); }
header nav a.on { color: #f0e6d2; text-shadow: 0 0 10px rgba(240,230,210,.35);
  background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(200,170,110,.22), transparent 70%); }
header nav a.on::after { background: linear-gradient(90deg, transparent, #c8aa6e 25%, #f0e6d2 50%, #c8aa6e 75%, transparent);
  box-shadow: 0 0 8px rgba(200,170,110,.8); }
header .who { align-self: center; }

/* ---- headings: gold-gradient page titles, section headers with ornamented rules */
h1 { font: 700 28px var(--serif); letter-spacing: .05em; text-transform: uppercase;
  background: linear-gradient(180deg, #f0e6d2 30%, #c8aa6e); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 small, h1 .rank, h1 .emblem { -webkit-text-fill-color: initial; }
h2 { color: #f0e6d2; letter-spacing: .08em; font-size: 15px; }
h2::before { content: ""; width: 8px; height: 8px; flex: none; transform: rotate(45deg); border: 1px solid #c8aa6e; background: #010a13;
  box-shadow: 0 0 6px rgba(200,170,110,.6); }
h2::after { background: linear-gradient(90deg, #c8aa6e, #785a28 40%, transparent); }

/* ---- frames: the client's 2px gold-gradient border on panels, tables and cards */
.panel, table, .pod, .profile, .dist, .live-strip, .login-box, .promo, .tcard, .mx-wrap, pre {
  border: 2px solid transparent; border-image: var(--frame-dim) 1; }
.panel { background: linear-gradient(180deg, rgba(10,20,40,.92), rgba(1,10,19,.95)); box-shadow: inset 0 0 30px rgba(0,0,0,.6); }
.profile, .pod.p1, .login-box { border-image: var(--frame) 1; }
.pod:hover { border-image: var(--frame-hi) 1; }
.mx-wrap table.mx { border: none; }
th { color: #a09b8c; letter-spacing: .08em; background: linear-gradient(180deg, #0a1428, #010a13); border-bottom: 1px solid #785a28; }
tr:hover td { background: rgba(200,170,110,.07); }

/* ---- buttons: dark fill, gold-gradient border, light-gold uppercase label; blue for primary */
button, .btn-link { position: relative; padding: 7px 18px; font: 700 13px var(--serif); letter-spacing: .08em; text-transform: uppercase;
  color: #cdbe91; background: var(--btn-bg); border: 2px solid transparent; border-image: var(--frame) 1; box-shadow: none; text-decoration: none; }
button:hover, .btn-link:hover { color: #f0e6d2; border-image: var(--frame-hi) 1; text-decoration: none;
  background: linear-gradient(180deg, #1e2328, #2a2f35); box-shadow: 0 0 10px rgba(200,170,110,.35), inset 0 0 10px rgba(200,170,110,.15); }
button:active { color: #785a28; background: #1e2328; }
button:disabled { color: #5c5b57; border-image: linear-gradient(#5c5b57, #5c5b57) 1; background: #1e2328; opacity: 1; box-shadow: none; }
button.ghost { color: #a09b8c; border-image: var(--frame-dim) 1; background: transparent; }
button.primary, .login-form button, form.stack > button[type=submit], #request button[type=submit] {
  color: var(--blue-text); border-image: linear-gradient(180deg, #0ac8b9, #005a82) 1;
  background: linear-gradient(180deg, #0a323c, #091428); text-shadow: 0 0 6px rgba(10,200,185,.5); }
button.primary:hover, .login-form button:hover, form.stack > button[type=submit]:hover, #request button[type=submit]:hover {
  color: #fff; border-image: linear-gradient(180deg, #cdfafa, #0ac8b9) 1; box-shadow: 0 0 12px rgba(10,200,185,.45), inset 0 0 12px rgba(10,200,185,.2); }

/* ---- inputs: near-black fill with a thin gold frame; custom select chevron and checkboxes */
input, select, textarea { background: #010a13; border: 1px solid #463714; color: #f0e6d2; }
input:hover, select:hover, textarea:hover { border-color: #785a28; }
input:focus, select:focus, textarea:focus { border-color: #c8aa6e; box-shadow: 0 0 6px rgba(200,170,110,.35); }
select { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background: #010a13 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c8aa6e'/%3E%3C/svg%3E") no-repeat right 10px center; }
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; padding: 0; margin: 0 4px 0 0; vertical-align: -3px;
  border: 1px solid #785a28; background: #010a13; cursor: pointer; display: inline-grid; place-items: center; }
input[type=checkbox]::after { content: ""; width: 8px; height: 8px; transform: rotate(45deg) scale(0); background: #c8aa6e; transition: transform .12s; }
input[type=checkbox]:checked { border-color: #c8aa6e; } input[type=checkbox]:checked::after { transform: rotate(45deg) scale(1); }

/* ---- chips, tags and badges as small gold-framed plates */
.chip { background: #1e2328; border: 1px solid #463714; color: #cdbe91; letter-spacing: .03em; }
.live, .live-tag { background: linear-gradient(180deg, #e84057, #8c1a2a); box-shadow: 0 0 10px rgba(232,64,87,.45); }

/* ---- match history: client-style VICTORY / DEFEAT rows with a coloured left gradient */
.mrow, .hrow, .note-row { border: 1px solid #1e2328; border-left-width: 0; }
.mrow:hover, .hrow:hover, .note-row:hover { border-color: #785a28; }
.mside.won { background: linear-gradient(90deg, rgba(10,200,185,.16), transparent); }
.mside.b.won { background: linear-gradient(270deg, rgba(10,200,185,.16), transparent); }
.mside.lost { background: linear-gradient(90deg, rgba(232,64,87,.10), transparent); }
.mside.b.lost { background: linear-gradient(270deg, rgba(232,64,87,.10), transparent); }
.wl.w { color: #010a13; background: linear-gradient(180deg, #cdfafa, #0ac8b9); border-color: #0ac8b9; }
.hrow { background: linear-gradient(90deg, rgba(10,200,185,.16), rgba(10,20,40,.7) 45%); }
.hrow.loss { background: linear-gradient(90deg, rgba(232,64,87,.16), rgba(10,20,40,.7) 45%); }
.hrow .res { text-transform: uppercase; }
.mscore b.w { color: #f0e6d2; text-shadow: 0 0 10px rgba(200,170,110,.7); }
.wr { background: conic-gradient(var(--blue) calc(var(--p) * 1%), var(--loss) 0);
  box-shadow: 0 0 0 2px #785a28, 0 0 18px rgba(10,200,185,.25); }
.wr::after { background: radial-gradient(circle, #0a1428, #010a13); }

/* ---- podium and stat tiles: framed plates */
.pstats > span, .statbar > span { border: 1px solid transparent; border-image: var(--frame-dim) 1; background: linear-gradient(180deg, #0a1428, #010a13); }
.pod-place { background: linear-gradient(180deg, #f0e6d2, #c8aa6e 60%, #785a28); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pod.p1 .pod-place { background: linear-gradient(180deg, #fff6d6, #f4d46b 55%, #c99a1e); -webkit-background-clip: text; background-clip: text; }

@media (max-width: 760px) {
  header { flex-wrap: wrap; padding: 8px 12px 0; min-height: 0; gap: 8px 12px; }
  header nav { height: 40px; }
  .play { height: 32px; min-width: 88px; font-size: 13px; }
}
/* collapsed tables ignore border-image: plain gold edge instead */
table { border: 1px solid #785a28; border-image: none; box-shadow: 0 0 0 1px #010a13, 0 8px 24px rgba(0,0,0,.45); }
header nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
header nav::-webkit-scrollbar { display: none; }
@media (max-width: 1440px) { header .brand span { display: none; } }
.pstats b.win { color: var(--win); } .pstats b.loss { color: var(--loss); }

/* LoL pairs a classical display serif (Beaufort) with a plain sans (Spiegel). Japanese follows the same split:
   large display text uses Zen Old Mincho (bold, classical), everything small or running stays in Noto Sans JP. */
:root { --title: "Cinzel", "Zen Old Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif; }
h1, .profile .pn, .pod-name, .promo .pt1, .login-title, .tier-label { font-family: var(--title); }
h1 { font-weight: 900; }

/* ---- nav that always fits: secondary pages live in a "More" menu, and narrower windows wrap the tabs onto their own
   row instead of cutting them off (the tabs must never be hidden behind an invisible scrollbar) */
header nav { overflow: visible; flex-wrap: wrap; min-width: 0; }
header nav a { padding: 0 9px; letter-spacing: .04em; }
.more { position: relative; align-self: stretch; display: flex; }
.more summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 0 10px; cursor: pointer;
  font: 700 13px var(--serif); letter-spacing: .04em; text-transform: uppercase; color: #a09b8c; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.more summary:hover, .more[open] summary, .more.on summary { color: #f0e6d2; }
.more-menu { position: absolute; right: 0; top: 100%; z-index: 30; min-width: 170px; display: grid; padding: 6px 0;
  background: linear-gradient(180deg, #0a1428, #010a13); border: 2px solid transparent; border-image: var(--frame) 1; box-shadow: 0 12px 30px #000c; }
.more-menu a { padding: 8px 16px; font: 700 13px var(--serif); letter-spacing: .04em; text-transform: uppercase; color: #cdbe91; white-space: nowrap; }
.more-menu a:hover, .more-menu a.on { color: #f0e6d2; text-decoration: none; background: rgba(200,170,110,.1); }
header .who { font-size: 12px; color: #a09b8c; }
@media (max-width: 1240px) {
  header { flex-wrap: wrap; padding: 8px 16px 0; gap: 4px 14px; }
  header nav { order: 5; width: 100%; height: 40px; }
  .more { order: 4; } header .who { order: 3; margin-left: auto; }
}
@media (max-width: 760px) {
  header nav { height: auto; } header nav a { height: 36px; }
  /* phones: the user name gives way so "More" stays on the first row instead of sitting alone on a row of its own */
  header .who { display: none; } .more { margin-left: auto; }
  header { gap: 4px 10px; } .play { min-width: 0; padding: 0 14px 0 22px; font-size: 13px; } .more summary { padding: 0 4px; }
}

.loading-box { display: flex; align-items: center; gap: 10px; padding: 18px; margin: 12px 0; border: 1px solid var(--line, #ccc4);
  border-radius: 8px; color: var(--muted); }
.spinner { width: 18px; height: 18px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spinner-turn 0.8s linear infinite; flex: none; }
@keyframes spinner-turn { to { transform: rotate(360deg); } }

.map-filter .chip { text-decoration: none; margin: 2px 0; display: inline-block; }
.map-filter .chip.on { background: var(--gold2, #785a28); color: var(--text); }

.chip.eval { background: #0ac8b922; color: var(--hex, #0ac8b9); border-color: #0ac8b966; }

.map-picker { border: 1px solid var(--line, #1e2d3d); padding: 8px 10px; background: #0003; }
.map-picker .mp-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.map-picker .mp-q { max-width: 240px; }
.map-picker summary { cursor: pointer; margin: 4px 0; }
.map-picker .mp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 10px; max-height: 260px; overflow: auto; padding: 4px 0 6px 18px; }
.map-picker .mp-list label { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eval-form { margin: 8px 0 14px; }
.eval-form .row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 6px 0; }

.chip.official { background: #c8aa6e33; color: var(--gold, #c8aa6e); border-color: #c8aa6e88; font-weight: 700; }
.chip.official-past { color: var(--muted); }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0 24px; }

tr.mine td { background: #c8aa6e22; } tr.mine td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

tr.pinned td { border-bottom: 2px solid var(--gold); }

/* division switch (header) and division badges */
.div-switch { display: inline-flex; border: 1px solid var(--gold3); white-space: nowrap; }
.div-switch a { padding: 4px 10px; font: 700 12px var(--serif); letter-spacing: .06em; color: var(--muted); }
.div-switch a:hover { color: var(--text); text-decoration: none; background: #c8aa6e1a; }
.div-switch a.on { color: #010a13; background: linear-gradient(180deg, #f0e6d2, #c8aa6e); }
.chip.div-combat { background: #e8405722; color: #ff8a9a; border-color: #e8405766; }
.chip.div-gem { background: #0ac8b91a; color: var(--hex); border-color: #0ac8b955; }
/* first-visit division chooser */
.div-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; margin-top: 16px; }
.div-card { display: block; padding: 22px; color: var(--text); }
.div-card:hover { text-decoration: none; border-color: var(--gold); box-shadow: 0 0 18px rgba(200,170,110,.25); }
.div-card h2 { margin: 0 0 8px; color: var(--gold); }
.div-card p { margin: 0 0 12px; }
.combat-box { margin: 12px 0; }
.combat-box td, .combat-box th { text-align: center; }
/* phones: the bot profile stacks its emblem above the name instead of squeezing the stats into a narrow column */
@media (max-width: 480px) {
  .profile { grid-template-columns: 1fr; gap: 10px; padding: 14px; } .profile .pe { width: 72px; height: 72px; }
}