/* ═══════════════════════════
   CERVELLONE — shared styles
═══════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@700;800;900&display=swap');

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;font-family:'Nunito',sans-serif}
body{background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%);display:flex;justify-content:center;background-attachment:fixed}
#root{width:100%;max-width:430px;height:100%;overflow:hidden}

/* ── Fonts ── */
.ff{font-family:'Fredoka One',cursive}

/* ── Animations ── */
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-8px)}80%{transform:translateX(8px)}}
@keyframes bounceY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes bounceArrow{0%,100%{transform:translateY(0) scaleX(-1)}50%{transform:translateY(-8px) scaleX(-1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes starIn{0%{transform:scale(0) rotate(-15deg);opacity:0}70%{transform:scale(1.3)}100%{transform:scale(1);opacity:1}}
@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0);opacity:1}100%{transform:translateY(180px) rotate(560deg);opacity:0}}
@keyframes slideUp{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes scalePop{0%{transform:scale(.7);opacity:0}80%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes glow{0%,100%{box-shadow:0 0 12px 4px rgba(255,220,0,.6)}50%{box-shadow:0 0 24px 10px rgba(255,220,0,.9)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* ── Utility ── */
.shake{animation:shake .4s ease}
.bounce{animation:bounceY 2s ease infinite}
.wiggle{animation:wiggle 2.5s ease infinite}
.fadein{animation:fadeIn .35s ease}
.slideup{animation:slideUp .35s ease}

/* ── Grid background (play screen) ── */
.grid-bg{
  background-color:#eaf2fb;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23c8d6e5' stroke-width='0.8'/%3E%3C/svg%3E");
}

/* ── Scroll / parchment background ── */
.parchment-bg{
  background-color:#f2e4c4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ctext x='5' y='40' font-size='32' opacity='0.04'%3E🎮%3C/text%3E%3C/svg%3E");
}

/* ── Coin badge ── */
.coin-badge{
  background:white; border:3px solid #d4a800; border-radius:30px;
  padding:5px 10px 5px 6px; display:flex; align-items:center; gap:5px;
}
.coin-badge .amount{font-family:'Fredoka One',cursive;font-size:16px;color:#2d3436}
.coin-badge .plus{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#ff6b6b,#ff8787);display:flex;align-items:center;justify-content:center;color:white;font-size:14px;font-weight:900;margin-left:2px}

/* ── Generic pill button ── */
.btn-pill{
  border:none;border-radius:50px;padding:14px 40px;
  font-family:'Fredoka One',cursive;font-size:20px;
  cursor:pointer;transition:transform .12s, box-shadow .12s;
}
.btn-pill:active{transform:scale(.97)}

/* ── 3D menu button (settings) ── */
.menu-btn{
  display:block;width:100%;margin-bottom:10px;
  background:linear-gradient(180deg,#dce8f5 0%,#c4d8ec 100%);
  border:none;border-radius:14px;padding:14px 20px;
  font-family:'Fredoka One',cursive;font-size:18px;color:#3d3d3d;
  cursor:pointer;text-align:center;
  box-shadow:0 4px 0 #9ab5cc, 0 6px 8px rgba(0,0,0,.12);
  transition:transform .1s, box-shadow .1s;
}
.menu-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #9ab5cc,0 2px 4px rgba(0,0,0,.1)}

/* ── Toggle circle button ── */
.toggle-btn{
  width:76px;height:76px;border-radius:50%;
  border:4px solid #0891b2;
  background:linear-gradient(145deg,#06b6d4,#0ea5e9);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;cursor:pointer;
  box-shadow:0 5px 0 #0369a1,0 8px 14px rgba(0,0,0,.2);
  transition:all .15s;
}
.toggle-btn.off{
  background:linear-gradient(145deg,#ccc,#aaa);
  border-color:#888;
  box-shadow:0 5px 0 #666,0 8px 14px rgba(0,0,0,.15);
}
.toggle-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #0369a1,0 2px 4px rgba(0,0,0,.1)}

/* ── Level node ── */
.level-node{
  width:60px;height:60px;border-radius:50%;
  font-family:'Fredoka One',cursive;font-size:20px;color:white;
  border:4px solid #4f46e5;
  background:linear-gradient(145deg,#6366f1,#818cf8);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.level-node.done{background:linear-gradient(145deg,#ff8c42,#ffa042);border-color:#ff6b35}
.level-node.locked{background:#888;border-color:#666;cursor:not-allowed;opacity:.7}
.level-node.active{width:72px;height:72px;font-size:24px;animation:glow 1.8s ease infinite}