*{box-sizing:border-box;margin:0}html,body{height:100%;background:#10131a;color:#e8ecf3;font-family:system-ui,sans-serif}body{display:grid;place-items:center}:root{--u: min(1vw, 1.3333vh)}.screen{width:calc(100 * var(--u));aspect-ratio:4 / 3;display:grid;grid-template-rows:auto 1fr auto;gap:calc(2 * var(--u));padding:calc(3 * var(--u));background:#1a1f2b;font-size:calc(2.6 * var(--u))}header{display:flex;justify-content:space-between;font-size:calc(3.2 * var(--u))}h2{font-size:calc(2.4 * var(--u));color:#9aa4b5;margin:calc(1 * var(--u)) 0 calc(.6 * var(--u))}.grid{display:grid;gap:calc(.8 * var(--u))}.grid.normal,.grid.pb{grid-template-columns:repeat(10,1fr)}.cell{display:grid;place-items:center;aspect-ratio:1.6;border:calc(.2 * var(--u)) solid #3a4356;border-radius:calc(.8 * var(--u));color:#9aa4b5}.cell.hit{background:#f2c14e;border-color:#f2c14e;color:#10131a;font-weight:700}.pb .cell.hit{background:#e5534b;border-color:#e5534b;color:#fff}.result{display:flex;gap:calc(1.2 * var(--u));margin:calc(1 * var(--u)) 0;min-height:calc(7 * var(--u))}.ball{display:grid;place-items:center;width:calc(7 * var(--u));aspect-ratio:1;border-radius:50%;background:#f2c14e;color:#10131a;font-weight:700;font-size:calc(3.4 * var(--u))}.ball.pb{background:#e5534b;color:#fff}.labels{color:#c7cfdc}.status{color:#e5534b}