/* The live pages: /live and /live/{match}. Approved as cricketdatabase-live-preview-91.html. The pulse in the top bar is in app.css. */
.tag.live { border-color: rgba(226, 114, 91, .5); color: #F0A898; gap: 6px; }
.lv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
@media (max-width: 800px) { .lv-head { grid-template-columns: 1fr; } }
.lv-upd { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--hair-2); background: rgba(20, 33, 29, .6); font-size: 13px; color: var(--stone); white-space: nowrap; }
.lv-upd b { color: var(--willow); font-weight: 500; font-variant-numeric: tabular-nums; }
.lv-filt .chips { flex-wrap: wrap; overflow: visible; }
.lv-sec { margin-top: 26px; }
.lv-sec > h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; font-size: 15px; font-weight: 500; }
.lv-sec > h2 span { font-size: 12.5px; color: #6F7C76; font-weight: 400; }
.lv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .lv-cards { grid-template-columns: 1fr; } }
a.lv-card { display: grid; grid-template-rows: auto auto auto 1fr; border: 1px solid var(--hair); border-radius: var(--r); background: rgba(20, 33, 29, .55); padding: 14px 16px; transition: border-color .15s, background .15s; min-width: 0; }
a.lv-card:hover { border-color: var(--hair-2); background: var(--ink-2); }
.lv-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lv-top .comp { flex: 1; min-width: 0; font-size: 12.5px; color: #6F7C76; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-teams { display: grid; gap: 6px; margin-top: 12px; }
.lv-t { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 15px; color: var(--stone); }
.lv-t .mcrest { width: 26px; height: 17px; font-size: 7.5px; border-radius: 3px; }
.lv-t .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-t .sc { font-size: 19px; font-stretch: 85%; font-variant-numeric: tabular-nums; color: var(--stone); white-space: nowrap; }
.lv-t .sc small { font-size: 12px; color: #6F7C76; margin-left: 6px; font-stretch: 100%; }
.lv-t.bat, .lv-t.bat .sc { color: var(--willow); }
.lv-t.bat .nm::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 8px; border-radius: 50%; background: var(--gilt); vertical-align: 2px; }
.lv-st { margin: 10px 0 0; font-size: 13.5px; color: var(--gilt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 21px; }
.lv-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair); min-height: 37px; }
.lv-foot small { font-size: 12px; color: #6F7C76; white-space: nowrap; }
.balls { display: flex; gap: 4px; flex-wrap: nowrap; }
i.ball { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: var(--r); border: 1px solid var(--hair); font: 500 11.5px/1 var(--code); font-style: normal; color: var(--stone); }
i.ball.b-0 { color: #6F7C76; }
i.ball.b-4 { border-color: rgba(212, 183, 122, .55); color: var(--gilt); }
i.ball.b-w { border-color: rgba(226, 114, 91, .6); background: rgba(226, 114, 91, .12); color: #F0A898; }
i.ball.b-x { color: var(--glint); }
i.ball.fresh { animation: pop .6s ease-out; }
@keyframes pop { from { background: rgba(212, 183, 122, .25); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { i.ball.fresh { animation: none; } }
.so { font-size: 12.5px; color: #6F7C76; }
/* one match */
.now { border: 1px solid var(--hair-2); border-radius: var(--r); background: rgba(20, 33, 29, .55); overflow: hidden; margin-bottom: 16px; }
.now-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hair); background: rgba(10, 17, 15, .35); }
.now-h h2 { margin: 0; font-size: 15px; font-weight: 500; }
.now-h span { font-size: 12.5px; color: #6F7C76; }
.now table.card { min-width: 0; }
@media (max-width: 620px) { .now table.card th, .now table.card td { padding: 9px 7px; } }
table.card td.nm i { font-style: normal; color: var(--gilt); margin-left: 4px; }
.tiles4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
@media (max-width: 620px) { .tiles4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tiles4 div { padding: 12px 16px; border-left: 1px solid var(--hair); }
.tiles4 div:first-child { border-left: 0; }
@media (max-width: 620px) { .tiles4 div:nth-child(3) { border-left: 0; } .tiles4 div:nth-child(n+3) { border-top: 1px solid var(--hair); } }
.tiles4 small { display: block; font-size: 12px; color: #6F7C76; }
.tiles4 b { display: block; margin-top: 2px; font-size: 22px; font-weight: 400; font-stretch: 85%; font-variant-numeric: tabular-nums; }
.overs { display: grid; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--hair); }
.ov { display: grid; grid-template-columns: 64px minmax(0, 1fr) 70px; gap: 12px; align-items: center; font-size: 13px; color: #6F7C76; }
.ov .tot { text-align: right; color: var(--stone); font-variant-numeric: tabular-nums; }
.ov .bw { display: block; font-size: 11.5px; }
.ov .balls { flex-wrap: wrap; }
.inn .tbl-wrap + .tbl-wrap { border-top: 1px solid var(--hair-2); }
.api-card .foot a { color: var(--willow); border-bottom: 1px solid var(--hair-2); }