@import url("./colors.css");
@import url("./fonts.css");

:root {
  color-scheme: dark;
  font-family: var(--font-sans);
  color: var(--color-site-text);
  background: var(--color-background);
  font-synthesis: style;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
body[data-view="simulator"] { overflow: hidden; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--color-link-highlight); outline-offset: 5px; }
[hidden] { display: none !important; }

.site-boot { max-width: 640px; margin: 18vh auto; padding: 24px; line-height: 1.7; }
.site-boot-logo { display: block; border-radius: 14px; }
.site-boot-brand { font-size: 22px; font-weight: 650; }
.site-boot-brand span { display: block; color: var(--color-primary); font-size: 13px; }

.simulator-view {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  background: var(--color-site-surface);
}

/* Keep the frame's dimensions stable on Home so its canvas/camera do not resize. */
.simulator-view[hidden] {
  display: grid !important;
  visibility: hidden;
  pointer-events: none;
}

.simulator-stage { position: relative; min-height: 0; }
.simulator-frame { display: block; width: 100%; height: 100%; border: 0; visibility: hidden; }
.simulator-view:not([hidden]) .simulator-frame.is-ready { visibility: visible; }
.simulator-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  color: var(--color-site-status-text);
  background: var(--color-site-surface);
}
.simulator-status p { max-width: 520px; margin: 0; line-height: 1.6; }
.simulator-retry { padding: 11px 18px; border: 1px solid var(--color-primary); border-radius: 6px; color: var(--color-site-button-text); background: var(--color-primary); cursor: pointer; }
.simulator-retry:hover { background: var(--color-primary-hover); }