/* Buzzzer | daily stop the clock game */
.bz-main { background: var(--paper-2); padding: 34px 0 70px; min-height: 70vh; }
.bz-wrap { max-width: 1040px; }
.bz-kicker { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0 0 6px; text-align: center; }
.bz-title { font-family: var(--display); font-size: clamp(40px, 9vw, 64px); line-height: 1; text-align: center; margin: 0 0 10px; letter-spacing: .04em; }
.bz-lede { text-align: center; color: var(--ink-2); margin: 0 auto 24px; max-width: 460px; font-size: 18px; }
.bz-card { background: var(--paper); border: 1px solid var(--rule-strong); border-top: 4px solid var(--brand); padding: 22px 18px 24px; text-align: center; }
.bz-no { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.bz-label { font-family: var(--sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 14px 0 0; }
.bz-target { margin: 0 0 14px; font-family: var(--sans); font-weight: 800; font-size: clamp(54px, 15vw, 84px); line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--brand); }
.bz-target small { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: -4px; }
.bz-clock { background: var(--ink); color: #fff; font-family: var(--sans); font-weight: 700; font-size: clamp(44px, 14vw, 72px); font-variant-numeric: tabular-nums; letter-spacing: .04em; padding: 14px 10px; border-radius: 4px; transition: color .2s, background .2s; }
.bz-clock.dark { color: #4a4a4a; }
.bz-clock.win { background: #1c6b3a; }
.bz-hint { font-family: var(--sans); font-size: 14px; color: var(--muted); margin: 14px auto 16px; max-width: 420px; line-height: 1.45; }
.bz-btn { appearance: none; border: 0; cursor: pointer; background: var(--brand); color: #fff; font-family: var(--sans); font-weight: 800; font-size: 26px; letter-spacing: .12em; text-transform: uppercase; width: min(260px, 80%); height: 86px; border-radius: 43px; box-shadow: 0 6px 0 var(--brand-dark); touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .05s, box-shadow .05s; }
.bz-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--brand-dark); }
.bz-btn[hidden] { display: none !important; }
.bz-result { margin-top: 4px; }
.bz-dist-label { font-family: var(--sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 6px 0 0; }
.bz-dist { font-family: var(--sans); font-weight: 800; font-size: clamp(34px, 10vw, 52px); font-variant-numeric: tabular-nums; margin: 0; line-height: 1.15; }
.bz-dist.win { color: #1c6b3a; }
.bz-verdict { font-style: italic; color: var(--ink-2); margin: 4px 0 14px; }
.bz-share { text-align: center; white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; font-family: var(--sans); font-size: clamp(12px, 3.5vw, 16px); line-height: 1.9; font-weight: 600; letter-spacing: .01em; background: var(--ink); color: #fff; border-radius: 6px; border-top: 4px solid var(--brand); padding: 18px 8px 16px; margin: 0 0 16px; }
.bz-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.bz-x-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: .04em; padding: 11px 22px; border-radius: 3px; }
.bz-x-btn:hover { background: var(--ink); color: #fff; }
.bz-copied { display: block; margin-top: 10px; }
.bz-share-btn { appearance: none; border: 0; cursor: pointer; background: var(--ink); color: #fff; font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: .04em; padding: 13px 26px; border-radius: 3px; }
.bz-share-btn:hover { background: var(--brand); }
.bz-copied { font-family: var(--sans); font-size: 14px; color: #1c6b3a; font-weight: 700; }
.bz-next { font-family: var(--sans); font-size: 14px; color: var(--muted); margin: 16px 0 0; }
.bz-next b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bz-global { font-family: var(--sans); font-size: 14px; color: var(--ink-2); margin: 8px 0 0; }
.bz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.bz-stats b { display: block; font-family: var(--sans); font-size: 24px; font-variant-numeric: tabular-nums; }
.bz-stats span { font-family: var(--sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Drop down menu: How to play, Rules, Scorecard */
.bz-menu { margin-top: 22px; border-top: 1px solid var(--rule-strong); }
.bz-item { border-bottom: 1px solid var(--rule); }
.bz-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 4px; font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.bz-item summary::-webkit-details-marker { display: none; }
.bz-item summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--brand); border-top: 2px solid var(--brand); transform: rotate(45deg); transition: transform .2s ease; margin: 0 4px 0 2px; flex: none; }
.bz-item[open] summary::before { transform: rotate(135deg); }
.bz-item summary:hover span { color: var(--brand); }
.bz-body { padding: 2px 6px 20px 30px; color: var(--ink-2); font-size: 17px; animation: bzfade .2s ease; }
@keyframes bzfade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.bz-steps, .bz-rules { margin: 0; padding-left: 20px; }
.bz-steps li, .bz-rules li { margin-bottom: 8px; line-height: 1.5; }
.bz-steps b, .bz-rules b { color: var(--ink); }
.bz-body .bz-stats { padding-right: 24px; }
.bz-history { list-style: none; margin: 16px 0 0; padding: 0; font-family: var(--sans); font-size: 14px; }
.bz-history li { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--rule); }
.bz-history b { font-variant-numeric: tabular-nums; }
.bz-history b.win { color: #1c6b3a; }
.bz-empty { font-family: var(--sans); font-size: 14px; color: var(--muted); margin: 14px 0 0; }

/* Layout: game and how to play on the left, scorecards on the right */
.bz-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 900px) { .bz-cols { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; } .bz-right { position: sticky; top: 16px; } }
@media (max-width: 899px) { .bz-left, .bz-right { display: contents; } .bz-card { order: 1; } .bz-board { order: 2; } .bz-tally { order: 3; } .bz-menu { order: 4; margin-top: 0; } }
.bz-left { min-width: 0; }
@media (min-width: 900px) { .bz-right { display: flex; flex-direction: column; gap: 22px; min-width: 0; } }
@media (max-width: 899px) { .bz-board, .bz-tally { margin-top: 22px; } }
.bz-menu { margin-top: 22px; }
.bz-board, .bz-tally { background: var(--paper); border: 1px solid var(--rule-strong); border-top: 4px solid var(--ink); padding: 18px 16px 14px; min-width: 0; }
.bz-board { border-top-color: var(--brand); }
.bz-board h2, .bz-tally h2 { font-family: var(--display); font-size: 21px; margin: 0; letter-spacing: .02em; }
.bz-board-sub { font-family: var(--sans); font-size: 13px; color: var(--muted); margin: 4px 0 8px; }
.bz-rows { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 15px; max-height: 460px; overflow-y: auto; }
.bz-rows li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 6px; border-top: 1px solid var(--rule); }
.bz-rows .rk { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.bz-rows li:nth-child(-n+3) .rk { color: var(--brand); }
.bz-rows .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bz-rows .ds { font-variant-numeric: tabular-nums; font-weight: 800; }
.bz-rows li.win .ds { color: #1c6b3a; }
.bz-rows li.me { background: var(--brand-tint); border-radius: 3px; }
.bz-youare { font-family: var(--sans); font-size: 14px; font-weight: 600; margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--rule); }
.bz-tally .bz-stats { margin-top: 14px; padding-bottom: 6px; }
.bz-tally .bz-history { max-height: 280px; overflow-y: auto; }
.bz-board .bz-empty, .bz-tally .bz-empty { margin: 8px 0 4px; }
.bz-board .bz-empty[hidden], .bz-tally .bz-empty[hidden], .bz-youare[hidden] { display: none; }

/* name for today's scorecard */
.bz-name { margin: 2px auto 16px; padding: 14px 14px 10px; background: var(--brand-tint); border: 1px solid #e6c3c4; border-radius: 6px; text-align: center; max-width: 420px; }
.bz-name[hidden] { display: none; }
.bz-name label { display: block; font-family: var(--sans); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.bz-name-row { display: flex; gap: 8px; }
.bz-name-row input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 3px; background: #fff; }
.bz-name-add { appearance: none; border: 0; cursor: pointer; background: var(--brand); color: #fff; font-family: var(--sans); font-weight: 700; padding: 0 20px; border-radius: 3px; }
.bz-name-skip { appearance: none; border: 0; background: none; cursor: pointer; font-family: var(--sans); font-size: 13px; color: var(--muted); text-decoration: underline; margin-top: 8px; }
.bz-name-note { font-family: var(--sans); font-size: 12px; color: var(--muted); margin: 4px 0 0; }

/* unfair means popup */
.bz-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,10,14,.72);backdrop-filter:blur(3px)}
.bz-modal[hidden]{display:none}
.bz-modal-box{max-width:380px;width:100%;background:#fff;color:#16161a;border-radius:18px;padding:26px 24px 22px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.bz-modal-ic{margin:0 auto 12px;width:46px;height:46px;border-radius:50%;background:#c0262d;color:#fff;font:700 26px/46px system-ui,sans-serif}
.bz-modal-box h2{margin:0 0 8px;font-size:1.35rem}
.bz-modal-box p{margin:0 0 18px;font-size:.95rem;line-height:1.45;color:#444}
.bz-modal-box p.bz-modal-ic{color:#fff;margin:0 auto 12px}
.bz-modal-ok{border:0;border-radius:999px;background:#16161a;color:#fff;font:600 1rem system-ui,sans-serif;padding:11px 34px;cursor:pointer}
.bz-history .bad{color:#c0262d}
.bz-main .gm-ads { max-width: 1040px; margin-top: 36px; padding: 0; }
.bz-nameis { font-family: var(--sans); font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }
.bz-nameis[hidden] { display: none; }
.bz-nameis b { color: var(--ink); }
.bz-nameis button { appearance: none; border: 0; background: none; cursor: pointer; padding: 0; font: inherit; font-weight: 700; color: var(--brand); text-decoration: underline; }