/* Shared modal shell + viewport-safe scrolling.
   Contextual popovers (player-name editor, reaction picker, etc.) are intentionally excluded. */
:root{
  --modal-edge-space:1rem;
  --modal-panel-padding:1.5rem;
}

/* Every substantial message/input modal uses the same viewport-centred shell. */
:is(
  .home-modal,
  .settings-view.active,
  .room-settings-view,
  .group-game-controls-view,
  .room-chooser,
  .privacy-modal,
  .zero-turn-overlay,
  .blank-letter-overlay,
  .blank-swap-overlay,
  .invalid-move-modal,
  .offline-player-modal,
  .final-standings-overlay,
  .personal-recommendation-overlay,
  .hall-of-fame-view
){
  box-sizing:border-box!important;
  position:fixed!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:var(--modal-edge-space)!important;
  overflow:hidden!important;
}

:is(
  .home-modal,
  .settings-view.active,
  .room-settings-view,
  .group-game-controls-view,
  .room-chooser,
  .privacy-modal,
  .zero-turn-overlay,
  .blank-letter-overlay,
  .blank-swap-overlay,
  .invalid-move-modal,
  .offline-player-modal,
  .final-standings-overlay,
  .personal-recommendation-overlay,
  .hall-of-fame-view
).hidden{
  display:none!important;
}

/* The panel, rather than the page or overlay, owns vertical scrolling. */
.shared-modal-scroll-panel{
  box-sizing:border-box!important;
  max-width:calc(100dvw - (2 * var(--modal-edge-space)))!important;
  max-height:calc(100dvh - (2 * var(--modal-edge-space)))!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

/* Shared interior breathing room for substantial modal panels. Width remains component-specific. */
:is(
  .home-dialog,
  .settings-modal-card,
  .room-settings-card,
  .group-game-controls-card,
  .room-chooser-card,
  .privacy-dialog,
  .zero-turn-dialog,
  .blank-letter-dialog,
  .blank-swap-dialog,
  .invalid-move-dialog,
  .offline-player-dialog,
  .final-standings-dialog,
  .personal-recommendation-dialog,
  .hall-of-fame-card
){
  padding:var(--modal-panel-padding)!important;
  min-height:0!important;
}

.shared-modal-scroll-cue{
  position:fixed;
  z-index:12000;
  width:42px;
  height:32px;
  padding:0;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(40,108,99,.76);
  color:#fff;
  box-shadow:0 5px 16px rgba(30,25,20,.2);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,5px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.shared-modal-scroll-cue.show{
  opacity:.92;
  visibility:visible;
  transform:translate(-50%,0);
}
.shared-modal-scroll-cue:hover,
.shared-modal-scroll-cue:focus-visible{
  opacity:1;
  outline:2px solid rgba(255,255,255,.8);
  outline-offset:2px;
}
.shared-modal-scroll-cue svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:560px){
  :root{
    --modal-edge-space:.625rem;
    --modal-panel-padding:1rem;
  }

  /* Explicitly neutralise older full-screen mobile modal rules. */
  .settings-view.active,
  .room-settings-view,
  .group-game-controls-view{
    place-items:unset!important;
    background-color:#2f281f38!important;
  }

  .settings-modal-card,
  .room-settings-card,
  .group-game-controls-card{
    width:min(var(--shared-modal-natural-width,100%),100%)!important;
    max-height:calc(100dvh - (2 * var(--modal-edge-space)))!important;
    min-height:0!important;
    border:1px solid #d7cbb8!important;
    border-radius:18px!important;
    box-shadow:0 22px 70px #31261955!important;
  }
}