:root {
  --wine: #5a0018;
  --wine-deep: #3c0010;
  --cream: #f3efe7;
  --cream-soft: #e8e0d5;
  --paper-white: #fffdf8;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--wine-deep); color: var(--wine); font-family: Arial, Helvetica, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 34px;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035) 25%, transparent 25%) 0 0 / 52px 52px,
    var(--wine-deep);
}

.site-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 50% 0 0;
  background: var(--cream-soft);
}

.background-star {
  position: absolute;
  z-index: -1;
  color: rgba(255, 253, 248, 0.1);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
}

.star-one { top: 4%; left: 6%; font-size: clamp(78px, 11vw, 160px); transform: rotate(13deg); }
.star-two { right: 7%; bottom: 2%; color: rgba(90, 0, 24, 0.12); font-size: clamp(90px, 13vw, 190px); transform: rotate(-10deg); }

.menu-card {
  width: min(100%, 430px);
  min-height: min(780px, calc(100svh - 68px));
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(320px, 44%) 1fr;
  border: 1px solid rgba(255, 253, 248, 0.58);
  border-radius: 30px;
  background: var(--cream);
  box-shadow: 0 30px 100px rgba(28, 0, 8, 0.38);
}

.brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 34px 30px 26px;
  background: var(--wine);
  color: var(--paper-white);
}

.brand-panel::before,
.brand-panel::after {
  content: "✦";
  position: absolute;
  color: rgba(255, 253, 248, 0.2);
  font-family: Georgia, "Times New Roman", serif;
}

.brand-panel::before { top: 48px; left: 38px; font-size: 17px; }
.brand-panel::after { right: 34px; bottom: 42px; font-size: 25px; }

.brand-kicker,
.brand-city {
  margin: 0;
  text-transform: uppercase;
}

.brand-kicker {
  position: absolute;
  top: 27px;
  left: 50%;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.32em;
  transform: translateX(-50%);
  white-space: nowrap;
}

.brand-logo {
  width: clamp(132px, 39vw, 168px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(32, 0, 9, 0.16));
}

.brand-rule {
  display: grid;
  grid-template-columns: 34px auto 34px;
  align-items: center;
  gap: 11px;
  width: max-content;
  margin-top: -28px;
  color: var(--paper-white);
}

.brand-rule span { display: block; height: 1px; background: rgba(255, 253, 248, 0.64); }
.brand-rule b { font-family: Georgia, "Times New Roman", serif; font-size: 10px; font-weight: 400; }

.brand-city {
  margin-top: 12px;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.34em;
  transform: translateX(0.17em);
}

.selector-panel {
  position: relative;
  min-height: 0;
  padding: 35px 34px 30px;
  background: var(--cream);
}

.selector-panel::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(90, 0, 24, 0.11);
  pointer-events: none;
}

.view-stack { position: relative; min-height: 335px; }
.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease, transform 470ms cubic-bezier(0.22, 1, 0.36, 1);
}

.show-locations .location-view,
.show-languages .language-view,
.show-menus .menus-view { opacity: 1; pointer-events: auto; transform: translateX(0); }
.show-languages .location-view,
.show-menus .location-view,
.show-menus .language-view { transform: translateX(-24px); }
.show-locations .language-view,
.show-locations .menus-view,
.show-languages .menus-view { transform: translateX(24px); }

.prompt {
  margin: 0 0 23px;
  color: var(--wine);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 7vw, 31px);
  font-weight: 400;
  line-height: 1.04;
  text-align: center;
}

.prompt::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: 16px auto 0;
  background: var(--wine);
}

.button-list { display: grid; gap: 10px; }
.location-button-list { gap: 13px; }
.choice-button {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border: 1px solid var(--wine);
  border-radius: 999px;
  background: transparent;
  color: var(--wine);
  cursor: pointer;
  font: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  text-align: left;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.choice-button:hover,
.choice-button:focus-visible {
  background: var(--wine);
  color: var(--paper-white);
  outline: none;
}

.choice-button:active { transform: scale(0.985); }
.button-star { font-family: Georgia, "Times New Roman", serif; font-size: 10px; }
.location-button { min-height: 68px; font-size: 15px; line-height: 1.15; }
.location-button > span:first-child { max-width: 90%; }
.menu-button-list { gap: 13px; }
.menu-button-list .choice-button { min-height: 64px; font-size: 18px; }

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px auto 0;
  padding: 7px;
  border: 0;
  background: transparent;
  color: rgba(90, 0, 24, 0.68);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.back-button:hover,
.back-button:focus-visible { color: var(--wine); outline: none; }

@media (max-width: 520px) {
  .site-shell { padding: 0; background: var(--wine); }
  .site-shell::before, .background-star { display: none; }
  .menu-card {
    width: 100%;
    min-height: 100svh;
    grid-template-rows: minmax(315px, 43svh) 1fr;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .brand-panel { padding-top: max(40px, env(safe-area-inset-top)); }
  .selector-panel { padding: 30px 30px max(28px, env(safe-area-inset-bottom)); }
  .view-stack { min-height: min(360px, calc(57svh - 58px)); }
}

@media (max-height: 690px) {
  .menu-card { grid-template-rows: minmax(265px, 40%) 1fr; }
  .brand-logo { width: 126px; }
  .brand-rule { margin-top: -24px; }
  .selector-panel { padding-top: 24px; padding-bottom: 22px; }
  .view-stack { min-height: 285px; }
  .prompt { margin-bottom: 16px; font-size: 24px; }
  .choice-button { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}