@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Roboto-Regular.woff2') format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Roboto-SemiBold.woff2') format('woff2')}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Roboto-Bold.woff2') format('woff2')}

:root{--ink:#292929;--muted:#5f6470;--line:#e7ebf2}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:transparent}
body{font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);line-height:1.4;padding:12px;-webkit-font-smoothing:antialiased}
.wrap{max-width:680px;margin:0 auto}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 6px 24px rgba(20,33,62,.07)}
.head{background:linear-gradient(135deg,#5b6cf0 0%,#2aabee 100%);color:#fff;padding:15px 18px}
.head h1{font-size:17px;font-weight:700;letter-spacing:-.2px}
.head p{font-size:12.5px;color:#e3f0ff;margin-top:3px}

.panel{padding:13px 16px 15px}
.panel.bad{background:#fdf3f2}
.panel.good{background:#f0faf3}
.p-head{font-size:13px;font-weight:600;margin-bottom:12px;line-height:1.35}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;margin-right:6px;vertical-align:1px}
.tag-bad{background:#fde0de;color:#a32d2d}
.tag-good{background:#dcf5e6;color:#0f7a37}

.flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.step{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto}
.ic{width:50px;height:50px;border-radius:14px;background:#fff;border:2px solid #cdd3e0;display:flex;align-items:center;justify-content:center;font-size:25px;transition:.25s}
.ic-z{border-color:#c7b9f0;background:#f3effc}
.ic.casc{border-color:#2aabee;background:#eef7ff}
.ic.banned{border-color:#e2453f;background:#fdecea}
.step .lb{font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.arrow{font-size:22px;color:#b6bdca;font-weight:700;flex:0 0 auto}
.arrow.fire.on{color:#e2453f;animation:pulse .5s infinite}
@keyframes pulse{50%{transform:scale(1.25)}}

.chans{display:flex;flex-direction:column;gap:7px;flex:1 1 230px;min-width:210px}
.chan{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:11px;border:2px solid transparent;background:#fff;transition:.25s;opacity:.9}
.chan img{width:30px;height:30px;border-radius:8px;display:block;flex:0 0 auto}
.chan .cn{font-size:13px;font-weight:600;flex:1}
.chan .badge{font-size:11.5px;font-weight:700;white-space:nowrap}
.chan.checking{border-color:#2aabee;background:#eef7ff;opacity:1}
.chan.checking .badge{color:#185fa5}
.chan.miss{opacity:.4}
.chan.miss .badge{color:#9aa1b2}
.chan.hit{border-color:#1f9d4d;background:#eafaef;opacity:1}
.chan.hit .badge{color:#0f7a37}
.chan.blast{border-color:#e2453f;background:#fdecea;opacity:1}
.chan.blast .badge{color:#a32d2d}

.branch{display:flex;align-items:center;gap:8px;align-self:flex-end;flex:0 0 auto;opacity:0;max-width:0;overflow:hidden;transition:opacity .3s,max-width .45s}
.branch.on{opacity:1;max-width:180px}
.branch-arrow{font-size:20px;color:#7bc9a0;font-weight:700;flex:0 0 auto}
.nums{display:flex;flex-direction:column;gap:5px}
.nums-lb{font-size:10px;color:#0f7a37;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:1px;white-space:nowrap}
.num{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#1f9d4d;border:2px solid #bfe3cd;background:#fff;border-radius:9px;padding:3px 9px;white-space:nowrap;transition:.18s}
.num.act{border-color:#1f9d4d;background:#1f9d4d;color:#fff;transform:translateX(3px)}

.outcome{margin-top:12px;font-size:13px;font-weight:700;text-align:center;padding:9px 12px;border-radius:11px;min-height:38px;transition:.3s;background:transparent;color:transparent}
.outcome.bad{background:#fde0de;color:#a32d2d}
.outcome.good{background:#dcf5e6;color:#0f7a37}

.vs{text-align:center;font-size:12px;font-weight:800;color:#9aa1b2;letter-spacing:1px;padding:3px 0;background:#fff;position:relative}
.vs::before,.vs::after{content:"";position:absolute;top:50%;width:40%;height:1px;background:var(--line)}
.vs::before{left:5%}.vs::after{right:5%}

@media(max-width:480px){
  .head h1{font-size:15.5px}
  .ic{width:44px;height:44px;font-size:22px}
  .chans{flex-basis:100%}
}