* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  background: var(--tg-theme-bg-color, #ffffff);
  color: var(--tg-theme-text-color, #2C2C2A);
}

.screen {
  min-height: 100vh;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px;
}

.screen.visible { display: flex; }
.screen.hidden { display: none; }
#screen-main.visible { display: flex; }
.screen.no-pad.visible { display: flex; padding: 0; }

.logo-wrap { margin-top: 24px; margin-bottom: 8px; }
.logo { width: 120px; height: 120px; }

h1 { font-size: 24px; font-weight: 600; text-align: center; margin: 8px 0 28px; }
h2 { font-size: 19px; font-weight: 600; text-align: center; margin: 16px 0 8px; }

#city-select {
  width: 100%; max-width: 320px; height: 48px;
  border: 0.5px solid #D3D1C7; border-radius: 10px;
  padding: 0 12px; font-size: 16px; font-family: inherit;
  margin-bottom: 16px; background: #fff;
}

button {
  width: 100%; max-width: 320px; height: 50px;
  border: none; border-radius: 10px;
  font-size: 16px; font-weight: 600; font-family: inherit;
  cursor: pointer; margin-top: 8px;
}

#drop-btn, #route-btn, #arrive-btn, #story-submit-btn,
#vis-public-btn, #done-close-btn, #profile-save-btn {
  background: var(--tg-theme-button-color, #2C2C2A);
  color: var(--tg-theme-button-text-color, #ffffff);
}

button:disabled { opacity: 0.6; }

button.secondary {
  background: transparent; border: 0.5px solid #D3D1C7; color: #2C2C2A;
  font-weight: 500;
}

.hint { font-size: 14px; color: #6B6A64; margin-top: 14px; text-align: center; line-height: 1.5; }
.msg { font-size: 14px; color: #993C1D; text-align: center; margin: 10px 0 0; }
.msg.hidden { display: none; }

#map { width: 100%; height: 42vh; }

.map-marker {
  width: 22px; height: 22px; border-radius: 50%;
  background: #26215C; border: 3px solid #ffffff;
  box-shadow: 0 0 0 4px rgba(38,33,92,0.25);
}

.card { width: 100%; padding: 20px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.card-row { display: flex; justify-content: space-between; align-items: baseline; width: 100%; max-width: 320px; }
.card-title { font-size: 17px; font-weight: 600; }
.card-sub { font-size: 14px; color: #6B6A64; }
.card-actions { display: flex; flex-direction: column; align-items: center; width: 100%; }

.ritual-text {
  font-family: 'Golos Text', 'Onest', sans-serif;
  font-size: 18px; line-height: 1.7; text-align: center;
  max-width: 340px; margin: 32px 0 24px;
}

.timer-wrap { position: relative; width: 120px; height: 120px; margin: 8px 0; }
.timer-ring { width: 120px; height: 120px; }
.timer-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 22px; font-weight: 600;
}

#story-text {
  width: 100%; max-width: 320px; border: 0.5px solid #D3D1C7;
  border-radius: 10px; padding: 12px; font-size: 16px; margin: 16px 0;
  font-family: inherit; resize: vertical;
}

.msg-neutral { font-size: 14px; color: #6B6A64; text-align: center; margin: 10px 0 0; max-width: 320px; }
.msg-neutral.hidden { display: none; }

.link-btn {
  width: auto; max-width: none; height: auto; background: transparent;
  border: none; color: #185FA5; font-size: 14px; font-weight: 500;
  margin-top: 12px; padding: 4px;
}

.star-rating { display: flex; gap: 6px; margin: 8px 0 4px; }
.star-rating .star {
  width: 42px; height: 42px; max-width: none; border: none; background: transparent;
  font-size: 30px; line-height: 1; color: #D3D1C7; margin: 0; padding: 0;
}
.star-rating .star.active { color: #EF9F27; }

.history-list { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.history-entry {
  border: 0.5px solid #D3D1C7; border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.history-entry .entry-top { display: flex; justify-content: space-between; font-size: 13px; color: #6B6A64; }
.history-entry .entry-text { font-size: 15px; }
.history-entry .entry-stars { color: #EF9F27; font-size: 14px; }
.history-empty { font-size: 14px; color: #6B6A64; text-align: center; margin-top: 24px; }

.visibility-block { width: 100%; max-width: 320px; margin: 20px 0 4px; }
.visibility-label { font-size: 14px; font-weight: 600; margin: 0 0 8px; text-align: center; }
.visibility-seg { display: flex; border: 0.5px solid #D3D1C7; border-radius: 10px; overflow: hidden; }
.visibility-seg button {
  flex: 1; border: none; border-radius: 0; margin: 0; height: 40px;
  font-size: 13px; font-weight: 500; background: transparent; color: #2C2C2A;
  border-left: 0.5px solid #D3D1C7;
}
.visibility-seg button:first-child { border-left: none; }
.visibility-seg button.v-active { background: #2C2C2A; color: #ffffff; }

#profile-nickname {
  width: 100%; max-width: 320px; height: 48px; border: 0.5px solid #D3D1C7;
  border-radius: 10px; padding: 0 12px; font-size: 16px; font-family: inherit;
  margin: 16px 0 12px;
}
#profile-bio {
  width: 100%; max-width: 320px; border: 0.5px solid #D3D1C7;
  border-radius: 10px; padding: 12px; font-size: 16px; font-family: inherit;
  resize: vertical; margin-bottom: 8px;
}