/* Only changed states live here. The default four tabs show the source PNGs untouched.
   Coordinates are percentages of the 1708 × 3684 screenshot stage; cqw is based on
   .stage { container-type: inline-size }, so text and strokes scale with the image. */

#dynamic-root [hidden] { display: none !important; }

.x-package-patches { position: absolute; z-index: 3; left: 3.68%; top: 25.25%; width: 92.63%; height: 54.65%; display: flex; flex-direction: column; gap: 1.7cqw; background: #080402; pointer-events: auto; }
.x-package-card { position: relative; min-height: 0; flex: 1; display: grid; grid-template-columns: 43% minmax(0,1fr); overflow: hidden; border: .13cqw solid #d49a4d; border-radius: 2.4cqw; background: radial-gradient(circle at 100% 0,rgba(112,54,18,.34),transparent 48%),linear-gradient(135deg,#211006,#0d0603 76%); }
.x-package-card > img { width: 100%; height: 100%; object-fit: cover; border-right: .1cqw solid rgba(220,167,84,.32); }
.x-package-copy { min-width: 0; padding: 3.1cqw 2.7cqw 2.2cqw; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.x-package-copy strong,.x-package-copy span,.x-package-copy small,.x-package-copy em { display: block; }
.x-package-copy strong { color: #ffe0a0; font: 700 3.65cqw/1.25 "Songti SC",serif; }
.x-package-copy span { margin-top: 1cqw; overflow: hidden; color: #eadfce; font-size: 2.55cqw; text-overflow: ellipsis; white-space: nowrap; }
.x-package-copy small { margin-top: .65cqw; color: #9f8b76; font-size: 2.05cqw; }
.x-package-copy em { position: absolute; left: 46%; bottom: 2.1cqw; color: #f7cc7c; font: 4.7cqw/1 Georgia,serif; font-style: normal; }
.x-package-buy { position: absolute; right: 2.2cqw; bottom: 1.75cqw; width: 14cqw; height: 6.1cqw; border: .1cqw solid #e7b562; border-radius: 3.2cqw; background: rgba(13,7,4,.86); color: #f5d28c; font-size: 2.55cqw; cursor: pointer; }
.x-package-empty { flex: 1; display: grid; place-items: center; border: .13cqw solid rgba(220,167,84,.45); border-radius: 2.4cqw; color: #a9957f; font-size: 3.2cqw; }

/* Category filter: replaces only the category strip and menu panel after a filter
   other than 全部 is chosen. The original screenshot stays intact underneath. */
.x-menu-filter {
  position: absolute;
  z-index: 2;
  left: 3.55%;
  top: 24.38%;
  width: 92.9%;
  height: 57.38%;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  color: #f6e2b9;
  font-family: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

.x-filter-tabs {
  flex: none;
  height: 8.3%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: .72cqw;
  padding-top: .32cqw;
  background: #050302;
}

.x-filter-tab {
  width: 100%;
  height: 7.6cqw;
  padding: 0;
  display: grid;
  place-items: center;
  border: .1cqw solid rgba(228, 192, 139, .65);
  border-radius: 4.2cqw;
  outline: none;
  background: linear-gradient(140deg, #150b06, #0a0604 68%);
  box-shadow: inset 0 0 .42cqw rgba(255, 206, 116, .06);
  color: #f8e7c8;
  font-family: inherit;
  font-size: 3.15cqw;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease;
}
.x-filter-tab:is(.active, .is-active, .selected, [aria-selected="true"]) {
  border-color: #ffe29b;
  background: linear-gradient(145deg, #ffeca8 0%, #e7a553 44%, #bd742b 100%);
  box-shadow: inset 0 .12cqw .18cqw rgba(255, 255, 235, .65), 0 0 .6cqw rgba(255, 188, 70, .42);
  color: #110803;
}
.x-filter-tab:active { transform: scale(.965); }
.x-filter-tab:focus-visible { outline: .18cqw solid #fff4c1; outline-offset: .18cqw; }

.x-filter-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
  border: .13cqw solid #cf984d;
  border-radius: 2.65cqw;
  padding: 2.6cqw 2.65cqw 1.5cqw;
  background:
    radial-gradient(ellipse 61% 27% at 98% 0%, rgba(108, 54, 19, .24), transparent 80%),
    radial-gradient(ellipse 34% 45% at 6% 5%, rgba(126, 64, 20, .18), transparent 78%),
    repeating-linear-gradient(128deg, transparent 0 .22cqw, rgba(200, 125, 45, .018) .22cqw .28cqw, transparent .28cqw .7cqw),
    linear-gradient(130deg, #221005, #0d0603 76%);
  box-shadow: inset 0 0 1.3cqw rgba(0, 0, 0, .48);
}
.x-filter-body::-webkit-scrollbar { display: none; }
.x-filter-heading {
  min-height: 6.25cqw;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  color: #ffe2a4;
  font-family: inherit;
  font-size: 4.05cqw;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
  text-shadow: 0 .15cqw .18cqw #000;
}
.x-filter-heading::after {
  content: "";
  flex: 1;
  height: .1cqw;
  background: linear-gradient(90deg, #f2d19a, #c78c43);
}

.x-filter-product {
  min-height: 25.9cqw;
  display: grid;
  grid-template-columns: 29.2cqw minmax(0, 1fr) 6.6cqw;
  align-items: center;
  gap: 2.4cqw;
  border-bottom: .1cqw solid #b6833e;
}
.x-filter-product:last-child { border-bottom: 0; }
.x-filter-photo {
  width: 29.2cqw;
  height: 22.8cqw;
  display: block;
  overflow: hidden;
  border: .1cqw solid #b98943;
  border-radius: 1.6cqw;
  background-color: #1d0e06;
  background-image: url("./assets/screens/menu.png");
  background-repeat: no-repeat;
  background-size: 100cqw auto;
  background-position: -7.36cqw -73.3cqw;
  box-shadow: inset 0 0 .3cqw rgba(0, 0, 0, .45);
}
.x-filter-photo:is([data-product="whiskey"], [data-id="whiskey"], .whiskey) { background-position: -7.36cqw -73.3cqw; }
.x-filter-photo:is([data-product="beer"], [data-id="beer"], .beer) { background-position: -7.36cqw -98.95cqw; }
.x-filter-photo:is([data-product="fries"], [data-id="fries"], .fries) { background-position: -7.36cqw -124.94cqw; }
.x-filter-photo:is([data-product="soda"], [data-id="soda"], .soda) { background-position: -7.36cqw -151.17cqw; }
.x-filter-photo:is(img) { object-fit: cover; }
.x-filter-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.x-filter-info { min-width: 0; align-self: center; }
.x-filter-name {
  display: block;
  margin: 0 0 .65cqw;
  color: #ffe0a0;
  font-family: inherit;
  font-size: 4.25cqw;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: .035em;
  white-space: nowrap;
  text-shadow: 0 .15cqw .24cqw #000;
}
.x-filter-subtitle {
  display: block;
  color: #f5efdf;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 2.75cqw;
  line-height: 1.4;
}
.x-filter-price {
  display: block;
  margin-top: .85cqw;
  color: #f6ca7b;
  font-family: Georgia, "Songti SC", serif;
  font-size: 4.45cqw;
  line-height: 1;
  letter-spacing: -.04em;
  text-shadow: 0 .08cqw .18cqw #000;
}
.x-filter-add {
  width: 6.55cqw;
  height: 6.55cqw;
  display: grid;
  place-items: center;
  padding: 0 0 .4cqw;
  border: .21cqw solid #f1c573;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #231006, #090605 74%);
  box-shadow: inset 0 0 0 .12cqw #754a29;
  color: #f9cf83;
  font-family: Arial, sans-serif;
  font-size: 5.1cqw;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
.x-filter-add:active { transform: scale(.88); }
.x-filter-add:focus-visible { outline: .2cqw solid #fff3b9; outline-offset: .25cqw; }
.x-filter-add.sold-out { width: 8.2cqw; border-color: #725943; border-radius: 4cqw; color: #9b8874; font-size: 2.2cqw; }

/* Bottom cart readout. Hide this whole element while count=0 to reveal the
   original pixels. On change, the near-black footer is covered locally. */
.x-cart-patch {
  position: absolute;
  left: 19.1%;
  top: 83.78%;
  width: 41.4%;
  height: 3.95%;
  display: flex;
  align-items: center;
  z-index: 3;
  pointer-events: none;
  color: #f1e9db;
  -webkit-font-smoothing: antialiased;
}
.x-cart-patch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, #0c0907, #0b0806 55%, #0c0907);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.x-cart-count,
.x-cart-total { position: relative; z-index: 1; white-space: nowrap; }
.x-cart-count {
  width: 49%;
  padding-left: 2.7%;
  color: #f2eee8;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 3.35cqw;
  line-height: 1;
}
.x-cart-total {
  color: #f2bf6d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 6.1cqw;
  line-height: 1;
  letter-spacing: -.035em;
  text-shadow: 0 .08cqw .18cqw #000;
}

/* Profile card counters. Texture patches sample blank leather from inside the
   same original card. They appear only when the stored values differ from 0. */
.x-wallet-patch,
.x-vouchers-patch {
  position: absolute;
  z-index: 3;
  top: 37.38%;
  height: 5.22%;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: #f5bf69;
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  text-shadow: 0 .12cqw .18cqw #170803, .08cqw .05cqw 0 #7b411a;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}
.x-wallet-patch::before,
.x-vouchers-patch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("./assets/screens/my.png");
  background-repeat: no-repeat;
  background-size: 100cqw auto;
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at center, #000 61%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 78% at center, #000 61%, transparent 100%);
}
.x-wallet-patch {
  left: 10.8%;
  width: 35.9%;
  padding-left: 2.1%;
  font-size: 7.1cqw;
  letter-spacing: -.045em;
}
.x-wallet-patch::before { background-position: -18.74cqw -93.1cqw; }
.x-vouchers-patch {
  left: 55.2%;
  width: 20.9%;
  justify-content: center;
  font-size: 7.15cqw;
  letter-spacing: -.04em;
}
.x-vouchers-patch::before { background-position: -21.1cqw -93.1cqw; }
.x-wallet-patch:is(.is-long, [data-size="long"]) { font-size: 5.6cqw; }
.x-vouchers-patch:is(.is-long, [data-size="long"]) { font-size: 5.8cqw; }
.x-wallet-patch small,
.x-vouchers-patch small { font-size: .6em; letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  .x-filter-tab,
  .x-filter-add { transition-duration: .01ms; }
}