/* Shared games chrome. The readable text floor is 16pt (21 1/3 CSS px). */
:root { --games-font-floor: max(16pt, 1rem); }
.gr-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 2px solid #668c88;
  border-radius: 22px;
  background: #102f38;
  color: #f6efdd;
  box-shadow: 0 30px 100px #001017c9;
  font: var(--games-font-floor)/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}
.gr-dialog[open] { display: flex; flex-direction: column; }
.gr-dialog *, .gr-dialog *::before, .gr-dialog *::after { box-sizing: border-box; }
.gr-dialog :where(p,span,small,strong,b,em,label,input,select,textarea,button,a,td,th,li,summary,div) { font-size: inherit; }
.gr-dialog::backdrop { background: #001015c9; backdrop-filter: blur(7px); }
.gr-dialog__head {
  display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
  padding: 24px 28px; gap: 20px; border-bottom: 1px solid #91b1a84a;
  background: #10313a; z-index: 2;
}
.gr-dialog__head h2 {
  margin: 0; min-width: 0; overflow-wrap: anywhere; color: #fff1d5;
  font: 500 max(24pt, 1.7rem)/1.15 Georgia, "Times New Roman", serif;
}
.gr-dialog__body { padding: 26px 28px 32px; overflow: visible; min-height: 0; scrollbar-gutter: stable; }
.gr-dialog__body > :first-child { margin-top: 0; }
.gr-icon-button {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 60px;
  width: 60px; height: 60px; padding: 10px; border-radius: 50%;
  border: 2px solid #85a9a580; color: #fff6de; background: #cbdfcc0a; cursor: pointer;
}
.gr-icon-button svg { width: 36px; height: 36px; flex: 0 0 36px; }
.gr-icon-button:hover { background: #cce0d324; }
.gr-dialog :is(button,a,input,select,textarea,summary):focus-visible { outline: 4px solid #f4cc83; outline-offset: 4px; }
.gr-dialog p { color: #c4d7cd; line-height: 1.65; }
.gr-dialog h3 { font-size: max(18pt, 1.3rem); color: #f0cc8d; margin: 30px 0 12px; }
.gr-dialog h3:first-child { margin-top: 0; }
.gr-dialog table { border-collapse: collapse; width: 100%; table-layout: auto; }
.gr-dialog td, .gr-dialog th { padding: 16px 12px; border-bottom: 1px solid #a4c0b733; text-align: left; overflow-wrap: anywhere; }
.gr-dialog th { color: #c1d3c7; font-weight: 600; }
.gr-dialog kbd {
  display: inline-block; min-width: 42px; padding: 5px 9px; margin: 3px 2px;
  border: 1px solid #9bb9ac8c; border-bottom-width: 4px; border-radius: 6px;
  background: #06242e; color: #fff4da; text-align: center;
  font: var(--games-font-floor)/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.gr-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
@media (max-width: 600px) {
  .gr-dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  .gr-dialog__head { padding: 18px; gap: 12px; }
  .gr-dialog__head h2 { font-size: max(21pt, 1.5rem); }
  .gr-dialog__body { padding: 20px 18px 26px; }
  .gr-dialog td, .gr-dialog th { padding: 12px 7px; }
  .gr-dialog table:not(.pq-leaderboard) tr { display: grid; grid-template-columns: minmax(0,1fr); border-bottom: 1px solid #a4c0b733; }
  .gr-dialog table:not(.pq-leaderboard) td { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .gr-dialog::backdrop { backdrop-filter: none; } }
/* Paged game dialogs keep their content in the viewport without scroll panes. */
.gr-dialog { overflow: hidden; }
.gr-dialog__body { overflow: visible; }

/* Accessible native scroll mechanics with a visible, game-themed control. */
.gr-dialog .gr-dialog__body.gr-scroll-viewport { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.gr-scroll-viewport::-webkit-scrollbar { display: none; width: 0; height: 0; }
.gr-scroll-dialog>.gr-dialog__body.gr-scroll-viewport>* { flex-shrink: 0; }
.gr-scroll-dialog>.gr-dialog__body.gr-scroll-needed { padding-right: 44px; }
.gr-scrollbar { position: absolute; width: 24px; z-index: 4; cursor: pointer; touch-action: none; border-radius: 14px; }
.gr-scrollbar[hidden] { display: none; }
.gr-scrollbar::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 8px; border-radius: 8px; background: #051d27; border: 1px solid #83a69b; }
.gr-scroll-thumb { position: absolute; left: 6px; top: 0; width: 12px; min-height: 24px; border: 1px solid #ffe3ab; border-radius: 9px; background: #d8ba80; }
.gr-scrollbar:hover .gr-scroll-thumb,.gr-scrollbar:focus-visible .gr-scroll-thumb { background: #f3d49c; }
.gr-scrollbar:focus-visible { outline: 3px solid #f4cc83; outline-offset: 0; }