/* Learn Game Engine — shared shell + control chrome.
   Scene palettes live inside each game-type (injected on mount). Chrome uses the
   _shared/theme.css tokens so re-theming stays a one-file change. */
body { display: flex; flex-direction: column; }

.lge-stage { position: relative; flex: 1 1 auto; min-height: 0; background: #cdecfb; }
.lge-stage > svg { width: 100%; height: 100%; display: block; touch-action: manipulation; }

.lge-controls {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 12px max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom));
  background: var(--lx-surface); border-top: 1px solid var(--lx-line);
}
.lge-count {
  min-width: 76px; text-align: center; font-size: 40px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--lx-ink);
}
.lge-bigbtn {
  width: 72px; height: 72px; border-radius: 22px; font-size: 34px; font-weight: 800;
  border: 2px solid var(--lx-line-strong); background: var(--lx-surface); color: var(--lx-ink);
  cursor: pointer; display: grid; place-items: center;
}
.lge-bigbtn:active { transform: translateY(2px); }
.lge-bigbtn[disabled] { opacity: .4; cursor: not-allowed; }
.lge-go {
  width: auto; padding: 0 30px; height: 72px; border-radius: 22px; font-size: 26px; font-weight: 800;
  background: var(--lx-good); color: #fff; border: 2px solid var(--lx-good); cursor: pointer;
}
.lge-go[disabled] { opacity: .4; cursor: not-allowed; }

.lge-dots { display: flex; gap: 6px; align-items: center; }
.lge-dot { width: 11px; height: 11px; border-radius: 999px; background: var(--lx-line-strong); transition: transform .15s, background .15s; }
.lge-dot.on { background: var(--lx-amber); transform: scale(1.4); }
.lge-dot.done { background: var(--lx-good); }

.lge-complete {
  position: fixed; inset: 0; display: none; place-items: center; z-index: 90;
  background: rgba(31,42,51,.55); backdrop-filter: blur(3px); padding: 18px;
}
.lge-complete.show { display: grid; }
.lge-complete .lge-card { background: var(--lx-surface); border-radius: var(--lx-r-lg); box-shadow: var(--lx-shadow); padding: 30px 34px; text-align: center; max-width: 440px; }
.lge-complete h2 { font-size: 28px; margin: 8px 0 4px; }

@media (max-width: 560px) {
  .lge-skill { display: none; }
  .lge-bigbtn { width: 64px; height: 64px; font-size: 30px; }
  .lge-go { height: 64px; font-size: 22px; padding: 0 22px; }
}