* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

button, .relay-tile {
  touch-action: manipulation;
}

body {
  height: 100vh;
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
  overflow-x: hidden;
  overscroll-behavior-x: none;
  font-family: 'Inter', sans-serif;
}

/* ---- Animations ---- */
.shake {
  animation: shake 0.4s ease-in-out;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60%  { transform: translateX(-5px); }
  40%, 80%  { transform: translateX(5px); }
}

.pop {
  animation: pop 0.12s ease-out;
}
@keyframes pop {
  50% { transform: scale(1.07); }
}

/* Solved chain block sliding in */
.chain-pop {
  animation: chainPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes chainPop {
  0%   { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}

/* Tile checking pulse (while awaiting server) */
.tile-checking {
  animation: checking 0.65s ease-in-out infinite;
}
@keyframes checking {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ---- Relay tile sizing ---- */
/* Tiles are 4-across in max-w-sm container; height uses clamp so they  */
/* feel comfortable on any screen without any overflow.                  */
.relay-tile {
  height: clamp(3.5rem, 16vw, 5rem);
  font-size: clamp(0.65rem, 3vw, 0.9rem);
  transition: transform 0.15s, background-color 0.15s;
  flex-shrink: 0;
  text-align: center;
}

/* ---- Loader spinner ---- */
.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hint button idle nudge */
.hint-jiggle {
  animation: hint-jiggle 0.5s ease-in-out;
  transition: none !important;
}
@keyframes hint-jiggle {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-12deg); }
  40%  { transform: rotate(12deg); }
  60%  { transform: rotate(-8deg); }
  80%  { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}