* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; font-family:-apple-system,'Segoe UI',Tahoma,sans-serif; }
html,body { height:100%; overflow:hidden; background:#000; position:fixed; width:100%; overscroll-behavior:none; }
#app { position:fixed; inset:0; overflow:hidden; }
canvas { display:block; width:100%; height:100%; touch-action:none; }

/* HUD */
.hud {
  position:absolute; top:env(safe-area-inset-top,8px); left:6px; right:6px;
  display:flex; gap:4px; z-index:10; pointer-events:none;
}
.stat {
  flex:1; background:rgba(0,0,0,0.75); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px); border-radius:12px;
  padding:5px 3px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1.5px solid rgba(255,255,255,0.1); box-shadow:0 2px 12px rgba(0,0,0,0.4); min-height:44px;
}
.stat .ic { font-size:0.9rem; }
.stat span:last-child { color:white; font-weight:800; font-size:0.85rem; margin-top:2px; }

/* تبويب الطوابق */
.floor-tabs {
  position:absolute; top:calc(env(safe-area-inset-top,8px) + 54px);
  right:8px; display:flex; flex-direction:column; gap:4px; z-index:9;
}
.floor-tab {
  width:44px; height:44px; border-radius:12px;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(12px);
  border:2px solid rgba(255,255,255,0.15); color:white;
  font-size:0.9rem; font-weight:900; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.floor-tab.active { background:linear-gradient(180deg,#e63946,#b91c2a); border-color:#ff5e5b; box-shadow:0 0 15px rgba(230,57,70,0.6); }
.floor-tab.locked { opacity:0.4; }
.floor-tab small { font-size:0.55rem; opacity:0.7; }

/* الطلبات */
.orders {
  position:absolute; top:calc(env(safe-area-inset-top,8px) + 54px);
  left:8px; width:120px; display:flex; flex-direction:column; gap:5px;
  z-index:9; max-height:40vh; overflow-y:auto; pointer-events:none;
}
.order-card {
  background:rgba(0,0,0,0.75); backdrop-filter:blur(12px);
  border-radius:11px; padding:6px 8px;
  border:1.5px solid rgba(6,214,160,0.4); color:white;
  font-size:0.65rem; animation:slideIn 0.3s; pointer-events:auto;
}
.order-card.urgent { border-color:rgba(255,94,91,0.8); animation:pulseRed 0.8s infinite; }
.order-card .order-emoji { font-size:1rem; letter-spacing:1px; margin:2px 0; }
.order-card .order-time { color:#ffd60a; font-weight:700; font-size:0.6rem; }
@keyframes slideIn { from { transform:translateX(-30px); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes pulseRed { 0%,100% { box-shadow:0 0 0 0 rgba(255,94,91,0.7); } 50% { box-shadow:0 0 0 6px rgba(255,94,91,0); } }

/* المكونات */
.ingredient-bar {
  position:absolute; bottom:calc(env(safe-area-inset-bottom,8px) + 90px);
  left:8px; right:8px; display:flex; gap:5px; justify-content:center; flex-wrap:wrap; z-index:9;
}
.ing-btn {
  width:50px; height:50px; border-radius:15px;
  background:rgba(255,255,255,0.95);
  border:2px solid rgba(230,57,70,0.3); font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.3), inset 0 -3px 0 rgba(0,0,0,0.1);
  transition:transform 0.1s; position:relative;
}
.ing-btn:active { transform:translateY(3px) scale(0.95); }
.ing-btn.selected { background:linear-gradient(180deg,#06d6a0,#058c68); border-color:#058c68; box-shadow:0 0 15px rgba(6,214,160,0.6); }
.ing-btn .badge { position:absolute; top:-4px; right:-4px; background:#e63946; color:white; width:18px; height:18px; border-radius:50%; font-size:0.65rem; font-weight:bold; display:flex; align-items:center; justify-content:center; }

/* الشريط السفلي */
.bottom-bar {
  position:absolute; bottom:env(safe-area-inset-bottom,8px);
  left:8px; right:8px; display:flex; gap:6px; z-index:10;
}
.bbtn {
  flex:1; background:rgba(0,0,0,0.8); backdrop-filter:blur(12px);
  border:1.5px solid rgba(255,255,255,0.15); border-radius:15px;
  padding:8px 2px; color:white; font-size:0.65rem; font-weight:700;
  display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer;
}
.bbtn span { font-size:1.3rem; line-height:1; }
.bbtn small { font-size:0.6rem; opacity:0.85; }
.bbtn:active { transform:scale(0.95); background:rgba(230,57,70,0.4); }

/* FAB */
.fab {
  position:absolute; bottom:calc(env(safe-area-inset-bottom,8px) + 155px);
  right:15px; width:65px; height:65px; border-radius:50%;
  background:linear-gradient(180deg,#ff6b35,#d62828);
  border:3px solid rgba(255,255,255,0.3); font-size:1.9rem;
  color:white; box-shadow:0 6px 20px rgba(230,57,70,0.5), inset 0 -4px 0 rgba(0,0,0,0.2);
  cursor:pointer; z-index:10;
}
.fab:active { transform:scale(0.9); }
.fab.pulsing { animation:fabPulse 1s infinite; }
@keyframes fabPulse { 0%,100% { box-shadow:0 6px 20px rgba(230,57,70,0.5); } 50% { box-shadow:0 6px 40px rgba(255,107,53,0.9); } }

/* الشاشات */
.screen {
  position:absolute; inset:0; background:rgba(0,0,0,0.9);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:none; z-index:100; overflow-y:auto;
  padding:env(safe-area-inset-top,20px) 20px env(safe-area-inset-bottom,20px);
}
.screen.active { display:flex; }

#startScreen { background:linear-gradient(160deg,#e63946,#d62828 40%,#f77f00); align-items:center; justify-content:center; text-align:center; }
.start-inner { max-width:320px; width:100%; }
.logo { font-size:6rem; margin-bottom:10px; animation:float 3s infinite; filter:drop-shadow(0 10px 30px rgba(0,0,0,0.3)); }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-15px); } }
#startScreen h1 { font-size:2.5rem; color:white; margin-bottom:8px; font-weight:900; text-shadow:3px 3px 0 rgba(0,0,0,0.2); }
#startScreen p { color:rgba(255,255,255,0.85); font-size:1rem; margin-bottom:40px; }

.btn-primary {
  width:100%; padding:18px; background:white; color:#e63946;
  border:none; border-radius:18px; font-size:1.15rem; font-weight:900;
  cursor:pointer; box-shadow:0 8px 0 rgba(0,0,0,0.15);
  transition:transform 0.1s; margin-bottom:12px;
}
.btn-primary:active { transform:translateY(6px); box-shadow:0 2px 0 rgba(0,0,0,0.15); }
.btn-ghost {
  width:100%; padding:14px; background:rgba(255,255,255,0.2);
  color:white; border:2px solid rgba(255,255,255,0.4);
  border-radius:18px; font-size:1rem; font-weight:700; cursor:pointer;
}

#howScreen { background:linear-gradient(160deg,#1a1a1a,#2b1810); align-items:center; justify-content:center; }
.how-inner { max-width:340px; width:100%; }
.how-inner h2 { color:#ffd60a; font-size:1.5rem; text-align:center; margin-bottom:24px; }
.how-item {
  background:rgba(255,255,255,0.08); border-right:4px solid #ffd60a;
  border-radius:12px; padding:14px 16px; color:white;
  font-size:0.95rem; margin-bottom:10px;
}

/* Sheet */
.sheet {
  inset:auto 0 0 0; top:auto; height:88vh;
  border-radius:24px 24px 0 0;
  background:linear-gradient(180deg,#2b2b2b,#1a1a1a);
  padding:0; display:none; flex-direction:column;
  animation:slideUp 0.3s ease;
}
.sheet.active { display:flex; }
@keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
.sheet-handle { width:40px; height:5px; background:rgba(255,255,255,0.3); border-radius:3px; margin:10px auto 8px; }
.sheet-header { display:flex; justify-content:space-between; align-items:center; padding:0 20px 12px; }
.sheet-header h2 { color:#ffd60a; font-size:1.2rem; }
.close { background:rgba(255,255,255,0.1); border:none; width:36px; height:36px; border-radius:50%; color:white; font-size:1rem; cursor:pointer; }
.tabs { display:flex; gap:6px; padding:0 20px 12px; overflow-x:auto; }
.tab {
  background:rgba(255,255,255,0.08); border:none; color:rgba(255,255,255,0.7);
  padding:9px 16px; border-radius:11px; font-size:0.8rem; font-weight:700;
  white-space:nowrap; cursor:pointer;
}
.tab.active { background:linear-gradient(180deg,#e63946,#b91c2a); color:white; box-shadow:0 4px 12px rgba(230,57,70,0.4); }
.sheet-body { flex:1; overflow-y:auto; padding:0 20px 20px; -webkit-overflow-scrolling:touch; }

.shop-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.shop-card {
  background:rgba(255,255,255,0.05); border:2px solid rgba(255,255,255,0.1);
  border-radius:16px; padding:12px 10px; text-align:center; cursor:pointer;
  transition:all 0.2s; position:relative;
}
.shop-card:active { transform:scale(0.97); }
.shop-card.owned { border-color:rgba(6,214,160,0.6); background:rgba(6,214,160,0.1); }
.shop-card.locked { opacity:0.45; cursor:not-allowed; }
.shop-card .ic { font-size:2rem; margin-bottom:6px; display:block; }
.shop-card .nm { color:white; font-size:0.85rem; font-weight:800; margin-bottom:4px; }
.shop-card .ds { color:rgba(255,255,255,0.5); font-size:0.7rem; margin-bottom:8px; min-height:28px; line-height:1.3; }
.shop-card .pr { background:#ffd60a; color:#1a1a1a; padding:5px 10px; border-radius:8px; font-weight:900; font-size:0.8rem; display:inline-block; }
.shop-card.owned .pr { background:#06d6a0; color:white; }

/* Toast */
.toast {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0.8);
  background:rgba(0,0,0,0.9); color:white;
  padding:14px 24px; border-radius:16px; font-weight:800;
  font-size:1rem; z-index:200; opacity:0; pointer-events:none;
  transition:all 0.3s; border:2px solid rgba(255,255,255,0.15);
  text-align:center; max-width:80vw;
}
.toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
.toast.success { border-color:#06d6a0; box-shadow:0 0 30px rgba(6,214,160,0.5); }
.toast.error { border-color:#ff5e5b; box-shadow:0 0 30px rgba(255,94,91,0.5); }