/* Perfect: a sketchbook page. A white pad with a faint dot grid to steady
   your hand, black ink while you draw, then the real outline laid over it in
   blue and your line colored by how close each bit came. */

:root { --sky: #9cc4ff; --blue: #2b67d1; }
.perfect { --game: var(--sky); gap: 16px; }

.brief { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.ref {
  display: grid; place-items: center; width: 96px; height: 96px; border-radius: 8px;
  background: #eef4ff; font: 700 36px var(--slab); color: var(--blue);
}
.ref svg { width: 72px; height: 72px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.brief-txt { min-width: 0; }
.today { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.shape-name { margin: 0 0 8px; font: 700 28px/1.1 var(--slab); }
.mode { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; }
.mode button {
  height: 32px; padding: 0 12px; border: 0; background: var(--paper); cursor: pointer;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.mode button[aria-checked='true'] { background: var(--ink); color: var(--paper); }
.mode button:disabled { cursor: default; }
.mode.locked button:not([aria-checked='true']) { color: #b3b3b3; }

.pad-wrap { position: relative; }
.pad {
  display: block; width: 100%; aspect-ratio: 1; border: 1px solid var(--rule); border-radius: 8px;
  background-color: #fff;
  background-image: radial-gradient(circle, #d9e3f2 1.2px, transparent 1.4px);
  background-size: 22px 22px; background-position: 11px 11px;
  touch-action: none; cursor: crosshair;
}
.pad-hint {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
  font-size: 15px; color: #a3a3a3; pointer-events: none;
}
.pad-hint[hidden] { display: none; }
/* the score sits on a white pill so a big drawing can't hide it */
.pad-score {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); margin: 0; pointer-events: none;
  display: flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px var(--rule);
  font: 800 30px/1 var(--ui); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap;
}
.pad-score:empty { display: none; }
.pad-score small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }

.tries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tries li {
  display: grid; place-items: center; height: 44px; border: 1.5px dashed var(--rule); border-radius: 6px;
  font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: #b3b3b3;
}
.tries li.done { border-style: solid; border-color: var(--rule); color: var(--ink); }
.tries li.best { border-color: var(--ink); background: #eef4ff; }

.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acts .btn { width: 100%; }

/* results */
.res-pic { display: block; width: 160px; height: 160px; margin: 6px auto 4px; }
.res-pic .t { fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 5 5; opacity: 0.8; }
.res-pic .d { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.legend { display: flex; gap: 14px; justify-content: center; margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 18px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 3px solid var(--ink); }
.legend i.t { border-top: 2px dashed var(--blue); }