:root{
  --bg:#0F1117; --surface:#171A22; --card:#1E2330; --line:#273044;
  --text:#EEF1F8; --muted:#9AA4B8; --accent:#FF6B35; --accent2:#4FC3F7;
  --radius:16px; --radius-sm:10px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
html{scrollbar-gutter:stable}
body{
  background: #0F1117;
  color:var(--text);
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#app{
  width:100dvw; height:100dvh;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  overflow:hidden; position:relative;
}
/* Full-screen kitchen */
#canvasWrap{
  position:relative; width:100%; height:100%;
  background: var(--surface); overflow:hidden;
}
#scene{ display:block; width:100%; height:100%; touch-action:none; user-select:none; -webkit-user-select:none; }
.hint{
  position:absolute; left:50%; bottom:92px; transform:translateX(-50%);
  background: rgba(15,17,23,0.88); border:1px solid var(--line); padding:8px 12px; border-radius:999px;
  font-size:12px; color:var(--muted); white-space:nowrap; pointer-events:none;
  backdrop-filter: blur(6px); z-index:5;
}

/* Compact floating HUD */
#hudTop{
  position:absolute; top:12px; left:12px; right:12px; z-index:6;
  display:flex; align-items:center; justify-content:space-between; gap:12px; pointer-events:none;
  padding-top: env(safe-area-inset-top);
}
#hudBottom{
  position:absolute; bottom:12px; left:12px; right:12px; z-index:6;
  display:flex; align-items:center; justify-content:space-between; gap:12px; pointer-events:none;
  padding-bottom: env(safe-area-inset-bottom);
}
.hudBottomLeft{ display:flex; gap:10px; align-items:center}
.hudIcon{
  pointer-events:auto;
  appearance:none; border:1px solid #2A3650; background: rgba(30,35,48,0.92);
  color:var(--text); backdrop-filter: blur(8px);
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; font-weight:700; font-size:12px; cursor:pointer;
  touch-action:manipulation; min-height:40px; min-width:44px; justify-content:center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  transition: transform 120ms, border-color 120ms;
}
.hudIcon:hover{ border-color:#3A4A66; transform: translateY(-1px)}
.hudIcon:active{ transform: translateY(0)}
.hudIconGlyph{ font-size:16px; line-height:1}
.hudIconLabel{ font-size:12px}
.hudBadge{ background:#0F1117; border:1px solid var(--line); padding:2px 7px; border-radius:999px; font-size:10px; color:var(--muted)}
.hudPill{
  pointer-events:none;
  background: rgba(42,31,26,0.92); border:1px solid #FF6B3540; color:#FFE6D9;
  padding:8px 14px; border-radius:999px; font-weight:800; font-size:12px; backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.countPill{font-size:12px; background: var(--card); border:1px solid var(--line); padding:6px 10px; border-radius:999px; color:var(--muted)}
.countPill.accent{ color:#FFE6D9; border-color:#FF6B3540; background:#2A1F1A }
.miniCount{ background:#0F1117; border:1px solid var(--line); padding:2px 6px; border-radius:999px; font-size:10px; margin-left:4px; color:var(--muted)}
.btn{
  appearance:none; border:1px solid #FF6B35; background:#FF6B35; color:white;
  padding:7px 12px; border-radius:999px; font-weight:700; font-size:12px; cursor:pointer;
  touch-action:manipulation; min-height:34px;
}
.btn.ghost{ background: transparent; color:var(--muted); border-color:var(--line)}
.btn.small{padding:6px 10px; min-height:30px}

/* Compact Ingredients Tray — narrow preparation shelf */
#ingredientsTray{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  z-index:5; width:min(680px, 92dvw); max-width:92dvw;
  background: rgba(23,26,34,0.92); border:1px solid #2A3650; border-radius:14px;
  backdrop-filter: blur(10px); box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  padding:6px 8px 8px; display:flex; flex-direction:column; gap:6px;
}
.trayHandle{
  display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; color:var(--muted);
  padding:2px 4px;
}
.trayTitle{ color:var(--text); letter-spacing:0.3px}
.trayHint{ margin-left:auto; font-weight:400; font-size:10px; opacity:0.7}
.trayActions{ display:flex; gap:6px; margin-left:6px}
.trayBtn{
  appearance:none; border:1px solid var(--line); background: var(--card); color:var(--muted);
  width:26px; height:26px; border-radius:50%; font-size:12px; cursor:pointer; display:grid; place-items:center;
}
.trayBtn.ghost{ background: transparent}
#trayScroll{ overflow:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
#trayGrid{
  display:flex; gap:8px; overflow:auto; padding:2px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling:touch;
}
#trayGrid .pcard{
  flex:0 0 96px; min-width:96px; scroll-snap-align:start;
  min-height:78px; padding:6px;
}
#trayGrid .pcard .thumb{ height:42px}
#trayGrid .pcard .name{ font-size:10px}
#trayGrid .pcard .meta{ font-size:9px}
#trayGrid .emptyTray{
  width:100%; padding:14px; text-align:center; color:var(--muted); font-size:12px;
  border:1px dashed var(--line); border-radius:10px; background: rgba(0,0,0,0.12);
}

/* product card — shared for tray + fridge/store */
.pcard{
  position:relative; background: var(--card); border:1px solid var(--line); border-radius:14px;
  padding:8px; display:flex; flex-direction:column; gap:6px; cursor:pointer;
  touch-action:manipulation; user-select:none; -webkit-user-select:none;
  transition: border-color 120ms, transform 120ms, box-shadow 120ms;
  min-height:92px;
}
.pcard:hover{ border-color:#3A4A66 }
.pcard.selected{ border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,107,53,0.22), 0 8px 20px rgba(0,0,0,0.25); transform: translateY(-1px)}
.pcard.inTray{ border-color:#2E7D3240; background: linear-gradient(180deg, #1E2A1E, #1E2330)}
.pcard .thumb{
  height:56px; background: radial-gradient(120px 60px at 50% 35%, rgba(255,255,255,0.07), transparent 70%), #0F131A;
  border-radius:10px; display:grid; place-items:center; overflow:hidden; position:relative;
}
.pcard .thumb canvas{ width:100%; height:100%; display:block }
.pcard .name{ font-size:11px; font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pcard .meta{ font-size:10px; color:var(--muted); display:flex; justify-content:space-between; gap:6px}
.badgeCat{ font-size:9px; letter-spacing:0.4px; text-transform:uppercase; background:#0F1117; border:1px solid var(--line); padding:2px 6px; border-radius:999px; color:var(--muted)}
.dotColor{ width:10px;height:10px;border-radius:50%; border:1px solid rgba(255,255,255,0.2)}
.pcard.added::after{
  content:"✓ on tray"; position:absolute; top:6px; right:6px; font-size:9px; font-weight:800; letter-spacing:0.4px;
  background:#2E7D32; color:white; padding:2px 6px; border-radius:999px;
}

/* Recipe & Menu floating cards */
.recipeCard, .menuCard{
  position:relative; background: linear-gradient(180deg, #1E2330, #171A22);
  border:1px solid #2A3650; border-radius:18px; box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  padding:18px; width:min(420px, 92dvw); max-height:86dvh; overflow:auto;
}
.recipeClose{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background: var(--surface); color:var(--muted); cursor:pointer; display:grid; place-items:center;
}
.recipeHead{ display:flex; align-items:center; gap:10px; margin-bottom:12px}
.recipeIcon{ font-size:22px}
.recipeHead h2{ margin:0; font-size:16px; letter-spacing:0.6px}
.recipeBadge{ font-size:10px; background:#1F2A44; border:1px solid var(--line); padding:3px 7px; border-radius:999px; color:var(--muted)}
.recipeBody h3{ margin:12px 0 6px; font-size:12px; letter-spacing:0.4px; color:var(--muted); text-transform:uppercase}
.recipeList{ list-style:none; margin:0; padding:0; display:grid; gap:8px}
.recipeList li{ display:flex; align-items:center; gap:8px; background: var(--surface); border:1px solid var(--line); padding:8px 10px; border-radius:10px; font-weight:700; font-size:12px}
.rDot{ width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,0.15)}
.recipeGoal{ background: var(--surface); border:1px dashed var(--line); padding:10px 12px; border-radius:10px; margin-top:8px}
.recipeGoal p{ margin:4px 0 0}
.menuCard h2{ margin:0 0 12px; font-size:16px}
.menuActions{ display:grid; gap:8px}
.muted{color:var(--muted)}
.small{font-size:12px}

/* Rotate overlay */
#rotateOverlay{
  position:fixed; inset:0; z-index:9999;
  background: radial-gradient(800px 600px at 50% 20%, #1F2A44, #0B0D12);
  display:none; align-items:center; justify-content:center; padding:24px; text-align:center;
}
.rotateCard{ background: var(--card); border:1px solid var(--line); border-radius:20px; padding:28px 22px; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.rotateIcon{ font-size:42px; margin-bottom:10px; animation: spin 2s linear infinite}
.rotateCard h2{margin:6px 0 8px}
.rotateCard p{margin:0; color:var(--muted); font-size:13px}
@keyframes spin{ to{ transform: rotate(360deg)}}

/* Overlays — fridge / store */
.overlay{
  position:fixed; inset:0; z-index:5000;
  background: rgba(8,10,14,0.72); backdrop-filter: blur(8px);
  display:none; align-items:center; justify-content:center;
  padding:14px; padding-top: calc(14px + env(safe-area-inset-top));
}
.overlay.open{ display:flex }
.overlayPanel{
  width:min(1120px, 96dvw); height:min(86dvh, 760px);
  background: linear-gradient(180deg, #1A2333 0%, #171A22 100%);
  border:1px solid #2A3650; border-radius:18px; box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  display:flex; flex-direction:column; overflow:hidden;
}
.overlayHead{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--line); background: rgba(23,26,34,0.88); flex-shrink:0;
}
.overlayTitle{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.overlayTitle h2{ margin:0; font-size:16px; letter-spacing:0.6px }
.overlayIcon{ font-size:22px }
.gridWrap{ overflow:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; flex:1; min-height:0; padding:12px; background: #0F131A }
.overlayGrid{ display:grid; gap:10px; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); }

/* Fridge specific */
.fridgePanel{ background: linear-gradient(180deg, #E8F0FE 0%, #1A2333 18%, #171A22 100%); }
.fridgeBody{ display:grid; grid-template-columns: 1fr 300px; flex:1; min-height:0; overflow:hidden }
.fridgeLeft{ display:flex; flex-direction:column; min-height:0; overflow:hidden; border-right:1px solid var(--line)}
.fridgeRight{ display:flex; flex-direction:column; min-height:0; background: var(--card); padding:12px; gap:10px }
.categoryTabs{ display:flex; gap:6px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid var(--line); background: rgba(255,255,255,0.02)}
.categoryTabs button{
  appearance:none; border:1px solid var(--line); background: var(--card); color:var(--muted);
  padding:6px 10px; border-radius:999px; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.categoryTabs button.active{ background:#FF6B35; color:white; border-color:#FF6B35 }
.fridgeSearchRow{ display:flex; gap:8px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--line)}
.fridgeSearchRow input, .storeFilters input, .storeFilters select{
  flex:1; background: var(--card); border:1px solid var(--line); color:var(--text);
  padding:7px 10px; border-radius:999px; font-size:12px; min-height:32px;
}
.basketHead{ display:flex; align-items:center; justify-content:space-between}
.basketHead h3{ margin:0; font-size:13px}
.basketList{ flex:1; overflow:auto; display:grid; gap:8px; align-content:start; min-height:80px }
.basketItem{
  display:flex; gap:8px; align-items:center; background: var(--surface); border:1px solid var(--line); border-radius:12px; padding:6px 8px;
}
.basketItem .biThumb{ width:44px; height:36px; border-radius:8px; background: #0F131A; display:grid; place-items:center; overflow:hidden; flex-shrink:0}
.basketItem .biName{ font-size:11px; font-weight:700; flex:1; line-height:1.2}
.basketItem button{ appearance:none; border:1px solid var(--line); background: transparent; color:var(--muted); width:24px; height:24px; border-radius:50%; cursor:pointer}
.basketFoot{ border-top:1px solid var(--line); padding-top:10px; display:grid; gap:6px}
.basketFoot .btn{ width:100%; justify-content:center; display:flex; align-items:center}
.basketFoot .btn:disabled{ opacity:0.45; filter:grayscale(0.3); cursor:not-allowed}

/* Store specific */
.storeBody{ display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden}
.storeFilters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line); background: rgba(255,255,255,0.02)}
.storeFoot{ display:flex; gap:10px; align-items:center; justify-content:center; padding:10px; border-top:1px solid var(--line); background: var(--surface)}
.overlayGrid .pcard .price{ font-size:11px; font-weight:800; color:#FFD54F }
.overlayGrid .pcard.owned{ border-color:#2E7D3240; background: linear-gradient(180deg, #1E2A1E, #1E2330); opacity:1 }
.overlayGrid .pcard.unaffordable{ opacity:1; filter:none; pointer-events:auto }
.overlayGrid .pcard .buyRow{ display:flex; gap:6px; margin-top:4px}
.overlayGrid .pcard .buyRow .btn{ flex:1; padding:6px 8px; font-size:11px; min-height:28px}
.overlayGrid .pcard .buyRow .btn:disabled{ opacity:0.5}
.storeFoot .btn:disabled{ opacity:0.35}

/* Responsive — compact tray + HUD */
@media (max-width: 860px){
  .overlayPanel{ width:96dvw; height:92dvh }
  .fridgeBody{ grid-template-columns: 1fr; grid-template-rows: 1fr 220px }
  .fridgeLeft{ border-right:none; border-bottom:1px solid var(--line)}
  .overlayGrid{ grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
}
@media (max-height: 520px) and (orientation: landscape){
  #ingredientsTray{ width:min(560px, 92dvw); bottom:8px}
  #trayGrid .pcard{ flex:0 0 84px; min-width:84px}
  .hint{ bottom:86px; font-size:11px; padding:6px 10px}
  #hudTop{ top:8px}
  #hudBottom{ bottom:8px}
  .hudIcon{ min-height:36px; padding:6px 10px}
  .overlayPanel{ height:94dvh }
  .overlayGrid{ grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .fridgeBody{ grid-template-columns: 1fr 260px; grid-template-rows: 1fr }
}
@media (max-width: 560px){
  #ingredientsTray{ width:96dvw}
  .hudIconLabel{ display:none}
  .trayHint{ display:none}
}
/* portrait blocker */
@media (orientation: portrait){
  #rotateOverlay{ display:flex }
  #app{ filter: blur(2px) brightness(0.6) }
}
/* touch target safety */
button, select, input, .pcard{ min-height: 32px }
.hudIcon, .trayBtn{ touch-action:manipulation; user-select:none; -webkit-user-select:none}


/* Prompt 03: only one ingredient source — physical Ingredients Tray on countertop.
   Hide the duplicate bottom square-icon Tray UI (HTML cards). Keep the physical 3D tray visible.
   The floating HTML shelf is hidden; the physical tray on the countertop is the only source. */
#ingredientsTray{ display:none !important; }
/* Keep tray count visible in HUD even when shelf hidden */
#hudTop #trayCount{ display:none }


/* Prompt 03: product identification label */
.productLabel{
  position:absolute; z-index:4; pointer-events:none; display:none;
  background: rgba(15,17,23,0.94); border:1px solid #2A3650; color:var(--text);
  padding:6px 8px; border-radius:10px; font-size:11px; line-height:1.2;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4); backdrop-filter: blur(6px);
  transform: translate(-50%, -110%);
  white-space:nowrap;
}
.productLabel.visible{ display:block}
.productLabel strong{ display:block; font-size:11px; letter-spacing:0.3px; text-transform:uppercase}
.productLabel span{ color:var(--muted); font-size:10px}

/* Context actions — small floating buttons near selected target */
.contextActions{
  position:absolute; z-index:4; display:none; gap:8px; flex-wrap:wrap;
  transform: translate(-50%, 8px);
}
.contextActions.visible{ display:flex}
.ctxBtn{
  appearance:none; border:1px solid #FF6B35; background: #FF6B35; color:white;
  padding:8px 12px; border-radius:999px; font-weight:800; font-size:11px; cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35); touch-action:manipulation; min-height:32px;
}
.ctxBtn.ghost{ background: rgba(30,35,48,0.92); color:var(--text); border-color:#2A3650; backdrop-filter: blur(6px)}
.ctxBtn:active{ transform: scale(0.98)}

/* Destination highlights — subtle rings */
.destHighlight{
  position:absolute; width:42px; height:42px; border:2px dashed #4FC3F7; border-radius:50%;
  background: rgba(79,195,247,0.12); pointer-events:none; display:none; z-index:3;
  transform: translate(-50%, -50%);
}
.destHighlight.valid{ display:block; border-color:#4CAF50; background: rgba(76,175,80,0.14)}
.destHighlight.invalid{ display:none}

/* Improve tool readability: ensure tools have distinct silhouettes already handled in kitchen.js */
/* Ensure tray not blocked — keep hint above tray */
#canvasWrap .hint{ bottom:92px}

/* New tool bar and hob controls */
.toolBar{
  position:absolute; top:60px; right:12px; z-index:6; display:flex; gap:6px; flex-direction:row;
  background: rgba(23,26,34,0.88); border:1px solid #2A3650; border-radius:999px; padding:6px 8px; backdrop-filter: blur(8px);
}
.toolIcon{
  appearance:none; border:1px solid var(--line); background: var(--card); color:var(--text);
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; cursor:pointer; font-size:16px;
}
.toolIcon.active{ border-color:#FF6B35; background:#FF6B35; color:white}
.hobControls{
  position:absolute; top:110px; right:12px; z-index:6; display:flex; flex-direction:column; gap:6px;
  background: rgba(23,26,34,0.92); border:1px solid #2A3650; border-radius:16px; padding:8px 10px; backdrop-filter: blur(10px);
  min-width: 194px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transition: border-color .2s, box-shadow .2s, opacity .2s;
}
.hobControls.is-off{ border-color:#28344d; opacity:0.96 }
.hobControls.is-on{ border-color:#FF6B35; box-shadow: 0 8px 28px rgba(255,107,53,0.22); }
.hobHead{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.hobLabel{ font-size:10px; color:var(--muted); font-weight:700; letter-spacing:0.5px; text-transform:uppercase; display:flex; align-items:center; gap:6px}
.hobLed{ width:8px; height:8px; border-radius:50%; background:#3a455c; box-shadow: 0 0 0 0 rgba(255,61,0,0); display:inline-block; transition: background .2s, box-shadow .2s, opacity .2s }
.hobControls.is-off .hobLed{ background:#3a455c; box-shadow:none; opacity:0.9 }
.hobControls.is-on .hobLed{ background:#FF3D00; box-shadow: 0 0 10px rgba(255,61,0,0.9), 0 0 18px rgba(255,61,0,0.5) }
.hobPowerBadge{ font-size:10px; font-weight:800; letter-spacing:0.6px; padding:3px 8px; border-radius:999px; border:1px solid var(--line); background: #171A22; color: var(--muted) }
.hobControls.is-off .hobPowerBadge{ background:#171A22; color:var(--muted) }
.hobControls.is-on .hobPowerBadge{ background:#FF6B35; color:white; border-color:#FF6B35 }
.hobRow{ display:flex; align-items:center; gap:10px }
.hobKnob{
  width:42px; height:42px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #2f3a52, #171c27);
  border:1px solid #2A3650; position:relative; cursor:pointer; flex-shrink:0;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.12), 0 2px 10px rgba(0,0,0,0.4);
  transition: transform .18s, border-color .2s, box-shadow .2s; touch-action:none;
}
.hobControls.is-on .hobKnob{ border-color:#FF6B35; box-shadow: inset 0 1px 2px rgba(255,255,255,0.14), 0 2px 14px rgba(255,107,53,0.35) }
.hobKnob:active{ transform: scale(0.97) }
.hobKnobMark{ position:absolute; left:50%; top:6px; width:3px; height:10px; background:#FF6B35; border-radius:999px; transform:translateX(-50%); box-shadow: 0 0 6px rgba(255,107,53,0.7) }
.hobControls.is-off .hobKnobMark{ background:#9AA4B8; box-shadow:none; opacity:0.9 }
.hobBtns{ display:flex; gap:5px; flex-wrap:wrap; flex:1; justify-content:flex-end }
.hobBtn{
  appearance:none; border:1px solid var(--line); background: var(--card); color:var(--muted);
  padding:6px 8px; border-radius:999px; font-size:11px; font-weight:700; cursor:pointer;
  transition: transform .12s, background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.hobBtn:active{ transform: scale(0.96) }
.hobBtn.active{ background:#FF6B35; color:white; border-color:#FF6B35; box-shadow: 0 2px 10px rgba(255,107,53,0.35) }
.hobBtn.ghost{ background:transparent}
.hobBtn.ghost.active{ background:#2A344A; color:#DDE6F5; border-color:#3A4A6A }
.hobBar{ height:4px; background: rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,0.06) }
.hobBarFill{ height:100%; width:0%; background: linear-gradient(90deg, #FF8A50, #FF3D00); border-radius:999px; transition: width .35s ease }
.hobHint{ font-size:9px; color:var(--muted); opacity:0.85; letter-spacing:0.2px }

/* Make product label delete button */
.productLabel .delBtn{
  margin-left:8px; appearance:none; border:1px solid #E53935; background:#E53935; color:white;
  padding:2px 6px; border-radius:999px; font-size:10px; cursor:pointer;
}
@media (max-width: 860px){
  .toolBar{ top:50px; right:8px; }
  .hobControls{ top:95px; right:8px; max-width: 192px; min-width: 176px; }
  .hobBtns{ gap:4px }
  .hobBtn{ padding:5px 7px; font-size:10px }
}
@media (max-height: 520px) and (orientation: landscape){
  .toolBar{ top:44px; right:6px; }
  .hobControls{ top:86px; right:6px; padding:6px 8px; min-width: 168px; }
  .hobKnob{ width:36px; height:36px }
}

/* Serve feedback — center compliment/complain */
.serveFeedback{
  position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  z-index:7; display:none; flex-direction:column; align-items:center; gap:8px;
  background: rgba(15,17,23,0.96); border:1px solid #2A3650; border-radius:16px;
  padding:18px 22px; box-shadow: 0 16px 48px rgba(0,0,0,0.55); text-align:center;
  min-width:260px; backdrop-filter: blur(10px);
}
.serveFeedback.visible{ display:flex}
.serveFeedback .fbTitle{ font-weight:900; font-size:16px; color:var(--text)}
.serveFeedback .fbMsg{ font-size:13px; color:var(--muted)}
.serveFeedback.compliment{ border-color:#2E7D32; }
.serveFeedback.complain{ border-color:#B71C1C; }
.serveFeedback .fbCoins{ font-weight:800; color:#FFB74D}

/* Throw button style — red */
.ctxBtn.throw{ background:#B71C1C; border-color:#B71C1C}
.ctxBtn.throw:hover{ background:#C62828}

/* Serve popup — small plate with waiting bar and reaction */
.servePopup{
  position:absolute; inset:0; z-index:8; display:none; place-items:center;
  background: rgba(0,0,0,0.42); backdrop-filter: blur(4px);
}
.servePopup.visible{ display:grid}
.servePopupCard{
  width:min(360px, 88vw); background: rgba(23,26,34,0.98); border:1px solid #2A3650; border-radius:18px;
  padding:16px 16px 14px; box-shadow: 0 18px 48px rgba(0,0,0,0.55); display:flex; flex-direction:column; gap:12px;
}
.servePopupHeader{ display:flex; align-items:center; gap:10px}
.servePopupPlate{ font-size:22px}
.servePopupDish{ flex:1; display:flex; flex-direction:column}
.servePopupName{ font-weight:900; font-size:14px; color:var(--text)}
.servePopupState{ font-size:11px; color:var(--muted)}
.servePopupClose{ appearance:none; border:1px solid var(--line); background:transparent; color:var(--muted); width:28px; height:28px; border-radius:50%; cursor:pointer; display:grid; place-items:center}
.servePopupPlateWrap{ display:grid; place-items:center; gap:6px; padding:10px 0 4px; background: rgba(255,255,255,0.04); border-radius:12px; border:1px solid #1E2433}
.servePopupPlateVisual{ font-size:42px; line-height:1; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35))}
.servePopupPlateLabel{ font-size:11px; color:var(--muted)}
.servePopupWaiting{ display:flex; flex-direction:column; gap:8px}
.waitingText{ font-size:12px; color:var(--muted); text-align:center; font-style:italic}
.waitingBar{ height:8px; background:#1A1E2A; border-radius:999px; overflow:hidden; border:1px solid #2A3650}
.waitingBarFill{ height:100%; width:0%; background: linear-gradient(90deg, #FF6B35, #FFD54F); border-radius:999px; transition: width 0.1s linear}
.servePopupResult{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center}
.servePopupStars{ font-size:18px; letter-spacing:2px}

/* Fix tray blocking 3D bottle drag - allow canvas to receive pointer events behind tray */
#ingredientsTray{ pointer-events: none; }
#ingredientsTray .trayHandle,
#ingredientsTray #trayScroll,
#ingredientsTray #trayGrid,
#ingredientsTray .trayBtn{ pointer-events: auto; }
#canvasWrap{ pointer-events: auto; }
#scene{ pointer-events: auto; }

/* Cookware selector */
.cookwarePanel{ background: var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden }
.cookwareCard{ appearance:none; border:1px solid var(--line); background: var(--card); color:var(--text); border-radius:12px; padding:14px 10px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; transition: border-color .15s, transform .12s }
.cookwareCard:hover{ border-color:#3A4A66; transform: translateY(-1px) }
.cookwareCard:active{ transform: scale(0.97) }
.cookwareCard .cwIcon{ font-size:22px }
.cookwareCard .cwName{ font-size:12px; font-weight:800 }
.cookwareCard .cwDesc{ font-size:10px; color:var(--muted); text-align:center }
.cookwareGrid{ border-top:1px solid var(--line); border-bottom:1px solid var(--line) }