:root {
  --preflight-background: #ebebeb;
  --preflight-text: #24262a;
  --preflight-muted: #777b80;
  --preflight-line: rgba(36, 38, 42, 0.2);
  --preflight-line-strong: rgba(36, 38, 42, 0.54);
  --preflight-accent: #2d86b7;
  --preflight-danger: #a85252;
  --preflight-edge: clamp(18px, 4vh, 36px);
  --preflight-primary-top: 66%;
  --preflight-primary-width: min(420px, calc(100vw - clamp(30px, 8vw, 80px)));
  --preflight-primary-height: clamp(72px, 9.8vmin, 88px);
  --preflight-settings-width: min(128px, calc(100vw - (var(--preflight-edge) * 2)));
  --preflight-settings-height: clamp(44px, 5.4vmin, 48px);
}

/* Shared boot and lobby composition */
.start-scene {
  position: fixed;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  background: var(--preflight-background);
  color: var(--preflight-text);
  font-family: "Noto Sans KR", sans-serif;
  opacity: 1;
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1), visibility 480ms ease;
}

.start-scene.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.start-scene.hidden .start-scene-stack,
.start-scene.hidden .start-gate-scene,
.start-scene.hidden .start-ready-scene {
  pointer-events: none;
}

.start-scene.settings-open {
  z-index: 15;
}

.start-scene-stack,
.start-gate-scene,
.start-ready-scene,
.start-ready-panel,
.ready-actions {
  position: absolute;
  inset: 0;
}

.start-scene-stack {
  pointer-events: none;
}

.start-gate-scene,
.start-ready-scene {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.start-gate-scene.active,
.start-ready-scene.active {
  visibility: visible;
  opacity: 1;
}

.start-gate-scene.active {
  pointer-events: none;
}

.start-ready-scene.active {
  pointer-events: auto;
}

.start-ready-scene {
  background: var(--preflight-background);
  transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1), visibility 560ms ease;
}

.start-ready-panel {
  border: 0;
  background: transparent;
}

.ready-brand.auth-gate__brand {
  position: fixed;
  z-index: 10001;
  top: 42%;
  left: 50%;
  display: grid;
  width: min(520px, calc(100vw - 40px));
  justify-items: center;
  gap: 10px;
  color: var(--preflight-text);
  opacity: 1;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1), visibility 480ms ease;
}

.ready-brand.auth-gate__brand.is-lobby {
  z-index: 14;
}

.ready-brand.auth-gate__brand.is-hidden {
  visibility: hidden;
  opacity: 0;
}

.ready-brand.auth-gate__brand strong,
.ready-brand.auth-gate__brand .svg-icon {
  color: var(--preflight-text);
}

.ready-brand.auth-gate__brand strong {
  font-size: clamp(27px, 4vh, 44px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
}

.ready-brand.auth-gate__brand .svg-icon {
  width: clamp(40px, 5.8vh, 62px);
  height: clamp(40px, 5.8vh, 62px);
}

/* Auth and Start deliberately share the exact same outer geometry. */
.auth-gate__action,
.lobby-start-slot {
  position: fixed;
  top: var(--preflight-primary-top);
  left: 50%;
  width: var(--preflight-primary-width);
  height: var(--preflight-primary-height);
  margin: 0;
  transform: translate(-50%, -50%);
}

.lobby-start-slot {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 16px));
  pointer-events: none;
  transition: opacity 680ms cubic-bezier(0.22, 1, 0.36, 1), transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.start-ready-scene.active .lobby-start-slot {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  transition-delay: 180ms;
}

.auth-gate__action {
  z-index: 3;
}

.auth-gate__button-slot {
  width: 100%;
  height: 100%;
}

.lobby-button-slot {
  display: grid;
  place-items: center;
}

.lobby-button-slot > .ready-button {
  grid-area: 1 / 1;
}

.lobby-settings-slot {
  position: fixed;
  z-index: 3;
  left: 50%;
  bottom: var(--preflight-edge);
  width: var(--preflight-settings-width);
  height: var(--preflight-settings-height);
  transform: translate(-50%, 0);
}

.ready-button {
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-style: solid;
  border-radius: 0;
  background: transparent;
  color: var(--preflight-text);
  font: inherit;
  font-size: clamp(12px, 1.5vh, 15px);
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.start-scene button.ready-button,
.start-scene button.ready-button.primary {
  background: transparent;
}

.ready-start-button {
  width: calc(100% - 82px);
  height: calc(100% - 64px);
  border-width: 32px;
  border-image-source: url("./rss/svg/9slice-box_2.svg");
  border-image-slice: 32 fill;
  border-image-width: 32px;
  border-image-repeat: stretch;
  font-size: 24px;
}

.ready-settings-button {
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-width: 16px;
  border-image-source: url("./rss/svg/9slice-box_m1.svg");
  border-image-slice: 16 fill;
  border-image-width: 16px;
  border-image-repeat: stretch;
  font-size: clamp(10px, 1.25vh, 12px);
}

.button-sizer {
  visibility: hidden;
  pointer-events: none;
}

.ready-start-button.button-live:active:not(:disabled) {
  border-width: 30px;
  border-image-width: 32px;
  background: transparent;
}

.ready-settings-button.button-live:active:not(:disabled) {
  border-width: 14px;
  border-image-width: 16px;
  background: transparent;
}

.ready-button:disabled {
  cursor: wait;
  opacity: 0.45;
}

.ready-button:focus-visible {
  outline: 2px solid var(--preflight-accent);
  outline-offset: 3px;
}

/* Full-screen settings workspace */
.settings-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  justify-items: center;
  overflow: hidden;
  background: var(--preflight-background);
  color: var(--preflight-text);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease, visibility 260ms ease;
}

.settings-screen.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.settings-workspace {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  max-width: 1080px;
  height: 100dvh;
  min-height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(20px, 3.4vmin, 42px);
  padding: clamp(20px, 5vmin, 64px);
  border: 0;
  background: transparent;
}

.settings-workspace__header,
.settings-workspace__footer {
  display: flex;
  align-items: center;
  gap: 18px;
}

.settings-workspace__header {
  justify-content: flex-start;
}

.settings-workspace__footer {
  justify-content: space-between;
}

.settings-overview-heading,
.settings-overview-title,
.settings-panel-title {
  margin: 0;
}

.settings-overview-title {
  font-size: clamp(22px, 3.4vmin, 38px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
}

.settings-panel-title {
  padding-bottom: clamp(14px, 2vmin, 24px);
  font-size: clamp(17px, 2.2vmin, 24px);
  font-weight: 600;
  line-height: 1.2;
}

.settings-workspace__layout {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 24px;
  overflow: hidden;
  overscroll-behavior: contain;
}

.settings-menu {
  display: grid;
  width: 100%;
  max-width: 520px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

.settings-tab-slot {
  display: grid;
  min-width: 0;
  height: 54px;
  place-items: center;
}

.settings-tab-slot > .settings-tab-button {
  grid-area: 1 / 1;
}

.settings-tab-button {
  box-sizing: content-box;
  display: inline-flex;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  align-items: center;
  justify-content: center;
  padding: 0;
  border-style: solid;
  border-width: 16px;
  border-image-source: url("./rss/svg/9slice-box_m1b.svg");
  border-image-slice: 16 fill;
  border-image-width: 16px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: transparent;
  color: var(--preflight-text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.045em;
  opacity: 0.4;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.settings-tab-button.button-live:active {
  border-width: 14px;
  border-image-width: 16px;
  background: transparent;
}

.settings-tab-button.active {
  border-image-source: url("./rss/svg/9slice-box_m1.svg");
  color: var(--preflight-text);
}

.settings-tab-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-content {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.settings-content::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.settings-panel-section {
  display: none;
  width: 100%;
  max-width: 1180px;
  gap: clamp(18px, 2.8vmin, 32px);
}

.settings-panel-section.active {
  display: grid;
}

.settings-screen button:not(.settings-tab-button),
.settings-screen select {
  box-sizing: border-box;
  min-height: 42px;
  border: 1px solid var(--preflight-line);
  border-radius: 0;
  background: transparent;
  color: var(--preflight-text);
  font: inherit;
  font-size: 12px;
}

.settings-screen button:not(.settings-tab-button) {
  padding: 0 15px;
  letter-spacing: 0.035em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.settings-screen button:not(.settings-tab-button):active:not(:disabled) {
  background: transparent;
  clip-path: inset(2px);
}

.settings-screen button:focus-visible,
.settings-screen select:focus-visible {
  outline: 2px solid var(--preflight-accent);
  outline-offset: 2px;
}

.settings-screen button.danger {
  color: var(--preflight-danger);
}

.settings-screen button.settings-close-button:not(.settings-tab-button) {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border-color: #000;
  background: #000;
}

.settings-close-button img {
  display: block;
  width: 26px;
  height: 26px;
  filter: invert(1);
}

.settings-screen button.settings-close-button:not(.settings-tab-button):active:not(:disabled) {
  background: #000;
}

.settings-workspace__footer {
  min-height: 42px;
}

.settings-workspace__footer button {
  min-width: 104px;
}

.settings-workspace__footer button[hidden] {
  display: none;
}

.settings-language-row,
.world-setting,
.key-binding-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px clamp(18px, 4vmin, 56px);
  align-items: center;
}

.settings-language-row,
.world-setting {
  padding-bottom: clamp(16px, 2.5vmin, 28px);
}

.world-setting {
  border-bottom: 1px solid var(--preflight-line);
}

.settings-language-copy {
  display: grid;
  gap: 5px;
}

.settings-language-label,
.world-setting-label,
.key-binding-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.settings-language-hint {
  color: var(--preflight-muted);
  font-size: 11px;
}

.settings-select-shell {
  position: relative;
  display: grid;
  height: 44px;
  border: 1px solid var(--preflight-line-strong);
  background: transparent;
}

.settings-select-shell.open {
  z-index: 4;
  border-color: #000;
}

.settings-select-shell::after {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 18px;
  height: 18px;
  background: var(--preflight-text);
  content: "";
  pointer-events: none;
  transform: translateY(-50%) rotate(-90deg);
  -webkit-mask: url("./rss/svg/ui_global_arrow.svg") center / contain no-repeat;
  mask: url("./rss/svg/ui_global_arrow.svg") center / contain no-repeat;
}

.settings-select-shell.open::after {
  transform: translateY(-50%) rotate(90deg);
}

.settings-screen button.settings-select-trigger:not(.settings-tab-button) {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 44px 0 13px;
  border: 0;
  background: transparent;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  cursor: pointer;
}

.settings-select-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-select-menu {
  position: absolute;
  z-index: 6;
  top: calc(100% + 6px);
  left: -1px;
  display: grid;
  width: calc(100% + 2px);
  max-height: 220px;
  gap: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #000;
  background: var(--preflight-background);
  scrollbar-width: none;
}

.settings-select-menu[hidden] {
  display: none;
}

.settings-select-menu::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.settings-screen button.settings-select-option:not(.settings-tab-button) {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #777;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-screen button.settings-select-option.active:not(.settings-tab-button) {
  background: #000;
  color: #fff;
}

.settings-screen button.settings-select-option:not(.settings-tab-button):focus-visible {
  outline: 1px solid #000;
  outline-offset: -1px;
}

.settings-resource-actions {
  display: grid;
  width: 100%;
  max-width: 260px;
}

.segmented-control,
.rail-choice-control {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 86px), 1fr));
  gap: 8px;
}

.performance-setting-list {
  display: grid;
  gap: clamp(16px, 2.5vmin, 28px);
}

.rail-choice-option,
.segmented-control button {
  width: 100%;
  min-width: 0;
}

.rail-choice-option.active,
.segmented-control button.active {
  border-color: var(--preflight-line-strong);
  color: var(--preflight-accent);
  font-weight: 700;
}

#settingsPerformancePanel .rail-choice-option,
#settingsPerformancePanel .segmented-control button {
  border-color: #aaa;
  background: transparent;
  color: #777;
  font-weight: 400;
}

#settingsPerformancePanel .rail-choice-option.active,
#settingsPerformancePanel .segmented-control button.active,
#settingsPerformancePanel button.active:active:not(:disabled) {
  border-color: #000;
  background: #000;
  color: #fff;
  font-weight: 700;
}

.rail-choice-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.key-binding-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: clamp(22px, 3vmin, 36px);
}

.key-binding-group {
  display: grid;
  align-content: start;
}

.key-binding-group-title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--preflight-line-strong);
  color: var(--preflight-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.key-binding-row {
  grid-template-columns: minmax(120px, 1fr) minmax(112px, auto);
  gap: 14px;
  min-height: 54px;
}

.settings-screen button.key-binding-button:not(.settings-tab-button) {
  box-sizing: border-box;
  width: 120px;
  height: 42px;
  border: 1px solid var(--preflight-line);
  border-radius: 0;
  background: transparent;
  color: var(--preflight-text);
  font: inherit;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.key-binding-button.capturing {
  border-color: var(--preflight-accent);
  color: var(--preflight-accent);
}

@media (prefers-reduced-motion: reduce) {
  .start-scene,
  .start-ready-scene,
  .settings-screen,
  .ready-brand.auth-gate__brand,
  .lobby-start-slot {
    transition-duration: 1ms;
    transition-delay: 0ms;
  }
}