/* RECLAIM 수복 main lobby. Split from lobby-flow.css to keep the entry flow maintainable. */

/* 새 로비 요소는 패널이 아니라 화면 전체를 기준으로 배치한다. */
.entry-screen.stage-main .entry-main-panel {
  position: static;
  width: auto;
  display: block;
}

.entry-screen.stage-main .entry-main-panel > .entry-nickname-field,
.entry-screen.stage-main .entry-main-panel > #entryMainStart,
.entry-screen.stage-main .entry-main-panel > .entry-main-hint {
  position: absolute;
  left: calc((100vw - var(--main-buttons-w)) / 2 + var(--main-buttons-offset-x));
  width: var(--main-buttons-w);
  pointer-events: auto;
}

.entry-screen.stage-main .entry-main-panel > .entry-nickname-field {
  top: var(--main-buttons-y);
}

.entry-screen.stage-main .entry-main-panel > #entryMainStart {
  top: calc(var(--main-buttons-y) + 64px);
}

.entry-screen.stage-main .entry-main-panel > .entry-main-hint {
  top: calc(var(--main-buttons-y) + 112px);
}

.entry-screen.stage-main .rc-hero,
.entry-screen.stage-main .rc-nav,
.entry-screen.stage-main .rc-sheet,
.entry-screen.stage-main .rc-lang {
  pointer-events: auto;
}

.rc-lang {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  z-index: 4;
  display: flex;
  gap: 4px;
}

.rc-lang button {
  min-width: 40px;
  padding: 6px 10px;
  border: 0.5px solid rgba(232, 228, 220, 0.22);
  border-radius: 3px;
  background: rgba(10, 9, 8, 0.62);
  color: #87947c;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.16em;
  cursor: pointer;
}

.rc-lang button:hover {
  color: #e8e4dc;
  border-color: rgba(205, 220, 194, 0.55);
}

.rc-lang button.active {
  color: #e8e4dc;
  border-color: #a9b99f;
  background: rgba(93, 111, 76, 0.24);
}

.rc-hero {
  position: absolute;
  left: max(40px, 4vw);
  top: clamp(28px, 6vh, 74px);
  display: grid;
  justify-items: start;
  gap: 6px;
}

.rc-hero-ko {
  white-space: nowrap;
  font-family: Batang, "Nanum Myeongjo", "Noto Serif KR", serif;
  font-size: clamp(42px, 5.4vw, 68px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  color: #e8e4dc;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.72);
}

.rc-hero-rule {
  display: block;
  width: clamp(120px, 12vw, 168px);
  height: 1px;
  margin: 8px 0 4px;
  background: #87947c;
}

.rc-hero-en {
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: 0.54em;
  color: #a9b99f;
}

.rc-hero-sub {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #87947c;
}

.rc-nav {
  position: absolute;
  left: max(40px, 4vw);
  bottom: clamp(34px, 8vh, 92px);
  display: grid;
  gap: 8px;
}

.rc-nav.hidden {
  display: none;
}

.rc-nav-button {
  width: clamp(196px, 17vw, 232px);
  padding: 13px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0.5px solid #3d3a36;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: rgba(12, 11, 10, 0.72);
  color: #b8b2a8;
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.3em;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.rc-nav-button small {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #74806c;
}

.rc-nav-button:hover,
.rc-nav-button:focus-visible {
  color: #e8e4dc;
  border-left-color: #a9b99f;
  background: rgba(27, 34, 24, 0.92);
}

.rc-nav-button.is-lead {
  color: #e8e4dc;
  border-left-color: #a9b99f;
  background: rgba(27, 34, 24, 0.88);
}

.rc-nav-button.is-lead small {
  color: #a9b99f;
}

.rc-sheet {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 64px);
  background: rgba(6, 6, 5, 0.76);
  z-index: 3;
}

.rc-sheet.hidden {
  display: none;
}

.rc-back {
  position: absolute;
  left: max(40px, 4vw);
  bottom: clamp(34px, 8vh, 92px);
  padding: 8px 12px;
  border: 0.5px solid #3d3a36;
  border-radius: 3px;
  background: rgba(12, 11, 10, 0.72);
  color: #8d867c;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.18em;
  cursor: pointer;
}

.rc-back:hover {
  color: #e8e4dc;
  border-color: rgba(205, 220, 194, 0.55);
}

.rc-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.rc-card {
  position: relative;
  width: clamp(240px, 26vw, 320px);
  min-height: 220px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  text-align: left;
  border: 0.5px solid #3d3a36;
  border-radius: 8px;
  background: #1b1a19;
  background-size: cover;
  background-position: center;
  color: #e8e4dc;
  font: inherit;
  overflow: hidden;
}

.rc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 7, 0.42), rgba(8, 8, 7, 0.88));
}

.rc-card > * {
  position: relative;
}

.rc-card strong {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.rc-card-story {
  border-color: rgba(205, 220, 194, 0.38);
  background-image: url("../assets/ui/story/story-coming-soon-background.png");
  filter: saturate(0.72);
  cursor: pointer;
}

.rc-card-story:hover,
.rc-card-story:focus-visible,
.rc-card-story.has-save {
  border-color: #a9b99f;
  box-shadow: inset 0 0 0 1px rgba(205, 220, 194, 0.18);
}

.rc-card-story-status {
  color: rgba(232, 228, 220, 0.62);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.rc-nav-continue {
  border-left-color: #a9b99f;
}

.rc-nav-continue.hidden {
  display: none;
}

.rc-card-custom {
  border-color: #566248;
  background-image: url("../assets/ui/lobby-custom-briefing.png");
  cursor: pointer;
}

.rc-card-custom:hover,
.rc-card-custom:focus-visible {
  border-color: #a9b99f;
  box-shadow: inset 0 0 0 1px rgba(205, 220, 194, 0.18);
}

.rc-info-body {
  max-width: 560px;
}

.rc-info-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 0.5px solid #3d3a36;
}

.rc-info-head strong {
  font-family: Batang, "Nanum Myeongjo", "Noto Serif KR", serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #e8e4dc;
}

.rc-info-head i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: #a9b99f;
}

.rc-info-body p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.9;
  color: #b8b2a8;
}

.rc-info-body .rc-info-line {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #e8e4dc;
}

.rc-info-body small {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #87947c;
}

.entry-screen.stage-main.rc-sheet-open .entry-account-widget {
  display: none;
}

body.entry-open .settings-button {
  display: none;
}

@media (max-width: 720px) {
  .rc-hero,
  .rc-nav {
    left: 22px;
  }

  .rc-nav-button {
    width: 178px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rc-smoke-plume i {
    animation: none;
    opacity: 0.1;
    transform: translate3d(0, -120%, 0) scale(1.05);
  }

  .rc-smoke-plume i:not(:first-child) {
    display: none;
  }

  .rc-lobby-character::after {
    animation: none;
    opacity: 0;
  }
}