* { margin:0; padding:0; box-sizing:border-box; }
body { background:#000; overflow:hidden; font-family:'Segoe UI',sans-serif; }
#c { display:block; width:100vw; height:100vh; }
#hud { position:fixed; top:10px; left:0; right:0; display:flex; justify-content:space-between; padding:0 10px; pointer-events:none; z-index:10; flex-wrap:wrap; gap:4px; }
.hb { background:rgba(0,0,0,0.65); color:#fff; padding:5px 10px; border-radius:22px; font-size:13px; font-weight:700; white-space:nowrap; }
#ov { position:fixed; inset:0; display:flex; align-items:stretch; background:transparent; z-index:20; pointer-events:none; }
#ov-left { display:flex; flex-direction:column; justify-content:center; gap:16px; padding:40px 36px; background:rgba(0,18,0,0.82); width:280px; pointer-events:auto; max-height:100vh; overflow:hidden; }
#ov-main { display:flex; flex-direction:column; gap:16px; }
#ov-inv { overflow:hidden; }
#ov h1 { font-size:22px; font-weight:900; color:#6fff40; letter-spacing:1px; margin:0 0 8px; }
#ov-inventory { background:rgba(255,255,255,0.07); border-radius:12px; padding:12px; }
.inv-label { font-size:13px; color:#b0e090; margin-bottom:8px; }
.inv-slots { display:flex; gap:8px; }
.inv-slot { width:48px; height:48px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#666; font-size:18px; }
#shopBtn { background:rgba(255,200,0,0.15); color:#ffd740; border:1px solid rgba(255,200,0,0.3); padding:12px; border-radius:14px; font-size:15px; font-weight:700; cursor:pointer; }
#shopBtn:hover { background:rgba(255,200,0,0.25); }
#invBtn { background:rgba(100,200,100,0.15); color:#b0e090; border:1px solid rgba(100,200,100,0.3); padding:12px; border-radius:14px; font-size:15px; font-weight:700; cursor:pointer; }
#invBtn:hover { background:rgba(100,200,100,0.25); }
.inv-cell { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:10px; display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;font-size:22px;color:rgba(255,255,255,0.2);overflow:hidden;height:64px; }
.sbig { font-size:44px; font-weight:900; color:#fff; display:block; }
#startBtn { background:#3ab820; color:#fff; border:none; padding:14px 20px; border-radius:14px; font-size:17px; font-weight:800; cursor:pointer; touch-action:manipulation; }
#startBtn:hover { background:#50d030; transform:scale(1.03); }

/* Мобильные кнопки управления — поверх игры, НО ниже overlay */
#mobile-controls { display:none; position:fixed; bottom:0; left:0; right:0; z-index:15; pointer-events:none; padding:0 0 env(safe-area-inset-bottom,0) 0; }
#mobile-controls.active { display:block; }
#ctrl-bottom { display:flex; align-items:flex-end; justify-content:space-between; padding:8px 12px 6px; }
#ctrl-left-group { display:flex; flex-direction:column; gap:4px; pointer-events:auto; align-items:flex-start; }
#ctrl-left-group #jumpBtnL { margin-left:72px; margin-bottom:-24px; }
#ctrl-left-group #crouchBtnL { margin-left:72px; margin-top:-24px; }
#ctrl-right-group { display:flex; flex-direction:column; gap:4px; pointer-events:auto; align-items:flex-end; }
#ctrl-right-group #jumpBtn { margin-right:72px; margin-bottom:-24px; }
#ctrl-right-group #crouchBtn { margin-right:72px; margin-top:-24px; }
.cb { background:rgba(0,0,0,0.55); color:#fff; border:1.5px solid rgba(255,255,255,0.35); border-radius:50%; font-size:26px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; display:flex; align-items:center; justify-content:center; user-select:none; -webkit-user-select:none; width:68px; height:68px; }
.cb:active { background:rgba(255,255,255,0.35); }

#ctrl-cam-row { display:flex; justify-content:center; padding-bottom:6px; pointer-events:auto; }

.ov-hint-mobile { display:none; font-size:13px; color:#b0e090; line-height:1.8; }

#score-popup-container { position:fixed; top:0; left:0; width:100%; height:80px; pointer-events:none; z-index:15; overflow:visible; }
.score-popup { position:absolute; font-size:18px; font-weight:900; color:#ffd700; text-shadow:0 1px 8px rgba(0,0,0,0.8); pointer-events:none; white-space:nowrap; }

@media (hover: none) and (pointer: coarse) {
  .hb { font-size:12px; padding:4px 9px; }
  #hud { top:env(safe-area-inset-top,8px); }
  .ov-hint { display:none; }
  .ov-hint-mobile { display:block; }
}
@media (hover: hover) {
  #mobile-controls { display:none !important; }
}
#inv-grid::-webkit-scrollbar { width: 4px; }
#inv-grid::-webkit-scrollbar-track { background: transparent; }
#inv-grid::-webkit-scrollbar-thumb { background: #1a4a1a; border-radius: 4px; }

/* Подсказка об ориентации — только на мобильных в портретном режиме */
.rotate-hint {
  display: none;
  font-size: 12px;
  color: #ffe066;
  background: rgba(255,180,0,0.13);
  border: 1px solid rgba(255,220,0,0.3);
  border-radius: 10px;
  padding: 6px 12px;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 2px;
}
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .rotate-hint { display: block; }
}