/* Shared popup language; specialized card grids retain their own geometry. */
:root {
  --popup-surface: linear-gradient(145deg, #18252d, #10171f 70%);
  --popup-border: #89764e;
  --popup-divider: #b89a5738;
}
#choice-popup,
body.match-shell dialog:not(#inspect),
#room-chat-window,
.over__card {
  background: var(--popup-surface);
  border: 1px solid var(--popup-border);
  border-radius: 12px;
  color: #f4edde;
}
#choice-popup { padding: 20px; }
body.match-shell dialog:not(#inspect) {
  box-sizing: border-box;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  padding: 24px;
  font: 15px/1.55 var(--ui, sans-serif);
  overscroll-behavior: contain;
}
#choice-popup .tray__head {
  align-items: flex-start; gap: 12px;
  padding: 0 0 14px; margin: 0 0 18px;
  border-bottom: 1px solid var(--popup-divider);
}
#choice-popup .tray__prompt {
  margin: 0; min-width: 0; overflow-wrap: anywhere;
  font: 600 23px/1.35 var(--display, serif);
  text-transform: none; color: #e8cb88;
}
#choice-popup .tray__description {
  margin: 0 0 20px; color: #c6cdd1;
  font: 15px/1.6 var(--ui, sans-serif);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
#choice-popup .affordances { gap: 10px; }
#choice-popup .affordances > :is(.hint, .trigger-help) {
  flex-basis: 100%; margin: 0 0 10px;
  color: #c6cdd1; font: 15px/1.55 var(--ui, sans-serif);
}
#choice-popup .affordances > .act {
  flex: 1 1 150px; min-height: 44px; padding: 11px 16px;
  font: 600 15px/1.3 var(--ui, sans-serif);
  white-space: normal; overflow-wrap: anywhere;
}
#choice-popup .tray__foot:not(:empty) {
  gap: 10px; margin-top: 18px; padding: 14px 0 0;
  border-top: 1px solid var(--popup-divider);
}
#choice-popup .tray__foot > :is(button, .act),
#choice-popup .tray__search { min-height: 44px; font-size: 15px; }
#choice-popup #tray-close { flex-shrink: 0; min-height: 36px; padding: 6px 10px; }
#choice-popup #tutorial-choice-help {
  margin: 18px 0 0; padding: 14px 0 0; border: 0;
  border-top: 1px solid var(--popup-divider);
  background: transparent; color: #adb9c1; font: 14px/1.5 var(--ui, sans-serif);
}
#choice-popup #tutorial-choice-help p { margin: 0 0 10px; }
#choice-popup #tutorial-choice-help summary { cursor: pointer; padding: 4px 0; }
#choice-popup #tutorial-choice-detail { margin-top: 10px; }
body.match-shell dialog > header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--popup-divider);
}
body.match-shell dialog h2 {
  color: #e8cb88; font-size: 23px; line-height: 1.35;
  text-transform: none; overflow-wrap: anywhere;
}
body.match-shell dialog > header h2 { margin: 0; }
body.match-shell dialog > p { color: #c6cdd1; line-height: 1.6; }
body.match-shell dialog button:not(:has(img)),
#room-chat-window button { min-height: 44px; }
body.match-shell dialog :focus-visible,
#choice-popup :focus-visible,
#room-chat-window :focus-visible {
  outline: 2px solid #eed291; outline-offset: 3px;
}
/* The rewind control lives inline in the toolbar, not in a modal surface. */
body.match-shell #devbar #rewind-dialog { padding: 10px 12px; }
body.match-shell #devbar #rewind-dialog header { padding: 0; margin: 0; border: 0; }
body.match-shell #devbar #rewind-dialog h2 { font-size: 16px; }
@media (max-width: 480px) {
  #choice-popup, body.match-shell dialog:not(#inspect) { padding: 16px; }
  #choice-popup .tray__prompt, body.match-shell dialog h2 { font-size: 20px; }
  #choice-popup .tray__foot > button { flex: 1 1 auto; }
}