/* ⓘ For grown-ups menu — homepage only, start screen only */
.info-btn { position: fixed; top: 12px; left: 12px; z-index: 30; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; color: #dfe6ff; background: rgba(255,255,255,.08); opacity: .35; cursor: pointer;
  transition: opacity .2s, background .2s, transform .2s; }
.info-btn:hover, .info-btn:focus-visible, .info-btn[aria-expanded="true"] { opacity: 1; background: rgba(255,255,255,.18); }
.info-btn:focus-visible { outline: 3px solid var(--accent, #FFC83D); outline-offset: 3px; }
/* Only on the game's start screen: hidden while playing, on the map, practice and parent screens */
html[data-screen]:not([data-screen="menu"]) .info-btn,
html[data-screen]:not([data-screen="menu"]) .info-panel,
html[data-screen]:not([data-screen="menu"]) .info-scrim { display: none; }

.info-scrim { position: fixed; inset: 0; z-index: 94; background: rgba(5,8,25,.55); opacity: 0; pointer-events: none; transition: opacity .25s; }
.info-scrim.open { opacity: 1; pointer-events: auto; }
.info-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(360px, 100vw); overflow-y: auto;
  background: #1d2862; border-left: 1px solid rgba(255,255,255,.12); box-shadow: -20px 0 60px rgba(0,0,0,.45);
  padding: 18px 20px 28px; font-family: 'Nunito', system-ui, sans-serif; color: #f4f6ff;
  transform: translateX(105%); visibility: hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility .28s; }
.info-panel.open { transform: none; visibility: visible; }
.info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.info-title { margin: 4px 0 0; font-family: 'Lilita One', 'Nunito', sans-serif; font-size: 21px; line-height: 1.2; }
.info-title span { color: #FFC83D; }
.info-close { width: 40px; height: 40px; flex: none; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.info-close:hover { background: rgba(255,255,255,.16); }
.info-group { margin-top: 18px; }
.info-label { margin: 0 0 6px; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #aab4e0; }
.info-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.info-group a { display: block; padding: 9px 12px; border-radius: 10px; color: #f4f6ff; text-decoration: none; font-weight: 800; font-size: 16px; }
.info-group a:hover, .info-group a:focus-visible { background: rgba(255,255,255,.08); color: #FFC83D; outline: none; }
@media (max-width: 560px) { .info-panel { width: 100vw; border-left: 0; } }
@media (prefers-reduced-motion: reduce) { .info-panel, .info-scrim, .info-btn { transition: none; } }