/* v0.4.5 — tablet-safe hiding and player-facing screens.
   These panels are direct children of the document's overlay host, not the
   maximum-width Grimoire layout.  Fit the actual viewport in either orientation. */
.pocket-shield-screen {
  position: fixed;
  z-index: 150;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100vh; /* Older Android WebView fallback. */
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top))
           max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom))
           max(16px, env(safe-area-inset-left));
  background: #11141c;
  box-sizing: border-box;
}
.pocket-shield-screen .shieldcontent {
  box-sizing: border-box;
  flex: 0 1 auto;
  width: min(100%, 620px);
  max-width: 620px; /* Override v0.1's 330px phone-only limitation. */
  margin: auto;
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(22px, 4vw, 44px);
  background: #232631;
  border: 1px solid #78664b;
  border-radius: 22px;
  box-shadow: 0 20px 70px #0009;
}
.pocket-shield-screen .shieldcontent h1 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.15;
  margin: 15px 0;
}
.pocket-shield-screen .shieldcontent .hint {
  font-size: clamp(14px, 1.7vw, 18px);
  line-height: 1.55;
  margin: 18px auto 26px;
  max-width: 46ch;
}
.pocket-shield-screen .shieldcontent .primary {
  min-height: 52px;
  max-width: 460px;
  font-size: clamp(14px, 1.5vw, 17px);
}
/* The player-role handoff/guide also used a 530px width at all sizes. */
.public-overlay {
  width: 100%;
  height: 100vh; /* Older WebView fallback. */
  height: 100dvh;
  box-sizing: border-box;
  overscroll-behavior: contain;
}
.public-overlay > .public-panel {
  width: min(100%, 700px);
  max-width: 700px;
  flex: 0 1 auto;
}
@media (min-width: 700px) {
  .public-overlay > .public-panel {
    padding: clamp(26px, 4vw, 44px);
  }
  .public-panel .public-explain {
    font-size: clamp(17px, 1.8vw, 20px);
  }
  .public-panel .public-main-button {
    min-height: 58px;
  }
}
@media (max-width: 699px) {
  .pocket-shield-screen .shieldcontent {
    max-width: 430px;
  }
}
@media (max-height: 620px) and (min-width: 700px) {
  /* Landscape tablet: less wasted height, vertical scrolling if needed. */
  .public-overlay { padding-top: 12px; padding-bottom: 12px; }
  .public-panel .public-emblem { font-size: 36px; margin: 4px auto 10px; }
  .public-panel .public-progress { margin-bottom: 12px; }
  .public-panel .public-role-glyph { font-size: 50px; margin: 12px auto 4px; }
  .public-panel .public-explain { margin: 10px 0 16px; }
}
html.pocket-overlay-open, body.pocket-overlay-open {
  overflow: hidden;
  overscroll-behavior: none;
}