/* Ergebnisse: Live-Kennzahlen als Ringe, Einsendungen als Tabelle, Methode als Karten. */
.rs-page { --cpu: #22d3ee; --ram: #818cf8; --fps: #34d399; background: #03060b; }
.rs-page h1 span, .rs-page h2 span { background: linear-gradient(120deg, #67e8f9, #818cf8); -webkit-background-clip: text; background-clip: text; color: transparent; }

.rs-hero { position: relative; padding: 170px 0 70px; overflow: hidden; text-align: center; }
.rs-hero-bg { position: absolute; inset: 0; background: radial-gradient(800px 460px at 50% 0%, rgba(34, 211, 238, .15), transparent 62%), radial-gradient(500px 400px at 12% 40%, rgba(52, 211, 153, .08), transparent 60%), radial-gradient(500px 400px at 88% 40%, rgba(129, 140, 248, .1), transparent 60%); }
.rs-hero-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(120, 200, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 200, 255, .035) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%); }
.rs-hero .container { position: relative; max-width: 920px; }
.rs-hero h1 { margin: 0; font-size: clamp(44px, 6vw, 84px); line-height: 1; letter-spacing: -.055em; font-weight: 700; }
.rs-lead { max-width: 640px; margin: 24px auto 0; color: #9fb3bf; font-size: 16.5px; line-height: 1.75; }
.rs-live { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 9px 16px; border: 1px solid rgba(52, 211, 153, .3); border-radius: 999px; background: rgba(52, 211, 153, .06); color: #c9f5e4; font-size: 13px; }
.rs-live i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 12px #34d399; animation: rsPulse 1.8s ease-in-out infinite; }
@keyframes rsPulse { 50% { opacity: .35; } }

/* Kennzahlen */
.rs-stats-section { padding: 10px 0 60px; }
.rs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rs-stat { --c: var(--cpu); --v: 0; position: relative; display: flex; align-items: center; gap: 26px; padding: 30px; border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); border-radius: 24px; background: radial-gradient(380px 220px at 0% 0%, color-mix(in srgb, var(--c) 12%, transparent), transparent 65%), linear-gradient(180deg, #0c141e, #070b11); overflow: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.rs-stat:hover { transform: translateY(-4px); }
.rs-stat.ram { --c: var(--ram); }
.rs-stat.fps { --c: var(--fps); }
.rs-ring { position: relative; flex: none; width: 128px; height: 128px; display: grid; place-items: center; }
.rs-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; }
.rs-ring circle { stroke-width: 9; }
.rs-ring .track { stroke: rgba(255, 255, 255, .07); }
.rs-ring .val { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: calc(326.7 - 326.7 * var(--v) / 100); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 60%, transparent)); transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1); }
.rs-ring strong { position: relative; font-size: 21px; letter-spacing: -.04em; color: #fff; }
.rs-stat small { display: block; color: var(--c); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.rs-stat p { margin: 8px 0 0; color: #92a6b5; font-size: 13.5px; line-height: 1.55; }

/* Einsendungen */
.rs-log { margin-top: 18px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, rgba(14, 21, 32, .9), rgba(7, 11, 17, .96)); }
.rs-log[hidden] { display: none; }
.rs-log-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.rs-log-head b { font-size: 17px; }
.rs-count { padding: 4px 11px; border-radius: 999px; background: rgba(52, 211, 153, .12); color: #34d399; font-size: 12px; font-weight: 700; }
.rs-log .submission-log-row { display: grid; grid-template-columns: 2fr 1.4fr repeat(3, .7fr); gap: 14px; align-items: center; padding: 13px 14px; border-radius: 12px; font-size: 13.5px; }
.rs-log .submission-log-row:not(.submission-log-header):nth-child(odd) { background: rgba(255, 255, 255, .025); }
.rs-log .submission-log-header { color: #62768a; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.rs-log .submission-log-row span:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.rs-log .good { color: #34d399; font-weight: 700; }
.rs-log .accent { color: #67e8f9; font-weight: 700; }

/* Methode */
.rs-head { max-width: 780px; margin: 0 auto 50px; text-align: center; }
.rs-head h2 { margin: 0; font-size: clamp(38px, 5vw, 62px); line-height: 1; letter-spacing: -.05em; }
.rs-head > p:last-child { max-width: 620px; margin: 20px auto 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.rs-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rs-method-grid article { position: relative; padding: 32px 28px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(14, 21, 32, .85), rgba(7, 11, 17, .95)); overflow: hidden; }
.rs-method-grid article::after { content: ""; position: absolute; right: -70px; top: -70px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, .1), transparent 70%); }
.rs-ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 24px; border: 1px solid rgba(34, 211, 238, .3); border-radius: 14px; background: rgba(34, 211, 238, .08); color: #67e8f9; }
.rs-ico svg { width: 21px; height: 21px; }
.rs-method-grid small { color: #3fc7dc; font: 800 10px/1 "JetBrains Mono", Consolas, monospace; letter-spacing: .12em; }
.rs-method-grid h3 { margin: 10px 0 10px; font-size: 20px; letter-spacing: -.02em; }
.rs-method-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.rs-bottom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 40px; }
.rs-note { display: flex; gap: 16px; padding: 28px; border: 1px solid rgba(251, 191, 36, .22); border-radius: 20px; background: linear-gradient(120deg, rgba(251, 191, 36, .06), rgba(8, 13, 20, .9) 50%); }
.rs-note > span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(251, 191, 36, .5); border-radius: 50%; color: #fbbf24; font-weight: 800; }
.rs-note b { display: block; margin-bottom: 6px; color: #fde68a; font-size: 15px; }
.rs-note p { margin: 0; color: #b3a891; font-size: 13.5px; line-height: 1.7; }
.rs-submit { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 28px; border: 1px solid rgba(52, 211, 153, .25); border-radius: 20px; background: radial-gradient(400px 220px at 100% 0%, rgba(52, 211, 153, .12), transparent 65%), #070c12; }
.rs-submit b { font-size: 18px; }
.rs-submit p { margin: 0 0 10px; color: #92a6b5; font-size: 13.5px; line-height: 1.65; }

@media (max-width: 1100px) { .rs-stats { grid-template-columns: 1fr; } .rs-stat { max-width: 620px; width: 100%; margin: 0 auto; } }
@media (max-width: 900px) {
  .rs-hero { padding: 130px 0 50px; }
  .rs-method-grid, .rs-bottom { grid-template-columns: 1fr; }
  .rs-log .submission-log-row { grid-template-columns: 1.4fr 1fr repeat(3, .8fr); gap: 8px; font-size: 12px; padding: 10px 8px; }
}
@media (max-width: 560px) { .rs-stat { flex-direction: column; text-align: center; } .rs-log .submission-log-row span:nth-child(2) { display: none; } .rs-log .submission-log-row { grid-template-columns: 1.4fr repeat(3, .8fr); } }