:root {
  --page:#f6f6f3; --surface:#fdfdfc; --surface2:#f0efea;
  --ink:#14140f; --ink2:#5a584f; --muted:#8f8c82;
  --grid:#e4e2da; --base:#cbc9bf; --border:rgba(20,20,15,.10);
  --track:#eceae2; --shadow:0 6px 22px rgba(0,0,0,.10);
  --accent:#e0a400;                 /* overridden per game */
  --bar:var(--bar-l);
}
@media (prefers-color-scheme:dark){
  :root{ --page:#0e0e0d; --surface:#1a1a18; --surface2:#212120;
    --ink:#f7f7f2; --ink2:#b8b6ac; --muted:#84827a;
    --grid:#2a2a27; --base:#3a3a36; --border:rgba(255,255,255,.10);
    --track:#242422; --shadow:0 10px 30px rgba(0,0,0,.45); --bar:var(--bar-d); }
}
:root[data-theme=light]{ --page:#f6f6f3; --surface:#fdfdfc; --surface2:#f0efea; --ink:#14140f; --ink2:#5a584f; --muted:#8f8c82; --grid:#e4e2da; --base:#cbc9bf; --border:rgba(20,20,15,.10); --track:#eceae2; --bar:var(--bar-l); }
:root[data-theme=dark]{ --page:#0e0e0d; --surface:#1a1a18; --surface2:#212120; --ink:#f7f7f2; --ink2:#b8b6ac; --muted:#84827a; --grid:#2a2a27; --base:#3a3a36; --border:rgba(255,255,255,.10); --track:#242422; --shadow:0 10px 30px rgba(0,0,0,.45); --bar:var(--bar-d); }

*{box-sizing:border-box}
html,body{margin:0}
body{ background:var(--page); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.45;
  -webkit-font-smoothing:antialiased; }
.wrap{max-width:1120px; margin:0 auto; padding:26px clamp(14px,3vw,34px) 60px}
a{color:inherit}
/* the hidden attribute must win over class display rules (.modal/.controls set display) */
[hidden]{display:none !important}

/* header */
.site-hd{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 22px; margin-bottom:20px}
.site-hd h1{font-size:clamp(21px,2.7vw,30px); margin:0; letter-spacing:-.025em; font-weight:800}
.site-hd h1 .accent{color:var(--accent)}
.site-hd p{margin:3px 0 0; color:var(--ink2); font-size:13.5px; max-width:64ch}
.hd-side{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:9px}
.updated{font-size:11.5px; color:var(--muted); text-align:right; white-space:nowrap}
.themebtn{width:34px; height:34px; border:1px solid var(--border); background:var(--surface); color:var(--ink2);
  border-radius:9px; cursor:pointer; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:transform .12s,border-color .12s,color .12s}
.themebtn:hover{transform:translateY(-1px); border-color:var(--accent); color:var(--accent)}

/* game tabs */
.tabsrow{display:flex; gap:8px; align-items:flex-start; padding-top:4px}
.tabsbtn{flex:0 0 auto; white-space:nowrap}
.tabs{display:flex; flex-wrap:wrap; gap:8px; flex:1; min-width:0}
.tabs.collapsed{flex-wrap:nowrap; overflow:hidden}
.datanote{margin:8px 0 0; font-size:11.5px; color:var(--muted)}
.datanote b{color:var(--ink2)}
.tabs-scroll-legacy{overflow-x:auto; padding:4px 0 10px; margin-bottom:8px; scrollbar-width:thin}
.tab{flex:0 0 auto; display:flex; flex-direction:column; gap:1px; align-items:flex-start;
  border:1px solid var(--border); background:var(--surface); color:var(--ink2);
  border-radius:12px; padding:9px 15px; cursor:pointer; font:inherit; transition:transform .12s,border-color .12s}
.tab:hover{transform:translateY(-1px)}
.tab .g{font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap}
.tab .t{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.tab.on{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.tab.on .g{color:var(--accent)}

/* stat tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px; margin:14px 0 18px}
.tile{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 15px; display:flex; flex-direction:column; gap:2px}
.tile .l{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.tile .v{font-size:22px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.tile .n{font-size:12px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile .spark{width:100%; height:26px; margin-top:4px}
.tile .spark path{fill:none; stroke:var(--accent); stroke-width:1.5; vector-effect:non-scaling-stroke}

/* controls */
.controls{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.seg{display:inline-flex; background:var(--track); border:1px solid var(--border); border-radius:10px; padding:3px}
.seg button{border:0; background:transparent; color:var(--ink2); font:inherit; font-size:13px; font-weight:650; padding:6px 15px; border-radius:7px; cursor:pointer}
.seg button.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.16)}
.ghost{border:1px solid var(--border); background:transparent; color:var(--ink2); font:inherit; font-size:13px; font-weight:650; padding:7px 13px; border-radius:9px; cursor:pointer}
.ghost.on{color:var(--accent); border-color:var(--accent)}
.brk{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink2); font-weight:600}
.brk select{font:inherit; font-size:12.5px; font-weight:600; color:var(--ink); background:var(--surface);
  border:1px solid var(--border); border-radius:8px; padding:6px 8px; cursor:pointer}
.gctrls{margin-top:-4px}
.glabel{font-size:12px; color:var(--muted); font-weight:600}
.gctrls .seg button{padding:5px 11px; font-size:12.5px}
.chk{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink2); font-weight:600; cursor:pointer}
.chk input{accent-color:var(--accent); cursor:pointer}
.hint{font-size:12px; color:var(--muted); margin-left:auto}

/* chart */
.chartwrap{overflow-x:auto}
.chart{min-width:620px; position:relative; padding-top:8px}
.axis{position:absolute; top:0; bottom:0; width:1px; background:var(--grid); pointer-events:none}
.axis span{position:absolute; top:-3px; left:5px; font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.yhead{font-size:11px; font-weight:800; color:var(--muted); letter-spacing:.08em; margin:16px 0 5px; text-transform:uppercase; position:relative; z-index:1}
.row{display:grid; grid-template-columns:30px 46px 1fr; align-items:center; gap:11px; padding:5px 0; position:relative; z-index:1; cursor:pointer}
.row:hover .nm b{text-decoration:underline; text-decoration-color:var(--av-ring); text-underline-offset:2px}
.row:hover .barfill{filter:brightness(1.10)}
.rk{font-size:12px; font-weight:800; color:var(--muted); text-align:center; font-variant-numeric:tabular-nums}
.rk.m1{color:#e0a400}.rk.m2{color:#9aa2ad}.rk.m3{color:#c08040}
.av{position:relative; width:44px; height:44px}
.av img{width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--track);
  box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--av-ring,var(--accent))}
.av img.artav{object-position:50% 18%}   /* banner splash: frame the character, not the sky */
.av .mono{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;color:#fff;background:var(--av-ring,var(--accent));
  box-shadow:0 0 0 2px var(--surface)}
.av img.extra{position:absolute; width:24px; height:24px; bottom:-4px; right:-11px; box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--av-ring,var(--accent))}
.av img.extra.e2{right:-23px; opacity:.96}
.meta{min-width:0}
.nm{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; line-height:1.2}
.nm b{font-size:14px; letter-spacing:-.01em}
.nm .en{font-size:11.5px; color:var(--muted)}
.rr{font-size:9.5px; font-weight:700; letter-spacing:.03em; color:var(--muted); border:1px solid var(--border);
  border-radius:5px; padding:1px 4px; text-transform:uppercase; white-space:nowrap}
.barline{display:flex; align-items:center; gap:9px; margin-top:4px}
.track{position:relative; flex:1; height:15px; background:var(--track); border-radius:8px; overflow:hidden}
/* NB: reference --bar-l/--bar-d (set on .row) directly here — a :root-level
   `--bar:var(--bar-l)` resolves against :root, where --bar-l is undefined. */
.barfill{position:absolute; left:0; top:0; bottom:0; background:var(--bar-l); border-radius:0 5px 5px 0;
  min-width:3px; animation:barGrow .6s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-color-scheme:dark){ .barfill{background:var(--bar-d)} }
:root[data-theme=light] .barfill{background:var(--bar-l)}
:root[data-theme=dark]  .barfill{background:var(--bar-d)}
@keyframes barGrow{from{width:0}}
.val{font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
.val small{font-weight:500; color:var(--ink2); font-size:11px}
/* portion of a bar earned while sharing the day's revenue with another banner */
.barfill .shared{position:absolute; right:0; top:0; bottom:0; z-index:1;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.65);
  background-image:repeating-linear-gradient(-45deg, rgba(0,0,0,.30) 0 2px, rgba(255,255,255,.16) 2px 6px)}
/* synthetic 'unlisted revenue' entries (game-i monthly minus listed banners) */
.av .mono.syn{background:var(--muted); font-size:19px}
.synrow .nm b{color:var(--ink2); font-weight:750}
.synrow .barfill{background-image:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(127,127,127,.32) 5px 10px)}
.bm-art.syn{display:flex; align-items:center; justify-content:center; background:var(--track);
  color:var(--muted); font-size:26px; font-weight:700; border-color:var(--base); border-style:dashed}
.gsvg .syndot{fill:var(--muted)}

/* tooltip */
.tip{position:fixed; z-index:60; pointer-events:none; background:var(--surface); color:var(--ink);
  border:1px solid var(--base); border-radius:12px; padding:0; box-shadow:var(--shadow); max-width:270px; overflow:hidden}
#bmTip{z-index:120}    /* above the banner modal (z-index 100) */
.tip img.art{display:block; width:100%; height:120px; object-fit:cover; background:var(--track)}
.tip .body{padding:10px 12px; font-size:12.5px}
.tip h4{margin:0 0 3px; font-size:14px; display:flex; align-items:center; gap:7px}
.tip .dot{width:9px; height:9px; border-radius:50%; flex:none}
.tip dl{margin:6px 0 0; display:grid; grid-template-columns:auto 1fr; gap:2px 12px}
.tip dt{color:var(--muted)} .tip dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}
.tip .tiphint{margin-top:8px; padding-top:7px; border-top:1px solid var(--border); color:var(--accent); font-size:11px; font-weight:700}

/* table */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:12.5px; margin-top:4px}
th,td{padding:6px 10px; border-bottom:1px solid var(--grid); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
th{color:var(--muted); font-weight:650; position:sticky; top:0; background:var(--page)}
td.l,th.l{text-align:left}
tr.clk{cursor:pointer} tr.clk:hover td{background:var(--track)}

/* graph view (small multiples, one per year) */
.gyear{margin-bottom:18px}
.gyear .yhead{margin:14px 0 2px}
.gsvg{width:100%; height:auto; display:block; overflow:visible}
.gsvg .grid{stroke:var(--grid); stroke-width:1}
.gsvg .axislbl{fill:var(--muted); font-size:10px; font-family:system-ui,sans-serif}
.gsvg .area{fill:var(--accent); opacity:.13}
.gsvg .line{fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; opacity:.55}
.gsvg .dot{stroke:var(--surface); stroke-width:2; cursor:pointer; transition:r .12s}
.gsvg .dot:hover{r:7}
.gsvg image{cursor:pointer}
.gsvg .gring{stroke-width:2.5; paint-order:stroke; cursor:pointer}
/* by-year breakdown view */
.yr-head{font-size:12.5px; color:var(--ink2); margin:2px 0 4px}
.yr-note{font-size:11.5px; color:var(--muted); margin:0 0 12px}
.yr-row{display:grid; grid-template-columns:60px 1fr; gap:14px; align-items:center; padding:12px 0; border-top:1px solid var(--grid)}
.yr-row:first-of-type{border-top:0}
.yr-y{font-size:21px; font-weight:800; letter-spacing:-.02em; display:flex; flex-direction:column; line-height:1.1}
.yr-prog{font-size:8.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:2px}
.yr-body{min-width:0}
.yr-line{display:flex; align-items:baseline; gap:6px 13px; flex-wrap:wrap; margin-bottom:7px}
.yr-v{font-size:17px; font-weight:800; font-variant-numeric:tabular-nums}
.yr-pct{font-size:12px; color:var(--muted)}
.yr-yoy{font-size:12px; font-weight:750; margin-left:auto; font-variant-numeric:tabular-nums; white-space:nowrap}
.yr-yoy.up{color:#1f9d57} .yr-yoy.down{color:#d64b45} .yr-yoy.flat{color:var(--muted); font-weight:600}
@media (prefers-color-scheme:dark){ .yr-yoy.up{color:#46c684} .yr-yoy.down{color:#f0736c} }
:root[data-theme=dark] .yr-yoy.up{color:#46c684} :root[data-theme=dark] .yr-yoy.down{color:#f0736c}
.yr-track{height:15px; background:var(--track); border-radius:8px; overflow:hidden}
.yr-fill{height:100%; background:var(--accent); border-radius:0 6px 6px 0; min-width:3px;
  animation:barGrow .6s cubic-bezier(.2,.7,.2,1) both}

/* by-month view (game-i monthly revenue vs banners active that month) */
.mo-row{display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:start; padding:9px 0; border-top:1px solid var(--grid)}
.mo-row:first-of-type{border-top:0}
.mo-m{font-size:13px; font-weight:800; color:var(--muted); padding-top:1px}
.mo-body{min-width:0}
.mo-line{display:flex; align-items:baseline; gap:8px 12px; flex-wrap:wrap; margin-bottom:6px}
.mo-v{font-size:16px; font-weight:800; font-variant-numeric:tabular-nums}
.mo-match{font-size:11.5px; font-weight:650; font-variant-numeric:tabular-nums}
.mo-match.ok{color:var(--muted)} .mo-match.off{color:#d64b45}
@media (prefers-color-scheme:dark){ .mo-match.off{color:#f0736c} }
:root[data-theme=dark] .mo-match.off{color:#f0736c}
.mo-x{font-size:11px; color:var(--muted); font-style:italic}
.mo-banners{display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:6px; font-size:11.5px; color:var(--ink2)}
.mo-b{cursor:pointer; white-space:nowrap}
.mo-b:hover{text-decoration:underline; text-underline-offset:2px}
.mo-bv{color:var(--muted); font-variant-numeric:tabular-nums}
.mo-more{color:var(--muted); font-size:11px}
.mo-of{color:var(--muted); font-size:10.5px; font-style:italic}
.mo-warn{font-size:12px; color:var(--ink2); background:var(--surface2); border:1px solid var(--border);
  border-left:3px solid #d9a441; border-radius:8px; padding:9px 12px; margin:0 0 12px; line-height:1.5}
.mo-warn b{color:var(--ink)}

/* info button + methodology modal */
.infolink{border:0; background:none; color:var(--accent); font:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px; white-space:nowrap}
.modal{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); padding:20px; overflow-y:auto}
.modal-card{position:relative; background:var(--surface); border:1px solid var(--base); border-radius:16px;
  max-width:560px; width:100%; padding:26px clamp(18px,4vw,32px); box-shadow:var(--shadow); margin:auto;
  max-height:min(86vh,760px); overflow-y:auto; overscroll-behavior:contain}
.modal-card ul{margin:4px 0 0; padding-left:20px; font-size:13.5px; color:var(--ink2); line-height:1.55}
.modal-card li{margin:3px 0}
.modal-card li b{color:var(--ink)}
.modal-close{position:absolute; top:12px; right:14px; border:0; background:none; color:var(--muted);
  font-size:26px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:8px}
.modal-close:hover{color:var(--ink); background:var(--track)}
.modal-card h2{margin:0 0 4px; font-size:21px; letter-spacing:-.02em}
.modal-sub{margin:0 0 14px; color:var(--muted); font-size:13px}
.modal-note{margin:0 0 4px !important; font-size:12.5px !important; color:var(--muted) !important;
  background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:10px 12px}
.modal-card h3{margin:16px 0 4px; font-size:13.5px; color:var(--accent); letter-spacing:.01em}
.modal-card p{margin:0; font-size:13.5px; color:var(--ink2); line-height:1.55}
.modal-card p b{color:var(--ink)}
.modal-src{margin-top:18px !important; font-size:11.5px !important; color:var(--muted) !important}
.hd-feedback{margin:7px 0 0; font-size:12px; color:var(--muted)}
.hd-feedback a{color:var(--accent); font-weight:600}

/* banner detail modal */
.bmodal{max-width:660px}
.bm-hero{margin:0 0 15px}
.bm-hero img{width:100%; height:auto; max-height:300px; object-fit:cover; border-radius:12px; display:block; border:1px solid var(--border)}
.bm-herobar{margin-top:11px}
.bm-head{display:flex; gap:14px; align-items:center; margin:2px 34px 16px 0}
.bm-art{width:96px; height:60px; object-fit:cover; border-radius:9px; border:2px solid var(--av-ring); flex:none; background:var(--track)}
.bm-art.sq{width:64px; height:64px; border-radius:50%}
.bm-htext h2,.bm-herobar h2{margin:0; font-size:20px; letter-spacing:-.02em; line-height:1.2; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.bm-herobar h2 .rr,.bm-htext h2 .rr{font-size:11px}
.bm-live{font-size:10.5px; font-weight:800; letter-spacing:.03em; color:#fff; background:var(--av-ring); padding:2px 9px; border-radius:999px; text-transform:uppercase}
.bm-sub{color:var(--muted); font-size:12.5px; margin-top:3px}
.bm-period{color:var(--ink2); font-size:12px; margin-top:3px; font-variant-numeric:tabular-nums}
.bm-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; margin-bottom:6px}
.bm-stat{background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:8px 11px; display:flex; flex-direction:column; gap:1px}
.bm-stat .l{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.bm-stat .v{font-size:15px; font-weight:750; font-variant-numeric:tabular-nums}
.bm-cap{font-size:12.5px; color:var(--ink2); margin:2px 0 6px} .bm-cap b{color:var(--ink)}
.bm-note{font-size:11.5px !important; color:var(--muted) !important; margin-top:8px !important; line-height:1.5}
.rcsvg{width:100%; height:auto; display:block; overflow:visible; margin-top:2px}
.rcsvg .grid{stroke:var(--grid); stroke-width:1}
.rcsvg .axislbl{fill:var(--muted); font-size:10px; font-family:system-ui,sans-serif}
.rcsvg .rc-line{fill:none; stroke:var(--acc); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round}
.rcsvg .rc-dot{fill:var(--acc); stroke:var(--surface); stroke-width:1.5}
.rcsvg .rc-peak{fill:var(--surface); stroke:var(--acc); stroke-width:2.5}
.rcsvg .rc-peaklbl{fill:var(--ink); font-size:10.5px; font-weight:700; font-family:system-ui,sans-serif}
.rcsvg .bu-bar{fill:var(--acc); opacity:.30}
.rcsvg .bu-bar.shr{fill:var(--muted); opacity:.55}   /* days whose revenue was split with a concurrent banner */
.rcsvg .bu-line{fill:none; stroke:var(--acc); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round}
.rcsvg .rc-hit{fill:transparent; cursor:pointer}
.rcsvg .rc-hit:hover{fill:var(--acc); fill-opacity:.18}
.bm-share3{grid-template-columns:1fr 1fr 1fr; margin-top:2px}
.bm-share3 .bm-stat.sum{border-color:var(--accent)}
.bm-share3 .bm-stat.sum .v{color:var(--accent)}
.bm-recon{border-left:2px solid var(--accent); padding-left:9px !important}
.bm-tablewrap{max-height:230px; overflow-y:auto; margin-top:10px; border:1px solid var(--border); border-radius:10px}
.bm-table{font-size:12px; margin:0}
.bm-table th{position:sticky; top:0; background:var(--surface); z-index:1}
.bm-table td,.bm-table th{padding:5px 12px}
.bm-table .muted{color:var(--muted)}
.foot{margin-top:26px; font-size:11px; color:var(--muted); line-height:1.6}
.loading{padding:40px 0; text-align:center; color:var(--muted)}
.loading.err{line-height:1.7}
.loading.err button{margin-top:10px; padding:6px 22px; cursor:pointer}

/* ============================================================
   Mobile (≤640px). Everything here is inside this media query,
   so it layers on top only for narrow screens — the desktop
   layout above is completely unaffected.
   ============================================================ */
@media (max-width:640px){
  .wrap{padding:16px 12px 48px}

  /* header */
  .site-hd{gap:6px 16px; margin-bottom:14px}
  .site-hd p{font-size:12.5px}
  .updated{margin-left:0; width:100%; text-align:left; white-space:normal}

  /* stat tiles: two equal columns (minmax(0,…) lets the nowrap text ellipsize
     instead of forcing one column wider) */
  .tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin:12px 0 16px}
  .tile{padding:11px 13px; min-width:0}
  .tile .v{font-size:19px}

  /* controls: roomier tap targets, hint on its own line */
  .controls{gap:8px; margin-bottom:12px}
  .seg{flex-wrap:wrap}                    /* 5 view tabs wrap instead of overflowing */
  .seg button{padding:8px 14px}
  .ghost{padding:8px 13px}
  .hint{margin-left:0; width:100%; font-size:11.5px}

  /* timeline / ranking bars: fit the viewport (no forced 620px scroll) and drop
     the crowded repeating gridlines — each bar's value label is the scale. The
     avatar/rank shrink so the bar itself gets the width. */
  .chart{min-width:0}
  .axis{display:none}
  .row{grid-template-columns:22px 40px 1fr; gap:9px; padding:6px 0}
  .row + .row{border-top:1px solid var(--grid)}
  .av{width:40px; height:40px}
  .av img,.av .mono{width:40px; height:40px}
  .av img.extra{display:none}          /* secondary-unit pips clutter narrow rows */
  .rk{font-size:11px}
  .track{height:16px}
  .val{font-size:12.5px}
  .nm b{font-size:13.5px}
  .yhead{margin:15px 0 4px}

  /* graph: render larger and swipe sideways instead of a tiny strip */
  body[data-view=graph] .gsvg{min-width:560px}
  body[data-view=graph] #graphControls::after{
    content:"↔ swipe the chart sideways to see the whole year";
    flex-basis:100%; font-size:11px; color:var(--muted); margin-top:1px}

  /* modals: use nearly the full screen, bigger close target */
  .modal{padding:8px}
  .modal-card{padding:22px 15px; max-height:94vh; border-radius:14px}
  .modal-close{top:8px; right:8px; font-size:28px; padding:4px 10px}
  .bmodal{max-width:100%}
  .bm-head{margin-right:30px}
  .bm-herobar h2,.bm-htext h2{font-size:18px}
  .bm-stats{grid-template-columns:1fr 1fr}
  .bm-tablewrap{overflow-x:auto}
  .bm-table td,.bm-table th{padding:5px 9px}
}