/* Container screens: inventory, crafting, furnace, chest, creative. Sizes are in GUI pixels (--s). */
#screen { position: fixed; inset: 0; display: flex; overflow-y: auto; background: rgba(16, 16, 20, 0.6); }
#screen > .panel { margin: auto; }
.panel {
  position: relative; padding: calc(var(--s) * 7); background: var(--panel); color: #404040;
  border: var(--s) solid #000; box-shadow: inset calc(var(--s) * 2) calc(var(--s) * 2) 0 var(--panel-hi), inset calc(var(--s) * -2) calc(var(--s) * -2) 0 var(--panel-lo);
  font-size: calc(var(--s) * 8);
}
.panel .title { margin: calc(var(--s) * 2) 0 calc(var(--s) * 3) calc(var(--s) * 1); color: #404040; text-shadow: none; }
.grid { display: grid; }
.gap { height: calc(var(--s) * 4); }

.slot {
  position: relative; width: calc(var(--s) * 18); height: calc(var(--s) * 18); display: flex; align-items: center; justify-content: center;
  background: var(--slot); box-shadow: inset var(--s) var(--s) 0 var(--slot-lo), inset calc(var(--s) * -1) calc(var(--s) * -1) 0 var(--slot-hi);
  cursor: default; color: #fff;
}
.slot:hover::after, .slot.dragged::after { content: ''; position: absolute; inset: var(--s); background: rgba(255, 255, 255, 0.45); pointer-events: none; }
.slot .count { right: var(--s); bottom: 0; }
.big-slot .slot { width: calc(var(--s) * 26); height: calc(var(--s) * 26); }

.cursor-stack { position: fixed; left: 0; top: 0; margin: calc(var(--s) * -9) 0 0 calc(var(--s) * -9); background: none; box-shadow: none; pointer-events: none; z-index: 5; }
.cursor-stack:empty { display: none; }
.tooltip {
  position: fixed; left: 0; top: 0; z-index: 6; padding: calc(var(--s) * 2) calc(var(--s) * 4); pointer-events: none; white-space: pre;
  background: rgba(16, 0, 16, 0.94); border: var(--s) solid #28005a; outline: var(--s) solid rgba(16, 0, 16, 0.94); color: #fff; text-shadow: var(--s) var(--s) 0 var(--text-shadow);
}

/* crafting */
.inv-top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--s) * 10); margin-bottom: calc(var(--s) * 4); }
.player-preview { width: calc(var(--s) * 52); height: calc(var(--s) * 72); background: linear-gradient(#2a2a2a, #111); box-shadow: inset var(--s) var(--s) 0 var(--slot-lo), inset calc(var(--s) * -1) calc(var(--s) * -1) 0 var(--slot-hi); display: flex; align-items: center; justify-content: center; }
.doll { width: calc(var(--s) * 32); height: calc(var(--s) * 64); image-rendering: pixelated; filter: drop-shadow(var(--s) var(--s) 0 rgba(0, 0, 0, 0.5)); }
.craft-area { display: flex; align-items: center; gap: calc(var(--s) * 8); margin-bottom: calc(var(--s) * 4); }
.arrow { position: relative; width: calc(var(--s) * 24); height: calc(var(--s) * 16);
  background: #8b8b8b; clip-path: polygon(0 35%, 60% 35%, 60% 0, 100% 50%, 60% 100%, 60% 65%, 0 65%); }
.arrow .fill { width: 0; height: 100%; background: #fff; }

/* furnace */
.furnace-area { display: flex; align-items: center; justify-content: center; gap: calc(var(--s) * 18); margin: calc(var(--s) * 4) 0 calc(var(--s) * 6); }
.fcol { display: flex; flex-direction: column; align-items: center; gap: calc(var(--s) * 2); }
.flame { position: relative; width: calc(var(--s) * 14); height: calc(var(--s) * 14); background: #8b8b8b; clip-path: polygon(50% 0, 80% 35%, 100% 70%, 80% 100%, 20% 100%, 0 70%, 20% 35%); display: flex; align-items: flex-end; }
.flame .fill { width: 100%; height: 0; background: linear-gradient(#ffe066, #f26b0f); }

/* creative */
.creative { width: calc(var(--s) * 162 + var(--s) * 2); }
.tabs { display: flex; gap: var(--s); margin-bottom: calc(var(--s) * 3); flex-wrap: wrap; }
.tab { flex: 1; font: inherit; text-shadow: none; font-size: calc(var(--s) * 6.5); padding: calc(var(--s) * 3) calc(var(--s) * 2); color: #404040; background: #a8a8a8; border: var(--s) solid #000; cursor: pointer; white-space: nowrap; }
.tab.active { background: var(--panel); border-bottom-color: var(--panel); }
.tab:hover { background: #d8d8d8; }
.search { width: 100%; height: calc(var(--s) * 12); font: inherit; margin-bottom: calc(var(--s) * 3); padding: 0 calc(var(--s) * 3); color: #fff; background: #000; border: var(--s) solid #a0a0a0; outline: none; }
.creative-scroll { height: calc(var(--s) * 18 * 5); overflow-y: auto; margin-bottom: calc(var(--s) * 4); scrollbar-color: #6f6f6f #000; }
.hotbar-row { display: flex; gap: calc(var(--s) * 6); align-items: center; }
.slot.trash::before { content: '✕'; color: #c33; font-size: calc(var(--s) * 12); text-shadow: none; }
.close-btn { position: absolute; top: calc(var(--s) * 3); right: calc(var(--s) * 3); width: calc(var(--s) * 12); height: calc(var(--s) * 12); padding: 0; font: inherit; font-size: calc(var(--s) * 8); line-height: 1; color: #404040; background: none; border: none; cursor: pointer; text-shadow: none; }
.close-btn:hover { color: #000; }
@media (max-height: 420px) { .player-preview { height: calc(var(--s) * 58); } .doll { height: calc(var(--s) * 52); width: calc(var(--s) * 26); } .panel { padding: calc(var(--s) * 5); } }