/* The Big Knock (sprint 29 item 3): the hall banner, the door panel, the wait and the big reveal. Ink and paper only, the sentence font,
   square corners, stepped motion. Reduced motion (and .still): no animation at all. */
#bkbanner{position:fixed;left:0;right:0;top:var(--bk-top,0);height:56px;z-index:25;display:flex;align-items:center;gap:8px;padding:0 8px 0 12px;
  background:#fff;color:#000;border-top:2px solid #000;border-bottom:4px solid #000;box-shadow:0 2px 0 #fff;
  font:700 18px/24px "Atkinson Hyperlegible",Verdana,sans-serif}
#bkbanner[hidden]{display:none}
#bkbanner .t,#bigknock .t{filter:url(#bitb)}
#bkbanner .bk-title{flex:0 1 auto;min-width:0}
#bkbanner .bk-clock{flex:1 1 auto;text-align:right;white-space:nowrap}
#bkbanner .bk-see{flex:0 0 auto;min-width:56px;height:44px;padding:0 12px;background:#fff;color:#000;border:4px solid #000;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #000;font:700 18px/22px "Atkinson Hyperlegible",Verdana,sans-serif;cursor:pointer}
#bkbanner .bk-see:focus-visible,#bigknock a:focus-visible,#bigknock .btn:focus-visible{outline:3px dotted #000;outline-offset:3px}
#bkbanner .bk-see:focus-visible{outline:3px dotted #000;outline-offset:3px}
/* a countdown's m:ss is Jersey 10 (the art bible: numbers in the pixel font, words in the sentence font); client/bigknock.js numerals() */
.bk-num{font-family:"Jersey 10",monospace;font-weight:400;font-size:1.3em;line-height:1;letter-spacing:.02em}
#bigknock .bk-big .bk-num{font-size:1.5em}

#bigknock{position:fixed;inset:0 0 44px 0;z-index:31;display:flex;align-items:center;justify-content:center;padding:10px;overflow-y:auto;
  background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23fff'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E");
  font:17px/22px "Atkinson Hyperlegible",Verdana,sans-serif;color:#000}
#bigknock[hidden]{display:none}
#bigknock .bk-card{width:min(380px,100%);margin:auto;background:#fff;border:2px solid #000;box-shadow:4px 4px 0 #fff;padding:0 0 12px}
#bigknock .bk-card>*{margin:0 16px}
#bigknock .bk-card>.bk-card-title{margin:0 0 10px;padding:6px 14px;text-align:center;font:700 22px/30px "Atkinson Hyperlegible",Verdana,sans-serif;border-bottom:2px solid #000;background:repeating-linear-gradient(#000 0 2px,#fff 2px 4px);display:flex;justify-content:center}
#bigknock .plate{background:#fff;padding:0 12px}
#bigknock .bk-big{text-align:center;font:700 28px/34px "Atkinson Hyperlegible",Verdana,sans-serif}
#bigknock .bk-calls{margin-top:6px;text-align:center;font:700 18px/24px "Atkinson Hyperlegible",Verdana,sans-serif}
#bigknock .bk-rule{font-size:14px;line-height:18px;text-align:center}
#bigknock .bk-rule[hidden]{display:none}
#bigknock .bk-crowd{margin-top:2px;text-align:center;font:700 20px/26px "Atkinson Hyperlegible",Verdana,sans-serif;border-top:2px solid #000;border-bottom:2px solid #000;padding:4px 0}
#bigknock .bk-line{margin-top:8px;font:700 17px/22px "Atkinson Hyperlegible",Verdana,sans-serif}
#bigknock .bk-rules{margin-top:6px;padding-left:0;list-style:none;font:16px/22px "Atkinson Hyperlegible",Verdana,sans-serif}
#bigknock .bk-rules li{position:relative;padding-left:20px}
#bigknock .bk-rules li::before{content:"";position:absolute;left:4px;top:8px;width:7px;height:7px;background:#000} /* a square, so no antialiased disc */
#bigknock .bk-gate,#bigknock .bk-truth,#bigknock .bk-next,#bigknock .bk-rule{margin-top:6px;font:15px/20px "Atkinson Hyperlegible",Verdana,sans-serif}
#bigknock .bk-gate:empty,#bigknock .bk-note:empty{display:none}
#bigknock .bk-note{margin-top:6px;font:700 16px/22px "Atkinson Hyperlegible",Verdana,sans-serif}
#bigknock .bk-actions{display:flex;gap:8px;margin-top:10px}
#bigknock .btn{flex:1 1 0;min-height:48px;padding:0 10px;background:#fff;color:#000;border:2px solid #000;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #000;font:700 18px/22px "Atkinson Hyperlegible",Verdana,sans-serif;cursor:pointer}
#bigknock .btn:active{background:#000;color:#fff}
#bigknock .btn:disabled{cursor:default;color:#000;box-shadow:none}
#bigknock .bk-go:not(:disabled){border-width:4px;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #000}
#bigknock .bk-verify{display:block;margin-top:8px;text-align:center;color:#000;font:16px/22px "Atkinson Hyperlegible",Verdana,sans-serif;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* the reveal: the hard visitor in its window first (client/bigknock-visitor.js draws it into .bk-art), then the three steps in a fixed place so nothing
   moves when a step appears; the envelope or the keyring sits in "your result" (.bk-prize) */
#bigknock .bk-art{position:relative;height:200px;overflow:hidden;margin:0 0 8px;background:#000;border-top:0;border-bottom:2px solid #000}
#bigknock .bk-art canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;image-rendering:pixelated}
/* the hard visitor at the stage's 2x (bigknock-visitor.js SCALE): the glass is 360 px wide and fills the box; the box shows the arch and the visitor
   down to the near snow (glass rows 0 to 136), the ink pad and the sill are cut off. Whole px offsets only. */
#bigknock .bk-art.visitor{height:280px}
#bigknock .bk-art.visitor canvas{top:-8px;left:calc(50% - 196px);transform:none}
#bigknock .bk-prize{position:relative;height:150px;overflow:hidden;margin:6px -16px 8px;background:#000}
#bigknock .bk-prize.fooled,#bigknock .bk-prize.right{background:#fff}
#bigknock .bk-prize>span{position:absolute;display:block;background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated}
#bigknock .bk-prize .bk-pic.keyring{left:calc(50% - 70px);top:5px;width:140px;height:140px} /* mail-art.js keyringRing: 70 art px at 2x */
#bigknock .bk-step[hidden]{display:block;visibility:hidden}
#bigknock .bk-kind{font:700 24px/30px "Atkinson Hyperlegible",Verdana,sans-serif;text-align:center}
#bigknock .bk-count,#bigknock .bk-drawn{text-align:center;font:18px/24px "Atkinson Hyperlegible",Verdana,sans-serif}
#bigknock .bk-you{margin-top:6px;padding-top:6px;border-top:2px solid #000;text-align:center}
#bigknock .bk-head{font:700 22px/28px "Atkinson Hyperlegible",Verdana,sans-serif}
#bigknock .bk-gain{font:700 18px/24px "Atkinson Hyperlegible",Verdana,sans-serif}
#bigknock .bk-next{text-align:center}

@media (prefers-reduced-motion:no-preference){
  #bigknock .bk-reveal:not(.still) .bk-step:not([hidden]) .bk-rays{animation:bk-rays .9s steps(3) both}
  #bigknock .bk-reveal:not(.still) .bk-step:not([hidden]) .bk-pic{animation:bk-pop .6s steps(4) both}
  #bigknock .bk-reveal:not(.still) .bk-step:not([hidden]) .bk-mark{animation:bk-pop .6s .6s steps(4) both}
}
@keyframes bk-rays{from{opacity:0}to{opacity:1}}
@keyframes bk-pop{from{transform:translateY(24px) scale(.8);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#bkbanner,#bigknock,#bigknock *{animation:none!important;transition:none!important}}

/* sprint 31 fix pass: the disclaimer strip stays on top of the window, which ends above it (as the envelope veil does) */
html:has(#bigknock:not([hidden])) #strip,html:has(#tonight:not([hidden])) #strip{display:block!important;z-index:40;height:44px}