:root{
  --card:Canvas;
  --mut:GrayText;
  --bd:#8886;
}
body{max-width:1200px}
svg,table{width:100%;}
th,td{padding:4px 6px;text-align:left}

#mp{
  border: 1px solid;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  aspect-ratio:40030/12742;
  cursor:grab;
}
@media (max-width:640px){
  #mp{aspect-ratio:1}
}

#go,#reset{font-size:1.2rem}
/* the guess button shakes when the player runs out of guesses */
#go.shake{animation:shake .5s}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-8px)}
  40%,60%{transform:translateX(8px)}
}
div.foot label{font-size:1.2rem}
div.foot input[type=radio]{height:1.4em;vertical-align:middle}

/* map layer: JS writes geometry + one font-size on the group; all paint is here.
   non-scaling-stroke keeps marker outlines at fixed CSS px regardless of zoom. */
#pk polygon{fill:var(--mut);stroke:currentColor;stroke-width:1.5px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#pk polygon.sel{stroke-width:3px}
#pk [data-i]{cursor:pointer}
#pk text{fill:CanvasText;stroke:var(--card);stroke-width:.22em;paint-order:stroke}

/* chart layer */
#ch{height:300px}
#ch line{stroke:var(--bd);stroke-width:.5}
#ch text{fill:currentColor;text-anchor:middle}
#ch text.start{text-anchor:start}
#ch text.end{text-anchor:end}
#ch text.b{font-weight:bold}
#ch polygon.ghost{fill:var(--mut);opacity:.5}
#ch .target-alt { stroke-width: 2px; }

/* confetti overlay */
canvas.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:99}

/* clipboard fallback in the share message */
#shm textarea{width:100%}

/* temporary message (toast) shown above the guess/share button */
#toast{
  position:fixed;
  transform:translate(-50%,calc(-100% - .5em));
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:4px;
  padding:4px 8px;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
  z-index:100;
}
#toast.show{opacity:1}