/* =============================
   Fluent 2 light background + minimal HUD + modal + tiny controls
   ============================= */
:root{
  --bg0:#f7f8fb;
  --ink:#0f172a;
  --muted:#64748b;
  --primary:#2563eb;
  --glass:#ffffffc2;
  --stroke: rgba(2,6,23,.1);
  --shadow: 0 20px 60px rgba(2,6,23,.12), 0 2px 8px rgba(2,6,23,.06);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--ink);
  font: 15px/1.45 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 700px at 12% 20%, #fff, transparent 60%),
              radial-gradient(1000px 640px at 88% 18%, #eef4ff, transparent 55%),
              radial-gradient(1000px 680px at 50% 100%, #f2fff6, transparent 60%),
              var(--bg0);
  overflow:hidden;
}

/* Background shapes */
.bg .noise{ position:fixed; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feComponentTransfer><feFuncA type='table' tableValues='0 .02'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.5; mix-blend-mode:soft-light;
}
.bg .shape{ position:fixed; filter: blur(90px); opacity:.6; transform-origin:center; will-change: transform }
.bg .s1{ width:50vmax; height:50vmax; left:-10vmax; top:-10vmax;
  background: radial-gradient(closest-side at 40% 40%, #9bdbff, #a7f3d0 60%, transparent 70%);
  animation: spin 120s linear infinite;
}
.bg .s2{ width:40vmax; height:40vmax; right:-8vmax; top:-6vmax;
  background: radial-gradient(closest-side at 60% 30%, #d1e0ff, #fde68a 60%, transparent 70%);
  animation: spinReverse 140s linear infinite;
}
.bg .s3{ width:55vmax; height:55vmax; left:20vmax; bottom:-20vmax;
  background: radial-gradient(closest-side at 50% 70%, #ffd3d3, #c7d2fe 60%, transparent 70%);
  animation: spin 180s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg) } }
@keyframes spinReverse{ to{ transform: rotate(-360deg) } }
@media (prefers-reduced-motion: reduce){ .bg .shape{ animation:none } }

/* Score HUD centered */
.hud{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px; z-index:5;
  background: var(--glass);
  border:1px solid var(--stroke);
  border-radius: 999px;
  padding:8px 14px;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: var(--shadow);
}
.score{ font-weight:800; letter-spacing:.5px; min-width:84px; text-align:center }

/* Minimal controls top-right */
.hud-controls{
  position:fixed; top:14px; right:18px; z-index:6; display:flex; gap:10px; align-items:center;
}
.link{
  appearance:none; border:none; background:transparent; color:#1e293b;
  font-weight:700; font-size:13px; padding:2px 4px; cursor:pointer; opacity:.8;
}
.link:hover{ opacity:1; text-decoration:underline }
.sep{ width:1px; height:16px; background:rgba(2,6,23,.1); margin:0 2px }
.mini{ font-size:12px; color:#334155; display:flex; align-items:center; gap:4px }
.mini-select{
  font: inherit; border:1px solid #e5e7eb; background:#fff; border-radius:8px; padding:4px 6px; color:#1f2937
}
.mini.chk{ gap:6px }
.mini input[type="checkbox"]{ transform: scale(1.05) }

/* Stage & canvas */
.stage{ position:fixed; inset:0; display:grid; place-items:center; padding:4vmin }
#field{
  width:min(1200px, 92vw);
  height:auto;
  border-radius:20px;
  box-shadow: var(--shadow);
  background: transparent;
  touch-action:none;
}

/* Modal */
.modal{ position:fixed; inset:0; display:grid; place-items:center; background: rgba(15,23,42,.05); z-index:10 }
.modal.hidden{ display:none }
.modal-card{
  background: var(--glass);
  border:1px solid var(--stroke);
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.modal-card h2{ margin:0 0 6px }
.modal-sub{ margin:0 0 12px; color:var(--muted) }
.btn{ border:1px solid #e5e7eb; background:#fff; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700 }
.btn:hover{ background:#f3f4f6 }