/* Droplet Merge site: the game's night look (deep purple lamp, glass, soft glow), light on a dark ground. */
:root {
  --bg: #14092e;
  --bg2: #241052;
  --ink: #ffffff;
  --soft: rgba(255, 255, 255, 0.72);
  --faint: rgba(255, 255, 255, 0.5);
  --glass: rgba(255, 255, 255, 0.07);
  --edge: rgba(255, 255, 255, 0.16);
  --accent: #7cc8ff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(60vmax 50vmax at 20% 10%, rgba(255, 110, 90, 0.22), transparent 60%),
    radial-gradient(55vmax 45vmax at 85% 70%, rgba(150, 90, 255, 0.25), transparent 60%),
    radial-gradient(70vmax 60vmax at 50% 110%, rgba(255, 140, 70, 0.18), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  background-attachment: fixed;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  line-height: 1.55;
}
main { max-width: 720px; margin: 0 auto; padding: 56px 20px 40px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.hero { text-align: center; padding: 32px 0 8px; }
.hero img { width: 148px; height: 148px; border-radius: 34px; box-shadow: 0 18px 60px rgba(60, 120, 255, 0.45); }
h1 { font-size: clamp(36px, 8vw, 54px); line-height: 1.05; margin: 26px 0 8px; letter-spacing: -0.01em; }
.tag { font-size: 19px; color: var(--soft); margin: 0 0 26px; }
.badge {
  display: inline-block; padding: 12px 22px; border-radius: 16px; font-weight: 600;
  background: var(--glass); border: 1px solid var(--edge); color: var(--ink);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.card {
  margin: 26px 0; padding: 24px 24px 18px; border-radius: 26px;
  background: var(--glass); border: 1px solid var(--edge);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.card h2 { font-size: 22px; margin: 0 0 10px; }
.card h3 { font-size: 17px; margin: 18px 0 4px; }
.card p, .card li { color: var(--soft); }
.card ul { padding-left: 20px; margin: 8px 0; }
nav.foot { text-align: center; font-size: 14px; color: var(--faint); margin-top: 36px; }
nav.foot a { color: var(--soft); margin: 0 10px; }
.back { display: inline-block; margin-bottom: 8px; font-weight: 600; }
.page h1 { font-size: clamp(30px, 6vw, 40px); margin-top: 8px; }
.updated { color: var(--faint); font-size: 14px; margin-top: -4px; }