/* TeamFlag — base styles */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  /* Hex fallbacks first (works everywhere); oklch overrides on modern browsers. */
  --bg: #1c2127;
  --bg-2: #262b32;
  --bg-3: #30353c;
  --line: #3d434b;
  --ink: #f3f3f4;
  --ink-2: #bdc1c6;
  --ink-3: #7e858d;
  --danger: #e6473e;
  --display: 'Anton', 'Bebas Neue', Impact, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
@supports (color: oklch(0 0 0)) {
  :root {
    --bg: oklch(0.14 0.01 250);
    --bg-2: oklch(0.18 0.012 250);
    --bg-3: oklch(0.22 0.014 250);
    --line: oklch(0.28 0.015 250);
    --ink: oklch(0.96 0.005 250);
    --ink-2: oklch(0.78 0.008 250);
    --ink-3: oklch(0.55 0.01 250);
    --danger: oklch(0.66 0.22 25);
  }
}

html, body {
  width: 100%;
  height: 100%;
  background: #050608;
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11";
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

#stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, oklch(0.18 0.04 260 / .35), transparent 50%),
    radial-gradient(circle at 80% 80%, oklch(0.18 0.04 30 / .25), transparent 50%),
    #050608;
}

.phone {
  width: 390px;
  height: 844px;
  background: var(--bg);
  border-radius: 44px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 0 1px oklch(0.3 0.01 250 / .4),
    0 40px 80px -20px oklch(0 0 0 / .6),
    0 80px 120px -40px oklch(0 0 0 / .8);
  isolation: isolate;
}

.phone-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.status-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 32px 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  z-index: 100;
  pointer-events: none;
}
.status-bar .right { display: flex; gap: 6px; align-items: center; opacity: .9; }
.status-bar svg { display: block; }
.status-bar.dark { color: #fff; }
.status-bar.light { color: #111; }

.home-indicator {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 134px; height: 5px;
  border-radius: 3px;
  background: currentColor;
  opacity: .35;
  z-index: 100;
  pointer-events: none;
}

/* notch / dynamic island */
.island {
  position: absolute;
  top: 11px; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 36px;
  background: #000;
  border-radius: 20px;
  z-index: 99;
  pointer-events: none;
}

/* fonts: bold display */
.display { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; background: none; border: 0; outline: none; }

.no-select { user-select: none; }

/* viewport hint badge in corner */
.viewport-hint {
  position: fixed;
  left: 16px; bottom: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: oklch(0.5 0.01 250);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* keyframes */
@keyframes pulseDot {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.fade-in { animation: fadeIn .4s ease both; }

/* === Mobile: fill the actual screen, drop the phone frame === */
@media (max-width: 768px), (pointer: coarse) {
  #stage { background: var(--bg); }
  .phone {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .island { display: none !important; }
  .status-bar { display: none !important; }
  .home-indicator { display: none !important; }
  .viewport-hint { display: none !important; }
}

/* Disable scroll on iOS rubber band */
@supports (-webkit-touch-callout: none) {
  html, body { position: fixed; overflow: hidden; width: 100%; height: 100%; }
}