.p{font-size: .8rem;} .s>.t9{width: 200vw;} .s>.t10, .s>.t14{width: 180vw;} .s{overflow-x: scroll;} .t9,.t10,.t14{ border-collapse: collapse; font-size: min(3.3vw, 1rem); text-align: center; } .t9 tr td:first-child, .t10 tr td:first-child, .t14 tr td:first-child{ position: -webkit-sticky; position: sticky; left: 0; } .t9 td, .t10 td, .t14 td{ border: solid .5px #ccc; padding:min(.3rem) min(.1rem); } .t10 thead th{ color:#fff; padding:.3rem; background-image: -webkit-linear-gradient(left, mediumseagreen 0%, green 50%, mediumseagreen 100%); background-image: linear-gradient(to right, mediumseagreen 0%, green 50%, mediumseagreen 100%); } .t14 thead th{ color:#fff; padding:.3rem; background: #aaa; } .t14 thead th.a, td.d, td.a{ background: #333; color: #fff; } .t9 thead th:first-child, .t10 thead th:first-child, .t14 thead th:first-child{ border-top-left-radius:.7rem; } .t9 thead th:last-child, .t10 thead th:last-child, .t14 thead th:last-child{ border-top-right-radius:.7rem; } .t9 thead th{ background-image: -webkit-linear-gradient(left, rgb(225, 112, 85) 0%, rgb(214, 48, 49) 50%, rgb(225, 112, 85) 100%); background-image: linear-gradient(to right, rgb(225, 112, 85) 0%, rgb(214, 48, 49) 50%, rgb(225, 112, 85) 100%); color: #fff; padding: .3rem; } .t9 thead th span{ -webkit-writing-mode:vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; white-space: pre; text-orientation: upright; } .t, .t10 tbody tr td:first-child, .t9 tbody tr td:first-child{ background-image: -webkit-linear-gradient(left, rgb(255, 234, 167) 0%, #fff 50%, rgb(255, 234, 167) 100%); background-image: linear-gradient(to right, rgb(255, 234, 167) 0%, #fff 50%, rgb(255, 234, 167) 100%); font-weight: 700; } .t10 tr td:nth-child(n+2):nth-child(-n+3){font-weight: 700;} .u{ -webkit-text-decoration: underline green; text-decoration: underline green; text-decoration-skip-ink: none; white-space: nowrap; } .u.in,.stats caption{background: green;color: #fff;} .u2{ -webkit-text-decoration: underline #fff; text-decoration: underline #fff; } .stats{ border-radius: .5rem; box-shadow: -1px -1px 3px #eee, 1px 1px 3px #aaa; table-layout: fixed; background: #eee; padding: .5rem; margin: 1rem 0; font-weight: 700; font-size: .9rem; } .stats span{ display: block; background: #fff; padding: 0 .5rem; margin: .3rem 0; } .stats em{ margin: 0 .3rem; padding: 0 .5rem; background: #cc0000; color: #fff; box-shadow: -1px -1px 3px #eee, 1px 1px 3px #aaa; border-radius: .3rem; } .stats.in{animation: fadein 1s;} .win{background: #cc0000;color: #eee;} .vv{animation: fadein 1s;} .nw{text-align:center;color:#cc0000;font-weight:700;} .o2{ display: grid; text-align: center; grid-gap: .5rem .1vw; grid-template-columns: repeat(3, 1fr); align-content: start; box-shadow: 0 0 1px #aaa inset; background: #f7f7f7; font-size: min(3vw,.9rem); } .o2 table{background: #fff;} .o3, .o2 table{width: 100%;border-collapse: collapse;} .o2 td,.o3 td{ box-shadow: 0 0 0 .5px #aaa inset; padding: .2rem 0; } .o3 th, .o2 caption{ color:#fff; padding:.3rem; background:#333; font-weight: 700; } .o3{ table-layout: fixed; text-align: center; font-size: min(3vw,.9rem); } .o3 tr>th:nth-child(2),.o3 tr>th:nth-child(4){width: 1.5rem;} .o3 tr>td:nth-child(n+3){ white-space: nowrap; overflow: hidden; } .o3 tr>td:nth-child(3){font-weight: 700;} .o3 .h{background: green;color: #fff;} @media screen and (min-width: 600px){ .u:hover{background: green;color: #fff;} .s>.t9,.s>.t10,.s>.t14{width: 100%;} .u2:hover{background: #333;} .s{overflow: visible;} .stats{font-size: 1rem;} .o3 tr>th:nth-child(2),.o3 tr>th:nth-child(4){width: inherit;} } .graph-controls { display: flex; gap: 10px; margin-bottom: 8px; .ctrl-btn { background: #1f2235; border: 1px solid #454d75; color: #e2e8f0; padding: 5px 14px; border-radius: 4px; font-size: 11px; font-weight: bold; cursor: pointer; transition: background 0.2s, color 0.2s; &:hover { background: #2a2d44; color: #ffff00; } } } .sg { width: 100%; max-width: 100%; margin: 10px 0 20px 0; padding: 0; background: #0d0e15; border-radius: 8px; border: 1px solid #1f2235; box-shadow: 0 10px 30px rgba(13, 14, 21, 0.5), 0 1px 8px rgba(92, 107, 192, 0.2); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; &:hover { transform: translateY(-2px); box-shadow: 0 15px 35px rgba(13, 14, 21, 0.6), 0 2px 12px rgba(92, 107, 192, 0.3); } svg { background: #0d0e15; height: auto; .svg-bg { fill: #0d0e15; } .grid-line-horizontal { stroke: #2a2d44; stroke-width: 0.75; } .grid-line-vertical { stroke: #ffffff; stroke-width: 1; opacity: 0.4; } .grid-line-zero { stroke: #5c6bc0; stroke-width: 1.5; stroke-dasharray: 4,4; } .axis-text { font-size: 11px; fill: #ffffff; opacity: 0.7; font-family: monospace, sans-serif; } .x-axis-text { font-weight: bold; opacity: 0.95; } .chart-title { font-size: 16px; font-weight: bold; fill: #ffffff; font-family: sans-serif; } .team-path { fill: none; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.95; stroke-dasharray: 2500; stroke-dashoffset: 2500; animation: drawPath 5s linear running forwards; transition: stroke-width 0.2s ease, opacity 0.2s ease; &.anim-paused { animation-play-state: paused; } &:hover.anim-paused { animation-play-state: paused; } } .label-text { font-size: 11px; font-weight: bold; fill: #ffffff; font-family: sans-serif; } .legend-text { font-size: 11px; fill: #e2e8f0; font-family: sans-serif; font-weight: bold; } .tooltip-box { transition: opacity 0.15s ease-in-out; } .scan-laser-line { transition: opacity 0.15s ease-in-out; } @media (min-width: 769px) { .chart-title { font-size: 18px; } .team-path { stroke-width: 2.5; opacity: 0.85; &:hover { stroke-width: 5px; opacity: 1; cursor: pointer; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6)); } } .label-text { font-size: 12px; } .legend-text { font-size: 12px; } } } } @keyframes drawPath { to { stroke-dashoffset: 0; } }