*{box-sizing:border-box}
:root{
  --bg:#fff3f8;
  --ink:#44273a;
  --accent:#ff5ea8;
  --accent2:#ffb3d1;
  --card:#ffffff;
  --wall:#44273a;
  --path:#ffe3f1;
  --player:#ff2b2b;
  --goal:#ff5ea8;
}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 10%, #ffe7f3 0 30%, transparent 30%),
    radial-gradient(circle at 80% 0%, #ffe7f3 0 30%, transparent 30%),
    radial-gradient(circle at 20% 100%, #ffe7f3 0 30%, transparent 30%),
    radial-gradient(circle at 80% 90%, #ffe7f3 0 30%, transparent 30%),
    var(--bg);
  overflow-x:hidden;
}

/* Floating hearts canvas behind everything */
.bg-hearts{
  position:fixed; inset:0;
  z-index:-1;
}

/* 🩷 Animations */
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
@keyframes slideUp { from { transform:translateY(12px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.fade-in{ animation: fadeIn .8s ease both; }
.slide-up{ animation: slideUp .8s ease .15s both; }

/* 🩷 Welcome screen */
.welcome-screen {
  position:fixed;inset:0;
  display:grid;place-items:center;
  background:transparent;
  z-index:10;
}
.welcome-card {
  text-align:center;
  background:var(--card);
  border-radius:20px;
  padding:28px 22px;
  border:2px solid #ffd3e8;
  box-shadow:0 10px 30px rgba(0,0,0,.1);
  max-width:92vw;
}
.welcome-card h1 {
  margin:0;
  color:var(--accent);
  font-size:2em;
}
.welcome-card p {
  margin:14px auto 18px;
  max-width:40ch;
  line-height:1.5;
  min-height:3.2em; /* keep height during typewriter */
}
.welcome-controls{ display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
.select-label{ display:flex; align-items:center; gap:8px; }
.select-label select{
  padding:.4rem .6rem; border-radius:10px; border:1px solid #ffd3e8; background:var(--card);
}
.welcome-card button,
.actions button,
.ghost{
  cursor:pointer;
}
.welcome-card button {
  background:var(--accent);
  color:white;
  border:none;
  border-radius:12px;
  padding:.75rem 1.2rem;
  font-size:1rem;
}

/* 🩷 Main Game Styles */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;gap:12px;position:sticky;top:0;
  background:linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,.6));
  backdrop-filter: blur(6px);
  border-bottom:1px solid #ffd3e8;
}
.brand{font-weight:600}
.hud{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hud span{padding:.4rem .6rem;background:var(--card);border:1px solid #ffd3e8;border-radius:999px}
.ghost{
  background:transparent;border:1px dashed var(--accent);color:var(--accent);
  padding:.45rem .7rem;border-radius:10px;
}
main{display:grid;place-items:center;padding:16px}
#maze{
  width:min(92vw, 720px);
  height:min(92vw, 720px);
  background:var(--card);
  border-radius:16px;
  border:2px solid #ffd3e8;
  box-shadow: 0 8px 30px rgba(255, 95, 167, .12);
}
.controls{display:grid;place-items:center;margin:8px 0;gap:6px;user-select:none}
.controls .row{display:flex;gap:8px}
.dpad{
  font-size:20px;line-height:1;
  width:64px;height:64px;border-radius:14px;border:1px solid #ffd3e8;
  background:var(--card);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.dpad:active{transform:translateY(2px)}
.foot{padding:12px 16px;text-align:center;color:#80586c}

.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.25);display:grid;place-items:center;
}
.hidden{display:none}
.card{
  width:min(92vw, 520px);background:var(--card);border-radius:16px;
  border:2px solid #ffd3e8;padding:20px;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.12)
}
.card h2{margin:8px 0 0}
.card p{margin:8px auto 12px;max-width:45ch}
.card .subtle{opacity:.75; font-size:.95em}
.actions{display:flex;justify-content:center;gap:10px}
.actions button{
  background:var(--accent);color:white;border:none;border-radius:12px;padding:.6rem 1rem;
}
.actions button:nth-child(2){background:var(--accent2);color:#44273a}

@media (min-width:720px){
  #maze{width:640px;height:640px}
}