/* ============================================================
   v0.4.23: profile customization - avatar upload, Plus/Pro background
   editor, large pet card, and the tabbed inventory (Collection / Drops).
   ============================================================ */

/* Custom hero background: a scrim keeps the white streak headline legible
   over an arbitrary uploaded image. */
.profile-hero-scrim {
  position: absolute;
  inset: 0;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(8,6,18,0.15) 0%, rgba(8,6,18,0.55) 100%);
  pointer-events: none;
}
/* v0.4.34: moved to the TOP of the hero. At the bottom they overlapped the avatar,
   which lifts 44px up into the hero (.profile-head margin-top:-44px). */
.profile-hero-edit-btn {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.38);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.profile-hero-edit-btn:hover { background: rgba(0,0,0,0.62); transform: translateY(-1px); }

/* Background editor panel (drops below the hero when toggled) */
/* Theme/background editor as a centered overlay modal (was an inline dropdown panel). */
.theme-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 6, 18, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.theme-modal-card {
  width: 560px;
  max-width: 100%;
  max-height: 90vh;
  /* v0.4.68: dvh where supported + contain touch scroll (see .profile-card). */
  max-height: 90dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #1b1430 0%, #100b1e 100%);
  border: 1px solid rgba(255, 215, 0, 0.18);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.theme-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.theme-modal-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFD700;
}
.theme-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #e8e4f5;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.theme-modal-close:hover { background: rgba(255,255,255,0.12); }

.profile-bg-editor {
  margin: 0;
  padding: 14px 16px 16px;
  background: transparent;
  border: none;
  border-radius: 0;
}
.bg-editor-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c8bfe0;
  margin-bottom: 10px;
}
.bg-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
/* Store tiles enlarged (30x24 was too small to read a gradient, and the premium
   lock + price were unreadable). Big enough to preview at a glance. */
.bg-preset {
  width: 56px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s;
}
.bg-preset:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }

/* v0.4.34: the fully-customizable colour control. Leads the row, larger than the
   swatches, a rainbow fill plus a Material brush so it clearly means "pick any colour".
   The native colour input fills it invisibly so the whole tile opens the picker. */
.bg-custom {
  position: relative;
  width: 56px;
  height: 40px;
  flex-shrink: 0;
  margin-right: 4px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.45);
  background: conic-gradient(from 200deg, #ff5e5e, #ffd166, #4ade80, #38bdf8, #a855f7, #ff5e5e);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
  transition: transform 0.12s, box-shadow 0.15s;
}
.bg-custom:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.45); }
.bg-custom .material-icons {
  position: relative;
  z-index: 1;
  font-size: 18px;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}
.bg-custom .bg-color-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}
/* v0.4.68: wrap so longer localized labels never overflow the phone card. */
.bg-editor-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bg-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.22);
  border: 1px solid rgba(124, 58, 237, 0.45);
  color: #e8e4f5;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.bg-upload-btn:hover { background: rgba(124, 58, 237, 0.36); }
.bg-upload-btn .material-icons { font-size: 16px; }
.bg-reset-btn {
  padding: 7px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.16);
  color: #b9b0d6;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.bg-reset-btn:hover:not(:disabled) { background: rgba(255,255,255,0.06); color: #fff; }
.bg-reset-btn:disabled { opacity: 0.4; cursor: default; }
.bg-editor-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #cbb6f0;
}
.bg-editor-lock { font-size: 15px; }

/* ---- v0.4.25 profile + upgrade-modal fixes -------------------------- */
/* The background editor, when open, renders between the hero and the head;
   the head's -44px hero-overlap margin would otherwise collide with it.
   Neutralise that margin only while the editor sits directly before the head. */
.profile-bg-editor + .profile-head { margin-top: 12px; }

/* Free-form colour picker - sized to match the preset swatches. */
.bg-color-input {
  width: 40px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 7px;
  background: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s;
}
.bg-color-input:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.bg-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.bg-color-input::-webkit-color-swatch { border: none; border-radius: 5px; }
.bg-color-input::-moz-color-swatch { border: none; border-radius: 5px; }

/* Topbar locked-pet egg is now clickable - opens the upgrade modal. */
.pet-locked-egg { cursor: pointer; }

/* Upgrade modal reuses the auth/upgrade card inside the shared .modal-backdrop. */
.upgrade-modal-card { position: relative; width: 100%; max-width: 480px; }

/* v0.4.33: pet-context hook banner - shown when the upgrade dialog opens from the
   locked egg. Plus-violet panel with the egg, a punchy title and a loss-aversion line. */
.upgrade-hook {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(168, 85, 247, 0.07));
    border: 1px solid rgba(168, 85, 247, 0.42);
}
.upgrade-hook-emoji {
    font-size: 34px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.upgrade-hook-title { font-weight: 700; font-size: 15px; line-height: 1.2; }
.upgrade-hook-body { font-size: 13px; opacity: 0.85; margin-top: 3px; }

/* v0.4.29: credit wallet - balance, per-tier cost + activate, and the top-up grid. */
.wallet-balance {
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  color: var(--chronos-violet);
  margin: 2px 0 14px;
}
.plan-cost { font-size: 12px; margin-top: 2px; }
.plan-need { font-size: 12px; margin-top: 6px; }
.wallet-topup {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--chronos-outline);
}
.wallet-topup-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 10px;
}
.topup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.topup-credits { font-weight: 700; white-space: nowrap; }
.topup-row .plan-pays { display: flex; gap: 6px; flex-wrap: wrap; }
.topup-row .plan-pay { padding: 6px 10px; font-size: 12px; }

/* Hidden InputFile - the visible affordance is the wrapping label/badge. */
.profile-file-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Avatar image + edit/clear affordances. The avatar container is position:relative
   so the camera badge can sit on its lower-right corner. */
.profile-avatar { position: relative; overflow: visible; }
.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
}
.profile-avatar-edit {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #7c3aed, #a855f7);
  border: 2px solid #140e24;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  transition: transform 0.12s;
}
.profile-avatar-edit:hover { transform: scale(1.08); }
.profile-avatar-edit .material-icons { font-size: 16px; }
.profile-avatar-clear {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(8,6,18,0.85);
  border: 1px solid rgba(255,255,255,0.2);
  color: #e0405a;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.profile-avatar-clear:hover { background: #e0405a; color: #fff; }

.profile-img-error {
  margin: 8px 24px 0;
  padding: 8px 12px;
  font-size: 12px;
  color: #ffb4be;
  background: rgba(224, 64, 90, 0.12);
  border: 1px solid rgba(224, 64, 90, 0.35);
  border-radius: 8px;
}
.profile-img-error-avatar { margin-top: 12px; }

/* ---- Large pet card (v0.4.23) - promoted from the cramped stat tile. ---- */
.profile-pet-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 24px 4px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.10);
  border: 1px solid rgba(255,255,255,0.07);
  min-height: 96px; /* roomy on purpose - future cosmetics land here */
}
.profile-pet-card.is-unlocked {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(124, 58, 237, 0.10));
  border-color: rgba(245, 158, 11, 0.3);
}
/* position:relative for the same reason .profile-avatar has it: the injury / expedition
   badge (.pet-injured-badge, 15-pit-inventory.css) is absolute at top/right -4px and needs
   THIS box as its containing block. Without it the nearest positioned ancestor was
   .profile-card, so the plaster was drawn in the corner of the whole modal, under the
   close button, and clipped by the card's overflow:hidden. */
.pet-card-art {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);
}
.pet-card-emoji { font-size: 44px; line-height: 1; }
.profile-pet-card.is-unlocked .pet-card-emoji { animation: pet-bob 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .profile-pet-card.is-unlocked .pet-card-emoji { animation: none; }
}
.pet-card-info { flex: 1; min-width: 0; }
.pet-card-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a79ec6;
}
.pet-card-stage { font-size: 18px; font-weight: 800; color: #fff; margin: 2px 0 8px; }
.pet-card-locked-text { font-size: 13px; color: #cbb6f0; margin-top: 6px; }
.pet-evo { display: flex; align-items: center; gap: 8px; }
.pet-evo-bar {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  overflow: hidden;
}
.pet-evo-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #fcd34d);
}
.pet-evo-label { font-size: 10px; color: #a79ec6; white-space: nowrap; }

/* ---- v0.5.2: pet LEVEL badge (PetLevelBadge.razor) --------------------------
   Replaces the raw pet-XP number in the profile stat grid and on the public
   profile. Wears the pet's gold gradient (same as .pet-evo-fill above) so level
   and evolution read as one system. The bar shows progress WITHIN the current
   level; the exact XP lives in the title tooltip. */
.pet-level-bar {
  display: block;
  width: 100%;
  height: 6px;
  margin: 5px 0 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.pet-level-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #fcd34d);
  transition: width 0.35s ease-out;
}
/* The tile sits in .profile-stats' 4-up grid, so it inherits .profile-stat's box;
   only the bar row is new. cursor:help advertises the tooltip. */
.pet-level-tile { cursor: help; }

/* Public-profile inline form: "Lv. 12" + a short bar beside the pet emoji. */
.pet-level-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: help;
}
.pet-level-inline-num {
  font-size: 13px;
  font-weight: 800;
  color: #fcd34d;
  white-space: nowrap;
}
.pet-level-bar-sm {
  display: inline-block;
  width: 72px;
  height: 5px;
  margin: 0;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .pet-level-fill { transition: none; }
}
.pet-customize {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #8c84a8;
  font-size: 11px;
  font-weight: 700;
  cursor: not-allowed;
}
.pet-customize .material-icons { font-size: 14px; }

/* ---- Tabbed inventory (v0.4.23) ---- */
.profile-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 24px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin: 6px 0 0;
}
.profile-tab {
  padding: 6px 4px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #8c84a8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.profile-tab:hover { color: #c8bfe0; }
.profile-tab.active { color: #fff; border-bottom-color: var(--profile-tab-accent, var(--accent)); }
.profile-tabs-count { margin-left: auto; font-size: 11px; color: #8c84a8; }

.profile-drops { list-style: none; margin: 0; padding: 10px 24px 22px; }
.profile-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  margin-bottom: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.18));
  border: 1px solid;
  border-radius: 9px;
}
.drop-glyph { font-size: 22px; line-height: 1; flex-shrink: 0; }
.drop-name { font-size: 13px; font-weight: 700; color: #e8e4f5; }
.drop-tier { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #a79ec6; }
.drop-time { margin-left: auto; font-size: 11px; color: #8c84a8; white-space: nowrap; }

@media (max-width: 560px) {
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .profile-pet-card { flex-wrap: wrap; }
}

/* v0.4.68: phone fit for the customization overlay - reclaim overlay padding,
   tighten the pet card + section margins to the narrower card. */
@media (max-width: 480px) {
  .theme-modal-overlay { padding: 12px; }
  .theme-modal-card { max-height: calc(100dvh - 24px); }
  .profile-pet-card { margin: 14px 16px; padding: 12px 14px; }
}

/* Pit page: "artifacts won this session" strip under the slot */
.pit-wins {
  margin: 22px auto 0;
  max-width: 560px;
  text-align: center;
}
.pit-wins-title {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #C084FC;
  margin-bottom: 10px;
}
.pit-wins-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.pit-win-chip {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 10px;
  border: 2px solid;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25));
  animation: pit-win-pop 0.4s cubic-bezier(0.18, 0.7, 0.25, 1);
}
@keyframes pit-win-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Milestone 12: the Google Calendar sync section moved out of the profile modal
   into the topbar Settings gear (v0.4.67.18). Its styles now live token-driven in
   26-settings-menu.css as .settings-cal-*. */