html, body {
      margin: 0;
      width: 100%;
      height: 100%;
    }


    :root{
      /* pale-ish dark background like you asked */
      --bg: #27292A;
      --card: rgba(255,255,255,0.06);
      --card2: rgba(255,255,255,0.10);
      --text: rgba(255,255,255,0.92);
      --muted: rgba(255,255,255,0.65);
      --stroke: rgba(255,255,255,0.12);
          --nav-h: 56px;     /* navbar height */
    --main-py: 3rem;   /* py-4 => 1.5rem * 2 */
    }

    body{
      background: radial-gradient(1200px 700px at 20% -10%, rgba(255,255,255,0.09), transparent 60%),
                  radial-gradient(900px 600px at 100% 0%, rgba(255,255,255,0.06), transparent 55%),
                  var(--bg);
      color: var(--text);
          overflow-x: hidden; /* no scrolling at all */
      background-color: #27292A;
       min-height: 100vh;
  display: flex;
  flex-direction: column;
      
    }

    main {
  flex: 1;
}

  /* height available for the game frame */
  .game-frame{
    --max-w: 1200px;
    --rw: 14;
    --rh: 9;

    --avail-h: calc(100dvh - var(--nav-h) - var(--main-py));

    max-height: var(--avail-h);

    /* width is limited by BOTH max-w and the available height (converted to width via ratio) */
    max-width: min(
      var(--max-w),
      calc(var(--avail-h) * var(--rw) / var(--rh))
    );

    width: 100%;
    aspect-ratio: var(--rw) / var(--rh);

    background:#000;
    border-radius:12px;
    overflow:hidden;
    position:relative;
  }
    .game-frame iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

article {
  display: inline-block;
}

#inviteCode{
    font-style: italic;
}


article {
    text-align: center;
    display: inline-block;
    cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  padding: 10px;
  width: 300px;
}

article:hover {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 0 12px rgba(255, 255, 255, 0.12);
}

.nav-spark{
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.nav-spark:hover{
  color: #0d6efd;          /* Bootstrap primary blue */
  transform: translateY(-2px);
}

article img {
    width: 200px;;
}