/* CombatGirls.net — frontend styles (Tailwind CDN + custom design tokens)
 * ---------------------------------------------------------------------
 * Design language: athlete-tech. Bold display type stays restrained
 * (used for names and large stat numbers only). Cards use a refined
 * dark surface stack with a subtle warm border. Crimson is the single
 * accent — lime is reserved for "win / positive" cues.
 */

:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; }

/* ---- Background mesh: subtle warm gradient halos ---- */
.bg-mesh {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 85% -5%,  rgba(225, 29, 42, .14), transparent 65%),
    radial-gradient(50% 45% at -10% 25%, rgba(198, 255, 61, .05), transparent 60%),
    radial-gradient(70% 60% at 50% 110%, rgba(225, 29, 42, .07), transparent 70%);
}

/* ---- Grain (existing) ---- */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Display heading: poster-tight, never balloon ---- */
.h-display { font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .015em; line-height: .92; }

/* Numeric stat numbers — always tabular so dashes line up cleanly. */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---- Surfaces ---- */
.surface {
  background: linear-gradient(180deg, #14141a 0%, #101015 100%);
  border: 1px solid #23232b;
  border-radius: 1rem;
  position: relative;
}
.surface-hover { transition: border-color .2s ease, transform .25s ease, background .25s ease; }
.surface-hover:hover { border-color: #3a3a48; transform: translateY(-2px); }

/* Soft inset for stat tiles inside a surface. */
.tile {
  background: rgba(255,255,255,.02);
  border: 1px solid #23232b;
  border-radius: .75rem;
  padding: .65rem .85rem;
}

/* ---- Pill button base ---- */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 38px; padding: .4rem .9rem;
  border: 1px solid #2a2a31; border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  color: #d4d1ca; background: rgba(255,255,255,.01);
  transition: border-color .15s, color .15s, background .15s;
}
.pill:hover { border-color: #e11d2a; color: #f4f1ea; }
.pill-primary {
  background: linear-gradient(180deg, #e11d2a, #b3121e);
  border-color: #b3121e; color: #fff; text-transform: uppercase; letter-spacing: .06em;
  font-size: .75rem; box-shadow: 0 6px 24px -10px rgba(225,29,42,.6);
}
.pill-primary:hover { color: #fff; border-color: #fa4a55; }

/* ---- Bottom nav ---- */
.bottom-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: #6e6e78; transition: color .18s ease; position: relative;
  min-height: 44px;
}
.bottom-tab:active { color: #e11d2a; }
.bottom-tab.is-active { color: #f4f1ea; }
.bottom-tab.is-active::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 30px; height: 3px; border-radius: 0 0 3px 3px; background: #e11d2a;
}

/* ---- Hover lift / card-rise ---- */
.card-rise { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card-rise:hover { transform: translateY(-3px); border-color: #3a3a48; box-shadow: 0 18px 40px -25px rgba(0,0,0,.7); }

/* Diagonal accent slash retained */
.slash::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(#e11d2a, #b3121e);
}

/* ---- Page-load reveal ---- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise .45s cubic-bezier(.2,.7,.2,1) both; }
.reveal-1 { animation-delay: .04s; } .reveal-2 { animation-delay: .10s; }
.reveal-3 { animation-delay: .16s; } .reveal-4 { animation-delay: .22s; }

/* ---- Rating slider ---- */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: #2a2a31; outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #e11d2a; cursor: pointer; border: 2px solid #f4f1ea; box-shadow: 0 4px 12px -4px rgba(225,29,42,.7); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #e11d2a; cursor: pointer; border: 2px solid #f4f1ea; }

/* ---- Skeleton shimmer ---- */
.skeleton { position: relative; overflow: hidden; background: #15151a; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ---- Profile tabs ---- */
.tab-btn { position: relative; padding: 14px 4px; min-height: 44px; color: #8a8a93; background: none; border: 0; cursor: pointer; font-size: .75rem; letter-spacing: .12em; font-weight: 700; }
.tab-btn:hover { color: #c7c4be; }
.tab-btn.active { color: #f4f1ea; }
.tab-btn.active::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: #e11d2a; border-radius: 2px; }

/* ---- Outcome chip variants ---- */
.oc { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .65rem; border-radius: .65rem; font-family: 'Anton', sans-serif; font-size: 1.25rem; letter-spacing: .04em; }
.oc-w { background: rgba(198,255,61,.12); color: #c6ff3d; border: 1px solid rgba(198,255,61,.28); }
.oc-l { background: rgba(225,29,42,.12); color: #ff5562; border: 1px solid rgba(225,29,42,.32); }
.oc-d { background: rgba(255,255,255,.06); color: #c7c4be; border: 1px solid rgba(255,255,255,.12); }
.oc-n { background: rgba(255,255,255,.04); color: #8a8a93; border: 1px solid rgba(255,255,255,.10); }

/* Subtle accent strip on the left of the bout card. */
.bout-accent { box-shadow: inset 3px 0 0 currentColor; }

/* hide scrollbars (used on horizontal tab bar + shorts feed) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom narrow scrollbar elsewhere */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #23232b; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #34343f; }

/* ---- Glass header / sticky bar ---- */
.glass { background: rgba(10,10,12,.78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }

/* ---- Image utility: focal-point-friendly portrait ---- */
.portrait { aspect-ratio: 4/5; object-fit: cover; object-position: center top; }

/* ---- Section eyebrow label (small caps accent) ---- */
.eyebrow { text-transform: uppercase; letter-spacing: .25em; font-size: .7rem; font-weight: 700; color: #e11d2a; }