:root{
  --bg:#0f1720;
  --card:#0b1220;
  --accent:#f59e0b;
  --muted:#9aa6b2;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body,#game{height:100%}
body{
  background: linear-gradient(180deg,#071021 0%, #081426 100%);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  touch-action:none;
}

#game{
  position:relative;
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Canvas fills safe area */
canvas{
  width: min(920px, 96vw);
  height: min(640px, 80vh);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.05));
  border-radius:14px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  display:block;
  touch-action:none;
}

/* HUD */
#hud{
  position:absolute;
  top:14px;
  left:14px;
  right:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:auto;
}

#score{
  color:white;
  font-weight:600;
  background:rgba(255,255,255,0.03);
  padding:8px 12px;
  border-radius:10px;
  font-size:16px;
  backdrop-filter: blur(6px);
}

#reset{
  background:var(--card);
  color:var(--muted);
  border:0;
  width:44px;
  height:44px;
  border-radius:10px;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 4px 12px rgba(2,6,23,0.6);
}

/* Pigen badge in HUD */
#pigenBadge img{ display:block; }
#pigenCount{ font-size:16px; color:white; }

/* Touch layer covers canvas for drag on mobile */
#touchLayer{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  pointer-events:none; /* enabled dynamically */
}

/* small HUD icon button (watch link) */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:10px;
  background:var(--card);
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
  box-shadow: 0 4px 12px rgba(2,6,23,0.6);
  border:0;
}
.icon-btn:hover{
  transform:translateY(-2px);
  transition:transform .12s ease;
}

/* Keep everything within one screen; no instructions per mobile rules */