:root {
  --paper: #f5f2ec;      /* the ice, a warm white */
  --ink: #1b1a17;        /* the letters and the text */
  --line: #cfc8bb;       /* the hairlines of the sheet */
  --muted: #8c867b;      /* the small text */
  --granite: #e8e4dc;    /* the face of the stones */
  --granite-edge: #bdb6a9; /* the rim of the stones */
  --accent: #3a63d8;     /* the one colour: the button of the house */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo Variable", system-ui, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.top, .bottom {
  position: absolute;
  left: clamp(16px, 4vw, 48px);
  right: clamp(16px, 4vw, 48px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: 0.01em;
  z-index: 3;
}
.top { top: clamp(14px, 3.2vh, 32px); }
.bottom { bottom: clamp(14px, 3.2vh, 32px); color: var(--muted); }
.top__brand { font-weight: 640; font-variation-settings: "wdth" 104; }
.top__note { color: var(--muted); }

.status { color: var(--muted); }
.status__n {
  display: inline-block;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.status.is-done, .status.is-done .status__n { color: var(--accent); }

.sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sheet line, .sheet circle { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sheet .button { stroke: var(--accent); stroke-width: 1.2; }
.sheet .button-fill { fill: var(--accent); stroke: none; opacity: 0; }
.sheet .lane { stroke: #ddd7cb; }

.stones { position: absolute; inset: 0; }

.stone {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  will-change: transform;
}
.stone__shadow {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 50, 35, 0.26), rgba(60, 50, 35, 0));
  transform: translate(-50%, -50%);
}
.stone__face {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 50% 50%, var(--granite) 58%, #d9d4ca 80%, var(--granite-edge) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(120, 110, 95, 0.32),
    inset 0 -2px 3px rgba(120, 110, 95, 0.16);
  cursor: default;
}
.stone__face::after {
  /* the running band, a thin ring where the stone touches the ice */
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(120, 110, 95, 0.18);
}
.stone__letter {
  position: relative;
  font-weight: 560;
  font-variation-settings: "wdth" 100;
  line-height: 1;
  color: var(--ink);
}
.stone.is-hack .stone__face { cursor: grab; }
.stone.is-held .stone__face { cursor: grabbing; }

.ring {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  border: 1px solid rgba(27, 26, 23, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .hint { max-width: 50%; }
}