/* The error screen (src/core/error.js, docs/PAGE.md "Errors"), shared by the room page, Owner mode, the admin's page,
   the closed room (#closed) and the 404 page. DESIGN.md: ink behind, a navy card, Rubik heading, Inter sentence,
   buttons of 48 px, 8 px apart, the first one sun. Fits a phone held sideways (360 px high). */
.error-screen { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: auto;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: #0B1029; color: #fff; font: 14px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; text-align: left; }
.error-card { display: grid; gap: 8px; width: min(440px, 100%); padding: 16px 18px; border-radius: 20px;
  background: #1B2A63; box-shadow: 0 10px 28px rgba(11,16,41,.4); }
.error-card img { width: 144px; height: auto; }
.error-card h2 { margin: 4px 0 0; font: 800 18px/1.2 Rubik, ui-sans-serif, system-ui, sans-serif; }
.error-card p { margin: 0; color: rgba(255,255,255,.85); }
.error-card .acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.error-card .acts > * { display: grid; place-items: center; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px;
  background: rgba(255,255,255,.1); color: #fff; font: 600 15px Rubik, ui-sans-serif, system-ui, sans-serif; text-decoration: none;
  cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.error-card .acts > [hidden] { display: none; }
.error-card .acts > .main { background: #FFC21A; color: #0B1029; }
.error-card .acts > :focus-visible { outline: 2px solid #FFC21A; outline-offset: 2px; transform: translateY(-2px); }
@media (hover: hover) { .error-card .acts > :hover { background: #FFC21A; color: #0B1029; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(11,16,41,.35); } }
.error-card .acts > :active { filter: brightness(.9); transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .error-card .acts > * { transition: none; } }
@media (max-height: 400px) { .error-card { padding: 12px 16px; gap: 6px; } .error-card img { width: 112px; } }