/* ============================================================
   MAX3 OS — Design System base styles
   Fonts, CSS tokens, and a few effects Tailwind can't express cleanly.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800;900&family=Anton&family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* surfaces */
  --m3-bg:        #000000;
  --m3-surface:   #101013;
  --m3-surface-2: #1a1a1f;
  --m3-surface-3: #2a2a2a;   /* raised (message bubbles, chips) */
  --m3-logo-bg:   #0f0f12;
  --m3-nav:       #0a0a0c;   /* bottom nav surface */
  --m3-photo:     #f4f4f5;   /* light image-placeholder bg */
  --m3-line:      rgba(255,255,255,0.08);
  --m3-line-2:    rgba(255,255,255,0.14);
  --m3-on-accent: #1a1a1f;   /* dark text on lime/amber fills */

  /* brand accents */
  --m3-lime:   #AADD44;
  --m3-lime-d: #7CBB00;
  --m3-red:    #CC2222;
  --m3-amber:  #F5A623;
  --m3-blue:   #3B9EE8;
  --m3-gray:   #888888;

  /* rank metals */
  --m3-gold:   #f5b81e;
  --m3-silver: #c7ccd2;
  --m3-bronze: #c0814e;

  /* text */
  --m3-text:   #f4f4f5;
  --m3-text-2: #9b9ba3;
  --m3-text-3: #65656d;

  /* tweakable knobs (overridden at runtime by the Tweaks panel) */
  --m3-display: 'Saira Condensed', 'Inter', sans-serif;
  --m3-radius:  20px;
}

* { -webkit-tap-highlight-color: transparent; }

/* Full-bleed shell — real device / standalone launch (no desktop bezel).
   dvh tracks the dynamic mobile viewport; vh is the older-Safari fallback. */
.m3-fullbleed {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overscroll-behavior: none;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: #161616;
}

/* hide scrollbars inside the phone but keep scrollability */
.m3-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.m3-scroll::-webkit-scrollbar { display: none; }

/* Display type --------------------------------------------------- */
.font-display {
  font-family: var(--m3-display);
  font-weight: 700;
}

/* MAX3 wordmark — heavy condensed, faux-italic */
.m3-logo {
  font-family: var(--m3-display);
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.04em;
  transform: skewX(-7deg);
  display: inline-block;
  line-height: 1;
}

/* Avatar glow ring ---------------------------------------------- */
.m3-ring {
  position: relative;
  border-radius: 9999px;
  padding: 2.5px;
  background: conic-gradient(from 180deg, var(--ring, var(--m3-lime)), var(--ring, var(--m3-lime)));
}
.m3-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  box-shadow: 0 0 18px -2px var(--ring, var(--m3-lime));
  opacity: 0.55;
  pointer-events: none;
}

/* Card sheen — subtle top-light on dark cards */
.m3-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 22%),
    var(--m3-surface);
  border: 1px solid var(--m3-line);
}

/* Striped photo placeholder ------------------------------------- */
.m3-photo {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.045) 0px,
      rgba(255,255,255,0.045) 2px,
      transparent 2px,
      transparent 11px),
    var(--m3-surface-2);
}
.m3-photo::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
}
/* glow tints layered over a placeholder */
.m3-glow-lime  { box-shadow: inset 0 0 60px -10px color-mix(in srgb, var(--m3-lime) 55%, transparent); }
.m3-glow-red   { box-shadow: inset 0 0 70px -8px rgba(232,32,28,0.6); }
.m3-glow-amber { box-shadow: inset 0 0 70px -8px rgba(245,165,36,0.55); }

/* progress bar fill glow */
.m3-progress-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--m3-lime) 72%, #000), var(--m3-lime));
  box-shadow: 0 0 10px -1px color-mix(in srgb, var(--m3-lime) 60%, transparent);
}

/* pressable feedback */
.m3-press { transition: transform .12s ease, opacity .12s ease; }
.m3-press:active { transform: scale(0.975); opacity: 0.9; }

/* slide-up sheet + backdrop fade */
@keyframes m3SheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.m3-sheet-in { animation: m3SheetUp .30s cubic-bezier(.22,.61,.36,1); }
@keyframes m3FadeIn { from { opacity: 0; } to { opacity: 1; } }
.m3-fade-in { animation: m3FadeIn .25s ease; }
@keyframes m3Pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.m3-pop { animation: m3Pop .35s ease; }
@keyframes m3BadgePop { 0% { transform: scale(0.2); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 80% { transform: scale(0.96); } 100% { transform: scale(1); } }
.m3-badge-pop { animation: m3BadgePop .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes m3PulseO { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.m3-vip-pop { animation: m3VipPop .35s cubic-bezier(.34,1.4,.64,1) both; }
@keyframes m3VipPop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.m3-pulse { animation: m3PulseO 1.8s ease-in-out infinite; }
@keyframes m3FloatUp { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: .9; } 100% { transform: translateY(-120vh) rotate(360deg); opacity: 0; } }
.m3-confetti { position: absolute; bottom: -20px; animation: m3FloatUp linear infinite; }
@keyframes m3ToastIn { from { transform: translateY(-120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.m3-toast-in { animation: m3ToastIn .3s cubic-bezier(.22,.61,.36,1) both; }
@keyframes m3GlowPulse { 0%,100% { box-shadow: 0 0 18px -8px rgba(163,230,53,0.45); } 50% { box-shadow: 0 0 30px -4px rgba(163,230,53,0.7); } }
.m3-glow-pulse { animation: m3GlowPulse 2s ease-in-out infinite; }

/* splash — logo fade+scale in, loading bar fill */
@keyframes m3SplashIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
.m3-splash-in { animation: m3SplashIn .6s ease-out both; }
@keyframes m3SplashBar { from { width: 0; } to { width: 100%; } }
.m3-splash-bar { animation: m3SplashBar 1.5s cubic-bezier(.4,0,.2,1) .6s forwards; }
@keyframes m3Spin { to { transform: rotate(360deg); } }
.m3-spin { animation: m3Spin .8s linear infinite; }
@keyframes m3Shake { 0%,100% { transform: translateX(0); } 18%,54% { transform: translateX(-7px); } 36%,72% { transform: translateX(7px); } }
.m3-shake { animation: m3Shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes m3PinUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.m3-pin-up { animation: m3PinUp .25s ease-out both; }