:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #080b0d; color: #f6f2df; }
iframe { display: block; width: 100%; border: 0; background: #080b0d; }
.shell-status { position: fixed; right: 20px; bottom: 20px; padding: 10px 14px; border: 2px solid #ef476f; background: #080b0d; font-weight: 900; letter-spacing: .12em; }
.shell-status.online { display: none; }
.controller-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  transition: background-color 160ms ease;
}
.controller-shell nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  overflow-x: auto;
  min-height: 106px;
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  border-top: 2px solid #343a3d;
  background: #0d1012;
  scrollbar-width: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.controller-shell nav::-webkit-scrollbar { display: none; }
/* Rapid taps on a dock icon must not trigger the browser's double-tap zoom. */
.controller-shell nav, .controller-shell nav * { touch-action: manipulation; }
.controller-shell nav button {
  position: relative;
  display: grid;
  flex: 0 0 88px;
  grid-template-rows: 66px auto;
  place-items: center;
  gap: 3px;
  min-height: 90px;
  padding: 4px 5px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #aeb5b8;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}
.controller-shell nav button.active { background: #252a2e; color: #f1f3f4; }
.controller-shell nav img {
  width: 64px;
  height: 64px;
  border: 2px solid #4b5256;
  border-radius: 16px;
  background: #202529;
  object-fit: cover;
  pointer-events: none;
}
.controller-shell nav button.active img { border-color: #858d92; }
.controller-shell nav span { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.controller-shell iframe { height: 100%; }

.controller-shell[data-appearance="light"] { background: #f3f4f2; color-scheme: light; }
.controller-shell[data-appearance="light"] iframe { background: #f3f4f2; }
.controller-shell[data-appearance="light"] nav {
  border-color: #d5d8d6;
  background: #e9ebe9;
}
.controller-shell[data-appearance="light"] nav button { color: #62686b; }
.controller-shell[data-appearance="light"] nav button.active { background: #d9dcda; color: #171a1c; }
.controller-shell[data-appearance="light"] nav img { border-color: #b9bfbc; background: #fff; }
.controller-shell[data-appearance="light"] nav button.active img { border-color: #7c8581; }

/* App-requested fullscreen: hide the app-selection row so the app controller
   gets the whole phone screen. Browser chrome hides via the Fullscreen API
   requested in controller.js. */
.controller-shell.is-app-fullscreen {
  grid-template-rows: minmax(0, 1fr);
}
.controller-shell.is-app-fullscreen nav {
  display: none;
}