:root {
  --pastel-blue: #cfe8f3;
  --soft-pink: #f5c9da;
  --cream: #faf3e2;
  --white: #ffffff;
  --ink: #2b2b2b;
  --gold: #d4af37;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background-color: var(--pastel-blue);
  background-image:
    /* horizontal plaid bands: wide translucent pink + thin cream accent */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 40px,
      rgba(245, 201, 218, 0.28) 40px,
      rgba(245, 201, 218, 0.28) 72px,
      transparent 72px,
      transparent 200px,
      rgba(250, 243, 226, 0.55) 200px,
      rgba(250, 243, 226, 0.55) 210px,
      transparent 210px,
      transparent 240px
    ),
    /* vertical plaid bands: same widths, crossing the horizontal ones */
    repeating-linear-gradient(
      to right,
      transparent 0px,
      transparent 40px,
      rgba(245, 201, 218, 0.28) 40px,
      rgba(245, 201, 218, 0.28) 72px,
      transparent 72px,
      transparent 200px,
      rgba(250, 243, 226, 0.55) 200px,
      rgba(250, 243, 226, 0.55) 210px,
      transparent 210px,
      transparent 240px
    ),
    /* faint diagonal weave texture, uniform across the whole background */
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 2px,
      transparent 2px,
      transparent 10px
    );
}

.checkerboard {
  height: 22px;
  flex-shrink: 0;
  background-color: var(--white);
  background-image: conic-gradient(
    var(--ink) 25%,
    var(--white) 0 50%,
    var(--ink) 0 75%,
    var(--white) 0
  );
  background-size: 22px 22px;
}

.cafe-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
}

.menu-panel {
  position: relative;
  width: min(92vw, 380px);
  margin: 44px auto 24px;
  background: linear-gradient(180deg, #fffaf3, var(--cream));
  border: 2px solid var(--soft-pink);
  border-radius: 20px;
  padding: 40px 22px 26px;
  box-shadow:
    0 14px 30px rgba(43, 43, 43, 0.18),
    0 2px 6px rgba(43, 43, 43, 0.1);
  text-align: center;
  transform-origin: top center;
}

@keyframes menu-sway {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-1.5deg);
  }
  35% {
    transform: rotate(1.2deg);
  }
  55% {
    transform: rotate(-0.7deg);
  }
  75% {
    transform: rotate(0.4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .menu-panel {
    animation: menu-sway 1.8s ease-out 1;
  }

  .menu-panel:hover {
    animation: menu-sway 1.2s ease-in-out 1;
  }
}

.menu-panel__hanger {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.menu-item__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: var(--white);
  border: 2px solid var(--soft-pink);
  border-radius: 16px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 3px 8px rgba(43, 43, 43, 0.12);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

a.menu-item__link:hover {
  background: #fff6fa;
  box-shadow: 0 7px 16px rgba(43, 43, 43, 0.18);
  transform: translateY(-2px);
}

a.menu-item__link:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

a.menu-item__link:active {
  background: #ffeef5;
  box-shadow: 0 2px 4px rgba(43, 43, 43, 0.12);
  transform: translateY(0) scale(0.98);
}

.menu-item__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
}

.menu-item__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.menu-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-item__name {
  font-weight: 700;
  font-size: 1rem;
}

.menu-item__desc {
  font-size: 0.8rem;
  opacity: 0.75;
}

.menu-item--soon .menu-item__link {
  background: var(--pastel-blue);
  border-style: dashed;
  opacity: 0.88;
  cursor: not-allowed;
}

.menu-item__badge {
  position: absolute;
  top: -10px;
  right: 10px;
  background: var(--soft-pink);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(43, 43, 43, 0.15);
}

@media (max-width: 380px) {
  .menu-panel {
    padding: 32px 16px 20px;
  }

  .menu-item__icon {
    width: 40px;
    height: 40px;
  }
}