/* Fluent Design 全局样式 - 少女粉主题 */

:root {
  --fluent-blue: #ff6b9d;
  --fluent-blue-dark: #e54b7d;
  --fluent-blue-darker: #cc3667;
  --fluent-yellow: #ffb900;
  --fluent-red: #e81123;
  --fluent-green: #00cc6a;
  --fluent-border: #fce7f3;
  --fluent-input-border: #f9a8d4;
}

* { box-sizing: border-box; }

body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "PingFang SC", sans-serif;
  background: #fff5f7;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
}

.fluent-acrylic { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px) saturate(125%); -webkit-backdrop-filter: blur(20px) saturate(125%); }
.fluent-acrylic-strong { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(30px) saturate(125%); -webkit-backdrop-filter: blur(30px) saturate(125%); }
.fluent-reveal { position: relative; transition: all 0.15s ease-out; }
.fluent-reveal:hover { border-color: rgba(255, 107, 157, 0.5) !important; }

.fluent-shadow-sm { box-shadow: 0 1.6px 3.6px rgba(0,0,0,0.13), 0 0.3px 0.9px rgba(0,0,0,0.1); }
.fluent-shadow-md { box-shadow: 0 3.2px 7.2px rgba(0,0,0,0.13), 0 0.6px 1.8px rgba(0,0,0,0.1); }
.fluent-shadow-lg { box-shadow: 0 6.4px 14.4px rgba(0,0,0,0.13), 0 1.2px 3.6px rgba(0,0,0,0.1); }
.fluent-shadow-hover { box-shadow: 0 6.4px 14.4px rgba(0,0,0,0.18), 0 1.2px 3.6px rgba(0,0,0,0.14); }

.fluent-btn {
  border-radius: 0.375rem;
  box-shadow: 0 1.6px 3.6px rgba(0,0,0,0.13), 0 0.3px 0.9px rgba(0,0,0,0.1);
  transition: all 0.15s ease-out;
  font-weight: 600; cursor: pointer; border: none; outline: none;
}
.fluent-btn:hover { transform: translateY(-1px); box-shadow: 0 3.2px 7.2px rgba(0,0,0,0.13), 0 0.6px 1.8px rgba(0,0,0,0.1); }
.fluent-btn:active { transform: scale(0.97); }
.fluent-btn:focus-visible { outline: 2px solid var(--fluent-blue); outline-offset: 2px; }
.fluent-btn-primary { background: var(--fluent-blue); color: #fff; }
.fluent-btn-primary:hover { background: var(--fluent-blue-dark); }
.fluent-btn-secondary { background: #fff; color: var(--fluent-blue); border: 1px solid var(--fluent-border); }
.fluent-btn-secondary:hover { background: #f9f9f9; }
.fluent-btn-danger { background: var(--fluent-red); color: #fff; }
.fluent-btn-danger:hover { background: #c50f1f; }

.fluent-card {
  border-radius: 0.375rem;
  border: 1px solid var(--fluent-border);
  box-shadow: 0 1.6px 3.6px rgba(0,0,0,0.13), 0 0.3px 0.9px rgba(0,0,0,0.1);
  background: #fff;
  transition: all 0.15s ease-out;
}
.fluent-card:hover { box-shadow: 0 6.4px 14.4px rgba(0,0,0,0.18), 0 1.2px 3.6px rgba(0,0,0,0.14); border-color: rgba(255, 107, 157, 0.4); }

.fluent-input {
  border-radius: 0.375rem;
  border: 1px solid var(--fluent-input-border);
  background: #fff;
  font-family: inherit;
  transition: all 0.15s ease-out;
  outline: none;
}
.fluent-input:focus { border-color: var(--fluent-blue); box-shadow: 0 0 0 1px var(--fluent-blue); }
.fluent-input:hover { border-color: var(--fluent-blue); }

.fluent-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 1.4; }
.fluent-badge-new { background: rgba(236, 72, 153, 0.12); color: #db2777; }
.fluent-badge-crack { background: rgba(251, 113, 133, 0.12); color: #e11d48; }
.fluent-badge-hot { background: rgba(251, 146, 60, 0.15); color: #c2410c; }
.fluent-badge-dlc { background: rgba(244, 114, 182, 0.12); color: #db2777; }
.fluent-badge-collection { background: rgba(192, 132, 252, 0.12); color: #7c3aed; }

.fluent-stars { color: var(--fluent-yellow); letter-spacing: 1px; }

.fluent-hero-bg {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,107,157,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(236,72,153,0.10) 0%, transparent 50%),
    linear-gradient(135deg, #fff5f7 0%, #ffe4ec 100%);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #fff5f7; }
::-webkit-scrollbar-thumb { background: rgba(255, 107, 157, 0.3); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 107, 157, 0.5); background-clip: content-box; }

.fluent-link { color: var(--fluent-blue); transition: all 0.15s ease-out; }
.fluent-link:hover { color: var(--fluent-blue-dark); text-decoration: underline; }

@keyframes fluent-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fluent-animate { animation: fluent-fade-in 0.2s ease-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}