/* The Report button and its one-page form (report.js). Every game loads this,
   City Limits included, which has no kit.css: each colour and font falls back. */
.report-button {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(10px + env(safe-area-inset-bottom));
  /* Above the games' result modals (up to 2000), so a result can be reported;
     under the menu, toasts and loading cover. */
  z-index: 2500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 9px;
  background: var(--panel, #f8f5f1);
  color: var(--muted, #46413e);
  border: 1px solid var(--border, #aaa39d);
  border-radius: 0;
  font: 500 10px/1 var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.report-button:hover { color: var(--text, #13110f); border-color: var(--text, #13110f); }
.report-button:focus-visible { outline: 2px solid var(--text, #13110f); outline-offset: 2px; }
.report-button svg { flex: none; }
.report-button.report-typing { display: none; }
@media (pointer: coarse) { .report-button { min-height: 36px; padding: 0 11px; font-size: 11px; } }
/* On a wide screen the row is only the button's place in the page. On a
   phone (or a phone on its side) it is a row at the end of the game's
   scrolling column (report.js), set apart from the game's last buttons by a
   rule and a gap. */
.report-row { display: contents; }
@media (max-width: 600px), (max-height: 500px) {
  .report-row { display: flex; flex: none; align-self: stretch; justify-content: flex-end; margin-top: auto; padding: 24px max(0px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)); }
  .report-row .report-button, .report-row .report-button.report-typing { position: static; display: inline-flex; min-height: 32px; }
  /* In a column that is the whole layout (no main to scroll), the old slim row. */
  #app > .report-row { padding: 3px max(10px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)); }
}
/* On a wide screen where the floating button would sit on the game's own
   words (report.js checks), it takes the same row under the game. */
body.report-lift .report-row { display: flex; flex: none; justify-content: flex-end; padding: 3px max(10px, env(safe-area-inset-right)) 4px; }
body.report-lift .report-row .report-button { position: static; }
@media print { .report-button { display: none; } }

.report-dialog {
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 20px 22px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel, #f8f5f1);
  color: var(--text, #13110f);
  border: 1px solid var(--rule, #13110f);
  border-radius: 0;
  font: 15px/1.45 var(--display, Inter, ui-sans-serif, system-ui, sans-serif);
  text-align: left;
}
.report-dialog::backdrop { background: rgba(19, 17, 15, 0.28); }
.report-dialog * { box-sizing: border-box; }
.report-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: var(--muted, #46413e);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.report-close:hover { color: var(--text, #13110f); }
.report-kicker {
  margin: 0 40px 4px 0;
  font: 500 10px/1.4 var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #46413e);
}
.report-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.report-form legend {
  padding: 0;
  margin: 0 40px 10px 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.report-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 5px 10px;
  border: 1px solid var(--border, #aaa39d);
  border-top-width: 0;
  background: var(--bg, #f5f1ec);
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}
.report-choice:first-of-type { border-top-width: 1px; }
.report-choice:hover { background: var(--wash, #e5e0da); }
.report-choice:has(input:checked) { background: var(--accent-soft, #e7f7ec); box-shadow: inset 3px 0 0 var(--accent, #2e9e5b); }
.report-choice input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent, #2e9e5b); }
.report-details-label {
  display: block;
  margin: 14px 0 5px;
  font-size: 13px;
  font-weight: 600;
}
.report-optional { font-weight: 400; color: var(--muted, #46413e); }
.report-form textarea {
  display: block;
  width: 100%;
  min-height: 76px;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid var(--border, #aaa39d);
  border-radius: 0;
  background: #fffdfa;
  color: inherit;
  font: 14px/1.45 var(--display, Inter, ui-sans-serif, system-ui, sans-serif);
}
.report-form textarea:focus { outline: 2px solid var(--text, #13110f); outline-offset: -1px; }
.report-problem { margin: 10px 0 0; font-size: 13px; color: var(--red, #ad524d); }
.report-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 14px; }
.report-send, .report-primary, .report-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 0;
  font: 500 12px/1 var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.report-send, .report-primary { background: var(--accent-soft, #e7f7ec); color: var(--text, #13110f); border: 2px solid var(--accent-bright, #48db7e); }
.report-send:hover:enabled, .report-primary:hover { background: #d8f2e1; }
.report-send:disabled { opacity: 0.38; cursor: default; }
.report-secondary { background: transparent; color: var(--muted, #46413e); border: 1px solid var(--border, #aaa39d); }
.report-secondary:hover { color: var(--text, #13110f); border-color: var(--text, #13110f); }
.report-thanks-text { margin: 4px 40px 4px 0; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.report-thanks .report-actions { justify-content: flex-start; margin-top: 18px; }
/* Under 16px, iOS zooms the page in when the box is tapped. */
@media (pointer: coarse) {
  .report-form textarea { font-size: 16px; }
  .report-choice { min-height: 42px; }
}
@media (max-width: 600px) {
  .report-dialog { padding: 16px 16px 14px; }
  .report-form legend, .report-thanks-text { font-size: 19px; }
}