@font-face { font-family: 'Lilita'; src: url(fonts/lilita.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url(fonts/fredoka.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }

:root {
  --bg: #080b1f;
  --panel: #11163a;
  --line: rgba(130, 150, 255, 0.22);
  --text: #ffffff;
  --muted: #aab3e6;
  --cyan: #2ee6ff;
  --violet: #8b6bff;
  --orange: #ff9a1f;
  --head: 'Lilita', 'Fredoka', system-ui, sans-serif;
  --body: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -200px, #1d2470 0%, transparent 70%), var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.5;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.top, main, footer { max-width: 1080px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.top { padding-top: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--cyan), var(--violet)); color: var(--bg); font-family: var(--head); font-size: 22px; }

.hero { text-align: center; padding: 40px 0 28px; }
.hero h1 { font-family: var(--head); font-weight: 400; font-size: clamp(34px, 6vw, 58px); line-height: 1.05; margin: 0 0 12px; letter-spacing: 0.01em; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--cyan), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--muted); font-size: 18px; margin: 0 auto; max-width: 560px; }

.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.game { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.game .art { position: relative; height: 230px; overflow: hidden; }
.game .art .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) brightness(0.8); }
.game .art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--panel) 100%); }
.bot, .blade { position: absolute; z-index: 1; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)); }
.bot { bottom: -6px; height: 92%; }
.bot.b1 { left: 2%; height: 74%; }
.bot.b2 { left: 50%; transform: translateX(-50%); z-index: 2; }
.bot.b3 { right: 2%; height: 74%; }
.blade { top: 50%; width: 38%; max-width: 170px; }
.blade.d1 { left: 4%; transform: translateY(-40%) rotate(-12deg); width: 30%; }
.blade.d2 { left: 50%; transform: translate(-50%, -55%); z-index: 2; animation: spin 9s linear infinite; }
.blade.d3 { right: 4%; transform: translateY(-40%) rotate(12deg); width: 30%; }
@keyframes spin { to { transform: translate(-50%, -55%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .blade.d2 { animation: none; } }

.game .body { padding: 6px 22px 24px; display: flex; flex-direction: column; flex: 1; position: relative; z-index: 3; margin-top: -40px; }
.title { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.title .icon { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); border: 2px solid rgba(255, 255, 255, 0.15); }
.title .logo { height: 52px; max-width: calc(100% - 80px); object-fit: contain; object-position: left center; }
.lead { font-size: 18px; margin: 4px 0 12px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 12px; }
.chips li { font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: rgba(46, 230, 255, 0.1); border: 1px solid rgba(46, 230, 255, 0.35); color: #bff7ff; }
.algablade .chips li { background: rgba(255, 154, 31, 0.1); border-color: rgba(255, 154, 31, 0.4); color: #ffe0b8; }
.small { color: var(--muted); font-size: 15px; margin: 0 0 20px; }
.play { margin-top: auto; display: block; text-align: center; text-decoration: none; font-family: var(--head); font-size: 26px; letter-spacing: 0.03em; color: #061226; padding: 14px; border-radius: 18px; background: linear-gradient(180deg, #7ff3ff, var(--cyan)); box-shadow: 0 6px 0 #0a8aa6, 0 0 30px rgba(46, 230, 255, 0.35); transition: transform 0.1s, box-shadow 0.1s; }
.algablade .play { color: #3a1600; background: linear-gradient(180deg, #ffe14d, var(--orange)); box-shadow: 0 6px 0 #b34d00, 0 0 30px rgba(255, 170, 0, 0.35); }
.play:active { transform: translateY(4px); box-shadow: 0 2px 0 #0a8aa6; }
.algablade .play:active { box-shadow: 0 2px 0 #b34d00; }
.play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.install { margin: 48px 0 20px; padding: 26px 22px; border-radius: 24px; background: rgba(17, 22, 58, 0.6); border: 1px solid var(--line); }
.install h2 { font-family: var(--head); font-weight: 400; font-size: 30px; margin: 0 0 6px; }
.install > p { color: var(--muted); margin: 0 0 18px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.step h3 { margin: 0 0 6px; font-size: 19px; }
.step ol { margin: 0 0 10px; padding-left: 22px; }
.step li { margin: 3px 0; }
.note { font-size: 14px; color: var(--muted); margin: 0; }
.privacy { font-size: 14px; color: var(--muted); margin: 18px 0 0 !important; }

footer { color: #6c76b0; font-size: 14px; text-align: center; padding-top: 10px; padding-bottom: 28px; }

@media (max-width: 480px) {
  .hero { padding: 28px 0 20px; }
  .hero p { font-size: 16px; }
  .game .art { height: 190px; }
  .game .body { padding: 6px 16px 20px; }
  .title .icon { width: 54px; height: 54px; }
  .title .logo { height: 44px; }
  .install { padding: 20px 16px; }
}