/* Pop-up windows (#modal) and the game-over screen, plus styles used only inside particular windows. */

#modal { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: grid; place-items: center; z-index: 8; padding: 1rem; }
#modal[hidden] { display: none; }
.mbox { position: relative; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid #d9453a; border-radius: 1rem;
  box-shadow: 0 0 0 2px var(--gold) inset, 0 12px 40px rgba(0,0,0,.5);
  width: min(36rem, 100%); max-height: 88vh; overflow-y: auto; padding: 1.125rem; }
.mbox section[hidden] { display: none; }
#mclose { position: absolute; top: 0.625rem; right: 0.625rem; }
.paused { margin-bottom: 0.5rem; }

#gameover { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: grid; place-items: center; z-index: 10; }
#gameover[hidden] { display: none; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; border-top: 4px solid #d9453a; padding: 1.5rem 2rem; text-align: center; }

/* Strategy window */
button.strat { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; text-align: left; border-radius: 0.75rem; padding: 0.625rem 0.75rem; }
button.strat.active { border-color: var(--sakura); background: #3a2f5c; }

/* HR window */
.hrgroup { margin: 0.875rem 0 0.125rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--warn); }
.hrrow { border-top: 1px solid var(--line); margin-top: 0.5rem; padding-top: 0.5rem; }
.hrrow .tags .small:first-child { margin-left: 0; }

/* Phones */
@media (max-width: 600px) {
  #modal { padding: 0.5rem; align-items: start; }
  .mbox { max-height: 94vh; padding: 0.875rem; }
}

/* Touch screens and small windows: the overlay itself scrolls (a single scroll container avoids the mobile
   toolbar-vs-vh problem), the page behind is locked, and the close button stays pinned in the corner. */
body.modal-open { overflow: hidden; }
@media (max-width: 900px), (pointer: coarse) {
  #modal { display: block; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0.5rem; }
  .mbox { max-height: none; overflow: visible; margin: 0 auto; padding-top: 2.5rem; }
  #mclose { position: fixed; top: 0.75rem; right: 0.75rem; z-index: 9; }
}

/* How to play */
.tut-title { margin: 0.25rem 0 0.5rem; font-size: 1.05rem; }
.tut-body p, .tut-body li { line-height: 1.5; }
.tut-body ul, .tut-body ol { padding-left: 1.25rem; }
.tut-body li { margin: 0.25rem 0; }
.tut-roles { list-style: none; padding: 0 !important; }
.tut-roles li { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.6rem 0; }
.tut-roles li > div { flex: 1; }
.swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 0.2rem; margin-top: 0.3rem; flex: none;
  box-shadow: 0 0 0 2px var(--line); }
kbd { background: var(--card); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 0.25rem; padding: 0 0.3rem; font: inherit; font-size: 0.75rem; }
.tut-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.tut-dots { display: flex; gap: 0.3rem; }
.tut-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--line); }
.tut-dot.on { background: var(--accent); }