.profile-wrapper {
  width: 90%;
  max-width: 700px;
  margin: 2em auto;
  font-family: "Comfortaa", sans-serif;
}

/* Castle Display */
.profile-castle-display {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
  min-height: 120px;
}

/* Normalized on HEIGHT, not width.
   This used to be a fixed 100px-wide box with the image at width:100%, so the
   rendered height was whatever the skin's aspect ratio produced. That works
   only while every castle is roughly as wide as it is tall: the classic ones
   (~400x376) landed at ~94px and sat level with the 90px wall beside them.
   The portrait composites do not — stacked_castle is 320x575 and the mage
   tower 388x600, which came out ~180px and towered over a wall half their
   height, while the tent (640x427) came out shorter than the wall. Fixing the
   height instead makes every skin occupy the same vertical space, which is
   what the wall is aligned to. */
.profile-castle-container {
  position: relative;
  height: 94px;
  display: flex;
  align-items: flex-end;
  overflow: visible;
}

.profile-castle-container img.profile-castle-img {
  height: 100%;
  width: auto;
  display: block;
}

.profile-wall-container {
  width: 25px;
  height: 90px;
  display: flex;
  align-items: flex-end;
}

.profile-wall-texture {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 2px;
}

.profile-castle-display {
  position: relative;
}

.profile-castle-customize {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 8px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.profile-castle-display.own:hover .profile-castle-customize {
  opacity: 1;
}

/* Header */
.profile-header {
  background: var(--cloud-bg2);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.profile-identity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.profile-color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.profile-name {
  margin: 0;
  color: var(--text);
  font-size: 1.6rem;
}

.profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.profile-badge.online {
  background: rgba(40, 167, 69, 0.15);
  color: #28a745;
  border: 1px solid rgba(40, 167, 69, 0.3);
}

.profile-badge.registered {
  background: rgba(6, 167, 125, 0.12);
  color: #06a77d;
  border: 1px solid rgba(6, 167, 125, 0.3);
}

.profile-badge.away {
  background: rgba(212, 168, 23, 0.15);
  color: #d4a817;
  border: 1px solid rgba(212, 168, 23, 0.3);
}

.profile-badge.admin {
  background: rgba(224, 200, 130, 0.15);
  color: #e0c882;
  border: 1px solid rgba(224, 200, 130, 0.3);
}

.profile-badge.deleted {
  background: rgba(128, 128, 128, 0.15);
  color: var(--text);
  border: 1px solid rgba(128, 128, 128, 0.35);
  opacity: 0.8;
}

.profile-color-dot-deleted {
  background: #888;
}

.profile-deleted-note {
  color: var(--text);
  opacity: 0.7;
  line-height: 1.5;
  margin: 12px 0 0;
}

.profile-rating-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-rating-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.profile-rating {
  color: #06a77d;
  font-size: 1.2rem;
  font-weight: 700;
}

.profile-rank {
  color: #ffc107;
  font-size: 1.1rem;
  font-weight: 600;
}

.profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.profile-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  transition: all 0.15s ease;
  text-decoration: none;
}

.profile-action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

.profile-action-btn.invite {
  background: rgba(6, 167, 125, 0.12);
  border-color: rgba(6, 167, 125, 0.3);
  color: #06a77d;
}

.profile-action-btn.invite:hover {
  background: rgba(6, 167, 125, 0.22);
}

.profile-action-btn.profile-train-btn {
  background: rgba(200, 150, 12, 0.14);
  border-color: rgba(200, 150, 12, 0.4);
  color: #c8960c;
}

.profile-action-btn.profile-train-btn:hover {
  background: rgba(200, 150, 12, 0.26);
}

.profile-unread-badge {
  background: #dc3545;
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 2px;
}

/* Sections */
.profile-section {
  background: var(--cloud-bg2);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.profile-section-title {
  color: var(--text);
  font-size: 1.1rem;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-section-title i {
  opacity: 0.6;
}

/* Stats Grid */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.profile-stat {
  text-align: center;
  padding: 12px 8px;
  background: var(--panel-texture-url) center/cover, var(--panel-bg);
  border: 1.5px solid var(--resource-panel-border);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-stat-value {
  color: #06a77d;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.profile-stat-label {
  color: var(--text);
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Campaign */
.profile-campaign-total {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffc107;
  display: flex;
  align-items: center;
  gap: 4px;
}

.profile-campaign-levels {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-campaign-level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--panel-texture-url) center/cover, var(--panel-bg);
  border: 1.5px solid var(--resource-panel-border);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-campaign-level.locked {
  opacity: 0.4;
}

.profile-campaign-level.clickable {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.profile-campaign-level.clickable:hover {
  transform: translateY(-1px);
  border-color: #c8960c;
  box-shadow: 0 4px 16px rgba(200, 150, 12, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.profile-campaign-play {
  color: #c8960c;
  font-size: 0.8rem;
  margin-left: 8px;
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.profile-campaign-level.clickable:hover .profile-campaign-play {
  opacity: 1;
}

.profile-campaign-level-name {
  color: var(--text);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-campaign-level-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.profile-campaign-stars {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.profile-campaign-stars .star-achieved {
  color: #ffc107;
}

.profile-campaign-stars .star-missed {
  color: rgba(255, 255, 255, 0.15);
}

/* Card Collection */
.profile-card-collection-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Decks */
.profile-deck-group-label {
  color: var(--text);
  opacity: 0.6;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 4px 0 8px 0;
}

.profile-deck-group-label:not(:first-child) {
  margin-top: 16px;
}

.profile-deck-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-deck-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--panel-texture-url) center/cover, var(--panel-bg);
  border: 1.5px solid var(--resource-panel-border);
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-deck-item-active {
  border-color: #06a77d;
  box-shadow: 0 0 0 1px #06a77d, 0 3px 12px rgba(0, 0, 0, 0.3);
}

.profile-deck-icon {
  color: var(--text);
  opacity: 0.7;
  font-size: 1.1rem;
  width: 22px;
  text-align: center;
}

.profile-deck-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.profile-deck-name {
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-deck-meta {
  color: var(--text);
  opacity: 0.6;
  font-size: 0.78rem;
}

.profile-deck-meta-invalid {
  color: #e08a3c;
  opacity: 0.95;
}

.profile-deck-badge {
  color: #06a77d;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.profile-deck-empty {
  color: var(--text);
  opacity: 0.6;
  font-size: 0.85rem;
  padding: 4px 0 2px 0;
}

/* Achievements */
.profile-achievements-summary {
  margin-bottom: 12px;
}

.profile-achievements-bar-wrap {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.profile-achievements-bar {
  height: 100%;
  background: linear-gradient(90deg, #06a77d, #04d9a1);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.profile-achievements-count {
  color: var(--text);
  font-size: 0.85rem;
  opacity: 0.8;
}

.profile-achievements-points {
  color: #ffc107;
}

.profile-achievements-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.profile-view-all-link {
  display: block;
  text-align: center;
  margin-top: 12px;
  color: #06a77d;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}

.profile-view-all-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Match History */
.profile-matches {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-match {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--panel-texture-url) center/cover, var(--panel-bg);
  border: 1.5px solid var(--resource-panel-border);
  border-left: 4px solid var(--resource-panel-border);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-match.win {
  border-left-color: #4caf50;
}

.profile-match.loss {
  border-left-color: #f44336;
}

.profile-replay {
  color: inherit;
  text-decoration: none;
  border-left-color: #8b5cf6;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.profile-replay:hover,
.profile-replay:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(139, 92, 246, 0.75);
  border-left-color: #a78bfa;
  box-shadow:
    0 5px 16px rgba(0, 0, 0, 0.36),
    0 0 16px rgba(139, 92, 246, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-replay-icon {
  color: #a78bfa;
  font-size: 1.05rem;
}

.profile-match-result {
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.profile-match-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.profile-match-opponent {
  color: var(--text);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-match-link {
  color: #06a77d;
  cursor: pointer;
  text-decoration: none;
}

.profile-match-link:hover {
  text-decoration: underline;
}

.profile-match-score {
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
  opacity: 0.9;
}

.profile-match-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.profile-match-duration,
.profile-match-date {
  color: var(--text);
  font-size: 0.75rem;
  opacity: 0.6;
}

.profile-empty {
  text-align: center;
  color: var(--text);
  opacity: 0.5;
  padding: 20px;
  font-size: 0.95rem;
}

/* Popup Modal */
.profile-popup-modal {
  max-width: 500px;
  position: relative;
  padding: 24px 20px 16px;
}

.profile-popup-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text);
  opacity: 0.5;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: opacity 0.15s;
}

.profile-popup-close:hover {
  opacity: 1;
}

.profile-popup-header {
  text-align: center;
  margin-bottom: 16px;
}

.profile-popup-section {
  margin-bottom: 14px;
}

.profile-popup-section-title {
  color: var(--text);
  font-size: 0.9rem;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-popup-section-title i {
  opacity: 0.6;
}

.profile-popup-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-popup-actions .profile-action-btn {
  justify-content: center;
}

/* Notification section in popup */
.profile-notif-section {
  border-top: 1px solid rgba(128, 128, 128, 0.15);
  padding-top: 14px;
  margin-bottom: 0;
}

.profile-notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.profile-notif-label {
  color: var(--text);
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Toggle switch */
.profile-notif-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.profile-notif-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.profile-notif-slider {
  position: absolute;
  inset: 0;
  background: rgba(128, 128, 128, 0.3);
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.profile-notif-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.profile-notif-switch input:checked + .profile-notif-slider {
  background: #06a77d;
}

.profile-notif-switch input:checked + .profile-notif-slider::before {
  transform: translateX(20px);
}

.profile-notif-switch input:disabled + .profile-notif-slider {
  opacity: 0.4;
  cursor: default;
}

/* Test / resubscribe button row */
.profile-notif-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-notif-test-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  transition: background 0.15s ease;
}

.profile-notif-test-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.profile-notif-msg {
  margin: 8px 0 0 0;
  font-size: 0.8rem;
  color: var(--text);
  opacity: 0.7;
  min-height: 1em;
}

.profile-notif-msg.notif-msg-ok {
  color: #06a77d;
  opacity: 1;
}

.profile-notif-msg.notif-msg-err {
  color: #dc3545;
  opacity: 1;
}

/* Mobile */
@media (max-width: 600px) {
  .profile-wrapper {
    width: 95%;
    margin: 1em auto;
  }

  .profile-header {
    padding: 18px 16px;
  }

  .profile-name {
    font-size: 1.3rem;
  }

  .profile-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .profile-stat-value {
    font-size: 1rem;
  }

  .profile-section {
    padding: 16px;
  }

  .profile-match {
    gap: 8px;
    padding: 8px 10px;
  }

  .profile-match-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .profile-rating-actions {
    flex-direction: column;
    gap: 12px;
  }

  .profile-actions {
    width: 100%;
  }

  .profile-rating-row {
    flex-wrap: wrap;
  }

  .profile-actions {
    grid-template-columns: 1fr;
  }

  .profile-popup-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .profile-popup-modal {
    padding: 20px 14px 12px;
  }
}

/* ── Play Style (lifetime card stats) ─────────────────────────────────────
   Mirrors the victory-screen match-stats look; theme-aware via palette vars. */
.card-style-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--text);
}

.card-style-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.card-style-highlight {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.card-style-h-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

.card-style-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  background: var(--surface-subtle);
  min-width: 0;
  min-height: 48px;
}

.card-style-card-played { border-left: 3px solid #5b8c5a; }
.card-style-card-discarded { border-left: 3px solid #cd5c5c; }
.card-style-fav-type { border-left: 3px solid #c8960c; }

.card-style-empty {
  opacity: 0.5;
  justify-content: center;
}

.card-style-thumb {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
}

.card-style-thumb i {
  opacity: 0.5;
}

.card-style-thumb-type {
  background-color: rgba(200, 150, 12, 0.15);
}

.card-style-thumb-type img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.card-style-card-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.card-style-card-name {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-style-card-type {
  font-size: 0.66rem;
  opacity: 0.6;
}

.card-style-count {
  margin-left: auto;
  font-weight: 700;
  color: #c8960c;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.card-style-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-style-breakdown-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin-bottom: 2px;
}

.card-style-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

.card-style-bar-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.card-style-bar-label {
  flex: 0 0 5em;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-style-bar-track {
  flex: 1;
  height: 9px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.card-style-bar-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: #c8960c;
  transition: width 0.4s ease;
}

.card-style-bar-offense { background: #cd5c5c; }
.card-style-bar-magic { background: #6fa8dc; }
.card-style-bar-defense { background: #a0522d; }
.card-style-bar-special { background: #9e9e9e; }
.card-style-bar-resource { background: #d9b382; }

.card-style-bar-pct {
  flex: 0 0 2.6em;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.card-style-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.78rem;
  opacity: 0.9;
}

.card-style-total i {
  opacity: 0.6;
  margin-right: 3px;
}

@media (max-width: 560px) {
  .card-style-highlights {
    grid-template-columns: 1fr;
  }
}

/* ── Match intro image ──────────────────────────────────────────────────────
   Upload control for your half of the pre-match VS splash. The preview is
   deliberately the same shape and treatment as a splash side (cover art under
   a bottom-weighted scrim) so what you pick is what you get. */
.profile-section-note {
  color: var(--text);
  opacity: 0.65;
  font-size: 0.85rem;
  margin: -8px 0 16px 0;
  line-height: 1.4;
}

.splash-image-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.splash-image-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  padding: 8px 12px;
  border-radius: 8px;
  line-height: 1.35;
}

.splash-image-msg.ok {
  background: rgba(76, 175, 80, 0.14);
  border: 1px solid rgba(76, 175, 80, 0.4);
  color: #b6e6b8;
}

.splash-image-msg.error {
  background: rgba(220, 53, 69, 0.14);
  border: 1px solid rgba(220, 53, 69, 0.4);
  color: #ffb3bd;
}

/* Empty state: the whole block is the file input's label, so the entire
   dashed area is clickable rather than just a button inside it. */
.splash-image-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  border: 2px dashed rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.14);
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.splash-image-drop:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.22);
}

.splash-image-drop > i {
  font-size: 1.6rem;
  opacity: 0.5;
}

.splash-image-drop-title {
  font-weight: 600;
}

.splash-image-drop-hint {
  font-size: 0.78rem;
  opacity: 0.6;
}

.splash-image-current {
  display: flex;
  gap: 16px;
  align-items: stretch;
  flex-wrap: wrap;
}

.splash-image-preview {
  position: relative;
  flex: 1 1 220px;
  min-height: 132px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* Same bottom-weighted scrim the real splash lays over artwork, so the
   preview reads at the contrast it will actually have behind the name. */
.splash-image-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.74) 100%);
}

.splash-image-preview-label {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 1;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.splash-image-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.splash-image-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.splash-image-btn.danger {
  background: rgba(220, 53, 69, 0.18);
  border-color: rgba(220, 53, 69, 0.45);
}

@media (max-width: 560px) {
  .splash-image-actions {
    flex-direction: row;
  }
  .splash-image-actions .splash-image-btn {
    flex: 1;
  }
}

/* Locked (non-premium) state: same block as the drop zone so the layout does
   not shift when premium unlocks it, but it opens the upsell instead. */
.splash-image-drop.locked {
  width: 100%;
  font: inherit;
  border-style: solid;
  border-color: rgba(255, 215, 0, 0.3);
  background: rgba(255, 215, 0, 0.06);
}

.splash-image-drop.locked:hover {
  border-color: rgba(255, 215, 0, 0.55);
  background: rgba(255, 215, 0, 0.1);
}

.splash-image-upsell-cta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #ffd76a;
}

/* ── Collapsible profile section ────────────────────────────────────────────
   A <details> styled to sit flush with the normal .profile-section blocks, so
   folding one away does not make it look like a different kind of thing. */
.profile-section-collapsible > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  margin: 0;
}

/* Hide the native disclosure triangle (WebKit + the standard property). */
.profile-section-collapsible > summary::-webkit-details-marker {
  display: none;
}
.profile-section-collapsible > summary::marker {
  content: "";
}

.profile-section-collapsible[open] > summary {
  margin-bottom: 16px;
}

.profile-section-chevron {
  margin-left: auto;
  font-size: 0.85rem;
  opacity: 0.5;
  transition: transform 0.18s ease;
}

.profile-section-collapsible[open] .profile-section-chevron {
  transform: rotate(180deg);
}

/* Status chip in the summary row, so the collapsed state still says whether
   there is anything set — the point of collapsing is losing that otherwise. */
.profile-section-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Chip text is theme-aware because one value cannot clear 4.5:1 on both
   surfaces — the profile card is #fafbf0 in light and #1a1c24 in dark, and a
   colour readable on one washes out on the other. Measured: light 5.40 (set) /
   4.57 (premium), dark 7.01 / 8.07. The data-theme rules come after the media
   query so the in-game toggle wins over the OS preference in both directions. */
:root {
  --profile-tag-set-ink: #1b6b2e;
  --profile-tag-premium-ink: #8a6400;
}

@media (prefers-color-scheme: dark) {
  :root {
    --profile-tag-set-ink: #5cd47e;
    --profile-tag-premium-ink: #f5c45e;
  }
}

:root[data-theme="dark"] {
  --profile-tag-set-ink: #5cd47e;
  --profile-tag-premium-ink: #f5c45e;
}

:root[data-theme="light"] {
  --profile-tag-set-ink: #1b6b2e;
  --profile-tag-premium-ink: #8a6400;
}

.profile-section-tag.set {
  background: rgba(40, 167, 69, 0.15);
  border: 1px solid rgba(40, 167, 69, 0.38);
  color: var(--profile-tag-set-ink);
}

.profile-section-tag.premium {
  background: rgba(200, 151, 26, 0.14);
  border: 1px solid rgba(200, 151, 26, 0.4);
  color: var(--profile-tag-premium-ink);
}

.profile-section-tag i {
  font-size: 0.68rem;
  opacity: 0.9;
}