*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #fff;
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Bradley Hand", cursive, sans-serif;
  padding-top: 0.25rem;
}

.page {
  width: 100%;
  max-width: min(100vmin, 720px);
  padding: 0.25rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.gauge-stage {
  position: relative;
  width: 90vw;
  max-width: 620px;
  user-select: none;
  -webkit-user-select: none;
}

.gauge-stage img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

@media (min-width: 640px) {
  .gauge-stage {
    width: 70%;
    min-width: 520px;
    max-width: 620px;
  }
}

.gauge-image {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.needle-image {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 28%;
  max-width: 180px;
  height: auto;
  transform-origin: 50% 90%;
  transform: translate(-50%, -90%) rotate(-90deg);
  transition: transform 0.15s ease-out;
}

.needle-image.spinning {
  transition: none;
}

.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
  -webkit-user-select: none;
}

.spin-btn {
  padding: 0.55rem 1.6rem;
  font-size: 1.15rem;
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Bradley Hand", cursive, sans-serif;
  font-weight: bold;
  background: #fff;
  border: 3px solid #000;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.15);
  transform: rotate(-0.5deg);
}

.spin-btn:hover {
  background: #f5f5f5;
  transform: rotate(0.3deg);
}

.spin-btn:active {
  background: #e8e8e8;
  transform: rotate(-0.2deg);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}

.result {
  margin: 0;
  font-size: 1.25rem;
  font-weight: bold;
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Bradley Hand", cursive, sans-serif;
  color: #000;
}

.result-value {
  color: #333;
}

.result-value.result-low {
  color: #2d8a2d;
}

.result-value.result-medium {
  color: #e67e22;
}

.result-value.result-high {
  color: #a93226;
}

.ca-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ca-coming {
  margin: 0;
  font-size: 0.95rem;
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Bradley Hand", cursive, sans-serif;
  color: #666;
}

.copy-ca-btn {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Bradley Hand", cursive, sans-serif;
  background: #fff;
  border: 2px solid #999;
  border-radius: 4px;
  cursor: pointer;
  color: #333;
}

.copy-ca-btn:hover {
  background: #f5f5f5;
  border-color: #666;
}

.copy-ca-btn:active {
  background: #eee;
}