/* The slot bar, after Hunt: what the hand can take, 1-7, above the health rail. Plain dark
   cells, no frames; the icons are flat grey silhouettes (sloticons.js). */
.slotbar { position:fixed; z-index:5; left:50%; bottom:74px; transform:translate(-50%, 6px); width:min(600px, 94vw); pointer-events:none;
  opacity:0; transition:opacity .25s ease, transform .25s ease; font-family:Georgia,serif; }
.slotbar.visible { opacity:1; transform:translate(-50%, 0); }
.slotbar-name { height:20px; margin-bottom:6px; text-align:center; color:#e2ddd2; font:600 13px/20px 'Optimus Princeps',Georgia,serif; letter-spacing:.14em; text-transform:uppercase; text-shadow:0 1px 3px #000; }
.slotbar-cells { display:grid; grid-template-columns:2fr repeat(6, 1fr); gap:3px; }
.slotbar-cell { position:relative; height:56px; background:#000000a6; }
.slotbar-cell.sel { background:#000000d9; }
.slotbar-cell.sel .slot-icon { opacity:1; }
.slotbar-n { position:absolute; left:6px; top:4px; color:#8a8780; font:10px Georgia; }
.slotbar-cell.sel .slotbar-n { color:#e2ddd2; }
.slotbar-icon { position:absolute; inset:10px 8px 12px; }
.slot-icon { display:block; width:100%; height:100%; color:#d8d4cc; opacity:.55; }
.slot-icon svg { display:block; width:100%; height:100%; }
.slotbar-q { position:absolute; right:6px; bottom:4px; color:#c9c5bc; font:10px Georgia; text-shadow:0 1px 2px #000; }
body.editing .slotbar { display:none; }
/* "F Sev" floating over the cat you look at (inventory.js) */
.world-prompt { position:fixed; left:0; top:0; z-index:5; pointer-events:none; padding:3px 9px 3px 4px; background:#000000b3; color:#e2ddd2;
  font:600 12px/18px 'Optimus Princeps',Georgia,serif; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; text-shadow:0 1px 3px #000; }
.world-prompt kbd { display:inline-block; min-width:18px; margin-right:7px; color:#000; background:#e2ddd2; font:700 11px/18px Georgia,serif; text-align:center; text-shadow:none; letter-spacing:0; }
body.editing .world-prompt { display:none; }
@media (max-width: 760px) { .slotbar-cell { height:44px; } }