/* GrechkaCraft Styles */
html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; overflow:clip; background:#111; overscroll-behavior: none; -webkit-overflow-scrolling: auto; font-family: system-ui, sans-serif; user-select:none; -webkit-user-select:none; touch-action:none; }
#game { position:absolute; top:0; left:0; right:0; bottom:0; background:#87CEEB; overflow:hidden; }
canvas { display:block; width:100%; height:100%; image-rendering:pixelated; }

/* Controls — всегда скрыты, показываются только на тач-устройствах */
#controls { position:absolute; left:0; right:0; bottom:0; height:auto; background:transparent; border:none; z-index:100; display:none; pointer-events:none; }
@media (hover: none) and (pointer: coarse) {
  #controls { display: block; }
}
/* Также для landscape телефонов где ширина может быть большой */
@media (max-width: 1024px) and (pointer: coarse) {
  #controls { display: block; }
}

.btn { position:absolute; bottom:10px; width:62px; height:62px; border-radius:14px;
  background:#333; border:3px solid #555; color:#fff; font-size:28px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 5px 0 #111; pointer-events:auto; z-index:101; }
.btn:active { transform:translateY(2px); box-shadow:0 2px 0 #111; background:#444; }
#left { left:10px; }
#right { left:82px; }
#down { left:154px; background:#2980b9; border-color:#3498db; }
#jump { right:10px; background:#d35400; border-color:#e67e22; }

.ui { position:absolute; inset:0; pointer-events:none; z-index:20; }
.pe { pointer-events:auto; }

#stats { position:absolute; left:10px; top:10px; color:#fff; font-weight:800; font-size:14px;
  background: rgba(0,0,0,0.55); padding:8px; border-radius:10px; text-shadow:1px 1px 0 #000; }
#stats .row{ display:flex; gap:10px; align-items:center; }

.rbtn { position:absolute; right:10px; width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; border:2px solid rgba(255,255,255,0.9);
  font-size:22px; cursor:pointer; pointer-events:auto; box-shadow:0 3px 0 rgba(0,0,0,0.5); }
.rbtn:active { transform: translateY(3px); box-shadow:none; }
#modeBtn { top:10px; background:#f39c12; }
#mapToggle { top:10px; right:66px !important; background:#1abc9c; }
#craftBtn { top:66px; right:10px !important; background:#9b59b6; }
#invToggle { top:66px; right:66px !important; background:#3498db; }
#menuBtn { top:66px; right:122px !important; background:#555; }
#chatToggle { display: none !important; }
#chatPanel { display: none !important; }

/* === HOTBAR — позиционирование от ориентации === */
#hotbar { position:absolute; left:50%; transform:translateX(-50%); bottom:12px; display:flex; gap:4px;
  background: rgba(0,0,0,0.70); padding:6px 8px; border-radius:12px; pointer-events:auto; z-index:90; }

/* Тач-устройства в портрете: hotbar над controls */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  #hotbar { bottom: 82px; }
  #selectedItem { display: none !important; }
}
/* Тач-устройства в ландшафте: controls скрыты или узкие, hotbar внизу */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  #hotbar { bottom: 10px; }
  #selectedItem { display: none !important; }
}
/* Маленькие экраны в ландшафте (телефоны) */
@media (max-height: 500px) {
  #hotbar { bottom: 6px; gap: 2px; padding: 4px 6px; }
  #hotbar .slot { width: 36px; height: 36px; font-size: 16px; }
  #selectedItem { display: none !important; }

  .btn { width: 50px; height: 50px; font-size: 22px; }
  #left { left: 6px; }
  #right { left: 64px; }
  #down { left: 122px; }
  #jump { right: 6px; }
  .rbtn { width: 40px; height: 40px; font-size: 18px; }
  #modeBtn { top: 6px; }
  #mapToggle { top: 6px; right: 54px !important; }
  #craftBtn { top: 52px; right: 6px !important; }
  #invToggle { top: 52px; right: 54px !important; }
  #menuBtn { top: 52px; right: 102px !important; }
  #stats { font-size: 11px; padding: 4px 6px; }
  #stats .row { gap: 4px; }
}

.slot { width:44px; height:44px; border:2px solid rgba(255,255,255,0.25); border-radius:8px;
  position:relative; overflow:hidden; cursor:pointer; background: rgba(0,0,0,0.45);
  display:flex; align-items:center; justify-content:center; font-size:20px;
  transition: border-color 0.15s, box-shadow 0.15s; }
.slot.sel { border-color:#f1c40f; box-shadow: 0 0 8px 2px rgba(241,196,15,0.55), inset 0 0 6px rgba(241,196,15,0.25); background: rgba(241,196,15,0.08); }
.count { position:absolute; right:2px; bottom:1px; font-size:10px; color:#fff; font-weight:900; text-shadow:1px 1px 0 #000; }

/* Craft modal */
#craftPanel { display:none; position:absolute; left:14px; right:14px; top:14px; bottom:14px;
  background: rgba(10,10,12,0.92); border:2px solid rgba(255,255,255,0.85); border-radius:14px;
  pointer-events:auto; padding:12px; overflow:auto; z-index: 200; }

/* Inventory modal */
#inventoryPanel { display:none; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);
  width: 420px; max-width: 90%; background: rgba(10,10,12,0.92); border:2px solid rgba(255,255,255,0.85);
  border-radius:14px; pointer-events:auto; padding:12px; z-index: 200; }
#inventoryPanel .top { display:flex; justify-content:space-between; align-items:center; color:#fff; margin-bottom:10px; }
#inventoryGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.inv-slot { width: 48px; height: 48px; border: 2px solid rgba(255,255,255,0.22); border-radius: 8px;
  position: relative; overflow: hidden; cursor: pointer; background: rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center; font-size: 24px; }
.inv-slot.sel { border-color: #f1c40f; box-shadow: 0 0 0 2px rgba(241,196,15,0.18) inset; }
.inv-count { position: absolute; right: 3px; bottom: 1px; font-size: 12px; color: #fff;
   font-weight: 900; text-shadow: 1px 1px 0 #000; background: rgba(0,0,0,0.5); padding: 1px 3px; border-radius: 4px; }
.equipped-indicator { position: absolute; top: 2px; right: 2px; font-size: 14px; color: #2ecc71; font-weight: 900; text-shadow: 1px 1px 0 #000; }
#craftPanel .top { display:flex; justify-content:space-between; align-items:center; color:#fff; margin-bottom:10px; }
#craftPanel .close { background:#c0392b; border:none; color:#fff; font-weight:900; padding:8px 10px; border-radius:10px; cursor:pointer; }
#inventoryPanel .close { background:#c0392b; border:none; color:#fff; font-weight:900; padding:8px 10px; border-radius:10px; cursor:pointer; }
.recipe { display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px;
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); margin-bottom:8px; }
.ricon { width:32px; height:32px; border-radius:8px; background-size:cover; image-rendering:pixelated; }
.rinfo { flex:1; }
.rname { color:#fff; font-weight:900; font-size:14px; }
.rcost { color:#bbb; font-size:11px; line-height:1.25; }
.rcraft { background:#2ecc71; border:none; color:#fff; font-weight:900; padding:8px 10px; border-radius:10px; cursor:pointer; }
.rcraft:disabled { background:#444; color:#888; cursor:not-allowed; }

#death { display:none; position:absolute; inset:0; background: rgba(60,0,0,0.88);
  z-index:200; color:#fff; pointer-events:auto; align-items:center; justify-content:center; flex-direction:column; gap:12px; }
#death button { padding:12px 18px; font-size:18px; font-weight:900; border:none; border-radius:12px; cursor:pointer; }

/* Panel header + close button fix */
.panel-header { display:flex; justify-content:space-between; align-items:center; color:#fff; font-weight:900; font-size:18px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.15); }
.panel-header .close { background:#c0392b; border:none; color:#fff; font-weight:900; padding:8px 12px; border-radius:10px; cursor:pointer; font-size:16px; min-width:36px; text-align:center; flex-shrink:0; margin-left:12px; }

/* Custom modal (alerts/confirms) */
.custom-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.7); z-index:9999; display:flex; align-items:center; justify-content:center; }
.custom-modal-box { background:#1a1a2e; border:2px solid #e74c3c; border-radius:16px; padding:24px 32px; color:#fff; font-size:16px; font-weight:700; text-align:center; max-width:320px; box-shadow:0 8px 32px rgba(0,0,0,0.5); }
.custom-modal-box .modal-btns { display:flex; gap:10px; justify-content:center; margin-top:16px; }
.custom-modal-box button { font-weight:900; padding:10px 20px; border-radius:10px; font-size:15px; cursor:pointer; border:none; color:#fff; }
.custom-modal-box .btn-yes { background:#e74c3c; }
.custom-modal-box .btn-no { background:#555; }
.custom-modal-box .btn-ok { background:#2ecc71; }

/* Menu dropdown ⋯ */
.menu-dropdown { position:absolute; top:120px; right:58px; background:rgba(20,20,30,0.95); border:2px solid rgba(255,255,255,0.7); border-radius:10px; display:none; flex-direction:column; min-width:140px; z-index:300; pointer-events:auto; overflow:hidden; }
.menu-dropdown.open { display:flex; }
.menu-item { padding:10px 14px; color:#fff; font-size:14px; font-weight:700; cursor:pointer; border-bottom:1px solid rgba(255,255,255,0.1); }
.menu-item:last-child { border-bottom:none; }
.menu-item:hover { background:rgba(255,255,255,0.12); }
.menu-item:active { background:rgba(255,255,255,0.2); }

/* Market panel */
#marketPanel { display:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:360px; max-width:90%; background:rgba(10,10,12,0.95); border:2px solid rgba(255,255,255,0.85); border-radius:14px; pointer-events:auto; padding:12px; z-index:200; }

/* Settings panel */
#settingsPanel { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:320px; max-width:90%; background:rgba(10,10,12,0.95); border:2px solid rgba(255,255,255,0.85); border-radius:14px; pointer-events:auto; padding:12px; z-index:200; }

/* Selected item indicator */
#selectedItem { display: none !important; }
  background: rgba(0,0,0,0.45); border:2px solid #f1c40f; box-shadow: 0 0 12px 3px rgba(241,196,15,0.45);
  display:flex; align-items:center; justify-content:center; font-size:22px; z-index:90; pointer-events:none;
  background-size:cover; background-position:center; }