/* V2 live customer order UI, promoted from QA after user requested activation. */
/* REVIEW MOCK ONLY — loaded by qa/order-ui-review-v1.cjs, not production CSS.
   Concept: four tidy, consistent order tickets; events live in a side rail. */
#game .order{
  top:111px!important;
  box-sizing:border-box;
  width:266px;
  min-height:205px;height:205px;
  padding:49px 64px 13px 14px;
  border:2px solid #b78853;
  border-radius:20px;
  background:linear-gradient(180deg,#fffdf4 0%,#fff5e6 100%);
  box-shadow:0 5px 0 #66412652,0 9px 18px #3721132b,inset 0 1px 0 #ffffff;
  font-family:Nunito,'Segoe UI',sans-serif;
  text-shadow:none;
}
#game .order.selected{
  border-color:#789747;
  box-shadow:0 0 0 3px #a5c86c66,0 5px 0 #587235,0 9px 18px #37211336;
}
#game .order.order-hidden{border-style:solid;background:linear-gradient(#fffdf4,#fef6e8)}
#game .order:before{
  left:calc(50% - 11px);bottom:-14px;height:19px;width:22px;
  background:#fff5e7;border-color:#b78853;
}
#game .order > .customer-name{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;
  box-sizing:border-box;width:100%;max-width:none;min-width:0;height:41px;
  padding:5px 11px;gap:8px;border:0;border-bottom:1px solid #e2c7a4;
  border-radius:17px 17px 0 0;
  background:linear-gradient(180deg,#fbebd0,#f8dfb6);
  box-shadow:inset 0 1px 0 #fffdf9;
  color:#50301b;font:850 17px/1.25 Nunito,'Segoe UI',sans-serif;
  text-align:left;transform:none;
}
#game .order > .customer-name:after{display:none}
#game .order > .customer-name .customer-name-number{
  flex:0 0 27px;height:27px;
  border:0;border-radius:8px;
  background:#f4c985;color:#70411c;
  box-shadow:inset 0 1px 0 #fff2d4;
  font:850 13px/1.25 Nunito,'Segoe UI',sans-serif;
}
#game .order > .customer-name .customer-name-label{
  max-width:138px;font:850 17px/1.25 Nunito,'Segoe UI',sans-serif;
}
#game .order.selected > .customer-name{
  border-bottom-color:#b7cd8a;
  background:linear-gradient(#f1f6df,#dfedc2);
  box-shadow:inset 0 1px 0 #fff;
}
#game .order.selected > .customer-name .customer-name-number{background:#78994b;color:white}
#game .order.selected > .customer-name .customer-name-label{max-width:112px}
#game .order.selected::after{
  content:'● ĐANG PHA';display:block;
  position:absolute;left:auto;right:9px;top:12px;bottom:auto;
  padding:4px 7px;border:0;border-radius:7px;
  background:#638a3f;color:#fffdf4;
  box-shadow:none;
  letter-spacing:.1px;font:900 12px/1.25 Nunito,'Segoe UI',sans-serif;
  pointer-events:none;z-index:5;
}
#game .order.selected:has(.customer-name-label)::after{white-space:nowrap}
#game .order .order-text{min-height:0;font-family:Nunito,'Segoe UI',sans-serif}
#game .order .order-lead{font-size:13px;line-height:1.25;color:#74573c}
#game .order .order-dish{
  margin-top:4px;font:950 22px/1.15 Nunito,'Segoe UI',sans-serif;
  letter-spacing:0;color:#563016;text-shadow:none;
}
#game .order .order-tail{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:5px;margin-top:8px;
  font:800 12px/1.25 Nunito,'Segoe UI',sans-serif;color:#765232;
}
/* Colored *values*, not a colorful card: the eye should grab recipe first,
   then restrictions, size and syrup flavor without rereading a sentence. */
#game .order .order-attribute{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:26px;padding:4px 8px 5px;
  border:1.5px solid transparent;border-radius:7px;
  font:900 13px/1.25 Nunito,'Segoe UI',sans-serif;
  letter-spacing:.15px;white-space:nowrap;
  box-shadow:inset 0 1px 0 #ffffffb3;
}
#game .order .order-attribute--restriction{
  color:#a5472c;background:#fce9df;border-color:#e8b09b;
}
#game .order .order-attribute--size{
  color:#216b75;background:#dcf1f3;border-color:#9bcbd0;
}
#game .order .order-attribute--flavor{
  color:#884c0b;background:#fff0cb;border-color:#e7be70;
}
#game .order .order-attribute--flavor[data-flavor="dau"]{
  color:#a73760;background:#fce2eb;border-color:#e7a7bf;
}
#game .order .order-attribute--flavor[data-flavor="samdua"]{
  color:#42753c;background:#e4f1dc;border-color:#b2d2a7;
}
#game .order .order-attribute--flavor[data-flavor="nho"]{
  color:#76529c;background:#eee3f7;border-color:#cfb2e2;
}
#game .order .order-attribute--flavor[data-flavor="chanh"]{
  color:#6e5a13;background:#f7efcc;border-color:#dacc86;
}
#game .order .order-attribute--normal{
  color:#695338;background:#f7edda;border-color:#dec5a0;
}
#game .order .order-icon{top:51px;right:7px;width:57px;height:78px}
#game .order .order-icon canvas{display:block;width:100%;height:100%;object-fit:contain}
#game .order .patience{
  position:absolute;left:13px;bottom:13px;
  width:calc(100% - 26px);height:10px;margin:0;
  border:1px solid #a58b6a;border-radius:9px;
  background:#ecd6b5;
  box-shadow:inset 0 1px 2px #aa88626e;
}
#game .order .patience i{background:linear-gradient(90deg,#789d59,#a9cb7a)}
#game .order .order-social-actions{
  position:absolute;bottom:35px;left:13px;right:13px;
  display:flex;justify-content:center;align-items:center;
  flex-wrap:wrap;width:auto;max-width:none;
  margin:0;gap:6px;padding:0;
}
#game .order .order-social-actions[hidden]{display:none!important}
#game .order .order-social-actions button{
  min-height:34px;padding:6px 12px;
  border:1px solid #a88453;border-radius:9px;
  background:linear-gradient(#fff8ed,#f5e0bc);
  box-shadow:0 2px 0 #b28e5e;color:#65411f;
  font:850 13px/1.25 Nunito,'Segoe UI',sans-serif;
}
#game .order .order-social-actions button[data-social-guess]{
  border-color:#8caa61;background:linear-gradient(#f0f6df,#deedc5);color:#4f7136;
}
#game .order .guess-eyebrow{
  font:900 12px/1.25 Nunito,'Segoe UI',sans-serif;
  color:#68843b;letter-spacing:1px;
}
#game .order .guess-mystery{font:900 21px/1.17 Nunito,'Segoe UI',sans-serif;color:#583519;margin-top:5px}
#game .order .guess-note{font:700 12px/1.25 Nunito,'Segoe UI',sans-serif;color:#6d5740;margin-top:5px;white-space:normal}
#game .order.order-hidden .order-icon{opacity:.22}
#game .order.order-hidden .order-text{min-height:0}
#game .order:has(.order-social-actions:not([hidden])){padding-bottom:13px}
/* Dedicated 212px sidebar, wholly to the left of the first customer card. */
#game .rush-panel{
  left:16px!important;top:121px!important;bottom:auto!important;
  width:189px!important;min-width:0!important;height:75px!important;
  padding:10px 11px!important;
  display:grid;grid-template-columns:28px 1fr auto;gap:6px;
  border:1.5px solid #c8a875;border-radius:14px;
  background:linear-gradient(#fff8e9,#f6e5c9);
  color:#674526;
  box-shadow:0 3px 0 #996d42,0 7px 15px #422b1933;
  transform:none!important;
}
#game .rush-panel>span{font-size:21px}
#game .rush-panel>div{gap:2px}
#game .rush-panel small{font:800 12px/1.25 Nunito,'Segoe UI',sans-serif;letter-spacing:0;color:#725131}
#game .rush-panel b{font:900 15px/1.25 Nunito,'Segoe UI',sans-serif;color:#65401e}
#game .rush-panel>strong{font:900 15px/1.25 Nunito,'Segoe UI',sans-serif;color:#864e1d;min-width:25px}
#game #staff-active-status{
  position:absolute!important;left:16px!important;top:211px!important;
  width:189px!important;max-width:189px!important;min-height:56px!important;
  border:1.5px solid #c8a875!important;border-radius:14px!important;
  background:linear-gradient(#fffaed,#f6e4c8)!important;
  padding:10px 12px!important;
  box-shadow:0 3px 0 #996d42,0 7px 15px #422b192e!important;
  color:#674526!important;
  font:800 14px/1.3 Nunito,'Segoe UI',sans-serif!important;
  text-align:left!important;
}
#game .rush-panel[hidden]{display:none!important}

/* V2 review layer only. Keep V1 intact for visual comparisons. */
#game .order{
  top:111px!important;
  height:196px!important;min-height:196px!important;
  padding:0!important;border:1px solid #ddc9a9!important;
  border-radius:16px!important;
  background:#fffaf1!important;
  box-shadow:0 3px 10px #41291424,inset 0 1px #fff!important;
  overflow:visible;
}
#game .order.selected{
  border:1px solid #a3bd84!important;
  box-shadow:0 0 0 1px #91af7766,0 3px 11px #4129142a!important;
}
#game .order:before{
  left:calc(50% - 8px);bottom:-10px;width:16px;height:14px;
  border-left:1px solid #ddc9a9;border-bottom:1px solid #ddc9a9;
  background:#fffaf1;box-shadow:none;
}
#game .order > .customer-name{
  height:36px!important;padding:4px 10px!important;
  gap:7px;border-bottom:1px solid #e9dbc5!important;
  border-radius:15px 15px 0 0!important;
  background:#f8ebd6!important;box-shadow:none!important;
  color:#5c3e2a;font:800 16px/1.25 Nunito,'Segoe UI',sans-serif;
}
#game .order > .customer-name .customer-name-number{
  flex-basis:24px;width:24px;height:24px;
  border:0;border-radius:6px;background:#e9c99a;
  color:#76502b;font:800 12px/1.25 Nunito,'Segoe UI',sans-serif;
  box-shadow:none;
}
#game .order > .customer-name .customer-name-label{
  max-width:141px;font:850 16px/1.25 Nunito,'Segoe UI',sans-serif;
}
#game .order.selected > .customer-name{
  background:#eaf1db!important;border-bottom-color:#d5e3c2!important;
}
#game .order.selected > .customer-name .customer-name-number{
  background:#83a36c;color:#fff;
}
#game .order.selected > .customer-name .customer-name-label{max-width:116px}
#game .order.selected::after{
  top:10px;right:9px;left:auto;
  padding:3px 6px;border:0;border-radius:5px;
  background:#7d9e64;color:#fff;
  font:900 12px/1.25 Nunito,'Segoe UI',sans-serif;
  letter-spacing:0;box-shadow:none;
}
/* Every order has the SAME six vertical bands:
   title | lead | recipe | modifiers | interaction | waiting bar. */
#game .order .order-text{
  position:absolute;top:39px;left:12px;right:12px;
  display:grid;grid-template-rows:16px 44px 26px;
  row-gap:3px;align-items:center;justify-items:center;
  box-sizing:border-box;height:92px;min-height:0;
  margin:0;padding:0;
  text-align:center;
}
#game .order .order-lead{
  width:calc(100% - 58px);margin:0 58px 0 0;
  color:#6c5741;font:750 12px/1.25 Nunito,'Segoe UI',sans-serif;
}
#game .order .order-dish{
  display:flex;align-items:center;justify-content:center;
  width:calc(100% - 58px);height:44px;
  margin:0 58px 0 0;
  color:#57351e;font:950 20px/1.15 Nunito,'Segoe UI',sans-serif;
  letter-spacing:0;text-shadow:none;text-wrap:balance;
}
#game .order .order-tail{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:nowrap;gap:5px;
  width:100%;height:26px;margin:0;
  font:850 12px/1.25 Nunito,'Segoe UI',sans-serif;
}
#game .order .order-attribute{
  min-height:23px;padding:4px 7px;
  border-width:1px;border-radius:6px;box-shadow:none;
  font:900 12px/1.25 Nunito,'Segoe UI',sans-serif;
}
#game .order .order-icon{
  top:42px;right:8px;width:55px;height:72px;
}
#game .order .guess-eyebrow{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:16px;margin:0;color:#75905f;
  font:900 12px/1.25 Nunito,'Segoe UI',sans-serif;
}
#game .order .guess-mystery{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:44px;margin:0;color:#583923;
  font:900 20px/1.15 Nunito,'Segoe UI',sans-serif;
}
#game .order .guess-note{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:26px;margin:0;color:#6d5943;
  font:750 12px/1.25 Nunito,'Segoe UI',sans-serif;
  white-space:normal;
}
#game .order .order-social-actions{
  position:absolute;top:140px;bottom:auto;left:12px;right:12px;
  width:auto;height:30px;margin:0;gap:5px;
  display:flex;justify-content:center;align-items:center;
}
#game .order .order-social-actions button{
  min-height:29px;height:29px;padding:4px 10px;
  border:1px solid #d1b692;border-radius:7px;
  background:#faf0de;box-shadow:none;
  color:#725235;font:850 12px/1.25 Nunito,'Segoe UI',sans-serif;
}
#game .order .order-social-actions button[data-social-guess]{
  border-color:#c4d6a5;background:#edf5df;color:#608044;
}
#game .order .patience{
  position:absolute;left:12px;right:12px;bottom:12px;
  width:auto;height:8px;margin:0;
  border:1px solid #d7c5a8;border-radius:99px;
  background:#eee3cf;box-shadow:none;
}
#game .order .patience i{
  border-radius:99px;background:#94b975;
}
#game .rush-panel{
  border:1px solid #dfcba8!important;border-radius:10px!important;
  background:#fff7e9!important;
  box-shadow:0 3px 8px #4129141b!important;
}
#game #staff-active-status{
  border:1px solid #dfcba8!important;border-radius:10px!important;
  background:#fff7e9!important;
  box-shadow:0 3px 8px #4129141b!important;
}

/* Preserve original customer-row geometry in the first, small counter. */
#game:not(.expanded) .order{top:128px!important;width:284px!important;height:196px!important;min-height:196px!important}
/* Long special requests may wrap without losing accessibility. */
#game .order .order-tail{gap:4px}
#game .order .order-attribute{white-space:nowrap}
#game .order .order-text:not(:has(.order-lead)):not(:has(.guess-eyebrow)){
  display:flex;align-items:center;justify-content:center;
  color:#69452c;font:800 17px/1.28 Nunito,'Segoe UI',sans-serif;
}
#game .order .order-social-actions[hidden],#game .rush-panel[hidden],#game #staff-active-status[hidden]{display:none!important}
/* Three simultaneous requirements must remain inside one compact row. */
#game .order .order-tail:has(> .order-attribute:nth-child(3)){gap:3px}
#game .order .order-tail:has(> .order-attribute:nth-child(3)) .order-attribute{font-size:12px;padding:4px 5px;letter-spacing:0}