/* Reset, prototype page and dev panel. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: #0b0d14; /* prototype page bg (brief 01) */
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
button { font: inherit; }
body.is-modal-open { overflow: hidden; }

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px;
}
.page__title { margin: 0 0 8px; font: 600 16px/24px 'Inter', sans-serif; color: #c4c4c4; }
.page__open {
  min-width: 220px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: #171a24;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.page__open:disabled { opacity: 0.5; cursor: not-allowed; }

/* Dev panel: bottom-right, collapsible, above the modal backdrop. */
.dev-panel {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1000;
  width: 240px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: rgba(20, 22, 32, 0.95);
  font: 400 12px/18px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #c4c4c4;
}
.dev-panel summary { cursor: pointer; color: #fff; }
.dev-panel label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.dev-panel select, .dev-panel input {
  width: 120px;
  padding: 2px 4px;
  border: 1px solid #333849;
  border-radius: 4px;
  background: #0b0d14;
  color: #fff;
  font: inherit;
}
.dev-panel button {
  margin-top: 8px;
  width: 100%;
  padding: 4px;
  border: 1px solid #333849;
  border-radius: 4px;
  background: #252730;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.dev-panel__note { margin: 8px 0 0; }

/* Modal-only mode (phones / ?mode=modal): no launcher, no dev panel. */
body.is-modal-only .page,
body.is-modal-only .dev-panel { display: none; }

/* Tier chips: VIP level icons (object-fit contain, as in Figma's 128 box with 16 padding). */
.tier-chips { display: flex; justify-content: space-between; margin-top: 8px; }
.tier-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: #c4c4c4;
  cursor: pointer;
}
.dev-panel .tier-chip { width: auto; margin-top: 0; padding: 2px; border: 1px solid transparent; border-radius: 6px; background: none; color: #c4c4c4; }
.dev-panel .tier-chip[aria-checked="true"] { border-color: #fff; }
.tier-chip[aria-checked="true"] { border-color: #fff; }
.tier-chip img { width: 40px; height: 40px; object-fit: contain; }
.tier-chip span { font: 400 10px/12px 'Inter', sans-serif; }
/* Smaller icons in the 240px dev panel so five chips fit without overflow. */
.dev-panel .tier-chip img { width: 30px; height: 30px; }