/* Calibration overlay (?calibrate=1): cream outlines with a dark shadow so they read on black. */
.calibrating, .calibrating * { cursor: crosshair; }
.calib { position: fixed; inset: 0; z-index: 100; touch-action: none; font-family: var(--sans); }
.calib-rect, .calib-strip {
  position: absolute;
  outline: 1px solid var(--cream);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.8);
}
.calib-rect { background: rgba(246, 231, 200, 0.1); }
.calib-circle {
  position: absolute;
  inset: 0;
  margin: auto;
  border: 1px solid var(--cream);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.calib-handle {
  position: absolute;
  right: -2.5vh;
  bottom: -2.5vh;
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  background: var(--lamp);
  border: 1px solid #000;
}
.calib-tag {
  position: absolute;
  padding: 0.6vh 1.2vh;
  border: 1px solid var(--fog);
  border-radius: 0.5vh;
  background: rgba(11, 11, 10, 0.9);
  color: var(--cream);
  font: 400 2vh/1 var(--sans);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.calib-strip .calib-tag { left: 1vh; bottom: 1vh; }
.calib-strip .calib-handle { right: 1vh; bottom: 1vh; }
.calib-rect .calib-tag { right: 0; bottom: calc(100% + 1vh); }
.calib-dot {
  position: absolute;
  width: 3vh;
  height: 3vh;
  margin: -1.5vh 0 0 -1.5vh;
  border-radius: 50%;
  background: rgba(201, 88, 75, 0.9);
  transition: opacity 2s ease-out;
}
.calib-dot.hit { background: rgba(255, 248, 234, 0.95); }
.calib-dot.fade { opacity: 0; }
.calib-panel {
  position: absolute;
  left: 2%;
  top: 3%;
  padding: 1.5vh 2vh;
  border-radius: 1vh;
  background: rgba(20, 19, 17, 0.9);
  color: var(--cream);
  font: 400 2.2vh/1.45 var(--sans);
  font-variant-numeric: tabular-nums;
  user-select: text;
  z-index: 2;
}
.calib-panel button {
  margin: 1vh 1vh 0 0;
  padding: 0.8vh 1.6vh;
  border: 0;
  border-radius: 0.6vh;
  background: var(--lamp);
  color: #1B1A18;
  font: inherit;
}
.calib-line { position: absolute; left: 0; right: 0; height: 0; border-top: 0.2vh dashed rgba(236, 230, 220, 0.35); }

/* Shell cutting template (?template=1): white on black, traced onto the shell. */
.template { position: fixed; inset: 0; z-index: 200; background: #000; color: #fff; font: 400 2.4vh/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.template * { position: absolute; }
.t-strip { outline: 2px solid #fff; outline-offset: -1px; }
.t-hole { border: 2px solid #fff; border-radius: 50%; box-sizing: border-box; }
.t-h { height: 0; border-top: 1px solid #fff; }
.t-v { width: 0; border-left: 1px solid #fff; }
.t-label { white-space: nowrap; transform: translate(-50%, -50%); background: #000; padding: 0.4vh 1vh; }
.t-end { transform: translate(-100%, -50%); }
.t-title { left: 2%; top: 2%; color: #aaa; background: #000; padding-right: 1vh; z-index: 1; }