.starpath-page { background: #fffefa; }
.starpath-page .game-main { max-width: 640px; padding-top: 34px; }
.starpath-page .game-heading { margin-bottom: 26px; }
.starpath-page .game-heading h1 { font-size: clamp(3rem, 10vw, 4.5rem); margin-bottom: 8px; }
.starpath-page .game-heading > p:last-child { font-size: 1rem; }
.sp-card { color: #eff0f9; background: #12182c; border: 1px solid #303854; border-top: 5px solid #8b83db; border-radius: 24px; padding: 24px; box-shadow: 0 18px 48px #171d3420; }
.sp-card [hidden] { display: none !important; }
.sp-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .72rem; font-weight: 750; letter-spacing: .07em; color: #c6cbe1; }
.sp-clock { display: flex; align-items: center; gap: 10px; }
.sp-clock time { display: inline-block; color: #ffe6a0; font-size: 1rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sp-card button { min-height: 44px; border: 1px solid #7483a3; border-radius: 10px; background: #222c46; color: #f0f2ff; cursor: pointer; padding: 8px 14px; font-weight: 700; touch-action: manipulation; }
.sp-card button:disabled { cursor: default; }
.sp-card button:focus-visible { outline: 3px solid #fff2b9; outline-offset: 3px; }
.sp-card button:not(:disabled):hover { border-color: #ffe5a0; }
.sp-rules { font-size: .9rem; line-height: 1.65; margin: 18px 0 8px; color: #d8dcee; }
.sp-rules strong { color: #fff1cb; font-weight: 650; }
.sp-note { color: #b9c0d7; font-size: .76rem; line-height: 1.5; text-align: center; }
.sp-instruction { font-size: .8rem; line-height: 1.5; text-align: center; color: #c5cce2; margin: 18px 0; }
.sp-instruction strong { color: #ffe6a0; }
.sp-stage { max-width: 456px; margin: auto; }
.sp-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; user-select: none; -webkit-user-select: none; }
.sp-card .sp-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 0; aspect-ratio: 1; padding: 0; border: 1px solid #7381a0; border-radius: 9px; background: #242e47; font-size: clamp(1.3rem, 5vw, 1.85rem); line-height: 1; touch-action: manipulation; }
.sp-card .sp-cell:disabled { opacity: 1; }
.sp-card .sp-clue { background: #f1f0e8; color: #202639; border-color: #f1f0e8; font-weight: 800; }
.sp-card .sp-path { color: #20273a; background: #ffe6a0; border-color: #fff0c6; }
.sp-card .sp-out { color: #abb5cc; font-size: 1.4rem; font-weight: 400; }
.sp-card .sp-endpoint { background: #363754; color: #ffe6a0; border-color: #a39ad2; font-size: 1.2rem; }
.sp-endpoint span { font-size: clamp(.58rem, 1.8vw, .66rem); letter-spacing: .035em; font-weight: 800; margin-top: 6px; }
.sp-controls { display: flex; justify-content: space-between; align-items: center; gap: 8px; max-width: 456px; margin: 14px auto 0; }
.sp-controls > span { font-size: .72rem; color: #b9c0d7; }
.sp-card #sp-reset { font-size: .76rem; background: transparent; }
.sp-paused { min-height: 300px; aspect-ratio: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px; background: #192139; border-radius: 12px; }
.sp-paused h2 { text-transform: uppercase; font-size: 1rem; letter-spacing: .18em; }
.sp-paused p { color: #c5cce2; font-size: .9rem; line-height: 1.5; max-width: 260px; }
.sp-pause-star { color: #ffe6a0; font-size: 2.5rem; }
.sp-card .sp-primary { background: #ffe6a0; color: #20273a; border-color: #ffe6a0; padding: 12px 24px; }
.sp-result { margin-top: 22px; text-align: center; padding: 20px 12px; border: 1px solid #5b5870; border-radius: 14px; background: #1e2741; }
.sp-result h2 { font-size: 1rem; letter-spacing: .1em; }
.sp-result #sp-result-time { color: #ffe6a0; font-size: 2.5rem; font-weight: 800; margin: 10px 0; font-variant-numeric: tabular-nums; }
.sp-result textarea { width: 100%; min-height: 115px; margin-top: 16px; padding: 12px; background: #fffefa; color: #20273a; border-radius: 8px; }
.sp-status { text-align: center; font-size: .85rem; line-height: 1.5; color: #ffe6a0; }
.sp-status:empty { display: none; }
.sp-loading { padding: 40px 10px; text-align: center; line-height: 1.6; }
.sp-card .sp-celebrate { animation: sp-glow 280ms ease both; animation-delay: var(--sp-delay); }
@keyframes sp-glow { 50% { transform: scale(1.08); box-shadow: 0 0 16px #ffe6a088; } }
@media (max-width: 600px) {
  .starpath-page .game-main { width: calc(100% - 20px); padding-top: 24px; }
  .sp-card { padding: 14px; border-radius: 20px; }
  .sp-grid { gap: 4px; }
  .sp-meta { font-size: .65rem; letter-spacing: .02em; }
  .sp-clock { gap: 6px; }
  .sp-card #sp-pause { padding: 8px; font-size: .75rem; }
  .sp-rules { font-size: .82rem; }
  .sp-card .sp-cell { border-radius: 7px; }
}
@media (prefers-reduced-motion: reduce) { .sp-card .sp-celebrate { animation: none; } }
@media (max-width: 360px) {
  .starpath-page .game-main { width: calc(100% - 12px); }
  .sp-card { padding: 10px; }
}