/* =========================================================================
   Dés — skins partagés (DiceRoller 3D) et faces statiques (DiceView)
   Aucun jeu ne définit l'apparence d'un dé : le skin vient du profil.

   Refonte premium (vague « premium ») : bords nets, reflet supérieur-gauche,
   pips bien ronds et centrés, ombre douce, léger relief 3D. Les variables
   --dice-* et --dot-* alimentent aussi le cube 3D (dice_3d.css) : ne pas les
   renommer. Trois styles distincts : classique (ivoire), moderne (plat
   indigo), minimal (monochrome).
   ========================================================================= */

/* ---- Faces statiques (aperçu profil, mini-dés) ------------------------- */
.dv {
    --dv-size: 44px;
    --dv-radius: 12px;
    --dv-bg: linear-gradient(145deg, #ffffff 0%, #edf1f6 100%);
    --dv-edge: rgba(0, 0, 0, .12);
    --dv-dot: #1e293b;
    --dv-dot-hi: #64748b;
    --dv-dot-lo: #0f172a;
    --dv-gloss: rgba(255, 255, 255, .6);
    --dv-shadow: 0 1px 2px rgba(16, 20, 30, .16), 0 6px 16px rgba(16, 20, 30, .16);

    position: relative;
    width: var(--dv-size);
    height: var(--dv-size);
    border-radius: var(--dv-radius);
    background: var(--dv-bg);
    border: 1px solid var(--dv-edge);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -2px 3px rgba(0, 0, 0, .07), var(--dv-shadow);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: calc(var(--dv-size) * 0.14);
    box-sizing: border-box;
    flex: 0 0 auto;
}

/* Reflet (gloss) : voile blanc qui s'estompe vers le bas-droit. */
.dv::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--dv-radius) - 1px);
    background: linear-gradient(135deg, var(--dv-gloss) 0%, rgba(255, 255, 255, 0) 46%);
    pointer-events: none;
}

.dv-cell {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
}

/* Pip 3D : sphère douce (point lumineux en haut-gauche, ombre en bas). */
.dv-pip {
    width: 74%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, var(--dv-dot-hi) 0%, var(--dv-dot) 46%, var(--dv-dot-lo) 100%);
    box-shadow:
        inset 0 -1px 2px rgba(0, 0, 0, .4),
        0 1px 1px rgba(255, 255, 255, .6);
}

.dv-sm { --dv-size: 30px; --dv-radius: 8px; }
.dv-lg { --dv-size: 64px; --dv-radius: 16px; }

.dv-empty {
    background: transparent;
    border: 1px dashed var(--dv-edge);
    box-shadow: none;
}
.dv-empty::after { display: none; }

/* ---- Skin 1 : classique (ivoire, points ardoise) ----------------------- */
.dv-skin-classic,
.dice-roller-container.dice-skin-classic {
    --dv-bg: linear-gradient(145deg, #ffffff 0%, #efe7da 100%);
    --dv-edge: rgba(0, 0, 0, .14);
    --dv-dot: #1e293b;
    --dv-dot-hi: #64748b;
    --dv-dot-lo: #0f172a;
    --dv-gloss: rgba(255, 255, 255, .62);
    --dv-shadow: 0 1px 2px rgba(16, 20, 30, .18), 0 6px 16px rgba(16, 20, 30, .18);
    --dice-bg: linear-gradient(145deg, #ffffff 0%, #efe7da 100%);
    --dice-bg-selected: linear-gradient(145deg, #e0e7ff 0%, #c7d2fe 100%);
    --dice-border: rgba(0, 0, 0, 0.14);
    --dice-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    --dice-shadow-selected: 0 4px 22px rgba(99, 102, 241, 0.42);
    --dot-color: #1e293b;
    --dot-color-selected: #4f46e5;
}

/* ---- Skin 2 : moderne (plat, accent indigo, plus arrondi) --------------- */
.dv-skin-modern,
.dice-roller-container.dice-skin-modern {
    --dv-bg: linear-gradient(160deg, #ffffff 0%, #eef2ff 100%);
    --dv-edge: rgba(67, 56, 202, .14);
    --dv-dot: #4338ca;
    --dv-dot-hi: #818cf8;
    --dv-dot-lo: #312e81;
    --dv-gloss: rgba(255, 255, 255, .5);
    --dv-shadow: 0 2px 6px rgba(67, 56, 202, .16), 0 8px 20px rgba(67, 56, 202, .12);
    --dice-bg: linear-gradient(160deg, #ffffff 0%, #eef2ff 100%);
    --dice-bg-selected: linear-gradient(160deg, #e0e7ff 0%, #c7d2fe 100%);
    --dice-border: rgba(67, 56, 202, 0.14);
    --dice-shadow: 0 2px 6px rgba(67, 56, 202, .18), 0 8px 20px rgba(67, 56, 202, .12);
    --dice-shadow-selected: 0 6px 26px rgba(67, 56, 202, .46);
    --dot-color: #4338ca;
    --dot-color-selected: #312e81;
}
.dv-skin-modern { --dv-radius: 15px; }

/* ---- Skin 3 : minimal (monochrome, arêtes nettes, sans reflet) ---------- */
.dv-skin-minimal,
.dice-roller-container.dice-skin-minimal {
    --dv-bg: #fbfbfa;
    --dv-edge: #c8c8c4;
    --dv-dot: #18181b;
    --dv-dot-hi: #3f3f46;
    --dv-dot-lo: #09090b;
    --dv-gloss: rgba(255, 255, 255, 0);
    --dv-shadow: 0 1px 2px rgba(16, 20, 30, .10);
    --dice-bg: #fbfbfa;
    --dice-bg-selected: #e4e4e7;
    --dice-border: #c8c8c4;
    --dice-shadow: 0 1px 2px rgba(16, 20, 30, .10);
    --dice-shadow-selected: 0 0 0 2px #18181b;
    --dot-color: #18181b;
    --dot-color-selected: #18181b;
}
.dv-skin-minimal { --dv-radius: 8px; }

/* ---- Accessibilité ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .dv { transition: none; }
}
@media (prefers-contrast: more) {
    .dv { border-width: 2px; --dv-shadow: none; }
}