:root {
  --navy: #061018;
  --navy-2: #0b1a2e;
  --navy-3: #102844;
  --cyan: #3ec8f0;
  --cyan-soft: #7ed8f5;
  --cyan-deep: #1a8ec4;
  --amber: #f0a020;
  --amber-soft: #ffc45a;
  --ink: #e8f2ff;
  --ink-dim: #d6e4f4;
  --muted: #8aa4bc;
  --panel: #12263aee;
  --panel-solid: #142b42;
  --line: #2a5570;
  --danger: #ff7a6a;
  --ok: #5ee0a0;
  --shadow: 0 16px 40px #02081088;
  --radius: 10px;
  --font-display: "Fredoka", "Nunito", sans-serif;
  --font-body: "Nunito", "Segoe UI", sans-serif;
}

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

html { scroll-behavior: smooth; color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  background:
    radial-gradient(ellipse at 80% -10%, #123a58 0%, transparent 42%),
    radial-gradient(ellipse at 10% 30%, #0e2a44 0%, transparent 36%),
    linear-gradient(180deg, #061018 0%, #0a1c30 45%, #0d2438 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(#3ec8f022 1px, transparent 1px),
    linear-gradient(90deg, #3ec8f022 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}

button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap {
  width: min(1100px, calc(100% - 36px));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: #0b1a2eee;
  border-bottom: 2px solid #1e4a6a;
  backdrop-filter: blur(14px);
}

.site-header > .wrap.nav {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 0;
  margin-left: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.auth-corner {
  position: relative;
  z-index: 70;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  margin-right: 28px;
  max-width: min(100%, 520px);
}

.auth-corner .sponsor-menu {
  flex: 0 0 auto;
}

/* GrowFind + dil — ekranın en sol köşesi */
.nav-start {
  position: relative;
  z-index: 75;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  margin-left: 0;
  margin-right: 0;
  padding-left: max(2px, env(safe-area-inset-left, 0px));
  padding-right: 8px;
}

.nav-start .brand {
  flex: 0 0 auto;
}

.nav-start .lang-toggle {
  width: auto;
  min-width: 88px;
}

/* Sponsorlar + Kategoriler + İlan — sağda, kenardan biraz içeride */
.nav-end {
  position: relative;
  z-index: 75;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  margin-left: 12px;
  margin-right: 0;
  padding-right: max(28px, calc(18px + env(safe-area-inset-right, 0px)));
  padding-left: 4px;
}

.nav-end .auth-actions {
  flex: 0 0 auto;
}

.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  object-position: center 38%;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 0 2px #163a58, 0 0 16px #3ec8f044;
  background: var(--navy);
}

.brand-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cyan-soft);
  text-shadow: 0 0 18px #3ec8f055;
}

.navlinks {
  display: flex;
  gap: 18px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}

.navlinks a:hover { color: var(--cyan); }

.lang-toggle {
  min-width: 88px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--panel-solid);
  color: var(--cyan-soft);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
}

.discord-link {
  padding: 8px 12px;
  border: 2px solid #5865f2;
  border-radius: 8px;
  background: #5865f222;
  color: #c5caff;
  font-size: 12px;
  font-weight: 800;
}

.instagram-link {
  padding: 8px 12px;
  border: 2px solid #e1306c;
  border-radius: 8px;
  background: linear-gradient(135deg, #f09433aa, #e6683caa, #dc2743aa, #cc2366aa, #bc1888aa);
  color: #ffe8f2;
  font-size: 12px;
  font-weight: 800;
}

.auth-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn,
.btn-ghost {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn {
  background: linear-gradient(180deg, #ffc45a, #e89218);
  border-color: #c87810;
  color: #1a1208;
  box-shadow: inset 0 -3px #c87810, 0 3px 0 #3a2810, 0 0 18px #f0a02033;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -1px #c87810; }

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--cyan-soft);
}

.btn-ghost:hover {
  border-color: var(--cyan);
  background: #3ec8f012;
}

.btn-block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: wait; }

/* Hero */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: min(92vh, 820px);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
}

.hero-visual {
  position: relative;
  z-index: 0;
  min-height: 420px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 40%, #123a58 0%, #061018 68%),
    var(--navy);
  overflow: hidden;
}

.hero-pixel {
  width: min(920px, 92%);
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px #000a);
  animation: heroDrift 16s ease-in-out infinite alternate;
}

@keyframes heroDrift {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-10px) scale(1.03); }
}

.hero-bottom {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #061018 0%, #0a2034 100%);
  border-top: 1px solid #1e4a6a66;
  padding: 22px 0 34px;
}

.hero-content {
  max-width: 640px;
  color: var(--ink);
  animation: heroIn 0.7s ease both;
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero h1 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero h1 span { color: var(--cyan); }

.hero-copy {
  margin: 0 0 18px;
  max-width: 520px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.search {
  display: flex;
  gap: 8px;
  max-width: 520px;
  padding: 8px;
  background: #0e2236ee;
  border: 2px solid var(--cyan-deep);
  border-radius: 12px;
  box-shadow: 0 0 0 1px #3ec8f022, var(--shadow);
}

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
}

.search input::placeholder { color: #6a849c; font-weight: 600; }

.search button {
  border: 0;
  border-radius: 8px;
  padding: 0 18px;
  background: linear-gradient(180deg, #ffc45a, #e89218);
  color: #1a1208;
  font-weight: 800;
  box-shadow: inset 0 -3px #c87810;
}

/* Sections */
.section {
  padding: 36px 0 48px;
}

.section-head-toggle {
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.section-head-toggle:hover {
  filter: brightness(1.06);
}

.section-head-toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.section-head-aside {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.section-toggle-chevron {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #2a557055;
  background: #0a1c2e;
  color: var(--cyan-soft);
  font-size: 14px;
  line-height: 1;
  transition: transform 0.18s ease;
}

.section-head-toggle[aria-expanded="false"] .section-toggle-chevron {
  transform: rotate(-90deg);
}

.category-grid.is-collapsed {
  display: none;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px 20px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.section-head h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--cyan-soft);
}

.section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.tag {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 2px solid var(--amber);
  border-radius: 6px;
  background: #f0a02018;
  color: var(--amber-soft);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* Categories dropdown (header, next to İlan ver) */
.sponsor-menu {
  position: relative;
  z-index: 57;
}

.sponsor-menu-btn {
  white-space: nowrap;
  border-color: #c87810;
  color: var(--amber-soft);
}

.sponsor-menu-btn:hover {
  border-color: var(--amber);
  background: #f0a02018;
}

.sponsor-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  width: min(280px, calc(100vw - 20px));
  max-height: min(72vh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
  border: 2px solid #8a6a28;
  border-radius: 12px;
  background: linear-gradient(180deg, #1a2818, #0b1a2e);
  box-shadow: var(--shadow), 0 0 22px #f0a02022;
  display: none;
}

.sponsor-menu.open .sponsor-menu-dropdown,
.sponsor-menu-dropdown:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sponsor-menu-dropdown[hidden] { display: none !important; }

.sponsor-menu-head {
  padding: 4px 6px 8px;
  border-bottom: 1px solid #2a557055;
}

.sponsor-menu-head strong {
  display: block;
  font-size: 13px;
  color: var(--amber-soft);
}

.sponsor-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sponsor-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #2a557055;
  border-radius: 10px;
  background: #0e2236;
  color: var(--ink);
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sponsor-item:hover {
  background: #123048;
  border-color: #3ec8f055;
}

.sponsor-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 2px solid #c87810;
  background: #0a1c2e;
}

.sponsor-avatar-yt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ff4d4d;
}

.sponsor-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sponsor-meta strong {
  font-size: 13px;
  color: var(--ink);
}

.sponsor-meta small {
  font-size: 11px;
  color: var(--muted);
}

.sponsor-go {
  color: var(--cyan-soft);
  font-weight: 900;
  flex: 0 0 auto;
}

.sponsor-empty {
  padding: 12px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.sponsor-empty strong {
  font-size: 13px;
  color: var(--amber-soft);
}

.sponsor-empty p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.sponsor-empty-link {
  font-size: 12px;
}

.category-menu {
  position: relative;
  z-index: 56;
}

.category-menu-btn {
  white-space: nowrap;
}

.category-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 85;
  width: min(240px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 8px;
  border: 2px solid var(--cyan-deep);
  border-radius: 12px;
  background: linear-gradient(160deg, #142b42, #0b1a2e);
  box-shadow: var(--shadow), 0 0 24px #3ec8f022;
  display: none;
}

.category-menu.open .category-menu-dropdown,
.category-menu-dropdown:not([hidden]) {
  display: block;
}

.category-menu-dropdown[hidden] { display: none !important; }

.category-menu-list {
  display: flex;
  flex-direction: row;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: min(92vw, 760px);
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.category-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  min-width: max-content;
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--panel-solid);
  color: var(--ink-dim);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
}

.category-chip img {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 7px;
  image-rendering: auto;
  background: #061018;
}

.category-chip:hover {
  border-color: var(--cyan-deep);
  background: #163a58;
}

.category-chip.active {
  background: linear-gradient(180deg, #1a4060, #123048);
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px #3ec8f033, 0 0 18px #3ec8f022;
  color: var(--cyan-soft);
}

.shared-status {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #123048;
  color: var(--cyan-soft);
  font-size: 12px;
  font-weight: 800;
}

.listings-count {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  color: var(--cyan-soft);
  font-size: 12px;
  font-weight: 800;
}

.listings-count-mine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.listings-clear-mine {
  border: 1px solid var(--line);
  background: #0e2236;
  color: var(--cyan-soft);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
}

.listings-clear-mine:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.listing-empty .btn-ghost {
  display: inline-block;
  margin-top: 12px;
}

.listing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.listing-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 36px 18px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: #0e2236;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.listing-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--panel-solid);
  box-shadow: var(--shadow);
  animation: cardIn 0.35s ease both;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.listing-cover {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 80%, #2a6a8a, #0e2438 68%);
}

.listing-cover[data-cat="wings"] { background: radial-gradient(ellipse at 50% 80%, #3a7aa0, #102838); }
.listing-cover[data-cat="ances"] { background: radial-gradient(ellipse at 50% 80%, #4a7850, #142830); }
.listing-cover[data-cat="block"] { background: radial-gradient(ellipse at 50% 80%, #8a6240, #241810); }
.listing-cover[data-cat="world"] { background: radial-gradient(ellipse at 50% 80%, #2a8a70, #0c2430); }
.listing-cover[data-cat="hand"] { background: radial-gradient(ellipse at 50% 80%, #c88830, #2a1c10); }
.listing-cover[data-cat="hat"] { background: radial-gradient(ellipse at 50% 80%, #7a4a88, #1c1428); }
.listing-cover[data-cat="shoes"] { background: radial-gradient(ellipse at 50% 80%, #3a6888, #101c28); }
.listing-cover[data-cat="pant"] { background: radial-gradient(ellipse at 50% 80%, #385878, #101828); }
.listing-cover[data-cat="shirt"] { background: radial-gradient(ellipse at 50% 80%, #3a8870, #102820); }
.listing-cover[data-cat="hair"] { background: radial-gradient(ellipse at 50% 80%, #b87830, #281810); }
.listing-cover[data-cat="other"] { background: radial-gradient(ellipse at 50% 80%, #6a4a88, #1c1428); }

.listing-cover-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  min-height: 40px;
  background: linear-gradient(90deg, #1a6a90, #c87818);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.listing-cover-head.has-cover {
  min-height: 52px;
  background-color: #0a1c2e;
  background-image: var(--owner-cover);
  background-size: cover;
  background-position: center;
}

.listing-cover-head > .banner-media-img,
.listing-cover-head > .banner-media-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.listing-cover-head.has-cover:has(> .banner-media-img) {
  background-image: none;
}

.listing-cover-head.has-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #061018b8, #06101855 55%, #06101888);
  pointer-events: none;
}

.listing-cover-head > *:not(.banner-media-img):not(.banner-media-thumb) {
  position: relative;
  z-index: 2;
}

.listing-cover-label {
  flex: 0 1 auto;
  color: #f4fbff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  white-space: nowrap;
  opacity: 0.92;
}

.listing-seller {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 64%;
  padding: 1px 6px 1px 1px;
  border-radius: 999px;
  background: #061018f2;
  border: 1px solid #ffc45a;
  box-shadow: 0 1px 3px #0006;
  color: #ffd88a;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 1px 2px #000a;
}

.listing-seller-avatar-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: 50%;
  line-height: 0;
}

.listing-seller-avatar-btn.avatar-frame-gold,
.listing-seller-avatar-btn.avatar-frame-cyan,
.listing-seller-avatar-btn.avatar-frame-ruby,
.listing-seller-avatar-btn.avatar-frame-emerald,
.listing-seller-avatar-btn.avatar-frame-boss {
  border-radius: 50%;
  overflow: visible;
}

.listing-seller-avatar {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ffc45a;
  background: #0b1a2e;
  pointer-events: none;
}

.listing-seller-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.listing-seller-name:hover b,
button.listing-seller-name:focus-visible b {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.listing-seller b {
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.listing-cover-art {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
}

.listing-cover-art img,
.listing-item-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 6px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #06101866;
  filter: drop-shadow(0 3px 4px #0008);
}

.listing-cover-art strong {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  text-shadow: 0 2px 4px #000a;
  overflow-wrap: anywhere;
}

.listing-body { flex: 1; padding: 12px; }

.listing-type {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.listing-body h3 {
  margin: 4px 0 8px;
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.listing-world {
  padding: 8px;
  border-radius: 6px;
  background: #0e2236;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.listing-world span {
  color: var(--cyan);
  font-family: ui-monospace, Consolas, monospace;
  font-weight: 900;
}

.listing-note {
  margin: 8px 0 0;
  color: #9ab0c4;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.listing-actions {
  display: grid;
  gap: 6px;
  padding: 0 12px 12px;
}

.listing-actions-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.listing-actions-row > [data-copy-world] {
  flex: 1;
}

.listing-actions > button,
.listing-actions-row > button,
.owner-actions button {
  min-height: 34px;
  padding: 7px 10px;
  border: 2px solid var(--line);
  border-radius: 7px;
  background: #0e2236;
  color: var(--cyan-soft);
  font-size: 11px;
  font-weight: 800;
}

.like-btn {
  flex: 0 0 40px;
  width: 40px;
  padding: 0 !important;
  color: #9ab0c4 !important;
  line-height: 1;
}

.like-btn .like-btn-icon {
  font-size: 16px;
  display: inline-block;
  transform: translateY(1px);
}

.like-btn:hover {
  border-color: #e87890;
  color: #ff8aa5 !important;
}

.like-btn.liked {
  border-color: #e05070;
  background: #2a1420;
  color: #ff6b8a !important;
}

.like-btn.liked:hover {
  border-color: #ff7a96;
  color: #ff9bb0 !important;
}

.like-btn:disabled {
  opacity: 0.65;
}

.owner-actions { display: flex; gap: 6px; }
.owner-actions button { flex: 1; }
.owner-actions .danger {
  color: var(--danger);
  border-color: #8a4038;
  background: #2a1818;
}

/* Listing menu (header) */
.listing-menu {
  position: relative;
  z-index: 55;
}

.listing-menu-btn {
  white-space: nowrap;
}

.listing-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  width: min(360px, calc(100vw - 24px));
  padding: 14px;
  border: 2px solid var(--cyan-deep);
  border-radius: 12px;
  background: linear-gradient(160deg, #142b42, #0b1a2e);
  box-shadow: var(--shadow), 0 0 24px #3ec8f022;
  display: none;
}

.listing-menu.open .listing-menu-dropdown,
.listing-menu-dropdown:not([hidden]) {
  display: grid;
  gap: 12px;
}

.listing-menu-dropdown[hidden] { display: none !important; }

.listing-menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.listing-menu-head strong {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--cyan-soft);
  line-height: 1.3;
}

.listing-menu-form.world-form,
.world-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 0;
  align-items: stretch;
}

.field { display: grid; gap: 5px; }
.field label {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.field input,
.field select {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #0a1c2e;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.field input:focus,
.field select:focus {
  outline: 0;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px #3ec8f022;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form-hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
}

/* Tools */
.tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 0;
}

.tool-block {
  padding: 20px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-top: 4px solid var(--cyan);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.tool-block h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--cyan-soft);
}

.tool-block > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.lockcalc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
}

.lockcalc .field { flex: 1; min-width: 120px; }

.calcresult {
  margin: 12px 0 0;
  color: var(--amber-soft);
  font-size: 13px;
  font-weight: 900;
}

.trade-only-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: 18px auto 0;
  padding: 12px 16px;
  border: 2px solid #2a6a88;
  border-radius: 10px;
  background: linear-gradient(180deg, #123048, #0c2236);
  color: #d7eef8;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.trade-only-banner strong {
  color: var(--cyan-soft);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.warning {
  margin-bottom: 36px;
  padding: 14px 16px;
  background: #2a2010;
  border: 2px solid #8a6a28;
  border-radius: 10px;
  color: #e8d8a8;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}

.warning a { color: var(--cyan-soft); text-decoration: underline; }
.warning b { color: var(--amber-soft); }

/* Footer */
.site-footer {
  border-top: 2px solid var(--line);
  padding: 18px 0 28px;
  background: #081420;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.foot {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: flex-end;
}

.foot-links a {
  color: var(--cyan-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.foot-links a:hover { color: var(--cyan); }

.terms-field {
  margin-top: 2px;
}

.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.45;
  cursor: pointer;
}

.terms-check input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--cyan);
}

.terms-check a {
  color: var(--cyan-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.terms-check a:hover { color: var(--cyan); }

.legal-page .legal-main {
  padding: 28px 0 56px;
  max-width: 760px;
}

.legal-card {
  padding: 22px 22px 28px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #0e2236;
  box-shadow: var(--shadow);
}

.legal-kicker {
  margin: 0 0 6px;
  color: var(--amber-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-card h1 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 36px);
  color: var(--cyan-soft);
}

.legal-updated {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.legal-card h2 {
  margin: 20px 0 8px;
  font-size: 16px;
  color: var(--ink);
}

.legal-card p,
.legal-card li {
  color: #c5d4e2;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
}

.legal-card ul {
  margin: 0;
  padding-left: 1.2em;
}

.legal-card a {
  color: var(--cyan-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 80;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  padding: 11px 16px;
  background: linear-gradient(180deg, #ffc45a, #e89218);
  color: #1a1208;
  border: 2px solid #c87810;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  box-shadow: var(--shadow);
  transition: 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Modals */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  justify-items: center;
  align-items: start;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  background: #020810cc;
  backdrop-filter: blur(8px);
}

.backdrop[hidden] { display: none !important; }

.modal {
  width: min(420px, 100%);
  max-height: none;
  margin-block: auto;
  padding: 22px;
  background: linear-gradient(160deg, #142b42, #0b1a2e);
  border: 2px solid var(--cyan-deep);
  border-radius: 14px;
  box-shadow: 0 24px 60px #000a, 0 0 30px #3ec8f022;
  color: var(--ink);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.modal-head h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--cyan-soft);
}

.modal-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.modal-close {
  width: 34px;
  height: 34px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #0e2236;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

.auth-error {
  min-height: 16px;
  margin: 8px 0;
  color: var(--danger);
  font-size: 12px;
  font-weight: 800;
}

.auth-switch {
  margin: 14px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.auth-switch button {
  border: 0;
  background: none;
  color: var(--cyan);
  text-decoration: underline;
  font-weight: 900;
}

.profile-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
}

.player-level-badge {
  position: absolute;
  right: -6px;
  bottom: -4px;
  min-width: 34px;
  padding: 2px 6px;
  border: 1px solid #ffd27a;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd27a, #e8a020);
  color: #1a1000;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 2px 6px #0008;
}

.menu-level-chip {
  display: inline-flex;
  margin-top: 4px;
  padding: 2px 8px;
  border: 1px solid #ffc45a88;
  border-radius: 999px;
  background: #1a3048;
  color: #ffd88a;
  font-size: 10px;
  font-weight: 800;
}

.level-hint {
  display: block !important;
  margin-top: 4px !important;
  color: var(--muted);
  font-size: 10px !important;
  font-weight: 700 !important;
}

.shop-modal {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.shop-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.shop-level-line {
  margin: 0 0 12px;
  color: #ffd88a;
  font-size: 12px;
  font-weight: 800;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-bottom: 4px;
}

.shop-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #0e2236;
  text-align: left;
}

.shop-card.locked { opacity: 0.72; }

.shop-card-preview {
  display: grid;
  place-items: center;
  min-height: 88px;
  border-radius: 8px;
  background: #071624;
  border: 1px solid #1c3a55;
}

.shop-card-preview .profile-avatar-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.shop-card strong {
  font-size: 13px;
}

.shop-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.shop-card .btn,
.shop-card .btn-ghost {
  width: 100%;
}

.avatar-frame-host {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

/*
  Ornate frames: avatar sits in the measured hole; frame image OVER it.
  --frame-avatar = hole diameter % of box; --frame-nudge-y = hole center offset.
*/
.avatar-frame-cyan,
.avatar-frame-gold,
.avatar-frame-emerald,
.avatar-frame-ruby,
.avatar-frame-boss {
  --frame-avatar: 62%;
  --frame-nudge-y: 0%;
  position: relative;
  display: grid !important;
  place-items: center;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  background: transparent !important;
}

/* Avatar slightly larger than hole so frame rim covers the edge (no gap) */
.avatar-frame-cyan {
  --frame-avatar: 60%;
  --frame-nudge-y: -3.2%;
}

.avatar-frame-gold {
  --frame-avatar: 60%;
  --frame-nudge-y: -3.2%;
}

.avatar-frame-emerald {
  --frame-avatar: 60%;
  --frame-nudge-y: -3.2%;
}

.avatar-frame-ruby {
  --frame-avatar: 60%;
  --frame-nudge-y: -3.2%;
}

.avatar-frame-boss {
  --frame-avatar: 58%;
  --frame-nudge-y: -1.5%;
}

.avatar-frame-cyan::after,
.avatar-frame-gold::after,
.avatar-frame-emerald::after,
.avatar-frame-ruby::after,
.avatar-frame-boss::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2;
  pointer-events: none;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.avatar-frame-cyan::after {
  background-image: url('assets/frames/cyan-frame.png?v=9') !important;
}

.avatar-frame-gold::after {
  background-image: url('assets/frames/growfind-like-silver.gif?v=4') !important;
}

.avatar-frame-emerald::after {
  background-image: url('assets/frames/growfind-like-pink.gif?v=1') !important;
}

.avatar-frame-ruby::after {
  background-image: url('assets/frames/growfind-like-blue.gif?v=1') !important;
}

.avatar-frame-boss::after {
  background-image: url('assets/frames/boss-frame.gif?v=6') !important;
}

.profile-avatar-wrap.avatar-frame-cyan .profile-avatar-img,
.profile-avatar-wrap.avatar-frame-gold .profile-avatar-img,
.profile-avatar-wrap.avatar-frame-emerald .profile-avatar-img,
.profile-avatar-wrap.avatar-frame-ruby .profile-avatar-img,
.profile-avatar-wrap.avatar-frame-boss .profile-avatar-img,
.avatar-frame-host.avatar-frame-cyan > img,
.avatar-frame-host.avatar-frame-gold > img,
.avatar-frame-host.avatar-frame-emerald > img,
.avatar-frame-host.avatar-frame-ruby > img,
.avatar-frame-host.avatar-frame-boss > img,
.profile-menu-btn.avatar-frame-cyan img,
.profile-menu-btn.avatar-frame-gold img,
.profile-menu-btn.avatar-frame-emerald img,
.profile-menu-btn.avatar-frame-ruby img,
.profile-menu-btn.avatar-frame-boss img,
.shop-card-preview.avatar-frame-cyan .profile-avatar-img,
.shop-card-preview.avatar-frame-gold .profile-avatar-img,
.shop-card-preview.avatar-frame-emerald .profile-avatar-img,
.shop-card-preview.avatar-frame-ruby .profile-avatar-img,
.shop-card-preview.avatar-frame-boss .profile-avatar-img,
.listing-seller-avatar-btn.avatar-frame-cyan .listing-seller-avatar,
.listing-seller-avatar-btn.avatar-frame-gold .listing-seller-avatar,
.listing-seller-avatar-btn.avatar-frame-emerald .listing-seller-avatar,
.listing-seller-avatar-btn.avatar-frame-ruby .listing-seller-avatar,
.listing-seller-avatar-btn.avatar-frame-boss .listing-seller-avatar {
  position: relative !important;
  z-index: 1;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--frame-avatar) !important;
  height: var(--frame-avatar) !important;
  min-width: var(--frame-avatar) !important;
  min-height: var(--frame-avatar) !important;
  max-width: var(--frame-avatar) !important;
  max-height: var(--frame-avatar) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #0b1a2e !important;
  image-rendering: auto;
  transform: translateY(var(--frame-nudge-y, 0%)) !important;
  place-self: center !important;
}

/* Beat the default 52px shop preview size */
.shop-card-preview.avatar-frame-cyan .profile-avatar-img,
.shop-card-preview.avatar-frame-gold .profile-avatar-img,
.shop-card-preview.avatar-frame-emerald .profile-avatar-img,
.shop-card-preview.avatar-frame-ruby .profile-avatar-img,
.shop-card-preview.avatar-frame-boss .profile-avatar-img {
  width: var(--frame-avatar) !important;
  height: var(--frame-avatar) !important;
  min-width: var(--frame-avatar) !important;
  min-height: var(--frame-avatar) !important;
}

.profile-avatar-wrap.avatar-frame-cyan,
.profile-avatar-wrap.avatar-frame-gold,
.profile-avatar-wrap.avatar-frame-emerald,
.profile-avatar-wrap.avatar-frame-ruby,
.profile-avatar-wrap.avatar-frame-boss {
  width: 108px;
  height: 108px;
  flex: 0 0 108px;
}

.profile-avatar-wrap.avatar-frame-cyan .player-level-badge,
.profile-avatar-wrap.avatar-frame-gold .player-level-badge,
.profile-avatar-wrap.avatar-frame-emerald .player-level-badge,
.profile-avatar-wrap.avatar-frame-ruby .player-level-badge,
.profile-avatar-wrap.avatar-frame-boss .player-level-badge {
  z-index: 5;
  right: 4px;
  bottom: 6px;
}

.profile-menu-btn.avatar-frame-cyan,
.profile-menu-btn.avatar-frame-gold,
.profile-menu-btn.avatar-frame-emerald,
.profile-menu-btn.avatar-frame-ruby,
.profile-menu-btn.avatar-frame-boss {
  width: 76px;
  height: 76px;
  padding: 0;
}

.profile-menu-head .avatar-frame-host,
.profile-menu-head .avatar-frame-host.avatar-frame-cyan,
.profile-menu-head .avatar-frame-host.avatar-frame-gold,
.profile-menu-head .avatar-frame-host.avatar-frame-emerald,
.profile-menu-head .avatar-frame-host.avatar-frame-ruby,
.profile-menu-head .avatar-frame-host.avatar-frame-boss {
  width: 76px;
  height: 76px;
}

.shop-card-preview.avatar-frame-cyan,
.shop-card-preview.avatar-frame-gold,
.shop-card-preview.avatar-frame-emerald,
.shop-card-preview.avatar-frame-ruby,
.shop-card-preview.avatar-frame-boss {
  width: 148px;
  height: 148px;
  min-height: 148px;
  margin: 4px auto 0;
  border: 0 !important;
  outline: none;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible;
}

.listing-seller-avatar-btn.avatar-frame-cyan,
.listing-seller-avatar-btn.avatar-frame-gold,
.listing-seller-avatar-btn.avatar-frame-emerald,
.listing-seller-avatar-btn.avatar-frame-ruby,
.listing-seller-avatar-btn.avatar-frame-boss {
  width: 30px;
  height: 30px;
}

@media (max-width: 520px) {
  .shop-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 16px;
  }
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .shop-card { padding: 10px; }
  .shop-card-preview { min-height: 72px; }
}

.profile-avatar-img {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  border: 2px solid var(--cyan);
  object-fit: cover;
  background: var(--navy);
}

.profile-kicker {
  margin: 0;
  color: var(--amber-soft);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.profile-data {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.profile-data div {
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #0e2236;
}

.profile-data small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.profile-data strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.profile-listings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #123048;
}

.profile-listings-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.password-form {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.password-form h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--cyan-soft);
}

.password-form label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.password-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0c1c2c;
  color: var(--ink);
}

.password-form .form-error {
  margin: 0;
  color: var(--danger);
  font-size: 12px;
  font-weight: 800;
}

.password-form .btn {
  margin-top: 4px;
}

.count-badge {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(180deg, #1a6a90, #c87818);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

/* Profile menu */
.profile-menu { position: relative; }

.profile-menu-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  background: var(--navy);
  overflow: hidden;
  box-shadow: 0 0 12px #3ec8f044;
}

.profile-menu-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  width: min(320px, calc(100vw - 24px));
  max-height: min(78vh, 640px);
  max-height: min(78dvh, 640px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #0e2236;
  box-shadow: var(--shadow);
  display: none;
}

.profile-menu.open .profile-menu-dropdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-menu-close {
  display: none;
  position: sticky;
  top: 0;
  z-index: 2;
  align-self: flex-end;
  width: 40px;
  height: 40px;
  margin: -4px 0 4px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #0a1c2e;
  color: var(--cyan-soft);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
}

.profile-menu-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -12px -12px 0;
  padding: 14px 12px;
  border-bottom: 1px solid #2a557055;
  border-radius: 10px 10px 0 0;
  background: #0a1c2e center/cover no-repeat;
  overflow: hidden;
}

.profile-menu-head.has-cover:has(> .banner-media-img) {
  background-image: none;
}

.profile-menu-head:has(.avatar-frame-cyan),
.profile-menu-head:has(.avatar-frame-gold),
.profile-menu-head:has(.avatar-frame-emerald),
.profile-menu-head:has(.avatar-frame-ruby),
.profile-menu-head:has(.avatar-frame-boss) {
  overflow: visible;
}

.profile-menu-head .avatar-frame-host {
  width: 76px;
  height: 76px;
}

.profile-menu-head.has-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 16, 28, 0.28), rgba(6, 16, 28, 0.82));
  pointer-events: none;
}

.profile-menu-head > *:not(.banner-media-img):not(.banner-media-thumb) {
  position: relative;
  z-index: 2;
}

.profile-menu-head > img:not(.banner-media-img),
.profile-menu-head > .avatar-frame-host > img,
.profile-menu-head #profileMenuAvatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cyan);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  background: #0e2236;
}

.profile-menu-head > .banner-media-img,
.profile-menu-head > .banner-media-thumb {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  box-shadow: none !important;
  object-fit: cover;
  object-position: center;
  z-index: 0 !important;
  pointer-events: none;
  background: transparent;
}

.profile-menu-head strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
}

.profile-menu-head small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.profile-menu-head.has-cover strong {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.profile-menu-head.has-cover small {
  color: #d7e6f4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.profile-menu-item {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.profile-menu-item:hover { background: #123048; }
.profile-menu-item.danger { color: var(--danger); }

.cover-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c5d4e2;
  border: 1px solid #2a557055;
  background: #0a1c2e;
}

.cover-menu-item:hover { background: #123048; color: #fff; }
.cover-menu-icon { flex: 0 0 auto; opacity: 0.85; }

.profile-cover {
  width: 100%;
  height: 96px;
  margin: -4px 0 10px;
  border-radius: 10px;
  background: #0a1c2e center/cover no-repeat;
  border: 1px solid #2a557055;
}

.banner-media-img,
.banner-media-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.profile-cover-hero {
  position: relative;
  margin: -22px -22px 14px;
  padding: 18px 22px 16px;
  border-radius: 12px 12px 0 0;
  background: #0a1c2e center/cover no-repeat;
  overflow: hidden;
}

.profile-cover-hero.has-cover:has(> .banner-media-img) {
  background-image: none;
}

.profile-cover-hero > .banner-media-img,
.profile-cover-hero > .banner-media-thumb,
.friend-cover-hero > .banner-media-img,
#friendCoverBanner > .banner-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}

.profile-cover-hero.has-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 16, 28, 0.22), rgba(6, 16, 28, 0.78));
  pointer-events: none;
}

.profile-cover-hero > *:not(.banner-media-img):not(.banner-media-thumb) {
  position: relative;
  z-index: 2;
}

.profile-cover-hero .modal-head {
  margin: 0;
  align-items: flex-start;
}

.profile-cover-hero.has-cover .profile-kicker,
.profile-cover-hero.has-cover #profileTitle,
.profile-cover-hero.has-cover #profileSubtitle,
.profile-cover-hero.has-cover #friendProfileName,
.profile-cover-hero.has-cover #friendProfileSub {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.profile-cover-hero.has-cover .profile-avatar-img {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.cover-modal { width: min(560px, calc(100vw - 24px)); }
.cover-preview-wrap {
  width: 100%;
  aspect-ratio: 1340 / 300;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #2a557055;
  background: #0a1c2e;
}
.cover-preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover-help {
  margin: 10px 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.cover-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cover-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  cursor: pointer;
}
.cover-file-name {
  color: var(--muted);
  font-size: 12px;
}
.cover-size-hint {
  margin: 6px 0 12px;
  color: var(--cyan-soft);
  font-size: 12px;
  font-weight: 700;
}
.cover-pick-title {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--ink);
}
.cover-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.cover-thumb {
  position: relative;
  padding: 0;
  border: 2px solid #2a557055;
  border-radius: 8px;
  overflow: hidden;
  background: #0a1c2e;
  aspect-ratio: 1340 / 300;
}
.cover-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover-thumb.active {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}
.cover-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.cover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.avatar-actions { display: flex; gap: 6px; }

.avatar-actions button {
  flex: 1;
  padding: 7px;
  border: 2px solid var(--line);
  border-radius: 7px;
  background: #0a1c2e;
  font-size: 11px;
  font-weight: 800;
  color: var(--cyan-soft);
}

.avatar-actions .danger {
  color: var(--danger);
  border-color: #8a4038;
}

.managed-list {
  display: grid;
  gap: 6px;
  max-height: 140px;
  overflow: auto;
}

.managed-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0a1c2e;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.managed-item strong { display: block; font-size: 12px; color: var(--ink); }
.managed-item small { display: block; color: var(--muted); font-size: 10px; }
.managed-item em {
  color: var(--cyan);
  font: 800 11px ui-monospace, Consolas, monospace;
  align-self: center;
}

.managed-empty {
  padding: 10px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.friends-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #0a1c2e;
}

.friends-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--cyan-soft);
}

.friend-request-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e85d4c;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.friends-sub {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.friend-requests-panel,
.friend-outgoing-panel {
  display: grid;
  gap: 6px;
}

.friend-request-card {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #123048;
}

.friend-request-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.friend-request-head img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cyan-deep);
  flex-shrink: 0;
}

.friend-request-head strong {
  display: block;
  font-size: 12px;
}

.friend-request-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.friend-request-actions {
  display: flex;
  gap: 6px;
}

.friend-request-actions .btn,
.friend-request-actions .btn-ghost {
  flex: 1;
  padding: 6px 8px;
  font-size: 11px;
}

.friend-outgoing-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d2436;
  font-size: 11px;
  font-weight: 700;
}

.friend-outgoing-row img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cyan-deep);
}

.friend-outgoing-row span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-outgoing-row .btn-ghost {
  padding: 4px 8px;
  font-size: 10px;
}

.friends-add {
  display: flex;
  gap: 6px;
}

.friends-add input {
  flex: 1;
  min-width: 0;
  padding: 8px 9px;
  border: 2px solid var(--line);
  border-radius: 7px;
  background: #061018;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.friends-add .btn {
  padding: 8px 10px;
  font-size: 11px;
}

.friends-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 120px;
  overflow: auto;
}

.friend-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
}

.friend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #123048;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  min-width: 0;
}

.friend-chip:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px #3ec8f022;
}

.friend-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 110px;
}

.friend-chip img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cyan-deep);
  flex-shrink: 0;
}

.friend-remove-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: #9bb4c8;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.friend-remove-btn:hover {
  color: #fff;
  background: #e85d4c;
  border-color: #e85d4c;
}

.friend-remove-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.friend-modal {
  width: min(720px, 100%);
}

.friend-listings {
  max-height: min(60vh, 480px);
  overflow: auto;
}

.friend-listings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.avatar-lightbox {
  z-index: 90;
  cursor: zoom-out;
}

.avatar-lightbox-img {
  width: min(480px, 84vw);
  height: min(480px, 84vw);
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ffc45a;
  box-shadow: 0 16px 48px #000c, 0 0 24px #ffc45a33;
  background: #0b1a2e;
  animation: avatarPop 0.22s ease both;
}

@keyframes avatarPop {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1); }
}

.avatar-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
}

.profile-avatar-img {
  cursor: zoom-in;
}

@media (max-width: 620px) {
  .friend-listings-grid { grid-template-columns: 1fr; }
}

/* Responsive */
@media (max-width: 1000px) {
  .listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  .navlinks { display: none; }
  .hero { min-height: auto; }
  .hero-visual { min-height: 300px; }
  .hero-pixel { max-height: 48vh; }
  .world-form { grid-template-columns: 1fr 1fr; }
  .tools { grid-template-columns: 1fr; }
  .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .wrap { width: calc(100% - 24px); }
  .nav {
    min-height: 60px;
    gap: 8px;
    flex-wrap: wrap;
    padding-block: 8px;
  }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-text { font-size: 18px; }
  .brand-logo { width: 40px; height: 40px; }
  .nav {
    align-items: center;
  }
  .site-header {
    flex-wrap: wrap;
    padding-block: 6px;
    row-gap: 6px;
  }
  .site-header > .wrap.nav {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .nav-start {
    order: 0;
    gap: 6px;
    padding-left: max(2px, env(safe-area-inset-left, 0px));
  }
  .nav-start .brand-text { font-size: 18px; }
  .nav-start .brand-logo { width: 40px; height: 40px; }
  .nav-start .lang-toggle {
    min-width: 0;
    width: auto;
    padding: 8px 8px;
    font-size: 11px;
  }
  .nav-end {
    order: 0;
    gap: 6px;
    margin-left: auto;
    padding-right: max(20px, calc(12px + env(safe-area-inset-right, 0px)));
  }
  .auth-corner {
    flex: 1 1 100%;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    align-items: stretch;
  }
  .auth-corner > .discord-link,
  .auth-corner > .instagram-link,
  .auth-corner > .sponsor-menu {
    min-width: 0;
    width: 100%;
  }
  .auth-corner > .sponsor-menu .sponsor-menu-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 8px 6px;
    font-size: 11px;
  }
  .nav-end .category-menu-btn,
  .nav-end .listing-menu-btn {
    padding: 8px 8px;
    font-size: 11px;
    white-space: nowrap;
  }
  .sponsor-menu-dropdown {
    right: 0;
    left: auto;
    width: min(260px, calc(100vw - 16px));
  }
  .discord-link,
  .instagram-link {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 8px 6px;
    font-size: 11px;
  }
  .profile-menu-btn { width: 42px; height: 42px; }
  /* Phone: full-screen profile sheet (scrollable) */
  body.profile-menu-open {
    overflow: hidden;
  }
  body.profile-menu-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(6, 16, 28, 0.78);
  }
  .profile-menu.open .profile-menu-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
    border-width: 0;
    z-index: 120;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: none;
  }
  .profile-menu-close {
    display: flex;
  }
  .profile-menu-head:has(.avatar-frame-cyan),
  .profile-menu-head:has(.avatar-frame-gold),
  .profile-menu-head:has(.avatar-frame-emerald),
  .profile-menu-head:has(.avatar-frame-ruby),
  .profile-menu-head:has(.avatar-frame-boss) {
    overflow: hidden;
  }
  .discord-link,
  .instagram-link {
    display: inline-flex;
    align-items: center;
  }
  .listing-menu-dropdown { right: 0; left: auto; width: min(320px, calc(100vw - 16px)); }
  .category-menu-dropdown { left: 0; right: auto; width: min(220px, calc(100vw - 16px)); }
  .btn, .btn-ghost { padding: 8px 10px; font-size: 11px; }
  .nav-end .auth-actions .btn-ghost { display: none; }
  .nav-end .auth-actions .btn { min-width: 0; padding: 8px 10px; font-size: 11px; }
  .nav-end .auth-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
  }
  .category-menu-dropdown { right: 0; left: auto; }
  .hero h1 { font-size: 28px; }
  .world-form { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; }
  .foot { flex-direction: column; }
  .listing-grid { grid-template-columns: 1fr; }
}

/* Admin panel */
.admin-page .admin-main {
  padding: 28px 0 64px;
}

.admin-hero h1 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  color: var(--cyan-soft);
}

.admin-hero p {
  margin: 0 0 22px;
  color: var(--muted);
}

.admin-admins,
.admin-sponsors {
  margin-bottom: 28px;
  padding: 18px 18px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.admin-admins-help {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}

.admin-admin-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.admin-admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #2a4a62;
  border-radius: 10px;
  background: #0a1624;
}

.admin-admin-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-admin-meta strong {
  color: var(--ink);
}

.admin-admin-meta small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.admin-sponsors-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-sponsors-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.admin-sponsor-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: #0e2034;
  border: 1px solid #2a4a62;
}

.admin-sponsor-avatar-fallback {
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.admin-sponsors-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--cyan-soft);
}

.admin-sponsor-form {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(180px, 1.4fr) auto;
  gap: 10px 12px;
  align-items: end;
  margin-bottom: 14px;
}

.admin-sponsor-form .field {
  display: grid;
  gap: 4px;
}

.admin-sponsor-form label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.admin-sponsor-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0c1c2c;
  color: var(--ink);
}

.admin-sponsor-list {
  display: grid;
  gap: 8px;
}

.admin-sponsor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #1e3a52;
  border-radius: 8px;
  background: #0c1c2c;
}

.admin-sponsor-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 200px;
}

.admin-sponsor-meta strong {
  color: var(--ink);
}

.admin-sponsor-meta small {
  color: var(--muted);
  font-size: 12px;
}

.admin-sponsor-meta a {
  color: var(--cyan-soft);
  font-size: 12px;
  word-break: break-all;
  text-decoration: none;
}

.admin-sponsor-meta a:hover {
  text-decoration: underline;
}

.admin-sponsor-list .admin-empty {
  text-align: left;
  padding: 8px 2px !important;
  margin: 0;
}

@media (max-width: 900px) {
  .admin-sponsor-form {
    grid-template-columns: 1fr;
  }
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid #3a6a88;
  border-radius: 6px;
  color: var(--amber-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-gate {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.admin-toolbar input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0c1c2c;
  color: var(--ink);
}

.admin-count {
  color: var(--muted);
  font-size: 13px;
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-solid);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.admin-table th,
.admin-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid #1e3a52;
  vertical-align: middle;
}

.admin-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: #0e2034;
}

.admin-table td strong {
  display: block;
}

.admin-email {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.admin-user-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #3a2810;
  color: var(--amber-soft);
  font-size: 10px;
  font-weight: 800;
  vertical-align: middle;
}

.admin-sponsor-badge {
  background: #3a2810;
  color: var(--amber-soft);
  border: 1px solid #c87810;
}

.admin-sub-badge {
  background: #102838;
  color: #7ad8f0;
  border: 1px solid #2a6a88;
}

.admin-sponsor-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.admin-sponsor-check input {
  width: 16px;
  height: 16px;
  accent-color: #c87810;
}

/* Sponsor badge — minimal */
.sponsor-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  vertical-align: middle;
  line-height: 1;
}

.sponsor-badge-icon {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.sponsor-badge-sm .sponsor-badge-icon {
  width: 15px;
  height: 15px;
}

.sponsor-badge-md {
  padding: 3px 9px 3px 4px;
  border-radius: 8px;
  border: 1px solid #b8862a66;
  background: #141a22;
}

.sponsor-badge-md .sponsor-badge-icon {
  width: 20px;
  height: 20px;
}

.sponsor-badge-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #e8c878;
}

.listing-seller .sponsor-badge {
  margin-left: 2px;
  flex: 0 0 auto;
}

.profile-menu-head .sponsor-badge {
  display: inline-flex;
  margin: 8px 0 0;
}

.friend-sponsor-wrap {
  margin: 6px 0 0;
}

.admin-table .sponsor-badge {
  margin-left: 6px;
  vertical-align: middle;
}

.admin-level-input,
.admin-frame-select {
  width: 88px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0c1c2c;
  color: var(--ink);
}

.admin-frame-select { width: 120px; }

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-delete-btn {
  border-color: #8a4038 !important;
  color: var(--danger) !important;
}

.admin-delete-btn:hover {
  background: #3a1818 !important;
}

.admin-delete-locked {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  align-self: center;
}

.admin-empty {
  text-align: center;
  color: var(--muted);
  padding: 28px !important;
}

.admin-status {
  margin-top: 12px;
  color: var(--ok);
  font-size: 13px;
}

.admin-status.err { color: var(--danger); }

.profile-menu-item.admin-menu-item {
  color: var(--amber-soft);
}

/* Subscription cosmetics */
.sub-modal { max-width: 560px; }
.sub-status-line {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.sub-status-line.on { color: var(--cyan-soft); }
.sub-section { margin-bottom: 18px; }
.sub-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--cyan-soft);
}
.sub-fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.sub-fx-card {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0c1c2c;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.sub-fx-card.on {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px #3ec8f044;
}
.sub-fx-card.locked { opacity: 0.55; cursor: not-allowed; }
.sub-fx-card strong { font-size: 12px; }
.sub-fx-preview {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}
.sub-banner-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  border-radius: 6px;
  background: #152838;
  position: relative;
  overflow: hidden;
}
.sub-banner-sample {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px #000a;
}

.name-fx-rainbow,
.name-fx-neon,
.name-fx-gold,
.name-fx-aurora,
.name-fx-fire {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.listing-seller b.name-fx-rainbow,
.listing-seller b.name-fx-neon,
.listing-seller b.name-fx-gold,
.listing-seller b.name-fx-aurora,
.listing-seller b.name-fx-fire {
  color: transparent !important;
}
.name-fx-rainbow {
  background-image: linear-gradient(90deg, #ff6b6b, #f0c040, #5ad66a, #5ad6f0, #c070f0, #ff6b6b);
  background-size: 220% 100%;
  animation: fxSlide 3s linear infinite;
}
.name-fx-neon {
  background-image: linear-gradient(90deg, #7af0ff, #3ec8f0, #b8ffff, #3ec8f0);
  background-size: 200% 100%;
  animation: fxSlide 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 4px #3ec8f088);
}
.name-fx-gold {
  background-image: linear-gradient(90deg, #8a5a10, #ffe09a, #c89020, #fff1c0, #8a5a10);
  background-size: 220% 100%;
  animation: fxSlide 2.8s linear infinite;
}
.name-fx-aurora {
  background-image: linear-gradient(90deg, #5ad6f0, #7aefc0, #e0a0ff, #5ad6f0);
  background-size: 240% 100%;
  animation: fxSlide 3.2s ease-in-out infinite;
}
.name-fx-fire {
  background-image: linear-gradient(90deg, #ff3b1f, #ff9a1f, #ffe08a, #ff5a1f);
  background-size: 200% 100%;
  animation: fxSlide 1.8s linear infinite;
}
@keyframes fxSlide {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Banners — same palettes as names, full animated fill */
.banner-fx-rainbow,
.banner-fx-neon,
.banner-fx-gold,
.banner-fx-aurora,
.banner-fx-fire {
  position: relative;
  isolation: isolate;
  background-size: 220% 100% !important;
  background-position: 0% 50%;
  animation: fxSlide 3s linear infinite;
}
.banner-fx-rainbow {
  background-image: linear-gradient(90deg, #ff6b6b, #f0c040, #5ad66a, #5ad6f0, #c070f0, #ff6b6b) !important;
}
.banner-fx-neon {
  background-image: linear-gradient(90deg, #0a2a3a, #3ec8f0, #7af0ff, #1a4a6a, #3ec8f0) !important;
  animation-duration: 2.4s;
}
.banner-fx-gold {
  background-image: linear-gradient(90deg, #3a2810, #ffe09a, #c89020, #fff1c0, #8a5a10, #3a2810) !important;
  animation-duration: 2.8s;
}
.banner-fx-aurora {
  background-image: linear-gradient(90deg, #0e2438, #5ad6f0, #7aefc0, #e0a0ff, #0e2438) !important;
  animation-duration: 3.2s;
}
.banner-fx-fire {
  background-image: linear-gradient(90deg, #2a0a08, #ff3b1f, #ff9a1f, #ffe08a, #ff5a1f, #2a0a08) !important;
  animation-duration: 1.8s;
}

/* Keep photo covers readable: animated tint over the image */
.listing-cover-head.has-cover.banner-fx-rainbow,
.listing-cover-head.has-cover.banner-fx-neon,
.listing-cover-head.has-cover.banner-fx-gold,
.listing-cover-head.has-cover.banner-fx-aurora,
.listing-cover-head.has-cover.banner-fx-fire,
.profile-cover-hero.has-cover.banner-fx-rainbow,
.profile-cover-hero.has-cover.banner-fx-neon,
.profile-cover-hero.has-cover.banner-fx-gold,
.profile-cover-hero.has-cover.banner-fx-aurora,
.profile-cover-hero.has-cover.banner-fx-fire {
  background-image: var(--owner-cover) !important;
  background-size: cover !important;
  background-position: center !important;
  animation: none;
}
.listing-cover-head.has-cover[class*="banner-fx-"]::after,
.profile-cover-hero.has-cover[class*="banner-fx-"]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  background-size: 220% 100%;
  animation: fxSlide 3s linear infinite;
}
.listing-cover-head.has-cover.banner-fx-rainbow::after,
.profile-cover-hero.has-cover.banner-fx-rainbow::after {
  background-image: linear-gradient(90deg, #ff6b6b, #f0c040, #5ad66a, #5ad6f0, #c070f0, #ff6b6b);
}
.listing-cover-head.has-cover.banner-fx-neon::after,
.profile-cover-hero.has-cover.banner-fx-neon::after {
  background-image: linear-gradient(90deg, #7af0ff, #3ec8f0, #b8ffff, #3ec8f0);
  animation-duration: 2.4s;
}
.listing-cover-head.has-cover.banner-fx-gold::after,
.profile-cover-hero.has-cover.banner-fx-gold::after {
  background-image: linear-gradient(90deg, #8a5a10, #ffe09a, #c89020, #fff1c0, #8a5a10);
  animation-duration: 2.8s;
}
.listing-cover-head.has-cover.banner-fx-aurora::after,
.profile-cover-hero.has-cover.banner-fx-aurora::after {
  background-image: linear-gradient(90deg, #5ad6f0, #7aefc0, #e0a0ff, #5ad6f0);
  animation-duration: 3.2s;
}
.listing-cover-head.has-cover.banner-fx-fire::after,
.profile-cover-hero.has-cover.banner-fx-fire::after {
  background-image: linear-gradient(90deg, #ff3b1f, #ff9a1f, #ffe08a, #ff5a1f);
  animation-duration: 1.8s;
}

.profile-cover-hero[class*="banner-fx-"] > *,
.listing-cover-head[class*="banner-fx-"] > *,
.sub-banner-preview[class*="banner-fx-"] > * {
  position: relative;
  z-index: 1;
}
.profile-menu-item.sub-menu-item { color: #7ad8f0; }

.sub-gif-upload {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #1e3a52;
}
.sub-gif-upload h4 {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--amber-soft);
}
.sub-gif-help {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
}
.sub-gif-preview-wrap {
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #2a4a62;
  background: #0a1420;
  min-height: 140px;
}
.sub-gif-preview {
  display: block;
  width: 100%;
  height: 140px;
  max-height: 160px;
  object-fit: cover;
  object-position: center;
}
.sub-gif-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sub-gif-name {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}


/* GrowFind v3: kategori menusu her ekranda yatay kalir */
.category-menu-dropdown {
  width: min(760px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  overflow: hidden;
}
.category-menu-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100%;
  max-width: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.category-chip {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content;
}
@media (max-width: 620px) {
  .category-menu-dropdown {
    left: auto !important;
    right: 0 !important;
    width: min(94vw, 760px) !important;
    max-width: calc(100vw - 12px) !important;
  }
  .category-menu-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
}

/* GrowFind v4: masaustu yatay, telefon dikey kategori menusu */
@media (max-width: 620px) {
  .category-menu-dropdown {
    width: min(240px, calc(100vw - 24px)) !important;
    max-width: min(240px, calc(100vw - 24px)) !important;
    max-height: min(70vh, 520px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .category-menu-list {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    gap: 6px !important;
    padding-bottom: 0 !important;
  }
  .category-chip {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
}

/* GrowFind v5: cihaz tipine gore kategori yonu
   Masaustu (mouse/fine pointer) her zaman yatay; telefon (coarse pointer) dikey. */
@media (hover: hover) and (pointer: fine) {
  .category-menu-dropdown {
    width: min(760px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  .category-menu-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
  }
  .category-chip {
    width: auto !important;
    min-width: max-content !important;
    flex: 0 0 auto !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .category-menu-dropdown {
    width: min(240px, calc(100vw - 24px)) !important;
    max-width: min(240px, calc(100vw - 24px)) !important;
    max-height: min(70vh, 520px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .category-menu-list {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    gap: 6px !important;
    padding-bottom: 0 !important;
  }
  .category-chip {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
}

/* GrowFind v6: masaustunde kategori secenekleri Ilan ver butonunun ustunde yatay gorunur. */
@media (min-width: 621px) {
  .site-header { overflow: visible; }
  .nav-end { padding-top: 58px; }
  .category-menu { position: static !important; }
  .category-menu-btn { display: none !important; }
  .category-menu-dropdown,
  .category-menu-dropdown[hidden],
  .category-menu.open .category-menu-dropdown {
    display: block !important;
    position: absolute !important;
    top: 4px !important;
    right: max(28px, calc(18px + env(safe-area-inset-right, 0px))) !important;
    left: auto !important;
    width: min(760px, calc(100vw - 250px)) !important;
    max-width: calc(100vw - 250px) !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 6px !important;
  }
  .category-menu-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 6px !important;
  }
  .category-chip {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    padding: 6px 8px !important;
  }
  .category-chip img { width: 28px; height: 28px; }
}

/* Telefonda kategori butonu normal kalir; acilinca dikey liste olur. */
@media (max-width: 620px) {
  .nav-end { padding-top: 0 !important; }
  .category-menu { position: relative !important; }
  .category-menu-btn { display: inline-flex !important; }
  .category-menu-dropdown[hidden] { display: none !important; }
  .category-menu.open .category-menu-dropdown,
  .category-menu-dropdown:not([hidden]) { display: block !important; }
  .category-menu-list { flex-direction: column !important; }
  .category-chip { width: 100% !important; min-width: 0 !important; }
}
\n\n/* GrowFind v7: kategori cubugu Ilanlar basliginin hemen ustunde. */
@media (min-width: 621px) {
  #finder > .category-menu {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
  }
  #finder .category-menu-btn { display: none !important; }
  #finder .category-menu-dropdown,
  #finder .category-menu-dropdown[hidden],
  #finder .category-menu.open .category-menu-dropdown {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 6px !important;
  }
  #finder .category-menu-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 6px !important;
  }
  #finder .category-chip {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
  }
  .nav-end { padding-top: 0 !important; }
}
@media (max-width: 620px) {
  #finder > .category-menu {
    position: relative !important;
    margin: 0 0 12px 0 !important;
  }
  #finder .category-menu-btn { display: inline-flex !important; }
  #finder .category-menu-dropdown {
    left: 0 !important;
    right: auto !important;
  }
  #finder .category-menu-list {
    flex-direction: column !important;
  }
}

/* GrowFind v8: masaustunde kategoriler ILANLAR basliginin hemen ustunde, soldan saga. */
@media (min-width: 621px) {
  #finder > .category-menu {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    z-index: auto !important;
  }
  #finder > .category-menu > .category-menu-btn { display: none !important; }
  #finder > .category-menu > .category-menu-dropdown,
  #finder > .category-menu > .category-menu-dropdown[hidden],
  #finder > .category-menu.open > .category-menu-dropdown {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #finder #categoryGrid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 0 8px !important;
  }
  #finder #categoryGrid > .category-chip {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
  }
  #finder > .section-head { margin-top: 0 !important; }
}

/* GrowFind v10 — telefonda kategoriler eski üst-menü yerinde ve dikey. */
@media (max-width: 620px) {
  .nav-end > #categoryMenu {
    position: relative !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
  }
  .nav-end > #categoryMenu > .category-menu-btn {
    display: inline-flex !important;
  }
  .nav-end > #categoryMenu > .category-menu-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(220px, calc(100vw - 16px)) !important;
    max-height: min(70vh, 520px) !important;
    overflow-y: auto !important;
  }
  .nav-end > #categoryMenu > .category-menu-dropdown[hidden] {
    display: none !important;
  }
  .nav-end > #categoryMenu.open > .category-menu-dropdown,
  .nav-end > #categoryMenu > .category-menu-dropdown:not([hidden]) {
    display: block !important;
  }
  .nav-end #categoryGrid {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  .nav-end #categoryGrid > .category-chip {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
}



/* GrowFind v17 — temiz masaüstü üst menü hizası.
   Profil butonunun ORİJİNAL .profile-menu-btn 48x48 ölçüsüne dokunulmaz. */
@media (min-width: 621px) and (hover: hover) and (pointer: fine) {
  .site-header { align-items: center; }
  .site-header > .wrap.nav, .nav-end { min-height: 72px; align-items: center; }
  .auth-corner, .nav-end { align-items: center; }
  .nav-end .listing-menu, .nav-end .auth-actions, .nav-end .profile-menu {
    display: flex; align-items: center; margin: 0;
  }
  .auth-corner .discord-link, .auth-corner .instagram-link, .auth-corner .sponsor-menu-btn,
  .nav-end .listing-menu-btn, .nav-end .auth-actions > .btn, .nav-end .auth-actions > .btn-ghost {
    height: 40px; min-height: 40px; box-sizing: border-box; display: inline-flex; align-items:center; justify-content:center;
  }
  /* profile-menu-btn intentionally not sized here: original 48x48 rule above remains authoritative. */
}

/* GrowFind v18 — telefon görünümü taşma/hizalama düzeltmeleri */
@media (max-width: 620px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  *, *::before, *::after { box-sizing: border-box; }

  .site-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .nav-start {
    grid-column: 1 / -1;
    width: 100%; min-width: 0;
    padding: 0 !important; margin: 0 !important;
    justify-content: space-between;
  }
  .nav-start .brand { flex: 0 1 auto; min-width: 0; }
  .nav-start .brand-text { font-size: 17px !important; }
  .nav-start .lang-toggle { flex: 0 0 auto; max-width: 112px; }

  .site-header > .wrap.nav {
    grid-column: 1 / -1;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    display: block !important;
  }
  .auth-corner {
    width: 100% !important;
    margin: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .auth-corner .discord-link,
  .auth-corner .instagram-link,
  .auth-corner .sponsor-menu-btn {
    min-width: 0 !important;
    width: 100% !important;
    height: 38px;
    padding: 7px 4px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  .nav-end {
    grid-column: 1 / -1;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 7px !important;
  }
  .nav-end .category-menu-btn,
  .nav-end .listing-menu-btn { height: 40px; padding: 7px 10px !important; }
  .profile-menu-btn { width: 42px !important; height: 42px !important; flex: 0 0 42px; }

  .hero, .hero-bottom, .hero-content, main, section { max-width: 100%; }
  .hero-visual { min-height: 0 !important; }
  .hero-pixel { width: 100%; height: auto; max-height: none !important; object-fit: contain; }
  .search { width: 100%; max-width: 100%; }
  .search input { min-width: 0; }

  .profile-menu.open .profile-menu-dropdown {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .profile-menu-head {
    width: calc(100% + 24px);
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .profile-menu-head > div:last-child { min-width: 0; flex: 1; }
  .profile-menu-head small, .profile-menu-head strong {
    max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
  }
  .avatar-actions { width: 100%; }
  .avatar-actions button { min-width: 0; white-space: normal; }
  .friends-panel { width: 100%; min-width: 0; padding: 10px; }
  .friends-add { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .friends-add input { width: 100%; min-width: 0; }
  .friends-add .btn { white-space: nowrap; }
  .profile-listings-row, .managed-list, .friends-list { max-width: 100%; min-width: 0; }
}

@media (max-width: 390px) {
  .auth-corner .discord-link,
  .auth-corner .instagram-link,
  .auth-corner .sponsor-menu-btn { font-size: 10px !important; }
  .nav-end .category-menu-btn,
  .nav-end .listing-menu-btn { font-size: 10px !important; padding-inline: 8px !important; }
  .friends-add { grid-template-columns: 1fr; }
  .friends-add .btn { width: 100%; }
}

/* GrowFind v19 — profil kapağı + Gmail bilgisi: masaüstü ve mobil görünürlük */
#profileBackdrop {
  align-content: start !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
#profileBackdrop > .modal {
  margin: 0 auto !important;
  width: min(520px, 100%) !important;
  overflow: visible !important;
}
#profileCoverBanner {
  min-height: 150px;
  display: flex;
  align-items: flex-end;
}
#profileCoverBanner .modal-head {
  width: 100%;
}
#profileBackdrop .profile-data {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#profileEmailValue {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 620px) {
  #profileBackdrop {
    padding: 10px !important;
    align-items: start !important;
  }
  #profileBackdrop > .modal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
  }
  #profileCoverBanner {
    margin: -14px -14px 12px !important;
    padding: 14px !important;
    min-height: 135px !important;
    border-radius: 12px 12px 0 0;
  }
  #profileCoverBanner .profile-head-row {
    min-width: 0;
    flex: 1;
  }
  #profileCoverBanner .profile-head-row > div:last-child {
    min-width: 0;
  }
  #profileTitle, #profileSubtitle, #profileEmailValue {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  #profileBackdrop .profile-data {
    grid-template-columns: 1fr !important;
    width: 100%;
  }
}

/* GrowFind v20 — profil açılır menüsü kapak + Gmail düzeltmesi (PC + telefon) */
.profile-menu-dropdown .profile-menu-head {
  box-sizing: border-box !important;
  min-height: 112px !important;
  flex: 0 0 auto !important;
  align-items: flex-end !important;
  padding: 18px 14px 14px !important;
  margin: -12px -12px 4px !important;
  overflow: hidden !important;
}
.profile-menu-dropdown .profile-menu-head > div:last-child {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  padding-bottom: 2px;
}
.profile-menu-dropdown .profile-menu-head strong,
.profile-menu-dropdown .profile-menu-head small {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
}
.profile-menu-dropdown .profile-menu-head small {
  margin-top: 3px !important;
  font-size: 12px !important;
}
.profile-menu-dropdown .profile-menu-head #profileMenuAvatar {
  flex: 0 0 auto !important;
}
@media (min-width: 701px) {
  .profile-menu-dropdown {
    width: 360px !important;
    max-width: calc(100vw - 24px) !important;
  }
  .profile-menu-dropdown .profile-menu-head {
    min-height: 118px !important;
  }
}
@media (max-width: 700px) {
  .profile-menu.open .profile-menu-dropdown {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .profile-menu-dropdown .profile-menu-close {
    position: absolute !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    right: 14px !important;
    z-index: 10 !important;
    margin: 0 !important;
  }
  .profile-menu-dropdown .profile-menu-head {
    width: calc(100% + 28px) !important;
    min-height: 165px !important;
    margin: calc(-10px - env(safe-area-inset-top, 0px)) -14px 8px !important;
    padding: calc(58px + env(safe-area-inset-top, 0px)) 16px 16px !important;
    border-radius: 0 !important;
  }
  .profile-menu-dropdown .profile-menu-head small {
    font-size: 13px !important;
  }
}

/* GrowFind v21 — profil üst alanı kesin görünür (PC + telefon) */
#profileMenuHead.profile-menu-head {
  position: relative !important;
  box-sizing: border-box !important;
  width: calc(100% + 24px) !important;
  height: 150px !important;
  min-height: 150px !important;
  max-height: none !important;
  margin: -12px -12px 8px !important;
  padding: 72px 14px 14px !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
  flex: 0 0 150px !important;
  background-color: #0a1c2e !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
#profileMenuHead > .banner-media-img,
#profileMenuHead > .banner-media-thumb {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 0 !important;
}
#profileMenuHead::after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(5,15,27,.92));
}
#profileMenuHead > *:not(.banner-media-img):not(.banner-media-thumb) {
  position: relative !important;
  z-index: 3 !important;
}
#profileMenuHead > div:last-child {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
#profileMenuHead strong,
#profileMenuHead small,
#profileMenuHead .menu-level-chip {
  visibility: visible !important;
  opacity: 1 !important;
}
#profileMenuHead small {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  color: #d7e6f4 !important;
}
@media (min-width: 701px) {
  .profile-menu-dropdown { width: 390px !important; }
  #profileMenuHead.profile-menu-head {
    height: 160px !important;
    min-height: 160px !important;
    flex-basis: 160px !important;
    padding-top: 80px !important;
  }
}
@media (max-width: 700px) {
  #profileMenuHead.profile-menu-head {
    width: calc(100% + 28px) !important;
    height: 190px !important;
    min-height: 190px !important;
    flex-basis: 190px !important;
    margin: calc(-10px - env(safe-area-inset-top, 0px)) -14px 10px !important;
    padding: calc(88px + env(safe-area-inset-top, 0px)) 16px 16px !important;
    border-radius: 0 !important;
  }
  .profile-menu-dropdown .profile-menu-close {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: 14px !important;
    z-index: 140 !important;
  }
}

/* V22: auth honeypot must never be visible */
.gf-hp, .gf-hp * { display: none !important; visibility: hidden !important; }

/* V23 FINAL HEADER FIX — authoritative rules, keep at end of file */
@media (min-width: 901px) {
  .site-header {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    padding: 0 !important;
    align-items: center !important;
    overflow: visible !important;
  }
  .site-header > .nav-start,
  .site-header > .wrap.nav,
  .site-header > .nav-end {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .site-header > .wrap.nav { display:flex !important; }
  .nav-end { padding-top:0 !important; }
}

/* Tablet / narrow desktop: never let old 621px desktop rules create an empty header row. */
@media (min-width: 621px) and (max-width: 900px) {
  .site-header {
    height: auto !important;
    min-height: 64px !important;
    max-height: none !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .site-header > .nav-start,
  .site-header > .wrap.nav,
  .site-header > .nav-end {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .site-header > .wrap.nav { flex: 1 1 auto !important; width:auto !important; }
  .navlinks { display:none !important; }
  .auth-corner { margin:0 !important; max-width:none !important; flex-wrap:nowrap !important; }
  .nav-end { padding:0 !important; margin-left:auto !important; }
}

@media (max-width: 620px) {
  .site-header { min-height:0 !important; height:auto !important; max-height:none !important; }
  .site-header > .wrap.nav, .nav-start, .nav-end { min-height:0 !important; height:auto !important; max-height:none !important; }
}

/* GrowFind V30 — arkadaşlar arası özel sohbet */
.friend-chat-btn {
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  border: 1px solid #2f7896; background: #0d3148; color: #fff;
  display: inline-grid; place-items: center; cursor: pointer; flex: 0 0 auto;
}
.friend-chat-btn:hover { border-color: var(--cyan); background: #15506d; transform: translateY(-1px); }
.chat-backdrop { z-index: 110; }
.chat-modal { width: min(620px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.chat-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); background:#0b2235; }
.chat-person { display:flex; align-items:center; gap:10px; min-width:0; }
.chat-person img { width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid var(--cyan-deep); }
.chat-person small { color:#8da9bd; font-size:11px; }
.chat-person h2 { margin:1px 0 0; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-messages { height:min(55vh, 440px); min-height:280px; overflow-y:auto; padding:16px; background:linear-gradient(180deg,#081827,#0b1e2f); }
.chat-empty { color:#819bad; text-align:center; padding:70px 12px; font-size:13px; }
.chat-line { display:flex; margin:7px 0; }
.chat-line.mine { justify-content:flex-end; }
.chat-line.theirs { justify-content:flex-start; }
.chat-bubble { max-width:min(78%, 420px); padding:9px 11px 6px; border-radius:15px; background:#17364c; border:1px solid #294b62; color:#eef8ff; overflow-wrap:anywhere; }
.chat-line.mine .chat-bubble { background:#075d79; border-color:#1687aa; }
.chat-bubble span { display:block; white-space:pre-wrap; font-size:13px; line-height:1.4; }
.chat-bubble small { display:block; margin-top:3px; text-align:right; color:#9ec0d3; font-size:9px; }
.chat-compose { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:#0b2235; }
.chat-compose textarea { flex:1; resize:none; min-height:42px; max-height:110px; border-radius:12px; padding:10px 12px; }
.chat-compose .btn { min-width:88px; }
@media (max-width: 640px) {
  .chat-backdrop { align-items:flex-end; padding:0; }
  .chat-modal { width:100%; max-width:none; border-radius:18px 18px 0 0; }
  .chat-messages { height:56vh; min-height:300px; }
  .chat-compose { padding-bottom:max(12px, env(safe-area-inset-bottom)); }
  .friend-chat-btn { width:30px; height:30px; }
}


/* GrowFind player presence — isolated styles */
.friend-avatar-presence { position: relative; display: inline-flex; flex: 0 0 auto; }
.friend-avatar-presence > img { border-radius: 50%; }
.friend-presence {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 50%; border: 2px solid var(--panel-solid); background: #6f7f8d;
  box-shadow: 0 0 0 1px #06101888;
}
.friend-presence.is-online { background: var(--ok); box-shadow: 0 0 0 1px #06101888, 0 0 8px #5ee0a088; }
.friend-name-presence { min-width: 0; display: inline-flex; align-items: center; line-height: 1; }
.friend-name-presence > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-name-presence > small { display: none; }
.chat-presence-text { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 700; }