/* Gachi stylesheet: invite.css. Invite screen and summary response block. */
/* Extracted verbatim from index.html. Load order is significant; see styles/README.md. */

.invite-screen {
  gap: 1.4rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: calc(160px + var(--safe-bottom) + var(--viewport-bottom-offset) + var(--native-bottom-reserve));
}

.invite-title-name {
  color: var(--accent);
}

.invite-title-name.is-opponent {
  color: #f2b66d;
}

.invite-intro-emoji img {
  display: block;
  width: min(75vw, 275px);
  height: auto;
  max-height: 275px;
  object-fit: contain;
  margin: 0 auto;
}

#invite-intro-floater .invite-intro-emoji {
  margin: 0 0 2px;
}

.invite-screen .card-block {
  display: grid;
  gap: 0.85rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.invite-screen .invite-response-block {
  padding-top: 6px;
  padding-left: calc(var(--screen-padding-x) + var(--safe-left));
  padding-right: calc(var(--screen-padding-x) + var(--safe-right));
  padding-bottom: max(10px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 8px));
  background: #1f4c5b;
}

.invite-screen h1,
.invite-screen h2 {
  margin: 0;
}

.invite-screen h1 {
  font-size: 1.55rem;
  line-height: 1.05;
  text-align: center;
}

.invite-screen h2 {
  color: var(--accent-strong);
  font-size: 1rem;
  letter-spacing: 0.01em;
  font-weight: 700;
  text-align: center;
}

.invite-screen .detail-stat-list {
  gap: 12px;
}

.invite-hero {
  display: grid;
  gap: 0.5rem;
  margin-top: clamp(12px, 2svh, 22px);
}

.invite-meta-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  margin: 0;
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.25;
  white-space: nowrap;
}

.invite-meta-part {
  white-space: nowrap;
}

.invite-meta-separator {
  color: rgba(111, 224, 192, 0.64);
}

.invite-goals-helper {
  margin: 0;
  color: var(--text-main);
  font-size: clamp(1.02rem, 3.8vw, 1.22rem);
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.invite-goals-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 96px));
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

.invite-goals-summary:empty {
  display: none;
}

.invite-rules-list {
  display: grid;
  flex: 1 1 auto;
  gap: 5px;
  justify-items: start;
  min-width: 0;
  font-size: 0.94rem;
  text-align: left;
  line-height: 1.28;
}

.invite-rule-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  max-width: 100%;
  white-space: nowrap;
}

.invite-rule-icon {
  flex: 0 0 auto;
  line-height: 1.1;
  filter: drop-shadow(0 4px 7px rgba(4, 14, 18, 0.22));
}

.invite-rule-copy {
  min-width: 0;
  white-space: nowrap;
}

.invite-rules-row {
  gap: 12px;
}

.invite-goal-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-height: 92px;
  aspect-ratio: 1;
  padding: 9px 8px;
  border: 1px solid rgba(174, 243, 223, 0.14);
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(31, 76, 91, 0.56), rgba(18, 47, 56, 0.72)),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.05), transparent 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 7px 14px rgba(4, 14, 18, 0.13);
}

.invite-goal-summary-item .invite-goal-emoji {
  flex: 0 0 auto;
  display: inline-block;
  font-size: 1.42rem;
  line-height: 1.2;
  margin-top: 0;
}

.invite-goal-summary-item .invite-goal-text {
  font-size: 0.74rem;
  line-height: 1.12;
  font-weight: 700;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.invite-rules-copy {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: center;
}

.invite-rules-bullet {
  margin-inline: 0.2em;
  color: var(--accent);
}

.invite-together-target {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.invite-together-target[hidden] {
  display: none;
}

.invite-together-target-copy {
  margin: 0;
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.invite-together-progress {
  display: grid;
  gap: 5px;
  padding: 5px 2px 0;
}

.invite-together-progress .detail-team-progress-bar-wrap {
  padding-top: 18px;
}

.invite-together-progress .detail-team-progress-goal-line {
  top: 13px;
  height: 23px;
}

.invite-together-target-zone {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--invite-target-width, 0%);
  z-index: 2;
  border-radius: inherit;
  background: repeating-linear-gradient(
    -45deg,
    rgba(111, 224, 192, 0.2) 0,
    rgba(111, 224, 192, 0.2) 5px,
    rgba(111, 224, 192, 0.07) 5px,
    rgba(111, 224, 192, 0.07) 10px
  );
  border-right: 1px solid rgba(111, 224, 192, 0.2);
}

.invite-together-progress-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-soft);
  font-size: 0.72rem;
  line-height: 1;
}

.invite-identity-block {
  display: grid;
  gap: 7px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(163, 227, 211, 0.12);
}

.invite-identity-block .invite-intro-helper {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.invite-identity-block .invite-intro-input-wrap {
  width: min(64%, 215px);
  min-height: 42px;
  padding-inline: 42px;
  border-radius: 12px;
  margin-inline: auto;
  background: rgba(18, 47, 56, 0.72);
}

.invite-identity-block .invite-intro-input {
  min-height: 40px;
  font-size: 0.9rem;
}

.invite-identity-block .invite-intro-edit-icon {
  right: 14px;
  left: auto;
  font-size: 0.92rem;
}

.invite-identity-block .invite-intro-counter {
  right: auto;
  left: 14px;
}

.invite-identity-block .terms-checkbox-row {
  color: rgba(237, 247, 245, 0.86);
}

.invite-identity-block .terms-checkbox-row input {
  width: 16px;
  height: 16px;
  border-color: rgba(190, 216, 212, 0.72);
}

.invite-identity-block .terms-inline-button {
  color: rgba(111, 224, 192, 0.94);
}

.invite-identity-block .terms-helper-note {
  color: #ffb6b6;
}

#invite-period {
  color: var(--text-main);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.35;
}

.invite-message-row {
  display: grid;
  gap: 9px;
}

.invite-message-row[hidden] {
  display: none !important;
}

.invite-screen .detail-stat-row[hidden] {
  display: none !important;
}

.invite-screen .detail-stat-list:has(#invite-message-row[hidden]) #invite-stake-row:not([hidden]),
.invite-screen .detail-stat-list:has(#invite-stake-row[hidden]):has(#invite-message-row[hidden]) > .detail-stat-row:first-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.invite-message-copy {
  margin: 0;
  color: var(--text-main);
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.invite-response-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.36fr) minmax(0, 0.82fr);
  gap: 0.6rem;
  justify-content: center;
  width: min(100%, 390px);
}

.invite-response-block {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: var(--viewport-bottom-offset);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(calc(100vw - (var(--shell-gutter) * 2) - var(--safe-left) - var(--safe-right)), var(--app-max-width));
  max-width: 100vw;
  min-width: 0;
  padding-top: 6px;
  padding-left: calc(var(--screen-padding-x) + var(--safe-left));
  padding-right: calc(var(--screen-padding-x) + var(--safe-right));
  padding-bottom: max(10px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 8px));
  --bottom-bar-underfill: var(--viewport-bottom-offset);
  --bottom-bar-solid-fill: var(--invite-bottom-bar-solid-fill);
  margin: 0;
  background: #1f4c5b;
  z-index: 2;
  box-shadow: none;
  isolation: isolate;
}

.invite-screen:has(.dashboard-floater-overlay:not([hidden])) .invite-response-block {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.invite-response-block::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--bottom-bar-underfill));
  height: var(--bottom-bar-underfill);
  background: var(--bottom-bar-solid-fill);
  pointer-events: none;
}

#summary-response-block {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: var(--viewport-bottom-offset);
  --bottom-bar-solid-fill: var(--invite-bottom-bar-solid-fill);
  width: min(calc(100vw - (var(--shell-gutter) * 2) - var(--safe-left) - var(--safe-right)), var(--app-max-width));
  max-width: 100vw;
  min-width: 0;
  transform: translateX(-50%);
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding-top: 6px;
  padding-left: calc(var(--screen-padding-x) + var(--safe-left));
  padding-right: calc(var(--screen-padding-x) + var(--safe-right));
  padding-bottom: max(10px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 8px));
  gap: 6px;
  background: #1f4c5b;
  z-index: 35;
  box-shadow: none;
  isolation: isolate;
}

#summary-response-block > * {
  position: relative;
  z-index: 1;
  opacity: 1;
  filter: none;
  visibility: visible;
}

.step-6-scroll-area {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  padding:
    0
    calc(var(--screen-padding-x) + var(--safe-right))
    var(--bottom-action-scroll-reserve)
    calc(var(--screen-padding-x) + var(--safe-left));
}

body.is-text-entry-active [data-screen="step-6"] .step-6-scroll-area {
  scroll-padding-bottom: var(--keyboard-scroll-padding);
}

.step-6-scroll-area::-webkit-scrollbar {
  display: none;
}

[data-screen="step-6"].has-summary-response .step-6-scroll-area,
[data-screen="step-6"]:has(#summary-response-block:not([hidden])) .step-6-scroll-area {
  padding-top: 16px;
  padding-bottom: 18px;
}

[data-screen="step-6"].has-summary-response #summary-response-block {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  transform: none;
  z-index: 2;
}

@media (hover: none) and (pointer: coarse) {
  .invite-response-block,
  #summary-response-block {
    left: 0;
    right: 0;
    width: 100%;
    transform: none;
  }
}

#summary-response-note {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.88rem;
  text-align: center;
  min-height: 1.35em;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: none;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

#summary-response-block #summary-response-note {
  min-height: 1.35em;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.2;
}

.invite-response-option {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 7px 7px;
  border-radius: 16px;
  border-color: rgba(163, 227, 211, 0.16);
  background: linear-gradient(180deg, rgba(42, 95, 112, 0.98), rgba(31, 76, 91, 0.98));
  box-shadow:
    inset 0 4px 12px rgba(5, 14, 18, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07),
    0 5px 4px rgba(4, 18, 22, 0.18),
    0 11px 14px rgba(4, 18, 22, 0.1);
}

.invite-response-option:hover,
.invite-response-option:focus-visible {
  box-shadow:
    inset 0 4px 13px rgba(5, 14, 18, 0.37),
    inset 0 -1px 0 rgba(255, 255, 255, 0.09),
    0 6px 5px rgba(4, 18, 22, 0.2),
    0 13px 16px rgba(4, 18, 22, 0.11);
}

.invite-response-option.is-selected,
.invite-response-option.is-selected:hover,
.invite-response-option.is-selected:focus-visible {
  box-shadow:
    inset 0 5px 14px rgba(5, 14, 18, 0.4),
    inset 0 -1px 0 rgba(245, 255, 251, 0.06),
    0 0 0 2px rgba(14, 44, 46, 0.26),
    0 1px 3px rgba(4, 14, 18, 0.08);
}

.invite-response-option:active,
.invite-response-option.is-selected:active {
  box-shadow:
    inset 0 6px 16px rgba(5, 14, 18, 0.44),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 3px 3px rgba(4, 18, 22, 0.16),
    0 7px 10px rgba(4, 18, 22, 0.08);
}

.invite-response-option .choice-title {
  font-size: clamp(0.66rem, 2.65vw, 0.84rem);
  line-height: 1.08;
  text-align: center;
  white-space: nowrap;
}

.invite-response-option.is-primary-response {
  min-height: 60px;
  margin-top: -12px;
  border-color: rgba(111, 224, 192, 0.48);
  background: linear-gradient(180deg, rgba(111, 224, 192, 0.98), rgba(67, 195, 158, 0.98));
  color: #09262d;
  font-weight: 800;
}

.invite-response-option.is-primary-response .choice-title {
  font-size: clamp(0.76rem, 3vw, 0.96rem);
  font-weight: 800;
}

.invite-response-symbol {
  display: block;
  font-size: 1.26rem;
  line-height: 1;
  font-weight: 700;
  margin: 0;
}

.invite-response-option.is-primary-response .invite-response-symbol {
  font-size: 1.42rem;
}

.invite-response-option {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.invite-response-option:focus,
.invite-response-option:focus-visible {
  outline: none;
}

.invite-submit-row {
  display: flex;
  justify-content: center;
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.invite-submit-row .primary-button {
  width: min(100%, 240px);
  max-width: 100%;
  min-width: 0;
  white-space: normal;
}

.invite-screen .helper-note {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.88rem;
  text-align: center;
  min-height: 1.35em;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: none;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.invite-response-block .invite-response-grid {
  margin-top: 0;
}

.invite-response-prompt {
  margin: 0;
  color: var(--text-main);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

#invite-decline-confirm-floater .dashboard-floater-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

#invite-decline-confirm-floater .dashboard-floater-actions > * {
  width: 100%;
  min-width: 0;
}

.dashboard-empty {
  color: var(--text-soft);
  font-size: 0.94rem;
  line-height: 1.45;
  text-align: center;
}

.dashboard-empty.is-profile-help {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 4px auto 0;
  max-width: 30ch;
}

.dashboard-empty-copy {
  margin: 0;
}

.challenges-empty-create {
  display: grid;
  justify-items: center;
  margin: 14px auto 0;
  padding: 0 7px;
}

.challenges-empty-create .friend-create-button {
  min-height: 48px;
}

.challenge-empty-profile-help-button {
  width: min(100%, 236px);
  min-height: 42px;
  padding: 10px 16px;
  border-color: rgba(111, 224, 192, 0.24);
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: 0 0 12px rgba(111, 224, 192, 0.04);
  white-space: normal;
}

.challenge-empty-profile-help-button:hover,
.challenge-empty-profile-help-button:focus-visible {
  background: rgba(111, 224, 192, 0.07);
  border-color: rgba(111, 224, 192, 0.42);
  color: var(--text-main);
}

.challenge-empty-profile-help-button:active {
  background: rgba(111, 224, 192, 0.1);
  border-color: rgba(111, 224, 192, 0.48);
  box-shadow: 0 0 12px rgba(111, 224, 192, 0.08);
}