/* Font families */
.font-germania {
    font-family: 'Germania One', cursive, sans-serif !important;
}

.font-pt-sans-narrow,
body {
    font-family: 'PT Sans Narrow', Arial, sans-serif !important;
    font-weight: 700 !important;
}

/* Draggable items and item pool */
#item-pool>.draggable-item,
.draggable-item .text-base {
    box-sizing: border-box;
    max-width: 100%;
    word-break: break-word;
    white-space: normal;
}

#item-pool {
    min-height: 20rem;
    border: 2px dashed #cbd5e1;
    padding-bottom: 4rem;
    max-height: 60vh;
    align-items: start;
}

/* Inventory slots */
.inventory-slot {
    color: #6b7280 !important;
}

.inventory-slot .draggable-item {
    color: inherit !important;
    z-index: 10;
    background-color: white !important;
}

.inventory-slot .draggable-item * {
    color: initial !important;
}

/* Stacking context */
html,
body {
    position: relative;
    min-height: 100%;
}

/* Dark mode */
html.invert-dark,
html.invert-dark body {
    background: #101014 !important;
    color: #e0e0e0 !important;
}

html.invert-dark .bg-white,
html.invert-dark .shadow-lg,
html.invert-dark #drawer,
html.invert-dark .inventory-slot,
html.invert-dark #item-pool,
html.invert-dark .border,
html.invert-dark .rounded-xl,
html.invert-dark .rounded-md,
html.invert-dark .draggable-item,
html.invert-dark .bg-gray-800 {
    background-color: #18181c !important;
    color: #e0e0e0 !important;
    border-color: #23232a !important;
}

html.invert-dark .inventory-slot {
    color: #b0b0b8 !important;
}

html.invert-dark .draggable-item .text-base,
html.invert-dark .draggable-item .text-xs,
html.invert-dark .font-germania,
html.invert-dark .font-pt-sans-narrow {
    color: #e0e0e0 !important;
}

html.invert-dark .usage-dot {
    border-color: #b0b0b8 !important;
    background-color: #3d3d3d !important;
}

html.invert-dark .usage-dot[data-used="true"] {
    background-color: #e0e0e0 !important;
}

html.invert-dark .border-black,
html.invert-dark hr,
html.invert-dark .border-gray-300 {
    border-color: #23232a !important;
}

html.invert-dark .bg-green-100 {
    background-color: #223322 !important;
}

html.invert-dark .bg-red-100 {
    background-color: #332222 !important;
}

html.invert-dark .text-gray-600,
html.invert-dark .text-gray-800,
html.invert-dark .text-gray-500,
html.invert-dark .text-gray-700 {
    color: #b0b0b8 !important;
}

html.invert-dark .text-red-600 {
    color: #ff6b6b !important;
}

html.invert-dark .text-red-800,
html.invert-dark .bg-red-600 {
    color: #ff4444 !important;
    background-color: #ff4444 !important;
}

html.invert-dark .bg-blue-600 {
    background-color: #23232a !important;
}

html.invert-dark .shadow-lg {
    box-shadow: 0 10px 15px -3px #000c, 0 4px 6px -4px #000c !important;
}