/* Player mobile styles */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: #2B2344;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pf-phone {
  width: 390px; height: 780px; border-radius: 42px;
  background: var(--bg-canvas);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.5),
    0 0 0 12px #141022,
    0 0 0 14px #2B2344;
  overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}
.pf-notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 28px; background: #141022; border-radius: 999px; z-index: 20;
}
.pf-statusbar {
  height: 44px; padding: 0 28px; display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--fg-1); flex-shrink: 0;
}
.pf-scroll { flex: 1; overflow-y: auto; padding: 16px 20px 100px; }
.pf-scroll::-webkit-scrollbar { display: none; }

.pf-tabbar {
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  padding: 8px; background: var(--bg-canvas);
  border-radius: 24px; box-shadow: var(--neu-raised-lg);
  display: flex; gap: 4px; z-index: 15;
  backdrop-filter: blur(10px);
}
.pf-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 0; border-radius: 16px; color: var(--fg-3); cursor: pointer;
  transition: all 180ms cubic-bezier(0.2,0.7,0.2,1);
}
.pf-tab.active { color: var(--purple-500); box-shadow: var(--neu-inset-sm); }
.pf-tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-tab span { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; }

.pf-card {
  background: var(--bg-canvas); border-radius: var(--radius-xl);
  box-shadow: var(--neu-raised-md); padding: 20px;
}
.pf-card-lg { border-radius: 28px; box-shadow: var(--neu-raised-lg); padding: 22px; }
.pf-pressable { transition: box-shadow 120ms, transform 120ms; cursor: pointer; }
.pf-pressable:active { box-shadow: var(--neu-pressed); transform: scale(0.995); }

.pf-btn-primary {
  width: 100%; padding: 16px; border: none; border-radius: 18px;
  background: var(--purple-500); color: #fff; font-weight: 600; font-size: 16px;
  font-family: inherit; cursor: pointer; box-shadow: var(--shadow-cta);
  letter-spacing: -0.005em;
}
.pf-btn-primary:active { transform: scale(0.98); }
.pf-btn-primary:disabled { background: var(--clay-200); color: var(--fg-4); box-shadow: none; }

.pf-btn-secondary {
  width: 100%; padding: 14px; border: none; border-radius: 16px;
  background: var(--bg-canvas); color: var(--purple-500); font-weight: 600; font-size: 15px;
  font-family: inherit; cursor: pointer; box-shadow: var(--neu-raised-sm);
}
.pf-micro {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-3);
}
.pf-num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; font-weight: 600; }

.pf-fade-in { animation: pfFade 360ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes pfFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.pf-stat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.pf-stat-pill .d { width: 6px; height: 6px; border-radius: 999px; }

.pf-row { display: flex; align-items: center; gap: 12px; }
.pf-divider { height: 1px; background: rgba(86,71,135,0.08); margin: 12px 0; }