html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: #252550;
  color: #f7f4ff;
}

body {
  overflow-x: hidden;
  font: 16px/1.65 system-ui, sans-serif;
}

[hidden] { display: none !important; }

#game-host {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

#game-companion {
  box-sizing: border-box;
  width: min(100%, 920px);
  margin: 0 auto;
  /* Keep every display-ad pixel away from the entire interactive game. */
  padding: 150px max(20px, env(safe-area-inset-right)) 32px
    max(20px, env(safe-area-inset-left));
}

.ludo-help h1 {
  margin: 0 0 12px;
  color: #f3d58d;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.25;
}

.ludo-help p { margin: 0 0 16px; }

#ludo-ad-region {
  margin: 40px 0;
  text-align: center;
}

.ludo-ad-label {
  margin: 0 0 12px;
  color: #cec9e1;
  font-size: 12px;
}

.ludo-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 28px;
  padding-top: 24px;
}

.ludo-links a { color: #f3d58d; text-underline-offset: 4px; }
.ludo-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }