/* The whole game is printed on one old sheet: two inks, real frames, no web boxes. */
:root, :root[data-sec] {
  --paper: #f0e4c3;
  --paper-2: rgba(120, 84, 30, 0.13);
  --paper-3: #f8efd6;
  --sheet: rgba(255, 251, 236, 0.5);
  --accent: #120b05;
  --accent-ink: #f8efd6;
  --ink: #120b05;
  --ink-2: #1f160c;
  --ink-3: #33271a;
  --rule: rgba(26, 18, 10, 0.5);
  --red: #a81c12;
  --green: #1a6a32;
  --gold: #a81c12;
  --gold-bg: rgba(222, 158, 30, 0.34);
  --head: 'Yeseva One', 'Times New Roman', serif;
  --deco: 'Ruslan Display', 'Yeseva One', serif;
  --cond: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --serif: 'Vollkorn', Georgia, serif;
  --sans: 'Vollkorn', Georgia, serif;
  --mono: 'Vollkorn', Georgia, serif;
}
/* each rubric has its own stock of paper and its own second ink, as old supplements did */
:root[data-sec="dash"], :root[data-sec="career"] { --accent: #9c1a10; }
:root[data-sec="bets"] { --paper: #ece7b4; --accent: #135a31; }
:root[data-sec="stocks"] { --paper: #f6d9b8; --accent: #8c1c10; }
:root[data-sec="crypto"] { --paper: #f6dc7c; }
:root[data-sec="team"], :root[data-sec="broker"], :root[data-sec="infra"] { --paper: #dfe6c8; --accent: #0d5850; }
:root[data-sec="rating"], :root[data-sec="shady"] { --paper: #efd9c6; --accent: #552174; }
:root[data-sec="profile"], :root[data-sec="skills"] { --paper: #f4e4bf; --accent: #94400f; }

* { font-synthesis: none; }
html, body { font: 15px/1.32 var(--serif); }
body { background: url(../img/age.png), url(../img/paper.png), var(--paper); }
::-webkit-scrollbar-thumb { border-color: transparent; background-clip: padding-box; }
.small { font-size: 13px; }

/* ---------- masthead and nav ---------- */
.mast { background: none; padding: 7px 18px 5px; }
.logo { font: 400 40px/1 var(--deco); letter-spacing: 0.01em; filter: url(#inkRough); }
.clock { font-size: 14px; border-left: 3px double var(--ink); }
.clock small { font-size: 13px; }
.speeds, .seg { border: 6px solid transparent; border-image: var(--o-ticket) 7 / 6px stretch; background: none; }
.speeds button, .seg button { border: 0; border-right: 1px solid var(--rule); background: none; font-family: var(--serif); }
.speeds button { padding: 1px 0; }
.seg button { padding: 0 9px; font-size: 14px; }
.speeds button:last-child, .seg button:last-child { border-right: 0; }
.speeds button.on, .seg button.on { background: var(--ink); color: var(--paper-3); }
.iconbtn { height: auto; border: 6px solid transparent; border-image: var(--o-ticket) 7 / 6px stretch; background: none; background-clip: padding-box; padding: 0 5px; font: italic 700 14px var(--serif); }
.iconbtn:hover { background-color: var(--ink); }
.kpi > .term, .kpi > label { font: italic 13px var(--serif); }
.kpi b { font: 700 16px var(--serif); }
.kpi.lead b { font: 400 25px/1 var(--head); }
.meter, .bar { border: 1px solid var(--ink); background: none; height: 8px; }
.nav { background: none; border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink); box-shadow: 0 2px 0 var(--paper), 0 3px 0 var(--ink); margin-bottom: 3px; }
.nav-main { padding: 0 12px; align-items: stretch; }
.nav-main > button { color: var(--ink); font: 400 16px/1.25 var(--deco); letter-spacing: 0.03em; padding: 3px 18px; position: relative; }
.nav-main > button + button::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; border-left: 1px solid var(--ink); }
.nav-main > button:hover { background: var(--paper-2); }
.nav-main > button.on { background: var(--ink); color: var(--paper-3); }
.navrank { color: var(--ink); font-size: 14px; }
.navrank b { font: 400 15px var(--head); }
.nav-sub { background: none; border-top: 1px solid var(--ink); min-height: 0; padding: 0 12px; }
.nav-sub button { color: var(--ink); opacity: 1; font: italic 700 15px var(--serif); padding: 2px 13px; position: relative; }
.nav-sub button + button::before { content: '✦'; position: absolute; left: -5px; top: 5px; font: normal 9px var(--serif); }
.nav-sub button:hover { background: var(--paper-2); }
.nav-sub button.on { background: none; color: var(--red); opacity: 1; text-decoration: underline double; text-underline-offset: 3px; }
.nav-sub button.locked { opacity: 0.55; }
.newdot { background: var(--red); box-shadow: none; }

/* ---------- rubric head ---------- */
.rubric { border-top: 0; border-bottom: 0; padding: 0 0 12px; margin-bottom: 12px; background: var(--o-swell) center bottom / 100% 10px no-repeat; }
.rubric .art { width: 84px; height: 68px; }
.rubric h1 { font: 400 48px/1 var(--head); filter: url(#inkRough); }
.rubric p { font: italic 16px var(--serif); }
.tabloid-title { font: 400 50px/1 var(--head); }

/* ---------- blocks ---------- */
.panel > h2, .ph, .sheet > h2, .sheet > .ph { font: 400 15px/1.2 var(--deco); letter-spacing: 0.04em; text-transform: none; }
.panel > h2, .ph { background: var(--ink); color: var(--paper-3); border: 6px solid transparent; border-image: var(--o-ticket-fill) 7 / 7px stretch; background-clip: padding-box; padding: 0 7px; margin-bottom: 8px; }
.panel > h2::before, .ph > :first-child:not(.btn)::before { content: none; }
.panel > h2 { display: flex; align-items: center; gap: 8px; }
.panel > h2::before { content: ''; width: 20px; height: 14px; flex: none; background: var(--o-leaf-paper) center / contain no-repeat; }
.ph .num { font: 400 13px var(--serif); }
.ph .btn { color: var(--paper-3); border-image-source: var(--o-ticket); filter: invert(1) hue-rotate(180deg); color: var(--ink); }
.ph .term:hover { background: var(--paper-3); color: var(--ink); }
.sheet { background: var(--sheet); box-shadow: none; border: 14px solid transparent; border-image: var(--o-sign) 16 / 14px stretch; background-clip: padding-box; padding: 2px 4px 4px; }
.sheet > h2, .sheet > .ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: 0; border-image: none; color: var(--ink); margin: 0 0 8px; padding: 0 0 10px; font-size: 17px; background: var(--o-fleuron) center bottom / 150px 10px no-repeat; }
.sheet > h2 { justify-content: center; text-align: center; }
.sheet > h2 .term:hover, .sheet > .ph .term:hover { background: var(--ink); color: var(--paper-3); }
.sheet > .ph .btn, .sheet > h2 .btn { filter: none; color: var(--ink); border-image-source: var(--o-ticket); }
.sheet .panel > h2 { margin: 0 0 8px; padding: 0 7px; }
.inv { background: var(--ink); color: var(--paper-3); border: 3px double var(--paper-3); outline: 2px solid var(--ink); }
.statcard { background: none; border-left: 0; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); padding: 5px 2px; text-align: center; }
.stat { font: 400 25px/1.1 var(--head); }
.stat-l { font: italic 14px var(--serif); }
.hero, .heroblock .hero { font: 400 56px/1 var(--head); }
.heroblock .art { background: none; }
.herosub { font: italic 15px var(--serif); }
.cvwrap, .chartbar { background: var(--sheet); }
.dyn { background: none; border-color: var(--ink); border-width: 1px 0 3px; border-style: solid; border-bottom-style: double; }
.dyn small { font: italic 13px var(--serif); }
.dyn b { font: 700 15px var(--serif); }
.grid { gap: 14px 22px; }

/* ---------- tables ---------- */
th { font: italic 13px var(--serif); border-bottom: 1px solid var(--ink); }
thead th { box-shadow: 0 2px 0 var(--paper), 0 3px 0 var(--ink); }
td { border-bottom: 1px dotted var(--rule); }
tbody tr:nth-child(even) td { background: none; }
tr.pick:hover td, .movers tr:hover td, .pinrow:hover, .rep-row:hover { background: var(--paper-2); }
.sector td { background: none !important; color: var(--ink); font: 400 14px var(--deco); border-bottom: 3px double var(--ink); padding-top: 8px; }
.me-row td { background: var(--gold-bg) !important; }

/* ---------- controls: labels and tickets instead of boxes ---------- */
.btn, .odd, .oddbtn { background: none; border: 6px solid transparent; border-image: var(--o-ticket) 7 / 6px stretch; background-clip: padding-box; }
.btn { font: 700 15px/1.15 var(--serif); padding: 1px 8px; }
.btn.sm { font-size: 13.5px; padding: 0 4px; }
.btn:hover:not(:disabled), .odd:hover:not(:disabled), .oddbtn:hover:not(:disabled) { background-color: var(--ink); color: var(--paper-3); border-image-source: var(--o-ticket-fill); }
.btn:disabled { background: none; color: var(--ink-3); opacity: 0.6; }
.btn.primary, .btn.primary:disabled { background-color: var(--ink); color: var(--paper-3); border-image-source: var(--o-ticket-fill); font: 400 16px/1.25 var(--head); letter-spacing: 0.02em; padding: 2px 10px; }
.btn.primary.sm { font-size: 14px; padding: 0 6px; }
.btn.primary:hover:not(:disabled) { background-color: var(--red); border-image-source: var(--o-ticket-red); }
.btn.primary:disabled { opacity: 0.45; }
.btn.buy, .btn.sell { background: var(--ink); border-image-source: var(--o-ticket-fill); font: 400 17px/1.2 var(--head); text-transform: none; color: var(--paper-3); padding: 2px 10px; }
.btn.sell { background: var(--red); border-image-source: var(--o-ticket-red); }
.btn.buy:disabled, .btn.sell:disabled { background: none; color: var(--ink-3); border-image-source: var(--o-ticket); }
input.field { background: none; border: 0; border-bottom: 2px solid var(--ink); font: 700 18px var(--serif); padding: 2px 4px; }
input.field:focus { box-shadow: none; background: var(--sheet); }
.lab { font: italic 14px var(--serif); }
.formline { border-bottom: 1px dotted var(--rule); font-size: 14px; }
.formline > span:last-child { font-weight: 700; }
.term { border-bottom-style: dotted; }
.bar i, .meter i { background: var(--ink); }

/* ---------- matches ---------- */
.match { grid-template-columns: 62px minmax(120px, 1fr) minmax(190px, 270px); padding: 6px 4px; border-bottom: 1px solid var(--rule); }
.match .when { font: italic 13px/1.25 var(--serif); }
.match .lg { font: 400 11px var(--deco); }
.team b { font: 700 16px/1.25 var(--serif); }
.form { gap: 4px; }
.form i { width: 11px; height: 11px; border-radius: 50%; background: none; border: 2px solid var(--ink-3); }
.form i.W { background: var(--green); border-color: var(--green); }
.form i.L { background: var(--red); border-color: var(--red); }
.odds { gap: 3px; }
.odd { padding: 0 2px; line-height: 1.05; min-width: 62px; }
.odd b { font: 800 23px/1 var(--cond); letter-spacing: 0.01em; }
.odd small { font: italic 12.5px/1.1 var(--serif); color: var(--ink-2); }
.odd.sel, .oddbtn.sel { background-color: var(--ink); color: var(--paper-3); border-image-source: var(--o-ticket-fill); }
.odd.value { background-color: rgba(39, 73, 31, 0.2); box-shadow: none; }
.oddbtn { font: 800 19px/1 var(--cond); padding: 0 6px; min-width: 64px; }
.oddbtn.best { background-color: var(--gold-bg); box-shadow: none; }
.match.open { background: var(--sheet); box-shadow: none; border: 18px solid transparent; border-image: var(--o-scroll) 44 / 24px stretch; background-clip: padding-box; margin: 6px 0; padding: 0 6px 4px; }
.detail { border-top: 0; background: var(--o-swell) center top / 100% 8px no-repeat; padding-top: 12px; }
.vs h4 { font: 400 19px var(--head); }
.vs > div + div { border-left: 3px double var(--ink); padding-left: 16px; }
.stline { font-size: 14px; border-bottom: 1px dotted var(--rule); }
.logline { font-size: 14px; grid-template-columns: 17px minmax(0, 1fr) 50px; }
.logline i { width: 11px; height: 11px; border-radius: 50%; background: none; border: 2px solid var(--ink-3); margin-top: 5px; }
.logline i.W { background: var(--green); border-color: var(--green); }
.logline i.L { background: var(--red); border-color: var(--red); }
.mkgrid th, .mkgrid td { padding: 1px 6px; }
.bookrow { border-bottom: 1px dotted var(--rule); }
.bookrow b { font: 400 15px var(--head); }
.bookrow.main { box-shadow: -4px 0 0 var(--gold-bg), 4px 0 0 var(--gold-bg); }
.leg { font-size: 14px; }
.need { background: none; border: 6px solid transparent; border-image: var(--o-beads) 12 / 8px round; padding: 3px; }
.need { flex-wrap: wrap; }
.need b { font: 400 15px/1.2 var(--head); }
.need > :not(.btn) { flex: 1 1 100%; }

/* my stake in a match, stamped in red over the listing */
.match.mine { background: var(--gold-bg); }
.match.mine.open { background: var(--gold-bg); background-clip: padding-box; }
.mystake { display: inline-block; color: var(--red); border: 2px solid var(--red); outline: 1px solid var(--red); outline-offset: 1px; padding: 0 6px; margin: 3px 0 2px 3px; font: 800 15px/1.2 var(--cond); letter-spacing: 0.03em; text-transform: uppercase; transform: rotate(-1deg); }
.odd.bet, .oddbtn.bet { background-color: var(--red); color: #f6ead0; border-image-source: var(--o-ticket-red); }
.odd.bet small { color: #f6ead0; }
.odd.bet:hover:not(:disabled), .oddbtn.bet:hover:not(:disabled) { background-color: var(--red); border-image-source: var(--o-ticket-red); }

/* live cards */
.live-rail { height: 244px; }
.live-card { background: var(--sheet); box-shadow: none; border: 12px solid transparent; border-image: var(--o-sign) 16 / 12px stretch; background-clip: padding-box; flex-basis: 310px; }
.live-card.mine { outline: 0; border-image-source: var(--o-scroll); border-image-slice: 44; border-image-width: 24px; background-color: var(--gold-bg); }
.board { background: var(--ink); color: var(--paper-3); padding: 2px 7px 3px; }
.board .lg { font: italic 13px var(--serif); color: inherit; }
.scoreline { min-height: 36px; }
.scoreline .nm { font: 700 14px/1.1 var(--serif); }
.score { font: 400 28px/1 var(--head); }
.liveflag { background: var(--red); font: 400 10px/1.2 var(--deco); padding: 1px 4px; }
.probbar { height: 5px; border: 1px solid var(--ink); background: none; }
.probbar .p1 { background: url(../img/paper.png), #c8b98e; }
.mybet { border-top: 1px solid var(--ink); }
.mybet .small { font-weight: 700; color: var(--red); }
.live-empty { border: 0; font: italic 17px var(--serif); background: none; }
.hrail { -webkit-mask-image: none; mask-image: none; }

/* ---------- feed ---------- */
.feed { background: none; border-left: 3px double var(--ink); }
.feed-head { background: none; color: var(--ink); border: 0; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); font: 400 14px/1.3 var(--deco); letter-spacing: 0.03em; padding: 2px 10px; }
.feed-sec:first-child .feed-head { border-top: 0; }
.feed-head:hover { background: var(--paper-2); }
.feed h2 { background: none; color: var(--ink); font: 400 14px var(--deco); }
.news { border-bottom: 1px dotted var(--ink); font: 14px/1.26 var(--serif); }
.news .meta { font: italic 12px var(--serif); }
.news .tag { font: 700 12px var(--serif); }
.news.mine { box-shadow: -12px 0 0 var(--gold-bg), 12px 0 0 var(--gold-bg); }
.news.mine .mineflag { font: 700 11px var(--serif); background: var(--red); color: #f6ead0; }
.dock-m { border-bottom: 1px dotted var(--ink); font-size: 14px; }
.dock-m.mine { box-shadow: -5px 0 0 var(--gold-bg), 5px 0 0 var(--gold-bg); }
.tape { background: var(--ink); color: var(--paper-3); font: 13px/26px var(--serif); }
.tape .up { color: #b9cf95; }
.tape .down { color: #e7a58c; }
.cal-head { font: 400 14px var(--deco); }
.cal-grid span { font-style: italic; font-size: 12px; }
.cal-d { background: none; font: 12px var(--serif); border: 1px dotted var(--rule); }
.cal-d.off { background: var(--o-hatch); }
.cal-d.today { background: var(--ink); }
.cal-ev { font-size: 13px; }

/* ---------- other blocks ---------- */
.bl { border-bottom: 1px dotted var(--rule); font-size: 14px; }
.coin, .upcard.card { background: none; }
.coin { background: var(--sheet); border: 12px solid transparent; border-image: var(--o-sign) 16 / 12px stretch; background-clip: padding-box; padding: 0 3px; }
.coin:hover { box-shadow: none; transform: none; background-color: var(--paper-2); }
.coin b { font: 400 18px var(--head); }
.coin small { font: italic 13px var(--serif); }
.coin .pr { font: 700 14px var(--serif); }
.coin.sel { background-color: var(--ink); border-image-source: var(--o-ticket-fill); border-image-slice: 7; border-image-width: 7px; }
.memecard { border: 3px double var(--paper-3); outline: 2px solid var(--ink); transform: none; }
.memecard:nth-child(even) { transform: none; }
.memecard:hover { transform: none; }
.memecard b { font: 400 23px/1 var(--head); }
.cartoon { background: none; border: 8px solid transparent; border-image: var(--o-rope) 12 / 8px round; }
.cartoon p { font: italic 15px/1.25 var(--serif); }
.contract .txt, .goal .txt { font: 700 14px/1.25 var(--serif); }
.reward { font: 700 15px var(--serif); }
.goal, .contract, .upcard { border-bottom: 1px dotted var(--ink); }
.upcard b { font: 400 16px var(--head); }
.scene, .alloc { border: 1px solid var(--ink); background: none; }
.tick { border: 1px solid var(--ink); border-radius: 50%; line-height: 16px; }
.chgoal b { font: 700 15px/1.25 var(--serif); }
.chgoal.done .tick { background: var(--ink); border-color: var(--ink); color: var(--paper-3); }
.clockchip { background: none; color: var(--red); font: 800 15px var(--cond); text-transform: uppercase; letter-spacing: 0.03em; border: 1px solid var(--red); padding: 0 5px; }
.clockchip.down { background: var(--red); color: #f6ead0; }
.rm { background: none; border: 0; border-bottom: 1px dotted var(--ink); }
.rm > span { background: none; border: 1px solid var(--ink); font: 700 14px var(--serif); }
.rm.done > span { background: var(--ink); color: var(--paper-3); }
.rm.now { border: 0; border-bottom: 3px double var(--red); }
.rm.now > span { background: var(--red); color: #f6ead0; border-color: var(--red); }
.rm b { font: 400 16px var(--head); text-transform: none; }
.person { background: none; border: 0; border-bottom: 1px dotted var(--ink); }
.person b { font: 400 16px var(--head); }
.person .role { color: var(--red); font: italic 700 14px var(--serif); }
.seats i { background: none; border-radius: 50%; }
.seats i.on { background: var(--ink); }
.teambar, .modeline { background: none; border: 8px solid transparent; border-image: var(--o-beads) 12 / 8px round; padding: 2px 4px; }
.issue { background: var(--sheet); border: 8px solid transparent; border-image: var(--o-rope) 12 / 8px round; background-clip: padding-box; }
.issue-top, .front-top { font: 400 13px var(--deco); }
.issue h3 { font: 400 25px/1.1 var(--head); text-transform: none; }
.issue-cols { font: 14px/1.35 var(--serif); column-rule: 1px solid var(--ink); }
.trophy { border: 1px dashed var(--ink-3); }
.trophy.got { border: 8px solid transparent; border-image: var(--o-beads) 12 / 8px round; background: none; transform: none; padding: 3px; }
.trophy b, .skill b, .br-head b, .mypos .hd, .modes button b, .bgcard b { font: 400 16px var(--head); text-transform: none; }
.skill { background: none; border: 1px solid var(--ink); }
.skill.owned { background: var(--ink); }
.mypos { background: var(--gold-bg); border: 8px solid transparent; border-image: var(--o-rope) 12 / 8px round; background-clip: padding-box; padding: 2px 6px; }
.assethead { font: 400 21px/1.1 var(--head); text-transform: none; }
.assethead span { font: italic 15px var(--serif); }
.assetprice { font: 400 30px/1.05 var(--head); }
.assetcell b { font: 700 14px var(--serif); }
.assetcell small { font: italic 13px var(--serif); }
.final { background: var(--red); color: #f6ead0; font: 400 10px var(--deco); }
.tag-chip { font: 700 11px var(--serif); }
.opens { background: var(--gold-bg); color: var(--ink); }
.stars { color: var(--ink); }

/* ---------- overlays ---------- */
.overlay { background: rgba(40, 26, 10, 0.62); }
.modal, .watch, .comic { background: url(../img/paper.png), #e9dcb7; box-shadow: 0 18px 50px rgba(20, 10, 0, 0.55); border: 18px solid transparent; border-image: var(--o-scroll) 44 / 24px stretch; }
.modal { padding: 6px 10px 10px; }
/* everything on the sheet is printed in the same ink; only the phone keeps its colours */
.ava, .crest { filter: saturate(0.8) contrast(1.05); }
.modal h2, .modal.front h2 { font: 400 32px/1.08 var(--head); text-transform: none; filter: url(#inkRough); }
.modal p, .modal ul { font-size: 16px; }
.modal .kicker { font: 400 13px var(--deco); color: var(--red); }
.watch-head { background: var(--ink); color: var(--paper-3); }
.watch-head .nm { font: 400 21px/1.1 var(--head); text-transform: none; }
.watch-score { font: 400 44px/1 var(--head); }
.watch-score small { font: italic 13px var(--serif); color: inherit; }
.watch-side { border-left: 3px double var(--ink); }
.comm div { font: 14px/1.3 var(--serif); }
.comm i { font: italic 12px var(--serif); }
#gtip { background: #efe2bf; color: var(--ink); border: 3px double var(--ink); box-shadow: 0 6px 18px rgba(30, 15, 0, 0.45); font: 14px/1.3 var(--serif); }
#gtip b { font: 400 16px var(--head); text-transform: none; }
.toast { background: #efe2bf; border: 1px solid var(--ink); border-left: 5px double var(--ink); box-shadow: 0 4px 12px rgba(30, 15, 0, 0.4); font: 14px var(--serif); }
.toast.pos { border-left-color: var(--green); }
.toast.neg { border-left-color: var(--red); }
.floater { background: #efe2bf; font: 400 19px var(--head); }
.stampmark { font-family: var(--head); background: rgba(239, 226, 191, 0.8); }
.stampmark small { font: 400 14px var(--deco); }
.stampmark b { font: 400 44px/1.05 var(--head); }

/* ---------- start ---------- */
.start h1 { font: 400 92px/1 var(--deco); text-transform: none; filter: url(#inkRough); }
.start .rule { font-size: 18px; }
.bgcard.on, .modes button.on { background: var(--ink); }
.bgcard:hover, .modes button:hover { background: var(--paper-2); }
.bgcard.on:hover, .modes button.on:hover { background: var(--ink); }

/* ---------- old advertisements at the foot of every page ---------- */
.clf-strip { margin-top: 20px; padding-top: 14px; background: var(--o-fleuron) center top / 220px 12px no-repeat; }
.clf-title { text-align: center; font: 400 15px var(--deco); letter-spacing: 0.05em; margin-bottom: 8px; }
.clf-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 12px; align-items: stretch; }
.clf { text-align: center; padding: 3px 6px; display: flex; flex-direction: column; justify-content: center; }
.clf.f-scroll { border: 18px solid transparent; border-image: var(--o-scroll) 44 / 24px stretch; }
.clf.f-sign { border: 14px solid transparent; border-image: var(--o-sign) 16 / 14px stretch; }
.clf.f-beads { border: 10px solid transparent; border-image: var(--o-beads) 12 / 10px round; }
.clf.f-rope { border: 10px solid transparent; border-image: var(--o-rope) 12 / 10px round; }
.clf.f-black { background: var(--ink); color: var(--paper-3); outline: 2px solid var(--ink); outline-offset: 2px; margin: 4px; padding: 10px 8px; }
.clf .k { font: italic 14px/1.15 var(--serif); }
.clf .t { font: 400 25px/1.05 var(--head); margin: 3px 0; }
.clf.g-cond .t { font: 900 39px/0.92 var(--cond); text-transform: uppercase; letter-spacing: 0.01em; }
.clf.g-deco .t { font: 400 25px/1.05 var(--deco); }
.clf .x { font: 14px/1.22 var(--serif); }
.clf .f { font: italic 700 13px/1.2 var(--serif); margin-top: 4px; }
.clf .art { width: 76px; height: 58px; margin: 0 auto 2px; }


/* ---------- depth: the page is one long sheet sliding under the pinned masthead and sidebar ---------- */
.main {
  background: linear-gradient(90deg, rgba(92, 56, 12, 0.2), transparent 22px, transparent calc(100% - 22px), rgba(92, 56, 12, 0.2)) scroll,
    url(../img/age.png) local, url(../img/paper.png) local, var(--paper);
}
.mast, .nav { position: relative; z-index: 3; background: url(../img/paper.png), var(--paper-3); }
.mast { box-shadow: none; }
.nav { margin-bottom: 0; box-shadow: 0 2px 0 var(--paper-3), 0 3px 0 var(--ink), 0 9px 12px rgba(50, 26, 0, 0.45); }
.feed { position: relative; z-index: 2; background: url(../img/paper.png), var(--paper-3); box-shadow: -7px 0 12px rgba(50, 26, 0, 0.35); }
.feed-list, .dock { background: url(../img/paper.png) local; }
.tape { position: relative; z-index: 3; box-shadow: 0 -7px 12px rgba(50, 26, 0, 0.4); }
.ph, .panel > h2 { color: var(--accent-ink); }
.panel > h2, .ph { background: var(--accent); border: 0; border-image: none; padding: 5px 13px; -webkit-mask: radial-gradient(circle 7px at 0 0, #0000 97%, #000) 0 0 / 51% 51% no-repeat, radial-gradient(circle 7px at 100% 0, #0000 97%, #000) 100% 0 / 51% 51% no-repeat, radial-gradient(circle 7px at 0 100%, #0000 97%, #000) 0 100% / 51% 51% no-repeat, radial-gradient(circle 7px at 100% 100%, #0000 97%, #000) 100% 100% / 51% 51% no-repeat; mask: radial-gradient(circle 7px at 0 0, #0000 97%, #000) 0 0 / 51% 51% no-repeat, radial-gradient(circle 7px at 100% 0, #0000 97%, #000) 100% 0 / 51% 51% no-repeat, radial-gradient(circle 7px at 0 100%, #0000 97%, #000) 0 100% / 51% 51% no-repeat, radial-gradient(circle 7px at 100% 100%, #0000 97%, #000) 100% 100% / 51% 51% no-repeat; }
.sheet > h2, .sheet > .ph { -webkit-mask: none; mask: none; color: var(--accent); padding: 0 0 10px; }
.nav-main > button.on { background: var(--accent); }
.rubric h1 { color: var(--accent); }
.panel > h2 .btn, .ph .btn { filter: none; color: var(--accent-ink); border: 1px solid var(--accent-ink); border-image: none; background: none; padding: 0 7px; }
.panel > h2 .btn:hover:not(:disabled), .ph .btn:hover:not(:disabled) { background: var(--accent-ink); color: var(--accent); }
.sheet > .ph .btn { color: var(--ink); border-color: var(--ink); }
.faint { color: var(--ink-3); }
.btn:disabled { opacity: 0.75; }
.small { font-size: 13.5px; }

/* ---------- opening manga: one big page, turned ---------- */
.overlay.manga { background: #0b0907; z-index: 45; padding: 0; perspective: 1800px; }
.mg-stage { width: min(96vw, calc((100vh - 74px) * 1.528)); display: flex; flex-direction: column; gap: 10px; }
.mpage { cursor: pointer; background: #f7f5ee; box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0, 0, 0, 0.8), inset 16px 0 22px -14px rgba(0, 0, 0, 0.35); transform-origin: left center; animation: pageTurn 0.6s cubic-bezier(0.2, 0.75, 0.25, 1); }
.mpage svg { display: block; width: 100%; height: auto; }
@keyframes pageTurn { from { transform: rotateY(-48deg) translateX(24px); opacity: 0; } 55% { opacity: 1; } }
.mg-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #f7f5ee; }
.mg-dots { display: flex; gap: 8px; }
.mg-dots i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #f7f5ee; }
.mg-dots i.on { background: #f7f5ee; }
.mg-btns { display: flex; align-items: center; gap: 14px; }
.mg-link { background: none; border: 0; color: #f7f5ee; font: 500 15px var(--serif); cursor: pointer; }
.mg-link:hover:not(:disabled) { text-decoration: underline; }
.mg-link:disabled { opacity: 0.35; cursor: default; }
.mg-next { background: #f7f5ee; color: #0b0907; border: 0; padding: 6px 18px; font: 400 17px var(--head); cursor: pointer; }
.mg-next:hover { background: #fff; }

/* ---------- ink: every filled thing is a brush stroke, not a box ---------- */
.btn, .odd, .oddbtn, .seg button, .speeds button, .nav-main > button, .cal-d.today, .panel > h2, .ph { position: relative; z-index: 0; }
.btn::after, .odd::after, .oddbtn::after, .seg button::after, .speeds button::after, .nav-main > button::after {
  content: ''; position: absolute; inset: -6px -8px; z-index: -1; pointer-events: none; background: var(--brush, var(--ink));
  -webkit-mask: url(../img/brush-btn.png) center / 100% 100% no-repeat; mask: url(../img/brush-btn.png) center / 100% 100% no-repeat;
  opacity: 0; transform: scaleX(0.55); transform-origin: left center; transition: opacity 0.1s, transform 0.2s var(--ease);
}
.odd::after, .oddbtn::after { inset: -7px -6px; -webkit-mask-image: url(../img/brush-blob.png); mask-image: url(../img/brush-blob.png); }
.btn, .btn:hover:not(:disabled), .odd:hover:not(:disabled), .oddbtn:hover:not(:disabled), .btn.primary, .btn.primary:disabled, .btn.buy, .btn.sell { background: none; }
.btn:hover:not(:disabled), .odd:hover:not(:disabled), .oddbtn:hover:not(:disabled) { border-image-source: none; border-image: none; }
.btn:hover:not(:disabled)::after, .odd:hover:not(:disabled)::after, .oddbtn:hover:not(:disabled)::after,
.btn.primary::after, .btn.buy::after, .btn.sell::after, .odd.sel::after, .oddbtn.sel::after, .odd.bet::after, .oddbtn.bet::after,
.seg button.on::after, .speeds button.on::after, .nav-main > button.on::after { opacity: 1; transform: none; }
.btn.primary, .btn.buy, .btn.sell, .odd.sel, .oddbtn.sel, .odd.bet, .oddbtn.bet { border-image: none; color: var(--paper-3); }
.btn.primary, .btn.primary:disabled { --brush: var(--accent); }
.btn.primary:hover:not(:disabled) { --brush: var(--red); background: none; border-image: none; }
.btn.primary:disabled { opacity: 0.4; }
.btn.buy { --brush: var(--green); }
.btn.sell { --brush: var(--red); }
.btn.buy:disabled, .btn.sell:disabled { opacity: 0.4; background: none; color: var(--paper-3); border-image: none; }
.odd.sel, .oddbtn.sel { background: none; color: var(--paper-3); }
.odd.sel small { color: var(--paper-3); }
.odd.bet, .oddbtn.bet { --brush: var(--red); background: none; color: #fbf1da; }
.odd.bet:hover:not(:disabled), .oddbtn.bet:hover:not(:disabled) { background: none; }
.odd.value { background: none; box-shadow: inset 0 -3px 0 var(--green); }
.oddbtn.best { background: none; box-shadow: inset 0 -3px 0 var(--green); }
.odd:hover:not(:disabled) small { color: var(--paper-3); }

.seg, .speeds { border: 0; border-image: none; gap: 4px; background: none; }
.seg button, .speeds button { border: 0 !important; padding: 2px 9px; }
.seg button.on, .speeds button.on { background: none; color: var(--paper-3); }
.speeds button { width: 34px; padding: 2px 0; }
.nav-main > button.on { background: none; color: var(--paper-3); --brush: var(--accent); }
.nav-main > button::after { inset: -1px 2px; }
.nav-main > button { overflow: visible; }

/* section bands are long, dry strokes */
.panel > h2, .ph { background: none; border: 0; border-image: none; -webkit-mask: none; mask: none; color: var(--paper-3); padding: 6px 18px; margin-bottom: 6px; }
.panel > h2::after, .ph::after {
  content: ''; position: absolute; inset: -2px -2px; z-index: -1; background: var(--accent);
  -webkit-mask: url(../img/brush-band.png) center / 100% 100% no-repeat; mask: url(../img/brush-band.png) center / 100% 100% no-repeat;
}
.sheet > h2, .sheet > .ph { color: var(--accent); padding: 0 0 10px; }
.sheet > h2::after, .sheet > .ph::after { content: none; }

/* solid blocks get torn, inky edges */
.inv, .board, .watch-head, .memecard, .clf.f-black, .coin.sel, .bgcard.on, .modes button.on, .skill.owned {
  -webkit-mask: url(../img/brush-blob.png) center / 100% 100% no-repeat; mask: url(../img/brush-blob.png) center / 100% 100% no-repeat;
  outline: 0; border: 0; border-image: none;
}
.inv { padding: 16px 22px; }
.board { padding: 8px 12px 9px; }
.memecard { padding: 12px 16px; }
.coin.sel { background: var(--ink); padding: 10px 14px; }
.clf.f-black { padding: 22px 16px; }
.watch-head { padding: 12px 20px; }
.bgcard.on { padding: 14px 16px; }
.cal-d.today { background: none; color: var(--paper-3); z-index: 0; }
.cal-d.today::before { content: ''; position: absolute; inset: 0 -1px; z-index: -1; background: var(--ink); -webkit-mask: url(../img/brush-blob.png) center / 100% 100% no-repeat; mask: url(../img/brush-blob.png) center / 100% 100% no-repeat; }

/* a selected row is underlined in pencil, not blacked out */
tr.sel td { background: var(--gold-bg) !important; color: var(--ink); }
tr.sel .assetcell small { color: var(--ink-3); }
tr.sel .up { color: var(--green); }
tr.sel .down { color: var(--red); }
tr.sel .pin { color: var(--ink); }
tr.sel td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.rep-row.sel { background: var(--gold-bg); color: var(--ink); box-shadow: inset 4px 0 0 var(--accent); }
.rep-row.sel .up { color: var(--green); }
.rep-row.sel .down { color: var(--red); }

/* big moments splash ink behind the stamp */
.stampmark { background: none; border-width: 7px; }
.stampmark::before { content: ''; position: absolute; inset: -70px -110px; z-index: -1; background: var(--paper-3); -webkit-mask: url(../img/splat.png) center / 100% 100% no-repeat; mask: url(../img/splat.png) center / 100% 100% no-repeat; }
.stampmark::after { content: ''; position: absolute; inset: -90px -140px; z-index: -2; background: currentColor; opacity: 0.85; -webkit-mask: url(../img/splat.png) center / 100% 100% no-repeat; mask: url(../img/splat.png) center / 100% 100% no-repeat; }

/* ---------- the phone is drawn in the same ink as the paper ---------- */
.phone { --sf: var(--serif); background: #120b05; border-radius: 34px; padding: 9px; box-shadow: 0 0 0 2px #f0e4c4, 0 0 0 5px #120b05, 0 22px 50px rgba(30, 15, 0, 0.55); color: var(--ink); font: 500 15px/1.3 var(--serif); }
.ip-screen { background: url(../img/paper.png), #f3e9cf; border-radius: 26px; }
.ip-island { width: 62px; height: 7px; top: 9px; border-radius: 4px; background: #120b05; }
.ip-status, .ip-status.light { color: var(--ink); font-weight: 800; }
.ip-homebar i, .ip-homebar.light i { background: var(--ink); }
.ip-wall { background: radial-gradient(circle at 50% 22%, transparent 0 86px, rgba(18, 11, 5, 0.09) 87px 90px, transparent 91px 118px, rgba(18, 11, 5, 0.07) 119px 121px, transparent 122px), url(../img/paper.png), #f3e9cf; }
.ip-home { color: var(--ink); }
.ip-clock { text-shadow: none; font-style: italic; }
.ip-clock b { font: 400 58px/1 var(--head); letter-spacing: 0; font-style: normal; }
.ip-app { color: var(--ink); font: 500 12.5px var(--serif); }
.ip-ic { background: #120b05 !important; border-radius: 14px 16px 13px 17px / 16px 13px 17px 14px; box-shadow: none; }
.ip-ic svg { filter: none; }
.ip-badge, .fab-badge { background: var(--red); color: #fbf1da; font: 800 12px/20px var(--serif); }
.ip-dock { background: none; border-top: 3px double var(--ink); border-radius: 0; margin: auto 14px 2px; }
.ip-nav { min-height: 34px; }
.ip-back { color: var(--ink); font: 800 15px var(--serif); }
.ip-title, .nc-title { font: 400 28px/1.1 var(--head); letter-spacing: 0; }
.ip-body { scrollbar-color: var(--ink) transparent; }
.ip-body::-webkit-scrollbar-thumb { background: var(--ink); border-color: transparent; }
.ct { background: none; }
.ct::after { background: none; border-bottom: 1px dotted var(--ink); left: 14px; right: 14px; }
.ct:hover { background: var(--paper-2); }
.ct b { font: 800 15px/1.25 var(--serif); }
.ct b small { color: var(--ink-3); font: italic 500 12.5px var(--serif); }
.ct p { color: var(--ink-2); font-size: 14px; }
.ct .dotu { background: var(--red); }
.ip-chathead { background: none; border-bottom: 3px double var(--ink); }
.msgs { background: none; scrollbar-color: var(--ink) transparent; }
.msgs::-webkit-scrollbar-thumb { background: var(--ink); border-color: transparent; }
.msg { font: 500 15px/1.28 var(--serif); }
.msg.them { background: rgba(255, 251, 236, 0.7); border: 1.5px solid var(--ink); border-radius: 12px 15px 14px 3px / 15px 12px 13px 3px; }
.msg.me { background: #120b05; color: #f8efd6; border-radius: 15px 12px 3px 14px / 12px 15px 3px 13px; }
.msg-t { color: var(--ink-3); font: italic 500 12px var(--serif); }
.msg-who { color: var(--red); font: 800 12px var(--serif); }
.msg-go { color: var(--ink); text-decoration: underline; font: 800 13.5px var(--serif); }
.replies { background: none; border-top: 3px double var(--ink); }
.replies button { background: none; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 12px 15px 13px 14px / 14px 12px 15px 13px; font: 800 14px var(--serif); }
.replies button:hover:not(:disabled) { background: #120b05; color: #f8efd6; border-color: #120b05; }
.replies small { color: var(--ink-3); font-style: italic; }
.ip-sec { color: var(--ink-2); font: 800 12.5px var(--serif); }
.ip-group { background: none; border: 1.5px solid var(--ink); border-radius: 8px; }
.ip-row + .ip-row::before { background: none; border-top: 1px dotted var(--ink); }
.tog { background: none; border: 1.5px solid var(--ink); }
.tog::after { background: var(--ink); box-shadow: none; top: 3px; left: 3px; width: 20px; height: 20px; }
.tog.on { background: var(--ink); }
.tog.on::after { background: #f8efd6; left: 21px; }
.pz { color: var(--ink-2); }
.pz.on { background: var(--red); color: #fbf1da; }
.pz.del { color: var(--red); }
.nc { background: none; color: var(--ink); }
.nc-card { background: rgba(255, 251, 236, 0.6); border: 1.5px solid var(--ink); border-radius: 3px; }
.nc-card .h { color: var(--ink-3); font-style: italic; }

.phone-fab { background: #120b05; border: 2px solid #f0e4c4; outline: 3px solid #120b05; border-radius: 13px; box-shadow: 0 8px 18px rgba(30, 15, 0, 0.45); }
.phone-fab .sc { background: radial-gradient(#120b05 1px, transparent 1.3px) 0 0 / 5px 5px, #f3e9cf; }
.phone-fab .sc::before { background: #120b05; }
.phone-fab .sc::after { background: #120b05; }
.fab-badge { border-color: #f0e4c4; height: 22px; }

/* incoming messages arrive as telegrams */
.notif { font: 500 15px/1.28 var(--serif); color: var(--ink); background: url(../img/paper.png), #f3e9cf; -webkit-backdrop-filter: none; backdrop-filter: none; border: 3px double var(--ink); border-radius: 2px; box-shadow: 0 8px 20px rgba(30, 15, 0, 0.45); animation: notifIn 0.34s var(--ease); }
.n-head { color: var(--ink-3); font: italic 500 12.5px var(--serif); }
.n-ic { background: var(--ink) !important; border-radius: 50%; }
.n-app { text-transform: none; font: 400 12.5px var(--deco); color: var(--ink); }
.notif b { font: 400 17px var(--head); }
@keyframes notifIn { from { opacity: 0; transform: translateY(-40px) rotate(-1deg); } }

/* ---------- classifieds that sell ---------- */
.clf-btn { align-self: center; margin-top: 7px; }
.clf.f-black .clf-btn { color: var(--paper-3); }

/* ---------- lottery ticket ---------- */
.ticket { width: 470px; max-width: 100%; background: url(../img/paper.png), #efe3c0; border: 18px solid transparent; border-image: var(--o-scroll) 44 / 24px stretch; padding: 4px 12px 12px; text-align: center; box-shadow: 0 18px 50px rgba(20, 10, 0, 0.55); animation: cardIn 0.3s var(--ease); }
.ticket-top { font: 400 21px var(--deco); margin-bottom: 4px; }
.scratch-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.scratch-cell { position: relative; aspect-ratio: 1; border: 3px double var(--ink); display: grid; place-items: center; background: #f8efd6; }
.scratch-cell b { font: 400 54px/1 var(--head); color: var(--red); }
.scratch { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.ticket-res { font: 400 22px/1.2 var(--head); margin: 8px 0 10px; min-height: 28px; }

/* ---------- clippings pinned to the page ---------- */
.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; align-items: start; padding: 4px; }
.clip { background: url(../img/paper.png), #f5ecd2; padding: 10px 12px 12px; box-shadow: 2px 4px 10px rgba(50, 26, 0, 0.35); clip-path: polygon(0 1%, 4% 0, 12% 1.500%, 30% 0, 52% 1%, 74% 0, 100% 1.200%, 99.200% 30%, 100% 62%, 99% 100%, 72% 98.800%, 48% 100%, 22% 98.500%, 1% 100%, 0 70%, 1% 36%); }
.clip.c0 { transform: rotate(-1.2deg); }
.clip.c1 { transform: rotate(0.8deg); }
.clip.c2 { transform: rotate(-0.4deg); }
.clip.c3 { transform: rotate(1.3deg); }
.clip-top { display: flex; justify-content: space-between; font: 400 11.5px var(--deco); border-bottom: 3px double var(--ink); padding-bottom: 3px; margin-bottom: 6px; }
.clip .art { width: 74px; height: 58px; float: right; margin-left: 6px; }
.clip h3 { font: 400 23px/1.08 var(--head); margin: 0 0 5px; }
.clip p { font-size: 14px; line-height: 1.28; }

/* ---------- live card: fixed slots, nothing gets clipped ---------- */
.live-rail { height: 286px; }
.live-card { flex-basis: 316px; }
.board { flex: none; }
.scoreline { height: 42px; min-height: 0; }
.scoreline .nm { font: 800 13.5px/1.12 var(--serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.score { font-size: 26px; }
.livebody { gap: 4px; }
.mybet { margin-top: auto; flex: none; height: 42px; border-top: 3px double var(--ink); padding-top: 3px; display: flex; align-items: center; }
.mybet > .small { color: var(--ink-2); font-weight: 500; font-style: italic; }
.mb-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; }
.mb-txt { min-width: 0; flex: 1; line-height: 1.15; }
.mb-txt b { display: block; color: var(--red); font: 800 14px/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-txt small { display: block; font: 500 12.5px/1.2 var(--serif); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-no { flex: none; font: italic 500 12.5px var(--serif); color: var(--ink-3); cursor: help; }
.mybet .btn { flex: none; }

/* ---------- the way out of a broadcast is always visible ---------- */
.watch-head { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; padding-right: 26px; }
.watch-close { flex: none; background: #f8efd6; color: #120b05; border: 0; padding: 7px 14px; font: 800 15px var(--serif); cursor: pointer; white-space: nowrap; border-radius: 3px 5px 4px 2px; transition: background 0.12s; }
.watch-close:hover { background: #fff; }

/* charts sit directly on the newspaper, without a pale box */
.cvwrap, .chartbar { background: none; }
.cvwrap { border: 0; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); padding: 6px 0 4px; }
:root { --sheet: rgba(255, 251, 236, 0.3); }
:root[data-sec] { --sheet: rgba(255, 251, 236, 0.3); }
/* a trade button with no amount yet is just printed text in a frame, not a faded stroke */
.btn.buy:disabled, .btn.sell:disabled, .btn.primary:disabled { opacity: 1; color: var(--ink-3); background: none; border: 6px solid transparent; border-image: var(--o-ticket) 7 / 6px stretch; }
.btn.buy:disabled::after, .btn.sell:disabled::after, .btn.primary:disabled::after { opacity: 0; }

/* ---------- what I hold is marked everywhere, the same way as my bets ---------- */
.coin.mine { background-color: var(--gold-bg); border-image-source: var(--o-scroll); border-image-slice: 44; border-image-width: 22px; flex-basis: 172px; }
.coin.sel.mine { background-color: var(--ink); border-image: none; }
.hold { margin-top: 3px; padding-top: 2px; border-top: 1px solid currentColor; font: 800 13px/1.2 var(--serif); color: var(--red); display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; }
.coin.sel .hold, .memecard .hold { color: var(--paper-3); }
.coin.sel .hold .up, .memecard .hold .up { color: #a8d9a0; }
.coin.sel .hold .down, .memecard .hold .down { color: #f2a48f; }
.memecard.mine { box-shadow: inset 0 0 0 3px #d59a1f; }
.hold b, .assetcell .hold b, .coin .hold b { display: inline; font: 800 13px/1.2 var(--serif); }
tbody tr.mine td { background: var(--gold-bg); }
tbody tr.mine td:first-child { box-shadow: inset 4px 0 0 var(--red); }
tr.sel td { background: rgba(18, 11, 5, 0.1) !important; }
tr.mine.sel td { background: rgba(222, 158, 30, 0.55) !important; }
.mine-head td { color: var(--red); }
.movers tr.mine td { background: var(--gold-bg); font-weight: 800; }
.tape span.mine b { color: #f0bd4f; }

@media (max-width: 1040px) {
  .vs > div + div { border-left: 0; padding-left: 0; }
  .clf-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .logo { font-size: 28px; }
  .rubric h1, .tabloid-title { font-size: 32px; }
  .start h1 { font-size: 46px; }
  .match { grid-template-columns: minmax(0, 1fr); }
  .match.open { border-width: 12px; border-image-width: 16px; }
  .rubric { flex-wrap: wrap; }
  .rub-right { margin-left: 0; justify-content: flex-start; }
  .sheet { border-width: 10px; border-image-width: 10px; }
  .kpi b, .kpi.lead b { width: auto; }
}