:root{
  --bg:#05070a; --panel:#0e1218; --panel2:#11161d; --line:#223142;
  --text:#c9d4e2; --dim:#7d8fa3; --accent:#82decf; --accent2:#75b7ff; --warn:#ff8a6a;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;background:
    radial-gradient(1000px 600px at 25% 15%,#0f1620 0%,transparent 60%),var(--bg);
  color:var(--text);font-family:var(--mono);font-size:14px;-webkit-font-smoothing:antialiased;
}
.wrap{
  display:grid;grid-template-columns:auto minmax(0,380px);gap:24px;
  align-items:start;justify-content:center;
  padding:calc(26px + env(safe-area-inset-top,0px)) 20px calc(26px + env(safe-area-inset-bottom,0px));
}
.stage{
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 70px -24px rgba(0,0,0,.8);
  line-height:0;background:#060a0f;
}
video{display:block;max-width:100%;height:auto;width:480px;image-rendering:pixelated}

.panel{
  background:linear-gradient(162deg,rgba(255,255,255,.055),rgba(255,255,255,.016));
  -webkit-backdrop-filter:blur(26px) saturate(155%);backdrop-filter:blur(26px) saturate(155%);
  border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:22px 24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 30px 70px -24px rgba(0,0,0,.8);
}
h1{margin:0;font-size:1rem;font-weight:500;color:#eafff8}
.sub{margin:7px 0 0;color:var(--dim);font-size:.72rem;display:flex;gap:6px;flex-wrap:wrap}
.sub i{color:#3a4a5c;font-style:normal}

.rule{margin-top:20px;padding:14px 16px;border-radius:12px;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.06)}
.rule .lbl{color:var(--dim);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase}
.rule .val{margin-top:7px;color:var(--accent);font-size:.92rem;word-break:break-word}
.rule .tac{margin-top:4px;color:var(--dim);font-size:.72rem}

.gauge{margin-top:18px}
.gauge-row{display:flex;justify-content:space-between;align-items:baseline;
  color:var(--dim);font-size:.72rem;margin-bottom:7px}
.gauge-row b{color:var(--text);font-size:.86rem;font-weight:500}
.bar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.fill{height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width .1s linear}
.fill.low{background:linear-gradient(90deg,#ffb020,var(--warn))}

.ladder{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:5px}
.ladder li{display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:baseline;
  font-size:.71rem;color:#4b5c6e;padding:5px 8px;border-radius:7px;border:1px solid transparent}
.ladder li.on{color:var(--text);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)}
.ladder li.on .m{color:var(--accent)}
.ladder li .m{color:#2b3542}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.07)}
.stats b{display:block;font-size:1.25rem;font-weight:300;letter-spacing:-.02em;color:#eafff8}
.stats small{display:block;margin-top:3px;color:var(--dim);font-size:.66rem}

.verdict{margin-top:16px;padding:13px 15px;border-radius:11px;font-size:.76rem;line-height:1.6;
  border:1px solid rgba(255,138,106,.3);background:rgba(23,15,18,.8);color:var(--warn)}
.verdict.ok{border-color:rgba(130,222,207,.32);background:rgba(10,26,23,.8);color:var(--accent)}
.verdict[hidden]{display:none!important}

.controls{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:.76rem;color:var(--text);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);
  border-radius:10px;padding:8px 15px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.btn:hover{background:rgba(255,255,255,.1)}
.btn.go{color:#052018;background:linear-gradient(180deg,#9bf0de,#6fd0bb);border-color:rgba(155,240,222,.5)}
.speed{color:var(--dim);font-size:.72rem;display:flex;align-items:center;gap:7px;margin-left:auto}
select{font-family:var(--mono);font-size:.72rem;color:var(--text);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:6px 9px}
option{background:#11161d}

@media (max-width:900px){ .wrap{grid-template-columns:minmax(0,1fr)} }

.seen{margin-top:18px;padding:14px 16px;border-radius:12px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.06)}
.seen .lbl{color:var(--dim);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase}
.seen .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.seen .grid b{display:block;font-size:1rem;font-weight:400;color:#eafff8}
.seen .grid small{display:block;margin-top:2px;color:var(--dim);font-size:.63rem}
.shtrack{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.shtrack i{display:block;height:5px;border-radius:99px;background:rgba(255,255,255,.08)}
.shtrack i span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#ff8a6a,#ffb020);transition:width .12s linear}
.shlbl{margin-top:6px;color:var(--dim);font-size:.63rem}
.verdict{display:block;border-color:rgba(255,255,255,.12);
  background:rgba(0,0,0,.3);color:var(--dim);line-height:1.65}
.verdict b{color:var(--text)}
.verdict .warn{color:var(--warn)}