/* Battle screen layout: LEFT = turn order + inspected unit, CENTER = top bar + map, RIGHT = active unit, moves, log. */
.battle {
  position: relative;
  display: flex; gap: 10px; height: 100vh; padding: 10px; max-width: 1900px; margin: 0 auto;
  background: var(--bg, #141a26); color: var(--text, #e8edf6);
}
.battle-left { flex: 0 0 214px; display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.battle-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.battle-side { flex: 0 0 322px; display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; overflow-y: auto; padding-right: 2px; }
.battle-canvas-wrap {
  position: relative; flex: 1 1 auto; min-height: 0; aspect-ratio: auto;
  background: #0d1220; border: 1px solid var(--line, #3a4864); border-radius: 10px; overflow: hidden;
}
/* The canvas fills its wrap; the renderer sizes the backing store (x devicePixelRatio) from this box. */
.battle-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  image-rendering: pixelated; cursor: pointer; touch-action: manipulation;
}
.battle-panel {
  background: var(--panel, #1f2838); border: 1px solid var(--line, #3a4864); border-radius: 10px; padding: 9px 11px;
}
.battle-panel h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted, #97a3ba); }
.battle-log { flex: 1 1 auto; min-height: 120px; overflow: auto; font-size: 13px; line-height: 1.45; }
.battle-log p { margin: 0 0 3px; }

/* ================================================================================================
   Battle screen (src/ui/battle.js) and battle setup (src/ui/battlesetup.js)
   ================================================================================================ */
.battle { --s0:#5aa0ff; --s1:#ff6a60; }
.battle * { scrollbar-width: thin; scrollbar-color: #3a4864 transparent; }
.battle .pt { image-rendering: pixelated; display: block; flex: none; width: 28px; height: 28px; }
.battle .pt.md { width: 40px; height: 40px; }
.battle .pt.lg { width: 64px; height: 64px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 1px; }
.battle b.n0 { color: var(--s0); }
.battle b.n1 { color: var(--s1); }
.battle kbd { font: 600 10px/1 ui-monospace, Menlo, Consolas, monospace; padding: 2px 4px; margin-left: 4px; border: 1px solid #ffffff30; border-radius: 4px; background: #0003; color: inherit; opacity: .8; }

/* top bar: team trackers + tools */
.bt-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.bt-speed { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.bt-speed select { padding: 2px 4px; font-size: 12px; }
.bt-quit { padding: 4px 10px; font-size: 12px; }
.bt-quit.armed { background: #7a2a2e; border-color: #ff6a60; }

/* canvas overlays */
.pv-layer, .bt-hint, .bt-flash, .bt-overlay { position: absolute; }
.pv-layer { inset: 0; pointer-events: none; overflow: hidden; }
.bt-hint { bottom: 10px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 6px 14px; border-radius: 999px; font-size: 13px; text-align: center;
  background: rgba(12,16,28,.82); border: 1px solid #ffffff22; box-shadow: 0 2px 10px #0006; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 3; }
.bt-hint b { color: var(--accent); }
.bt-flash { left: 0; right: 0; top: 14%; text-align: center; font-size: clamp(22px, 3.4vw, 44px); font-weight: 800; letter-spacing: 1px; pointer-events: none; opacity: 0;
  text-shadow: 0 2px 0 #000a, 0 0 14px #000a; z-index: 4; }
.bt-flash.show { animation: btflash 1.4s ease-out; }
@keyframes btflash { 0% { opacity: 0; transform: translateY(8px) scale(.95); } 12% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.bt-overlay { inset: 0; display: grid; place-items: center; background: rgba(8,12,24,.62); z-index: 6; backdrop-filter: blur(2px); }
.bt-overlay[hidden] { display: none; }
.bt-loading { font-size: 18px; color: var(--muted); }
.bt-result { text-align: center; padding: 26px 40px 24px; border-radius: 16px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 10px 40px #000a; min-width: 300px; }
.bt-result h2 { margin: 0 0 6px; font-size: 44px; letter-spacing: 2px; }
.bt-result.win { border-color: var(--accent); } .bt-result.win h2 { color: var(--accent); }
.bt-result.lose { border-color: #ef5b5b; } .bt-result.lose h2 { color: #ef5b5b; }
.bt-result p { margin: 4px 0; color: var(--muted); }
.bt-res-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.bt-res-btns button { padding: 8px 16px; font-size: 14px; }

/* damage preview labels */
.pv { position: absolute; transform: translate(-50%, -100%); text-align: center; padding: 3px 8px 4px; border-radius: 8px; background: rgba(14,18,32,.92);
  border: 1px solid #ffffff33; box-shadow: 0 2px 8px #0008; white-space: nowrap; line-height: 1.15; }
.pv b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; color: #ffd0c8; }
.pv small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .3px; color: #c4cde0; }
.pv .ko { display: inline-block; margin-top: 2px; font-style: normal; font-size: 10px; font-weight: 800; padding: 0 5px; border-radius: 4px; background: #ef3a3a; color: #fff; }
.pv.se { border-color: #ffb02e; } .pv.se b { color: #ffcf5a; } .pv.se small { color: #ffc766; }
.pv.nve { border-color: #6f8fe0; } .pv.nve b { color: #b8c9ff; } .pv.nve small { color: #9fb4f0; }
.pv.imm b { color: #aab3c6; }
.pv.ally { border-color: #5aa0ff; }

/* side panel */
.battle-panel { flex: none; }
.battle-panel h3 { display: flex; align-items: baseline; gap: 8px; }
.battle-panel h3 small { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--text); font-weight: 600; }
.bt-logpanel { flex: 1 1 140px; min-height: 130px; display: flex; flex-direction: column; }
.bt-logpanel .battle-log { flex: 1 1 0; min-height: 0; }
.battle-log p { padding: 1px 0 1px 8px; border-left: 2px solid transparent; }
.battle-log .l-round { color: var(--accent); font-weight: 700; margin-top: 6px; border-left-color: var(--accent); }
.battle-log .l-turn { color: var(--muted); font-size: 12px; }
.battle-log .l-dim, .battle-log .l-msg { color: var(--muted); }
.battle-log .l-move { border-left-color: #5fb3f9; }
.battle-log .l-dmg { color: #ffb0a5; }
.battle-log .l-dmg.se { color: #ffd16a; } .battle-log .l-dmg.nve { color: #a9bdf5; } .battle-log .l-dmg.ind { color: #e9a6c6; }
.battle-log .l-heal, .battle-log .l-up { color: #7fe39a; }
.battle-log .l-down { color: #ff9a9a; }
.battle-log .l-faint { color: #ff7a70; font-weight: 700; }
.battle-log .l-status { color: #d3b6ee; }
.battle-log .l-field { color: #8fd6e8; }
.battle-log .l-item, .battle-log .l-ability { color: #e8d49a; }
.battle-log .l-info { color: #cfe3ff; }
.battle-log .l-err { color: #ff8a80; }

.bf-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bf-round { font-weight: 800; letter-spacing: .5px; font-size: 15px; color: var(--accent); white-space: nowrap; }
.bf-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #2c3852; border: 1px solid #3a4864; white-space: nowrap; }
.chip em { font-style: normal; opacity: .75; margin-left: 2px; }
.chip.dim { color: var(--muted); background: transparent; font-weight: 500; }
.chip.w-rain { background: #1f3f78; border-color: #2f64c4; } .chip.w-sun { background: #7a4a14; border-color: #d98a24; }
.chip.w-sand { background: #6f5a2a; border-color: #b89a4a; } .chip.w-hail, .chip.w-snow { background: #1d5a6e; border-color: #4fc0dc; }
.chip.tr { background: #51307a; border-color: #8e5bd0; }
.chip.arena { background: #5a1622; border-color: #e0485e; }
.chip.n0 { border-color: #3d6db8; } .chip.n1 { border-color: #b8484a; }
.chip.st { color: #111; border: 0; } .chip.st-brn { background: #f2762b; } .chip.st-par { background: #f4d03a; } .chip.st-slp { background: #aab4d4; }
.chip.st-psn { background: #c070d0; color: #fff; } .chip.st-tox { background: #9a40c8; color: #fff; } .chip.st-frz { background: #7fe0ff; }
.chip.bo.up { background: #1f5a36; border-color: #3fae6a; } .chip.bo.dn { background: #6a2428; border-color: #c4484e; }
.chip.vol { background: #3a3358; border-color: #6a5cb0; }

.ts-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 5px; }
.ts-row { display: flex; gap: 2px; flex-wrap: wrap; }
.tc { position: relative; width: 25px; height: 25px; border-radius: 8px; background: var(--bg); border: 2px solid #3a4864; display: grid; place-items: center; }
.tc .pt { width: 24px; height: 24px; margin-top: -1px; }
.tc.s0 { border-color: #3d6db8; } .tc.s1 { border-color: #b8484a; }
.tc.done { opacity: .35; filter: grayscale(.6); }
.tc.cur { border-color: #ffe36a; box-shadow: 0 0 0 2px #ffe36a55, 0 0 10px #ffe36a66; transform: translateY(-2px); }
.tc.next::after { content: none; }

.uc { display: flex; gap: 10px; align-items: flex-start; }
.uc.s1 .pt.lg { border-color: #b8484a; } .uc.s0 .pt.lg { border-color: #3d6db8; }
.uc-main { flex: 1; min-width: 0; }
.uc-name { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 15px; }
.uc-hp { display: flex; align-items: center; gap: 8px; margin: 5px 0 4px; }
.uc-hp i { flex: 1; height: 9px; background: #0c111d; border-radius: 5px; overflow: hidden; border: 1px solid #ffffff1a; }
.uc-hp i b { display: block; height: 100%; border-radius: 4px; transition: width .3s; }
.uc-hp span { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 86px; text-align: right; }
.uc-meta { display: flex; gap: 4px 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.uc-meta b { color: var(--text); font-weight: 600; }
.uc-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.uc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 8px; }
.uc-stats .us { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; padding: 2px 6px; border-radius: 5px; background: var(--panel2); font-size: 11.5px; }
.uc-stats .us i { font-style: normal; color: var(--muted); }
.uc-stats .us b { font-weight: 700; font-variant-numeric: tabular-nums; }
.uc-stats .us.up b { color: var(--good); } .uc-stats .us.dn b { color: var(--bad); }
.uc-moves { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 11.5px; }
.uc-moves .um { display: flex; align-items: center; gap: 6px; }
.uc-moves .um em { margin-left: auto; font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.uc-moves .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.card-empty { color: var(--muted); font-size: 13px; padding: 8px 0 4px; }
.bt-card { min-height: 118px; }

.mv-list { display: flex; flex-direction: column; gap: 5px; }
.mv { display: grid; grid-template-columns: 18px 1fr auto auto; grid-template-areas: "key name type cat" "key meta meta meta"; gap: 1px 8px; align-items: center; text-align: left;
  padding: 6px 10px 6px 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; }
.mv:hover:not(.dis) { border-color: var(--accent); background: #31405c; }
.mv.sel { border-color: var(--accent); background: #3a3a2a; box-shadow: inset 3px 0 0 var(--accent); }
.mv.dis { opacity: .5; cursor: not-allowed; }
.mv-key { grid-area: key; font: 700 11px ui-monospace, Menlo, monospace; color: var(--muted); border: 1px solid #ffffff22; border-radius: 4px; text-align: center; padding: 2px 0; }
.mv-name { grid-area: name; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv .type { grid-area: type; }
.mv .cat { grid-area: cat; }
.mv-meta { grid-area: meta; display: flex; gap: 4px 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.mv-meta b { color: var(--text); font-weight: 600; }
.mv-meta .pp.low b { color: #ff9a8a; }
.mv-meta .why { color: #ff9a8a; flex-basis: 100%; }
.cat { font-size: 12px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; color: #fff; letter-spacing: .3px; }
.cat-Physical { background: #b94c25; } .cat-Special { background: #3a69cc; } .cat-Status { background: #6b7588; }
.mv-desc { font-size: 12px; color: var(--muted); min-height: 30px; margin: 6px 2px 0; line-height: 1.35; }
.act-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.act-row button { flex: 1 1 0; min-width: 78px; padding: 7px 10px; }
.act-row button.primary { flex: 2 1 0; }
.bt-moves { min-height: 120px; }
.dep-help { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

.dep-list { display: flex; flex-direction: column; gap: 4px; }
.dep-row { display: flex; align-items: center; gap: 10px; text-align: left; padding: 3px 10px 3px 4px; background: var(--panel2); }
.dep-row .dep-info { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; }
.dep-row small { flex-basis: 100%; color: var(--muted); font-size: 11.5px; }
.dep-row.placed small { color: var(--good); }
.dep-row.sel { border-color: var(--accent); background: #3a3a2a; }
.dep-n { font: 700 12px ui-monospace, monospace; color: var(--muted); }


/* ------------------------------- battle setup ------------------------------- */
.bs { max-width: 1180px; }
.bs-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.bs-top h2 { margin: 0; font-size: 24px; letter-spacing: .5px; }
.bs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.bs-col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 14px; min-width: 0; }
.bs-col h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.bs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 12px; }
.bs-card { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "faces faces" "name tag"; gap: 4px 6px; text-align: left; padding: 8px 10px; background: var(--panel2); border-radius: 10px; }
.bs-card.sel { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px #f2c14e33; background: #2f3a52; }
.bs-faces { grid-area: faces; display: flex; gap: 1px; }
.bs-cname { grid-area: name; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-ctag { grid-area: tag; font-size: 10px; color: var(--muted); text-transform: uppercase; align-self: center; letter-spacing: .5px; }
.bs-pt { image-rendering: pixelated; display: block; flex: none; width: 28px; height: 28px; }
.bs-pt.sm { width: 28px; height: 28px; }
.bs-pt.md { width: 44px; height: 44px; background: var(--bg); border-radius: 8px; border: 1px solid var(--line); }
.bs-q { width: 28px; height: 28px; display: grid; place-items: center; background: var(--bg); border-radius: 6px; color: #6b7894; font-weight: 800; }
.bs-prev-title { font-weight: 700; margin-bottom: 8px; font-size: 15px; }
.bs-prev-empty { color: var(--muted); font-size: 13px; padding: 12px 4px; line-height: 1.5; }
.bs-prev-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bs-prev-row { display: flex; gap: 8px; align-items: flex-start; padding: 6px; background: var(--bg); border-radius: 8px; min-width: 0; }
.bs-prev-info { min-width: 0; flex: 1; }
.bs-prev-name { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; }
.bs-prev-sub { font-size: 11px; color: var(--muted); margin: 1px 0 3px; }
.bs-prev-moves { display: flex; flex-wrap: wrap; gap: 3px; }
.bs-mv { font-size: 10.5px; padding: 1px 5px; background: var(--panel2); border-left: 3px solid #888; border-radius: 3px; }
.bs-bottom { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.bs-start { padding: 10px 28px; font-size: 17px; }
@media (max-width: 900px) { .bs-cols { grid-template-columns: 1fr; } .bs-prev-rows { grid-template-columns: 1fr; } }

/* ---- hotseat (Local 2 Players) ---- */
.bs.hot .bs-col.p0 { border-top: 3px solid #4d94ff; }
.bs.hot .bs-col.p1 { border-top: 3px solid #ff5a52; }
.bs.hot .bs-col h3 small { text-transform: none; letter-spacing: 0; margin-left: 6px; color: var(--muted); font-weight: 400; }
.bs-note { color: var(--muted); font-size: 13px; }
.bt-result.win.p0 { border-color: #4d94ff; } .bt-result.win.p0 h2 { color: #6fa8ff; }
.bt-result.win.p1 { border-color: #ff5a52; } .bt-result.win.p1 h2 { color: #ff7d76; }

/* ---- DOM overlay: Follow Me / Rage Powder, TRAP badge, swap / redirect previews ---- */
.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; transition: opacity .15s; }
.fx-svg { position: absolute; left: 0; top: 0; }
.fx-aura { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: fxpulse 1.6s ease-in-out infinite; }
.fx-aura.followme { background: radial-gradient(circle, rgba(255,214,120,.55) 0%, rgba(255,160,50,.30) 45%, rgba(255,140,40,0) 72%); }
.fx-aura.ragepowder { background: radial-gradient(circle, rgba(255,170,205,.55) 0%, rgba(255,90,150,.30) 45%, rgba(255,80,140,0) 72%); }
@keyframes fxpulse { 0%,100% { transform: scale(.88); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }
.fx-tag { position: absolute; transform: translateX(-50%); font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 0 5px; border-radius: 4px; color: #2a1600; background: #ffb347; white-space: nowrap; }
.fx-tag.ragepowder { background: #ff8fbd; color: #3a0a1e; }
.fx-tag.shot { background: #2a1d10; color: #ffd34d; border: 1px solid #ffd34d; }
.fx-trap { position: absolute; transform: translateX(-100%); font-size: 8.5px; font-weight: 800; letter-spacing: .5px; padding: 0 4px; border-radius: 3px; color: #fff; background: #5b2a8a; border: 1px solid #c9a2ff; box-shadow: 0 0 0 1px #0008; }
.fx-trap::before { content: "\26d3\fe0e "; }
.pv-swap { position: absolute; left: 0; top: 0; pointer-events: none; }
.pv.swapl b { color: #9fe6ff; font-size: 13px; }
.pv.redir-from { border-color: #ffb347; } .pv.redir-from small { color: #ffcf8a; font-size: 11px; }
.pv.redirected small.redir { color: #ffcf8a; }
.uc-trap { margin-top: 6px; font-size: 12px; color: #d9c2ff; } .uc-trap b { background: #5b2a8a; color: #fff; border-radius: 3px; padding: 0 4px; margin-right: 4px; font-size: 10px; }
.ts-sep { align-self: center; font-size: 9px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted, #97a3ba); margin: 0 3px 0 6px; }

/* ---- map picker, sound controls ---- */
.bs-maps { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.bs-maps-label { font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.bs-map { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px 5px; background: var(--panel); border: 2px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--text); font-size: 12px; }
.bs-map canvas { width: 76px; height: 76px; border-radius: 6px; image-rendering: pixelated; display: block; }
.bs-map.sel { border-color: var(--accent, #f4c542); box-shadow: 0 0 0 2px #f4c54233; }
.bt-snd { display: inline-flex; align-items: center; gap: 6px; }
.bt-mute { padding: 3px 9px; font-size: 12px; }
.bt-mute.off { color: var(--muted); }
.bt-vol { width: 70px; accent-color: var(--accent, #f4c542); }
.bt-extra { display: inline-flex; gap: 6px; align-items: center; }
.bt-extra button { padding: 3px 9px; font-size: 12px; }
.bt-extra button.sel { border-color: var(--accent, #f4c542); color: var(--accent, #f4c542); }

/* ---------- Online lobby ---------- */
.ol { display: flex; flex-direction: column; gap: 12px; padding: 16px; max-width: 980px; margin: 0 auto; overflow: auto; height: 100%; box-sizing: border-box; }
.ol-note { color: var(--muted); margin: 0; font-size: 13px; }
.ol-warn { color: var(--bad); }
.ol-body { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .ol-body { grid-template-columns: 1fr; } }
.ol-create, .ol-rooms { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.ol-create h3, .ol-rooms h3 { margin: 0 0 8px; font-size: 15px; }
.ol-create label { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.ol-create input, .ol-create select, .ol-pw { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px; }
.ol-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ol-msg, .ol-pwmsg { color: var(--bad); font-size: 12px; }
.ol-list { display: flex; flex-direction: column; gap: 8px; }
.ol-empty { color: var(--muted); margin: 6px 0; }
.ol-room { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.ol-main { display: flex; flex-direction: column; flex: 1 1 200px; gap: 2px; min-width: 0; }
.ol-meta { font-size: 12px; color: var(--muted); }
.ol-meta em { font-style: normal; font-weight: 600; }
.ol-meta .st-lobby { color: var(--accent2); }
.ol-meta .st-deploy { color: var(--accent); }
.ol-meta .st-battle { color: var(--good); }
.ol-meta .st-ended { color: var(--muted); }
.ol-lock { font-size: 13px; margin-left: 4px; }
.ol-lock small { font-size: 10px; color: var(--muted); margin-left: 3px; }
.ol-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ol-btns button, .ol-pwrow button { padding: 4px 10px; font-size: 12px; }
.ol-del { border-color: var(--bad) !important; color: var(--bad) !important; }
.ol-pwrow { flex: 1 1 100%; display: flex; gap: 6px; align-items: center; }
.ol-wait { margin: auto; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 40px 10px; }
.ol-waiting { color: var(--muted); animation: olpulse 1.6s ease-in-out infinite; }
@keyframes olpulse { 50% { opacity: .45; } }
.bt-room { font-size: 12px; color: var(--muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-spec { font-size: 11px; color: var(--muted); }
.bt-resign { border-color: var(--bad) !important; color: var(--bad) !important; }
.bt-tools { flex-wrap: wrap; }


/* ---- combat state, zones button, chips, help, facing step, crit preview ---- */
.bt-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.bt-zones, .bt-help-btn { padding: 3px 9px; font-size: 12px; }
.bt-zones.sel { background: #24406f; border-color: #4d94ff; color: #dcebff; }
.bt-help-btn { width: 26px; border-radius: 50%; padding: 3px 0; font-weight: 700; }
.battle-canvas-wrap { position: relative; }
.bt-help { position: absolute; top: 44px; right: 10px; z-index: 40; width: min(330px, calc(100% - 20px)); padding: 10px 14px; border-radius: 10px; background: #121a2cf2; border: 1px solid #4a5a7e;
  box-shadow: 0 8px 28px #000a; font-size: 12.5px; line-height: 1.45; }
.bt-help[hidden] { display: none; }
.bt-help b { color: var(--accent); } .bt-help p { margin: 6px 0 0; }
.chip.cb-in { background: #6a2428; border-color: #c4484e; } .chip.cb-out { background: #26334a; border-color: #4a5a7e; color: #b9c6e8; }
.chip.face { background: #2a3a55; }
.uc-stages { margin-top: 4px; }
.ts-flags { display: flex; gap: 6px; margin: 6px 0 2px; }
.chip.done { background: #333b4d; color: #97a3ba; text-decoration: line-through; text-decoration-color: #97a3ba66; }
.chip.ready { background: #1f4a36; border-color: #3fae6a; }
.face-row { display: flex; gap: 6px; margin: 8px 0; }
.face-row button { flex: 1; padding: 8px 4px; font-size: 14px; font-weight: 700; }
.face-row button.sel { background: #24406f; border-color: #6fa8ff; color: #fff; }
.pv.crit { border-color: #ff5d5d; box-shadow: 0 0 10px #ff5d5d99; }
.pv small.critl, .critl { color: #ff8a7a; font-weight: 800; }
.l-cb { color: #ffb3a8; font-size: 12px; } .l-cb.out { color: #9fb8e8; }
.l-dmg.crit { border-left: 2px solid #ff5d5d; padding-left: 4px; } .l-crit { color: #ff9a8a; font-weight: 600; }

/* ================================ 3-column layout (u3) ================================ */
.bt-top { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; flex: none; min-height: 34px; }
.bt-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.bt-tools { gap: 6px 8px; justify-content: flex-end; }
.bt-hint { z-index: 4; pointer-events: none; }

/* turn order (left column) */
.bt-order { flex: 1 1 auto; min-height: 120px; display: flex; flex-direction: column; overflow: hidden; }
.bt-order h3 { display: flex; justify-content: space-between; align-items: baseline; flex: none; }
.bt-order h3 small { text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--accent); font-weight: 700; }
.or-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 2px; }
.or { position: relative; display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px 4px; border-radius: 8px; background: var(--bg, #141a26); border: 1px solid var(--line, #3a4864); border-left: 4px solid #3d6db8; cursor: default; }
.or.s1 { border-left-color: #b8484a; }
.or .pt { width: 32px; height: 32px; margin: -2px 0; }
.or-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.or-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.or-tag { font-style: normal; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 0 4px; border-radius: 4px; background: #3a2226; color: #ff9a8f; }
.or-tag.n0 { background: #1f3358; color: #8fc5ff; }
.or-hp { display: flex; align-items: center; gap: 5px; }
.or-hp i { flex: 1; height: 5px; border-radius: 3px; background: #0c111d; overflow: hidden; border: 1px solid #00000066; }
.or-hp i b { display: block; height: 100%; }
.or-hp small { font-size: 10.5px; color: var(--muted, #97a3ba); font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
.or-hp.hide { font-size: 11px; color: var(--muted); font-style: italic; }
.or-st { display: flex; align-items: center; gap: 3px; flex: none; }
.or-st .chip { padding: 0 5px; font-size: 9.5px; text-transform: uppercase; }
.or-cb { width: 8px; height: 8px; border-radius: 50%; background: #ff5a52; box-shadow: 0 0 6px #ff5a52aa; }
.or.cur { border-color: #ffe36a; background: #2a2a1c; box-shadow: 0 0 0 1px #ffe36a66, 0 0 12px #ffe36a33; }
.or.cur::after { content: "▶"; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); font-size: 9px; color: #ffe36a; }
.or.done { opacity: .5; }
.or.hid { opacity: .55; border-style: dashed; }
.or.hid .pt { filter: grayscale(1) brightness(.6); }
.or.stl { border-style: dashed; }
.or-kos { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line, #3a4864); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.or-ko .pt { width: 22px; height: 22px; filter: grayscale(1); opacity: .5; }
.or-ko.s0 .pt { box-shadow: 0 2px 0 #3d6db8; } .or-ko.s1 .pt { box-shadow: 0 2px 0 #b8484a; }
.bt-inspect { flex: none; min-height: 150px; }
.bt-inspect .uc { gap: 8px; }
.bt-inspect .uc > .pt.lg { width: 46px; height: 46px; }
.bt-inspect .uc-name { font-size: 13.5px; gap: 3px 4px; }
.bt-inspect .uc-hp { margin: 4px 0 3px; gap: 6px; }
.bt-inspect .uc-hp span { min-width: 0; font-size: 11.5px; }
.bt-inspect .uc-meta { flex-direction: column; gap: 1px; font-size: 11.5px; }
.bt-inspect .uc-chips { margin-top: 6px; }
.bt-inspect .chip { font-size: 10.5px; padding: 1px 6px; }
.bf-round { font-size: 14px; }
.bt-top .chip { font-size: 11px; }
.bt-card .uc-hp span { min-width: 0; }

/* top-of-canvas move banner + event ticker */
.bt-banner { position: absolute; left: 50%; top: 12px; transform: translate(-50%, -14px); z-index: 7; pointer-events: none; opacity: 0; display: flex; align-items: baseline; gap: 10px;
  padding: 5px 20px 6px 14px; border-radius: 4px 14px 4px 14px; background: linear-gradient(100deg, #0b1020f2 0%, #1a2540f2 100%); border: 1px solid var(--bc, #9fa19f); border-left: 6px solid var(--bc, #9fa19f);
  box-shadow: 0 4px 18px #000a, 0 0 18px color-mix(in srgb, var(--bc, #9fa19f) 45%, transparent); white-space: nowrap; max-width: calc(100% - 24px); }
.bt-banner b { font-size: clamp(17px, 2vw, 26px); letter-spacing: .6px; color: #fff; text-shadow: 0 0 10px var(--bc, #fff), 0 2px 0 #000a; font-weight: 800; }
.bt-banner .bn-who { font-size: 12px; color: #c4cde0; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.bt-banner.show { animation: btbanner 1.3s ease-out; }
@keyframes btbanner { 0% { opacity: 0; transform: translate(-50%, -14px) scale(.96); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -4px); } }
.bt-flash { top: 22%; }
.bt-ticker { position: absolute; left: 10px; top: 10px; z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 3px; max-width: min(46%, 340px); }
.bt-ticker p { margin: 0; padding: 2px 8px; border-radius: 6px; font-size: 12px; line-height: 1.3; background: rgba(15,20,32,.85); color: #eef2fb; border-left: 3px solid #5fb3f9; text-shadow: 0 1px 0 #000a; transition: opacity 1.2s; animation: bttick .25s ease-out; }
.bt-ticker p.old { opacity: 0; }
.bt-ticker .l-dmg { border-left-color: #ff7a6a; } .bt-ticker .l-heal, .bt-ticker .l-up { border-left-color: #6aff8a; } .bt-ticker .l-down { border-left-color: #ff9a9a; }
.bt-ticker .l-status { border-left-color: #d3b6ee; } .bt-ticker .l-faint { border-left-color: #ff4a40; font-weight: 700; } .bt-ticker .l-field { border-left-color: #8fd6e8; } .bt-ticker .l-miss { border-left-color: #aab3c6; }
@keyframes bttick { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* misc new bits */
.pv small.hit { color: #ffd9a0; } .pv small.hit.low { color: #ffab7a; }
.battle-log .l-miss { color: #b7c0d4; } .battle-log .l-stealth { color: #c8d6ff; font-style: italic; }
.fx-stealth { position: absolute; transform: translateX(-50%); font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 0 6px; border-radius: 6px; background: #c8d6ff; color: #101a38; opacity: .92; }
.bt-help { top: 8px; }

/* ---- responsive: narrower columns, then stacked ---- */
@media (max-width: 1360px) {
  .battle { gap: 8px; padding: 8px; }
  .battle-left { flex-basis: 196px; }
  .battle-side { flex-basis: 304px; }
  .bt-vol { display: none; }
}
@media (max-width: 1000px) {
  .battle { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "main main" "side left"; height: auto; min-height: 100vh; align-items: start; }
  .battle-main { grid-area: main; }
  .battle-canvas-wrap { flex: none; width: 100%; aspect-ratio: 1 / 1; max-height: 78vh; }
  .battle-side { grid-area: side; overflow: visible; }
  .battle-left { grid-area: left; }
  .or-list { max-height: 320px; }
  .bt-logpanel { min-height: 200px; }
}
@media (max-width: 680px) {
  .battle { grid-template-columns: 1fr; grid-template-areas: "main" "side" "left"; }
  .bt-banner b { font-size: 16px; }
}
@media (max-height: 760px) and (min-width: 1001px) {
  .uc-chips { margin-top: 5px; }
  .mv { padding: 4px 10px 4px 8px; }
  .bt-card { min-height: 100px; }
}

/* log detail toggle (All / Actions) */
.bt-logpanel h3 { display: flex; justify-content: space-between; align-items: center; }
.log-mode { display: inline-flex; gap: 0; text-transform: none; letter-spacing: 0; }
.log-mode button { font-size: 12px; padding: 1px 9px; border-radius: 0; background: var(--panel2); color: var(--muted); }
.log-mode button:first-child { border-radius: 6px 0 0 6px; } .log-mode button:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.log-mode button.on { background: var(--accent); color: #1b1b1b; border-color: var(--accent); font-weight: 700; }
.battle-log.only-actions .l-cb, .battle-log.only-actions .l-turn { display: none; }
/* opponent team panel (deployment) */
.opp-row .or-main { gap: 2px; }
.opp-types { display: flex; gap: 3px; flex-wrap: wrap; }
/* deployment buttons: Start battle (primary) / Place N more (legible disabled) / Auto-place (secondary) / Clear (tertiary) */
.dep-actions .dep-btn-ok { flex: 2 1 100%; white-space: nowrap; font-size: 15px; padding: 9px 12px; font-weight: 700; }
.dep-actions .dep-btn-ok.wait, .dep-actions .dep-btn-ok:disabled { opacity: 1; background: #2c3852; color: #d6deee; border-color: #55648a; font-weight: 600; cursor: default; }
.dep-actions .dep-btn-auto { white-space: nowrap; flex: 1.6 1 0; min-width: 104px; background: #2f4f7f; border-color: var(--accent2); color: #fff; font-weight: 600; }
.dep-actions .dep-btn-clear { white-space: nowrap; flex: .6 1 0; min-width: 0; background: transparent; color: var(--muted); border-color: transparent; text-decoration: underline; }

/* ================================================================================================
   UX pass 3: camera markers, turn steps, back-arc tags, compare panel, turn-order rounds, field legend
   ================================================================================================ */
/* off-screen unit markers */
.edge-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.edge-mk { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border-radius: 50%; pointer-events: auto; cursor: pointer;
  background: rgba(12,16,28,.9); border: 2px solid #4d94ff; color: #4d94ff; box-shadow: 0 2px 8px #000a; }
.edge-mk.s1 { border-color: #ff5a52; color: #ff5a52; }
.edge-mk:hover, .edge-mk:focus-visible { background: #1d2740; outline: 2px solid #fff; outline-offset: 1px; }
.edge-mk .pt { width: 24px; height: 24px; margin: 1px; border-radius: 50%; }
.edge-mk .ar { position: absolute; inset: -7px; pointer-events: none; transform: rotate(var(--a, 0deg)); }
.edge-mk .ar::after { content: ""; position: absolute; right: -2px; top: 50%; margin-top: -5px; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.edge-mk b { position: absolute; right: -6px; bottom: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; box-sizing: border-box; font: 800 10px/14px ui-monospace, Menlo, Consolas, monospace;
  text-align: center; color: #fff; background: #0b0f1c; border: 1px solid currentColor; font-variant-numeric: tabular-nums; }
.edge-mk b:empty { display: none; }

/* turn steps */
.turn-steps { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: 12.5px; font-weight: 700; flex-wrap: wrap; }
.turn-steps em { font-style: normal; color: var(--muted); }
.turn-steps .step { padding: 2px 9px; border-radius: 999px; background: #232d42; border: 1px solid #3a4864; color: #aab6cd; white-space: nowrap; }
.turn-steps .step i { font-style: normal; margin-left: 2px; font-size: 13px; }
.turn-steps .step.done { background: #1f3a2e; border-color: #3fae6a; color: #bff3d2; }
.turn-steps .step.next, .turn-steps .step.cur { background: #3a3414; border-color: #ffe36a; color: #ffe9a0; box-shadow: 0 0 0 2px #ffe36a33; }
.turn-steps .step.next i { animation: stepPulse 1.2s ease-in-out infinite; }
@keyframes stepPulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .turn-steps .step.next i { animation: none; } }
.act-row button[data-act="wait"] kbd { margin-left: 6px; }

/* back-arc tag on a foe */
.pv.bk { transform: translate(-50%, -100%); padding: 2px 7px 3px; border-color: #ff5d5d; background: rgba(40,12,16,.92); pointer-events: none; }
.pv.bk small { font-size: 11px; font-weight: 800; }

/* compare panel */
.cmp { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 8px; font-size: 11px; }
.cmp th { white-space: nowrap; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; padding: 0 2px 3px; }
.cmp th:nth-child(n+2), .cmp td.ef, .cmp td.dm { text-align: right; }
.cmp td { padding: 3px 2px; border-top: 1px solid #ffffff12; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp td.mn { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cmp td.mn i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.cmp td.ef { font-weight: 800; padding-right: 4px; }
.cmp td.ef.se { color: #ffcf5a; } .cmp td.ef.nve { color: #9fb4f0; } .cmp td.ef.e0 { color: #8a94aa; }
.cmp td.dm b { color: #ffd0c8; } .cmp td .imm, .cmp td .unk { color: #8a94aa; }
.cmp td .ko { font-style: normal; font-size: 9px; font-weight: 800; padding: 0 4px; border-radius: 3px; background: #ef3a3a; color: #fff; }
.cmp tr.far td { opacity: .55; }
.cmp-pos { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.cmp-pos.back { color: #ffb0a6; padding: 3px 6px; border-radius: 6px; background: #3a1a1e; border: 1px solid #ff5d5d66; }
.cmp-pos.back b { color: #ff8a7a; }

/* turn order: team-tinted rows, round divider, acted marker */
.or { background-image: linear-gradient(90deg, rgba(77,148,255,.16), rgba(77,148,255,.05)); }
.or.s1 { background-image: linear-gradient(90deg, rgba(255,90,82,.20), rgba(255,90,82,.06)); }
.or.cur { background-image: none; }
.or.done { opacity: .55; }
.or-ck { font-style: normal; font-size: 11px; font-weight: 800; color: #7fe3a3; }
.or-div { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 2px 0 0; }
.or-div::before, .or-div::after { content: ""; flex: 1; height: 1px; background: #3a4864; }

/* field colour legend (help panel) */
.bt-legend { margin-top: 8px; padding-top: 6px; border-top: 1px solid #ffffff22; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.bt-legend > span { display: flex; align-items: center; gap: 7px; }
.bt-legend .lg { display: inline-block; flex: none; width: 18px; height: 12px; border-radius: 2px; box-sizing: border-box; }
.lg-move { background: rgba(120,238,255,.4); border: 1.5px solid #eeffff; }
.lg-zone { border: 1.5px dashed #d6cef4; background: transparent; }
.lg-hit { background: rgba(255,150,20,.55); border: 1.5px solid #ffec96; }
.lg-back { background: repeating-linear-gradient(135deg, rgba(255,90,80,.55) 0 2px, rgba(255,90,80,.1) 2px 5px); border: 1px dashed rgba(255,110,100,.8); }
.lg-dep { background: rgba(40,190,165,.3); border: 1.5px dashed #6ef0cd; }
.lg-ring { width: 18px; height: 9px !important; border-radius: 50% !important; background: transparent; }
.lg-ring.s0 { border: 2px solid #4d94ff; } .lg-ring.s1 { border: 2px solid #ff5a52; }

/* online room chat (players and spectators) */
.bt-chat { flex: 1 1 150px; min-height: 150px; display: flex; flex-direction: column; }
.bt-chat h3 { flex-wrap: wrap; }
.bt-chat .chat-hide { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.chat-log { flex: 1 1 0; min-height: 60px; overflow: auto; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.chat-log p { margin: 0 0 3px; padding: 1px 0 1px 8px; border-left: 2px solid transparent; }
.chat-log time { color: var(--muted, #97a3ba); font-size: 11px; font-variant-numeric: tabular-nums; }
.chat-m.s0 { border-left-color: var(--s0); } .chat-m.s0 b { color: var(--s0); }
.chat-m.s1 { border-left-color: var(--s1); } .chat-m.s1 b { color: var(--s1); }
.chat-m.spec { border-left-color: #8a93a8; } .chat-m.spec b { color: #c3cadb; }
.chat-m.me { background: rgba(255,255,255,.04); }
.chat-empty, .chat-sep { color: var(--muted, #97a3ba); font-size: 12px; }
.chat-sep { text-align: center; border-left: none !important; margin-top: 4px !important; }
.chat-form { display: flex; gap: 6px; margin-top: 6px; }
.chat-form input { flex: 1 1 auto; min-width: 0; }
.chat-note { color: #ffb3a8; font-size: 12px; min-height: 0; }
.chat-note:empty { display: none; }
.bt-ticker .l-chat { border-left-color: #c3cadb; background: rgba(28,32,48,.92); }
.bt-ticker .l-chat.s0 { border-left-color: var(--s0); } .bt-ticker .l-chat.s1 { border-left-color: var(--s1); }
/* online: game server lobby (src/ui/online.js, server mode) */
.ol-group { margin: 10px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.ol-group:first-child { margin-top: 0; }
.ol-group small { font-weight: 400; margin-left: 4px; }
.ol-who { font-size: 12px; color: var(--text); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ol-who small { color: var(--muted); }
.ol-who em { color: var(--accent2); font-style: normal; }
.ol-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .6; }
.ol-dot.on { background: var(--good); opacity: 1; }
.ol-create h3 + label { margin-top: 2px; }
.ol-create h3:not(:first-child) { margin-top: 14px; }
.ol-share { font-size: 12px; color: var(--muted); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.ol-share .ol-row { flex-wrap: nowrap; }
.ol-share code { color: var(--text); }
.ol-url { flex: 1 1 auto; min-width: 0; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 12px; }
.ol-share button { padding: 4px 10px; font-size: 12px; }
.bt-presence { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ol-share[hidden] { display: none; }
.pv small.scrl { color: #ffd27a; font-weight: 700; }
.nick-sp { font-size: 11px; font-weight: 400; color: var(--muted, #97a3ba); margin-left: 3px; }