/* ==========================================================================
   Bandeja de regalos del jugador (ventana sobre el juego). Reutiliza las variables y componentes de shell.css. Prefijo gf-.
   ========================================================================== */

.se-nav [data-gifts-badge], .se-menu [data-gifts-badge] { margin-left: 2px; }
.se-menu [data-gifts-badge] { margin-left: auto; box-shadow: none; }

.gf-dialog {
  padding: 0; border: 3px solid var(--madera-clara); border-radius: 16px; color: var(--claro);
  background: linear-gradient(180deg, var(--tinta-2), var(--tinta)); box-shadow: 0 8px 0 var(--madera), var(--sombra);
  width: min(720px, calc(100% - 24px)); max-height: min(88dvh, 820px); overflow: hidden;
}
.gf-dialog[open] { display: flex; flex-direction: column; }
.gf-dialog::backdrop { background: rgba(4, 12, 22, 0.72); }
.gf-dialog__body { padding: 22px 26px 26px; overflow-y: auto; flex: 1; min-height: 0; }
.gf-dialog__x {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.07); color: var(--apagado);
}
.gf-dialog__x:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.gf-title { margin: 0 0 6px; padding-right: 44px; font: 700 1.55rem/1.1 var(--f-display); color: var(--oro); }
.gf-title:focus { outline: none; }
.gf-intro { margin: 0 0 14px; color: var(--apagado); font-size: 0.93rem; }
.gf-empty { margin: 18px 0; padding: 18px; text-align: center; color: var(--apagado); border: 1px dashed var(--linea); border-radius: 12px; }
.gf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.gf-card {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--linea);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
}
.gf-card--new { border-color: var(--oro); box-shadow: 0 0 0 2px rgba(255, 194, 26, 0.25); }
.gf-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gf-from { font-weight: 700; }
.gf-when { margin-left: auto; color: var(--apagado); font-size: 0.82rem; }
.gf-msg { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--pergamino); color: var(--texto); border: 1px solid var(--pergamino-borde); white-space: pre-wrap; overflow-wrap: anywhere; }
.gf-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gf-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #06121f; border: 1px solid rgba(255, 255, 255, 0.12); }
.gf-thumb { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 8px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.gf-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gf-item__name { font-weight: 700; font-size: 0.86rem; line-height: 1.2; overflow-wrap: anywhere; }
.gf-item__n { margin-left: auto; font: 700 0.95rem var(--f-num); color: var(--oro); }
.gf-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gf-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 6px; border-radius: 16px; background: #06121f; border: 1px solid rgba(255, 255, 255, 0.14); font: 700 0.9rem var(--f-num); }
.gf-chip svg { width: 20px; height: 20px; }
.gf-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gf-note { color: var(--apagado); font-size: 0.84rem; }