:root{
  --green:#1E4D3A; --green-2:#2C6A50; --brass:#C9A227; --mahogany:#3B1F14; --red:#B3202A;
  --paper:#F1E9D8; --ink:#1E1611; --bg:#1A110C; --fg:#F1E9D8; --muted:#BBA88F; --panel:#2A1B13; --line:#4A3426;
  --display:"Alfa Slab One", Rockwell, "Roboto Slab", Georgia, serif;
  --body:"Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  color-scheme:dark; box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:18px;line-height:1.35;-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
[hidden]{display:none!important}
h1,h2{font-family:var(--display);font-weight:400;margin:0}
.btn{border:0;border-radius:10px;padding:12px 16px;font-weight:700;font-size:19px;background:var(--red);color:#fff}
.btn.alt{background:transparent;border:2px solid var(--line);color:var(--fg)}
.btn:disabled{opacity:.5}
input,select{font:inherit;font-size:19px;padding:10px;border-radius:8px;border:2px solid var(--line);background:#120B07;color:var(--fg);width:100%}
.note{color:var(--muted);font-size:15px}

/* Board pieces */
.field{position:relative;overflow:hidden;border-radius:14px;border:4px solid var(--brass);background:#6FB2E3}
.locname{position:absolute;top:10px;left:14px;z-index:3;font-family:var(--display);color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.5)}
.board{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}
.facade svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.street{position:absolute;left:0;right:0;bottom:0;z-index:0;background:linear-gradient(#8E877B 0 14%,#5E584F 14% 17%,#34322F 17%)}
.hole{position:absolute}
.slot{position:absolute;inset:0;overflow:hidden}
.hole.arch .slot{border-radius:50% 50% 0 0/29% 29% 0 0}
.hole.door .slot{border-radius:50% 50% 0 0/21% 21% 0 0}
.pop{position:absolute;left:2%;right:2%;bottom:0;height:100%;transform:translateY(105%);transition:transform .13s ease-out}
.hole.arch .pop{height:94%}
.hole.door .pop{height:80%}
.pop svg{width:100%;height:100%;display:block}
.hole.up .pop{transform:translateY(0)}
.hole.hit .pop{animation:wob .3s linear}
@keyframes wob{25%{rotate:-9deg}75%{rotate:7deg}}
.rigs{position:absolute;inset:0;z-index:4;pointer-events:none}
.rig{position:absolute;width:0;height:0;transition:transform 60ms ease-out}
.arm{position:absolute;left:0;top:0}
.stick{position:absolute;left:calc(var(--h)*-.012*var(--sw,1));bottom:calc(var(--h)*-.06);width:calc(var(--h)*.024*var(--sw,1));height:calc(var(--h)*.46*var(--len,1))}
.hand{position:absolute;left:calc(var(--h)*-.06);top:calc(var(--h)*-.05);width:calc(var(--h)*.12);height:calc(var(--h)*.8)}
.stick svg,.hand svg{width:100%;height:100%;display:block}
.tag{position:absolute;left:50%;top:6%;transform:translateX(-50%);z-index:4;color:#fff;font-weight:700;border-radius:999px;padding:2px 10px;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6);font-size:clamp(12px,1.6vw,26px)}
.tag:empty{display:none}
.eyes-x,.stars{display:none}
.hit .eyes-x,.hit .stars{display:inline}
.hit .eyes-o{display:none}
.banner{position:absolute;left:50%;top:30%;z-index:5;width:92%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;
  font-family:var(--display);color:#FFE27A;text-align:center;line-height:1;text-shadow:3px 3px 0 var(--red),-2px -2px 0 var(--mahogany),0 0 18px rgba(0,0,0,.6)}
.banner.show{animation:ban 1.4s ease-out forwards}
.banner small{display:block;font-family:var(--body);font-weight:700;color:#fff;text-shadow:2px 2px 0 #000;margin-top:4px;font-size:.45em}
@keyframes ban{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) scale(1)}}
.avatar svg{width:100%;height:auto;display:block}
@media (prefers-reduced-motion: reduce){ .pop{transition-duration:.05s} .banner.show{animation-duration:2s} }