/* Letter Orbit */
.lo-progress { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 4px auto 10px; max-width: 520px; }
.lo-rank { font: 800 16px var(--display); }
.lo-bar { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.lo-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #FFE08A, #C77D0A); transition: width .5s cubic-bezier(.2, .9, .3, 1); }
.lo-word { min-height: 54px; display: flex; justify-content: center; align-items: center; gap: 4px; }
.lo-word.shake { animation: shake .35s; }
.lo-ch { width: 36px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 9px; font: 800 24px var(--display); color: #fff; background: linear-gradient(160deg, #8EC4FF, #2D5BD0); }
.lo-ch.c { background: linear-gradient(160deg, #FFE08A, #C77D0A); }
.lo-ph { color: var(--muted); font-weight: 600; }
.lo-orbit { position: relative; width: min(86vw, 330px); aspect-ratio: 1; margin: 6px auto 0; }
.lo-orbit.spin { animation: lo-spin .5s cubic-bezier(.3, 1.2, .5, 1); }
.lo-ring { position: absolute; inset: 13%; border-radius: 50%; border: 2px dashed rgba(199, 125, 10, .35); z-index: 0; animation: lo-turn 40s linear infinite; }
.lo-tile { position: absolute; z-index: 1; width: 21%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--glass-edge); background: var(--tile-top); box-shadow: var(--lift);
  font: 800 clamp(22px, 6vw, 30px) var(--display); color: var(--text); cursor: pointer; transition: transform .15s, opacity .2s; }
.lo-tile:hover { transform: translate(-50%, -54%); }
.lo-tile.center { width: 28%; color: #fff; background: radial-gradient(circle at 35% 30%, #FFF3C4 0 10%, #FFC94A 45%, #C77D0A); border-color: transparent; box-shadow: 0 0 0 6px rgba(255, 201, 74, .25), var(--lift); }
.lo-tile.used { opacity: .3; transform: translate(-50%, -50%) scale(.9); }
.lo-tools { justify-content: center; margin-top: 8px; }
.lo-found { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px auto 0; max-width: 600px; }
.lo-chip { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; background: var(--chip); border: 1px solid var(--glass-edge); }
.lo-chip.bonus { border-style: dashed; }
.lo-chip.nine { color: #fff; background: linear-gradient(160deg, #FFE08A, #C77D0A); border-color: transparent; }
.lo-missed { margin: 14px auto 0; max-width: 600px; }
.lo-missed summary { cursor: pointer; font-weight: 700; }
@keyframes lo-spin { 50% { transform: rotate(25deg) scale(.96); } }
@keyframes lo-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lo-ring, .lo-orbit.spin { animation: none; } }