/* RB embed mode: the Red Banana page around this frame shows the site header, the game name and Back to Games. */
html[data-embed] .skip { display: none; }
html[data-embed] .top .logo,
html[data-embed] body[data-route="game"] #back,
html[data-embed] body[data-route="game"] #title { display: none; }
html[data-embed] body[data-route="game"] .top { min-height: 0; padding-top: 0.25rem; padding-bottom: 0.25rem; }
html[data-embed] body[data-route="game"] .top .spacer { flex: 1; display: block; }
html[data-embed] #theme-btn { display: none; } /* the RB header has the Dark / Light switch */
html[data-embed] #pick-game { display: none; }
/* the How to play button glows until the first guide is opened, instead of the guide covering the board */
@keyframes ig-ask-glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-primary) 70%, transparent); } 50% { box-shadow: 0 0 0 0.55rem color-mix(in srgb, var(--c-primary) 0%, transparent); } }
html[data-embed] #how-btn.ask-new { animation: ig-ask-glow 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { html[data-embed] #how-btn.ask-new { animation: none; outline: 3px solid var(--c-primary); outline-offset: 2px; } }

/* computers: a wider game column so the board is big */
@media (min-width: 64rem) { html[data-embed] body[data-route="game"] .shell { max-width: 56rem; } }

@media (min-width: 64rem) {
  html[data-embed="1"] body[data-route="game"] .shell { max-width: 76rem; }
  html[data-embed="1"] .game .board-wrap { min-height: 0; }
  html[data-embed="1"] .game .board-host .board { max-width: min(100%, calc(100svh - 7rem), 39rem); }
}

/* A desktop frame is about 709 px tall, even when the host window is taller. */
@media (min-width: 64rem) {
  html[data-embed="1"] body[data-route="game"] .shell { min-height: 0; padding-bottom: 0.75rem; }
  html[data-embed="1"] .game { gap: 1rem; }
  html[data-embed="1"] .game-summary, html[data-embed="1"] .game-panel { position: static; gap: 0.5rem; }
  html[data-embed="1"] .game .status { min-height: 0; }
  html[data-embed="1"] .game .board-host .board { max-width: min(100%, 35rem, calc(35rem * var(--ar, 1))); }
  html[data-embed="1"] .game .race-controls { gap: 0.35rem; padding: 0.5rem; }
}