:root {
  --bg-1: #0f0d0a;
  --bg-2: #17120d;
  --panel: rgba(38, 28, 19, 0.92);
  --panel-2: rgba(23, 19, 15, 0.96);
  --gold: #d9a83a;
  --gold-2: #f2d27a;
  --gold-dark: #72531f;
  --text: #f6eee0;
  --muted: #b9ad9b;
  --green: #4eb56f;
  --green-dark: #173924;
  --red: #d45b55;
  --red-dark: #3f1d1b;
  --amber: #e5ad44;
  --blue: #4f91bf;
  --line: rgba(232, 193, 104, 0.22);
  --shadow: 0 18px 55px rgba(0,0,0,.34);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 5%, rgba(171, 112, 38, .18), transparent 33%),
    radial-gradient(circle at 85% 0%, rgba(206, 153, 53, .10), transparent 28%),
    linear-gradient(160deg, var(--bg-2), var(--bg-1) 70%);
  background-attachment: fixed;
}

button, input { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(16px, 3vw, 42px);
  border-bottom: 1px solid var(--line);
  background: rgba(16, 13, 10, .88);
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  user-select: none;
}
.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #2b1c06;
  background: linear-gradient(135deg, #f8db83, #a36f17);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 6px 20px rgba(223, 164, 55, .16);
}
.brand-title { font-weight: 850; letter-spacing: .01em; }
.brand-subtitle { font-size: 12px; color: var(--muted); margin-top: 1px; }

.nav-tabs { display: flex; justify-content: center; gap: 7px; }
.nav-btn {
  border: 1px solid transparent;
  background: transparent;
  padding: 9px 13px;
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  transition: .18s ease;
}
.nav-btn:hover { color: var(--text); background: rgba(255,255,255,.045); }
.nav-btn.active { color: var(--gold-2); border-color: rgba(218, 171, 70, .28); background: rgba(201, 146, 48, .10); }
.nav-btn.disabled { opacity: .42; cursor: not-allowed; }

.player-chip {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  padding: 7px 10px 7px 7px;
  border-radius: 13px;
  cursor: pointer;
  text-align: left;
}
.player-chip:hover { background: rgba(255,255,255,.05); }
.player-chip span:last-child { display: grid; }
.player-chip small { margin-top: 1px; color: var(--muted); }
.player-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #2d1d06;
  background: linear-gradient(145deg, #ecd17c, #9c6a1c);
}

main { width: min(1260px, calc(100% - 28px)); margin: 0 auto; padding: 34px 0 80px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, .85fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 26px;
}
.hero-card, .panel {
  background: linear-gradient(160deg, rgba(49,36,24,.96), rgba(27,22,17,.96));
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.hero-card { padding: clamp(24px, 4vw, 46px); position: relative; overflow: hidden; }
.hero-card::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -120px;
  top: -140px;
  border-radius: 50%;
  background: rgba(231, 178, 70, .10);
  filter: blur(5px);
}
.eyebrow { color: var(--gold-2); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(32px, 5vw, 58px); line-height: .98; margin-bottom: 18px; letter-spacing: -.035em; max-width: 760px; }
.lead { color: #d0c3b1; max-width: 760px; font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.primary, .secondary, .ghost, .danger, .qty-btn, .filter-btn {
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: .18s ease;
}
.primary {
  padding: 11px 16px;
  font-weight: 800;
  color: #2d1d06;
  background: linear-gradient(135deg, #f0d27c, #b2781f);
}
.primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.secondary { padding: 11px 16px; background: rgba(255,255,255,.05); border-color: var(--line); }
.secondary:hover { background: rgba(255,255,255,.08); }
.ghost { padding: 9px 12px; background: transparent; border-color: var(--line); color: var(--muted); }
.ghost:hover { color: var(--text); background: rgba(255,255,255,.04); }
.danger { padding: 10px 13px; background: rgba(196,67,58,.12); border-color: rgba(214,90,82,.32); color: #ffbbb6; }

.summary-panel { padding: 22px; display: grid; gap: 14px; }
.summary-panel h3 { margin-bottom: 2px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 14px;
  padding: 15px;
}
.stat strong { display: block; font-size: 26px; color: var(--gold-2); }
.stat span { color: var(--muted); font-size: 13px; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 34px 0 16px; }
.section-head h2 { margin: 0 0 4px; font-size: clamp(22px, 3vw, 31px); }
.section-head p { margin: 0; color: var(--muted); }

.album-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.album-card {
  overflow: hidden;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 16px 36px rgba(0,0,0,.23);
}
.album-cover {
  aspect-ratio: 2.35 / 1;
  background-position: center;
  background-size: cover;
  position: relative;
}
.album-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(19,14,9,.52), transparent 58%); }
.album-body { padding: 16px; }
.album-body h3 { margin-bottom: 12px; font-size: 20px; }
.progress-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin-bottom: 7px; }
.progress-track { height: 9px; border-radius: 999px; background: rgba(0,0,0,.33); overflow: hidden; border: 1px solid rgba(255,255,255,.07); }
.progress-fill { height: 100%; background: linear-gradient(90deg, #2f8f54, #68c77c); border-radius: inherit; }
.album-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.pill { padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06); color: #d9ccbb; font-size: 12px; }
.album-open { width: 100%; margin-top: 14px; }

.back-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.album-detail-head {
  min-height: 250px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
}
.album-detail-head::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,11,9,.94) 0%, rgba(13,11,9,.70) 42%, rgba(13,11,9,.25) 100%); }
.album-detail-content { position:relative; z-index:1; padding: clamp(24px, 5vw, 48px); max-width: 700px; }
.album-detail-content h1 { font-size: clamp(34px,5vw,56px); margin-bottom:12px; }
.album-detail-content p { color:#d6c9b7; }

.toolbar { display:flex; justify-content:space-between; gap:14px; align-items:center; flex-wrap:wrap; margin: 24px 0 16px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; }
.filter-btn { padding:9px 12px; border-color:var(--line); background:rgba(255,255,255,.025); color:var(--muted); }
.filter-btn.active { background:rgba(215,167,63,.12); color:var(--gold-2); border-color:rgba(215,167,63,.35); }
.legend { display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:12px; }
.legend span { display:flex; align-items:center; gap:6px; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot.need { background:var(--red); }
.dot.owned { background:var(--green); }
.dot.trade { background:var(--amber); }

.fragment-grid { display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap:12px; }
.fragment-card {
  min-width:0;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background: linear-gradient(160deg, rgba(54,42,29,.96), rgba(28,22,17,.96));
  padding:10px;
  position:relative;
  overflow:hidden;
}
.fragment-card.need { box-shadow: inset 0 0 0 1px rgba(209,81,74,.20); }
.fragment-card.owned { box-shadow: inset 0 0 0 1px rgba(74,174,105,.18); }
.fragment-card.trade { box-shadow: inset 0 0 0 1px rgba(222,166,62,.28); }
.fragment-art {
  aspect-ratio: 1 / 1;
  border-radius:11px;
  display:grid;
  place-items:center;
  font-size: clamp(25px, 3.7vw, 45px);
  font-weight: 900;
  color: rgba(255,255,255,.88);
  border:1px solid rgba(239,196,94,.22);
  background:
    radial-gradient(circle at 32% 22%, rgba(246,211,126,.14), transparent 24%),
    linear-gradient(145deg, #574328, #282019 64%, #1d1814);
  text-shadow: 0 3px 12px rgba(0,0,0,.44);
}
.fragment-title { margin:9px 0 7px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#dfd2c0; }
.fragment-state { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:8px; min-height:22px; }
.state-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.state-label.need { color:#ff9f99; }
.state-label.owned { color:#9cdeb0; }
.state-label.trade { color:#f3c96d; }
.qty-control { display:grid; grid-template-columns: 32px 1fr 32px; gap:5px; align-items:center; }
.qty-btn { height:31px; background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.075); font-weight:900; }
.qty-btn:hover { background:rgba(255,255,255,.10); }
.qty { text-align:center; font-weight:900; color:var(--gold-2); }

.panel { padding:20px; }
.exchange-layout { display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; }
.match-list { display:grid; gap:12px; }
.match-card { border:1px solid rgba(255,255,255,.07); border-radius:15px; padding:16px; background:rgba(255,255,255,.027); }
.match-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.match-user { display:flex; align-items:center; gap:11px; }
.match-avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:11px; background:linear-gradient(145deg,#d7bd6b,#7b551b); color:#261a08; font-weight:900; }
.match-score { color:var(--gold-2); font-weight:900; white-space:nowrap; }
.trade-cols { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.trade-box { border-radius:12px; padding:11px; background:rgba(0,0,0,.18); }
.trade-box h4 { margin:0 0 8px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.trade-item { font-size:13px; margin:4px 0; }
.trade-item.good { color:#a6dfb7; }
.trade-item.give { color:#f0c876; }
.empty-state { padding:28px; text-align:center; color:var(--muted); border:1px dashed rgba(255,255,255,.10); border-radius:14px; }

.form-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.field label { display:block; color:var(--muted); font-size:12px; margin-bottom:6px; }
.field input {
  width:100%;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(0,0,0,.24);
  color:var(--text);
  padding:11px 12px;
  outline:none;
}
.field input:focus { border-color:rgba(224,179,74,.52); box-shadow:0 0 0 3px rgba(224,179,74,.08); }
.profile-actions { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.note { padding:13px 14px; border:1px solid rgba(90,150,192,.25); border-radius:12px; background:rgba(65,116,153,.08); color:#c5dceb; line-height:1.5; }

.toast {
  position:fixed;
  left:50%; bottom:24px;
  transform:translate(-50%, 18px);
  opacity:0;
  pointer-events:none;
  background:#211a13;
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 15px;
  box-shadow:var(--shadow);
  transition:.22s ease;
  z-index:50;
}
.toast.show { opacity:1; transform:translate(-50%, 0); }

@media (max-width: 1000px) {
  .topbar { grid-template-columns: 1fr auto; }
  .nav-tabs { grid-column: 1 / -1; order: 3; justify-content:flex-start; overflow-x:auto; }
  .hero, .exchange-layout { grid-template-columns:1fr; }
  .album-grid { grid-template-columns:repeat(2,1fr); }
  .fragment-grid { grid-template-columns:repeat(5,1fr); }
}

@media (max-width: 680px) {
  main { width:min(100% - 18px, 1260px); padding-top:18px; }
  .topbar { padding:11px 10px; gap:10px; }
  .player-chip small { display:none; }
  .brand-subtitle { display:none; }
  .nav-tabs { gap:4px; }
  .nav-btn { padding:8px 10px; }
  .hero-card, .panel { border-radius:16px; }
  .album-grid { grid-template-columns:1fr; }
  .fragment-grid { grid-template-columns:repeat(3,1fr); gap:8px; }
  .fragment-card { padding:8px; }
  .trade-cols, .form-grid { grid-template-columns:1fr; }
  .section-head { align-items:flex-start; flex-direction:column; }
}


/* v2 — поддержка создателя и клановые базы */
.support-nav {
  border: 1px solid rgba(225, 97, 88, .30);
  background: rgba(196, 67, 58, .10);
  color: #ffc0ba;
  padding: 9px 13px;
  border-radius: 10px;
  cursor: pointer;
  transition: .18s ease;
}
.support-nav:hover { background: rgba(196,67,58,.17); transform: translateY(-1px); }
.support-nav.active { border-color: rgba(242,210,122,.40); color: var(--gold-2); }

.support-strip {
  margin-top: 24px;
  border: 1px solid rgba(226, 178, 73, .24);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(56,39,22,.94), rgba(33,25,18,.96));
  padding: 22px;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
}
.support-strip h3 { margin: 4px 0 8px; }
.support-strip p { margin: 0; color: var(--muted); max-width: 760px; line-height: 1.55; }
.support-strip-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }

.paywall-grid { display:grid; grid-template-columns: minmax(0,1.45fr) minmax(290px,.7fr); gap:18px; }
.paywall-main { padding:28px; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; }
.lock-orb { width:74px; height:74px; border-radius:22px; display:grid; place-items:center; font-size:34px; background:rgba(218,168,58,.10); border:1px solid rgba(231,188,88,.24); }
.check-list { display:grid; gap:8px; color:#d9ccbb; margin:18px 0 4px; }
.free-vs-clan { padding:22px; }
.compare-row { display:flex; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.06); color:var(--muted); }
.compare-row b { color:#bfe2c9; white-space:nowrap; }
.compare-row.premium b { color:var(--gold-2); }

.support-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.support-card { padding:26px; }
.support-card.featured { border-color:rgba(224,175,66,.38); box-shadow:0 16px 44px rgba(0,0,0,.28), inset 0 0 0 1px rgba(242,210,122,.05); }
.support-card h3 { font-size:24px; margin:8px 0 10px; }
.support-card p { color:var(--muted); line-height:1.6; }
.support-icon { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; font-size:25px; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.form-grid.compact { grid-template-columns:repeat(2,minmax(0,1fr)); margin:18px 0 12px; }
.price-note { margin:0 0 16px; padding:11px 12px; border-radius:10px; color:#d9ccbb; background:rgba(218,168,58,.07); border:1px solid rgba(218,168,58,.15); font-size:13px; }
.demo-activation { margin-top:18px; padding:22px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.demo-activation h3 { margin:4px 0 6px; }
.demo-activation p { margin:0; color:var(--muted); }

.clan-hero { padding:26px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.clan-hero > div:first-child { display:flex; gap:18px; align-items:center; }
.clan-emblem { width:78px; height:78px; border-radius:22px; display:grid; place-items:center; font-weight:950; letter-spacing:.04em; color:#2d1d06; background:linear-gradient(145deg,#f0d27c,#a46b18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.clan-hero h2 { margin:5px 0 7px; }
.clan-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.status-badge { padding:8px 11px; border-radius:999px; font-size:13px; border:1px solid rgba(255,255,255,.08); }
.status-badge.active { color:#bce6c8; background:rgba(65,151,91,.12); border-color:rgba(83,180,112,.25); }
.feature-grid { display:grid; gap:14px; margin-top:16px; }
.feature-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.feature-card { padding:18px; }
.feature-card b { color:var(--gold-2); }
.feature-card p { margin:8px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }
.note.important { border-color:rgba(230,173,68,.22); background:rgba(230,173,68,.07); }

@media (max-width: 1100px) {
  .topbar { grid-template-columns:auto 1fr; }
  .player-chip { grid-column:2; justify-self:end; }
  .nav-tabs { grid-column:1/-1; grid-row:2; overflow-x:auto; justify-content:flex-start; padding-bottom:2px; }
  .support-nav { white-space:nowrap; }
}
@media (max-width: 860px) {
  .paywall-grid, .support-grid, .feature-grid.three { grid-template-columns:1fr; }
  .support-strip, .demo-activation, .clan-hero { align-items:flex-start; flex-direction:column; }
  .clan-actions, .support-strip-actions { justify-content:flex-start; }
}
@media (max-width: 580px) {
  .paywall-main { grid-template-columns:1fr; }
  .form-grid.compact { grid-template-columns:1fr; }
  .clan-hero > div:first-child { align-items:flex-start; }
}


/* v4 — приглашения и управление участниками клановой базы */
.clan-dashboard { display:grid; grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr); gap:16px; margin-top:16px; }
.section-mini-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.section-mini-head h3 { margin:4px 0 0; }
.status-badge.paused { color:#e5c08a; background:rgba(173,116,37,.10); border-color:rgba(217,166,75,.22); }
.invite-code-row { display:grid; grid-template-columns:1fr auto; gap:9px; align-items:center; }
.invite-code-row code { min-width:0; overflow:auto; white-space:nowrap; padding:13px 14px; border-radius:11px; background:rgba(0,0,0,.28); border:1px solid rgba(242,210,122,.16); color:var(--gold-2); font-size:15px; font-weight:800; letter-spacing:.04em; }
.microcopy { color:var(--muted); font-size:12px; line-height:1.55; margin:12px 0 0; }
.inline-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.member-list { display:grid; gap:9px; }
.member-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px; border-radius:13px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); }
.member-row.blocked { opacity:.62; background:rgba(171,59,54,.06); border-color:rgba(212,86,77,.16); }
.member-user { display:flex; align-items:center; gap:10px; min-width:0; }
.member-user > div:last-child { min-width:0; display:grid; }
.member-user b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.member-user small { color:var(--muted); margin-top:3px; }
.member-actions { display:flex; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.small { padding:7px 9px !important; font-size:12px; }
.join-card p { color:var(--muted); line-height:1.55; }
.wide { width:100%; margin-top:10px; }
button:disabled { opacity:.45; cursor:not-allowed; transform:none !important; }
@media (max-width: 900px) { .clan-dashboard { grid-template-columns:1fr; } }
@media (max-width: 680px) {
  .member-row { align-items:flex-start; flex-direction:column; }
  .member-actions { justify-content:flex-start; }
  .invite-code-row { grid-template-columns:1fr; }
}

/* v5 — серверная авторизация */
.auth-wrap { width:min(920px,100%); margin:24px auto 0; }
.auth-card { padding:28px; }
.auth-tabs { display:flex; gap:8px; margin:20px 0 18px; }
.auth-tab { flex:1; padding:11px 14px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.025); color:var(--muted); cursor:pointer; }
.auth-tab.active { color:var(--gold-2); background:rgba(215,167,63,.11); border-color:rgba(215,167,63,.35); }
.auth-form { display:grid; gap:12px; }
.auth-form .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.server-badge { display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:7px 10px; border-radius:999px; border:1px solid rgba(78,181,111,.22); background:rgba(78,181,111,.08); color:#bce6c8; font-size:12px; }
.server-badge::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--green); }
.pending-box { border:1px solid rgba(229,173,68,.24); background:rgba(229,173,68,.07); border-radius:14px; padding:16px; }
.pending-box h3 { margin-bottom:7px; }
.pending-box p { color:var(--muted); margin-bottom:12px; line-height:1.55; }
.logout-btn { width:100%; margin-top:12px; }
.muted { color:var(--muted); }
.badge-line { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
@media (max-width:680px) { .auth-form .form-grid { grid-template-columns:1fr; } }

/* v6: rarity + real fragment artwork */
.admin-link { text-decoration: none; display: inline-flex; align-items: center; }
.album-card.rarity-gold { border-color: rgba(238, 195, 76, .34); }
.album-card.rarity-purple { border-color: rgba(178, 101, 232, .42); }
.album-card.rarity-blue { border-color: rgba(76, 169, 230, .42); }
.rarity-badge {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .03em;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 5px 16px rgba(0,0,0,.28);
}
.rarity-badge.gold { background: rgba(164, 111, 18, .86); color: #fff3c6; }
.rarity-badge.purple { background: rgba(102, 49, 145, .86); color: #f1d6ff; }
.rarity-badge.blue { background: rgba(29, 103, 151, .86); color: #d9f2ff; }
.fragment-art {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.fragment-art.has-image {
  background-size: cover;
  background-position: center;
  display: block;
}
.fragment-art.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.18), transparent 45%);
  pointer-events: none;
}
.fragment-no {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 7px;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: rgba(13, 11, 9, .78);
  color: #fff3ca;
  border: 1px solid rgba(245, 203, 98, .45);
  font-size: 13px;
  font-weight: 900;
  text-shadow: none;
}
.fragment-card.need .fragment-art.has-image { filter: brightness(.82) saturate(.82); }
.fragment-card.owned .fragment-art.has-image { filter: brightness(1.01) saturate(1.04); }
.fragment-card.trade .fragment-art.has-image { filter: brightness(1.04) saturate(1.08); }

@media (max-width: 900px) {
  .fragment-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .fragment-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* v7: account + multiple characters */
.character-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr);gap:18px;align-items:start}.character-list{display:grid;gap:14px}.character-card{display:grid;gap:14px}.character-card.selected{box-shadow:0 0 0 1px rgba(237,190,74,.55),0 18px 40px rgba(0,0,0,.2)}.character-head{display:flex;align-items:center;gap:12px}.character-head h3{margin:0}.character-editor{position:sticky;top:88px}.character-editor form{display:grid;gap:12px;margin-top:14px}.wide{width:100%}@media(max-width:900px){.character-layout{grid-template-columns:1fr}.character-editor{position:static}}

/* v9: support tickets */
.help-layout{display:grid;grid-template-columns:minmax(320px,.85fr) minmax(420px,1.15fr);gap:16px;align-items:start}
.ticket-list{display:grid;gap:12px;margin-top:14px}.ticket-card{border:1px solid rgba(212,167,76,.24);border-radius:14px;padding:14px;background:rgba(255,255,255,.025)}.ticket-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.ticket-card small{display:block;color:var(--muted);margin-top:5px}.ticket-card p{white-space:pre-wrap;line-height:1.55}.ticket-reply{margin-top:12px;padding:12px;border-left:3px solid #d4a74c;background:rgba(212,167,76,.08);border-radius:8px}.field textarea{width:100%;resize:vertical;min-height:120px}
@media(max-width:900px){.help-layout{grid-template-columns:1fr}}