/* Admin U3 draft preview banner (src/draft-preview.js, docs/draft-preview.md). Only staff in preview ever see it.
   Placed below the top HUD row while playing (top set by the script), folded to one row after 8 s. */
.draft-preview-banner {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1003;
  box-sizing: border-box;
  width: min(560px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: center;
  padding: 8px 12px;
  border: 2px solid #e7b64a;
  border-radius: 10px;
  background: rgba(54, 36, 10, .93);
  color: #fff6df;
  font: 600 13px/1.35 "Prompt", "Noto Sans Thai", system-ui, sans-serif;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  pointer-events: auto;
}
.draft-preview-banner[hidden] { display: none; }
.draft-preview-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.draft-preview-title { padding: 0; border: 0; background: none; color: #ffd76a; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.draft-preview-title::after { content: " \25B4"; font-size: 11px; color: #f3e3bd; }
.draft-preview-title[aria-expanded="false"]::after { content: " \25BE"; }
.draft-preview-title:focus-visible { outline: 2px solid #fff6df; outline-offset: 2px; }
/* Folded (after a few seconds or by the title): one row, the HUD below stays visible. */
.draft-preview-banner.is-compact { width: auto; max-width: calc(100vw - 24px); padding: 4px 6px 4px 10px; }
.draft-preview-banner.is-compact .draft-preview-detail, .draft-preview-banner.is-compact .draft-preview-drafts { display: none; }
.draft-preview-banner.is-compact .draft-preview-exit { grid-row: 1; min-height: 32px; padding: 4px 10px; }
.draft-preview-time { color: #fff6df; font-variant-numeric: tabular-nums; }
.draft-preview-detail, .draft-preview-drafts { grid-column: 1; margin: 0; font-weight: 500; font-size: 12px; color: #f3e3bd; }
.draft-preview-chip { display: inline-block; padding: 0 6px; border-radius: 6px; background: rgba(231, 182, 74, .25); color: #fff6df; }
.draft-preview-exit {
  grid-column: 2;
  grid-row: 1 / span 3;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #ffd76a;
  border-radius: 8px;
  background: #ffd76a;
  color: #3a2608;
  font: inherit;
  cursor: pointer;
}
.draft-preview-exit:hover, .draft-preview-exit:focus-visible { background: #fff0b8; outline: 2px solid #fff6df; outline-offset: 2px; }
.draft-preview-exit:disabled { opacity: .6; cursor: default; }
.draft-preview-banner.is-ended { border-color: #9fb6a1; background: rgba(28, 44, 32, .93); grid-template-columns: 1fr; }
.draft-preview-exit[hidden], .draft-preview-time[hidden] { display: none; }
@media (max-width: 600px), (max-height: 430px) {
  .draft-preview-banner { top: 4px; padding: 6px 8px; font-size: 12px; gap: 2px 8px; }
  .draft-preview-detail { font-size: 11px; }
  .draft-preview-drafts { display: none; }
}