/* Wakacube. Everything is under .wk-root so it cannot restyle the page. */
.wk-root { position: absolute; inset: 0; overflow: hidden; background: #000; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* Mobile browsers paint a tap highlight over the tapped element; the UI canvas covers the whole
   game, so every tap flashed the screen (Android: translucent blue). Off for everything in the game
   (the property is inherited); buttons keep their own :active / :focus-visible styling. */
.wk-root, .wk-root * { -webkit-tap-highlight-color: transparent; }
.wk-root .wk-gl, .wk-root .wk-ui { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; -webkit-touch-callout: none; }
.wk-root:focus, .wk-root .wk-gl:focus, .wk-root .wk-ui:focus { outline: none; }
.wk-root .wk-ui { cursor: pointer; }
.wk-root [hidden] { display: none !important; }

/* Pause button: top-left, where the original's sound / info / refresh icons were. */
.wk-root .wk-pause {
  position: absolute; z-index: 3; left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top));
  width: clamp(40px, 6.5vmin, 52px); height: clamp(40px, 6.5vmin, 52px); padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgba(21, 29, 58, .62); color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35); -webkit-tap-highlight-color: transparent;
}
.wk-root .wk-pause:hover { background: rgba(21, 29, 58, .85); border-color: #ffd640; }
.wk-root .wk-pause:focus-visible { outline: 3px solid #ffd640; outline-offset: 2px; }
.wk-root .wk-pause svg { width: 55%; height: 55%; fill: currentColor; }

/* Popups */
.wk-root .wk-dock .sgp-text { margin: 0 0 .7em; font-size: .86em; color: var(--sgp-muted); text-align: center; }
.wk-root .sgp .sgp-card { max-height: 100%; overflow: auto; }
.wk-root .wk-goal, .wk-root .wk-tip { color: #ffe38a; }
.wk-root .wk-best { margin-bottom: .2em; }
.wk-root .wk-small { font-size: .82em; color: var(--sgp-muted); }
.wk-root .wk-stars { margin: .35em 0 .2em; text-align: center; font-size: 1.5em; line-height: 1; }
.wk-root .wk-stars .sgp-i { width: 1em; height: 1em; }
/* 16 levels in a 4 x 4 grid: slightly flatter tiles so the grid fits 16:9 frames without scrolling. */
.wk-root .sgp-s-levels .sgp-lv { aspect-ratio: 5 / 4; }
.wk-root .wk-toggle.wk-on { box-shadow: inset 0 0 0 1px var(--sgp-good); }
.wk-root .wk-stars .sgp-stars { justify-content: center; }
/* Short landscape screens (phones): keep result cards to one screen. */
@container sgp (max-height: 459px) {
  .wk-root .wk-small { display: none; }
  .wk-root .wk-stars { margin: .1em 0; font-size: 1.15em; }
  .wk-root .sgp-s-win .sgp-badge, .wk-root .sgp-s-lose .sgp-badge { display: none; }
}