/* Brand tokens: NiNi's black-and-white look from eatninis.com, gold for the logo's crown */
  :root {
    --brand-primary: #111111;
    --brand-secondary: #e8b923;
    --brand-ink: #111111;
    --brand-cream: #ffffff;
    --brand-font: "Permanent Marker", "Marker Felt", "Comic Sans MS", sans-serif;
  }
  html, body { margin: 0; height: 100%; background: var(--brand-cream); color: var(--brand-ink); font-family: var(--brand-font); overflow: hidden; overscroll-behavior: none; }
  body { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); box-sizing: border-box; min-height: 100dvh;
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
  h1 { margin: 0 0 8px; text-transform: uppercase; font-size: clamp(24px, 6vw, 40px); color: var(--brand-primary); letter-spacing: 1px; }
  /* Canvas is 3:1, so cap the width by the height left for it */
  .wrap { width: 100%; max-width: min(900px, calc((100dvh - 130px) * 3)); }
  .rotate { display: none; margin: 14px 0 0; text-align: center; font-size: 16px; }
  .touch .keys { display: none; }
  .mouse .tap { display: none; }
  /* Phone held upright: suggest turning it sideways (still playable) */
  @media (orientation: portrait) and (max-width: 700px) {
    .rotate { display: block; }
  }
  /* Phone held sideways: drop the heading so the game fills the screen */
  @media (orientation: landscape) and (max-height: 500px) {
    h1 { display: none; }
    .wrap { max-width: calc((100dvh - 60px) * 3); }
    p.hint { margin-top: 6px; }
  }
  canvas { width: 100%; height: auto; display: block; border-radius: 12px; border: 3px solid var(--brand-ink); background: var(--brand-cream); }
  p.hint { margin: 10px 0 0; font-size: 14px; text-align: center; color: #555; }
  #mute { font: inherit; font-size: 14px; margin-left: 8px; padding: 4px 10px; border: 2px solid var(--brand-ink); border-radius: 999px; background: #fff; color: var(--brand-ink); cursor: pointer; }