/* ============ Card Derby Racing ============ */
:root{
  --bg:#0c1512; --bg2:#0f1c17; --panel:#14231d; --panel2:#1a2c24;
  --ink:#eaf3ee; --mut:#9db3a8; --line:#26382f;
  --gold:#e8c064; --go:#2fbf71; --go-d:#1d9c58;
  --danger:#e5484d; --win:#3ad07a;
  /* масти-лошади */
  --s-S:#6f7dff; --s-H:#ef4d6a; --s-D:#f0a63a; --s-C:#25b083;
  --radius:16px; --shadow:0 12px 34px rgba(0,0,0,.42);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, #14261e 0, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, #10201a 0, transparent 50%),
    var(--bg);
  min-height:100vh; line-height:1.45;
}
.wrap{max-width:1080px;margin:0 auto;padding:16px 16px 40px}

/* ---- topbar ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand-badge{
  font-size:20px;letter-spacing:1px;
  background:linear-gradient(135deg,#1c3228,#22402f);
  border:1px solid var(--line);border-radius:12px;padding:8px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.brand-name{font-weight:800;font-size:20px;letter-spacing:.2px}
.brand-sub{color:var(--mut);font-size:12.5px}
.topbar-right{display:flex;align-items:center;gap:10px}
.balance{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.05;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:7px 14px;
}
.balance-label{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px}
.balance-val{font-weight:800;font-size:19px;color:var(--gold)}
.balance-val.flash{animation:flash .6s ease}
@keyframes flash{0%{color:var(--win);transform:scale(1.12)}100%{color:var(--gold)}}
.btn-ghost{
  background:transparent;color:var(--mut);border:1px solid var(--line);
  border-radius:10px;padding:9px 13px;cursor:pointer;font-size:13px;font-weight:600;
}
.btn-ghost:hover{color:var(--ink);border-color:#37503f}

/* ---- layout ---- */
.board{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
.track-card{
  grid-column:1;
  background:linear-gradient(180deg,#123024,#0f261d);
  border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 14px;box-shadow:var(--shadow);
}
.side{grid-column:2;grid-row:1 / span 3;display:flex;flex-direction:column;gap:14px}
.handicap{grid-column:1}
.history{grid-column:1}
@media(max-width:860px){
  .board{grid-template-columns:1fr}
  .side{grid-column:1;grid-row:auto}
  .handicap,.history{grid-column:1}
}

/* ---- track ---- */
.track-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.track-head h2{margin:0;font-size:16px;letter-spacing:.3px}
.race-status{font-size:13px;color:var(--mut);font-weight:600}
.race-status.live{color:var(--gold)}
.finish-note{margin-top:10px;font-size:12px;color:var(--mut);text-align:center}

/* числовая шкала над дорожками (0..32) */
.track-scale{display:grid;grid-template-columns:112px 1fr 58px;gap:10px;padding:0 10px;
  border-left:4px solid transparent;margin-bottom:5px}
.scale-track{position:relative;height:14px}
.scale-track .tick{position:absolute;top:0;transform:translateX(-50%);font-size:10px;color:var(--mut);font-weight:700}
.scale-track .tick::after{content:"";position:absolute;left:50%;top:13px;width:1px;height:4px;background:var(--line)}
.scale-cap{font-size:9px;color:#6f8578;align-self:center;text-transform:uppercase;letter-spacing:.4px}

.lanes{display:flex;flex-direction:column;gap:10px}
.lane{
  --c:#888;position:relative;
  display:grid;grid-template-columns:112px 1fr 58px;align-items:center;gap:10px;
  background:rgba(255,255,255,.02);border:1px solid var(--line);
  border-left:4px solid var(--c);border-radius:12px;padding:8px 10px;
  transition:background .2s,box-shadow .2s,transform .2s;cursor:pointer;
}
.lane:hover{background:rgba(255,255,255,.045)}
.lane.picked{background:rgba(232,192,100,.12);border-color:var(--gold);
  box-shadow:0 0 0 2px var(--gold), 0 0 18px rgba(232,192,100,.32)}
.lane.picked .suit-badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 2px rgba(232,192,100,.5)}
.lane.winner{background:linear-gradient(90deg,rgba(58,208,122,.18),transparent);box-shadow:0 0 0 2px var(--win) inset}
.lane.picked.winner{border-color:var(--win);box-shadow:0 0 0 2px var(--win), 0 0 18px rgba(58,208,122,.4)}
.you-badge{position:absolute;top:-9px;left:60px;z-index:4;font-size:10px;font-weight:800;
  color:#08120d;background:var(--gold);padding:1px 7px;border-radius:20px;white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.4)}
.lane.picked.winner .you-badge{background:var(--win)}
.lane.dim{opacity:.5}
.lane-info{display:flex;align-items:center;gap:9px;min-width:0}
.suit-badge{
  width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;
  font-size:20px;font-weight:800;color:#fff;
  background:linear-gradient(150deg,var(--c),color-mix(in srgb,var(--c) 60%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.lane-name{font-weight:700;font-size:13.5px;line-height:1.05}
.lane-name small{display:block;color:var(--mut);font-weight:600;font-size:11px}

.rail{position:relative;height:34px;border-radius:9px;
  background:
    repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/32 - 1px),rgba(255,255,255,.06) calc(100%/32 - 1px),rgba(255,255,255,.06) calc(100%/32)),
    rgba(0,0,0,.28);
  border:1px solid var(--line);overflow:hidden;
}
.rail-fill{position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 35%,transparent),color-mix(in srgb,var(--c) 12%,transparent));
  transition:width .28s cubic-bezier(.34,1.2,.5,1)}
.finish-line{position:absolute;top:0;bottom:0;right:0;width:0;border-right:2px dashed rgba(255,255,255,.35)}
.horse{position:absolute;top:50%;left:0;transform:translate(-50%,-50%) scaleX(-1);font-size:20px;
  transition:left .28s cubic-bezier(.34,1.2,.5,1);filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));z-index:2}
.lane-odds{text-align:center;font-weight:800;font-size:15px;color:var(--ink)}
.lane-odds small{display:block;font-size:10px;color:var(--mut);font-weight:600}
.lane-pos{position:absolute;right:4px;top:3px;font-size:10.5px;font-weight:800;color:var(--ink);
  background:rgba(8,18,13,.82);padding:1px 6px;border-radius:6px;border:1px solid var(--line);
  z-index:3;line-height:1.35;pointer-events:none;white-space:nowrap}
.lane-pos.done{color:var(--win);border-color:var(--win)}

/* ---- draw card ---- */
.drawcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;text-align:center;box-shadow:var(--shadow)}
.draw-slot{display:grid;place-items:center;min-height:104px}
.card-face{
  width:74px;height:104px;border-radius:11px;background:#fbfdff;color:#111;
  display:grid;place-items:center;position:relative;
  box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.08);
  font-weight:800;
}
.card-face.placeholder{background:#0e1a15;color:#3f5a4c;border:1px dashed var(--line);box-shadow:none}
.card-face .rank{position:absolute;top:6px;left:8px;font-size:16px;line-height:1}
.card-face .rank.br{top:auto;left:auto;bottom:6px;right:8px;transform:rotate(180deg)}
.card-face .pip{font-size:34px}
.card-face.deal{animation:deal .32s ease}
@keyframes deal{from{transform:translateY(-14px) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.draw-label{margin-top:10px;font-size:13px;color:var(--mut);min-height:18px;font-weight:600}

/* ---- panels ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 15px;box-shadow:var(--shadow)}
.panel-title{font-weight:800;font-size:13px;letter-spacing:.3px;margin-bottom:11px;display:flex;align-items:center;gap:8px}
.panel-title small{color:var(--mut);font-weight:600}

/* ---- bet ---- */
.pick-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:11px}
.pick{border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:10px;padding:8px 4px;
  cursor:pointer;text-align:center;transition:.15s}
.pick .ps{font-size:19px;font-weight:800;color:var(--c);--c:#888}
.pick .po{font-size:12px;color:var(--mut);font-weight:700;margin-top:2px}
.pick:hover{border-color:#37503f}
.pick.on{background:rgba(232,192,100,.12);border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.stake-row{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink);border-radius:20px;
  padding:6px 11px;font-size:12.5px;font-weight:700;cursor:pointer}
.chip:hover{border-color:var(--gold);color:var(--gold)}
.stake-input{width:92px;background:#0c1713;border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:8px 10px;font-size:15px;font-weight:700;text-align:right}
.bet-current{min-height:18px;font-size:12.5px;color:var(--gold);font-weight:700;margin-bottom:8px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn-primary,.btn-go,.btn-new{border:0;border-radius:11px;padding:12px;font-weight:800;font-size:14px;cursor:pointer;color:#08120d}
.btn-primary{background:var(--gold)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-go{background:linear-gradient(180deg,var(--go),var(--go-d));color:#04140b}
.btn-go:hover{filter:brightness(1.06)}
.btn-new{grid-column:1 / -1;margin-top:9px;background:linear-gradient(180deg,var(--gold),#cf9f3e)}
button:disabled{opacity:.42;cursor:not-allowed;filter:none!important}

/* ---- fairness ---- */
.fair-panel .pf-tag{font-size:10px;background:#123123;color:var(--go);border:1px solid #1e5238;
  padding:2px 7px;border-radius:20px;font-weight:800;letter-spacing:.3px}
.fair-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 0;border-top:1px solid var(--line);font-size:12.5px}
.fair-row:first-of-type{border-top:0}
.fair-row>span{color:var(--mut);white-space:nowrap}
.mono{font-family:var(--mono);font-size:11.5px;color:var(--ink);word-break:break-all;text-align:right}
.seed-hidden{color:#5c7365}
.seed-edit{display:flex;gap:5px;align-items:center}
.seed-input{width:120px;background:#0c1713;border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:5px 8px;font-family:var(--mono);font-size:11.5px}
.btn-mini{border:1px solid var(--line);background:#123123;color:var(--go);border-radius:8px;
  padding:5px 9px;cursor:pointer;font-weight:800}
.verify-link{display:inline-block;margin-top:9px;color:var(--gold);text-decoration:none;font-size:12.5px;font-weight:700}
.verify-link:hover{text-decoration:underline}

/* ---- handicap ---- */
.handi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.handi-suit{border:1px solid var(--line);border-radius:11px;padding:9px;background:rgba(255,255,255,.02);border-top:3px solid var(--c);--c:#888}
.handi-suit h4{margin:0 0 8px;font-size:12px;color:var(--c);display:flex;align-items:center;gap:5px}
.mini-cards{display:flex;gap:6px;justify-content:center}
.mini-card{flex:0 1 46px;min-width:32px;aspect-ratio:5/7;border-radius:8px;background:#fbfdff;color:#111;display:grid;place-items:center;
  font-weight:800;font-size:15px;position:relative;box-shadow:0 4px 10px rgba(0,0,0,.42)}
.mini-card .mp{font-size:15px;position:absolute;bottom:4px;right:5px}
.mini-card .mr{position:absolute;top:3px;left:5px;font-size:14px}
@media(max-width:560px){.handi-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- history ---- */
.hist-list{display:flex;flex-direction:column;gap:6px}
.hist-empty{color:var(--mut);font-size:13px;text-align:center;padding:10px}
.hist-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:13px}
.hist-left{display:flex;align-items:center;gap:9px}
.hist-suit{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;
  background:var(--c);--c:#888}
.hist-res{font-weight:800}
.hist-res.win{color:var(--win)}
.hist-res.lose{color:var(--danger)}
.hist-res.none{color:var(--mut)}

/* ---- modal ---- */
.modal{position:fixed;inset:0;background:rgba(4,10,7,.72);display:grid;place-items:center;z-index:50;padding:18px}
.modal[hidden]{display:none} /* важно: перекрывает display:grid, иначе окно не закрыть */
.modal-box{background:var(--panel2);border:1px solid var(--line);border-radius:18px;max-width:440px;padding:24px;position:relative;box-shadow:var(--shadow)}
.modal-box h3{margin:0 0 14px;font-size:18px}
.modal-x{position:absolute;top:12px;right:12px;background:transparent;border:0;color:var(--mut);font-size:18px;cursor:pointer}
.rules{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:#cfe0d7}
.rules b{color:var(--ink)}

.foot{margin-top:22px;text-align:center;color:var(--mut);font-size:12px}

/* ===== непрерывный режим ===== */
.online{display:flex;align-items:center;gap:5px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:8px 12px;font-size:13px;font-weight:700;color:var(--ink)}
.online #onlineVal{color:var(--go)}
.acct{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:9px 13px;cursor:pointer;font-size:13px;font-weight:700;max-width:150px}
.acct::before{content:"👤";font-size:13px}
.acct:hover{border-color:#37503f}
.acct.logged{border-color:#1e5238;color:var(--go)}
.acct.logged::before{content:"✓"}
.acct #acctName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.track-head{align-items:flex-start}
.countbox{text-align:center;min-width:74px;background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:12px;padding:5px 10px}
.count-num{font-size:24px;font-weight:800;color:var(--gold);line-height:1}
.count-cap{font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.phasebar{height:6px;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:10px 0 4px}
.phasebar-fill{height:100%;width:0;border-radius:6px;transition:width .12s linear;background:var(--gold)}
.phasebar-fill.bet{background:linear-gradient(90deg,#e8c064,#cf9f3e)}
.phasebar-fill.race{background:linear-gradient(90deg,var(--go),var(--go-d))}
.phasebar-fill.gap{background:linear-gradient(90deg,#6f7dff,#4b57c8)}
/* гонка: «бегущая» полоса — конец заезда заранее не известен */
.phasebar-fill.indet{width:100%!important;transition:none;
  background:linear-gradient(90deg,transparent 0,var(--go) 45%,#7be0aa 55%,transparent 100%);
  background-size:35% 100%;background-repeat:no-repeat;animation:indet 1.1s linear infinite}
@keyframes indet{0%{background-position:-35% 0}100%{background-position:135% 0}}

/* пул ставок */
.pool-rows{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.pool-row{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:8px}
.pool-suit{font-size:16px;font-weight:800;text-align:center}
.pool-bar{height:12px;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.pool-fill{height:100%;width:0;border-radius:6px;transition:width .3s ease;opacity:.85}
.pool-cnt{font-size:11.5px;color:var(--mut);font-weight:700;white-space:nowrap;min-width:56px;text-align:right}
.pool-total{font-size:13px;color:var(--mut);text-align:center;border-top:1px solid var(--line);padding-top:9px}
.pool-total b{color:var(--gold);font-size:15px}

/* лента истории */
.hist-strip{display:flex;flex-wrap:wrap;gap:6px}
.hist-chip{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.02);border:1px solid var(--line);
  border-radius:9px;padding:5px 8px;font-size:11.5px}
.hc-suit{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px}
.hc-idx{color:var(--mut);font-weight:700}

/* bet-panel single button */
.bet-panel .btn-primary{width:100%;margin-top:2px}

/* auth modal */
.auth-tabs{display:flex;gap:8px;margin-bottom:16px}
.auth-tab{flex:1;background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:10px;padding:10px;cursor:pointer;font-weight:700;font-size:13px}
.auth-tab.on{background:rgba(232,192,100,.12);border-color:var(--gold);color:var(--gold)}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.fld label{font-size:12px;color:var(--mut);font-weight:700}
.fld input{background:#0c1713;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:15px}
.auth-msg{color:#ff9a9d;font-size:12.5px;min-height:16px;margin-bottom:8px;font-weight:600}
.auth-hint{font-size:11.5px;color:var(--mut);margin-top:10px;line-height:1.4}
.acct-stats{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:14px;margin-bottom:14px}
.acct-stats b{color:var(--gold)}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.stat-row .big{font-size:20px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.stat-grid>div{display:flex;justify-content:space-between;background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:12.5px}
.stat-grid span{color:var(--mut)}
.stat-grid b{color:var(--ink)}
.stat-grid b small{color:var(--mut);font-weight:600}
.stat-grid b.pos{color:var(--win)}
.stat-grid b.neg{color:#ff9a9d}
.acct-hist-title{font-weight:800;font-size:13px;margin:2px 0 8px}
.acct-hist-title small{color:var(--mut);font-weight:600}
.acct-hist{max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.mybet{display:grid;grid-template-columns:auto 22px 1fr auto;align-items:center;gap:8px;
  background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:12.5px}
.mybet.win{border-left:3px solid var(--win)}
.mybet.lose{border-left:3px solid var(--danger)}
.mb-idx{color:var(--mut);font-weight:700}
.mb-suit{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
.mb-stake{color:var(--mut)}
.mb-res{font-weight:800}
.mb-res.win{color:var(--win)}
.mb-res.lose{color:#ff9a9d}
.auth-or{display:flex;align-items:center;text-align:center;color:var(--mut);font-size:12px;margin:14px 0 12px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-or span{padding:0 10px}
.tg-cap{text-align:center;color:var(--mut);font-size:11.5px;margin:0 0 8px}
.tg-btn{display:flex;justify-content:center;min-height:40px}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:#1c2c24;border:1px solid var(--line);color:var(--ink);padding:11px 18px;border-radius:12px;
  font-weight:600;font-size:13.5px;opacity:0;transition:.25s;z-index:60;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.win{border-color:var(--win);color:var(--win)}
.toast.err{border-color:var(--danger);color:#ff9a9d}

/* ===================== МОБИЛЬНАЯ АДАПТАЦИЯ ===================== */
@media(max-width:560px){
  .wrap{padding:10px 10px 34px}
  .board{gap:12px}

  /* шапка: бренд сверху, элементы управления — второй строкой, ровно */
  .topbar{flex-wrap:wrap;gap:8px;margin-bottom:12px}
  .brand-sub{display:none}
  .brand-badge{font-size:15px;padding:6px 9px;border-radius:10px}
  .brand-name{font-size:16px}
  .topbar-right{flex:1 1 100%;justify-content:space-between;gap:6px}
  .online,.btn-ghost{padding:7px 9px;font-size:12px}
  .balance{padding:5px 11px}
  .balance-label{font-size:10px}
  .balance-val{font-size:16px}
  .acct{padding:8px 10px;font-size:12px;max-width:120px}

  /* дорожки: отдаём максимум ширины рейлу */
  .track-card{padding:14px 12px 12px}
  .track-head h2{font-size:15px}
  .countbox{min-width:60px;padding:4px 8px}
  .count-num{font-size:20px}
  .lane{grid-template-columns:70px 1fr 42px;gap:6px;padding:7px 7px}
  .lane-info{gap:6px}
  .track-scale{grid-template-columns:70px 1fr 42px;gap:6px;padding:0 7px}
  .suit-badge{width:27px;height:27px;font-size:15px;border-radius:8px}
  .lane-name{font-size:11.5px;font-weight:700}
  .lane-name small{display:none}
  .lane-odds{font-size:13px}
  .lane-odds small{font-size:9px}
  .lane-pos{font-size:9.5px;padding:1px 5px}
  .you-badge{left:34px;font-size:9.5px;padding:1px 6px}
  .scale-track .tick{font-size:9px}
  .horse{font-size:18px}
  .finish-note{font-size:11px}

  /* панели/сетки */
  .panel{padding:12px 13px}
  .handi-grid{grid-template-columns:repeat(2,1fr)}
  .pick .ps{font-size:18px}
  .stake-input{width:84px}
  .modal-box{padding:20px 18px}
}

/* очень узкие экраны */
@media(max-width:380px){
  .lane{grid-template-columns:60px 1fr 40px;gap:5px}
  .track-scale{grid-template-columns:60px 1fr 40px;gap:5px}
  .lane-name{font-size:11px}
  .you-badge{left:30px}
  .chip{padding:6px 9px;font-size:12px}
  .acct{max-width:96px}
  .mini-card{flex-basis:38px;font-size:13px}
  .mini-card .mp{font-size:12px;bottom:3px;right:4px}
  .mini-card .mr{font-size:12px;top:2px;left:4px}
}