/* Snake — game-specific styles (rides on playful.css) */

body.playful { touch-action:none; }

.canvas-wrapper {
  flex:1; display:flex; justify-content:center; align-items:center;
  width:100%; position:relative;
}

canvas {
  width:100%; max-width:100%; max-height:100%;
  /* Opaque board colour (matches the light checker cell) so the wood
     background can't bleed through the rounded corners and make the board
     look unevenly bright/dim. */
  background:#E8F6E1;
  border:4px solid var(--stroke); border-radius:16px;
  box-shadow:0 8px 0 rgba(28,24,20,0.1);
}

.touch-overlay { position:absolute; inset:0; z-index:5; }

.mythic-icon { width:80px; height:80px; margin:0 auto; animation:floaty 2s ease-in-out infinite; }

/* Achievement toast */
.achievement-toast {
  position:fixed; bottom:-120px; left:50%; transform:translateX(-50%);
  background:var(--yellow); border:4px solid var(--stroke); border-radius:16px;
  padding:12px 24px; display:flex; align-items:center; gap:16px;
  box-shadow:0 6px 0 var(--stroke); z-index:400;
  transition:bottom 0.5s var(--bounce);
}
.achievement-toast.show { bottom:40px; }
.toast-icon { font-size:32px; }
.toast-text { display:flex; flex-direction:column; text-align:left; }
.toast-text strong { font-size:16px; color:var(--stroke); }
.toast-text span { font-size:12px; color:rgba(28,24,20,0.7); font-weight:700; }

@media (prefers-reduced-motion: reduce) {
  .mythic-icon { animation:none; }
}