/* ============================================
   DICE ROLLER
   ============================================ */

/* Die type button row */
.die-type-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nb-space-sm);
}

.die-type-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: var(--nb-space-sm);
    background: var(--nb-bg-layer-2);
    border: 1px solid var(--nb-border-subtle);
    border-radius: var(--nb-radius-md);
    color: var(--nb-text-secondary);
    font-size: 0.875rem;
    font-weight: 700;
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    cursor: pointer;
    transition: all var(--nb-transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.die-type-btn:hover {
    background: var(--nb-accent-tint-soft);
    border-color: var(--nb-accent-primary);
    color: var(--nb-accent-hover);
}

.die-type-btn:active { transform: scale(0.95); }

.die-type-btn:focus-visible {
    outline: 2px solid var(--nb-accent-primary);
    outline-offset: 2px;
}

/* Active dice tray — chips showing added dice */
.dice-tray {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nb-space-sm);
    min-height: 44px;
    padding: var(--nb-space-xs);
    background: var(--nb-bg-layer-2);
    border-radius: var(--nb-radius-md);
    border: 1px solid var(--nb-border-subtle);
    align-items: center;
}

.dice-tray-empty {
    font-size: 0.8125rem;
    color: var(--nb-text-muted);
    padding: var(--nb-space-sm);
}

.dice-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px var(--nb-space-sm);
    background: var(--nb-bg-layer-1);
    border: 1px solid var(--nb-accent-border-soft);
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--nb-accent-hover);
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    cursor: default;
    user-select: none;
}

.dice-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: transparent;
    border: none;
    color: var(--nb-text-muted);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: all var(--nb-transition-fast);
    font-size: 0.875rem;
    line-height: 1;
}

.dice-chip-remove:hover { background: var(--nb-error-surface-soft); color: var(--nb-state-error); }

/* ============================================
   DICE ARENA — the rolling display area
   ============================================ */
.dice-arena {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nb-space-lg);
    justify-content: center;
    align-items: center;
    min-height: 140px;
    padding: var(--nb-space-lg);
    background: var(--nb-bg-layer-2);
    border-radius: var(--nb-radius-lg);
    position: relative;
    overflow: hidden;
}

.dice-arena-empty {
    font-size: 0.875rem;
    color: var(--nb-text-muted);
    text-align: center;
    padding: var(--nb-space-md);
}

/* Results summary bar */
.dice-results {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--nb-space-sm);
    padding: var(--nb-space-sm) var(--nb-space-md);
    background: var(--nb-bg-layer-2);
    border-radius: var(--nb-radius-md);
    min-height: 44px;
}

.results-breakdown {
    font-size: 0.8125rem;
    color: var(--nb-text-muted);
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    flex: 1;
}

.results-total-group {
    display: flex;
    align-items: center;
    gap: var(--nb-space-sm);
}

.results-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--nb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.results-total {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--nb-text-primary);
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    min-width: 2ch;
    text-align: right;
    transition: color var(--nb-transition-fast);
}

/* ============================================
   d6 — TRUE CSS 3D CUBE
   ============================================ */
.die-scene {
    perspective: 600px;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.die-cube {
    width: 80px;
    height: 80px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.1, 1);
    cursor: default;
}

.die-cube.rolling {
    /* JS sets transform directly during roll */
}

.die-face {
    position: absolute;
    width: 80px;
    height: 80px;
    background: var(--nb-bg-layer-1);
    border: 2px solid var(--nb-accent-border-medium);
    border-radius: var(--nb-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--nb-text-primary);
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    backface-visibility: hidden;
    user-select: none;
}

/* Six face positions */
.die-face-1 { transform: rotateY(0deg)    translateZ(40px); }
.die-face-2 { transform: rotateY(180deg)  translateZ(40px); }
.die-face-3 { transform: rotateY(90deg)   translateZ(40px); }
.die-face-4 { transform: rotateY(-90deg)  translateZ(40px); }
.die-face-5 { transform: rotateX(90deg)   translateZ(40px); }
.die-face-6 { transform: rotateX(-90deg)  translateZ(40px); }

/* Dot pips for d6 */
.die-pips {
    display: grid;
    width: 60px;
    height: 60px;
    gap: 6px;
    position: relative;
}

.pip {
    width: 10px;
    height: 10px;
    background: var(--nb-accent-primary);
    border-radius: 50%;
    transition: background var(--nb-transition-fast);
}

/* Pip layouts using grid areas */
.pips-1 { grid-template-areas: ". . ." ". c ." ". . ."; }
.pips-2 { grid-template-areas: ". . a" ". . ." "b . ."; }
.pips-3 { grid-template-areas: ". . a" ". c ." "b . ."; }
.pips-4 { grid-template-areas: "a . b" ". . ." "c . d"; }
.pips-5 { grid-template-areas: "a . b" ". c ." "d . e"; }
.pips-6 { grid-template-areas: "a . b" "c . d" "e . f"; }

.pips-1 .pip { grid-area: c; }
.pips-2 .pip:nth-child(1) { grid-area: a; } .pips-2 .pip:nth-child(2) { grid-area: b; }
.pips-3 .pip:nth-child(1) { grid-area: a; } .pips-3 .pip:nth-child(2) { grid-area: c; } .pips-3 .pip:nth-child(3) { grid-area: b; }
.pips-4 .pip:nth-child(1) { grid-area: a; } .pips-4 .pip:nth-child(2) { grid-area: b; } .pips-4 .pip:nth-child(3) { grid-area: c; } .pips-4 .pip:nth-child(4) { grid-area: d; }
.pips-5 .pip:nth-child(1) { grid-area: a; } .pips-5 .pip:nth-child(2) { grid-area: b; } .pips-5 .pip:nth-child(3) { grid-area: c; } .pips-5 .pip:nth-child(4) { grid-area: d; } .pips-5 .pip:nth-child(5) { grid-area: e; }
.pips-6 .pip:nth-child(1) { grid-area: a; } .pips-6 .pip:nth-child(2) { grid-area: b; } .pips-6 .pip:nth-child(3) { grid-area: c; } .pips-6 .pip:nth-child(4) { grid-area: d; } .pips-6 .pip:nth-child(5) { grid-area: e; } .pips-6 .pip:nth-child(6) { grid-area: f; }

/* Result flash highlight */
.die-cube.result-flash .die-face { border-color: var(--nb-accent-primary); }
.die-cube.result-flash .pip { background: var(--nb-accent-hover); }

/* ============================================
   NON-CUBE DICE (d4, d8, d10, d12, d20, d100)
   Perspective wrapper + 3D tumble animation
   ============================================ */

/* Perspective scene — makes rotateX/Y look 3D */
.die-flat-scene {
    perspective: 500px;
    perspective-origin: 50% 40%;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.die-flat {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.die-flat-shape {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.die-flat-shape svg {
    width: 100%;
    height: 100%;
}

.die-flat-value {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--nb-text-primary);
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    text-align: center;
    transition: filter var(--nb-transition-fast);
}

.die-flat-label {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--nb-text-muted);
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 3D tumble animation for non-cube dice.
   Uses rotateX + rotateZ combinations within a perspective scene
   to give a genuine 3D "rolling" feel without backface issues.
   The blur at peak rotation conceals mid-spin aliasing. */
@keyframes dieTumble {
    0%   { transform: rotateX(0deg)   rotateZ(0deg);    filter: blur(0);     }
    12%  { transform: rotateX(-28deg) rotateZ(32deg);   filter: blur(1px);   }
    25%  { transform: rotateX(50deg)  rotateZ(-28deg);  filter: blur(3px);   }
    38%  { transform: rotateX(-65deg) rotateZ(55deg);   filter: blur(4px);   }
    50%  { transform: rotateX(70deg)  rotateZ(-40deg);  filter: blur(4px);   }
    62%  { transform: rotateX(-50deg) rotateZ(22deg);   filter: blur(2.5px); }
    75%  { transform: rotateX(30deg)  rotateZ(-12deg);  filter: blur(1.5px); }
    88%  { transform: rotateX(-12deg) rotateZ(5deg);    filter: blur(0.5px); }
    100% { transform: rotateX(0deg)   rotateZ(0deg);    filter: blur(0);     }
}

.die-flat.rolling {
    /* Duration overridden inline by JS for speed multiplier */
    animation: dieTumble 0.9s cubic-bezier(0.25, 0.1, 0.1, 1) forwards;
}

/* Number cycling during tumble */
@keyframes numberCycle {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

.die-flat.rolling .die-flat-value {
    animation: numberCycle 0.1s linear infinite;
}

/* Die size variants at wider breakpoint */
@media (min-width: 768px) {
    .die-scene       { width: 100px; height: 100px; perspective: 700px; }
    .die-cube        { width: 100px; height: 100px; }
    .die-face        { width: 100px; height: 100px; font-size: 2.25rem; }
    .die-face-1      { transform: rotateY(0deg)   translateZ(50px); }
    .die-face-2      { transform: rotateY(180deg) translateZ(50px); }
    .die-face-3      { transform: rotateY(90deg)  translateZ(50px); }
    .die-face-4      { transform: rotateY(-90deg) translateZ(50px); }
    .die-face-5      { transform: rotateX(90deg)  translateZ(50px); }
    .die-face-6      { transform: rotateX(-90deg) translateZ(50px); }
    .die-pips        { width: 72px; height: 72px; }
    .die-flat-scene  { width: 100px; height: 100px; }
    .die-flat        { width: 100px; height: 100px; }
    .die-flat-value  { font-size: 1.875rem; }
}