/* AI_TAG: FRONTEND_COMPONENT | CrossyPige layout + theme */
:root{
  --bg:#0b1220; --hud:#0f172a; --text:#e2e8f0; --accent:#38bdf8;
  --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444; --muted:#94a3b8;
}

html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
.cp-root{display:flex;flex-direction:column;min-height:100dvh}
.cp-hud{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:linear-gradient(180deg,var(--hud),#0a1222);position:sticky;top:0;z-index:2;border-bottom:1px solid #0f213e}
.cp-hud .cp-btn{background:#0b2547;border:1px solid #1e3a8a;color:var(--text);padding:6px 10px;border-radius:8px;cursor:pointer}
.cp-hud .cp-btn:hover{background:#11315f}
.cp-hud .cp-btn.primary{background:#075985;border-color:#0369a1}
.cp-hud .cp-btn.primary:hover{background:#0a6aa9}
.cp-hud .sep{opacity:.6;margin:0 8px}
.cp-center{font-weight:600;letter-spacing:.5px}

.cp-stage-wrap{position:relative;display:grid;place-items:center;flex:1;min-height:0;padding:10px}
#stage{background:#0a1324;border-radius:12px;border:1px solid #0f213e;box-shadow:0 12px 40px rgba(0,0,0,.4);touch-action:none}

.cp-dpad{position:absolute;bottom:16px;left:16px;width:148px;height:148px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px;opacity:.96}
.cp-pad{background:#0b2547;border:1px solid #1e3a8a;color:var(--text);border-radius:12px;display:grid;place-items:center;font-size:20px;opacity:.9}
.cp-pad:active{background:#143567}
.cp-pad.up{grid-column:2;grid-row:1}
.cp-pad.down{grid-column:2;grid-row:3}
.cp-pad.left{grid-column:1;grid-row:2}
.cp-pad.right{grid-column:3;grid-row:2}

.cp-overlay{position:fixed;inset:0;background:rgba(2,6,23,.7);display:grid;place-items:center}
.cp-overlay.hidden{display:none}
.cp-card{background:#0b2547;border:1px solid #1e3a8a;border-radius:12px;padding:18px 16px;max-width:420px;width:88vw;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.cp-card h2{margin:.2rem 0 .6rem}
.cp-card .hint{margin:.2rem 0 1rem;color:var(--muted)}
.cp-card .cp-btn{width:100%;padding:10px 12px}

/* Simple pulse for score increments */
@keyframes pulse{0%{transform:scale(1);color:var(--text)}35%{transform:scale(1.08);color:var(--ok)}100%{transform:scale(1);color:var(--text)}}
.pulse{animation:pulse .25s ease-out}

/* Accessibility */
.cp-btn:focus,.cp-pad:focus{outline:2px solid var(--accent);outline-offset:2px}

/* Responsive canvas fit */
@media (max-width: 520px){
  #stage{width:100%;height:auto}
}