/* Embed-only layout for /embed/2048/. The board, tiles, controls and overlay
   visuals come from the game's own game.css; this file just frames them for an
   iframe — transparent page, centered stage, board fills the available width. */
html, body.lk-embed {
  margin: 0;
  padding: 0;
  background: transparent;
  min-height: 100vh;
}
body.lk-embed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px;
  box-sizing: border-box;
}
.embed-stage {
  width: 100%;
  max-width: 480px;
}
/* game.css already styles #inner as a centered flex column; drop the tall
   min-height that the full page's #wrap enforced so the widget stays compact. */
.embed-stage #inner {
  margin: 0 auto;
  gap: 14px;
}
.embed-attrib {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.85;
}
.embed-attrib:hover { opacity: 1; text-decoration: underline; }

/* Embed only: drop the NEW GAME button (restart still available from the win/
   lose overlay) and let the four stat boxes grow to fill the freed row width
   so the topbar doesn't look half-empty. */
.lk-embed #btn-new { display: none; }
.lk-embed .scores { flex: 1; }
.lk-embed .score-box { flex: 1; min-width: 0; }

/* On phone-width embeds the four stat boxes can't stay at their full padding
   without the row growing wider than the board and spilling past it. Tighten
   the padding and gap so the topbar lines up with the board on narrow screens. */
@media (max-width: 360px) {
  .lk-embed .scores { gap: 6px; }
  .lk-embed .score-box { padding: 8px 6px; }
}