/* S2 shell layout — QB-owned. Workers do NOT edit this file (own booth.css / stage.css / catalog.css). */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--red); color: #fff; padding: 8px 14px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

#topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  height: calc(52px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand .dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(255, 40, 0, 0.18); }
.s2tag { border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; }

#roomdots { display: flex; align-items: center; gap: 9px; margin: 0 auto; }
#roomdots .rd {
  width: 30px; height: 30px; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
#roomdots .rd u { display: block; width: 6px; height: 6px; border-radius: 50%; background: #3a3a3f; text-decoration: none; transition: background 0.2s, transform 0.2s; }
#roomdots .rd[aria-current="true"] u { background: var(--ink); transform: scale(1.25); }
.rd-name { min-width: 52px; }

main { padding-top: calc(52px + env(safe-area-inset-top, 0px)); min-height: var(--app-height); }
.room { min-height: calc(var(--app-height) - 52px); }
/* !important: module CSS styles rooms by ID (e.g. #room-booth{display:flex}), which would
   out-specify this attribute rule and leave two rooms visible at once. Hidden must always win. */
.room[hidden] { display: none !important; }

/* room walk transition */
@media (prefers-reduced-motion: no-preference) {
  .room.current { animation: roomIn 0.24s ease-out; }
  @keyframes roomIn { from { opacity: 0.4; transform: translateX(var(--walk, 14px)); } to { opacity: 1; transform: none; } }
}

/* toast */
#toastRoot { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--ink);
  border-radius: 10px; padding: 10px 16px; font-size: 13px; box-shadow: var(--shadow-pop);
  max-width: min(86vw, 420px);
}
.toast.gold { border-color: var(--gold); }

/* generic sheet container (mobile bottom sheet / desktop side panel) — stage & catalog reuse */
.sheet-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 60; }
.sheet {
  position: fixed; z-index: 61; background: var(--panel); border: 1px solid var(--line-2);
  display: flex; flex-direction: column; overflow: hidden;
}
@media (max-width: 767px) {
  .sheet { inset: auto 0 0 0; max-height: calc(92 * var(--app-height) / 100); border-radius: 18px 18px 0 0; padding-bottom: var(--safe-b); }
}
@media (min-width: 768px) {
  .sheet { top: 64px; right: 16px; bottom: 16px; width: 400px; border-radius: 16px; box-shadow: var(--shadow-pop); }
  .sheet .sheet-grab { display: none; }
}