/* Dialogs, toasts and banners (the restyle, 2026-10-09, after the redesign's mock v17): the end
   dialog, the warnings, Reconnecting and Resume (the way in's wizard is way.css's). A dialog is
   the world's own field, cobalt with square corners, over the page darkened; nothing in one moves
   (no entrance, no backdrop blur). */

/* ---------- Dialogs ---------- */
dialog {
  padding: 0; border: 0; border-radius: 0; color: var(--w-ink); background: var(--w-lit); --soft: var(--w-soft);
  box-shadow: 0 30px 90px #000a;
}
/* The unlit field at 80% (a literal: a backdrop inherits no custom property in older engines). */
dialog::backdrop { background: #0f1626cc; }
dialog:focus { outline: none; }

/* The end dialog: a small cobalt panel, its question and two answers. */
#end-dialog { width: min(440px, calc(100% - 32px)); padding: 32px; }
#end-dialog p { margin: 0; font-weight: 600; font-stretch: 118%; font-size: clamp(28px, 3vw, 34px); line-height: 1.05; letter-spacing: -.015em; }
#end-dialog .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 28px; }
#end-dialog .actions button { min-height: 48px; padding: 0 20px; }

/* Skip mode's modal (`?skip=`, 2026-10-11): the end dialog's panel, over a lighter backdrop so
   the scene drawn behind it reads. */
#skip-dialog { width: min(480px, calc(100% - 32px)); padding: 32px; }
#skip-dialog::backdrop { background: #0f162680; }
#skip-dialog #skip-title { margin: 0; font-weight: 600; font-stretch: 118%; font-size: clamp(28px, 3vw, 34px); line-height: 1.05; letter-spacing: -.015em; }
#skip-dialog .note { margin: 14px 0 0; color: var(--soft); }
#skip-dialog .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 28px; }
#skip-dialog .actions button { min-height: 48px; padding: 0 20px; }

/* A phone: the dialogs' padding tightens. */
@media (max-width: 680px) {
  #end-dialog, #skip-dialog { padding: 26px 22px; }
}

/* ---------- Toasts ---------- */
/* The warnings (mic, voice): centred over the map under the place's name and End Crossing, never
   over the reader or the slab (the Lantern, 2026-10-15; at the story field's head before). On a
   phone, under the name's two lines and End Crossing's row. */
.toasts {
  position: fixed; z-index: 15; left: 50%; transform: translateX(-50%);
  top: calc(clamp(18px, 3.4vw, 44px) + clamp(30px, 4vw, 58px) + 24px);
  width: min(560px, calc(100% - 32px)); display: grid; justify-items: center; gap: 8px; pointer-events: none;
}
@media (max-width: 680px) { .toasts { top: 128px; } }
/* The mock's block, black at 30% over the field, mixed solid here: it floats over the map. The
   field is cobalt while the world speaks. */
.toast {
  margin: 0; max-width: 34em; padding: 10px 14px; border-radius: var(--r);
  background: color-mix(in srgb, #000 30%, var(--w-unlit)); color: var(--w-ink); font-size: 16px; line-height: 1.4;
}
body:has(#play[data-state="speaking"]) .toast { background: color-mix(in srgb, #000 30%, var(--w-lit)); }
/* The way in's wizard says its own trouble in the card (2026-10-10): under a modal the toasts sit
   dimmed and unreadable, so they wait for play. */
body:has(#wizard[open]) .toasts { display: none; }

/* ---------- Banners ---------- */
/* Reconnecting: the ochre band along the viewport's top, above everything, a modal's backdrop
   included: a manual popover, in the top layer, raised again after a dialog opens (app.ts's
   `showReconnecting`). Its `display` is left to the popover's own rules. */
#reconnecting {
  position: fixed; inset: 0 0 auto; z-index: 20; width: auto; height: auto; margin: 0; overflow: visible;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; border: 0; text-align: center;
  background: var(--y-lit); color: var(--y-ink); font-weight: 600; font-stretch: 112%; font-size: 15px; letter-spacing: .02em;
}
#reconnecting::backdrop { background: none; }
/* Tap to Resume Sound: ochre, at the foot's centre (centred by its margins, since a pressed
   button's transform would undo a translate), ringed in the band's dark ink so it holds on the
   band while it listens, ochre too. */
#resume {
  position: fixed; z-index: 10; left: 0; right: 0; bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  width: fit-content; max-width: calc(100% - 32px); min-height: 56px; margin: 0 auto; padding: 0 28px; font-size: 17px;
  box-shadow: 0 0 0 2px var(--y-ink), 0 12px 36px #000c;
}