.mini-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.mini {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--component-tile-radius);
    background: linear-gradient(
        0deg,
        var(--component-tile-surface),
        var(--component-tile-surface-highlight)
    );
    color: var(--component-tile-text);

    &.green {
        --component-tile-surface: var(--component-tile-green-surface);
        --component-tile-surface-highlight:
            var(--component-tile-green-surface-highlight);
        --component-tile-surface-gradient: linear-gradient(
            0deg,
            var(--component-tile-green-surface),
            var(--component-tile-green-surface-highlight)
        );
        --component-tile-text: var(--text-primary);
    }

    &.blue {
        --component-tile-surface: var(--component-tile-blue-surface);
        --component-tile-surface-highlight:
            var(--component-tile-blue-surface-highlight);
        --component-tile-surface-gradient: linear-gradient(
            0deg,
            var(--component-tile-blue-surface),
            var(--component-tile-blue-surface-highlight)
        );
        --component-tile-text: var(--text-primary);
    }

    &.red {
        --component-tile-surface: var(--component-tile-red-surface);
        --component-tile-surface-highlight:
            var(--component-tile-red-surface-highlight);
        --component-tile-surface-gradient: linear-gradient(
            0deg,
            var(--component-tile-red-surface),
            var(--component-tile-red-surface-highlight)
        );
        --component-tile-text: var(--text-on-accent);
    }

    &.purple {
        --component-tile-surface: var(--component-tile-purple-surface);
        --component-tile-surface-highlight:
            var(--component-tile-purple-surface-highlight);
        --component-tile-surface-gradient: linear-gradient(
            0deg,
            var(--component-tile-purple-surface),
            var(--component-tile-purple-surface-highlight)
        );
        --component-tile-text: var(--text-on-accent);
    }

    &.gold {
        --component-tile-surface: var(--component-tile-gold-surface);
        --component-tile-surface-highlight:
            var(--component-tile-gold-surface-highlight);
        --component-tile-surface-gradient: linear-gradient(
            0deg,
            var(--component-tile-gold-surface),
            var(--component-tile-gold-surface-highlight)
        );
        --component-tile-text: var(--text-on-gold);
    }

    > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        line-height: 1;
        font-weight: var(--font-weight-heading);

        > :not(:first-child) {
            font-size: 0.55rem;
        }
    }

    > .count {
        position: absolute;
        top: -0.35rem;
        right: -0.35rem;
        padding: 0.1rem 0.22rem;
        border-radius: 0.35rem;
        background: var(--overlay-inverse-strong);
        color: var(--text-on-accent);
        font-size: 0.55rem;
        line-height: 1;
    }

    > .effect {
        position: absolute;
        top: -0.5rem;
        left: -0.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.3rem;
        height: 1.3rem;

        .effect-icon {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
        }
    }
}

@supports (corner-shape: superellipse(0.5)) {
    .mini {
        corner-shape: var(--component-tile-corner-shape);
    }
}

.dialog.inventory {
    width: min(100%, 680px);

    > header {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-4);
        align-items: center;
        margin-bottom: var(--space-4);

        h2 {
            margin: 0;
            min-width: 0;
            color: var(--text-primary);
            font-size: var(--font-size-title-md);
            font-weight: var(--font-weight-heading);
            line-height: var(--font-leading-tight);
            overflow-wrap: anywhere;
        }

        button {
            width: var(--component-icon-button-size);
            height: var(--component-icon-button-size);
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 999px;
            background: var(--surface-dialog-section);
            color: var(--text-primary);
            transition:
                background var(--motion-duration-fast) var(--motion-ease-out),
                transform var(--motion-duration-fast) var(--motion-ease-out);

            &:hover {
                background: var(--surface-raised);
                transform: scale(1.04);
            }
        }
    }

    > div {
        display: grid;
        gap: var(--space-3);
    }

    .inventory-empty-message {
        margin: 0;
        padding: 0.85rem 1rem;
        border: none;
        border-radius: var(--radius-lg);
        background: var(--surface-inset);
        box-shadow: none;
        color: var(--text-secondary);
        font-size: var(--font-size-body-md);
        line-height: 1.35;
    }

    section {
        padding: var(--space-4);
        border-radius: var(--radius-lg);
        background: var(--surface-dialog-section);

        .section-header {
            margin-bottom: var(--space-2);
        }

        .section-header-title {
            color: var(--text-primary);
        }

        .inventory-help {
            max-width: 58ch;
            margin: 0 0 var(--space-3);
            color: var(--text-secondary);
            font-size: var(--font-size-body-sm);
            line-height: 1.32;
        }

        > p:not(.inventory-help) {
            margin: 0;
            padding: 0.85rem 1rem;
            border: none;
            border-radius: var(--radius-lg);
            background: var(--surface-inset);
            box-shadow: none;
            color: var(--text-secondary);
            font-size: var(--font-size-body-md);
            line-height: 1.35;
        }

        .inventory-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .effect-unlock-mention {
            color: var(--text-tertiary);
            font-size: calc(var(--font-size-body-sm) * 0.88);
            line-height: 1.25;
        }
    }
}