/* Shared geometry for home, lobby, and every mini-game. */
nav {
  position: sticky; top: 0; z-index: 220;
  box-sizing: border-box; height: 56px; min-height: 56px; max-height: 56px;
  padding: 0 84px 0 2rem; flex-shrink: 0; gap: 12px;
}
.nav-logo {
  display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0;
  min-height: 40px; text-decoration: none;
  color: var(--ink); white-space: nowrap;
}
.nav-logo img { display: block; width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
/* The SVG viewBox reuses the approved lettering without its small subtitle. */
.nav-wordmark { display: block; width: 66px; height: 20px; overflow: hidden; flex-shrink: 0; }
a.nav-logo { border-radius: 8px; }
a.nav-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav-brand { display: flex; align-items: center; }
.nav-code { font-size: 1.1rem; padding: 0.3rem 1.1rem; }
#sound-toggle {
  position: fixed; right: 2rem; top: 8px; z-index: 600;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 2px solid var(--border); border-radius: 50%;
  background: var(--white); color: var(--ink2); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
#sound-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
#sound-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#sound-toggle svg { width: 21px; height: 21px; }
@media (max-width: 600px) {
  nav { padding: 0 68px 0 1rem; gap: 6px; }
  .nav-logo { gap: 4px; }
  .nav-logo img { width: 24px; height: 24px; }
  .nav-wordmark { width: 50px; height: 16px; }
  #sound-toggle { right: 1rem; }
  .nav-left { gap: 0.4rem; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 0.35rem 0.4rem; font-size: 0.78rem; }
}
@media (max-width: 420px) {
  .nav-player .pname { display: none; }
  .nav-player { padding: 0.25rem 0.4rem; }
}

button.nav-code { cursor: pointer; transition: background .15s; }
button.nav-code:hover { background: var(--white); }
button.nav-code:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
#invite-feedback { position:fixed; top:64px; right:1rem; z-index:600; max-width:calc(100vw - 2rem); overflow-wrap:anywhere; background:var(--ink); color:var(--white); border-radius:10px; padding:10px 14px; font-size:.85rem; }
#invite-feedback:empty { display:none; }

.minigame-icon {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}
.game-dot.game-dot-art {
  width: 56px;
  height: 56px;
  border: 0;
  background: transparent;
}
.game-dot-art .minigame-icon { width: 100%; height: 100%; }
.h-game, .game-toggle-btn, .game-tag-ro {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.h-game:not(.on) .minigame-icon,
.game-toggle-btn:not(.active) .minigame-icon,
.game-tag-ro.is-disabled .minigame-icon { opacity: 0.5; filter: grayscale(1); }
#game-title { display: flex; align-items: center; justify-content: center; gap: 0.65rem; text-align: center; }
#game-title .minigame-icon { width: 52px; height: 52px; }
.select-chip .minigame-icon { width: 50px; height: 50px; }