/* windows.css — v7.3 (passo 7: sistema de janelas). Carrega depois de core.css.
 * Cabeçalho padrão + arrastar no desktop + bottom sheet no celular.
 * Breakpoint mobile = o mesmo do JS (ui-manager.js): (max-width: 720px), (pointer: coarse). */

/* seletor das janelas gerenciadas: id (1,0,0) + .ui-win (0,1,0) vence as regras por id do core.css */
:is(#inventory-panel, #shop-panel, #creatures-panel, #quest-panel, #build-panel, #inv-panel).ui-win {
  --win-pad: 12px;
  padding: 0 var(--win-pad) var(--win-pad);
  overscroll-behavior: contain;
}

/* ---------- cabeçalho padrão ---------- */
.ui-win > .ui-win-head {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  min-height: 38px; margin: 0 calc(var(--win-pad) * -1) 8px; padding: 4px var(--win-pad);
  background: rgba(14, 17, 24, 0.98);
  border-bottom: 1px solid rgba(198, 161, 91, 0.28);
  user-select: none; -webkit-user-select: none;
  cursor: grab; touch-action: none;
}
.ui-win.ui-win-dragging > .ui-win-head { cursor: grabbing; }
.ui-win-title {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 14px/1.2 var(--font-display, Cinzel, Georgia, serif); letter-spacing: 0.04em; color: #e8d5a8;
}
.ui-win-extra { flex: 0 0 auto; color: #ffd166; font-weight: 700; font-size: 12px; }
.ui-win-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

/* botões do cabeçalho: !important porque #shop-close, #inv-close etc. têm regras próprias por id */
.ui-win-head .ui-win-btn {
  position: static !important; float: none !important; margin: 0 !important;
  width: 30px !important; height: 30px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 8px !important; border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: transparent !important; color: #ccc !important;
  font: 700 18px/1 system-ui, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ui-win-head .ui-win-btn:hover { background: rgba(255, 255, 255, 0.08) !important; }
.ui-win-head .ui-win-btn:active { transform: scale(0.94); }
.ui-win-head .ui-win-close { color: #f0a0a0 !important; border-color: rgba(224, 82, 63, 0.45) !important; }

/* títulos/cabeçalhos antigos ficam no DOM (ids usados pelo código), só não aparecem */
.ui-win .ui-win-legacy { display: none !important; }

/* tamanhos no desktop: bolsa precisa de largura pro cabeçalho + grid */
@media (min-width: 721px) {
  #inventory-panel.ui-win { width: 264px; max-height: min(360px, 78vh); }
}

/* ---------- mobile: bottom sheet (nunca janela minúscula) ---------- */
@media (max-width: 720px), (pointer: coarse) {
  :is(#inventory-panel, #shop-panel, #creatures-panel, #quest-panel, #build-panel, #inv-panel).ui-win {
    --win-pad: 14px;
    position: fixed;
    left: 0; right: 0; top: auto; bottom: var(--ui-kb, 0px);
    transform: none;
    width: 100%; max-width: none;
    max-height: min(calc(var(--ui-vh, 100dvh) * 0.86), calc(var(--ui-vh, 100dvh) - env(safe-area-inset-top, 0px) - 52px));
    border-radius: 16px 16px 0 0; border-bottom: 0;
    padding-left: max(var(--win-pad), env(safe-area-inset-left, 0px));
    padding-right: max(var(--win-pad), env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--win-pad) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .ui-win > .ui-win-head {
    min-height: 54px; cursor: default;
    margin-left: calc(max(var(--win-pad), env(safe-area-inset-left, 0px)) * -1);
    margin-right: calc(max(var(--win-pad), env(safe-area-inset-right, 0px)) * -1);
    padding-left: max(var(--win-pad), env(safe-area-inset-left, 0px));
    padding-right: max(var(--win-pad), env(safe-area-inset-right, 0px));
    border-radius: 16px 16px 0 0;
  }
  /* alça visual de sheet */
  .ui-win > .ui-win-head::before {
    content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.22);
  }
  .ui-win-title { font-size: 16px; padding-top: 6px; }
  .ui-win-extra { font-size: 14px; padding-top: 6px; }
  .ui-win-actions { padding-top: 6px; gap: 8px; }
  .ui-win-head .ui-win-btn { width: 44px !important; height: 44px !important; font-size: 22px !important; border-radius: 10px !important; }

  /* bolsa: grid grande (sem o teto de 148px do desktop) e sem a lixeira de arrastar */
  #inventory-panel.ui-win #inv-grid { max-height: none; grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  #inventory-panel.ui-win #inv-drop-trash { display: none; }
  /* o core.css escondia o "chrome" da bolsa no celular (janelinha de 152px); na sheet cheia ele volta */
  #inventory-panel.ui-win .inv-tabs { display: flex !important; }
  #inventory-panel.ui-win #inv-equip-row { display: grid !important; }
  #inventory-panel.ui-win .inv-quick-row { display: flex !important; }
  #inventory-panel.ui-win .panel-section-title.craft-toggle { display: block !important; }
  #inventory-panel.ui-win.craft-open #craft-list { display: flex !important; }
  #inventory-panel.ui-win .inv-tab { padding: 10px 2px; font-size: 12px; }
  #inventory-panel.ui-win .craft-btn { min-height: 44px; }

  /* botões de conteúdo com área de toque confortável */
  .ui-win .shop-btn, .ui-win .build-btn, .ui-win .cr-actions button, .ui-win .breed-pick,
  .ui-win #breed-start, .ui-win #breed-collect { min-height: 40px; min-width: 40px; }
  .ui-win .build-btn { width: 44px; }
  .ui-win .cr-tab { padding: 12px 6px; }

  /* chips das janelas minimizadas: no celular ficam no topo, longe dos controles e da sheet */
  #ui-dock { bottom: auto; top: calc(max(0px, env(safe-area-inset-top)) + 46px); flex-wrap: wrap; }
}
/* Cidade comercial: vitrines, categorias e compra/venda contextual */
.shop-tabs{display:flex;gap:5px;overflow-x:auto;margin:4px 0 10px;padding-bottom:3px;scrollbar-width:none}.shop-tabs::-webkit-scrollbar{display:none}.shop-tab{flex:0 0 auto;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);color:#cbd5e1;border-radius:8px;padding:7px 9px;font-size:11px}.shop-tab.active{background:rgba(198,161,91,.22);border-color:rgba(198,161,91,.6);color:#ffe6a4}.shop-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#9aa4af;margin:9px 0 5px}.city-shop-row small{font-size:9px;line-height:1.25;margin-top:2px}.city-shop-row .shop-btn,.city-sell{white-space:nowrap;min-width:66px}.shop-empty{font-size:11px;color:#788392;padding:8px 2px}.shop-row{gap:8px}.shop-row>span{min-width:0;flex:1}