/* ===== Китайский стиль — сайт клана ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Ma+Shan+Zheng&display=swap');

:root {
  --crimson: #8b0000;
  --crimson-dark: #5c0000;
  --gold: #d4af37;
  --gold-light: #f0d78c;
  --ink: #1a0f0a;
  --paper: #f5e6c8;
  --paper-dark: #e8d4a8;
  --jade: #2d5a4a;
  --shadow: rgba(0, 0, 0, 0.45);
  --font-serif: 'Noto Serif SC', 'Georgia', serif;
  --font-display: 'Ma Shan Zheng', 'Noto Serif SC', serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-serif);
  background: var(--ink);
  color: var(--paper);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Фон с китайскими постройками */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, #0d0806 0%, #1a0f0a 30%, #2a1810 60%, #1a0f0a 100%);
}

.bg-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%231a0f0a'/%3E%3Cstop offset='100%25' stop-color='%232a1810'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23sky)' width='1440' height='400'/%3E%3Cg fill='%230d0806' opacity='0.9'%3E%3C!-- Pagoda 1 --%3E%3Cpath d='M120 400 L120 280 L80 280 L160 280 L120 280 L120 220 L70 220 L170 220 L120 220 L120 170 L60 170 L180 170 L120 170 L120 130 L100 130 L140 130 L120 100 L120 80 L110 80 L130 80 L120 60 L120 50 L115 50 L125 50 Z'/%3E%3C!-- Temple --%3E%3Cpath d='M400 400 L400 250 L350 250 L450 250 L400 250 L400 200 L340 200 L460 200 L400 200 L400 160 L380 160 L420 160 L400 140 L400 120 L395 120 L405 120 L400 100 L400 90 L398 90 L402 90 Z'/%3E%3Cpath d='M360 250 L440 250 L440 400 L360 400 Z'/%3E%3C!-- Pagoda 2 --%3E%3Cpath d='M700 400 L700 300 L660 300 L740 300 L700 300 L700 250 L650 250 L750 250 L700 250 L700 200 L670 200 L730 200 L700 200 L700 160 L680 160 L720 160 L700 140 L700 110 L695 110 L705 110 L700 90 L700 75 L698 75 L702 75 Z'/%3E%3C!-- Great wall hills --%3E%3Cpath d='M0 350 Q200 300 400 340 Q600 380 800 320 Q1000 260 1200 330 Q1320 370 1440 310 L1440 400 L0 400 Z' fill='%2315100c'/%3E%3Cpath d='M900 400 L900 270 L860 270 L940 270 L900 270 L900 220 L850 220 L950 220 L900 220 L900 175 L875 175 L925 175 L900 175 L900 145 L890 145 L910 145 L900 120 L900 100 L898 100 L902 100 Z'/%3E%3Cpath d='M1100 400 L1100 290 L1060 290 L1140 290 L1100 290 L1100 240 L1050 240 L1150 240 L1100 240 L1100 195 L1080 195 L1120 195 L1100 195 L1100 165 L1095 165 L1105 165 L1100 140 L1100 125 L1098 125 L1102 125 Z'/%3E%3Cpath d='M250 400 L250 320 L220 320 L280 320 L250 320 L250 280 L230 280 L270 280 L250 280 L250 250 L245 250 L255 250 L250 230 L250 215 L248 215 L252 215 Z'/%3E%3C/g%3E%3C!-- Moon --%3E%3Ccircle cx='1200' cy='80' r='45' fill='%23f0d78c' opacity='0.15'/%3E%3Ccircle cx='1200' cy='80' r='35' fill='%23f0d78c' opacity='0.08'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  opacity: 0.85;
}

.bg-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z' fill='none' stroke='%23d4af37' stroke-width='0.3' opacity='0.08'/%3E%3C/svg%3E");
  opacity: 0.5;
}

/* Навигация */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 2rem;
  background: linear-gradient(180deg, rgba(92, 0, 0, 0.95) 0%, rgba(60, 0, 0, 0.9) 100%);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 4px 20px var(--shadow);
}

.navbar-brand {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--gold);
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
}

.navbar-brand span {
  color: var(--paper);
  font-size: 1rem;
  display: block;
  font-family: var(--font-serif);
  letter-spacing: 0;
}

.nav-links {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  flex-wrap: wrap;
  align-items: center;
}

.nav-links a {
  color: var(--paper);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.2s;
  font-size: 0.95rem;
  border: 1px solid transparent;
}

.nav-links a[data-page]:hover,
.nav-links a[data-page].active {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--gold);
  color: var(--gold-light);
}

.nav-account-main,
.nav-account-main:hover {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Задачи и чат — только для участников клана */
body:not(.is-member) .nav-links li:has(a[data-page='tasks']),
body:not(.is-member) .nav-links li:has(a[data-page='chat']) {
  display: none;
}

.nav-user {
  margin-left: 0.35rem;
}

.nav-account {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.nav-account-main {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
  max-width: 168px;
}

.nav-account-main:hover {
  background: none;
}

.nav-account-name {
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e8c878;
}

.nav-account-main:hover .nav-account-name {
  color: #f5e0a8;
}

.nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(155, 107, 184, 0.35);
  background: rgba(155, 107, 184, 0.15);
}

.nav-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(200, 70, 70, 0.45);
  border-radius: 50%;
  background: rgba(180, 45, 45, 0.22);
  color: #e85a5a;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.nav-logout:hover {
  background: rgba(200, 55, 55, 0.55);
  border-color: rgba(255, 120, 120, 0.6);
  color: #fff;
}

.nav-links li.hidden {
  display: none !important;
}

.nav-auth-btn {
  background: var(--gold) !important;
  color: var(--crimson-dark) !important;
  font-weight: 600;
  border: none !important;
}

.nav-auth-btn:hover {
  background: var(--gold-light) !important;
}

/* Контейнер */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* Карточки в китайском стиле */
.panel {
  background: linear-gradient(135deg, rgba(245, 230, 200, 0.08) 0%, rgba(139, 0, 0, 0.12) 100%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 8px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 32px var(--shadow), inset 0 1px 0 rgba(212, 175, 55, 0.2);
  backdrop-filter: blur(4px);
  position: relative;
}

.panel::before,
.panel::after {
  content: '◆';
  position: absolute;
  color: var(--gold);
  opacity: 0.4;
  font-size: 0.7rem;
}

.panel::before { top: 8px; left: 10px; }
.panel::after { bottom: 8px; right: 10px; }

.panel-title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 1rem;
  text-align: center;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  padding-bottom: 0.75rem;
}

.panel-subtitle {
  color: var(--gold-light);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

/* Герой главной */
.hero {
  text-align: center;
  padding: 3rem 1rem 2rem;
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 5vw, 3rem);
  color: var(--gold);
  text-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
  margin-bottom: 0.5rem;
}

.hero .tagline {
  font-size: 1.2rem;
  color: var(--paper-dark);
  margin-bottom: 2rem;
}

.hero-divider {
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 1.5rem auto;
}

/* Сетка блоков */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.image-block {
  aspect-ratio: 4/3;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid rgba(212, 175, 55, 0.35);
  position: relative;
  background: linear-gradient(145deg, var(--crimson-dark), var(--ink));
}

.image-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.image-block:hover img {
  transform: scale(1.05);
}

.image-block .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: var(--gold-light);
  font-size: 0.9rem;
}

.placeholder-art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 3rem;
  color: rgba(212, 175, 55, 0.3);
  background:
    radial-gradient(circle at 30% 40%, rgba(139, 0, 0, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(45, 90, 74, 0.3) 0%, transparent 50%);
}

/* Формы */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--gold-light);
  font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 4px;
  color: var(--paper);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

/* Кнопки */
.btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  background: linear-gradient(180deg, var(--gold) 0%, #b8941f 100%);
  color: var(--crimson-dark);
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  text-align: center;
}

.btn:hover {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}

.btn-outline:hover {
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold-light);
}

.btn-sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

.btn-danger {
  background: linear-gradient(180deg, #a02020 0%, #6b0000 100%);
  color: var(--paper);
}

.tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  padding-bottom: 0.5rem;
}

.tab-btn {
  background: none;
  border: none;
  color: var(--paper-dark);
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.alert {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.alert-error {
  background: rgba(160, 32, 32, 0.3);
  border: 1px solid #a02020;
  color: #ffb3b3;
}

.alert-success {
  background: rgba(45, 90, 74, 0.3);
  border: 1px solid var(--jade);
  color: #a8e6cf;
}

.hidden {
  display: none !important;
}

/* Галерея */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.gallery-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  overflow: hidden;
}

.gallery-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.gallery-card-body {
  padding: 1rem;
}

.gallery-meta {
  font-size: 0.8rem;
  color: var(--paper-dark);
  margin-bottom: 0.5rem;
}

.gallery-caption {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.gallery-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.like-btn {
  background: none;
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: var(--paper);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.like-btn.liked {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--gold);
  color: var(--gold);
}

.comments-section {
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
}

.comment {
  font-size: 0.85rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.comment-author {
  color: var(--gold-light);
  font-weight: 600;
}

.comment-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.comment-form input {
  flex: 1;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  color: var(--paper);
  font-family: inherit;
}

/* Задачи */
.task-list {
  list-style: none;
}

.task-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

.task-item.done {
  opacity: 0.6;
}

.task-item.done .task-title {
  text-decoration: line-through;
}

.task-content {
  flex: 1;
}

.task-title {
  color: var(--gold-light);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.task-desc {
  font-size: 0.9rem;
  color: var(--paper-dark);
}

.task-status {
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.status-open { background: rgba(212, 175, 55, 0.2); color: var(--gold); }
.status-in_progress { background: rgba(45, 90, 74, 0.4); color: #a8e6cf; }
.status-done { background: rgba(100, 100, 100, 0.3); color: #ccc; }

/* Чат */
.chat-box {
  display: flex;
  flex-direction: column;
  height: 500px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chat-msg {
  max-width: 75%;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
}

.chat-msg.own {
  align-self: flex-end;
  background: rgba(139, 0, 0, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.chat-msg.other {
  align-self: flex-start;
  background: rgba(45, 90, 74, 0.35);
  border: 1px solid rgba(45, 90, 74, 0.5);
}

.chat-msg-author {
  font-size: 0.75rem;
  color: var(--gold-light);
  margin-bottom: 0.2rem;
}

.chat-msg-time {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.2rem;
}

.chat-input-area {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  background: rgba(0, 0, 0, 0.3);
}

.chat-input-area input {
  flex: 1;
  padding: 0.6rem 1rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  color: var(--paper);
  font-family: inherit;
}

.auth-page {
  max-width: 420px;
  margin: 2rem auto;
}

.locked-notice {
  text-align: center;
  padding: 3rem 1rem;
}

.locked-notice p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: var(--paper-dark);
}

footer {
  text-align: center;
  padding: 2rem;
  color: rgba(245, 230, 200, 0.4);
  font-size: 0.85rem;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
}

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }

  .nav-links {
    justify-content: center;
  }

  .hero h1 {
    font-size: 2.2rem;
  }
}