.dice-hud-panel {
    width: min(100%, 440px);
    margin: 10px auto 14px;
    padding: 10px 12px;
    border: 1px solid rgba(80, 180, 255, .34);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(5, 13, 22, .92), rgba(3, 8, 15, .96));
    box-shadow:
        inset 0 0 22px rgba(80, 180, 255, .05),
        0 0 16px rgba(0, 0, 0, .3);
}

.dice-hud-faces {
    display: grid;
    grid-template-columns: repeat(6, 54px);
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.dice-face {
    position: relative;
    min-width: 0;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 1px solid rgba(120, 190, 255, .28);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(13, 25, 38, .96), rgba(4, 9, 17, .96));
    box-shadow:
        inset 0 0 16px rgba(80, 180, 255, .07),
        0 6px 14px rgba(0, 0, 0, .28);
    cursor: default;
    opacity: .42;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        opacity .18s ease,
        transform .18s ease;
}

.dice-face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: grayscale(.75) brightness(.72);
    transition: filter .18s ease;
}

.dice-face.active {
    opacity: 1;
    border-color: rgba(130, 225, 255, .95);
    box-shadow:
    0 0 12px rgba(80,180,255,.45);
}

.dice-face.active img {
    filter: none;
}

.dice-face.selectable {
    cursor: pointer;
    opacity: .85;
    border-color: rgba(120, 220, 255, .62);
}

.dice-face.selectable:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 12px rgba(80, 180, 255, .32),
        0 10px 22px rgba(0, 0, 0, .32);
}

.dice-face.selected {
    opacity: 1;
    border-color: rgba(255, 235, 155, .9);
    box-shadow:
        0 0 12px rgba(80, 180, 255, .45),
        0 0 18px rgba(255, 235, 155, .22);
}

@media (max-width: 760px) {
    .dice-hud-faces {
        grid-template-columns: repeat(3, 54px);
    }
}