/* Only gameplay and artwork inside engine-owned slots. */
@layer game {
.sled-board, .sled-mark, .sled-constellation {
  --sled-night: #11172b;
  --sled-night-soft: #1b2744;
  --sled-blue: #87aee8;
  --sled-gold: #f5cd68;
  --sled-cream: #fff7db;
  --sled-error: #b83c48;
}

.sled-mark { position: relative; display: block; width: 2.9rem; height: 2.9rem; flex: 0 0 auto; border-radius: 0.85rem; background: var(--sled-night); box-shadow: 0 3px 0 #080c18; transform: rotate(-3deg); }
.sled-mark i { position: absolute; width: 0.48rem; height: 0.48rem; border-radius: 50%; background: var(--sled-gold); box-shadow: 0 0 0.65rem rgb(245 205 104 / 75%); }
.sled-mark i:nth-child(1) { left: 0.45rem; bottom: 0.5rem; }
.sled-mark i:nth-child(2) { left: 1.18rem; top: 0.42rem; }
.sled-mark i:nth-child(3) { right: 0.38rem; bottom: 0.68rem; }
.sled-mark::before, .sled-mark::after { content: ""; position: absolute; height: 0.12rem; background: var(--sled-blue); transform-origin: left center; }
.sled-mark::before { width: 1.28rem; left: 0.7rem; bottom: 0.78rem; transform: rotate(-52deg); }
.sled-mark::after { width: 1.15rem; left: 1.48rem; top: 0.72rem; transform: rotate(44deg); }


.sled-board {
  width: min(25rem, calc(100% - 1rem));
  aspect-ratio: 1;
  margin: 0.5rem auto 1rem;
  padding: clamp(1rem, 4vw, 1.6rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 3vw, 1.35rem);
  border: 1px solid rgb(135 174 232 / 28%);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 50% 44%, rgb(57 77 116 / 36%), transparent 62%),
    linear-gradient(150deg, var(--sled-night-soft), var(--sled-night));
  box-shadow: inset 0 0 0 0.35rem rgb(255 255 255 / 3%), 0 0.3rem 0.8rem rgb(17 23 43 / 18%);
}

.sled-point {
  position: relative;
  min-width: 0;
  min-height: 3rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0.14rem solid rgb(135 174 232 / 52%);
  border-radius: 50%;
  color: rgb(255 247 219 / 62%);
  background: radial-gradient(circle, #263657 0 45%, #1a2541 47% 100%);
  box-shadow: 0 0.35rem 0 #0a1020, inset 0 0 1.1rem rgb(135 174 232 / 9%);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 150ms, color 150ms, background 150ms, box-shadow 150ms, transform 150ms;
}
.sled-point span { font: 800 0.7rem var(--gse-font-mono); opacity: 0.72; }
.sled-board[data-input="enabled"] .sled-point:hover { border-color: var(--sled-blue); transform: translateY(-0.16rem); }
.sled-board[data-input="enabled"] .sled-point:active { transform: translateY(0.18rem); box-shadow: 0 0.08rem 0 #0a1020; }
.sled-point:focus-visible { outline: 0.22rem solid var(--sled-cream); outline-offset: 0.18rem; }
.sled-point.is-lit { border-color: var(--sled-cream); color: var(--sled-night); background: var(--sled-gold); box-shadow: 0 0 0 0.34rem rgb(245 205 104 / 18%), 0 0 2.4rem rgb(245 205 104 / 92%), 0 0.25rem 0 #b88c32; transform: scale(1.08); }
.sled-point.is-correct { border-color: #d9f2dc; color: #112f24; background: #7fd096; box-shadow: 0 0 1.5rem rgb(127 208 150 / 66%); }
.sled-point.is-wrong { border-color: #ffd5d5; color: white; background: var(--sled-error); box-shadow: 0 0 0 0.28rem rgb(184 60 72 / 24%); }
.sled-point.is-wrong::after { content: "×"; position: absolute; font-size: 2rem; font-weight: 900; }
.sled-point.is-wrong span { opacity: 0; }
.sled-point.is-expected { border-color: var(--sled-cream); color: var(--sled-night); background: var(--sled-gold); box-shadow: 0 0 0 0.28rem rgb(245 205 104 / 22%), 0 0 1.7rem rgb(245 205 104 / 72%); }
.sled-point.is-expected::after { content: "★"; position: absolute; font-size: 1.45rem; }
.sled-point.is-expected span { opacity: 0; }


.sled-constellation { display: flex; align-items: center; justify-content: center; }
.sled-constellation i { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: var(--sled-night); background: var(--sled-gold); font: 900 0.66rem var(--gse-font-mono); box-shadow: 0 0 1rem rgb(245 205 104 / 48%); }
.sled-constellation span { width: 2.5rem; height: 0.14rem; background: var(--sled-blue); transform: rotate(-10deg); }
.sled-constellation span:nth-of-type(2) { transform: rotate(12deg); }

@media (max-width: 49.375rem) {
  .sled-board { width: min(23rem, calc(100% - 1rem)); }
}
@media (max-width: 32.5rem) {
  .sled-board { width: min(21rem, calc(100% - 1rem)); padding: 0.9rem; gap: 0.75rem; border-radius: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sled-point.is-lit { transform: none; }
}
}